/* ==========================================================================
   Torven Agro — Sistema visual web v1
   Fuente de verdad: PM02 §10.7 (variables) · §10.1-10.6 (componentes)
                     PW04 §3 (física de página) · PM01 §3.3 (tipografía)
   REGLA: ningún color, tipografía ni radio se elige "a ojo". Si algo no está
   aquí, está mal. Prohibido: Inter, degradados, sombras, radio > 4px.
   ========================================================================== */

/* --- 1. Variables del sistema — PM02 §10.7, verbatim ---------------------- */
:root {
  /* Color */
  --grafito: #1F2528;
  --petroleo: #123C46;
  --verde-campo: #244C36;
  --ambar: #C28A2E;
  --ambar-hover: #A87526;
  --hueso: #F3F0E8;
  --acero: #6D7478;
  --blanco: #FFFFFF;

  /* Tipografía (PM01 §3.3) */
  --font-sans: 'Archivo', 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', Consolas, monospace;
  --fs-display: clamp(34px, 5vw, 64px);
  --fs-h1: clamp(28px, 4vw, 36px);
  --fs-h2: clamp(24px, 3vw, 28px);
  --fs-h3: 22px;
  --fs-h4: 16px;
  --fs-body: 17px;
  --fs-small: 14px;
  --lh-tight: 1.15;
  --lh-body: 1.55;

  /* Espaciado (escala 8px) */
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-6: 48px; --sp-8: 64px; --sp-12: 96px;

  /* Layout */
  --max-content: 1200px;
  --max-prose: 680px;
  --radius: 4px;

  /* Derivados de construcción (no rediseñan nada; sólo evitan valores sueltos) */
  --header-h: 60px;
  --gutter: 24px;
  --borde-claro: rgba(109, 116, 120, 0.30);   /* acero 30% — PM02 §10.1 */
  --borde-tarjeta: rgba(109, 116, 120, 0.40); /* acero 40% — PM02 §10.4 */
  --grilla-tecnica: rgba(243, 240, 232, 0.07);/* PW04 §3.4: 6-8% opacidad   */
}

@media (min-width: 1024px) {
  :root { --header-h: 72px; }
}

/* --- 2. Reset mínimo ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--hueso);
  color: var(--grafito);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Enlace terciario — PM02 §10.3 */
.enlace {
  color: var(--petroleo);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* --- 3. Jerarquía tipográfica — PM01 §3.3 / PW04 §3.3 -------------------- */
h1, h2, h3, h4 { font-family: var(--font-sans); margin: 0 0 var(--sp-3); }

/* H1 existe UNA sola vez en el sitio: el titular de S1. PW04 §3.3 */
.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 var(--sp-3);
}
h2 { font-size: var(--fs-h2); line-height: 1.25; font-weight: 700; }
h3 { font-size: var(--fs-h3); line-height: 1.3;  font-weight: 600; }
h4 { font-size: var(--fs-h4); line-height: 1.35; font-weight: 600; }

p { margin: 0 0 var(--sp-3); max-width: var(--max-prose); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; }

/* Cifras: SIEMPRE monoespaciadas. Es la firma de "instrumento". PW04 §3.3 */
.cifra {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Nota al pie de sección (microprueba, ejemplo simulado, aclaración) */
.nota {
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--acero);
  font-style: italic;
  max-width: var(--max-prose);
  margin: var(--sp-3) 0 0;
}
.sobre-oscuro .nota { color: rgba(243, 240, 232, 0.62); }

/* Rótulo de sección: mono, tracking abierto, ámbar */
.rotulo {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambar);
  margin: 0 0 var(--sp-2);
}
.rotulo--acero { color: var(--acero); }

