/* web/css/pagina.css — ColaJelly v2 «Mira lo que hay dentro».
 *
 * La página es un viaje por capas. Cada capítulo es una <section class="capa">:
 *   - las ESCENAS (01-04) son tramos altos con un hijo pegado (sticky) de una
 *     pantalla, .capa__fijo, que contiene las capas z0-z6 del concepto;
 *   - las HOJAS (05-10) tienen su contenido en el flujo normal y un escenario
 *     pegado detrás (fondo, sombra, objeto y luz).
 * Una hoja nueva sube con un borde de menisco de gelatina (nunca un corte recto).
 * Dos uniones son relevos: el portal de la funda (01→02) y el derrame (02→03)
 * terminan con la misma imagen con la que empieza el capítulo siguiente.
 *
 * Dos cortes distintos: la maqueta apilada (texto arriba, objeto en medio, botón abajo) va con
 * (max-width:900px),(max-aspect-ratio:4/5), la misma consulta que usan js/capas.js y los
 * <source media> de index.html; las letras y los márgenes del teléfono, con max-width:760px.
 * Sin JavaScript no se pega nada ni se esconde nada: cada capítulo es un bloque
 * normal y la página se lee entera. Las variables --p, --x, --v, --g, --vista,
 * --fondo, --am las escribe js/motor.js + js/capas.js.
 */

@font-face{font-family:"Daily Shine";src:url("../assets/fonts/DailyShine-sub.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Gelato Luxe";src:url("../assets/fonts/GelatoLuxe.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Satoshi";src:url("../assets/fonts/Satoshi-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Satoshi";src:url("../assets/fonts/Satoshi-Bold.woff2") format("woff2");font-weight:700;font-display:swap}

*{margin:0;padding:0;box-sizing:border-box}
/* Lo que falta en el editor se esconde con hidden: gana a cualquier display. */
[hidden]{display:none!important}

:root{
  --mora:#1B1F3C;--mora2:#29315A;--mora3:#3C497A;
  --naranja:#EB6608;--naranja-solido:#B04A03;--ambar:#F3953F;--albaricoque:#F7AB59;
  --crema:#FFFEF3;--durazno:#FFF3E6;
  --fondo:var(--crema);
  --curva:cubic-bezier(.32,.72,0,1);
  /* Retícula: 12 columnas; a la izquierda queda sitio para el tubo de progreso */
  --margen-izq:112px;--margen-der:64px;--columna-gap:24px;
  --cabecera:64px;
  /* Menisco: amplitud en reposo; el muelle la estira con la velocidad */
  --am-base:64px;--am:calc(var(--am-base) * (1 + var(--resorte, 0)));--am-caja:180px;
  --vista:900;
  color-scheme:light;
}
@media (max-width:1180px){:root{--margen-izq:40px;--margen-der:40px}}
@media (max-width:760px){:root{--margen-izq:20px;--margen-der:20px;--cabecera:56px;--am-base:38px;--am-caja:110px}}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:500 16px/24px "Satoshi",system-ui,sans-serif;color:var(--mora);background:var(--fondo);overflow-x:clip}
@supports not (overflow-x:clip){body{overflow-x:hidden}}
img,svg,canvas,video{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--naranja-solido);color:var(--crema)}
:focus-visible{outline:3px solid var(--naranja-solido);outline-offset:3px;border-radius:8px}
[data-tono=oscuro] :focus-visible{outline-color:var(--albaricoque)}
.saltar{position:fixed;left:16px;top:-80px;z-index:100;background:var(--mora);color:var(--crema);padding:12px 20px;border-radius:999px;font-weight:700;text-decoration:none;transition:top .2s}
.saltar:focus{top:12px}
.oculto-lector{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Texto ---------- */
.titulo{font:400 60px/60px "Daily Shine",cursive;letter-spacing:0;text-wrap:balance}
/* El titular de la portada, grande y en 2 líneas («¡Mira lo que» / «hay dentro!»): el ancho
   en em hace el corte, sea cual sea el tamaño */
.titulo--hero{font-size:clamp(72px,6.2vw,88px);line-height:.94;max-width:4.9em}
.acento{color:var(--naranja)}
[data-tono=oscuro] .acento{color:var(--albaricoque)}
.lede{font-size:18px;line-height:28px;max-width:44ch;text-wrap:pretty}
.etiqueta{display:inline-flex;align-items:center;gap:8px;font:700 14px/20px "Satoshi";letter-spacing:.08em;text-transform:uppercase}
.cifra{font:400 96px/1 "Gelato Luxe",cursive;color:var(--naranja);letter-spacing:0;white-space:nowrap}
[data-tono=oscuro] .cifra{color:var(--albaricoque)}
p+p{margin-top:12px}
@media (max-width:760px){
  .titulo{font-size:36px;line-height:40px}
  /* El titular de la portada, 4 veces el cuerpo también en el teléfono (design-loop, ronda 3) */
  .titulo--hero{font-size:66px;line-height:62px}
  .lede{font-size:16px;line-height:24px}
  .abrir__texto .lede{font-size:15px;line-height:23px}
  .cifra{font-size:60px}
}
/* Teléfonos bajos: el capítulo tiene que caber en una pantalla */
@media (max-width:760px) and (max-height:700px){
  .titulo{font-size:30px;line-height:36px}
  .titulo--hero{font-size:44px;line-height:44px}
  .lede,.abrir__texto .lede{font-size:14px;line-height:20px}
}

/* ---------- Botones ---------- */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:999px;
  font:700 16px/24px "Satoshi";text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform .3s var(--curva),background-color .3s var(--curva),color .3s var(--curva),border-color .3s var(--curva)}
.boton:hover{transform:translateY(-2px)}
.boton:active{transform:translateY(1px)}
.boton--primario{background:var(--naranja-solido);color:var(--crema)}
.boton--primario:hover{background:var(--mora)}
[data-tono=oscuro] .boton--primario:hover{background:var(--crema);color:var(--mora)}
.boton--secundario{background:transparent;color:inherit;border-color:currentColor}
.boton--secundario:hover{background:var(--mora);border-color:var(--mora);color:var(--crema)}
[data-tono=oscuro] .boton--secundario:hover{background:var(--crema);border-color:var(--crema);color:var(--mora)}
.boton--wa{background:#1F7A4D;color:#fff}
.boton--wa:hover{background:var(--mora)}
.boton svg{width:20px;height:20px;flex:0 0 20px}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ---------- Cabecera ---------- */
.cabecera{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--cabecera);display:flex;align-items:center;gap:24px;
  padding:0 var(--margen-der) 0 var(--margen-izq);padding-top:env(safe-area-inset-top);
  color:var(--mora);transition:color .4s var(--curva)}
/* La raya de abajo no está en el primer pantallazo (design-loop, ronda 4): sale con --hilo-o al empezar a bajar */
.cabecera::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--fondo-cab,var(--fondo)) 86%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in srgb,currentColor calc(10% * var(--hilo-o,0)),transparent)}
.cabecera[data-tono=oscuro]{color:var(--crema)}
.cabecera__marca{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.cabecera__logo{height:36px;width:auto}
.cabecera__logo--claro{display:none}
.cabecera[data-tono=oscuro] .cabecera__logo--oscuro{display:none}
.cabecera[data-tono=oscuro] .cabecera__logo--claro{display:block}
/* La moneda-sello gira con el progreso de la página (hoja de cuadros) */
.moneda{width:36px;height:36px;flex:0 0 36px;background:url("../assets/v2/cabecera/moneda-0.webp") center/36px 36px no-repeat}
.moneda.lista{background-image:url("../assets/v2/cabecera/moneda.webp");background-size:calc(36px * var(--mc-cols,8)) auto;
  background-position:calc(var(--mc-x,0) * -36px) calc(var(--mc-y,0) * -36px)}
/* La marca, gigante en el primer pantallazo (capas.js, «La marca…»): crece desde su esquina con
   --marca-s y se encoge al bajar. Mientras es grande la barra no pinta su fondo (--cab-fondo): la
   marca no queda medio dentro y medio fuera de una franja. En el teléfono «Dónde comprar» espera
   a que la marca se encoja (--cab-pedir): los dos no caben. */
.cabecera__marca{transform-origin:0 0;transform:scale(var(--marca-s,1))}
.cabecera::before{opacity:var(--cab-fondo,1)}
.cabecera__pedir{opacity:var(--cab-pedir,1)}
.cabecera.pedir-espera .cabecera__pedir{visibility:hidden}
.cabecera__enlaces{position:relative;display:flex;gap:24px;margin-left:auto;align-items:center}
.cabecera__enlaces a{font:700 14px/20px "Satoshi";text-decoration:none;opacity:.85;padding:10px 0;transition:opacity .3s var(--curva)}
.cabecera__enlaces a:hover,.cabecera__enlaces a[aria-current]{opacity:1}
/* La gota bajo el enlace activo (regla del 40 %) */
.cabecera__gota{position:absolute;left:0;bottom:0;width:12px;height:18px;
  background:url("../assets/v2/3d/gota.webp") -24px -18px/72px auto no-repeat;
  transform:translateX(var(--gota-x,0px)) scale(var(--gota-s,0));transition:transform .45s var(--curva);pointer-events:none}
.cabecera__pedir{flex:0 0 auto;min-height:40px;padding:8px 20px;font-size:14px;line-height:20px}
.cabecera__menu{display:none;width:44px;height:44px;border:0;background:transparent;color:inherit;cursor:pointer;padding:10px;flex-direction:column;justify-content:center;gap:5px}
.cabecera__menu span{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .3s var(--curva),opacity .2s}
.cabecera__menu[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.cabecera__menu[aria-expanded=true] span:nth-child(2){opacity:0}
.cabecera__menu[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:900px){
  .cabecera{gap:12px}
  .cabecera__menu{display:flex;order:4}
  .cabecera__pedir{margin-left:auto;order:3}
  .cabecera__enlaces{position:absolute;top:100%;left:0;right:0;margin:0;display:none;flex-direction:column;align-items:stretch;gap:0;
    padding:8px var(--margen-der) 16px;background:color-mix(in srgb,var(--fondo) 96%,transparent);border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent)}
  .cabecera__enlaces.abierto{display:flex}
  .cabecera__enlaces a{padding:14px 0;font-size:16px;border-top:1px solid color-mix(in srgb,currentColor 10%,transparent)}
  .cabecera__gota{display:none}
  .cabecera__logo{height:30px}
}
/* En el teléfono el tubo es una línea de gelatina bajo la cabecera */
.cabecera__progreso{position:absolute;left:0;right:0;bottom:-1px;height:3px;transform-origin:left;transform:scaleX(var(--g,0));
  background:linear-gradient(90deg,var(--naranja),var(--albaricoque));display:none}
@media (max-width:1180px){.cabecera__progreso{display:block}}

/* ---------- Hilo conductor: el tubo de progreso con la gota (PC) ---------- */
/* No está en el primer pantallazo (la portada queda limpia, design-loop ronda 3): capas.js le
   sube --hilo-o en cuanto se empieza a bajar */
.tubo,.contador{opacity:var(--hilo-o,0)}
.tubo{position:fixed;left:40px;top:calc(var(--cabecera) + 40px);bottom:120px;width:8px;z-index:50;pointer-events:none;
  border-radius:8px;background:color-mix(in srgb,var(--tinta-hilo,var(--mora)) 8%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tinta-hilo,var(--mora)) 16%,transparent)}
