/* =============================================================
   KATSO — styles.css
   Blanco dominante · negro para estructura · ámbar del logo como acento
   1. Tokens  2. Reset  3. Utilidades  4. Tipografía  5. Componentes
   6. Secciones  7. Responsive  8. Preferencias de movimiento
   ============================================================= */

/* ============ 1. TOKENS ============ */
:root{
  --paper:   #ffffff;
  --paper-2: #f7f7f5;
  --paper-3: #efefeb;
  --ink:     #0b0b0d;
  --ink-2:   #3d4147;
  --mute:    #676c73;
  --line:    #e4e4e0;
  --line-2:  #cfcfca;

  --amber:     #e8a33d;   /* solo relleno / trazo, nunca texto sobre blanco */
  --amber-ink: #8a5c12;   /* variante accesible para texto sobre blanco */

  --wrap: 1200px;
  --gut: clamp(1.1rem, 4vw, 2.5rem);
  --r: 12px;
  --r-lg: 18px;

  --ff-d: "Inter Tight", "Segoe UI", system-ui, sans-serif;
  --ff-b: "Inter", "Segoe UI", system-ui, sans-serif;
  --ff-m: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --nav-h: 74px;
}

/* ============ 2. RESET ============ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  overflow-x:clip;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--nav-h) + 18px);
  -webkit-text-size-adjust:100%;
}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-b);
  font-size:clamp(.97rem,.35vw + .9rem,1.04rem);
  line-height:1.68;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
ul,ol{ list-style:none; }
::selection{ background:var(--amber); color:#151515; }

::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--paper-2); }
::-webkit-scrollbar-thumb{ background:#cccbc6; border-radius:99px; border:3px solid var(--paper-2); }
::-webkit-scrollbar-thumb:hover{ background:#adaca7; }

/* ============ 3. UTILIDADES ============ */
.wrap{ width:min(100% - (var(--gut) * 2), var(--wrap)); margin-inline:auto; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 10px 0; font-weight:600;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:4px; }

.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .75s var(--ease-out), transform .75s var(--ease-out);
  transition-delay:calc(var(--d, 0) * 85ms);
}
.reveal.is-in{ opacity:1; transform:none; }
.motion-off .reveal{ opacity:1 !important; transform:none !important; }
.motion-off .hero-title .line > span{ transform:none !important; animation:none !important; }

/* ============ 4. TIPOGRAFÍA ============ */
h1,h2,h3,h4{ font-family:var(--ff-d); font-weight:600; line-height:1.12; letter-spacing:-.022em; }

.eyebrow{
  font-family:var(--ff-m);
  font-size:.72rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--mute);
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{ content:""; width:24px; height:2px; background:var(--amber); flex:none; border-radius:2px; }

.sec-head{ max-width:64ch; margin-bottom:clamp(2.4rem,5vw,3.6rem); }
.sec-head--center{ max-width:52ch; margin-inline:auto; text-align:center; }
.sec-head--center .eyebrow{ justify-content:center; }
.sec-head--center .sec-lead{ margin-inline:auto; }

.sec-title{
  font-size:clamp(1.85rem,3.9vw,3rem);
  margin-top:1rem; text-wrap:balance;
}
.sec-lead{
  margin-top:1.1rem; color:var(--ink-2); max-width:58ch;
  font-size:clamp(1rem,.5vw + .9rem,1.12rem);
}

/* ============ 5. COMPONENTES ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.86rem 1.6rem;
  background:var(--ink); color:#fff;
  font-family:var(--ff-b); font-weight:600; font-size:.93rem;
  border:1px solid var(--ink); border-radius:99px; cursor:pointer;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); background:#26262b; box-shadow:0 12px 24px -14px rgba(0,0,0,.6); }
.btn:active{ transform:translateY(0); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover{ background:var(--paper-2); border-color:var(--ink); box-shadow:none; }
.btn-sm{ padding:.58rem 1.2rem; font-size:.86rem; }
.btn-full{ width:100%; }

.pill{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--ff-m); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-2);
  padding:.4rem .9rem; border:1px solid var(--line-2); border-radius:99px;
}
.pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--amber); flex:none; }

/* ---- Tarjetas ---- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.05rem; }
.card{
  position:relative; overflow:hidden;
  padding:1.7rem 1.6rem 1.8rem;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:border-color .35s var(--ease), transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.card::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(300px circle at var(--sx,50%) var(--sy,50%), rgba(232,163,61,.14), transparent 62%);
  transition:opacity .4s var(--ease);
}
.card::after{
  content:""; position:absolute; left:0; top:0; height:3px; width:0;
  background:var(--amber); transition:width .45s var(--ease-out);
}
.card:hover{ transform:translateY(-4px); border-color:var(--line-2); box-shadow:0 20px 40px -28px rgba(11,11,13,.45); }
.card:hover::before{ opacity:1; }
.card:hover::after{ width:100%; }
.card h3{ font-size:1.12rem; margin-bottom:.55rem; }
.card p{ color:var(--mute); font-size:.93rem; }
/* Evita que la última tarjeta quede huérfana en su fila. */
.card--wide{ grid-column:1 / -1; }
.card--wide p{ max-width:70ch; }

