:root {
  /* Tokens de color (paleta única: azul cobalto con hueso) */
  --acento: #1A35E0;          /* fondo del hero y del cierre; botones sobre secciones claras */
  --error: #FFD166;           /* bloque de error del formulario sobre el acento */
  --sobre-error: #1A2470;     /* texto sobre el bloque de error (~9:1) */
  --sobre-acento: #FFFFFF;    /* texto, trama y ASCII sobre el acento */
  --claro: #F2EFE6;           /* fondo de las secciones claras */
  --tinta: #14141A;           /* texto sobre secciones claras */
  --ficha: #FFFFFF;           /* fichas y paneles: blanco con borde fino */

  --linea: color-mix(in srgb, var(--tinta) 16%, transparent);          /* líneas de 1 px */
  --linea-fuerte: color-mix(in srgb, var(--tinta) 28%, transparent);   /* borde de fichas */
  --texto-suave: color-mix(in srgb, var(--tinta) 70%, transparent);

  --pad: clamp(16px, 4vw, 48px);   /* margen lateral */
  --ancho: 1200px;                /* ancho máximo del contenido */
  --sans: ui-sans-serif, "SF Pro Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--acento); scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--tinta);
  background: var(--claro);
  -webkit-font-smoothing: antialiased;
}
[id] { scroll-margin-top: 88px; }   /* el header es sticky: las anclas no quedan tapadas */
a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* texto solo para lectores de pantalla */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.salto { position: absolute; left: 16px; top: -64px; z-index: 200; padding: 10px 14px; background: var(--sobre-acento); color: var(--acento); font-size: .9375rem; }
.salto:focus { top: 8px; }

/* ---------- Header ---------- */
.top {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 32px;
  min-height: 56px; padding: 8px clamp(16px, 3.4vw, 48px);
  background: var(--acento); color: var(--sobre-acento);
}
.wordmark { font-weight: 650; font-size: 1.125rem; letter-spacing: -.01em; text-decoration: none; margin-right: auto; }
.top-nav { display: flex; flex-wrap: wrap; gap: 4px clamp(20px, 2.4vw, 36px); }
.top-nav a { padding-block: 8px; font-size: .9375rem; text-decoration: none; opacity: .88; }
.top-nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.top-nav a[aria-current="page"] { opacity: 1; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 8px; }
.top .btn[aria-current="page"] { box-shadow: 0 0 0 2px var(--acento), 0 0 0 3px var(--sobre-acento); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 40px; padding: 0 18px;
  font: 500 15px/1 var(--sans);
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: 0;   /* esquinas rectas */
}
.btn:focus-visible { outline: 2px solid var(--sobre-acento); outline-offset: 3px; }
.btn-primary { background: var(--sobre-acento); color: var(--acento); border-color: var(--sobre-acento); }
.btn-primary:hover { background: color-mix(in srgb, var(--sobre-acento) 86%, var(--acento)); }
.btn-secondary { background: transparent; color: var(--sobre-acento); border-color: color-mix(in srgb, var(--sobre-acento) 40%, transparent); }
.btn-secondary:hover { border-color: var(--sobre-acento); background: color-mix(in srgb, var(--sobre-acento) 12%, transparent); }
.btn:disabled { opacity: .6; cursor: progress; }

/* cuadrito con flecha del botón principal */
.btn-flecha {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px;
  background: var(--acento); color: var(--sobre-acento);
}
.btn-flecha svg { transition: transform .18s ease-out; }
.btn-primary:hover .btn-flecha svg { transform: translateX(2px); }

/* sobre secciones claras los botones van en acento */
[data-tema="claro"] .btn:focus-visible { outline-color: var(--acento); }
[data-tema="claro"] .btn-primary { background: var(--acento); color: var(--claro); border-color: var(--acento); }
[data-tema="claro"] .btn-primary:hover { background: color-mix(in srgb, var(--acento) 86%, var(--claro)); }
[data-tema="claro"] .btn-flecha { background: var(--claro); color: var(--acento); }
[data-tema="claro"] .btn-secondary { color: var(--acento); border-color: color-mix(in srgb, var(--acento) 40%, transparent); }
[data-tema="claro"] .btn-secondary:hover { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 10%, transparent); }

