/* ============================================================
   TU IDEA DIGITAL — tid. AGENCY
   Dirección de arte: monocromo + un solo acento. Editorial, duro, sin adornos.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  --bg:        #08080A;
  --bg-2:      #0C0C0E;
  --panel:     #101012;
  --panel-2:   #141416;

  --line:      rgba(237,237,234,.14);
  --line-soft: rgba(237,237,234,.07);

  --white:     #EDEDEA;
  --muted:     rgba(237,237,234,.52);
  --muted-2:   rgba(237,237,234,.30);

  /* Un único acento: el punto del logo. Usado con cuentagotas. */
  --accent:    #FC6262;

  --display: 'Archivo', system-ui, sans-serif;
  --serif:   'Instrument Serif', Georgia, serif;
  --mono:    'Space Grotesk', ui-monospace, monospace;
  --sans:    'Inter', system-ui, -apple-system, sans-serif;

  --pad:   clamp(20px, 4.2vw, 82px);
  --maxw:  1520px;
  --r:     2px;
  --ease:  cubic-bezier(.22,1,.36,1);

  --header-h: 78px;
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  background:var(--bg);
  color:var(--white);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,textarea{ font:inherit; color:inherit; background:none; border:none; }
button{ cursor:pointer; }
ul{ list-style:none; }
::selection{ background:var(--accent); color:#08080A; }
:focus-visible{ outline:1.5px solid var(--accent); outline-offset:3px; }

/* ---------- TEXTURA ---------- */
.grain{
  position:fixed; inset:-150%; z-index:9000; pointer-events:none;
  opacity:.038; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 6s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}   20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)} 60%{transform:translate(-3%,-3%)}
  80%{transform:translate(4%,2%)} 100%{transform:translate(0,0)}
}
.vignette{ display:none; }

/* ---------- CURSOR ---------- */
.cursor,.cursor-ring{ display:none; }
@media (hover:hover) and (pointer:fine){
  .cursor{
    display:grid; place-items:center;
    position:fixed; top:0; left:0; z-index:9500;
    width:8px; height:8px; border-radius:0;
    background:var(--white); pointer-events:none;
    mix-blend-mode:difference; will-change:transform;
    translate:-50% -50%;
  }
  .cursor__label{
    font-family:var(--mono); font-size:10px; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase; color:#08080A;
    opacity:0; white-space:nowrap; transform:scale(.6);
  }
  .cursor.is-label{ border-radius:var(--r); }
  .cursor.is-label .cursor__label{ opacity:1; transform:scale(1); transition:.22s var(--ease); }
  .cursor-ring{
    display:block; position:fixed; top:0; left:0; z-index:9499;
    width:30px; height:30px; border-radius:99px;
    border:1px solid rgba(237,237,234,.3);
    pointer-events:none; translate:-50% -50%; will-change:transform;
  }
}

/* ---------- PRELOADER ---------- */
.loader{ position:fixed; inset:0; z-index:9800; }
.loader__bg{ position:absolute; inset:0; background:var(--bg); }
.loader__inner{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:30px;
}
.loader__logo{
  position:relative; display:flex; align-items:flex-end; gap:2px;
  font-family:var(--display); font-weight:800;
  font-size:clamp(52px,9vw,104px); line-height:.8; letter-spacing:-.055em;
}
.loader__word{ overflow:hidden; display:inline-block; }
.loader__dot{
  width:.19em; height:.19em; border-radius:50%;
  background:var(--accent); transform:scale(0); margin-bottom:.05em;
}
.loader__agency{
  font-family:var(--mono); font-weight:400; letter-spacing:.26em;
  font-size:clamp(11px,1.4vw,16px); margin-bottom:.9em; margin-left:.4em;
  opacity:0; color:var(--muted-2);
}
.loader__bar{ width:min(220px,46vw); height:1px; background:rgba(237,237,234,.14); overflow:hidden; }
.loader__bar i{
  display:block; height:100%; width:100%; background:var(--white);
  transform:scaleX(0); transform-origin:0 50%; will-change:transform;
}
.loader__meta{
  display:flex; justify-content:space-between; width:min(220px,46vw);
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted-2);
}
.loader__curtain{ position:absolute; inset:0; display:flex; pointer-events:none; }
.loader__curtain span{ flex:1; background:var(--bg); transform-origin:top; }

/* ---------- PROGRESO ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:1px; z-index:8000;
  background:rgba(237,237,234,.08);
}
.scroll-progress i{
  display:block; height:100%; width:100%; background:var(--white);
  transform:scaleX(0); transform-origin:0 50%; will-change:transform;
}

/* ============================================================
   HEADER
============================================================ */
.header{
  position:fixed; top:0; left:0; right:0; z-index:8500;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad);
  transition:transform .5s var(--ease), background .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  background:rgba(8,8,10,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line-soft);
}
.header.is-hidden{ transform:translateY(-102%); }

/* ---------- MARCA ----------
   assets/logo-tid.png es el lockup completo: tid + punto coral + AGENCY */
.brand{ display:block; line-height:0; }
.brand__img{
  height:26px; width:auto;
  transition:transform .5s var(--ease), opacity .4s var(--ease);
}
.brand:hover .brand__img{ transform:scale(1.045); }
.brand--lg .brand__img{ height:clamp(46px,6vw,78px); }

.nav{ display:flex; gap:2px; }
.nav__link{
  position:relative; display:block; overflow:hidden; height:1.3em;
  padding:9px 13px; box-sizing:content-box;
  /* el overflow recorta en la caja de padding: recortamos a la de contenido */
  clip-path:inset(9px 0 9px 0);
  font-family:var(--mono); font-size:12.5px; font-weight:500;
  letter-spacing:.02em; line-height:1.3;
}
.nav__link span{ display:block; transition:transform .42s var(--ease); }
.nav__link span:last-child{ color:var(--accent); }
.nav__link:hover span{ transform:translateY(-100%); }

.header__right{ display:flex; align-items:center; gap:10px; }