/* ---- Maquetas de interfaz (mock) ---- */
.mock{
  border:1px solid var(--line);
  border-radius:14px; overflow:hidden;
  background:var(--paper);
  box-shadow:0 26px 60px -34px rgba(11,11,13,.42);
}
.mock-bar{
  display:flex; align-items:center; gap:.7rem;
  padding:.7rem .95rem;
  background:var(--paper-2); border-bottom:1px solid var(--line);
}
.mock-dots{ display:flex; gap:.32rem; }
.mock-dots i{ width:8px; height:8px; border-radius:50%; background:#d3d3ce; }
.mock-dots i:first-child{ background:var(--amber); }
.mock-name{ font-family:var(--ff-m); font-size:.7rem; letter-spacing:.06em; color:var(--mute); }
.mock-body{ padding:1.1rem 1.1rem 1.2rem; }
.mock-foot{
  margin-top:.95rem; padding-top:.8rem; border-top:1px solid var(--line);
  font-family:var(--ff-m); font-size:.66rem; letter-spacing:.06em; color:var(--mute);
}
.mock-caption{ margin-top:.7rem; font-size:.73rem; color:var(--mute); text-align:right; }

/* Informe de escaneo */
.scan-head{ display:flex; gap:1.6rem; padding-bottom:.9rem; border-bottom:1px solid var(--line); }
.scan-head .k, .con-grid .k{
  display:block; font-family:var(--ff-m); font-size:.63rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--mute); margin-bottom:.15rem;
}
.scan-head b, .con-grid b{ font-size:.88rem; font-weight:600; }
.scan-head .ok, .con-state.ok, .f-st.ok{ color:#1f7a4d; }

.scan-summary{ display:flex; align-items:center; gap:1.4rem; padding:1.1rem 0; }
.scan-gauge{ position:relative; width:88px; flex:none; }
.scan-gauge svg{ width:88px; height:88px; }
.scan-gauge-n{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--ff-d); font-size:1.5rem; font-weight:700; letter-spacing:-.03em;
}
.scan-legend{ display:grid; gap:.42rem; font-size:.84rem; color:var(--ink-2); }
.scan-legend li{ display:flex; align-items:center; gap:.5rem; }
.scan-legend b{ margin-left:auto; font-variant-numeric:tabular-nums; }
.sev{ width:9px; height:9px; border-radius:2px; flex:none; }
.sev--a{ background:#c2410c; } .sev--m{ background:var(--amber); } .sev--b{ background:#9aa0a6; }

.scan-rows{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.scan-rows li{
  display:flex; align-items:center; gap:.7rem;
  padding:.6rem .75rem; background:var(--paper); font-size:.82rem;
}
.tag{
  font-family:var(--ff-m); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.16rem .45rem; border-radius:4px; flex:none;
}
.tag--a{ background:#fdece5; color:#9a3412; }
.tag--m{ background:#fdf3e2; color:#8a5c12; }
.tag--b{ background:#f0f1f2; color:#4b5157; }
.scan-v{ font-weight:500; }
.scan-p{ margin-left:auto; font-family:var(--ff-m); font-size:.72rem; color:var(--mute); }

/* Consola de análisis */
.con-rows{ display:grid; gap:.62rem; }
.con-rows li{ display:flex; align-items:center; gap:.7rem; font-size:.82rem; }
.con-host{ width:38%; font-family:var(--ff-m); font-size:.74rem; color:var(--ink-2); }
.con-bar{ flex:1; height:6px; background:var(--paper-3); border-radius:99px; overflow:hidden; }
.con-bar i{ display:block; height:100%; background:var(--amber); border-radius:99px; }
.con-state{ width:56px; text-align:right; font-family:var(--ff-m); font-size:.72rem; color:var(--mute); }
.con-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:.9rem;
  margin-top:1.1rem; padding-top:.95rem; border-top:1px solid var(--line);
}

/* Panel de flota */
.fleet-rows{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.fleet-rows li{
  display:grid; grid-template-columns:1.1fr 1fr .8fr .8fr; gap:.5rem; align-items:center;
  padding:.62rem .8rem; background:var(--paper); font-size:.82rem;
}
.f-id{ font-family:var(--ff-m); font-size:.76rem; font-weight:500; }
.f-st{ color:var(--mute); font-size:.78rem; }
.f-st.warn{ color:var(--amber-ink); }
.f-v,.f-f{ text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-2); }
.fleet-legend{
  display:grid; grid-template-columns:1.1fr 1fr .8fr .8fr; gap:.5rem;
  margin-top:.55rem; padding:0 .8rem;
  font-family:var(--ff-m); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute);
}
.fleet-legend span:nth-child(3),.fleet-legend span:nth-child(4){ text-align:right; }

/* Diagrama SVG */
.diagram{ width:100%; height:auto; }
/* Equivalente compacto del diagrama: solo en pantallas estrechas */
.flow{ display:none; }
.flow li{ position:relative; padding:0 0 1.15rem 1.6rem; border-left:2px solid var(--line); }
.flow li:last-child{ padding-bottom:0; border-left-color:transparent; }
.flow li::before{
  content:""; position:absolute; left:-6px; top:.45rem;
  width:10px; height:10px; border-radius:50%;
  background:var(--paper); border:2px solid var(--line-2);
}
.flow-on::before{ background:var(--amber); border-color:var(--amber); }
.flow-k{
  display:block; font-family:var(--ff-m); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute);
}
.flow b{ display:block; font-family:var(--ff-d); font-size:.98rem; font-weight:600; }
.flow-d{ display:block; font-size:.84rem; color:var(--mute); }
.d-box{ fill:var(--paper); stroke:var(--line-2); stroke-width:1.2; }
.d-box--key{ fill:var(--ink); stroke:var(--ink); }
.d-box--live{ fill:#fdf3e2; stroke:var(--amber); stroke-width:1.4; }
.d-box--dim{ fill:var(--paper-2); stroke:var(--line); stroke-dasharray:4 4; }
.d-zone{ fill:none; stroke:var(--line-2); stroke-width:1.2; stroke-dasharray:6 6; }
.d-line{ stroke:var(--ink); stroke-width:1.3; fill:none; }
.d-lb{ font-family:"Inter Tight",sans-serif; font-size:14px; font-weight:600; fill:var(--ink); }
.d-lb--dim{ fill:var(--mute); font-weight:500; }
.d-sm{ font-family:"JetBrains Mono",monospace; font-size:8.8px; fill:var(--mute); letter-spacing:.04em; }
.d-cap{ font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:.16em; fill:var(--mute); }
.d-cap--zone{ fill:var(--amber-ink); }
/* etiquetas que van dentro de las cajas oscuras */
.d-lb--on{ fill:#fff; }
.d-sm--on{ fill:rgba(255,255,255,.66); }

/* ============ SPLASH ============ */
.splash{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center; background:var(--paper);
  animation:splashOut .6s var(--ease-out) 1.25s forwards;
}
.splash.is-out{ animation:splashOut .6s var(--ease-out) forwards; }
@keyframes splashOut{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
.splash-inner{ display:flex; align-items:center; }
.splash-logo{
  height:clamp(38px,7vw,54px); width:auto;
  animation:markIn .85s var(--ease-out) both;
}
@keyframes markIn{ from{ opacity:0; transform:scale(.9); } to{ opacity:1; transform:none; } }

/* ============ NAV ============ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:120;
  background:rgba(255,255,255,.9);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
@supports (backdrop-filter: blur(12px)){
  .nav{ background:rgba(255,255,255,.72); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); }
}
.nav.is-stuck{ border-bottom-color:var(--line); box-shadow:0 1px 20px -10px rgba(11,11,13,.25); }
.nav-inner{
  width:min(100% - (var(--gut) * 2), var(--wrap)); margin-inline:auto;
  height:var(--nav-h); display:flex; align-items:center; gap:1.4rem;
}
.brand{ display:flex; align-items:center; color:var(--ink); flex:none; }
/* Logotipo oficial. El original es RGB sin canal alfa (fondo blanco sólido):
   estas versiones se recortan del arte real y llevan el blanco a transparente,
   con una variante clara para las superficies negras. */
.brand-logo{
  height:34px; width:auto;
  transition:opacity .3s var(--ease);
}
.brand:hover .brand-logo{ opacity:.72; }

.nav-links{ display:flex; gap:.2rem; margin-left:auto; }
.nav-links a{
  position:relative; padding:.5rem .85rem; border-radius:99px;
  font-size:.9rem; color:var(--ink-2); font-weight:500;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav-links a:hover{ color:var(--ink); background:var(--paper-2); }
.nav-links a.is-active{ color:var(--ink); }
.nav-links a.is-active::after{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.2rem; height:2px;
  background:var(--amber); border-radius:2px;
}
.nav-cta{ flex:none; }

.nav-burger{
  display:none; width:42px; height:42px; margin-left:auto;
  background:transparent; border:1px solid var(--line-2); border-radius:11px; cursor:pointer; position:relative;
}
.nav-burger span{
  position:absolute; left:11px; width:20px; height:1.6px; background:var(--ink); border-radius:2px;
  transition:transform .35s var(--ease-out);
}
.nav-burger span:nth-child(1){ top:16px; }
.nav-burger span:nth-child(2){ top:23px; }
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

.nav-panel{
  display:none; flex-direction:column;
  padding:.4rem var(--gut) 1.3rem;
  background:var(--paper); border-bottom:1px solid var(--line);
  /* Nunca más alto que la pantalla: en móvil apaisado el panel superaba el alto
     del viewport y el último enlace quedaba cortado e inalcanzable. */
  max-height:calc(100vh - var(--nav-h));
  max-height:calc(100svh - var(--nav-h));
  overflow-y:auto;
  overscroll-behavior:contain;   /* su scroll no se propaga a la página */
}
.nav-panel.is-open{ display:flex; }
.nav-panel a{ padding:.85rem .2rem; border-bottom:1px solid var(--line); color:var(--ink-2); font-size:1rem; }
.nav-panel .nav-panel-cta{ color:var(--amber-ink); border-bottom:0; font-weight:600; }

.nav-progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:0%;
  background:var(--amber); transition:width .1s linear;
}

/* ============ 6. SECCIONES ============ */
.section{ position:relative; padding:clamp(4.2rem,8.5vw,7rem) 0; }
.section--alt{ background:var(--paper-2); }
.section--alt + .section--alt{ border-top:1px solid var(--line); }

/* Superficies oscuras: la sección de contacto, la tesis y la franja de cifras.
   Color literal a propósito: estas reglas redefinen --ink justo debajo, así que
   usar var(--ink) aquí daría fondo blanco sobre texto blanco. */
.section--dark,
.numbers-band,
.foot{
  background:#0b0b0d; color:#fff;
  --ink:#ffffff; --ink-2:#c3c7cc; --mute:#8d939a;
  --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.26);
  --paper:#141418; --paper-2:#1a1a1f;
  /* Sobre negro el ámbar accesible es el vivo, no el oscuro. */
  --amber-ink:#e8a33d;
}
.section--dark .eyebrow::before{ background:var(--amber); }

/* ---- HERO ---- */
.hero{ padding:calc(var(--nav-h) + clamp(2.6rem,6vw,4.6rem)) 0 clamp(2.6rem,5vw,3.6rem); }
.hero-grid{
  display:grid; grid-template-columns:1fr .92fr; gap:clamp(2rem,5vw,4.2rem); align-items:center;
}
.hero-title{
  font-size:clamp(2.5rem,5.6vw,4.35rem);
  line-height:1.04; letter-spacing:-.035em;
  margin:1.4rem 0 0; font-weight:600;
}
.hero-title .line{
  display:block; overflow:hidden;
  /* El recorte enmascara la animación de entrada. Con line-height 1.04 los rasgos
     descendentes (g, j, p, q) rozan el borde: este aire evita que se corten si
     entra la fuente de respaldo, y el margen negativo deja la maquetación igual. */
  padding-bottom:.14em;
  margin-bottom:-.14em;
}
.hero-title .line > span{
  display:block; transform:translateY(118%);
  animation:lineUp 1s var(--ease-out) forwards;
}
.hero-title .line:nth-child(1) > span{ animation-delay:1.55s; }
.hero-title .line:nth-child(2) > span{ animation-delay:1.66s; }
.hero-title .line:nth-child(3) > span{ animation-delay:1.77s; }
@keyframes lineUp{ to{ transform:translateY(0); } }

.hero-lead{ margin-top:1.5rem; max-width:52ch; font-size:clamp(1rem,.55vw + .9rem,1.13rem); color:var(--ink-2); }
.hero-lead strong{ color:var(--ink); font-weight:600; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.9rem; }
.hero-note{ margin-top:1.6rem; font-size:.85rem; color:var(--mute); max-width:46ch; }
.hero-note b{ color:var(--ink-2); font-weight:600; }

.hero-visual{ min-width:0; }

.hero-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem;
  margin-top:clamp(2.8rem,6vw,4.4rem);
  padding-top:1.8rem; border-top:1px solid var(--line);
}
.hstat b{
  display:block; font-family:var(--ff-d); font-size:clamp(1.6rem,2.6vw,2.2rem);
  font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.hstat span{ display:block; margin-top:.25rem; font-size:.81rem; color:var(--mute); line-height:1.45; }

/* ---- MARQUEE ---- */
.strip{ border-block:1px solid var(--line); background:var(--paper); padding:.95rem 0; overflow:hidden; }
.marquee{ display:flex; width:max-content; }
.marquee-row{
  display:flex; align-items:center; gap:1.5rem; padding-right:1.5rem;
  font-family:var(--ff-m); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); white-space:nowrap;
  animation:slide 38s linear infinite;
}
.marquee-row i{ color:var(--amber); font-style:normal; }
@keyframes slide{ to{ transform:translateX(-100%); } }
.strip:hover .marquee-row{ animation-play-state:paused; }

/* ---- ENFOQUE ---- */
.vs{ display:grid; grid-template-columns:1fr 1fr; gap:1.05rem; }
.vs-card{ padding:1.9rem 1.8rem; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper); }
.vs-card--on{ border-color:var(--ink); background:var(--paper); box-shadow:0 22px 46px -32px rgba(11,11,13,.5); }
.vs-tag{
  font-family:var(--ff-m); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--mute); margin-bottom:.8rem;
}
.vs-card--on .vs-tag{ color:var(--amber-ink); }
.vs-q{ font-size:1.2rem; margin-bottom:1.1rem; text-wrap:balance; }
.vs-list li{ position:relative; padding-left:1.7rem; margin-bottom:.72rem; font-size:.93rem; color:var(--ink-2); }
.vs-list--off li{ color:var(--mute); }
.vs-list--off li::before{
  content:""; position:absolute; left:.15rem; top:.62rem; width:11px; height:11px;
  border-radius:50%; border:1.6px solid #c2c5c8;
}
.vs-list--yes li::before{
  content:""; position:absolute; left:.2rem; top:.5rem; width:11px; height:6px;
  border-left:2px solid var(--amber); border-bottom:2px solid var(--amber); transform:rotate(-45deg);
}

.band{
  position:relative; margin-top:clamp(2.2rem,4.5vw,3.2rem);
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
}
.band img{ width:100%; height:clamp(200px,26vw,320px); object-fit:cover; filter:grayscale(1) contrast(1.05); }
.band figcaption{
  position:absolute; inset:auto 0 0 0; padding:clamp(1.2rem,3vw,2rem);
  background:linear-gradient(to top, rgba(11,11,13,.92), rgba(11,11,13,.55) 60%, transparent);
}
.band-quote{ color:#fff; font-size:clamp(.9rem,1.3vw,1.05rem); max-width:62ch; }
.band-quote b{ color:var(--amber); font-weight:600; }

/* ---- SLIDER ---- */
.slider-tabs{
  display:flex; gap:.3rem; flex-wrap:wrap;
  padding:.35rem; border:1px solid var(--line); border-radius:99px;
  background:var(--paper); width:max-content; max-width:100%; margin-bottom:1.5rem;
}
.slider-tab{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.6rem 1.3rem; border:0; border-radius:99px; cursor:pointer;
  background:transparent; color:var(--mute); font-size:.91rem; font-weight:500;
  transition:color .3s var(--ease), background .3s var(--ease);
}
.slider-tab .dot{ width:7px; height:7px; border-radius:50%; background:var(--line-2); flex:none; transition:background .3s; }
.slider-tab:hover{ color:var(--ink-2); }
.slider-tab.is-active{ background:var(--ink); color:#fff; }
.slider-tab.is-active .dot{ background:var(--amber); }

.slider-view{ overflow:hidden; border-radius:var(--r-lg); }
.slider-track{ display:flex; transition:transform .7s var(--ease-out); }
.slide{ flex:0 0 100%; min-width:0; padding:1px; }
.slide-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,3.5vw,3rem); align-items:center;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--paper); padding:clamp(1.6rem,3.4vw,2.8rem);
}
.slide-title{ font-size:clamp(1.7rem,3vw,2.35rem); margin:1rem 0 .5rem; letter-spacing:-.03em; }
.slide-title span{ color:var(--mute); font-weight:500; }
.slide-sub{ font-size:1.04rem; font-weight:600; }
.slide-sub em{ font-style:normal; color:var(--amber-ink); }
.slide-text{ margin-top:.9rem; color:var(--mute); font-size:.94rem; }
.slide-text b{ color:var(--ink-2); font-weight:600; }
.slide-feats{ margin-top:1.4rem; display:grid; gap:.85rem; }
.slide-feats li{ padding-left:1.1rem; border-left:2px solid var(--line); }
.slide-feats b{ display:block; font-family:var(--ff-d); font-size:.95rem; font-weight:600; }
.slide-feats span{ display:block; font-size:.85rem; color:var(--mute); line-height:1.55; }
.slide-actions{ display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.7rem; }
.slide-visual{ min-width:0; }

