/* ============================================================
   DR. FLAC — online-vrtl
   Tipografías (locales): Gridular (títulos) · RMNeue-SemiBold (bajadas) · RMMono (resto)
   ============================================================ */

@font-face{font-family:'Gridular';src:url('../fonts/Gridular-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'RMNeue';src:url('../fonts/RMNeue-SemiBold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'RMMono';src:url('../fonts/RMMono-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}

:root{
  --seashell:#f1f1f1;--dark:#1e1e1e;--orange:#fd5530;--charcoal:#363636;--timberwolf:#d5d1ce;--white:#ffffff;
  --display:'Gridular',system-ui,sans-serif;
  --sub:'RMNeue',system-ui,sans-serif;
  --mono:'RMMono',ui-monospace,monospace;
  --fs-large:clamp(1.8rem, 9vw, 10rem);
  --fs-med:clamp(1.55rem, 5.4vw, 4.4rem);
  --fs-reg:clamp(1.15rem, 2.7vw, 2.3rem);
  --fs-p-med:clamp(1.02rem, 1.6vw, 1.5rem);
  --fs-eyebrow:clamp(.7rem, .8vw, .8rem);
  --fs-body:clamp(.9rem, 1.02vw, 1.02rem);
  --pad:1.25rem;--ease-cut:cubic-bezier(0.16,1,0.3,1);--app-height:100vh;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;}
html.lenis{height:auto;}
html.lenis body{overflow:hidden;}
body{margin:0;background:var(--seashell);color:var(--dark);font-family:var(--sub);
  font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;overflow-x:hidden;}
body::-webkit-scrollbar{width:0;display:none;}
body{scrollbar-width:none;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--orange);color:var(--white);}
img::selection{background:none;}

/* ---------- TIPOGRAFÍA ---------- */
.h-display,.h-large{font-family:var(--display);font-weight:400;font-size:var(--fs-large);
  line-height:.94;letter-spacing:-.01em;text-transform:uppercase;margin:0;overflow-wrap:break-word;}
.h-med{font-family:var(--display);font-weight:400;font-size:var(--fs-med);
  line-height:1;letter-spacing:-.01em;margin:0;text-transform:uppercase;}
.p-med{font-family:var(--sub);font-weight:600;font-size:var(--fs-p-med);line-height:1.4;margin:0;}
.eyebrow{font-family:var(--mono);font-weight:400;font-size:var(--fs-eyebrow);line-height:1.1;
  letter-spacing:.14em;text-transform:uppercase;position:relative;margin:0;}
.eyebrow.greyed{opacity:.4;}
.text-highlight{font-family:var(--sub);font-weight:600;font-size:var(--fs-reg);line-height:1.25;margin:0;overflow-wrap:break-word;}
.is--alt{font-family:inherit;}
.is--orange{color:var(--orange);}
.is--mono{font-family:var(--mono)!important;font-weight:400!important;text-transform:none;letter-spacing:0;}

.menu-link,.footer-link,.main-btn{transition:color .3s var(--ease-cut);}
.menu-link:hover,.footer-link:hover,.main-btn:hover{color:var(--orange);}
.cta-big{transition:color .3s var(--ease-cut);}
.cta-big:hover{color:var(--white);}

/* ---------- LAYOUT ---------- */
.p-pad{padding-left:var(--pad);padding-right:var(--pad);}
.section{position:relative;z-index:1;}
.section.is--black{background:var(--dark);color:var(--seashell);}
.section.is--cta{background:var(--orange);color:var(--dark);text-align:center;
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-bottom:5rem;}
.main-g{display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.25rem;align-items:start;width:100%;}
.col-span-4{grid-column:span 4;}
.col-span-6{grid-column:span 6;}
.align-center{display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;}
.center-text{text-align:center;}
.flex-v{display:flex;flex-direction:column;}
.gap-m{gap:1.25rem;}
.v-space-small{height:clamp(3rem,8vw,8rem);}
.v-space-med{height:clamp(4.5rem,12vw,12rem);}
.v-space-large{height:clamp(6rem,16vw,16rem);}

/* ---------- CORTES CLIP-PATH ---------- */
[cut="2em"]{clip-path:polygon(0 2.2em,2.2em 0,calc(100% - 2.2em) 0,100% 2.2em,100% calc(100% - 2.2em),calc(100% - 2.2em) 100%,2.2em 100%,0 calc(100% - 2.2em));}
[cut="btn"]{clip-path:polygon(0 .9em,.9em 0,calc(100% - .9em) 0,100% .9em,100% calc(100% - .9em),calc(100% - .9em) 100%,.9em 100%,0 calc(100% - .9em));}

/* ============================================================
   IMÁGENES — máscara (clip-path 50→100→50) + parallax + naranja + grilla
   ============================================================ */
.ep-visual{position:relative;}
.boxed-img{position:relative;overflow:hidden;aspect-ratio:4/5;background:transparent;}
.img-mask{position:absolute;inset:0;overflow:hidden;background:var(--dark);clip-path:inset(0%);}
.img-mask .img-cover{position:absolute;left:0;top:0;width:100%;height:120%;object-fit:cover;
  will-change:transform;transform:translateZ(0);backface-visibility:hidden;image-rendering:auto;}
.overlay-screen{position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--orange);
  mix-blend-mode:screen;opacity:1;transition:opacity .5s var(--ease-cut);will-change:opacity;}
.boxed-img.is-raw .overlay-screen{opacity:0;}
/* la grilla va POR ENCIMA del filtro naranja, con el mismo blend (screen):
   celdas naranjas -> encienden el naranja pleno / queman hacia amarillo (como en vrtl).
   pointer-events:none -> el 'gusano' escucha el movimiento en .boxed-img (no en la grilla) */
.img-grid{position:absolute;inset:0;z-index:4;pointer-events:none;display:grid;grid-auto-rows:1fr;}
/* el blend 'screen' va en la CELDA (no en la grilla): es el elemento cuya opacidad
   anima el 'gusano'. Con el blend en un contenedor estático, Chromium no re-rasteriza
   la capa al cambiar la opacidad del hijo y el efecto queda congelado hasta conmutar
   de ventana. Al llevarlo a la celda, el cambio de opacidad invalida y repinta su
   propio raster al instante. Las celdas no se solapan, así que el look es idéntico. */
.img-cell{background:var(--orange);opacity:0;mix-blend-mode:screen;}

/* ============================================================
   ECHO DEL LOGO
   ============================================================ */
.lab-trail{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.lab-trail__img{position:absolute;top:0;left:0;width:clamp(140px,18vw,280px);height:auto;
  opacity:0;will-change:transform,opacity;filter:drop-shadow(0 20px 40px rgba(0,0,0,.4));}
.lab-inner{position:relative;z-index:2;}

/* ============================================================
   BOTONES
   ============================================================ */
.main-btn{display:inline-flex;align-items:center;gap:.9rem;font-family:var(--mono);
  font-size:var(--fs-eyebrow);text-transform:uppercase;line-height:1;cursor:pointer;}
.main-btn__text{border-bottom:1px solid currentColor;padding-bottom:.3rem;line-height:1;}
.main-btn__arrow{width:1em;height:1em;flex:none;display:flex;align-items:center;justify-content:center;
  border:1px solid currentColor;border-radius:50%;padding:.5em;transition:background .3s,color .3s;}
.main-btn:hover .main-btn__arrow{background:currentColor;color:var(--dark);}
.main-btn__arrow svg{width:100%;height:100%;}
.cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2.6rem;}
.btn{font-family:var(--mono);font-size:var(--fs-eyebrow);letter-spacing:.04em;text-transform:uppercase;
  padding:1.1em 1.8em;cursor:pointer;transition:transform .2s var(--ease-cut),background .25s,color .25s;}
/* CTA: los 3 arrancan como 'ghost' (borde) y al hover pasan a sólido oscuro */
.cta-btn{border:1px solid var(--dark);color:var(--dark);background:transparent;}
.cta-btn:hover{background:var(--dark);color:var(--seashell);}
/* al presionar: se enciende naranja 2s antes de navegar */
.cta-btn.is-active,.wip-btn.is-active{background:var(--orange)!important;color:var(--seashell)!important;border-color:var(--orange)!important;}

/* ============================================================
   LOADER
   ============================================================ */
.loader{position:fixed;inset:0;z-index:1000;background:var(--dark);color:var(--seashell);
  display:flex;flex-direction:column;justify-content:space-between;padding:var(--pad);
  overflow:hidden;clip-path:inset(0 0 0% 0);}
/* el loader no muestra la manito: el cursor es solo el círculo naranja */
.loader__top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;}
.loader__brand{font-family:var(--display);letter-spacing:.12em;text-transform:uppercase;font-size:1rem;}
.loader__brand b{color:var(--orange);}
.loader__tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--timberwolf);max-width:24ch;text-align:right;line-height:1.5;opacity:.65;}
.loader__center{position:absolute;inset:0;display:grid;place-items:center;}
.loader__imgwrap{width:min(38vw,320px);aspect-ratio:4/5;position:relative;overflow:hidden;
  border:1px solid rgba(241,241,241,.15);}
