/* =========================================================
   AUTODEV · El comprobante
   La web se lee como la representación impresa de un
   comprobante electrónico: emisor, recuadro, detalle, totales.
   Tintas: las del logo. La acción va en azul marino (en oscuro, en claro).
   Papel y recuadros en ángulo recto; controles con 8px,
   como los botones del programa.
   ========================================================= */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --mesa: #e9ecf2;
  --papel: #fdfdfc;
  --tinta: #191e3a;
  --tinta-2: #444b6b;
  --tinta-3: #5b6282;
  --filete: #191e3a;
  --filete-suave: #d4d9e4;
  --resalte: #eceef5;
  --azul: #191e3a;
  --azul-hover: #2c3466;
  --azul-tinta: #191e3a;
  --sobre-azul: #ffffff;
  --ok: #1d6a44;
  --ok-fondo: #e2f1e7;
  --alerta: #835600;
  --alerta-fondo: #fbefd2;
  --error: #a11f39;
  --error-fondo: #fbe4e8;
  --sombra-hoja: 0 1px 2px rgb(25 30 58 / 0.08), 0 28px 56px -32px rgb(25 30 58 / 0.4);
  --img-filtro: none;
  --firma-clara: block;
  --firma-oscura: none;

  --ancho: 1240px;
  --relleno: clamp(20px, 4vw, 56px);
  --fuente: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mesa: #080b16;
    --papel: #11152a;
    --tinta: #e8ebf4;
    --tinta-2: #b4bad0;
    --tinta-3: #959cb5;
    --filete: #c3c9dc;
    --filete-suave: #2b3152;
    --resalte: #172040;
    --azul: #eceef5;
    --azul-hover: #ffffff;
    --azul-tinta: #c3c9dc;
    --sobre-azul: #191e3a;
    --ok: #8ad6a9;
    --ok-fondo: rgb(80 190 130 / 0.15);
    --alerta: #f0c56c;
    --alerta-fondo: rgb(240 190 90 / 0.15);
    --error: #f5a0ad;
    --error-fondo: rgb(240 110 130 / 0.15);
    --sombra-hoja: 0 28px 56px -32px rgb(0 0 0 / 0.85);
    --img-filtro: brightness(0.9);
    --firma-clara: none;
    --firma-oscura: block;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --mesa: #080b16;
  --papel: #11152a;
  --tinta: #e8ebf4;
  --tinta-2: #b4bad0;
  --tinta-3: #959cb5;
  --filete: #c3c9dc;
  --filete-suave: #2b3152;
  --resalte: #172040;
  --azul: #eceef5;
  --azul-hover: #ffffff;
  --azul-tinta: #c3c9dc;
  --sobre-azul: #191e3a;
  --ok: #8ad6a9;
  --ok-fondo: rgb(80 190 130 / 0.15);
  --alerta: #f0c56c;
  --alerta-fondo: rgb(240 190 90 / 0.15);
  --error: #f5a0ad;
  --error-fondo: rgb(240 110 130 / 0.15);
  --sombra-hoja: 0 28px 56px -32px rgb(0 0 0 / 0.85);
  --img-filtro: brightness(0.9);
  --firma-clara: none;
  --firma-oscura: block;
  color-scheme: dark;
}

/* ---------- Base ---------- */

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
/* Los enlaces dentro de la página (como "Conoce AUTODEV") bajan suave. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--mesa);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--azul); color: var(--sobre-azul); }

[hidden] { display: none !important; }

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
p { margin: 0; }
h1, h2, h3 { margin: 0; color: var(--tinta); }

h1 {
  font-size: clamp(2.25rem, 1.4rem + 2.4vw, 3.4rem);
  font-stretch: 110%;
  font-weight: 760;
  line-height: 1.03;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.65rem, 1.25rem + 1.4vw, 2.4rem);
  font-stretch: 110%;
  font-weight: 740;
  line-height: 1.1;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

h3 { font-size: 1.25rem; font-weight: 680; line-height: 1.3; }

a { color: var(--azul-tinta); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
/* Sobre las franjas azul marino (portada y cierre) el contorno va en claro,
   en los dos temas: si no, en tema claro no se ve. */
.portada-banda :focus-visible,
.cierre :focus-visible { outline-color: #eceef5; }

.i { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -0.22em; }

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

.salto { position: absolute; left: -9999px; top: 8px; z-index: 60; background: var(--papel); padding: 10px 16px; }
.salto:focus { left: 16px; }

.cifra { font-variant-numeric: tabular-nums; }

/* ---------- La hoja ---------- */

.hoja {
  max-width: var(--ancho);
  margin: clamp(0px, 2vw, 28px) auto;
  background: var(--papel);
  border: 1px solid var(--filete);
  box-shadow: var(--sombra-hoja);
}

@media (max-width: 720px) {
  .hoja { margin: 0; border-left: 0; border-right: 0; border-top: 0; box-shadow: none; }
}

.bloque { padding: clamp(40px, 6vw, 76px) var(--relleno); border-top: 1px solid var(--filete-suave); }
.bloque > h2 { margin-bottom: 14px; }
.bloque .entrada { color: var(--tinta-2); max-width: 60ch; margin-bottom: clamp(24px, 3.5vw, 40px); }

/* ---------- Emisor (cabecera) ---------- */

.emisor {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--papel);
  border-bottom: 1px solid var(--filete);
}

.emisor-fila {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 76px;
  padding: 0 var(--relleno);
}

.marca { display: flex; align-items: center; gap: 12px; min-width: 44px; min-height: 44px; color: var(--tinta); text-decoration: none; }
.marca img { width: 40px; height: 40px; border-radius: 8px; }
.marca strong { display: block; font-size: 1.25rem; font-stretch: 118%; font-weight: 820; letter-spacing: 0.035em; line-height: 1.1; }
.marca small { display: block; font-size: 0.875rem; color: var(--tinta-3); line-height: 1.3; }

.navegacion { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.navegacion > a,
.desplegable > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  background: none;
  color: var(--tinta);
  font: inherit;
  font-size: 1rem;
  font-weight: 560;
  text-decoration: none;
  cursor: pointer;
  border-radius: 8px;
}
.navegacion > a:hover,
.desplegable > button:hover,
.desplegable[data-abierto] > button { background: var(--resalte); }
.navegacion > a[aria-current="page"],
.desplegable[data-actual] > button { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--azul); }
.desplegable > button .i { width: 1em; height: 1em; transition: transform 0.25s var(--ease); }
.desplegable[data-abierto] > button .i { transform: rotate(180deg); }

.desplegable { position: relative; }
.submenu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  width: 360px;
  background: var(--papel);
  border: 1px solid var(--filete);
  box-shadow: var(--sombra-hoja);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s var(--ease), transform 0.22s var(--ease), visibility 0.18s;
}
.desplegable[data-abierto] .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu a {
  display: grid;
  gap: 4px;
  padding: 14px 18px;
  color: var(--tinta);
  text-decoration: none;
  border-top: 1px solid var(--filete-suave);
}
.submenu a:first-child { border-top: 0; }
.submenu a:hover,
.submenu a[aria-current="page"] { background: var(--resalte); }
.submenu strong { font-weight: 680; letter-spacing: 0.02em; }
.submenu span:last-child { font-size: 0.9375rem; color: var(--tinta-2); }
/* "Arma tu pack": al final del menú, más chico que los módulos */
.submenu .submenu-pack { display: flex; align-items: center; min-height: 44px; padding: 10px 18px; border-top-color: var(--filete); font-size: 0.9375rem; font-weight: 640; color: var(--azul-tinta); }
.submenu .submenu-pack:hover { background: var(--resalte); text-decoration: underline; text-underline-offset: 3px; }

.acciones { display: flex; align-items: center; gap: 8px; }
.navegacion + .acciones { margin-left: 8px; }

.boton-icono {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--filete-suave);
  border-radius: 8px;
  background: var(--papel);
  color: var(--tinta);
  cursor: pointer;
}
.boton-icono { transition: background-color 150ms var(--ease), transform 120ms var(--ease); }
.boton-icono:hover { background: var(--resalte); }
.boton-icono:active { transform: scale(0.94); }
.boton-icono .i { width: 1.3rem; height: 1.3rem; }
.boton-icono.wa { background: var(--azul); border-color: var(--azul); color: var(--sobre-azul); }
.boton-icono.wa:hover { background: var(--azul-hover); }

.solo-movil { display: none; }

.menu-movil { display: none; border-top: 1px solid var(--filete-suave); padding: 8px var(--relleno) 20px; }
.menu-movil a:not(.boton) {
  display: grid;
  padding: 13px 0;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--filete-suave);
  font-weight: 560;
}
.menu-movil a:not(.boton) small { font-weight: 400; font-size: 0.9375rem; color: var(--tinta-2); }
.menu-movil a.menu-pack { font-size: 0.9375rem; font-weight: 640; color: var(--azul-tinta); }
.menu-movil .boton { width: 100%; margin-top: 16px; }

@media (max-width: 960px) {
  .navegacion,
  .emisor .solo-escritorio { display: none; }
  .emisor .solo-movil { display: inline-grid; }
  .acciones { margin-left: auto; }
  .emisor[data-menu-abierto] .menu-movil { display: block; max-height: calc(100vh - 78px); max-height: calc(100dvh - 78px); overflow-y: auto; overscroll-behavior: contain; }
}

@media (max-width: 560px) {
  .marca small { display: none; }
  .emisor-fila { min-height: 68px; gap: 12px; }
}

@media (max-width: 359px) {
  .marca span { display: none; }
}

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 1rem;
  font-weight: 660;
  font-stretch: 104%;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), transform 0.12s var(--ease);
}
.boton:active { transform: scale(0.97); }
.boton-azul { background: var(--azul); color: var(--sobre-azul); }
.boton-azul:hover { background: var(--azul-hover); text-decoration: none; }
.boton-borde { background: var(--papel); color: var(--tinta); border-color: var(--filete); }
.boton-borde:hover { background: var(--resalte); text-decoration: none; }
.boton-chico { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; }

