/* ==========================================================================
   BrightRows — estilos de la portada (v6.0; nació como /nuevo/ en v5.6)
   Método: skill paginas-estilo-apple (.claude/skills/paginas-estilo-apple/SKILL.md).
   Identidad: marca/brightrows/guia-de-marca.md. Dirección visual aprobada:
   .claude/skills/paginas-estilo-apple/referencias/demo-hibrida-brightrows.html.
   Movimiento: curvas de la regla de Samuel (.claude/rules/web.md).

   1. Tokens          6. Problemas        11. Cómo empezar     16. Contacto
   2. Base            7. Historia         12. Nosotros         17. Redes
   3. Componentes     8. Ejemplos         13. Preguntas        18. Pie
   4. Encabezado      9. Qué hacemos      14. Cierre           19. Movimiento
   5. Portada        10. Lo que recibes   15. Ventana del reporte  20. Animaciones (v5.6.1)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens. Ningún componente usa colores sueltos: solo estas variables.
   Contraste medido (WCAG) en zonas claras: --label 19:1, --label-2 5.9:1
   (5.4:1 sobre --bg-secondary), --accent-text 6.3:1, --outline 3.1:1.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Tipografía: Space Grotesk en títulos y cifras; DM Sans en texto */
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);
  --text-hero: clamp(2.5rem, min(1.3rem + 4.4vw, 9vh), 4.5rem);   /* también según el alto: el botón cabe en laptops bajas */
  --text-h2: clamp(1.875rem, 1.35rem + 2.2vw, 3rem);
  --text-large-title: 2.125rem;
  --text-title-1: 1.75rem;
  --text-title-2: 1.375rem;
  --text-title-3: 1.25rem;
  --text-body: 1.0625rem;
  --text-subhead: 0.9375rem;
  --text-footnote: 0.8125rem;
  --text-caption: 0.75rem;
  --leading-tight: 1.05;
  --leading-title: 1.2;
  --leading-ui: 1.3;
  --leading-prose: 1.55;

  /* Espacio (múltiplos de 4) */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem;
  --section-gap: clamp(4rem, 2rem + 8vw, 9rem);
  --container: 72rem;
  --gutter: clamp(1rem, 0.5rem + 2vw, 1.5rem);
  --header-h: 4rem;

  /* Forma */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;
  --target: 44px;

  /* Marca (guía de marca) */
  --amber: #ffc24b;
  --amber-light: #ffe2a1;
  --amber-cream: #fff3d1;
  --amber-ink: #5c3a00;      /* texto sobre crema, 9.9:1 */
  --ember: #e0702e;
  --ember-dark: #b4521c;
  --amber-mid: #f2a43a;
  --night: #0d1117;
  --night-950: #0a0d12;

  /* Movimiento: entradas ease-out, salidas ease-in, interfaz con resorte; nada lineal.
     v6.4: la entrada frena menos al principio (la de antes llegaba a la mitad del cambio en el 10 %
     del tiempo y se veía instantánea; esta, en el 21 %). Lo que recorre la pantalla (una línea que
     se dibuja, una barra que crece, la fila que amanece) usa --ease-trazo: casi parejo y frena al final. */
  --dur-fast: 120ms; --dur-base: 240ms; --dur-slow: 420ms;
  --ease-entrada: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-trazo: cubic-bezier(0.3, 0.55, 0.35, 1);
  --ease-salida: cubic-bezier(0.7, 0, 0.84, 0);
  --resorte: cubic-bezier(0.34, 1.45, 0.64, 1);

  /* Color: zonas claras */
  --bg: #ffffff;
  --bg-secondary: #f5f6f8;
  --bg-elevated: #ffffff;
  --label: #0d1117;
  --label-2: #5a6575;
  --separator: rgba(13, 17, 23, 0.12);
  --outline: rgba(13, 17, 23, 0.5);   /* bordes de controles ≥3:1 */
  --accent-text: #8a5300;             /* ámbar tostado: enlaces y dato destacado sobre claro */
  --focus: #8a5300;
  --fill-edge: #a86a08;               /* borde del ámbar sobre claro, 4.4:1 */
  --bar: #7d8899;                     /* barras neutras, 3.6:1 */
  --bar-soft: #c3cad4;
  --track: #e9ecf1;
  --card-border: transparent;
  --danger: #b3261e;
  --success: #1e7b34;
  --shadow-card: 0 1px 2px rgba(13, 17, 23, 0.06), 0 10px 30px rgba(13, 17, 23, 0.07);
  --shadow-hover: 0 2px 4px rgba(13, 17, 23, 0.07), 0 18px 40px rgba(13, 17, 23, 0.11);
}

/* Zonas oscuras (encabezado, portada, cierre y pie). Los componentes no cambian: solo leen tokens. */
.dark {
  --bg: #0d1117;
  --bg-secondary: #0a0d12;
  --bg-elevated: #1a212c;
  --label: #f2f4f7;
  --label-2: #8b97a8;                 /* 6.4:1 sobre noche, 4.8:1 sobre #1a212c */
  --separator: #2a3340;
  --outline: rgba(242, 244, 247, 0.45);
  --accent-text: #ffc24b;
  --focus: #ffc24b;
  --fill-edge: #ffc24b;
  --bar: #6b7789;
  --bar-soft: #3a4556;
  --track: #222b37;
  --card-border: #2a3340;
  --danger: #ff8a80;
  --success: #6fdc8c;
  --shadow-card: none;
  --shadow-hover: none;
  background: var(--bg);
  color: var(--label);
}

/* Con el sistema en modo oscuro, toda la página pasa a oscuro */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --bg-secondary: #0a0d12;
    --bg-elevated: #1a212c;
    --label: #f2f4f7;
    --label-2: #8b97a8;
    --separator: #2a3340;
    --outline: rgba(242, 244, 247, 0.45);
    --accent-text: #ffc24b;
    --focus: #ffc24b;
    --fill-edge: #ffc24b;
    --bar: #6b7789;
    --bar-soft: #3a4556;
    --track: #222b37;
    --card-border: #2a3340;
    --danger: #ff8a80;
    --success: #6fdc8c;
    --shadow-card: none;
    --shadow-hover: none;
  }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--label);
  font: 400 var(--text-body)/var(--leading-prose) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
img, svg { display: block; }
[hidden] { display: none !important; }
a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
strong { font-weight: 700; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; inset-inline-start: -999px; top: var(--space-3); z-index: 50;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  background: #ffffff; color: var(--night); font-weight: 700;
}
.skip:focus { inset-inline-start: var(--space-4); }

.icon {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   3. Componentes
   -------------------------------------------------------------------------- */

/* Botones: el ámbar es la celda encendida; el secundario tiene contorno y la misma altura */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: var(--space-3) 1.25rem;
  border: 1px solid transparent; border-radius: var(--radius-md);
  font: 700 var(--text-body)/1.15 var(--font-sans); text-align: center; text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-entrada),
    border-color var(--dur-fast) var(--ease-entrada),
    color var(--dur-fast) var(--ease-entrada),
    transform var(--dur-base) var(--resorte);
}
.btn .icon { width: 1.1em; height: 1.1em; transition: transform var(--dur-base) var(--resorte); }
.btn--primary { background: var(--amber); color: var(--night); border-color: var(--fill-edge); }
.btn--secondary { background: transparent; color: var(--label); border-color: var(--outline); }
.btn--lg { min-height: 52px; padding-inline: var(--space-5); }
.btn--sm { min-height: var(--target); padding: var(--space-2) var(--space-4); font-size: var(--text-subhead); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--amber-light); }
  .btn--primary:hover .icon { transform: translateX(3px); }
  .btn--secondary:hover { border-color: var(--label); background: color-mix(in srgb, var(--label) 5%, transparent); }
}
.btn:active { transform: scale(0.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::before {
  content: ""; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-inline-end-color: transparent;
  animation: girar 0.8s cubic-bezier(0.45, 0.15, 0.55, 0.85) infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Enlace de texto con flecha (objetivo táctil de 44 px) */
.text-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--target);
  color: var(--accent-text); font-weight: 700; text-decoration: none;
}
.text-link .icon { width: 1.1em; height: 1.1em; transition: transform var(--dur-base) var(--resorte); }
@media (hover: hover) and (pointer: fine) {
  .text-link:hover { text-decoration: underline; }
  .text-link:hover .icon { transform: translateX(3px); }
}
.enlaces { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }

/* Enlace dentro de un párrafo: subrayado y área táctil agrandada sin cambiar el texto */
.enlace-texto { padding-block: 14px; }
.enlace-texto:focus-visible { outline: none; background: color-mix(in srgb, var(--focus) 22%, transparent) content-box; text-decoration-thickness: 3px; }

/* Etiqueta pequeña sobre los títulos, con la celda de la marca */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--label-2); font-size: var(--text-footnote); font-weight: 700; letter-spacing: 0.02em;
}
.eyebrow::before {
  content: ""; width: 0.625rem; height: 0.625rem; border-radius: 3px;
  border: 1.5px solid currentColor;
}

