/* ============================================================
   AlySec — home (/)
   ------------------------------------------------------------
   Hoja PROPIA de la landing. NO es alysec.css: esa la siguen
   cargando /ui/vdp y /ui/researcher, que viven en el sistema
   claro de base.css y no se tocan al rediseñar la home.

   El mundo visual es el del rediseño: fondo casi negro azulado
   (#060B12), verde de neón (#2BE3A0) como único color de acción,
   cian (#5FD4E3) como segundo dato, y la geometría hexagonal
   como motivo repetido —el hexágono es la marca, así que los
   pasos, los sellos de las comunidades y el fondo de la CTA son
   todos el mismo polígono a distinta escala—.

   Se carga DESPUÉS de base.css, que aporta el reset, `.sr-only`
   y el foco visible. Lo que base.css da por sentado y aquí no
   vale —canvas claro, tinta oscura, enlaces azules— se reescribe
   en el bloque «Página» de abajo y en ningún otro sitio.

   REGLA DE ANCHO: el diseño se compuso a 1440px con calles de
   120px. Aquí eso se expresa como banda de 1200px centrada con
   `--calle` elástica, no como anchos fijos: la maqueta original
   los llevaba y por debajo de 1200px se salía de pantalla.
   ============================================================ */

.aly {
  /* — Fondo y superficies — */
  --n-bg:        #060B12;  /* canvas */
  --n-panel:     #0B1520;  /* tarjeta */
  --n-deep:      #08111A;  /* terminal y formulario: bajo la tarjeta */
  --n-field:     #0C1823;  /* campo de entrada */
  --n-tile:      #0B1822;  /* fila dentro de una visualización */
  --n-hex:       #0C1A24;  /* relleno de hexágono apagado */
  --n-hex-on:    #0F2A24;  /* relleno de hexágono encendido (verde) */

  /* — Filetes — */
  --n-line:      #1B2B3B;  /* borde de tarjeta */
  --n-line-2:    #16283A;  /* separador interno, más apagado */
  --n-line-3:    #1F3448;  /* borde de superficie elevada */
  --n-line-4:    #22374A;  /* borde de campo */
  --n-line-5:    #25394B;  /* borde de botón secundario */

  /* — Tinta — */
  --n-ink:       #F2F7FA;  /* titulares */
  --n-bright:    #E4ECF1;  /* dato fuerte */
  --n-text:      #C9D6DF;  /* texto de apoyo */
  --n-body:      #9FB2C1;  /* cuerpo */
  --n-dim:       #7D91A2;
  --n-mut:       #6F8494;
  --n-faint:     #56697A;

  /* — Acento — */
  --n-green:     #2BE3A0;  /* acción y estado correcto */
  --n-green-2:   #7FF0C6;  /* el mismo verde cuando va sobre fondo */
  --n-green-ink: #04140D;  /* tinta sobre el verde */
  --n-cyan:      #5FD4E3;  /* segundo dato: privado, pendiente, bajo */
  --n-cyan-glow: #1FB6C9;

  /* — Severidad. Sólo se usan en la tarjeta de la cola. — */
  --n-crit:      #F26D6D;
  --n-high:      #F2A65A;
  --n-med:       #E8D36A;

  /* — Tipografía — */
  --n-display: "Sora", "IBM Plex Sans", system-ui, sans-serif;
  --n-sans:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --n-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Calle lateral. 120px es la del diseño, y a 1440px tiene que dar 120
     EXACTOS o la maqueta deja de cuadrar: 8.4vw pasa de 120 a partir de
     1429px, así que el `clamp` la fija ahí. Por debajo la comprime, y los
     dos cortes de abajo la rematan para el móvil. */
  --calle: clamp(24px, 8.4vw, 120px);
  --banda: 1200px;
}
@media (max-width: 980px) { .aly { --calle: 32px; } }
@media (max-width: 560px) { .aly { --calle: 20px; } }

/* ---------- Página ---------- */
/* base.css deja el body claro y los enlaces azules. La home es el único
   sitio del producto con el mundo oscuro, así que lo reescribe entero
   aquí en vez de tocar los tokens compartidos. */
