/* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
   IVANOV — Sistema visual web · basado en manual de marca
   ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */

/* — Fonts — */
@font-face{font-family:"Geist";src:url("../assets/fonts/Geist-Light.ttf") format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Geist";src:url("../assets/fonts/Geist-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Geist";src:url("../assets/fonts/Geist-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Geist";src:url("../assets/fonts/Geist-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../assets/fonts/GeistMono-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../assets/fonts/GeistMono-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Geist Pixel";src:url("../assets/fonts/GeistPixel-Square.ttf") format("truetype");font-weight:400;font-display:swap}

/* — Tokens (manual) — */
:root{
  --black:#000000; --g900:#0a0a0a; --g800:#141414; --g700:#1d1d1d;
  --g600:#333333; --g500:#666666; --g400:#999999; --g300:#cccccc;
  --warm:#948e87; --warm2:#bdb8b4; --warm3:#e8e6e5;
  --petrol:#33809d; --petrol2:#6796b0; --petrol3:#93aec3;
  --white:#ebebe9;
  --x:8px;                 /* módulo base X = grosor del marco */
  --pad:clamp(20px,4vw,64px);
  --maxw:1680px;
  --ease:cubic-bezier(.6,.01,.05,1);
  font-size:clamp(15px,1.05vw,18px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{
  background:var(--black); color:var(--white);
  font-family:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400;
  line-height:1.5; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.is-loading{height:100vh;overflow:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.mono{font-family:"Geist Mono",monospace}
section{position:relative}

/* — utility type — */
.eyebrow{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--petrol2);font-weight:500}
.accent{color:var(--petrol2)}

/* — buttons — */
.btn{display:inline-flex;align-items:center;gap:.7em;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;color:var(--white);
  border:1px solid var(--petrol);padding:1.05em 1.6em;border-radius:0;
  transition:background .5s var(--ease),color .5s var(--ease)}
.btn span{color:var(--petrol2);transition:transform .4s var(--ease)}
.btn:hover{background:var(--petrol);color:#fff}
.btn:hover span{color:#fff;transform:translateX(4px)}
.btn--lg{font-size:1rem;padding:1.25em 2em}

/* ░░ PRELOADER ░░ */
.preloader{position:fixed;inset:0;z-index:200;background:var(--black);
  display:grid;place-items:center;transition:opacity .8s var(--ease),visibility .8s}
.preloader.done{opacity:0;visibility:hidden;pointer-events:none}
.preloader.gone{display:none}
.preloader__inner{display:flex;flex-direction:column;align-items:center;gap:calc(var(--x)*3)}
.preloader__mark{width:64px;opacity:.95;animation:pulse 1.6s var(--ease) infinite}
.preloader__anim{width:min(62vmin,520px);height:auto;background:#000}
.preloader__meta{display:flex;align-items:center;gap:calc(var(--x)*2);
  font-family:"Geist Mono",monospace;font-size:.8rem;letter-spacing:.18em;color:var(--g400)}
.preloader__count{color:var(--white)}
.preloader__meta,.preloader .rec{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
.rec{display:inline-flex;align-items:center;gap:.55em;font-family:"Geist Mono",monospace;
  letter-spacing:.18em;color:var(--white)}
.rec i{width:8px;height:8px;border-radius:50%;background:var(--petrol);animation:blink 1.4s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.15}}

/* ░░ HUD ░░ */
.hud{position:fixed;inset:0;z-index:90;pointer-events:none;mix-blend-mode:difference}
.hud__corner{position:fixed;width:22px;height:22px;border:1.5px solid rgba(255,255,255,.55)}
.hud__corner--tl{top:18px;left:18px;border-right:0;border-bottom:0}
.hud__corner--tr{top:18px;right:18px;border-left:0;border-bottom:0}
.hud__corner--bl{bottom:18px;left:18px;border-right:0;border-top:0}
.hud__corner--br{bottom:18px;right:18px;border-left:0;border-top:0}
.hud__tc,.hud__tele{position:fixed;font-family:"Geist Mono",monospace;
  font-size:.7rem;letter-spacing:.12em;color:rgba(255,255,255,.85)}
.hud__tc{left:46px;bottom:40px;display:flex;gap:1em;align-items:center}
.hud__tc .rec{color:rgba(255,255,255,.85)}
.hud__tele{right:46px;bottom:40px;display:flex;gap:1.2em}
@media(max-width:720px){.hud__tele{display:none}.hud__tc{left:24px;bottom:24px}}

/* ░░ NAV ░░ */
.nav{position:fixed;top:0;left:0;width:100%;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);transition:background .5s var(--ease),backdrop-filter .5s,padding .5s var(--ease)}
.nav.solid{background:rgba(8,8,8,.72);backdrop-filter:blur(14px);padding:12px var(--pad);
  border-bottom:1px solid rgba(255,255,255,.06)}
.nav__brand img{width:38px}
.nav__links{display:flex;gap:2.4em}
.nav__links a{font-size:.82rem;letter-spacing:.1em;color:var(--g300);position:relative;padding:.3em 0}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--petrol2);transition:width .4s var(--ease)}
.nav__links a:hover{color:var(--white)}
.nav__links a:hover::after{width:100%}
.nav__cta{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--white);border:1px solid rgba(255,255,255,.2);padding:.7em 1.1em;transition:border-color .4s,background .4s}
.nav__cta span{color:var(--petrol2)}
.nav__cta:hover{border-color:var(--petrol);background:var(--petrol)}
.nav__burger{display:none;background:none;border:0;flex-direction:column;gap:6px;cursor:pointer}
.nav__burger i{width:26px;height:1.5px;background:var(--white);transition:.4s var(--ease)}
@media(max-width:860px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
}

/* ░░ MOBILE MENU ░░ */
.menu{position:fixed;inset:0;z-index:99;background:var(--g900);
  display:flex;flex-direction:column;justify-content:center;gap:.2em;padding:0 var(--pad);
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease)}
.menu.open{clip-path:inset(0 0 0 0)}
.menu a{font-size:clamp(2.4rem,11vw,4.5rem);font-weight:500;line-height:1.05;letter-spacing:-.02em}
.menu a::before{content:attr(data-i);font-family:"Geist Mono",monospace;font-size:.8rem;
  color:var(--petrol2);vertical-align:super;margin-right:.6em;letter-spacing:.1em}
.burger-open .nav__burger i:first-child{transform:translateY(3.7px) rotate(45deg)}
.burger-open .nav__burger i:last-child{transform:translateY(-3.7px) rotate(-45deg)}

/* ░░ HERO ░░ */
.hero{height:100svh;min-height:640px;overflow:hidden;display:flex;align-items:flex-end}
.hero__media{position:absolute;inset:-8% 0;z-index:-1;will-change:transform}
.hero__slides{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.78) contrast(1.05) brightness(.92);
  opacity:0;transform:scale(1.06);
  transition:opacity 1.6s var(--ease),transform 7s linear}
.hero__slide.is-active{opacity:1;transform:scale(1)}
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,.15) 55%,rgba(0,0,0,.85) 100%)}
.hero__frame{position:absolute;top:15vh;right:5vw;bottom:18vh;width:min(34vw,420px);
  border:1.5px solid rgba(255,255,255,.45);pointer-events:none;z-index:0;
  display:grid;place-items:center;overflow:hidden;transition:opacity .8s var(--ease)}