/* ---------- Campos (etiqueta : valor) ---------- */

.campos { display: grid; grid-template-columns: minmax(7.5rem, max-content) 1fr; gap: 10px 18px; margin: 0; }
.campos dt { display: flex; justify-content: space-between; gap: 12px; font-weight: 640; }
.campos dt::after { content: ":"; }
.campos dd { margin: 0; color: var(--tinta-2); }
.campos dd > a,
.observaciones dd > a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 480px) {
  .campos { grid-template-columns: minmax(5.5rem, max-content) 1fr; gap: 8px 12px; }
}

/* ---------- Primera vista ---------- */

.inicio { display: grid; gap: clamp(36px, 5vw, 64px); padding: clamp(36px, 5vw, 64px) var(--relleno) clamp(40px, 5vw, 64px); align-items: start; }
.inicio h1 { max-width: 20ch; }
.inicio .campos { margin-top: clamp(24px, 3vw, 36px); max-width: 58ch; }
.acciones-texto { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: clamp(28px, 3.5vw, 40px); }
.acciones-texto .enlace { font-weight: 620; display: inline-flex; align-items: center; min-height: 44px; }
/* Enlace al video del módulo (Google Drive, otra pestaña) */
.acciones-texto .enlace-video { gap: 8px; }
.enlace-video .i { width: 1.3em; height: 1.3em; flex: none; color: var(--azul-tinta); }

@media (min-width: 980px) {
  .inicio { grid-template-columns: minmax(0, 1.45fr) minmax(360px, 1fr); }
}
/* Páginas de módulo: a la derecha del título va la prueba real (SIRE) o la
   pantalla del módulo dibujada (GUIAS, RHE, VALIDADOR), en vez de una placa */
.inicio-lado { min-width: 0; max-width: 480px; }
.v-pestanas { display: flex; flex-wrap: wrap; width: 100%; }
.v-segmento.v-pestanas span { flex: 1 1 auto; text-align: center; white-space: nowrap; padding-inline: 6px; font-size: 0.8125rem; }
@media (max-width: 400px) {
  .v-segmento.v-pestanas span { padding-inline: 4px; font-size: 0.75rem; }
}

/* ---------- Portada: la primera pantalla ----------
   Una sola pieza en el azul marino del logo: el logo completo en grande,
   la frase, los botones y, debajo, los cuatro módulos en fila. La banda
   ocupa toda la pantalla (menos la cabecera) y el contenido va centrado;
   "Conoce AUTODEV" queda fijo al pie. */

.portada {
  --banda: #191e3a; --sobre-banda: #eceef5; --sobre-banda-2: #b4bad0;
  --alto-cabecera: 77px;
  --margen-hoja: clamp(0px, 2vw, 28px);
}

.portada-banda {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: min(calc(100vh - var(--alto-cabecera) - var(--margen-hoja)), 900px);
  min-height: min(calc(100svh - var(--alto-cabecera) - var(--margen-hoja)), 900px);
  background: var(--banda);
  color: var(--sobre-banda);
  text-align: center;
  padding: clamp(56px, 9vh, 104px) var(--relleno);
}
@media (max-width: 720px) { .portada { --margen-hoja: 0px; } }
@media (max-width: 560px) { .portada { --alto-cabecera: 69px; } }
.portada-logo { margin: 0 auto; width: min(552px, 100%); }
.portada-logo img { width: 100%; }
/* La frase acompaña al logo sin competir con él: peso medio, ancho normal. */
.portada-lema {
  margin: clamp(22px, 2.6vw, 30px) auto 0;
  max-width: 36ch;
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem);
  font-weight: 350;
  font-stretch: 100%;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--sobre-banda-2);
  text-wrap: balance;
}
.portada-sub { margin: 12px auto 0; max-width: 56ch; color: var(--sobre-banda-2); text-wrap: balance; }

