/* site.css — Traza el Impacto
 *
 * Hoja del sitio público. Los valores viven en tokens.css: acá no se escribe
 * un solo hex. Si hace falta un color nuevo, entra por tokens.css.
 *
 * Fuentes de las decisiones, en orden de precedencia:
 *   brand-strategy.md · brand-identity.md · design-system.md · messaging.md
 */

@import url("tokens.css");

/* ═══ 1. Tipografía autoalojada ═══════════════════════════════════════════
 *
 * Subconjunto latino, que cubre el castellano completo (ñ, vocales acentuadas,
 * ¿ y ¡ viven todos en U+00A1-00FF). `swap` para que el texto se lea desde el
 * primer frame en una conexión mala, que es donde va a entrar buena parte del
 * tráfico (website-copy.md §Rendimiento).
 *
 * Las tres familias son SIL Open Font License 1.1: uso comercial y web
 * permitido, sin regalías ni atribución en la interfaz. Queda verificado acá,
 * que es lo que pedía design-system.md §4.
 *
 * Archivo es variable y un solo archivo cubre 400 y 500; por eso se declara con
 * rango de peso en vez de dos @font-face.
 */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2-variations");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ═══ 2. Base ═════════════════════════════════════════════════════════════ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* El ancla no queda tapada por la nav pegajosa. */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--font-texto);
  font-size: var(--size-cuerpo);
  line-height: var(--lh-cuerpo);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Sentence case en toda la interfaz; versalitas sólo en el logotipo
   (design-system.md §4). */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(32px, 5vw, var(--size-display));  line-height: var(--lh-display); }
h2 { font-size: clamp(25px, 3.4vw, var(--size-titulo)); line-height: var(--lh-titulo); }
h3 { font-size: var(--size-subtitulo);                  line-height: var(--lh-subtitulo); }

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 500; }

a { color: inherit; text-decoration-color: var(--borde-fuerte); text-underline-offset: 3px; }

img, svg { max-width: 100%; }

::selection { background: var(--gobernanza); color: var(--tinta); }

/* Foco siempre visible. Única excepción a "sin sombras" (design-system.md §5). */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Toda cifra en monoespaciada con dígitos de ancho fijo (design-system.md §4.1).
   Es una clase inline, no `text-align:right` como en tabla. */
.dato {
  font-family: var(--font-datos);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* La unidad acompaña a la cifra, en tinta-3, un escalón menor
   (design-system.md §4.4). */
.unidad {
  font-family: var(--font-datos);
  font-size: var(--size-nota);
  font-weight: 400;
  color: var(--tinta-3);
}

.nota {
  font-size: var(--size-nota);
  line-height: var(--lh-nota);
  color: var(--tinta-3);
}

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--tinta);
  color: var(--papel);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-control);
  text-decoration: none;
}
.saltar:focus { left: var(--sp-4); top: var(--sp-4); }

/* Texto sólo para lectores de pantalla: acompaña a los SVG decorativos que
   reemplazan a un logotipo, para que el nombre siga estando en el documento. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ═══ 3. Estructura ═══════════════════════════════════════════════════════ */

.env  { max-width: 1180px; margin: 0 auto; padding-inline: var(--sp-5); }
.env-angosto { max-width: 760px; margin: 0 auto; padding-inline: var(--sp-5); }

section { padding-block: clamp(56px, 9vw, var(--sp-9)); }

/* Las bandas. `papel-2` es superficie sutil; `profundo` cierra secciones y
   nunca aloja el contenido principal — máximo un quinto de la página
   (design-system.md §3). */
.banda-sutil {
  background: var(--papel-2);
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}
.banda-linea { border-top: 1px solid var(--borde); }

.banda-profunda {
  background: var(--profundo);
  color: var(--sobre-profundo);
}
.banda-profunda h2 { color: var(--sobre-profundo); }

.encabezado-seccion { margin-bottom: var(--sp-7); }
.encabezado-seccion h2 { margin-bottom: var(--sp-4); }

.dos-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
@media (max-width: 860px) {
  .dos-columnas { grid-template-columns: 1fr; }
}

/* Variantes de la grilla de dos columnas.
 *
 * La proporción se declara acá y no con un `style` en el HTML: un estilo en
 * línea le gana a la consulta de medios de arriba, y la sección se quedaba en
 * dos columnas apretadas en celular. */
.dos-columnas-arriba { align-items: start; }
.dos-columnas-asimetrica { align-items: start; }
@media (min-width: 861px) {
  .dos-columnas-asimetrica { grid-template-columns: 0.85fr 1.15fr; }
}