/* ---------- Estructura ---------- */
.wrap { width: 100%; max-width: calc(var(--ancho) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.s { padding-block: 80px 0; background: var(--claro); color: var(--tinta); }

.etiqueta {
  margin: 0 0 20px;
  font: 500 12.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--acento);
}
.titular {
  margin: 0;
  font: 400 clamp(2rem, 3.6vw, 3.25rem)/1.05 var(--serif); letter-spacing: -0.015em;
  text-wrap: balance;
}
.titular-medio { margin: 0; font: 400 clamp(1.5rem, 2.4vw, 2.125rem)/1.1 var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
.subtitulo { margin: 20px 0 0; max-width: 40em; font: normal 400 clamp(1.25rem, 1.8vw, 1.6rem)/1.3 var(--serif); }
.cuerpo { margin: 20px 0 0; max-width: 60ch; font-size: 1rem; line-height: 1.6; color: var(--texto-suave); }
.cuerpo:first-child { margin-top: 0; }
.enlace { display: inline-block; margin-top: 24px; font-weight: 500; color: var(--acento); text-underline-offset: 4px; }
.enlace:hover { text-decoration-thickness: 2px; }
.enlace:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.aclaracion { margin: 0 0 16px; max-width: 62ch; font-size: .875rem; line-height: 1.5; color: var(--texto-suave); }
.cabecera { max-width: 46em; margin-bottom: 40px; }

/* cabecera de las páginas secundarias */
.pagina-cab { padding-block: 72px 0; background: var(--claro); color: var(--tinta); }
.pagina-cab h1 { margin: 0; max-width: 18em; font: 400 clamp(2.25rem, 4.4vw, 3.75rem)/1.04 var(--serif); letter-spacing: -0.02em; text-wrap: balance; }

/* ---------- Hero ---------- */
.hero { background: var(--acento); color: var(--sobre-acento); }
/* estela de ASCII que sigue al puntero por toda la página (hero.js): fija, sobre el contenido y sin capturar eventos */
.estela-ascii { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 300; pointer-events: none; }
.hero-text {
  padding: 32px var(--pad) 24px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero h1 {
  margin: 0; max-width: 15em;
  font: 400 clamp(2.25rem, 4.8vw, 4.25rem)/1.02 var(--serif);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero-body {
  margin: 16px 0 0; max-width: 58ch;
  font-size: 1.125rem; line-height: 1.55;
  color: color-mix(in srgb, var(--sobre-acento) 78%, transparent);
}
.hero-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* La imagen va debajo del texto; hero.js dibuja los puntos y revela el ASCII alrededor del puntero. */
.hero-track { position: relative; }
.hero-stage { display: flex; align-items: center; justify-content: center; }
#hero-canvas { display: block; max-width: 100%; touch-action: pan-y; }

/* ---------- Fichas ---------- */
.ficha { margin: 0; background: var(--ficha); border: 1px solid var(--linea-fuerte); }
.ficha-rotulo {
  padding: 12px 24px; border-bottom: 1px solid var(--linea-fuerte);
  font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--acento);
}
.ficha-texto { margin: 0; padding: 20px 24px; font-size: 1rem; line-height: 1.55; }

/* ---------- Pasos (proceso) ---------- */
.etapas {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
.etapas-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.etapa { padding: 28px 24px 32px; border-left: 1px solid var(--linea); }
.etapa:first-child { border-left: 0; padding-left: 0; }
.etapa:last-child { padding-right: 0; }
.etapa-num { font: 500 12.5px/1.4 var(--mono); letter-spacing: .08em; color: var(--acento); }
.etapa-nombre { margin: 16px 0 0; font: 400 clamp(1.5rem, 2.2vw, 2rem)/1.1 var(--serif); letter-spacing: -0.01em; }
.etapa-texto { margin: 12px 0 0; font-size: 1rem; line-height: 1.55; color: var(--texto-suave); }
.etapa .aclaracion { margin: 12px 0 0; }
.etapas-3 .etapa-nombre { margin-top: 12px; }

/* ---------- Tarjetas de casos de uso (landing) ---------- */
.usos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.uso-tarjeta { position: relative; padding: 24px; background: var(--ficha); border: 1px solid var(--linea-fuerte); }
.uso-tarjeta:hover, .uso-tarjeta:focus-within { border-color: var(--acento); }
.uso-tarjeta h3 { margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--acento); }
.uso-tarjeta h3 a { text-decoration: none; }
.uso-tarjeta h3 a::after { content: ""; position: absolute; inset: 0; }   /* toda la tarjeta es el enlace */
.uso-tarjeta h3 a:focus-visible { outline: none; }
.uso-tarjeta:focus-within { outline: 2px solid var(--acento); outline-offset: 3px; }
.uso-tarjeta p { margin: 12px 0 0; font: normal 400 1.375rem/1.3 var(--serif); letter-spacing: -0.01em; }

/* ---------- Confianza y control (landing) ---------- */
.control-landing { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.puntos { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--linea); }
.puntos li { padding: 18px 0 18px 28px; position: relative; border-top: 1px solid var(--linea); font-size: 1.0625rem; line-height: 1.45; }
.puntos li::before { content: ""; position: absolute; left: 0; top: 26px; width: 8px; height: 8px; background: var(--acento); }

/* ---------- Cierre / CTA final (sobre acento) ---------- */
.cierre { margin-top: 80px; padding-block: 80px; background: var(--acento); color: var(--sobre-acento); }
.cierre-grid { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.cierre .titular { max-width: 14em; }
.cierre-texto { margin: 16px 0 0; max-width: 46ch; font-size: 1.0625rem; line-height: 1.5; color: color-mix(in srgb, var(--sobre-acento) 85%, transparent); }
.cierre .btn { margin-top: 28px; }

/* ---------- Cómo funciona ---------- */
.preguntas { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--linea); }
.preguntas li { padding: 18px 0; border-top: 1px solid var(--linea); font: normal 400 clamp(1.5rem, 2.4vw, 2.125rem)/1.1 var(--serif); letter-spacing: -0.01em; }
.dos-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }

.ejemplo-subtitulo { margin: 56px 0 0; font: 400 clamp(1.25rem, 1.8vw, 1.5rem)/1.2 var(--serif); letter-spacing: -0.01em; scroll-margin-top: 24px; }

/* tabla comparativa (estática) */
.tabla-comparativa { width: 100%; border-collapse: collapse; border-top: 1px solid var(--linea-fuerte); }
.tabla-comparativa th, .tabla-comparativa td { padding: 20px 24px 20px 0; text-align: left; vertical-align: top; font-size: 1rem; line-height: 1.5; }
.tabla-comparativa tbody tr { border-top: 1px solid var(--linea); }
.tabla-comparativa tbody tr:last-child { border-bottom: 1px solid var(--linea-fuerte); }
.tabla-comparativa thead th { padding-block: 14px; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.tabla-comparativa tbody th { width: 44%; font-weight: 400; color: var(--texto-suave); }
.tabla-comparativa td { font-weight: 500; }

/* ---------- Casos de uso (página) ---------- */
.uso { padding-block: 56px; border-top: 1px solid var(--linea-fuerte); }
.uso:first-of-type { margin-top: 56px; }
.uso-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.uso-area { margin: 0 0 16px; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--acento); }
.uso-frase { margin: 0; font: normal 400 clamp(1.75rem, 2.8vw, 2.5rem)/1.1 var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
.uso-detalle { display: grid; gap: 28px; }
.uso-detalle h3 { margin: 0 0 10px; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--tinta) 60%, transparent); }
.uso-detalle ul { margin: 0; padding-left: 1.2em; font-size: 1rem; line-height: 1.55; }
.uso-detalle li + li { margin-top: 6px; }
.uso-detalle li::marker { color: var(--acento); }
.uso-detalle p { margin: 0; font-size: 1rem; line-height: 1.55; }

/* ---------- Datos y control (página) ---------- */
.temas { margin-top: 56px; border-bottom: 1px solid var(--linea-fuerte); }
.tema { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; padding-block: 40px; border-top: 1px solid var(--linea-fuerte); }
.tema h2 { margin: 0; font: 400 clamp(1.5rem, 2.2vw, 2rem)/1.1 var(--serif); letter-spacing: -0.01em; }
.tema > div > p:first-child { margin: 0; font-size: 1.0625rem; line-height: 1.55; }
.tema .ficha, .tema .bitacora, .tema .rotulo-lista, .tema .aclaracion { margin-top: 24px; }
.rotulo-lista { margin: 0 0 12px; font: 500 12.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--acento); }
.tema .rotulo-lista + .aclaracion { margin-top: 0; }
.bitacora { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--linea); }
.bitacora li { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 16px 0; border-top: 1px solid var(--linea); }
.bit-pregunta { font-size: 1.0625rem; line-height: 1.4; }
.bit-meta { flex: none; font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--texto-suave); white-space: nowrap; }
.nota { margin: 32px 0 0; max-width: 62ch; font-size: .9375rem; line-height: 1.55; color: var(--texto-suave); }