.tubo__relleno{position:absolute;inset:0;border-radius:8px;transform-origin:top;transform:scaleY(var(--g,0));
  background:linear-gradient(180deg,var(--albaricoque),var(--naranja))}
/* La gota va en la cabeza del relleno. Es la gota de Blender (web-3d/gota.py, 24 cuadros):
   capas.js elige el cuadro con el muelle de la velocidad; quieta, está en reposo (cuadro 8) */
.tubo__gota{position:absolute;left:50%;top:0;width:22px;height:33px;margin:-24px 0 0 -11px;
  background:url("../assets/v2/3d/gota.webp") calc(var(--gota-c,2) * -22px) calc(var(--gota-f,1) * -33px)/132px auto no-repeat;
  filter:drop-shadow(0 4px 6px rgba(235,102,8,.35));
  transform:translateY(calc(var(--g,0) * var(--tubo-alto,600) * 1px));
  /* se va del tubo cuando nace la gota del cierre, que es la misma (escenas.js, 10 · Cierre) */
  opacity:calc(1 - var(--gota-fuera,0))}
.contador{position:fixed;left:20px;bottom:76px;width:84px;z-index:50;display:flex;flex-direction:column;align-items:flex-start;gap:8px;pointer-events:none;color:var(--tinta-hilo,var(--mora))}
/* El isotipo se llena de gelatina con el avance del capítulo */
.contador__perro{width:40px;height:40px;flex:0 0 40px;
  -webkit-mask:url("../assets/logos-oscuro/isotipo-blanco-600.webp") center/contain no-repeat;mask:url("../assets/logos-oscuro/isotipo-blanco-600.webp") center/contain no-repeat;
  background:linear-gradient(to top,var(--naranja) calc(var(--pc,0) * 100%),color-mix(in srgb,currentColor 38%,transparent) calc(var(--pc,0) * 100%))}
.contador__texto{font:700 12px/16px "Satoshi";letter-spacing:.08em;text-transform:uppercase}
.contador__texto b{font:400 20px/20px "Gelato Luxe",cursive;letter-spacing:0;text-transform:none;display:block}
@media (max-width:1180px){.tubo,.contador{display:none}}
/* Sin JavaScript el hilo no sabría dónde está el visitante: no se enseña un dato falso */
html:not(.js-on) .tubo,html:not(.js-on) .contador,html:not(.js-on) .cabecera__gota{display:none}
html:not(.js-on) .cabecera::before{border-bottom-color:color-mix(in srgb,currentColor 10%,transparent)}
/* Sin JavaScript cada escena es un bloque quieto: el velo de abajo (pensado para fundirse
   con la hoja que sube) solo apagaría el texto del final, y los destinos del perro se
   enseñan encendidos, como en su cuadro final */
html:not(.js-on) .capa__fijo::after{display:none}
html:not(.js-on) .destino{opacity:1;transform:none;background:var(--naranja-solido);color:var(--crema)}
@media (prefers-reduced-motion:reduce){.js-on .capa--escena>.capa__fijo::after{display:none}}

/* ---------- Capítulos ---------- */
.capa{position:relative;z-index:var(--z,1);color:var(--mora)}
.capa[data-tono=oscuro]{color:var(--crema)}
/* Las cajas que recortan van con overflow:clip (hidden solo para navegadores viejos): una caja
   hidden se puede correr de lado por código —el árbol del editor, el Ctrl+F del visitante,
   arrastrar al seleccionar texto— y se queda corrida, porque nadie la puede volver con el scroll.
   Luis vio la página «irse a un lado» (27 sep 2026). Una caja clip no se desplaza nunca. */
.capa__fijo{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;overflow:clip;isolation:isolate;background:var(--color)}
.contenido{position:relative;padding:calc(var(--cabecera) + 64px) var(--margen-der) 96px var(--margen-izq);max-width:1440px;margin-inline:auto}

/* Capas z0-z6 dentro de una escena */
.z0,.z1,.z2,.z3,.z4{position:absolute;inset:0}
/* z5 (rótulos) marca el alto del bloque cuando nada se pega: sin JavaScript, o con
   menos movimiento, el texto nunca queda cortado. Pegada, ocupa la pantalla. */
.z5{position:relative;min-height:100vh;min-height:100svh}
.js-on .capa--escena>.capa__fijo>.z5{position:absolute;inset:0;min-height:0}
/* La capa de rótulos ocupa la pantalla entera: solo lo que hay dentro recibe el dedo,
   así no bloquea los ingredientes ni los destinos que viven en las capas de abajo */
.z5{pointer-events:none}
.z5 *{pointer-events:auto}
.z0{z-index:0;overflow:hidden;overflow:clip}
.z1{z-index:1;pointer-events:none}
.z2{z-index:2;pointer-events:none}
.z3{z-index:3}
.z4{z-index:4;pointer-events:none}
.z5{z-index:5}
/* z0 · fondo: la imagen se ancla por un punto (capas.js) y hace un zoom leve 1,03 → 1,08 */
.fondo{position:absolute;left:0;top:0;max-width:none;width:100%;height:100%;object-fit:cover;
  transform-origin:var(--ox,50%) var(--oy,50%);transform:scale(calc(1.03 + var(--p,0) * .05))}
.js-on .fondo[data-ancla]{width:var(--fw,100%);height:var(--fh,100%);object-fit:fill;
  transform:translate3d(var(--fx,0px),var(--fy,0px),0) scale(calc(1.03 + var(--p,0) * .05))}
/* z1 · ambiente: la trama de huellas, anclada al documento (no empieza de nuevo en cada capítulo) */
.z1{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='%231B1F3C'%3E%3Cellipse cx='28' cy='35' rx='12' ry='10'/%3E%3Cellipse cx='13' cy='19' rx='5.5' ry='7.5'/%3E%3Cellipse cx='25' cy='10' rx='5.5' ry='7.5'/%3E%3Cellipse cx='37' cy='12' rx='5.5' ry='7.5'/%3E%3Cellipse cx='45' cy='22' rx='5' ry='7'/%3E%3C/g%3E%3C/svg%3E");
  background-size:56px 56px;background-position:0 calc(var(--huella-y,0) * 1px)}
[data-tono=oscuro] .z1{filter:invert(1)}
/* z4 · luz: un charco cálido que se enciende con el tramo */
.luz{position:absolute;inset:0;mix-blend-mode:screen;opacity:calc(.25 + var(--p,0) * .55);
  background:radial-gradient(40% 36% at var(--lx,50%) var(--ly,60%),rgba(247,171,89,.45),rgba(247,171,89,0) 70%)}
/* z6 · velos: la escena nace del color de la página y muere en él */
/* Los velos tapan las imágenes (z0-z3) pero nunca el texto (z5): un título velado no se lee */
.capa__fijo::before,.capa__fijo::after{content:"";position:absolute;left:0;right:0;z-index:4;pointer-events:none;opacity:var(--velo-o,1)}
.z1{opacity:calc(var(--velo-o,1) * .035)}
.capa__fijo::before{top:0;height:calc(var(--cabecera) + 12svh);background:linear-gradient(to bottom,var(--velo-arriba,var(--color)),transparent)}
.capa__fijo::after{bottom:0;height:18svh;background:linear-gradient(to top,var(--fondo),transparent)}

/* Con JavaScript: las escenas se pegan y avanzan con el scroll */
.js-on .capa--escena{height:var(--alto-pc,300svh)}
.js-on .capa--escena>.capa__fijo{position:sticky;top:0;height:100vh;height:100svh;min-height:0}
@media (max-width:900px),(max-aspect-ratio:4/5){.js-on .capa--escena{height:var(--alto-movil,220svh)}}
/* Relevo: el capítulo se monta encima del final del anterior, transparente, y se
   enciende en el cuadro exacto en que se pega. Como el anterior acaba con su misma
   imagen, no hay costura. */
/* La caja del relevo se monta sobre el final de la capa anterior (en el teléfono, los últimos
   84 px del primer pantallazo): no atrapa toques; su contenido sí (.z5 *, .orbita__ing) */
.js-on .capa--relevo{margin-top:-100vh;margin-top:-100svh;pointer-events:none}
.js-on .capa--relevo:not(.fijada)>.capa__fijo{visibility:hidden}
/* Hoja que sube: tapa la escena pegada de antes con su borde de menisco */
.js-on .capa--sube{margin-top:-100vh;margin-top:-100svh}
.capa--hoja{background:var(--color)}
/* Solo la hoja con escenario pegado necesita medir al menos una pantalla */
#cuanto{min-height:100vh;min-height:100svh}
/* La hoja siguiente no se monta encima: solo su cúpula (menisco) asoma sobre esta, y
   cada hoja deja abajo sitio para esa cúpula estirada, así nunca tapa un botón ni un texto */
.capa--hoja+.capa--hoja{margin-top:-1px}
.capa--hoja>.contenido{padding-bottom:calc(var(--am-base) * 1.9 + 40px)}