/* --- 4. Layout: retícula 12 columnas, contenedor 1200px — PW04 §3.1 ------ */
.contenedor {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.seccion { padding: var(--sp-8) 0; }

@media (min-width: 1024px) {
  /* Ritmo vertical 96-128px desktop / 64px móvil — PW04 §3.2 */
  .seccion { padding: var(--sp-12) 0; }
}

/* Asimetría deliberada: la simetría perfecta es marcador de slop. PW04 §3.1 */
.reticula { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }

/* [REPARACIÓN 2026-07-26 — desborde horizontal en móvil]
   Un item de grid trae `min-width: auto`: no puede encogerse por debajo del
   ancho de su contenido. Con el <pre> del Control Semanal adentro (que lleva
   `white-space: pre` y no envuelve), el track se ensanchaba más que la
   pantalla y arrastraba a TODA la página a scroll horizontal — el síntoma
   que se veía como "la página cambia de tamaño" entre capturas. El
   `overflow-x: auto` de .control-semanal no alcanzaba porque el item ya se
   había ensanchado antes. Con min-width:0 el track respeta la pantalla y el
   scroll queda confinado al bloque del informe, que es donde corresponde. */
.reticula > * { min-width: 0; }

@media (min-width: 1024px) {
  .reticula {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter);
    align-items: center;
  }
  .reticula--7-5 > *:first-child { grid-column: 1 / span 7; }
  .reticula--7-5 > *:last-child  { grid-column: 9 / span 4; }

  /* S3 invertido: el instrumento a la izquierda, el argumento a la derecha */
  .reticula--5-7 > *:first-child { grid-column: 1 / span 4; }
  .reticula--5-7 > *:last-child  { grid-column: 6 / span 7; }

  /* S5: visual dominante 8 col */
  .reticula--4-8 > *:first-child { grid-column: 1 / span 4; }
  .reticula--4-8 > *:last-child  { grid-column: 5 / span 8; align-self: stretch; }
}

/* --- 5. Fondos y textura técnica — PM01 §4.2 / PW04 §3.4 ----------------- */
.sobre-oscuro {
  background-color: var(--grafito);
  color: var(--hueso);
}
.sobre-oscuro h2, .sobre-oscuro h3, .sobre-oscuro h4 { color: var(--hueso); }

/* Grilla técnica de 1px al 7% — el elemento que cose web, LinkedIn e impreso */
.grilla-tecnica {
  background-image:
    repeating-linear-gradient(to right,
      var(--grilla-tecnica) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(to bottom,
      var(--grilla-tecnica) 0 1px, transparent 1px 32px);
  background-position: center top;
}

/* --- 6. Lockup de marca (PROVISORIO — no es el logotipo) ------------------
   El logotipo está bloqueado hasta resolver la verificación legal de marca
   (SENAPI/DINAPI/INPI/WIPO). Esto es el wordmark tipográfico puro, coherente
   con la Ruta A de PM01 §1.3. Se reemplaza por el archivo real en un solo
   lugar cuando exista. Regla de oro: nunca sin la bajada.
   ------------------------------------------------------------------------- */
.lockup { display: inline-block; text-decoration: none; line-height: 1; }
.lockup__marca {
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grafito);
}
.lockup__bajada {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--acero);
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1.5px solid var(--ambar);
}
.sobre-oscuro .lockup__marca,
.encabezado.is-oscuro .lockup__marca { color: var(--hueso); }
.sobre-oscuro .lockup__bajada,
.encabezado.is-oscuro .lockup__bajada { color: rgba(243, 240, 232, 0.72); }

/* Lockup grande del hero */
.lockup--hero .lockup__marca {
  font-size: clamp(22px, 3.2vw, 30px);
  letter-spacing: 0.10em;
}
.lockup--hero .lockup__bajada {
  font-size: clamp(11px, 1.3vw, 14px);
  letter-spacing: 0.13em;
  margin-top: 8px;
  padding-top: 8px;
  border-top-width: 2px;
}

/* --- 7. Header — PM02 §10.1 ---------------------------------------------- */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 60;
  /* [REPARACIÓN 2026-07-26] Era `height`, altura FIJA. Cuando el lockup se
     aplastaba y envolvía a varias líneas, el contenido desbordaba la caja de
     60px; con `align-items: center` el sobrante salía por arriba y por abajo
     en partes iguales, y de ahí venían las dos fallas visibles: "TORVEN"
     cortado contra el borde superior y "COMERCIAL" impreso encima del texto
     del cuerpo. `min-height` deja crecer la caja en vez de derramar. Se
     mantiene por sí solo aunque el copy crezca (portugués, inglés). */
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--hueso);
  border-bottom: 1px solid var(--borde-claro);
  transition: background-color 200ms ease-out, border-color 200ms ease-out;
}
/* Al bajar de S1 la marca "se enciende": fondo grafito, logo en negativo */
.encabezado.is-oscuro {
  background: var(--grafito);
  border-bottom-color: rgba(243, 240, 232, 0.18);
}
.encabezado__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  flex-wrap: nowrap;
}

/* [REPARACIÓN 2026-07-26] El lockup del header no envuelve nunca. La regla de
   oro exige marca + bajada juntas; partirlas en cinco renglones no la cumple,
   la desfigura. A 360px la bajada mide ~205px y con la hamburguesa entra
   holgada. Sólo aplica dentro del header: el lockup del hero sigue fluido. */
