/* ===========================================================
   ERA IA — landing
   Paleta azul / cyberpunk. Todo el color vive en :root.
   =========================================================== */
:root{
  --bg:      #05080f;
  --bg-2:    #070d1a;
  --panel:   #0a1120;
  --ink:     #e9eef8;
  --ink-2:   #b9c6dd;
  --dim:     #7f90ad;
  --blue:    #1f6fff;
  --blue-2:  #4d9bff;
  --cyan:    #38e1ff;
  --cyan-2:  #8bf1ff;
  --edge:    rgba(124,164,224,.16);
  --edge-2:  rgba(124,164,224,.30);

  --f-head: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --nav-h: 78px;
  --pad: clamp(20px, 5vw, 76px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-weight:500;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--blue); color:#fff; }

/* ---------- FX de fondo ---------- */
.fx-grid,.fx-vignette,.fx-scan,.fx-dust{ position:fixed; inset:0; pointer-events:none; z-index:0; }
.fx-grid{
  background-image:
    linear-gradient(rgba(80,140,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80,140,255,.055) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 90% at 50% 40%, #000 25%, transparent 78%);
  animation:gridDrift 24s linear infinite;
}
@keyframes gridDrift{ to{ background-position:64px 64px, 64px 64px; } }
.fx-vignette{
  background:
    radial-gradient(90% 70% at 72% 42%, rgba(31,111,255,.28), transparent 62%),
    radial-gradient(60% 50% at 78% 78%, rgba(56,225,255,.14), transparent 65%),
    radial-gradient(120% 100% at 50% 50%, transparent 40%, rgba(2,4,9,.92) 100%);
}
.fx-scan{
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
  opacity:.5; mix-blend-mode:overlay;
}
.fx-dust{ width:100%; height:100%; opacity:.75; }

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:60;
  display:flex; align-items:center; gap:clamp(16px,3vw,44px);
  padding:0 var(--pad);
  transition:background .35s, border-color .35s, backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(5,8,15,.78); backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--edge);
}
.brand{ display:flex; align-items:center; margin-right:auto; }
/* el logo es una imagen (assets/img/logo.png, recortada del original con alfa); aquí solo se dimensiona */
.brand__logo{ width:auto; height:28px; }
.brand__logo--small{ height:22px; }

.nav__links{ display:flex; gap:clamp(14px,2.2vw,34px); }
.nav__links a{
  font-family:var(--f-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-2);
  padding:6px 0; position:relative; transition:color .2s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--cyan); transition:right .3s ease;
}
.nav__links a:hover{ color:#fff; }
.nav__links a:hover::after{ right:0; }
.nav__cta{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  padding:11px 20px; border:1px solid var(--edge-2); color:var(--ink);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition:background .25s, border-color .25s, color .25s;
}
.nav__cta:hover{ background:var(--blue); border-color:var(--blue); color:#fff; }
.nav__cta--mobile{ display:none; }
.nav__burger{ display:none; width:40px; height:40px; background:none; border:0; cursor:pointer; padding:9px 7px; }
.nav__burger span{ display:block; height:1.5px; background:var(--ink); margin:5px 0; transition:.28s; }
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ opacity:0; }
.nav.is-open .nav__burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ---------- HERO ---------- */
.hero{
  position:relative; z-index:2; min-height:100svh;
  display:grid; grid-template-columns:minmax(0,1fr);
  align-items:center; padding:calc(var(--nav-h) + 24px) var(--pad) 92px;
}
.hero__copy{ position:relative; z-index:3; max-width:min(720px, 58vw); }

.eyebrow{
  display:flex; align-items:center; gap:14px; margin:0 0 26px;
  font-family:var(--f-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; color:var(--cyan);
}
.eyebrow__rule{ width:44px; height:1px; background:var(--cyan); flex:none; opacity:.8; }
.eyebrow--hero{ font-size:14.5px; }   /* el del hero va más grande que los de sección */

.hero__title{
  font-family:var(--f-head); font-weight:900; margin:0;
  /* «AUTOMATIZA TODO.» va en una sola línea (white-space:nowrap): a 6.2vw medía 933px
     en un bloque de 720 y se salía. Con 4.75vw y tope 4.25rem cabe hasta en 375px. */
  font-size:clamp(1.95rem, 4.75vw, 4.25rem); line-height:.9;
  letter-spacing:-.035em; text-transform:uppercase; color:#eef2fa;
  text-shadow:0 0 60px rgba(31,111,255,.35);
}
.hero__title span{ display:block; white-space:nowrap; }
.hero__bar{ display:block; width:88px; height:5px; margin:14px 0 12px;
  background:linear-gradient(90deg,var(--cyan),var(--blue)); }

.lede{ margin:26px 0 0; max-width:52ch; font-size:clamp(15px,1.15vw,17.5px);
  line-height:1.72; color:var(--ink-2); font-weight:500; }

.cta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:38px; align-items:center; }
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--f-head); font-weight:800; font-size:13.5px;
  letter-spacing:.14em; text-transform:uppercase; padding:17px 30px;
  transition:transform .2s, box-shadow .3s, background .25s, color .25s, border-color .25s;
}
.btn--primary{
  background:linear-gradient(105deg,var(--blue),#0ea7ff); color:#fff;
  clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px);
  box-shadow:0 10px 40px -10px rgba(31,111,255,.85);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 52px -10px rgba(56,225,255,.8); }
