/* ============================================================
   AlySec — home del programa privado de bug bounty
   ------------------------------------------------------------
   Dirección fijada por el cliente a partir de una referencia:
   composición CENTRADA, etiqueta en píldora sobre cada titular,
   tarjetas redondeadas, nav en cápsula y mucho aire vertical, sobre
   fondo casi negro. La paleta se mantiene azul por decisión suya.

   Dos decisiones que conviene no deshacer sin motivo:

   1. EL ACENTO SIGUE SIENDO CIAN. Se probó el esmeralda de la
      referencia y el cliente pidió conservar el azul, así que de
      ella se toma la COMPOSICIÓN —centrada, píldoras, tarjetas
      redondeadas, nav en cápsula, ritmo airoso— y no la paleta. El
      token pasó a llamarse `--c-acc`; `--c-cyan` queda como alias
      porque `researcher.css` se escribió contra ese nombre.

   2. DE LA REFERENCIA NO SE COPIAN TRES BLOQUES: la fila de cifras
      (20M / 90% / 100K), la banda de logotipos y los testimonios
      con estrellas. AlySec no tiene clientes, ni investigadores,
      ni métricas: rellenar esos huecos era inventarlos. Ocupan su
      sitio los datos reales del programa, el marco legal peruano y
      el muro vacío.

   Contrastes medidos sobre `--c-bg` #050B14:
     · acento #22D3EE ..... 10.9:1
     · texto  #CBD9E3 ..... 13.7:1
     · atenuado #8DA5B8 ...  7.7:1
     · crítico #FB7185 ....  7.3:1
     · verde   #34D399 .... 10.3:1  (sólo estado)
   Y tinta #04141A sobre el acento: 10.4:1.
   ============================================================ */

.aly {
  /* — Fondos — */
  --c-bg:      #050B14;
  --c-bg-2:    #08121D;
  --c-panel:   #0A1826;
  --c-panel-2: #0D2130;

  /* — Filetes — */
  --c-line:   #143247;
  --c-line-2: #1D4A63;

  /* — Texto — */
  --c-white: #FFFFFF;
  --c-text:  #CBD9E3;
  --c-dim:   #8DA5B8;

  /* — Acento: acción y dato — */
  --c-acc:     #22D3EE;
  --c-acc-2:   #67E8F9;
  --c-acc-ink: #04141A;
  --c-acc-dim: rgba(34,211,238,.28);
  /* Alias: researcher.css se escribió contra `--c-cyan`. El nombre del token
     cambió a `--c-acc` al rehacer la hoja; el alias evita tocar la otra. */
  --c-cyan:   var(--c-acc);
  /* Verde: SÓLO estado correcto. No es un segundo acento. */
  --c-green:  #34D399;

  /* — Severidad — */
  --c-crit: #FB7185;
  --c-high: #FB923C;
  --c-med:  #FBBF24;
  --c-low:  #8DA5B8;

  --c-maxw: 1160px;

  position: relative;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.aly h1, .aly h2, .aly h3, .aly h4 {
  color: var(--c-white);
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -.025em;
}
.aly a { color: var(--c-acc); text-decoration: none; }
.aly a:hover { color: var(--c-acc-2); }
.aly ::selection { background: rgba(34,211,238,.3); color: var(--c-white); }
.aly :focus-visible { outline: 2px solid var(--c-acc); outline-offset: 2px; box-shadow: none; }

.aly * { scrollbar-color: var(--c-line-2) transparent; }
.aly *::-webkit-scrollbar-thumb { background: var(--c-line-2); border-color: var(--c-bg); }

.a-wrap { max-width: var(--c-maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Fondo ----------
   La referencia no lleva lluvia ni circuito: lleva halos muy suaves del color
   de acento en las costuras entre secciones. Se sustituye la textura por eso —
   dos radiales fijos, sin coste de pintado por scroll. */
.a-matrix { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.a-matrix::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(58% 34% at 50% 0%,   rgba(34,211,238,.09), transparent 70%),
    radial-gradient(46% 30% at 50% 100%, rgba(34,211,238,.07), transparent 70%);
}
.aly > *:not(.a-matrix) { position: relative; z-index: 1; }

/* ---------- Orbes de fondo ----------
   Manchas de color muy difuminadas detrás de algunas secciones. Es lo que da
   la profundidad de la referencia sin meter una imagen: `blur` grande sobre un
   círculo de color, sin eventos de puntero y por debajo del contenido.

   Van sólo en tres secciones y no en todas: si el efecto está en cada banda
   deja de leerse como profundidad y se lee como niebla. */
.a-band { position: relative; isolation: isolate; }
.a-orb {
  position: absolute; z-index: -1; pointer-events: none;
  width: 460px; height: 460px; border-radius: 50%;
  filter: blur(130px); opacity: .55;
}
.a-orb[data-orb="acc"]  { background: rgba(34,211,238,.16); }
.a-orb[data-orb="viol"] { background: rgba(129,140,248,.14); }
.a-orb[data-pos="tl"] { top: -180px; left: -180px; }
.a-orb[data-pos="tr"] { top: -160px; right: -180px; }
.a-orb[data-pos="br"] { bottom: -200px; right: -200px; }
.a-orb[data-pos="bl"] { bottom: -200px; left: -200px; }

/* ---------- Glow al pasar por encima ----------
   Se aplica a las tarjetas de contenido. El borde se tiñe de acento y aparece
   un halo tenue; nada se mueve de sitio salvo un desplazamiento de 2 px. */
.a-why-item, .a-step, .a-card {
  transition: border-color var(--t-fast), box-shadow var(--t-fast),
              transform var(--t-fast), background var(--t-fast);
}
.a-why-item:hover, .a-step:hover, .a-card:hover {
  border-color: var(--c-acc-dim);
  box-shadow: 0 0 26px -6px rgba(34,211,238,.16);
  transform: translateY(-2px);
}

.aly .a-skip {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  background: var(--c-panel); color: var(--c-white);
  border: 1px solid var(--c-line-2); border-radius: 10px;
  padding: 10px 14px; font-size: var(--fs-small); font-weight: 600;
  transition: top .18s;
}
.aly .a-skip:focus { top: 12px; }

/* ---------- Botones ---------- */
.aly .a-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  letter-spacing: -.005em; line-height: 1;
  padding: 13px 22px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), box-shadow var(--t-fast), transform .08s;
}
.aly .a-btn:active { transform: translateY(1px); }

/* El botón cian de la maqueta va rodeado de un halo ancho, no de una sombra
   proyectada. Se hace con las dos cosas: el halo sin desplazamiento reproduce la
   referencia y la sombra con offset debajo mantiene el botón apoyado en algo, en
   vez de flotando en una mancha de color. */
.aly .a-btn-cyan {
  background: var(--c-acc); color: var(--c-acc-ink);
  box-shadow: 0 0 30px -2px rgba(34,211,238,.5),
              0 10px 26px -12px rgba(34,211,238,.85);
}
.aly .a-btn-cyan:hover {
  background: var(--c-acc-2); color: var(--c-acc-ink);
  box-shadow: 0 0 38px -1px rgba(34,211,238,.62),
              0 14px 30px -12px rgba(34,211,238,.95);
}
.aly .a-btn-cyan:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

/* El secundario de la referencia no es gris: su filete ya es cian, sólo que
   apagado, y lleva su propio halo mínimo. */
.aly .a-btn-line {
  background: rgba(8,24,34,.5); color: var(--c-text);
  border-color: rgba(34,211,238,.42);
  box-shadow: 0 0 20px -10px rgba(34,211,238,.55);
}
.aly .a-btn-line:hover {
  background: rgba(34,211,238,.1); border-color: rgba(34,211,238,.7); color: var(--c-white);
  box-shadow: 0 0 26px -8px rgba(34,211,238,.7);
}

.aly .a-btn-lg { font-size: 15px; padding: 15px 28px; }
.aly .a-btn-block { width: 100%; padding: 15px; }

/* ---------- Píldora de sección ----------
   Es el patrón que define la referencia: una etiqueta pequeña, centrada, sobre
   cada titular. Va aquí por brief explícito. */
.a-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 15px; border-radius: 999px;
  border: 1px solid var(--c-line-2); background: rgba(255,255,255,.025);
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: .01em;
  color: var(--c-dim);
}
.a-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-acc); flex: none;
}