/* ---------- Demo (formulario sobre acento) ---------- */
.demo { padding-block: 72px 96px; background: var(--acento); color: var(--sobre-acento); }
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 96px; row-gap: 48px; align-items: start; }
.demo h1 { margin: 0; font: 400 clamp(2.25rem, 4.4vw, 3.75rem)/1.04 var(--serif); letter-spacing: -0.02em; }
.demo-intro { margin: 20px 0 0; max-width: 46ch; font-size: 1.0625rem; line-height: 1.55; color: color-mix(in srgb, var(--sobre-acento) 85%, transparent); }
.demo h2 { margin: 36px 0 0; font: 500 12.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--sobre-acento) 85%, transparent); }
.demo-lista { margin: 14px 0 0; padding-left: 1.2em; max-width: 46ch; font-size: 1rem; line-height: 1.55; color: color-mix(in srgb, var(--sobre-acento) 90%, transparent); }
.demo-lista li + li { margin-top: 8px; }
.campo-ayuda { margin: 8px 0 0; font-size: .875rem; line-height: 1.45; color: color-mix(in srgb, var(--sobre-acento) 80%, transparent); }
.form-demo { max-width: 520px; display: grid; gap: 20px; justify-items: start; }
.campo { width: 100%; }
.campo label { display: block; margin-bottom: 8px; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--sobre-acento) 85%, transparent); }
.campo input, .campo textarea {
  display: block; width: 100%; padding: 12px 14px;
  font: 400 16px/1.4 var(--sans); color: var(--sobre-acento);
  background: transparent; border: 1px solid color-mix(in srgb, var(--sobre-acento) 55%, transparent); border-radius: 0;
}
.campo textarea { resize: vertical; min-height: 5.5em; }
.campo input:hover, .campo textarea:hover { border-color: var(--sobre-acento); }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--sobre-acento); outline-offset: 2px; border-color: var(--sobre-acento); }
.campo [aria-invalid="true"] { border-width: 2px; padding: 11px 13px; border-color: var(--error); }
.campo [aria-invalid="true"]:focus-visible { border-color: var(--error); }
.campo-error { display: inline-block; margin: 8px 0 0; padding: 6px 10px; background: var(--error); color: var(--sobre-error); font-size: .9375rem; line-height: 1.4; font-weight: 600; }
.campo-error[hidden], .campo-error:empty { display: none; }
.form-estado { margin: 0; min-height: 1.5em; font-size: 1rem; line-height: 1.5; }