.aly {
  background: var(--n-bg);
  color: var(--n-body);
  font-family: var(--n-sans);
  font-size: 16px;
  /* `normal`, no 1.6. El diseño declara el interlineado bloque a bloque —1.5,
     1.6, 1.65, 1.9— y deja el resto en el del navegador. Un 1.6 global se
     colaba en las etiquetas cortas de las maquetas del panel y desbordaba la
     tarjeta de la bitácora, además de estirar la página entera. Cada párrafo
     de aquí abajo lleva el suyo, que es el de la maqueta. */
  line-height: normal;
  font-variant-numeric: normal;
  /* `clip` y no `hidden`: `hidden` en el body lo convierte en contenedor de
     scroll y rompe el `position: sticky` de la barra. Lo que se sale es la
     onda del fondo, que mide 1440px fijos a propósito. */
  overflow-x: clip;
}
/* Safari < 16 no conoce `overflow: clip`. Ahí la onda se recorta contra su
   propia sección, que es lo que sobraba por los lados. */
@supports not (overflow-x: clip) {
  .a-plataforma { overflow: hidden; }
  .a-onda { top: 0; }
}

/* La barra pegajosa mide 88px con su calle de arriba, y tapaba el titular de
   la sección a la que acabas de saltar. La corrección va en el DESTINO y no
   en el ancla porque el navegador la aplica al elemento al que lleva, venga
   del menú, del pie o de un enlace pegado desde fuera. */
.aly [id] { scroll-margin-top: 104px; }

/* `:where()` no suma especificidad: estas dos reglas pesan lo justo para
   ganarle a `a { color: var(--blue) }` de base.css y perder contra cualquier
   regla de componente de más abajo. Escritas como `.aly a` pesaban 0,1,1 y se
   comían el `color` de `.a-btn-green` y `.a-brand`, que son 0,1,0: los
   botones verdes salían con la tinta del cuerpo y el rótulo no se leía. */
.aly :where(a) { color: inherit; text-decoration: none; }
.aly :where(a):hover { color: var(--n-green-2); }
/* `text-wrap` y `letter-spacing` se devuelven al valor inicial A PROPÓSITO:
   base.css se los pone a `h1, h2, h3` (0,0,1) para el sistema claro, y aquí
   no valen. El `balance` reequilibraba saltos que la maqueta había elegido a
   mano —«Un dominio sin verificar / no se publica» salía partido por otro
   sitio— y el `-0.02em` apretaba los titulares que el diseño deja sueltos.
   Los que sí llevan apretado lo declaran abajo, uno a uno. */
.aly h1, .aly h2, .aly h3 {
  font-family: var(--n-display);
  font-weight: 600;
  color: var(--n-ink);
  letter-spacing: normal;
  text-wrap: wrap;
}
/* El único titular al que el diseño sí le pide equilibrio. */
.a-comunidad-copy h2 { text-wrap: balance; }
.aly :focus-visible {
  outline: 2px solid var(--n-green);
  outline-offset: 3px;
  box-shadow: none;
  border-radius: 8px;
}
.aly ::selection { background: rgba(43, 227, 160, .28); color: var(--n-ink); }

.a-wrap {
  width: 100%;
  max-width: var(--banda);
  margin-inline: auto;
}

/* Halos de ambiente. Son tres discos de degradado radial que tiñen el
   fondo por detrás de todo; van en el body y no dentro de las secciones
   para que el color cruce de una a otra sin costura. `pointer-events`
   a ninguno porque cubren media página. */
.a-glows {
  position: absolute;
  inset: 0 0 auto;
  height: 4200px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.a-glow { position: absolute; border-radius: 50%; }
.a-glow-1 {
  left: -18vw; top: -300px; width: min(900px, 70vw); aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(43, 227, 160, .16), rgba(43, 227, 160, 0));
}
.a-glow-2 {
  right: -10vw; top: 40px; width: min(820px, 64vw); aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(31, 182, 201, .14), rgba(31, 182, 201, 0));
}
.a-glow-3 {
  left: 400px; top: 3700px; width: min(900px, 80vw); height: 700px;
  background: radial-gradient(closest-side, rgba(43, 227, 160, .10), rgba(43, 227, 160, 0));
}

/* Todo lo que no es halo va por encima de ellos. */
.a-head, .aly main, .a-foot { position: relative; z-index: 1; }

