/*
 * aitech.ar — web comercial. "Futuro sereno".
 *
 * Idea: la página es una noche en la red de una empresa. Empieza de noche
 * (petróleo profundo, la red 3D respirando), a las 03:07 un enlace falla y el
 * agente lo resuelve, y al bajar amanece: el fondo pasa a la luz del portal.
 *
 * Un solo aspecto por sección, a propósito (noche o día): no depende del
 * tema del sistema operativo. Cada color está fijado acá.
 *
 * Color de estado = significado, nunca decoración (guía de marca):
 * ámbar cuando el enlace falla, verde cuando queda resuelto. Cian = el agente.
 */

/* IBM Plex Sans es variable en estos archivos: se declara el rango completo
   para usar pesos livianos reales en los títulos, no simulados. */
@font-face { font-family: 'Plex'; font-style: normal; font-display: swap; font-weight: 100 700;
  src: url(/aitech/fonts/plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plex'; font-style: normal; font-display: swap; font-weight: 100 700;
  src: url(/aitech/fonts/plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'PlexMono'; font-style: normal; font-display: swap; font-weight: 400;
  src: url(/aitech/fonts/plex-mono-400.woff2) format('woff2'); }
@font-face { font-family: 'PlexMono'; font-style: normal; font-display: swap; font-weight: 500;
  src: url(/aitech/fonts/plex-mono-500.woff2) format('woff2'); }

:root {
  /* Noche */
  --noche: #040E15;
  --noche-2: #06161F;
  --noche-3: #0A2130;
  --noche-linea: #1B4255;
  /* Contrastes medidos (WCAG), no estimados. */
  --niebla: #E6EEF2;         /* texto sobre noche: 16.6:1 */
  --niebla-2: #A9BFC9;       /* secundario sobre noche: 10.2:1 */
  --niebla-3: #7F99A6;       /* terciario: 6.5:1 sobre noche, 5.5:1 sobre noche-3 */
  --accion-noche: #34A3C7;   /* botón sobre noche; su texto va en tinta (6.7:1) */
  --accion-noche-hover: #5BB8D6;

  /* Día */
  --dia: #FFFFFF;
  --dia-2: #F4F8FA;
  --dia-linea: #E6EEF2;
  --tinta: #0A2130;          /* texto sobre día: 16.5:1 */
  /* Secundario: un punto más oscuro que el slate-500 de la marca, porque
     el de la marca da 4.28:1 sobre dia-2 (no llega a 4.5). Este: 5.3 / 4.9. */
  --tinta-2: #52707F;
  --accion-dia: #0D6D8F;     /* botón sobre día, texto blanco: 5.8:1 */
  --accion-dia-hover: #0A5774;

  /* Identidad y estado */
  --cian: #14C8D4;           /* el agente. Nunca texto sobre claro, nunca estado */
  --ambar-noche: #E8A84A;
  --ambar-dia: #9A5B05;      /* texto ámbar legible sobre blanco: 5.4:1 */
  --verde-noche: #4CC9A0;
  --verde-dia: #0F7A59;      /* texto verde legible sobre blanco: 5.3:1 */

  --sans: 'Plex', 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'PlexMono', 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --ancho: 1180px;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --curva: cubic-bezier(.2, .7, .1, 1);

  /* Lo actualiza site.js: 0 = noche cerrada, 1 = pleno día. */
  --amanecer: 0;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--noche);
  color: var(--niebla);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ancho { max-width: var(--ancho); margin: 0 auto; padding-left: var(--gutter); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--cian); outline-offset: 3px; border-radius: 6px;
}
.saltar {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--niebla); color: var(--tinta); padding: 10px 16px; border-radius: 8px; text-decoration: none;
}
.saltar:focus { top: 16px; }

/* ---------------------------------------------------------------- Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .9em 1.5em; border-radius: 999px; border: 1px solid transparent;
  background: var(--accion-noche); color: var(--noche);
  font: 600 1rem/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .25s var(--curva);
}
.boton:hover { background: var(--accion-noche-hover); transform: translateY(-1px); }
.boton-fantasma { background: transparent; color: var(--niebla); border-color: rgba(230, 238, 242, .28); }
.boton-fantasma:hover { background: rgba(230, 238, 242, .08); border-color: rgba(230, 238, 242, .5); }
.boton-chico { padding: .62em 1.15em; font-size: .9375rem; }
.boton-grande { padding: 1.05em 1.8em; font-size: 1.0625rem; }
[data-tono="dia"] .boton { background: var(--accion-dia); color: #fff; }
[data-tono="dia"] .boton:hover { background: var(--accion-dia-hover); }

.enlace { color: var(--accion-dia); font-weight: 500; text-underline-offset: 5px; }
.enlace:hover { color: var(--accion-dia-hover); }

/* ---------------------------------------------------------------- Red 3D */
.red { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: calc(1 - var(--amanecer)); transition: opacity .2s linear; }
.red canvas { width: 100%; height: 100%; display: block; }
/* Sin WebGL o con movimiento reducido: un cielo nocturno con una red dibujada. */
.red-respaldo { position: absolute; inset: 0; display: none;
  background:
    radial-gradient(60% 50% at 70% 30%, rgba(20, 200, 212, .10), transparent 70%),
    radial-gradient(80% 60% at 20% 80%, rgba(52, 163, 199, .08), transparent 70%),
    var(--noche); }