.slider-nav{ display:flex; align-items:center; gap:1rem; margin-top:1.3rem; }
.sarrow{
  width:42px; height:42px; display:grid; place-items:center;
  background:var(--paper); color:var(--ink-2);
  border:1px solid var(--line-2); border-radius:50%; cursor:pointer;
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease-out);
}
.sarrow svg{ width:20px; height:20px; }
.sarrow:hover{ border-color:var(--ink); color:var(--ink); }
.sarrow:active{ transform:scale(.93); }
.scount{ font-family:var(--ff-m); font-size:.8rem; color:var(--mute); }
.scount b{ color:var(--ink); font-weight:500; }

/* ---- STEPS ---- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.05rem; }
.step{
  position:relative; padding:1.7rem 1.5rem 1.8rem;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper);
  transition:border-color .35s var(--ease), transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.step:hover{ border-color:var(--ink); transform:translateY(-4px); box-shadow:0 20px 40px -30px rgba(11,11,13,.5); }
.step-n{
  display:block; font-family:var(--ff-m); font-size:.75rem; letter-spacing:.12em;
  color:var(--amber-ink); margin-bottom:1.5rem;
}
.step h3{ font-size:1.08rem; margin-bottom:.45rem; }
.step p{ color:var(--mute); font-size:.89rem; }
.steps-result{ margin-top:1.6rem; font-size:1rem; color:var(--ink-2); max-width:64ch; }
.steps-result b{ color:var(--ink); font-weight:600; }

.layers{
  margin-top:clamp(2.4rem,5vw,3.4rem);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--paper-2); padding:clamp(1.5rem,3vw,2.1rem);
}
.layers-head{
  font-family:var(--ff-m); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--amber-ink); margin-bottom:1.2rem;
}
.layers-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:11px; overflow:hidden; }
.layer{ padding:1.25rem 1.15rem; background:var(--paper); }
.layer-k{ display:block; font-family:var(--ff-m); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.45rem; }
.layer p{ font-size:.84rem; color:var(--mute); line-height:1.55; }
.layers-foot{ margin-top:1.2rem; font-size:.86rem; color:var(--mute); }
.layers-foot b{ color:var(--ink-2); font-weight:600; }

/* ---- IMPACTO EN EL NEGOCIO ---- */
.impact{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.05rem;
  margin-top:clamp(2.2rem,4.5vw,3rem);
}
.impact-card{
  padding:1.6rem 1.5rem; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--paper);
}
.impact-k{
  display:block; font-family:var(--ff-d); font-size:1.02rem; font-weight:600;
  margin-bottom:.6rem;
}
.impact-card p{ color:var(--mute); font-size:.92rem; }