/* ═══ 4. Botones ══════════════════════════════════════════════════════════
 *
 * Primario: fondo tinta, texto papel. Secundario: contorno borde-fuerte.
 * Los colores de módulo NO son colores de botón (design-system.md §8).
 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-texto);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primario   { background: var(--tinta); color: var(--papel); }
.btn-primario:hover   { background: var(--tinta-2); }
.btn-secundario { border-color: var(--borde-fuerte); color: var(--tinta); }
.btn-secundario:hover { border-color: var(--tinta); }

/* Los mismos dos, invertidos, sobre banda profunda. */
.banda-profunda .btn-primario   { background: var(--sobre-profundo); color: var(--profundo); }
.banda-profunda .btn-primario:hover { background: var(--papel); }
.banda-profunda .btn-secundario { border-color: var(--profundo-2); color: var(--sobre-profundo); }
.banda-profunda .btn-secundario:hover { border-color: var(--sobre-profundo); }

.acciones { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--size-interfaz);
  font-weight: 500;
  text-decoration: none;
  color: var(--tinta);
}
.enlace-flecha svg { transition: transform .15s ease; }
.enlace-flecha:hover svg { transform: translateX(3px); }

/* ═══ 5. Barra de navegación ══════════════════════════════════════════════ */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--papel);
  border-bottom: 1px solid var(--borde);
}
.nav > .env {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: var(--sp-3);
}

/* Bloqueo institucional degradado: el inventario de brand-identity.md §3.d lo
   asigna a "Web, documentos, presentaciones, firma". Se usa como asset y no se
   recompone a mano: los textos están en curvas y el interletrado de
   EL IMPACTO está calculado. */
.nav-marca { display: flex; align-items: center; flex: 0 0 auto; }
.nav-marca img { height: 38px; width: auto; display: block; }

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.nav-menu a {
  font-size: var(--size-interfaz);
  text-decoration: none;
  color: var(--tinta-2);
  transition: color .15s ease;
}
.nav-menu a:hover { color: var(--tinta); }

.nav-acciones { display: flex; align-items: center; gap: var(--sp-4); flex: 0 0 auto; }
.nav-acciones .btn { padding: 10px var(--sp-4); font-size: var(--size-interfaz); }
.nav-contacto { font-size: var(--size-interfaz); text-decoration: none; color: var(--tinta); }

@media (max-width: 1080px) {
  .nav-menu { display: none; }
}
@media (max-width: 420px) {
  .nav-contacto { display: none; }
}

/* ═══ 6. El sistema de la línea (design-system.md §7) ═════════════════════
 *
 * Riel vertical a la izquierda del contenido, un nodo por sección. Activo
 * relleno, pasados en borde-fuerte, futuros en contorno.
 *
 * Orienta; no condiciona. Si el JS no corre, no pasa nada: el riel queda con
 * todos los nodos en estado futuro y el contenido se lee igual.
 */
.riel {
  position: fixed;
  left: var(--sp-5);
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  pointer-events: none;
}
.riel::before {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  width: 1px;
  background: var(--borde);
}
.riel-nodo {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--borde-fuerte);
  background: var(--papel);
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.riel-nodo[data-estado="pasado"] { background: var(--borde-fuerte); border-color: var(--borde-fuerte); }
.riel-nodo[data-estado="activo"] { background: var(--tinta); border-color: var(--tinta); transform: scale(1.35); }

@media (min-width: 1360px) { .riel { display: flex; } }

/* En móvil el riel se colapsa a una barra de progreso fina arriba. */
.progreso {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--tinta);
  z-index: 110;
}
@media (min-width: 1360px) { .progreso { display: none; } }

/* ═══ 7. Hero ═════════════════════════════════════════════════════════════ */

.hero { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 80px) clamp(56px, 9vw, var(--sp-9)); }

/* Lavado de acento vivo. brand-identity.md §3.b lo autoriza explícitamente en
   superficies de marketing —hero y bandas—; la prohibición de brand-strategy.md
   §19 apunta a degradados decorativos en fondos generales, botones, tarjetas,
   íconos y datos. Suave: se percibe como papel tocado por la luz, no como fondo
   de color. */
.hero::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -180px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--vivo-turquesa) 14%, transparent),
    color-mix(in srgb, var(--vivo-indigo) 7%, transparent) 55%,
    transparent 78%
  );
  pointer-events: none;
}
.hero > .env { position: relative; }