/* ---------- BOTONES ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:14px 26px; border-radius:var(--r); overflow:hidden; isolation:isolate;
  font-family:var(--mono); font-size:12.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  border:1px solid var(--line);
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.btn__label{ position:relative; z-index:2; }
.btn__fill{
  position:absolute; inset:0; z-index:1;
  background:var(--white); transform:translateY(101%);
  transition:transform .5s var(--ease);
}
.btn:hover .btn__fill{ transform:translateY(0); }
.btn:hover{ color:#08080A; border-color:var(--white); }
.btn--solid{ background:var(--white); color:#08080A; border-color:var(--white); }
.btn--solid .btn__fill{ background:var(--accent); }
.btn--solid:hover{ border-color:var(--accent); color:#08080A; }
.btn--pill{ padding:12px 20px; font-size:11.5px; }
.btn--ghost{ background:transparent; }
.btn--full{ width:100%; padding:18px 26px; }

/* ---------- BURGER ---------- */
.burger{
  display:flex; align-items:center; gap:11px;
  padding:12px 16px; border-radius:var(--r);
  border:1px solid var(--line);
  transition:border-color .3s var(--ease);
}
.burger:hover{ border-color:rgba(237,237,234,.32); }
.burger__label{
  position:relative; display:block; overflow:hidden; height:1.2em;
  font-family:var(--mono); font-size:11.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
}
.burger__label span{ display:block; transition:transform .42s var(--ease); }
.burger__lines{ display:flex; flex-direction:column; gap:4px; width:15px; }
.burger__lines i{
  display:block; height:1px; width:15px; background:var(--white);
  transition:transform .42s var(--ease);
}
.burger__lines i:last-child{ transform:scaleX(.6); transform-origin:100% 50%; }
.burger:hover .burger__lines i:last-child{ transform:scaleX(1); }
body.menu-open .burger__label span{ transform:translateY(-100%); }
body.menu-open .burger__lines i:first-child{ transform:translateY(2.5px) rotate(45deg); }
body.menu-open .burger__lines i:last-child{
  transform-origin:50% 50%;
  transform:translateY(-2.5px) rotate(-45deg);
}

/* ============================================================
   MENÚ DESPLEGABLE
============================================================ */
.menu{ position:fixed; inset:0; z-index:8400; pointer-events:none; visibility:hidden; }
.menu.is-open{ pointer-events:auto; }
.menu__scrim{
  position:absolute; inset:0; z-index:1; background:rgba(4,4,5,.7);
  opacity:0; transition:opacity .55s var(--ease);
}
.menu.is-open .menu__scrim{ opacity:1; }

.menu__panel{
  position:relative; z-index:2;
  background:var(--bg-2);
  border-bottom:1px solid var(--line);
  padding:calc(var(--header-h) + 40px) var(--pad) 22px;
  overflow:hidden;
}
.menu__cols{
  position:relative; display:grid; gap:clamp(24px,4vw,64px);
  grid-template-columns:minmax(0,1.3fr) minmax(0,.62fr) minmax(0,.82fr);
  max-width:var(--maxw); margin:0 auto;
}

.mlink{
  position:relative; display:flex; align-items:baseline; gap:20px;
  padding:9px 0; border-top:1px solid var(--line-soft);
}
.mlink em,.mlink__t{ transition:transform .45s var(--ease), color .35s var(--ease); }
.mlink:last-child{ border-bottom:1px solid var(--line-soft); }
.mlink em{
  font-family:var(--mono); font-style:normal; font-size:10px;
  letter-spacing:.16em; color:var(--muted-2); transition:color .35s var(--ease);
}
.mlink__t{
  position:relative; display:block; overflow:hidden; height:1.02em;
  font-family:var(--display); font-weight:800;
  font-size:clamp(28px,3.9vw,56px); line-height:1.02; letter-spacing:-.045em;
}
.mlink__t span{ display:block; transition:transform .48s var(--ease); }
.mlink__t span:last-child{ color:var(--accent); }
.mlink__arrow{
  margin-left:auto; font-style:normal; font-size:15px; color:var(--muted-2);
  opacity:0; transform:translateX(-10px); transition:.4s var(--ease);
}
.mlink:hover em,
.mlink:hover .mlink__t{ transform:translateX(14px); }
.mlink:hover em{ color:var(--accent); }
.mlink:hover .mlink__t span{ transform:translateY(-100%); }
.mlink:hover .mlink__arrow{ opacity:1; transform:none; color:var(--accent); }

.menu__label{
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:16px;
  padding-bottom:10px; border-bottom:1px solid var(--line-soft);
}
.menu__mid .menu__label:nth-of-type(2){ margin-top:32px; }
.menu__sub li a{
  display:block; padding:6px 0; font-size:14px; color:var(--muted);
  transition:color .3s var(--ease), transform .3s var(--ease);
}
.menu__sub li a:hover{ color:var(--white); transform:translateX(6px); }

.menu__aside{ display:flex; flex-direction:column; }
.menu__preview{
  position:relative; height:170px; margin-bottom:30px;
  border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden;
}
.mprev{
  position:absolute; inset:0; padding:22px; display:flex;
  flex-direction:column; justify-content:space-between;
  opacity:0; transform:translateY(10px); transition:.45s var(--ease);
  pointer-events:none;
}
.mprev.is-active{ opacity:1; transform:none; }
.mprev__k{
  display:flex; align-items:flex-end; font-family:var(--display); font-weight:800;
  font-size:42px; letter-spacing:-.055em; line-height:1;
}
.mprev__k i{
  width:.15em; height:.15em; border-radius:50%; background:var(--accent);
  margin-left:.08em; margin-bottom:.06em;
}
.mprev p{ font-size:13.5px; color:var(--muted); line-height:1.42; }

.menu__mail{
  font-family:var(--mono); font-size:clamp(14px,1.25vw,17px);
  font-weight:500; border-bottom:1px solid var(--line); padding-bottom:8px;
  transition:border-color .35s var(--ease), color .35s var(--ease);
}
.menu__mail:hover{ border-color:var(--accent); color:var(--accent); }
.menu__tel{ margin-top:13px; font-size:14.5px; color:var(--muted); font-family:var(--mono); }
.menu__tel:hover{ color:var(--white); }
.menu__social{ display:flex; gap:16px; margin-top:20px; }
.menu__social a{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted-2);
  transition:color .3s var(--ease);
}
.menu__social a:hover{ color:var(--white); }

.menu__foot{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  max-width:var(--maxw); margin:34px auto 0; padding-top:18px;
  border-top:1px solid var(--line-soft);
}
.menu__footMeta{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted-2);
}
.menu__logo{ display:block; line-height:0; margin-right:auto; }
.menu__logo img{
  height:28px; width:auto;
  transition:transform .5s var(--ease);
}
.menu__logo:hover img{ transform:scale(1.05); }

/* ============================================================
   SISTEMA DE SECCIÓN — índice + filete
============================================================ */
/* Sin pretítulos: la estructura la marca el filete superior */
.sec-head{
  max-width:var(--maxw); margin:0 auto clamp(44px,5.5vw,80px);
  padding-top:clamp(22px,2.4vw,34px); border-top:1px solid var(--line-soft);
}
.sec-title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(36px,6vw,96px); line-height:.94; letter-spacing:-.048em;
}
.sec-title.small{ font-size:clamp(28px,4.1vw,60px); }
.sec-title span{ display:block; }
/* Tres énfasis, uno por seccion. No se mezclan ni se repiten seguidos:
   em = segunda mitad en gris - .outline = contorno - sin marca = peso pleno. */