/* ---------- Barra ---------- */
.a-head {
  padding: 24px var(--calle) 0;
  position: sticky;
  top: 0;
  z-index: 40;
}
/* La píldora flota con 24px de aire por encima, y por ese hueco se veía pasar
   el texto al hacer scroll. El velo lo tapa con el propio color de fondo y se
   desvanece justo debajo de la barra, así que en reposo —arriba del todo— no
   se nota que está. */
.a-head::before {
  content: "";
  position: absolute;
  inset: 0 0 -20px;
  z-index: -1;
  background: linear-gradient(180deg, var(--n-bg) 62%, rgba(6, 11, 18, 0));
  pointer-events: none;
}
/* La barra es una píldora flotante, no una franja pegada al borde: es lo
   que permite que los halos del fondo se vean por encima y por los lados.
   Al despegarse gana opacidad y desenfoque —`is-stuck` la pone alysec.js—
   porque sobre el hero claro del vídeo el texto se perdía. */
.a-nav {
  max-width: var(--banda);
  margin-inline: auto;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 10px 0 20px;
  background: rgba(12, 21, 32, .78);
  border: 1px solid var(--n-line);
  border-radius: 14px;
  transition: background var(--t-mid, .3s), box-shadow var(--t-mid, .3s);
}
.a-nav.is-stuck {
  background: rgba(8, 15, 24, .92);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .9);
}

.a-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--n-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--n-bright);
  flex-shrink: 0;
}
.a-brand:hover { color: var(--n-ink); }
.a-brand svg { display: block; }

.a-nav-links { display: flex; gap: 32px; font-size: 14px; }
.a-nav-links a {
  color: var(--n-body);
  padding: 8px 0;
  position: relative;
  transition: color var(--t-fast, .16s);
}
.a-nav-links a:hover { color: var(--n-bright); }
/* `is-on` la pone el espía de secciones de alysec.js. El filete crece
   desde el centro: sin él, el menú lleva pero no dice dónde estás. */
.a-nav-links a::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: 2px;
  height: 2px;
  background: var(--n-green);
  border-radius: 2px;
  transition: left var(--t-mid, .3s), right var(--t-mid, .3s);
}
.a-nav-links a.is-on { color: var(--n-bright); }
.a-nav-links a.is-on::after { left: 0; right: 0; }

.a-nav-act { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.a-sign { color: var(--n-text); font-size: 14px; padding: 12px 16px; }

/* ---------- Botones ---------- */
.a-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  padding: 15px 22px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: transform var(--t-fast, .16s), box-shadow var(--t-fast, .16s),
              background var(--t-fast, .16s), border-color var(--t-fast, .16s);
}
.a-btn svg { display: block; flex-shrink: 0; }
.a-btn-green {
  background: var(--n-green);
  color: var(--n-green-ink);
  box-shadow: 0 0 32px rgba(43, 227, 160, .35);
}
.a-btn-green:hover {
  background: var(--n-green-2);
  color: var(--n-green-ink);
  transform: translateY(-1px);
  box-shadow: 0 0 44px rgba(43, 227, 160, .5);
}
.a-btn-ghost {
  color: var(--n-bright);
  font-weight: 500;
  border-color: var(--n-line-5);
}
.a-btn-ghost:hover { color: var(--n-ink); border-color: var(--n-green); background: rgba(43, 227, 160, .06); }
.a-btn-sm { font-size: 14px; padding: 12px 20px; box-shadow: 0 0 24px rgba(43, 227, 160, .35); }

/* La hamburguesa sólo existe por debajo de 900px; en el resto se oculta
   y el menú va desplegado. */
.a-burger {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--n-line-5);
  border-radius: 10px;
  color: var(--n-text);
  cursor: pointer;
}
.a-burger svg { width: 22px; height: 22px; }

/* ---------- Piezas de sección ---------- */
.a-sec { padding: 0 var(--calle); }

/* LA TRAMPA DE ESTA HOJA, y la que se comió 92px de calle en el primer
   intento. Casi todas las secciones llevan su banda en un HIJO
   (`.a-flow`, `.a-cards`, `.a-cta-box`), y ahí `max-width: 1200px` +
   `margin-inline: auto` es correcto. Pero el hero, la verificación y las
   comunidades NO tienen ese hijo: su contenido cuelga de la sección. Ponerles
   ahí el mismo par sumaba el margen automático a la calle —con `border-box`
   el `max-width` ya incluye el relleno— y el contenido entraba el doble de
   adentro, estrechando cada columna de dentro.

   La calle va DENTRO del ancho máximo, que es lo que deja la banda en 1200 y
   la calle en 120 a la anchura del diseño. */