/* ---- ANTES / DESPUÉS ---- */
.ba{
  display:grid; grid-template-columns:1fr 1fr; gap:1.05rem;
  margin-top:clamp(2.2rem,4.5vw,3rem);
}
.ba-col{
  padding:1.7rem 1.6rem 1.8rem;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper);
}
.ba-col--new{ border-color:var(--ink); box-shadow:0 22px 46px -32px rgba(11,11,13,.5); }
.ba-k{
  font-family:var(--ff-m); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--mute); margin-bottom:.4rem;
}
.ba-col--new .ba-k{ color:var(--amber-ink); }
.ba-t{ font-size:1.18rem; margin-bottom:1.1rem; }
.ba-viz{ width:100%; height:auto; margin-bottom:1.1rem; }
.ba-node circle{ fill:var(--paper); stroke:var(--line-2); stroke-width:1.6; }
.ba-tool rect{ fill:var(--paper-2); stroke:var(--line-2); stroke-width:1; }
.ba-wire path{ fill:none; stroke:#b9bcc0; stroke-width:1.1; }
.ba-wire--new path{ stroke:var(--ink); stroke-width:1.2; }
.ba-hub{ fill:var(--ink); }
.ba-hub-dot{ fill:var(--amber); }
.ba-list{
  font-family:var(--ff-m); font-size:.72rem; line-height:1.7; color:var(--mute);
  padding-bottom:.9rem; margin-bottom:.9rem; border-bottom:1px solid var(--line);
}
.ba-list--new{ color:var(--ink-2); }
.ba-d{ font-size:.9rem; color:var(--mute); }

/* ---- NUMBERS ---- */
.numbers{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.05rem; margin-bottom:clamp(2.2rem,4.5vw,3rem); }
.num{ padding:1.5rem 1.4rem; border:1px solid var(--line); border-radius:var(--r); background:var(--paper); }

/* Franja de cifras a ancho completo. Va fuera de .wrap en el HTML, así que no
   necesita trucos con vw que provoquen desbordamiento horizontal. */
.numbers-band{
  margin-block:clamp(2.4rem,5vw,3.6rem);
  padding-block:clamp(2.4rem,5vw,3.4rem);
}
.numbers-band .numbers{ margin-bottom:0; gap:1.6rem; }
.numbers-band .num{
  background:transparent; border:0; border-top:2px solid var(--amber);
  border-radius:0; padding:1.1rem 0 0;
}
.numbers-band .num b{ color:#fff; }
.numbers-band .num span{ color:var(--mute); }
.num b{
  display:block; font-family:var(--ff-d); font-weight:700;
  font-size:clamp(1.7rem,2.9vw,2.4rem); letter-spacing:-.035em; font-variant-numeric:tabular-nums;
}
.num span{ display:block; margin-top:.35rem; font-size:.84rem; color:var(--mute); line-height:1.45; }

/* ---- ALCANCE DE RED ---- */
.scope{
  margin-top:clamp(2.2rem,4.5vw,3rem);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--paper); padding:clamp(1.5rem,3vw,2.1rem);
}
.scope-head{
  font-family:var(--ff-m); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--amber-ink); margin-bottom:1.2rem;
}
.scope-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.scope-k{
  display:block; font-family:var(--ff-d); font-size:1rem; font-weight:600;
  padding-bottom:.5rem; margin-bottom:.5rem; border-bottom:2px solid var(--amber);
}
.scope-col p{ font-size:.89rem; color:var(--mute); }