/* El borde de menisco: una tapa en forma de cúpula que sobresale por encima de la hoja */
.menisco{position:absolute;left:0;right:0;bottom:100%;height:var(--am-caja);pointer-events:none;z-index:3}
.menisco i{position:absolute;inset:0}
.menisco__brillo{background:var(--ambar);clip-path:polygon(0% 100%,0% calc(100% - var(--am) * 0.0000 - 2px),2.083% calc(100% - var(--am) * 0.0654 - 2px),4.167% calc(100% - var(--am) * 0.1305 - 2px),6.25% calc(100% - var(--am) * 0.1951 - 2px),8.333% calc(100% - var(--am) * 0.2588 - 2px),10.417% calc(100% - var(--am) * 0.3214 - 2px),12.5% calc(100% - var(--am) * 0.3827 - 2px),14.583% calc(100% - var(--am) * 0.4423 - 2px),16.667% calc(100% - var(--am) * 0.5000 - 2px),18.75% calc(100% - var(--am) * 0.5556 - 2px),20.833% calc(100% - var(--am) * 0.6088 - 2px),22.917% calc(100% - var(--am) * 0.6593 - 2px),25% calc(100% - var(--am) * 0.7071 - 2px),27.083% calc(100% - var(--am) * 0.7518 - 2px),29.167% calc(100% - var(--am) * 0.7934 - 2px),31.25% calc(100% - var(--am) * 0.8315 - 2px),33.333% calc(100% - var(--am) * 0.8660 - 2px),35.417% calc(100% - var(--am) * 0.8969 - 2px),37.5% calc(100% - var(--am) * 0.9239 - 2px),39.583% calc(100% - var(--am) * 0.9469 - 2px),41.667% calc(100% - var(--am) * 0.9659 - 2px),43.75% calc(100% - var(--am) * 0.9808 - 2px),45.833% calc(100% - var(--am) * 0.9914 - 2px),47.917% calc(100% - var(--am) * 0.9979 - 2px),50% calc(100% - var(--am) * 1.0000 - 2px),52.083% calc(100% - var(--am) * 0.9979 - 2px),54.167% calc(100% - var(--am) * 0.9914 - 2px),56.25% calc(100% - var(--am) * 0.9808 - 2px),58.333% calc(100% - var(--am) * 0.9659 - 2px),60.417% calc(100% - var(--am) * 0.9469 - 2px),62.5% calc(100% - var(--am) * 0.9239 - 2px),64.583% calc(100% - var(--am) * 0.8969 - 2px),66.667% calc(100% - var(--am) * 0.8660 - 2px),68.75% calc(100% - var(--am) * 0.8315 - 2px),70.833% calc(100% - var(--am) * 0.7934 - 2px),72.917% calc(100% - var(--am) * 0.7518 - 2px),75% calc(100% - var(--am) * 0.7071 - 2px),77.083% calc(100% - var(--am) * 0.6593 - 2px),79.167% calc(100% - var(--am) * 0.6088 - 2px),81.25% calc(100% - var(--am) * 0.5556 - 2px),83.333% calc(100% - var(--am) * 0.5000 - 2px),85.417% calc(100% - var(--am) * 0.4423 - 2px),87.5% calc(100% - var(--am) * 0.3827 - 2px),89.583% calc(100% - var(--am) * 0.3214 - 2px),91.667% calc(100% - var(--am) * 0.2588 - 2px),93.75% calc(100% - var(--am) * 0.1951 - 2px),95.833% calc(100% - var(--am) * 0.1305 - 2px),97.917% calc(100% - var(--am) * 0.0654 - 2px),100% calc(100% - var(--am) * 0.0000 - 2px),100% 100%);filter:blur(1.5px);opacity:.9}
.menisco__cuerpo{background:var(--color);clip-path:polygon(0% 100%,0% calc(100% - var(--am) * 0.0000),2.083% calc(100% - var(--am) * 0.0654),4.167% calc(100% - var(--am) * 0.1305),6.25% calc(100% - var(--am) * 0.1951),8.333% calc(100% - var(--am) * 0.2588),10.417% calc(100% - var(--am) * 0.3214),12.5% calc(100% - var(--am) * 0.3827),14.583% calc(100% - var(--am) * 0.4423),16.667% calc(100% - var(--am) * 0.5000),18.75% calc(100% - var(--am) * 0.5556),20.833% calc(100% - var(--am) * 0.6088),22.917% calc(100% - var(--am) * 0.6593),25% calc(100% - var(--am) * 0.7071),27.083% calc(100% - var(--am) * 0.7518),29.167% calc(100% - var(--am) * 0.7934),31.25% calc(100% - var(--am) * 0.8315),33.333% calc(100% - var(--am) * 0.8660),35.417% calc(100% - var(--am) * 0.8969),37.5% calc(100% - var(--am) * 0.9239),39.583% calc(100% - var(--am) * 0.9469),41.667% calc(100% - var(--am) * 0.9659),43.75% calc(100% - var(--am) * 0.9808),45.833% calc(100% - var(--am) * 0.9914),47.917% calc(100% - var(--am) * 0.9979),50% calc(100% - var(--am) * 1.0000),52.083% calc(100% - var(--am) * 0.9979),54.167% calc(100% - var(--am) * 0.9914),56.25% calc(100% - var(--am) * 0.9808),58.333% calc(100% - var(--am) * 0.9659),60.417% calc(100% - var(--am) * 0.9469),62.5% calc(100% - var(--am) * 0.9239),64.583% calc(100% - var(--am) * 0.8969),66.667% calc(100% - var(--am) * 0.8660),68.75% calc(100% - var(--am) * 0.8315),70.833% calc(100% - var(--am) * 0.7934),72.917% calc(100% - var(--am) * 0.7518),75% calc(100% - var(--am) * 0.7071),77.083% calc(100% - var(--am) * 0.6593),79.167% calc(100% - var(--am) * 0.6088),81.25% calc(100% - var(--am) * 0.5556),83.333% calc(100% - var(--am) * 0.5000),85.417% calc(100% - var(--am) * 0.4423),87.5% calc(100% - var(--am) * 0.3827),89.583% calc(100% - var(--am) * 0.3214),91.667% calc(100% - var(--am) * 0.2588),93.75% calc(100% - var(--am) * 0.1951),95.833% calc(100% - var(--am) * 0.1305),97.917% calc(100% - var(--am) * 0.0654),100% calc(100% - var(--am) * 0.0000),100% 100%)}
@media (max-width:760px){
  .menisco__brillo{clip-path:polygon(0% 100%,0% calc(100% - var(--am) * 0.0000 - 2px),3.125% calc(100% - var(--am) * 0.0980 - 2px),6.25% calc(100% - var(--am) * 0.1951 - 2px),9.375% calc(100% - var(--am) * 0.2903 - 2px),12.5% calc(100% - var(--am) * 0.3827 - 2px),15.625% calc(100% - var(--am) * 0.4714 - 2px),18.75% calc(100% - var(--am) * 0.5556 - 2px),21.875% calc(100% - var(--am) * 0.6344 - 2px),25% calc(100% - var(--am) * 0.7071 - 2px),28.125% calc(100% - var(--am) * 0.7730 - 2px),31.25% calc(100% - var(--am) * 0.8315 - 2px),34.375% calc(100% - var(--am) * 0.8819 - 2px),37.5% calc(100% - var(--am) * 0.9239 - 2px),40.625% calc(100% - var(--am) * 0.9569 - 2px),43.75% calc(100% - var(--am) * 0.9808 - 2px),46.875% calc(100% - var(--am) * 0.9952 - 2px),50% calc(100% - var(--am) * 1.0000 - 2px),53.125% calc(100% - var(--am) * 0.9952 - 2px),56.25% calc(100% - var(--am) * 0.9808 - 2px),59.375% calc(100% - var(--am) * 0.9569 - 2px),62.5% calc(100% - var(--am) * 0.9239 - 2px),65.625% calc(100% - var(--am) * 0.8819 - 2px),68.75% calc(100% - var(--am) * 0.8315 - 2px),71.875% calc(100% - var(--am) * 0.7730 - 2px),75% calc(100% - var(--am) * 0.7071 - 2px),78.125% calc(100% - var(--am) * 0.6344 - 2px),81.25% calc(100% - var(--am) * 0.5556 - 2px),84.375% calc(100% - var(--am) * 0.4714 - 2px),87.5% calc(100% - var(--am) * 0.3827 - 2px),90.625% calc(100% - var(--am) * 0.2903 - 2px),93.75% calc(100% - var(--am) * 0.1951 - 2px),96.875% calc(100% - var(--am) * 0.0980 - 2px),100% calc(100% - var(--am) * 0.0000 - 2px),100% 100%)}
  .menisco__cuerpo{clip-path:polygon(0% 100%,0% calc(100% - var(--am) * 0.0000),3.125% calc(100% - var(--am) * 0.0980),6.25% calc(100% - var(--am) * 0.1951),9.375% calc(100% - var(--am) * 0.2903),12.5% calc(100% - var(--am) * 0.3827),15.625% calc(100% - var(--am) * 0.4714),18.75% calc(100% - var(--am) * 0.5556),21.875% calc(100% - var(--am) * 0.6344),25% calc(100% - var(--am) * 0.7071),28.125% calc(100% - var(--am) * 0.7730),31.25% calc(100% - var(--am) * 0.8315),34.375% calc(100% - var(--am) * 0.8819),37.5% calc(100% - var(--am) * 0.9239),40.625% calc(100% - var(--am) * 0.9569),43.75% calc(100% - var(--am) * 0.9808),46.875% calc(100% - var(--am) * 0.9952),50% calc(100% - var(--am) * 1.0000),53.125% calc(100% - var(--am) * 0.9952),56.25% calc(100% - var(--am) * 0.9808),59.375% calc(100% - var(--am) * 0.9569),62.5% calc(100% - var(--am) * 0.9239),65.625% calc(100% - var(--am) * 0.8819),68.75% calc(100% - var(--am) * 0.8315),71.875% calc(100% - var(--am) * 0.7730),75% calc(100% - var(--am) * 0.7071),78.125% calc(100% - var(--am) * 0.6344),81.25% calc(100% - var(--am) * 0.5556),84.375% calc(100% - var(--am) * 0.4714),87.5% calc(100% - var(--am) * 0.3827),90.625% calc(100% - var(--am) * 0.2903),93.75% calc(100% - var(--am) * 0.1951),96.875% calc(100% - var(--am) * 0.0980),100% calc(100% - var(--am) * 0.0000),100% 100%)}
}
@supports (clip-path:shape(from 0 0,line to 10px 10px)){
  .menisco__brillo,.menisco__brillo{clip-path:shape(from 0% 100%,line to 0% calc(100% - 2px),curve to 100% calc(100% - 2px) with 50% calc(100% - 2px - var(--am) * 2),line to 100% 100%,close)}
  .menisco__cuerpo{clip-path:shape(from 0% 100%,curve to 100% 100% with 50% calc(100% - var(--am) * 2),close)}
}

/* Escenario pegado detrás del contenido de una hoja */
.escenario{position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;overflow:hidden;overflow:clip;z-index:0;pointer-events:none}
.escenario::before{content:"";position:absolute;left:0;right:0;top:0;height:22svh;z-index:6;background:linear-gradient(to bottom,var(--color),transparent)}
.capa--hoja>.contenido{z-index:1}
/* La hoja entra con --x (0 → 1 mientras sube): un leve subir y aclararse */
.js-on .capa--hoja>.contenido>*{transform:translateY(calc((1 - var(--x,1)) * 32px));opacity:min(1,calc(.35 + var(--x,1) * 1.3))}

/* ---------- 01 · Abrir ---------- */
/* --mx/--my: el ratón (−1 … 1, suavizado en escenas.js). Cada capa se mueve según su
   profundidad: el texto casi nada, la funda algo, los ingredientes de delante más.
   Un solo naranja en la portada, el del botón (design-loop, ronda 2): como texto sobre el
   crema da 4,6:1. */
#abrir{--color:var(--crema);--mx:0;--my:0;--naranja:var(--naranja-solido)}
/* Sobre el crema liso el velo de abajo no funde nada: solo borraría el pie de la funda y
   su sombra de contacto */
#abrir>.capa__fijo::after{display:none}
#abrir .z5{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;
  padding:var(--cabecera) var(--margen-der) 0 var(--margen-izq)}
/* Columna de texto de ≤ 30 % del ancho (design-loop, ronda 1): un titular, un párrafo con lo
   que la hace distinta y UN botón (el enlace «¿Cuánto le doy?» salió en la ronda 3) */
.abrir__texto{max-width:430px;opacity:calc(1 - var(--salida-o,var(--salida-texto,0)));
  transform:translate3d(calc(var(--mx) * -2.5px),calc(var(--salida-texto,0) * -200px + var(--my) * -2px),0)}