.loader__imgwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:translateZ(0);backface-visibility:hidden;image-rendering:auto;}
.loader__imgwrap img.on{opacity:1;}
.loader__imgwrap .overlay-screen{opacity:1;}
.loader__stats{position:absolute;left:0;bottom:0;z-index:5;display:flex;flex-direction:column;
  gap:.75rem;padding:1rem;opacity:0;transition:opacity .5s var(--ease-cut);color:var(--dark);pointer-events:auto;}
.loader.ready .loader__stats{opacity:1;}
.lstat{display:flex;flex-direction:column;line-height:1;transition:color .3s var(--ease-cut);}
.lstat:hover{color:var(--seashell);}
.lstat-n{font-family:var(--display);font-size:1.7rem;letter-spacing:-.01em;}
.lstat-l{display:flex;flex-direction:column;font-family:var(--mono);font-size:.52rem;
  letter-spacing:.14em;text-transform:uppercase;margin-top:.25rem;line-height:1.3;}
.loader__enter{position:absolute;left:0;right:0;bottom:19%;text-align:center;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--orange);opacity:0;pointer-events:none;transition:opacity .4s;}
.loader.ready .loader__enter{opacity:1;animation:pulse 1.5s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.35;}50%{opacity:1;}}
.loader__bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;}
.loader__count{font-family:var(--display);line-height:.8;font-size:clamp(4rem,16vw,12rem);letter-spacing:-.02em;}
.loader__count sup{font-size:.28em;vertical-align:super;color:var(--orange);}
.loader__label{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--timberwolf);text-align:right;padding-bottom:.6em;opacity:.65;}
.loader.ready .loader__label{color:var(--orange);opacity:1;}
.loader__progress{position:absolute;left:0;bottom:0;height:2px;width:0%;
  background:var(--orange);box-shadow:0 0 12px rgba(253,85,48,.7);}

