/* =========================================================
   Velvet · portada V2 (propuesta de rediseño, COPIA APARTE: portada-v2.html)
   La portada de siempre (index.html + styles.css) no se toca.

   Reglas de esta versión:
   · 3 colores y ya: verde de marca, hueso y amarillo/dorado.
   · 1 sola letra (Bricolage Grotesque): titulares estrechos y gordos, texto normal.
   · Radios: fotos 6px · tarjetas 14px · láminas 28px (sólo arriba) · botones en píldora.
   · Fotos reales rectas, sin pegatinas flotando, sin emojis.
   · ESTRUCTURA: cada apartado es una «lámina» que ocupa UNA pantalla, con el titular arriba a la izquierda
     y el contenido debajo en la misma rejilla de 12 columnas. Al bajar, las láminas se APILAN.
   · MOVIMIENTO: titulares palabra a palabra, fotos que se destapan, textos con rebote, scroll suave.
   ========================================================= */
*{margin:0; padding:0; box-sizing:border-box}
@property --zoom{syntax:'<number>'; inherits:true; initial-value:1.1}
:root{
  --verde:#103029; --verde-2:#17443B; --teal:#2C7C7D; --oro:#C6AA2E; --amarillo:#E7BF49;
  --hueso:#EEF0E6; --hueso-2:#DFE4D4; --blanco:#FBFCF7;
  --r-foto:6px; --r-carta:14px; --r-lamina:28px;
  --lado:clamp(1.2rem,4.2vw,4rem);
  --hueco:clamp(1rem,2vw,2.2rem);
  --ff:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
  --suave:cubic-bezier(.2,.7,.2,1); --rebote:cubic-bezier(.34,1.45,.64,1); --telon:cubic-bezier(.77,0,.18,1);
  --u:1rem;                         /* unidad de tamaño; en pantallas grandes se ajusta al alto de la ventana */
  --nav:62px;
}
body{font-family:var(--ff); font-size:clamp(1rem,1.05vw,1.12rem); line-height:1.5; color:var(--verde); background:var(--verde);
  overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
img{display:block; max-width:100%}
a{color:inherit}
/* Barra de scroll a juego: carril verde (como el menú) y tirador amarillo en píldora (como la barra de avance) */
html::-webkit-scrollbar{width:13px}
html::-webkit-scrollbar-track{background:var(--verde)}
html::-webkit-scrollbar-thumb{background:var(--amarillo); border:3px solid var(--verde); border-radius:100px; min-height:70px}
html::-webkit-scrollbar-thumb:hover{background:#F2D272}
html::-webkit-scrollbar-thumb:active{background:var(--hueso)}
@supports not selector(::-webkit-scrollbar){ html{scrollbar-color:var(--amarillo) var(--verde); scrollbar-width:auto} }
/* El ratón es un grano de café (la punta de arriba a la izquierda es la que señala); dorado sobre lo que se pulsa.
   Sólo con ratón de verdad: en móvil y tableta no cambia nada. */
:root{--raton:auto; --raton-pulsa:pointer}
@media (hover:hover) and (pointer:fine){
  :root{--raton:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cg transform=%22translate%2816.5 16.5%29 rotate%28-45%29%22%3E%3Cellipse rx=%229%22 ry=%2213.4%22 fill=%22%235B3622%22 stroke=%22%23EEF0E6%22 stroke-width=%221.7%22/%3E%3Cpath d=%22M0.6 -12.2 C5.2 -5.5 -5.2 4.5 -0.6 12.2%22 fill=%22none%22 stroke=%22%23EEF0E6%22 stroke-width=%221.9%22 stroke-linecap=%22round%22/%3E%3C/g%3E%3C/svg%3E") 6 6, auto;
    --raton-pulsa:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cg transform=%22translate%2816.5 16.5%29 rotate%28-45%29%22%3E%3Cellipse rx=%229%22 ry=%2213.4%22 fill=%22%23E7BF49%22 stroke=%22%23103029%22 stroke-width=%221.7%22/%3E%3Cpath d=%22M0.6 -12.2 C5.2 -5.5 -5.2 4.5 -0.6 12.2%22 fill=%22none%22 stroke=%22%23103029%22 stroke-width=%221.9%22 stroke-linecap=%22round%22/%3E%3C/g%3E%3C/svg%3E") 6 6, pointer}
}
html{cursor:var(--raton)}
a, button, label, summary, [role="button"]{cursor:var(--raton-pulsa)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
:focus-visible{outline:3px solid var(--oro); outline-offset:3px}

/* ---------- letra ---------- */
.titular{font-weight:800; font-stretch:75%; line-height:.92; letter-spacing:-.025em}
.t-xl{font-size:clamp(2.5rem,9.2vw,9rem)}
.t-l{font-size:clamp(2.3rem,7vw,7rem)}
.grande{font-size:clamp(1.14rem,1.55vw,1.5rem); line-height:1.4; font-weight:500}
.ceja{font-size:.8rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase}
p b{font-weight:700}
/* cada palabra del titular va en su «ventanita» para poder subir desde abajo */
.pal{display:inline-block; overflow:hidden; vertical-align:top; padding:.1em .03em .17em; margin:-.1em -.03em -.17em}
.pal > span{display:inline-block}

/* ---------- botones (un solo estilo, en píldora) ---------- */
.btn{display:inline-flex; align-items:center; gap:.55em; font:700 .98em var(--ff); text-decoration:none; white-space:nowrap; cursor:var(--raton-pulsa);
  padding:.9em 1.55em; border-radius:100px; border:2px solid var(--verde); background:var(--verde); color:var(--hueso);
  transition:transform .35s var(--rebote), background .2s, color .2s}
.btn::after{content:"→"; display:inline-block; transition:transform .35s var(--rebote)}
.btn:hover{transform:translateY(-3px) scale(1.03)}
.btn:hover::after{transform:translateX(5px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn--linea{background:transparent; color:var(--verde)}
.btn--linea:hover{background:var(--verde); color:var(--hueso)}
.btn--amarillo{background:var(--amarillo); border-color:var(--amarillo); color:var(--verde)}

/* ---------- fotos: marco fijo; la foto se mueve un pelín por dentro al subir la lámina (profundidad) ---------- */
figure{overflow:hidden; border-radius:var(--r-foto); background:var(--hueso-2)}
figure img{width:100%; height:100%; object-fit:cover; transform:translateY(calc((1 - var(--entra,1)) * 7%)) scale(var(--zoom,1.1)); will-change:transform}
figure:hover img{--zoom:1.17; transition:--zoom .9s var(--suave)}

/* ============ MOVIMIENTO DE ENTRADA (sólo si el aparato no pide «reducir movimiento») ============ */
@media (prefers-reduced-motion:no-preference){
  /* textos y piezas: suben con un pequeño rebote, uno detrás de otro */
  .js .rv{opacity:0; transform:translateY(46px) scale(.96)}
  .js .rv.in{opacity:1; transform:none; transition:opacity .5s ease, transform .95s var(--rebote); transition-delay:var(--d,0s)}
  /* titulares: palabra a palabra, desde abajo y un poco giradas */
  .js .titular .pal > span{transform:translateY(115%) rotate(7deg); transform-origin:left bottom}
  .js .titular.in .pal > span{transform:none; transition:transform 1s cubic-bezier(.2,.9,.15,1); transition-delay:calc(var(--i,0) * 65ms + var(--d,0s))}
  /* fotos: se destapan como un telón, de abajo arriba, y la foto «aterriza» */
  .js .foto{clip-path:inset(100% 0 0 0 round var(--r-foto))}
  .js .foto.in{clip-path:inset(0 0 0 0 round var(--r-foto)); transition:clip-path 1.15s var(--telon); transition-delay:var(--d,0s)}
  .js .foto img{--zoom:1.4}
  .js .foto.in img{--zoom:1.1; transition:--zoom 1.7s var(--suave); transition-delay:var(--d,0s)}
  .js .foto.in:hover img{--zoom:1.17; transition:--zoom .9s var(--suave)}
  /* rayas que se dibujan de izquierda a derecha */
  .js .raya::before{transform:scaleX(0)}
  .js .raya.in::before{transform:none; transition:transform 1s var(--telon); transition-delay:var(--d,0s)}
}
.raya{position:relative}
.raya::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:currentColor; transform-origin:left}

/* ============ BARRA DE AVANCE (arriba del todo) ============ */
.avance{position:fixed; inset:0 0 auto 0; height:4px; z-index:120; background:var(--amarillo); transform:scaleX(0); transform-origin:left; pointer-events:none}

/* ============ NAV ============ */
.nav{position:fixed; inset:0 0 auto 0; z-index:100; height:72px; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:0 var(--lado); transition:background .35s ease, height .35s var(--suave)}
.nav--fondo{background:var(--verde); height:var(--nav)}
.nav__logo img{height:44px; width:auto; transition:height .35s var(--suave), transform .35s var(--rebote)}
.nav__logo:hover img{transform:rotate(-4deg) scale(1.06)}
.nav--fondo .nav__logo img{height:38px}
.nav__links{display:flex; align-items:center; gap:clamp(1.2rem,2.6vw,2.6rem)}
.nav__links a{font-weight:500; font-size:1rem; color:var(--hueso); text-decoration:none; position:relative; padding:.3em 0}
.nav__links a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--amarillo); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--suave)}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__cta{font-weight:700; font-size:.95rem; text-decoration:none; color:var(--verde); background:var(--amarillo); padding:.62em 1.4em; border-radius:100px; transition:transform .35s var(--rebote)}
.nav__cta:hover{transform:translateY(-2px) scale(1.05)}
.nav__menu{display:none; width:46px; height:46px; border:0; background:transparent; cursor:var(--raton-pulsa); flex-direction:column; justify-content:center; align-items:center; gap:6px}
.nav__menu span{display:block; width:26px; height:2.5px; border-radius:2px; background:var(--amarillo)}
@media(max-width:760px){ .nav__links,.nav__cta{display:none} .nav__menu{display:flex} }
@media (prefers-reduced-motion:no-preference){ .js .nav{animation:navEntra 1s .2s both var(--suave)} @keyframes navEntra{from{opacity:0; transform:translateY(-18px)}} }
/* menú de móvil */
.menu{position:fixed; inset:0; z-index:200; background:var(--verde); color:var(--hueso); display:flex; flex-direction:column; justify-content:center; padding:5rem var(--lado) 2.4rem;
  clip-path:circle(0% at calc(100% - 44px) 36px); visibility:hidden; transition:clip-path .65s var(--telon), visibility .65s}
.menu.abierto{clip-path:circle(150% at calc(100% - 44px) 36px); visibility:visible}
.menu a{font-weight:800; font-stretch:75%; font-size:clamp(2.6rem,13vw,4.4rem); line-height:1.08; letter-spacing:-.02em; text-decoration:none; color:var(--hueso);
  opacity:0; transform:translateY(26px); transition:opacity .4s ease, transform .6s var(--rebote)}
.menu.abierto a{opacity:1; transform:none; transition-delay:calc(.18s + var(--i,0) * .06s)}
.menu a.menu__carta{color:var(--amarillo)}
.menu a.menu__ig{margin-top:2rem; font:500 1rem var(--ff); letter-spacing:0; color:var(--hueso-2)}
.menu__cerrar{position:absolute; top:13px; right:var(--lado); width:46px; height:46px; border:0; background:transparent; color:var(--amarillo); font-size:1.7rem; cursor:var(--raton-pulsa)}

/* ============ HERO (el mismo: logo 3D dorado + trigal 3D) ============ */
.hero{position:sticky; top:0; z-index:1; width:100%; height:100svh; overflow:hidden;
  background:radial-gradient(circle at 50% 44%, #46A997 0%, #2C7C7D 34%, #1C5A56 66%, #123A38 100%)}
.hero__canvas{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:3; cursor:grab; touch-action:none}
.hero__canvas:active{cursor:grabbing}
.trigo3d{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; pointer-events:none}
.field{position:absolute; z-index:1; inset:0; pointer-events:none}
.wstem{position:absolute; bottom:0; transform-origin:bottom center; will-change:transform}
.wheat{width:100%; height:100%; background:linear-gradient(150deg,#8F6620 0%,#C9922F 35%,#E7B84E 60%,#F7DC8C 100%);
  -webkit-mask:url(trigo-real.svg) center bottom/contain no-repeat; mask:url(trigo-real.svg) center bottom/contain no-repeat;
  transform-origin:bottom center; animation:sway 6s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(var(--r,0deg)) scaleX(var(--sx,1))} 50%{transform:rotate(calc(var(--r,0deg) + var(--s,2deg))) scaleX(var(--sx,1))}}
.land{position:absolute; z-index:2; left:0; right:0; bottom:0; width:100%; height:clamp(85px,15vh,180px); pointer-events:none}
.land svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.hero__loader{position:absolute; inset:0; display:grid; place-items:center; transition:opacity .6s ease; z-index:5}
.hero__loader.hide{opacity:0; pointer-events:none}
.hero__loader span{width:36px; height:36px; border-radius:50%; border:3px solid rgba(255,255,255,.22); border-top-color:var(--oro); animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.semillas{position:fixed; inset:0; width:100%; height:100%; display:block; z-index:40; pointer-events:none}
@media(max-width:640px){ .hero__canvas{touch-action:pan-y} }
@media(prefers-reduced-motion:reduce){ .hero__loader span,.wheat{animation:none} }

/* ============ LÁMINAS: la estructura común de todos los apartados ============ */
.pagina{position:relative; z-index:2; background:var(--verde)}
.caja{max-width:1560px; margin:0 auto; padding-inline:var(--lado); width:100%}
.lamina{position:relative; background:var(--hueso); border-radius:var(--r-lamina) var(--r-lamina) 0 0; scroll-margin-top:0}
.lamina--2{background:var(--hueso-2)}
.lamina__in{display:flex; flex-direction:column; padding-top:clamp(3rem,7vw,6rem); padding-bottom:clamp(3rem,7vw,6rem)}
.cuerpo{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--hueco); margin-top:clamp(1.6rem,3.4vw,3rem)}
/* sombra que cae sobre la lámina cuando la siguiente la va tapando */
.lamina::after{content:""; position:absolute; inset:0; border-radius:inherit; background:var(--verde); opacity:calc(var(--cubre,0) * .45); pointer-events:none; z-index:5}

/* ---- PANTALLA GRANDE: cada lámina mide UNA pantalla, se queda pegada arriba y la siguiente sube por encima ---- */
@media (min-width:900px) and (min-height:600px){
  :root{ --u:min(1vw,1.86vh) }
  body{font-size:clamp(15px, calc(var(--u) * 1.13), 20px)}
  .t-xl{font-size:calc(var(--u) * 7)}
  .t-l{font-size:calc(var(--u) * 5.9)}
  .grande{font-size:clamp(16px, calc(var(--u) * 1.36), 25px)}
  .lamina{position:sticky; top:0; height:100svh; overflow:clip;
    transform:scale(calc(1 - var(--cubre,0) * .07)); transform-origin:50% 35%; will-change:transform}
  .lamina__in{height:100%; padding-top:calc(var(--nav) + 3.4vh); padding-bottom:4.6vh}
  .cuerpo{flex:1; min-height:0; margin-top:3.6vh; grid-template-rows:minmax(0,1fr)}
  .cuerpo > *{min-height:0}
  .cuerpo > figure{height:100%}
}

/* ============ 1 · QUÉ ES VELVET (lámina amarilla: sigue la loma del hero) ============ */
.mani{background:var(--amarillo); border-radius:0}
.mani__foto{grid-column:1 / span 4}
.mani__txt{grid-column:6 / span 7; display:flex; flex-direction:column}
.mani__txt p + p{margin-top:1.1em; max-width:36em}
.mani__txt .grande{max-width:27em}
.mani__cierre{font-weight:800; font-stretch:75%; font-size:calc(var(--u) * 2.25); line-height:1.02; letter-spacing:-.015em; max-width:16em !important; margin-top:auto !important; padding-top:1.1em}

/* ============ 2 · MATCHA (texto · foto · las 6 versiones) ============ */
.matcha__txt{grid-column:1 / span 4; display:flex; flex-direction:column; align-items:flex-start}
.matcha__txt p + p{margin-top:1.1em}
.matcha__txt .btn{margin-top:auto}
.matcha__foto{grid-column:5 / span 4}
.versiones{grid-column:9 / span 4; list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:calc(var(--hueco) * .7) calc(var(--hueco) * .55); align-content:space-between}
.versiones figure{aspect-ratio:1}
.versiones li{transition:transform .45s var(--rebote)}
.versiones li:hover{transform:translateY(-6px) rotate(-1.5deg)}
.versiones__n{display:block; font-weight:800; font-stretch:75%; font-size:calc(var(--u) * 1.16); line-height:1; letter-spacing:-.01em; margin-top:.6em}
.versiones__d{display:block; font-size:.78em; line-height:1.3; margin-top:.3em; color:#3c5a52}

/* ============ 3 · EL SITIO (texto y 4 datos · foto grande a la derecha) ============ */
.sitio__txt{grid-column:1 / span 5; display:flex; flex-direction:column}
.sitio__txt p + p{margin-top:1.1em; max-width:34em}
.hechos{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--hueco) * .9) var(--hueco); margin-top:auto; padding-top:1.6em}
.hechos li{padding-top:.55em; font-weight:800; font-stretch:75%; font-size:calc(var(--u) * 1.9); line-height:1; letter-spacing:-.015em}
.sitio__foto{grid-column:7 / span 6}

/* ============ 4 · VELVET KIDS (lámina verde con la foto «pinchada») ============ */
.kids{background:var(--verde); color:var(--hueso)}
.kids .lamina__in{justify-content:center}
.kids__grid{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--hueco); align-items:center}
.kids__txt{grid-column:1 / span 6}
.kids__txt .ceja{color:var(--amarillo)}
.kids__txt .titular{margin:.25em 0 .32em; color:var(--amarillo)}
.kids__txt p{max-width:33em}
.kids__txt p + p{margin-top:1em}
.kids__txt .btn{margin-top:2em}
.kids__marco{grid-column:8 / span 4; display:flex; justify-content:center}
.kids__foto{aspect-ratio:4/5; height:min(68vh, 34vw); border:10px solid var(--blanco); background:var(--blanco); transform:rotate(3deg); box-shadow:0 34px 50px -26px rgba(2,14,11,.85);
  transition:transform .6s var(--rebote)}
.kids__foto:hover{transform:rotate(-1.5deg) scale(1.03)}
.kids__foto img{transform:scale(var(--zoom,1.06))}
@media (prefers-reduced-motion:no-preference){
  .js .kids__foto.rv{opacity:0; transform:translateY(90px) rotate(-14deg) scale(.86)}
  .js .kids__foto.rv.in{opacity:1; transform:rotate(3deg); transition:opacity .4s ease, transform 1.15s var(--rebote), box-shadow .4s; transition-delay:var(--d,0s)}
  .js .kids__foto.rv.in:hover{transform:rotate(-1.5deg) scale(1.03); transition-delay:0s}
}

/* ============ 5 · RESEÑAS (la baraja) ============ */
.resenas .lamina__in{justify-content:center}
.resenas__caja{display:grid; grid-template-columns:.86fr 1.14fr; gap:clamp(2rem,5vw,6rem); align-items:center}
.nota{display:flex; align-items:center; gap:clamp(.8rem,1.6vw,1.3rem); margin-top:1.6em}
.nota__num{font-weight:800; font-stretch:75%; font-size:calc(var(--u) * 6.4); line-height:.8; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.granos{position:relative; display:inline-block; line-height:0}
.granos svg{display:block; height:calc(var(--u) * 1.9); min-height:24px; width:auto}
.granos__llenos{position:absolute; inset:0; width:94%; overflow:hidden}
@media (prefers-reduced-motion:no-preference){ .js .nota:not(.in) .granos__llenos{width:0} .js .nota.in .granos__llenos{transition:width 1.3s .25s var(--telon)} }
.nota__txt{font-size:.9em; font-weight:600; margin-top:.5em}
.nota__txt a{text-underline-offset:3px}
.resenas__p{margin:1.3em 0 1.5em; max-width:30ch}
.mandos{display:flex; align-items:center; gap:.7rem}
.redondo{width:54px; height:54px; border-radius:50%; border:2px solid var(--verde); background:transparent; color:var(--verde); font-size:1.25rem; cursor:var(--raton-pulsa); display:grid; place-items:center;
  transition:background .2s, color .2s, transform .35s var(--rebote)}
.redondo:hover{background:var(--verde); color:var(--hueso); transform:scale(1.12)}
.redondo:active{transform:scale(.92)}
.cuenta{font-weight:700; font-size:.95rem; min-width:3.6em; text-align:center; font-variant-numeric:tabular-nums}
.mazo{position:relative; height:min(52vh, 31vw); min-height:330px; margin-right:clamp(1.5rem,4vw,3.5rem); touch-action:pan-y}
.carta{position:absolute; inset:0; border-radius:var(--r-carta); padding:clamp(1.6rem,3vw,2.8rem); display:flex; flex-direction:column; cursor:grab; user-select:none;
  box-shadow:0 30px 44px -30px rgba(4,20,16,.7); will-change:transform;
  transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--g,0deg)) scale(var(--e,1)); opacity:var(--o,1);
  transition:transform .6s var(--rebote), opacity .4s ease}
.carta.suelta{transition:none; cursor:grabbing}
/* la primera vez, las tarjetas llegan volando desde la derecha, una a una */
@media (prefers-reduced-motion:no-preference){
  .js .mazo:not(.in) .carta{transform:translate(70%,24%) rotate(24deg) scale(.8); opacity:0}
  .js .mazo.in:not(.listo) .carta{transition:transform 1.05s var(--rebote), opacity .45s ease; transition-delay:calc((2 - min(var(--p,0), 2)) * 130ms)}
}
.carta--verde{background:var(--verde); color:var(--hueso)} .carta--amarillo{background:var(--amarillo); color:var(--verde)}
.carta--teal{background:var(--teal); color:var(--blanco)} .carta--blanco{background:var(--blanco); color:var(--verde); box-shadow:0 30px 44px -30px rgba(4,20,16,.7), inset 0 0 0 2px var(--verde)}
.carta__q{font-weight:700; font-stretch:82%; font-size:clamp(1.2rem, calc(var(--u) * 1.95), 2.1rem); line-height:1.16; letter-spacing:-.012em; max-width:19em; text-wrap:pretty}
.carta__pie{margin-top:auto; padding-right:clamp(96px,12vw,160px)}
.carta__nom{font-weight:800; font-size:1.05em} .carta__sub{font-size:.82em; opacity:.82; margin-top:.1rem}
.carta__dibujo{position:absolute; right:clamp(-56px,-3.4vw,-26px); bottom:clamp(-34px,-2vw,-16px); width:clamp(120px,15vw,200px); height:auto; pointer-events:none;
  filter:drop-shadow(0 16px 16px rgba(4,20,16,.3)); transform:rotate(8deg) scale(.6); opacity:0; transition:opacity .35s ease, transform .6s var(--rebote)}
.carta[data-p="0"] .carta__dibujo{opacity:1; transform:rotate(8deg)}

/* ============ 6 · VISÍTANOS (datos a la izquierda · mapa grande a la derecha) ============ */
.visita__datos{grid-column:1 / span 4; display:flex; flex-direction:column; justify-content:space-between; gap:.9em}
.visita__datos h3{font-size:.78rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; padding-top:.8em; margin-bottom:.55em}
.horario{display:grid; grid-template-columns:1fr auto; gap:.4em 1.5rem; font-size:1.15em; font-weight:500}
.horario dd{font-weight:800; font-variant-numeric:tabular-nums; text-align:right}
.visita__datos p{font-size:1.15em; font-weight:500; line-height:1.35}
.visita__datos .btn{margin-top:.75em; padding-block:.75em}
.todo{font-style:normal; font-size:.7em; font-weight:600; opacity:.6}
.visita__mapa{grid-column:6 / span 7; position:relative; min-height:340px; border-radius:var(--r-foto); overflow:hidden; background:#e2e0d2}
.visit__leaflet{position:absolute; inset:0; width:100%; height:100%; z-index:1}
.visit__leaflet .leaflet-tile-pane{filter:saturate(.75) contrast(1.04) brightness(1.02)}
.visit__leaflet .leaflet-control-attribution{font-size:9px; background:rgba(238,240,230,.8); color:#4a4a42}
.visit__leaflet .leaflet-bar a{color:var(--verde); font-weight:700}
.visit__leaflet .leaflet-div-icon{background:transparent; border:0}
.visit__leaflet .leaflet-tooltip{font-family:var(--ff); font-weight:700; border:0; color:var(--verde); border-radius:100px; padding:.35em .9em; box-shadow:0 8px 18px -10px rgba(0,0,0,.5)}
.vpin{position:relative; width:78px; height:92px}
.vpin__pulse{position:absolute; left:39px; top:38px; width:76px; height:76px; margin:-38px 0 0 -38px; border-radius:50%; border:3px solid var(--verde); animation:late 2.2s ease-out infinite}
@keyframes late{from{transform:scale(.7); opacity:.8} to{transform:scale(1.9); opacity:0}}
.vpin__badge{position:absolute; left:1px; top:0; width:76px; height:76px; border-radius:50%; background:var(--verde); border:3px solid var(--amarillo); display:grid; place-items:center; box-shadow:0 12px 20px -10px rgba(0,0,0,.6)}
.vpin__badge::after{content:""; position:absolute; bottom:-10px; left:50%; width:16px; height:16px; margin-left:-8px; background:var(--verde); border-right:3px solid var(--amarillo); border-bottom:3px solid var(--amarillo); transform:rotate(45deg)}
.vpin__logo{position:relative; z-index:2; font:800 .95rem var(--ff); font-stretch:75%; color:var(--amarillo)}
.route-anim{stroke-dasharray:2 14; animation:ruta 1.6s linear infinite}
@keyframes ruta{to{stroke-dashoffset:-16}}
@media(prefers-reduced-motion:reduce){ .route-anim,.vpin__pulse{animation:none} .vpin__pulse{display:none} }

/* ============ 7 · INSTAGRAM (los reels) ============ */
.reels .lamina__in{padding-inline:0; max-width:none}
.reels__cab{display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem 3rem; flex-wrap:wrap}
.reels__cab p{max-width:30em; margin-top:.9em}
.reels__marquee{width:100%; overflow:hidden; margin-top:clamp(1.6rem,3.6vh,3rem); flex:1; min-height:0; display:flex}
.reels__track{display:flex; width:max-content; height:100%; will-change:transform; animation:reelScroll 70s linear infinite}
@keyframes reelScroll{to{transform:translateX(-50%)}}
.reels__marquee:hover .reels__track{animation-play-state:paused}
.reel{position:relative; flex:none; height:100%; width:auto; aspect-ratio:9/16; margin-right:clamp(12px,1.4vw,20px); border-radius:var(--r-foto); overflow:hidden; display:block; background:var(--verde);
  transition:transform .5s var(--rebote)}
.reel:nth-child(even){transform:translateY(3%)}
.reel:hover{transform:translateY(-3%) rotate(-1.5deg) scale(1.03); z-index:2}
.reel__vid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:var(--verde)}
.reel__ring,.reel__ig{display:none}
.reel__ov{position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; padding:1.6rem .8rem .7rem; font-weight:700; font-size:.86rem; color:var(--blanco);
  background:linear-gradient(transparent, rgba(8,18,15,.85)); opacity:0; transition:opacity .35s ease}
.reel:hover .reel__ov{opacity:1}
.reel__arrow{color:var(--amarillo)}
.reels--still .reels__track{animation:none}
.reels--still .reels__marquee{overflow-x:auto; -webkit-overflow-scrolling:touch}
@media(prefers-reduced-motion:reduce){ .reels__track{animation:none} .reels__marquee{overflow-x:auto} }

/* ============ PIE ============ */
.pie{position:relative; z-index:2; background:var(--verde); color:var(--hueso); padding:clamp(4rem,8vw,7rem) 0 1.6rem}
.pie .t-xl{color:var(--amarillo); font-size:clamp(2.5rem,9.2vw,9.6rem)}
.pie__nota{margin-top:1.3rem; max-width:28em}
.pie__cols{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(1.6rem,4vw,4rem); margin-top:clamp(3rem,6vw,5rem); padding-top:clamp(1.6rem,3vw,2.6rem); border-top:2px solid rgba(238,240,230,.22)}
.pie__logo img{height:66px; width:auto; transition:transform .45s var(--rebote)}
.pie__logo:hover img{transform:rotate(-4deg) scale(1.06)}
.pie__cols p{font-size:.95rem; margin-top:.9rem; max-width:24em; color:var(--hueso-2)}
.pie__cols h4{font-size:.78rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--amarillo); margin-bottom:.9rem}
.pie__cols nav a{display:block; text-decoration:none; font-weight:500; padding:.22em 0; width:max-content; border-bottom:2px solid transparent; transition:border-color .2s, transform .35s var(--rebote)}
.pie__cols nav a:hover{border-color:var(--amarillo); transform:translateX(6px)}
.pie__barra{display:flex; justify-content:space-between; gap:1rem 2rem; flex-wrap:wrap; margin-top:clamp(2.4rem,5vw,4.4rem); font-size:.84rem; color:var(--hueso-2)}
.pie__barra nav{display:flex; gap:1.4rem; flex-wrap:wrap}
.pie__barra a{text-decoration:none}
.pie__barra a:hover{text-decoration:underline}

/* ============ TABLET Y MÓVIL (o ventana muy baja): versión MINIMALISTA ============
   Aquí menos es más: un solo fondo claro (salvo el amarillo de entrada y la franja verde de Kids), mucho aire,
   un párrafo por apartado, fotos a todo el ancho sin marco, rayas finas y nada de tarjetas apiladas.
   Orden fijo en todos: titular → texto → foto → lo demás. */
@media (max-width:899px), (max-height:599px){
  :root{ --lado:1.4rem; --r-foto:0px }
  body{font-size:1rem; line-height:1.6}
  .avance{display:none}
  /* láminas planas, una detrás de otra */
  .lamina{position:relative; top:auto; transform:none; border-radius:0; background:var(--hueso); scroll-margin-top:0}
  .lamina::after{display:none}
  .mani{background:var(--amarillo)} .kids{background:var(--verde)}
  .lamina__in{padding-top:calc(var(--nav) + 1.6rem); padding-bottom:3.4rem}
  /* letra más contenida y tranquila */
  .t-xl,.t-l{font-size:clamp(2.05rem,9.4vw,3.3rem); line-height:.96; letter-spacing:-.02em}
  .grande{font-size:1.06rem; line-height:1.6; font-weight:400}
  p b{font-weight:inherit}                                   /* sin negritas sueltas por el texto */
  .ceja{font-size:.72rem}
  .raya::before{height:1px}
  .btn{font-size:.95rem; padding:.82em 1.35em}
  /* entradas suaves, sin rebote */
  .js .rv{transform:translateY(20px)}
  .js .rv.in{transition:opacity .7s ease, transform .8s var(--suave); transition-delay:var(--d,0s)}

  .cuerpo, .kids__grid{display:flex; flex-direction:column; align-items:stretch; gap:1.5rem; margin-top:1.1rem}
  /* fotos: a sangre, de borde a borde */
  .cuerpo > figure, .kids__marco{margin-inline:calc(var(--lado) * -1); width:auto; border-radius:0}
  .cuerpo > figure{aspect-ratio:5/4}
  /* un solo párrafo por apartado (lo demás se guarda para pantallas grandes) */
  .mani__txt p:not(.grande), .matcha__txt p:not(.grande), .sitio__txt > p:not(.grande), .resenas__p, .reels__cab p{display:none}

  /* 1 · qué es Velvet */
  .mani__txt{order:1} .mani__foto{order:2; aspect-ratio:1/1 !important}
  /* 2 · matcha */
  .matcha__txt{align-items:flex-start}
  .matcha__txt .btn{margin-top:1.3rem}
  .versiones{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--lado); margin-inline:calc(var(--lado) * -1); padding-inline:var(--lado);
    scrollbar-width:none; -webkit-overflow-scrolling:touch; gap:.7rem}
  .versiones::-webkit-scrollbar{display:none}
  .versiones li{flex:0 0 36vw; max-width:170px; scroll-snap-align:start}
  .versiones figure{border-radius:4px}
  .versiones__n{font-size:.92rem; font-weight:600; font-stretch:100%; letter-spacing:0; margin-top:.55em}
  .versiones__d{display:none}
  /* 3 · el sitio */
  .hechos{order:3; grid-template-columns:1fr 1fr; gap:0 1.4rem; margin-top:0; padding-top:0}
  .hechos li{font-size:.95rem; font-weight:500; font-stretch:100%; letter-spacing:0; line-height:1.3; padding:.8em 0}
  .sitio__txt{display:contents}
  .sitio__txt .grande{order:1} .sitio__foto{order:2}
  /* 4 · Velvet Kids */
  .kids__txt .titular{margin:.25em 0 .45em}
  .kids__txt p + p{margin-top:.8em; opacity:.8}
  .kids__txt .btn{margin-top:1.4rem}
  .kids__marco{display:block; margin-top:.4rem}
  .kids__foto{height:auto; width:100%; aspect-ratio:5/4; border:0; border-radius:0; transform:none; box-shadow:none}
  .kids__foto:hover{transform:none}
  .js .kids__foto.rv{opacity:0; transform:translateY(20px)}
  .js .kids__foto.rv.in{opacity:1; transform:none; transition:opacity .7s ease, transform .8s var(--suave)}
  .kids .lamina__in, .mani .lamina__in{padding-bottom:0}          /* (la foto cierra el apartado) */
  /* 5 · reseñas: titular, nota, baraja y debajo las flechas */
  .resenas__caja{display:flex; flex-direction:column; align-items:stretch; gap:0}
  .resenas__caja > div:first-child{display:contents}
  .nota{order:1; margin-top:1rem; gap:.9rem} .nota__num{font-size:3.3rem}
  .granos svg{height:22px; min-height:0}
  .nota__txt{font-size:.86rem; font-weight:500; margin-top:.4em}
  .mazo{order:2; height:clamp(270px,74vw,330px); min-height:0; margin:1.8rem 1.3rem 0 0}
  .mandos{order:3; justify-content:center; margin-top:2.4rem}
  .redondo{width:46px; height:46px; border-width:1px; font-size:1.05rem}
  .carta{padding:1.35rem; box-shadow:0 22px 34px -26px rgba(4,20,16,.6)}
  .carta--blanco{box-shadow:0 22px 34px -26px rgba(4,20,16,.6), inset 0 0 0 1px var(--verde)}
  .carta__q{font-size:clamp(1.05rem,4.6vw,1.22rem); font-weight:600; font-stretch:90%; line-height:1.24}
  .carta__dibujo{width:104px; right:-22px; bottom:-14px}
  .carta__pie{padding-right:84px}
  /* 6 · visítanos */
  .visita__datos{gap:1.5rem}
  .visita__datos h3{font-size:.7rem; padding-top:1em; margin-bottom:.7em}
  .horario, .visita__datos p{font-size:1rem}
  .horario dd{font-weight:600}
  .visita__datos .btn{margin-top:1rem}
  .visita__mapa{margin-inline:calc(var(--lado) * -1); border-radius:0; height:clamp(240px,64vw,320px); min-height:0}
  /* 7 · instagram */
  .reels__cab{flex-direction:column; align-items:flex-start; gap:1.2rem}
  .reels__marquee{height:clamp(280px,88vw,360px); flex:none; margin-top:1.6rem}
  .reel{border-radius:4px}
  .reel:nth-child(even){transform:none}
  .reels .lamina__in{padding-bottom:3.4rem}
  /* pie */
  .pie{padding-top:3.6rem}
  .pie .t-xl{font-size:clamp(2.05rem,9.4vw,3.3rem)}
  .pie__nota{font-size:1.02rem; font-weight:400; margin-top:1rem}
  .pie__cols{grid-template-columns:1fr 1fr; margin-top:2.4rem; border-top-width:1px}
  .pie__marca{grid-column:1 / -1}
  .pie__logo img{height:54px}
}