/* Insignia de datos ficticios */
.badge {
  display: inline-flex; align-items: center; flex: none;
  padding: 0.2rem 0.55rem; border-radius: var(--radius-pill);
  background: var(--amber-cream); color: var(--amber-ink);
  font-size: var(--text-caption); font-weight: 700; line-height: 1.3; white-space: nowrap;
}

/* Celda numerada (logo 01): la encendida lleva ámbar, una por bloque */
.cell {
  display: grid; place-items: center; flex: none;
  width: 2.5rem; height: 2.5rem; border-radius: 10px;
  border: 1.5px solid var(--outline);
  color: var(--label-2); font: 700 1rem/1 var(--font-display); font-variant-numeric: tabular-nums;
}
.cell--lit { background: var(--amber); color: var(--night); border-color: var(--fill-edge); }
.cell--llena { background: var(--label); color: var(--bg); border-color: var(--label); }

.icon-box {
  display: grid; place-items: center; flex: none;
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md);
  background: var(--bg-secondary); color: var(--label);
}
.icon-box .icon { width: 1.35rem; height: 1.35rem; }

/* Tarjetas de contenido (sin vidrio: el desenfoque es solo del encabezado) */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
}
.card__head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  gap: var(--space-2) var(--space-4); margin-bottom: var(--space-5);
}
.card__title { font: 700 var(--text-title-3)/1.25 var(--font-display); letter-spacing: -0.01em; text-wrap: balance; }
.card__sub { margin-top: var(--space-1); color: var(--label-2); font-size: var(--text-subhead); line-height: var(--leading-ui); }

/* Listas con la celda como viñeta */
.lista { display: grid; gap: var(--space-3); }
.lista li { position: relative; padding-inline-start: 1.5rem; }
.lista li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.5em;
  width: 0.625rem; height: 0.625rem; border-radius: 3px; border: 1.5px solid var(--label-2);
}
.lista--no li::before { top: 0.75em; height: 0; border-width: 1px 0 0; border-radius: 0; width: 0.75rem; border-color: var(--label-2); }

/* Secciones. Lo que entra de lado no ensancha la página: sin esto, en celular las lecturas del paso 05
   la dejaban 4 px más ancha mientras se animaban (v6.4.1). clip no crea desplazamiento ni rompe sticky. */
.section { padding-block: var(--section-gap); overflow-x: clip; }
.section--compacta { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.alt { background: var(--bg-secondary); }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.section-head h2, .titulo-seccion {
  font: 700 var(--text-h2)/var(--leading-title) var(--font-display);
  letter-spacing: -0.02em; text-wrap: balance;
}
.titulo-seccion--chico { font-size: var(--text-title-1); }
.section-head > p:not(.eyebrow):not(.chips__titulo) {
  margin-top: var(--space-4); color: var(--label-2);
  font-size: var(--text-title-3); line-height: 1.45; text-wrap: pretty;
}
.section-head--fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-4) var(--space-6); max-width: none; }
.section-head--fila > div { max-width: 46rem; }
.section-head--fila > div > p:not(.eyebrow) { margin-top: var(--space-4); color: var(--label-2); font-size: var(--text-title-3); line-height: 1.45; }
.centrado { display: flex; justify-content: center; margin-top: var(--space-7); }

/* Rejillas: en una columna, ningún contenido las ensancha más que la pantalla */
.hero__grid, .split, .capitulo, .ruta--principal, .recibes, .about, .faq, .contacto { grid-template-columns: minmax(0, 1fr); }

/* --------------------------------------------------------------------------
   4. Encabezado: oscuro y translúcido (única capa de vidrio), fijo arriba
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(13, 17, 23, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-entrada);
}
.site-header.is-scrolled { border-bottom-color: var(--separator); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: var(--night); } }
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--night); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Pantallas bajas (celular horizontal, zoom): el encabezado se va con la página */
@media (max-height: 32rem) { .site-header { position: relative; } }

.nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-4); min-height: 4rem; }
.brand {
  display: inline-flex; align-items: center; gap: 0.625rem; min-height: var(--target);
  color: var(--label); text-decoration: none;
  font: 700 1.25rem/1 var(--font-display); letter-spacing: -0.01em;
}
.brand img { width: 28px; height: 28px; }
.brand__name span { color: var(--label-2); }
.nav__menu { min-width: 0; margin-inline-start: auto; }
.nav__list { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.nav__list a {
  display: inline-flex; align-items: center; min-height: var(--target);
  padding-inline: var(--space-3); border-radius: var(--radius-sm);
  color: #c9d1dc; font-size: var(--text-subhead); font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-entrada), background-color var(--dur-fast) var(--ease-entrada);
}
@media (hover: hover) and (pointer: fine) {
  .nav__list a:hover { color: var(--label); background: rgba(255, 255, 255, 0.06); }
}
/* Celular: los mismos destinos en una segunda fila, siempre visibles */
@media (max-width: 47.99rem) {
  :root { --header-h: 6.5rem; }
  .nav { padding-top: var(--space-2); }
  .nav__menu { order: 3; flex-basis: 100%; min-width: 0; margin-inline: calc(var(--space-2) * -1); }
  /* Se asoma el siguiente destino y el borde se desvanece: se nota que hay más a la derecha */
  .nav__list {
    flex-wrap: nowrap; gap: 0; overflow-x: auto; scrollbar-width: none; padding-bottom: var(--space-1);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 1rem), transparent);
  }
  .nav__list a { padding-inline: 0.5rem; }
  .nav__list::-webkit-scrollbar { display: none; }
}

/* --------------------------------------------------------------------------
   5. Portada: rejilla de puntos y resplandor ámbar quietos
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: clip; padding-block: clamp(2rem, min(1.5rem + 6vw, 9vh), 7rem) clamp(4rem, 2rem + 7vw, 8rem); }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40rem 22rem at 78% 70%, rgba(255, 194, 75, 0.12), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(139, 151, 168, 0.28) 1px, transparent 1.5px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent);
  mask-image: linear-gradient(to bottom, #000 45%, transparent);
}
.hero__grid { position: relative; display: grid; gap: clamp(2.5rem, 1rem + 4vw, 4rem); align-items: center; }
@media (min-width: 62rem) { .hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); } }

.pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-5); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--separator); border-radius: var(--radius-pill);
  color: var(--label-2); font-size: var(--text-footnote); font-weight: 500; line-height: 1.35;
}
.pill i { flex: none; width: 8px; height: 8px; border-radius: 2px; border: 1.5px solid var(--label-2); }
.hero h1 {
  font: 700 var(--text-hero)/var(--leading-tight) var(--font-display);
  letter-spacing: -0.03em; text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--amber); }
.lead { margin-top: var(--space-5); max-width: 38ch; color: var(--label-2); font-size: var(--text-title-3); line-height: 1.45; text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-6); }
.hero__nota { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-5); color: var(--label-2); font-size: var(--text-subhead); }
.hero__nota .icon { width: 1.1em; height: 1.1em; margin-top: 0.2em; }
/* Celular horizontal y pantallas muy bajas: la portada se compacta para que el botón principal se vea al cargar */
@media (max-height: 30rem) and (min-width: 40rem) {
  .hero { padding-top: var(--space-5); }
  .hero h1 { font-size: clamp(1.75rem, 6vh + 0.5rem, 2.5rem); }
  .pill { margin-bottom: var(--space-3); }
  .lead { max-width: 62ch; margin-top: var(--space-3); font-size: var(--text-body); }
  .actions { margin-top: var(--space-4); }
}

/* Panel de datos de ejemplo */
.panel {
  position: relative;
  background: var(--bg-elevated); border: 1px solid var(--separator); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.panel__head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-3);
  padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--separator);
  font-size: var(--text-subhead); font-weight: 500;
}
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.25rem, 1fr)); gap: var(--space-3); }
.kpis > div { display: grid; align-content: start; gap: 2px; padding: var(--space-3); border: 1px solid var(--separator); border-radius: var(--radius-md); }
.kpis dt { color: var(--label-2); font-size: var(--text-caption); line-height: 1.3; }
.kpis dd { display: grid; gap: 2px; }
.kpis strong { font: 700 var(--text-title-3)/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.kpis small { color: var(--label-2); font-size: var(--text-caption); }
.kpis .is-lit { border-color: rgba(255, 194, 75, 0.55); }
.kpis .is-lit small { color: var(--accent-text); font-weight: 700; }

.semanas { margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--separator); border-radius: var(--radius-md); }
.semanas > p { margin-bottom: var(--space-3); color: var(--label-2); font-size: var(--text-footnote); }
/* Barras con flex y alto definido: un % de alto dentro de una celda sin alto produce barras invisibles */
.semanas__barras { display: flex; align-items: flex-end; gap: 6px; height: 6.5rem; }
.semanas__barras i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: var(--bar); }
.semanas__barras i.is-lit { background: var(--amber); box-shadow: 0 0 24px rgba(255, 194, 75, 0.45), inset 0 0 0 1.5px var(--amber-cream); }