.sec-title em{ font-style:normal; color:var(--muted-2); }
.sec-title .outline{
  display:inline-block; color:transparent;
  -webkit-text-stroke:1.2px var(--muted-2);
  transition:-webkit-text-stroke-color .7s var(--ease);
}
.sec-title .outline.is-lit{ -webkit-text-stroke-color:var(--white); }
.sec-lead{
  max-width:48ch; margin-top:22px; font-size:clamp(14.5px,1.15vw,17px);
  color:var(--muted); line-height:1.6;
}
.split{ display:block; }
.tdot{
  display:inline-block; width:.14em; height:.14em; border-radius:50%;
  background:var(--accent); margin-left:.06em; vertical-align:baseline;
}

/* ============================================================
   HERO
============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; padding:calc(var(--header-h) + 56px) var(--pad) clamp(36px,5vh,58px);
  overflow:hidden;
}
/* Vídeo real de fondo — desaturado y muy oscuro, es textura, no protagonista */
.hero__video{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__video .v{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(.85) contrast(1.15) brightness(.44);
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,8,10,.72) 0%, rgba(8,8,10,.5) 38%, rgba(8,8,10,.94) 88%, var(--bg) 100%),
    linear-gradient(90deg, rgba(8,8,10,.88) 0%, rgba(8,8,10,.25) 62%, rgba(8,8,10,.6) 100%);
}
.hero__aurora{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.blob{ display:none; }
.grid-lines{ z-index:2; }
.hero__inner{ z-index:3; }

.grid-lines{
  position:absolute; inset:0; z-index:1; display:flex;
  justify-content:space-between; padding:0 var(--pad); pointer-events:none;
}
.grid-lines i{ width:1px; height:100%; background:var(--line-soft); }

.hero__inner{ position:relative; z-index:3; max-width:var(--maxw); margin:0 auto; width:100%; }

.hero__title{
  margin:clamp(24px,3vw,40px) 0 0;
  font-family:var(--display); font-weight:800;
  font-size:clamp(44px,8.4vw,152px); line-height:.88; letter-spacing:-.055em;
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.04em; }
.hero__title .outline{
  display:inline-block; color:transparent; -webkit-text-stroke:1.2px var(--white);
}
.hero__title .split{ display:inline-block; }

.hero__bottom{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:30px; margin-top:clamp(32px,4vw,54px);
  padding-top:26px; border-top:1px solid var(--line-soft);
}
.hero__lead{ max-width:42ch; color:var(--muted); font-size:clamp(14.5px,1.1vw,17px); }
.hero__cta{ display:flex; gap:10px; flex-wrap:wrap; }

.hero__scroll{
  position:absolute; right:var(--pad); top:50%; z-index:4;
  transform:rotate(90deg); transform-origin:right center;
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--muted-2);
}
.hero__scroll i{ width:44px; height:1px; background:var(--muted-2); }

/* ============================================================
   MARQUEE
============================================================ */
.marquee-band{
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  padding:20px 0; overflow:hidden;
}
.marquee{ display:flex; width:max-content; }
.marquee__track{
  display:flex; align-items:center; gap:30px; padding-right:30px;
  font-family:var(--display); font-weight:800;
  font-size:clamp(22px,3vw,44px); letter-spacing:-.038em; white-space:nowrap;
}
.marquee__track i{ width:5px; height:5px; background:var(--accent); flex:none; }
.marquee__track span:nth-child(4n+3){ color:transparent; -webkit-text-stroke:1px var(--muted-2); }
.marquee--thin{ margin-top:56px; }
.marquee--thin .marquee__track{
  font-size:clamp(13px,1.3vw,17px); gap:20px; padding-right:20px;
  font-family:var(--mono); font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.marquee--thin .marquee__track i{ width:3px; height:3px; }

/* ============================================================
   MANIFIESTO — momento editorial en serif
============================================================ */
.manifesto{ padding:clamp(88px,13vh,170px) var(--pad); max-width:1340px; margin:0 auto; }
.manifesto__text{
  margin-top:32px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(26px,4vw,62px); line-height:1.14; letter-spacing:-.015em;
}
.manifesto__text .w{ color:rgba(237,237,234,.16); transition:color .1s linear; }
.manifesto__foot{
  display:grid; grid-template-columns:repeat(4,1fr);
  margin-top:clamp(40px,5vw,68px); border-top:1px solid var(--line-soft);
}
.manifesto__foot span{
  padding:20px 18px 0 0;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  color:var(--muted); border-right:1px solid var(--line-soft);
}
.manifesto__foot span:last-child{ border-right:none; }

/* ============================================================
   SHOWROOM
============================================================ */
.showroom{ position:relative; height:520vh; }
.showroom__pin{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; flex-direction:column;
  padding:calc(var(--header-h) + 18px) var(--pad) 26px;
}
.showroom__glow{ display:none; }
.showroom__head{
  position:relative; z-index:5; max-width:var(--maxw); margin:0 auto; width:100%;
  padding-top:18px; border-top:1px solid var(--line-soft);
}
.showroom__title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(22px,3.3vw,52px); line-height:1; letter-spacing:-.045em;
}
.showroom__title em{ font-style:normal; color:var(--muted-2); }

.stage{
  position:relative; flex:1; display:grid; place-items:center;
  /* perspectiva larga: evita que la base se abra en abanico */
  perspective:4600px; perspective-origin:50% 44%;
}

/* ---------- MACBOOK 3D ---------- */
.stage__mac{ position:relative; width:100%; height:100%; }
.mac-still{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center;
  transition:opacity .6s var(--ease);
}
.stage__mac.mac-ok .mac-still{ opacity:0; }
.mac3d{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transition:opacity .8s var(--ease);
  touch-action:pan-y;
}
.mac3d.is-ready{ opacity:1; }
.mac3d.is-failed{ display:none; }