/* ---------- Footer ---------- */
.pie { padding-block: 56px; background: var(--claro); color: var(--tinta); border-top: 1px solid var(--linea); }
.pie-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px 64px; flex-wrap: wrap; }
.pie .wordmark { margin: 0; color: var(--tinta); }
.pie-marca p { margin: 12px 0 0; max-width: 44ch; font-size: 1rem; line-height: 1.5; color: var(--texto-suave); }
.pie-nav { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.pie-nav a { padding-block: 8px; font-size: .9375rem; text-decoration: none; }
.pie-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.pie-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
.pie a:focus-visible { outline-color: var(--acento); }

/* ---------- Responsive ---------- */
@media (max-width: 1019px) {
  .usos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .top-nav { order: 3; flex-basis: 100%; }
  .s { padding-block: 56px 0; }
  .pagina-cab { padding-top: 48px; }
  .cierre { margin-top: 56px; padding-block: 56px; }
  .demo { padding-block: 48px 64px; }
  .control-landing, .dos-col, .uso-grid, .tema, .demo-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .etapas, .etapas-3 { grid-template-columns: minmax(0, 1fr); border-bottom: 0; }
  .etapa, .etapa:first-child, .etapa:last-child { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--linea); }
  .uso { padding-block: 40px; }
  .tema { padding-block: 32px; }
  .cierre-grid { flex-direction: column; align-items: flex-start; }
  .bitacora li { flex-direction: column; gap: 6px; }
  .tabla-comparativa th, .tabla-comparativa td { padding: 16px 16px 16px 0; font-size: .9375rem; }
}
@media (max-width: 599px) {
  .usos { grid-template-columns: minmax(0, 1fr); }
  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .ficha-rotulo { padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-flecha svg { transition: none; }
}

/* ---------- Flujo del criterio (landing, sección 2) ----------
   Lienzo de coordenadas fijas (1120 x 624); flujo.js lo escala en pantallas angostas. */
.flujo { --tenue: .14; }
.flujo-wrap { display: flex; flex-direction: column; gap: 32px; }
.flujo-titular { margin: 0 0 8px; font-weight: 400; display: flex; flex-direction: column; gap: 4px; line-height: 1.05; }
.flujo-titular-maquina { font: 500 clamp(1.875rem, 4.2vw, 3.25rem)/1.05 var(--sans); letter-spacing: -0.025em; }
.flujo-titular-persona { font: 400 clamp(2.25rem, 5vw, 3.875rem)/1.05 var(--serif); letter-spacing: -0.01em; }

.flujo-control { display: flex; flex-direction: column; gap: 16px; }
.flujo-botones { display: flex; flex-wrap: wrap; gap: 10px; }
.flujo-boton {
  appearance: none; min-height: 44px; padding: 0 18px;
  font: 500 15px/1 var(--sans); color: var(--acento); cursor: pointer;
  background: transparent; border: 1px solid color-mix(in srgb, var(--acento) 40%, transparent); border-radius: 0;
}
.flujo-boton:hover { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 10%, transparent); }
.flujo-boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.flujo-boton[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--claro); }
.flujo-leyenda { min-height: 58px; max-width: 64ch; }
.flujo-leyenda p { margin: 0; font-size: 1.1875rem; line-height: 1.5; color: var(--texto-suave); text-wrap: pretty; animation: flujo-aparece 240ms ease-out both; }