/* ---- TAGSET ---- */
.tagset{ margin-top:clamp(2.2rem,4.5vw,3rem); }
.tagset-head{ font-family:var(--ff-m); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--mute); margin-bottom:.95rem; }
.tagset-groups{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.tagset-k{
  font-family:var(--ff-d); font-size:.92rem; font-weight:600;
  padding-bottom:.55rem; margin-bottom:.8rem; border-bottom:1px solid var(--line);
}
.tagset ul{ display:flex; flex-wrap:wrap; gap:.5rem; align-content:flex-start; }
.tagset li{
  padding:.48rem 1rem; border:1px solid var(--line-2); border-radius:99px;
  font-size:.84rem; color:var(--ink-2); background:var(--paper);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.tagset li:hover{ border-color:var(--ink); color:var(--ink); }

/* ---- SPLIT (imagen + contenido) ---- */
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3.5vw,2.6rem);
  align-items:center; margin-bottom:clamp(2.4rem,5vw,3.4rem);
}
.split--rev .split-media{ order:2; }
.split-media{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); }
.split-media img{ width:100%; height:clamp(240px,30vw,380px); object-fit:cover; filter:grayscale(1) contrast(1.04); transition:filter .6s var(--ease); }
.split-media:hover img{ filter:grayscale(.35) contrast(1.02); }
.split-copy{ min-width:0; }