/* ---------- Nav ---------- */
.a-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5,11,20,.82);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-mid), background var(--t-mid);
}
.a-nav.is-stuck { border-bottom-color: var(--c-line); background: rgba(5,11,20,.95); }
.a-nav-in { display: flex; align-items: center; gap: 22px; height: 72px; }

.aly .a-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--c-white); }
.aly .a-brand:hover { color: var(--c-white); }
.a-logo { width: 30px; height: 32px; flex: none; }
.a-brand-name { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--c-white); }

/* El menú va centrado y en su propia cápsula, como en la referencia. */
.a-nav-links {
  display: flex; align-items: center; gap: 4px;
  margin: 0 auto; padding: 5px;
  border: 1px solid var(--c-line); border-radius: 999px;
  background: rgba(255,255,255,.02);
}
.aly .a-nav-links a {
  font-size: var(--fs-small); font-weight: 500; color: var(--c-dim);
  padding: 8px 15px; border-radius: 999px;
  transition: color var(--t-fast), background var(--t-fast);
}
.aly .a-nav-links a:hover { color: var(--c-white); background: rgba(255,255,255,.05); }

/* Acción secundaria de la barra. Va junto al CTA y no dentro de la cápsula de
   secciones, porque no es una sección: es una puerta. Sin caja, para que no
   compita con el botón primario. */
.aly .a-sign {
  font-size: var(--fs-small); font-weight: 500; color: var(--c-dim);
  padding: 8px 4px; white-space: nowrap;
  transition: color var(--t-fast);
}
.aly .a-sign:hover { color: var(--c-white); }

.a-burger {
  display: none; background: transparent; border: 1px solid var(--c-line-2);
  border-radius: 10px; color: var(--c-text); padding: 8px; cursor: pointer;
}
.a-burger svg { width: 20px; height: 20px; display: block; }

/* ---------- Hero ----------
   Dos columnas: copy a la izquierda, panel del programa a la derecha, sobre una
   escena vectorial a sangre. `overflow: hidden` no es defensivo — es lo que
   permite que el panel se salga del contenedor por la derecha y quede recortado
   por el borde de la página, que es como está encuadrado en la referencia. */
.a-hero {
  position: relative; isolation: isolate; overflow: hidden;
  /* `safe` no es adorno. Centrar contenido más alto que su caja lo desborda por
     ARRIBA además de por abajo, y el `overflow: hidden` de esta misma regla se
     lo come: en una ventana de 900px el titular y los botones desaparecían y
     sólo quedaba la señal de scroll. Con `safe` el centrado se rinde y alinea al
     inicio en cuanto no cabe. Los navegadores que no lo entiendan descartan la
     declaración entera y estiran, que también es seguro. */
  display: grid; align-content: safe center;
  min-height: clamp(560px, 82vh, 780px);
  padding: clamp(44px, 5.5vw, 80px) 0 clamp(48px, 5vw, 76px);
}

/* Tres capas de fondo, cada una en su sitio:
   el degradado base aquí, la escena en ::before, el velo en ::after. La
   constelación es un elemento real (`.a-net`) entre los dos pseudos, y ése es
   justo el motivo de que sea inline: una SVG puesta con background-image no
   ejecuta animaciones. */
/* El azogue de la referencia es petróleo, no negro: el negro sólo aparece en la
   esquina inferior derecha. Con el degradado cayendo a `--c-bg` al 44% la
   escena se apagaba entera y el globo desaparecía. */