.hero-grilla {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grilla { grid-template-columns: 1fr; }
}

.hero h1 { max-width: 15ch; margin-bottom: var(--sp-5); }
.hero-bajada { color: var(--tinta-2); max-width: 46ch; margin-bottom: var(--sp-6); }
.hero .acciones { margin-bottom: var(--sp-4); }

.hero-z { display: flex; justify-content: center; }
.hero-z svg { width: 100%; max-width: 480px; height: auto; }

/* ═══ 8. La traza: el dibujado y la luz ═══════════════════════════════════
 *
 * Dos gestos, y son los únicos de la página.
 *
 * a) El dibujado. Una vez, al entrar en escena (brand-identity.md §8). El
 *    estado por defecto del trazo es DIBUJADO: la animación sólo existe cuando
 *    el JS agrega .dibujar. Así, si el script no corre o falla, la Z aparece
 *    completa en vez de invisible.
 *
 * b) La luz que la recorre, que es el dato avanzando por la cadena. Es el mismo
 *    mecanismo que corre en la pantalla de acceso de la plataforma
 *    (src/index.css, keyframes shimGo): mismo ritmo de 7 s, mismo destello de 9
 *    unidades sobre pathLength 100, misma pausa. Está escrito igual a propósito
 *    — si el sitio y el producto laten distinto, son dos marcas.
 */
.traza-segmento { stroke-dashoffset: 0; }

@keyframes trazaDibuja {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

.z-marca.dibujar .traza-segmento {
  animation: trazaDibuja .55s cubic-bezier(.4, 0, .2, 1) both;
}
.z-marca.dibujar .traza-segmento:nth-of-type(1) { animation-delay: 0s; }
.z-marca.dibujar .traza-segmento:nth-of-type(2) { animation-delay: .5s; }
.z-marca.dibujar .traza-segmento:nth-of-type(3) { animation-delay: 1s; }

/* El destello recorre 100 unidades normalizadas y descansa la mitad del ciclo.
 * La pausa es lo que lo vuelve un latido y no un spinner. Termina en 9 y no en
 * 0 porque el patrón se repite cada 109: pasado ese punto el destello daría la
 * vuelta y reaparecería en el origen durante el descanso. */
@keyframes trazaLuz {
  0%   { stroke-dashoffset: 118; opacity: 0; }
  6%   { opacity: .9; }
  50%  { stroke-dashoffset: 9; opacity: .9; }
  56%  { stroke-dashoffset: 9; opacity: 0; }
  100% { stroke-dashoffset: 9; opacity: 0; }
}

.traza-luz {
  opacity: 0;
  animation: trazaLuz 7s ease-in-out 1.9s infinite;
}

/* Las etiquetas de los cuatro nodos aparecen al pasar el mouse.
 *
 * Es el gesto de la plataforma: la cadena se revela al recorrerla, y posarse
 * sobre un nodo atenúa los otros tres para dejar un eslabón solo.
 *
 * DONDE NO HAY MOUSE VAN SIEMPRE VISIBLES. Esto no es un detalle: la
 * referencia vieja las escondía tras :hover y las apagaba del todo con
 * @media (hover: none), y en celular la cadena simplemente no existía. Acá el
 * bloque táctil de más abajo las deja fijas. Y la lectura nunca depende del
 * hover en ningún dispositivo, porque el aria-label del SVG enuncia la cadena
 * entera — las etiquetas son aria-hidden justamente por eso.
 *
 * El hover lo reciben círculos transparentes (.z-nodo-area), no los nodos: el
 * nodo real es un agujero de la máscara y un agujero no recibe eventos. */
.z-etiqueta-titulo {
  font-family: var(--font-texto);
  font-weight: 500;
  fill: var(--tinta);
}
.z-etiqueta-bajada {
  font-family: var(--font-texto);
  fill: var(--tinta-3);
}

.z-etiqueta-titulo,
.z-etiqueta-bajada {
  opacity: 0;
  transition: opacity .28s ease;
}

/* fill:transparent y no fill:none — en SVG, sin relleno no hay superficie que
 * pueda recibir el puntero. */
.z-nodo-area { fill: transparent; }

.z-marca:hover .z-etiqueta-titulo,
.z-marca:hover .z-etiqueta-bajada { opacity: 1; }

/* Un eslabón solo: al posarse en un nodo, los otros tres se atenúan. */
.z-etiquetas:has(.z-nodo:hover) .z-nodo:not(:hover) .z-etiqueta-titulo,
.z-etiquetas:has(.z-nodo:hover) .z-nodo:not(:hover) .z-etiqueta-bajada {
  opacity: .26;
}

/* Sin mouse no hay hover que revele nada: la cadena queda escrita. */
@media (hover: none) {
  .z-etiqueta-titulo,
  .z-etiqueta-bajada {
    opacity: 1 !important;
    transition: none;
  }
}

/* ═══ 9. Pasos, módulos y tarjetas ════════════════════════════════════════ */

.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-6);
}
.paso { border-top: 2px solid var(--borde-fuerte); padding-top: var(--sp-4); }
.paso-numero {
  font-family: var(--font-datos);
  font-size: 13px;
  color: var(--tinta-3);
  margin-bottom: var(--sp-3);
}
.paso h3 { margin-bottom: var(--sp-2); }
.paso p { font-size: 15px; line-height: 1.6; color: var(--tinta-2); }