/* ============================================================
   CURSOR
   ============================================================ */
.cursor-paint,.cursor-tint{position:fixed;left:0;top:0;z-index:1100;pointer-events:none;
  width:3.4rem;height:3.4rem;border-radius:50%;background:var(--orange);
  transform:translate(-50%,-50%);will-change:left,top,width,height;
  transition:width .3s var(--ease-cut),height .3s var(--ease-cut);}
.cursor-paint{mix-blend-mode:color;}
.cursor-tint{mix-blend-mode:normal;opacity:.34;}
.cursor-paint.is-hover,.cursor-tint.is-hover{width:4.8rem;height:4.8rem;}
.cursor-label{position:fixed;left:0;top:0;z-index:1099;pointer-events:none;
  transform:translate(-50%,-50%) scale(0);margin-top:2.7rem;
  background:var(--orange);color:var(--seashell);border-radius:100px;padding:.5rem 1rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  transition:transform .3s var(--ease-cut);will-change:left,top;}
.cursor-label.show{transform:translate(-50%,-50%) scale(1);}
@media (hover:hover) and (pointer:fine){ html,body,a,button,.menu-btn,.loader,.fs-toggle,.fs-opt,.lstat{cursor:none;} }
@media (hover:none){.cursor-paint,.cursor-tint,.cursor-label{display:none;}}

/* ============================================================
   NAVBAR — color según fondo · bajado para no chocar con salir-de-fullscreen
   ============================================================ */