.encabezado .lockup { flex: 0 0 auto; }
.encabezado .lockup__marca,
.encabezado .lockup__bajada { white-space: nowrap; }

.nav { display: none; }

@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; gap: var(--sp-4); }
}
.nav__enlace {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--grafito);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: border-color 160ms ease-out;
}
/* Hover: subrayado ámbar, SIN cambio de color de texto — PM02 §10.1 */
.nav__enlace:hover, .nav__enlace:focus-visible { border-bottom-color: var(--ambar); }
.encabezado.is-oscuro .nav__enlace { color: var(--hueso); }

.encabezado__acciones { display: flex; align-items: center; gap: var(--sp-2); }
.encabezado .btn--primario { padding: 10px 18px; font-size: 15px; }
/* [REPARACIÓN 2026-07-26 — LA CAUSA RAÍZ DEL HEADER ROTO]
   Esto decía `.encabezado__cta { display: none }` a secas. `.btn` declara
   `display: inline-flex` y vive MÁS ABAJO en esta misma hoja (sección 11):
   misma especificidad (0,1,0), así que ganaba el último y el botón se veía
   en el celular pese a estar declarado oculto. Robaba ~180px del ancho del
   header y era lo que aplastaba el lockup hasta hacerlo envolver.
   Se sube la especificidad a (0,2,0) en vez de mover la regla, para no
   alterar el orden de la hoja. LECCIÓN: en esta hoja, cualquier `display`
   sobre un elemento que también lleve `.btn` necesita ganarle a la sección
   11 — o declararse después de ella. */
.encabezado .encabezado__cta { display: none; }
@media (min-width: 768px) { .encabezado .encabezado__cta { display: inline-flex; } }

/* Hamburguesa: ícono de línea 2px */
.hamburguesa {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  padding: 0 8px;
  background: none; border: 0; cursor: pointer;
}
.hamburguesa span {
  display: block; height: 2px; width: 100%;
  background: var(--grafito);
  transition: background-color 200ms ease-out;
}
.encabezado.is-oscuro .hamburguesa span { background: var(--hueso); }
@media (min-width: 1024px) { .hamburguesa { display: none; } }

/* Menú móvil a pantalla completa, fondo grafito — PM02 §10.1 */
.menu-movil {
  position: fixed; inset: 0; z-index: 80;
  background: var(--grafito);
  color: var(--hueso);
  display: none;
  flex-direction: column;
  padding: var(--sp-3) var(--gutter) var(--sp-8);
  overflow-y: auto;
}
.menu-movil[data-abierto="true"] { display: flex; }
.menu-movil__barra {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); margin-bottom: var(--sp-6);
}
.menu-movil__cerrar {
  width: 40px; height: 40px; padding: 0;
  background: none; border: 0; cursor: pointer;
  position: relative;
}
.menu-movil__cerrar::before, .menu-movil__cerrar::after {
  content: ''; position: absolute; left: 8px; top: 19px;
  width: 24px; height: 2px; background: var(--hueso);
}
.menu-movil__cerrar::before { transform: rotate(45deg); }
.menu-movil__cerrar::after  { transform: rotate(-45deg); }
.menu-movil .btn--primario { margin-bottom: var(--sp-6); }
.menu-movil__enlace {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 24px;
  color: var(--hueso);
  text-decoration: none;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid rgba(243, 240, 232, 0.14);
}

/* --- 8. Botones — PM02 §10.3 --------------------------------------------
   Regla: UN solo botón primario visible por pantalla. Dos ámbar = uno sobra.
   ------------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  padding: 14px 28px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease-out, border-color 160ms ease-out;
}
.btn--primario { background: var(--ambar); color: var(--grafito); }
.btn--primario:hover, .btn--primario:focus-visible { background: var(--ambar-hover); }

.btn--secundario { background: transparent; color: var(--grafito); border-color: var(--grafito); }
.btn--secundario:hover, .btn--secundario:focus-visible { background: rgba(31, 37, 40, 0.08); }
.sobre-oscuro .btn--secundario { color: var(--hueso); border-color: var(--hueso); }
.sobre-oscuro .btn--secundario:hover { background: rgba(243, 240, 232, 0.08); }

.botonera { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

/* CTA fijo al fondo en móvil, tras pasar S1 — PW04 §3.7 */
.cta-fija {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--hueso);
  border-top: 1px solid var(--borde-claro);
  transform: translateY(110%);
  transition: transform 240ms ease-out;
}
.cta-fija .btn { width: 100%; }
.cta-fija.is-visible { transform: translateY(0); }
@media (min-width: 1024px) { .cta-fija { display: none; } }