.seguimiento { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); font-size: var(--text-footnote); }
.seguimiento > p { color: var(--label-2); }
.seguimiento ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.seguimiento li { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.2rem 0.6rem; border: 1px solid var(--separator); border-radius: var(--radius-pill); font-weight: 500; }
.seguimiento li + li::before { content: ""; width: 0.75rem; height: 1px; margin-inline-start: calc(-0.6rem - var(--space-2) - 1px); margin-inline-end: 0.15rem; background: var(--label-2); }

/* Aviso «Para revisar»: flota sobre el panel solo cuando hay espacio; en celular va en el flujo */
.callout {
  display: flex; gap: var(--space-3); align-items: flex-start;
  margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4);
  background: #131922; border: 1px solid var(--separator); border-radius: var(--radius-md);
  font-size: var(--text-footnote); line-height: 1.35; color: var(--label-2);
}
.callout .icon { color: var(--label); margin-top: 1px; }
.callout strong { display: block; color: var(--label); }
@media (min-width: 62rem) {
  .panel { margin-top: 3rem; }
  .callout {
    position: absolute; inset-inline-end: -0.75rem; top: -3.6rem; z-index: 1;
    max-width: 17.5rem; margin: 0; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  }
}

/* --------------------------------------------------------------------------
   6. Problemas
   -------------------------------------------------------------------------- */
.split { display: grid; gap: var(--space-7) var(--space-8); }
@media (min-width: 62rem) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.split .section-head { margin-bottom: 0; }
.chips__titulo { margin-top: var(--space-6); color: var(--label-2); font-size: var(--text-subhead); font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-3) var(--space-2) !important; }
.chip {
  display: inline-flex; align-items: center; min-height: var(--target); padding: var(--space-2) var(--space-4);
  border: 1px solid var(--outline); border-radius: var(--radius-pill);
  color: var(--label); font-size: var(--text-subhead); font-weight: 500; text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-entrada), background-color var(--dur-fast) var(--ease-entrada), transform var(--dur-base) var(--resorte);
}
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: var(--label); background: var(--bg-elevated); } }
.chip:active { transform: scale(0.97); }
.pains { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.pain {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-5); background: var(--bg-elevated);
  border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.pain .icon { width: 1.5rem; height: 1.5rem; color: var(--label-2); }
.pain p { font-size: var(--text-title-3); font-weight: 500; line-height: 1.4; text-wrap: pretty; }

/* --------------------------------------------------------------------------
   7. Historia: tres bloques en flujo normal (sin escenas fijas)
   -------------------------------------------------------------------------- */
.capitulo {
  display: grid; gap: var(--space-6) var(--space-8); align-items: start;
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  border-top: 1px solid var(--separator);
}
.capitulo:first-of-type { padding-top: 0; border-top: 0; }
@media (min-width: 62rem) { .capitulo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.pasos { display: grid; gap: var(--space-6); }
.paso { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4) 1.25rem; }
.paso h3 { font: 700 var(--text-title-2)/var(--leading-title) var(--font-display); letter-spacing: -0.01em; text-wrap: balance; }
.paso p { margin-top: var(--space-2); color: var(--label-2); max-width: 36rem; text-wrap: pretty; }
.paso .text-link { margin-top: var(--space-3); }
.nota {
  padding: var(--space-3) var(--space-4); border-inline-start: 3px solid var(--label);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--bg-secondary);
  color: var(--label) !important; font-size: var(--text-subhead); margin-top: var(--space-4) !important;
}
.pie-ficticio { max-width: 65ch; color: var(--label-2); font-size: var(--text-footnote); }

/* Hoja: el dato tal como llegó (gris) y cómo queda. Solo se desplaza de lado (en celular): mientras
   los renglones suben al entrar, el de abajo sobresale y, con overflow-y auto, salía una barra que se quitaba sola (v6.4.1). */
.hoja__scroll { overflow-x: auto; overflow-y: hidden; }
.hoja__tabla { width: 100%; border-collapse: collapse; font-size: var(--text-subhead); line-height: var(--leading-ui); font-variant-numeric: tabular-nums; }
.hoja__tabla th { padding: 0 var(--space-2) var(--space-2); border-bottom: 1px solid var(--separator); color: var(--label-2); font-size: var(--text-footnote); font-weight: 500; text-align: start; }
.hoja__tabla td { padding: var(--space-2); border-bottom: 1px solid var(--separator); vertical-align: top; }
.hoja__tabla tr:last-child td { border-bottom: 0; }
.hoja__tabla .num { text-align: end; }
.crudo { display: block; color: var(--label-2); font-size: var(--text-caption); white-space: nowrap; }
.hoja__tabla .is-dup td:not(:last-child) { color: var(--label-2); text-decoration: line-through; }
.marca {
  display: inline-block; padding: 0.15rem 0.5rem; border-radius: 6px;
  border: 1px solid var(--separator); background: var(--bg-secondary);
  color: var(--label-2); font-size: var(--text-caption); font-weight: 700; line-height: 1.35;
}
.marca--lit { background: var(--amber); border-color: var(--fill-edge); color: var(--night); }
@media (max-width: 30rem) {
  .hoja { padding-inline: var(--space-4); }
  .hoja__tabla { font-size: var(--text-footnote); }
  .hoja__tabla th, .hoja__tabla td { padding-inline: 0.3rem; }
  .hoja__tabla th:first-child, .hoja__tabla td:first-child { padding-inline-start: 0; }
  .hoja__tabla th:last-child, .hoja__tabla td:last-child { padding-inline-end: 0; }
}

/* Gráfica: la línea en SVG; los textos en HTML para que no se encojan en celular */
.plot { position: relative; margin-top: 1.75rem; }
.plot svg { width: 100%; height: auto; overflow: visible; }
.plot__ventana { fill: color-mix(in srgb, var(--label) 5%, transparent); }
.plot__grid { stroke: var(--separator); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plot__linea { fill: none; stroke: var(--label); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.plot__puntos circle { fill: var(--bg-elevated); stroke: var(--label); stroke-width: 2; vector-effect: non-scaling-stroke; }
.plot__guia { stroke: var(--label-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.plot__etq { position: absolute; color: var(--label-2); font-size: var(--text-caption); line-height: 1; white-space: nowrap; }
.plot__etq--y { inset-inline-start: calc(12 / 520 * 100%); top: calc(var(--y) / 260 * 100% - 1.1rem); }
.plot__etq--ventana { left: calc(429.6 / 520 * 100%); top: calc(30 / 260 * 100% - 1.1rem); transform: translateX(-50%); font-weight: 700; color: var(--label); }
.plot__marca, .num-marca {
  display: inline-grid; place-items: center; flex: none;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--label); color: var(--bg-elevated);
  font: 700 var(--text-caption)/1 var(--font-display);
}
.plot__marca { position: absolute; left: calc(var(--x) / 520 * 100%); top: calc(var(--y) / 260 * 100%); transform: translate(-50%, -50%); }
.plot__x { position: relative; height: 1rem; margin-top: var(--space-2); color: var(--label-2); font-size: var(--text-caption); line-height: 1; }
.plot__x span { position: absolute; left: calc(var(--x) / 520 * 100%); transform: translateX(-50%); white-space: nowrap; }
.plot__x span:first-child { transform: none; }
.plot__x span:last-child { transform: translateX(-100%); }

.sucs { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--separator); }
.sucs__titulo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4); margin-bottom: var(--space-3); color: var(--label-2); font-size: var(--text-footnote); }
.sucs__leyenda { display: inline-flex; align-items: center; gap: var(--space-2); }
.sucs__leyenda i { width: 2px; height: 0.875rem; background: var(--label); }
.sucs__lista { display: grid; gap: var(--space-2); }
.suc { display: grid; grid-template-columns: 5.5rem minmax(3rem, 1fr) 9.5rem; align-items: center; gap: var(--space-3); min-height: 2.5rem; }
.suc__nombre { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 500; }
.suc__barra { position: relative; height: 0.75rem; border-radius: 4px; background: var(--track); }
.suc__barra i { position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--v) * 100%); border-radius: 4px; background: var(--bar); }
.suc__barra b { position: absolute; top: -0.25rem; bottom: -0.25rem; inset-inline-start: calc(var(--antes) * 100%); width: 2px; background: var(--label); }
.suc.is-lit .suc__barra i { background: var(--amber); box-shadow: inset 0 0 0 1.5px var(--fill-edge); }
.suc__valor { font-size: var(--text-subhead); font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; }
.cambio { margin-inline-start: 0.35rem; color: var(--label-2); }
.suc.is-lit .cambio { color: var(--accent-text); font-weight: 700; }
.sucs__pie { margin-top: var(--space-2); color: var(--label-2); font-size: var(--text-caption); }
@media (max-width: 30rem) {
  .suc { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); padding-block: var(--space-1); }
  .suc__barra { grid-column: 1 / -1; grid-row: 2; }
}

.puntos { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--separator); font-size: var(--text-subhead); line-height: var(--leading-ui); }
.puntos__titulo { margin-bottom: var(--space-3); font-weight: 700; }
.puntos ol { display: grid; gap: var(--space-3); }
.puntos li { display: flex; align-items: flex-start; gap: var(--space-3); }
.puntos li .num-marca { margin-top: -0.1rem; }