.a-hero-bg {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background: linear-gradient(148deg, #0E323C 0%, #0A2733 34%, #071A25 68%, #050D16 100%);
}
.a-hero-bg::before {
  content: ""; position: absolute; inset: 0;
  background: url("/ui/assets/hero-scene.svg") center / cover no-repeat;
}
/* El velo apaga el CENTRO, que es por donde baja la columna de texto, y suelta
   los dos costados: a la izquierda el globo, a la derecha la constelación. Un
   velo plano a toda la caja habría apagado la escena entera para proteger una
   franja. Las verticales funden con el nav arriba y con la banda legal abajo. */
.a-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(54% 56% at 50% 46%, rgba(5,11,20,.72) 0%,
                    rgba(5,11,20,.26) 60%, rgba(5,11,20,0) 82%),
    linear-gradient(180deg, rgba(5,11,20,.5) 0%, rgba(5,11,20,0) 24%,
                            rgba(5,11,20,0) 74%, rgba(5,11,20,.88) 100%);
}

.a-net { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Los nodos de la referencia no son círculos planos: están encendidos, con
   bloom. El `drop-shadow` se aplica al GRUPO y no a cada círculo — un solo pase
   de desenfoque para los treinta y tantos nodos del grupo en vez de treinta.
   Los apagados no llevan halo: son los que dan la profundidad por contraste. */
.a-net-link { fill: none; stroke: var(--c-acc); stroke-opacity: .26; stroke-width: 1; }
.a-net-dim  { fill: #52829A; }
.a-net-mid  { fill: var(--c-acc); fill-opacity: .85; filter: drop-shadow(0 0 5px rgba(34,211,238,.8)); }
.a-net-hot  { fill: #A5F3FC; filter: drop-shadow(0 0 9px rgba(103,232,249,.95)); }
/* El único momento animado de la página. Los nodos vivos laten desfasados por
   `--i`: si latieran a la vez la nube entera parpadearía como un aviso. */
.a-net-live { animation: aNodo 4.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.57s); }
@keyframes aNodo { 0%, 100% { opacity: .4 } 50% { opacity: 1 } }

.a-hero-in { position: relative; width: 100%; text-align: center; }
.a-hero-copy { max-width: 860px; margin: 0 auto; }

/* Tipografía medida sobre la maqueta ampliada. El titular es NEGRITA —se probó
   en 600 y al ampliar el recorte de referencia los astiles son claramente los de
   un 700—, con el tracking flojo (-.022em, no el -.035em anterior: apretar tanto
   es de titulares pequeños, y aquí "bug bounty" perdía el hueco entre palabras).
   El lede va grande a propósito: en la referencia mide casi un tercio del
   titular, no la mitad de eso. */
.a-hero h1 {
  margin: 0 auto;
  font-size: clamp(36px, 5.2vw, 64px); line-height: 1.04;
  letter-spacing: -.022em; font-weight: 700; text-wrap: balance;
}
/* Las palabras en cian de la maqueta van encendidas: llevan un halo suave del
   propio acento. Es la excepción a "ningún texto lleva glow" del sistema, y la
   pidió el cliente señalando la imagen. Se mantiene tenue y sin desplazamiento
   para que no emborrone el contorno de la letra. */
.a-hero h1 em {
  color: var(--c-acc); font-style: normal; font-weight: 700;
  text-shadow: 0 0 32px rgba(34,211,238,.5), 0 0 12px rgba(34,211,238,.28);
}

.a-lede {
  margin: 22px auto 0; max-width: 52ch;
  font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; color: var(--c-dim);
}

.a-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; justify-content: center; }

/* Las tres garantías del programa, bajo los botones. Deliberadamente NO son
   `.a-hero-facts`: esa caja promete una cifra y aquí hay prosa (ver el comentario
   largo en alysec.html). Una línea atenuada las dice sin fingir que son un dato,
   y de paso devuelve al hero el peso que perdió al quitarse la ventana.
   Flex y no texto corrido para que al envolver nunca se parta una garantía. */
.a-hero-terms {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 10px; margin: 26px auto 0; max-width: 760px;
  font-size: var(--fs-small); line-height: 1.5; color: var(--c-dim);
}
.a-hero-sep { color: var(--c-line-2); }

/* OJO — no es código muerto. El hero de esta página ya no usa `.a-hero-facts`,
   pero la cabecera del VDP sí (web/vdp.html, con cuatro datos y el override
   `.v-facts` de vdp.css). Ahí sí son datos —plazos en días— que es para lo que
   esta caja sirve. Borrar este bloque rompe esa página.
   Tarjetas, no cápsula: la forma es la de la maqueta. */
.a-hero-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; margin: 40px auto 0; max-width: 720px;
}
/* Las tarjetas de la maqueta llevan el filete teñido de cian y un halo muy
   tenue, no el filete neutro del resto de la página: son parte del bloque
   encendido del hero, no de la retícula de contenido de más abajo. */
.a-hero-facts > div {
  display: flex; flex-direction: column-reverse; gap: 5px;
  padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgba(34,211,238,.22);
  background: rgba(8,22,34,.58); backdrop-filter: blur(8px);
  box-shadow: 0 0 26px -14px rgba(34,211,238,.55),
              inset 0 1px 0 rgba(255,255,255,.045);
}
/* Tipografía de la maqueta también aquí: valor y etiqueta en la sans del
   titular, en caja normal. El mono se reservaba al dato técnico y estos tres no
   lo son —son prosa corta, no cifras—; en versalitas y monoespaciado se leían
   como una cabecera de tabla en medio del hero. */
.a-hero-facts dt {
  font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--c-dim);
}
.a-hero-facts dd {
  margin: 0; font-size: 19px; font-weight: 700;
  letter-spacing: -.015em; color: var(--c-white); line-height: 1.2;
}

/* Señal de scroll. Va centrada respecto a la PÁGINA, no a la columna de texto:
   marca el borde inferior del hero entero. */
.a-hero-scroll {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: fit-content; margin: clamp(34px, 4vw, 54px) auto 0;
  font-size: 13px; letter-spacing: 0; color: var(--c-dim); text-decoration: none;
}
.a-hero-scroll:hover { color: var(--c-acc); }
.a-hero-scroll svg { width: 18px; height: 18px; animation: aBaja 2.6s ease-in-out infinite; }
@keyframes aBaja { 0%, 100% { transform: translateY(0); opacity: .6 } 50% { transform: translateY(4px); opacity: 1 } }