.flujo-visor { overflow-x: auto; }
.flujo-lienzo { position: relative; width: 1120px; height: 624px; }
.flujo-lienzo svg { position: absolute; left: 0; top: 0; width: 1120px; height: 624px; overflow: visible; }

/* Corrientes de puntos: trazos con guiones de largo casi cero y punta redonda */
.flujo-tinta { stroke: var(--tinta); }
.flujo-acento { stroke: var(--acento); }
.flujo-p { fill: none; stroke-linecap: round; }
.flujo-d1 { stroke-width: 2.4; stroke-dasharray: 0.1 8.9; opacity: .9; animation: flujo-corre-90 5s linear infinite; }
.flujo-d2 { stroke-width: 1.6; stroke-dasharray: 0.1 4.9 0.1 13.9 0.1 7.9 0.1 20.9; opacity: .55; animation: flujo-corre-96 6s linear infinite; }
.flujo-d3 { stroke-width: 3.6; stroke-dasharray: 0.1 16.9 0.1 30.9; opacity: .8; animation: flujo-corre-96 4s linear infinite; }
.flujo-hilo { stroke-width: .75; opacity: .2; }
.flujo-conector { stroke-width: 1.6; stroke-dasharray: 0.1 5.9; opacity: .7; animation: flujo-corre-90 6s linear infinite; }
.flujo-origen { fill: var(--tinta); stroke: none; }
/* Los desplazamientos son múltiplos de la suma de cada patrón: el ciclo no salta */
@keyframes flujo-corre-90 { to { stroke-dashoffset: -90; } }
@keyframes flujo-corre-96 { to { stroke-dashoffset: -96; } }
@keyframes flujo-aparece { from { opacity: 0; } to { opacity: 1; } }

.flujo-persona { position: absolute; left: 632px; top: 220px; width: 160px; height: 160px; display: block; }
.flujo-fuente { position: absolute; left: 0; width: 176px; text-align: right; line-height: 1.3; }
.flujo-fuente b { display: block; font-size: 16px; font-weight: 600; }
.flujo-fuente span { font-size: 13px; color: var(--texto-suave); }

.flujo-ficha { position: absolute; padding: 12px 14px; background: var(--ficha); border: 1px solid var(--linea-fuerte); font-size: 15px; line-height: 1.4; }
.flujo-ficha small { display: block; margin-bottom: 4px; font: 500 11.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--acento); }
.flujo-voz { font-family: var(--serif); font-size: 20px; line-height: 1.2; }
.flujo-voz-referente { font-style: normal; }