/* Los cuatro módulos, en orden fijo, para que el ojo lo aprenda. El tinte es
   superficie; el texto va en la variante profunda, nunca sobre el base
   (design-system.md §3). */
.modulos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
}
.modulo { border-radius: var(--radius-tarjeta); padding: var(--sp-5); }
.modulo-punto { width: 10px; height: 10px; border-radius: 50%; margin-bottom: var(--sp-4); }
.modulo h3 { margin-bottom: var(--sp-3); }
.modulo p { font-size: 15px; line-height: 1.6; }
.modulo-detalle { font-size: 13px; font-style: italic; color: var(--tinta-2); margin-bottom: 0; }

.mod-ambiental  { background: var(--ambiental-tinte); }
.mod-ambiental  h3 { color: var(--ambiental-profundo); }
.mod-ambiental  .modulo-punto { background: var(--ambiental); }
.mod-social     { background: var(--social-tinte); }
.mod-social     h3 { color: var(--social-profundo); }
.mod-social     .modulo-punto { background: var(--social); }
.mod-gobernanza { background: var(--gobernanza-tinte); }
.mod-gobernanza h3 { color: var(--gobernanza-profundo); }
.mod-gobernanza .modulo-punto { background: var(--gobernanza); }
.mod-economico  { background: var(--economico-tinte); }
.mod-economico  h3 { color: var(--economico-profundo); }
.mod-economico  .modulo-punto { background: var(--economico); }

/* Sin sombras. La jerarquía se resuelve con superficie y borde. */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
}
.tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radius-tarjeta);
  padding: var(--sp-5);
}
.tarjeta h3 { font-size: 18px; margin-bottom: var(--sp-3); }
.tarjeta p { font-size: 15px; line-height: 1.6; color: var(--tinta-2); flex-grow: 1; margin-bottom: var(--sp-5); }

/* ═══ 10. Decisiones de diseño (auditabilidad) ════════════════════════════ */

.decisiones { display: flex; flex-direction: column; gap: var(--sp-5); }
.decision { display: flex; gap: var(--sp-4); }
.decision svg { flex-shrink: 0; margin-top: 3px; }
.decision p { font-size: 15px; line-height: 1.6; margin: 0; }

/* ═══ 11. La tabla — el componente más importante ═════════════════════════
 *
 * Cifras a la derecha, en mono, tabulares. Texto a la izquierda. Filas
 * separadas por hairline, sin bordes verticales, sin zebra. Encabezado en
 * interfaz 500 tinta-2, sin fondo (design-system.md §8).
 */
.tabla-marco {
  border: 1px solid var(--borde);
  border-radius: var(--radius-tarjeta);
  overflow: hidden;
  background: var(--papel);
}
.tabla { width: 100%; border-collapse: collapse; }
.tabla caption {
  text-align: left;
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--size-nota);
  line-height: var(--lh-nota);
  color: var(--tinta-3);
  border-bottom: 1px solid var(--borde);
}
.tabla th {
  font-size: var(--size-interfaz);
  font-weight: 500;
  color: var(--tinta-2);
  text-align: left;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--borde);
  background: none;
}
.tabla th.num, .tabla td.num { text-align: right; }
.tabla td {
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--borde);
  font-size: 15px;
  vertical-align: baseline;
}
.tabla tr:last-child td { border-bottom: none; }
.tabla td.num {
  font-family: var(--font-datos);
  font-variant-numeric: tabular-nums;
}