/* ============ TELÓN DE ENTRADA (amarillo con el logo; sube cuando el hero 3D está listo) ============ */
.telon{position:fixed; inset:0; z-index:500; background:var(--amarillo); display:grid; place-items:center; pointer-events:none;
  clip-path:inset(0 0 0 0); transition:clip-path 1s var(--telon)}
.telon__in{display:flex; flex-direction:column; align-items:center; gap:1.6rem; transition:transform 1s var(--telon), opacity .5s ease}
.telon img{width:clamp(170px,22vw,300px); height:auto; filter:drop-shadow(0 10px 18px rgba(16,48,41,.18)); animation:telonLogo 1.1s var(--rebote) both}
.telon__barra{width:clamp(140px,16vw,220px); height:3px; border-radius:3px; background:rgba(16,48,41,.18); overflow:hidden}
.telon__barra i{display:block; height:100%; width:100%; background:var(--verde); transform-origin:left; transform:scaleX(var(--carga,0)); transition:transform .4s var(--suave)}
.telon__frase{font-weight:700; font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:var(--verde)}
.telon.fuera{clip-path:inset(0 0 100% 0)}
.telon.fuera .telon__in{transform:translateY(-14vh); opacity:0}
.telon.quitado{display:none}
@keyframes telonLogo{from{opacity:0; transform:translateY(24px) scale(.86) rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){ .telon{display:none} }

/* ============ CINTAS DE PALABRAS (entre Instagram y el pie; aceleran con el scroll) ============ */
.cintas{position:relative; z-index:2; background:var(--verde); overflow:hidden; padding-bottom:.6rem}
.cinta{position:relative; background:var(--amarillo); color:var(--verde); overflow:hidden; padding:clamp(.9rem,1.6vw,1.4rem) 0; border-top:2px solid var(--verde); border-bottom:2px solid var(--verde)}
.cinta--2{background:var(--verde); color:var(--amarillo); transform:rotate(-1.2deg) scale(1.03); margin-top:-.4rem; border-color:var(--amarillo)}
.cinta__pista{display:flex; width:max-content; will-change:transform}
.cinta__pista span{display:inline-flex; align-items:center; gap:clamp(1rem,2vw,2rem); padding-right:clamp(1rem,2vw,2rem); font-weight:800; font-stretch:75%;
  font-size:clamp(1.6rem,3.6vw,3.4rem); line-height:1; letter-spacing:-.01em; white-space:nowrap; text-transform:uppercase}
.cinta__pista svg{width:.55em; height:.78em; fill:currentColor; flex:none}
@media (max-width:899px), (max-height:599px){ .cinta__pista span{font-size:1.5rem} }

/* ============ HERO: el titular para Google, discreto sobre la loma amarilla ============ */
.hero__h1{position:absolute; left:0; right:0; bottom:clamp(14px,3.2vh,34px); z-index:4; text-align:center; pointer-events:none;
  font-size:clamp(.72rem,.95vw,.92rem); font-weight:800; letter-spacing:.26em; text-transform:uppercase; color:var(--verde)}
@media (prefers-reduced-motion:no-preference){ .js .hero__h1{animation:navEntra 1s 1.2s both var(--suave)} }

/* ============ PREGUNTAS FRECUENTES (acordeón) ============ */
.faq{background:var(--hueso)}
.faq__intro{grid-column:1 / span 4; align-self:start; max-width:22em}
.faq__lista{grid-column:6 / span 7; display:flex; flex-direction:column; justify-content:center; border-top:3px solid var(--verde); overflow:auto; scrollbar-width:thin}
.faq__item{border-bottom:1px solid rgba(16,48,41,.2)}
.faq__item summary{list-style:none; cursor:var(--raton-pulsa); display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:clamp(.6rem,1.45vh,1rem) 0; font-weight:800; font-stretch:80%; font-size:calc(var(--u) * 1.45); line-height:1.1; letter-spacing:-.01em}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+"; flex:none; width:1.6em; height:1.6em; border-radius:50%; display:grid; place-items:center; font-size:.85em;
  border:2px solid var(--verde); transition:transform .4s var(--rebote), background .2s, color .2s}