/* Paso 05: lo que recibes de ese hallazgo */
.lecturas { display: grid; gap: var(--space-4); }
.lectura {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4);
  padding: var(--space-5); background: var(--bg-elevated);
  border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.lectura > .icon { width: 1.5rem; height: 1.5rem; color: var(--label-2); }
.lectura__tag { color: var(--label-2); font-size: var(--text-footnote); font-weight: 700; }
.lectura h4 { margin-top: var(--space-1); font: 700 var(--text-title-3)/1.25 var(--font-display); }
.lectura p:last-child { margin-top: var(--space-2); color: var(--label-2); }

/* --------------------------------------------------------------------------
   8. Ejemplos: cuatro tableros, cada uno lleva a /ejemplos/
   -------------------------------------------------------------------------- */
.minis { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); }
.minis > li { display: grid; }
@supports (grid-template-rows: subgrid) {
  .minis > li { grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; }
  .minis .mini { grid-row: span 7; display: grid; grid-template-rows: subgrid; row-gap: var(--space-2); align-items: start; }
}
.mini {
  display: flex; flex-direction: column; gap: var(--space-2); height: 100%;
  padding: var(--space-5); background: var(--bg-elevated);
  border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  color: var(--label); text-decoration: none;
  transition: transform var(--dur-base) var(--resorte), box-shadow var(--dur-base) var(--ease-entrada), border-color var(--dur-fast) var(--ease-entrada);
}
@media (hover: hover) and (pointer: fine) {
  .mini:hover { transform: translateY(-2px) scale(1.01); box-shadow: var(--shadow-hover); border-color: var(--outline); }
}
.mini:active { transform: scale(0.98); }
.mini__titulo { font: 700 var(--text-title-3)/1.25 var(--font-display); }
.mini__datos { color: var(--label-2); font-size: var(--text-footnote); font-weight: 500; }
.mini__pregunta { font-weight: 500; line-height: var(--leading-ui); }
.mini__svg { width: 100%; height: auto; margin-block: var(--space-3); }
.mini__dato { font-size: var(--text-subhead); line-height: var(--leading-ui); }
.mini__dato strong { font: 700 var(--text-title-3)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.mini__para { color: var(--label-2); font-size: var(--text-subhead); line-height: var(--leading-ui); }
.mini__ir { display: inline-flex; align-items: center; align-self: end; gap: var(--space-1); margin-top: auto; padding-top: var(--space-3); color: var(--accent-text); font-weight: 700; font-size: var(--text-subhead); }
.mini__ir .icon { transition: transform var(--dur-base) var(--resorte); }
@media (hover: hover) and (pointer: fine) { .mini:hover .mini__ir .icon { transform: translateX(3px); } }

.mini__grid { stroke: var(--separator); stroke-width: 1; }
.mini__line { fill: none; stroke: var(--label); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mini__proj { fill: none; stroke: var(--accent-text); stroke-width: 2; stroke-dasharray: 4 4; stroke-linecap: round; }
.mini__muted { fill: var(--bar); }
.mini__soft { fill: var(--bar-soft); }
.mini__cell { fill: var(--bar); fill-opacity: var(--nivel); }
.mini__bar { fill: var(--bar); }
.mini__budget { stroke: var(--label); stroke-width: 1.5; }
.mini__lit { fill: var(--amber); fill-opacity: 1; stroke: var(--fill-edge); stroke-width: 1; }
.mini__lit--2 { fill: var(--amber-mid); }
.mini__lit--3 { fill: var(--ember); }
.mini__lit--4 { fill: var(--ember-dark); }
.mini__bar.mini__lit { stroke-width: 0.5; }

/* --------------------------------------------------------------------------
   9. Qué hacemos: datos al frente; automatización y web lado a lado
   -------------------------------------------------------------------------- */
.ruta {
  background: var(--bg-elevated); border: 1px solid var(--card-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.ruta--principal { display: grid; gap: var(--space-7) var(--space-8); }
@media (min-width: 62rem) { .ruta--principal { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; } }
.ruta__num { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--label-2); font-size: var(--text-footnote); font-weight: 700; }
.ruta__num .icon { width: 1.25rem; height: 1.25rem; color: var(--label); }
.ruta h3 { font: 700 var(--text-title-1)/1.15 var(--font-display); letter-spacing: -0.015em; text-wrap: balance; }
.ruta__lead { margin-top: var(--space-3); color: var(--label-2); font-size: var(--text-title-3); line-height: 1.45; text-wrap: pretty; }
.ficha { display: grid; gap: var(--space-4); margin-block: var(--space-6); }
.ficha > div { display: grid; gap: var(--space-1); padding-top: var(--space-4); border-top: 1px solid var(--separator); }
.ficha dt { font-size: var(--text-subhead); font-weight: 700; }
.ficha dd { color: var(--label-2); }
.ficha dd strong { color: var(--label); }

.alcance { padding: clamp(1.25rem, 1rem + 1vw, 2rem); border-radius: var(--radius-md); background: var(--bg-secondary); }
.alcance h4 { font: 700 var(--text-title-3)/1.25 var(--font-display); }
.niveles { display: grid; gap: var(--space-5); margin-top: var(--space-5) !important; }
.nivel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); }
.nivel strong { display: block; line-height: var(--leading-ui); }
.nivel p { margin-top: var(--space-2); color: var(--label-2); }
.alcance__pie { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--separator); color: var(--label-2); font-size: var(--text-subhead); }

.rutas__par { display: grid; gap: var(--space-4); margin-top: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.ruta--par { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.ruta--par h3 { font-size: var(--text-title-2); }
.ruta--par .ruta__lead { margin-top: calc(var(--space-4) * -0.5); }
.ruta--par > .concepto, .ruta--par > .lista { align-self: stretch; }
.ruta__limite, .ruta__forma { color: var(--label-2); font-size: var(--text-subhead); }
.ruta__limite { padding-top: var(--space-4); border-top: 1px solid var(--separator); align-self: stretch; }
.ruta--par > .btn { margin-top: auto; }
.ruta--par > .text-link { margin-top: calc(var(--space-4) * -1); }

/* Ilustraciones marcadas «Concepto»: no son trabajos reales */
.concepto {
  position: relative; container-type: inline-size;
  padding: var(--space-4); border: 1px solid var(--separator); border-radius: var(--radius-md);
  background: var(--bg-secondary);
}
.concepto__barra { margin-bottom: var(--space-3); padding-inline-end: 5.5rem; color: var(--label-2); font-size: var(--text-caption); font-weight: 500; }
.concepto__sello {
  position: absolute; top: var(--space-3); inset-inline-end: var(--space-3);
  padding: 0.1rem 0.5rem; border: 1px solid var(--outline); border-radius: var(--radius-pill);
  background: var(--bg-elevated); color: var(--label-2); font-size: var(--text-caption); font-weight: 700;
}
.flujo { display: flex; align-items: center; gap: var(--space-2); }
.flujo__archivos { display: grid; gap: var(--space-1); }
.flujo__archivos span, .flujo__nodo {
  padding: 0.3rem 0.55rem; border: 1px solid var(--separator); border-radius: 6px;
  background: var(--bg-elevated); font-size: var(--text-caption); white-space: nowrap;
}
.flujo__nodo { padding: var(--space-2) var(--space-3); font-weight: 700; }
.flujo__nodo--fin { background: var(--amber); border-color: var(--fill-edge); color: var(--night); }
.flujo__flecha { position: relative; flex: 1 1 1rem; min-width: 1rem; height: 1.5px; background: var(--label-2); }
.flujo__flecha::after {
  content: ""; position: absolute; inset-inline-end: 0; top: 50%;
  width: 6px; height: 6px; border-top: 1.5px solid var(--label-2); border-right: 1.5px solid var(--label-2);
  transform: translateY(-50%) rotate(45deg);
}
@container (max-width: 25rem) {
  .flujo { flex-direction: column; align-items: stretch; }
  .flujo__archivos { grid-template-columns: repeat(3, auto); justify-content: start; }
  .flujo__flecha { flex: none; width: 1.5px; height: 1rem; min-width: 0; margin-inline-start: 1.25rem; }
  .flujo__flecha::after { top: auto; bottom: 0; inset-inline-end: -2.5px; transform: rotate(135deg); }
  .flujo__nodo { align-self: flex-start; }
}
.navegador__barra { display: flex; align-items: center; gap: 5px; margin-bottom: var(--space-3); color: var(--label-2); font-size: var(--text-caption); }
.navegador__barra i { width: 8px; height: 8px; border-radius: 50%; background: var(--bar-soft); }
.navegador__barra span { margin-inline-start: var(--space-2); }
.navegador__cuerpo { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--separator); border-radius: var(--radius-sm); background: var(--bg-elevated); }
.navegador__cuerpo b { display: block; width: 90%; height: 0.55rem; border-radius: 4px; background: var(--track); }
.navegador__cuerpo .navegador__h { width: 62%; height: 0.875rem; background: var(--bar-soft); }
.navegador__cuerpo .navegador__corto { width: 55%; }
.navegador__btn { justify-self: start; margin-top: var(--space-2); padding: 0.35rem 0.7rem; border: 1px solid var(--fill-edge); border-radius: var(--radius-sm); background: var(--amber); color: var(--night); font-size: var(--text-caption); font-weight: 700; }

/* --------------------------------------------------------------------------
   10. Lo que recibes
   -------------------------------------------------------------------------- */
.recibes { display: grid; gap: var(--space-7) var(--space-8); align-items: center; }
@media (min-width: 62rem) { .recibes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.entregas { display: grid; gap: var(--space-5); margin-block: var(--space-6) var(--space-5) !important; }
.entregas li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4) 1.25rem; }
.entregas h3 { font: 700 var(--text-title-3)/1.25 var(--font-display); }
.entregas p { margin-top: var(--space-1); color: var(--label-2); }
.reporte__img {
  display: block; overflow: hidden; border-radius: var(--radius-lg);
  border: 1px solid var(--card-border); box-shadow: var(--shadow-card);
  transition: transform var(--dur-base) var(--resorte), box-shadow var(--dur-base) var(--ease-entrada);
}
.reporte__img img { width: 100%; height: auto; }
@media (hover: hover) and (pointer: fine) { .reporte__img:hover { transform: translateY(-2px) scale(1.01); box-shadow: var(--shadow-hover); } }
.reporte__img:active { transform: scale(0.99); }
.reporte figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); color: var(--label-2); font-size: var(--text-footnote); }
@media (prefers-color-scheme: dark) { .reporte img, .dialogo img { filter: brightness(0.9); } }

