/* hero: helado de palabras que se llena. Alto de scroll sólo con JS; sin JS queda la primera pantalla */
.hx{position:relative;color:#fff;background:#2A0A36}
.js .hx{height:380vh}
.hx__pegado{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;background:radial-gradient(70% 80% at 62% 50%,rgba(242,217,166,0),#2A0A36 72%)}
.js .hx__pegado{position:sticky;top:0;height:100vh;height:100svh}
.hx__escena{position:absolute;inset:0}
.hx__helado{position:absolute;left:60%;top:54%;height:82vh;height:82svh;aspect-ratio:256/726;transform:translate(-50%,-50%);will-change:transform;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hx__helado svg{display:block;width:100%;height:100%;overflow:visible}
.hx__vaso{position:absolute;left:calc(max(24px,(100% - var(--wrap))/2) + min(470px,42vw) + 28px);bottom:13vh;width:108px;height:162px;will-change:transform;opacity:0}
.hx__vaso .vidrio{position:absolute;inset:0;border:3px solid #ffffffcc;border-top:0;border-radius:2px 2px 18px 18px;background:linear-gradient(#f4eee11a,#e4b8f044);overflow:hidden;clip-path:polygon(0 0,100% 0,92% 100%,8% 100%)}
.hx__vaso .liq{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(#C79A68,#7A4A26)}
.hx__vaso .esp{position:absolute;left:0;right:0;height:9px;background:#F4E3C3;opacity:0;border-radius:4px}
.hx__vaso .onda{position:absolute;left:50%;top:-4px;width:60px;height:16px;margin-left:-30px;border-radius:50%;border:2px solid #fff;opacity:0}
.hx__vaso.vierte .onda{animation:hxonda .7s linear infinite}
@keyframes hxonda{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.hx__cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hx__velo{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(42,10,54,.9) 6%,rgba(42,10,54,0) 58%)}
.hx__ui{position:absolute;left:max(24px,calc((100% - var(--wrap))/2));top:50%;width:min(470px,42vw);height:0;transform:translateY(-2%)}
.hx__etapa{position:absolute;left:0;top:0;width:100%;transform:translateY(calc(-50% + 18px));opacity:0;pointer-events:none;transition:opacity .5s var(--curva),transform .5s var(--curva)}
.hx__etapa.on,.hx__etapa:first-child{opacity:1;transform:translateY(-50%);pointer-events:auto}
.js .hx__etapa:first-child:not(.on){opacity:0;transform:translateY(calc(-50% + 18px));pointer-events:none}
.hx__etapa h1,.hx__etapa h2{font-size:clamp(2.4rem,4.6vw,4.2rem);font-weight:800;margin-bottom:16px}
.hx__etapa p:not(.rotulo){opacity:.88;max-width:420px}
.hx__btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hx__pie{position:absolute;left:max(24px,calc((100% - var(--wrap))/2));right:max(24px,calc((100% - var(--wrap))/2));bottom:22px;display:none;align-items:center;gap:8px;flex-wrap:wrap}
.js .hx__pie{display:flex}
.hx__barra{height:2px;width:min(180px,18vw);background:rgba(255,255,255,.2);margin-right:10px;position:relative}
.hx__barra i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--hp,0) * 100%);background:#F2D9A6}
.hx__pie button{font:600 .72rem/1 Inter,sans-serif;color:#fff;background:none;border:1px solid rgba(255,255,255,.3);border-radius:99px;padding:8px 13px;cursor:pointer;opacity:.7;min-height:32px}
.hx__pie button.on{opacity:1;border-color:#F2D9A6;color:#F2D9A6}
.hx__pie button:focus-visible,.hx__saltar:focus-visible{outline:3px solid #E4B8F0;outline-offset:3px}
.hx__pista{margin-left:auto;font-size:.66rem;letter-spacing:.14em;opacity:.55}
.hx__saltar{position:absolute;left:12px;top:calc(var(--barra) + 8px);z-index:5;background:#fff;color:#3F1150;padding:8px 14px;border-radius:99px;font-weight:700;font-size:.85rem;transform:translateY(-300%)}
.hx__saltar:focus{transform:none}
.hx__tag{position:absolute;background:rgba(30,8,40,.86);border:1px solid rgba(255,255,255,.25);border-radius:9px;padding:7px 12px 7px 24px;font-size:.78rem;line-height:1.3;white-space:nowrap;opacity:0;transform:translateY(8px);transition:opacity .5s var(--curva),transform .5s var(--curva);pointer-events:none}
.hx__tag.on{opacity:1;transform:none}
.hx__tag:before{content:"";position:absolute;left:9px;top:50%;margin-top:-4px;width:8px;height:8px;border-radius:50%;background:#F2D9A6;box-shadow:0 0 0 4px rgba(242,217,166,.28)}
.hx__tag b{display:block}.hx__tag span{opacity:.72;font-size:.72rem}
@media (max-width:800px){
  .hx__helado{left:52%;top:37%;height:50vh;height:50svh}
  .hx__vaso{left:10vw;bottom:41vh;width:70px;height:104px}
  .hx__ui{left:20px;right:20px;top:auto;bottom:88px;width:auto;transform:none}
  .hx__etapa{top:auto;bottom:0;transform:translateY(18px)}
  .hx__etapa.on,.hx__etapa:first-child{transform:none}
  .js .hx__etapa:first-child:not(.on){transform:translateY(18px)}
  .hx__etapa h1,.hx__etapa h2{font-size:clamp(2rem,9vw,2.8rem)}
  .hx__velo{background:linear-gradient(0deg,rgba(42,10,54,.96) 18%,rgba(42,10,54,0) 62%)}
  .hx__pista,.hx__tag{display:none}
  .hx__pie{bottom:16px}
}
@media (prefers-reduced-motion:reduce){.js .hx{height:auto}.js .hx__pegado{position:relative;height:auto;min-height:100svh}.js .hx__pie{display:none}.hx__etapa{transition:none}}

.hx__vaso .bu{position:absolute;bottom:6%;width:5px;height:5px;border-radius:50%;border:1.5px solid #ffffffcc;opacity:0}
.hx__vaso.lleno .bu{animation:hxbu 2.2s linear infinite}
.hx__vaso .bu:nth-child(1){left:22%;animation-delay:0s}.hx__vaso .bu:nth-child(2){left:42%;animation-delay:.7s}.hx__vaso .bu:nth-child(3){left:60%;animation-delay:1.3s}.hx__vaso .bu:nth-child(4){left:76%;animation-delay:.4s}
@keyframes hxbu{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-110px);opacity:0}}


/* la frase se enciende palabra por palabra con el scroll */
.hx__frase{font-size:clamp(2rem,4vw,3.5rem)!important;line-height:1.04}
.hx__frase .l{display:block}
.hx__frase .w{opacity:0;text-shadow:0 1px 14px rgba(20,5,28,.9);transition:opacity .4s var(--curva),color .4s}
.hx__frase .w.on{opacity:1}
.js .hx__frase .w.on{opacity:1}
.hx__frase .venis .w.on{color:#F2D9A6}
.js .hx__frase .w{opacity:0}
.js .hx__frase .w.on{opacity:1}
html:not(.js) .hx__frase .w{opacity:1}
.hx__pista.baja{opacity:.9;color:#F2D9A6;animation:hxpista 1.2s ease-in-out infinite}
@keyframes hxpista{50%{transform:translateY(3px)}}

/* celulares: texto compacto y helado que se achica en pantallas bajas, para que nunca se pisen */
@media (max-width:800px){
  .hx__helado{--hxh:min(50svh,max(170px,calc(100svh - 430px)));height:var(--hxh);top:calc(76px + var(--hxh) / 2);left:54%}
  .hx__etapa h1,.hx__etapa h2{font-size:clamp(1.8rem,8.2vw,2.5rem);margin-bottom:10px}
  .hx__etapa p:not(.rotulo){font-size:.95rem;line-height:1.4;margin-bottom:0}
  .hx__etapa .rotulo{margin-bottom:10px;font-size:.66rem}
  .hx__btns{margin-top:16px;gap:10px;flex-wrap:nowrap}
  .hx__btns .boton{min-height:42px;padding:0 16px;font-size:.86rem;white-space:nowrap}
  .hx__ui{bottom:70px}
  .hx__barra{display:none}
  .hx__pie{bottom:14px;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none}
  .hx__pie::-webkit-scrollbar{display:none}
  .hx__pie button{flex:none;padding:7px 10px;font-size:.66rem}
  .hx__vaso{bottom:auto;top:calc(76px + var(--hxh,300px) + 4px)}
}
@media (max-width:800px) and (max-height:640px){.hx__etapa p:not(.rotulo){display:none}.hx__ui{bottom:62px}}

/* sin chips en el pie del hero */
.hx__pie button{display:none!important}

@media (min-width:801px){.hx__helado{left:64%}}
@media (min-width:801px) and (max-width:1300px){.hx__helado{left:67%}}