.faq__item[open] summary::after{transform:rotate(45deg); background:var(--verde); color:var(--amarillo)}
.faq__item summary:hover::after{background:var(--amarillo)}
.faq__item p{padding:0 3rem 1rem 0; max-width:40em; font-size:.98em}
@media (prefers-reduced-motion:no-preference){ .faq__item[open] p{animation:faqAbre .45s var(--suave)} @keyframes faqAbre{from{opacity:0; transform:translateY(-8px)}} }
@media (max-width:899px), (max-height:599px){
  .hero__h1{font-size:.68rem; letter-spacing:.18em; bottom:12px}
  .faq__lista{border-top-width:1px; overflow:visible}
  .faq__item summary{font-size:1.02rem; font-weight:600; font-stretch:100%; letter-spacing:0; padding:1rem 0}
  .faq__item summary::after{border-width:1px}
  .faq__item p{padding-right:0}
}

/* ============ MÓVIL: nada puede salirse por los lados ============
   Las tarjetas de reseñas esperan fuera de la pantalla antes de entrar; en el móvil eso ensanchaba la página
   (el teléfono se alejaba: logo descentrado y botón de menú fuera de la pantalla). Cada lámina recorta sus lados. */
@media (max-width:899px), (max-height:599px){
  .lamina{overflow-x:clip}
}
html{overflow-x:clip}