/* ---------- IPHONE ---------- */
.iphone{
  position:absolute; right:7%; top:6%; z-index:6;
  width:min(198px,19vw); transform-style:preserve-3d;
  opacity:0; will-change:transform;
}
.ip-shadow{
  position:absolute; left:50%; bottom:-22px; width:88%; height:34px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(0,0,0,.8),transparent 70%);
  filter:blur(12px);
}
.ip-frame{
  position:relative; aspect-ratio:9/19.5; border-radius:14% / 6.5%;
  background:linear-gradient(150deg,#45454b,#212124 30%,#191919 70%,#333338);
  padding:2.6%;
  box-shadow:0 22px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.07) inset;
}
.ip-buttons i{ position:absolute; background:#2b2b30; border-radius:2px; }
.ip-buttons .b1{ left:-2px; top:19%; width:2.5px; height:5%; }
.ip-buttons .b2{ left:-2px; top:27%; width:2.5px; height:8%; }
.ip-buttons .b3{ left:-2px; top:37%; width:2.5px; height:8%; }
.ip-buttons .b4{ right:-2px; top:30%; width:2.5px; height:11%; }
.ip-screen{
  position:relative; width:100%; height:100%; border-radius:12% / 5.6%;
  overflow:hidden; background:#08080A;
}
.ip-island{
  position:absolute; top:2.4%; left:50%; transform:translateX(-50%);
  width:31%; height:3.2%; background:#000; border-radius:99px; z-index:9;
}
.ip-status{
  position:relative; z-index:8; display:flex; justify-content:space-between;
  align-items:center; padding:3.6% 7% 0;
  font-family:var(--mono); font-size:7.5px; font-weight:600; color:#fff;
}
.ip-status__r{ display:flex; gap:3px; align-items:center; }
.ip-status__r i{ width:8px; height:6px; background:rgba(255,255,255,.7); border-radius:1px; }
.ip-status__r i:last-child{ width:13px; }

/* La misma web en móvil, con su vídeo */
.ip-app{ position:absolute; inset:0; display:flex; flex-direction:column; padding:11% 6% 6%; }
.ip-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:grayscale(.7) contrast(1.12) brightness(.55);
}
.ip-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(8,8,10,.55) 0%,rgba(8,8,10,.1) 30%,rgba(8,8,10,.9) 72%,rgba(8,8,10,.98) 100%);
}
.ip-topbar{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
}
.ip-avatar{
  display:flex; align-items:flex-end;
  font-family:var(--display); font-weight:800; font-size:13px; letter-spacing:-.07em;
}
.ip-avatar i{ width:2.6px; height:2.6px; border-radius:50%; background:var(--accent); margin-left:1px; margin-bottom:1.5px; }
.ip-burger{ display:flex; flex-direction:column; gap:2.5px; }
.ip-burger i{ display:block; width:11px; height:1px; background:rgba(255,255,255,.75); }
.ip-burger i:last-child{ width:7px; margin-left:auto; }

.ip-copy{ position:relative; z-index:2; margin-top:auto; padding-bottom:12px; }
.ip-eyebrow{
  font-family:var(--mono); font-size:5.5px; letter-spacing:.28em;
  text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:6px;
}
.ip-copy h4{
  font-family:var(--display); font-weight:800; font-size:19px;
  line-height:.94; letter-spacing:-.055em; display:inline-flex; align-items:flex-end; flex-wrap:wrap;
}
.ip-copy h4 i{
  width:.14em; height:.14em; border-radius:50%; background:var(--accent);
  margin-left:.06em; margin-bottom:.1em;
}
.ip-list{ position:relative; z-index:2; display:flex; flex-direction:column; }
.bubble{
  padding:6px 0; border-top:1px solid rgba(255,255,255,.11);
  font-family:var(--mono); font-size:7.5px; color:rgba(255,255,255,.7);
  letter-spacing:.02em; opacity:0; transform:translateY(8px);
}
.ip-input{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 9px; border-radius:2px; background:var(--white); color:#08080A;
  font-family:var(--mono); font-size:7px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; margin-top:10px;
}
.ip-input i{ width:9px; height:9px; border-radius:1px; background:var(--accent); }

/* ---------- ETIQUETAS ---------- */
.stage__tags{ position:absolute; inset:0; pointer-events:none; z-index:7; }
/* Anotaciones de plano tecnico: chip solido, sin cristal, y repartidas
   en triangulo alrededor del portatil en vez de apiladas a la izquierda. */
.stage-tag{
  position:absolute; padding:8px 14px; border-radius:var(--r);
  background:var(--bg); border:1px solid var(--line);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); opacity:0; white-space:nowrap;
}
.stage-tag::before{
  content:''; display:inline-block; vertical-align:middle;
  width:4px; height:4px; background:var(--accent); margin-right:9px;
  position:relative; top:-1px;
}
.stage-tag--1{ left:1%;  top:15%; }
.stage-tag--2{ left:7%;  bottom:21%; }
.stage-tag--3{ right:5%; bottom:15%; }

.showroom__steps{
  position:relative; z-index:5; display:grid;
  grid-template-columns:repeat(4,1fr);
  max-width:var(--maxw); margin:0 auto; width:100%;
  border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted-2);
}
.showroom__steps span{
  padding:14px 16px 0 0; border-right:1px solid var(--line-soft);
  transition:color .35s var(--ease);
}
.showroom__steps span:last-child{ border-right:none; }
.showroom__steps span.active{ color:var(--white); }

/* ============================================================
   SERVICIOS
============================================================ */
.services{ padding:clamp(90px,13vh,175px) var(--pad); }
.cards{
  display:grid; gap:clamp(46px,4vw,58px) 0;
  grid-template-columns:repeat(3,1fr);
  max-width:var(--maxw); margin:0 auto;
  padding-top:112px;
  border-top:1px solid var(--line-soft);
}
.card{
  position:relative; padding:0;
  border-right:1px solid var(--line-soft);
  transform-style:preserve-3d; will-change:transform;
}
.card:nth-child(3n){ border-right:none; }
.card__body{
  position:relative; z-index:2; height:100%;
  background:transparent;
  margin:0 clamp(20px,2vw,34px) 0 0;
  display:flex; flex-direction:column; min-height:320px;
}
.card:not(:nth-child(3n)) .card__body{ margin-right:clamp(24px,2.4vw,40px); }
.card:nth-child(3n+2) .card__body,
.card:nth-child(3n) .card__body{ margin-left:clamp(20px,2vw,34px); }

/* El realce del hover lo da un filete que crece, no un halo. */
.card__body::before{
  content:''; position:absolute; left:0; right:0; top:-28px; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .55s var(--ease);
}
.card:hover .card__body::before{ transform:scaleX(1); }
.card::after{ display:none; }

.card__num{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.24em;
  color:var(--muted-2); transition:color .35s var(--ease);
}
.card:hover .card__num{ color:var(--accent); }
.card__title{
  font-family:var(--display); font-weight:800; margin-top:16px;
  font-size:clamp(24px,2.35vw,37px); line-height:.98; letter-spacing:-.048em;
}
.card__title em{ font-style:normal; color:var(--muted-2); transition:color .35s var(--ease); }
.card:hover .card__title em{ color:var(--white); }
.card__text{ margin-top:14px; color:var(--muted); font-size:14px; line-height:1.55; max-width:34ch; }
.card__tags{
  display:flex; flex-wrap:wrap; gap:0 14px; margin-top:auto; padding-top:24px;
}
.card__tags li{
  position:relative; padding:4px 0;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.02em; color:var(--muted-2);
  transition:color .35s var(--ease);
}
.card__tags li::after{
  content:'/'; position:absolute; right:-9px; color:var(--line);
}
.card__tags li:last-child::after{ display:none; }
.card:hover .card__tags li{ color:var(--muted); }
.card__arrow{
  position:absolute; right:clamp(24px,2.4vw,40px); top:0; font-size:17px; color:var(--accent);
  opacity:0; transform:translateX(-8px); transition:.4s var(--ease);
}
.card:hover .card__arrow{ opacity:1; transform:none; }