.portada-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(24px, 2.8vw, 34px); }
.portada-banda .boton-azul { background: var(--sobre-banda); color: var(--banda); }
.portada-banda .boton-azul:hover { background: #ffffff; }
.portada-banda .boton-borde { background: var(--banda); color: var(--sobre-banda); border-color: rgb(236 238 245 / 0.55); }
.portada-banda .boton-borde:hover { background: #252b4f; border-color: var(--sobre-banda); }

/* Pantallas bajas (laptops): se achica el logo y la letra, pero no el aire. */
@media (min-width: 900px) and (max-height: 800px) {
  .portada-banda { padding-top: 48px; padding-bottom: 72px; }
  .portada-logo { width: min(437px, 100%); }
  .portada-lema { margin-top: 20px; font-size: 1.2rem; }
  .portada-acciones { margin-top: 24px; }
  .guirnalda { margin-top: 26px; }
}

/* Indicador para bajar: invita a seguir leyendo. */
.bajar {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: absolute;
  left: 50%;
  bottom: clamp(10px, 2vh, 22px);
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 8px;
  color: var(--sobre-banda-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.bajar:hover { color: var(--sobre-banda); text-decoration: none; }
/* La flecha avisa 3 veces al cargar y se queda quieta. */
.bajar .i { width: 1.4rem; height: 1.4rem; animation: bajar-flecha 2.2s ease-in-out 3; }
@keyframes bajar-flecha { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Módulos: una fila de adornos dentro de la banda, pegada a los botones. */
.guirnalda { --cuelga: 0px; --bola-tam: 52px; position: relative; width: 100%; max-width: 980px; margin: clamp(28px, 3.4vw, 44px) auto 0; }
.guirnalda ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Bajo los 4 módulos, un enlace discreto al PACK COMPLETO de Contacto */
.guirnalda-pack {
  display: flex;
  width: max-content;
  align-items: center;
  min-height: 44px;
  margin: 6px auto 0;
  padding: 0 6px;
  font-size: 0.9375rem;
  font-weight: 620;
  color: var(--sobre-banda);
  text-decoration: underline;
  text-decoration-color: rgb(236 238 245 / 0.5);
  text-underline-offset: 4px;
}
.guirnalda-pack:hover { text-decoration-color: var(--sobre-banda); }
.adorno {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 2px;
  padding: var(--cuelga) 4px 4px;
  color: var(--sobre-banda);
  text-decoration: none;
  border-radius: 8px;
}
.adorno b { margin-top: 10px; font-size: 0.9375rem; font-weight: 760; letter-spacing: 0.03em; }
.adorno small { color: var(--sobre-banda-2); font-size: 0.8125rem; line-height: 1.35; }
.adorno:hover { text-decoration: none; }
.adorno:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cuerda,
.hilo { display: none; }

/* Ícono de módulo: el mismo dibujo de la pantalla de módulos del
   programa (ui/imagenes.py), con los colores del logo: cuadro azul
   marino y trazo claro, como el ícono de AUTODEV. */
.icono-programa { width: 52px; height: 52px; overflow: visible; }
.icono-programa .cuadro { fill: #252b4f; stroke: rgb(236 238 245 / 0.25); stroke-width: 6; }
.icono-programa .dibujo { fill: none; stroke: #eceef5; stroke-width: 15; stroke-linejoin: round; }
.icono-programa .rueda { fill: #252b4f; }
.icono-programa .esfera { display: none; }

@media (max-width: 560px) {
  .adorno .pre,
  .adorno small { display: none; }
  .adorno b { font-size: 0.8125rem; letter-spacing: 0.02em; }
  .icono-programa { width: 46px; height: 46px; }
  .portada-acciones .boton { width: 100%; }
}

/* ---------- Home: secciones sobre AUTODEV ---------- */

/* Separador entre secciones: una línea fina con un corte al centro donde
   va el triángulo gris del logo. Así cada sección se lee aparte. */
.portada ~ .bloque { position: relative; border-top: 0; padding-block: clamp(60px, 7.5vw, 100px); }
.portada ~ .bloque + .bloque::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(440px, 70%);
  height: 1px;
  transform: translateX(-50%);
  --linea: rgb(137 136 140 / 0.5);
  background: linear-gradient(90deg, transparent 0, var(--linea) 22%, var(--linea) 45%, transparent 45%, transparent 55%, var(--linea) 55%, var(--linea) 78%, transparent 100%);
}
.portada ~ .bloque + .bloque::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 14px;
  height: 11px;
  transform: translate(-50%, -55%);
  background: #89888c;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* La empresa: un solo bloque con dos columnas, como un comprobante.
   - Izquierda: Qué es AUTODEV y, debajo, los campos «Desde» y «Fundador»
     (lo que antes era Nosotros).
   - Derecha: dos casillas, la misión arriba y la visión abajo, separadas por
     un filete. Las casillas se reparten el alto de la columna izquierda.
   Bajo 1000 px todo va en una columna. */
.empresa { display: grid; --entre: clamp(36px, 4vw, 64px); }
.empresa > * { min-width: 0; }
.empresa-cabeza { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.empresa-campos { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--filete-suave); max-width: 48ch; }
.empresa-campos dd:first-of-type { color: var(--tinta); font-weight: 640; }
.empresa-ideas { display: grid; margin-top: clamp(40px, 6vw, 56px); border-top: 1px solid var(--filete); }
.empresa-ideas > div { padding-block: 24px; }
.empresa-ideas > div + div { border-top: 1px solid var(--filete-suave); }
.empresa-etiqueta { font-size: 0.9375rem; font-weight: 640; color: var(--tinta-2); }
.empresa-frase { margin-top: 8px; max-width: 34ch; font-size: clamp(1.2rem, 1rem + 0.55vw, 1.45rem); font-weight: 600; line-height: 1.38; color: var(--tinta); text-wrap: pretty; }
@media (min-width: 1000px) {
  .empresa { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .empresa-quees { padding-right: var(--entre); }
  .empresa-ideas { margin-top: 0; border-top: 0; padding-left: var(--entre); border-left: 1px solid var(--filete-suave); grid-template-rows: 1fr 1fr; }
  .empresa-ideas > div { display: grid; align-content: center; padding-block: 28px; }
}

/* Qué es AUTODEV: el ícono de la marca y una presentación sencilla, sin datos técnicos. */
.quees-logo { width: 64px; height: 64px; flex: none; border-radius: 22%; }
:root[data-theme="dark"] .quees-logo { box-shadow: 0 0 0 1px #2b3152; }
.quees-texto { margin: 20px 0 0; max-width: 48ch; font-size: clamp(1.1rem, 1rem + 0.3vw, 1.25rem); line-height: 1.55; color: var(--tinta); text-wrap: pretty; }
.quees-texto + .quees-texto { margin-top: 12px; color: var(--tinta-2); }

.mision { display: grid; gap: clamp(16px, 2.5vw, 28px); }
.mision .recuadro-titulo { text-align: left; }
.mision-texto { margin-top: 14px; font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem); font-weight: 600; line-height: 1.45; color: var(--tinta); text-wrap: pretty; }

.razones { list-style: none; margin: 24px 0 0; padding: 0; display: grid; border-top: 1px solid var(--filete); }
.razones li { display: grid; align-content: start; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--filete-suave); }
.razones b { font-size: 1.125rem; font-weight: 700; }
.razones span { color: var(--tinta-2); }

.publico { list-style: none; margin: 24px 0 0; padding: 0; display: grid; border-top: 2px solid var(--filete); }
.publico li { display: grid; align-content: start; gap: 6px; padding: 20px 0 22px; border-bottom: 1px solid var(--filete-suave); }
.publico b { font-size: 1.125rem; font-weight: 700; }
.publico span { color: var(--tinta-2); }

.detras { display: grid; justify-items: center; text-align: center; }
.detras .firma { width: min(300px, 80%); margin-top: 22px; }
.detras .firma-clara { display: var(--firma-clara); }
.detras .firma-oscura { display: var(--firma-oscura); }
.detras-texto { margin: 18px auto 0; color: var(--tinta-2); max-width: 52ch; }
.detras .acciones-texto { margin-top: 24px; justify-content: center; }

/* Cierre: una franja azul marino con la invitación final, antes del pie. */
.cierre { background: #191e3a; color: #eceef5; text-align: center; padding: clamp(56px, 7vw, 88px) var(--relleno); }
.cierre h2 { color: #eceef5; }
.cierre p { margin: 12px auto 0; max-width: 46ch; color: #b4bad0; }
.cierre .acciones-texto { justify-content: center; margin-top: 26px; }
.cierre .boton-azul { background: #eceef5; color: #191e3a; }
.cierre .boton-azul:hover { background: #ffffff; }
.cierre .boton-borde { background: #191e3a; color: #eceef5; border-color: rgb(236 238 245 / 0.55); }
.cierre .boton-borde:hover { background: #252b4f; border-color: #eceef5; }

/* Preguntas frecuentes: cada pregunta se abre al tocarla. */
.faq { display: grid; gap: clamp(24px, 4vw, 56px); align-items: start; }
.faq-lado p { margin-top: 10px; max-width: 30ch; color: var(--tinta-2); }
.faq-lado .boton { margin-top: 18px; }
@media (min-width: 900px) {
  .faq { grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.6fr); }
  .faq-lado { position: sticky; top: 110px; }
}
.faq-lista { border-top: 1px solid var(--filete); }
.faq details { border-bottom: 1px solid var(--filete-suave); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding: 18px 0;
  font-size: 1.0625rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.6rem; font-weight: 400; line-height: 1; color: var(--tinta-3); transition: transform 0.2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--azul-tinta); }
.faq details p { margin: -4px 0 20px; max-width: 64ch; color: var(--tinta-2); }

@media (min-width: 760px) {
  .mision { grid-template-columns: 1fr 1fr; }
  .razones { grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 56px); }
  .publico { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .publico li { border-bottom: 0; padding-right: 20px; }
  .publico li + li { border-left: 1px solid var(--filete-suave); padding-left: 20px; }
}

.dos > *,
.anotada > * { min-width: 0; }

/* ---------- Temporada: Navidad ----------
   Se activa con la clase "navidad" en <section class="portada"> de
   index.html. El 7 de enero se borra esa palabra: la banda queda sin
   nieve y los módulos vuelven a una fila de íconos de cuadro.
   - Nevada: muchos copos que caen lento por toda la banda, menos un óvalo
     limpio detrás del logo, la frase y los botones. Los nombres de los
     módulos y "Conoce AUTODEV" llevan un halo azul marino que tapa los
     copos que caen justo detrás de una letra (si no, parecen tildes).
   - La nieve son dos capas (<div class="nieve"> en index.html) que bajan
     con transform, no con background-position: así no se repinta la
     banda en cada cuadro. La lejana va más lenta para dar profundidad.
     Fuera de pantalla se detiene (sitio.js pone data-quieta).
   - Guirnalda: una cuerda fina con los módulos colgando como bolas de
     árbol, cada una de un color. Las bolas se mecen solas; el anillo
     late 2 veces al cargar y, con el mouse encima, la bola se inclina.
   Con movimiento reducido no se mueve nada. */

.portada.navidad .portada-banda { position: relative; isolation: isolate; }
.portada.navidad .portada-banda > * { position: relative; z-index: 1; }
.portada.navidad .portada-banda > .bajar { position: absolute; }
/* Fondo marino de borde suave detrás de los nombres: tapa del todo los copos. */
.portada.navidad .adorno b,
.portada.navidad .adorno small,
.portada.navidad .bajar span {
  background: var(--banda);
  border-radius: 6px;
  box-shadow: 0 0 6px 6px var(--banda);
}
.portada.navidad .portada-logo img,
.portada.navidad .bajar .i {
  filter: drop-shadow(0 0 4px var(--banda)) drop-shadow(0 0 8px var(--banda)) drop-shadow(0 0 12px var(--banda));
}
.nieve { display: none; }
.portada.navidad .portada-banda > .nieve {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Óvalo limpio detrás del logo, la frase y los botones. */
  -webkit-mask-image: radial-gradient(ellipse 32% 36% at 50% 38%, transparent 0 72%, #000 100%);
  mask-image: radial-gradient(ellipse 32% 36% at 50% 38%, transparent 0 72%, #000 100%);
}
@media (max-width: 720px) {
  .portada.navidad .portada-banda > .nieve { -webkit-mask-image: radial-gradient(ellipse 62% 30% at 50% 34%, transparent 0 76%, #000 100%); mask-image: radial-gradient(ellipse 62% 30% at 50% 34%, transparent 0 76%, #000 100%); }
}
.portada.navidad .nieve i { position: absolute; left: 0; right: 0; bottom: 0; background-repeat: repeat; will-change: transform; }
.portada.navidad .nieve-cerca {
  top: -220px;
  background-image:
    radial-gradient(circle at 96px 51px, rgb(236 238 245 / 0.82) 1.6px, transparent 2.4px),
    radial-gradient(circle at 98px 73px, rgb(236 238 245 / 0.95) 2.0px, transparent 2.8px),
    radial-gradient(circle at 8px 54px, rgb(236 238 245 / 0.95) 2.4px, transparent 3.2px),
    radial-gradient(circle at 162px 97px, rgb(236 238 245 / 0.95) 1.6px, transparent 2.4px),
    radial-gradient(circle at 139px 162px, rgb(236 238 245 / 0.95) 1.6px, transparent 2.4px),
    radial-gradient(circle at 57px 9px, rgb(236 238 245 / 0.82) 1.6px, transparent 2.4px),
    radial-gradient(circle at 127px 155px, rgb(236 238 245 / 0.82) 2.0px, transparent 2.8px),
    radial-gradient(circle at 175px 64px, rgb(236 238 245 / 0.95) 2.8px, transparent 3.6px),
    radial-gradient(circle at 178px 165px, rgb(236 238 245 / 0.7) 2.8px, transparent 3.6px),
    radial-gradient(circle at 126px 199px, rgb(236 238 245 / 0.82) 2.0px, transparent 2.8px),
    radial-gradient(circle at 102px 92px, rgb(236 238 245 / 0.82) 2.0px, transparent 2.8px),
    radial-gradient(circle at 150px 54px, rgb(236 238 245 / 0.82) 2.0px, transparent 2.8px),
    radial-gradient(circle at 66px 76px, rgb(236 238 245 / 0.95) 1.6px, transparent 2.4px),
    radial-gradient(circle at 129px 181px, rgb(236 238 245 / 0.82) 2.8px, transparent 3.6px),
    radial-gradient(circle at 62px 96px, rgb(236 238 245 / 0.7) 2.8px, transparent 3.6px),
    radial-gradient(circle at 155px 208px, rgb(236 238 245 / 0.95) 2.8px, transparent 3.6px),
    radial-gradient(circle at 144px 174px, rgb(236 238 245 / 0.95) 2.0px, transparent 2.8px),
    radial-gradient(circle at 30px 21px, rgb(236 238 245 / 0.95) 2.8px, transparent 3.6px),
    radial-gradient(circle at 157px 59px, rgb(236 238 245 / 0.95) 2.4px, transparent 3.2px),
    radial-gradient(circle at 105px 119px, rgb(236 238 245 / 0.7) 2.4px, transparent 3.2px),
    radial-gradient(circle at 142px 207px, rgb(236 238 245 / 0.95) 2.4px, transparent 3.2px),
    radial-gradient(circle at 56px 110px, rgb(236 238 245 / 0.7) 2.8px, transparent 3.6px);
  background-size: 220px 220px;
  animation: nieve-cerca 26s linear infinite;
}
.portada.navidad .nieve-lejos {
  top: -300px;
  background-image:
    radial-gradient(circle at 208px 30px, rgb(236 238 245 / 0.35) 1.6px, transparent 2.4px),
    radial-gradient(circle at 123px 152px, rgb(236 238 245 / 0.35) 1.0px, transparent 1.8px),
    radial-gradient(circle at 294px 271px, rgb(236 238 245 / 0.5) 1.3px, transparent 2.1px),
    radial-gradient(circle at 124px 27px, rgb(236 238 245 / 0.35) 1.6px, transparent 2.4px),
    radial-gradient(circle at 232px 234px, rgb(236 238 245 / 0.35) 1.0px, transparent 1.8px),
    radial-gradient(circle at 198px 176px, rgb(236 238 245 / 0.62) 1.6px, transparent 2.4px),
    radial-gradient(circle at 102px 181px, rgb(236 238 245 / 0.62) 1.6px, transparent 2.4px),
    radial-gradient(circle at 177px 137px, rgb(236 238 245 / 0.35) 1.3px, transparent 2.1px),
    radial-gradient(circle at 262px 112px, rgb(236 238 245 / 0.5) 1.0px, transparent 1.8px),
    radial-gradient(circle at 19px 14px, rgb(236 238 245 / 0.5) 1.6px, transparent 2.4px),
    radial-gradient(circle at 94px 85px, rgb(236 238 245 / 0.35) 1.0px, transparent 1.8px),
    radial-gradient(circle at 135px 275px, rgb(236 238 245 / 0.5) 1.6px, transparent 2.4px),
    radial-gradient(circle at 291px 88px, rgb(236 238 245 / 0.35) 1.3px, transparent 2.1px),
    radial-gradient(circle at 19px 88px, rgb(236 238 245 / 0.5) 1.6px, transparent 2.4px),
    radial-gradient(circle at 220px 29px, rgb(236 238 245 / 0.5) 1.3px, transparent 2.1px),
    radial-gradient(circle at 282px 75px, rgb(236 238 245 / 0.62) 1.6px, transparent 2.4px),
    radial-gradient(circle at 197px 196px, rgb(236 238 245 / 0.35) 1.0px, transparent 1.8px),
    radial-gradient(circle at 17px 162px, rgb(236 238 245 / 0.62) 1.6px, transparent 2.4px),
    radial-gradient(circle at 101px 293px, rgb(236 238 245 / 0.5) 1.0px, transparent 1.8px),
    radial-gradient(circle at 25px 152px, rgb(236 238 245 / 0.35) 1.6px, transparent 2.4px),
    radial-gradient(circle at 202px 151px, rgb(236 238 245 / 0.5) 1.0px, transparent 1.8px),
    radial-gradient(circle at 181px 280px, rgb(236 238 245 / 0.62) 1.3px, transparent 2.1px),
    radial-gradient(circle at 289px 187px, rgb(236 238 245 / 0.35) 1.6px, transparent 2.4px),
    radial-gradient(circle at 206px 131px, rgb(236 238 245 / 0.5) 1.6px, transparent 2.4px),
    radial-gradient(circle at 282px 179px, rgb(236 238 245 / 0.35) 1.6px, transparent 2.4px),
    radial-gradient(circle at 245px 293px, rgb(236 238 245 / 0.5) 1.6px, transparent 2.4px),
    radial-gradient(circle at 105px 278px, rgb(236 238 245 / 0.35) 1.3px, transparent 2.1px),
    radial-gradient(circle at 215px 89px, rgb(236 238 245 / 0.5) 1.0px, transparent 1.8px),
    radial-gradient(circle at 70px 215px, rgb(236 238 245 / 0.62) 1.3px, transparent 2.1px),
    radial-gradient(circle at 238px 214px, rgb(236 238 245 / 0.35) 1.6px, transparent 2.4px);
  background-size: 300px 300px;
  animation: nieve-lejos 86s linear infinite;
}
@keyframes nieve-cerca { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 220px, 0); } }
@keyframes nieve-lejos { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 300px, 0); } }
.portada-banda[data-quieta] .nieve i,
.portada-banda[data-quieta] .icono-programa { animation-play-state: paused; }

/* La guirnalda cuelga casi pegada a los botones: el logo, la frase, los botones
   y los módulos se leen como una sola pieza. */
.portada.navidad .guirnalda { --cuelga: 64px; --bola-tam: 64px; margin-top: clamp(8px, 1vw, 12px); }
/* Anillo alrededor de cada bola: late 2 veces al cargar para mostrar que se
   puede tocar y luego se apaga, para no competir con "Cotizar por WhatsApp". */
.portada.navidad .adorno::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--cuelga) + var(--bola-tam) * 0.578);
  width: calc(var(--bola-tam) * 0.86);
  height: calc(var(--bola-tam) * 0.86);
  border: 2px solid rgb(236 238 245 / 0.75);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  pointer-events: none;
  transition: transform 150ms var(--ease), opacity 150ms var(--ease);
  animation: llamado 2.8s ease-out 2;
}
.portada.navidad .guirnalda li:nth-child(2) .adorno::after { animation-delay: 0.7s; }
.portada.navidad .guirnalda li:nth-child(3) .adorno::after { animation-delay: 1.4s; }
.portada.navidad .guirnalda li:nth-child(4) .adorno::after { animation-delay: 2.1s; }
@keyframes llamado {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.85; }
  70%, 100% { transform: translate(-50%, -50%) scale(1.75); opacity: 0; }
}
.portada.navidad .cuerda { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 80px; overflow: visible; }
.cuerda path { fill: none; stroke: rgb(236 238 245 / 0.45); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.portada.navidad .hilo {
  display: block;
  position: absolute;
  left: 50%;
  top: var(--hilo);
  height: calc(var(--cuelga) - var(--hilo));
  width: 1px;
  background: rgb(236 238 245 / 0.45);
}
.portada.navidad .icono-programa { width: 64px; height: 64px; transform-origin: 50% 0; animation: mecer 7s ease-in-out infinite; }
.portada.navidad .guirnalda li:nth-child(2) .icono-programa { animation-delay: 0.35s; }
.portada.navidad .guirnalda li:nth-child(3) .icono-programa { animation-delay: 0.7s; }
.portada.navidad .guirnalda li:nth-child(4) .icono-programa { animation-delay: 1.05s; }
@keyframes mecer {
  0%, 22%, 100% { transform: rotate(0deg); }
  6% { transform: rotate(7deg); }
  12% { transform: rotate(-5deg); }
  17% { transform: rotate(2deg); }
}
/* Al pasar el mouse (o con el foco del teclado) el vaivén se pausa donde va
   y la bola se inclina un poco. En pantallas táctiles no hay hover. */
.portada.navidad .colgante { transform-box: view-box; transform-origin: 128px 0; transition: transform 220ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .portada.navidad .adorno:hover .icono-programa { animation-play-state: paused; }
  .portada.navidad .adorno:hover .colgante { transform: rotate(-7deg) scale(1.06); }
  .portada.navidad .adorno:hover::after { animation: none; opacity: 0.5; transform: translate(-50%, -50%) scale(1.15); }
}
.portada.navidad .adorno:focus-visible .icono-programa { animation-play-state: paused; }
.portada.navidad .adorno:focus-visible .colgante { transform: rotate(-7deg) scale(1.06); }
.portada.navidad .adorno:focus-visible::after { animation: none; opacity: 0.5; transform: translate(-50%, -50%) scale(1.15); }
.portada.navidad .icono-programa .cuadro { display: none; }
.portada.navidad .icono-programa .esfera { display: inline; }
.portada.navidad .icono-programa .dibujo { transform: translate(57.6px, 77.6px) scale(0.55); }
.icono-programa .gancho { fill: none; stroke: #8a8d96; stroke-width: 7; }
.icono-programa .tapa { fill: #8a8d96; }
.icono-programa .bola { fill: var(--bola, #3d4778); stroke: rgb(236 238 245 / 0.2); stroke-width: 6; }
.icono-programa .brillo { fill: #ffffff; opacity: 0.28; }
.portada.navidad .icono-programa .rueda { fill: var(--bola, #3d4778); }
.guirnalda li:nth-child(1) { --bola: #c62a3a; }
.guirnalda li:nth-child(2) { --bola: #1f7a4d; }
.guirnalda li:nth-child(3) { --bola: #c08a2c; }
.guirnalda li:nth-child(4) { --bola: #3d4778; }

@media (max-width: 560px) {
  /* En el celular los botones van a todo el ancho: la cuerda necesita un poco más de aire. */
  .portada.navidad .guirnalda { --cuelga: 54px; --bola-tam: 50px; margin-top: 16px; }
  .portada.navidad .icono-programa { width: 50px; height: 50px; }
}

/* Pantallas bajas (celular en horizontal): no hay alto para que "Conoce AUTODEV"
   flote al pie de la banda sin tapar los módulos, así que va debajo de ellos. */
/* En pantallas bajas (celular en horizontal, celulares chicos), "Conoce AUTODEV"
   va en el flujo, debajo de "Arma tu pack", para no montarse */
@media (max-height: 700px) {
  .portada-banda > .bajar,
  .portada.navidad .portada-banda > .bajar { position: relative; left: auto; bottom: auto; transform: none; margin-top: 12px; }
}

/* ---------- El recuadro ---------- */

.recuadro {
  border: 2px solid var(--filete);
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--papel);
}
.recuadro-titulo {
  display: grid;
  gap: 2px;
  text-align: center;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  font-weight: 760;
  font-stretch: 108%;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}
.recuadro-titulo .grande { font-size: 1.32em; letter-spacing: 0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: 4px; }
@media (max-width: 400px) {
  .recuadro-titulo .grande { white-space: normal; }
}

.conteo { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--filete); display: grid; gap: 14px; }
.conteo li { display: grid; grid-template-columns: 3.5rem 1fr 6.4rem; align-items: center; gap: 14px; font-weight: 700; font-size: 1.125rem; }
/* Filas con nombres más largos (GUIAS, RHE, VALIDADOR): "PDF y XML", "Registros" */
.conteo.etiquetas-largas li { grid-template-columns: 6.4rem 1fr 6.4rem; }
@media (max-width: 400px) {
  .conteo li { grid-template-columns: 2.9rem 1fr 5.6rem; gap: 10px; font-size: 1rem; }
  .recuadro-estado .cifra { font-size: 1.15em; }
  .conteo.etiquetas-largas li { grid-template-columns: 5.4rem 1fr 5.2rem; }
}
.conteo .linea { position: relative; height: 3px; background: var(--filete-suave); overflow: hidden; }
.conteo .linea::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--azul);
  transform-origin: left center;
  transform: scaleX(var(--avance, 1));
}
.conteo .cifra { text-align: right; }

.recuadro-estado {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--filete);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  font-weight: 700;
}
.recuadro-estado .paso,
.recuadro-estado .listo { grid-area: 1 / 1; }
/* Mientras cuenta, el tiempo está oculto: el texto del paso usa todo el ancho */
.recuadro[data-estado="descargando"] .recuadro-estado .paso { grid-column: 1 / -1; }
.recuadro-estado .cifra { grid-area: 1 / 2; align-self: center; color: var(--azul-tinta); white-space: nowrap; font-size: 1.35em; font-weight: 760; font-stretch: 108%; line-height: 1.1; }
.recuadro[data-estado="descargando"] .recuadro-estado .listo,
.recuadro[data-estado="descargando"] .recuadro-estado .cifra { visibility: hidden; }
/* Al terminar, el texto del paso sale del todo; el alto lo reserva sitio.js */
.recuadro:not([data-estado="descargando"]) .recuadro-estado .paso { display: none; }

.nota-recuadro { margin-top: 12px; font-size: 0.9375rem; color: var(--tinta-3); }

.recuadro.modulo .recuadro-titulo { gap: 4px; }
.recuadro.modulo .incluido { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--filete); text-align: center; font-size: 0.9375rem; color: var(--tinta-2); }

/* ---------- Tabla de detalle ---------- */

.detalle { width: 100%; border-collapse: collapse; font-size: 1rem; }
.detalle caption { caption-side: bottom; text-align: left; padding-top: 12px; font-size: 0.9375rem; color: var(--tinta-3); }
.detalle th {
  background: var(--azul);
  color: var(--sobre-azul);
  text-align: left;
  font-weight: 660;
  font-stretch: 104%;
  padding: 12px 16px;
  border: 1px solid var(--azul);
}
.detalle td { border: 1px solid var(--filete); padding: 16px; vertical-align: top; color: var(--tinta-2); }
.detalle td:first-child { width: 3.5rem; text-align: center; font-variant-numeric: tabular-nums; color: var(--tinta); }
.detalle .mod { color: var(--tinta); font-weight: 680; white-space: nowrap; }
.detalle .mod a { color: var(--tinta); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -12px 0; }
.detalle .mod a:hover { color: var(--azul-tinta); text-decoration: underline; }
.detalle .mod a .i { color: var(--azul-tinta); width: 1em; height: 1em; }
.detalle .formatos { white-space: nowrap; color: var(--tinta); }
.detalle tr.destacada td { background: var(--resalte); }
.bloque > h2 + .detalle { margin-top: clamp(14px, 2vw, 26px); }
.detalle strong { color: var(--tinta); font-weight: 650; }

@media (max-width: 720px) {
  .detalle,
  .detalle tbody,
  .detalle tr,
  .detalle td { display: block; width: 100%; }
  .detalle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .detalle tr { border: 1px solid var(--filete); margin-top: -1px; padding: 12px 16px; }
  .detalle td { border: 0; padding: 4px 0; }
  .detalle td:first-child { width: auto; text-align: left; color: var(--tinta-2); }
  .detalle td[data-titulo]::before { content: attr(data-titulo) ": "; font-weight: 640; color: var(--tinta); }
  .detalle .mod,
  .detalle .formatos { white-space: normal; }
  /* El fondo de la fila destacada va en la fila entera, no en cada celda */
  .detalle tr.destacada { background: var(--resalte); }
  .detalle tr.destacada td { background: none; }
  /* La leyenda va debajo y a todo el ancho */
  .detalle { display: flex; flex-direction: column; }
  .detalle caption { display: block; order: 1; }
  /* El N° y el nombre comparten la primera línea de cada fila */
  .detalle tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; }
  .detalle td { grid-column: 1 / -1; }
  .detalle td:first-child { grid-column: 1; }
  .detalle td:first-child + td { grid-column: 2; }
}

.estado {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 680;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.estado.ok { background: var(--ok-fondo); color: var(--ok); }
.estado.alerta { background: var(--alerta-fondo); color: var(--alerta); }
.estado.error { background: var(--error-fondo); color: var(--error); }
.estados { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* ---------- Pasos ---------- */

.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 3vw, 40px); }
.paso { display: grid; align-content: start; gap: 10px; }
.paso-linea { height: 3px; background: var(--filete-suave); position: relative; margin-bottom: 8px; }
.paso-linea::after { content: ""; position: absolute; inset: 0; background: var(--azul); transform-origin: left; transform: scaleX(var(--avance)); }
.paso-num { font-weight: 700; color: var(--azul-tinta); font-variant-numeric: tabular-nums; }
.paso p { color: var(--tinta-2); max-width: 40ch; }
.paso .marco { margin-top: 10px; }

/* Aviso de las claves: una línea con el candado, debajo de la ventana del paso 1 */
.clave { margin-top: 2px; display: flex; align-items: center; gap: 8px; color: var(--tinta); font-weight: 600; font-size: 0.9375rem; }
.clave .i { width: 1.15rem; height: 1.15rem; flex: none; color: var(--azul-tinta); }
/* Tres pasos del MÓDULO SIRE: entra en una pantalla de laptop (1280×720) sin deslizar */
.bloque-pasos { padding-block: clamp(32px, 4vw, 48px); }
.bloque-pasos .entrada { margin-bottom: clamp(18px, 2.4vw, 26px); }
.bloque-pasos .paso { gap: 8px; }
.bloque-pasos .paso-linea { margin-bottom: 4px; }
.bloque-pasos .paso .marco { margin-top: 6px; }
.bloque-pasos .v-lista li { padding: 6px 0; }
.bloque-pasos .clave { font-size: 0.875rem; }
/* En pantallas anchas, la frase de entrada va al lado del título */
@media (min-width: 1000px) {
  .bloque-pasos { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(32px, 4vw, 64px); align-items: end; }
  .bloque-pasos > h2 { margin-bottom: 0; }
  .bloque-pasos > .entrada { margin: 0; max-width: 44ch; padding-bottom: 4px; }
  .bloque-pasos > .pasos { grid-column: 1 / -1; margin-top: clamp(22px, 2.4vw, 30px); }
}

@media (min-width: 900px) {
  .pasos { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Capturas ---------- */

.marco { border: 1px solid var(--filete); background: var(--papel); }
.marco img,
.marco video { width: 100%; filter: var(--img-filtro); }
.excel-trae { margin-top: 16px; max-width: 60ch; color: var(--tinta-2); }
.entrada:has(+ .excel-trae) { margin-bottom: 0; }
.pie-foto { margin-top: 10px; font-size: 0.9375rem; color: var(--tinta-3); }

.demo { margin: 0 var(--relleno) clamp(40px, 5vw, 64px); }
.demo .marco { max-width: 897px; }

/* Capturas anotadas */
.anotada { position: relative; display: grid; gap: 18px; }
.anotada .notas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: nota; }
.anotada .notas li { display: grid; grid-template-columns: 1.75rem 1fr; gap: 10px; align-items: start; font-weight: 600; }
.anotada .notas li::before {
  counter-increment: nota;
  content: counter(nota);
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1.5px solid var(--azul);
  color: var(--azul-tinta);
  font-size: 0.875rem;
  font-weight: 760;
  border-radius: 50%;
}
.anotada .imagen { position: relative; max-width: 560px; }
.anotada .marca-nota {
  position: absolute;
  left: var(--x);
  top: var(--y);
  height: var(--alto, 0);
  border-left: 2px solid var(--azul);
}
.anotada .marca-nota span {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--azul);
  color: var(--sobre-azul);
  font-size: 0.875rem;
  font-weight: 760;
}

@media (min-width: 900px) {
  .anotada { grid-template-columns: minmax(0, 620px) minmax(220px, 1fr); align-items: center; gap: 40px; }
}

/* ---------- Ilustraciones del programa ----------
   En lugar de capturas: las pantallas del programa dibujadas con la letra
   y las tintas de la web. Datos de ejemplo (EMPRESA 1, RUC con solo los 3
   últimos dígitos). La barra de arriba es azul marino, como el logo. */

.ventana { background: var(--papel); color: var(--tinta); font-size: 0.875rem; line-height: 1.35; overflow: hidden; }
.ventana-barra {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #191e3a;
  color: #eceef5;
  padding: 8px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.ventana-barra img { width: 16px; height: 16px; border-radius: 4px; }
.ventana-barra .lugar { min-width: 0; margin-left: auto; color: #b4bad0; font-weight: 500; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ventana-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; }
/* Nombres de archivo largos: se cortan con puntos suspensivos, como en el explorador. */
.ventana .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ventana-titulo { font-size: 1.0625rem; font-weight: 760; font-stretch: 108%; }
.ventana-nota { color: var(--tinta-3); font-size: 0.8125rem; }
.v-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.v-boton { background: var(--azul); color: var(--sobre-azul); border-radius: 4px; padding: 5px 10px; font-size: 0.8125rem; font-weight: 660; white-space: nowrap; }
.v-icono { width: 16px; height: 16px; flex: none; }

/* Paso 1: lista de empresas */
.v-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filete-suave); }
.v-lista li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--filete-suave); }
.v-lista b { font-weight: 700; }
.v-lista .ruc { grid-column: 1; color: var(--tinta-3); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.v-lista .estado { grid-row: span 2; grid-column: 2; font-size: 0.75rem; }

/* Paso 2: campos */
.v-campos { grid-template-columns: 1fr auto; gap: 12px 14px; }
.v-campos .ancho { grid-column: 1 / -1; }
.v-vacio { color: var(--tinta-3); }
.v-fechas { grid-template-columns: 1fr 1fr; }
.v-etiqueta { display: block; margin-bottom: 5px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; color: var(--tinta-3); }
.v-campo { display: block; border: 1px solid var(--filete-suave); border-radius: 4px; padding: 7px 10px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-segmento { display: inline-flex; padding: 3px; gap: 2px; border-radius: 8px; background: var(--resalte); }
.v-segmento span { padding: 4px 10px; border-radius: 4px; font-weight: 640; color: var(--tinta-3); }
.v-segmento .activo { background: var(--azul); color: var(--sobre-azul); }

/* Paso 3: botones del programa y avance de Descarga Completa */
.v-botones { display: flex; flex-wrap: wrap; gap: 6px; }
.v-botones span { border: 1px solid var(--filete); border-radius: 4px; padding: 4px 9px; font-size: 0.8125rem; font-weight: 640; color: var(--tinta-2); white-space: nowrap; }
.v-botones .activo { background: var(--azul); border-color: var(--azul); color: var(--sobre-azul); }
.v-avance { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; font-weight: 700; }
.v-avance .linea { grid-column: 1 / -1; position: relative; height: 3px; background: var(--filete-suave); overflow: hidden; }
.v-avance .linea::after { content: ""; position: absolute; inset: 0; background: var(--azul); transform-origin: left center; transform: scaleX(var(--avance, 1)); }
.v-archivos { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--filete-suave); color: var(--tinta-2); font-size: 0.8125rem; }
.v-archivos > span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.v-archivos .v-icono { color: var(--ok); width: 14px; height: 14px; }

/* Carpeta con notas 1 y 2 */
.v-carpeta { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; padding: 4px 14px 8px 4px; gap: 0; }
.v-carpeta > span { display: flex; align-items: center; gap: 8px; min-height: 34px; border-bottom: 1px solid var(--filete-suave); white-space: nowrap; }
.v-carpeta .nombre { grid-column: 2; min-width: 0; }
.v-carpeta .fecha { grid-column: 3; justify-content: flex-end; padding-left: 14px; color: var(--tinta-3); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.v-carpeta .cab { color: var(--tinta-3); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; min-height: 30px; }
.v-carpeta .carpeta-icono { color: var(--tinta-2); }
.v-carpeta .hoja-icono { color: var(--azul-tinta); }
.v-nota { grid-column: 1; position: relative; font-style: normal; margin: 6px 0; justify-self: center; width: 2px; background: var(--azul); }
.v-nota b { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--azul); color: var(--sobre-azul); font-size: 0.8125rem; font-weight: 760; }

.anotada .imagen { min-width: 0; }
@media (max-width: 560px) {
  .v-carpeta .fecha { display: none; }
  .v-carpeta { padding-right: 10px; }
}

/* Excel detallado: la propuesta de SUNAT y, resaltado, lo que agrega AUTODEV.
   Columnas con sus nombres reales; datos ficticios. En pantallas angostas la
   hoja se desplaza hacia los lados dentro de su ventana, como en Excel. */
.excel { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: clamp(20px, 2.5vw, 28px); }
.excel > * { min-width: 0; }
.excel-texto .entrada { margin-top: 10px; }
.v-hoja { overflow-x: auto; overscroll-behavior-x: contain; }
.v-hoja:focus-visible { outline-offset: -3px; }
.v-hoja table { width: 100%; min-width: 1080px; border-collapse: collapse; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.v-hoja th,
.v-hoja td { border: 1px solid var(--filete-suave); padding: 7px 9px; text-align: left; white-space: nowrap; }
.v-hoja thead th { font-size: 0.75rem; font-weight: 700; color: var(--tinta-2); white-space: normal; vertical-align: bottom; }
.v-hoja .grupos th { font-size: 0.8125rem; color: var(--tinta-3); }
.v-hoja .grupos .autodev { background: var(--azul); border-color: var(--azul); color: var(--sobre-azul); }
.v-hoja .agrega { background: var(--resalte); color: var(--tinta); }
.v-hoja thead .agrega { color: var(--azul-tinta); }
.v-hoja .corte { border-left: 2px solid var(--azul); }
.v-hoja .num { text-align: right; }
/* En pantallas donde la hoja no entra, un aviso para deslizarla */
.hoja-aviso { display: none; margin-top: 10px; font-size: 0.875rem; font-weight: 600; color: var(--tinta-2); }
@media (max-width: 1023px) {
  .hoja-aviso { display: block; }
}
.v-hoja .estado { font-size: 0.75rem; }
/* Sin palabras sueltas al final de los textos cortos */
.bloque .entrada,
.lista-datos dd,
.anotada .notas li,
.pie-foto,
.excel-trae { text-wrap: pretty; }
/* Solo en las hojas que resaltan lo que se agrega (SIRE y VALIDADOR), lo demás va apagado */
.v-hoja:has(.agrega) tbody td:not(.agrega) { color: var(--tinta-3); }

/* ---------- Dos columnas ---------- */

.dos { display: grid; gap: clamp(32px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) {
  .dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dos.ancho-izq { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .dos.ancho-der { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
}

.lista-datos { margin: 0; display: grid; gap: 22px; }
.lista-datos dt { font-weight: 700; font-size: 1.125rem; }
.lista-datos dd { margin: 4px 0 0; color: var(--tinta-2); max-width: 46ch; }

/* ---------- Observaciones (antes de cotizar) ---------- */

.observaciones { margin: 0; border-top: 1px solid var(--filete); }
.observaciones div { padding: 18px 0; border-bottom: 1px solid var(--filete-suave); }
.observaciones dt { display: grid; grid-template-columns: 1.5rem 1fr; gap: 14px; font-weight: 700; }
.observaciones dd { margin: 6px 0 0 calc(1.5rem + 14px); color: var(--tinta-2); }
.observaciones .i { width: 1.5rem; height: 1.5rem; color: var(--azul-tinta); margin-top: 1px; }

/* ---------- Totales ---------- */

.totales { border: 2px solid var(--filete); padding: clamp(22px, 3vw, 32px); }
.totales h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); margin-bottom: 18px; }
.totales dl { margin: 0; display: grid; grid-template-columns: 1fr auto; }
.totales dt,
.totales dd { padding: 10px 0; border-bottom: 1px solid var(--filete-suave); margin: 0; }
.totales dt { color: var(--tinta-2); padding-right: 16px; }
.totales dd { text-align: right; font-weight: 680; font-variant-numeric: tabular-nums; }
.totales .importe { border-top: 3px double var(--filete); border-bottom: 0; padding-top: 14px; font-size: 1.25rem; font-weight: 760; color: var(--tinta); }
.totales .botones { display: grid; gap: 10px; margin-top: 22px; }
.totales .botones .boton { width: 100%; white-space: normal; text-align: center; }

/* ---------- Formulario ---------- */

.formulario { border: 2px solid var(--filete); }
.formulario-titulo { background: var(--azul); color: var(--sobre-azul); padding: 12px 20px; font-weight: 700; font-stretch: 104%; }
.formulario-cuerpo { display: grid; gap: 22px; padding: clamp(20px, 3vw, 32px); }
.campo { display: grid; gap: 8px; }
.campo label,
.campo legend { font-weight: 660; padding: 0; }
.campo .opcional { color: var(--tinta-3); font-weight: 450; }
.campo input[type="text"],
.campo select,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  font: inherit;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--filete);
  border-radius: 8px;
}
.campo textarea { min-height: 100px; resize: vertical; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus { outline: 2px solid var(--azul); outline-offset: 1px; }
.campo input[aria-invalid="true"] { border-color: var(--error); }
.campo .error { color: var(--error); font-size: 0.9375rem; }
fieldset.campo { border: 0; margin: 0; padding: 0; }
/* El formulario se acomoda a su propio ancho, no al de la pantalla */
.formulario { container-type: inline-size; }
.campo ::placeholder { color: var(--tinta-3); opacity: 1; }
fieldset.campo legend { margin-bottom: 8px; }
/* Opciones: tarjetas con su explicación (".campo .opcion" pesa más que ".campo label") */
.opciones { display: grid; gap: 10px; }
@container (min-width: 420px) {
  .opciones { grid-template-columns: 1fr 1fr; }
}
.campo .opcion {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-content: start;
  gap: 4px 10px;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--filete);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 660;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
}
.campo .opcion input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--azul); }
.campo .opcion small { grid-column: 2; font-size: 0.875rem; font-weight: 450; line-height: 1.35; color: var(--tinta-2); }
.campo .opcion:has(input:checked) { border-color: var(--azul); background: var(--resalte); box-shadow: inset 0 0 0 1px var(--azul); }
.campo .opcion:has(input:focus-visible),
.campo .chip:has(input:focus-visible) { outline: 2px solid var(--azul); outline-offset: 2px; }
.campo .opcion input:focus-visible,
.campo .chip input:focus-visible { outline: none; }
/* Módulos: casillas como etiquetas */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.campo .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--filete);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 640;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
}
.campo .chip input { width: 16px; height: 16px; margin: 0; accent-color: var(--azul); }
.campo .chip:has(input:checked) { border-color: var(--azul); background: var(--resalte); }
@media (hover: hover) and (pointer: fine) {
  .campo .opcion:hover,
  .campo .chip:hover { border-color: var(--azul); }
}
.contacto-campos { margin-top: clamp(24px, 3vw, 36px); max-width: 58ch; }
/* Contacto: el formulario entero entra en una pantalla de laptop (1280×720) */
.inicio-contacto { padding-top: clamp(24px, 3vw, 36px); padding-bottom: clamp(32px, 4vw, 48px); }
@media (min-width: 980px) {
  .inicio-contacto { grid-template-columns: minmax(0, 1fr) minmax(440px, 500px); }
}
.inicio-contacto .formulario-titulo { padding: 10px 20px; }
.inicio-contacto .formulario-cuerpo { gap: 14px; padding: 18px 24px 16px; }
.inicio-contacto .campo { gap: 6px; }
.inicio-contacto .campo input[type="text"] { min-height: 44px; padding: 9px 12px; }
.inicio-contacto .campo textarea { min-height: 68px; padding: 9px 12px; }
.inicio-contacto .campo .opcion { padding: 10px 12px; }
.inicio-contacto fieldset.campo legend { margin-bottom: 6px; }
.inicio-contacto .ayuda { margin-top: -4px; font-size: 0.875rem; }
/* "Qué pasa después": tres pasos reales, a la izquierda del formulario */
.despues { margin-top: clamp(22px, 2.6vw, 30px); max-width: 52ch; }
.despues-titulo { font-size: 1.25rem; }
.despues-lista { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--filete); counter-reset: despues; }
.despues-lista li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0 14px; padding: 10px 0; border-bottom: 1px solid var(--filete-suave); counter-increment: despues; }
.despues-lista li::before { content: counter(despues); grid-row: 1 / 3; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1.5px solid var(--azul-tinta); border-radius: 50%; font-size: 0.9375rem; font-weight: 700; color: var(--azul-tinta); font-variant-numeric: tabular-nums; }
.despues-lista b { font-weight: 700; }
.despues-lista span { color: var(--tinta-2); text-wrap: pretty; }
/* PACK COMPLETO y arma tu pack (Contacto): el cuadro de la licencia con una
   línea por módulo, cada una con su casilla, como el detalle de un comprobante */
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pack-campos { margin-top: clamp(22px, 2.6vw, 30px); max-width: 52ch; }
.pack-modulos { margin: 16px 0 0; padding: 0; border: 0; border-top: 1px solid var(--filete); min-width: 0; }
.pack-linea {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
  min-height: 48px;
  padding: 10px 0;
  cursor: pointer;
}
.pack-linea + .pack-linea { border-top: 1px solid var(--filete-suave); }
.pack-linea input { grid-row: 1 / 3; width: 18px; height: 18px; margin: 0; accent-color: var(--azul); }
.pack-nombre { grid-column: 2; font-weight: 700; }
.pack-desc { grid-column: 2; font-size: 0.875rem; color: var(--tinta-2); }
.pack-marca { grid-column: 3; grid-row: 1 / 3; font-size: 0.875rem; font-weight: 700; color: var(--azul-tinta); }
.pack-marca::before { content: "Incluido"; }
.pack-linea:not(:has(input:checked)) .pack-marca::before { content: "—"; color: var(--tinta-3); }
.pack-linea:not(:has(input:checked)) .pack-nombre { color: var(--tinta-3); }
.pack-linea:has(input:focus-visible) { outline: 2px solid var(--azul); outline-offset: 2px; }
.pack-linea input:focus-visible { outline: none; }
.pack-cuadro { container-type: inline-size; padding: 22px 26px; }
.pack-cuadro .licencia-total { margin-top: 0; }
@container (min-width: 420px) {
  .pack-linea { grid-template-columns: 18px auto minmax(0, 1fr) auto; min-height: 46px; padding: 8px 0; gap: 12px; }
  .pack-linea input { grid-row: auto; }
  .pack-nombre { grid-column: 2; }
  .pack-desc { grid-column: 3; }
  .pack-marca { grid-column: 4; grid-row: auto; }
}
.pack-resumen { margin-top: 12px; font-size: 0.9375rem; color: var(--tinta-2); text-wrap: pretty; }
.pack-enviar { width: 100%; margin-top: 16px; }
.pack-enviar[aria-disabled] { opacity: 0.55; cursor: not-allowed; }
.pack-todos { display: block; margin: 10px auto 0; min-height: 44px; background: none; border: 0; font: inherit; font-weight: 620; color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pack-todos[hidden] { display: none; }
.formulario .boton { width: 100%; }
.ayuda { font-size: 0.9375rem; color: var(--tinta-3); text-align: center; }

/* ---------- Cierre de módulo ---------- */

.cierre-modulo { display: grid; gap: 24px; align-items: center; }
/* Cierre de las páginas de módulo: a la derecha, el resumen de la licencia como el pie de
   un comprobante (líneas, raya doble y el precio al final). Cierra la página con
   el mismo recuadro que la prueba real del inicio. */
.cierre-licencia { display: grid; gap: 28px; grid-template-areas: "texto" "licencia" "acciones"; }
.cierre-licencia > * { min-width: 0; }
.cierre-licencia-texto { grid-area: texto; }
.cierre-licencia-texto .entrada { margin: 14px 0 0; max-width: 46ch; }
.cierre-licencia .licencia { grid-area: licencia; }
.cierre-licencia-acciones { grid-area: acciones; }
.cierre-licencia .botones { display: flex; flex-wrap: wrap; gap: 12px; }
.cierre-licencia .otros { margin-top: 10px; font-size: 0.9375rem; }
.cierre-licencia .otros a { margin-right: 10px; }
.licencia-lineas { margin: 20px 0 0; border-top: 1px solid var(--filete); }
.licencia-lineas div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 10px 0; }
.licencia-lineas div + div { border-top: 1px solid var(--filete-suave); }
.licencia-lineas dt { color: var(--tinta-2); }
.licencia-lineas dd { margin: 0; text-align: right; font-weight: 650; color: var(--tinta); }
.licencia-total { margin-top: 4px; padding-top: 14px; border-top: 3px double var(--filete); display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-weight: 760; }
.licencia-total span:last-child { text-align: right; color: var(--azul-tinta); }
@media (min-width: 900px) {
  .cierre-licencia {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
    grid-template-areas: "texto licencia" "acciones licencia";
    column-gap: clamp(40px, 6vw, 96px);
    align-items: start;
  }
  .cierre-licencia-acciones { align-self: end; }
}
.cierre-modulo .botones { display: flex; flex-wrap: wrap; gap: 12px; }
.otros { margin-top: 6px; color: var(--tinta-2); }
.otros a { font-weight: 620; margin-right: 14px; display: inline-block; padding: 10px 0; }
@media (min-width: 900px) {
  .cierre-modulo { grid-template-columns: 1fr auto; }
}

/* ---------- Pie ---------- */

.pie { border-top: 3px double var(--filete); padding: clamp(32px, 4vw, 48px) var(--relleno) 24px; }
.pie-rejilla { display: grid; gap: 32px; }
.pie .firma { width: 230px; }
.pie .firma-clara { display: var(--firma-clara); }
.pie .firma-oscura { display: var(--firma-oscura); }
.pie p { color: var(--tinta-2); margin-top: 14px; max-width: 38ch; }
.pie .pie-titulo { margin: 0 0 6px; font-weight: 700; color: var(--tinta); }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie ul a { display: inline-block; padding: 10px 0; color: var(--tinta); text-decoration: none; }
.pie ul a:hover { text-decoration: underline; }
.pie .pie-final { max-width: none; text-align: center; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--filete-suave); color: var(--tinta-3); font-size: 0.9375rem; }

@media (min-width: 820px) {
  .pie-rejilla { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}

/* ---------- Página 404 ---------- */

.no-existe { padding: clamp(56px, 9vw, 120px) var(--relleno); }
.no-existe p { margin: 16px 0 28px; color: var(--tinta-2); }

/* ---------- Movimiento: el programa trabajando ----------
   Lo que es el programa (las ventanas dibujadas, las tablas de control y los
   pasos) se mueve como el programa: al entrar en pantalla sus filas cargan una
   tras otra, las barras de avance se llenan y, en el Excel, las columnas que
   agrega AUTODEV se resaltan al final. El texto se queda quieto.
   sitio.js pone .por-ver solo en lo que está debajo de la pantalla al cargar,
   y .en-vista cuando aparece. Sin JS o con movimiento reducido todo se ve
   desde el inicio. */
:root { --ease-salida: cubic-bezier(0.23, 1, 0.32, 1); }

.por-ver :is(.v-cabeza, .v-lista li, .v-carpeta > span, .v-botones > span, .v-campos > div, .v-archivos > span, .v-avance, .v-pestanas, .ventana-nota) {
  transition: opacity 420ms var(--ease-salida), transform 520ms var(--ease-salida);
  transition-delay: calc(var(--i, 0) * 45ms + 120ms);
}
.por-ver tbody tr { transition: opacity 380ms var(--ease-salida); transition-delay: calc(var(--i, 0) * 55ms + 120ms); }
.por-ver:not(.en-vista) :is(.v-cabeza, .v-lista li, .v-carpeta > span, .v-botones > span, .v-campos > div, .v-archivos > span, .v-avance, .v-pestanas, .ventana-nota) { opacity: 0; transform: translateY(6px); }
.por-ver:not(.en-vista) tbody tr { opacity: 0; }

/* Las barras de avance y las líneas de los pasos se llenan hasta su valor */
.por-ver :is(.v-avance .linea, .paso-linea)::after { transition: transform 1000ms var(--ease-salida); transition-delay: calc(var(--i, 0) * 200ms + 300ms); }
.por-ver:not(.en-vista) :is(.v-avance .linea, .paso-linea)::after { transform: scaleX(0); }

/* En el Excel, lo que agrega AUTODEV (o el VALIDADOR) se resalta al final */
.por-ver .v-hoja :is(.agrega, .grupos .autodev) { transition: background-color 700ms ease 650ms, color 700ms ease 650ms, border-color 700ms ease 650ms; }
.por-ver:not(.en-vista) .v-hoja .agrega { background-color: transparent; }
.por-ver:not(.en-vista) .v-hoja .grupos .autodev { background-color: transparent; border-color: var(--filete-suave); color: var(--tinta-3); }

/* En la carpeta, las marcas 1 y 2 bajan después de las filas */
.por-ver .v-nota { transform-origin: top; transition: transform 500ms var(--ease-salida) 500ms; }
.por-ver .v-nota b { transition: scale 300ms var(--ease-salida) 950ms, opacity 200ms ease 950ms; }
.por-ver:not(.en-vista) .v-nota { transform: scaleY(0); }
.por-ver:not(.en-vista) .v-nota b { scale: 0.6; opacity: 0; }

.quieto,
.quieto *,
.quieto *::after { transition: none !important; }
@media print {
  .por-ver * { opacity: 1 !important; transform: none !important; }
}

/* Al pasar el mouse: la fila se marca, como al recorrer una tabla o un Excel */
.pack-linea { margin-inline: -10px; padding-inline: 10px; }
.v-lista li { margin-inline: -8px; padding-inline: 8px; }
@media (hover: hover) and (pointer: fine) {
  .detalle tbody td,
  .v-hoja tbody td,
  .v-lista li,
  .pack-linea { transition: background-color 150ms ease, color 150ms ease; }
  .detalle tbody tr:hover td,
  .v-hoja tbody tr:hover td,
  .v-lista li:hover,
  .pack-linea:hover { background-color: color-mix(in srgb, var(--resalte) 62%, var(--filete-suave)); }
  .v-hoja tbody tr:hover td { color: var(--tinta); }
  .v-hoja tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--azul); }
  .submenu a strong { transition: transform 200ms var(--ease-salida); }
  .submenu a:hover strong { transform: translateX(3px); }
  .pie ul a { transition: color 150ms ease; }
  .pie ul a:hover { color: var(--azul-tinta); }
}
.campo .opcion:active,
.campo .chip:active { transform: scale(0.985); }
.campo .opcion,
.campo .chip { transition: border-color 150ms var(--ease), background-color 150ms var(--ease), transform 120ms var(--ease); }

/* El ícono del tema gira al cambiar */
.boton-icono.gira .i { animation: gira-tema 380ms var(--ease-salida); }
@keyframes gira-tema { from { transform: rotate(-90deg) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* Las preguntas frecuentes se abren y cierran suave (navegadores que lo permiten) */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    .faq-lista { interpolate-size: allow-keywords; }
    .faq details::details-content { block-size: 0; overflow-y: clip; transition: block-size 300ms var(--ease-salida), content-visibility 300ms allow-discrete; }
    .faq details[open]::details-content { block-size: auto; }
  }
}


/* ---------- Más movimiento (2026-11-11) ---------- */

/* Títulos: suben desde una línea, como texto que se escribe en su renglón */
h2.por-ver { transition: clip-path 760ms var(--ease-salida), transform 760ms var(--ease-salida); }
h2.por-ver:not(.en-vista) { clip-path: inset(-20% -2% 100% -2%); transform: translateY(0.35em); }
/* Párrafos de entrada: llegan justo después del título */
:is(.entrada, .excel-trae).por-ver { transition: opacity 600ms ease 140ms, transform 700ms var(--ease-salida) 140ms; }
:is(.entrada, .excel-trae).por-ver:not(.en-vista) { opacity: 0; transform: translateY(10px); }
/* Listas: sus puntos entran en orden */
.por-ver:is(.razones, .lista-datos, .faq-lista, .notas, .campos, .empresa-ideas, .despues-lista) > * {
  transition: opacity 460ms var(--ease-salida), transform 560ms var(--ease-salida);
  transition-delay: calc(var(--i, 0) * 70ms + 100ms);
}
.por-ver:not(.en-vista):is(.razones, .lista-datos, .faq-lista, .notas, .campos, .empresa-ideas, .despues-lista) > * { opacity: 0; transform: translateY(10px); }
/* Recuadros (licencia, pack): se imprimen de arriba abajo, como un comprobante */
.recuadro.por-ver { transition: clip-path 900ms var(--ease-salida); }
.recuadro.por-ver:not(.en-vista) { clip-path: inset(0 0 100% 0); }

@media (prefers-reduced-motion: no-preference) {
  /* Al abrir una página de módulo o Contacto: el título sube, los campos entran
     en orden y el recuadro de la derecha se imprime */
  .js .inicio h1 { animation: titulo-sube 820ms var(--ease-salida) backwards; }
  .js .inicio > div > .entrada,
  .js .inicio .campos > *,
  .js .inicio .acciones-texto,
  .js .inicio .despues { animation: fila-sube 560ms var(--ease-salida) backwards; }
  .js .inicio > div > .entrada { animation-delay: 160ms; }
  .js .inicio .campos > :nth-child(1) { animation-delay: 260ms; }
  .js .inicio .campos > :nth-child(2) { animation-delay: 260ms; }
  .js .inicio .campos > :nth-child(3) { animation-delay: 320ms; }
  .js .inicio .campos > :nth-child(4) { animation-delay: 320ms; }
  .js .inicio .campos > :nth-child(5) { animation-delay: 380ms; }
  .js .inicio .campos > :nth-child(6) { animation-delay: 380ms; }
  .js .inicio .campos > :nth-child(7) { animation-delay: 440ms; }
  .js .inicio .campos > :nth-child(8) { animation-delay: 440ms; }
  .js .inicio .campos > :nth-child(9) { animation-delay: 500ms; }
  .js .inicio .campos > :nth-child(10) { animation-delay: 500ms; }
  .js .inicio .campos > :nth-child(11) { animation-delay: 560ms; }
  .js .inicio .campos > :nth-child(12) { animation-delay: 560ms; }
  .js .inicio .campos > :nth-child(13) { animation-delay: 620ms; }
  .js .inicio .campos > :nth-child(14) { animation-delay: 620ms; }
  .js .inicio .acciones-texto { animation-delay: 620ms; }
  .js .inicio .despues { animation-delay: 520ms; }
  .js .inicio-lado,
  .js .inicio-contacto .formulario { animation: imprime 900ms var(--ease-salida) 220ms backwards; }

  /* Al abrir el home: el logo aparece, la cuerda se dibuja y las bolas caen */
  .js .portada-logo { animation: aparece 900ms var(--ease-salida) backwards; }
  .js .portada-lema { animation: fila-sube 700ms var(--ease-salida) 180ms backwards; }
  .js .portada-acciones { animation: fila-sube 700ms var(--ease-salida) 320ms backwards; }
  .js .guirnalda .cuerda path { stroke-dasharray: 1; animation: cuerda 1100ms var(--ease-salida) 420ms backwards; }
  .js .guirnalda li { animation: bola-cae 900ms var(--ease-salida) backwards; }
  .js .guirnalda li:nth-child(1) { animation-delay: 760ms; }
  .js .guirnalda li:nth-child(2) { animation-delay: 870ms; }
  .js .guirnalda li:nth-child(3) { animation-delay: 980ms; }
  .js .guirnalda li:nth-child(4) { animation-delay: 1090ms; }
  .js .guirnalda-pack,
  .js .portada-banda > .bajar { animation: solo-aparece 600ms ease 1300ms backwards; }
}
@keyframes titulo-sube { from { clip-path: inset(-20% -2% 100% -2%); transform: translateY(0.3em); } to { clip-path: inset(-20% -2% -20% -2%); transform: none; } }
@keyframes fila-sube { from { opacity: 0; transform: translateY(10px); } }
@keyframes imprime { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes aparece { from { opacity: 0; transform: scale(0.97); } }
@keyframes solo-aparece { from { opacity: 0; } }
@keyframes cuerda { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes bola-cae { from { opacity: 0; transform: translateY(-34px); } 55% { opacity: 1; } }

/* Cinta de descargas del home: los archivos pasan con su check, como el
   registro del programa. Se detiene con el mouse encima y fuera de pantalla. */
.cinta { overflow: hidden; border-bottom: 1px solid var(--filete-suave); background: var(--papel); }
.cinta-pista { display: flex; width: max-content; animation: cinta 70s linear infinite; }
.cinta ul { display: flex; list-style: none; margin: 0; padding: 0; }
.cinta li { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-right: 1px solid var(--filete-suave); font-size: 0.875rem; font-weight: 600; color: var(--tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cinta li svg { width: 15px; height: 15px; flex: none; color: var(--ok); }
.cinta:hover .cinta-pista,
.cinta[data-quieta] .cinta-pista { animation-play-state: paused; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* Barra de avance de la página bajo la cabecera, como la del programa */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .emisor::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--azul-tinta); transform-origin: left center; transform: scaleX(0); animation: avance-pagina linear both; animation-timeline: scroll(root block); }
    @keyframes avance-pagina { to { transform: scaleX(1); } }
  }
}

/* Más respuestas al mouse */
@media (hover: hover) and (pointer: fine) {
  .boton .i { transition: transform 220ms var(--ease-salida); }
  .boton:hover .i { transform: rotate(-8deg) scale(1.1); }
  .razones b { transition: color 180ms ease, transform 240ms var(--ease-salida); }
  .razones li:hover b { color: var(--azul-tinta); transform: translateX(4px); }
  .lista-datos dt { transition: color 180ms ease; }
  .lista-datos > div:hover dt { color: var(--azul-tinta); }
  .despues-lista li::before { transition: background-color 200ms ease, color 200ms ease; }
  .despues-lista li:hover::before { background-color: var(--azul); color: var(--sobre-azul); }
  .empresa-ideas > div { transition: background-color 200ms ease; }
}

/* ---------- Movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { transition: none !important; animation: none !important; }
}