.btn__tri{ width:0; height:0; border-left:9px solid currentColor; border-top:6px solid transparent; border-bottom:6px solid transparent; }
.btn--ghost{ color:var(--ink); padding-left:0; }
.btn--ghost:hover{ color:var(--cyan); }
.btn__play{ width:40px; height:40px; border:1px solid var(--edge-2); border-radius:50%;
  display:grid; place-items:center; transition:border-color .25s, background .25s; }
.btn__play i{ width:0; height:0; border-left:8px solid currentColor; border-top:5.5px solid transparent; border-bottom:5.5px solid transparent; margin-left:2px; }
.btn--ghost:hover .btn__play{ border-color:var(--cyan); background:rgba(56,225,255,.1); }

.btn--sm{ font-size:11.5px; padding:12px 20px; gap:9px; }

/* ---------- ventana del video de la plataforma ----------
   Va sobre <dialog> nativo: el foco atrapado, Escape y la capa superior los
   pone el navegador. El <dialog> ocupa toda la ventana y es transparente, así
   el clic fuera de la caja cae sobre él y sirve para cerrar. */
.vmodal{
  width:100%; height:100%; max-width:none; max-height:none;
  margin:0; padding:clamp(16px, 5vw, 48px);
  border:0; background:transparent; color:var(--ink); overflow:auto;
}
.vmodal:not([open]){ display:none; }
.vmodal[open]{ display:grid; place-items:center; }
.vmodal::backdrop{ background:rgba(3,6,12,.86); backdrop-filter:blur(10px); }
.vmodal__caja{
  width:min(1040px, 100%);
  background:var(--panel); border:1px solid var(--edge-2);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  box-shadow:0 40px 120px -30px rgba(0,0,0,.9), 0 0 90px -40px rgba(56,225,255,.5);
}
.vmodal__top{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px clamp(18px,3vw,28px); border-bottom:1px solid var(--edge);
}
.vmodal__titulo{
  margin:0; font-family:var(--f-head); font-weight:900; font-size:clamp(15px,2.2vw,19px);
  letter-spacing:.13em; text-transform:uppercase;
}
.vmodal__x{
  flex:none; width:38px; height:38px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--edge-2); border-radius:50%;
  color:var(--ink-2); cursor:pointer; transition:color .25s, border-color .25s, background .25s;
}
.vmodal__x svg{ width:15px; height:15px; stroke:currentColor; stroke-width:1.8; fill:none; }
.vmodal__x:hover{ color:var(--cyan); border-color:var(--cyan); background:rgba(56,225,255,.1); }
.vmodal__video{
  display:block; width:100%; aspect-ratio:16/9; background:#04070e;
  object-fit:contain;                     /* nunca recorta: el póster es 16:9 igual */
}
.vmodal__pie{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:16px clamp(18px,3vw,28px); border-top:1px solid var(--edge);
}
.vmodal__nota{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim);
}
/* el <body> no puede seguir corriendo detrás de la ventana */
body.sin-scroll{ overflow:hidden; }

@media (max-width:560px){
  .vmodal__pie{ justify-content:center; }
  .vmodal__nota{ display:none; }
  .vmodal__titulo{ letter-spacing:.07em; }   /* si no, "EN CORTO" se parte */
}

.hero__status{
  position:absolute; left:var(--pad); bottom:34px; margin:0; z-index:3;
  display:flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--dim);
}
.hero__status .dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 12px var(--cyan); animation:pulse 2.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }

.hero__scroll{
  position:absolute; right:var(--pad); bottom:34px; z-index:3;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--dim); writing-mode:vertical-rl; padding-bottom:52px;
}
.hero__scroll::after{ content:''; position:absolute; bottom:0; left:50%; width:1px; height:42px;
  background:linear-gradient(var(--cyan),transparent); animation:scrollLine 2.4s ease-in-out infinite; }
@keyframes scrollLine{ 0%,100%{ transform:scaleY(.35); opacity:.4 } 50%{ transform:scaleY(1); opacity:1 } }

/* ---------- ARTE DEL HERO ---------- */
.hero__art{
  position:absolute; inset:0 0 0 auto; width:min(64vw, 900px); z-index:1;
  pointer-events:none; overflow:hidden;
  mask-image:linear-gradient(90deg, transparent 0, #000 24%, #000 100%);
}
.art__halo{
  position:absolute; left:52%; top:42%; width:78%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(31,111,255,.34), rgba(31,111,255,.10) 42%, transparent 66%);
  filter:blur(6px); animation:halo 7s ease-in-out infinite;
}
@keyframes halo{ 0%,100%{ opacity:.85; transform:translate(-50%,-50%) scale(1) } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.06) } }
.art__disc{
  position:absolute; left:54%; top:38%; width:min(28vw,360px); aspect-ratio:1;
  transform:translate(-50%,-50%) translate3d(var(--px,0px), var(--py,0px), 0);
  border-radius:50%;
  background:radial-gradient(circle at 38% 34%, rgba(139,241,255,.16), rgba(31,111,255,.10) 52%, transparent 70%);
  border:1px solid rgba(139,241,255,.22);
  box-shadow:0 0 90px rgba(31,111,255,.30), inset 0 0 60px rgba(56,225,255,.08);
}
.art__svg,.art__slash{ position:absolute; inset:0; width:100%; height:100%; }
.art__svg{ will-change:transform; }

/* El parallax del hero escribe --px/--py (ver app.js) y cada capa las compone
   con su propio transform. Escribir `transform` desde el JS pisaba el centrado
   del disco y el encuadre del clip de acción. */
.art__svg,.art__slash,.art__photo,.art__video{
  transform:translate3d(var(--px,0px), var(--py,0px), 0);
}
.art__city{ opacity:1; }
.art__windows rect{ fill:var(--cyan-2); opacity:.5; animation:blink 5s steps(1) infinite; }
.art__windows rect:nth-child(2n){ animation-delay:1.4s; opacity:.3 }
.art__windows rect:nth-child(3n){ animation-delay:2.7s; }
@keyframes blink{ 0%,72%{opacity:.45} 76%{opacity:.05} 80%{opacity:.6} 100%{opacity:.45} }
.art__photo{
  position:absolute; inset:3% 0 0; width:100%; height:97%;
  object-fit:contain; object-position:56% bottom; display:none;
  filter:drop-shadow(0 0 70px rgba(31,111,255,.45));
  will-change:transform;
}
.hero__art.has-photo .art__photo{ display:block; }

/* Regla base de los tres clips. La escribe el de reposo, que es 9:16 de cuerpo
   entero (640x1138) y se encuadra con object-fit:contain + object-position 56%
   bottom. Los otros dos vienen recortados a 800x690 y llevan su propio encuadre
   más abajo, en .art__video--accion. */
/* Dos videos superpuestos: el de reposo va en bucle NATIVO (saltar con
   currentTime produce un parpadeo con un fotograma en blanco y un tirón de
   posición) y el de acción se reproduce una sola vez. Solo uno está visible.
   Sin fundido de entrada a propósito: en una pestaña en segundo plano las
   transiciones no corren y el video quedaría invisible con la ilustración ya
   oculta, o sea un hero vacío. */
.art__video{
  position:absolute; inset:3% 0 0; width:100%; height:97%;
  object-fit:contain; object-position:56% bottom;
  filter:drop-shadow(0 0 70px rgba(31,111,255,.45));
  will-change:transform;
  /* Los clips que no están activos van con opacity 0 y no escondidos del todo: Safari no
     reproduce (ni descarga) un video que considera invisible, y sin reproducir nunca
     llegaba a encenderse la escena en el iPhone. Sin puntero para que el hover/toque
     caiga siempre en el clip activo. */
  opacity:0; pointer-events:none;
}
.hero__art.has-video .art__video.is-on{ opacity:1; pointer-events:auto; }