/* Celda de llamada a la acción */
.card--cta .card__title em{ color:var(--accent); }
.card__cta{
  display:inline-flex; align-items:center; gap:12px; margin-top:auto;
  padding-top:24px; border-top:1px solid var(--line);
  width:100%; justify-content:space-between;
  font-family:var(--mono); font-size:12.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.card__cta i{ font-style:normal; font-size:16px; transition:transform .4s var(--ease); }
.card__cta:hover{ color:var(--accent); }
.card__cta:hover i{ transform:translate(4px,-4px); }

/* ---------- STICKERS (referencia Ocelot) ---------- */
.card__stickers{ position:absolute; left:0; right:0; top:0; height:0; z-index:4; pointer-events:none; }
.sticker{
  position:absolute; display:grid; place-items:center;
  width:64px; height:64px; border-radius:var(--r);
  background:var(--accent);
  box-shadow:0 14px 30px rgba(0,0,0,.55);
  opacity:0; transform:translateY(34px) scale(.6);
  will-change:transform,opacity;
}
.sticker svg{ width:54%; height:54%; }
.sticker--a{ left:1%;  top:-82px; }
.sticker--b{ left:24%; top:-96px; background:var(--white); }
.sticker--c{ left:47%; top:-104px; background:transparent; box-shadow:none; width:84px; height:84px; }
.sticker--d{ left:72%; top:-76px; background:var(--white); }

.badge svg{ width:100%; height:100%; animation:spin 14s linear infinite; }
.badge text{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.14em; fill:var(--white); text-transform:uppercase;
}
.badge__dot{
  position:absolute; width:20px; height:20px; border-radius:50%;
  background:var(--accent);
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ============================================================
   VENTANA
============================================================ */
.window-sec{ height:230vh; position:relative; }
.window-sec__sticky{
  position:sticky; top:0; height:100svh; display:grid; place-items:center;
  padding:0 var(--pad); overflow:hidden;
}
.window{
  position:relative; width:100%; max-width:var(--maxw); height:78svh;
  overflow:hidden; clip-path:inset(42% 0%); will-change:clip-path;
  border:1px solid var(--line);
}
.window__media{ position:absolute; inset:-12%; }
.window__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(.55) contrast(1.1) brightness(.68);
}
.window__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,8,10,.42) 0%,rgba(8,8,10,.05) 30%,rgba(8,8,10,.9) 82%,rgba(8,8,10,.97) 100%);
}
.window__scene,.ws-blob,.ws-grid{ display:none; }
.window__caption{
  position:absolute; left:0; right:0; bottom:0; padding:clamp(26px,3.6vw,58px);
  z-index:3; overflow:hidden;
}
.ws-eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:16px;
}
.ws-title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(26px,4.6vw,78px); line-height:.94; letter-spacing:-.05em;
}
.ws-title em{ font-style:normal; color:var(--muted-2); }
.ws-facts{
  display:flex; flex-wrap:wrap; gap:clamp(16px,2.2vw,38px);
  margin-top:clamp(20px,2.2vw,30px); padding-top:18px;
  border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:12px; color:var(--muted);
  letter-spacing:.04em;
}
.ws-facts b{ color:var(--muted-2); font-weight:400; margin-right:9px; }
.window__frameline{ display:none; }

/* ============================================================
   SHOWREEL — placas editoriales, listas para foto real
============================================================ */
.showreel{ padding:clamp(76px,10vh,140px) 0; overflow:hidden; }
.showreel__head{ padding:0 var(--pad); max-width:var(--maxw); margin:0 auto clamp(32px,3.6vw,54px); }
.ds{
  position:relative; width:100%; cursor:grab;
  -webkit-user-select:none; user-select:none; touch-action:pan-y;
}
.ds.is-drag{ cursor:grabbing; }
.ds__track{ display:flex; gap:clamp(12px,1.4vw,22px); width:max-content; padding-left:var(--pad); }
.ds__item{ width:clamp(220px,24vw,380px); flex:none; }
.ds__media{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  border:1px solid var(--line-soft); background:var(--panel);
  transition:border-color .45s var(--ease);
}
.ds__item:hover .ds__media{ border-color:var(--line); }
.ds__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.08) brightness(.82);
  transition:filter .55s var(--ease), transform .8s var(--ease);
}
.ds__item:hover .ds__img{ filter:grayscale(0) contrast(1) brightness(1); transform:scale(1.03); }
.ds__n{
  position:absolute; left:16px; top:14px; z-index:5;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; color:var(--muted-2);
}
.ds__rule{
  position:absolute; left:0; bottom:0; z-index:6; height:2px; width:100%;
  background:var(--accent);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .55s var(--ease);
}
.ds__item:hover .ds__rule{ transform:scaleX(1); }
.ds__cap{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:12.5px; font-weight:500;
  display:flex; justify-content:space-between; gap:8px; letter-spacing:.02em;
}
.ds__cap em{ font-style:normal; color:var(--muted-2); }
.ds__hint{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:clamp(26px,3vw,44px);
  font-family:var(--mono); font-size:10px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--muted-2);
}
.ds__hint span{ color:var(--muted-2); }

/* ============================================================
   PROCESO
============================================================ */
/* La altura la calcula main.js a partir del ancho real del carril: asi el pin
   dura exactamente lo que dura el desplazamiento y no se queda clavado. */
.process{ position:relative; min-height:100svh; }
.process__pin{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:calc(var(--header-h) + clamp(18px,2.4vw,34px)) 0 clamp(22px,2.6vw,34px) var(--pad);
}
.process__head{
  max-width:var(--maxw); flex:none;
  margin-right:var(--pad); padding-top:clamp(22px,2.4vw,34px);
  border-top:1px solid var(--line-soft);
}
.process__stage{ flex:1; display:flex; align-items:center; min-height:0; }
.process__track{ display:flex; gap:0; width:max-content; padding-right:var(--pad); }
.step{
  position:relative; width:min(420px,76vw); flex:none;
  padding:clamp(26px,2.4vw,38px) clamp(26px,2.4vw,38px) clamp(26px,2.4vw,38px) 0;
  margin-right:clamp(26px,2.4vw,38px);
  border-top:1px solid var(--line);
  display:flex; flex-direction:column;
}
.step__num{
  font-family:var(--display); font-weight:800; font-size:clamp(42px,5vw,74px);
  line-height:.9; letter-spacing:-.055em; color:var(--muted-2);
  transition:color .4s var(--ease);
}
.step:hover .step__num{ color:var(--accent); }
.step h3{
  font-family:var(--display); font-weight:700; margin-top:24px;
  font-size:clamp(18px,1.6vw,25px); line-height:1.1; letter-spacing:-.03em;
}
.step p{ margin-top:12px; color:var(--muted); font-size:14px; max-width:38ch; }
.step__line{ display:none; }