/* Procedencia de la fila: origen, responsable y fecha, sin salir de la fila. */
.procedencia {
  display: block;
  font-size: var(--size-nota);
  line-height: var(--lh-nota);
  color: var(--dato-origen);
  margin-top: 2px;
}

/* El estado "sin calcular": trama diagonal a 45°, cursiva, y el motivo escrito.
 * Nunca una celda vacía, y nunca comunicado sólo con color — por eso lleva
 * ícono, la palabra y el motivo (design-system.md §3, §11.3).
 * La trama la define tokens.css; acá sólo se aplica. */
.fila-sin-calcular td {
  color: var(--sin-calcular-texto);
  font-style: italic;
  background-image: repeating-linear-gradient(
    45deg,
    var(--sin-calcular-fondo) 0 3px,
    var(--sin-calcular-trama) 3px 6px
  );
}
.fila-sin-calcular .procedencia { font-style: normal; }
.marca-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-style: normal;
}

/* ═══ 12. Precios ═════════════════════════════════════════════════════════ */

.fundador {
  background: var(--profundo);
  color: var(--sobre-profundo);
  border-radius: var(--radius-tarjeta);
  padding: var(--sp-6);
}
.fundador-rotulo {
  font-size: var(--size-nota);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vivo-ambar);
  margin-bottom: var(--sp-3);
}
.fundador p { font-size: 16px; line-height: 1.6; }
.fundador-cupo {
  font-family: var(--font-datos);
  font-size: var(--size-interfaz);
  color: #9AA5AC;
  margin: var(--sp-4) 0 0;
}

/* ═══ 13. Nosotros ════════════════════════════════════════════════════════ */

.nosotros-grilla {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}
@media (max-width: 860px) {
  .nosotros-grilla { grid-template-columns: 1fr; }
  .retrato { max-width: 240px; }
}
/* La foto es de las pocas imágenes de personas permitidas en el sitio, porque
   es real y es la prueba (brand-identity.md §7). Blanco y negro: el azul del
   traje no está en la paleta y compite con el aqua y el violeta. */
.retrato {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-tarjeta);
  border: 1px solid var(--borde);
  background: var(--papel-2);
}
.retrato-pie { margin-top: var(--sp-3); }

/* ═══ 14. Continuidad y cierre ════════════════════════════════════════════ */

.continuidad { display: flex; gap: var(--sp-5); align-items: flex-start; }
.continuidad svg { flex-shrink: 0; margin-top: 6px; }

.cierre { text-align: center; }
.cierre .env-angosto { max-width: 640px; }
.cierre h2 { margin-bottom: var(--sp-5); }
.cierre p { color: #9AA5AC; }
.cierre .dato { color: var(--sobre-profundo); }
.cierre .acciones { justify-content: center; margin-top: var(--sp-6); }

/* ═══ 15. Pie ═════════════════════════════════════════════════════════════ */

.pie {
  background: var(--profundo-2);
  color: var(--sobre-profundo);
  padding-block: var(--sp-7) var(--sp-6);
}
.pie-grilla {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-7);
  justify-content: space-between;
}
.pie-marca { max-width: 320px; }
/* Sobre fondo de color va la versión plana, en currentColor
   (brand-identity.md §3.b). */
.pie-logo {
  height: 34px;
  width: auto;
  display: block;
  margin-bottom: var(--sp-4);
  color: var(--sobre-profundo);
}
.pie-marca p { font-size: var(--size-interfaz); color: #9AA5AC; margin-bottom: var(--sp-1); }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-5); font-size: var(--size-interfaz); }
.pie-enlaces a { text-decoration: none; }
.pie-enlaces a:hover { text-decoration: underline; }
.pie-cierre { margin-top: var(--sp-6); font-size: 13px; color: #9AA5AC; }

/* ═══ 16. prefers-reduced-motion ══════════════════════════════════════════
 *
 * Se apaga el movimiento, no se acelera.
 *
 * Colapsar la duración a 0,01ms —que es lo que hace el bloque genérico— deja
 * el dibujado como un salto y convierte el recorrido de la luz en un destello
 * instantáneo cada 7 segundos: peor que la animación original para quien pidió
 * justamente no ver movimiento. Acá cada gesto se apaga en su estado final:
 * la Z queda dibujada y quieta, y la luz no existe.
 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .z-marca.dibujar .traza-segmento {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
  .traza-luz {
    animation: none !important;
    opacity: 0 !important;
  }
  .riel-nodo,
  .progreso,
  .z-etiqueta-titulo,
  .z-etiqueta-bajada {
    transition: none !important;
  }
}