/* La etiqueta va sin pastilla, como en los demás capítulos: rellena se leía como un segundo
   botón (design-loop, ronda 4) */
.abrir__texto .etiqueta{margin-bottom:16px;width:max-content}
.abrir__texto .titulo{margin-bottom:24px}
.abrir__texto .lede{max-width:40ch}
.abrir__texto .acciones{align-items:center;gap:12px 24px}
/* Las dos cifras de la etiqueta, pegadas a la funda con un hilo (como los ingredientes: son
   parte de la escena, no una pegatina). escenas.js las coloca; en el teléfono no salen (van
   en el párrafo). Salen con el texto y suben con él: quietas, el titular chocaba con el +59 %
   al irse (design-loop, ronda 8). Si no caben al lado de la funda, escenas.js las quita. */
.abrir__cifras{position:absolute;inset:0;pointer-events:none;opacity:calc(1 - var(--salida-texto,0));
  transform:translate3d(0,calc(var(--salida-texto,0) * -200px),0)}
#abrir.sin-cifras .abrir__cifras,#abrir.sin-cifras .abrir__hilo{visibility:hidden}
.cifra-funda{position:absolute;display:flex;flex-direction:column;width:190px;pointer-events:auto;
  transform:translate3d(calc(-100% - 36px + var(--mx) * -9px),calc(-50% + var(--my) * -6px),0)}
.cifra-funda b{font:400 44px/1 "Gelato Luxe",cursive;color:var(--naranja);letter-spacing:0;white-space:nowrap}
.cifra-funda span{font:700 13px/18px "Satoshi";margin-top:4px;text-wrap:balance}
.cifra-funda--b{text-align:left;width:150px;transform:translate3d(calc(36px + var(--mx) * -9px),calc(-50% + var(--my) * -6px),0)}
.cifra-funda--a{text-align:right;align-items:flex-end}
/* Un solo hilo une las dos cifras y pasa por detrás de la funda, como el aro de More
   (design-loop, ronda 3; escenas.js pone sus puntas). Se mueve y sale como las cifras. */
.abrir__hilo{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;overflow:visible;
  opacity:calc(1 - var(--salida-texto,0));transform:translate3d(calc(var(--mx) * -9px),calc(var(--my) * -6px + var(--salida-texto,0) * -200px),0)}
.abrir__hilo line{stroke:var(--mora);stroke-opacity:.55;stroke-width:1}
/* Hasta 1180 px, a la derecha de la funda solo quedan unos 0,12 del ancho: el texto de la
   cifra 2 va en tres líneas cortas y no se sale de la pantalla */
@media (max-width:1180px){.cifra-funda{width:150px}.cifra-funda b{font-size:36px}.cifra-funda--b{width:84px}}
@media (max-width:900px),(max-aspect-ratio:4/5){.abrir__cifras,.abrir__hilo{display:none}}
/* La funda: foto real + 2.5D (canvas encima de la misma foto). Se queda entera en su
   sitio: el portal crece desde su ventana y la va tapando. */
.funda{position:absolute;left:var(--funda-x,68%);top:var(--funda-y,90%);width:var(--funda-w,540px);aspect-ratio:978/1203;z-index:10;
  transform:translate(calc(-50% + var(--fmx,0px)),calc(-100% + var(--fmy,0px)));touch-action:pan-y;cursor:grab}
.funda:active{cursor:grabbing}
/* Mientras el portal crece, la funda se deshace en un anillo suave justo por delante de su
   borde: lo impreso en ella se apaga antes de que el círculo lo tape (design-loop, ronda 3;
   escenas.js pone el centro, el radio y el ancho del anillo) */
#abrir.con-portal .funda{
  -webkit-mask:radial-gradient(circle at var(--anillo-x,40%) var(--anillo-y,74%),transparent var(--anillo-r,0px),#000 calc(var(--anillo-r,0px) + var(--anillo-f,120px))) no-repeat;
  mask:radial-gradient(circle at var(--anillo-x,40%) var(--anillo-y,74%),transparent var(--anillo-r,0px),#000 calc(var(--anillo-r,0px) + var(--anillo-f,120px))) no-repeat}
.funda img,.funda canvas{position:absolute;inset:0;width:100%;height:100%}
/* El lienzo mide 1,12 veces la caja (funda.js): con el tope general de max-width:100% se
   quedaba en el ancho de la caja y la funda salía un 11 % más estrecha de lo que es */
.funda canvas{opacity:0;transition:opacity .3s;max-width:none}
.funda.gl canvas{opacity:1}
.funda.gl img{visibility:hidden}
/* Sombra de contacto (z2): se estrecha cuando la funda gira */
.funda-sombra{position:absolute;left:var(--funda-x,68%);top:var(--funda-y,90%);width:calc(var(--funda-w,540px) * .92);height:44px;
  transform:translate(calc(-50% + var(--fmx,0px)),-55%) scaleX(calc(1 - var(--giro-abs,0) * .18));
  background:radial-gradient(50% 50% at 50% 50%,rgba(27,31,60,.44),rgba(27,31,60,0) 72%);filter:blur(4px);opacity:calc(1 - var(--portal,0) * 3)}
/* Los ingredientes: escenas.js los coloca y los mete por la ventana con el scroll */
.abrir__ings{position:absolute;inset:0;z-index:5;pointer-events:none}
.abrir__ings--delante{z-index:20}
/* Nítidos: sin desenfoque de profundidad (Luis, 26 sep 2026) */
.abrir__ing{position:absolute;left:0;top:0;width:var(--iw,120px);height:auto;max-width:none;transform-origin:50% 50%;
  filter:drop-shadow(0 14px 16px rgba(110,40,0,.28))}
/* Portal: el relleno visto a través de un círculo que nace en la ventana de la funda
   (escenas.js le pone el clip-path en cada cuadro). Dentro, el relleno se aleja 1,3 → 1. */
.portal{position:absolute;inset:0;z-index:4;visibility:hidden;pointer-events:none;overflow:hidden;overflow:clip;background:#C9485B}
.portal.activo{visibility:visible}
.portal picture,.relleno picture,.derrame picture{position:absolute;inset:0}
.relleno__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;
  transform-origin:var(--rz-x,50%) var(--rz-y,50%);transform:scale(var(--rz,1))}
/* El primer cuadro de 03 aparece de a poco: así el relevo del derrame no salta */
#juntas .z5{opacity:var(--entra,1)}
.portal,.derrame{--p:0}
/* Teléfono: arriba el texto, en medio la funda (la coloca escenas.js en el hueco que
   queda), abajo los botones, en la zona del pulgar */
@media (max-width:900px),(max-aspect-ratio:4/5){
  #abrir .z5{grid-template-columns:1fr;align-items:stretch;padding:calc(var(--cabecera) + 16px + var(--marca-extra,0px)) var(--margen-der) max(20px,env(safe-area-inset-bottom)) var(--margen-izq);text-align:center}
  .abrir__texto{margin-inline:auto;display:flex;flex-direction:column;align-items:center;max-width:none;height:100%}
  .abrir__texto .etiqueta{margin-bottom:12px}
  .abrir__texto .titulo{margin-bottom:8px;margin-inline:auto}
  /* Al irse, el texto sube 160 px y el botón baja 160: se apartan de la funda en vez de
     cruzarla (escenas.js lo descuenta al colocar la funda) */
  .abrir__texto{transform:translate3d(0,calc(var(--salida-texto,0) * -160px),0)}
  .abrir__texto .acciones{margin-top:auto;width:100%;justify-content:center;gap:4px 8px;
    transform:translateY(calc(var(--salida-texto,0) * 320px))}
  .abrir__texto .acciones .boton{flex:1 1 100%}
}
/* ---------- 02 · Dentro ---------- */
#dentro{--color:var(--ambar)}
#dentro .z5{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;padding:var(--cabecera) var(--margen-der) 0 var(--margen-izq)}
.dentro__texto{max-width:480px;opacity:var(--texto-dentro,1);transform:translateY(calc((1 - var(--texto-dentro,1)) * 24px))}
.dentro__cifra{display:flex;align-items:baseline;gap:12px;margin:12px 0 16px}
.dentro__cifra span:not(.cifra){font:700 16px/24px "Satoshi";max-width:22ch}
/* En el mundo ámbar el naranja no se lee: la cifra va en mora */
#dentro .cifra{color:var(--mora)}
.familias{display:grid;gap:12px;margin-top:24px}
.familia__nombre{font:700 14px/20px "Satoshi";letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.familia__nombre::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c)}
.familia ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.ing{font:700 14px/20px "Satoshi";padding:8px 14px;border-radius:999px;border:2px solid color-mix(in srgb,var(--mora) 26%,transparent);
  background:color-mix(in srgb,var(--crema) 72%,transparent);color:var(--mora);cursor:pointer;
  transition:background-color .3s var(--curva),border-color .3s var(--curva),transform .3s var(--curva)}
.ing:hover{transform:translateY(-2px);border-color:var(--mora)}
.ing[aria-pressed=true]{background:var(--mora);color:var(--crema);border-color:var(--mora)}
/* La llamada del ingrediente que se tocó: una línea que sale de él y, en su punta, su tarjetita,
   que se despliega hacia fuera (antes era una ficha bajo la órbita; Luis, 27 sep 2026: «al lado
   de cada alimento, que no salga abajo»). escenas.js pone la línea y el punto de la punta
   (--ll-x, --ll-y) en cada cuadro, y el lado: hacia donde hay sitio. */
.llamada{position:absolute;inset:0;z-index:100;pointer-events:none;transition:opacity .2s}
.llamada.lejos{opacity:0}
.llamada__linea{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.llamada__linea polyline{fill:none;stroke:var(--crema);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 1px 2px rgba(110,40,0,.5));transition:stroke-dashoffset .32s var(--curva)}
.llamada__linea circle{fill:var(--crema);opacity:0;transition:opacity .15s}
.llamada__texto{position:absolute;left:var(--ll-x,0);top:var(--ll-y,0);width:max-content;max-width:var(--ll-w,250px);margin:0;
  padding:10px 14px;border-radius:16px;background:color-mix(in srgb,var(--crema) 94%,transparent);color:var(--mora);
  box-shadow:0 10px 24px rgba(110,40,0,.24);transform:translateY(-50%);clip-path:inset(0 100% 0 0 round 16px);
  transition:clip-path .3s var(--curva) .2s}
.llamada--izq .llamada__texto{transform:translate(-100%,-50%);clip-path:inset(0 0 0 100% round 16px)}
.llamada__texto b{display:block;font:700 15px/20px "Satoshi"}
.llamada__texto span{display:block;font-size:13px;line-height:18px;margin-top:2px}
.llamada.abierta polyline{stroke-dashoffset:0}
.llamada.abierta circle{opacity:1}
.llamada.abierta .llamada__texto{clip-path:inset(0 0 0 0 round 16px)}
@media (max-width:760px){
  .llamada__texto{padding:8px 10px;border-radius:12px}
  .llamada__texto b{font-size:13px;line-height:17px}
  .llamada__texto span{font-size:12px;line-height:16px}
}
@media (prefers-reduced-motion:reduce){.llamada,.llamada *{transition:none!important}}
/* El plato de Luis en el centro de la órbita: los ingredientes de atrás pasan por detrás
   (z-index < 50) y los de delante por delante. El centro de la órbita cae en su borde. */
.plato-orbita{position:absolute;left:var(--orb-x,62%);top:var(--orb-y,50%);width:var(--plato-w,440px);height:auto;z-index:50;max-width:none;
  transform:translate(-50%,-42%) translate(var(--dolly-x,0px),var(--dolly-y,0px)) scale(calc(var(--porcion-s,1) * var(--dolly,1)));transform-origin:50% 42%;pointer-events:none;
  filter:drop-shadow(0 28px 34px rgba(110,40,0,.38))}
.orbita{position:absolute;inset:0}
.orbita__ing{position:absolute;left:0;top:0;width:var(--ing-w,118px);height:var(--ing-w,118px);margin:calc(var(--ing-w,118px) / -2) 0 0 calc(var(--ing-w,118px) / -2);
  background:transparent;border:0;cursor:pointer;padding:0;will-change:transform;pointer-events:auto}
.orbita__ing img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(110,40,0,.35))}
.orbita__ing[aria-pressed=true] img{filter:drop-shadow(0 0 0 var(--crema)) drop-shadow(0 12px 14px rgba(110,40,0,.35))}
/* Relevo 01→02: el relleno de la portada, a pantalla entera, se encoge hasta la comida del
   plato (escenas.js le pone la elipse, la escala y la opacidad) */