/* ---------- Banda del marco legal ----------
   Ocupa el hueco donde la referencia pone su banda de logotipos. Ahí no van
   clientes: no hay. Va lo que sí es verificable. */
.a-legalband {
  border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  padding: 30px 0; text-align: center;
}
.a-legalband p {
  font-size: var(--fs-small); color: var(--c-dim); margin-bottom: 16px;
}
.a-legalband ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 12px; justify-content: center;
}
.a-legalband li {
  padding: 8px 16px; border: 1px solid var(--c-line-2); border-radius: 999px;
  font-size: var(--fs-small); color: var(--c-text); background: rgba(255,255,255,.02);
}
.aly .a-legalband a { font-weight: 600; }

/* ---------- Bandas y encabezados ---------- */
.a-band { padding: clamp(64px, 8vw, 112px) 0; }
.a-band-alt { background: var(--c-bg-2); border-block: 1px solid var(--c-line); }

.a-head { max-width: 62ch; margin: 0 auto clamp(34px, 4.5vw, 58px); text-align: center; }
.a-head h2 {
  margin-top: 20px;
  font-size: clamp(26px, 3.2vw, 38px); line-height: 1.16;
  letter-spacing: -.03em; font-weight: 700; text-wrap: balance;
}
.a-head p {
  margin: 15px auto 0; max-width: 58ch;
  font-size: 16px; line-height: 1.65; color: var(--c-dim);
}
.a-head p b { color: var(--c-text); font-weight: 600; }

/* ---------- Tarjeta base ---------- */
.a-card, .a-why-item, .a-step, .a-form, .a-wall, .a-harbor, .a-scene {
  border: 1px solid var(--c-line); border-radius: 18px;
  background: var(--c-panel);
}

/* ---------- ¿Por qué? ---------- */
.a-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.a-why-item { padding: clamp(24px, 2.8vw, 32px); }
.a-why-item svg { width: 30px; height: 30px; color: var(--c-acc); display: block; }
.a-why-item h3 { margin: 20px 0 10px; font-size: 18px; letter-spacing: -.022em; }
.a-why-item p { font-size: 14.5px; line-height: 1.7; color: var(--c-dim); }

/* ---------- Comunidades aliadas ----------
   Los tres logos traen fondos propios y distintos —uno blanco opaco, otro
   transparente, otro negro—, así que sobre el fondo oscuro se verían como
   tres recortes sueltos. Cada uno va en la MISMA placa clara: uniforma la
   presentación sin retocar ninguna marca, que es lo que hace un muro de
   partners. La placa es clara y no oscura porque dos de los tres se pierden
   sobre negro. */
.a-allies {
  margin-top: clamp(28px, 3.4vw, 44px);
  padding-top: clamp(28px, 3.4vw, 40px);
  border-top: 1px solid var(--c-line);
}
/* El filete y el aire de arriba existen para separar este bloque de lo que
   tenía encima, cuando colgaba de "Quiénes operamos esto". Al retirarse esa
   sección, el bloque pasó a ser la sección entera y quedaba una línea suelta
   —más ~70px de vacío— justo bajo la cabecera de banda. Cuando va detrás de
   una `.a-head` no hay nada de lo que separarlo: la cabecera ya trae su propio
   margen inferior. Sin tokens nuevos y sin tocar un color. */
.a-head + .a-allies { margin-top: 0; padding-top: 0; border-top: 0; }
/* Centrado, como el resto de la página: el contrato de dirección de esta home
   fija composición centrada, y un bloque alineado a la izquierda debajo de un
   titular centrado se lee como un pegote. */
.a-allies h3 { font-size: 18px; letter-spacing: -.022em; text-align: center; }
.a-allies > p {
  margin: 10px auto 0; max-width: 62ch; text-align: center;
  font-size: 14.5px; line-height: 1.7; color: var(--c-dim);
}
/* Tres tarjetas y sólo tres. Se descartó la marquesina de logos en bucle de la
   referencia: ese mecanismo existe para decir "hay más de los que caben", y
   repitiendo tres marcas cuatro veces cada una diría justo lo contrario de lo
   que la página lleva declarando desde arriba —que el programa acaba de abrir—.
   Con tres, la salida honesta es que ocupen de verdad el ancho y respondan al
   cursor, no que finjan ser doce. */
.a-ally-cards {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  align-items: start;
}

/* Cada tarjeta es un <details>: el desplegable es nativo, así que funciona con
   teclado y con lector de pantalla sin escribir un solo aria-* a mano. El
   atributo `name` compartido hace que abrir una cierre las otras (acordeón), y
   donde el navegador no lo soporta simplemente quedan varias abiertas. */
.a-ally {
  background: var(--c-panel); border: 1px solid var(--c-line);
  border-radius: 18px; overflow: hidden;
  transition: border-color var(--t-fast), transform var(--t-mid),
              box-shadow var(--t-mid);
}
/* La transición de `box-shadow` estaba declarada desde el principio pero
   ninguna regla llegaba a poner una sombra: la tarjeta se elevaba 2px sin nada
   debajo, que es flotar. Ahora el hover usa la profundidad propia del mundo
   —negro profundo con desplazamiento y desenfoque, la misma de DESIGN.md— y no
   un halo cian: el neón vive en el hero y sólo ahí. */