.sin-webgl .red canvas { display: none; }
.sin-webgl .red-respaldo { display: block; }
/* Velo para que el texto siempre se lea sobre la red. */
.red::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(4, 14, 21, .78) 0%, rgba(4, 14, 21, .2) 50%, rgba(4, 14, 21, 0) 70%); }

main, .pie, .cabecera { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- Cabecera */
.cabecera { position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background .4s, border-color .4s, backdrop-filter .4s; border-bottom: 1px solid transparent; }
.cabecera-in { max-width: var(--ancho); margin: 0 auto; display: flex; align-items: center; gap: 28px;
  padding: 18px max(20px, env(safe-area-inset-right, 0px)) 18px var(--gutter); }
.cabecera.con-fondo { background: rgba(4, 14, 21, .72); backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); border-color: rgba(27, 66, 85, .6); }
.cabecera[data-tono="dia"].con-fondo { background: rgba(255, 255, 255, .82); border-color: var(--dia-linea); }
.marca { position: relative; display: block; width: 132px; height: 28px; flex-shrink: 0; }
.marca img { position: absolute; inset: 0; width: 132px; height: 28px; transition: opacity .35s; }
.marca-dia { opacity: 0; }
.cabecera[data-tono="dia"] .marca-noche { opacity: 0; }
.cabecera[data-tono="dia"] .marca-dia { opacity: 1; }
.navegacion { display: flex; gap: 26px; margin-left: auto; font-size: .9375rem; }
.navegacion a { color: var(--niebla-2); text-decoration: none; transition: color .25s; }
.navegacion a:hover { color: var(--niebla); }
.cabecera[data-tono="dia"] .navegacion a { color: var(--tinta-2); }
.cabecera[data-tono="dia"] .navegacion a:hover { color: var(--tinta); }
.cabecera[data-tono="dia"] .boton { background: var(--accion-dia); color: #fff; }
.cabecera[data-tono="dia"] .boton:hover { background: var(--accion-dia-hover); }

/* ---------------------------------------------------------------- Inicio */
.inicio { min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: 120px 0 40px; }
.inicio-in { max-width: var(--ancho); width: 100%; margin: 0 auto;
  padding-left: var(--gutter); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.titular { font-weight: 250; font-size: clamp(2.6rem, 6.4vw, 6rem); line-height: 1.02;
  letter-spacing: -.025em; color: var(--niebla); max-width: 12.5em; }
.titular .linea { display: block; }
.bajada { margin-top: 30px; max-width: 34em; font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.6; color: var(--niebla-2); }
.acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.inicio-pie { max-width: var(--ancho); width: 100%; margin: auto auto 0; padding-top: 64px;
  padding-left: var(--gutter); padding-right: max(20px, env(safe-area-inset-right, 0px));
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; color: var(--niebla-3); font-size: .9375rem; }
.inicio-pie .mono { color: var(--cian); font-size: .875rem; }

/* El único momento orquestado: el titular se arma al cargar. */
.js .titular .linea, .js .bajada, .js .acciones, .js .inicio-pie {
  opacity: 0; transform: translateY(18px); }
.js.listo .titular .linea, .js.listo .bajada, .js.listo .acciones, .js.listo .inicio-pie {
  opacity: 1; transform: none; transition: opacity 1.1s var(--curva), transform 1.1s var(--curva); }
.js.listo .titular .linea:nth-child(2) { transition-delay: .12s; }
.js.listo .titular .linea:nth-child(3) { transition-delay: .24s; }
.js.listo .bajada { transition-delay: .5s; }
.js.listo .acciones { transition-delay: .65s; }
.js.listo .inicio-pie { transition-delay: 1s; }

/* ---------------------------------------------------------------- Historia */
.historia { position: relative; height: 520vh; }
/* La consola va abajo a la derecha: arriba queda libre para que la cámara
   muestre el enlace que falla (ver ANCLA en network.js). */
.escenario { position: sticky; top: 0; height: 100svh; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: end;
  max-width: var(--ancho); margin: 0 auto;
  padding: 90px max(20px, env(safe-area-inset-right, 0px)) 5vh var(--gutter); }

.pasos { list-style: none; margin: 0; padding: 0; position: relative; min-height: 300px; align-self: center; }
.paso { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(24px);
  transition: opacity .6s var(--curva), transform .6s var(--curva); pointer-events: none; }
.paso.activo { opacity: 1; transform: none; pointer-events: auto; }
.paso .hora { color: var(--cian); font-size: 1rem; letter-spacing: .02em; }
.paso[data-paso="1"] .hora, .paso[data-paso="2"] .hora { color: var(--ambar-noche); }
.paso h3 { margin-top: 14px; font-weight: 300; font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.08; letter-spacing: -.02em; color: var(--niebla); }
.paso p:last-child { margin-top: 18px; color: var(--niebla-2); font-size: 1.125rem; max-width: 30em; }
.paso .mono { color: var(--niebla); font-size: .95em; }
/* Sin JS, los pasos se leen uno debajo del otro. */
html:not(.js) .historia { height: auto; }
html:not(.js) .escenario { position: static; height: auto; grid-template-columns: 1fr; }
html:not(.js) .paso { position: static; opacity: 1; transform: none; margin-bottom: 40px; }

/* La consola del agente */
.consola { position: relative; border: 1px solid var(--noche-linea); border-radius: 14px;
  background: linear-gradient(180deg, rgba(10, 33, 48, .86), rgba(6, 22, 31, .9));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(230, 238, 242, .04);
  overflow: hidden; }
.consola-barra { display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  border-bottom: 1px solid var(--noche-linea); font-size: .875rem; color: var(--niebla-2); }
.punto-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--cian);
  box-shadow: 0 0 0 0 rgba(20, 200, 212, .6); animation: latido 2.4s infinite; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(20, 200, 212, .55); } 70% { box-shadow: 0 0 0 10px rgba(20, 200, 212, 0); } 100% { box-shadow: 0 0 0 0 rgba(20, 200, 212, 0); } }
