/* =========================================================
   Velvet · Cake Shop & Coffee — Cullera
   HERO (verde + logo 3D dorado)  ·  build desde cero
   ========================================================= */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --gold:#C6AA2E;          /* dorado del logo 3D */
  --teal:#2C7C7D;          /* verde/teal de marca */
  --teal-deep:#103029;     /* verde profundo (bordes) */
  --cream:#F6F0E4;         /* crema (texto sobre verde) */
  --amarillo:#F1D46B;      /* onda/montaña (valor del usuario) */
  --wheat:#DDA94B;         /* grano */
  --wheat-2:#C98F35;       /* grano sombra */
  --stem:#B4772E;          /* tallo */
  --awn:#CDA24B;           /* barbas */
}
html{scroll-behavior:smooth}
/* AMARILLO FIJO de fondo (no se mueve): el fondo de la raíz se pinta sobre el viewport */
body{background:var(--amarillo); overflow-x:clip; font-family:system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased}
.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}

/* HERO fijo (sticky): se queda mientras la siguiente sección sube por encima */
.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}

/* REVELADO spotlight: textura de bizcocho que asoma donde está el ratón
   (encima del verde, DETRÁS del trigo y del logo).
   Forma DEFORMADA y BORROSA = unión de varios radiales desplazados + bordes muy suaves. */