.relleno{position:absolute;inset:0;visibility:hidden;pointer-events:none;overflow:hidden;overflow:clip}
.relleno.activo{visibility:visible}
/* Mientras la cámara se aleja, el fondo del 02 sale teñido del rojo del relleno (el mismo del
   portal) y se aclara hasta el ámbar: no aparece entero de golpe (design-loop, ronda 6) */
#dentro .z0::after{content:"";position:absolute;inset:0;background:#C9485B;opacity:var(--velo-relleno,0);pointer-events:none}
/* Detrás de las letras, un velo suave del color de la luz (Luis, 27 sep 2026: sobre el ámbar del 02
   y la madera del 05 el párrafo «no se lee; tiene que tener contraste»). Aclara lo que hay detrás
   del texto mora —los bordes oscuros de las burbujas, la veta de la madera— sin caja: se funde con
   la escena. La letra blanca se medía peor sobre el ámbar que la mora. */
#dentro .z0::before,#cuanto .z0::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
#dentro .z0::before{background:linear-gradient(90deg,rgba(255,240,220,.62) 0,rgba(255,240,220,.46) 30%,rgba(255,240,220,0) 52%)}
@media (min-width:901px) and (min-aspect-ratio:4/5){
  #cuanto .z0::before{background:radial-gradient(ellipse 58% 50% at 24% 16%,rgba(255,254,243,.8),rgba(255,254,243,0))}
}
@media (max-width:900px),(max-aspect-ratio:4/5){
  #dentro .z0::before{background:linear-gradient(0deg,rgba(255,240,220,.6) 0,rgba(255,240,220,.42) 38%,rgba(255,240,220,0) 58%)}
}
/* Derrame (02→03): el mora brota desde la porción con un borde ondulado */
.derrame{position:absolute;inset:0;z-index:4;visibility:hidden;pointer-events:none;background:var(--mora)}
.derrame.activo{visibility:visible}
.franja-familia{display:none}
/* PC bajo (un portátil con la barra del navegador, una tablet apaisada): la columna entera cabe
   en una pantalla, sin meterse bajo la cabecera */
@media (min-width:901px) and (max-height:760px){
  #dentro .titulo{font-size:48px;line-height:52px}
  #dentro .cifra{font-size:72px}
  .dentro__texto .lede{font-size:16px;line-height:24px}
  .familias{margin-top:16px;gap:8px}
  .ing{padding:6px 12px;font-size:13px;line-height:18px}
}
@media (max-width:900px),(max-aspect-ratio:4/5){
  #dentro .z5{grid-template-columns:1fr;align-items:end;padding:0 var(--margen-der) 20px var(--margen-izq)}
  .dentro__texto{max-width:none}
  /* El párrafo sale como en PC (Luis, 27 sep 2026). Las pastillas no caben: la franja dice la
     familia que está al frente (o la del ingrediente tocado, que se explica en su llamada) */
  .familias{display:none}
  .dentro__cifra{margin:8px 0 12px}
  .dentro__texto .lede{margin-bottom:12px}
  .franja-familia{display:block;padding:12px 16px;border-radius:24px;background:color-mix(in srgb,var(--crema) 86%,transparent);color:var(--mora)}
  .franja-familia b{display:block;font:700 12px/16px "Satoshi";letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
  .franja-familia span{font-size:14px;line-height:20px}
}

/* ---------- 03 · Juntas ---------- */
#juntas{--color:var(--mora)}
/* PC: todo el texto a la izquierda; la mitad derecha es la mesa, donde la Flexi y la
   croqueta se juntan en el charco de luz (el render llega en la F2) */
#juntas .z5{display:grid;grid-template-columns:minmax(0,560px) 1fr;align-content:center;gap:24px 48px;padding:var(--cabecera) var(--margen-der) 0 var(--margen-izq)}
#juntas .z5>*{grid-column:1}
@media (min-width:761px){
  #listaPerro{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
  .lista-perro{padding:16px 20px}
}
@media (min-width:761px) and (max-height:800px){
  .frase{font-size:48px;line-height:52px}
  .juntas__lede{display:none}
}
.frase{font:400 60px/64px "Daily Shine",cursive;max-width:13ch;text-wrap:balance}
.frase .pal{color:color-mix(in srgb,var(--crema) 28%,transparent);transition:color .5s var(--curva)}
.frase .pal.on{color:var(--crema)}
.frase .pal.on.acento{color:var(--albaricoque)}
.juntas__lede{margin-top:24px}
/* Vidrio mora: con el 6 % de crema la lista quedaba sobre la foto y su título no llegaba a 3:1
   (Luis, 27 sep 2026: «tiene que tener contraste») */
.lista-perro{padding:24px;border-radius:24px;background:rgba(27,31,60,.66);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,254,243,.14)}
.lista-perro h3{font:700 18px/28px "Satoshi";margin-bottom:12px}
.marcar{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;min-height:48px;
  background:transparent;border:0;color:var(--crema);font:700 16px/24px "Satoshi";padding:8px 4px;border-radius:12px;transition:background-color .3s var(--curva)}
.marcar:hover{background:rgba(255,254,243,.06)}
.marcar__caja{width:24px;height:24px;flex:0 0 24px;border-radius:8px;border:2px solid rgba(255,254,243,.5);display:grid;place-items:center;transition:background-color .3s,border-color .3s}
.marcar__caja svg{width:14px;height:14px;stroke:var(--mora);stroke-width:3;fill:none;opacity:0;transition:opacity .2s}
.marcar[aria-pressed=true] .marcar__caja{background:var(--albaricoque);border-color:var(--albaricoque)}
.marcar[aria-pressed=true] .marcar__caja svg{opacity:1}
.contador-lista{display:flex;align-items:center;gap:16px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,254,243,.14)}
.contador-lista .cifra{font-size:48px}
.contador-lista p{font-size:14px;line-height:20px}
/* El plato de croquetas de Luis apoyado en el charco de luz del piso (--jp-x/--jp-y son el
   ancla del fondo; escenas.js mueve el plato y la porción que cae). Un tinte cálido leve
   lo casa con la luz de la foto. */
.juntas__plato{position:absolute;left:var(--jp-x,70%);top:var(--jp-y,80%);width:var(--jp-w,432px);aspect-ratio:1129/991;
  transform:translate(-50%,-97%);transform-origin:50% 97%;pointer-events:none;opacity:0;
  filter:sepia(.1) saturate(1.05) brightness(.97)}
.juntas__plato img{position:absolute;max-width:none}
.juntas__base,.juntas__final{inset:0;width:100%;height:100%}
.juntas__final{opacity:0}
/* La Flexi cae, rebota y se queda redonda encima (escenas.js, «rebote») */
.juntas__porcion{height:auto;transform-origin:50% 100%;visibility:hidden;will-change:transform}
/* Sombra de contacto (z2): una elipse oscura difuminada más una oclusión suave alrededor */
.juntas__sombra{position:absolute;left:var(--jp-x,70%);top:calc(var(--jp-y,80%) + var(--jp-w,432px) * .005);width:calc(var(--jp-w,432px) * .9);height:calc(var(--jp-w,432px) * .11);
  transform:translate(-50%,-50%);opacity:0;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(8,6,18,.82),rgba(8,6,18,.5) 50%,rgba(8,6,18,0) 100%);filter:blur(4px)}
.juntas__sombra::after{content:"";position:absolute;inset:-90% -22%;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(8,6,18,.4),rgba(8,6,18,0) 72%);filter:blur(12px)}
@media (max-width:900px),(max-aspect-ratio:4/5){
  #juntas .z5{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;gap:12px;align-content:stretch;
    padding:calc(var(--cabecera) + 8px) var(--margen-der) 20px var(--margen-izq)}
  #juntas .z5>.lista-perro{grid-row:3}
  /* El velo mora detrás de la lista: el piso se apaga hacia abajo y la lista se lee */
  #juntas .z5::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44%;z-index:-1;
    background:linear-gradient(to top,var(--mora) 58%,rgba(27,31,60,.72) 78%,rgba(27,31,60,0))}
  /* Y arriba, detrás de la frase y el párrafo: en la tablet el párrafo caía sobre la foto (2,8:1) */
  #juntas .z5::before{content:"";position:absolute;left:0;right:0;top:0;height:42%;z-index:-1;
    background:linear-gradient(to bottom,rgba(27,31,60,.78) 55%,rgba(27,31,60,0))}
}
@media (max-width:760px){
  .frase{font-size:36px;line-height:40px}
  .juntas__lede{display:none}
  .lista-perro{padding:16px}
  .lista-perro h3{font-size:16px;line-height:24px;margin-bottom:4px}
  .marcar{min-height:44px;font-size:14px;line-height:20px;padding:4px}
  .contador-lista{margin-top:8px;padding-top:8px}
  .contador-lista .cifra{font-size:36px}
}

/* ---------- 04 · Nutre ---------- */
#nutre{--color:var(--mora2)}
/* El fondo de gelatina va apagado: la línea del perro tiene que leerse limpia */
#nutre .fondo{opacity:.3}
#nutre .z5{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px;align-items:center;padding:var(--cabecera) var(--margen-der) 0 var(--margen-izq)}
.perro-linea{position:relative;width:100%;color:var(--crema)}
.perro-linea svg,.perro-linea img{width:100%;height:auto}
.perro-linea svg path{stroke-dasharray:var(--l) var(--l);stroke-dashoffset:calc(var(--l) * (1 - var(--t,1)))}
.destino{position:absolute;left:calc(var(--dx) * 100%);top:calc(var(--dy) * 100%);width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  display:grid;place-items:center;background:rgba(27,31,60,.55);box-shadow:inset 0 0 0 2px rgba(247,171,89,.4);color:var(--albaricoque);
  opacity:.35;transform:scale(.8);transition:opacity .5s var(--curva),transform .5s var(--curva),background-color .5s var(--curva);border:0;cursor:pointer}