/* El clip de acción viene RECORTADO al cuadro que el hero muestra de verdad:
   800x690 px tomados del original 1280x720 en (210,11), sin reescalar. Con eso
   el encuadre se reduce a pegarlo al alto del lienzo y correrlo con el mismo
   56% de referencia que usa el de reposo.

   Lo que había antes (`width:174.8%; object-fit:fill`) ataba el ancho al ANCHO
   del lienzo y el alto a su ALTO, así que la caja no tenía la relación de
   aspecto del archivo y el personaje salía un 5,6% más flaco — y la
   deformación cambiaba con el tamaño de la ventana. Aquí la escala es uniforme siempre:
   `width:auto` la saca de la relación natural del archivo. */
.art__video--accion{
  inset:0 auto auto 56%;
  width:auto; height:100%;
  /* Mientras el <video> no tiene metadatos su tamaño intrínseco es 300x150, o
     sea 2:1, y `width:auto` daría el doble de ancho por un instante. Fijar la
     relación evita ese parpadeo; tiene que ser la del archivo (ffprobe: 800x690
     con SAR 1:1) o `object-fit:contain` empezaría a poner franjas. */
  aspect-ratio:800 / 690;
  transform:translateX(-56.5618%) translate3d(var(--px,0px), var(--py,0px), 0);
}

/* ===========================================================
   Escena interactiva del hero
   reposo (pelo al viento) -> hover: se da vuelta, corta el bloque de ERP,
   sale el logo y queda respirando en la pose final, del mismo tamaño
   =========================================================== */

/* la zona sensible es el personaje; el resto del lienzo no estorba */
.art__photo{ pointer-events:auto; }
.hero__art.is-idle .art__video.is-on{ cursor:pointer; }
.hero__art.solo-reposo .art__video.is-on{ cursor:default; }
.hero__art.is-final .art__video,
.hero__art.is-final .art__photo{ cursor:default; }

.art__hint{
  position:absolute; left:34%; bottom:14%; transform:translateX(-50%); z-index:5;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--dim); white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity .5s ease .8s;
}
.hero__art.is-idle .art__hint{ opacity:.75; }

/* ---------- el bloque de E.R.P. ---------- */
.erp{
  position:absolute; left:39%; top:47%; width:172px; height:118px;
  transform:translate(-50%,-50%) scale(.45); transform-origin:center;
  opacity:0; pointer-events:none; z-index:2;
}
.hero__art.erp-in .erp{ animation:erpEntra .42s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes erpEntra{
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.45) rotate(-8deg); }
  100% { opacity:1; transform:translate(-50%,-50%) scale(1) rotate(-4deg); }
}
.erp__piece{
  position:absolute; inset:0; display:grid; place-items:center;
  clip-path:var(--clip);
  background:linear-gradient(148deg,#18263f 0%,#0a1120 100%);
  border:1px solid rgba(124,164,224,.34);
  box-shadow:inset 0 0 44px rgba(0,0,0,.65);
}
.erp__piece b{
  font-family:var(--f-head); font-weight:900; font-size:30px; letter-spacing:.06em;
  color:#6b7f9f; text-shadow:0 2px 0 rgba(0,0,0,.55);
}
/* rótulo de sistema viejo, para que se lea como lo que se está rompiendo */
.erp::after{
  content:'SISTEMA HEREDADO'; position:absolute; left:0; right:0; bottom:-26px;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--dim); text-align:center;
}
.hero__art.erp-break .erp::after{ animation:erpRotulo .5s ease forwards; }
@keyframes erpRotulo{ to{ opacity:0; transform:translateY(10px); } }
.hero__art.erp-break .erp{ opacity:1; animation:none; transform:translate(-50%,-50%) scale(1) rotate(-4deg); }
.hero__art.erp-break .erp__piece{
  animation:erpRompe .95s cubic-bezier(.2,.7,.35,1) forwards;
}
@keyframes erpRompe{
  0%   { transform:translate(0,0) rotate(0deg); opacity:1; filter:brightness(2.4); }
  14%  { filter:brightness(1); }
  100% { transform:translate(var(--dx),var(--dy)) rotate(var(--rot)); opacity:0; }
}