/* --------------------------------------------------------------------------
   11. Cómo empezar
   -------------------------------------------------------------------------- */
.caminos { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.camino { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
@supports (grid-template-rows: subgrid) {
  .camino { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: var(--space-5); justify-items: start; align-content: start; }
  .camino > * { align-self: start; }
}
.camino h3 { font: 700 var(--text-title-1)/1.15 var(--font-display); letter-spacing: -0.015em; }
.camino__pasos { display: grid; gap: var(--space-3); counter-reset: paso; }
.camino__pasos li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-3); counter-increment: paso; }
.camino__pasos li::before {
  content: counter(paso); display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
  border: 1.5px solid var(--outline); border-radius: 7px;
  color: var(--label-2); font: 700 var(--text-footnote)/1 var(--font-display);
}
.camino__cond { color: var(--label-2); font-size: var(--text-subhead); }
.camino__cond strong { color: var(--label); }
.camino__alterna { align-self: stretch; padding-top: var(--space-5); border-top: 1px solid var(--separator); }
.camino__alterna p { color: var(--label-2); font-size: var(--text-subhead); }
.camino__alterna p strong { color: var(--label); }
.camino__alterna .text-link { margin-top: var(--space-2); }
.camino__final { margin-top: 0; }

/* --------------------------------------------------------------------------
   12. Nosotros
   -------------------------------------------------------------------------- */
.about { display: grid; gap: var(--space-7) var(--space-8); align-items: start; }
@media (min-width: 62rem) { .about { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
.about__texto > p:not(.eyebrow) { max-width: 65ch; margin-top: var(--space-4); color: var(--label-2); }
.about__texto h2 + p { margin-top: var(--space-5) !important; }
.cita { margin-top: var(--space-6); padding-inline-start: 1.25rem; border-inline-start: 3px solid var(--label); }
.cita p { font: 600 var(--text-title-2)/1.35 var(--font-display); letter-spacing: -0.01em; text-wrap: balance; }
.ventana { display: grid; grid-template-columns: repeat(5, 0.875rem); gap: 4px; margin-bottom: var(--space-5); }
.ventana span { height: 0.875rem; border-radius: 3px; border: 1px solid var(--separator); }
.ventana .is-on { background: var(--amber); border-color: var(--fill-edge); }
.about__panel h3 { font: 700 var(--text-title-2)/var(--leading-title) var(--font-display); }
.puntos-about { display: grid; gap: var(--space-5); margin-top: var(--space-5) !important; }
.puntos-about li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); }
.puntos-about h4 { font-size: var(--text-body); font-weight: 700; line-height: var(--leading-ui); }
.puntos-about p { margin-top: var(--space-1); color: var(--label-2); font-size: var(--text-subhead); }
.limites { display: grid; gap: var(--space-4); margin-top: var(--space-7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.limite { padding: clamp(1.25rem, 1rem + 1vw, 2rem); border: 1px solid var(--separator); border-radius: var(--radius-lg); }
.limite h3 { margin-bottom: var(--space-3); font: 700 var(--text-title-3)/1.25 var(--font-display); }
.limite > p { color: var(--label-2); }
.limite .text-link { margin-top: var(--space-2); }
.limite .lista { color: var(--label-2); }

/* --------------------------------------------------------------------------
   13. Preguntas frecuentes
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--space-6) var(--space-8); }
@media (min-width: 62rem) { .faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.faq .section-head { margin-bottom: 0; }
.faq__lista { border-top: 1px solid var(--separator); }
.faq-item { border-bottom: 1px solid var(--separator); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  min-height: 3.5rem; padding-block: var(--space-4);
  font: 600 var(--text-title-3)/1.3 var(--font-display); letter-spacing: -0.005em;
  cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { color: var(--label-2); transition: transform var(--dur-base) var(--resorte); }
.faq-item[open] summary .icon { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .faq-item summary:hover .icon { color: var(--label); } }
.faq-item__cuerpo { max-width: 65ch; padding-bottom: var(--space-5); color: var(--label-2); }
.faq-item__cuerpo p + p { margin-top: var(--space-3); }
.faq-item__cuerpo strong { color: var(--label); }

/* --------------------------------------------------------------------------
   14. Cierre oscuro con el sol de filas (logo 04)
   -------------------------------------------------------------------------- */
.cta { position: relative; overflow: clip; padding-block: clamp(5rem, 3rem + 7vw, 9rem) var(--section-gap); text-align: center; }
.sol {
  width: min(18rem, 60vw); aspect-ratio: 2 / 1; margin: 0 auto var(--space-6);
  border-radius: 999px 999px 0 0;
  background:
    repeating-linear-gradient(to bottom, transparent 0 7px, var(--bg) 7px 10px),
    linear-gradient(to bottom, var(--amber-light), var(--amber) 45%, var(--ember));
  opacity: 0.85; filter: drop-shadow(0 0 40px rgba(255, 194, 75, 0.25));
}
.cta h2 { max-width: 18ch; margin-inline: auto; font: 700 var(--text-h2)/var(--leading-title) var(--font-display); letter-spacing: -0.02em; text-wrap: balance; }
.cta p { max-width: 46ch; margin: var(--space-4) auto 0; color: var(--label-2); font-size: var(--text-title-3); line-height: 1.45; text-wrap: pretty; }
.cta .actions { justify-content: center; }

/* --------------------------------------------------------------------------
   15. Ventana del reporte (<dialog>)
   -------------------------------------------------------------------------- */
.dialogo {
  width: min(64rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem);
  padding: 0; border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  background: var(--bg-elevated); color: var(--label);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); overflow: hidden;
}
.dialogo[open] { display: flex; flex-direction: column; animation: dialogo-entra var(--dur-base) var(--ease-entrada); }
.dialogo.is-closing { animation: dialogo-sale 180ms var(--ease-salida) forwards; }
.dialogo::backdrop { background: rgba(13, 17, 23, 0.6); }
@keyframes dialogo-entra { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes dialogo-sale { to { opacity: 0; transform: translateY(8px) scale(0.98); } }
.dialogo__barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--separator); }
.dialogo__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-weight: 700; }
.dialogo__acciones { display: flex; gap: var(--space-2); }
.dialogo__cuerpo { overflow: auto; }
.dialogo__cuerpo img { width: 100%; height: auto; }
.dialogo.is-real .dialogo__cuerpo img { width: 1920px; max-width: none; }

/* --------------------------------------------------------------------------
   16. Contacto
   -------------------------------------------------------------------------- */