.flujo-gemelo { position: absolute; left: 812px; top: 104px; width: 308px; line-height: 1.3; }
.flujo-gemelo b { display: block; font-size: 17px; font-weight: 600; }
.flujo-gemelo span { font-size: 13px; color: var(--texto-suave); }
.flujo-criterio { position: absolute; left: 812px; top: 160px; width: 308px; margin: 0; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px 0; font: 400 13px/22px var(--mono); }
.flujo-criterio dt { color: var(--texto-suave); }
.flujo-criterio dd { margin: 0; }
.flujo-criterio .flujo-firma { color: var(--acento); }
.flujo-vuelta-rotulo { position: absolute; left: 600px; top: 556px; width: 300px; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--acento); }

/* Foco por paso: se atenúa lo que no corresponde */
.flujo [data-parte] { transition: opacity 320ms ease; }
.flujo[data-activo="1"] [data-parte]:not([data-parte="escrito"]),
.flujo[data-activo="2"] [data-parte]:not([data-parte="opinion"]):not([data-parte="cita"]),
.flujo[data-activo="3"] [data-parte]:not([data-parte="consulta"]),
.flujo[data-activo="4"] [data-parte]:not([data-parte="opinion"]):not([data-parte="vuelta"]) { opacity: var(--tenue); }
@media (prefers-reduced-motion: reduce) {
  .flujo *, .flujo *::before, .flujo *::after { animation: none !important; transition: none !important; }
}

/* ---------- Manifiesto: carta ----------
   Una sola columna angosta sobre el azul de la marca, en serif de texto (Newsreader), sin títulos visibles. */
.carta-pagina { background: var(--acento); color: var(--claro); padding: 72px var(--pad) 104px; }
.carta { --lectura: "Newsreader", Georgia, "Times New Roman", serif; max-width: 37rem; margin-inline: auto; font-family: var(--lectura); font-size: clamp(1.1875rem, 1.5vw, 1.375rem); line-height: 1.5; }
.carta p, .carta ul { margin: 0 0 1.45em; }
.carta strong { font-weight: 600; }
.carta-marca { margin-bottom: 3rem !important; font: 500 12.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--claro) 75%, transparent); }
.carta-asunto { margin: 0 0 1.45em; font-size: inherit; font-weight: 600; line-height: inherit; }
.carta-lista { list-style: none; padding: 0; }
.carta-lista li { position: relative; padding-left: 1.6em; }
.carta-lista li + li { margin-top: .7em; }
.carta-lista li::before { content: "—"; position: absolute; left: 0; color: color-mix(in srgb, var(--claro) 70%, transparent); }
.carta-firma { margin-top: 2.6em !important; margin-bottom: 2rem !important; }
.carta-btn:focus-visible { outline-color: var(--claro); }

/* ---------- Casos de uso: selector y panel ---------- */
.casos-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 8px; border: 1px solid var(--linea-fuerte); background: var(--ficha); }
.caso-tab {
  appearance: none; display: block; margin: 0; padding: 20px 22px; text-align: left; cursor: pointer;
  font: inherit; color: var(--tinta); background: transparent; border: 0; border-radius: 0;
  border-left: 1px solid var(--linea-fuerte);
}
.caso-tab:first-child { border-left: 0; }
.caso-tab:hover { background: color-mix(in srgb, var(--acento) 7%, transparent); }
.caso-tab:focus-visible { outline: 2px solid var(--acento); outline-offset: -4px; }
.caso-tab-area { display: block; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--acento); }
.caso-tab-frase { display: block; margin-top: 10px; font: normal 400 1.25rem/1.25 var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
.caso-tab[aria-selected="true"] { background: var(--acento); color: var(--claro); }
.caso-tab[aria-selected="true"] .caso-tab-area { color: color-mix(in srgb, var(--claro) 80%, transparent); }
.caso { padding-top: 56px; }
.caso[hidden] { display: none; }
.caso .ejemplo-subtitulo { margin: 64px 0 24px; }
.caso .flujo-visor { margin-bottom: 8px; }
@media (max-width: 899px) {
  .casos-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .caso-tab:nth-child(odd) { border-left: 0; }
  .caso-tab:nth-child(n+3) { border-top: 1px solid var(--linea-fuerte); }
  }
@media (max-width: 519px) {
  .casos-tabs { grid-template-columns: minmax(0, 1fr); }
  .caso-tab, .caso-tab:nth-child(odd) { border-left: 0; }
  .caso-tab:nth-child(n+2) { border-top: 1px solid var(--linea-fuerte); }
}