/* Carril de avance: ocupa el borde inferior del pin y dice donde estas. */
.process__rail{
  flex:none; display:flex; align-items:center; gap:clamp(16px,2vw,28px);
  max-width:var(--maxw); width:100%; padding-right:var(--pad);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted-2);
}
.process__rail b{ font-weight:500; color:var(--white); }
.process__bar{
  flex:1; height:1px; background:var(--line-soft); overflow:hidden;
}
.process__bar i{
  display:block; height:100%; background:var(--accent);
  transform:scaleX(0); transform-origin:0 50%; will-change:transform;
}

/* ============================================================
   CIFRAS
============================================================ */
.stats{
  padding:clamp(70px,10vh,130px) var(--pad);
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.stats__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr);
}
.stat{ border-right:1px solid var(--line-soft); padding-right:clamp(16px,2vw,32px); }
.stat:not(:first-child){ padding-left:clamp(16px,2vw,32px); }
.stat:last-child{ border-right:none; }
.stat__n{
  display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(44px,5.8vw,96px); line-height:.88; letter-spacing:-.06em;
  color:var(--white);
}
.stat p{
  margin-top:16px; padding-top:12px; border-top:1px solid var(--line-soft);
  color:var(--muted); font-size:12.5px; font-family:var(--mono); max-width:22ch;
  letter-spacing:.02em;
}

/* ============================================================
   HISTORIA
============================================================ */
.history{ padding:clamp(90px,13vh,175px) var(--pad); }
.timeline{ position:relative; max-width:var(--maxw); margin:0 auto; padding-left:clamp(0px,3.5vw,70px); }
.timeline__rail{
  position:absolute; left:clamp(0px,3.5vw,70px); top:0; bottom:0; width:1px;
  background:var(--line-soft);
}
.timeline__rail i{
  display:block; width:100%; height:100%; background:var(--white);
  transform:scaleY(0); transform-origin:50% 0; will-change:transform;
}
.tl-item{
  --dot:0;
  position:relative; display:grid;
  grid-template-columns:clamp(120px,12vw,190px) minmax(0,1fr) clamp(80px,9vw,140px);
  gap:clamp(20px,3.6vw,64px);
  padding:clamp(26px,2.8vw,44px) 0 clamp(26px,2.8vw,44px) clamp(24px,2.6vw,48px);
  border-bottom:1px solid var(--line-soft);
}
.tl-i{
  align-self:start; text-align:right;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted-2);
  transition:color .45s var(--ease);
}
.tl-item:hover .tl-i{ color:var(--accent); }
.tl-item:first-child{ border-top:1px solid var(--line-soft); }
.tl-item::before{
  content:''; position:absolute; left:calc(clamp(24px,2.6vw,48px) * -1 - 4px);
  top:calc(clamp(30px,3.6vw,58px) + 14px);
  width:7px; height:7px; background:var(--accent);
  transform:translateX(-50%) scale(var(--dot));
}
.tl-year{
  font-family:var(--display); font-weight:800; font-size:clamp(30px,4vw,64px);
  line-height:.9; letter-spacing:-.055em; color:var(--muted-2);
  transition:color .45s var(--ease);
}
.tl-item:hover .tl-year{ color:var(--white); }
.tl-body h3{ font-family:var(--display); font-weight:700; font-size:clamp(18px,1.7vw,27px); letter-spacing:-.035em; }
.tl-body p{ margin-top:12px; color:var(--muted); max-width:68ch; font-size:15px; }

.values{
  max-width:var(--maxw); margin:clamp(56px,6vw,100px) auto 0;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
}
.value{
  padding:clamp(22px,2.2vw,34px) clamp(18px,1.8vw,28px) 0 0;
  border-right:1px solid var(--line-soft);
}
.value:last-child{ border-right:none; }
.value:not(:first-child){ padding-left:clamp(18px,1.8vw,28px); }
.value h4{ font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-.03em; }
.value p{ margin-top:10px; color:var(--muted); font-size:13.5px; }

/* ============================================================
   KIT DIGITAL
============================================================ */
/* Unica seccion en negativo. Es la mas informativa de la pagina y el corte
   en seco de tinta a hueso rompe los 22.000 px de negro seguido.
   Se reescriben los tokens: todo lo de dentro hereda sin tocar una regla mas. */
