.chero{
  --ch-night:#0E1113;
  --ch-accent:#2B6FAB;
  --ch-display:'Archivo',system-ui,sans-serif;
  --ch-ui:'Inter Tight',system-ui,sans-serif;
  --ch-ease:cubic-bezier(.22,.61,.24,1);
  --ch-vacia-ms:280ms;      
  --ch-barra-techo-ms:6000ms;
  --ch-cue-ms:2000ms;
  --ch-persiana-ms:1100ms;  
  --ch-auto-ms:41.7ms;      
  --ch-deriva-ms:200ms;     
  position:relative;
  background:var(--ch-night);
  margin-top:calc(var(--nav) * -1);
}
.chero-intro{position:fixed;inset:0;z-index:90;background:var(--white);
  display:flex;align-items:center;justify-content:center;
  transform:translateY(0);will-change:transform;
  transition:transform var(--ch-persiana-ms) var(--ch-ease)}
.chero-intro.sube{transform:translateY(-100%)}
.chero-intro.gone{opacity:0;pointer-events:none;
  transition:opacity var(--ch-vacia-ms) linear}
.chero-intro > div{text-align:center;color:var(--ink);
  transition:opacity var(--ch-vacia-ms) var(--ch-ease)}
.chero-intro.vacia > div{opacity:0}
.chero-intro b{display:block;
  animation:chSube .8s cubic-bezier(.2,.6,.2,1) .15s both}
.logo-loader{height:auto;width:clamp(170px,22vw,300px);margin:0 auto;
  color:var(--ink)}
.chero-intro span{display:block;font-family:var(--ch-ui);font-weight:500;
  font-size:12px;letter-spacing:.18em;color:var(--ink2);margin-top:12px;
  opacity:0;animation:chRise .8s cubic-bezier(.2,.6,.2,1) .65s forwards}
.chero-intro .chero-accion{display:inline-block;
  font-size:0;letter-spacing:normal;animation:none;opacity:1;
  margin-top:clamp(48px,8vh,96px)}
.chero-intro .chero-accion .chero-enter{font-size:12px;letter-spacing:.18em}
.chero-intro i{display:block;width:100%;height:2px;margin:0;
  background:var(--line);opacity:0;animation:chRise var(--ui-lenta) ease var(--ui-ms) forwards}
.chero-intro em{display:block;height:100%;width:0;background:var(--ink);
  transition:width .25s linear}
@keyframes chRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes chSube{from{transform:translateY(10px)}to{transform:none}}
.chero-scrim{position:fixed;top:0;left:0;right:0;height:132px;z-index:40;
  pointer-events:none;opacity:1;transition:opacity var(--ui-lenta) var(--ch-ease);
  background:linear-gradient(180deg,rgba(8,10,12,.55),rgba(8,10,12,0))}
.chero.salida .chero-scrim{opacity:0}
.chero-track{position:relative;min-height:100svh}
.chero-stage{position:static;height:auto;overflow:visible}
.chero-static{display:block;width:100%;height:100svh;object-fit:cover}
.chero-stage canvas{display:block;width:100%;height:100svh;position:relative;z-index:1}
.chero-stage video{display:block;width:100%;height:100svh;object-fit:cover;
  position:relative;z-index:1}
.chero[data-motor="video"]:not(.sin-video) .chero-stage canvas{display:none}
.chero.sin-video .chero-stage video{display:none}
html:not(.js) .chero-stage video,
.chero.apilado .chero-stage video{display:none}
html:not(.js) .chero-stage canvas,
.chero.apilado .chero-stage canvas{display:none}
.chero-veil{display:none}
.chero-bar{display:none}
.js .chero:not(.apilado) .chero-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.js .chero:not(.apilado) .chero-stage canvas,
.js .chero:not(.apilado) .chero-stage video{height:100%;
  transform:scale(1.06);transition:transform 1.6s var(--ch-ease)}
.js .chero:not(.apilado) .chero-stage.live canvas,
.js .chero:not(.apilado) .chero-stage.live video{transform:none}
.js .chero:not(.apilado) .chero-veil{display:block;position:absolute;inset:0;
  pointer-events:none;z-index:1;
  background:
    radial-gradient(120% 95% at 8% 88%, rgba(8,10,12,.76) 0%, rgba(8,10,12,.34) 42%, rgba(8,10,12,0) 70%),
    linear-gradient(0deg, rgba(8,10,12,.42) 0%, rgba(8,10,12,0) 34%)}
.js .chero:not(.apilado) .chero-bar{display:block;position:absolute;left:0;bottom:0;
  height:2px;width:0;background:var(--ch-accent);transition:width .2s linear;z-index:3}
.js .chero:not(.apilado) .chero-bar.oculta{display:none}
.js .chero:not(.apilado) .chero-bar.scrub{transition:none}
.js .chero:not(.apilado) .chero-stage::after{
  content:'';position:absolute;left:0;right:0;bottom:0;z-index:1;
  height:clamp(70px,10vh,120px);pointer-events:none;opacity:0;
  transition:opacity .3s var(--ch-ease);
  background:linear-gradient(180deg,rgba(255,255,255,0),var(--white))}