.a-ally:hover {
  border-color: var(--c-acc-dim); transform: translateY(-4px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
}
.a-ally[open] { border-color: var(--c-acc-dim); }
.a-ally:has(summary:focus-visible) { border-color: var(--c-acc); }

.a-ally summary {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: clamp(28px, 3vw, 38px) clamp(20px, 2.2vw, 28px) clamp(24px, 2.6vw, 30px);
  cursor: pointer; text-align: center;
  list-style: none;
}
.a-ally summary::-webkit-details-marker { display: none; }
/* El foco lo pinta la tarjeta entera (regla :has de arriba), no el summary:
   un contorno dentro de la caja se lee como un segundo borde. */
.a-ally summary:focus-visible { outline: none; }

.a-ally-mark {
  width: clamp(88px, 9vw, 112px); height: clamp(88px, 9vw, 112px); flex: none;
  display: grid; place-items: center;
  background: #fff; border-radius: 18px; overflow: hidden;
  transition: transform var(--t-mid);
}
.a-ally:hover .a-ally-mark { transform: scale(1.06); }
.a-ally-mark img {
  width: clamp(64px, 6.6vw, 82px); height: clamp(64px, 6.6vw, 82px);
  object-fit: contain;
}

.a-allies b {
  font-size: 17px; line-height: 1.35; font-weight: 600; color: var(--c-white);
  letter-spacing: -.018em; text-wrap: balance;
}

/* La pista de "aquí se pulsa". Cambia de verbo al abrir, para que no invite a
   pulsar algo que ya está abierto. */
.a-ally-cue {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .02em;
  color: var(--c-acc);
}
.a-ally-cue svg { width: 13px; height: 13px; transition: transform var(--t-fast); }
.a-ally:hover .a-ally-cue svg { transform: translateX(3px); }
.a-ally[open] .a-ally-cue svg { transform: rotate(90deg); }
.a-ally[open] .a-ally-cue { color: var(--c-dim); }

.a-ally > p {
  margin: 0; padding: 0 clamp(20px, 2.2vw, 28px) clamp(24px, 2.6vw, 30px);
  font-size: 14.5px; line-height: 1.7; color: var(--c-dim); text-align: center;
}

/* ---------- Puerta corta desde las comunidades ---------- */
.a-ally-cta {
  margin-top: clamp(26px, 3vw, 38px); padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--c-line); text-align: center;
}
.a-ally-cta > p {
  margin: 0 auto 18px; max-width: 56ch;
  font-size: 14.5px; line-height: 1.7; color: var(--c-dim);
}
.a-ally-cta > p b { color: var(--c-white); }

/* Plegado por JS (.is-folded). Sin JS la clase no llega y el formulario se ve
   entero: la puerta corta sigue siendo usable con el script caído. */
.a-ally-form {
  max-width: 420px; margin: 0 auto; text-align: left;
  display: grid; gap: 14px;
}
.a-ally-form.is-folded {
  display: none;
}
.a-ally-form.is-folded.is-open {
  display: grid;
  animation: a-ally-in .22s ease-out;
}
@keyframes a-ally-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.a-ally-form .a-form-legal { text-align: center; }

/* ---------- Reglas: dos cajas tipo terminal ----------
   Permitido a la izquierda, prohibido a la derecha. Enfrentarlas es lo que las
   hace escaneables: quien llega a esta sección quiere saber dónde está la
   línea, y una lista corrida de cinco puntos obliga a leerla entera para
   averiguarlo. */
.a-rulegrid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; max-width: 1000px; margin: 0 auto; text-align: left;
}
.a-term {
  border: 1px solid var(--c-line); border-radius: 14px; overflow: hidden;
  background: var(--c-panel);
}
.a-term-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 16px; border-bottom: 1px solid var(--c-line);
  background: rgba(255,255,255,.02);
  font-family: var(--font-mono); font-size: var(--fs-micro);
}
.a-term-path { color: var(--c-dim); }
.a-term-count {
  padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 600;
}
.a-term-ok .a-term-count { color: var(--c-green); background: rgba(52,211,153,.12); }
.a-term-no .a-term-count { color: var(--c-crit); background: rgba(251,113,133,.12); }

.a-term ul { list-style: none; margin: 0; padding: 6px 0; }
.a-term li {
  position: relative; padding: 12px 18px 12px 46px;
  font-size: 14.5px; line-height: 1.62; color: var(--c-dim);
  border-top: 1px solid rgba(20,50,71,.55);
}
.a-term li:first-child { border-top: none; }
.a-term b { color: var(--c-white); font-weight: 600; }

/* El marcador se dibuja con bordes, no con un glifo: así no depende de que la
   fuente tenga ✓ ni ✗, y queda alineado a la misma rejilla en los dos casos. */
.a-term li::before {
  content: ""; position: absolute; left: 18px; top: 16px;
  width: 15px; height: 15px; border-radius: 4px;
}
.a-term-ok li::before {
  border: 1.6px solid var(--c-green); border-top: none; border-right: none;
  height: 8px; border-radius: 0 0 0 2px;
  transform: rotate(-45deg); top: 17px;
}
.a-term-no li::before {
  background:
    linear-gradient(to bottom, transparent 44%, var(--c-crit) 44%, var(--c-crit) 56%, transparent 56%),
    linear-gradient(to right, transparent 44%, var(--c-crit) 44%, var(--c-crit) 56%, transparent 56%);
  transform: rotate(45deg); border-radius: 2px;
}

.a-rules-foot {
  margin: 22px auto 0; max-width: 74ch; text-align: center;
  font-size: var(--fs-small); line-height: 1.7; color: var(--c-dim);
}

/* ---------- Safe harbor ---------- */
.a-harbor {
  margin: 26px auto 0; max-width: 900px; padding: clamp(24px, 2.8vw, 32px);
  border-color: var(--c-acc-dim); background: rgba(34,211,238,.05);
}
.a-harbor h3 { font-size: 18px; letter-spacing: -.022em; }
.a-harbor > p { margin-top: 12px; font-size: 15px; line-height: 1.65; color: var(--c-text); }
.a-harbor ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.a-harbor li {
  position: relative; padding-left: 26px;
  font-size: 14.5px; line-height: 1.6; color: var(--c-dim);
}
.a-harbor li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 5px;
  border-left: 2px solid var(--c-acc); border-bottom: 2px solid var(--c-acc);
  transform: rotate(-45deg);
}
.a-harbor b { color: var(--c-white); font-weight: 600; }
.a-harbor-links {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--c-acc-dim);
  font-size: var(--fs-small); font-weight: 600;
}
.a-harbor-warn { margin-top: 12px; font-size: var(--fs-micro); line-height: 1.6; color: var(--c-dim); }