/* ---------- destello del impacto ---------- */
.burst{
  position:absolute; left:39%; top:47%; width:14px; height:14px; z-index:3;
  transform:translate(-50%,-50%); border-radius:50%; opacity:0; pointer-events:none;
  background:radial-gradient(circle, #fff 0%, var(--cyan-2) 22%, rgba(31,111,255,.5) 46%, transparent 72%);
}
.hero__art.erp-break .burst{ animation:burst .6s cubic-bezier(.15,.8,.3,1); }
@keyframes burst{
  0%   { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(46); }
}

/* ---------- logo que nace del corte ----------
   Va arriba y no al centro: la escena ya no se aleja, así que el personaje
   ocupa el medio del lienzo a tamaño completo y ahí el logo le tapaba la cara. */
.reveal-logo{
  position:absolute; left:30%; top:15%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  opacity:0; pointer-events:none; z-index:4; text-align:center;
}
.reveal-logo__img{
  width:auto; height:64px;
  filter:drop-shadow(0 0 18px rgba(56,225,255,.55));
}
.reveal-logo__tag{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ink-2);
}
.hero__art.logo-in .reveal-logo{ animation:logoEntra 1s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes logoEntra{
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.82); filter:blur(8px); }
  35%  { opacity:1; }
  100% { opacity:1; transform:translate(-50%,-50%) scale(1); filter:blur(0); }
}
.hero__art.is-final .reveal-logo{ opacity:1; }

/* ---------- pose final ----------
   El personaje se queda del mismo tamaño, respirando: ni se aleja ni se
   achica. Lo único que cambia es que el logo se queda fijo y aparece el
   botón de repetir. */

.art__replay{
  position:absolute; right:13%; bottom:11%; z-index:5;   /* 8% lo dejaba encima del texto vertical */
  font-family:var(--f-mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-2); background:rgba(5,8,15,.72); backdrop-filter:blur(6px);
  border:1px solid var(--edge-2);
  padding:8px 14px; cursor:pointer; opacity:0; pointer-events:none;
  transition:opacity .5s ease .6s, color .25s, border-color .25s;
}
.hero__art.is-final .art__replay{ opacity:1; pointer-events:auto; }
.art__replay:hover{ color:var(--cyan); border-color:var(--cyan); }

@media (prefers-reduced-motion:reduce){
  .erp,.burst,.reveal-logo{ display:none; }
}
.hero__art.has-video .art__photo{ display:none; }

/* cortes en el aire */
.slash{ opacity:0; }
.slash__glow,.slash__core{ fill:none; stroke-linecap:round; }
.slash__glow{ stroke:var(--cyan); stroke-width:16; opacity:.55; filter:url(#fSlash); }
.slash__core{ stroke:#ffffff; stroke-width:3.5; }
.slash.is-cut{ opacity:1; }
.slash.is-cut .slash__glow,
.slash.is-cut .slash__core{
  stroke-dasharray:var(--seg) 3000;
  animation:cut .62s cubic-bezier(.16,.86,.28,1) forwards;
}
.slash.is-cut .slash__glow{ animation-duration:.72s; }
@keyframes cut{
  0%   { stroke-dashoffset:var(--seg); opacity:0; }
  12%  { opacity:1; }
  55%  { opacity:1; }
  100% { stroke-dashoffset:-1400; opacity:0; }
}
.hero__art.is-flash .art__halo{ animation:flash .5s ease-out; }
@keyframes flash{ 0%{ opacity:1; filter:blur(6px) brightness(2.4) } 100%{ opacity:.85; filter:blur(6px) brightness(1) } }

/* ---------- STRIP MÉTRICAS ---------- */
.strip{ position:relative; z-index:2; border-top:1px solid var(--edge); border-bottom:1px solid var(--edge);
  background:linear-gradient(180deg, rgba(10,17,32,.6), rgba(5,8,15,.6)); backdrop-filter:blur(6px); }
.strip__in{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--edge);
  max-width:1440px; margin:0 auto; }
.stat{ background:var(--bg); padding:clamp(26px,3.4vw,44px) clamp(18px,2.4vw,34px); }
.stat b{ display:block; font-family:var(--f-head); font-weight:900; font-size:clamp(2.2rem,3.6vw,3.4rem);
  line-height:1; letter-spacing:-.03em;
  background:linear-gradient(120deg,#fff,var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat span{ display:block; margin-top:12px; font-family:var(--f-mono); font-size:11px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--dim); line-height:1.7; }

/* ---------- SECCIONES ---------- */
.section{ position:relative; z-index:2; padding:clamp(72px,10vw,150px) var(--pad); max-width:1440px; margin:0 auto; }
.section__head{ margin-bottom:clamp(34px,5vw,64px); }
.section h2{
  font-family:var(--f-head); font-weight:900; margin:0;
  font-size:clamp(1.9rem,4.2vw,3.5rem); line-height:1.02; letter-spacing:-.03em;
  text-transform:uppercase; color:#eef2fa;
}
.section h2 .hl{ color:var(--cyan); }

.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1px; background:var(--edge); border:1px solid var(--edge); }
.card{ background:var(--bg); padding:clamp(26px,3vw,40px); position:relative; transition:background .3s; }
.card::after{ content:''; position:absolute; left:0; top:0; width:100%; height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--blue)); transform:scaleX(0); transform-origin:left; transition:transform .4s ease; }
.card:hover{ background:var(--panel); }
.card:hover::after{ transform:scaleX(1); }
.card__num{ font-family:var(--f-mono); font-size:11px; letter-spacing:.28em; color:var(--blue-2); }
.card h3{ font-family:var(--f-head); font-weight:800; text-transform:uppercase; letter-spacing:-.01em;
  font-size:1.16rem; margin:18px 0 12px; }
.card p{ margin:0; font-size:14.5px; line-height:1.75; color:var(--ink-2); }

/* ---------- IA ---------- */
.section--ai{ border-top:1px solid var(--edge); }
.ai__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px); align-items:center; }
/* Sin esto, el <pre> de la terminal impone su ancho al grid (min-width:auto por
   defecto en los items) y el sitio entero gana scroll horizontal en móvil. */