.hero__reveal{position:absolute; inset:0; z-index:0; pointer-events:none;
  --mx:-1000px; --my:-1000px;
  background:url(media/cake-texture.jpg) center/cover no-repeat;
  filter:blur(1.5px);                       /* textura ligeramente difuminada */
  -webkit-mask:
    radial-gradient(circle 140px at calc(var(--mx) - 48px) calc(var(--my) - 38px), #000 0, transparent 82%),
    radial-gradient(circle 108px at calc(var(--mx) + 58px) calc(var(--my) - 14px), #000 0, transparent 85%),
    radial-gradient(circle 124px at calc(var(--mx) - 6px)  calc(var(--my) + 56px), #000 0, transparent 82%),
    radial-gradient(circle  92px at calc(var(--mx) + 44px) calc(var(--my) + 46px), #000 0, transparent 88%),
    radial-gradient(circle  80px at calc(var(--mx) - 58px) calc(var(--my) + 20px), #000 0, transparent 90%);
          mask:
    radial-gradient(circle 140px at calc(var(--mx) - 48px) calc(var(--my) - 38px), #000 0, transparent 82%),
    radial-gradient(circle 108px at calc(var(--mx) + 58px) calc(var(--my) - 14px), #000 0, transparent 85%),
    radial-gradient(circle 124px at calc(var(--mx) - 6px)  calc(var(--my) + 56px), #000 0, transparent 82%),
    radial-gradient(circle  92px at calc(var(--mx) + 44px) calc(var(--my) + 46px), #000 0, transparent 88%),
    radial-gradient(circle  80px at calc(var(--mx) - 58px) calc(var(--my) + 20px), #000 0, transparent 90%)}

/* ===== TRIGO del usuario (hero-trigo2.html) · tal cual ===== */
/* CAMPO (detrás de la onda) */
.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; will-change:transform;
  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))}}
@media (prefers-reduced-motion:reduce){ .wheat{animation:none} }

/* ONDA amarilla (delante) · ~20% */
.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}

/* loader mientras carga el modelo 3D */
.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(--gold);
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){ .hero__loader span{animation:none} }

/* ===== NAV (logo arriba-izquierda + enlaces + CTA) ===== */
.nav{position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:clamp(1rem,2.4vw,1.7rem) clamp(1.2rem,4vw,3rem);
  transition:background .3s ease, box-shadow .3s ease, padding .25s ease}
/* al bajar del hero: barra teal translúcida para que se lea sobre secciones claras */
.nav--scrolled{background:rgba(16,48,41,.94); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.6); padding-top:.75rem; padding-bottom:.75rem}
.nav__logo{display:inline-flex; align-items:center; font-family:"Dancing Script",cursive; font-weight:700; color:var(--gold); text-decoration:none;
  font-size:clamp(1.6rem,3vw,2.3rem); line-height:1; text-shadow:0 2px 12px rgba(0,0,0,.3)}
.nav__logo img{height:clamp(44px,7vw,48px); width:auto; display:block; filter:drop-shadow(0 3px 7px rgba(0,0,0,.4)); transition:transform .3s ease}
.nav__logo:hover img{transform:scale(1.04)}
.nav__links{display:flex; gap:clamp(1rem,2.5vw,2.2rem); align-items:center}
.nav__links a{font-family:"Poppins",system-ui,sans-serif; font-weight:500; font-size:.98rem; letter-spacing:.02em;
  color:var(--cream); text-decoration:none; opacity:.92; transition:color .2s, opacity .2s}
.nav__links a:hover{color:var(--gold); opacity:1}
.nav__cta{font-family:"Poppins",sans-serif; font-weight:600; font-size:.95rem; color:var(--teal-deep);
  background:var(--gold); padding:.62em 1.35em; border-radius:100px; text-decoration:none;
  transition:transform .25s, box-shadow .25s}
.nav__cta:hover{transform:translateY(-2px); box-shadow:0 12px 26px -12px rgba(0,0,0,.55)}
@media(max-width:640px){ .nav__links{display:none} }

/* ===== SIGUIENTE SECCIÓN: la ONDA amarilla que sube + historia "Qué es Velvet" ===== */
.intro{position:sticky; top:0; z-index:2; min-height:100vh; background:var(--amarillo);
  display:flex; align-items:center; padding:clamp(4rem,10vw,8rem) clamp(1.2rem,5vw,3rem)}
/* borde superior en onda (mismo amarillo) → lo que asciende es la onda */
.intro__wave{position:absolute; left:0; right:0; top:0; width:100%;
  height:clamp(50px,9vw,110px); transform:translateY(-98%); display:block; pointer-events:none}

/* historia: imagen izquierda + texto derecha (estilo referencia) */
.story{max-width:1180px; width:100%; margin:0 auto; display:grid; grid-template-columns:1fr 1.05fr;
  gap:clamp(2rem,5vw,5rem); align-items:center}
@media(max-width:860px){ .story{grid-template-columns:1fr; gap:2rem} }
.story__media img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:20px;
  box-shadow:0 30px 60px -30px rgba(60,40,0,.5)}
@media(max-width:860px){ .story__media img{aspect-ratio:16/11} }
.story__eyebrow{display:flex; align-items:center; gap:.7em; font-family:"Poppins",sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.28em; font-size:clamp(.72rem,1.4vw,.85rem); color:var(--teal); opacity:.85; margin-bottom:1rem}
.story__eyebrow::before{content:""; width:34px; height:2px; background:currentColor}
.story__title{font-family:"Playfair Display",serif; font-weight:700; color:var(--teal-deep);
  font-size:clamp(2.1rem,4.6vw,3.6rem); line-height:1.06; letter-spacing:-.01em; margin-bottom:1.4rem}
.story__title em{font-style:italic; color:var(--teal)}
.story__p{font-family:"Poppins",sans-serif; color:#2b4a44; font-size:clamp(1rem,1.5vw,1.15rem); line-height:1.7; margin-bottom:1.1rem}
.story__p b{color:var(--teal-deep); font-weight:600}
.story__quote{font-family:"Playfair Display",serif; font-style:italic; color:var(--teal-deep);
  font-size:clamp(1.15rem,1.9vw,1.5rem); line-height:1.5; margin-top:1.8rem; padding-left:1.3rem; border-left:3px solid var(--teal)}
.story__by{display:block; font-family:"Poppins",sans-serif; font-style:normal; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; color:var(--teal); opacity:.85; margin-top:.9rem}

/* ===== Elemento decorativo (imagen real de producto, al lado del título, uno por sección) ===== */
.story__titlewrap{position:relative}
.story__deco{position:absolute; top:clamp(-1.4rem,-.4vw,.4rem); right:clamp(-2.6rem,-2.4vw,-.6rem);
  width:clamp(120px,14vw,210px); height:auto; display:block; z-index:-1; pointer-events:none;
  opacity:0; transition:opacity 1s ease; filter:drop-shadow(0 16px 24px rgba(40,25,10,.32))}
/* el TEXTO siempre por encima del elemento (nada de letras tapadas) */
.story__titlewrap .story__title{position:relative; z-index:1}
.story__text .story__p, .story__text .story__eyebrow, .story__text .kids__btn{position:relative; z-index:1}
.story__title.in + .story__deco{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .story__deco{animation:decoFloat 6.8s ease-in-out infinite}
}
@keyframes decoFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-13px) rotate(-1deg)}}
@media(max-width:860px){ .story__deco{width:clamp(96px,23vw,156px); top:-.8rem; right:-.4rem} }

/* ===== SECCIÓN MATCHA: texto IZQUIERDA + foto DERECHA (como la pág.2, en espejo) ===== */
.matcha-story{position:sticky; top:0; z-index:3; min-height:100vh; background:var(--cream);
  display:flex; align-items:center; padding:clamp(4rem,10vw,8rem) clamp(1.2rem,5vw,3rem)}
/* borde superior en onda (mismo crema) → sube por encima de la sección amarilla */
.matcha-story__wave{position:absolute; left:0; right:0; top:0; width:100%;
  height:clamp(50px,9vw,110px); transform:translateY(-98%); display:block; pointer-events:none}
/* variante espejo: TEXTO a la izquierda, FOTO a la derecha */
.story--right{grid-template-columns:1.05fr 1fr}
@media(max-width:860px){ .story--right{grid-template-columns:1fr} }

/* ===== EL SITIO: ambiente chill / pet friendly (foto izq + texto der, fondo teal) ===== */
.place{position:sticky; top:0; z-index:4; min-height:100vh; background:linear-gradient(180deg,#134239 0%, #0F3129 100%);
  display:flex; align-items:center; padding:clamp(4rem,10vw,8rem) clamp(1.2rem,5vw,3rem)}
.place__wave{position:absolute; left:0; right:0; top:0; width:100%; height:clamp(50px,9vw,110px);
  transform:translateY(-98%); display:block; pointer-events:none}
/* texto claro sobre teal oscuro */
.place .story__eyebrow{color:var(--gold)}
.place .story__title{color:var(--cream)}
.place .story__title em{color:var(--gold)}
.place .story__p{color:#D9E4DF}
.place .story__p b{color:#fff}
/* pills de ambiente */
.place__pills{list-style:none; display:flex; flex-wrap:wrap; gap:.6rem .7rem; margin-top:1.7rem; padding:0}
.place__pills li{font-family:"Poppins",sans-serif; font-weight:500; font-size:clamp(.85rem,1.4vw,.95rem);
  color:var(--cream); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  padding:.55em 1.05em; border-radius:100px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}

/* ===== VELVET KIDS: estilo juguetón (cabecera + foto + tarjetas de colores) ===== */
.kids{position:relative; z-index:5; min-height:100vh; background:var(--cream);
  display:flex; align-items:center; padding:clamp(4rem,10vw,8rem) clamp(1.2rem,5vw,3rem)}
.kids__wave{position:absolute; left:0; right:0; top:0; width:100%; height:clamp(50px,9vw,110px);
  transform:translateY(-98%); display:block; pointer-events:none}
.kids__inner{max-width:1180px; width:100%; margin:0 auto}
.kids__btn{display:inline-flex; align-items:center; gap:.5em; margin-top:1.6rem; font-family:"Poppins",sans-serif; font-weight:600;
  background:var(--gold); color:var(--teal-deep); padding:.8em 1.7em; border-radius:100px; text-decoration:none;
  box-shadow:0 16px 30px -14px rgba(0,0,0,.4); transition:transform .25s ease, box-shadow .25s ease}
.kids__btn:hover{transform:translateY(-3px); box-shadow:0 22px 38px -16px rgba(0,0,0,.5)}
.story__deco--kids{width:clamp(82px,8.5vw,134px)}
/* ajustes finos de posición por sección (solo escritorio) */
@media(min-width:861px){
  .place .story__deco{right:clamp(.2rem,1.6vw,2.2rem)}          /* red velvet un poco a la izquierda */
  .kids .story__deco{top:clamp(-5.2rem,-5.6vw,-4rem); right:calc(100% - 380px)}  /* helado a la derecha de "Kids" */
}
/* red velvet (El Sitio) y matcha: un poco más pequeñas */
.matcha-story .story__deco, .place .story__deco{width:clamp(100px,11.5vw,172px)}
/* helado (Kids): girado a la izquierda (con su flotación) */
@media (prefers-reduced-motion:no-preference){
  .kids .story__deco{animation:decoFloatKids 6.8s ease-in-out infinite}
}
@keyframes decoFloatKids{0%,100%{transform:translateY(0) rotate(-18deg)}50%{transform:translateY(-12px) rotate(-14deg)}}

/* ===== Barra de scroll de marca (fina, teal, redondeada) ===== */
html{scrollbar-width:thin; scrollbar-color:#123A38 transparent}
::-webkit-scrollbar{width:12px; height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#123A38; border:3px solid transparent; background-clip:padding-box; border-radius:100px}
::-webkit-scrollbar-thumb:hover{background:var(--gold); border-width:2px}
::-webkit-scrollbar-corner{background:transparent}

/* ===== Cursor temático: grano por defecto, TAZA al pasar por algo clicable ===== */
/* (el mini-jardín del footer conserva su regadera con su propio cursor:none) */
body{cursor:url('media/bean-cursor.png') 15 15, auto}
a,button,.btn,[role="button"],label,summary,input,textarea,select{cursor:url('media/cup-cursor.png') 16 16, pointer}
.kids__head{text-align:center; margin-bottom:clamp(2rem,5vw,3.2rem)}
.kids__eyebrow{font-family:"Poppins",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.28em;
  font-size:clamp(.72rem,1.4vw,.85rem); color:var(--teal); opacity:.85; margin-bottom:.6rem}
.kids__title{font-family:"Dancing Script",cursive; font-weight:700; color:var(--gold);
  font-size:clamp(2.8rem,6.5vw,4.8rem); line-height:1}
.kids__title span{font-family:"Poppins",sans-serif; font-weight:800; letter-spacing:-.01em; margin-left:.12em;
  background:linear-gradient(90deg,#E48AA9,#6FB0C6); -webkit-background-clip:text; background-clip:text; color:transparent}
.kids__sub{font-family:"Poppins",sans-serif; color:#5a6b60; font-size:clamp(1rem,1.6vw,1.2rem);
  max-width:640px; margin:.8rem auto 0; line-height:1.6}
.kids__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center}
@media(max-width:860px){ .kids__grid{grid-template-columns:1fr} }
.kids__photo{margin:0}
.kids__photo img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:26px;
  box-shadow:0 30px 60px -28px rgba(60,40,0,.45)}
@media(max-width:860px){ .kids__photo img{aspect-ratio:16/12} }
.kids__cards{display:flex; flex-direction:column; gap:1rem}
.kcard{position:relative; background:#fff; border-radius:20px; padding:1.3rem 1.5rem 1.35rem; border-left:6px solid var(--gold);
  box-shadow:0 16px 34px -20px rgba(0,0,0,.3); transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease}
.kcard:hover{transform:translateY(-5px); box-shadow:0 26px 48px -20px rgba(0,0,0,.36)}
.kcard__kicker{display:block; font-family:"Poppins",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.2em; font-size:.68rem; color:var(--gold); margin-bottom:.4rem}
.kcard h3{font-family:"Poppins",sans-serif; font-weight:700; font-size:1.18rem; color:var(--teal-deep); margin:0 0 .35rem; line-height:1.2}
.kcard p{font-family:"Poppins",sans-serif; font-size:.92rem; color:#5a6b60; line-height:1.55; margin:0}
.kcard--pink{border-left-color:#E48AA9} .kcard--pink .kcard__kicker{color:#E48AA9}
.kcard--blue{border-left-color:#6FB0C6} .kcard--blue .kcard__kicker{color:#5f9fb5}
.kcard--gold{border-left-color:var(--gold)} .kcard--gold .kcard__kicker{color:#b89a1e}

/* ===== CARTA: palabras en contorno que se deslizan en X (como la web antigua) ===== */
.carta{position:relative; z-index:6; background:var(--cream); overflow:visible; padding:clamp(3.5rem,9vw,7rem) 0}
/* borde superior ONDULADO (crema) sobre el amarillo */
.carta::before{content:""; position:absolute; left:0; right:0; bottom:100%; height:clamp(48px,8vw,96px);
  background:url(media/onda-cream.svg) bottom/100% 100% no-repeat; pointer-events:none}
.carta .words{display:flex; flex-direction:column; gap:0; overflow:hidden}
.carta .crow{display:flex; gap:clamp(1.5rem,4vw,3.2rem); white-space:nowrap; will-change:transform}
.carta .crow[data-dir="1"]{justify-content:flex-end}
.carta .crow[data-dir="-1"]{justify-content:flex-start}
.carta .word{font-family:"Playfair Display",serif; font-weight:700; font-size:clamp(2.6rem,11vw,8rem);
  line-height:.92; text-transform:lowercase; letter-spacing:-.01em;
  color:transparent; -webkit-text-fill-color:transparent;
  -webkit-text-stroke:2px var(--teal); text-stroke:2px var(--teal)}
.carta .word:nth-child(even){-webkit-text-stroke-color:var(--gold); text-stroke-color:var(--gold)}
@media(max-width:640px){ .carta .word{-webkit-text-stroke-width:1.5px; font-size:clamp(2.2rem,13vw,5rem)} .carta .crow{gap:1.2rem} }

/* ============================================================
   TARJETAS FLOTANTES (estilo referencia MiCha): las secciones 2-5 pasan a ser
   un PANEL redondeado con un MARCO de color alrededor; siguen SUBIENDO (sticky).
   ============================================================ */
/* marco = fondo full-bleed de cada sección + gutter alrededor de la tarjeta */
.intro,.matcha-story,.place,.kids{padding:clamp(1.6rem,4.5vw,3.8rem) clamp(1.1rem,4vw,3rem)}
/* MARCO TRANSPARENTE: el amarillo de fondo (body, fijo) se ve detrás; solo suben las tarjetas */
.intro,.matcha-story,.place,.kids{background:transparent}
/* quitamos las ondas: ya no encajan con el look de tarjetas */
.intro__wave,.matcha-story__wave,.place__wave,.kids__wave{display:none}
/* TARJETA interior redondeada con sombra (de OTRO color, no amarillo) */
.intro .story,.matcha-story .story,.place .story,.kids .story{
  width:100%; border-radius:clamp(28px,3.4vw,52px);
  padding:clamp(1.8rem,4.5vw,4rem);
  box-shadow:0 45px 90px -45px rgba(0,0,0,.5)}
/* cada cuadro un color distinto (temático + legible) */
.intro .story{background:var(--cream)}                                   /* café → crema */
.matcha-story .story{background:#CFE5DA}                                 /* matcha → verde sage */
.place .story{background:linear-gradient(160deg,#2C7C7D 0%, #123A38 100%)} /* el sitio → teal oscuro */
.kids .story{background:#F7DCE4}                                         /* kids → rosa suave */

/* ============================================================
   ANIMACIONES: reveals al scroll, titulares por palabras, micro-interacciones
   (lo grande va dentro de no-preference -> respeta prefers-reduced-motion)
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  /* estado OCULTO sin transición (así al marcar por JS NO hay flash de ocultado) */
  .reveal{opacity:0; transform:translateY(26px)}
  .reveal.reveal--img{transform:translateY(30px) scale(.955)}
  /* estado REVELADO: la transición vive aquí -> anima la ENTRADA (fade + subida) */
  .reveal.in{opacity:1; transform:none;
    transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
    transition-delay:var(--d,0s)}

  /* titulares revelados palabra a palabra (máscara + subida escalonada) */
  .reveal-words .word{display:inline-block; overflow:hidden; padding:.14em .03em; margin:-.14em -.03em; vertical-align:top}
  .reveal-words .word > span{display:inline-block; transform:translateY(115%)}
  .reveal-words.in .word > span{transform:none;
    transition:transform .8s cubic-bezier(.2,.8,.15,1); transition-delay:var(--wd,0s); will-change:transform}

  /* el nav entra al cargar */
  .nav{animation:navIn 1s .15s both cubic-bezier(.2,.7,.2,1)}
  @keyframes navIn{from{opacity:0; transform:translateY(-16px)} to{opacity:1; transform:none}}
}

/* subrayado animado en los enlaces del nav */
.nav__links a{position:relative}
.nav__links a::after{content:""; position:absolute; left:0; right:0; bottom:-5px; height:2px;
  background:var(--gold); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .3s ease}
.nav__links a:hover::after{transform:scaleX(1)}

/* zoom suave de las fotos al hover (sin recortar la sombra) */
.story__media,.kids__photo{overflow:hidden; border-radius:20px; box-shadow:0 30px 60px -30px rgba(60,40,0,.5)}
.kids__photo{border-radius:26px}
.story__media img,.kids__photo img{box-shadow:none; transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.story__media:hover img,.kids__photo:hover img{transform:scale(1.05)}

/* barra de progreso de scroll (dorada) */
.scroll-progress{position:fixed; top:0; left:0; right:0; height:3px; z-index:50;
  background:linear-gradient(90deg,var(--gold),#E7C765); transform:scaleX(0); transform-origin:left; will-change:transform}

/* ============================================================
   EFECTO TARJETAS APILADAS (adaptación MiCha): forma ondulada (máscara SVG),
   fotos en FLOR, decoraciones que giran, burbujas. + pop-in/shrink via GSAP.
   ============================================================ */
/* forma ondulada de la tarjeta (la da la máscara) + sombra que sigue la forma */
.intro .story,.matcha-story .story,.place .story,.kids .story{
  border-radius:0; box-shadow:none; overflow:hidden; position:relative;
  -webkit-mask:url(media/card-mask.svg) center/100% 100% no-repeat;
          mask:url(media/card-mask.svg) center/100% 100% no-repeat;
  filter:drop-shadow(0 34px 52px rgba(0,0,0,.42))}
/* contenido por encima de las burbujas */
.story__media,.story__text,.kids__head,.kids__grid{position:relative; z-index:1}
/* fotos recortadas en FLOR */
.story__media,.kids__photo{overflow:visible; border-radius:0; box-shadow:none; background:none}
.story__media img,.kids__photo img{width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:0;
  -webkit-mask:url(media/photo-mask.svg) center/100% 100% no-repeat; mask:url(media/photo-mask.svg) center/100% 100% no-repeat;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.28)); transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.story__media:hover img,.kids__photo:hover img{transform:scale(1.05) rotate(-2deg)}
/* decoraciones que giran (sobre el marco amarillo, en las esquinas) */
.deco{position:absolute; z-index:2; pointer-events:none; width:clamp(58px,8vw,104px); opacity:.95}
.deco svg{width:100%; height:100%; display:block; filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.deco-1{top:clamp(10px,2.2vw,28px); left:clamp(10px,2.2vw,30px); animation:decoSpinL 10s linear infinite}
.deco-2{top:clamp(10px,2.2vw,28px); right:clamp(10px,2.2vw,30px); width:clamp(46px,6vw,84px); animation:decoSpinR 12s linear infinite}
@keyframes decoSpinR{to{transform:rotate(360deg)}}
@keyframes decoSpinL{to{transform:rotate(-360deg)}}
/* burbujas que suben dentro de la tarjeta */
.bubbles{position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none}
.bubble{position:absolute; bottom:3%; border-radius:50%; background:rgba(198,170,46,.4);
  animation:bubbleUp var(--dur,5s) ease-in infinite; animation-delay:var(--delay,0s)}
@keyframes bubbleUp{0%{transform:translate(var(--ds,0),0) scale(.3); opacity:0}14%{opacity:.55}100%{transform:translate(var(--de,0),-620%) scale(1); opacity:0}}
@media(prefers-reduced-motion:reduce){ .deco{animation:none} .bubble{animation:none; opacity:0} }

/* pop-in con rebote (transición SOLO en .in -> sin flash al marcar por JS) */
@media (prefers-reduced-motion: no-preference){
  .pop{opacity:0; transform:translateY(40px) scale(.82)}
  .pop.in{opacity:1; transform:none;
    transition:opacity .6s ease, transform .8s cubic-bezier(.34,1.56,.64,1); transition-delay:var(--d,0s)}
}
/* la tarjeta se encoge al ser cubierta (profundidad) — controlado por JS con --cardScale */
.intro .story,.matcha-story .story,.place .story,.kids .story{
  transform:scale(var(--cardScale,1)); transform-origin:center center}

/* limitar tamaño de las fotos en flor para que las tarjetas quepan en pantalla */
.story__media img,.kids__photo img{max-width:min(100%,380px); margin-inline:auto}

/* STAGE: telón amarillo que SUBE sobre el hero y queda FIJO mientras suben los cuadros */
.stage{position:relative; z-index:2}
.stage__bg{position:sticky; top:0; height:100vh; margin-bottom:-100vh; z-index:1; background:var(--amarillo); pointer-events:none; overflow:visible}
/* textura de bizcocho por encima del amarillo, a baja opacidad */
.stage__bg::after{content:""; position:absolute; inset:0;
  background:url(media/amarillo-texture.jpg?v=3) center/cover no-repeat;
  opacity:.5; mix-blend-mode:multiply; pointer-events:none}
/* ONDA amarilla en el borde superior: al SUBIR el amarillo lleva borde ondulado (mismo color);
   al anclarse queda fuera de pantalla (arriba) y abajo el amarillo lleno con su textura */
.stage__bg::before{content:""; position:absolute; left:0; right:0; bottom:100%; height:14vh;
  background:url(media/onda.svg?v=2) bottom/100% 100% no-repeat; pointer-events:none}

/* ============================================================
   RESEÑAS: marquee derecha→izquierda con tarjetas de colores + ilustraciones
   ============================================================ */
.reviews{position:relative; z-index:7; overflow:visible; padding:clamp(3.5rem,8vw,6rem) 0 clamp(4.5rem,10vw,8rem);
  background-color:#F4E7CB}
/* borde superior ONDULADO: el crema de reseñas sube en ondas sobre el amarillo */
.reviews::before{content:""; position:absolute; left:0; right:0; bottom:100%; height:clamp(42px,7vw,96px);
  background:url(media/onda-reviews.svg) bottom/100% 100% no-repeat; pointer-events:none; z-index:1}
.reviews__head{text-align:center; max-width:1180px; margin:0 auto clamp(2rem,4vw,3rem); padding:0 1.2rem}
.reviews__eyebrow{font-family:"Poppins",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.28em;
  font-size:clamp(.72rem,1.4vw,.85rem); color:var(--teal); opacity:.85; margin-bottom:.5rem}
.reviews__title{font-family:"Playfair Display",serif; font-weight:700; color:var(--teal-deep); font-size:clamp(2rem,4.6vw,3.4rem); line-height:1.05}
.reviews__title em{font-style:italic; color:#9E2B4E}
.reviews__badge{display:inline-block; margin-top:1rem; font-family:"Poppins",sans-serif; font-weight:600; font-size:.92rem;
  color:var(--teal-deep); background:#fff; border-radius:100px; padding:.55em 1.2em; text-decoration:none;
  box-shadow:0 10px 24px -14px rgba(0,0,0,.4); transition:transform .2s}
.reviews__badge:hover{transform:translateY(-2px)}
/* marquee */
.marquee{width:100%; overflow:hidden;
  -webkit-mask:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent)}
.marquee__track{display:flex; align-items:center; gap:clamp(1.4rem,3.5vw,3rem); width:max-content;
  animation:marqueeScroll 46s linear infinite; will-change:transform}
@keyframes marqueeScroll{to{transform:translateX(-50%)}}
.marquee:hover .marquee__track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){ .marquee__track{animation:none} }
/* tarjetas de reseña */
.rcard{width:100%; min-height:clamp(168px,17vw,226px); border-radius:24px;
  padding:clamp(1.3rem,2.1vw,1.9rem); display:flex; flex-direction:column; text-align:center; align-items:center;
  filter:drop-shadow(0 20px 40px rgba(16,48,41,.28))}
.rcard__stars{font-size:.95rem; letter-spacing:.08em; color:#FFD86B; margin-bottom:.6rem}
.rcard__q{font-family:"Poppins",sans-serif; font-weight:600; font-size:clamp(.95rem,1.35vw,1.06rem); line-height:1.45}
.rcard__a{font-family:"Poppins",sans-serif; font-weight:700; font-size:.9rem; margin-top:auto; padding-top:.9rem; opacity:.9}
.rcard--teal{background:#2C7C7D; color:#F6F0E4}
.rcard--gold{background:#E7BF49; color:#103029} .rcard--gold .rcard__stars{color:#8a6a12}
.rcard--pink{background:#EE7DA0; color:#fff}
.rcard--burgundy{background:#9E2B4E; color:#fff}
/* ilustraciones intercaladas */
.relem{flex:0 0 auto; width:clamp(84px,11vw,140px); height:auto; display:block;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.16)); animation:relemFloat 5s ease-in-out infinite}
.relem:nth-child(even){animation-duration:6.5s; animation-delay:-1.5s}
@keyframes relemFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(3deg)}}
@media(prefers-reduced-motion:reduce){ .relem{animation:none} }

/* ===== RESEÑAS: como el ejemplo — ítem = tarjeta ondulada + elemento debajo + escalonado ===== */
.rcard{ -webkit-mask:url(media/card-mask.svg) center/100% 100% no-repeat;
        mask:url(media/card-mask.svg) center/100% 100% no-repeat; border-radius:0 }
.ritem{ flex:0 0 auto; width:clamp(238px,25vw,320px); display:flex; flex-direction:column; align-items:center;
        gap:clamp(12px,1.8vw,26px) }
.ritem .relem{ width:78%; margin:0 auto }
/* escalonado vertical que rota (igual que el ejemplo MiCha) */
.ritem:nth-child(5n+2){ transform:translateY(-22px) }
.ritem:nth-child(5n+3){ transform:translateY(22px) }
.ritem:nth-child(5n+5){ transform:translateY(-16px) }

/* =========================================================
   VISÍTANOS  ·  FOOTER   (añadido — remata la página)
   ========================================================= */
/* VISÍTANOS editorial · A PANTALLA COMPLETA (ocupa todo el alto, de borde a borde) */
.visit{position:sticky; top:0; z-index:8; min-height:100vh; display:flex; align-items:center; overflow:hidden;
  background:var(--cream); padding:clamp(3rem,7vw,6rem) clamp(1.2rem,4vw,3.2rem)}
/* borde superior ONDULADO (el crema de reseñas ondea sobre el de Visítanos) */
.visit::before{content:""; position:absolute; top:0; left:0; right:0; height:clamp(44px,7vw,100px); z-index:1; pointer-events:none;
  background:url(media/onda-visit-top.svg) top/100% 100% no-repeat; filter:drop-shadow(0 7px 6px rgba(16,48,41,.14))}
.visit__inner{max-width:1460px; width:100%; margin:0 auto; display:grid; grid-template-columns:0.82fr 1.32fr;
  gap:clamp(1.6rem,4vw,3.6rem); align-items:center; position:relative; z-index:2}
@media(max-width:860px){ .visit__inner{grid-template-columns:1fr; gap:2.2rem} }
.visit__eyebrow{font-family:"Poppins",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.28em; font-size:.8rem; color:var(--teal)}
.visit__title{font-family:"Playfair Display",serif; font-weight:700; color:var(--teal-deep);
  font-size:clamp(2.6rem,6.5vw,5rem); line-height:.98; margin:.4rem 0 1.4rem}
.visit__title em{font-style:italic; color:var(--gold)}
/* horario con guías de puntos (estilo carta) */
.visit__sched{list-style:none; display:flex; flex-direction:column; margin:0 0 1.8rem; max-width:440px}
.visit__sched li{display:flex; align-items:baseline; gap:.7rem; padding:.6rem 0; font-family:"Poppins",sans-serif; font-size:1rem}
.visit__sched .d{font-weight:700; color:var(--teal-deep); white-space:nowrap}
.visit__sched .dots{flex:1; border-bottom:2px dotted #cdbfa3; transform:translateY(-5px)}
.visit__sched .h{color:#6a7b70; white-space:nowrap}
/* meta: dirección + reservas */
.visit__meta{display:flex; gap:2.4rem; flex-wrap:wrap; margin-bottom:1.9rem}
.visit__meta h4{font-family:"Poppins",sans-serif; font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; color:var(--teal); margin-bottom:.25rem}
.visit__meta p{font-family:"Poppins",sans-serif; font-weight:600; color:var(--teal-deep); line-height:1.5}
.visit__meta a{color:var(--teal-deep)}
.todo{color:#b0407a; font-style:normal; font-size:.78em}
.visit__cta{display:flex; gap:.8rem; flex-wrap:wrap}
.btn{display:inline-block; font-family:"Poppins",sans-serif; font-weight:600; padding:.85em 1.5em; border-radius:100px; transition:transform .25s var(--ease,ease), box-shadow .25s; cursor:url('media/cup-cursor.png') 16 16, pointer}
.btn--teal{background:var(--teal-deep); color:var(--cream); box-shadow:0 16px 30px -16px rgba(16,48,41,.8)}
.btn--teal:hover{transform:translateY(-3px)}
.btn--ghost{border:2px solid var(--teal-deep); color:var(--teal-deep)}
.btn--ghost:hover{background:var(--teal-deep); color:var(--cream); transform:translateY(-3px)}
/* mapa vertical alto */
.visit__map{position:relative; border-radius:28px; overflow:hidden; aspect-ratio:5/4; max-height:84vh; border:5px solid #fff;
  box-shadow:0 40px 74px -34px rgba(16,48,41,.6)}
.visit__map iframe{width:100%; height:100%; border:0; display:block; filter:saturate(1.05)}
/* taza de acuarela decorativa que asoma en la esquina */
.visit__deco{position:absolute; right:-30px; bottom:-30px; width:clamp(140px,20vw,260px); z-index:1; pointer-events:none;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.18)); animation:bobPin 4s ease-in-out infinite}
@keyframes bobPin{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:860px){ .visit__map{aspect-ratio:4/3; max-height:none} .visit__deco{width:120px; right:-14px; bottom:-14px} }
/* ---- Mapa Leaflet personalizado ---- */
.visit__leaflet{position:absolute; inset:0; width:100%; height:100%; background:#e9e2d2; z-index:1}
/* tinte cálido (colores Velvet) sobre las teselas del mapa */
.visit__leaflet .leaflet-tile-pane{filter:saturate(1.22) sepia(.3) hue-rotate(-10deg) contrast(1.08) brightness(.98)}
.visit__leaflet .leaflet-control-attribution{font-size:9px; background:rgba(246,240,228,.75); color:#4a4a42}
.visit__leaflet .leaflet-control-attribution a{color:var(--teal)}
.visit__leaflet .leaflet-bar a{color:var(--teal-deep); font-weight:700}
.visit__leaflet .leaflet-div-icon{background:transparent; border:0}
.visit__leaflet .leaflet-tile-loaded{opacity:1 !important}
.visit__leaflet .leaflet-tooltip{font-family:"Poppins",sans-serif; font-weight:600; border:0; color:var(--teal-deep);
  box-shadow:0 8px 18px -8px rgba(0,0,0,.4); border-radius:8px}
/* ruta: puntitos blancos animados (marcha) */
.route-anim{stroke-dasharray:1 11; animation:routeDash 1s linear infinite}
@keyframes routeDash{to{stroke-dashoffset:-12}}
/* pin-logo Velvet (grande) */
.vpin{position:relative; width:78px; height:92px}
.vpin__pulse{position:absolute; left:39px; top:39px; width:76px; height:76px; margin:-38px 0 0 -38px; border-radius:50%;
  background:rgba(198,170,46,.42); animation:vpulse 2.2s ease-out infinite}
.vpin__badge{position:absolute; left:1px; top:0; width:76px; height:76px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #E6CB55, #B9922B); border:3px solid #fff;
  box-shadow:0 12px 22px -8px rgba(0,0,0,.55); display:grid; place-items:center}
.vpin__badge::after{content:""; position:absolute; bottom:-8px; left:50%; transform:translateX(-50%);
  border-left:10px solid transparent; border-right:10px solid transparent; border-top:16px solid #B9922B}
.vpin__logo{position:relative; z-index:2; font-family:"Dancing Script",cursive; font-weight:700; color:#fff;
  font-size:1.5rem; line-height:1; text-shadow:0 1px 3px rgba(0,0,0,.4)}
@keyframes vpulse{0%{transform:scale(.5); opacity:.75} 100%{transform:scale(2.4); opacity:0}}

.foot{position:relative; z-index:9; background:var(--teal-deep); color:var(--cream); overflow:visible;
  min-height:100vh; display:flex; flex-direction:column}
/* borde superior ONDULADO (teal): el footer SUBE sobre Visítanos con la onda por delante */
.foot::before{content:""; position:absolute; left:0; right:0; bottom:100%; height:clamp(50px,8vw,104px); z-index:2;
  background:url(media/onda-teal.svg) bottom/100% 100% no-repeat; pointer-events:none}
.foot__marq{overflow:hidden; border-top:1px solid rgba(246,240,228,.14); border-bottom:1px solid rgba(246,240,228,.14); padding:.7rem 0; white-space:nowrap}
.foot__marqtrack{display:inline-block; animation:marqueeScroll 32s linear infinite; will-change:transform}
.foot__marqtrack b{font-family:"Playfair Display",serif; font-weight:700; font-size:clamp(1.3rem,4vw,2.3rem); color:transparent;
  -webkit-text-stroke:1px rgba(246,240,228,.5); padding:0 1rem; text-transform:uppercase; letter-spacing:.02em}
.foot__marqtrack b em{font-style:normal; -webkit-text-stroke-color:var(--gold)}
.foot__body{flex:1 0 auto; display:flex; flex-direction:column; justify-content:center;
  gap:clamp(2.4rem,5vw,4.5rem); padding:clamp(2rem,5vw,3.5rem) 0}
.foot__top{max-width:1180px; width:100%; margin:0 auto; padding:0 clamp(1.2rem,4vw,3rem); text-align:center}
.foot__kicker{font-family:"Poppins",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.24em;
  font-size:.78rem; color:var(--gold); opacity:.9; margin-bottom:.7rem}
.foot__big{font-family:"Playfair Display",serif; font-weight:700; color:var(--cream);
  font-size:clamp(2.1rem,5.4vw,3.8rem); line-height:1.04}
.foot__big em{font-style:italic; color:var(--gold)}
.foot__note{font-family:"Poppins",sans-serif; color:rgba(246,240,228,.66); margin:.85rem auto 0; max-width:44ch;
  font-size:clamp(.95rem,1.6vw,1.12rem); line-height:1.6}
.foot__inner{max-width:1180px; width:100%; margin:0 auto;
  display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:clamp(2rem,4vw,3.5rem);
  padding:0 clamp(1.2rem,4vw,3rem)}
@media(max-width:720px){ .foot__inner{grid-template-columns:1fr 1fr} }
@media(max-width:460px){ .foot__inner{grid-template-columns:1fr} }
/* ===== Footer brand PREMIUM: dorado metálico con brillo + línea fina animada — 22 sep 2026 ===== */
.foot__logo{position:relative; display:inline-block; font-family:"Dancing Script",cursive; font-weight:700; font-size:2.9rem; line-height:1;
  text-decoration:none; padding-bottom:.12em; letter-spacing:.01em;
  background:linear-gradient(100deg,#8F6A1C 0%,#C6AA2E 22%,#F2DE8C 42%,#FFF6D0 50%,#F2DE8C 58%,#C6AA2E 78%,#8F6A1C 100%);
  background-size:250% 100%; -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation:footShine 6.5s ease-in-out infinite; filter:drop-shadow(0 3px 12px rgba(198,170,46,.3))}
@keyframes footShine{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
/* línea fina elegante con un brillo que recorre (sustituye al subrayado del enlace) */
.foot__logo::after{content:""; position:absolute; left:.06em; right:.06em; bottom:-.01em; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent 0%,rgba(198,170,46,.2) 18%,#F4E29A 50%,rgba(198,170,46,.2) 82%,transparent 100%);
  background-size:220% 100%; animation:footShine 6.5s ease-in-out infinite; opacity:.85}
.foot__logo:hover{animation-duration:2.6s}
.foot__logo:hover::after{animation-duration:2.6s}
.foot__brand p{font-family:"Poppins",sans-serif; opacity:.85; margin-top:.55rem; letter-spacing:.01em}
.foot__small{font-size:.85rem; opacity:.62; max-width:32ch; margin-top:.7rem; line-height:1.6}
.foot__col h4{font-family:"Poppins",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.18em; font-size:.76rem; color:var(--gold); margin-bottom:1rem}
.foot__col a{position:relative; display:block; width:max-content; max-width:100%; font-family:"Poppins",sans-serif; color:var(--cream);
  opacity:.82; padding:.35em 0; text-decoration:none; transition:opacity .25s, transform .25s, color .25s}
.foot__col a::after{content:""; position:absolute; left:0; bottom:.16em; height:1.5px; width:100%; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.foot__col a:hover{opacity:1; color:var(--gold); transform:translateX(4px)}
.foot__col a:hover::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){ .foot__logo, .foot__logo::after{animation:none} }

/* ===== Sin costuras de subpíxel entre secciones (se colaba el amarillo del body) — 22 sep 2026 ===== */
.reviews,.visit,.foot{margin-top:-1px}
.reviews::before{bottom:calc(100% - 1px)}   /* la onda solapa 1px con la sección de arriba */
.foot__bar{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem 1.2rem; padding:1.1rem clamp(1.2rem,4vw,3rem);
  border-top:1px solid rgba(246,240,228,.14); font-family:"Poppins",sans-serif; font-size:.8rem; opacity:.82}
.foot__legal{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.1rem}
.foot__legal a{color:var(--cream); opacity:.7; text-decoration:none; transition:opacity .2s}
.foot__legal a:hover{opacity:1; text-decoration:underline}
/* textos por encima del trigo */
.foot__marq,.foot__body,.foot__inner,.foot__bar{position:relative; z-index:2}
/* ===== 🌾 MINI-JARDÍN INTERACTIVO ===== */
.garden{position:absolute; left:0; right:0; bottom:clamp(3rem,6vh,4rem); height:min(56vh,470px);
  z-index:1; pointer-events:none; overflow:hidden}
.gstalk{position:absolute; bottom:0; transform-origin:bottom center; transform:scaleY(var(--g,.18));
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.gwheat{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}
@media (prefers-reduced-motion:reduce){ .gwheat{animation:none} }
.foot.watering{cursor:none}
.foot.watering a{cursor:none}
/* regadera que sigue al ratón */
.watercan{position:fixed; left:0; top:0; z-index:10000; pointer-events:none; opacity:0;
  transform:translate(-4px,-46px) rotate(0deg); transform-origin:60% 66%;
  transition:opacity .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
  filter:drop-shadow(0 7px 9px rgba(0,0,0,.45))}
.watercan.show{opacity:1}
.watercan.pour{transform:translate(-8px,-42px) rotate(-26deg)}
/* gotas de agua */
.wdrop{position:fixed; z-index:9999; width:6px; height:11px; pointer-events:none;
  background:linear-gradient(#e2f3f9,#8ec7db); border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  box-shadow:0 0 6px rgba(150,210,230,.5)}
@keyframes wdropFall{0%{opacity:0; transform:translateY(0) scale(.7)} 15%{opacity:1}
  100%{opacity:0; transform:translateY(var(--dy,90px)) scale(1)}}
/* pista */
.garden__hint{position:absolute; left:50%; bottom:calc(clamp(3rem,6vh,4rem) + .6rem); transform:translateX(-50%);
  z-index:3; font-family:"Poppins",sans-serif; font-size:.82rem; color:var(--cream); opacity:.72;
  background:rgba(255,255,255,.08); border:1px solid rgba(246,240,228,.16); padding:.4em 1em; border-radius:100px;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:opacity .6s; pointer-events:none}
.garden__hint.gone{opacity:0}

/* =========================================================
   SECCION CARTA  ·  "cafe fondo marron" (ref PDF CARTA NUEVA)
   tablero cafe marron + acentos dorados + fotos de producto
   ========================================================= */
.menu{
  position:relative; z-index:7;
  padding:clamp(3.6rem,8vw,7rem) clamp(1.1rem,4vw,3rem) clamp(4.4rem,9vw,7.5rem);
  color:#F6EAD6;
  --acc:#E0A54E;                                   /* acento (cambia por categoria) */
  /* fondo VERDE OSCURO de marca (teal-deep) */
  background:
    radial-gradient(120% 90% at 12% 0%,  rgba(230,192,83,.13) 0%, transparent 46%),
    radial-gradient(120% 100% at 88% 6%, rgba(44,124,125,.22) 0%, transparent 46%),
    radial-gradient(140% 120% at 50% 120%, #08201B 0%, transparent 60%),
    linear-gradient(160deg, #16463E 0%, #123A34 34%, #0E2F29 68%, #0A241F 100%);
}
/* grano sutil sobre el marron */
.menu::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; z-index:0; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>")}
/* granos de cafe flotando (decoracion) */
.menu > *{position:relative; z-index:1}
/* nota: selector mas especifico (0,2,0) para ganar a `.menu > *` (0,1,1) y quedar absoluto/detras */
.menu .menu__bean{position:absolute; z-index:0; pointer-events:none; opacity:.42; filter:drop-shadow(0 8px 14px rgba(0,0,0,.4)); line-height:0}
.menu .menu__bean svg{display:block; width:100%; height:auto}

/* -- cabecera -- */
.menu__head{max-width:1180px; margin:0 auto clamp(1.8rem,4vw,3rem); text-align:center}
.menu__eyebrow{font-family:"Dancing Script",cursive; font-weight:700; color:var(--gold);
  font-size:clamp(1.5rem,4.4vw,2.3rem); line-height:1}
.menu__title{font-family:"Playfair Display",serif; font-weight:700; color:#FBF3E2;
  font-size:clamp(2.1rem,6.2vw,4rem); line-height:1.02; margin:.2rem 0 .1rem; letter-spacing:-.01em}
.menu__title em{font-style:italic; color:var(--gold)}
.menu__sub{font-family:"Poppins",sans-serif; color:#E4CFAE; font-weight:300;
  font-size:clamp(1rem,1.6vw,1.16rem); line-height:1.6; max-width:60ch; margin:.7rem auto 0}
.menu__chip{display:inline-flex; align-items:center; gap:.5em; margin-top:1.1rem;
  font-family:"Poppins",sans-serif; font-weight:600; font-size:.82rem; letter-spacing:.02em;
  color:#F0DFBE; background:rgba(230,192,83,.12); border:1px solid rgba(230,192,83,.34);
  padding:.5em 1.1em; border-radius:100px}
.menu__chip svg{width:16px; height:16px; stroke:var(--gold); fill:none; stroke-width:2}

/* -- tabs de categoria -- */
/* barra de categorias: EDITORIAL y elegante (versalitas + subrayado dorado, sin pildoras ni puntos) */
.menu__tabs{display:flex; gap:clamp(.9rem,2.4vw,2.2rem); justify-content:center; max-width:1180px;
  margin:clamp(1.6rem,4vw,2.6rem) auto clamp(1.8rem,4vw,2.8rem);
  padding:0 1rem; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.menu__tabs::-webkit-scrollbar{display:none}
.mtab{flex:0 0 auto; position:relative; cursor:url('media/cup-cursor.png') 16 16, pointer;
  background:none; border:0; border-radius:0;
  font-family:"Poppins",sans-serif; font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.16em;
  white-space:nowrap; color:rgba(246,234,214,.52); padding:.95rem .15rem; transition:color .3s ease}
.mtab__dot{display:none}
.mtab:hover{color:#F1E4C6}
.mtab::after{content:""; position:absolute; left:.15rem; right:.15rem; bottom:.5rem; height:1.5px; border-radius:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:center; opacity:0;
  transition:transform .4s cubic-bezier(.16,1,.3,1), opacity .4s}
.mtab.is-active{color:var(--gold)}
.mtab.is-active::after{transform:scaleX(1); opacity:1}

/* -- paneles -- */
.menu__panels{max-width:1180px; margin:0 auto; position:relative}
.mpanel{display:none}
.mpanel.is-active{display:block; animation:mpanelIn .5s cubic-bezier(.16,1,.3,1) both}
@keyframes mpanelIn{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}

/* cabecera del panel */
.mpanel__head{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem; margin-bottom:clamp(1.4rem,3vw,2.2rem);
  padding-bottom:1.4rem; border-bottom:1px solid rgba(230,192,83,.16); position:relative}
.mpanel__intro{flex:1 1 300px; min-width:min(100%,280px)}
.mpanel__eyebrow{font-family:"Poppins",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.22em;
  font-size:.72rem; color:var(--acc)}
.mpanel__name{font-family:"Playfair Display",serif; font-weight:700; color:#FBF3E2;
  font-size:clamp(1.7rem,4vw,2.6rem); line-height:1.05; margin:.15rem 0 .35rem}
.mpanel__desc{font-family:"Poppins",sans-serif; color:#DCC6A3; font-weight:300; font-size:clamp(.95rem,1.4vw,1.06rem); line-height:1.55; max-width:52ch}

/* fotos "coins" (circulos con foto de producto) */
.mcoins{flex:0 0 auto; display:flex; align-items:center}
.mcoin{width:clamp(58px,8.6vw,104px); aspect-ratio:1; border-radius:50%; overflow:hidden;
  border:3px solid var(--acc); background:#2A1A0E; margin-left:-16px; flex:0 0 auto;
  box-shadow:0 14px 26px -12px rgba(0,0,0,.7), inset 0 0 0 2px rgba(255,255,255,.08);
  animation:mfloat 5.5s ease-in-out infinite; will-change:transform}
.mcoin:first-child{margin-left:0}
.mcoin:nth-child(2){animation-delay:-1.4s} .mcoin:nth-child(3){animation-delay:-2.7s}
.mcoin:nth-child(4){animation-delay:-3.9s} .mcoin:nth-child(5){animation-delay:-.8s} .mcoin:nth-child(6){animation-delay:-2.1s}
.mcoin img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease,ease)}
.mcoin:hover{transform:translateY(-6px) scale(1.05); z-index:3}
.mcoin:hover img{transform:scale(1.08)}
@keyframes mfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* lista de precios */
.mlist{columns:2; column-gap:clamp(2rem,4vw,3.6rem)}
.mitem{break-inside:avoid; padding:.72rem 0; border-bottom:1px dashed rgba(230,192,83,.16)}
.mitem__row{display:flex; align-items:baseline; gap:.5rem}
.mitem__name{font-family:"Poppins",sans-serif; font-weight:600; color:#FBF3E2; font-size:1.02rem}
.mitem__alg{font-size:.7rem; color:#B79A72; font-weight:500; margin-left:.35em; letter-spacing:.02em}
.mitem__tag{display:inline-block; margin-left:.5em; font-family:"Poppins",sans-serif; font-weight:700;
  font-size:.6rem; text-transform:uppercase; letter-spacing:.09em; color:#2B1A0C; background:var(--acc);
  padding:.22em .6em; border-radius:100px; vertical-align:middle}
.mitem__dots{flex:1; align-self:stretch; border-bottom:2px dotted rgba(230,192,83,.34); transform:translateY(-.32em); min-width:16px}
.mitem__price{font-family:"Playfair Display",serif; font-weight:700; color:var(--gold); font-size:1.06rem; white-space:nowrap}
.mitem__price small{font-family:"Poppins",sans-serif; font-weight:600; font-size:.72rem; color:#C6A46E}
.mitem__desc{font-family:"Poppins",sans-serif; color:#CDB48C; font-weight:300; font-size:.86rem; line-height:1.5; margin-top:.25rem; max-width:46ch}

/* stagger de entrada de los items al activar el panel */
.mpanel.is-active .mitem{animation:mitemIn .5s cubic-bezier(.16,1,.3,1) both}
.mpanel.is-active .mitem:nth-child(1){animation-delay:.04s}
.mpanel.is-active .mitem:nth-child(2){animation-delay:.09s}
.mpanel.is-active .mitem:nth-child(3){animation-delay:.14s}
.mpanel.is-active .mitem:nth-child(4){animation-delay:.19s}
.mpanel.is-active .mitem:nth-child(5){animation-delay:.24s}
.mpanel.is-active .mitem:nth-child(6){animation-delay:.29s}
.mpanel.is-active .mitem:nth-child(7){animation-delay:.34s}
.mpanel.is-active .mitem:nth-child(8){animation-delay:.39s}
.mpanel.is-active .mitem:nth-child(n+9){animation-delay:.44s}
@keyframes mitemIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

/* notas / anadidos */
.mnotes{margin-top:clamp(1.4rem,3vw,2.2rem); display:flex; flex-wrap:wrap; gap:.6rem}
.mnote{font-family:"Poppins",sans-serif; font-weight:400; font-size:.82rem; line-height:1.4; color:#E3CEA8;
  background:rgba(255,255,255,.045); border:1px solid rgba(230,192,83,.18); border-radius:14px; padding:.6em .95em; flex:1 1 240px}
.mnote b{color:var(--acc); font-weight:700}

/* pie de la carta */
.menu__foot{max-width:1180px; margin:clamp(2.6rem,5vw,4rem) auto 0; text-align:center;
  font-family:"Poppins",sans-serif; color:#C4A778; font-size:.86rem; line-height:1.6}
.menu__foot em{font-family:"Dancing Script",cursive; font-style:normal; color:var(--gold); font-size:1.5rem}

@media(max-width:720px){
  .mlist{columns:1}
  .mpanel__head{flex-direction:column; align-items:flex-start}
  .mcoins{order:-1}
  .mcoin{width:clamp(52px,15vw,72px); margin-left:-12px}
}
@media(prefers-reduced-motion:reduce){
  .mcoin,.mpanel.is-active,.mpanel.is-active .mitem{animation:none}
  .mcoin{transition:none}
}

/* =========================================================
   CARTA · variante PAGINA con FOTOS (carta.html) — tarjetas
   ========================================================= */
.menu--page{min-height:100vh}
.menu--page .menu__head{padding-top:clamp(4.5rem,10vw,6.5rem)}

/* PAGINA carta: TODAS las categorias visibles a la vez; las tabs solo SALTAN (no ocultan) */
.menu--page .mpanel{display:block !important; animation:none !important; scroll-margin-top:130px}
.menu--page .mpanel + .mpanel{margin-top:clamp(2.6rem,6vw,4.6rem)}
.menu--page .mcard{animation:none !important}
/* animaciones al hacer scroll: texto y tarjetas suben y aparecen (transicion SOLO en .in, sin flash) */
.rise{opacity:0; transform:translateY(26px)}
.rise.in{opacity:1; transform:none; transition:opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1)}
@media(prefers-reduced-motion:reduce){ .rise,.rise.in{opacity:1 !important; transform:none !important; transition:none} }
/* barra de categorias PEGAJOSA para saltar rapido de una seccion a otra */
.menu--page .menu__tabs{position:sticky; top:64px; z-index:50; margin-top:clamp(1.4rem,3vw,2.2rem);
  padding:.1rem 1.2rem; border-radius:0;
  background:linear-gradient(rgba(9,30,25,.97), rgba(9,30,25,.74));
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:0; border-bottom:1px solid rgba(230,192,83,.2); box-shadow:0 20px 30px -26px rgba(0,0,0,.85)}
@media(max-width:600px){ .menu--page .menu__tabs{top:58px; justify-content:flex-start;
  -webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 4%,#000 92%,transparent)} }

/* rejilla de tarjetas de producto */
.mgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:clamp(.9rem,1.9vw,1.5rem)}
.mcard{position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:20px;
  background:rgba(255,255,255,.045); border:1px solid rgba(230,192,83,.18);
  box-shadow:0 22px 42px -28px rgba(0,0,0,.75);
  transition:transform .32s var(--ease,cubic-bezier(.16,1,.3,1)), box-shadow .32s, border-color .32s}
.mcard:hover{transform:translateY(-7px); border-color:rgba(230,192,83,.55); box-shadow:0 34px 54px -26px rgba(0,0,0,.85)}
/* DESTELLO brillante al pasar el raton (igual que las tarjetas de Velvet Kids) */
.mcard__glow{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .5s ease; border-radius:inherit;
  background:radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--acc) 55%, transparent) 0%, transparent 62%)}
.mcard:hover .mcard__glow{opacity:1}
.mcard__shine{position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0; transition:opacity .35s ease;
  background:linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 65%)}
.mcard:hover .mcard__shine{opacity:1; animation:mShine 1.9s infinite linear}
@keyframes mShine{0%{transform:translateX(-100%)}100%{transform:translateX(200%)}}
@media(prefers-reduced-motion:reduce){ .mcard:hover .mcard__shine{animation:none} }
.mcard__ph{position:relative; aspect-ratio:1/1; overflow:hidden; background:#0E2F29}
.mcard__ph img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s var(--ease,ease)}
.mcard:hover .mcard__ph img{transform:scale(1.07)}
/* placeholder cuando no hay foto: color de acento + icono de la categoria */
.mcard__ph--fb{display:grid; place-items:center;
  background:radial-gradient(120% 120% at 50% 8%, color-mix(in srgb, var(--acc) 58%, #123029), #0C2420)}
.mcard__ph--fb svg{width:42%; height:42%; fill:none; stroke:rgba(255,255,255,.9); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; opacity:.92}
.mcard__ph--fb::after{content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size:14px 14px; opacity:.35}
.mcard__tag{position:absolute; top:.6rem; left:.6rem; z-index:2; font-family:"Poppins",sans-serif; font-weight:700;
  font-size:.6rem; text-transform:uppercase; letter-spacing:.1em; color:#2B1A0C; background:var(--acc);
  padding:.3em .7em; border-radius:100px; box-shadow:0 6px 14px -6px rgba(0,0,0,.6)}
.mcard__body{flex:1; display:flex; flex-direction:column; gap:.28rem; padding:.85rem .95rem 1.05rem}
.mcard__top{display:flex; align-items:baseline; justify-content:space-between; gap:.5rem}
.mcard__name{font-family:"Poppins",sans-serif; font-weight:600; color:#FBF3E2; font-size:1.02rem; line-height:1.15}
.mcard__alg{font-size:.66rem; color:#B79A72; font-weight:500; margin-left:.3em}
.mcard__price{font-family:"Playfair Display",serif; font-weight:700; color:var(--gold); font-size:1.06rem; white-space:nowrap}
.mcard__price small{font-family:"Poppins",sans-serif; font-weight:600; font-size:.68rem; color:#C6A46E; display:block; text-align:right; margin-top:.05rem}
.mcard__desc{font-family:"Poppins",sans-serif; font-weight:300; color:#CDB48C; font-size:.84rem; line-height:1.45}

/* entrada escalonada de tarjetas al activar el panel */
.mpanel.is-active .mcard{animation:mcardIn .55s cubic-bezier(.16,1,.3,1) both}
.mpanel.is-active .mcard:nth-child(1){animation-delay:.03s}
.mpanel.is-active .mcard:nth-child(2){animation-delay:.08s}
.mpanel.is-active .mcard:nth-child(3){animation-delay:.13s}
.mpanel.is-active .mcard:nth-child(4){animation-delay:.18s}
.mpanel.is-active .mcard:nth-child(5){animation-delay:.23s}
.mpanel.is-active .mcard:nth-child(6){animation-delay:.28s}
.mpanel.is-active .mcard:nth-child(7){animation-delay:.33s}
.mpanel.is-active .mcard:nth-child(n+8){animation-delay:.38s}
@keyframes mcardIn{from{opacity:0; transform:translateY(16px) scale(.98)}to{opacity:1; transform:none}}

@media(prefers-reduced-motion:reduce){
  .mpanel.is-active .mcard{animation:none}
  .mcard,.mcard__ph img{transition:none}
}
@media(max-width:520px){
  .mgrid{grid-template-columns:repeat(2,1fr); gap:.7rem}
  .mcard__body{padding:.7rem .75rem .85rem}
  .mcard__name{font-size:.92rem}
}

/* badge de COLABORACION (logo del partner arriba-izquierda de la tarjeta) */
.mcard__collab{position:absolute; top:.55rem; left:.55rem; z-index:5; display:flex; align-items:center;
  background:rgba(10,10,10,.82); border:1px solid rgba(231,213,136,.42); border-radius:12px;
  padding:.42rem .6rem; box-shadow:0 8px 18px -8px rgba(0,0,0,.6)}
.mcard__collab img{height:24px; width:auto; display:block}

/* ===== Adaptación responsive: solo móvil/táctil, sin cambios de diseño (22 sep 2026) ===== */
@media (pointer:coarse){
  .hero__canvas{touch-action:pan-y}   /* permite el scroll vertical de la página aunque el dedo esté sobre el logo 3D */
  .visit__map{touch-action:pan-y}      /* el mapa no atrapa el scroll al deslizar con el dedo */
}
@media(max-width:640px){
  .nav__cta{min-height:44px; display:inline-flex; align-items:center}   /* área de toque cómoda para el único botón del nav en móvil */
  .foot__col a{padding:.6em 0}
  .foot__legal a{display:inline-block; padding:.4em 0}
}
@media(max-width:600px){
  .mtab{padding-inline:.55rem}                     /* pestañas de la carta con más zona de toque en móvil */
  .menu__foot a{display:inline-block; padding-block:.4rem}
}
@media(max-width:360px){
  .mgrid{grid-template-columns:1fr}                /* móviles muy pequeños: 1 columna para que no se recorte el precio */
}

/* ===== Menú móvil (hamburguesa) — 22 sep 2026 ===== */
.vmenu-btn{display:none; background:transparent; border:0; padding:0; cursor:pointer}
.vmenu{position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; justify-content:center; align-items:center;
  background:linear-gradient(160deg,#0c231d,#103029); color:var(--cream); opacity:0; visibility:hidden;
  transition:opacity .4s ease, visibility .4s ease}
.vmenu.open{opacity:1; visibility:visible}
.vmenu__close{position:absolute; top:1rem; right:1.15rem; width:44px; height:44px; background:transparent; border:0;
  color:var(--cream); font-size:1.7rem; line-height:1; cursor:pointer}
.vmenu__links{display:flex; flex-direction:column; align-items:center; gap:.1rem; text-align:center}
.vmenu__links a{font-family:"Playfair Display",serif; font-weight:700; font-size:clamp(1.9rem,8.5vw,2.7rem);
  color:var(--cream); text-decoration:none; padding:.32rem 1rem; opacity:0; transform:translateY(18px);
  transition:color .2s ease, opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1)}
.vmenu.open .vmenu__links a{opacity:1; transform:none}
.vmenu.open .vmenu__links a:nth-child(1){transition-delay:.06s}
.vmenu.open .vmenu__links a:nth-child(2){transition-delay:.12s}
.vmenu.open .vmenu__links a:nth-child(3){transition-delay:.18s}
.vmenu.open .vmenu__links a:nth-child(4){transition-delay:.24s}
.vmenu.open .vmenu__links a:nth-child(5){transition-delay:.30s}
.vmenu__links a:hover{color:var(--gold)}
.vmenu__links a.vmenu__cta{color:var(--gold); font-style:italic}
.vmenu__ig{margin-top:1.5rem; font-family:"Poppins",sans-serif; font-weight:600; font-size:.95rem; color:var(--cream);
  text-decoration:none; opacity:.9; padding:.55em 1.4em; border:1px solid rgba(246,240,228,.4); border-radius:100px;
  transition:background .25s ease, opacity .25s ease}
.vmenu__ig:hover{background:rgba(246,240,228,.1); opacity:1}
@media(max-width:640px){
  .nav .nav__cta{display:none}
  .vmenu-btn{display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:46px; height:46px}
  .vmenu-btn span{display:block; width:26px; height:2.5px; border-radius:2px; background:var(--gold); transition:transform .3s ease}
}
@media(prefers-reduced-motion:reduce){ .vmenu__links a{transition:opacity .01s} .vmenu{transition:opacity .01s} }

/* Títulos de sección (.story__title) más contenidos en móvil — 22 sep 2026 */
@media(max-width:640px){
  .story__title{font-size:clamp(1.55rem,6.6vw,2rem); margin-bottom:1.1rem}
  .story__eyebrow{margin-bottom:.7rem}
}

/* Carta: la cabecera de sección se ajusta al texto en móvil (quita el hueco vacío bajo el título) — 22 sep 2026 */
@media(max-width:600px){ .mpanel__intro{flex:0 1 auto} }

/* Home: tarjetas apiladas más COMPACTAS y ADAPTADAS en móvil — 22 sep 2026 */
@media(max-width:640px){
  .intro,.matcha-story,.place,.kids{min-height:auto; padding-block:clamp(.9rem,3.2vw,1.6rem)}
  /* más aire arriba y ABAJO para que ni la foto ni la última línea rocen el borde ondulado */
  .intro .story,.matcha-story .story,.place .story,.kids .story{padding:1.9rem 1.35rem 3rem}
  .story{gap:.85rem}
  /* foto CENTRADA y con buen tamaño */
  .story__media{display:flex; justify-content:center}
  .story__media img,.kids__photo img{max-width:min(82%,250px)}
  /* texto COMPACTO */
  .story__eyebrow{margin-bottom:.45rem}
  .story__title{margin-bottom:.55rem; line-height:1.06}
  .story__p{font-size:.92rem; line-height:1.4; margin-bottom:.5rem}
  .story__p:last-of-type{margin-bottom:0}
  .story__quote{display:none}   /* la cita se oculta en móvil para que la tarjeta no se alargue */
  /* las mini-ilustraciones se ocultan en móvil (se montaban sobre el texto) */
  .story__deco{display:none}
}

/* ===== Reseñas: compactas y más pequeñas en móvil — 22 sep 2026 ===== */
@media(max-width:640px){
  .reviews{padding:2.4rem 0 3rem}
  .reviews__head{margin-bottom:1.2rem; padding:0 1rem}
  .reviews__eyebrow{font-size:.68rem; letter-spacing:.2em; margin-bottom:.3rem}
  .reviews__title{font-size:1.55rem}
  .reviews__badge{font-size:.78rem; margin-top:.7rem; padding:.42em 1em}
  .marquee__track{gap:1rem}
  .ritem{width:170px; gap:10px}
  .ritem .relem{width:60%}
  .ritem:nth-child(5n+2){transform:translateY(-12px)}
  .ritem:nth-child(5n+3){transform:translateY(12px)}
  .ritem:nth-child(5n+5){transform:translateY(-9px)}
  .rcard{min-height:124px; padding:.95rem .9rem}
  .rcard__stars{font-size:.8rem; margin-bottom:.35rem}
  .rcard__q{font-size:.82rem; line-height:1.35}
  .rcard__a{font-size:.75rem; padding-top:.55rem}
}

/* ===== Footer: la regadera es un efecto de ratón; en táctil / móvil se oculta (se montaba sobre el texto) — 22 sep 2026 ===== */
@media (hover:none),(pointer:coarse){
  .watercan{display:none !important}
  .foot.watering{cursor:auto}
  .garden__hint{display:none}
}
@media(max-width:640px){
  .watercan{display:none !important}
  .foot.watering{cursor:auto}
  .garden__hint{display:none}
}


/* ============================================================
   INTRO «Qué es Velvet» — rediseño (10 oct 2026). Sólo esta tarjeta:
   foto GRANDE en arco con marco dorado, la taza apoyada en la foto (ya no tapa el título),
   título en 2 líneas, 3 etiquetas y la cita en una cajita. Todo cabe en una pantalla.
   ============================================================ */
.intro .story{grid-template-columns:.92fr 1.08fr; gap:clamp(2rem,5vw,5.2rem)}
/* --- foto en arco --- */
.intro .story__media{position:relative; width:min(100%,410px); margin-inline:auto; display:block}
.intro .story__media::before{content:""; position:absolute; inset:16px -16px -16px 16px; z-index:-1;
  border:2px solid var(--gold); border-radius:999px 999px 26px 26px; opacity:.85}
.intro .story__media .story__photo{display:block; width:100%; max-width:none; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 60%;
  -webkit-mask:none; mask:none; border-radius:999px 999px 26px 26px;
  filter:none; box-shadow:0 26px 44px -22px rgba(60,40,0,.55)}
.intro .story__media:hover .story__photo{transform:scale(1.025)}
/* --- la taza, apoyada abajo a la derecha de la foto --- */
.intro .story__media .story__deco{top:auto; left:auto; bottom:-30px; right:-58px; width:clamp(112px,10.5vw,168px); max-width:none; height:auto;
  aspect-ratio:auto; object-fit:contain; -webkit-mask:none; mask:none; border-radius:0; margin:0; z-index:2;
  filter:drop-shadow(0 14px 18px rgba(40,25,10,.35))}
.intro .story__media.in .story__deco{opacity:1}
/* --- texto --- */
.intro .story__title{font-size:clamp(2rem,3.5vw,3.25rem); margin-bottom:1.15rem}
.intro .story__line{display:block}
.intro .story__p{font-size:clamp(.98rem,1.18vw,1.08rem); line-height:1.65; margin-bottom:.85rem; max-width:34em}
.story__feats{list-style:none; display:flex; flex-wrap:wrap; gap:.34rem; margin:1.15rem 0 0; padding:0; position:relative; z-index:1}
.story__feats li{display:inline-flex; align-items:center; gap:.55em; font-family:"Poppins",sans-serif; font-weight:600;
  font-size:clamp(.68rem,.76vw,.77rem); color:var(--teal-deep); background:rgba(44,124,125,.1);
  border:1.5px solid rgba(44,124,125,.28); padding:.5em .66em; border-radius:100px; white-space:nowrap}
.story__feats li::before{content:""; width:.55em; height:.55em; border-radius:50%; background:var(--gold); flex:none}
.intro .story__quote{font-size:clamp(1rem,1.3vw,1.18rem); line-height:1.45; margin-top:1.3rem; padding:.95rem 1.2rem;
  border-left:3px solid var(--gold); background:rgba(198,170,46,.13); border-radius:0 16px 16px 0; max-width:34em}
.intro .story__by{margin-top:.5rem}
@media(max-width:860px){
  .intro .story{grid-template-columns:1fr; gap:2.2rem}
  .intro .story__media{width:min(78%,330px)}
  .intro .story__media .story__deco{right:-34px; bottom:-22px; width:clamp(92px,24vw,128px)}
}
@media(max-width:640px){
  .intro .story{gap:1.5rem}
  .intro .story__media{width:min(70%,236px)}
  .intro .story__media::before{inset:10px -10px -10px 10px}
  .intro .story__media .story__photo{aspect-ratio:1/1.08}
  .intro .story__media .story__deco{display:block; right:-30px; bottom:-16px; width:84px}
  .intro .story__p{font-size:.92rem; line-height:1.4; margin-bottom:.5rem}
  .story__feats{display:none}   /* en móvil se ocultan (como la cita) para que la tarjeta no se alargue */
}


/* ===== TRIGO 3D del hero + granos que caen al hacer scroll — 10 oct 2026 ===== */
.trigo3d{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; pointer-events:none}
.semillas{position:fixed; inset:0; width:100%; height:100%; display:block; z-index:40; pointer-events:none}