.kit{
  position:relative; padding:clamp(100px,14vh,190px) var(--pad);
  /* Valor literal: en este mismo elemento --white ya vale tinta. */
  background:#EDEDEA; color:#08080A;
  --white:#08080A;
  /* Los mismos alfas que sobre negro se quedan cortos sobre hueso:
     estos pasan 4.5:1 tambien en los rotulos de 10 px. */
  --muted:rgba(8,8,10,.70);
  --muted-2:rgba(8,8,10,.58);
  --line:rgba(8,8,10,.26);
  --line-soft:rgba(8,8,10,.14);
}
.kit::selection,.kit *::selection{ background:#08080A; color:#EDEDEA; }
/* Los botones dan por hecho fondo oscuro: aqui se invierten a mano. */
.kit .btn{ border-color:rgba(8,8,10,.22); }
.kit .btn:hover{ color:#EDEDEA; border-color:#08080A; }
.kit .btn__fill{ background:#08080A; }
.kit .btn--solid{ background:#08080A; color:#EDEDEA; border-color:#08080A; }
.kit .btn--solid .btn__fill{ background:var(--accent); }
.kit .btn--solid:hover{ color:#08080A; border-color:var(--accent); }
.kit :focus-visible{ outline-color:#08080A; }
.kit__aurora{ display:none; }
.kit > *{ position:relative; z-index:2; }

.kit__table{
  max-width:var(--maxw); margin:0 auto;
  border-top:1px solid var(--line);
}
.kit__row{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center;
  padding:clamp(15px,1.6vw,24px) 0;
  border-bottom:1px solid var(--line-soft);
}
/* Se desplaza con transform, no con padding: no relayouta la tabla entera. */
.kit__row > *{ transition:transform .4s var(--ease), color .35s var(--ease); }
.kit__row:not(.kit__row--head):hover > *{ transform:translateX(14px); }
.kit__row:not(.kit__row--head)::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--accent); transform:scaleY(0); transform-origin:50% 100%;
  transition:transform .4s var(--ease);
}
.kit__row:not(.kit__row--head):hover::before{ transform:scaleY(1); transform-origin:50% 0%; }
.kit__row--head span{
  font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted-2);
}
.kit__row span{ font-family:var(--mono); font-size:clamp(13.5px,1.1vw,16px); }
.kit__row span:nth-child(2){ color:var(--muted); }
.kit__amt{
  font-family:var(--display) !important; font-weight:800;
  font-size:clamp(19px,2vw,31px) !important; letter-spacing:-.05em;
  text-align:right; color:var(--white);
  transition:color .35s var(--ease);
}
.kit__amt{ font-variant-numeric:tabular-nums; }

.kit__sols{ max-width:var(--maxw); margin:clamp(42px,4.6vw,68px) auto 0; }
.kit__solsLabel{
  font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:20px;
  padding-bottom:12px; border-bottom:1px solid var(--line-soft);
}
.kit__sols ul{
  display:grid; grid-template-columns:repeat(3,1fr);
  margin-bottom:38px;
}
.kit__sols li{
  padding:13px 16px 13px 0; border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:13px; color:var(--muted);
  transition:color .35s var(--ease), transform .35s var(--ease);
}
.kit__sols li em{ font-style:normal; color:var(--muted-2); font-size:11px; }
.kit__sols li:hover{ color:var(--white); transform:translateX(10px); }

/* ============================================================
   PROYECTOS
============================================================ */
.projects{ position:relative; padding:clamp(90px,13vh,175px) var(--pad); }
.proj-list{ max-width:var(--maxw); margin:0 auto; border-top:1px solid var(--line); }
.proj{
  position:relative; display:grid; align-items:center; gap:20px;
  grid-template-columns:52px 1fr 290px 70px;
  padding:clamp(22px,2.6vw,38px) 0;
  border-bottom:1px solid var(--line-soft);
}
.proj__i,.proj__title{ transition:transform .5s var(--ease), color .45s var(--ease); }
.proj:hover .proj__i,
.proj:hover .proj__title{ transform:translateX(22px); }
.proj__i{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--muted-2); }
.proj__title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(22px,3.3vw,52px); line-height:1; letter-spacing:-.05em;
  color:var(--muted-2); transition:color .45s var(--ease);
}
.proj:hover .proj__title{ color:var(--white); }
.proj__meta{ font-family:var(--mono); font-size:12.5px; color:var(--muted-2); }
.proj__year{ font-family:var(--mono); font-size:12.5px; color:var(--muted-2); text-align:right; }

.proj-hover{
  position:fixed; top:0; left:0; z-index:60; width:280px; height:200px;
  overflow:hidden; pointer-events:none;
  opacity:0; transform:translate(-50%,-50%) scale(.85);
  border:1px solid var(--line);
}
.proj-hover__ph{ position:absolute; inset:0; background:var(--panel); }
.proj-hover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1); }

/* ============================================================
   PARTNERS
============================================================ */
.partners{ padding:clamp(80px,11vh,155px) var(--pad); }
.partners__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line);
}
.partner{
  position:relative; padding:clamp(28px,2.8vw,48px) clamp(24px,2.4vw,40px) clamp(28px,2.8vw,48px) 0;
  border-right:1px solid var(--line-soft);
}
.partner:last-child{ border-right:none; padding-left:clamp(24px,2.4vw,40px); }
.partner > *{ transition:transform .45s var(--ease); }
.partner:hover > *{ transform:translateX(clamp(14px,1.4vw,22px)); }
.partner:last-child:hover{ padding-left:clamp(38px,3.8vw,62px); }
.partner::after{ display:none; }
.partner h3{
  font-family:var(--display); font-weight:800;
  font-size:clamp(28px,3.2vw,50px); letter-spacing:-.05em;
}
.partner p{ margin-top:14px; color:var(--muted); max-width:36ch; font-size:14.5px; }
.partner__tag{
  display:inline-block; margin-top:22px; padding-top:10px;
  border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent);
}

/* ============================================================
   CONTACTO
============================================================ */
.contact{ position:relative; padding:clamp(90px,13vh,175px) var(--pad); overflow:hidden; }
.contact__glow{ display:none; }
.contact__head{ position:relative; max-width:var(--maxw); margin:0 auto clamp(46px,5.5vw,82px); }
.contact__title{
  font-family:var(--display); font-weight:800; margin-top:22px;
  font-size:clamp(36px,6.2vw,104px); line-height:.92; letter-spacing:-.055em;
}
.contact__title em{ font-style:normal; color:var(--muted-2); }

.contact__cols{
  position:relative; max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
  gap:clamp(32px,4.5vw,82px);
  border-top:1px solid var(--line);
  padding-top:clamp(30px,3.4vw,52px);
}
.form{ display:flex; flex-direction:column; gap:18px; }
.field{ position:relative; }
.field input,.field textarea{
  width:100%; padding:20px 2px 11px; border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:15px; resize:vertical;
  transition:border-color .35s var(--ease);
}
.field label{
  position:absolute; left:2px; top:20px; color:var(--muted-2);
  font-family:var(--mono); font-size:14px; pointer-events:none;
  transition:.32s var(--ease);
}
.field input:focus,.field textarea:focus{ outline:none; border-bottom-color:var(--white); }
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label{
  top:0; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2);
}
.field--chips{ padding-top:8px; }
.field__legend{
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:14px;
}
.chips{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{
  padding:10px 16px; border-radius:var(--r); border:1px solid var(--line-soft);
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--muted);
  transition:.3s var(--ease);
}
.chip:hover{ border-color:var(--line); color:var(--white); }
.chip.is-on{ background:var(--white); border-color:var(--white); color:#08080A; font-weight:600; }
.form__note{ font-size:12px; color:var(--muted-2); font-family:var(--mono); }
.form__note a{ color:var(--muted); text-decoration:underline; }
.form__ok{ color:var(--accent); font-size:13.5px; font-family:var(--mono); }

.contact__aside{ display:flex; flex-direction:column; }
.contact__big{
  font-family:var(--display); font-weight:800;
  font-size:clamp(20px,2.3vw,36px); line-height:1.06; letter-spacing:-.045em;
  transition:color .4s var(--ease);
}
.contact__big:hover{ color:var(--accent); }
.contact__big--sm{
  margin-top:22px; padding-top:22px; border-top:1px solid var(--line-soft);
  font-size:clamp(17px,1.7vw,26px); color:var(--muted);
}
.contact__wa{
  display:inline-flex; align-items:center; gap:11px; margin-top:30px;
  padding:14px 22px; border-radius:var(--r); border:1px solid var(--line);
  align-self:flex-start;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
  transition:border-color .35s var(--ease), color .35s var(--ease);
}
.contact__wa span{ width:6px; height:6px; background:var(--accent); }
.contact__wa:hover{ border-color:var(--white); color:var(--white); }
.contact__socials{
  display:flex; gap:20px; margin-top:auto; padding-top:40px;
}
.contact__socials a{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-2); transition:color .3s var(--ease);
}
.contact__socials a:hover{ color:var(--white); }