.js .chero:not(.apilado) .chero-stage.fin::after{opacity:1}
.js .chero:not(.apilado) .chero-static{position:absolute;inset:0;height:100%;z-index:0}
.js .chero:not(.apilado) .chero-stage.drawn .chero-static{display:none}
.brv{display:none}
@media (orientation:portrait){ .brv{display:inline} }
.chero-beats{position:static;z-index:2;
  padding:clamp(38px,6vh,72px) clamp(20px,5vw,72px) clamp(46px,8vh,90px)}
.chero-beat{color:#fff}
.chero-beat + .chero-beat{margin-top:26px}
.chero-beat .tag{font-family:var(--ch-ui);font-weight:500;font-size:14px;
  letter-spacing:.14em;color:#fff;margin:0 0 22px;
  text-shadow:0 1px 12px rgba(8,10,12,.6)}
.chero-beat h1,.chero-beat h2{color:#fff;font-family:var(--ch-display);font-weight:500;
  letter-spacing:-.034em;font-size:clamp(27px,3.5vw,52px);line-height:1.06;
  margin:0;text-shadow:0 1px 30px rgba(8,10,12,.45)}
.js .chero:not(.apilado) .chero-beats{position:absolute;inset:0;padding:0;
  pointer-events:none}
.js .chero:not(.apilado) .chero-beat{position:absolute;
  left:clamp(20px,5vw,72px);bottom:clamp(104px,17vh,150px);margin-top:0;
  opacity:0;transform:translateY(12px);
  transition:opacity .55s var(--ch-ease),transform .55s var(--ch-ease)}
.js .chero:not(.apilado) .chero-beat.on{opacity:1;transform:none}
.js .chero.persiana:not(.apilado) .chero-beat.on{opacity:0;transform:translateY(12px)}
.chero-rail,.chero-cue{display:none}
.js .chero:not(.apilado) .chero-rail{position:absolute;right:clamp(18px,3vw,44px);
  top:50%;transform:translateY(-50%);z-index:2;
  display:flex;flex-direction:column;gap:12px;align-items:flex-end;
  padding:14px 10px 14px 18px;
  background:linear-gradient(270deg,
    rgba(8,10,12,.64) 0%,rgba(8,10,12,.64) 64%,rgba(8,10,12,0) 100%)}
.chero-rail button{display:flex;align-items:center;gap:9px;
  font-family:var(--ch-ui);font-weight:500;font-size:10px;letter-spacing:.1em;
  color:rgba(255,255,255,.82);transition:color .3s;
  text-shadow:0 1px 3px rgba(8,10,12,.9);
  background:none;border:0;padding:4px 0;cursor:pointer}
.chero-rail button::after{content:'';display:block;width:22px;height:2px;
  background:rgba(255,255,255,.72);transition:background var(--dur-fast,.2s),
    width var(--dur-fast,.2s)}
.chero-rail button:hover{color:#fff}
.chero-rail button:hover::after{background:#fff;width:42px}
.chero-rail button.on{color:#fff}
.chero-rail button.on::after{background:#fff;width:42px}
.chero-rail button:focus-visible{outline:1px solid #fff;outline-offset:4px}
@media (max-width:760px){ .js .chero:not(.apilado) .chero-rail{display:none} }
.js .chero:not(.apilado) .chero-cue{display:block;position:absolute;left:50%;
  bottom:26px;transform:translateX(-50%);z-index:2;
  font-family:var(--ch-ui);font-weight:500;font-size:10.5px;
  letter-spacing:.16em;color:rgba(255,255,255,.78);
  text-shadow:0 1px 8px rgba(8,10,12,.7);
  opacity:0;transform:translateX(-50%) translateY(var(--entra-y));
  transition:opacity var(--ui-lenta) var(--e),
             transform var(--ui-lenta) var(--e)}
.js .chero:not(.apilado) .chero-cue.entra{opacity:1;
  transform:translateX(-50%) translateY(0)}
.chero-cue.gone{opacity:0}
.chero-enter{display:block;margin:0 auto;font-family:var(--ch-ui);
  font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);background:none;border:0;
  padding:18px 0;cursor:pointer;
  transition:color var(--ui-ms) var(--e)}
.chero-enter:hover{color:var(--cognac)}
.chero-accion:hover i{background:var(--cognac)}
html.tecla .chero-enter:focus-visible{outline:1px solid var(--ink);outline-offset:5px}
.chero-enter[hidden]{visibility:hidden}
.chero-enter[disabled]{opacity:.38;cursor:default;letter-spacing:.18em}
.chero-enter[disabled]:hover{color:var(--ink)}
.chero-accion:has(.chero-enter[disabled]):hover i{background:var(--line)}
.chero-mute{position:absolute;right:clamp(18px,3vw,44px);
  top:calc(var(--nav) + clamp(14px,2vh,26px));z-index:3;
  font-family:var(--ch-ui);font-weight:500;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.82);
  background:rgba(8,10,12,.64);border:0;padding:9px 13px;cursor:pointer;
  text-shadow:0 1px 3px rgba(8,10,12,.9);transition:color .3s var(--ch-ease)}
.chero-mute:hover{color:#fff}
.chero-mute:focus-visible{outline:1px solid #fff;outline-offset:3px}
.chero-mute[hidden]{display:none}
@media (max-width:760px){ .chero-mute{top:calc(var(--nav) + 10px)} }
.chero-cue[hidden]{display:none}
.chero-intro{display:none}
.js .chero:not(.apilado) .chero-intro{display:flex}
@media (prefers-reduced-motion:reduce){
  .chero-beat{transition:none}
  .chero-stage canvas{transition:none;transform:none}
}