/* ---------- Aviso de fase ---------- */
.a-notice {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 0 auto 28px; padding: 20px 22px; max-width: 860px;
  border: 1px solid var(--c-acc-dim); border-radius: 14px;
  background: rgba(34,211,238,.05);
  font-size: 14.5px; line-height: 1.65; color: var(--c-text);
}
.a-notice svg { width: 20px; height: 20px; flex: none; color: var(--c-acc); margin-top: 1px; }
.a-notice b { color: var(--c-white); font-weight: 600; }

/* ---------- Tabla de niveles ---------- */
.a-tiers { overflow-x: auto; border: 1px solid var(--c-line); border-radius: 18px; }
.a-table { width: 100%; min-width: 860px; border-collapse: collapse; }
.a-table thead th {
  text-align: left; padding: 15px 20px;
  background: var(--c-panel-2); border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em; color: var(--c-dim);
}
.a-table tbody tr { border-bottom: 1px solid var(--c-line); }
.a-table tbody tr:last-child { border-bottom: 0; }
.a-table tbody tr:hover { background: rgba(34,211,238,.03); }
.a-table tbody th[scope="row"] {
  display: flex; align-items: center; gap: 10px;
  padding: 20px; text-align: left; white-space: nowrap;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
}
/* Insignia por banda, como los medallones de la referencia. El icono de cada
   severidad ya existía suelto; aquí se le pone su disco con halo del color de
   la banda. El color lo hereda del `color` que la fila ya define (.t-crit y
   compañía), así que no hay una segunda tabla de colores que mantener. */
.a-table tbody th svg {
  width: 20px; height: 20px; flex: none;
  box-sizing: content-box; padding: 9px; border-radius: 50%;
  background: currentColor; border: 1px solid currentColor;
  box-shadow: 0 0 16px -2px currentColor;
}
/* El glifo va en el tono de la banda sobre el disco; el disco se aclara con
   opacidad para no convertirse en una mancha sólida. */
.a-table tbody th svg { background-color: color-mix(in srgb, currentColor 14%, transparent); }
.a-table td { padding: 20px; vertical-align: top; font-size: 14.5px; line-height: 1.6; color: var(--c-dim); }
.a-table td b { color: var(--c-white); font-weight: 600; }
.a-table td.cvss { font-family: var(--font-mono); font-size: 13px; color: var(--c-text); white-space: nowrap; }

.t-crit th[scope="row"] { color: var(--c-crit); }
.t-high th[scope="row"] { color: var(--c-high); }
.t-med  th[scope="row"] { color: var(--c-med); }
.t-low  th[scope="row"] { color: var(--c-low); }

/* ---------- Muro vacío ----------
   Ocupa el hueco de los testimonios de la referencia. Sin clientes ni
   investigadores todavía, se enseña vacío en vez de inventarlo. */
.a-wall {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px 44px; align-items: center;
  margin-top: 26px; padding: clamp(24px, 2.8vw, 32px);
  border-style: dashed; border-color: var(--c-line-2);
}
.a-wall h3 { font-size: 18px; letter-spacing: -.022em; }
.a-wall p { margin-top: 12px; font-size: 14.5px; line-height: 1.65; color: var(--c-dim); max-width: 52ch; }
.a-wall b { color: var(--c-white); font-weight: 600; }
.a-wall-slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.a-slot {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 15px; border-radius: 12px;
  border: 1px dashed var(--c-line-2); background: rgba(255,255,255,.02);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: .07em; color: var(--c-dim);
}
.a-slot span { color: var(--c-line-2); font-weight: 600; }

/* ---------- Flujo ---------- */
/* Los cuatro pasos, conectados por una línea de degradado como en la
   referencia. La línea va a la altura del número y se detiene antes del
   último: un raíl que sigue después del paso 4 sugiere un quinto que no
   existe. Se dibuja con ::after sobre cada paso menos el último, así que no
   hace falta ningún elemento extra en el HTML. */
.a-flow {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
/* El raíl es UNO solo, dibujado por detrás de las cuatro tarjetas. Cada
   tarjeta lo tapa con su fondo, así que sólo se ve en los huecos: es lo que da
   la sensación de pasos encadenados. Intentarlo con un ::after por tarjeta no
   funciona — la tarjeta siguiente lo pinta encima, porque son hermanas con
   position:relative y gana la última del DOM. */
.a-flow { position: relative; }
.a-flow::before {
  content: ""; position: absolute; z-index: 0;
  left: 6%; right: 6%;
  top: calc(clamp(22px, 2.6vw, 28px) + 17px);
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--c-acc-dim) 12%, var(--c-acc-dim) 88%, transparent);
}
.a-step { position: relative; z-index: 1; padding: clamp(22px, 2.6vw, 28px); }
.a-step-n {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: rgba(34,211,238,.12); border: 1px solid var(--c-acc-dim);
  color: var(--c-acc); font-family: var(--font-mono); font-size: 13px; font-weight: 600;
}
.a-step-ic { display: block; width: 28px; height: 28px; margin: 18px 0 0; color: var(--c-acc); }
.a-step h3 { margin: 14px 0 8px; font-size: 17px; letter-spacing: -.022em; }
.a-step p { font-size: 14px; line-height: 1.6; color: var(--c-dim); }

/* ---------- La consola ---------- */
.a-op .a-scene { max-width: 1000px; margin: 0 auto; }
.a-scene { position: relative; overflow: hidden; padding: clamp(14px, 1.8vw, 20px); }
.a-rain { display: none; }          /* la referencia no lleva lluvia */
.a-holo {
  position: absolute; left: 50%; top: 50%; width: 46%; max-width: 260px;
  transform: translate(-50%, -50%); opacity: .07; pointer-events: none;
  filter: saturate(1.4) brightness(1.8);
}
.a-console { position: relative; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-bg); overflow: hidden; }
.a-console-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px; border-bottom: 1px solid var(--c-line); background: var(--c-panel-2);
}
.a-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-line-2); flex: none; }
.a-console-title { margin-left: 8px; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--c-dim); }
.a-console-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: .1em; color: var(--c-dim);
}
.a-console-live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-acc);
  animation: a-pulse 1.8s ease-in-out infinite;
}
@keyframes a-pulse { 50% { opacity: .25; } }