.destino svg{width:36px;height:36px}
.destino.on{opacity:1;transform:scale(1);background:var(--naranja-solido);color:var(--crema);box-shadow:0 0 0 8px rgba(243,149,63,.25)}
.gota-viaje{position:absolute;left:0;top:0;width:30px;height:45px;margin:-26px 0 0 -15px;opacity:0;pointer-events:none;
  background:url("../assets/v2/3d/gota.webp") calc(var(--gota-c,2) * -30px) calc(var(--gota-f,1) * -45px)/180px auto no-repeat;
  filter:drop-shadow(0 0 14px rgba(247,171,89,.7))}
.beneficios{display:grid;gap:12px}
.beneficio{display:grid;grid-template-columns:48px 1fr;gap:4px 16px;align-items:center;text-align:left;width:100%;
  padding:16px;border-radius:24px;border:0;cursor:pointer;color:var(--crema);background:rgba(27,31,60,.34);box-shadow:inset 0 0 0 1px rgba(255,254,243,.12);
  transition:background-color .4s var(--curva),box-shadow .4s var(--curva)}
.beneficio__icono{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(243,149,63,.16);color:var(--albaricoque);grid-row:span 2}
.beneficio__icono svg{width:30px;height:30px}
.beneficio b{font:700 16px/24px "Satoshi"}
.beneficio p{font-size:14px;line-height:20px;opacity:.78;grid-column:2;display:none}
.beneficio[aria-expanded=true] p{display:block}
.beneficio.on{background:linear-gradient(rgba(243,149,63,.14),rgba(243,149,63,.14)),rgba(27,31,60,.4);box-shadow:inset 0 0 0 1px rgba(243,149,63,.6)}
.beneficio.on .beneficio__icono{background:var(--naranja-solido);color:var(--crema)}
.no-js .beneficio p,html:not(.js-on) .beneficio p{display:block}
/* PC bajo (1366 × 657, un portátil con la barra del navegador): el titular no se mete bajo la
   cabecera ni el último beneficio se sale por abajo */
@media (min-width:901px) and (max-height:760px){
  #nutre .titulo{font-size:48px;line-height:52px}
  .nutre__cab .lede{font-size:16px;line-height:24px}
  .beneficio{padding:12px 16px}
}
@media (max-width:900px),(max-aspect-ratio:4/5){
  #nutre .z5{grid-template-columns:1fr;gap:12px;align-content:start;padding:calc(var(--cabecera) + 16px) var(--margen-der) 20px var(--margen-izq)}
  .nutre__cab .lede{display:none}
  .beneficios{grid-template-columns:1fr 1fr;gap:8px}
  .beneficio{grid-template-columns:1fr;padding:12px;gap:8px}
  .beneficio__icono{width:40px;height:40px;grid-row:auto}
  .beneficio b{font-size:14px;line-height:20px}
  .beneficio p{grid-column:1}
  .destino{width:36px;height:36px;margin:-18px 0 0 -18px}
  .destino svg{width:22px;height:22px}
  .destino.on{box-shadow:0 0 0 5px rgba(243,149,63,.25)}
}

/* ---------- 05 · Cuánto ---------- */
#cuanto{--color:var(--crema)}
.cuanto__rejilla{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px;align-items:start}
.cuanto__cab{position:sticky;top:calc(var(--cabecera) + 32px)}
.cuanto__cab .lede{margin-top:16px}
.calc{background:color-mix(in srgb,var(--crema) 94%,transparent);border-radius:32px;padding:32px;box-shadow:0 30px 60px rgba(27,31,60,.14),inset 0 0 0 1px rgba(27,31,60,.08)}
.calc__campo{display:block;margin-bottom:24px}
.calc__campo>span{display:block;font:700 14px/20px "Satoshi";letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;opacity:.8}
.calc__nombre{width:100%;min-height:48px;padding:12px 16px;border-radius:16px;border:2px solid rgba(27,31,60,.18);background:var(--crema);
  font:700 16px/24px "Satoshi";color:var(--mora)}
.calc__nombre:focus{border-color:var(--naranja-solido);outline:none}
.calc__modo{display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(27,31,60,.07);margin-bottom:24px}
.calc__modo button{flex:1;min-height:44px;border:0;border-radius:999px;background:transparent;cursor:pointer;font:700 14px/20px "Satoshi";color:var(--mora);opacity:.72;transition:background-color .3s,opacity .3s,color .3s}
.calc__modo button[aria-pressed=true]{background:var(--mora);color:var(--crema);opacity:1}
.calc__peso{display:flex;align-items:baseline;gap:8px}
.calc__peso output{font:400 60px/1 "Gelato Luxe",cursive}
.calc__raza{margin-left:auto;font:700 14px/20px "Satoshi";padding:6px 12px;border-radius:999px;background:rgba(235,102,8,.12);white-space:nowrap}
.calc__barra{position:relative;padding-top:112px}
.calc__perro{position:absolute;left:0;top:0;width:108px;height:108px;transform-origin:50% 100%;pointer-events:none;
  transition:left .4s var(--curva),transform .4s var(--curva)}
.calc__perro img{position:absolute;left:0;bottom:0;width:100%;height:100%;object-fit:contain;object-position:bottom;transition:opacity .3s}
.calc__perro img.sale{opacity:0}
/* Al cambiar de raza el perrito da un saltito (una vez, al tocar la barra: nunca en bucle) */
.calc__perro.salta img:not(.sale){animation:saltito .42s var(--curva)}
@keyframes saltito{0%{transform:translateY(0) scale(1,1)}35%{transform:translateY(-14px) scale(.96,1.05)}70%{transform:translateY(0) scale(1.05,.95)}100%{transform:none}}
.calc__dato b{font-variant-numeric:tabular-nums}
.calc__dato.cambia b{animation:latido .45s var(--curva)}
@keyframes latido{40%{transform:scale(1.06)}100%{transform:none}}
.calc__barra input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:14px;margin:0 0 8px;background:transparent;cursor:ew-resize}
.calc__barra input::-webkit-slider-runnable-track{height:14px;border-radius:999px;background:linear-gradient(90deg,var(--naranja) var(--pct,30%),rgba(27,31,60,.14) var(--pct,30%))}
.calc__barra input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-7px;border-radius:50%;background:var(--naranja-solido);border:4px solid var(--crema);box-shadow:0 3px 8px rgba(27,31,60,.34)}
.calc__barra input::-moz-range-track{height:14px;border-radius:999px;background:rgba(27,31,60,.14)}
.calc__barra input::-moz-range-progress{height:14px;border-radius:999px;background:var(--naranja)}
.calc__barra input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--naranja-solido);border:4px solid var(--crema)}
.calc__escala{display:flex;justify-content:space-between;font:700 12px/16px "Satoshi";opacity:.6;margin-bottom:24px}
.calc__resultado{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.calc__dato{border-radius:24px;padding:16px 20px;background:var(--mora);color:var(--crema)}
.calc__dato b{display:block;font:400 48px/52px "Gelato Luxe",cursive;color:var(--albaricoque)}
.calc__dato span{font:700 14px/20px "Satoshi"}
.calc__aviso{margin-top:16px;padding:12px 16px;border-radius:16px;background:rgba(235,102,8,.12);font:700 14px/20px "Satoshi"}
.calc__nota{margin-top:16px;font-size:14px;line-height:20px;opacity:.78}
.calc .acciones{margin-top:24px}
.calc-sin-js table{width:100%;border-collapse:collapse;margin-top:12px;font-size:14px;line-height:20px}
.calc-sin-js th,.calc-sin-js td{padding:8px;border-bottom:1px solid rgba(27,31,60,.14);text-align:left}
/* PC con ratón en una pantalla baja (un portátil al 125 %): la calculadora entera cabe en la
   pantalla, sin cortarse (Luis, 27 sep 2026). El nombre y el modo van en una fila y lo demás se
   aprieta un poco; en una pantalla alta y en la tablet queda como estaba. */
@media (hover:hover) and (pointer:fine) and (min-width:901px) and (min-aspect-ratio:4/5) and (max-height:960px){
  .calc{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;padding:24px}
  .calc>*{grid-column:1/-1}
  .calc>.calc__campo:first-child{grid-column:1}
  .calc>.calc__modo{grid-column:2;align-self:end}
  .calc__modo button{padding:0 16px;white-space:nowrap}
  .calc__campo[for=peso]{margin-bottom:4px}
  .calc__peso output{font-size:48px}
  .calc__barra{padding-top:88px}
  .calc__perro{width:84px;height:84px}
  .calc__escala{margin-bottom:14px}
  .calc__dato{padding:12px 16px}
  .calc__dato b{font-size:40px;line-height:44px}
  .calc__nota{margin-top:12px;font-size:13px;line-height:18px}
  .calc .acciones{margin-top:16px}
}
@media (hover:hover) and (pointer:fine) and (min-width:901px) and (min-aspect-ratio:4/5) and (max-height:700px){
  .calc__campo,.calc__modo{margin-bottom:16px}
  .calc__campo>span{margin-bottom:4px}
  .calc__barra{padding-top:72px}
  .calc__perro{width:68px;height:68px}
  .calc__dato b{font-size:34px;line-height:38px}
}
/* La mesa de la calculadora, sobre el mantel (su centro lo deja capas.js en --ancla-x/y):
   la funda de pie detrás, a la izquierda, y el plato delante. Las dos son secuencias de
   Blender (web-3d/) que mueve la calculadora: el plato se llena hasta la ración y la funda
   gira un poco al mover el peso y se inclina hacia el plato, como quien sirve (un muelle
   de escenas.js que gira desde su esquina de abajo). La funda siempre se ve entera. */
.mesa-calc{position:absolute;left:var(--ancla-x,30%);top:var(--ancla-y,64%);width:var(--mesa-w,540px);aspect-ratio:1.5;transform:translate(-50%,calc(-66% + var(--mesa-dy,0px)))}
/* Los lienzos de las secuencias entran de a poco cuando su hoja ya cargó (el ancho lo
   pone cada sitio donde se usan) */
.secuencia{display:block;height:auto;opacity:0;transition:opacity .5s var(--curva)}
.secuencia.lista{opacity:1}
.calc-funda{position:absolute;left:0;bottom:19%;width:46%}
.calc-funda canvas{width:100%;filter:drop-shadow(0 16px 16px rgba(27,31,60,.3));transform-origin:92% 97%;transform:rotate(calc(var(--inclina,0) * 9deg))}
.calc-plato{position:absolute;right:0;bottom:0;width:64%;filter:drop-shadow(0 20px 24px rgba(27,31,60,.3))}
@media (max-width:900px),(max-aspect-ratio:4/5){
  /* Teléfono: la cocina con la funda y el plato es un panel pegado arriba (38 % de la
     pantalla) y los controles pasan por debajo, en la zona del pulgar: el plato se ve
     mientras se mueve la barra */
  #cuanto .escenario{height:38svh;margin-bottom:-38svh;z-index:2;box-shadow:0 12px 24px rgba(27,31,60,.12)}
  #cuanto .escenario::before{display:none}
  #cuanto .escenario::after{content:"";position:absolute;left:0;right:0;bottom:0;height:32px;z-index:6;background:linear-gradient(to top,var(--color),transparent)}
  #cuanto>.contenido{padding-top:calc(38svh + 24px)}
  .mesa-calc{--mesa-w:min(90vw,360px);transform:translate(-50%,-60%)}
  .cuanto__rejilla{grid-template-columns:1fr;gap:24px}
  .cuanto__cab{position:static}
  .calc{padding:20px;border-radius:24px}
  .calc__peso output{font-size:48px}
  .calc__dato b{font-size:36px;line-height:40px}
  .calc .acciones .boton{flex:1 1 100%}
  /* El resultado se queda a la vista mientras se mueve la barra, sobre una franja del
     color de la hoja (lo de debajo pasa por detrás, no se ve a trozos entre las tarjetas) */
  .calc__resultado{position:sticky;bottom:0;z-index:2;margin:0 -20px;padding:10px 20px 12px;background:var(--crema);
    box-shadow:0 -10px 14px -6px rgba(27,31,60,.12);border-radius:20px 20px 0 0}
}

/* ---------- 06 · Nuestras líneas ---------- */
#lineas{--color:var(--mora2)}
/* Cuatro tarjetas iguales (misma caja, misma letra, misma forma de contarlo). Arriba, una
   vitrina del color de la línea con su funda llena (solo foto real) y el producto fuera de
   ella; una línea sin foto de su funda enseña solo el producto y la chapa «Muy pronto». */
.lineas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:40px}
.linea{--c:var(--naranja);--e:1;--par:0;display:flex;flex-direction:column;border-radius:32px;overflow:hidden;overflow:clip;background:var(--crema);color:var(--mora);
  box-shadow:0 24px 48px rgba(0,0,0,.22);transform:translateY(calc((1 - var(--e)) * 56px));opacity:calc(.15 + var(--e) * .85)}