.nav-w{position:fixed;top:0;left:0;width:100%;z-index:800;color:#fff;}
.nav-w.on-light{color:var(--dark);}
.nav-w.on-dark{color:var(--seashell);}
.nav-w.on-orange{color:var(--seashell);}
body.menu-open #navW{color:var(--seashell);}   /* menú abierto (fondo oscuro) -> nav claro */
.navbar-c{display:flex;justify-content:space-between;align-items:center;padding-top:2.7rem;padding-bottom:1.4rem;}
.fs-toggle{display:flex;align-items:center;cursor:pointer;pointer-events:auto;
  font-family:var(--mono);font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:.1em;color:inherit;}
.fs-label{margin-right:2ch;}   /* dos caracteres más de separación */
.fs-opts{display:flex;gap:.5rem;}
.fs-opt{opacity:.4;transition:opacity .25s,color .25s;pointer-events:auto;}
.fs-opt.active{opacity:1;color:var(--orange);}
.menu-btn{display:flex;align-items:center;gap:.6rem;cursor:pointer;pointer-events:auto;color:inherit;}
.menu-btn__label{font-family:var(--mono);font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:.14em;}
.menu-btn__lines{display:flex;flex-direction:column;gap:5px;width:24px;}
.menu-btn__line{height:2px;width:100%;flex:none;background:currentColor;
  transition:transform .4s var(--ease-cut),opacity .3s;}
.menu-open .menu-btn__line.is--1{transform:translateY(7px) rotate(45deg);}
.menu-open .menu-btn__line.is--2{opacity:0;}
.menu-open .menu-btn__line.is--3{transform:translateY(-7px) rotate(-45deg);}

/* menú overlay */
.menu-w{position:fixed;inset:0;z-index:790;background:var(--dark);color:var(--seashell);display:none;}
.menu-inner{height:100%;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:2rem;padding:6rem var(--pad) 3rem;}
.menu-col.is--left{display:flex;flex-direction:column;justify-content:center;gap:2rem;}
.menu-item{padding:.85rem 0;border-top:1px solid rgba(241,241,241,.2);}
.menu-item__nr{opacity:.5;margin-bottom:.35rem;}
.menu-link{font-family:var(--mono);font-size:var(--fs-reg);text-transform:uppercase;cursor:pointer;}
.menu-overlay__w{position:fixed;inset:0;z-index:795;display:none;grid-template-columns:repeat(12,1fr);grid-auto-rows:1fr;pointer-events:none;}
.menu-overlay__item{background:var(--dark);}

/* ============================================================
   PROGRESO DE SCROLL
   ============================================================ */
.reactor{position:fixed;top:0;left:0;height:3px;width:100%;z-index:850;background:transparent;pointer-events:none;}
.reactor span{display:block;height:100%;width:0;background:var(--orange);}

/* ============================================================
   SECCIONES
   ============================================================ */
.hero{min-height:100svh;overflow:hidden;}
.hero-w{min-height:100svh;display:flex;flex-direction:column;justify-content:center;}
.hero-eyebrow{color:var(--orange);margin-bottom:2rem;}
.hero-h .h-display{display:block;}
.scrollcue{position:absolute;bottom:2.4rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.6rem;color:var(--charcoal);z-index:3;}
.scrollcue-bar{width:1px;height:34px;background:linear-gradient(var(--orange),transparent);
  animation:cue 1.8s var(--ease-cut) infinite;}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top;}45%{transform:scaleY(1);transform-origin:top;}
  55%{transform:scaleY(1);transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

.strip-intro{max-width:44ch;margin:0 auto;}
.strip-intro .text-highlight{font-size:clamp(1.15rem,1.9vw,1.7rem);line-height:1.5;}

.ep{padding:clamp(3rem,7vw,7rem) 0;}
.ep-grid{align-items:center;row-gap:2.5rem;}
.ep-grid.reverse .ep-visual{order:2;}
.ep-grid.reverse .ep-copy{order:1;}
.ep-copy{display:flex;flex-direction:column;}
.ep-head{display:flex;flex-direction:column;gap:.4rem;align-items:flex-start;}
.ep-nr{color:var(--orange);}
.ep-label{opacity:.55;}
.ep-copy .h-large{margin:1.4rem 0 0;}
.ep-punch{margin-top:1.6rem;font-size:var(--fs-reg);line-height:1.25;max-width:20ch;}
.ep-support{margin-top:1.4rem;font-size:clamp(.98rem,1.25vw,1.2rem);line-height:1.55;max-width:44ch;opacity:.9;}

.reveal-grid{align-items:center;row-gap:3rem;}
.reveal-recap{max-width:38ch;}
.reveal-name{margin:2rem 0 0;}
.reveal-stats{display:flex;gap:2.4rem;flex-wrap:wrap;margin-top:2.4rem;}
.stat-n{font-family:var(--display);font-size:clamp(2rem,4vw,3.4rem);line-height:1;}
.stat-l{opacity:.55;margin-top:.6rem;}
.reveal-closer{margin-top:2.4rem;font-size:clamp(.82rem,1vw,1rem);line-height:1.7;max-width:none;color:var(--charcoal);opacity:.85;}

.cta-big{display:inline-block;text-decoration:none;margin:0 auto;max-width:14ch;}
.cta-desc{max-width:50ch;margin:2.4rem auto 0;color:var(--white);
  font-size:clamp(1rem,1.4vw,1.4rem);line-height:1.4;}
.cta-legal{max-width:none;margin:2.6rem auto 0;color:var(--dark);opacity:.7;
  font-size:clamp(.6rem,.75vw,.78rem)!important;line-height:1.6;}

.footer-brand{display:flex;flex-direction:column;}
.footer-brand .h-large{line-height:.9;}
.footer-cols{row-gap:2rem;}
.footer-col{display:flex;flex-direction:column;gap:.6rem;}
.footer-link{font-family:var(--mono);font-size:var(--fs-eyebrow);text-transform:uppercase;cursor:pointer;width:fit-content;}
.footer-link.is--underline{text-decoration:underline;}
.footer-loc{font-family:var(--mono);font-size:var(--fs-eyebrow);text-transform:uppercase;
  color:var(--seashell);cursor:default;width:fit-content;}
.footer-btm{display:flex;gap:2rem;flex-wrap:wrap;justify-content:space-between;
  border-top:1px solid rgba(241,241,241,.2);padding-top:1.2rem;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width:991px){
  :root{--pad:1.1rem;}
  .main-g{grid-template-columns:repeat(6,1fr);}
  .col-span-4,.col-span-6{grid-column:span 6;}
  .menu-inner{grid-template-columns:1fr;align-content:center;gap:3rem;}
  .footer-col{grid-column:span 3;}
}
@media screen and (max-width:767px){
  .ep-grid,.reveal-grid{grid-template-columns:1fr;}
  .ep-grid .ep-visual,.ep-grid .ep-copy,
  .reveal-grid .reveal-visual,.reveal-grid .reveal-copy{grid-column:1/-1;order:0!important;}
  .boxed-img{aspect-ratio:3/4;max-width:520px;margin-inline:auto;width:100%;}
  .ep-punch,.ep-support,.reveal-recap{max-width:none;}
  .footer-cols{grid-template-columns:1fr;}
  .footer-btm{flex-direction:column;gap:.6rem;}
  .hero-w{padding-top:20vh;padding-bottom:14vh;justify-content:flex-start;}
  .scrollcue{bottom:4vh;}
  .navbar-c{padding-top:2rem;justify-content:flex-end;}
  .fs-toggle{display:none;}      /* sin full screen en mobile */
  .loader__imgwrap{width:min(82vw,420px);}   /* ventana más grande (textos y márgenes iguales) */
  .loader__enter{display:none;}  /* mobile no espera click */
}
/* sin full screen ni 'click para entrar' en dispositivos táctiles */
@media (hover:none){ .fs-toggle{display:none;} .loader__enter{display:none;} }
@media screen and (max-width:479px){
  :root{--pad:1rem;}
  .reveal-stats{gap:1.6rem;}
  .loader__tag,.loader__label{display:none;}
  .lstat-n{font-size:1.4rem;}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;}
  .cursor-paint,.cursor-tint,.cursor-label{display:none;}
  .overlay-screen{opacity:0;}
  .scrollcue-bar{animation:none;}
  .img-mask{clip-path:inset(0%)!important;}
  .img-mask .img-cover{transform:none!important;}
}