.contacto { display: grid; gap: var(--space-7) var(--space-8); align-items: start; }
@media (min-width: 62rem) { .contacto { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.contacto__texto { margin-top: var(--space-5); color: var(--label-2); max-width: 65ch; }
.canales { display: grid; gap: var(--space-3); margin-top: var(--space-6) !important; }
.canal {
  display: flex; align-items: center; gap: var(--space-4); min-height: 4rem;
  padding: var(--space-3) var(--space-4); border: 1px solid var(--separator); border-radius: var(--radius-md);
  background: var(--bg-elevated); color: var(--label); text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-entrada), transform var(--dur-base) var(--resorte);
}
@media (hover: hover) and (pointer: fine) { .canal:hover { border-color: var(--outline); } }
.canal:active { transform: scale(0.99); }
.canal__label { display: block; color: var(--label-2); font-size: var(--text-footnote); }
.canal__valor { display: block; font-weight: 700; overflow-wrap: anywhere; }
.canal__flecha { margin-inline-start: auto; color: var(--label-2); }
.contacto__demo { margin-top: var(--space-6); }
.contacto__demo p { color: var(--label-2); font-size: var(--text-subhead); }
.contacto__demo p strong { color: var(--label); }

.aviso-form { display: flex; gap: var(--space-3); margin-bottom: var(--space-5); padding: var(--space-4); border-radius: var(--radius-md); background: var(--bg-secondary); font-size: var(--text-subhead); }
.aviso-form .icon { color: var(--label-2); margin-top: 2px; }
.form__campos { min-width: 0; margin: 0; padding: 0; border: 0; }
.interes { min-width: 0; margin: 0 0 var(--space-5); padding: 0; border: 0; }
.interes legend { margin-bottom: var(--space-3); padding: 0; font-size: var(--text-subhead); font-weight: 700; }
.interes__opciones { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.interes__opcion {
  position: relative; display: inline-flex; align-items: center; min-height: var(--target);
  padding: var(--space-2) var(--space-4); border: 1px solid var(--outline); border-radius: var(--radius-pill);
  font-size: var(--text-subhead); font-weight: 500; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-entrada), color var(--dur-fast) var(--ease-entrada), border-color var(--dur-fast) var(--ease-entrada), transform var(--dur-base) var(--resorte);
}
.interes__opcion input { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); margin: 0; opacity: 0; cursor: pointer; }
.interes__opcion:has(input:checked) { background: var(--label); border-color: var(--label); color: var(--bg-elevated); }
.interes__opcion:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.interes__opcion:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .interes__opcion:hover { border-color: var(--label); } }
fieldset:disabled .interes__opcion { opacity: 0.5; cursor: not-allowed; }

.field { display: grid; gap: var(--space-2); }
.field + .field { margin-top: var(--space-5); }
.field__label { font-size: var(--text-subhead); font-weight: 700; }
.field__opcional { color: var(--label-2); font-weight: 400; }
.field__input {
  width: 100%; min-height: 48px; padding: var(--space-3) 0.875rem;
  border: 1px solid var(--outline); border-radius: var(--radius-sm);
  background: var(--bg-elevated); color: var(--label); font: inherit; font-size: var(--text-body);
  transition: border-color var(--dur-fast) var(--ease-entrada), box-shadow var(--dur-fast) var(--ease-entrada);
}
.field__input::placeholder { color: var(--label-2); opacity: 1; }
@media (hover: hover) and (pointer: fine) { .field__input:hover { border-color: var(--label); } }
.field__input:focus-visible { outline-offset: 1px; border-color: var(--focus); }
.field__input[aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.field__input--area { min-height: 8.5rem; resize: vertical; }
.field__input:disabled { opacity: 0.6; cursor: not-allowed; }
.field__ayuda { color: var(--label-2); font-size: var(--text-footnote); }
.field__error { color: var(--danger); font-size: var(--text-footnote); font-weight: 700; }
.field__error:empty { display: none; }
.trampa { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.trampa input { height: 48px; }
.form__enviar { width: 100%; margin-top: var(--space-6); }
.form__aviso { margin-top: var(--space-5); color: var(--label-2); font-size: var(--text-footnote); line-height: var(--leading-prose); }
.form__aviso strong { color: var(--label); }
.form__estado { margin-top: var(--space-3); font-size: var(--text-subhead); font-weight: 700; }
.form__estado:empty { display: none; }
.form__estado.is-error { color: var(--danger); }
.exito { display: grid; justify-items: start; gap: var(--space-3); }
.exito__icono { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.exito h3 { font: 700 var(--text-title-2)/var(--leading-title) var(--font-display); }
.exito p { color: var(--label-2); }
.exito .btn { margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   17. Redes sociales
   -------------------------------------------------------------------------- */
.redes { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-5) var(--space-7); }
.redes > div { max-width: 40rem; }
.redes__texto { margin-top: var(--space-3); color: var(--label-2); }
.red {
  display: flex; align-items: center; gap: var(--space-4); min-height: 4rem; min-width: min(100%, 18rem);
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
  border: 1px solid var(--separator); border-radius: var(--radius-lg);
  background: var(--bg-elevated); color: var(--label); text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-entrada), transform var(--dur-base) var(--resorte);
}
@media (hover: hover) and (pointer: fine) { .red:hover { border-color: var(--outline); } }
.red:active { transform: scale(0.98); }
.red__nombre { display: block; font-weight: 700; }
.red__usuario { display: block; color: var(--label-2); font-size: var(--text-subhead); }
.red__flecha { margin-inline-start: auto; color: var(--label-2); }

/* --------------------------------------------------------------------------
   18. Pie con la firma grande (logo 10) y «DATOS DECISIVOS»
   -------------------------------------------------------------------------- */
.site-footer { --bg: var(--night-950); padding-block: var(--space-8) var(--space-6); color: var(--label-2); font-size: var(--text-subhead); }
.pie__arriba { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4) var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--separator); }
.pie__lema { max-width: 44ch; }
.pie__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.pie__links a {
  display: inline-flex; align-items: center; min-height: var(--target);
  color: #c9d1dc; text-decoration: none;
  transition: color var(--dur-fast) var(--ease-entrada);
}
@media (hover: hover) and (pointer: fine) { .pie__links a:hover { color: var(--label); text-decoration: underline; } }
.firma {
  margin-top: var(--space-7); color: var(--label);
  font: 700 clamp(3.25rem, 1rem + 11vw, 9rem)/0.9 var(--font-display); letter-spacing: -0.04em;
}
.firma__rows { color: var(--label-2); }
.firma__o {
  display: inline-block; width: 0.52em; height: 0.52em; margin-inline: 0.03em; vertical-align: -0.02em;
  border: 0.085em solid var(--amber); border-radius: 0.08em; box-shadow: 0 0 0.25em rgba(255, 194, 75, 0.35);
}
.lema { margin-top: var(--space-4); color: var(--label-2); font-size: var(--text-footnote); font-weight: 700; letter-spacing: 0.3em; }
.pie__abajo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 var(--space-6); margin-top: var(--space-6); font-size: var(--text-footnote); }
.pie__links--legal { gap: 0 var(--space-4); }

/* --------------------------------------------------------------------------
   19. Movimiento: entradas sutiles una sola vez; el contenido existe sin JavaScript.
   sitio.js solo marca .is-pending en lo que está debajo del primer pantallazo.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .reveal { transition: opacity var(--dur-slow) var(--ease-entrada), transform var(--dur-slow) var(--ease-entrada); }
  .reveal.is-pending { opacity: 0; transform: translateY(14px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   20. Animaciones (v5.6.1, pedido de Samuel: «más animaciones y dinamismo»;
   la historia que avanzaba con el scroll queda descartada).
   Reglas (.claude/rules/web.md): entradas ease-out, salidas ease-in, interfaz con
   resorte; nada lineal ni en bucle. Cada animación pasa una sola vez y termina en el
   diseño estático: los keyframes solo dicen el inicio y se usan con fill «backwards».
   - Portada: entrada con CSS (sin JavaScript). En escritorio el panel se arma al cargar;
     en celular, al verse.
   - [data-anim]: sitio.js (§2b) marca .is-waiting en lo que está debajo del primer
     pantallazo y .is-played cuando entra a la pantalla, arriba del 15 % de abajo, o ya se ve
     completo. En las listas (escalonado, minis, entregas, lecturas y los renglones de la
     hoja) cada elemento entra por su cuenta y los que llegan juntos se escalonan con --n.
     Lo visible al cargar se queda quieto.
   - Un keyframe cuyo inicio no se puede mezclar con el valor final dice también su final
     (a-revela): si no, el navegador salta de golpe a la mitad (v6.4).
   - Con «reducir movimiento», nada de esto: §19 y sitio.js lo apagan.
   -------------------------------------------------------------------------- */
@keyframes a-sube { from { opacity: 0; transform: translateY(16px); } }
@keyframes a-lado { from { opacity: 0; transform: translateX(20px); } }
@keyframes a-aparece { from { opacity: 0; } }
@keyframes a-pop { from { opacity: 0; transform: scale(0.5); } }
@keyframes a-pop-centro { from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } }
@keyframes a-cae { from { opacity: 0; transform: translateY(-12px) scale(0.96); } }
@keyframes a-crece-x { from { transform: scaleX(0); } }
@keyframes a-crece-y { from { transform: scaleY(0); } }
@keyframes a-revela { from { clip-path: inset(-6px calc(100% + 6px) -6px -6px); } to { clip-path: inset(-6px); } }
@keyframes a-tacha { from { text-decoration-color: transparent; } }
@keyframes a-enciende { from { background-color: transparent; border-color: var(--outline); color: var(--label-2); } }
@keyframes a-enciende-barra { from { background-color: var(--bar); box-shadow: inset 0 0 0 1.5px transparent; } }
@keyframes a-brilla { 40% { box-shadow: 0 0 0 6px rgba(255, 194, 75, 0.3), 0 0 28px rgba(255, 194, 75, 0.5); } }
@keyframes a-brilla-svg { 40% { filter: drop-shadow(0 0 4px rgba(255, 194, 75, 0.95)); } }
@keyframes a-brilla-barra { 40% { box-shadow: 0 0 44px rgba(255, 194, 75, 0.85), inset 0 0 0 1.5px var(--amber-cream); } }
@keyframes a-brilla-o { 40% { box-shadow: 0 0 0.9em rgba(255, 194, 75, 0.9); } }
@keyframes a-sol { from { opacity: 0; transform: translateY(45%) scale(0.9); filter: drop-shadow(0 0 0 rgba(255, 194, 75, 0)); } }
@keyframes a-elige { from { transform: scale(0.94); } }
@keyframes a-dibuja { from { stroke-dashoffset: 30; } }
@keyframes a-amanece {
  0% { opacity: 0; -webkit-mask-position: 100% 0, 0 0; mask-position: 100% 0, 0 0; }
  15% { opacity: 1; }
  80% { opacity: 0.8; }
  100% { opacity: 0; -webkit-mask-position: 0% 0, 0 0; mask-position: 0% 0, 0 0; }
}