/* --- 9. Bloques de S2: renglones de informe, no tarjetas SaaS — PW04 §3.6 -
   Borde izquierdo 2px ámbar, fondo transparente, sin sombra, sin ícono.
   Tres anchos ligeramente distintos: no son tres clones.
   ------------------------------------------------------------------------ */
.renglones { margin-top: var(--sp-6); }
.renglon {
  border-left: 2px solid var(--ambar);
  padding: 2px 0 2px var(--sp-3);
  margin-bottom: var(--sp-4);
}
.renglon:last-child { margin-bottom: 0; }
.renglon h3 { margin-bottom: var(--sp-1); }
.renglon p { margin-bottom: 0; }
@media (min-width: 1024px) {
  .renglon:nth-child(1) { max-width: 100%; }
  .renglon:nth-child(2) { max-width: 94%; }
  .renglon:nth-child(3) { max-width: 88%; }
}

/* Tarjeta genérica — PM02 §10.4 (sin sombras, sin elevaciones) */
.tarjeta {
  border: 1px solid var(--borde-tarjeta);
  border-radius: var(--radius);
  padding: var(--sp-3);
  background: transparent;
}
.sobre-oscuro .tarjeta { border-color: rgba(243, 240, 232, 0.22); }

/* --- 10. Panel-instrumento: la cifra como visual ------------------------- */
.panel {
  background: var(--grafito);
  color: var(--hueso);
  border-radius: var(--radius);
  padding: var(--sp-4);
  border: 1px solid rgba(243, 240, 232, 0.16);
}
.panel__etiqueta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(243, 240, 232, 0.60);
  margin: 0 0 var(--sp-2);
}
.panel__cifra {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.05;
  color: var(--ambar);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.panel__pie {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(243, 240, 232, 0.62);
  margin: var(--sp-2) 0 0;
  max-width: none;
}
.panel__lista { list-style: none; margin: 0; padding: 0; }
.panel__lista li {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.5;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid rgba(243, 240, 232, 0.14);
}
.panel__lista li:last-child { border-bottom: 0; }

/* --- 11. Lista de argumentos (marca de guion, no de bullet decorativo) --- */
.lista-marca { list-style: none; margin: 0 0 var(--sp-3); padding: 0; max-width: var(--max-prose); }
.lista-marca li { position: relative; padding-left: var(--sp-3); margin-bottom: var(--sp-2); }
.lista-marca li::before {
  content: ''; position: absolute; left: 0; top: 0.72em;
  width: 12px; height: 2px; background: var(--ambar);
}

/* --- 12. Pasos de S4 ----------------------------------------------------- */
.pasos { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); margin-top: var(--sp-6); }
@media (min-width: 768px) { .pasos { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }
.paso { border-top: 2px solid var(--ambar); padding-top: var(--sp-3); }
.paso__n {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.10em;
  color: var(--ambar);
  display: block;
  margin-bottom: var(--sp-1);
}
.paso p { max-width: none; }

/* Ritmo no uniforme: S4 respira más arriba que abajo, para pegarse a S5.
   Son causa y efecto. PW04 §3.2 */
.seccion--causa { padding-bottom: var(--sp-4); }
@media (min-width: 1024px) { .seccion--causa { padding-bottom: var(--sp-6); } }

/* --- 13. Control Semanal: formato exacto de Arq v3 §14.6 ----------------- */
.control-semanal {
  background: var(--grafito);
  border: 1px solid rgba(243, 240, 232, 0.20);
  border-radius: var(--radius);
  padding: var(--sp-3);
  overflow-x: auto;
}
@media (min-width: 768px) { .control-semanal { padding: var(--sp-4); } }
.control-semanal__demo {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grafito);
  background: var(--ambar);
  padding: 3px 8px;
  border-radius: 2px;
  margin-bottom: var(--sp-3);
}
.control-semanal pre {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.75;
  color: var(--hueso);
  margin: 0;
  white-space: pre;
  font-variant-numeric: tabular-nums;
}
.control-semanal b { color: var(--ambar); font-weight: 600; }