.a-hero, .a-verif, .a-comunidad {
  max-width: calc(var(--banda) + 2 * var(--calle));
  margin-inline: auto;
}

.a-sec-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.a-eyebrow {
  font-family: var(--n-mono);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--n-green-2);
}
.a-h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
  letter-spacing: -.015em;
}
.a-sec-head p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--n-body); }

.a-code {
  font-family: var(--n-mono);
  font-size: .86em;
  color: var(--n-green-2);
  background: var(--n-hex-on);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ---------- Hero ---------- */
/* Flex y no rejilla, porque el reparto del diseño no es una rejilla: la copia
   mide 580, el render 680, y el render se sale 60px por la derecha
   (`margin-right: -60px`). 580 + 680 − 60 = 1200 exactos. En rejilla, las dos
   pistas se repartían el sobrante y ninguna acababa en su medida. */
.a-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 740px;
}
.a-hero-copy { width: 580px; flex-shrink: 0; display: flex; flex-direction: column; gap: 28px; }
.a-hero-mark { display: flex; align-items: center; gap: 10px; }
.a-hero-title {
  margin: 0;
  font-size: clamp(36px, 5.4vw, 60px);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.a-hero-title em { font-style: normal; color: var(--n-green); }
.a-lede {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--n-body);
  max-width: 520px;
}
.a-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.a-hero-notes { display: flex; flex-wrap: wrap; gap: 28px; padding-top: 8px; }
.a-note {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--n-body);
}
.a-note svg { flex-shrink: 0; }

/* El vídeo se recorta en disco con una máscara radial: sin ella el
   fotograma cuadrado deja un borde recto sobre el fondo y se ve el
   recuadro. La máscara es también lo que hace que el póster y el vídeo
   entren igual mientras carga. */
.a-hero-render { position: relative; width: 680px; flex-shrink: 0; margin-right: -60px; }
.a-hero-video {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
}

/* ---------- Proceso ---------- */
.a-proceso {
  padding-top: 80px;
  padding-bottom: 110px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
/* El raíl es HERMANO de la lista, no un elemento suyo: dentro de un `<ol>`
   sólo pueden vivir `<li>`, y un `<li>` decorativo habría entrado en la
   cuenta de los pasos que lee el lector de pantalla. */
.a-flow {
  position: relative;
  max-width: var(--banda);
  margin-inline: auto;
  width: 100%;
}
.a-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
/* El raíl punteado une los cuatro sellos. Va de centro a centro del
   primero y del último —de ahí el 12.5% de cada lado, medio módulo de
   cuatro—, no de borde a borde, que era lo que lo dejaba asomando. */
.a-rail {
  position: absolute;
  left: 12.5%; right: 12.5%; top: 60px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--n-green) 0 6px, transparent 6px 12px);
  opacity: .5;
}
/* El pulso que recorre el raíl. `js-flow` e `is-on` las pone alysec.js; sin el
   script la sección sale entera y quieta, que es el estado por defecto de la
   hoja. Se mueve con `background-position` y no con `transform` porque el
   raíl mide un porcentaje: un `translateX(100%)` habría sido el 100% de los
   120px del destello, no del recorrido. */
.a-flow.js-flow .a-rail::after {
  content: "";
  position: absolute;
  inset: -1px 0;
  background-image: linear-gradient(90deg, transparent, var(--n-green), transparent);
  background-size: 120px 100%;
  background-repeat: no-repeat;
  background-position-x: -120px;
  opacity: 0;
}
.a-flow.js-flow.is-on .a-rail::after { animation: a-pulso 2.8s ease-in-out infinite; }
@keyframes a-pulso {
  0%   { background-position-x: -120px; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { background-position-x: calc(100% + 120px); opacity: 0; }
}

.a-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.a-step svg { display: block; }
.a-step h3 { margin: 0; font-size: 20px; }
.a-step p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--n-body); }
/* `--paso` la escribe alysec.js (0…3): es lo que escalona la entrada de
   los cuatro sellos en vez de encenderlos a la vez. */