.reloj { margin-left: auto; color: var(--niebla); font-size: .9375rem; }

.registros { padding: 14px 18px 6px; font-size: .78rem; line-height: 1.55; min-height: 120px; }
.registros p { display: grid; grid-template-columns: max-content 4.4em minmax(0, 1fr); gap: 0 .9em; padding: 3px 0;
  color: var(--niebla-3); opacity: 0; transform: translateX(-8px);
  transition: opacity .45s var(--curva), transform .45s var(--curva), color .45s; }
.registros p.visible { opacity: 1; transform: none; }
.registros time, .registros b { white-space: nowrap; }
.registros time { color: var(--niebla-3); }
.registros b { font-weight: 500; color: var(--niebla-2); }
.registros p { overflow-wrap: anywhere; }
.registros p.alerta { color: var(--ambar-noche); }
.registros p.alerta b { color: var(--ambar-noche); }
.registros p.agente { color: var(--cian); }
.registros p.agente b { color: var(--cian); }

.diagnostico, .ticket { margin: 6px 18px 0; border-radius: 10px; padding: 14px 16px;
  opacity: 0; transform: translateY(10px); max-height: 0; overflow: hidden;
  transition: opacity .55s var(--curva), transform .55s var(--curva), max-height .55s var(--curva), margin .55s, padding .55s; }
.diagnostico.visible, .ticket.visible { opacity: 1; transform: none; max-height: 260px; }
.diagnostico:not(.visible), .ticket:not(.visible) { padding-top: 0; padding-bottom: 0; }
.diagnostico { border: 1px solid rgba(20, 200, 212, .35); background: rgba(20, 200, 212, .06); }
.etiqueta { font-size: .75rem; color: var(--cian); letter-spacing: .04em; }
.causa { margin-top: 4px; font-size: 1rem; color: var(--niebla); font-weight: 500; }
.diagnostico ul { margin: 8px 0 0; padding-left: 1.1em; color: var(--niebla-2); font-size: .875rem; line-height: 1.5; }
.ticket { border: 1px solid var(--noche-linea); background: rgba(4, 14, 21, .6); margin-top: 10px; }
.ticket-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .875rem; color: var(--niebla-2); }
.ticket-que { margin-top: 8px; color: var(--niebla); font-weight: 500; }
.ticket-mientras { margin-top: 4px; color: var(--niebla-2); font-size: .875rem; }
.consola-nota { padding: 10px 18px 14px; font-size: .75rem; color: var(--niebla-3); }