.hero.frame-hidden .hero__frame{opacity:0}
.hero__frame b{font-weight:500;font-size:clamp(3rem,8vw,7rem);letter-spacing:.05em;
  color:rgba(255,255,255,.82);white-space:nowrap;transform:rotate(-90deg);line-height:1}
@media(max-width:860px){.hero__frame{display:none}}
.hero__content{padding:0 var(--pad) clamp(48px,9vh,110px);width:100%;position:relative;z-index:1}
.hero__title{font-weight:500;letter-spacing:-.03em;line-height:.96;text-transform:uppercase;
  font-size:clamp(2.6rem,8.2vw,7rem);margin:.35em 0 .7em}
.hero__title .hl{color:var(--petrol);font-style:normal}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line>span{display:block;transform:translateY(110%);transition:transform 1.1s var(--ease)}
.hero.reveal-on .hero__title .line>span{transform:translateY(0)}
.hero__title .line:nth-child(1)>span{transition-delay:.15s}
.hero__title .line:nth-child(2)>span{transition-delay:.24s}
.hero__title .line:nth-child(3)>span{transition-delay:.33s}
.hero__title .line:nth-child(4)>span{transition-delay:.42s}
.hero__foot{display:flex;align-items:center;gap:2.5em}
.hero__cue{display:flex;align-items:center;gap:.7em;font-family:"Geist Mono",monospace;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--g400)}
.hero__cue i{width:1px;height:34px;background:linear-gradient(var(--petrol2),transparent);
  animation:cue 2s var(--ease) 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}}

/* ░░ MANIFESTO ░░ */
.manifesto{padding:clamp(90px,16vh,200px) var(--pad);max-width:var(--maxw);margin:0 auto}
.manifesto__idx{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:.74rem;letter-spacing:.2em;
  color:var(--petrol2);text-transform:uppercase;margin-bottom:2.2em}