.a-flow.js-flow .a-step > svg {
  opacity: .35;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(var(--paso, 0) * .12s);
}
.a-flow.js-flow.is-on .a-step > svg { opacity: 1; transform: none; }

/* ---------- La plataforma ---------- */
.a-plataforma {
  position: relative;
  padding-top: 40px;
  padding-bottom: 120px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
/* La onda es decoración de fondo, en la posición del diseño: arranca 60px por
   encima de la sección y cruza por detrás del antetítulo y del titular. Se
   difumina por los lados con una máscara lineal para que no termine en canto
   vivo contra la calle. Va centrada (`left: 50%`) y no a `left: 0` porque a
   más de 1440px de ancho quedaría pegada a la izquierda; a la anchura del
   diseño las dos formas son la misma. */
.a-onda {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  top: -60px;
  width: 1440px;
  max-width: none;
  height: 447px;
  object-fit: cover;
  opacity: .55;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.a-cards {
  position: relative;
  max-width: var(--banda);
  margin-inline: auto;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
/* Esquinas achaflanadas en vez de radio: la misma silueta de ocho caras que
   la tarjeta de login (auth.css), aquí repetida en los cuatro paneles
   principales de la home para que el hexágono del logo no sea solo un
   icono, sino la forma que tiene la propia interfaz. --chamfer es el
   tamaño del corte; cada panel lo escala a su propio tamaño. */
.a-card {
  --chamfer: 20px;
  background: var(--n-panel);
  border: 1px solid var(--n-line);
  clip-path: polygon(
    var(--chamfer) 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer),
    100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)), 0 var(--chamfer)
  );
  padding: 12px;
  display: flex;
  flex-direction: column;
  transition: border-color var(--t-mid, .3s), transform var(--t-mid, .3s);
}
.a-card:hover { border-color: #26405A; transform: translateY(-2px); }

/* La mitad de arriba de cada tarjeta es una MAQUETA del panel, no una
   captura: alto fijo para que las tres rimen, y dentro una composición
   distinta por tarjeta. */
.a-card-vis {
  height: 250px;
  border-radius: 12px;
  background: linear-gradient(180deg, #0E2029, #0A141D);
  border: 1px solid var(--n-line-2);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* El diseño da un hueco distinto a cada maqueta —12, 14 y 10— y no es
   capricho: con los 12 de la primera, las cuatro filas de la bitácora suman
   6px de más y la última se sale de los 250px de alto. */
.a-card-vis--sev { gap: 14px; }
.a-card-vis--led { gap: 10px; }
.a-card-txt { padding: 22px 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.a-card-txt h3 { margin: 0; font-size: 18px; }
.a-card-txt p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--n-body); }

.a-vis-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.a-vis-head b { font-size: 12px; font-weight: 600; color: var(--n-text); }
.a-vis-head span { font-family: var(--n-mono); font-size: 11px; color: var(--n-green-2); }
.a-vis-head .a-cifra {
  font-family: var(--n-display); font-size: 28px; font-weight: 600; color: var(--n-ink);
}

/* Tarjeta 1 — alcance */
.a-scope {
  background: var(--n-tile);
  border: 1px solid #1B3140;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.a-scope svg { flex-shrink: 0; }
.a-scope div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.a-scope-url {
  font-family: var(--n-mono); font-size: 12px; color: var(--n-bright);
  overflow-wrap: anywhere;
}
.a-scope-est { font-size: 11px; color: var(--n-green-2); }
.a-scope-est.is-cyan { color: var(--n-cyan); }

/* Tarjeta 2 — cola */
.a-sevs { display: flex; flex-direction: column; gap: 12px; }
.a-sev { display: flex; align-items: center; gap: 10px; }
.a-sev > span:first-child { width: 52px; flex-shrink: 0; font-size: 11px; color: var(--n-body); }
.a-sev > span:last-child { font-family: var(--n-mono); font-size: 11px; color: var(--n-text); }
.a-bar { flex-grow: 1; height: 6px; border-radius: 3px; background: var(--n-line-2); overflow: hidden; }
.a-bar i { display: block; height: 6px; border-radius: 3px; }
.a-bar .is-crit { background: var(--n-crit); }
.a-bar .is-high { background: var(--n-high); }
.a-bar .is-med  { background: var(--n-med); }
.a-bar .is-low  { background: var(--n-cyan); }
.a-vis-foot {
  margin-top: auto;
  display: flex; justify-content: space-between; gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--n-line-2);
  font-size: 11px; color: var(--n-body);
}
.a-vis-foot span:last-child { color: var(--n-green-2); }

/* Tarjeta 3 — bitácora */
.a-led { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--n-line-2); }
.a-led:last-child { border-bottom: 0; }
.a-led i {
  width: 8px; height: 8px; flex-shrink: 0;
  border-radius: 50%;
  background: #3A5063;
}
.a-led i.is-green { background: var(--n-green); box-shadow: 0 0 8px var(--n-green); }
.a-led i.is-cyan { background: var(--n-cyan); }
.a-led div { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.a-led b { font-size: 12px; font-weight: 400; color: var(--n-bright); }
.a-led span { font-family: var(--n-mono); font-size: 10px; color: var(--n-mut); }

/* ---------- Verificación ---------- */
.a-verif {
  padding-top: 40px;
  padding-bottom: 120px;
  display: flex;
  align-items: center;
  gap: 80px;
}
.a-term-box { position: relative; width: 640px; flex-shrink: 0; }
.a-term-box::before {
  content: "";
  position: absolute;
  inset: -40px;
  border-radius: 40px;
  background: radial-gradient(closest-side, rgba(31, 182, 201, .18), rgba(31, 182, 201, 0));
  pointer-events: none;
}
.a-term {
  --chamfer: 20px;
  position: relative;
  background: var(--n-deep);
  border: 1px solid var(--n-line-3);
  overflow: hidden;
  clip-path: polygon(
    var(--chamfer) 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer),
    100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)), 0 var(--chamfer)
  );
  /* box-shadow no sigue un clip-path: dejaría el rectángulo original como
     sombra detrás de las esquinas cortadas. filter: drop-shadow sí sigue
     el contorno real. */
  filter: drop-shadow(0 24px 46px rgba(0, 0, 0, .45));
}
.a-term-bar {
  height: 44px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 18px;
  border-bottom: 1px solid var(--n-line-2);
  background: var(--n-panel);
}
.a-term-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--n-line-5); }
.a-term-bar span {
  margin-left: 12px;
  font-family: var(--n-mono); font-size: 12px; color: var(--n-mut);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* `pre` en vez de `div` con `white-space: pre`: el contenido ES un
   fichero, y así se copia con sus saltos al seleccionarlo. Desborda con
   scroll horizontal en vez de romper líneas porque un security.txt con
   la línea partida deja de parecer un security.txt. */
.a-term pre {
  margin: 0;
  padding: 24px 26px;
  font-family: var(--n-mono);
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--n-text);
  overflow-x: auto;
}
.a-term .c-com  { color: var(--n-faint); }
.a-term .c-key  { color: var(--n-cyan); }
.a-term .c-val  { color: var(--n-med); }
.a-term .c-tok  { color: var(--n-green); }
.a-term .c-ok   { color: var(--n-green-2); }
.a-term .c-wait { color: var(--n-high); }
.a-term .c-dim  { color: var(--n-body); }