.ai__grid > *, .cards > *, .strip__in > *{ min-width:0; }
.ticks{ list-style:none; margin:32px 0 0; padding:0; }
.ticks li{ position:relative; padding:12px 0 12px 30px; border-bottom:1px solid var(--edge);
  font-size:14.5px; color:var(--ink-2); }
.ticks li::before{ content:''; position:absolute; left:0; top:19px; width:12px; height:12px;
  border-left:1.5px solid var(--cyan); border-bottom:1.5px solid var(--cyan); transform:rotate(-45deg) scale(.9); }
.term{ border:1px solid var(--edge-2); background:rgba(8,14,26,.85); backdrop-filter:blur(8px);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(56,225,255,.06) inset; }
.term__bar{ display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid var(--edge); }
.term__bar i{ width:9px; height:9px; border-radius:50%; background:var(--edge-2); }
.term__bar i:first-child{ background:var(--cyan); }
.term__bar span{ margin-left:12px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim); }
.term__body{ margin:0; padding:22px 18px 26px; overflow-x:auto; }
.term__body code{ font-family:var(--f-mono); font-size:12.4px; line-height:2; color:var(--ink-2); white-space:pre; }
.c-dim{ color:#4d6182 } .c-ok{ color:#3ee08f } .c-warn{ color:#ffb648 } .c-acc{ color:var(--cyan) }
.caret{ display:inline-block; width:8px; height:14px; background:var(--cyan); margin-left:6px;
  vertical-align:-2px; animation:caret 1.1s steps(1) infinite; }
@keyframes caret{ 0%,50%{opacity:1} 51%,100%{opacity:0} }

/* ---------- ABOUT / CTA FINAL ---------- */
.section--about{ border-top:1px solid var(--edge); }
.about{ max-width:900px; }
.section--cta{ border-top:1px solid var(--edge); text-align:center; }
.final h2{ font-size:clamp(2rem,5vw,4rem); }
.final p{ margin:22px auto 0; max-width:52ch; color:var(--ink-2); line-height:1.75; }
.final .cta{ justify-content:center; }

/* ---------- FOOTER ---------- */
.foot{ position:relative; z-index:2; border-top:1px solid var(--edge); padding:34px var(--pad); }
.foot__in{ display:flex; flex-wrap:wrap; gap:18px 34px; align-items:center; max-width:1440px; margin:0 auto; }
.foot__meta{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.foot__in .brand__logo{ margin-right:auto; }
.foot__link{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-2); border-bottom:1px solid var(--edge-2); padding-bottom:2px;
  transition:color .2s, border-color .2s;
}
.foot__link:hover{ color:var(--cyan); border-color:var(--cyan); }

/* ---------- PÁGINA DE DOCUMENTO (privacidad.html) ----------
   Texto largo sobre el mismo fondo del sitio: una columna legible, índice,
   tablas y bloques de datos. Sin hero. */
.doc{
  position:relative; z-index:2; max-width:880px; margin:0 auto;
  padding:calc(var(--nav-h) + clamp(40px,7vw,90px)) var(--pad) clamp(72px,10vw,130px);
}
.doc__head{ margin-bottom:clamp(36px,5vw,60px); }
.doc__head .eyebrow{ margin-bottom:22px; }
.doc__head h1{
  font-family:var(--f-head); font-weight:900; margin:0;
  font-size:clamp(1.9rem,4.4vw,3.4rem); line-height:1.02; letter-spacing:-.03em;
  text-transform:uppercase; color:#eef2fa;
}
.doc__meta{ margin:18px 0 0; font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.doc__indice{ border:1px solid var(--edge); background:rgba(10,17,32,.55); padding:22px 28px; margin-bottom:clamp(36px,5vw,60px); }
.doc__indice ol{ margin:0; padding-left:1.4em; columns:2; column-gap:36px; font-size:14px; line-height:1.9; color:var(--ink-2); }
.doc__indice li{ break-inside:avoid; }
.doc__indice a:hover{ color:var(--cyan); }
.doc section{ margin-top:clamp(36px,5vw,56px); scroll-margin-top:calc(var(--nav-h) + 16px); }
.doc h2{
  font-family:var(--f-head); font-weight:800; margin:0 0 18px; padding-top:20px; border-top:1px solid var(--edge);
  font-size:clamp(1.25rem,2.2vw,1.6rem); line-height:1.2; letter-spacing:-.01em; text-transform:uppercase; color:#eef2fa;
}
.doc h3{ font-family:var(--f-head); font-weight:700; font-size:16px; margin:26px 0 10px; color:var(--cyan-2); }
.doc p,.doc li{ font-size:15.5px; line-height:1.75; color:var(--ink-2); }
.doc p{ margin:0 0 14px; }
.doc ul,.doc ol{ margin:0 0 14px; padding-left:1.3em; }
.doc li{ margin:6px 0; }
.doc strong{ color:var(--ink); }
.doc a{ color:var(--cyan); text-decoration:underline; text-underline-offset:3px; }
.doc__indice a,.doc h2 a{ text-decoration:none; color:inherit; }
.doc .tabla{ margin:16px 0 22px; overflow-x:auto; }
.doc table{ width:100%; border-collapse:collapse; font-size:14px; line-height:1.55; }
.doc th,.doc td{ text-align:left; vertical-align:top; padding:11px 13px; border:1px solid var(--edge); color:var(--ink-2); }
.doc th{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); background:rgba(10,17,32,.6); }
.doc td strong{ color:var(--ink); }
.doc__datos{ display:grid; grid-template-columns:max-content 1fr; gap:8px 22px; margin:0 0 16px; }
.doc__datos dt{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); padding-top:4px; }
.doc__datos dd{ margin:0; font-size:15.5px; color:var(--ink); }
@media (max-width:760px){
  .doc__indice ol{ columns:1; }
  .doc__datos{ grid-template-columns:1fr; gap:2px 0; }
  .doc__datos dd{ margin-bottom:10px; }
}