.manifesto__text{font-weight:400;font-size:clamp(1.6rem,4.4vw,3.5rem);line-height:1.25;letter-spacing:-.02em;max-width:18ch+40ch}
.manifesto__text .w{display:inline-block;opacity:.16;transition:opacity .5s var(--ease)}
.manifesto__text .w.lit{opacity:1}
.manifesto__text .w.accent.lit{color:var(--petrol2)}

/* ░░ METRICS ░░ */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.08);
  border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.metric{background:var(--black);padding:clamp(36px,6vw,72px) var(--pad);display:flex;flex-direction:column;gap:.5em}
.metric__num{font-family:"Geist Pixel","Geist",sans-serif;font-size:clamp(2.6rem,6vw,5rem);font-weight:500;letter-spacing:-.04em;line-height:1}
.metric__lbl{font-family:"Geist Mono",monospace;font-size:.72rem;letter-spacing:.1em;color:var(--g400);text-transform:uppercase}
@media(max-width:860px){.metrics{grid-template-columns:repeat(2,1fr)}}

/* ░░ SECTION HEAD ░░ */
.sec-head{padding:clamp(80px,12vh,140px) var(--pad) clamp(30px,5vh,56px);max-width:var(--maxw);margin:0 auto}
.sec-head__idx{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:.74rem;letter-spacing:.2em;color:var(--petrol2);text-transform:uppercase}
.sec-head__title{font-size:clamp(2.2rem,6vw,4.6rem);font-weight:500;letter-spacing:-.03em;text-transform:uppercase;margin:.35em 0 .25em}
.sec-head__note{color:var(--g400);max-width:46ch}

/* ░░ WORK GRID ░░ */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--pad);
  padding:0 var(--pad) clamp(40px,8vh,90px);max-width:var(--maxw);margin:0 auto}
.card{position:relative;cursor:pointer}
.card__media{position:relative;aspect-ratio:9/13;overflow:hidden;background:var(--g800)}
.card__media img,.card__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.8) contrast(1.04)}
.card__media video{opacity:0;transition:opacity .6s var(--ease)}
.card.playing video{opacity:1}
.card__media img{transition:transform 1.1s var(--ease),filter .6s}
.card:hover .card__media img{transform:scale(1.05)}
.card__mask{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.55));
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:clip-path .7s var(--ease)}
.card:hover .card__mask{clip-path:polygon(0 0,100% 0,100% 78%,0 100%)}
.card__media::after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,0);
  transition:border-color .5s var(--ease)}
.card:hover .card__media::after{border-color:rgba(255,255,255,.25)}
.card__meta{display:flex;align-items:baseline;gap:1em;padding:1.1em 0 0}
.card__no{font-family:"Geist Mono",monospace;font-size:.74rem;color:var(--petrol2);letter-spacing:.1em}
.card__meta h3{font-size:1.25rem;font-weight:500;text-transform:uppercase;letter-spacing:-.01em}
.card__meta p{font-family:"Geist Mono",monospace;font-size:.74rem;color:var(--g400);margin-left:auto;letter-spacing:.04em}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid{grid-template-columns:1fr}.card__media{aspect-ratio:9/12}}

/* ░░ DUAL (operador+mediador) ░░ */
.dual{display:grid;grid-template-columns:1.1fr .9fr;gap:0;align-items:stretch;
  border-top:1px solid rgba(255,255,255,.08);margin-top:clamp(40px,8vh,90px)}
.dual__media{position:relative;min-height:70vh;overflow:hidden}
.dual__slides{position:absolute;inset:0}
.dual__slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.78) brightness(.84);opacity:0;transform:scale(1.05);
  transition:opacity 1.4s var(--ease),transform 7s linear}
.dual__slide.is-active{opacity:1;transform:scale(1)}
.dual__panel{background:var(--g900);padding:clamp(48px,7vw,96px) var(--pad);display:flex;flex-direction:column;justify-content:center}
.dual__title{font-size:clamp(1.8rem,3.6vw,3rem);font-weight:500;letter-spacing:-.02em;line-height:1.05;margin:.6em 0 .7em}
.dual__lead{color:var(--g400);max-width:42ch;margin-bottom:2.4em}
.readout{list-style:none;border-top:1px solid rgba(255,255,255,.1)}
.readout li{display:flex;justify-content:space-between;align-items:baseline;
  padding:.85em 0;border-bottom:1px solid rgba(255,255,255,.07)}