/* --- 14. Cita del fundador — S7 ----------------------------------------- */
.cita { border-left: 2px solid var(--ambar); padding-left: var(--sp-3); margin: 0 0 var(--sp-4); }
.cita p { font-size: 19px; line-height: 1.5; }
.cita footer { font-size: var(--fs-small); color: var(--acero); }
.sobre-oscuro .cita footer { color: rgba(243, 240, 232, 0.62); }

/* --- 15. Bloques del filtro — S6 ---------------------------------------- */
.filtro { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-6); }
@media (min-width: 768px) { .filtro { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
.filtro__bloque { border-top: 2px solid var(--ambar); padding-top: var(--sp-3); }
.filtro__bloque--no { border-top-color: var(--acero); }
.filtro__bloque p { max-width: none; }

/* --- 16. Footer — PM02 §10.2 -------------------------------------------- */
.pie { background: var(--grafito); color: var(--hueso); padding: var(--sp-8) 0 var(--sp-6); }
.pie__cols { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
@media (min-width: 768px)  { .pie__cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .pie__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--gutter); } }
.pie__titulo {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(243, 240, 232, 0.55);
  margin: 0 0 var(--sp-2);
}
.pie__lista { list-style: none; margin: 0; padding: 0; }
.pie__lista li { margin-bottom: 10px; }
.pie__lista a, .pie__texto {
  font-size: var(--fs-small);
  color: rgba(243, 240, 232, 0.72);
  text-decoration: none;
  line-height: 1.5;
}
.pie__lista a:hover, .pie__lista a:focus-visible { color: var(--hueso); text-decoration: underline; }
.pie__texto { display: block; margin-bottom: 10px; max-width: none; }
.pie__formula {
  font-size: var(--fs-small);
  color: rgba(243, 240, 232, 0.72);
  margin: var(--sp-3) 0 0;
  max-width: 34ch;
}
.pie__cierre {
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(243, 240, 232, 0.14);
  text-align: center;
  font-size: 13px;
  color: rgba(243, 240, 232, 0.55);
}

/* --- 17. Páginas de servicio (no-contactar, gracias, legal) -------------- */
.pagina-servicio {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  padding: var(--sp-8) 0;
}
.pagina-servicio__caja { max-width: 620px; }
.marca-verificacion {
  width: 44px; height: 44px;
  margin-bottom: var(--sp-3);
  border: 2px solid var(--verde-campo);
  border-radius: 50%;
  position: relative;
}
.marca-verificacion::after {
  content: ''; position: absolute; left: 12px; top: 9px;
  width: 14px; height: 22px;
  border-right: 2px solid var(--verde-campo);
  border-bottom: 2px solid var(--verde-campo);
  transform: rotate(45deg);
}

.documento { padding: var(--sp-8) 0; }
.documento h2 { margin-top: var(--sp-6); }
.documento h2:first-of-type { margin-top: 0; }
.documento p, .documento li { max-width: var(--max-prose); }
.documento ul { padding-left: var(--sp-3); margin: 0 0 var(--sp-3); }
.documento li { margin-bottom: var(--sp-1); }
.documento .fecha {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--acero);
  margin-bottom: var(--sp-6);
}

/* --- 18. Movimiento: UNA sola familia de animación — PW04 §3.5 -----------
   Entrada por desplazamiento vertical de 12px + fade, 240ms, ease-out,
   escalonado 80ms entre hermanos. Sin parallax, sin partículas, sin hover
   que agranda. Excepciones con intención: el contador de S2 y la entrada
   lateral del Control Semanal en S5.
   ------------------------------------------------------------------------ */
.revelar {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 240ms ease-out, transform 240ms ease-out;
  transition-delay: var(--retardo, 0ms);
}
.revelar.is-dentro { opacity: 1; transform: translateY(0); }

/* Excepción S5: el reporte entra de costado, como documento que se entrega */
.revelar--lateral { transform: translateX(16px); }
.revelar--lateral.is-dentro { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revelar, .revelar--lateral { opacity: 1; transform: none; transition: none; }
  .cta-fija { transition: none; }
}

/* --- 19. Accesibilidad --------------------------------------------------- */
:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--petroleo);
  outline-offset: 2px;
}
.sobre-oscuro :where(a, button):focus-visible { outline-color: var(--ambar); }

.salto-contenido {
  position: absolute; left: -9999px;
  background: var(--ambar); color: var(--grafito);
  padding: 12px 20px; border-radius: var(--radius); z-index: 100;
  font-weight: 600; text-decoration: none;
}
.salto-contenido:focus { left: var(--gutter); top: 10px; }

.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}