/* Escena 3D de entrada: cereza que gira con el scroll (versión animada) */
:root{--nav-h:74px}
.nav{transition:background .35s,border-color .35s}
.nav.en-escena{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.flotante{transition:opacity .3s,transform .3s}
.flotante.oculto{opacity:0;transform:scale(.6);pointer-events:none}

.escena{position:relative;height:200vh;height:200svh;margin-top:calc(var(--nav-h) * -1);padding:0}
.escena-fija{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.escena-fondo{position:absolute;inset:0;z-index:-3;background:linear-gradient(180deg,#F3EEE7 0%,#ECE4D9 100%)}
.flota{position:absolute;opacity:.12;pointer-events:none;z-index:-2;height:auto;will-change:transform}
.flota.f1{width:130px;left:3%;top:21%}
.flota.f2{width:170px;right:3.5%;top:15%}
.flota.f3{width:120px;left:7%;bottom:9%}
.flota.f4{width:104px;right:8%;bottom:11%}
.escena-brillo,.escena-sombra{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none;opacity:0;will-change:transform,opacity}
.escena-brillo{width:200px;height:200px;border-radius:50%;z-index:-1;background:radial-gradient(closest-side,rgba(255,255,255,.85),rgba(255,255,255,.35) 55%,rgba(255,255,255,0))}
.escena-sombra{width:200px;height:40px;border-radius:50%;z-index:1;background:radial-gradient(closest-side,rgba(65,0,20,.32),rgba(65,0,20,0))}
#cereza-3d{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;display:block}
.cereza-respaldo{position:absolute;left:0;top:0;width:100px;max-width:none;transform-origin:0 0;z-index:2;display:none;opacity:0}
.sin-3d .cereza-respaldo{display:block}
.sin-3d #cereza-3d{display:none}

.escena-intro{position:absolute;left:0;right:0;top:calc(var(--nav-h) + 4vh);z-index:3;text-align:center;padding:0 16px}
.escena-intro .eyebrow{justify-content:center;margin-bottom:10px}
.escena-intro .eyebrow::after{content:"";width:28px;height:1px;background:currentColor}
.titulo-uno{font-size:clamp(64px,min(9.4vw,18vh),170px);line-height:.95;letter-spacing:-.03em;margin:0}
.titulo-dos{position:absolute;left:0;right:0;top:calc(var(--nav-h) + 3vh);z-index:3;text-align:center;font-size:clamp(56px,min(7vw,13vh),120px);line-height:.95;letter-spacing:-.025em;margin:0;padding:0 16px}
.palabra{display:inline-block;white-space:nowrap}
.letra{display:inline-block;transform-origin:50% 70%;will-change:transform,opacity}
.corte{display:none}

.escena-pie{position:absolute;left:0;right:0;bottom:max(26px,env(safe-area-inset-bottom));z-index:4;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:0 16px}
.escena-pie p{font-size:1.02rem;color:var(--suave);max-width:46ch}
.escena-pie .fila{display:flex;align-items:center;gap:24px}
.desliza{display:inline-flex;align-items:center;gap:10px;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--oliva)}
.desliza i{display:block;width:1px;height:34px;background:linear-gradient(var(--oliva),transparent);transform-origin:top;animation:baja 1.9s ease-in-out infinite}
@keyframes baja{0%{transform:scaleY(0);opacity:1}55%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* Etiquetas alrededor de la cereza */
.etiquetas-3d{list-style:none;position:absolute;inset:0;z-index:5;margin:0;padding:0;pointer-events:none}
.et{position:absolute;height:64px;pointer-events:auto}
.et a{display:flex;align-items:center;gap:6px;height:100%;text-decoration:none}
.et .ico{width:64px;height:64px;flex:none;border-radius:20px;background:var(--vino);display:grid;place-items:center;box-shadow:0 14px 28px -16px rgba(65,0,20,.75);transition:background .2s}
.et .ico svg{width:26px;height:26px;fill:var(--crema)}
.et .txt{height:64px;display:flex;align-items:center;padding:0 24px;border-radius:20px;background:rgba(250,248,244,.66);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(65,0,20,.08);font-size:1.06rem;font-weight:500;color:var(--vino);white-space:nowrap;box-shadow:0 14px 30px -22px rgba(65,0,20,.55)}
.et a:hover .ico{background:var(--rojo)}
.et.izq{right:calc(100% - var(--cx,50%) + var(--mitad,200px) + 26px)}
.et.der{left:calc(var(--cx,50%) + var(--mitad,200px) + 26px)}
.et.arriba{top:calc(var(--cy,55%) - var(--fila,100px) - 32px)}
.et.abajo{top:calc(var(--cy,55%) + var(--fila,100px) - 32px)}

/* Sección "hero" que ahora va después de la escena */
.hero .titulo-hero{font-size:clamp(2.5rem,5.4vw,4.1rem);margin-bottom:22px}
.hero{position:relative;z-index:1;margin-top:calc(var(--solape,0px) * -1);padding-top:60px;border-radius:32px 32px 0 0;box-shadow:0 -22px 44px -30px rgba(65,0,20,.45)}
@media (max-width:640px){.hero{padding-top:40px;border-radius:26px 26px 0 0}}

/* Antes de que el JS arme las letras no se muestra nada (evita parpadeo) */
.js .escena:not(.armada) :is(.titulo-uno,.titulo-dos,.escena-kicker,.escena-pie,.et){visibility:hidden}
/* Sin JS: todo estático y legible */
html:not(.js) .escena{height:auto}
html:not(.js) .escena-fija{position:relative;height:auto;min-height:100vh}
html:not(.js) .titulo-dos,html:not(.js) .etiquetas-3d{display:none}
html:not(.js) .cereza-respaldo{display:block;opacity:1;position:relative;width:220px;margin:52vh auto 0}

@media (max-width:1099px){
  .titulo-uno{font-size:clamp(46px,min(15.5vw,11vh),128px);line-height:.98}
  .corte{display:block}
  .titulo-dos{font-size:clamp(38px,min(11.5vw,8.5vh),86px);top:calc(var(--nav-h) + 2.5vh)}
  /* celular: dos columnas a los costados de la cereza */
  .et{height:auto;width:var(--etw,104px);transform:translateY(-50%)}
  .et.izq{left:12px;right:auto}
  .et.der{right:12px;left:auto}
  .et.arriba{top:calc(var(--cy,50%) - var(--fila,80px))}
  .et.abajo{top:calc(var(--cy,50%) + var(--fila,80px))}
  .et a{flex-direction:column;gap:7px;height:auto}
  .et.izq a{flex-direction:column-reverse}
  .et .ico{width:46px;height:46px;border-radius:15px}
  .et .ico svg{width:20px;height:20px}
  .et .txt{width:100%;height:auto;min-height:44px;justify-content:center;text-align:center;padding:6px 7px;border-radius:12px;font-size:.78rem;line-height:1.18;white-space:normal;-webkit-hyphens:auto;hyphens:auto}
  .escena-pie p{font-size:.95rem;max-width:34ch}
  .desliza{display:none}
  .flota.f1{width:84px;left:-2%;top:30%}
  .flota.f2{width:96px;right:-3%;top:14%}
  .flota.f3,.flota.f4{display:none}
  .escena-intro .eyebrow{font-size:.7rem;letter-spacing:.14em}
}
@media (max-width:420px){
  .escena-intro .eyebrow::before,.escena-intro .eyebrow::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .letra{will-change:auto}
}