.linea__escena{position:relative;aspect-ratio:1/1;overflow:hidden;overflow:clip;
  background:radial-gradient(72% 58% at 50% 70%,color-mix(in srgb,var(--c) 30%,var(--crema)),color-mix(in srgb,var(--c) 78%,var(--mora)) 100%)}
.linea__escena img{position:absolute;max-width:none;height:auto}
/* La funda sube desde abajo girando al entrar y, después, un poco más rápido que la tarjeta;
   el producto entra de lado. Al pasar el ratón (PC), la funda sube 6 px y se inclina 2°. */
.linea__funda{left:9%;bottom:7%;width:auto!important;height:84%!important;filter:drop-shadow(0 16px 18px rgba(0,0,0,.35));
  transform-origin:50% 100%;transform:translateY(calc((1 - var(--e)) * 70% + var(--par) * -18px)) rotate(calc((1 - var(--e)) * -8deg));
  transition:translate .35s var(--curva),rotate .35s var(--curva)}
.linea__producto{right:5%;bottom:5%;width:54%;filter:drop-shadow(0 14px 16px rgba(0,0,0,.35));
  transform:translateX(calc((1 - var(--e)) * 46%));opacity:var(--e)}
.linea--sola .linea__funda{left:0;right:0;margin-inline:auto;bottom:6%;height:88%!important}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .linea:hover .linea__funda{translate:0 -6px;rotate:2deg}
}
.linea--sin-funda .linea__producto{right:auto;left:50%;bottom:14%;width:80%;transform:translateX(calc(-50% + (1 - var(--e)) * 46%))}
.linea__texto{display:flex;flex-direction:column;gap:8px;flex:1;padding:20px 22px 24px}
.linea h3{font:400 32px/36px "Daily Shine",cursive;color:color-mix(in srgb,var(--c) 82%,var(--mora))}
.linea p{font-size:14px;line-height:20px;flex:1;opacity:.84}
.linea__pronto{align-self:flex-start;font:700 12px/16px "Satoshi";letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:var(--mora);color:var(--crema)}
.linea .boton{align-self:flex-start;min-height:44px;padding:10px 18px;font-size:14px;line-height:20px}
@media (max-width:1180px){.lineas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  /* Teléfono: una tarjeta por fila, la vitrina a la izquierda y el texto al lado */
  .lineas{grid-template-columns:1fr;gap:12px;margin-top:24px}
  .linea{flex-direction:row;border-radius:24px;min-height:176px}
  .linea__escena{flex:0 0 44%;aspect-ratio:auto}
  .linea__texto{padding:16px 16px 18px}
  .linea h3{font-size:26px;line-height:30px}
  .linea p{font-size:13px;line-height:18px}
}

/* ---------- 07 · Dónde comprar ---------- */
#pidela{--color:var(--durazno)}
.pidela__cab{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px 48px;align-items:end}
.pidela__cab .lede{max-width:40ch}
.precio{display:flex;align-items:baseline;gap:12px}
/* El mapa: la placa de web-videos/ (Remotion + MapLibre, OpenStreetMap) dentro de un marco. escenas.js
   la acerca con el scroll (transform) y pone los pines encima con la misma proyección (mapa.json). */
.mapa{margin:32px 0 0}
.mapa__marco{position:relative;height:min(64svh,620px);min-height:360px;border-radius:32px;overflow:hidden;overflow:clip;background:#FBF1E4;isolation:isolate;
  box-shadow:0 28px 56px rgba(27,31,60,.16)}
.mapa__marco::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(27,31,60,.1)}
.mapa__placa{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;opacity:0;transition:opacity .6s var(--curva)}
.mapa.listo .mapa__placa{opacity:1}
.mapa__img{display:block;max-width:none;width:var(--placa-w,1600px);height:var(--placa-h,800px)}
.mapa__pines{position:absolute;inset:0;z-index:1;pointer-events:none}
.mapa__pie{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;margin-top:12px;font-size:14px;line-height:20px}
.mapa__pie span{opacity:.84}
.mapa__pie small{font-size:12px;line-height:16px;opacity:.9}
/* Los pines: la gota de la marca (veterinarias, con su número), la cocina en mora y «tú» como un punto.
   La punta de la gota cae justo en el sitio; al entrar, cae y rebota una vez (nunca en bucle). */
.pin{position:absolute;left:0;top:0;border:0;background:none;padding:0;color:inherit;font:inherit;pointer-events:none}
.pin--vet{pointer-events:auto;cursor:pointer}
.pin__cuerpo{position:absolute;left:0;bottom:0;display:flex;flex-direction:column;align-items:center;transform-origin:50% 100%;
  transform:translate(-50%,-24px) scale(.5);opacity:0;transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .3s var(--curva)}
.pin.on .pin__cuerpo{transform:translate(-50%,0) scale(1);opacity:1}
.pin__gota{position:relative;width:34px;height:34px;margin-bottom:7px;display:grid;place-items:center;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--naranja-solido);box-shadow:0 6px 12px rgba(27,31,60,.28),inset 0 0 0 3px var(--crema)}
.pin__gota b{transform:rotate(45deg);font:400 16px/1 "Gelato Luxe",cursive;font-weight:400;color:var(--crema)}
.pin__nombre{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap;font:700 13px/18px "Satoshi";
  padding:4px 10px;border-radius:999px;background:var(--mora);color:var(--crema);box-shadow:0 4px 10px rgba(27,31,60,.2)}
.pin--vet .pin__nombre{opacity:0;transition:opacity .25s var(--curva)}
.pin--vet:hover .pin__nombre,.pin--vet:focus-visible .pin__nombre,.pin--vet.activo .pin__nombre{opacity:1}
.pin--vet.activo .pin__gota{background:var(--mora)}
.pin--vet:focus-visible{outline:none}
.pin--vet:focus-visible .pin__gota{outline:3px solid var(--naranja-solido);outline-offset:3px}
.pin--cocina .pin__gota{width:28px;height:28px;margin-bottom:6px;background:var(--mora)}
.pin--cocina .pin__gota b{width:8px;height:8px;border-radius:50%;background:var(--albaricoque)}
.pin--yo .pin__gota{width:18px;height:18px;margin-bottom:-9px;border-radius:50%;transform:none;background:var(--mora);
  box-shadow:0 0 0 6px rgba(27,31,60,.18),inset 0 0 0 3px var(--crema)}
/* Debajo del mapa: las veterinarias (o «Muy pronto») y cómo escribirnos */
.donde{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 48px;align-items:start;margin-top:32px}
.donde__contacto .acciones{margin-top:16px}
.donde__contacto>.acciones:first-child{margin-top:0}
.sin-locales{display:flex;align-items:flex-start;gap:16px;padding:20px 24px;border-radius:24px;background:var(--crema)}
.sin-locales__chapa{flex:none;font:700 12px/16px "Satoshi";letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:var(--mora);color:var(--crema)}
.sin-locales p{font-size:16px;line-height:24px}
.vet-cta{margin-top:16px;font-size:14px;line-height:20px}
.vet-cta a{font-weight:700;color:var(--naranja-solido)}
.locales{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:16px}
.local{position:relative;border-radius:24px;padding:20px;background:var(--crema);display:flex;flex-direction:column;gap:8px;cursor:pointer;
  transition:box-shadow .3s var(--curva)}