/* ---------- REVEAL ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.2,.7,.3,1) var(--d,0s), transform .8s cubic-bezier(.2,.7,.3,1) var(--d,0s); }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .hero{ align-items:end; min-height:100svh; }
  .hero__copy{ max-width:none; }
  .hero__copy{ padding-bottom:96px; }
  /* En el celular el texto va encima de Laia y se quedaba con los toques: sin esto no
     había cómo tocarla para el corte. Los botones sí siguen recibiendo el toque. */
  .hero__copy{ pointer-events:none; }
  .hero__copy a, .hero__copy button{ pointer-events:auto; }
  .hero__art{ width:100%; opacity:.42;
    mask-image:linear-gradient(90deg, transparent 0, #000 35%, #000 100%); }
  .ai__grid{ grid-template-columns:1fr; }
  .strip__in{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .nav__cta:not(.nav__cta--mobile){ display:none; }
  .nav__burger{ display:block; }
  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; gap:0;
    background:rgba(5,8,15,.97); backdrop-filter:blur(16px); border-bottom:1px solid var(--edge);
    padding:8px var(--pad) 26px; transform:translateY(-14px); opacity:0; pointer-events:none; transition:.3s;
  }
  .nav.is-open .nav__links{ transform:none; opacity:1; pointer-events:auto; }
  .nav__links a{ padding:16px 0; border-bottom:1px solid var(--edge); font-size:13px; }
  .nav__cta--mobile{ display:inline-flex; justify-content:center; margin-top:20px; border-bottom:0; }
  .hero__scroll{ display:none; }
  .hero__status{ font-size:9.5px; letter-spacing:.16em; }
  .eyebrow{ display:block; font-size:9.5px; letter-spacing:.18em; line-height:2; }
  .eyebrow--hero{ font-size:11.5px; }
  .eyebrow__rule{ display:inline-block; width:26px; margin-right:12px; vertical-align:middle; }
  .strip__in{ grid-template-columns:1fr; }
  .cta{ gap:12px; }
  .btn{ padding:15px 24px; font-size:12.5px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ===========================================================
   FONDO DE CIUDAD — A PRUEBA
   Todo cuelga de body.fondo-ciudad. Para volver al skyline en SVG basta
   con sacar esa clase del <body>. Para sacarlo del todo: borrar este
   bloque, el <img class="hero__ciudad"> y assets/img/ciudad-*.webp.
   =========================================================== */
.hero__ciudad{ display:none; }

body.fondo-ciudad .hero__ciudad{
  display:block; position:absolute; inset:0; z-index:0;
  width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:50% 100%;   /* ancla la azotea abajo */
  pointer-events:none;
}

/* La ilustración ya trae su propia ciudad: el skyline en SVG sobraría. */
body.fondo-ciudad .art__city,
body.fondo-ciudad .art__windows{ display:none; }

/* Velo: sin esto el titular pelea con las luces de la avenida. Fuerte a la
   izquierda (donde va el texto), casi nulo a la derecha (donde va ella). Va en
   z-index 1, o sea encima de la foto pero DEBAJO de .hero__art, que también
   está en 1 y viene después en el DOM: así el velo no apaga al personaje. */
body.fondo-ciudad .hero::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    /* la columna del texto */
    linear-gradient(100deg, rgba(3,6,13,.95) 0%, rgba(3,6,13,.90) 20%,
                            rgba(3,6,13,.66) 40%, rgba(3,6,13,.30) 58%,
                            rgba(3,6,13,.07) 78%, transparent 100%),
    /* el piso, para el reloj de abajo */
    linear-gradient(to top, rgba(3,6,13,.82) 0%, rgba(3,6,13,.36) 15%, transparent 36%),
    /* un punto más oscuro justo detrás del párrafo */
    radial-gradient(64% 42% at 16% 60%, rgba(3,6,13,.45), transparent 72%);
}

/* .fx-grid y .fx-vignette NO se tocan a propósito. Son fijas y viven en
   z-index 0, o sea que el hero (z-index 2, ahora opaco por la foto) las tapa
   entera: bajarles la opacidad no cambia nada en el hero y sí se las sacaría
   al resto de la página. Comprobado poniendo la reja en 1 y en 0 con la foto
   puesta: el hero sale idéntico. La cuadrícula que se ve en el cielo es la
   que trae dibujada la propia ilustración.
   El halo y el disco sí van dentro de .hero__art, así que esos sí se atenúan. */
body.fondo-ciudad .art__halo{ opacity:.45; }
body.fondo-ciudad .art__disc{ opacity:.35; }

/* Los textos chicos quedaban ilegibles sobre las luces de la avenida. */
body.fondo-ciudad .art__hint,
body.fondo-ciudad .hero__status,
body.fondo-ciudad .hero__scroll{
  text-shadow:0 1px 12px rgba(3,6,13,.98), 0 0 4px rgba(3,6,13,.95);
}
/* la pista del mouse cae justo sobre el bokeh de la avenida, el punto más
   brillante del cuadro: ahí la sombra no alcanza y necesita fondo propio */
body.fondo-ciudad .art__hint{
  padding:7px 14px; background:rgba(3,6,13,.72);
  border:1px solid var(--edge); backdrop-filter:blur(5px);
}
body.fondo-ciudad .hero__art.is-idle .art__hint{ opacity:.92; }

/* La foto es 2:1 y el hero del celular es vertical: con object-fit:cover se
   ve una tajada angosta —una pared de vidrio— y el personaje, que ahí va al
   42% de opacidad, se mezcla con el edificio. Así que en pantalla chica la
   ciudad NO cubre: va como banda de abajo, que es como está compuesta la
   imagen (cielo arriba, skyline y azotea abajo), y el texto queda sobre
   cielo limpio. */
@media (max-width:1080px){
  body.fondo-ciudad .hero__ciudad{
    top:auto; bottom:0; height:54%;
    object-position:38% 100%;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 26%, #000 100%);
            mask-image:linear-gradient(to bottom, transparent 0, #000 26%, #000 100%);
  }
  body.fondo-ciudad .hero::before{
    background:linear-gradient(to bottom, rgba(3,6,13,.55) 0%, rgba(3,6,13,.35) 30%,
                                          rgba(3,6,13,.55) 62%, rgba(3,6,13,.88) 100%);
  }
}