/* ============================================================
   FOOTER
============================================================ */
.footer{ border-top:1px solid var(--line); padding:clamp(46px,5.5vw,74px) var(--pad) 22px; overflow:hidden; }
.footer__top{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr auto; gap:46px; align-items:start;
}
.footer__nav{ display:flex; gap:clamp(26px,4.5vw,74px); }
.footer__nav p{
  font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:16px;
  padding-bottom:10px; border-bottom:1px solid var(--line-soft);
}
.footer__nav a{
  display:block; padding:5px 0; font-size:13.5px; color:var(--muted);
  transition:color .3s var(--ease), transform .3s var(--ease);
}
.footer__nav a:hover{ color:var(--white); transform:translateX(5px); }

.footer__giant{
  max-width:var(--maxw); margin:clamp(46px,5.5vw,84px) auto 0;
  font-family:var(--display); font-weight:800;
  font-size:clamp(38px,12vw,214px); line-height:.86; letter-spacing:-.06em;
  color:transparent; -webkit-text-stroke:1px rgba(237,237,234,.13);
  white-space:nowrap; user-select:none;
}
.footer__bottom{
  max-width:var(--maxw); margin:30px auto 0; padding-top:20px;
  border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--muted-2);
}

/* ---------- ESTADOS JS ---------- */
.reveal-up{ opacity:0; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:1180px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .card:nth-child(3n){ border-right:1px solid var(--line-soft); }
  .card:nth-child(2n){ border-right:none; }
  .card:nth-child(3n+2) .card__body,
  .card:nth-child(3n) .card__body{ margin-left:0; }
  .card:nth-child(2n) .card__body{ margin-left:clamp(20px,2vw,34px); }
  .menu__cols{ grid-template-columns:1fr 1fr; }
  .menu__aside{ grid-column:span 2; }
  .menu__preview{ display:none; }
  .kit__sols ul{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:980px){
  :root{ --header-h:68px; }
  .nav{ display:none; }
  .stats__grid{ grid-template-columns:repeat(2,1fr); row-gap:40px; }
  .stat:nth-child(2n){ border-right:none; }
  .values{ grid-template-columns:repeat(2,1fr); }
  .value:nth-child(2n){ border-right:none; }
  .manifesto__foot{ grid-template-columns:repeat(2,1fr); row-gap:18px; }
  .contact__cols{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; }
  .partners__grid{ grid-template-columns:1fr; }
  .partner{ border-right:none; border-bottom:1px solid var(--line-soft); padding-left:0 !important; }
  .tl-item{ grid-template-columns:1fr; gap:12px; }
  .tl-i{ display:none; }
  .proj{ grid-template-columns:40px 1fr; }
  .proj__meta,.proj__year{ display:none; }
  .showroom{ height:420vh; }
  .iphone{ width:min(190px,34vw); right:3%; }
  .showroom__steps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px){
  .cards{ grid-template-columns:1fr; padding-top:58px; }
  .card{ border-right:none !important; border-bottom:1px solid var(--line-soft); padding-bottom:34px; }
  .card .card__body{ margin-left:0 !important; margin-right:0 !important; }
  .kit__row{ grid-template-columns:minmax(0,1fr) auto; row-gap:2px; column-gap:18px; }
  .kit__row span:nth-child(2){ font-size:12px; grid-column:1; grid-row:2; }
  .kit__row--head{ display:none; }
  .kit__amt{ grid-column:2; grid-row:1 / span 2; align-self:center; }
  .kit__sols ul{ grid-template-columns:1fr; }
  .btn--pill{ display:none; }
  .footer__nav{ flex-wrap:wrap; gap:30px; }
  .menu__cols{ grid-template-columns:1fr; }
  .menu__aside{ grid-column:span 1; }
  .menu__mid{ display:none; }
  .menu__panel{ height:100svh; overflow-y:auto; }
  .stage{ perspective:1400px; }
  .macbook{ width:92vw; }
  .iphone{ right:4%; top:auto; bottom:6%; width:36vw; }
  .stage__tags{ display:none; }
  .hero__scroll{ display:none; }
  .hero__cta{ width:100%; }
  .hero__cta .btn{ flex:1 1 auto; }
  .manifesto__foot{ grid-template-columns:1fr; }
  .manifesto__foot span{ border-right:none; border-bottom:1px solid var(--line-soft); padding-bottom:14px; }
  .stats__grid{ grid-template-columns:1fr; }
  .stat{ border-right:none; padding-left:0 !important; }
  .values{ grid-template-columns:1fr; }
  .value{ border-right:none; padding-left:0 !important; border-bottom:1px solid var(--line-soft); padding-bottom:22px; }
  .proj{ grid-template-columns:1fr; gap:4px; }
  .proj__i{ display:none; }
  .showroom__steps{ grid-template-columns:1fr; font-size:9.5px; }
  .showroom__steps span{ border-right:none; padding-top:8px; }
  /* En vertical no hay pin: los cuatro pasos se apilan y se leen de un tiron. */
  .process{ height:auto !important; min-height:0; }
  .process__pin{
    position:static; height:auto; overflow:visible;
    padding:clamp(70px,10vh,120px) var(--pad) clamp(70px,10vh,120px) var(--pad);
  }
  .process__stage{ display:block; }
  .process__track{ flex-direction:column; width:auto; padding-right:0; transform:none !important; }
  .step{
    width:auto; margin-right:0; margin-top:clamp(28px,5vw,44px);
    padding-right:0;
  }
  .process__rail{ display:none; }
}

/* ============================================================
   MOTION REDUCIDO
============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .grain{ display:none; }
  .loader{ display:none; }
  .reveal-up{ opacity:1 !important; }
  .window{ clip-path:inset(0 0) !important; }
  .sticker{ opacity:1; transform:none; }
  .iphone,.stage-tag{ opacity:1 !important; }
  .bubble{ opacity:1 !important; transform:none !important; }
  .tl-item{ --dot:1; }
  .showroom{ height:auto; }
  .showroom__pin{ position:static; height:auto; }
  .process{ height:auto !important; min-height:0; }
  .process__pin{ position:static; height:auto; padding:70px var(--pad); }
  .process__stage{ display:block; }
  .process__track{ flex-wrap:wrap; width:auto; transform:none !important; }
  .process__rail{ display:none; }
  .step{ margin-top:34px; }
  .window-sec{ height:auto; }
  .window-sec__sticky{ position:static; height:auto; padding:70px var(--pad); }
}