.a-verif-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.a-verif-copy h2 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -.015em;
}
.a-verif-copy p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--n-body); }

/* ---------- Comunidades ---------- */
.a-comunidad {
  padding-top: 20px;
  padding-bottom: 120px;
  display: flex;
  align-items: center;
  gap: 56px;
}
.a-mapa {
  width: 600px;
  height: 504px;
  flex-shrink: 0;
  margin-left: -40px;
  object-fit: cover;
  display: block;
  -webkit-mask-image: radial-gradient(closest-side, #000 75%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 75%, transparent 100%);
}
.a-comunidad-copy { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.a-comunidad-copy h2 {
  margin: 0;
  font-size: clamp(27px, 3.2vw, 36px);
  line-height: 1.15;
  letter-spacing: -.015em;
}
.a-comunidad-copy > p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--n-body); }
.a-comunidad-copy a { color: var(--n-green); font-weight: 500; }

.a-allies { display: flex; flex-direction: column; gap: 12px; }
.a-ally {
  --chamfer: 14px;
  background: var(--n-panel);
  border: 1px solid var(--n-line);
  clip-path: polygon(
    var(--chamfer) 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer),
    100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)), 0 var(--chamfer)
  );
  padding: 16px 20px;
  display: flex; align-items: center; gap: 18px;
}
.a-ally svg { flex-shrink: 0; }
.a-ally div { display: flex; flex-direction: column; gap: 4px; }
.a-ally b { font-family: var(--n-display); font-weight: 600; font-size: 16px; color: var(--n-ink); }
.a-ally span { font-size: 13px; color: var(--n-body); }