/* Orden de entrada: cada hijo espera un poco más que el anterior */
:is(.orden, [data-anim="escalonado"]) > :nth-child(1) { --n: 0; }
:is(.orden, [data-anim="escalonado"]) > :nth-child(2) { --n: 1; }
:is(.orden, [data-anim="escalonado"]) > :nth-child(3) { --n: 2; }
:is(.orden, [data-anim="escalonado"]) > :nth-child(4) { --n: 3; }
:is(.orden, [data-anim="escalonado"]) > :nth-child(5) { --n: 4; }
:is(.orden, [data-anim="escalonado"]) > :nth-child(6) { --n: 5; }
:is(.orden, [data-anim="escalonado"]) > :nth-child(7) { --n: 6; }
:is(.orden, [data-anim="escalonado"]) > :nth-child(8) { --n: 7; }
:is(.orden, [data-anim="escalonado"]) > :nth-child(9) { --n: 8; }
:is(.orden, [data-anim="escalonado"]) > :nth-child(10) { --n: 9; }
:is(.orden, [data-anim="escalonado"]) > :nth-child(n + 11) { --n: 10; }

/* Capas decorativas de la portada: la misma rejilla, en ámbar */
.hero__amanece, .hero__luz {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 1px 1px, rgba(255, 194, 75, 0.9) 1.2px, transparent 1.8px) 0 0 / 22px 22px;
}
/* «Fila que amanece» (logo 02): al pie de la portada, como un horizonte, una franja de filas se enciende
   de izquierda a derecha una sola vez (no pasa detrás del texto ni del panel) */