/* ---- BENEFITS ---- */
.benefits{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
  margin-top:clamp(2rem,4vw,2.8rem); padding-top:1.5rem; border-top:1px solid var(--line);
}
.benefits li{ position:relative; padding-left:1.7rem; font-size:.93rem; color:var(--ink-2); font-weight:500; }
.benefits li::before{
  content:""; position:absolute; left:0; top:.45rem; width:12px; height:7px;
  border-left:2px solid var(--amber); border-bottom:2px solid var(--amber); transform:rotate(-45deg);
}

/* ---- MISIÓN / VISIÓN ---- */
.mv{ display:grid; gap:1.05rem; }
.mv-card{ position:relative; padding:1.6rem 1.7rem; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper); }
.mv-card::after{ content:""; position:absolute; left:0; top:1.6rem; bottom:1.6rem; width:3px; background:var(--amber); border-radius:0 3px 3px 0; }
.mv-k{ display:block; font-family:var(--ff-m); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-ink); margin-bottom:.75rem; }
.mv-card p{ color:var(--ink-2); font-size:.95rem; }

/* ---- FAQ ---- */
.faq{ margin-top:clamp(2.4rem,5vw,3.4rem); max-width:74ch; }
.faq-head{ font-size:1.28rem; margin-bottom:1rem; }
.qa{ border-bottom:1px solid var(--line); }
.qa summary{
  list-style:none; cursor:pointer; padding:1.1rem 2.4rem 1.1rem 0; position:relative;
  font-family:var(--ff-d); font-size:1rem; font-weight:600; color:var(--ink);
  transition:color .25s var(--ease);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--amber-ink); }