.local.activo{box-shadow:inset 0 0 0 2px var(--naranja-solido)}
.local__num{position:absolute;right:16px;top:16px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font:400 16px/1 "Gelato Luxe",cursive;background:var(--naranja-solido);color:var(--crema)}
.local h3{font:700 18px/28px "Satoshi";padding-right:36px}
.local p{font-size:14px;line-height:20px;opacity:.8;flex:1}
.local .distancia{font:700 14px/20px "Satoshi";color:var(--naranja-solido)}
.local .boton{align-self:flex-start;min-height:44px;padding:10px 18px;font-size:14px;line-height:20px}
.locales__cab{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.locales__cab h3{font:700 20px/28px "Satoshi"}
@media (max-width:760px){
  .pidela__cab,.donde{grid-template-columns:1fr}
  .mapa{margin-top:24px}
  .mapa__marco{height:auto;aspect-ratio:4/5;min-height:0;border-radius:24px}
  .sin-locales{flex-direction:column;gap:10px;padding:16px 20px}
}

/* ---------- 08 · Dueños ---------- */
#duenos{--color:var(--mora2)}
[data-tono=oscuro] .flechas button{border-color:var(--crema);color:var(--crema)}
[data-tono=oscuro] .flechas button:hover{background:var(--crema);color:var(--mora)}
.pista{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 2px 24px;scrollbar-width:none;margin-top:40px}
.pista::-webkit-scrollbar{display:none}
.op{color:var(--mora);flex:0 0 min(360px,82vw);scroll-snap-align:start;border-radius:24px;padding:24px;background:var(--durazno);display:flex;flex-direction:column;gap:16px}
.op p{font-size:16px;line-height:24px;flex:1}
.op .quien{display:flex;align-items:center;gap:12px;border-top:1px solid rgba(27,31,60,.14);padding-top:16px}
.op .av{width:40px;height:40px;border-radius:50%;background:var(--mora);color:var(--crema);display:grid;place-items:center;font:700 16px/1 "Satoshi";flex:0 0 40px;overflow:hidden}
.op .av img{width:100%;height:100%;object-fit:cover}
.op b{display:block;font:700 14px/20px "Satoshi"}
.op .quien span{font-size:12px;line-height:16px;opacity:.72}
.flechas{display:flex;gap:12px}
.flechas button{width:48px;height:48px;border-radius:50%;border:2px solid var(--mora);background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--mora);transition:background-color .3s,color .3s}
.flechas button:hover{background:var(--mora);color:var(--crema)}
.flechas svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 09 · Preguntas ---------- */
#preguntas{--color:var(--crema)}
#preguntas .faq details{background:var(--durazno)}
.preguntas__rejilla{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:start}
.faq{display:grid;gap:8px}
/* «Cómo servirla»: se abre aquí mismo, bajo el botón, con sus controles */
.servir__boton{margin-top:24px}
.servir{margin:16px 0 0;border-radius:24px;overflow:hidden;overflow:clip;background:var(--mora);box-shadow:0 18px 36px rgba(27,31,60,.18)}
.servir__video{display:block;width:100%;height:auto;aspect-ratio:var(--servir-ar,9 / 16)}
.faq details{border-radius:24px;background:var(--crema);transition:box-shadow .3s}
.faq details[open]{box-shadow:inset 0 0 0 2px var(--mora)}
.faq summary{list-style:none;cursor:pointer;padding:16px 20px;display:flex;align-items:center;gap:16px;font:700 16px/24px "Satoshi";min-height:56px}
.faq summary::-webkit-details-marker{display:none}
/* La gota hace de «+» */
.faq__gota{width:22px;height:26px;flex:0 0 22px;border-radius:50% 50% 50% 50%/58% 58% 42% 42%;position:relative;
  background:radial-gradient(circle at 36% 30%,#FFE6C6 0,var(--albaricoque) 34%,var(--ambar) 62%,var(--naranja) 100%)}
.faq__gota::before,.faq__gota::after{content:"";position:absolute;left:50%;top:55%;width:10px;height:2px;margin:-1px 0 0 -5px;background:var(--crema);border-radius:2px;transition:transform .3s var(--curva)}
.faq__gota::after{transform:rotate(90deg)}
.faq details[open] .faq__gota::after{transform:rotate(0)}
.faq .cuerpo{padding:0 20px 20px 58px;font-size:16px;line-height:24px;max-width:64ch}
.faq .cuerpo p{opacity:.84}
@media (max-width:760px){.preguntas__rejilla{grid-template-columns:1fr;gap:24px}.faq .cuerpo{padding-left:20px}}

/* ---------- 10 · Cierre ---------- */
#cierre{--color:var(--mora);text-align:center}
#cierre .contenido{padding-top:calc(var(--cabecera) + 32px);padding-bottom:64px;display:flex;flex-direction:column;align-items:center}
/* El logo final del cierre de marca, armado con sus piezas (assets/v2/cierre/; medidas en px
   del video 1920×1080, las de cierre.json). En horizontal, como en el video: «ColaJelly» y el
   lema a la izquierda y la moneda a la derecha. En vertical, la moneda encima.
   --s = px de pantalla por px del video. g = la hoja del giro (640 px, centrada en la moneda). */
.cierre__logo{--s:calc(min(800px, 60vw, (100svh - var(--cabecera) - 330px) * 2.507) / 1429);
  --lw:1429;--lh:570;--mx:860;--my:1;--gx:824;--gy:-35;--ax:1;--ay:116;--lx:41;--ly:373;
  position:relative;flex:none;width:calc(var(--s) * var(--lw));height:calc(var(--s) * var(--lh));pointer-events:none}
@media (max-width:900px),(max-aspect-ratio:4/5){
  .cierre__logo{--s:calc(min(100vw - 40px, 400px, (100svh - var(--cabecera) - 380px) * .849) / 786);
    --lw:786;--lh:926;--mx:109;--my:0;--gx:73;--gy:-36;--ax:0;--ay:604;--lx:40;--ly:861}
}
.cierre__logo>*{position:absolute;display:block;max-width:none}
.cierre__moneda{left:calc(var(--s) * var(--mx));top:calc(var(--s) * var(--my));width:calc(var(--s) * 568);height:auto}
.cierre__marca{left:calc(var(--s) * var(--ax));top:calc(var(--s) * var(--ay));width:calc(var(--s) * 786);height:auto;transform-origin:50% 100%}
.cierre__lema{left:calc(var(--s) * var(--lx));top:calc(var(--s) * var(--ly));width:calc(var(--s) * 706);height:auto;transform-origin:50% 100%}
.cierre__giro{left:calc(var(--s) * var(--gx));top:calc(var(--s) * var(--gy));width:calc(var(--s) * 640);height:calc(var(--s) * 640);
  background-position:var(--gcx,0%) var(--gcy,0%);background-repeat:no-repeat;opacity:0}
/* La gota del hilo (assets/v2/3d/gota.webp, 6 × 4 cuadros) y sus salpicaduras: solo con JavaScript */
.cierre__gota,.cierre__chispa{display:none!important}
.cierre--vivo .cierre__gota,.cierre--vivo .cierre__chispa{display:block!important;left:calc(var(--s) * (var(--gx) + 320));
  background:url("../assets/v2/3d/gota.webp") 40% 33.333%/600% 400% no-repeat}
.cierre--vivo .cierre__gota{top:0;width:calc(var(--s) * 110);height:calc(var(--s) * 165);margin-left:calc(var(--s) * -55);
  background-position:calc(var(--gota-c,2) * 20%) calc(var(--gota-f,1) * 33.333%);
  transform:translate3d(0,var(--gota-y,0px),0) scale(var(--gota-s,0));transform-origin:50% 60%}
.cierre--vivo .cierre__chispa{top:calc(var(--s) * (var(--gy) + 320));width:calc(var(--s) * 38);height:calc(var(--s) * 57);
  margin:calc(var(--s) * -28) 0 0 calc(var(--s) * -19);
  transform:translate3d(var(--cx,0px),var(--cy,0px),0) rotate(var(--cr,0deg)) scale(var(--cs,0));opacity:var(--co,0)}
/* La moneda nace ámbar (es la gota) y se aclara mientras crece y gira */
.cierre--vivo .cierre__giro{opacity:var(--giro-o,0);transform:scale(var(--crece,1));
  filter:sepia(var(--ambar,0)) saturate(calc(1 + var(--ambar,0) * 4)) hue-rotate(calc(var(--ambar,0) * -14deg)) brightness(calc(1 - var(--ambar,0) * .12))}
.cierre--vivo .cierre__moneda{opacity:var(--nitida,0);transform:rotate(var(--vaiven,0deg)) scale(var(--crece-n,1)) scaleX(var(--volteo,1));
  filter:sepia(var(--ambar-n,0)) saturate(calc(1 + var(--ambar-n,0) * 4)) hue-rotate(calc(var(--ambar-n,0) * -14deg)) brightness(var(--brillo-n,1))}
.cierre--vivo .cierre__marca{opacity:var(--marca-o,0);transform:translate3d(0,var(--marca-y,0px),0) scaleY(var(--marca-e,1))}
.cierre--vivo .cierre__lema{opacity:var(--lema-o,0);transform:translate3d(0,var(--lema-y,0px),0) scaleY(var(--lema-e,1))}
/* «Oír cómo se dice»: la voz de Luis del cierre de marca, una vez por toque (sin JavaScript no sale) */
.cierre__oir{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:12px;padding:8px 18px;border:0;border-radius:999px;
  background:transparent;color:var(--albaricoque);font:700 15px/20px "Satoshi";cursor:pointer;transition:background-color .3s var(--curva)}
.cierre__oir[hidden]{display:none}
.cierre__oir:hover{background:rgba(255,254,243,.08)}
.cierre__oir svg{width:22px;height:22px;flex:none;fill:currentColor}
.cierre__oir .onda{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;transition:opacity .3s}
.cierre__oir.sonando{cursor:default;background:rgba(255,254,243,.08)}
.cierre__oir.sonando .onda{opacity:.35}
#cierre .lede{margin:16px auto 0}
#cierre .acciones{justify-content:center}
/* Con JavaScript la hoja se pega y su tramo mueve la gota, la moneda y el logo. El tramo es un
   bloque vacío después del contenido (no un padding: lo pegado no puede entrar en el padding) */
.js-on #cierre::after{content:"";display:block;height:150svh}
.js-on #cierre>.contenido{position:sticky;top:0;min-height:100vh;min-height:100svh;justify-content:center}
@media (max-width:900px),(max-aspect-ratio:4/5){.js-on #cierre::after{height:130svh}}
.pie{background:var(--mora);color:rgba(255,254,243,.72);text-align:center;padding:32px 20px 48px;font-size:14px;line-height:22px;position:relative;z-index:20}
.pie b{color:var(--crema)}
.pie a{color:var(--crema)}
.pie .contacto> :not([hidden])~ :not([hidden])::before{content:"·";display:inline-block;margin:0 .5em;color:rgba(255,254,243,.6)}
.pie nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin-top:12px}
.pie nav a{text-decoration:none;font-weight:700}
@media (max-width:760px){
  .contenido{padding:calc(var(--cabecera) + 40px) var(--margen-der) 72px var(--margen-izq)}
}

/* ---------- Menos movimiento: la página quieta pero completa ----------
   Nada se pega ni se recorta: cada escena enseña su cuadro clave, los relevos
   son fundidos y los meniscos se quedan fijos. Todo el contenido y todos los
   botones siguen ahí. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .js-on .capa--escena{height:auto}
  .js-on .capa--escena>.capa__fijo{position:relative;height:auto;min-height:100svh}
  .js-on .capa--escena>.capa__fijo>.z5{position:relative;min-height:100svh}
  .js-on .capa--relevo,.js-on .capa--sube{margin-top:0}
  .js-on .capa--relevo:not(.fijada)>.capa__fijo{visibility:visible}
  .js-on .capa--hoja>.contenido>*{transform:none;opacity:1}
  .portal,.derrame,.gota-viaje{display:none}
  .fondo{transform:none!important}
  .js-on #cierre::after{display:none}
  .js-on #cierre>.contenido{position:relative;min-height:0}
}

/* Iconos de beneficio en una sola línea: el grosor se fija aquí porque se ven a 30-36 px */
.icono{fill:none;stroke:currentColor;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.perro-linea svg.dibujo{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px),(max-aspect-ratio:4/5){
  .nutre__cab{display:contents}
  #nutre .titulo{order:1}
  .perro-linea{order:2;height:34svh;width:auto;justify-self:center}
  .perro-linea svg.dibujo,.perro-linea img{height:100%;width:auto}
  .beneficios{order:3}
}