.hero__amanece {
  -webkit-mask-image: linear-gradient(90deg, transparent 44%, #000 50%, transparent 56%), linear-gradient(180deg, transparent 84%, #000 88%, #000 95%, transparent 99%);
  mask-image: linear-gradient(90deg, transparent 44%, #000 50%, transparent 56%), linear-gradient(180deg, transparent 84%, #000 88%, #000 95%, transparent 99%);
  -webkit-mask-size: 300% 100%, 100% 100%; mask-size: 300% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0% 0, 0 0; mask-position: 0% 0, 0 0;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* Luz que sigue al cursor (solo con ratón): las celdas cercanas se encienden */
.hero__luz {
  -webkit-mask-image: radial-gradient(15rem circle at var(--mx, 50%) var(--my, 50%), #000, transparent 70%);
  mask-image: radial-gradient(15rem circle at var(--mx, 50%) var(--my, 50%), #000, transparent 70%);
  transition: opacity var(--dur-slow) var(--ease-salida);
}
.hero__luz.is-on { opacity: 0.75; transition-timing-function: var(--ease-entrada); }

/* Mientras esperan a verse, las partes que van a entrar no se ven */
:is([data-anim="escalonado"], [data-anim="minis"], [data-anim="entregas"], [data-anim="lecturas"], [data-anim="hoja"]) > .is-waiting,
.panel.is-waiting,
[data-anim="linea"].is-waiting :is(.plot__ventana, .plot__trazo, .plot__guia, .plot__marca, .plot__etq--ventana),
[data-anim="sucursales"].is-waiting :is(.suc__barra i, .suc__barra b),
[data-anim="puntos"].is-waiting li,
[data-anim="mini"].is-waiting :is(.mini__line, .mini__proj, .mini__seg, .mini__bar, .mini__cell, .mini__budget),
[data-anim="flujo"].is-waiting :is(.flujo__archivos span, .flujo__flecha, .flujo__nodo),
[data-anim="navegador"].is-waiting .navegador__cuerpo > *,
[data-anim="ventana"].is-waiting > span,
[data-anim="sol"].is-waiting,
[data-anim="firma"].is-waiting { opacity: 0; }
:is([data-anim].is-waiting, [data-anim] > .is-waiting) .cell--lit { background: transparent; border-color: var(--outline); color: var(--label-2); }

@media (prefers-reduced-motion: no-preference) {
  /* Portada: texto en orden y la fila que amanece */
  .hero .entra { animation: a-sube 700ms var(--ease-entrada) calc(80ms + var(--i, 0) * 90ms) backwards; }
  .hero__amanece { animation: a-amanece 2800ms var(--ease-trazo) 700ms backwards; } /* casi parejo: recorre todo el ancho sin correr */

  /* Panel: en escritorio se arma al cargar; en celular, al verse (mismos pasos) */
  @media (min-width: 62rem) {
    .panel:not(.is-waiting) { --p-lado: a-lado; --p-sube: a-sube; --p-crece: a-crece-y; --p-brilla: a-brilla-barra; --p-cae: a-cae; --p-pop: a-pop; }
  }
  .panel.is-played { --p-lado: a-lado; --p-sube: a-sube; --p-crece: a-crece-y; --p-brilla: a-brilla-barra; --p-cae: a-cae; --p-pop: a-pop; }
  .panel { animation: var(--p-lado, none) 700ms var(--ease-entrada) 100ms backwards; }
  .panel__head { animation: var(--p-sube, none) 500ms var(--ease-entrada) 250ms backwards; }
  .kpis > div { animation: var(--p-sube, none) 500ms var(--ease-entrada) calc(320ms + var(--n, 0) * 80ms) backwards; }
  .semanas__barras i { transform-origin: bottom; animation: var(--p-crece, none) 600ms var(--ease-trazo) calc(500ms + var(--n, 0) * 45ms) backwards; }
  .semanas__barras i.is-lit {
    animation:
      var(--p-crece, none) 600ms var(--ease-trazo) calc(500ms + var(--n, 0) * 45ms) backwards,
      var(--p-brilla, none) 1200ms var(--ease-entrada) 1250ms;
  }
  .callout { animation: var(--p-cae, none) 500ms var(--ease-entrada) 1100ms backwards; }
  @media (max-width: 61.99rem) { .callout { animation-delay: 150ms; } } /* en celular va arriba, en el flujo del panel: entra primero */
  .seguimiento li { animation: var(--p-pop, none) 400ms var(--ease-entrada) calc(1250ms + var(--n, 0) * 130ms) backwards; }

  /* Listas: cada elemento entra al verse; los que llegan juntos, en orden */
  [data-anim="escalonado"] > .is-played { animation: a-sube 600ms var(--ease-entrada) calc(var(--n, 0) * 90ms) backwards; }

  /* Historia 01–02: los renglones llegan, se marcan y el duplicado se tacha */
  [data-anim="hoja"] > .is-played { animation: a-sube 480ms var(--ease-entrada) calc(60ms + var(--n, 0) * 70ms) backwards; }
  [data-anim="hoja"] > .is-played .marca { animation: a-pop 420ms var(--ease-entrada) calc(450ms + var(--n, 0) * 70ms) backwards; }
  [data-anim="hoja"] > .is-played .marca--lit {
    animation:
      a-pop 420ms var(--ease-entrada) calc(450ms + var(--n, 0) * 70ms) backwards,
      a-brilla 1200ms var(--ease-entrada) calc(950ms + var(--n, 0) * 70ms);
  }
  [data-anim="hoja"] > .is-played.is-dup td:not(:last-child) { animation: a-tacha 500ms var(--ease-entrada) calc(550ms + var(--n, 0) * 70ms) backwards; }

  /* Historia 03–04, en tres piezas que se animan cada una al verse (v6.4): la línea se dibuja de
     izquierda a derecha con sus puntos y salen las marcas; crecen las barras; llegan los puntos de interés */
  [data-anim="linea"].is-played :is(.plot__ventana, .plot__etq--ventana) { animation: a-aparece 500ms var(--ease-entrada) 50ms backwards; }
  [data-anim="linea"].is-played .plot__trazo { animation: a-revela 1200ms var(--ease-trazo) 150ms backwards; }
  [data-anim="linea"].is-played .plot__guia { animation: a-aparece 400ms var(--ease-entrada) 450ms backwards; }
  [data-anim="linea"].is-played .plot__guia + .plot__guia { animation-delay: 800ms; }
  [data-anim="linea"].is-played .plot__marca { animation: a-pop-centro 450ms var(--ease-entrada) 500ms backwards; }
  [data-anim="linea"].is-played .plot__marca + .plot__marca { animation-delay: 850ms; }
  [data-anim="sucursales"].is-played .suc__barra i { transform-origin: left center; animation: a-crece-x 700ms var(--ease-trazo) calc(100ms + var(--n, 0) * 120ms) backwards; }
  [data-anim="sucursales"].is-played .suc.is-lit .suc__barra i {
    animation:
      a-crece-x 700ms var(--ease-trazo) calc(100ms + var(--n, 0) * 120ms) backwards,
      a-enciende-barra 500ms var(--ease-entrada) 1000ms backwards;
  }
  [data-anim="sucursales"].is-played .suc__barra b { animation: a-aparece 400ms var(--ease-entrada) calc(600ms + var(--n, 0) * 120ms) backwards; }
  [data-anim="puntos"].is-played li { animation: a-sube 500ms var(--ease-entrada) calc(100ms + var(--n, 0) * 110ms) backwards; }

  /* Historia 05: se enciende la celda y llegan las tres lecturas, cada una al verse */
  [data-anim="celda"].is-played .cell--lit { animation: a-enciende 500ms var(--ease-entrada) 100ms backwards, a-brilla 1200ms var(--ease-entrada) 450ms; }
  [data-anim="lecturas"] > .is-played { animation: a-lado 600ms var(--ease-entrada) calc(var(--n, 0) * 130ms) backwards; }

  /* Ejemplos: cada tablero entra y su gráfica se dibuja cuando ella misma se ve (en celular, un poco después) */
  [data-anim="minis"] > .is-played { animation: a-sube 600ms var(--ease-entrada) calc(var(--n, 0) * 100ms) backwards; }
  [data-anim="mini"].is-played .mini__line { animation: a-revela 800ms var(--ease-trazo) calc(var(--n, 0) * 100ms + 250ms) backwards; }
  [data-anim="mini"].is-played .mini__proj { animation: a-revela 600ms var(--ease-trazo) calc(var(--n, 0) * 100ms + 800ms) backwards; }
  [data-anim="mini"].is-played :is(.mini__seg, .mini__bar) {
    transform-box: fill-box; transform-origin: left center;
    animation: a-crece-x 500ms var(--ease-trazo) calc(var(--n, 0) * 100ms + 250ms + var(--j, 0) * 60ms) backwards;
  }
  [data-anim="mini"].is-played .mini__cell { animation: a-aparece 400ms var(--ease-entrada) calc(var(--n, 0) * 100ms + 250ms + var(--j, 0) * 50ms) backwards; }
  [data-anim="mini"].is-played .mini__budget { animation: a-aparece 400ms var(--ease-entrada) calc(var(--n, 0) * 100ms + 650ms) backwards; }
  [data-anim="mini"].is-played .mini__cell.mini__lit {
    animation:
      a-aparece 400ms var(--ease-entrada) calc(var(--n, 0) * 100ms + 250ms + var(--j, 0) * 50ms) backwards,
      a-brilla-svg 1200ms var(--ease-entrada) calc(var(--n, 0) * 100ms + 600ms);
  }

  /* Ahorrar trabajo: los archivos se juntan en la hoja y el reporte queda listo */
  [data-anim="flujo"].is-played .flujo__archivos span { animation: a-sube 400ms var(--ease-entrada) calc(50ms + var(--n, 0) * 60ms) backwards; }
  [data-anim="flujo"].is-played .flujo__flecha { transform-origin: left center; animation: a-crece-x 400ms var(--ease-trazo) 250ms backwards; }
  [data-anim="flujo"].is-played .flujo__flecha ~ .flujo__flecha { animation-delay: 550ms; }
  [data-anim="flujo"].is-played .flujo__nodo { animation: a-pop 400ms var(--ease-entrada) 420ms backwards; }
  [data-anim="flujo"].is-played .flujo__nodo--fin { animation: a-pop 400ms var(--ease-entrada) 720ms backwards, a-brilla 1200ms var(--ease-entrada) 850ms; }
  @container (max-width: 25rem) {
    [data-anim="flujo"].is-played .flujo__flecha { transform-origin: top center; animation-name: a-crece-y; }
  }

  /* Página web: el sitio se arma y aparece el botón de WhatsApp */
  [data-anim="navegador"].is-played .navegador__cuerpo > b { transform-origin: left center; animation: a-crece-x 500ms var(--ease-trazo) calc(150ms + var(--n, 0) * 100ms) backwards; }
  [data-anim="navegador"].is-played .navegador__btn { animation: a-pop 450ms var(--ease-entrada) 500ms backwards, a-brilla 1200ms var(--ease-entrada) 800ms; }

  /* Lo que recibes: los cuatro momentos y el primero encendido */
  [data-anim="entregas"] > .is-played { animation: a-sube 550ms var(--ease-entrada) calc(var(--n, 0) * 110ms) backwards; }
  [data-anim="entregas"] > .is-played .cell--lit { animation: a-enciende 500ms var(--ease-entrada) 300ms backwards, a-brilla 1200ms var(--ease-entrada) 800ms; }

  /* Nosotros: la ventana se llena de celdas y una se enciende (logo 05) */
  [data-anim="ventana"].is-played > span { animation: a-pop 320ms var(--ease-entrada) calc(var(--n, 0) * 40ms) backwards; }
  [data-anim="ventana"].is-played > .is-on {
    animation:
      a-pop 320ms var(--ease-entrada) calc(var(--n, 0) * 40ms) backwards,
      a-enciende 500ms var(--ease-entrada) 650ms backwards,
      a-brilla 1200ms var(--ease-entrada) 900ms;
  }

  /* Cierre: el sol de filas sale (logo 04) */
  [data-anim="sol"].is-played { animation: a-sol 1400ms var(--ease-entrada) 100ms backwards; }

  /* Pie: la firma sube y la celda de la «o» se enciende */
  [data-anim="firma"].is-played { animation: a-sube 800ms var(--ease-entrada) backwards; }
  [data-anim="firma"].is-played .firma__o { animation: a-pop 600ms var(--ease-entrada) 450ms backwards, a-brilla-o 1400ms var(--ease-entrada) 900ms; }

  /* Preguntas: la respuesta se despliega al abrir (ease-out) y se recoge al cerrar (ease-in).
     Donde el navegador no anima la altura de <details>, abre y cierra al instante. */
  :root { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    height: 0; overflow: clip;
    transition: height 320ms var(--ease-salida), content-visibility 320ms var(--ease-salida) allow-discrete;
  }
  .faq-item[open]::details-content { height: auto; transition-timing-function: var(--ease-entrada); }
  .faq-item[open] .faq-item__cuerpo { animation: a-sube 420ms var(--ease-entrada) 60ms backwards; }

  /* Formulario: la opción elegida responde con un rebote y la confirmación se dibuja */
  .interes__opcion:has(input:checked) { animation: a-elige 380ms var(--resorte); }
  .exito:not([hidden]) .exito__icono { animation: a-pop 450ms var(--ease-entrada) backwards; }
  .exito:not([hidden]) .exito__icono .icon { animation: a-dibuja 500ms var(--ease-entrada) 200ms backwards; }
}
.exito__icono .icon { stroke-dasharray: 30; }

/* Interfaz con resorte: el menú marca la sección en pantalla (subrayado, además del color) */
.nav__list a { position: relative; }
.nav__list a::after {
  content: ""; position: absolute; inset-inline: var(--space-3); bottom: 7px; height: 2px; border-radius: 2px;
  background: currentColor; opacity: 0; transform: scaleX(0);
  transition: transform var(--dur-base) var(--resorte), opacity var(--dur-fast) var(--ease-entrada);
}
.nav__list a[aria-current] { color: var(--label); }
.nav__list a[aria-current]::after { opacity: 1; transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .nav__list a:not([aria-current]):hover::after { opacity: 0.45; transform: scaleX(1); }
}
@media (max-width: 47.99rem) { .nav__list a::after { inset-inline: var(--space-2); bottom: 5px; } }

/* Botones, enlaces y tarjetas que se pueden tocar: se levantan un poco con el cursor */
.btn { transition: background-color var(--dur-fast) var(--ease-entrada), border-color var(--dur-fast) var(--ease-entrada), color var(--dur-fast) var(--ease-entrada), box-shadow var(--dur-base) var(--ease-entrada), transform var(--dur-base) var(--resorte); }
.text-link { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.35em; transition: text-decoration-color var(--dur-base) var(--ease-entrada), text-underline-offset var(--dur-base) var(--resorte); }
.icon-box { transition: transform var(--dur-base) var(--resorte), background-color var(--dur-fast) var(--ease-entrada); }
.red__flecha, .canal__flecha { transition: transform var(--dur-base) var(--resorte); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255, 194, 75, 0.28); }
  .btn--secondary:hover { transform: translateY(-2px); }
  .btn:active { transform: scale(0.97); }
  .text-link:hover { text-decoration-color: currentColor; text-underline-offset: 0.2em; }
  .chip:hover { transform: translateY(-2px); }
  :is(.canal, .red):hover .icon-box { transform: scale(1.08); }
  :is(.canal, .red):hover :is(.canal__flecha, .red__flecha) { transform: translate(2px, -2px); }
  .faq-item summary:hover { color: var(--accent-text); }
}