.qa summary::after{
  content:""; position:absolute; right:.4rem; top:1.5rem; width:10px; height:10px;
  border-right:1.8px solid var(--mute); border-bottom:1.8px solid var(--mute);
  transform:rotate(45deg); transition:transform .35s var(--ease-out), border-color .25s;
}
.qa[open] summary::after{ transform:rotate(-135deg); border-color:var(--amber); }
.qa p{ padding:0 1rem 1.3rem 0; color:var(--mute); font-size:.93rem; }

/* ---- CONTACTO ---- */
.cta-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.contact-list{ margin-top:2.1rem; display:grid; }
.contact-list li{
  display:grid; grid-template-columns:104px 1fr; gap:1rem; align-items:baseline;
  padding:.85rem 0; border-bottom:1px solid var(--line);
}
.ck{ font-family:var(--ff-m); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
.contact-list a{ border-bottom:1px solid transparent; transition:border-color .25s, color .25s; }
.contact-list a:hover{ color:var(--amber); border-bottom-color:var(--amber); }
.contact-social{ display:flex; gap:1.1rem; flex-wrap:wrap; }

.form{ padding:clamp(1.5rem,3vw,2.1rem); border:1px solid var(--line); border-radius:var(--r-lg); background:rgba(255,255,255,.04); }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.field{ display:block; margin-bottom:.85rem; }
.field > span{
  display:block; margin-bottom:.35rem;
  font-family:var(--ff-m); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--mute);
}
.field input,.field select,.field textarea{
  width:100%; padding:.76rem .9rem;
  background:rgba(255,255,255,.05); color:#fff;
  border:1px solid var(--line); border-radius:10px; font-size:.93rem; resize:vertical;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{ color:#787e85; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--amber); background:rgba(255,255,255,.09);
}
.field select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat;
}
.field select option{ background:#1a1a1f; color:#fff; }
.section--dark .btn{ background:var(--amber); border-color:var(--amber); color:#151515; }
.section--dark .btn:hover{ background:#f2b055; }
.form-note{ margin-top:.85rem; font-size:.86rem; color:var(--amber); min-height:1.2em; }

/* Trampa antispam: fuera de pantalla, nunca visible ni enfocable. */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---- FOOTER ----
   Negro, como la sección de contacto que va justo encima. Para que ambos no se
   fundan en un solo bloque y el formulario no parezca parte del pie, el pie baja
   a negro puro (escalón de tono) y se separa con una línea y más aire arriba. */
.foot{
  background:#000;
  border-top:1px solid rgba(255,255,255,.13);
  padding:clamp(3.2rem,6vw,4.4rem) 0 1.6rem;
}
.foot-inner{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2rem; align-items:start; }
.foot-brand{ display:block; }
.foot-logo{ height:36px; width:auto; margin-bottom:.9rem; }
.foot-name{ font-family:var(--ff-d); font-weight:600; font-size:.94rem; }
.foot-tag{ font-size:.84rem; color:var(--mute); margin-top:.15rem; }

/* Redes sociales */
.social{ display:flex; gap:.55rem; margin-top:1.2rem; }
.social a{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line-2); color:var(--ink-2);
  transition:color .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease), transform .28s var(--ease-out);
}
.social svg{ width:18px; height:18px; }
.social a:hover{
  color:var(--amber); border-color:var(--amber);
  background:rgba(232,163,61,.1); transform:translateY(-2px);
}
.foot-nav{ display:grid; gap:.42rem; }
.foot-nav a{ font-size:.89rem; color:var(--mute); width:max-content; transition:color .25s; }
.foot-nav a:hover{ color:var(--amber-ink); }
.foot-meta p{ font-size:.86rem; color:var(--mute); margin-bottom:.3rem; }
.foot-meta a:hover{ color:var(--amber-ink); }
.foot-legal{
  margin-top:2.3rem; padding-top:1.3rem; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.foot-legal p{ font-size:.76rem; color:var(--mute); }
.foot-legal a{ color:var(--ink-2); border-bottom:1px solid var(--line-2); }
.foot-legal a:hover{ color:var(--amber-ink); }

/* ============ 7. RESPONSIVE ============ */
/* Red de seguridad: si el menú quedó abierto y la pantalla crece hasta escritorio,
   el panel no debe sobrevivir — allí el botón que lo cierra está oculto. */
@media (min-width:1024px){
  .nav-panel,
  .nav-panel.is-open{ display:none !important; }
}

@media (max-width:1023px){
  .hero-grid{ grid-template-columns:1fr; gap:2.4rem; }
  .hero-title{ font-size:clamp(2.4rem,7vw,3.4rem); }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .numbers{ grid-template-columns:repeat(2,1fr); }
  .tagset-groups{ grid-template-columns:1fr; }
  .layers-grid{ grid-template-columns:repeat(2,1fr); }
  .hero-stats{ grid-template-columns:repeat(2,1fr); gap:1.4rem; }
  .benefits{ grid-template-columns:repeat(2,1fr); }
  .cta-wrap{ grid-template-columns:1fr; }
  .foot-inner{ grid-template-columns:1fr 1fr; }
  .vs{ grid-template-columns:1fr; }
  .impact{ grid-template-columns:1fr; }
  .ba{ grid-template-columns:1fr; }
  .slide-grid{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .split--rev .split-media{ order:0; }
  .nav-links,.nav-cta{ display:none; }
  .nav-burger{ display:block; }
}

@media (max-width:639px){
  :root{ --nav-h:64px; }
  .cards,.steps,.numbers,.layers-grid,.f-row,.benefits,.scope-grid,.tagset-groups{ grid-template-columns:1fr; }
  .hero-stats{ grid-template-columns:1fr 1fr; }
  .hero-actions .btn{ flex:1 1 100%; }
  .foot-inner{ grid-template-columns:1fr; gap:1.6rem; }
  .slider-tabs{ width:100%; }
  .slider-tab{ flex:1 1 auto; justify-content:center; font-size:.84rem; padding:.58rem .7rem; }
  .contact-list li{ grid-template-columns:1fr; gap:.1rem; }
  .scan-summary{ gap:1rem; }
  .con-host{ width:34%; }
  /* Por debajo de 640px el SVG se reduce tanto que su texto es ilegible:
     se sustituye por el equivalente en HTML, que sí escala. */
  .diagram{ display:none; }
  .flow{ display:block; }
  .marquee-row{ font-size:.7rem; }
  .foot-legal{ flex-direction:column; gap:.5rem; }
}

/* ============ 8. PREFERENCIAS DE MOVIMIENTO ============
   Solo se desactiva el movimiento realmente intrusivo.
   Las microinteracciones (hover, fades) se mantienen a propósito. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .marquee-row{ animation:none; }
  .splash{ animation-delay:.4s; }
  .hero-title .line:nth-child(1) > span,
  .hero-title .line:nth-child(2) > span,
  .hero-title .line:nth-child(3) > span{ animation-duration:.35s; animation-delay:.6s; }
}