.a-console-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--c-line); }
.cpanel { background: var(--c-bg); padding: 15px 16px; min-width: 0; }
.cpanel h4 {
  margin: 0 0 10px; font-size: var(--fs-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--c-dim);
}
.cpanel-code pre { margin: 0; overflow-x: auto; font-family: var(--font-mono); font-size: 11px; line-height: 1.8; color: var(--c-text); }
.cpanel-code .ln { display: inline-block; width: 2.2em; color: var(--c-line-2); user-select: none; }
.cpanel-code .ln.bad { color: var(--c-crit); }
.cpanel-code .cm { color: var(--c-dim); }
.cpanel-code .st { color: var(--c-green); }
.cpanel-code .hit { color: var(--c-crit); }

.cfind {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.45; color: var(--c-crit);
  border-left: 1px solid var(--c-crit); padding-left: 9px; margin-bottom: 12px;
}
.cbars { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 7px; }
.cbars li {
  display: grid; grid-template-columns: 4.6em 1fr 1.2em; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--c-dim);
}
.cbars b { color: var(--c-text); font-weight: 500; text-align: right; }
.cbar { height: 5px; border-radius: 3px; background: var(--c-line); position: relative; overflow: hidden; }
.cbar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 3px; }
.cbar-crit::after { background: var(--c-crit); }
.cbar-high::after { background: var(--c-high); }
.cbar-med::after  { background: var(--c-med); }

.cexploit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 10.5px; }
.cexploit span { color: var(--c-dim); text-transform: uppercase; letter-spacing: .1em; }
.cexploit code {
  color: var(--c-crit); background: rgba(251,113,133,.1);
  border: 1px solid rgba(251,113,133,.3); border-radius: 4px; padding: 2px 6px;
}
.cpanel-net svg { width: 100%; height: auto; display: block; }
.cnet-legend {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-family: var(--font-mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--c-dim);
}
.cnet-legend .bad { color: var(--c-crit); }
.cboard { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cboard li {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px;
  border: 1px dashed var(--c-line); border-radius: 8px;
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--c-dim);
}
.cboard li span { color: var(--c-line-2); font-weight: 600; }
.cboard-note { margin-top: 9px; font-family: var(--font-mono); font-size: 9.5px; color: var(--c-dim); opacity: .8; }

.a-scene-tag {
  position: absolute; right: 18px; bottom: 16px;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: .08em; color: var(--c-dim);
  background: rgba(5,11,20,.9); border: 1px solid var(--c-line-2);
  border-radius: 999px; padding: 4px 12px;
}
.a-chain-note, .a-phases-note { color: var(--c-dim); }

/* ---------- Solicitud ----------
   Único sitio además del hero donde entra una imagen de fondo. El velo va en
   dos capas y se cierra arriba y abajo para que la banda no aparezca cortada
   contra el negro plano de la sección anterior ni contra el pie. */
.a-close { position: relative; isolation: isolate; overflow: hidden; }
.a-close-bg {
  position: absolute; inset: 0; z-index: -1;
  background-image: url("/ui/assets/ops-alysec.jpg");
  background-size: cover; background-position: center 40%;
}
/* La foto de origen ya es casi negra salvo el fondo del pasillo, así que el
   velo puede ser mucho más flojo de lo que parece: con el primer ajuste sólo
   pasaba un 14% de la imagen y la banda se veía plana. El texto de la izquierda
   cae sobre los racks, que son la zona más oscura del encuadre. */
.a-close-bg::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5,11,20,.8) 0%, rgba(5,11,20,.42) 46%, rgba(5,11,20,.6) 100%),
    linear-gradient(180deg, rgba(5,11,20,.96) 0%, rgba(5,11,20,.2) 36%,
                            rgba(5,11,20,.34) 64%, rgba(5,11,20,.96) 100%);
}
.a-close .a-apply-copy h2 { margin-top: 18px; }