.estado { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 500;
  border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.estado-espera { color: var(--ambar-noche); background: rgba(232, 168, 74, .12); }
.estado-ok { color: var(--verde-dia); background: rgba(19, 158, 115, .1); }

/* ---------------------------------------------------------------- Amanecer */
.amanecer { position: relative; padding: 32vh 0 120px; color: var(--tinta); overflow: hidden; }
/* El cielo: de la noche al blanco del portal. La red se apaga al mismo ritmo. */
.amanecer-cielo { position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 60% at 50% 100%, rgba(255, 220, 170, .0) 0%, transparent 60%),
    linear-gradient(180deg, rgba(4, 14, 21, 0) 0%, #0F2E3F 14%, #2E6077 26%, #9CC3D3 40%, #E8F2F6 52%, #FFFFFF 62%); }
.amanecer-in { max-width: 920px; margin: 0 auto; padding-left: var(--gutter); padding-right: max(20px, env(safe-area-inset-right, 0px));
  text-align: center; position: relative; }
.hora-grande { font-size: clamp(5rem, 15vw, 12rem); font-weight: 400; line-height: 1; letter-spacing: -.04em;
  color: #fff; opacity: .95; text-shadow: 0 0 60px rgba(255, 255, 255, .35); }
.amanecer h2 { margin-top: 30vh; font-weight: 300; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.1;
  letter-spacing: -.02em; color: var(--tinta); }
.ticket-dia { margin: 56px auto 0; max-width: 640px; text-align: left; background: var(--dia);
  border: 1px solid var(--dia-linea); border-radius: 16px; padding: 26px 28px;
  box-shadow: 0 30px 70px -40px rgba(10, 33, 48, .35); }
.ticket-dia header { display: flex; justify-content: space-between; align-items: center; color: var(--tinta-2); font-size: .9375rem; }
.ticket-dia h3 { margin-top: 10px; font-weight: 500; font-size: 1.25rem; color: var(--tinta); }
.linea-tiempo { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.linea-tiempo li { display: grid; grid-template-columns: 3.6em 1fr; gap: 12px; color: var(--tinta-2); font-size: 1rem; }
.linea-tiempo time { color: var(--tinta); }
.linea-tiempo .hecho { color: var(--verde-dia); font-weight: 500; }
.linea-tiempo .hecho time { color: var(--verde-dia); }
.amanecer-pie { margin-top: 34px; color: var(--tinta-2); font-size: 1.125rem; }

/* ---------------------------------------------------------------- Día */
.porque, .portal, .empezar { background: var(--dia); color: var(--tinta); }
.porque { padding: 60px 0 120px; }
.porque h2, .portal h2, .empezar h2 { font-weight: 300; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.08;
  letter-spacing: -.02em; max-width: 16em; }
.razones { margin-top: 64px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px;
  border-top: 1px solid var(--dia-linea); }
.razon { padding: 40px 0; border-bottom: 1px solid var(--dia-linea); }
.razon-dibujo { width: 160px; height: 64px; overflow: visible; }
.razon h3 { margin-top: 22px; font-weight: 500; font-size: 1.375rem; }
.razon p { margin-top: 10px; color: var(--tinta-2); max-width: 30em; }
.trazo-suave { stroke: #CBDAE1; stroke-width: 1.5; fill: none; }
.trazo-cian { stroke: var(--cian); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nodo-cian { fill: var(--cian); }
.nodo-gris, .nodo-gris circle { fill: #A9BFC9; }
.ticket-icono { fill: #fff; stroke: var(--tinta); stroke-width: 1.5; }
.caja-cian { fill: rgba(20, 200, 212, .14); stroke: var(--cian); stroke-width: 1.5; }
.caja-gris { fill: var(--dia-2); stroke: #CBDAE1; stroke-width: 1.5; }
.dibujo-texto { font: 400 10px var(--sans); fill: var(--tinta-2); }
/* Los dibujos se trazan una vez, cuando aparecen. */
.js .razon-dibujo .trazo-cian { stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset 1.2s var(--curva) .2s; }
.js .razon.visible .razon-dibujo .trazo-cian { stroke-dashoffset: 0; }
.claude { margin-top: 56px; max-width: 40em; color: var(--tinta-2); font-size: 1.0625rem; }
.claude strong { color: var(--tinta); font-weight: 600; }

/* Portal */
.portal { padding: 80px 0 140px; background: linear-gradient(180deg, var(--dia) 0%, var(--dia-2) 100%); }
.portal-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: center; }
.portal-texto p { margin-top: 22px; color: var(--tinta-2); font-size: 1.125rem; max-width: 26em; }
.portal-texto .enlace { display: inline-block; margin-top: 26px; }
.maqueta-marco { perspective: 1600px; }
.maqueta { --giro: 1; border-radius: 16px; background: #fff; border: 1px solid var(--dia-linea);
  box-shadow: 0 50px 100px -50px rgba(10, 33, 48, .45), 0 0 0 1px rgba(10, 33, 48, .02);
  transform: rotateX(calc(var(--giro) * 14deg)) rotateY(calc(var(--giro) * -16deg)) rotateZ(calc(var(--giro) * 2deg));
  transform-origin: 60% 50%; transition: transform .1s linear; overflow: hidden; font-size: 13px; }
.maqueta-barra { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--dia-linea); }
.pastillas { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--dia-2); font-size: 12px; }
.pastillas b, .pastillas i { padding: 4px 11px; border-radius: 999px; font-style: normal; font-weight: 400; color: var(--tinta-2); }
.pastillas b { background: #fff; color: var(--tinta); font-weight: 500; box-shadow: 0 1px 2px rgba(10, 33, 48, .08); }
.avatar { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: #D6EBF3; color: #0A5774; font-weight: 600; font-size: 11px; }
.maqueta-cuerpo { padding: 26px 26px 24px; }
.maqueta-hola { color: var(--tinta-2); }
.maqueta-titulo { margin-top: 6px; font-size: 28px; font-weight: 300; letter-spacing: -.01em; color: var(--tinta); }
.maqueta-ticket { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 12px 14px; border: 1px solid var(--dia-linea); border-radius: 12px; color: var(--tinta); }
.maqueta-ticket .mono { margin-left: auto; color: var(--tinta-2); }
.maqueta-columnas { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--dia-linea);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.maqueta-columnas small { display: block; color: var(--tinta-2); font-size: 11px; }
.maqueta-columnas b { display: block; margin-top: 2px; font-size: 15px; font-weight: 600; color: var(--tinta); }

/* Cómo empezamos */
.empezar { padding: 40px 0 140px; background: var(--dia-2); }
.camino { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  position: relative; }
/* Una sola línea de tiempo que une los tres momentos. */
.camino::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 1px; background: #CBDAE1; }
.camino li { position: relative; padding: 40px 36px 0 0; }
.camino li::before { content: ""; position: absolute; top: 5px; left: 0; width: 13px; height: 13px; border-radius: 50%;
  background: var(--dia-2); border: 2px solid var(--accion-dia); }
.camino li:last-child::before { background: var(--cian); border-color: var(--cian); }
.camino-cuando { font-size: .9375rem; color: var(--accion-dia); font-weight: 500; }
.camino h3 { margin-top: 10px; font-weight: 500; font-size: 1.375rem; color: var(--tinta); }
.camino li p:last-child { margin-top: 10px; color: var(--tinta-2); max-width: 22em; }

/* ---------------------------------------------------------------- Demo (vuelve la noche) */
.demo { padding: 140px 0 140px; background:
  radial-gradient(70% 60% at 85% 20%, rgba(20, 200, 212, .07), transparent 70%),
  linear-gradient(180deg, var(--noche-3) 0%, var(--noche) 100%); color: var(--niebla); }
.demo-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; }
.demo h2 { font-weight: 300; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.08; letter-spacing: -.02em; color: var(--niebla); }
.demo-texto p { margin-top: 22px; color: var(--niebla-2); font-size: 1.125rem; max-width: 26em; }

.formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 18px; }
.campo { display: grid; gap: 7px; }
.campo-ancho, .formulario .boton, .formulario-nota, .aviso { grid-column: 1 / -1; }
.campo label { font-size: .9375rem; color: var(--niebla-2); }
.campo label span { color: var(--niebla-3); }
.campo input, .campo select, .campo textarea {
  width: 100%; font: 400 1rem/1.4 var(--sans); color: var(--niebla);
  background: rgba(6, 22, 31, .8); border: 1px solid #4E7487; border-radius: 12px; padding: 13px 15px;
  transition: border-color .2s, box-shadow .2s; }
.campo select { appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--niebla-2) 50%), linear-gradient(135deg, var(--niebla-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.campo select option { background: var(--noche-3); color: var(--niebla); }
.campo textarea { resize: vertical; min-height: 92px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--accion-noche);
  box-shadow: 0 0 0 4px rgba(52, 163, 199, .22); }
.campo-error { display: none; font-size: .875rem; color: #F28B82; }
.campo.con-error input, .campo.con-error select { border-color: #F28B82; }
.campo.con-error .campo-error { display: block; }
.formulario .boton { justify-self: start; margin-top: 8px; }
.formulario-nota { font-size: .875rem; color: var(--niebla-3); }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.aviso { border-radius: 12px; padding: 14px 16px; font-size: 1rem; border: 1px solid var(--noche-linea);
  background: rgba(10, 33, 48, .8); }
.aviso.ok { box-shadow: inset 4px 0 0 var(--verde-noche); }
.aviso.error { box-shadow: inset 4px 0 0 #F28B82; }

/* ---------------------------------------------------------------- Pie */
.pie { background: var(--noche); border-top: 1px solid var(--noche-3); color: var(--niebla-3); }
.pie-in { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding-top: 40px;
  padding-bottom: max(40px, env(safe-area-inset-bottom, 0px)); font-size: .9375rem; }
.pie nav { display: flex; gap: 24px; margin-left: auto; }
.pie nav a { color: var(--niebla-2); text-decoration: none; }
.pie nav a:hover { color: var(--niebla); }
.pie-copy { width: 100%; font-size: .8125rem; }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 960px) {
  .navegacion { display: none; }
  .cabecera-in { gap: 16px; justify-content: space-between; }
  .escenario { grid-template-columns: 1fr; gap: 18px; align-content: center; padding-top: 84px; }
  .pasos { min-height: 210px; }
  .paso h3 { font-size: clamp(1.75rem, 7vw, 2.4rem); }
  .paso p:last-child { font-size: 1rem; margin-top: 12px; }
  /* En celular la consola es una ventana chica: solo ocupan lugar las líneas
     que ya llegaron (si no, al mostrar lo último queda el hueco de las que
     faltan), y la primera se desvanece en vez de verse cortada. */
  .registros { min-height: 0; max-height: 150px; overflow: hidden; font-size: .72rem;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 26px); }
  .registros p:not(.visible) { display: none; }
  .registros p { grid-template-columns: max-content minmax(0, 1fr); }
  .registros p b { display: none; }
  .diagnostico.visible, .ticket.visible { max-height: 210px; }
  .diagnostico ul { display: none; }
  /* Con el ticket a la vista, el diagnóstico se repliega (el ticket ya dice
     la causa) y la consola no tapa el texto del paso. */
  .consola:has(.ticket.visible) .diagnostico { max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; opacity: 0; border-width: 0; }
  .consola:has(.ticket.visible) .registros { max-height: 96px; }
  .pasos { min-height: 230px; }
  .razones { grid-template-columns: 1fr; }
  .portal-grid, .demo-grid { grid-template-columns: 1fr; gap: 48px; }
  .camino { grid-template-columns: 1fr; gap: 28px; }
  .camino::before { left: 6px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .camino li { padding: 0 0 0 36px; }
  .camino li::before { top: 4px; }
}
@media (max-width: 560px) {
  .formulario { grid-template-columns: 1fr; }
  .acciones .boton { width: 100%; }
  .amanecer h2 { margin-top: 22vh; }
  .ticket-dia { padding: 20px; }
  .maqueta { font-size: 11px; }
  .maqueta-barra .pastillas i { display: none; }
  .pie nav { margin-left: 0; }
}

/* Movimiento reducido: todo queda en su estado final, sin transiciones. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .titular .linea, .js .bajada, .js .acciones, .js .inicio-pie { opacity: 1; transform: none; }
  .js .razon-dibujo .trazo-cian { stroke-dashoffset: 0; }
  .maqueta { --giro: .35 !important; }
}


/* ================================================================
   EXTENSIÓN COMERCIAL Y SEO · TECNOBRAIN × AITECH
   Mantiene 100% la paleta y tipografía de Futuro Sereno (aitech.ar)
   ================================================================ */
.badge-tb {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(20, 200, 212, .10); border: 1px solid rgba(20, 200, 212, .32);
  color: var(--cian); font: 500 .8125rem/1.2 var(--mono);
  margin-bottom: 22px; text-decoration: none;
}
.badge-tb i { width: 7px; height: 7px; border-radius: 50%; background: var(--cian); box-shadow: 0 0 10px var(--cian); }
[data-tono="dia"] .badge-tb {
  background: #D6EBF3; border-color: #A9D6E5; color: #0A5774;
}
[data-tono="dia"] .badge-tb i { background: #0D6D8F; box-shadow: none; }

.subnav-clusters {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px;
}
.subnav-clusters a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; font-size: .84rem;
  background: rgba(10, 33, 48, .75); border: 1px solid var(--noche-linea);
  color: var(--niebla-2); text-decoration: none; transition: all .2s;
}
.subnav-clusters a:hover, .subnav-clusters a.activo {
  border-color: var(--cian); color: var(--niebla); background: rgba(20, 200, 212, .12);
}

/* Galería Interactiva de Capturas Simuladas */
.seccion-galeria {
  padding: 110px 0; background: linear-gradient(180deg, var(--dia) 0%, var(--dia-2) 100%);
  color: var(--tinta); border-top: 1px solid var(--dia-linea); border-bottom: 1px solid var(--dia-linea);
}
.seccion-galeria-noche {
  padding: 110px 0; background: rgba(6, 22, 31, .92);
  color: var(--niebla); border-top: 1px solid var(--noche-linea); border-bottom: 1px solid var(--noche-linea);
}
.encabezado-seccion { max-width: 780px; margin-bottom: 48px; }
.encabezado-seccion h2 {
  font-weight: 300; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.08; letter-spacing: -.025em;
}
.encabezado-seccion p { margin-top: 16px; font-size: 1.125rem; color: var(--tinta-2); }
.seccion-galeria-noche .encabezado-seccion p { color: var(--niebla-2); }

.tabs-bar {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px;
}
.tab-btn {
  padding: 11px 18px; border-radius: 999px; border: 1px solid #CBDAE1;
  background: #fff; color: var(--tinta-2); font: 500 .9rem/1.2 var(--sans);
  cursor: pointer; transition: all .2s;
}
.tab-btn:hover { border-color: var(--accion-dia); color: var(--tinta); }
.tab-btn.activo {
  background: var(--tinta); color: #fff; border-color: var(--tinta);
  box-shadow: 0 10px 24px -10px rgba(10, 33, 48, .45);
}
.seccion-galeria-noche .tab-btn {
  background: var(--noche-3); border-color: var(--noche-linea); color: var(--niebla-2);
}
.seccion-galeria-noche .tab-btn.activo {
  background: var(--accion-noche); color: var(--noche); border-color: var(--accion-noche);
}

.visor-panel { display: none; grid-template-columns: 1fr; gap: 24px; animation: fadeIn .3s ease; }
.visor-panel.activo { display: grid; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.visor-marco {
  border-radius: 18px; overflow: hidden; border: 1px solid #CBDAE1;
  background: var(--noche-2);
  box-shadow: 0 32px 70px -28px rgba(6, 22, 31, .38);
}
.seccion-galeria-noche .visor-marco {
  border-color: var(--noche-linea);
  box-shadow: 0 32px 80px -28px rgba(0, 0, 0, .75);
}
.visor-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 18px; background: #0A2130; border-bottom: 1px solid #1B4255;
  color: var(--niebla-2); font: 400 .8125rem/1 var(--mono);
}
.visor-dots { display: flex; gap: 7px; }
.visor-dots i { width: 10px; height: 10px; border-radius: 50%; background: #1B4255; display: inline-block; }
.visor-dots i:first-child { background: #F28B82; }
.visor-dots i:nth-child(2) { background: #E8A84A; }
.visor-dots i:nth-child(3) { background: #4CC9A0; }
.visor-marco img { width: 100%; height: auto; display: block; cursor: zoom-in; }

.visor-pie {
  display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: center;
  padding: 22px 26px; border-radius: 14px; background: #fff; border: 1px solid var(--dia-linea);
}
.seccion-galeria-noche .visor-pie {
  background: var(--noche-3); border-color: var(--noche-linea);
}
.visor-pie h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 6px; }
.visor-pie p { font-size: .96rem; color: var(--tinta-2); }
.seccion-galeria-noche .visor-pie p { color: var(--niebla-2); }

/* Tabla Comparativa (aitech vs Zabbix / PRTG / Guardia NOC) */
.seccion-comparativa {
  padding: 110px 0; background: rgba(4, 14, 21, .92); border-top: 1px solid var(--noche-3);
}
.tabla-scroll { overflow-x: auto; border-radius: 16px; border: 1px solid var(--noche-linea); background: rgba(10, 33, 48, .65); }
.tabla-comp { width: 100%; border-collapse: collapse; text-align: left; font-size: .95rem; min-width: 720px; }
.tabla-comp th, .tabla-comp td { padding: 18px 22px; border-bottom: 1px solid rgba(27, 66, 85, .65); vertical-align: top; }
.tabla-comp th { font-weight: 600; color: var(--niebla); background: rgba(6, 22, 31, .85); font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
.tabla-comp th.col-destacada { background: rgba(20, 200, 212, .14); color: var(--cian); border-left: 1px solid rgba(20, 200, 212, .35); border-right: 1px solid rgba(20, 200, 212, .35); }
.tabla-comp td.col-destacada { background: rgba(20, 200, 212, .06); color: var(--niebla); font-weight: 500; border-left: 1px solid rgba(20, 200, 212, .25); border-right: 1px solid rgba(20, 200, 212, .25); }
.tabla-comp td { color: var(--niebla-2); }
.tabla-comp tr:last-child td { border-bottom: none; }
.tag-ok { color: var(--verde-noche); font-family: var(--mono); font-size: .85rem; }
.tag-warn { color: var(--ambar-noche); font-family: var(--mono); font-size: .85rem; }
.tag-bad { color: #F28B82; font-family: var(--mono); font-size: .85rem; }

/* Grilla de Nichos y Marcas */
.grilla-tarjetas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: 22px; margin-top: 40px;
}
.tarjeta-noche {
  padding: 28px; border-radius: 16px; background: rgba(10, 33, 48, .72);
  border: 1px solid var(--noche-linea); transition: border-color .25s, transform .25s;
}
.tarjeta-noche:hover { border-color: var(--accion-noche); transform: translateY(-2px); }
.tarjeta-noche .etiqueta {
  display: inline-block; font: 500 .78rem/1 var(--mono); color: var(--cian);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px;
}
.tarjeta-noche h3 { font-size: 1.3rem; font-weight: 500; color: var(--niebla); margin-bottom: 10px; }
.tarjeta-noche p { font-size: .96rem; color: var(--niebla-2); line-height: 1.55; }
.tarjeta-noche ul { margin: 14px 0 0; padding-left: 18px; color: var(--niebla-2); font-size: .9rem; }
.tarjeta-noche li { margin-bottom: 6px; }

.tarjeta-dia {
  padding: 28px; border-radius: 16px; background: #fff;
  border: 1px solid var(--dia-linea); color: var(--tinta);
  box-shadow: 0 14px 34px -22px rgba(10, 33, 48, .18);
}
.tarjeta-dia .etiqueta {
  display: inline-block; font: 500 .78rem/1 var(--mono); color: var(--accion-dia);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px;
}
.tarjeta-dia h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 8px; }
.tarjeta-dia p { font-size: .95rem; color: var(--tinta-2); }

/* Bloque de código/comandos RouterOS & FortiOS */
.bloque-cmd {
  margin-top: 16px; padding: 16px 18px; border-radius: 12px;
  background: #040E15; border: 1px solid #1B4255; color: #E6EEF2;
  font: 400 .82rem/1.6 var(--mono); overflow-x: auto;
}
.bloque-cmd .comentario { color: #7F99A6; }
.bloque-cmd .cmd-hl { color: #14C8D4; }

/* FAQ Acordeón SEO */
.faq-contenedor { max-width: 860px; margin-top: 40px; }
.faq-item {
  border-bottom: 1px solid var(--noche-linea); padding: 20px 0;
}
[data-tono="dia"] .faq-item { border-bottom-color: var(--dia-linea); }
.faq-item summary {
  font-size: 1.125rem; font-weight: 500; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font: 400 1.4rem/1 var(--mono); color: var(--cian); flex-shrink: 0;
}
[data-tono="dia"] .faq-item summary::after { color: var(--accion-dia); }
.faq-item[open] summary::after { content: "−"; }
.faq-item .faq-respuesta {
  margin-top: 14px; font-size: .98rem; color: var(--niebla-2); line-height: 1.65;
}
[data-tono="dia"] .faq-item .faq-respuesta { color: var(--tinta-2); }

/* Lightbox Zoom */
.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(4, 14, 21, .92);
  backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center;
  padding: 24px; cursor: zoom-out;
}
.lightbox.abierto { display: flex; }
.lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 12px; border: 1px solid var(--noche-linea); box-shadow: 0 30px 90px rgba(0,0,0,.8); }

/* Botón Flotante WhatsApp B2B */
.wa-flotante {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px; border-radius: 999px;
  background: #0F7A59; color: #fff; font: 600 .92rem/1 var(--sans);
  text-decoration: none; box-shadow: 0 14px 32px rgba(4, 14, 21, .55);
  border: 1px solid rgba(76, 201, 160, .4); transition: transform .2s, background .2s;
}
.wa-flotante:hover { background: #139E73; transform: translateY(-2px); }

@media (max-width: 820px) {
  .visor-pie { grid-template-columns: 1fr; }
}