/* ---------- CTA + formulario ---------- */
.a-cta { padding-top: 40px; padding-bottom: 120px; }
.a-cta-box {
  --chamfer: 32px;
  position: relative;
  max-width: var(--banda);
  margin-inline: auto;
  background: linear-gradient(160deg, #0D1E28 0%, #0A141D 60%);
  border: 1px solid var(--n-line-3);
  clip-path: polygon(
    var(--chamfer) 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer),
    100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)), 0 var(--chamfer)
  );
  padding: 64px;
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 64px;
  overflow: hidden;
}
.a-cta-hex { position: absolute; left: -80px; bottom: -120px; opacity: .35; pointer-events: none; }
.a-cta-copy { position: relative; display: flex; flex-direction: column; gap: 24px; }
.a-cta-copy h2 {
  margin: 0;
  font-size: clamp(30px, 3.8vw, 44px);
  line-height: 1.12;
  letter-spacing: -.015em;
}
.a-cta-copy > p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--n-body); }
.a-cta-copy strong { color: var(--n-bright); font-weight: 600; }

.a-checks { list-style: none; margin: 0; padding: 4px 0 0; display: flex; flex-direction: column; gap: 14px; }
.a-checks li { display: flex; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--n-text); }
.a-checks svg { flex-shrink: 0; margin-top: 1px; }

.a-form {
  position: relative;
  background: var(--n-deep);
  border: 1px solid var(--n-line);
  border-radius: 18px;
  padding: 32px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
  align-content: start;
  box-shadow: 0 0 60px rgba(43, 227, 160, .08);
}
.a-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.a-field-wide { grid-column: 1 / -1; }
.a-field label { font-size: 13px; font-weight: 500; color: var(--n-text); }
.a-input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  background: var(--n-field);
  border: 1px solid var(--n-line-4);
  border-radius: 10px;
  color: var(--n-bright);
  font-family: inherit;
  font-size: 14px;
  transition: border-color var(--t-fast, .16s), box-shadow var(--t-fast, .16s);
}
.a-input::placeholder { color: var(--n-mut); }
.a-input:focus {
  outline: none;
  border-color: var(--n-green);
  box-shadow: 0 0 0 3px rgba(43, 227, 160, .16);
}
.a-input[aria-invalid="true"] { border-color: var(--n-crit); }
.a-input-mono { font-family: var(--n-mono); font-size: 13px; }
textarea.a-input { height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.5; }

.a-btn-block { grid-column: 1 / -1; width: 100%; height: 50px; padding: 0; }
.a-btn:disabled { opacity: .6; cursor: progress; transform: none; }

/* El aviso del envío ocupa su fila siempre —aunque esté vacío no reserva
   alto— y va ANTES del botón para que el lector de pantalla lo anuncie
   sin tener que volver atrás. */