/* ---------- Solicitud ---------- */
.a-apply {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(30px, 4vw, 56px); align-items: start; text-align: left;
}
.a-apply-copy h2 { font-size: clamp(24px, 2.8vw, 32px); line-height: 1.18; letter-spacing: -.03em; }
.a-apply-copy > p { margin-top: 14px; font-size: 15.5px; line-height: 1.65; color: var(--c-dim); max-width: 46ch; }
.a-apply-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.a-apply-list li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.55; color: var(--c-text); }
.a-apply-list li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 5px;
  border-left: 2px solid var(--c-acc); border-bottom: 2px solid var(--c-acc);
  transform: rotate(-45deg);
}
.a-form { padding: clamp(24px, 3vw, 34px); }
.a-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.a-field label { font-size: var(--fs-small); font-weight: 500; color: var(--c-text); }
.aly .a-input {
  width: 100%; background: rgba(255,255,255,.03);
  border: 1px solid var(--c-line-2); border-radius: 12px;
  color: var(--c-white); font-family: inherit; font-size: 14.5px;
  padding: 13px 15px; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.aly .a-input::placeholder { color: #8296A8; }
.aly .a-input:focus { outline: none; border-color: var(--c-acc); box-shadow: 0 0 0 3px rgba(34,211,238,.15); }
.aly textarea.a-input { resize: vertical; min-height: 76px; line-height: 1.6; }
.aly .a-input[aria-invalid="true"] { border-color: var(--c-crit); }

.a-form-msg { display: none; margin-bottom: 16px; padding: 13px 15px; border-radius: 12px; font-size: 14px; line-height: 1.55; }
.a-form-msg.is-error { display: block; color: #FECDD3; background: rgba(251,113,133,.1); border: 1px solid rgba(251,113,133,.4); }
.a-form-msg.is-ok { display: block; color: #A7F3D0; background: rgba(34,211,238,.1); border: 1px solid var(--c-acc-dim); }
.a-form-legal { margin-top: 16px; font-size: var(--fs-micro); line-height: 1.6; color: var(--c-dim); }

/* ---------- Pie ---------- */
.a-foot { border-top: 1px solid var(--c-line); padding: clamp(48px, 6vw, 72px) 0 30px; }
.a-foot-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 44px; padding-bottom: 36px; }
.a-foot-brand p { margin-top: 14px; font-size: var(--fs-small); color: var(--c-dim); max-width: 32ch; line-height: 1.6; }
.a-foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.a-foot-col h4 {
  margin: 0 0 14px; font-size: var(--fs-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em; color: var(--c-dim);
}
.aly .a-foot-col a { display: block; padding: 6px 0; font-size: var(--fs-small); color: var(--c-text); font-weight: 500; }
.aly .a-foot-col a:hover { color: var(--c-acc); }
.a-foot-pending {
  display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-line);
  font-size: var(--fs-micro); color: var(--c-dim); line-height: 1.5; max-width: 32ch;
}
.a-foot-bar {
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  padding-top: 24px; border-top: 1px solid var(--c-line);
  font-size: var(--fs-micro); color: var(--c-dim);
}

/* ---------- Reveal ---------- */
.a-reveal { opacity: 0; transform: translateY(16px); }
.a-reveal.in {
  opacity: 1; transform: none;
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .a-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-ally-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-apply { grid-template-columns: minmax(0, 1fr); }
  .a-foot-top { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .a-burger { display: inline-flex; }
  .a-nav-links {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none; flex-direction: column; align-items: stretch; gap: 2px;
    margin: 0; padding: 10px 24px 16px; border-radius: 0;
    background: rgba(5,11,20,.98); border: 0; border-bottom: 1px solid var(--c-line);
  }
  .a-nav-links.is-open { display: flex; }
  .aly .a-nav-links a { padding: 13px 12px; font-size: 15px; }
  .a-nav-in { position: relative; gap: 12px; }
  .a-nav-apply { margin-left: auto; }
  .a-wall { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .a-tiers { overflow-x: visible; border: 0; }
  .a-table { min-width: 0; display: block; }
  .a-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .a-table tbody, .a-table tr, .a-table td { display: block; width: 100%; }
  .a-table tbody tr { border: 1px solid var(--c-line); border-radius: 14px; margin-bottom: 12px; padding: 6px 0; }
  .a-table tbody th[scope="row"] { padding: 16px 18px 8px; }
  .a-table td { padding: 0 18px 14px; }
  .a-table td::before {
    display: block; margin-bottom: 5px;
    font-size: var(--fs-micro); font-weight: 600;
    text-transform: uppercase; letter-spacing: .09em; color: var(--c-dim);
  }
  .a-table td:nth-of-type(1)::before { content: "Puntaje"; }
  .a-table td:nth-of-type(2)::before { content: "Ejemplos"; }
  .a-table td:nth-of-type(3)::before { content: "Reconocimiento"; }
  .a-console-grid { grid-template-columns: minmax(0, 1fr); }

}

@media (max-width: 620px) {
  .a-wrap { padding: 0 18px; }
  .a-nav-in { gap: 10px; }
  .aly .a-sign { font-size: 13px; padding-inline: 2px; }
  .aly .a-nav-apply { font-size: 12.5px; padding: 10px 14px; }
  .a-why, .a-flow { grid-template-columns: minmax(0, 1fr); }
  .a-flow::before { display: none; }
  .a-rulegrid { grid-template-columns: minmax(0, 1fr); }
  .a-ally-cards { grid-template-columns: minmax(0, 1fr); }
  .a-hero { min-height: 0; }
  /* `cover` recorta por el centro, y a esta anchura el centro de la escena es
     el hueco que hay ENTRE el globo y la constelación: quedaba un fondo de
     retícula vacía. Se desplaza el encuadre hasta el globo, que es la mitad que
     aguanta el recorte vertical. Y se baja su opacidad: en vertical el texto
     ocupa todo el ancho, así que la escena ya no tiene un costado libre donde
     verse y pasa a ser textura detrás de la lectura, no un elemento a la par. */
  .a-hero-bg::before { background-position: 16% center; opacity: .5; }
  /* Las tres garantías caben justas en una fila a esta anchura: envuelven a dos
     líneas y dejan un `·` colgando al final de la primera, que se lee como si
     faltara algo. Apiladas y sin separadores quedan como lo que son, una lista
     corta. El centrado se hereda del `justify-content` de la regla base. */
  .a-hero-terms { flex-direction: column; gap: 4px; }
  .a-hero-sep { display: none; }
  /* `.a-hero-facts` aquí ya sólo peina la cabecera del VDP —el hero de esta
     página dejó de usarla—: sus cuatro datos a 18px de ancho no caben en fila,
     y apilados se leen en vez de partirse. */
  .a-hero-facts { grid-template-columns: minmax(0, 1fr); }
  .a-hero-facts > div { flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 10px; }
  .a-hero-actions .a-btn { flex: 1 1 100%; }
  .a-wall-slots { grid-template-columns: repeat(2, 1fr); }
  .a-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
  .a-scene-tag { position: static; display: block; width: fit-content; margin: 12px 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .a-reveal { opacity: 1 !important; transform: none !important; }
  .a-console-live::before { animation: none; }
  /* Los nodos vivos se quedan encendidos y la flecha de scroll quieta: se
     pierde el latido, no la escena. */
  .a-net-live { animation: none; }
  .a-hero-scroll svg { animation: none; }
  /* El desplegable de la puerta corta aparece sin deslizarse, y las tarjetas
     de comunidad no se levantan al pasar por encima. */
  .a-ally-form.is-folded.is-open { animation: none; }
  .a-ally:hover { transform: none; }
  .a-ally:hover .a-ally-mark { transform: none; }
}