.readout span{font-family:"Geist Mono",monospace;font-size:.74rem;letter-spacing:.08em;color:var(--g400);text-transform:uppercase}
.readout b{font-family:"Geist Mono",monospace;font-weight:500;font-size:1rem}
@media(max-width:860px){.dual{grid-template-columns:1fr}.dual__media{min-height:60vh}}

/* ░░ TRUST — superficie clara (versión secundaria) ░░ */
.trust{padding:clamp(56px,9vh,104px) 0;background:#f3f3f1;color:#141414}
.trust__lbl{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:.74rem;letter-spacing:.2em;color:var(--petrol);
  text-transform:uppercase;padding:0 var(--pad);margin-bottom:2.6em}
.marquee{overflow:hidden;white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__row{display:inline-flex;align-items:center;gap:clamp(46px,7vw,104px);will-change:transform}
.trust__item{display:flex;align-items:center;justify-content:center;height:clamp(40px,6vw,68px);flex:0 0 auto}
.trust__item--tall{height:clamp(82px,12vw,116px)}
.trust__item img{display:none;height:100%;width:auto;max-width:240px;object-fit:contain}
.trust__item.has-logo img{display:block}
.trust__item.has-logo span{display:none}
.trust__item span{font-size:clamp(1.2rem,2.3vw,1.9rem);font-weight:600;letter-spacing:-.015em;
  color:#1c1c1c;white-space:nowrap}

/* ░░ METHOD ░░ */
.method{border-top:1px solid rgba(255,255,255,.08)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--pad);
  padding:0 var(--pad) clamp(80px,12vh,140px);max-width:var(--maxw);margin:0 auto}
.step{border-top:1px solid rgba(255,255,255,.14);padding-top:1.6em}
.step__no{font-family:"Geist Mono",monospace;font-size:.8rem;color:var(--petrol2);letter-spacing:.1em}
.step h3{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:500;text-transform:uppercase;margin:1.4em 0 .5em;letter-spacing:-.02em}
.step p{color:var(--g400)}
@media(max-width:860px){.steps{grid-template-columns:1fr;gap:2.6em}}

/* ░░ CTA ░░ */
.cta{text-align:center;padding:clamp(110px,20vh,240px) var(--pad);
  border-top:1px solid rgba(255,255,255,.08);
  background:radial-gradient(120% 80% at 50% 120%,rgba(51,128,157,.16),transparent 60%)}
.cta__anim{display:block;width:min(300px,62vw);height:auto;margin:0 auto clamp(10px,2vh,28px);mix-blend-mode:screen}
.cta__title{font-size:clamp(2.4rem,7vw,6rem);font-weight:500;letter-spacing:-.03em;
  text-transform:uppercase;line-height:.98;margin:.4em 0 1em}

/* ░░ FOOTER ░░ */
.footer{padding:clamp(50px,8vh,90px) var(--pad) 32px;border-top:1px solid rgba(255,255,255,.1)}
.footer__brand{text-align:center}
.footer__brand img{display:block;width:min(520px,80%);opacity:.92;margin:0 auto clamp(40px,7vh,80px)}
.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2em;
  padding-bottom:clamp(40px,6vh,70px);border-bottom:1px solid rgba(255,255,255,.08)}
.footer__h{font-family:"Geist Mono",monospace;font-size:.7rem;letter-spacing:.16em;color:var(--g500);
  text-transform:uppercase;margin-bottom:1.4em}
.footer__cols a{display:block;color:var(--g300);padding:.35em 0;transition:color .3s}
.footer__cols a:hover{color:var(--petrol2)}
.footer__loc{display:block;color:var(--g500);padding-top:.6em;font-family:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:.78rem}
.footer__bottom{display:flex;justify-content:space-between;padding-top:28px;
  font-family:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:.72rem;letter-spacing:.08em;color:var(--g500)}
.footer__bottom .mono{font-family:inherit}
@media(max-width:720px){.footer__cols{grid-template-columns:1fr 1fr}.footer__bottom{flex-direction:column;gap:.6em}}

/* ░░ REVEAL STATES ░░ */
.reveal,.reveal-up{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in,.reveal-up.in{opacity:1;transform:none}
.reveal-mask img{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease)}
.reveal-mask.in img{clip-path:inset(0 0 0 0)}

/* ░░ números en Geist Pixel Square ░░ */
.card__no,#timecode,.menu a::before{
  font-family:"Geist Pixel","Geist Mono",monospace}
.card__no{font-size:.82rem}
#timecode{letter-spacing:.04em}

/* ░░ reduced motion ░░ */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .hero__title .line>span{transform:none}
  .reveal,.reveal-up{opacity:1;transform:none}
  .reveal-mask img{clip-path:none}
  .manifesto__text .w{opacity:1}
}