/* Bondou mock-up. Brand (shared/FASE0_MARCA.md): cream dominates, raspberry / coral / lilac in key moments, the
   guideline's flat wavy ribbon is the page's line. Archivo expanded and Inter stand in for Shaphiro and Helvetica Neue. */
@font-face { font-family: 'Archivo'; src: url('/fonts/Archivo-Latin.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Corinthia'; src: url('/fonts/Corinthia-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-Latin.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
:root {
  --crema: #f2ece9; --frambuesa: #ba1f5d; --coral: #ee5943; --lila: #d7bfd8; --rosa: #f5e0eb;
  --tinta: #241f20; --suave: #5f5552; --gutter: clamp(16px, 4vw, 64px);
  --curva: cubic-bezier(.2, .7, .1, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--crema); color: var(--tinta); }
html { overflow-x: clip; }   /* wide ribbons and the map never widen the page on a phone */
body { font: 400 16px/1.6 'Inter', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.cargando { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, .grande { font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif; font-stretch: 125%; font-weight: 560; letter-spacing: -.03em; line-height: .96; margin: 0 0 24px; text-wrap: balance; }
h1 { font-size: clamp(42px, 7.4vw, 124px); }
h2 { font-size: clamp(34px, 4.8vw, 76px); }
p { text-wrap: pretty; margin: 0 0 16px; max-width: 46ch; }
.ante { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--suave); margin-bottom: 18px; }
.num { font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: .12em; color: var(--suave); }

/* ---------- opening curtain: the logo, the ribbon drawn once, then it lifts */
.telon { position: fixed; inset: 0; z-index: 50; background: var(--crema); display: grid; place-content: center; justify-items: center; gap: 10px;
  transition: transform 1.1s var(--curva) .15s; }
.telon svg { width: 220px; overflow: visible; }
.telon path { fill: none; stroke: var(--coral); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; animation: trazo 1.3s var(--curva) .2s forwards; }
@keyframes trazo { to { stroke-dashoffset: 0; } }
.listo .telon { transform: translateY(-101%); }

/* ---------- header */
.barra { position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 18px var(--gutter);
  transition: background .5s, backdrop-filter .5s, padding .5s; }
.barra.fondo { background: color-mix(in srgb, var(--crema) 78%, transparent); backdrop-filter: blur(14px); padding-top: 12px; padding-bottom: 12px; }
.barra img { width: 124px; height: auto; }
.barra nav { display: flex; gap: 28px; font-size: 13px; }
.barra nav a { text-decoration: none; position: relative; }
.barra nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--curva); }
.barra nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.pedir { display: inline-block; font-size: 13px; text-decoration: none; padding: 11px 20px; border-radius: 999px; background: var(--frambuesa); color: #fff; transition: background .3s; will-change: transform; }
.pedir span { display: inline-block; will-change: transform; }
.pedir .largo { display: inline; }   /* keeps its leading space */
.pedir:hover { background: var(--coral); }

/* ---------- reveals */
.palabras .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.palabras .w > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--curva); transition-delay: calc(var(--i) * 60ms); }
.palabras.visto .w > span { transform: none; }
.revela { opacity: 0; transform: translateY(24px); transition: opacity 1s ease, transform 1.1s var(--curva); transition-delay: .25s; }
.revela.visto { opacity: 1; transform: none; }

:root { --barra-nav: 0px; }
@supports (height: 100lvh) { :root { --barra-nav: calc(100lvh - 100svh); } }
.pegado { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- 1 · push-in */
.entrada { height: 340vh; --p: 0; }
.entrada .titular { position: absolute; z-index: 2; left: var(--gutter); top: 118px; right: var(--gutter);
  opacity: calc(1 - var(--p) * 3.2); transform: translateY(calc(var(--p) * -160px)); }
.entrada h1 { max-width: 12ch; }
.entrada .bajada { color: var(--suave); }
.pie-foto { position: absolute; z-index: 2; right: var(--gutter); bottom: 9vh; display: grid; gap: 4px; max-width: 280px; padding: 18px 22px; background: color-mix(in srgb, var(--crema) 82%, transparent); backdrop-filter: blur(10px); border-radius: 4px;
  opacity: clamp(0, (var(--p) - .78) * 6, 1); transform: translateY(calc((1 - clamp(0, (var(--p) - .78) * 6, 1)) * 20px)); }
.pie-foto b { font-family: 'Archivo', sans-serif; font-stretch: 118%; font-weight: 560; font-size: 22px; }
.pie-foto span:last-child { font-size: 14px; color: var(--suave); }
.baja { position: absolute; z-index: 2; left: var(--gutter); bottom: 28px; display: grid; justify-items: start; gap: 10px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--suave); opacity: calc(1 - var(--p) * 8); }
.baja i { width: 1px; height: 42px; background: linear-gradient(var(--tinta), transparent); animation: baja 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes baja { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- 2 · ribbon and phrases */
.cruce { height: 36vh; margin-top: -18vh; position: relative; z-index: 3; pointer-events: none; }
.cruce svg { width: 100%; height: 100%; overflow: visible; }
.cruce path, .cinta-fondo path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cruce path { stroke: var(--coral); stroke-width: 34px; vector-effect: non-scaling-stroke; }
.cinta-texto { overflow: hidden; padding: 6vh 0 14vh; }
.pista { display: flex; align-items: center; gap: 4vw; width: max-content; will-change: transform; }
.pista span { font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 560; letter-spacing: -.03em; font-size: clamp(44px, 8vw, 140px); line-height: 1; white-space: nowrap; color: var(--frambuesa); }
.pista span:nth-of-type(3n+2) { color: transparent; -webkit-text-stroke: 1.5px var(--frambuesa); }
.pista i { width: clamp(18px, 2vw, 32px); aspect-ratio: 1.5; border-radius: 50%; border: 3px solid var(--coral); flex: none; }

/* ---------- 3 · showcase sideways */
/* ---------- 3 · showcase: a turning piece, tinted air, its name huge behind it */
.vitrina { height: 520vh; }
.vitrina .pegado { background: var(--tinte, #f7d9d2); transition: background-color .2s linear; }
.vitrina canvas { touch-action: pan-y; }
.vitrina .giro { cursor: grab; z-index: 2; }
.vitrina .giro:active { cursor: grabbing; }
.nombre-gigante { position: absolute; z-index: 3; /* over the piece's faded square, which would veil it; the piece sits below it anyway */ left: 0; right: 0; top: 15vh; height: 0; pointer-events: none; }
/* the name sits ABOVE the piece, never behind it: sized in JS to fit the width, two lines on phones */
.nombre-gigante span { position: absolute; left: 50%; top: 0; transform: translateX(-50%); font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 600; letter-spacing: -.04em; line-height: .86;
  text-align: center; white-space: nowrap; color: var(--letra); transition: opacity .7s ease, transform 1s var(--curva); }
.nombre-gigante span.fuera { opacity: 0; transform: translate(-50%, 14%); }
.vitrina .cabecera { position: absolute; z-index: 4; top: 104px; left: var(--gutter); margin: 0; }
.fichas { position: absolute; z-index: 4; left: var(--gutter); bottom: 9vh; width: min(420px, 34vw); }
.fichas article { position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .5s ease, transform .7s var(--curva); }
.fichas article.activa { opacity: 1; transform: none; pointer-events: auto; }
.fichas h3 { font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 560; letter-spacing: -.03em; line-height: .95; font-size: clamp(34px, 3.6vw, 56px); margin: 10px 0 14px; }
.fichas p { color: var(--suave); margin-bottom: 22px; }
/* "Por dentro": a pastry cross-section drawn like a technical sheet (vitrina.js builds the slice from the list): a slice
   in volume — front face, shaded side, top — one band per layer in its colour and thickness with a fine grain; hairline
   leaders run from each layer to its numbered name. On each new piece the layers settle from the base up, then the
   leaders draw and the names arrive. */
.corte { margin: 0 0 26px; }
.fichas .por-dentro { margin: 0 0 6px; font-family: 'Corinthia', cursive; font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--letra, var(--frambuesa)); }
.lamina-corte { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: start; }
.rebanada { display: block; overflow: visible; filter: drop-shadow(0 14px 14px rgba(36,31,32,.18)); }
.rebanada .capa { opacity: 0; transform: translateY(-26px); transition: opacity .45s ease, transform .8s cubic-bezier(.3,1.35,.5,1); transition-delay: calc(var(--i) * 150ms + 120ms); }
.rebanada .guia { stroke: var(--tinta); stroke-opacity: .45; stroke-width: .8; fill: none; stroke-dasharray: 90; stroke-dashoffset: 90; transition: stroke-dashoffset .7s var(--curva); transition-delay: calc(var(--n) * 150ms + 300ms + var(--i) * 90ms); }
.rebanada .nudo { fill: var(--tinta); opacity: 0; transition: opacity .3s; transition-delay: calc(var(--n) * 150ms + 300ms + var(--i) * 90ms); }
.capas { list-style: none; margin: 0; padding: 0; position: relative; color: var(--tinta); }
.capas li { position: absolute; left: 0; top: var(--y); transform: translateY(-50%); display: flex; align-items: baseline; gap: 10px; white-space: nowrap;
  opacity: 0; transition: opacity .5s, transform .6s var(--curva); transition-delay: calc(var(--n) * 150ms + 520ms + var(--i) * 90ms); }
.capas li i { display: none; }
.capas .nc { font-size: 10px; letter-spacing: .14em; font-variant-numeric: tabular-nums; color: var(--suave); }
.capas span { font-family: 'Archivo', sans-serif; font-stretch: 112%; font-weight: 520; font-size: 16px; letter-spacing: -.01em; }
.fichas article.activa .rebanada .capa { opacity: 1; transform: none; }
.fichas article.activa .rebanada .guia { stroke-dashoffset: 0; }
.fichas article.activa .rebanada .nudo { opacity: .7; }
.fichas article.activa .capas li { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rebanada .capa, .rebanada .guia, .rebanada .nudo, .capas li { transition: none; } }
.fichas .pedir { font-size: 14px; padding: 13px 22px; }
/* arrows and dots: step from one piece to the next */
.flechas { position: absolute; z-index: 5; right: var(--gutter); bottom: 9vh; display: flex; align-items: center; gap: 18px; }
.flecha { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; color: var(--tinta); background: rgba(255,255,255,.62); backdrop-filter: blur(8px); box-shadow: 0 10px 24px -14px rgba(36,31,32,.5); transition: transform .4s var(--curva), background .3s, opacity .3s; }
.flecha svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.flecha:hover { background: #fff; transform: scale(1.06); }
.flecha:disabled { opacity: .3; cursor: default; transform: none; }
.puntos { display: flex; gap: 10px; }
.puntos i { cursor: pointer; }
.puntos i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--tinta); opacity: .35; transition: background .4s, opacity .4s, transform .4s; }
.puntos i.on { background: var(--tinta); opacity: 1; transform: scale(1.25); }
.arrastra { position: absolute; z-index: 4; left: 50%; bottom: 4vh; transform: translateX(-50%); margin: 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--suave); display: flex; gap: 10px; align-items: center; }
.arrastra::before, .arrastra::after { content: ''; width: 22px; height: 1px; background: currentColor; opacity: .5; }
@media (max-width: 860px) {
  .vitrina .cabecera { top: 88px; }
  .nombre-gigante { top: 138px; }
  .fichas { width: auto; right: var(--gutter); bottom: calc(3svh + var(--barra-nav)); }
  .fichas article .num { display: none; }
  .fichas .pedir { font-size: 13px; padding: 11px 18px; }
  .corte { margin-bottom: 10px; }
  .fichas h3 { font-size: 34px; margin: 6px 0 8px; }
  .fichas p { margin-bottom: 14px; font-size: 14px; }
  .flechas { top: 80px; bottom: auto; gap: 10px; }
  .flecha { width: 42px; height: 42px; }
  .flecha svg { width: 18px; height: 18px; }
  .corte { margin-bottom: 14px; }
  .fichas .por-dentro { font-size: 30px; margin-bottom: 0; }
  .capas span { font-size: 13px; }
  .capas .nc { display: none; }
  .arrastra { display: none; }
}

/* ---------- 4 · story: an architect's sheet drawn by the scroll, five chapters, her photo taped on at the end */
.historia { position: relative; height: 560vh; background: var(--frambuesa); color: #fff; --p: 0; --foto: 0; }
.historia .pegado { display: grid; grid-template-columns: minmax(300px, 32%) 1fr; gap: clamp(24px, 4vw, 72px); align-items: center; padding: 96px var(--gutter) 92px;
  background: radial-gradient(120% 90% at 70% 40%, #c42a68 0%, var(--frambuesa) 55%, #a01a50 100%); }
.historia .ante { color: rgba(255,255,255,.7); }
.historia h2.autora { font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; letter-spacing: -.01em; margin-bottom: 4vh; color: rgba(255,255,255,.9); }
.capitulos { list-style: none; margin: 0; padding: 0; display: grid; }
.capitulos li { grid-area: 1 / 1; opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .9s var(--curva); pointer-events: none; }
.capitulos li.pasado { transform: translateY(-28px); }
.capitulos li.activo { opacity: 1; transform: none; pointer-events: auto; }
.capitulos .cn { display: block; font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 600; font-size: clamp(64px, 8vw, 132px); line-height: .9; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(242,236,233,.75); }
.capitulos .etapa { margin: 16px 0 6px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #ffd2dc; max-width: none; }
.capitulos h3 { font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 560; font-size: clamp(28px, 2.6vw, 42px); letter-spacing: -.025em; line-height: 1.02; margin: 0 0 10px; }
.capitulos h4 { font-family: 'Archivo', sans-serif; font-stretch: 112%; font-weight: 560; font-size: 17px; margin: 0 0 10px; color: rgba(255,255,255,.75); }
.capitulos p:last-child { color: rgba(255,255,255,.88); font-size: 16px; line-height: 1.6; max-width: 40ch; margin: 0; }
.mesa { position: relative; height: 100%; display: grid; place-items: center; min-height: 0; }
.lamina { width: 100%; max-height: 100%; overflow: visible; filter: drop-shadow(0 0 .5px rgba(242,236,233,.4)); }
.lamina .linea * , .lamina .linea { fill: none; stroke: #f2ece9; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lamina .fina, .lamina .linea .fina { stroke-width: .8; stroke: rgba(242,236,233,.7); fill: none; }
.lamina pattern .fina { stroke: rgba(255,255,255,.07); }
.lamina .gruesa { stroke-width: 2.6; }
.lamina .eje { stroke-width: .8; stroke-dasharray: 18 5 3 5; stroke: rgba(242,236,233,.55); }
.lamina .corte { stroke-width: 3; stroke: var(--coral); }
.lamina .relleno { fill: #ec7d6f; stroke: none; opacity: 0; }
.lamina .punto { fill: #f2ece9; opacity: 0; }
.lamina text { fill: #f2ece9; opacity: 0; font-family: 'Inter', sans-serif; }
.lamina .rotulo { font-size: 12px; letter-spacing: .18em; }
.lamina .cota { font-family: 'Archivo', sans-serif; font-stretch: 118%; font-weight: 560; font-size: 22px; }
.lamina .nota-texto { font-size: 17px; font-style: italic; }
.lamina .titulo-lamina { font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 600; font-size: 26px; }
.lamina rect[fill] { opacity: 0; }
/* chapter 5: the drawn sheet gives way to the photo of the real piece on its drawing (IMG-13) */
.historia { --real: 0; }
.lamina { opacity: calc(1 - var(--real) * .92); }
.foto-plano { position: absolute; top: 50%; left: 50%; height: 100%; aspect-ratio: 4 / 5; margin: 0; border-radius: 3px; overflow: hidden; pointer-events: none;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.6); opacity: min(1, calc(var(--real) * 6)); transform: translate(-62%, -50%);
  clip-path: inset(calc((1 - var(--real)) * 100%) 0 0 0); }   /* built from the bottom up over the drawing */
.foto-plano img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .foto-plano { transform: translate(-58%, -50%); } }
/* her real photo lands on the sheet in the last chapter, taped down */
.foto-ap { position: absolute; z-index: 3; right: 1%; bottom: 3%; width: clamp(170px, 18vw, 270px); margin: 0; background: #fff; padding: 10px 10px 34px; border-radius: 2px; color: var(--tinta); font-size: 12px;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.55); opacity: var(--foto); transform: translateY(calc((1 - var(--foto)) * 30vh)) rotate(calc(4deg + (1 - var(--foto)) * 10deg)); }
.foto-ap::before { content: ''; position: absolute; left: 50%; top: -14px; width: 92px; height: 28px; transform: translateX(-50%) rotate(-3deg); background: rgba(242,236,233,.72); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.foto-ap img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 52% 40%; margin-bottom: 10px; }
.foto-ap figcaption { font-size: 12px; }
.linea-tiempo { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 30px; display: flex; justify-content: space-between; margin: 0; padding: 14px 0 0; list-style: none;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.linea-tiempo::before, .linea-tiempo::after { content: ''; position: absolute; left: 0; top: 0; height: 2px; border-radius: 2px; }
.linea-tiempo::before { right: 0; background: rgba(255,255,255,.16); }
.linea-tiempo::after { width: calc(var(--p) * 100%); background: var(--coral); }
.linea-tiempo li { transition: color .4s; }
.linea-tiempo li.on { color: #fff; }
@media (max-width: 860px) {
  /* phones: the text always gets its full height (the tallest chapter), the drawing takes whatever is left above it, the
     timeline is one compact line at the bottom, clear of the text and of the browser bar */
  .historia .pegado { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; gap: 10px;
    padding: 80px var(--gutter) calc(56px + var(--barra-nav)); }
  .historia .mesa { grid-row: 1; height: 100%; min-height: 0; }
  .historia .relato { grid-row: 2; }
  .historia h2.autora { font-size: 15px; margin-bottom: 0; }
  .capitulos .cn { display: none; }
  .capitulos .etapa { margin-top: 10px; font-size: 10px; }
  .capitulos h3 { font-size: 24px; margin-bottom: 4px; }
  .capitulos h4 { font-size: 14px; margin-bottom: 6px; }
  .capitulos p:last-child { font-size: 14px; line-height: 1.5; }
  .capitulos .cn { font-size: 56px; }
  .capitulos h3 { margin: 6px 0 6px; }
  .capitulos p { font-size: 15px; }
  /* her photo: pinned to the top corner of the sheet, always there, never sliding over the text */
  .foto-ap { width: min(34vw, 150px); padding: 5px 5px 18px; right: 0; top: 2%; bottom: auto; opacity: 1; transform: rotate(4deg); }
  .historia .relato > .ante { display: none; }   /* the name says it; the label would only take height */
  .historia h2.autora { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; margin: 4px 0 0; }
  .foto-ap figcaption { display: none; }
  .linea-tiempo { bottom: calc(16px + var(--barra-nav)); font-size: 10px; letter-spacing: .14em; justify-content: flex-start; padding-top: 10px; }
  .linea-tiempo li { display: none; }
  .linea-tiempo li.on:not(:has(+ li.on)) { display: block; color: #fff; }   /* only the current stage */
}
.dentro { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr .8fr; gap: clamp(28px, 7vw, 120px); align-items: center; }
.polaroid { margin: 0; background: #fff; padding: 12px 12px 40px; border-radius: 3px; box-shadow: 0 40px 80px -36px rgba(0,0,0,.55); max-width: 380px; justify-self: center; color: var(--tinta); font-size: 13px;
  transform: rotate(calc(2deg + var(--g, 0) * 4deg)) translateY(calc(var(--g, 0) * -30px)); }
.polaroid img { width: 100%; aspect-ratio: 3 / 3.6; object-fit: cover; object-position: 50% 100%; margin-bottom: 12px; }   /* crops the Instagram badge */

/* ---------- 5 · the cake */
/* the cake in three acts (tortas.js): cream and giant words, then lights down to raspberry with a cream spotlight,
   ringed words and the steps, then a burst and the order button. The canvas paints the room and the spotlight. */
.tortas { height: 460vh; --q: 0; --pal: 1; --luz: 0; --anillo: 0; --lado: 0; --fin: 0; }
.tortas .giro-torta { z-index: 1; cursor: grab; touch-action: pan-y; }
.tortas .giro-torta:active { cursor: grabbing; }
.tortas .fiesta { z-index: 5; pointer-events: none; }
.gigante-torta { position: absolute; z-index: 2; left: 0; right: 0; top: 12vh; pointer-events: none; opacity: var(--pal);
  font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 600; letter-spacing: -.045em; line-height: .88; font-size: clamp(52px, 12.5vw, 220px); color: var(--frambuesa); }
.gigante-torta span { display: block; white-space: nowrap; }
.gigante-torta span:first-child { padding-left: var(--gutter); transform: translateX(calc(var(--q) * -60vw)); }
.gigante-torta span:last-child { text-align: right; padding-right: var(--gutter); transform: translateX(calc(var(--q) * 60vw)); color: transparent; -webkit-text-stroke: 2px var(--frambuesa); }
.anillo { position: absolute; z-index: 2; left: 50%; top: 50%; width: var(--d, 600px); height: var(--d, 600px); margin: calc(var(--d, 600px) / -2) 0 0 calc(var(--d, 600px) / -2);
  overflow: visible; pointer-events: none; will-change: transform; opacity: var(--anillo); }
.anillo text { font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 560; font-size: 27px; letter-spacing: .04em; fill: #f2ece9; text-transform: uppercase; }
.tortas .lado { position: absolute; z-index: 3; left: var(--gutter); top: 50%; max-width: 300px; color: #fff; opacity: var(--lado); transform: translateY(calc(-50% + (1 - var(--lado)) * 30px)); }
.tortas .lado .ante { color: rgba(255,255,255,.7); }
.tortas h2 { font-size: clamp(34px, 3.4vw, 54px); }
.pasos { position: absolute; z-index: 3; right: var(--gutter); top: 50%; transform: translateY(-50%); width: min(290px, 22vw); margin: 0; padding: 0; list-style: none; display: grid; gap: 30px; color: #fff; }
.pasos li { display: grid; gap: 4px; padding-left: 18px; border-left: 2px solid rgba(255,255,255,.25); opacity: 0; transform: translateX(24px); transition: opacity .7s ease, transform .9s var(--curva), border-color .7s; }
.pasos li.visto { opacity: 1; transform: none; border-color: var(--coral); }
.pasos .num { color: rgba(255,255,255,.6); }
.pasos b { font-family: 'Archivo', sans-serif; font-stretch: 118%; font-weight: 560; font-size: 22px; letter-spacing: -.01em; }
.pasos li > span:last-child { font-size: 15px; color: rgba(255,255,255,.8); }
.tortas .final { position: absolute; z-index: 4; left: 50%; bottom: 5vh; display: grid; justify-items: center; gap: 10px; text-align: center; color: #fff;
  opacity: var(--fin); transform: translate(-50%, calc((1 - var(--fin)) * 40px)); pointer-events: none; }
.tortas .final .pedir { pointer-events: auto; background: #f2ece9; color: var(--frambuesa); font-weight: 600; box-shadow: 0 18px 40px -16px rgba(0,0,0,.45); }
.tortas .final .pedir:hover { background: #fff; }
.tortas .final p { margin: 0; font-size: 14px; color: rgba(255,255,255,.85); }
@media (max-width: 860px) {
  .gigante-torta { top: 14vh; font-size: 19.5vw; }
  .anillo text { font-size: 30px; }
  .tortas .lado { top: 84px; transform: none; max-width: none; }
  .tortas .lado h2, .tortas .lado .cifra { display: none; }
  .pasos { top: auto; bottom: calc(5vh + 108px + var(--barra-nav)); left: var(--gutter); right: var(--gutter); width: auto; transform: none; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .pasos li { padding-left: 10px; transform: translateY(12px); }
  .pasos b { font-size: 13px; line-height: 1.15; } .pasos li > span:last-child { display: none; }
  .pasos { opacity: calc(1 - var(--fin) * 1.4); }   /* the order button takes their place at the end */
  .tortas .final { bottom: calc(4vh + var(--barra-nav)); width: calc(100% - 2 * var(--gutter)); }
}

/* ---------- 6 · build your box (caja.js): the real boxes in CSS 3D, the pieces drop in, the lid closes with the ribbon */
.regalo { padding: 16vh var(--gutter) 12vh; }
.regalo .dentro { grid-template-columns: minmax(300px, .82fr) 1.18fr; }
.armar h2 { font-size: clamp(40px, 5vw, 84px); }
.elige-caja { display: flex; gap: 10px; margin: 30px 0 26px; }
.elige-caja button, .elige-postre button { font: inherit; color: inherit; cursor: pointer; border: 1px solid rgba(36,31,32,.12); background: rgba(255,255,255,.55); transition: transform .4s var(--curva), border-color .3s, background .3s, box-shadow .3s; }
.elige-caja button { flex: 1; display: grid; justify-items: start; align-content: end; gap: 2px; padding: 14px; border-radius: 12px; text-align: left; min-height: 104px; }
.elige-caja i { display: block; background: var(--c); border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(36,31,32,.1), 0 6px 10px -6px rgba(36,31,32,.5); margin-bottom: 10px; }
.elige-caja [data-caja="1"] i { width: 22px; height: 22px; } .elige-caja [data-caja="2"] i { width: 42px; height: 22px; } .elige-caja [data-caja="4"] i { width: 38px; height: 32px; }
.elige-caja b { font-family: 'Archivo', sans-serif; font-stretch: 112%; font-weight: 560; font-size: 15px; }
.elige-caja span { font-size: 12px; color: var(--suave); }
.elige-caja button:hover, .elige-postre button:hover { transform: translateY(-4px); background: #fff; }
.elige-caja button.on { border-color: var(--frambuesa); background: #fff; box-shadow: 0 0 0 1px var(--frambuesa), 0 14px 26px -18px rgba(186,31,93,.6); }
.cuenta-caja { margin: 0 0 12px; min-height: 1.6em; }
.elige-postre { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.elige-postre button { display: grid; justify-items: center; gap: 6px; padding: 12px 6px 12px; border-radius: 14px; font-size: 12px; line-height: 1.25; text-align: center; }
.elige-postre img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.elige-postre button:active { transform: scale(.94); }

.escenario { position: relative; height: min(90vh, 840px); perspective: 2000px; display: grid; place-items: center; padding-top: 24vh; }
.rebote { transform-style: preserve-3d; transform-origin: 50% 70%; will-change: transform; pointer-events: none; }   /* its flat plane sits in front of the back row: only the pieces take clicks */
.caja3d, .caja3d .piezas { pointer-events: none; }
.caja3d .pieza { pointer-events: auto; }
.chispa { position: absolute; z-index: 5; width: 15px; height: 10px; border-radius: 1px; pointer-events: none; background: linear-gradient(135deg, #b8862b, #fbe3a1 50%, #c99a3c); }
.chispa.color { width: 20px; height: 6px; border-radius: 3px; }
.sombra-caja { position: absolute; left: 50%; top: 58%; width: 70%; height: 120px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(36,31,32,.26), transparent); filter: blur(8px); }
.caja3d { position: relative; width: var(--w, 400px); height: var(--d, 400px); transform-style: preserve-3d; transform: rotateX(var(--gx, 58deg)) rotateZ(var(--gz, -30deg));
  transition: width .7s var(--curva), height .7s var(--curva); }
.caja3d .cara { position: absolute; transform-style: preserve-3d; pointer-events: none; }   /* the open lid would take the clicks meant for the back row */
.caja3d .suelo { inset: 0; background: color-mix(in srgb, var(--c) 55%, #fff); box-shadow: inset 0 0 40px rgba(36,31,32,.18); transition: background .6s; }
.caja3d .pared { background-color: var(--c); background-image: linear-gradient(rgba(0,0,0,.06), rgba(255,255,255,.08)), var(--meandro); background-size: 100% 100%, calc(var(--h) * 1.25) var(--h); background-repeat: no-repeat, repeat-x;
  transition: background-color .6s, width .7s var(--curva), height .7s var(--curva), left .7s var(--curva), top .7s var(--curva); }
.caja3d .atras { left: 0; top: 0; width: var(--w); height: var(--h); transform-origin: top; transform: rotateX(90deg); filter: brightness(.9); }
.caja3d .frente { left: 0; top: var(--d); width: var(--w); height: var(--h); transform-origin: top; transform: rotateX(90deg); }
.caja3d .izq { left: 0; top: 0; width: var(--h); height: var(--d); transform-origin: left; transform: rotateY(-90deg); filter: brightness(.82); background-size: 100% 100%, var(--h) calc(var(--h) * 1.25); }
.caja3d .der { left: var(--w); top: 0; width: var(--h); height: var(--d); transform-origin: left; transform: rotateY(-90deg); filter: brightness(1.04); background-size: 100% 100%, var(--h) calc(var(--h) * 1.25); }
.caja3d .tapa { left: 0; top: 0; width: var(--w); height: var(--d); transform-origin: top; transform: translateZ(var(--h)) rotateX(var(--tapa, 136deg)); transition: width .7s var(--curva), height .7s var(--curva); }   /* angle from the physics in caja.js */
.tapa-fuera, .tapa-dentro { position: absolute; inset: 0; backface-visibility: hidden; display: grid; place-items: center; overflow: hidden; }
.tapa-fuera { background: var(--c); box-shadow: inset 0 0 0 1px rgba(36,31,32,.06); }
.tapa-dentro { background: color-mix(in srgb, var(--c) 70%, #fff); transform: rotateX(180deg); }
.tapa-fuera img { width: 62%; position: relative; z-index: 2; }
.caja3d[data-logo="blanco"] .tapa-fuera img { filter: invert(1) brightness(2); }
.caja3d .piezas { position: absolute; inset: 0; transform-style: preserve-3d; }
.pieza { position: absolute; left: var(--x); top: var(--y); width: var(--s); padding: 0; border: 0; background: none; cursor: pointer; transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotateZ(calc(-1 * var(--gz, -30deg))) rotateX(calc(-1 * var(--gx, 58deg))); transition: left .6s var(--curva), top .6s var(--curva), opacity .4s; }
.pieza img { display: block; width: 100%; filter: drop-shadow(0 12px 10px rgba(36,31,32,.18)); transition: transform .35s var(--curva), opacity .35s; }
.pieza:hover img { transform: translateY(-8px); }
.pieza.cae img { animation: cae .7s cubic-bezier(.3, 1.45, .5, 1) both; }
@keyframes cae { from { transform: translateY(-320px) rotate(-6deg); opacity: 0; } 35% { opacity: 1; } to { transform: none; } }
.pieza.sale img { transform: translateY(-160px) scale(.7); opacity: 0; }
/* full: the pieces settle in, the lid comes down, the ribbon is drawn, the order button arrives */
.tapada .pieza { opacity: 0; transition: opacity .12s; }
.pedido-caja { position: absolute; z-index: 4; left: 50%; bottom: 2%; display: flex; gap: 14px; align-items: center; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .6s 1.4s, transform .8s var(--curva) 1.4s; }
.cerrada .pedido-caja { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.pedido-caja .otra { font: inherit; font-size: 14px; color: var(--suave); background: none; border: 0; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
@media (max-width: 860px) {
  .regalo .dentro { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .armar { display: contents; }
  .armar .ante:first-child { order: 1; } .armar h2 { order: 2; } .armar > p.revela { order: 3; } .elige-caja { order: 4; margin: 20px 0 8px; }
  .escenario { order: 5; height: 480px; padding-top: 120px; margin-top: 8px; } .cuenta-caja { order: 6; text-align: center; } .elige-postre { order: 7; }
  .elige-caja { position: relative; z-index: 6; }   /* the open lid passes behind the choices */
  .elige-caja button { min-height: 92px; padding: 12px 10px; background: rgba(255,255,255,.85); }
  .pedido-caja { bottom: 0; flex-direction: column; gap: 8px; white-space: nowrap; }
}

.grande-boton { font-size: 17px; padding: 20px 34px; }
/* ---------- 7 · visit (visita.js): the real streets unfold like a paper map, the ribbon runs the route, the pin drops */
.visita { position: relative; height: 300vh; --abre: 0; --origen: 0; --pin: 0; --ficha: 0; --cerca: 0; }
.visita .pegado { background: var(--crema); perspective: 1400px; }
.mapa-mesa { position: absolute; inset: 0; }
.mapa { position: absolute; left: 50%; top: 50%; width: max(100vw, calc(100svh * 1.37)); aspect-ratio: 640 / 470;   /* centred by the transform: wider than a phone screen */
  transform-origin: 50% 50%; transform: translate(-50%, -50%) translateY(14vh) rotateX(58deg) scale(1.15);   /* then visita.js: the camera */
  box-shadow: 0 60px 120px -60px rgba(36,31,32,calc(.5 * (1 - var(--abre)))); }
.croquis { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-mask: radial-gradient(75% 75% at 50% 50%, #000 62%, transparent 100%); mask: radial-gradient(75% 75% at 50% 50%, #000 62%, transparent 100%); }   /* the paper fades into the page, no hard edge */
.croquis .papel { fill: #f6efea; }
.croquis .parques path { fill: #e4d9e6; }
.croquis .agua .area { fill: #d9e2ea; } .croquis .agua .cauce { fill: none; stroke: #c9d6e1; stroke-width: 10; }
.croquis .calles path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.croquis .borde .calle, .croquis .borde .peatonal { stroke: #fff; stroke-width: 9; }
.croquis .borde .calle-mayor { stroke: #fff; stroke-width: 13; }
.croquis .borde .avenida { stroke: #fff; stroke-width: 19; }
.croquis .linea .calle { stroke: rgba(36,31,32,.22); stroke-width: 1.4; }
.croquis .linea .peatonal { stroke: rgba(36,31,32,.18); stroke-width: 1.2; stroke-dasharray: 4 5; }
.croquis .linea .calle-mayor { stroke: rgba(36,31,32,.32); stroke-width: 2.2; }
.croquis .linea .avenida { stroke: rgba(36,31,32,.42); stroke-width: 3.4; }
.croquis .nombres text { font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; fill: var(--suave); paint-order: stroke; stroke: #f6efea; stroke-width: 4px; }
.croquis .nombres .nuestra { fill: var(--frambuesa); font-weight: 700; font-size: 13px; }
.croquis .ruta path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.croquis .ruta .casco { stroke: #fff; stroke-width: 16; }
.croquis .ruta .cinta { stroke: var(--coral); stroke-width: 9; }
.hito { position: absolute; z-index: 2; transform: translate(-50%, -50%); }
.hito.origen { display: flex; align-items: center; gap: 8px; opacity: var(--origen); }
.hito.origen i { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid var(--coral); flex: none; }
.hito.origen span { font-size: 12px; font-weight: 600; letter-spacing: .04em; background: #fff; padding: 5px 9px; border-radius: 6px; box-shadow: 0 6px 16px -10px rgba(36,31,32,.5); white-space: nowrap; }
.hito.tienda { opacity: min(1, calc(var(--pin) * 3)); }
.alfiler { position: relative; display: grid; place-items: center; width: 108px; height: 44px; border-radius: 999px; background: var(--frambuesa); box-shadow: 0 16px 30px -12px rgba(186,31,93,.7);
  transform: translateY(calc(-34px - (1 - var(--pin)) * 160px)) scale(calc(.6 + var(--pin) * .4)); }
.alfiler::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 18px; height: 18px; background: var(--frambuesa); transform: translateX(-50%) rotate(45deg); border-radius: 0 0 4px 0; z-index: -1; }
.alfiler img { width: 76px; filter: invert(1) brightness(2); }
.pulso { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--frambuesa); opacity: var(--pin); }
.pulso + .pulso { background: none; }
.pulso::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--frambuesa); animation: pulso 2.2s ease-out infinite; }
.pulso + .pulso::after { animation-delay: 1.1s; }
@keyframes pulso { from { transform: scale(1); opacity: .8; } to { transform: scale(6); opacity: 0; } }
.visita-cab { position: absolute; z-index: 3; left: var(--gutter); top: 104px; max-width: 560px; }
.visita-cab h2 { font-size: clamp(36px, 4.6vw, 76px); text-shadow: 0 0 30px #f6efea, 0 0 12px #f6efea; }
.ficha-visita { position: absolute; z-index: 3; left: var(--gutter); bottom: 6vh; width: min(380px, calc(100% - 2 * var(--gutter))); padding: 26px 26px 24px; border-radius: 16px;
  background: rgba(255,255,255,.86); backdrop-filter: blur(14px); box-shadow: 0 30px 60px -30px rgba(36,31,32,.45);
  opacity: var(--ficha); transform: translateY(calc((1 - var(--ficha)) * 40px)); }
.estado { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--suave); }
.estado i { width: 10px; height: 10px; border-radius: 50%; background: #b9aaa5; flex: none; }
.estado.abierto { color: #1f7a4d; } .estado.abierto i { background: #2fae6b; box-shadow: 0 0 0 0 rgba(47,174,107,.6); animation: abierto 1.8s infinite; }
@keyframes abierto { to { box-shadow: 0 0 0 10px rgba(47,174,107,0); } }
.ficha-visita address { font-style: normal; font-family: 'Archivo', sans-serif; font-stretch: 112%; font-weight: 560; font-size: 22px; line-height: 1.2; margin: 0 0 8px; }
.distancia { font-size: 14px; color: var(--suave); margin: 0 0 20px; }
.distancia b { color: var(--coral); }
.botones { display: flex; gap: 10px; flex-wrap: wrap; }
.pedir.clara { background: #fff; color: var(--frambuesa); box-shadow: inset 0 0 0 1.5px var(--frambuesa); }
.pedir.clara:hover { background: var(--frambuesa); color: #fff; }
.osm { position: absolute; z-index: 3; right: var(--gutter); bottom: 14px; margin: 0; font-size: 11px; color: var(--suave); }
/* ---------- footer: the giant logo, the essentials, Instagram */
.pie { padding: 0 var(--gutter) 28px; }
.marca-gigante { margin: 10vh calc(-1 * var(--gutter)) 0; padding: 0 2vw 4vh; transform: translateY(calc((1 - var(--g, 1)) * 40%)); }
.marca-gigante img { width: 100%; }
.pie-fila { display: grid; grid-template-columns: 1fr auto auto; gap: 40px; align-items: center; padding: 32px 0 24px; border-top: 1px solid rgba(36,31,32,.14); }
.lema { margin: 0; font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 560; font-size: clamp(22px, 2.4vw, 34px); letter-spacing: -.02em; color: var(--frambuesa); }
.pie-datos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; color: var(--suave); }
.pie-datos a { text-decoration: none; color: var(--tinta); }
.pie-datos a:hover { color: var(--frambuesa); }
.pie-ig { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 15px; font-weight: 600; color: var(--frambuesa); padding: 12px 20px 12px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--frambuesa); transition: background .3s, color .3s; }
.pie-ig:hover { background: var(--frambuesa); color: #fff; }
.legal { margin: 0; font-size: 12px; color: var(--suave); }
/* Instagram glyph: the brand's line, drawn in the current colour */
.ig { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
.ig .punto-ig { fill: currentColor; stroke: none; }
.barra .acciones { display: flex; align-items: center; gap: 10px; }
.red { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--frambuesa); background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1.5px var(--frambuesa); transition: background .3s, color .3s; will-change: transform; }
.red:hover { background: var(--frambuesa); color: #fff; }
.ficha-visita .red { width: 44px; height: 44px; }
.bajada-torta { color: rgba(255,255,255,.86); font-size: 17px; max-width: 30ch; margin: 0; }
@media (max-width: 860px) {
  .pie-fila { grid-template-columns: 1fr; gap: 20px; }
  .barra .red { width: 38px; height: 38px; }
  .tortas .lado .bajada-torta { display: none; }
}
@media (max-width: 860px) {
  .visita-cab { top: 84px; right: var(--gutter); }
  .visita-cab h2 { font-size: 34px; }
  .ficha-visita { bottom: calc(3vh + var(--barra-nav)); padding: 20px; }
  .ficha-visita address { font-size: 19px; }
  .alfiler { width: 90px; height: 38px; } .alfiler img { width: 62px; }
  .osm { bottom: auto; top: 76px; }
}


@media (max-width: 860px) {
  .barra nav { display: none; }
  .barra img { width: 104px; }
  .entrada .titular { top: 92px; }
  .pie-foto { left: var(--gutter); right: var(--gutter); max-width: none; bottom: 7vh; }
  .dentro { grid-template-columns: 1fr; }
  .cruce { height: 20vh; margin-top: -6vh; }
  .pie-foto { bottom: calc(12vh + var(--barra-nav)); }
}
@media (prefers-reduced-motion: reduce) {
  .telon { display: none; }
  .palabras .w > span, .revela { transform: none; opacity: 1; transition: none; }
}

/* photographic grain over everything: renders and phone photos read as one shoot */
body::after { content: ''; position: fixed; inset: -50%; z-index: 40; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grano .9s steps(5) infinite; }
@keyframes grano { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); } 60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } }
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

/* the push-in's middle beat: the headline has gone, the flower is not yet close. Two lines that arrive one after the
   other: cream type on a soft dark veil, then a raspberry sticker that lands with a little tilt. */
.entrada .pegado::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 46%; z-index: 1; pointer-events: none; opacity: var(--b, 0);
  background: linear-gradient(transparent 0, rgba(36,20,24,.5) 16%, rgba(36,20,24,.26) 62%, transparent); }   /* starts below the header, which stays readable */
.momento { position: absolute; z-index: 2; left: 50%; top: 9%; transform: translateX(-50%) rotate(-4deg); margin: 0; max-width: none; pointer-events: none;
  font-family: 'Corinthia', cursive; font-weight: 700; line-height: 1.1; font-size: clamp(76px, 12.5vw, 210px); white-space: nowrap; padding: 0 .3em;
  color: #fff; text-shadow: 0 2px 30px rgba(20,8,12,.4); }
/* written like a signature: the ink runs left to right with the scroll, through a soft-edged mask */
.momento span { --v: clamp(0, calc(var(--b, 0) * 1.15), 1); display: block;
  -webkit-mask: linear-gradient(90deg, #000 calc(var(--v) * 115% - 15%), transparent calc(var(--v) * 115%)); mask: linear-gradient(90deg, #000 calc(var(--v) * 115% - 15%), transparent calc(var(--v) * 115%)); }
@media (max-width: 860px) { .momento { top: 12%; font-size: 17vw; } }

/* ?ia: the AI stills fill the frame to the top; a cream veil behind the headline keeps it legible, and lifts as the headline leaves */
.con-ia .entrada .pegado::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 62%; z-index: 1; pointer-events: none;
  background: linear-gradient(var(--crema) 0%, color-mix(in srgb, var(--crema) 82%, transparent) 38%, transparent 100%); opacity: calc(1 - var(--p) * 3); }
/* the AI push-in reaches the pieces sooner than the Cycles one: on desktop the middle beat rides above them */
@media (min-width: 861px) { .con-ia .momento { top: 10%; } }
/* the giant name already says it: the card keeps the name for screen readers only */
.fichas h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fichas .num { display: block; margin-bottom: 10px; }

/* ---------- menu: all sections, the current one marked; a full-screen menu on phones */
.barra .menu a.actual::after { transform: scaleX(1); transform-origin: left; }
.barra .menu a.actual { color: var(--frambuesa); }
.abre-menu { display: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--tinta); cursor: pointer; place-items: center; align-content: center; gap: 5px; padding: 0; }
.abre-menu i { display: block; width: 16px; height: 1.6px; background: #fff; border-radius: 2px; transition: transform .4s var(--curva); }
.menu-abierto .abre-menu i:first-child { transform: translateY(3.3px) rotate(45deg); }
.menu-abierto .abre-menu i:last-child { transform: translateY(-3.3px) rotate(-45deg); }
.menu-movil { position: fixed; inset: 0; z-index: 19; background: var(--crema); padding: 110px var(--gutter) 40px; display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; transform: translateY(-12px); transition: opacity .4s ease, transform .6s var(--curva); pointer-events: none; }
.menu-movil:not([hidden]) { display: flex; }
.menu-abierto .menu-movil { opacity: 1; transform: none; pointer-events: auto; }
.menu-movil nav { display: grid; gap: 6px; }
.menu-movil nav a { display: flex; align-items: baseline; gap: 14px; text-decoration: none; font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 560; letter-spacing: -.03em; font-size: 38px; line-height: 1.2; color: var(--tinta); }
.menu-movil nav a.actual { color: var(--frambuesa); }
.menu-pie { display: grid; gap: 8px; font-size: 14px; color: var(--suave); }
.menu-pie a { color: var(--tinta); text-decoration: none; }
@media (max-width: 860px) { .abre-menu { display: grid; } .barra .pedir .largo { display: none; } }
@media (max-width: 400px) { .barra .acciones .pedir { padding: 10px 14px; } }

/* ---------- Visítanos: the real showcase, pinned on the map */
.foto-vitrina { position: absolute; z-index: 3; right: var(--gutter); top: 110px; width: min(470px, 34vw); margin: 0; padding: 10px 10px 34px; background: #fff; border-radius: 3px;
  box-shadow: 0 30px 60px -28px rgba(36,31,32,.5); transform: rotate(2.5deg) translateY(calc((1 - var(--ficha)) * 40px)); opacity: var(--ficha); font-size: 12px; color: var(--suave); }
.foto-vitrina img { width: 100%; aspect-ratio: 1400 / 770; object-fit: cover; margin-bottom: 9px; }
.foto-vitrina::before { content: ''; position: absolute; left: 50%; top: -12px; width: 90px; height: 26px; transform: translateX(-50%) rotate(-3deg); background: rgba(242,236,233,.8); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
@media (max-width: 860px) {
  .foto-vitrina { top: auto; bottom: calc(3vh + 236px + var(--barra-nav)); right: var(--gutter); left: auto; width: 50vw; padding: 6px 6px 22px; font-size: 10px; }
}

/* short laptop screens: the big chapter number gives up some height so the text stays clear of the timeline */
@media (min-width: 861px) and (max-height: 760px) { .capitulos .cn { font-size: clamp(48px, 9vh, 72px); } .historia h2.autora { margin-bottom: 2vh; } }

h2.ante { font-family: inherit; font-weight: 400; font-stretch: 100%; line-height: 1.6; }   /* a label that is also the section heading */

/* 07 · Lo que dicen: the Google rating counting up, two satin ribbons of real reviews crossing the page (they drift,
   answer the scroll's speed and direction, and can be dragged), then one review set huge, filled word by word by the scroll */
.resenas { position: relative; padding: 16vh 0 4vh; background: var(--crema); overflow: hidden; }
.resenas-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding: 0 var(--gutter); margin-bottom: 9vh; }
.resenas-cab h2 { max-width: 11ch; margin: 0; }
.nota-google { display: grid; justify-items: end; gap: 6px; text-decoration: none; color: var(--tinta); }
.nota-google .cifra { font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 560; font-size: clamp(72px, 10vw, 160px); line-height: .82; letter-spacing: -.045em; color: var(--frambuesa); font-variant-numeric: tabular-nums; }
.nota-google .estrellas { display: flex; gap: 4px; font-size: 24px; }
.nota-google .estrellas i { font-style: normal; color: rgba(36,31,32,.12); position: relative; }
.nota-google .estrellas i::after { content: '★'; position: absolute; inset: 0; color: var(--coral); clip-path: inset(0 100% 0 0); transition: clip-path .5s var(--curva); transition-delay: calc(var(--k) * 140ms + 700ms); }
.nota-google.visto .estrellas i::after { clip-path: inset(0 0 0 0); }
.nota-google .estrellas i:nth-child(1) { --k: 0 } .nota-google .estrellas i:nth-child(2) { --k: 1 } .nota-google .estrellas i:nth-child(3) { --k: 2 }
.nota-google .estrellas i:nth-child(4) { --k: 3 } .nota-google .estrellas i:nth-child(5) { --k: 4 }
.nota-google .cuantas { font-size: 13px; color: var(--suave); }
.nota-google .flecha-sale { display: inline-block; transition: transform .4s var(--curva); }
.nota-google:hover .flecha-sale { transform: translate(3px, -3px); }

.cintas { position: relative; display: grid; gap: 10px; }
.cinta-resenas { position: relative; height: 420px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cinta-resenas:active { cursor: grabbing; }
.cinta-resenas .banda { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.banda path { fill: none; stroke-linecap: butt; }
.banda .sombra { stroke: rgba(36,31,32,.22); filter: blur(14px); transform: translateY(16px); }
.banda .lazo { stroke: var(--banda); }
.banda .pliegue { stroke: rgba(0,0,0,.10); }
.banda .brillo { mix-blend-mode: soft-light; }
.cinta-resenas:nth-child(1) { --banda: var(--frambuesa); }
.cinta-resenas:nth-child(2) { --banda: var(--lila); }
.resena { position: absolute; left: 0; top: 0; width: 360px; margin: 0; will-change: transform; }
.tarjeta { --rx: 0deg; --ry: 0deg; --alza: 0px; position: relative; padding: 26px 28px 22px; display: grid; gap: 14px; cursor: pointer;
  background: #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(36,31,32,.06), 0 18px 34px -20px rgba(36,31,32,.45);
  transform: perspective(900px) translateY(var(--alza)) rotateX(var(--rx)) rotateY(var(--ry)) skewX(var(--sesgo, 0deg));
  transition: transform .5s var(--curva), box-shadow .5s var(--curva), filter .4s; }
.cinta-resenas.encima .tarjeta { --alza: 6px; filter: saturate(.35) brightness(.96); }
.cinta-resenas.encima .resena.foco .tarjeta { filter: none; --alza: -16px; box-shadow: 0 2px 4px rgba(36,31,32,.06), 0 36px 54px -24px rgba(36,31,32,.55); transition: transform .15s linear, box-shadow .5s var(--curva), filter .4s; }
.tarjeta::after { content: '”'; position: absolute; right: 22px; top: 4px; font-family: 'Archivo', sans-serif; font-weight: 560; font-size: 96px; line-height: 1; color: var(--frambuesa); opacity: .14; pointer-events: none; }
.tarjeta .estrellas { font-size: 14px; letter-spacing: .14em; color: var(--coral); }
.tarjeta blockquote { margin: 0; font-size: 16px; line-height: 1.55; color: var(--tinta); }
.tarjeta mark, .lector mark { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--coral) 32%, transparent) 62%, color-mix(in srgb, var(--coral) 32%, transparent) 92%, transparent 92%); color: inherit; padding: 0 1px; }
.tarjeta figcaption { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.tarjeta figcaption i, .lector figcaption i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--frambuesa); color: #fff; font-style: normal; font-size: 13px; flex: none; }
.tarjeta figcaption span { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--suave); }
.tarjeta .abre { position: absolute; right: 18px; bottom: 18px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--frambuesa); color: #fff; font-size: 15px; line-height: 1;
  opacity: 0; transform: scale(.6); transition: opacity .3s, transform .4s var(--curva); }
.resena.foco .tarjeta .abre { opacity: 1; transform: none; }
.resena.foco .tarjeta figcaption span { opacity: 0; }

/* the reader: a card opened big over a blurred page */
.lector { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; visibility: hidden; }
.lector.abierto { visibility: visible; }
.lector .velo { position: absolute; inset: 0; background: color-mix(in srgb, var(--crema) 70%, transparent); backdrop-filter: blur(16px) saturate(.8); -webkit-backdrop-filter: blur(16px) saturate(.8); opacity: 0; transition: opacity .45s ease; }
.lector.abierto .velo { opacity: 1; }
.lector .hoja { position: relative; width: min(720px, 100%); padding: clamp(30px, 5vw, 60px) clamp(26px, 5vw, 64px) clamp(26px, 4vw, 44px); background: #fff; border-radius: 26px;
  box-shadow: 0 40px 90px -30px rgba(36,31,32,.5); transform-origin: 0 0; }
.lector .hoja::after { content: '”'; position: absolute; right: 34px; top: 10px; font-family: 'Archivo', sans-serif; font-weight: 560; font-size: 180px; line-height: 1; color: var(--frambuesa); opacity: .12; pointer-events: none; }
.lector .estrellas { font-size: 20px; letter-spacing: .16em; color: var(--coral); }
.lector blockquote { margin: 22px 0 30px; font-family: 'Archivo', sans-serif; font-stretch: 110%; font-weight: 480; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.3; letter-spacing: -.015em; color: var(--tinta); }
.lector figcaption { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; }
.lector figcaption small { font-weight: 400; color: var(--suave); font-size: 13px; }
.lector .cuenta { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: .14em; color: var(--suave); }
.lector .contenido { transition: opacity .25s, transform .35s var(--curva); }
.lector .contenido.sale { opacity: 0; transform: translateX(calc(var(--lado, 1) * -24px)); }
.lector .contenido.entra { opacity: 0; transform: translateX(calc(var(--lado, 1) * 24px)); transition: none; }
.lector .ctrl { position: absolute; z-index: 1; width: 52px; height: 52px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--tinta); color: #fff; font-size: 20px; cursor: pointer;
  transition: background .3s, transform .4s var(--curva), opacity .3s; opacity: 0; }
.lector.abierto .ctrl { opacity: 1; }
.lector .ctrl:hover { background: var(--frambuesa); }
.lector .cerrar { top: 22px; right: 22px; }
.lector .ant { left: max(16px, calc(50% - 440px)); top: 50%; translate: 0 -50%; }
.lector .sig { right: max(16px, calc(50% - 440px)); top: 50%; translate: 0 -50%; }
.lector .ant:hover { transform: translateX(-3px); } .lector .sig:hover { transform: translateX(3px); }
.lector .en-google { display: inline-block; margin-top: 26px; font-size: 13px; color: var(--frambuesa); text-decoration: none; }
.lector .en-google:hover { text-decoration: underline; }
.arrastra-res { display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; margin: 26px auto 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--suave); }
.arrastra-res i { width: 28px; height: 1px; background: currentColor; position: relative; }
.arrastra-res i::before, .arrastra-res i::after { content: ''; position: absolute; top: -3px; width: 6px; height: 6px; border-top: 1px solid; border-left: 1px solid; }
.arrastra-res i::before { left: 0; transform: rotate(-45deg); } .arrastra-res i::after { right: 0; transform: rotate(135deg); }

/* one review, huge; the scroll inks it word by word */
.destacada { margin: 16vh auto 0; padding: 0 var(--gutter); max-width: 1200px; text-align: center; }
.destacada blockquote { margin: 0; }
.destacada .frase { margin: 0; font-family: 'Archivo', sans-serif; font-stretch: 118%; font-weight: 560; font-size: clamp(40px, 6.4vw, 108px); line-height: 1.02; letter-spacing: -.035em; }
.destacada .frase::before { content: '“'; display: block; font-family: 'Corinthia', serif; font-weight: 700; font-stretch: 100%; font-size: 1.9em; line-height: .55; height: .42em; margin-bottom: .05em; color: var(--frambuesa); }
.destacada .frase span { color: color-mix(in srgb, var(--tinta) calc(var(--t, 0) * 100%), rgba(36,31,32,.13)); transition: color .25s; }
.destacada .frase span.clave { color: color-mix(in srgb, var(--frambuesa) calc(var(--t, 0) * 100%), rgba(186,31,93,.16)); }
.destacada figcaption { margin-top: 28px; font-size: 14px; color: var(--suave); }
.destacada figcaption b { color: var(--tinta); font-weight: 600; }
.resenas-pie { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 8vh var(--gutter) 0; }
@media (prefers-reduced-motion: reduce) {
  .cinta-resenas.quieta { height: auto; display: flex; gap: 16px; overflow-x: auto; padding: 20px var(--gutter); } .cinta-resenas.quieta .resena { position: relative; flex: none; } .cinta-resenas.quieta .banda { display: none; } .arrastra-res { display: none; }
}
@media (max-width: 860px) {
  .resenas { padding-top: 11vh; }
  .resenas-cab { flex-direction: column; align-items: flex-start; margin-bottom: 6vh; }
  .nota-google { justify-items: start; grid-template-columns: auto 1fr; column-gap: 14px; align-items: end; }
  .nota-google .cifra { grid-row: span 2; font-size: 80px; }
  .cintas { gap: 0; }
  .resena { width: 64vw; max-width: 270px; }
  .tarjeta { padding: 22px 22px 18px; }
  .tarjeta blockquote { font-size: 15px; }
  .lector { padding: 16px; align-items: end; padding-bottom: calc(96px + var(--barra-nav)); }
  .lector .ant, .lector .sig { top: auto; bottom: calc(24px + var(--barra-nav)); translate: none; }
  .lector .ant { left: calc(50% - 64px); } .lector .sig { right: calc(50% - 64px); }
  .lector .cerrar { top: 16px; right: 16px; }
  .destacada { margin-top: 11vh; }
}
@media (hover: none) { .arrastra-res { color: var(--frambuesa); } }