/* Wots · Chief of Agents — home-a.css: secciones 1–4 de la home (hero + ring 01 §2a/A.1, clientes 02 §3.4,
   qué hacemos + malla viva 01 §2b, el Chief of Agents 01 §2c). Solo se carga en index.html, después de base.css.
   Namespaces: .hero .ring .cli .qh .malla .chief · motion solo transform/opacity (+ stroke-dashoffset en el ring). */

/* Bloques anchos de la home: cabeceras en .container (x=120 a 1440) y contenido ancho a 1240,
   para que su borde derecho (1340) no quede debajo del FAB de WhatsApp. */
main .container--wide { --container-wide: 1240px; }

/* ===================== 1. HERO ===================== */
/* El alto deja asomar la banda de clientes al final del primer pantallazo (brief 2026-08-30 H2):
   a 1440x900 el hero mide 780 px y la huincha blanca entra 120 px en pantalla, así que se ven el
   rótulo y la primera fila de logos completa. Es min-height y no height: si el contenido crece
   (el anillo apilado en tablet, por ejemplo), la sección crece con él y no se corta nada. */
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: max(600px, calc(100svh - 120px)); display: grid; align-content: center; padding-block: calc(var(--nav-h) + 44px) 48px; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(520px 520px at 74% 50%, rgba(34,197,94,.14), transparent 60%); }
.hero__mesh { position: absolute; inset: 0 0 auto 0; z-index: -1; width: 100%; height: min(100%, 100svh); pointer-events: none; }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(380px, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.hero__copy { container-type: inline-size; }
.hero__h1 { display: flex; flex-direction: column; gap: .18em; max-width: none; letter-spacing: 0; line-height: 1; }
.hero__h1-top { font-size: var(--fs-h1-top); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; color: var(--ink-2); }
.hero__h1-main { font-size: var(--fs-h1); font-size: min(var(--fs-h1), 12.4cqi); font-weight: 800; letter-spacing: -.035em; line-height: 1; text-wrap: balance; }
.hero__term { font-style: normal; white-space: nowrap; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__brand { color: var(--ink); white-space: nowrap; }
.hero__sub { margin-top: 24px; max-width: 44rem; font-size: var(--fs-hero-sub); font-weight: 500; line-height: 1.45; color: var(--ink-2); }
.hero__sub strong { color: var(--ink); font-weight: 700; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.hero__ctas > .btn { flex: 0 0 auto; }
.hero__ctas .mailcap { flex: 1 1 300px; max-width: 440px; }
/* El ancho intrínseco del input no debe fijar el mínimo de la cápsula (si no, desborda a 360 px).
   El `flex:1 1 0; width:0` del input ya vive en base.css §7 (.mailcap input): no se duplica. */
.hero__ctas .mailcap { min-width: 0; }
.hero__help { margin-top: 10px; font-size: var(--fs-xs); color: var(--muted); }
.hero__proof { display: flex; align-items: baseline; gap: 14px; margin-top: 28px; }
.hero__metric .tnum { display: inline-block; min-width: 3ch; text-align: right; }
.hero__metric { font-size: var(--fs-metric); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--green-2); font-variant-numeric: tabular-nums; }
.hero__metric-l { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hero__visual { display: grid; justify-items: center; }

/* Entrada del hero: solo transform (sin opacity en el H1: LCP) + fundido en lo que no es LCP */
html.js .hero__h1-top, html.js .hero__h1-main { animation: hero-up 600ms var(--ease-out) both; }
html.js .hero__h1-main { animation-delay: 60ms; }
html.js .hero__sub { animation: hero-in 600ms var(--ease-out) 160ms both; }
html.js .hero__ctas, html.js .hero__help { animation: hero-in 600ms var(--ease-out) 280ms both; }
html.js .hero__proof { animation: hero-in 600ms var(--ease-out) 420ms both; }
html.js .hero__visual { animation: hero-ring 700ms var(--ease-out) 240ms both; }
@keyframes hero-up { from { transform: translateY(.35em); } }
@keyframes hero-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes hero-ring { from { opacity: 0; transform: scale(.92); } }

/* ===================== 2. ANILLO DEL CICLO · constelación conectada (01 A.1) =====================
   DOS relojes anidados, en relación entera (nada se desfasa nunca):
     --beat  3,2 s   latido del icono de marca del núcleo (SMIL) = UNA vuelta completa del frente
                     (--lap). Antes la vuelta duraba cuatro latidos y se arrastraba; ahora el ciclo
                     Crea·Orquesta·Gobierna·Mejora se recorre entero en cada latido: cuatro sucesos
                     por latido en vez de uno.
     --cycle 12,8 s  el relato: cuatro latidos, cuatro vueltas, cuatro verbos del pie. El pie NO
                     cambia de ritmo (sigue en un verbo por latido); lo único que se aceleró es el
                     anillo, que es de lo que se trataba.
   La vuelta NO es uniforme —ahí estaba el arrastre—: cada cuarto es reposo → arranque → crucero →
   frenada (--tick 0,8 s por estación, siempre en la misma rejilla). El reposo LARGO (0,42 s) cae
   arriba, en «Crea», justo en el latido del núcleo: el sistema respira ahí y sale disparado (0,38 s
   el primer cuarto contra 0,64 / 0,60 / 0,56 s de los otros tres, que aceleran hacia el cierre de
   vuelta). 32 % del tiempo quieto, 68 % corriendo: el contraste es lo que da el dinamismo, no la
   velocidad media.
   Jerarquía de acentos (para que no sean cuatro golpes iguales):
     · paso   cada llegada: un aro verde FINO que decae en 0,2 s. Nunca blanco, nunca relleno.
     · turno  el verbo protagonista: el único con relleno + texto claro + borde verde estable,
              encendido su vuelta entera (3,2 s), en sincronía con su línea del pie.
     · golpe  la llegada del frente AL verbo protagonista: dos aros concéntricos ALREDEDOR de la
              píldora (van detrás de su fondo opaco: jamás encima del texto). Camina: cae en el
              latido (Crea), a +0,8 s (Orquesta), +1,6 s (Gobierna), +2,4 s (Mejora) y vuelve a caer
              en el latido. Cada verbo recibe así DOS toques separados en el tiempo: se enciende con
              el latido y recibe el golpe cuando el frente llega.
   Los catorce puntos ya no se encienden por reloj: se encienden AL PASO del frente. El --d de cada
   radio es el instante exacto en que el cometa cruza su ángulo, y el del punto y su nombre en la
   leyenda, ese instante + los 0,26 s que tarda el pulso en recorrer el radio hacia afuera. La
   cascada sigue existiendo, pero ahora la causa algo que se ve pasar.
   Geometría del viewBox 0 0 400 400 (sin cambios): núcleo r≈56 · vía del ciclo r=116 con las cuatro
   píldoras montadas encima —el frente pasa POR DETRÁS de ellas, el texto nunca queda tapado— ·
   puntos r=166 · halo r=190. Los catorce ángulos (medidos desde arriba, en sentido horario) son
   22·38·54·70 y 110·130·150 para los canales, y sus espejos 338·322·306·290 y 250·230·210 para los
   sistemas: cuatro arriba y tres abajo por lado, con los huecos de 48°/40°/56°/40° que dejan libres
   las cuatro píldoras. El --d de cada radio SALE de este keyframe (no se elige a ojo): es el
   instante en que ring-orbit cruza ese ángulo; el del punto y el de su nombre en la leyenda, ese
   instante + 0,26 s. Si algún día cambia la cantidad de puntos hay que recalcular los tres. UNA sola vía: el tramo recién recorrido queda encendido 0,35 s
   (.ring__cyc-arc), que es la lectura de trayectoria que sobrevive a 280 px.
   Solo transform/opacity: ni un filtro ni un stroke-dashoffset por fotograma. El SMIL del icono lo
   sincroniza y lo pausa home-a.js (módulo 5): CSS y SMIL comparten fase, y fuera del viewport, con
   la pestaña oculta o con el botón de pausa no corre ninguno de los dos. */
.ring { --beat: 3.2s; --lap: 3.2s; --tick: .8s; --cycle: 12.8s; position: relative; width: min(448px, 100%); margin: 0 auto; }
/* el disco manda el tamaño del anillo (400 px); la caja de texto puede ser más ancha para que la
   leyenda con los catorce nombres entre en una línea por familia y no en cuatro */
.ring__disc { position: relative; width: min(400px, 100%); margin-inline: auto; aspect-ratio: 1; }
.ring__svg { display: block; width: 100%; height: 100%; }

/* ---- fondo: halo punteado que avanza un paso por latido (no gira solo: lo mueve el pulso) ---- */
.ring__halo { fill: none; stroke: rgba(148,163,184,.12); stroke-width: 1; stroke-dasharray: 1 7; vector-effect: non-scaling-stroke; transform-origin: 200px 200px; animation: ring-tick calc(var(--beat) * 16) steps(16) infinite; }
@keyframes ring-tick { to { transform: rotate(-360deg); } }

/* ---- cuerdas punto a punto: la rueda se lee como malla; se tensan una vez por latido ---- */
.ring__chords { opacity: .12; animation: ring-chords var(--beat) var(--ease-out) infinite; }
@keyframes ring-chords { 0%, 26% { opacity: .12; } 34% { opacity: .4; } 62%, 100% { opacity: .12; } }
.ring__chord { fill: none; stroke: var(--green-3); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* ---- la vía del ciclo: el tramo que el frente acaba de recorrer queda encendido 0,35 s ----
       Es opacity sobre cuatro arcos ya dibujados: ni dasharray ni longitudes animadas. */
.ring__cyc { fill: none; stroke: rgba(34,197,94,.16); stroke-width: 2; }
.ring__cyc-arc { fill: none; stroke: var(--green); stroke-width: 1.8; opacity: .26; animation: ring-arc var(--lap) linear infinite; animation-delay: calc(var(--aq) * var(--tick)); }
@keyframes ring-arc { 0% { opacity: .26; } 6% { opacity: .32; } 25% { opacity: .92; } 36% { opacity: .3; } 100% { opacity: .26; } }
.ring__cyc-ar { fill: rgba(34,197,94,.62); }

/* ---- el campo entero respira con el latido (1,2 %) ---- */
.ring__field { transform-box: view-box; transform-origin: 200px 200px; animation: ring-breathe var(--beat) cubic-bezier(.25,.6,.35,1) infinite; }
@keyframes ring-breathe { 0%, 26%, 100% { transform: scale(1); } 7% { transform: scale(1.012); } 15% { transform: scale(.9985); } }

/* ---- onda de choque: sale del núcleo en cada latido y enciende la vía al cruzarla ---- */
.ring__wave { fill: none; stroke: var(--green-2); opacity: 0; transform-box: view-box; transform-origin: 200px 200px; }
.ring__wave--1 { stroke-width: 1.6; animation: ring-wv1 var(--beat) cubic-bezier(.16,.84,.44,1) infinite; }
@keyframes ring-wv1 { 0% { transform: scale(1); opacity: 0; } 4% { opacity: .55; } 30% { transform: scale(2.08); opacity: 0; } 100% { transform: scale(2.08); opacity: 0; } }
.ring__wave--2 { stroke-width: 1; animation: ring-wv2 var(--beat) cubic-bezier(.16,.84,.44,1) .09s infinite; }
@keyframes ring-wv2 { 0% { transform: scale(1); opacity: 0; } 5% { opacity: .3; } 44% { transform: scale(2.97); opacity: 0; } 100% { transform: scale(2.97); opacity: 0; } }
.ring__cycflash { fill: none; stroke: var(--green-3); stroke-width: 2; opacity: 0; animation: ring-cycfl var(--beat) var(--ease-out) infinite; }
@keyframes ring-cycfl { 0%, 7% { opacity: 0; } 11% { opacity: .5; } 28%, 100% { opacity: 0; } }

/* ---- EL FRENTE: un solo grupo que rota, con las estelas dibujadas estáticas dentro ----
   Perfil de la vuelta (3,2 s), por cuartos de 0,8 s clavados —la rejilla no se mueve nunca, por eso
   todo lo demás puede colgarse de ella con un simple animation-delay—:
     Crea → Orquesta   reposo 0,42 s + carrera 0,38 s   (el silencio largo y el sprint)
     Orquesta → Gobierna  0,16 + 0,64 · Gobierna → Mejora  0,20 + 0,60 · Mejora → Crea  0,24 + 0,56
   Cada carrera es arranque t² (22 % del tramo, 13,2°) + crucero lineal (50 %, 60°) + frenada 2t−t²
   (28 %, 16,8°): sale disparado, cruza y se ve llegar. Las curvas exactas son las de aceleración y
   desaceleración constantes. */
.ring__orbit { transform-box: view-box; transform-origin: 200px 200px; animation: ring-orbit var(--lap) linear infinite; will-change: transform; }
@keyframes ring-orbit {
  0%       { transform: rotate(0deg);     animation-timing-function: linear; }
  13.125%  { transform: rotate(0deg);     animation-timing-function: cubic-bezier(.333,0,.667,.333); }
  15.738%  { transform: rotate(13.2deg);  animation-timing-function: linear; }
  21.675%  { transform: rotate(73.2deg);  animation-timing-function: cubic-bezier(.333,.667,.667,1); }
  25%      { transform: rotate(90deg);    animation-timing-function: linear; }
  30%      { transform: rotate(90deg);    animation-timing-function: cubic-bezier(.333,0,.667,.333); }
  34.4%    { transform: rotate(103.2deg); animation-timing-function: linear; }
  44.4%    { transform: rotate(163.2deg); animation-timing-function: cubic-bezier(.333,.667,.667,1); }
  50%      { transform: rotate(180deg);   animation-timing-function: linear; }
  56.25%   { transform: rotate(180deg);   animation-timing-function: cubic-bezier(.333,0,.667,.333); }
  60.375%  { transform: rotate(193.2deg); animation-timing-function: linear; }
  69.75%   { transform: rotate(253.2deg); animation-timing-function: cubic-bezier(.333,.667,.667,1); }
  75%      { transform: rotate(270deg);   animation-timing-function: linear; }
  82.5%    { transform: rotate(270deg);   animation-timing-function: cubic-bezier(.333,0,.667,.333); }
  86.35%   { transform: rotate(283.2deg); animation-timing-function: linear; }
  95.1%    { transform: rotate(343.2deg); animation-timing-function: cubic-bezier(.333,.667,.667,1); }
  100%     { transform: rotate(360deg); }
}
/* Estela corta (40°) siempre puesta y estela larga (100°) que solo existe mientras corre: el largo
   aparente sigue a la velocidad SIN animar longitudes; al frenar se recoge sobre la cabeza y esa
   contracción, con el destello de salida del halo, es la carga que hace explosivo el arranque. */
.ring__trail { fill: none; stroke-width: 3; stroke-linecap: round; opacity: .95; }
.ring__trail-glow { fill: none; stroke-width: 11; stroke-linecap: round; opacity: .14; }
.ring__trail-far { fill: none; stroke-width: 2; stroke-linecap: round; opacity: 0; animation: ring-stretch var(--lap) linear infinite; }
@keyframes ring-stretch {
  0%, 13.125% { opacity: 0; }
  17%   { opacity: .6; }  23%    { opacity: .5; }  25%   { opacity: 0; }
  30%   { opacity: 0; }   34%    { opacity: .6; }  48%   { opacity: .5; }  50% { opacity: 0; }
  56.25% { opacity: 0; }  60%    { opacity: .6; }  73%   { opacity: .5; }  75% { opacity: 0; }
  82.5% { opacity: 0; }   86%    { opacity: .6; }  98%   { opacity: .5; }  100% { opacity: 0; }
}
.ring__head-dot { fill: #ECFFF4; }
/* el halo destella en el instante de SALIR de cada estación: el arranque se ve, aunque la cabeza
   esté en ese momento pasando por detrás de la píldora */
.ring__head-halo { fill: var(--green-2); opacity: .16; animation: ring-launch var(--lap) var(--ease-out) infinite; }
@keyframes ring-launch {
  0%, 11% { opacity: .16; }  13.125% { opacity: .62; }  19% { opacity: .16; }
  28%     { opacity: .16; }  30%     { opacity: .5; }   36% { opacity: .16; }
  54%     { opacity: .16; }  56.25%  { opacity: .5; }   62% { opacity: .16; }
  80%     { opacity: .16; }  82.5%   { opacity: .5; }   88%, 100% { opacity: .16; }
}
/* un solo eco, en otro radio y a otro tempo (dos vueltas por latido, velocidad constante): da
   profundidad y evita que la pausa larga quede muerta, sin encender nada ni sumar neblina */
.ring__echo { transform-box: view-box; transform-origin: 200px 200px; animation: ring-echo calc(var(--lap) / 2) linear infinite; }
@keyframes ring-echo { to { transform: rotate(360deg); } }
.ring__echo path { fill: none; stroke: var(--green-3); stroke-width: 2; stroke-linecap: round; opacity: .09; }

/* ---- radios · VERDE = lo que sale hacia un punto · BLANCO = lo que llega de un canal o un sistema.
       El --d de cada radio es el instante en que el frente cruza su ángulo: el pulso no baja por
       reloj, lo dispara el paso del cometa y tarda 0,26 s en llegar al punto. ---- */
.ring__line { stroke: var(--green); stroke-width: 1; opacity: .13; vector-effect: non-scaling-stroke; animation: ring-thread var(--lap) var(--ease-out) infinite; animation-delay: var(--d); }
@keyframes ring-thread { 0% { opacity: .13; } 2% { opacity: .52; } 18% { opacity: .22; } 40%, 100% { opacity: .13; } }
/* el pulso NACE en la vía (r=112, justo por dentro del carril del frente) y llega al punto en
   0,26 s: por eso el --d del punto es el del radio + 0,26 s. */
.ring__out { fill: var(--green-3); opacity: 0; transform: translateY(-56px); animation: ring-out var(--lap) cubic-bezier(.3,.7,.4,1) infinite; animation-delay: var(--d); }
@keyframes ring-out { 0% { transform: translateY(-56px); opacity: 0; } 1% { opacity: 1; } 8.125% { transform: translateY(-92px); opacity: 1; } 10% { transform: translateY(-92px); opacity: 0; } 100% { transform: translateY(-92px); opacity: 0; } }
/* Un hilo por latido hace el viaje completo y visible: entra el dato, el núcleo destella y en el
   latido siguiente sale la respuesta. Cuatro latidos = cuatro hilos = canal, sistema, canal, sistema. */
.ring__in { fill: #F8FAFC; opacity: 0; animation: ring-in var(--cycle) cubic-bezier(.4,0,.5,1) infinite; animation-delay: calc(var(--k) * var(--beat) + 1.55s); }
@keyframes ring-in { 0% { transform: translateY(-92px); opacity: 0; } 1% { opacity: 1; } 9.4% { transform: translateY(0); opacity: 1; } 11% { transform: translateY(0); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
.ring__line-b { stroke: #F8FAFC; stroke-width: 1; opacity: 0; vector-effect: non-scaling-stroke; animation: ring-back var(--cycle) var(--ease-out) infinite; animation-delay: calc(var(--k) * var(--beat) + 1.5s); }
@keyframes ring-back { 0% { opacity: 0; } 1.5% { opacity: .38; } 9.5% { opacity: .3; } 12%, 100% { opacity: 0; } }
.ring__flash { fill: none; stroke: #F8FAFC; stroke-width: 1.5; opacity: 0; transform-box: view-box; transform-origin: 200px 200px; animation: ring-flash var(--beat) var(--ease-out) infinite; }
@keyframes ring-flash { 0%, 85% { transform: scale(.5); opacity: 0; } 89% { opacity: .5; } 100% { transform: scale(1.9); opacity: 0; } }

/* ---- los catorce puntos conectados: se encienden cuando les llega el pulso que disparó el frente ---- */
.ring__nd-s { transform-box: fill-box; transform-origin: center; animation: ring-pop var(--lap) cubic-bezier(.34,1.4,.64,1) infinite; animation-delay: var(--d); }
@keyframes ring-pop { 0% { transform: scale(1); } 4% { transform: scale(1.13); } 16%, 100% { transform: scale(1); } }
.ring__nd-halo { fill: none; stroke: var(--green-2); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ring-ndhalo var(--lap) var(--ease-out) infinite; animation-delay: var(--d); }
@keyframes ring-ndhalo { 0% { transform: scale(.85); opacity: 0; } 2% { opacity: .5; } 18% { transform: scale(1.62); opacity: 0; } 100% { transform: scale(1.62); opacity: 0; } }
.ring__nd-bg { fill: #040E20; stroke: var(--green-a35); stroke-width: 1; }
.ring__nd-i { color: #8FA3BC; }
.ring__nd-on { opacity: 0; animation: ring-ndon var(--lap) var(--ease-out) infinite; animation-delay: var(--d); }
@keyframes ring-ndon { 0% { opacity: 0; } 2%, 27% { opacity: 1; } 33%, 100% { opacity: 0; } }
.ring__nd-ring { fill: none; stroke: var(--green-2); stroke-width: 1.6; }
.ring__nd-i2 { color: #DCFCE7; }
/* Los sistemas de la empresa NO se vuelven verdes al encenderse: la leyenda promete dos familias
   y la animación tiene que sostener la diferencia también en el estado encendido. */
.ring__nd--sy .ring__nd-bg { stroke: rgba(148,163,184,.32); }
.ring__nd--sy .ring__nd-halo { stroke: #CBD5E1; }
.ring__nd--sy .ring__nd-ring { stroke: #E2E8F0; stroke-width: 1.4; }
.ring__nd--sy .ring__nd-i2 { color: #F8FAFC; }

/* ---- etiqueta bajo demanda: máximo dos a la vez, en el instante en que se enciende su punto
       (--ls ya trae el retardo absoluto: vuelta que le toca + su instante dentro de la vuelta).
       Siete puntos por familia = siete vueltas de ciclo (22,4 s); los porcentajes del keyframe se
       recalcularon para que cada nombre siga leyéndose 1,7 s, igual que con seis. ---- */
.ring__lab { opacity: 0; animation: ring-lab calc(var(--lap) * 7) linear infinite; animation-delay: var(--ls); }
@keyframes ring-lab { 0% { opacity: 0; } .86%, 6% { opacity: 1; } 7.7%, 100% { opacity: 0; } }
.ring__lab-bg { fill: #020817; stroke: var(--green-a35); stroke-width: 1; }
.ring__lab-t { font-family: var(--font); font-size: 11px; font-weight: 600; fill: #DCFCE7; }
.ring__lab--sy .ring__lab-bg { stroke: rgba(148,163,184,.45); }
.ring__lab--sy .ring__lab-t { fill: #E2E8F0; }

/* ---- estaciones del ciclo: tres niveles de suceso, y ninguno tapa el texto ----
       El orden de pintado manda: los aros van ANTES del fondo opaco de la píldora, así que crecen
       por fuera y por detrás; el verbo siempre se lee. */
.ring__st-bg { fill: #020817; stroke: rgba(34,197,94,.34); stroke-width: 1; }
.ring__st-t { font-family: var(--font); font-size: 14px; font-weight: 700; fill: var(--ink); }
/* turno: el protagonista, una vuelta entera, en sincronía con su línea del pie */
.ring__st-on { opacity: 0; animation: ring-ston var(--cycle) var(--ease-out) infinite; animation-delay: calc(var(--si) * var(--lap)); }
@keyframes ring-ston { 0%, 21.5% { opacity: 1; } 23.5%, 100% { opacity: 0; } }
.ring__st-on .ring__st-bg { fill: var(--green-a16); stroke: var(--green); }
.ring__st-on .ring__st-t { fill: #DCFCE7; }
/* paso: cada vez que el frente llega, aro fino que decae en 0,2 s */
.ring__st-rip { fill: none; stroke: var(--green-2); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ring-strip var(--lap) var(--ease-out) infinite; animation-delay: calc(var(--si) * var(--tick)); }
@keyframes ring-strip { 0% { transform: scale(1); opacity: .7; } 6.25% { transform: scale(1.14); opacity: 0; } 100% { transform: scale(1.14); opacity: 0; } }
/* golpe: solo cuando el frente llega al verbo PROTAGONISTA (una vez por vuelta, y camina) */
.ring__st-hit { fill: none; stroke: var(--green); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ring-sthit var(--cycle) var(--ease-out) infinite; animation-delay: calc(var(--si) * (var(--lap) + var(--tick))); }
@keyframes ring-sthit { 0% { transform: scale(1); opacity: .95; } 2.6% { transform: scale(1.32); opacity: 0; } 100% { transform: scale(1.32); opacity: 0; } }
.ring__st-hit2 { fill: none; stroke: var(--green-3); stroke-width: 1.1; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ring-sthit2 var(--cycle) var(--ease-out) infinite; animation-delay: calc(var(--si) * (var(--lap) + var(--tick))); }
@keyframes ring-sthit2 { 0%, .35% { transform: scale(1); opacity: 0; } .8% { opacity: .6; } 3.6% { transform: scale(1.62); opacity: 0; } 100% { transform: scale(1.62); opacity: 0; } }

/* ---- núcleo: el icono animado de marca, sin texto encima. El latido y el destello son CSS de la
       página (no SMIL) para que compartan reloj con el resto del anillo. ---- */
.ring__core-g { transform-box: fill-box; transform-origin: center; animation: ring-thump var(--beat) cubic-bezier(.25,.6,.35,1) infinite; }
@keyframes ring-thump { 0%, 24%, 100% { transform: scale(1); } 5% { transform: scale(1.07); } 9% { transform: scale(.997); } 13% { transform: scale(1.02); } }
.ring__core-glow { animation: ring-flare var(--beat) var(--ease-out) infinite; }
@keyframes ring-flare { 0%, 30%, 100% { opacity: .24; } 7% { opacity: .66; } }

/* ---- botón de pausa (WCAG 2.2.2: el movimiento dura más de 5 s y tiene que poder detenerse).
       Vive en el aire que sobra entre la caja de texto (448) y el disco (400): no ocupa alto. ---- */
.ring__pause { display: none; position: absolute; top: 0; right: 0; z-index: 2; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--muted); opacity: .32; cursor: pointer; transition: opacity var(--dur-2, .2s) var(--ease-out), color var(--dur-2, .2s) var(--ease-out); }
html.js .ring__pause { display: grid; place-items: center; }
.ring__pause svg { width: 15px; height: 15px; fill: currentColor; }
.ring__pause .ring__pause-play { display: none; }
.ring__pause[aria-pressed="true"] .ring__pause-play { display: block; }
.ring__pause[aria-pressed="true"] .ring__pause-bar { display: none; }
/* La marca visible mide 26 px a propósito (no debe competir con el anillo), pero el área
   tocable llega a 44x44 con un pseudo transparente centrado (ESPEC §8). */
.ring__pause::before { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.ring__pause:hover, .ring__pause:focus-visible { opacity: 1; color: var(--green-2); }
.ring__pause:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---- pie: un verbo por latido, igual que antes. La salida termina ANTES de que empiece la entrada
       (nunca hay dos textos impresos uno encima del otro) y la caja es de alto fijo para que nada
       salte. Cada verbo se lee 2,75 s (antes 2,56): el anillo corre más, el texto respira igual.
       Los retardos son NEGATIVOS a propósito: con retardo positivo, en la PRIMERA vuelta el verbo
       entrante no tiene fundido de entrada (la línea queda en blanco 0,3 s justo en el latido, que
       es el clímax); en negativo la animación arranca ya rodada y el relevo se ve completo desde el
       primer ciclo. Medido: en t = 3,0 / 3,19 s la línea nunca está vacía. ---- */
.ring__cap { position: relative; height: 3em; margin-top: 22px; text-align: center; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.ring__cap b { color: var(--green-2); font-weight: 700; }
.ring__cap span { position: absolute; inset: 0; opacity: 0; animation: ring-cap var(--cycle) linear infinite; animation-delay: var(--d, 0s); }
.ring__cap span:nth-child(2) { --d: -9.6s; }
.ring__cap span:nth-child(3) { --d: -6.4s; }
.ring__cap span:nth-child(4) { --d: -3.2s; }
@keyframes ring-cap { 0%, 21.5% { opacity: 1; } 22.5%, 97.5% { opacity: 0; } 100% { opacity: 1; } }

/* ---- leyenda: los nombres reales de las catorce conexiones. Cada nombre se enciende en el mismo
       instante que su punto (solo opacity: el color de cada familia no cambia), así que ahora la
       leyenda también se recorre siguiendo al frente. ---- */
.ring__leg { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 4px; margin: 4px 0 0; font-size: 10.5px; line-height: 1.5; color: var(--muted-2); }
.ring__leg--ch { margin-top: 10px; }
.ring__leg-k { flex: none; margin-right: 1px; font-weight: 600; color: var(--muted); }
.ring__leg--ch .ring__leg-k { color: var(--green-2); }
.ring__leg-n { color: #DCFCE7; opacity: .38; animation: ring-lit var(--lap) linear infinite; animation-delay: var(--d); }
.ring__leg--sy .ring__leg-n { color: #CBD5E1; }
@keyframes ring-lit { 0% { opacity: .38; } 2%, 27% { opacity: 1; } 33%, 100% { opacity: .38; } }
/* el separador viaja con el nombre que le sigue: al partirse la línea nunca queda un «·» suelto */
.ring__leg-n + .ring__leg-n::before { content: "·"; margin-right: 4px; color: #334155; }
.ring__leg-sm { display: none; }

/* ---- gating: fuera del viewport, con la pestaña oculta o en pausa manual (home-a.js pausa además
       el SMIL del icono, que no obedece ni a esta clase ni a la media query de reduced motion) ---- */
.ring.is-paused, .ring.is-paused * { animation-play-state: paused !important; }
.ring.is-paused, .ring.is-paused * { animation-play-state: paused !important; }

/* ===================== 3. CLIENTES (banda blanca) ===================== */
.cli { padding: 30px 0 44px; }
.cli .kicker { margin-bottom: 26px; }
.cli__row--b { --marquee-dur: 58s; }
.cli .marquee li { height: 48px; }
.cli .marquee img { height: 30px; }
.cli .marquee img.cli__logo--xs { height: 20px; }
.cli .marquee img.cli__logo--s { height: 26px; }
.cli .marquee img.cli__logo--m { height: 36px; }
.cli .marquee img.cli__logo--l { height: 40px; }
.cli .marquee img.cli__logo--xl { height: 44px; }
/* Wordmark apaisado (7,6:1): se dimensiona por alto de caja alta, no por caja cuadrada. */
.cli .marquee img.cli__logo--wide { height: 22px; }

/* ===================== 4. QUÉ HACEMOS ===================== */
.qh__head { margin-bottom: clamp(24px, 3vw, 40px); }
.qh__h2 { max-width: 34ch; font-size: clamp(1.6rem, .7rem + 3.7vw, 4rem); }
.qh__body { margin-top: clamp(32px, 4vw, 56px); }
/* La frase de posicionamiento del fundador sube a subtítulo de la sección (brief 2026-08-30 H4):
   ya no cierra el bloque, lo encabeza. Pesa menos que el H2 y más que una bajada normal.
   Brief 31-08 P3: va en UNA sola línea. Se le saca el tope de 24ch (era el que la partía en dos)
   y se le prohíbe el corte. Para que «prohibir el corte» no termine en desborde en pantallas
   angostas, el tamaño lleva DOS techos: la rampa de siempre y uno atado al ancho disponible
   (la frase mide 19,7 em: con 4,4vw quedan 32 px de aire a 390). El min() solo muerde bajo ~430 px. */
.qh__sub { margin-top: 14px; font-size: clamp(.75rem, min(4.4vw - 1px, .78rem + .95vw), 1.75rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.qh__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.qh__box { position: relative; overflow: hidden; display: grid; gap: 10px; align-content: start; padding: clamp(22px, 2.4vw, 30px); }
.qh__box::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--green-a35) 30%, var(--green-a35) 70%, transparent); }
.qh__box .ico-box { margin-bottom: 2px; }
.qh__box-t { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; color: var(--ink); }
.qh__box-p { font-size: var(--fs-body); line-height: 1.55; color: var(--ink-2); }

/* ---- Malla viva (01 §2b · rediseño 31-08) ---------------------------------------------------
   Eje vertical: Chief of Agents → agentes (y tu equipo) → GOBIERNO (la frontera) → canales →
   personas. Lo que ya existía en la empresa sale del eje y vive en el panel lateral derecho.
   Panel 1200×620 en escritorio y 400×780 bajo 780 px de contenedor; --u = 1 unidad del viewBox,
   así que TODA la geometría se escribe en unidades del viewBox y escala sola.
   Motion: solo transform / opacity / stroke-dashoffset. Cero filter por fotograma.
   SIN JS el estado por defecto es la MALLA COMPLETA (sellos estampados, aprobación visible,
   registro escrito): nada se ve roto ni a medio construir. `html.js` es el que apaga cosas
   para que el JS pueda construirlas ante los ojos. */
.malla { position: relative; container-type: inline-size; margin: 0 auto; }
.malla__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.malla__panel, .malla__narr { --u: calc(100cqw / 1200); }
.malla__panel {
  position: relative; aspect-ratio: 1200 / 620; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background:
    radial-gradient(52% 32% at 50% 4%, rgba(34,197,94,.13), transparent 70%),
    radial-gradient(64% 34% at 50% 100%, rgba(34,197,94,.05), transparent 70%),
    radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.008));
}

/* ---- el renglón que narra: banda de alto fijo, nunca empuja ni tapa nada ---- */
.malla__narr { position: absolute; z-index: 7; left: calc(30 * var(--u)); top: calc(22 * var(--u)); width: calc(452 * var(--u)); height: calc(48 * var(--u)); margin: 0; pointer-events: none; }
.malla__narr-l { position: absolute; left: 0; top: 0; width: 100%; font-size: clamp(12px, calc(15 * var(--u)), 15.5px); font-weight: 600; line-height: 1.35; letter-spacing: -.005em; color: var(--ink); text-wrap: balance; opacity: 0; transform: translateY(calc(6 * var(--u))); transition: opacity 170ms var(--ease-out), transform 170ms var(--ease-out); }
.malla__narr-l:last-child { opacity: 1; transform: none; }
html.js .malla__narr-l:last-child { opacity: 0; transform: translateY(calc(6 * var(--u))); }
html.js .malla__narr-l[data-cur="1"] { opacity: 1; transform: none; transition: opacity 300ms var(--ease-out) 200ms, transform 300ms var(--ease-out) 200ms; }

/* ---- capas ---- */
.malla__wires { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.malla__fx { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.malla__dim { position: absolute; inset: 0; z-index: 5; background: rgba(2,8,23,.76); opacity: 0; pointer-events: none; transition: opacity 380ms var(--ease-out); }
.malla.is-held .malla__dim { opacity: 1; }
.malla__hold { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 260ms var(--ease-out); }
.malla.is-held .malla__hold { opacity: 1; }
.malla__hold path { fill: none; stroke: rgba(248,250,252,.92); stroke-width: 1.6; stroke-dasharray: 3 4; }
/* barrido de inventario: el frente que enciende lo que ya existía */
.malla__scan { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: calc(180 * var(--u)); opacity: 0; pointer-events: none; transform: translateY(-100%);
  background: linear-gradient(180deg, rgba(34,197,94,0) 0%, rgba(34,197,94,.05) 46%, rgba(134,239,172,.2) 74%, rgba(134,239,172,.55) 84%, rgba(34,197,94,.1) 91%, rgba(34,197,94,0) 100%); }
.malla.is-scan .malla__scan { opacity: 1; }

/* ---- hilos ---- */
.malla__w { fill: none; stroke: rgba(148,163,184,.28); stroke-width: 1.15; transition: stroke 420ms var(--ease-out), opacity 420ms var(--ease-out), stroke-width 300ms var(--ease-out); }
.malla__w--dir { stroke: rgba(34,197,94,.44); stroke-width: 1.35; }
.malla__w--slot { stroke: rgba(134,239,172,.45); stroke-dasharray: 3 6; }
.malla__w--mcp { stroke: rgba(148,163,184,.52); stroke-dasharray: 4 6; }
.malla__w--hum { stroke: rgba(248,250,252,.48); stroke-width: 1.4; }
.malla__w--ppl { stroke: rgba(203,213,225,.44); stroke-width: 1.15; }
.malla__w--gate { stroke: rgba(134,239,172,.52); stroke-width: 1.4; }
.malla__w--gate.is-open { stroke: rgba(134,239,172,.95); stroke-width: 2.2; }
.malla__w--loose { stroke: rgba(148,163,184,.36); stroke-dasharray: 7 9; opacity: 0; }
.malla.is-mess .malla__w--loose { opacity: 1; }
.malla__w.is-hot { stroke: rgba(134,239,172,.9); stroke-width: 2.1; }
.malla.is-hush .malla__w:not(.malla__w--gate):not(.malla__w--hum) { opacity: .55; }

/* ---- base de nodos: la geometría vive en unidades del viewBox ---- */
.malla__n, .malla__rail, .malla__gob, .malla__ask {
  position: absolute; z-index: 4;
  left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
  transform: translate(-50%, -50%) translate(calc(var(--sx, 0) * var(--u)), calc(var(--sy, 0) * var(--u))) rotate(calc(var(--sr, 0) * 1deg));
  display: flex; align-items: center; gap: calc(8 * var(--u));
  padding: 0 calc(12 * var(--u)); border-radius: calc(11 * var(--u));
  line-height: 1.15; white-space: nowrap;
  transition: transform 620ms var(--ease-spring), opacity 380ms var(--ease-out), border-color 380ms var(--ease-out), background-color 380ms var(--ease-out), color 380ms var(--ease-out);
}
.malla__i { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); min-width: 11px; min-height: 11px; }
.malla__n::after { content: ""; position: absolute; inset: calc(-4 * var(--u)); border-radius: inherit; border: 1px solid rgba(134,239,172,.9); opacity: 0; pointer-events: none; }
.malla__n.is-ping::after { animation: malla-ping 640ms var(--ease-out) 1; }
@keyframes malla-ping { from { opacity: .8; transform: scale(.97); } to { opacity: 0; transform: scale(1.17); } }

/* ---- canales ---- */
.malla__ch { border: 1px solid rgba(34,197,94,.4); background: rgba(34,197,94,.07); color: var(--ink); border-radius: calc(20 * var(--u)); font-size: clamp(9.5px, calc(13 * var(--u)), 13px); font-weight: 600; }
.malla__ch .malla__i { color: var(--green-2); }
.malla__ch[data-node="c_wa"] .malla__i { color: var(--wa); }
/* «antes» (0) y «visto» (2): se apaga el color, NUNCA el contraste del texto (AA) */
.malla__ch[data-on="0"], .malla__ch[data-on="2"] { border-color: rgba(148,163,184,.24); background: #060D1D; color: var(--muted); }
.malla__ch[data-on="0"] .malla__i, .malla__ch[data-on="2"] .malla__i { color: var(--muted-2); }
.malla__ch[data-on="2"] { border-color: rgba(148,163,184,.42); color: var(--ink-2); }

/* ---- lo que ya existía: panel lateral ---- */
.malla__rail { z-index: 2; display: block; padding: 0; border: 1px solid rgba(148,163,184,.18); border-radius: calc(14 * var(--u)); background: rgba(148,163,184,.045); }
.malla__rail-t { position: absolute; left: calc(14 * var(--u)); top: calc(13 * var(--u)); right: calc(12 * var(--u)); font-size: clamp(8px, calc(10 * var(--u)), 10.5px); font-weight: 700; letter-spacing: .11em; text-transform: uppercase; line-height: 1.3; color: var(--muted); white-space: normal; }
.malla__rail-t b { display: block; margin-top: calc(2 * var(--u)); font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--muted-deep); }
.malla__sys { border: 1px solid rgba(148,163,184,.3); background: #070F21; color: var(--ink-2); border-radius: calc(8 * var(--u)); font-size: clamp(8px, calc(11.5 * var(--u)), 11.5px); font-weight: 600; }
.malla__sys .malla__i { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: var(--green-3); }
.malla__sys[data-on="0"], .malla__sys[data-on="2"] { border-color: rgba(148,163,184,.2); color: var(--muted); }
.malla__sys[data-on="0"] .malla__i, .malla__sys[data-on="2"] .malla__i { color: var(--muted-2); }

/* ---- agentes ---- */
.malla__ag { flex-direction: column; align-items: flex-start; justify-content: center; gap: calc(3 * var(--u));
  border: 1px solid rgba(34,197,94,.5); background: linear-gradient(150deg, rgba(34,197,94,.18), rgba(34,197,94,.045)), #060E1F; color: var(--ink); }
.malla__ag > * { transition: opacity 260ms var(--ease-out); }
.malla__ag-top { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.malla__ag-top .malla__i { color: var(--green-2); }
.malla__ag-n { font-size: clamp(9.5px, calc(14 * var(--u)), 14px); font-weight: 700; letter-spacing: -.01em; }
.malla__ag-s { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); font-size: clamp(7.5px, calc(11 * var(--u)), 11px); font-weight: 600; color: var(--muted); }
.malla__led { width: calc(6 * var(--u)); height: calc(6 * var(--u)); min-width: 5px; min-height: 5px; border-radius: 50%; background: var(--green-2); transition: background-color 300ms var(--ease-out); }
/* ámbar = «esperando aprobación». Es el ÚNICO acento no verde de la pieza. */
.malla__ag[data-state="wait"] { border-color: rgba(245,158,11,.75); background: linear-gradient(150deg, rgba(245,158,11,.16), rgba(245,158,11,.04)), #0E0C10; }
.malla__ag[data-state="wait"] .malla__led { background: var(--warn); }
.malla__ag[data-state="wait"] .malla__ag-s { color: var(--warn); }
.malla__ag[data-state="wait"] .malla__ag-top .malla__i { color: var(--warn); }
.malla__ag.is-blink .malla__led { animation: malla-blink 340ms steps(2, jump-none) 3; }
@keyframes malla-blink { to { opacity: .15; } }
/* tu equipo, en la MISMA fila que los agentes: blanco = personas */
.malla__ag--team { border-color: rgba(248,250,252,.34); background: #0B1428; }
.malla__ag--team .malla__ag-top .malla__i { color: var(--ink); }
.malla__ag--team .malla__led { background: var(--ink); }
.malla__ag--team .malla__ag-s { color: var(--ink-2); }
/* la ranura que el Chief of Agents propone llenar: queda abierta también en reposo */
.malla__ag--slot { border: 1px dashed rgba(134,239,172,.6); background: rgba(134,239,172,.035); }
.malla__ag--slot .malla__ag-n { color: var(--green-3); font-weight: 600; }
.malla__ag--slot .malla__ag-top .malla__i { color: var(--green-3); }
.malla__ag--slot .malla__ag-s { color: var(--muted); }
.malla__ag--slot.is-offer { border-color: rgba(134,239,172,.95); background: rgba(134,239,172,.1); }
/* nacimiento: hueco → ranura → agente */
.malla__ag[data-born="0"] { opacity: 0; transform: translate(-50%, -50%) scale(.8); }
.malla__ag[data-born="2"], .malla__ag[data-born="3"] { border-style: dashed; background: none; }
.malla__ag[data-born="2"] { border-color: rgba(134,239,172,.6); }
.malla__ag[data-born="3"] { border-color: rgba(148,163,184,.4); }
.malla__ag[data-born="2"] > *, .malla__ag[data-born="3"] > * { opacity: 0; }

/* ---- Chief of Agents: el objeto heroico. Halo doble a dos tempos = respiración. ---- */
.malla__chief { z-index: 4; display: grid; grid-template-columns: auto 1fr; column-gap: calc(11 * var(--u)); align-content: center;
  padding: 0 calc(18 * var(--u)); border-radius: calc(17 * var(--u));
  background: linear-gradient(135deg, #86EFAC, #22C55E); color: var(--green-ink);
  box-shadow: 0 calc(14 * var(--u)) calc(44 * var(--u)) rgba(34,197,94,.3); }
.malla__chief .malla__i { grid-row: 1 / 3; width: calc(22 * var(--u)); height: calc(22 * var(--u)); min-width: 15px; min-height: 15px; }
.malla__chief-t { font-size: clamp(12px, calc(18 * var(--u)), 18.5px); font-weight: 800; letter-spacing: -.025em; }
/* los cuatro verbos son del anillo del hero: acá van chicos y secundarios, solo se ilumina el que corre */
.malla__chief-s { display: flex; gap: calc(4 * var(--u)); font-size: clamp(6.5px, calc(10.5 * var(--u)), 11px); font-weight: 700; }
.malla__chief-s i { font-style: normal; opacity: .5; transition: opacity 300ms var(--ease-out); }
.malla__chief-s i + i::before { content: "·"; margin-right: calc(4 * var(--u)); opacity: .55; }
.malla__chief-s i.is-on { opacity: 1; }
.malla__chief::before, .malla__chief::after { content: ""; position: absolute; pointer-events: none; }
.malla__chief::before { inset: calc(-7 * var(--u)); border-radius: calc(24 * var(--u)); border: 1px solid rgba(74,222,128,.45); opacity: .8; }
.malla__chief::after { inset: calc(-17 * var(--u)); border-radius: calc(32 * var(--u)); border: 1px solid rgba(34,197,94,.2); opacity: .35; }
html.js .malla__chief::before, html.js .malla__chief::after { opacity: 0; }
html.js .malla.is-live .malla__chief::before { opacity: 1; animation: malla-breathe-a 4.6s var(--ease-in-out) infinite; }
html.js .malla.is-live .malla__chief::after { opacity: 1; animation: malla-breathe-b 6.9s var(--ease-in-out) infinite; }
@keyframes malla-breathe-a { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.035); opacity: .35; } }
@keyframes malla-breathe-b { 0%, 100% { transform: scale(1); opacity: .3; } 50% { transform: scale(1.055); opacity: .72; } }
.malla__chief[data-born="0"] { opacity: 0; transform: translate(-50%, -50%) scale(.72); }
.malla__hex { position: absolute; z-index: 4; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(74 * var(--u)); height: calc(74 * var(--u)); transform: translate(-50%, -50%); opacity: 0; pointer-events: none; }
.malla__hex path { fill: none; stroke: #86EFAC; stroke-width: 1.5; }
.malla__hex.is-draw { opacity: 1; }
.malla__hex.is-draw path { animation: malla-hex 640ms var(--ease-out) forwards; }
@keyframes malla-hex { from { stroke-dashoffset: var(--L); } to { stroke-dashoffset: 0; } }

/* ---- dueño humano ---- */
.malla__hum { border: 1px solid rgba(248,250,252,.28); background: #0B1428; color: var(--ink); border-radius: calc(20 * var(--u)); font-size: clamp(7px, calc(11 * var(--u)), 11.5px); }
.malla__hum .malla__i { color: var(--ink); }
.malla__hum-t b { font-weight: 700; }
.malla__hum-s { display: block; font-weight: 400; color: var(--muted); font-size: .92em; }
.malla__hum[data-born="0"] { opacity: 0; transform: translate(-50%, -50%) translateX(calc(14 * var(--u))); }
.malla__ok { position: absolute; left: 50%; bottom: calc(100% + (7 * var(--u))); padding: calc(3 * var(--u)) calc(10 * var(--u)); border-radius: 999px; background: var(--green); color: var(--green-ink); font-size: clamp(7.5px, calc(10 * var(--u)), 11px); font-weight: 800; white-space: nowrap; transform: translateX(-50%); transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-spring); }
html.js .malla__ok { opacity: 0; transform: translateX(-50%) scale(.88); }
html.js .malla__hum.is-ok .malla__ok { opacity: 1; transform: translateX(-50%) scale(1); }
/* el panel del freno: solo cuando hay una aprobación pendiente */
.malla__ask { flex-direction: column; align-items: flex-start; justify-content: center; gap: calc(3 * var(--u)); border: 1px solid rgba(245,158,11,.6); border-left: calc(3 * var(--u)) solid var(--warn); background: rgba(14,12,16,.96); color: var(--ink); opacity: 0; transform: translate(-50%, -50%) translateY(calc(-7 * var(--u))); pointer-events: none; transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
.malla.is-held .malla__ask { opacity: 1; transform: translate(-50%, -50%); }
.malla__ask-k { font-size: clamp(7.5px, calc(10 * var(--u)), 10.5px); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--warn); }
.malla__ask-t { font-size: clamp(7.5px, calc(12 * var(--u)), 12.5px); font-weight: 500; color: var(--ink-2); }
.malla__ask-t b { color: var(--ink); font-weight: 700; }
.malla.is-held .malla__hum, .malla.is-held .malla__ask, .malla.is-held .malla__ag[data-state="wait"] { z-index: 6; }

/* ---- LA FRONTERA DEL GOBIERNO: la línea que toda respuesta cruza ---- */
.malla__gob { z-index: 4; border: 1px solid rgba(134,239,172,.42); background: #050D22; color: var(--green-3); border-radius: calc(13 * var(--u)); font-size: clamp(7px, calc(10 * var(--u)), 10.5px); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.malla__gob .malla__i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.malla__seal { justify-content: center; border: 1px solid rgba(134,239,172,.8); background: rgba(34,197,94,.12); color: var(--green-3); border-radius: calc(12 * var(--u)); font-size: clamp(7px, calc(10.5 * var(--u)), 11px); font-weight: 700; }
.malla__seal::before { content: "✓"; margin-right: calc(5 * var(--u)); color: var(--green-2); font-weight: 800; transition: color 300ms var(--ease-out); }
html.js .malla__seal { opacity: .85; border-color: rgba(148,163,184,.34); background: #050D22; color: var(--muted); transition: opacity 300ms var(--ease-out), border-color 380ms var(--ease-out), background-color 380ms var(--ease-out), color 380ms var(--ease-out); }
html.js .malla__seal::before { color: var(--muted-2); }
html.js .malla__seal.is-stamp { opacity: 1; border-color: rgba(134,239,172,.8); background: rgba(34,197,94,.12); color: var(--green-3); }
html.js .malla__seal.is-stamp::before { color: var(--green-2); }

/* ---- del otro lado hay personas ---- */
.malla__horizon { position: absolute; z-index: 2; left: calc(60 * var(--u)); right: calc(60 * var(--u)); top: calc(470 * var(--u)); height: 1px; background: linear-gradient(90deg, transparent, rgba(203,213,225,.36) 12%, rgba(203,213,225,.36) 88%, transparent); }
.malla__ppl { border: 1px solid rgba(248,250,252,.22); background: rgba(11,20,40,.86); color: var(--ink-2); border-radius: 999px; font-size: clamp(8px, calc(11.5 * var(--u)), 12px); font-weight: 500; }
.malla__ppl .malla__i { color: var(--ink); }
.malla__glyphs { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); color: var(--ink); }
.malla__glyphs .malla__i { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.malla__ppl--ag { border-style: dashed; border-color: rgba(134,239,172,.42); color: var(--muted); }
.malla__ppl--ag .malla__i { color: var(--green-3); }
.malla__ack { margin-left: auto; color: var(--green-2); font-weight: 800; font-size: 1.05em; opacity: 0; transition: opacity 220ms var(--ease-out); }
.malla__ack.is-in { opacity: 1; }

/* ---- el registro: cada línea se escribe cuando ocurre el hecho ---- */
.malla__reg { position: absolute; z-index: 4; left: 0; right: 0; top: calc(524 * var(--u)); bottom: 0; border-top: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(2,8,23,0), rgba(2,8,23,.5)); }
.malla__reg-l { position: absolute; left: calc(30 * var(--u)); top: calc(22 * var(--u)); display: inline-flex; align-items: center; gap: calc(6 * var(--u)); font-size: clamp(7.5px, calc(10 * var(--u)), 10.5px); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.malla__reg-l .malla__i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); color: var(--green-3); }
.malla__reg-l b { font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--muted-deep); }
.malla__log { position: absolute; left: calc(206 * var(--u)); right: calc(30 * var(--u)); top: calc(14 * var(--u)); height: calc(78 * var(--u)); margin: 0; padding: 0; list-style: none; overflow: hidden; }
.malla__log li { position: absolute; left: 0; top: 0; width: 100%; display: flex; align-items: baseline; gap: calc(10 * var(--u)); font-family: var(--mono); font-size: clamp(8.5px, calc(12 * var(--u)), 12.5px); font-weight: 500; line-height: 1.5; color: var(--ink-2); white-space: nowrap; opacity: 0; transform: translateY(calc(var(--sl, 3) * 24 * var(--u))); transition: transform 460ms var(--ease-out), opacity 460ms var(--ease-out); }
.malla__log li i { flex: none; font-style: normal; color: var(--muted-2); }
.malla__log li b { color: var(--green-3); font-weight: 700; }
html:not(.js) .malla__log li:nth-last-child(3) { --sl: 0; opacity: .45; }
html:not(.js) .malla__log li:nth-last-child(2) { --sl: 1; opacity: .72; }
html:not(.js) .malla__log li:last-child { --sl: 2; opacity: 1; }
.malla__log li[data-sl="-1"] { --sl: -1; opacity: 0; }
.malla__log li[data-sl="0"] { --sl: 0; opacity: .45; }
.malla__log li[data-sl="1"] { --sl: 1; opacity: .72; }
.malla__log li[data-sl="2"] { --sl: 2; opacity: 1; }
.malla__log li[data-sl="3"] { --sl: 3; opacity: 0; }

/* ---- control de pausa: discreto y alcanzable por teclado ---- */
.malla__pause { position: absolute; z-index: 7; right: calc(18 * var(--u)); top: calc(18 * var(--u)); display: none; align-items: center; justify-content: center; width: calc(30 * var(--u)); height: calc(30 * var(--u)); min-width: 30px; min-height: 30px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: rgba(5,13,34,.8); color: var(--muted); cursor: pointer; transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
html.js .malla__pause { display: inline-flex; }
.malla__pause .malla__i { width: calc(15 * var(--u)); height: calc(15 * var(--u)); min-width: 13px; min-height: 13px; }
/* Ídem la pausa de la malla: 30 px visibles, 44x44 tocables. */
.malla__pause::before { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.malla__pause:hover, .malla__pause:focus-visible { color: var(--ink); border-color: var(--green-a35); }
.malla__pause .malla__pause-r { display: none; }
.malla__pause[aria-pressed="true"] .malla__pause-p { display: none; }
.malla__pause[aria-pressed="true"] .malla__pause-r { display: block; }

.malla__cap { margin-top: 14px; text-align: center; font-size: var(--fs-sm); color: var(--muted); }

/* ---- lo que el JS apaga para poder construir la malla ante los ojos ---- */
.malla.is-anim .malla__w[data-drawn="0"] { opacity: 0; }
.malla.is-anim .malla__horizon { opacity: .4; transition: opacity 620ms var(--ease-out); }
.malla.is-anim.is-people .malla__horizon { opacity: 1; }
.malla.is-anim .malla__ppl--ag { opacity: 0; transform: translate(-50%, -50%) translateY(calc(6 * var(--u))); }
.malla.is-anim.is-people .malla__ppl--ag { opacity: 1; transform: translate(-50%, -50%); }
.malla.is-anim .malla__reg { opacity: 0; transition: opacity 520ms var(--ease-out); }
.malla.is-anim.is-gov .malla__reg { opacity: 1; }
.malla.is-anim .malla__seal, .malla.is-anim .malla__seal.is-stamp, .malla.is-anim .malla__gob { opacity: 0; }
.malla.is-anim.is-gov .malla__seal { opacity: .85; }
.malla.is-anim.is-gov .malla__seal.is-stamp { opacity: 1; }
.malla.is-anim.is-gov .malla__gob { opacity: 1; }
.malla.is-anim .malla__rail { opacity: 0; transition: opacity 460ms var(--ease-out); }
.malla.is-anim.is-seen .malla__rail { opacity: 1; }

/* ---- columna angosta (contenedor < 900 px): 400×780; el renglón sube a su propia banda ----
   El ancho de la columna se topa en 400 px y la pieza se centra: sin el tope, en una tableta de
   768 px el panel heredaría la proporción 400/780 y mediría 1.378 px de alto. En el tope,
   --u vale exactamente 1 px, así que toda la geometría cae en sus valores de diseño. */
@container (max-width: 780px) {
  .malla__panel, .malla__narr { --u: calc(min(100cqw, 400px) / 400); }
  .malla__panel { aspect-ratio: 400 / 780; width: min(100%, 400px); margin-inline: auto; }
  .malla__narr { max-width: 400px; margin-inline: auto; }
  .malla__narr { position: static; width: auto; height: 2.9em; margin: 0 0 10px; padding: 0 2px; font-size: 13px; }
  .malla__narr-l { font-size: 13px; }
  .malla__w { stroke-width: 1.3; }
  .malla__n, .malla__rail, .malla__gob, .malla__ask {
    left: calc(var(--mx) * var(--u)); top: calc(var(--my) * var(--u));
    width: calc(var(--mw, var(--w)) * var(--u)); height: calc(var(--mh, var(--h)) * var(--u));
  }
  /* «Teléfono y voz» mide cuatro veces lo que medía «Voz». Con el cromo de escritorio
     (12 u de padding a cada lado + 8 u de hueco + icono de 16 u = 48 u por píldora) la fila
     de cuatro canales pedía 430 u sobre un lienzo de 400. Se aprieta el CROMO, no el texto:
     33 u por píldora, y el nombre completo entra en una línea en los siete canales. */
  .malla__ch { padding: 0 calc(7 * var(--u)); gap: calc(5 * var(--u)); }
  .malla__ch .malla__i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
  .malla__n[data-m="0"], .malla__w[data-m="0"] { display: none; }
  .malla__hex { left: calc(var(--mx) * var(--u)); top: calc(var(--my) * var(--u)); width: calc(64 * var(--u)); height: calc(64 * var(--u)); }
  .malla__horizon { left: calc(20 * var(--u)); right: calc(20 * var(--u)); top: calc(604 * var(--u)); }
  .malla__ppl { justify-content: center; white-space: normal; text-align: center; line-height: 1.25; font-size: clamp(8.5px, calc(11 * var(--u)), 12px); }
  .malla__ack { margin-left: calc(6 * var(--u)); }
  .malla__rail-t { top: calc(9 * var(--u)); }
  .malla__rail-t b { display: inline; margin: 0 0 0 calc(6 * var(--u)); }
  .malla__ok { bottom: auto; top: calc(100% + (6 * var(--u))); }
  .malla__reg { top: calc(686 * var(--u)); }
  .malla__reg-l { top: calc(14 * var(--u)); }
  .malla__log { left: calc(30 * var(--u)); right: calc(16 * var(--u)); top: calc(34 * var(--u)); height: calc(56 * var(--u)); }
  .malla__log li i { display: none; }
  html:not(.js) .malla__log li:nth-last-child(3) { opacity: 0; }
  html:not(.js) .malla__log li:nth-last-child(2) { --sl: 0; opacity: .7; }
  html:not(.js) .malla__log li:last-child { --sl: 1; opacity: 1; }
  .malla__log li[data-sl="-1"] { --sl: -1; opacity: 0; }
  .malla__log li[data-sl="0"] { opacity: 0; }
  .malla__log li[data-sl="1"] { --sl: 0; opacity: .7; }
  .malla__log li[data-sl="2"] { --sl: 1; opacity: 1; }
  .malla__log li[data-sl="3"] { --sl: 2; opacity: 0; }
  .malla__pause { right: calc(12 * var(--u)); top: calc(12 * var(--u)); width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
}

/* ---- movimiento reducido: composición estática COMPLETA, con la prueba del gobierno visible ---- */
@media (prefers-reduced-motion: reduce) {
  .malla__fx, .malla__scan, .malla__dim, .malla__hold, .malla__w--loose { display: none !important; }
  .malla__n, .malla__rail, .malla__gob, .malla__ask, .malla__w, .malla__log li, .malla__ack, .malla__ok, .malla__seal, .malla__narr-l { transition: none !important; animation: none !important; }
  .malla .malla__chief::before { opacity: .8 !important; animation: none !important; }
  .malla .malla__chief::after { opacity: .35 !important; animation: none !important; }
  html.js .malla__seal { opacity: 1; border-color: rgba(134,239,172,.8); background: rgba(34,197,94,.12); color: var(--green-3); }
  html.js .malla__seal::before { color: var(--green-2); }
  html.js .malla__hum .malla__ok { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* ===================== 5. EL CHIEF ===================== */
/* Brief 31-08 P6: «¿Cómo lo hacemos? Tu mano derecha IA.» se lee TODO en una sola línea, así que
   el kicker deja de ser un renglón sobre el título y comparte línea de base con él. Si no cabe
   (pantalla angosta), el flex-wrap lo devuelve al renglón de arriba: nunca desborda.
   Brief 31-08 P7: el H2 ya no arrastra «Un Chief of Agents que crea, orquesta, gobierna y mejora,
   contigo a la cabeza.» — esa frase decía lo mismo que la tarjeta de definición de abajo, que es
   la que además sostiene el <dfn>, el speakable y el DefinedTerm del JSON-LD. */
.chief__head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; row-gap: 6px; margin-bottom: clamp(28px, 3vw, 40px); }
.chief__kicker { flex: 0 0 auto; }
/* «Tu mano derecha IA» es la RESPUESTA a «¿Cómo lo hacemos?», no su continuación: va en su
   propia línea (brief del fundador 06-09-2026). */
.chief__kicker--block { flex: 1 0 100%; margin-bottom: 6px; }
.chief__head .chief__h2 { flex: 0 1 auto; margin: 0; font-size: min(var(--fs-h2), 8.4vw); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--ink); text-wrap: balance; }
/* La definición ocupa el ancho completo: con 62ch quedaba angosta y partía en tres líneas
   cortas dentro de una caja muy ancha, que se veía desbalanceada (brief 07-09-2026). */
.chief__dfn { flex: 1 0 100%; margin-top: 22px; max-width: none; padding: 22px 26px; border: 1px solid var(--green-a35); border-radius: var(--r-md); background: linear-gradient(160deg, var(--green-a10), transparent 60%), var(--surface); color: var(--ink); font-size: var(--fs-lead); line-height: 1.55; }
.chief__dfn dfn { font-style: normal; font-weight: 700; color: var(--green-2); text-decoration: underline dotted rgba(74,222,128,.5); text-underline-offset: 3px; }
/* RECORTE 3 (08-09-2026): las cuatro tarjetas Crea · Orquesta · Gobierna · Mejora quedaron con su
   bajada de una línea y se fueron sus doce viñetas —el desarrollo completo vive en
   /chief-of-agents, y hasta hoy la sección no enlazaba a su propia página—. Este es ese enlace,
   pegado a la definición: es la continuación natural de leerla. */
.chief__dfn-more { flex: 1 0 100%; margin-top: 12px; }
.chief__eyebrow { margin-bottom: 16px; }
.chief__verbs { margin: 0; padding: 0; list-style: none; }
.chief__verb .card__title { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); }
.chief__verb-p { margin-top: 8px; font-size: .9375rem; font-weight: 500; color: var(--ink); }
/* Sin la consola ilustrativa a la derecha (brief del fundador 07-09-2026), el bloque pasa a
   una sola columna: la segunda quedaba vacía y se veía como un error. Los seis ejemplos de
   pregunta se reparten en dos columnas para no dejar una lista larga y angosta. */
.chief__stage { margin-top: clamp(40px, 5vw, 72px); }

.chief__h3 { margin-top: 12px; max-width: 18ch; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.chief__lead { margin-top: 14px; font-size: var(--fs-body); }
.chief__rules { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.chief__rules li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-body); font-weight: 600; line-height: 1.45; color: var(--ink); }
.chief__rules .icon { margin-top: 3px; color: var(--green-2); }
.chief__prompts-l { margin-top: 24px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* Las seis preguntas dejan de ser una lista y pasan a ser tarjetas: llenan el ancho que dejó
   la consola y reciben el mismo halo que el resto de las cajas del sitio. */
.chief__more { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.chief__more li { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); transition: border-color var(--dur-2) var(--ease-out); }
.chief__more li::before { content: "›"; margin-right: 8px; color: var(--green-2); font-weight: 700; }
@media (min-width: 720px) { .chief__more { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .chief__more { grid-template-columns: repeat(3, 1fr); } }
/* Titular a la izquierda, promesa y reglas a la derecha: el ancho completo se usa entero. */
.chief__lead-row { display: grid; gap: clamp(20px, 3vw, 44px); align-items: start; }
@media (min-width: 900px) { .chief__lead-row { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.chief__h3 { text-wrap: balance; }
.chief__more li::before { content: "› "; color: var(--green-2); }
/* .chief__foot / .chief__seal: eliminados en la ronda 30-08. El enlace «Lee la definición completa»
   lo sacó el brief y el sello de categoría pasó a .sr-only, así que la fila quedaba como un borde
   superior sin contenido visible. */

/* ===================== 6. RESPONSIVE ===================== */
@media (max-width: 1100px) {
  .hero { padding-block: calc(var(--nav-h) + 24px) 44px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 0; justify-items: center; text-align: center; }
  .hero__copy { display: contents; }
  .hero__h1 { order: 2; align-items: center; }
  .hero__sub { order: 3; margin-top: 16px; }
  /* El anillo va DESPUES del CTA, la ayuda, el legal y la cifra: a 390x844 el banner de
     consentimiento de la primera visita ocupa 665-832 px, y con el anillo intercalado el
     CTA y la capsula de correo caian debajo (650-768). Ver _docs/auditoria/01 y el traspaso
     de «fundacion». El hero completo no puede bajar de ~660 px sin borrar el anillo. */
  .hero__visual { order: 10; margin-top: 34px; }
  .hero__ctas { order: 5; justify-content: center; margin-top: 22px; width: 100%; }
  .hero__ctas .mailcap { flex: 0 1 440px; }
  .form__msg#hero-tel-msg { order: 6; }
  .hero__help { order: 7; margin-top: 10px; }
  .hero__proof { order: 10; justify-content: center; margin-top: 22px; }
  .hero__visual { order: 11; width: 100%; }
  .ring { width: min(460px, 100%); }
  .ring__disc { width: min(300px, 74vw); }
  .ring__cap { margin-top: 18px; font-size: 14px; }
}
@media (max-width: 900px) {
  .chief__h3 { max-width: none; }
}
@media (max-width: 720px) {
  .qh__two { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero { padding-block: calc(var(--nav-h) + 24px) 36px; }
  .hero__h1 { margin-top: 10px; }
  .hero__sub { margin-top: 16px; font-size: 1.0625rem; }
  .hero__visual { margin-top: 28px; }
  .hero__ctas { margin-top: 22px; }
  .hero__ctas { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__ctas > .btn { width: 100%; min-height: 52px; }
  .hero__ctas .mailcap { flex: 0 0 auto; width: 100%; max-width: none; }
  .hero__proof { margin-top: 18px; }
  .hero__metric { font-size: 2.5rem; }
  .cli { padding: 32px 0 36px; }
  .cli .marquee li { height: 40px; }
  .cli .marquee img { height: 24px; }
  .cli .marquee img.cli__logo--xs { height: 16px; }
  .cli .marquee img.cli__logo--s { height: 21px; }
  .cli .marquee img.cli__logo--m { height: 29px; }
  .cli .marquee img.cli__logo--l { height: 32px; }
  .cli .marquee img.cli__logo--xl { height: 36px; }
  .cli .marquee img.cli__logo--wide { height: 18px; }
  .chief__verbs.grid-4 { gap: 12px; }
}
/* ===================== 6b. HERO MÓVIL COMPACTO =====================
   En la primera visita (390x844) el banner de consentimiento ocupa los últimos 167 px:
   el CTA «Hablemos ahora» y la cápsula de correo tienen que quedar sobre él. Se compacta
   tipografía, márgenes y anillo; el desktop no cambia (todo vive bajo 640 px). */
@media (max-width: 640px) {
  .hero { min-height: 0; padding-block: calc(var(--nav-h) + 14px) 24px; }
  .hero__h1-top { font-size: 1.25rem; }
  .hero__h1-main { font-size: min(2.375rem, 10.6cqi); }
  .hero__sub { margin-top: 12px; font-size: 1rem; }
  .hero__ctas { margin-top: 16px; gap: 8px; }
  .hero__ctas > .btn { min-height: 48px; }
  .hero__help { margin-top: 8px; }
  .hero__proof { margin-top: 12px; }
  .hero__metric { font-size: 1.875rem; }
  /* 24px: la píldora «Crea» sobresale media caja por encima del disco y con menos aire
     se monta sobre la línea «100M+ interacciones». */
  .hero__visual { margin-top: 24px; }
  /* A 168 px el anillo se SIMPLIFICA, no se encoge: ocho puntos en vez de catorce, sin cuerdas, sin
     halo, sin etiquetas, sin segunda onda y sin halos de punto (a ese tamaño no se leen y solo
     cuestan batería); píldoras y puntos se escalan para que el texto siga siendo legible.
     Los nombres de la leyenda siguen siendo los doce, en su variante corta.
     Del ritmo sobrevive lo que se lee a este tamaño: la estela sobre la VÍA (los cuatro arcos que
     se encienden al paso, engrosados), la estela larga del frente —que aquí queda puesta siempre,
     porque las píldoras al 1,6 tapan buena parte de la vía— y el golpe al verbo protagonista.
     Se van el eco tenue, el resplandor ancho y el segundo aro del golpe: a 280 px son neblina. */
  .ring__disc { width: clamp(168px, 40vw, 240px); }
  .ring__nd--off, .ring__sp--off, .ring__lab, .ring__chords, .ring__halo, .ring__wave--2, .ring__nd-halo, .ring__trail-glow, .ring__echo, .ring__st-hit2 { display: none; }
  .ring__field { animation: none; }
  .ring__st-s { transform: scale(1.6); transform-box: fill-box; transform-origin: center; }
  .ring__trail { stroke-width: 4; }
  .ring__trail-far { stroke-width: 2.6; opacity: .5; animation: none; }
  .ring__cyc-arc { stroke-width: 2.8; }
  .ring__head { transform-box: fill-box; transform-origin: center; scale: 1.5; }
  .ring__nd-s { transform-origin: center; scale: 1.4; }
  .ring__line { animation: none; opacity: .22; }
  .ring__cap { margin-top: 6px; font-size: 11px; line-height: 1.3; height: 2.6em; }
  .ring__leg { margin-top: 3px; font-size: 10px; line-height: 1.35; }
  .ring__leg--ch { margin-top: 4px; }
  .ring__leg-lg { display: none; }
  .ring__leg-sm { display: inline; }
}

/* ===================== 8. REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce) {
  html.js .hero__h1-top, html.js .hero__h1-main, html.js .hero__sub, html.js .hero__ctas, html.js .hero__help, html.js .hero__proof, html.js .hero__visual { animation: none; }
  /* Composición estática equivalente y COMPLETA (no el anillo vacío): la vía entera visible, el
     frente detenido en «Crea» con su estela larga puesta —así se lee de dónde viene—, los doce
     puntos encendidos, «Crea» como verbo en turno y los cuatro verbos del pie como lista. Se
     apagan los sucesos instantáneos (golpes, ondas, pulsos en vuelo) y el eco. El SMIL del icono
     no obedece a la media query: lo congela home-a.js (setCurrentTime(0) + pauseAnimations() en
     TODOS los <svg>, incluido el anidado); el botón de pausa sobra si nada se mueve. */
  .ring, .ring * { animation: none !important; }
  .ring__chords { opacity: .16; }
  .ring__line { opacity: .3; }
  .ring__wave, .ring__cycflash, .ring__flash, .ring__out, .ring__in, .ring__line-b, .ring__lab, .ring__nd-halo, .ring__st-rip, .ring__st-hit, .ring__st-hit2 { opacity: 0; }
  .ring__nd-on { opacity: 1; }
  .ring__echo { display: none; }
  html.js .ring__pause { display: none; }
  .ring__trail-far { opacity: .45; }
  .ring__cyc-arc { opacity: .5; }
  .ring__st--crea .ring__st-on { opacity: 1; }
  .ring__leg-n { opacity: 1; }
  .ring__cap { height: auto; }
  .ring__cap span { position: static; display: block; opacity: 1; }
}

/* Las tres viñetas de cada tarjeta Crea/Orquesta/Gobierna/Mejora vuelven (decisión del fundador
   08-09-2026: sin ellas la sección quedaba pobre). Tipografía y espaciado más apretados que en
   la versión original, para recuperar el detalle sin recuperar los 581 px que costaba. */
.chief__verb-list { display: grid; gap: 7px; margin-top: 12px; padding: 0; list-style: none; }
.chief__verb-list li { position: relative; padding-left: 15px; font-size: .875rem; line-height: 1.45; color: var(--muted); }
.chief__verb-list li::before { content: ""; position: absolute; left: 2px; top: .58em; width: 4px; height: 4px; border-radius: 50%; background: var(--green-2); opacity: .7; }