.a-form-msg { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.5; }
.a-form-msg:empty { display: none; }
.a-form-msg.is-error { color: #FFB4B4; }
.a-form-msg.is-ok { color: var(--n-green-2); }
.a-form-legal { grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 1.5; color: var(--n-dim); }

/* ---------- Pie ---------- */
.a-foot {
  border-top: 1px solid var(--n-line-2);
  padding: 64px var(--calle) 40px;
  background: #050A10;
}
.a-foot-in {
  max-width: var(--banda);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.a-foot-top { display: flex; gap: 64px; }
.a-foot-brand { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.a-foot-brand p { margin: 0; font-size: 14px; line-height: 1.6; color: #8FA3B3; }
.a-foot-cols {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.a-foot-col { display: flex; flex-direction: column; gap: 14px; font-size: 14px; }
.a-foot-col h4 {
  margin: 0;
  font-family: var(--n-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--n-mut);
}
.a-foot-col a { color: var(--n-text); }
.a-foot-note { margin: 0; max-width: 620px; font-size: 12px; line-height: 1.6; color: var(--n-dim); }
.a-foot-note strong { color: var(--n-body); }
.a-foot-bar {
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--n-line-2);
  font-size: 12px; color: var(--n-mut);
}

/* ---------- Entrada al hacer scroll ---------- */
/* El estado de partida lo pone sólo `.a-reveal`; la clase `in` la añade
   alysec.js. El <noscript> de la página anula las dos por si el script
   no llega: sin eso, media home se quedaría invisible. */
.a-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.a-reveal.in { opacity: 1; transform: none; }

/* ============================================================
   Adaptación
   ============================================================ */

/* El vídeo del hero deja de caber junto al texto antes que nada. */
/* Por debajo de 1120px las tres secciones a dos columnas se apilan. Los anchos
   fijos del diseño —580, 680, 640, 600— y los márgenes negativos que los
   encajan se desmontan aquí: son medidas de una maqueta de 1440, y por debajo
   de su suma dejan de caber. */
@media (max-width: 1120px) {
  .a-hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    gap: 32px;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  /* Apilada, la columna se centra aunque el texto siga a la izquierda: si no,
     queda pegada al borde con el vídeo centrado debajo. */
  .a-hero-copy { width: auto; max-width: 620px; margin-inline: auto; }
  .a-hero-render {
    width: min(520px, 100%);
    margin-right: 0;
    margin-inline: auto;
  }

  .a-verif { flex-direction: column; align-items: stretch; gap: 48px; }
  /* El texto primero: el bloque explica qué se mira en la terminal, y debajo
     de ella llegaba tarde. */
  .a-verif-copy { order: -1; }
  .a-term-box { width: auto; max-width: 640px; }

  .a-comunidad { flex-direction: column; align-items: stretch; gap: 32px; }
  .a-mapa {
    width: min(560px, 100%);
    height: auto;
    aspect-ratio: 600 / 504;
    margin-left: 0;
    margin-inline: auto;
  }
}

@media (max-width: 980px) {
  .a-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-cta-box { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 48px; }
  .a-foot-top { flex-direction: column; gap: 40px; }
  .a-foot-brand { width: auto; }
}

/* Por debajo de 900px el menú se pliega. El umbral es el ancho al que
   los cuatro enlaces más las dos acciones dejan de caber en la píldora. */
@media (max-width: 900px) {
  .a-burger { display: inline-flex; }
  .a-nav { padding: 0 10px; }
  .a-nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    background: rgba(8, 15, 24, .97);
    backdrop-filter: blur(14px);
    border: 1px solid var(--n-line);
    border-radius: 14px;
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .9);
  }
  .a-nav-links.is-open { display: flex; }
  .a-nav-links a { padding: 12px 14px; border-radius: 10px; font-size: 15px; }
  .a-nav-links a:hover { background: rgba(43, 227, 160, .08); }
  .a-nav-links a::after { display: none; }
  .a-nav-links a.is-on { background: rgba(43, 227, 160, .1); color: var(--n-green-2); }
  .a-nav { position: relative; }
  .a-sign { display: none; }

  /* Los cuatro pasos en dos filas: el raíl horizontal ya no une nada, así
     que se retira en vez de quedar cruzando el hueco entre columnas. */
  .a-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .a-rail { display: none; }
  .a-proceso { padding-bottom: 80px; gap: 48px; }
}

@media (max-width: 760px) {
  .a-cards { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
  /* Los 250px fijos son la medida que iguala las tres maquetas cuando van en
     fila. Apiladas ya no hay nada que igualar, y la de la bitácora se salía
     por abajo unos pocos píxeles: aquí el alto pasa a ser un mínimo. */
  .a-card-vis { height: auto; min-height: 250px; }
  .a-form { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .a-cta-box { --chamfer: 20px; padding: 32px 24px; }
  .a-foot-cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .a-plataforma, .a-verif, .a-comunidad, .a-cta { padding-bottom: 80px; }
  .a-term pre { font-size: 12px; padding: 18px 20px; }
}

@media (max-width: 560px) {
  .a-head { padding-top: 14px; }
  .a-hero { padding-top: 28px; padding-bottom: 32px; }
  .a-hero-cta { gap: 10px; }
  .a-hero-cta .a-btn { width: 100%; }
  .a-hero-notes { gap: 12px; flex-direction: column; }
  .a-steps { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .a-foot-bar { flex-direction: column; gap: 10px; }
  .a-verif-copy .a-btn { width: 100%; }
}

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