/* ==========================================================================================================
   pe-papeletas (Papeletas al Día) — SISTEMA DE DISEÑO (fase design, 18-10-2026; tema «Pacífico rojizo», 19-10). Se carga DESPUÉS de sb-tools.css.

   Decisiones (docs/06-design.md):
   · Mobile primero, a 360/390 px: el nicho es de consumidor peruano en celular (plan §6). Todo se piensa angosto y
     crece desde ahí.
   · Lejos de lo oficial: gob.pe (SAT, MTC, SUTRAN) es Roboto, escudo rojo, azul #0056AC y gris azulado; el Portal
     Único del MTC es rojo; el SATP y la ATU son azules. Los competidores que rankean son navy (tramitesperu,
     perugestiona, papeletasperu) o rojo (papeletasdetransito). Nosotros (tema «Pacífico rojizo», decidido por Leandro en Claude Design el 19-10-2026): AZUL PACÍFICO de marca
     (acciones, enlaces; la cabecera y el pie oscuros con una franja CELESTE), CORAL de acento (el filete de los H2, el
     «Perú» del logo, la cuenta regresiva) y el VERDE MAR para lo que es gratis y verdadero. Ningún rojo de marca: el
     estado rojo es frambuesa (--mal) y el acento es coral (--ambar-v), y no se usan uno por el otro.
   · Source Sans 3 (variable 300-800, self-hosteada, font-display:optional + preload del subset latin): compacta
     (más tabla por línea a 360 px), con números tabulares para montos, puntos y códigos. Cuerpo 17 px.
   · UN hero (celeste claro con el borde perforado de una papeleta abajo), con formulario y sin él; UN separador de
     secciones (el filete corto coral sobre cada H2).
   · Lo que sale a la red o calcula se ve igual: la caja de consulta, el resultado por entidad, el semáforo del
     descuento, la cuenta regresiva, la barra de puntos y la pregunta del examen son piezas del sistema.
   ========================================================================================================== */

@font-face{font-family:'Source Sans 3';font-style:italic;font-weight:400;font-display:optional;src:url(/assets/fonts/source-sans-3-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Sans 3';font-style:italic;font-weight:400;font-display:optional;src:url(/assets/fonts/source-sans-3-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:300 800;font-display:optional;src:url(/assets/fonts/source-sans-3-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:300 800;font-display:optional;src:url(/assets/fonts/source-sans-3-latin.woff2) format('woff2');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}
/* Manrope (tema «Acero», 20-10-2026): la fuente del sitio desde tema-acero.css (--font). Self-hosteada con sb-tools/dev/self-host-font.py; Source Sans 3 queda hasta fundir el tema en esta hoja. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:optional;src:url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:optional;src:url(/assets/fonts/manrope-latin.woff2) format('woff2');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}

/* ---------------------------------------------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------------------------------------------- */
:root {
  /* Marca: azul Pacífico. Los nombres --ambar* quedan por compatibilidad con sb-tools.css aunque el acento sea coral. */
  --marca: #155fa8;        /* acciones, enlaces: 6,4:1 sobre blanco */
  --marca-d: #0f4a85;      /* hover, texto sobre el celeste claro */
  --marca-l: #eaf7fd;      /* superficie suave: el hero, la caja de consulta */
  --marca-bd: #aee0f4;
  --barra: #071d3a;        /* la barra de independencia */
  --celeste: #6fd3f5;      /* la franja bajo la cabecera y sobre el pie, los títulos del pie, la opción elegida */
  --celeste-hover: #c4ecfb;/* hover de enlaces sobre fondo oscuro */
  --pie: #23272f;          /* el fondo del pie */
  --marca-tinta: #0b2f5b;  /* el H1 del hero y el fondo de la cabecera */

  /* Acento: coral */
  --ambar: #a8372a;        /* coral oscuro, para texto chico y el foco: 6,5:1 sobre blanco */
  --ambar-d: #a8372a;
  --ambar-v: #ec6a55;      /* el coral vivo: filete de los H2, «Perú» del logo, semáforo, cuenta regresiva (nunca texto chico) */
  --ambar-bg: #fdeeeb;
  --ambar-bd: #f4c4ba;
  --verde-v: #2bb38a;      /* los puntos de «Gratis · Sin registro · Fuentes oficiales» */
  --verde-check: #1f9d77;  /* los checks del hero: 3,3:1 sobre --marca-l (gráfico, no texto) */

  /* Neutros */
  --ink: #1b2230;          /* texto: 16:1 */
  --soft: #4a5565;         /* texto secundario: 7,6:1 */
  --muted: #5e6977;        /* terciario: 5,5:1 sobre blanco, 5,1:1 sobre el gris */
  --surface: #ffffff;
  --surface-alt: #f5f6f9;
  --border: #d8dde6;
  --tile: #eceff4;

  /* Estados (sólo estados: nunca marca) */
  --ok: #1e7a46;   --ok-bg: #e9f5ee;   --ok-bd: #b7dec6;
  --info: #155fa8; --info-bg: #eaf7fd; --info-bd: #aee0f4;
  --aviso: #7a5000; --aviso-bg: #fff6e0; --aviso-bd: #ecd396;
  --mal: #b3123e;  --mal-bg: #fcebf0;  --mal-bd: #f1b3c4;  /* frambuesa: más frío que el coral del acento */

  /* Tipografía y escala (base 17 px) */
  --font: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --t-1: .9375rem; --t0: 1.0625rem; --t1: 1.1875rem; --t2: 1.375rem; --t3: 1.75rem; --t4: 2.25rem; --t5: 2.75rem;

  /* Espacios, radios y sombras */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --r: 12px; --r-sm: 8px; --r-l: 16px; --r-pill: 999px; --r-bar: 999px;
  --sh-1: 0 1px 2px rgba(27, 34, 48, .06), 0 1px 1px rgba(27, 34, 48, .04);
  --sh-2: 0 6px 24px rgba(27, 34, 48, .10), 0 2px 6px rgba(27, 34, 48, .06);
  --ancho: 72rem;

  /* Lo que espera sb-tools.css (sb-lib), mapeado una vez */
  --sb-brand: var(--marca); --sb-brand-d: var(--marca-d); --sb-brand-l: var(--marca-l); --sb-brand-bd: var(--marca-bd);
  --sb-accent: var(--ambar); --sb-accent-d: var(--ambar-d); --sb-accent-o: var(--ambar);
  --sb-accent-bg: var(--ambar-bg); --sb-accent-bd: var(--ambar-bd);
  --sb-track: var(--tile); --bar-off: var(--tile);
  --sb-mal: var(--mal); --sb-mal-bg: var(--mal-bg); --sb-mal-bd: var(--mal-bd);
  --verde: var(--marca); --verde-d: var(--marca-d); --verde-l: var(--marca-l); --verde-bd: var(--marca-bd);
  --ambar-o: var(--ambar);
  --tip-x: 0px;
}

/* ---------------------------------------------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-size: var(--t0); line-height: 1.55; color: var(--ink); background: var(--surface); }
a { color: var(--marca); text-underline-offset: .15em; }
a:hover { color: var(--marca-d); }
a[href^="tel:"] { white-space: nowrap; }
/* El foco en ámbar oscuro (5,0:1 sobre blanco): el ámbar vivo da 2,1:1 y no sirve como indicador (WCAG 2.4.11). */
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; border-radius: 4px; }
img, svg { max-width: 100%; }
h1, h2, h3 { line-height: 1.2; color: var(--ink); }
h1 { font-size: var(--t3); margin: var(--s4) 0 var(--s3); font-weight: 750; letter-spacing: -.01em; }
h2 { font-size: var(--t2); margin: var(--s6) 0 var(--s3); font-weight: 700; }
h3 { font-size: var(--t1); margin: var(--s5) 0 var(--s2); font-weight: 650; }
p { margin: 0 0 var(--s4); }
ul, ol { padding-left: 1.25rem; }
li { margin-bottom: var(--s2); }
ul.lista { padding-left: 1.2rem; }
strong, b { font-weight: 700; }
code { font-size: .95em; background: var(--tile); padding: 0 .3em; border-radius: 4px; }
.num, .tabla td.num, .resultado__cifra, .dato__v { font-variant-numeric: tabular-nums; }
.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--s4); }
.estrecho { max-width: 46rem; }
.saltar { position: absolute; left: -999px; }
.saltar:focus { left: var(--s4); top: var(--s4); background: var(--surface); padding: var(--s2) var(--s3); z-index: 20; }
.visual-oculto, .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main { padding-bottom: var(--s8); }
main > .contenedor:first-child { padding-top: var(--s5); }

/* ---------------------------------------------------------------------------------------------------------
   3. El marco: aviso de independencia, cabecera, menú, migas y pie
   --------------------------------------------------------------------------------------------------------- */
.aviso-independiente { background: var(--barra); color: #fff; font-size: var(--t-1); line-height: 1.45; padding: var(--s2) var(--s4); text-align: center; }
.cabecera { background: var(--marca-tinta); border-bottom: 6px solid var(--celeste); position: relative; z-index: 5; }
.cabecera .fila { display: flex; align-items: center; justify-content: space-between; min-height: 3.75rem; gap: var(--s4); }
.marca { display: inline-flex; align-items: center; gap: var(--s2); text-decoration: none; color: var(--marca); }
.marca__ico { width: 42px; height: 42px; flex: none; }  /* 42 y no los 32 del handoff: lo pidió Leandro el 19-10-2026 */
.marca__txt { font-weight: 700; font-size: 1.6rem; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }  /* 1,6 rem y no los 1,3 del handoff: Leandro, 19-10-2026 */
.marca__txt b { font-weight: 400; color: var(--ambar); }  /* la última palabra del nombre: «perú» (logo L52) */
.cabecera .marca__txt, .pie .marca__txt { color: #fff; }
.cabecera .marca__txt b, .pie .marca__txt b { color: var(--ambar-v); }
.menu { display: none; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s5); }
.menu li { position: relative; margin: 0; }
.menu a, .menu .desplegar { color: #fff; text-decoration: none; font-weight: 600; background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; padding: var(--s3) 0; display: inline-flex; align-items: center; gap: 6px; }
.menu .desplegar::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.menu a:hover, .menu .desplegar:hover { color: var(--celeste-hover); }
.menu a[aria-current="page"], .menu .desplegar.activo { color: #fff; box-shadow: inset 0 -3px 0 var(--ambar-v); }
.menu .submenu { display: none; position: absolute; left: 0; top: 100%; min-width: 15rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: var(--s2) 0; box-shadow: var(--sh-2); z-index: 6; flex-direction: column; gap: 0; }
.menu .submenu li a { display: block; padding: var(--s2) var(--s4); font-weight: 500; color: var(--ink); }
.menu .submenu li a[aria-current="page"] { color: var(--marca); font-weight: 700; box-shadow: none; }
.menu .submenu li a:hover { background: var(--marca-l); }
.menu li.abierto .submenu { display: flex; }
.abrir-menu { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4); border: 1px solid rgba(255, 255, 255, .4); border-radius: var(--r-pill); background: transparent; font: inherit; font-weight: 600; color: #fff; cursor: pointer; }
.abrir-menu[aria-expanded="true"] { background: rgba(255, 255, 255, .12); border-color: var(--celeste); }
.menu-movil { border-top: 0; background: var(--surface-alt); padding: var(--s4) 0 var(--s5); }
.menu-movil[hidden] { display: none; }
.menu-movil__cols { display: grid; gap: var(--s4); }
.menu-movil__t { font-weight: 700; margin: 0 0 var(--s2); color: var(--ambar); font-size: var(--t-1); text-transform: uppercase; letter-spacing: .06em; }
.menu-movil ul { list-style: none; margin: 0; padding: 0; }
.menu-movil li { margin: 0; }
.menu-movil a { display: block; padding: var(--s2) 0; color: var(--ink); text-decoration: none; font-weight: 500; min-height: 44px; display: flex; align-items: center; border-bottom: 1px solid var(--tile); }
.menu-movil a[aria-current="page"] { color: var(--marca); font-weight: 700; }
@media (min-width: 40rem) { .menu-movil__cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) {
  .menu { display: block; }
  .abrir-menu, .menu-movil { display: none !important; }
}
.migas ol { list-style: none; margin: 0 0 var(--s3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) 0; font-size: var(--t-1); color: var(--muted); }
.migas li { margin: 0; }
.migas li + li::before { content: "›"; margin: 0 var(--s2); color: var(--muted); }
.migas a { color: var(--soft); }
.pie { background: var(--pie); border-top: 6px solid var(--celeste); color: #d3d7de; padding: var(--s6) 0 var(--s5); font-size: var(--t-1); }
.pie-top { display: grid; gap: var(--s5); }
.pie-marca p { color: #b7bdc8; max-width: 24rem; margin-top: var(--s3); }
/* Las columnas del pie (sb_pie_columnas): dos en el celular, cuatro desde la tableta; cada grupo con su familia debajo. */
.pie-cols { display: grid; gap: var(--s5) var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pie-cols h2 { font-size: var(--t-1); text-transform: uppercase; letter-spacing: .06em; color: var(--celeste); margin: 0 0 var(--s2); }
.pie-cols h2::before { display: none; }
.pie-col > ul + h2 { margin-top: var(--s4); }                                 /* el segundo grupo de una columna (Legal) */
.pie-cols ul { list-style: none; margin: 0; padding: 0; }
.pie-cols li { margin-bottom: var(--s1); }
.pie-cols a, .pie-base a { color: #fff; text-decoration: none; }
.pie-cols a:hover, .pie-base a:hover { color: var(--celeste-hover); text-decoration: underline; }
/* La familia debajo de su grupo: el mismo subtítulo que las columnas y la misma lista, un enlace por línea, como todo el pie. */
.pie-sub { font-size: var(--t-1); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--celeste); margin: var(--s4) 0 var(--s2); }
.pie-sub::before { display: none; }
.pie-cols ul.pie-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s3); }   /* códigos y categorías */
@media (min-width: 48rem) { .pie-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pie-cols ul.pie-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pie-base { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid rgba(255, 255, 255, .18); color: #b7bdc8; display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between; }
.pie-base p { margin: 0; }
.pie .actualizado { color: #b7bdc8; }   /* sobre el pie oscuro, --muted daba 2,7:1 (Lighthouse, qa 19-oct); este gris, 8:1 */
@media (min-width: 64rem) { .pie-top { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s6); } }

/* ---------------------------------------------------------------------------------------------------------
   4. El HERO (un solo tratamiento): índigo claro, y abajo el borde perforado de una papeleta.
   --------------------------------------------------------------------------------------------------------- */
.hero { background: var(--marca-l); position: relative; }
.hero::after { content: ""; display: block; height: 0; border-bottom: 3px dashed var(--marca-bd); }
.hero .contenedor { padding-top: var(--s4); padding-bottom: var(--s5); }
.hero h1 { margin-top: var(--s3); max-width: 24ch; color: var(--marca-tinta); }
.hero__lede { font-size: var(--t1); color: var(--soft); margin: 0 0 var(--s4); max-width: 46ch; }
.hero__puntos { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.hero__puntos li { display: flex; gap: var(--s2); align-items: flex-start; margin: 0; font-weight: 600; }
.hero__puntos svg { width: 22px; height: 22px; flex: none; color: var(--verde-check); margin-top: 2px; }
.hero--form .contenedor { display: grid; gap: var(--s4); align-items: start; }
.hero .migas { margin-top: var(--s2); }
.hero .migas ol { margin-bottom: 0; }
@media (max-width: 63.99rem) { .hero--form .hero__puntos { display: none; } }
@media (min-width: 64rem) {
  .hero .contenedor { padding-top: var(--s6); padding-bottom: var(--s7); }
  .hero h1 { font-size: var(--t4); }
  .hero--form .contenedor { grid-template-columns: 1.05fr .95fr; gap: var(--s7); }
}
.hero--simple .contenedor { max-width: var(--ancho); }
.hero--simple h1 { max-width: 28ch; }
/* La respuesta corta de una guía, arriba de todo (plan §2: la respuesta en la página). */
.respuesta { font-size: var(--t1); border-left: 4px solid var(--ambar-v); padding: var(--s2) var(--s4); background: var(--surface); border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: var(--s4) 0; max-width: 60ch; }
.respuesta p { margin: 0; }

/* ---------------------------------------------------------------------------------------------------------
   5. Separación de secciones (un solo patrón): espacio, y un filete corto ámbar sobre cada H2.
   --------------------------------------------------------------------------------------------------------- */
.seccion { margin-top: var(--s6); }
.seccion > h2 { margin-top: 0; padding-top: var(--s3); position: relative; }
.seccion > h2::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 4px; border-radius: 2px; background: var(--ambar-v); }
.seccion + .seccion { margin-top: var(--s7); }
.actualizado, .fuente { font-size: var(--t-1); color: var(--muted); margin: var(--s2) 0 0; }
.fuente a { color: var(--muted); }
.firma { font-size: var(--t-1); color: var(--muted); }
.ejemplo { display: inline-block; font-size: var(--t-1); font-weight: 700; color: var(--ambar); background: var(--ambar-bg); border: 1px solid var(--ambar-bd); border-radius: var(--r-pill); padding: 2px var(--s3); margin: 0 0 var(--s3); }

/* ---------------------------------------------------------------------------------------------------------
   6. Botones (un primario por pantalla; el del oficial es neutro y lleva la flecha de salida)
   --------------------------------------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s5); border-radius: var(--r-sm); font: inherit; font-weight: 700; font-size: var(--t0); text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: background .15s, color .15s, border-color .15s; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--primario { background: var(--marca); color: #fff; }
.btn--primario:hover { background: var(--marca-d); color: #fff; }
.btn--secundario { background: var(--surface); color: var(--marca); border-color: var(--marca); }
.btn--secundario:hover { background: var(--marca-l); color: var(--marca-d); }
.btn--fantasma { background: transparent; color: var(--marca); }
.btn--fantasma:hover { background: var(--marca-l); }
.btn--oficial { background: var(--surface); color: var(--ink); border-color: var(--border); font-weight: 600; }
.btn--oficial:hover { border-color: var(--soft); color: var(--ink); }
.btn--bloque { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s4) 0; }

/* ---------------------------------------------------------------------------------------------------------
   7. La caja de consulta (placa o DNI): el corazón de las páginas de herramienta
   --------------------------------------------------------------------------------------------------------- */
.consulta { background: var(--surface); border: 1px solid var(--marca-bd); border-radius: var(--r-l); padding: var(--s4); box-shadow: var(--sh-2); }
.consulta h2 { margin: 0 0 var(--s3); font-size: var(--t1); }
.consulta h2::before { display: none; }
.campo { margin-bottom: var(--s3); }
.campo label { display: block; font-weight: 700; margin-bottom: var(--s1); }
.campo input, .campo select { width: 100%; min-height: 52px; padding: 0 var(--s3); border: 2px solid var(--border); border-radius: var(--r-sm); font: inherit; font-size: var(--t1); color: var(--ink); background: var(--surface); }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-l); }
.campo input::placeholder { color: var(--muted); }
.campo--placa input { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.campo__ayuda { font-size: var(--t-1); color: var(--muted); margin: var(--s1) 0 0; }
.consulta .btn { margin-top: var(--s2); }
.consulta__privacidad { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--t-1); color: var(--soft); margin: var(--s3) 0 0; }
.consulta__privacidad svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--marca); }
.consulta__pie { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s4); font-size: var(--t-1); color: var(--muted); margin: var(--s3) 0 0; padding: 0; list-style: none; }
.consulta__pie li { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.consulta__pie li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--verde-v); }
.opciones { display: grid; gap: var(--s2); }
.opcion { display: flex; gap: var(--s3); align-items: center; padding: var(--s3); border: 2px solid var(--border); border-radius: var(--r-sm); cursor: pointer; }
.opcion--marcada { border-color: var(--marca); background: var(--marca-l); }   /* la pone herramientas.js al elegir: el selector de «tiene un hijo marcado» llegó a todos los motores recién en 2023 */
.opcion input { width: 20px; height: 20px; accent-color: var(--marca); flex: none; }
.campo__ayuda--mal { color: var(--ambar); font-weight: 600; }   /* el aviso de validación de app.js, en el texto corto del campo */

/* ---------------------------------------------------------------------------------------------------------
   8. El RESULTADO de una consulta: por entidad, en tarjetas (tiene · no tiene · no respondió · no aplica)
   --------------------------------------------------------------------------------------------------------- */
.resultado { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); padding: var(--s4); box-shadow: var(--sh-1); margin: var(--s4) 0; }
.resultado__cabeza { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--tile); padding-bottom: var(--s3); margin-bottom: var(--s3); }
.resultado__placa { font-size: var(--t3); font-weight: 800; letter-spacing: .1em; color: var(--marca-tinta); margin: 0; font-variant-numeric: tabular-nums; }
.resultado__cuando { font-size: var(--t-1); color: var(--muted); margin: 0; }
.entidades { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.entidades li { margin: 0; }
.entidad { border: 1px solid var(--border); border-radius: var(--r); padding: var(--s3) var(--s4); background: var(--surface); height: 100%; }
.entidad--tiene { border-color: var(--mal-bd); background: var(--mal-bg); }
.entidad--ok { border-color: var(--ok-bd); background: var(--ok-bg); }
.entidad--error { border-color: var(--aviso-bd); background: var(--aviso-bg); }
.entidad--na { background: var(--surface-alt); color: var(--soft); }
.entidad__t { display: flex; justify-content: space-between; gap: var(--s2); align-items: center; margin: 0 0 var(--s2); font-weight: 700; }
.entidad__t .chip { flex: none; }
.entidad p { margin: 0; font-size: var(--t-1); color: var(--soft); }
.entidad .papeletas { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: var(--s2); }
/* La fila de una papeleta: código, descripción y monto. Es flex con salto: cuando la descripción no tiene 14rem
   (la tarjeta angosta del celular o de la grilla de dos columnas), el monto baja a su propia línea; en tres columnas
   fijas la descripción quedaba en un hilo de 90 px (capturas del 18-10). */
.entidad .papeleta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: baseline; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--s2) var(--s3); color: var(--ink); font-size: var(--t0); }
.papeleta__cod { font-weight: 800; color: var(--marca-tinta); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.papeleta__desc { font-size: var(--t-1); color: var(--soft); flex: 1 1 14rem; min-width: 0; }
.papeleta__monto { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; flex: 1 1 100%; margin-left: auto; }
.entidad .papeleta > * { min-width: 0; }
.papeleta__monto small { display: block; font-weight: 600; color: var(--ok); font-size: var(--t-1); }
.entidad .acciones { margin: var(--s3) 0 0; }
@media (min-width: 40rem) { .entidades { grid-template-columns: 1fr 1fr; } }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--r-pill); font-size: var(--t-1); font-weight: 700; border: 1px solid transparent; white-space: nowrap; }
.chip--ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-bd); }
.chip--atencion { color: var(--aviso); background: var(--aviso-bg); border-color: var(--aviso-bd); }
.chip--alerta { color: var(--mal); background: var(--mal-bg); border-color: var(--mal-bd); }
.chip--neutro { color: var(--soft); background: var(--tile); border-color: var(--border); }
.chip--marca { color: var(--marca-d); background: var(--marca-l); border-color: var(--marca-bd); }

/* El resultado de una calculadora o un simulador: la cifra grande, los pares dato → valor, la fuente. */
.resultado__cifra { font-size: var(--t5); font-weight: 800; color: var(--marca-tinta); line-height: 1; margin: var(--s2) 0; letter-spacing: -.02em; }
.resultado__cifra small { font-size: var(--t1); font-weight: 600; color: var(--soft); letter-spacing: 0; margin-left: var(--s2); }
.datos { display: grid; grid-template-columns: 1fr; gap: 0; margin: var(--s3) 0; }
.dato { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s2) 0; border-bottom: 1px solid var(--tile); }
.dato__k { color: var(--soft); }
.dato__v { font-weight: 700; text-align: right; }
@media (min-width: 40rem) { .datos--2 { grid-template-columns: 1fr 1fr; column-gap: var(--s6); } }

/* El semáforo del descuento: verde 83 %, ámbar 67 %, rojo sin descuento. Es un estado del cálculo, por eso lleva color. */
.semaforo { display: inline-flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4) var(--s2) var(--s2); border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); font-weight: 700; }
.semaforo__luces { display: inline-flex; gap: 5px; padding: 5px; background: var(--ink); border-radius: var(--r-pill); }
.semaforo__luz { width: 14px; height: 14px; border-radius: 50%; background: #3a4150; }
.semaforo--verde .semaforo__luz:nth-child(3) { background: #2fbf71; box-shadow: 0 0 10px #2fbf71; }
.semaforo--ambar .semaforo__luz:nth-child(2) { background: var(--ambar-v); box-shadow: 0 0 10px var(--ambar-v); }
.semaforo--rojo .semaforo__luz:nth-child(1) { background: #e5484d; box-shadow: 0 0 10px #e5484d; }
.semaforo--verde { color: var(--ok); border-color: var(--ok-bd); }
.semaforo--ambar { color: var(--ambar); border-color: var(--ambar-bd); }
.semaforo--rojo { color: var(--mal); border-color: var(--mal-bd); }

/* La cuenta regresiva (el 90 % hasta el 23-nov-2026): una pieza con identidad, en ámbar vivo. */
.cuenta { display: flex; gap: var(--s4); align-items: center; padding: var(--s3) var(--s4); background: var(--ambar-bg); border: 1px solid var(--ambar-bd); border-radius: var(--r); margin: var(--s4) 0; }
.cuenta__n { font-size: var(--t5); font-weight: 800; line-height: 1; color: var(--ambar-d); font-variant-numeric: tabular-nums; min-width: 2.2ch; text-align: center; }
.cuenta__n small { display: block; font-size: var(--t-1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ambar); }
.cuenta__t { margin: 0; font-weight: 700; }
.cuenta__t small { display: block; font-weight: 400; color: var(--soft); font-size: var(--t-1); }

/* La barra de puntos (0 a 100): un dato con sus umbrales, no un semáforo. */
.puntos { margin: var(--s4) 0; }
.puntos__barra { position: relative; height: 18px; border-radius: var(--r-bar); background: var(--tile); overflow: hidden; container-type: inline-size; }
/* El degradé se mide sobre la barra entera (100cqw), no sobre lo lleno: con 20 puntos la barra es azul y recién desde 70
   aparece el frambuesa claro (#d9577a) y desde 90 el estado --mal; el coral es acento, no estado (PARA-EL-REPO §3.9). La
   primera declaración es el respaldo para navegadores sin unidades de contenedor. */
.puntos__lleno { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-bar); background: linear-gradient(90deg, var(--marca) 0 70%, #d9577a 70% 90%, var(--mal) 90%); background: linear-gradient(90deg, var(--marca) 0 70%, #d9577a 70% 90%, var(--mal) 90%) 0 0 / 100cqw 100% no-repeat; }
.puntos__marcas { display: flex; justify-content: space-between; font-size: var(--t-1); color: var(--muted); margin-top: var(--s1); font-variant-numeric: tabular-nums; }
.puntos__total { font-size: var(--t3); font-weight: 800; color: var(--marca-tinta); margin: 0; font-variant-numeric: tabular-nums; }
.puntos__total small { font-size: var(--t0); font-weight: 600; color: var(--soft); }

/* ---------------------------------------------------------------------------------------------------------
   9. El examen: la pregunta, las alternativas, el reloj y el avance; la corrección
   --------------------------------------------------------------------------------------------------------- */
.examen { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); box-shadow: var(--sh-1); overflow: hidden; margin: var(--s4) 0; }
.examen__barra { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--marca-tinta); color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.examen__reloj { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .12); border-radius: var(--r-pill); padding: 4px 12px; }
.examen__reloj svg { width: 18px; height: 18px; }
.examen__avance { height: 6px; background: var(--tile); }
.examen__avance span { display: block; height: 100%; background: var(--ambar-v); }
.examen__cuerpo { padding: var(--s4); }
.examen__tema { font-size: var(--t-1); color: var(--muted); margin: 0 0 var(--s2); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.examen__pregunta { font-size: var(--t1); font-weight: 700; margin: 0 0 var(--s4); }
.examen .opcion { align-items: flex-start; }
.opcion__letra { font-weight: 800; color: var(--marca); min-width: 1.4em; }
.opcion--correcta { border-color: var(--ok); background: var(--ok-bg); }
.opcion--incorrecta { border-color: var(--mal-bd); background: var(--mal-bg); }
.examen__pie { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between; align-items: center; padding: var(--s3) var(--s4); border-top: 1px solid var(--tile); background: var(--surface-alt); }
.examen__nota { font-size: var(--t4); font-weight: 800; color: var(--marca-tinta); font-variant-numeric: tabular-nums; margin: 0; }
.examen__nota small { font-size: var(--t0); color: var(--soft); font-weight: 600; }

/* ---------------------------------------------------------------------------------------------------------
   10. Avisos, tarjetas, tablas y pasos
   --------------------------------------------------------------------------------------------------------- */
.aviso { border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--r-sm); padding: var(--s3) var(--s4); margin: var(--s4) 0; background: var(--surface-alt); max-width: 60ch; }
.aviso p { margin: 0; }
.aviso__titulo { font-weight: 700; margin: 0 0 var(--s1) !important; }
.aviso--info { border-color: var(--info-bd); border-left-color: var(--info); background: var(--info-bg); }
.aviso--atencion { border-color: var(--aviso-bd); border-left-color: var(--ambar-v); background: var(--aviso-bg); }
.aviso--alerta { border-color: var(--mal-bd); border-left-color: var(--mal); background: var(--mal-bg); }
.aviso--ok { border-color: var(--ok-bd); border-left-color: var(--ok); background: var(--ok-bg); }
.callout { border-left: 4px solid var(--marca); background: var(--surface-alt); padding: var(--s3) var(--s4); margin: var(--s5) 0; border-radius: .25rem; max-width: 60ch; }
.callout strong { display: block; margin-bottom: var(--s1); }
.callout p { margin: 0; }
.callout--ok { border-color: var(--ok); }
.callout--warn { border-color: var(--ambar-v); }
.tarjetas, .cards { list-style: none; margin: var(--s4) 0; padding: 0; display: grid; gap: var(--s3); }
.tarjetas li, .cards li { margin: 0; }
.tarjeta, .cards a { display: block; height: 100%; padding: var(--s4); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); text-decoration: none; color: inherit; box-shadow: var(--sh-1); }
a.tarjeta:hover, .cards a:hover { border-color: var(--marca-bd); box-shadow: var(--sh-2); }
.tarjeta b, .cards strong { display: block; color: var(--marca); margin-bottom: var(--s1); font-size: var(--t1); }
.tarjeta span, .cards span { color: var(--soft); }
.tarjeta__num { font-size: var(--t3); font-weight: 800; color: var(--marca-tinta); display: block; font-variant-numeric: tabular-nums; }
@media (min-width: 40rem) { .tarjetas, .cards { grid-template-columns: 1fr 1fr; } .tarjetas--3 { grid-template-columns: repeat(3, 1fr); } }
.tabla { width: 100%; border-collapse: collapse; margin: var(--s4) 0; font-size: var(--t0); }
/* Un token sin espacios (una dirección del registro del MTC, un correo) no debe ensanchar la tabla ni la pantalla: se corta. */
.tabla__v { overflow-wrap: anywhere; }
.tabla caption { text-align: left; font-weight: 700; margin-bottom: var(--s2); }
.tabla th, .tabla td { text-align: left; padding: var(--s3); border-bottom: 1px solid var(--border); vertical-align: top; }
.tabla thead th { background: var(--surface-alt); font-size: var(--t-1); text-transform: uppercase; letter-spacing: .04em; color: var(--soft); }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .cod { font-weight: 800; color: var(--marca-tinta); font-variant-numeric: tabular-nums; }
.tabla tbody tr:hover { background: var(--surface-alt); }
@media (max-width: 47.99rem) {
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla tr { display: block; border: 1px solid var(--border); border-radius: var(--r); margin-bottom: var(--s3); padding: var(--s2) var(--s3); background: var(--surface); }
  .tabla tbody tr:hover { background: var(--surface); }
  .tabla td { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--s3); border: 0; padding: 6px 0; text-align: left; }
  .tabla td.num { text-align: left; }
  .tabla td::before { content: attr(data-label); font-weight: 700; color: var(--soft); }
  .tabla__v { min-width: 0; }
  .tabla tbody th[scope="row"] { display: block; border: 0; padding: 6px 0 var(--s1); border-bottom: 1px solid var(--tile); margin-bottom: var(--s1); }
}
@media (max-width: 25.99rem) { .tabla td { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
/* Una tabla ancha (7 columnas o más, como la de infracciones) se apila también en la tableta: a 768 px no entra. */
@media (max-width: 63.99rem) {
  .tabla--ancha thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla--ancha tr { display: block; border: 1px solid var(--border); border-radius: var(--r); margin-bottom: var(--s3); padding: var(--s2) var(--s3); background: var(--surface); }
  .tabla--ancha tbody tr:hover { background: var(--surface); }
  .tabla--ancha td { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--s3); border: 0; padding: 6px 0; text-align: left; }
  .tabla--ancha td.num { text-align: left; }
  .tabla--ancha td::before { content: attr(data-label); font-weight: 700; color: var(--soft); }
  .tabla--ancha .tabla__v { min-width: 0; }
}
/* Infografías (build 1.5 y 1.6; Leandro, 20-oct): un color de la paleta por número o nodo, en orden; todo apilado en el celular
   y nada más ancho que la pantalla. Los siete colores están en los tokens del sitio (el tema los pisa con los suyos). */
:root { --paso-1: var(--marca-d); --paso-2: var(--ambar); --paso-3: var(--info); --paso-4: var(--ok); --paso-5: var(--aviso); --paso-6: var(--marca); --paso-7: var(--mal); }

/* El stepper: número grande de color, línea que une los pasos, título, texto y el dato corto como chip. */
.pasos { list-style: none; counter-reset: paso; padding: 0; margin: var(--s4) 0; display: grid; gap: 0; max-width: 60ch; }
.pasos li { counter-increment: paso; position: relative; display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--s3); margin: 0; padding-bottom: var(--s4); }
.pasos li:last-child { padding-bottom: 0; }
.pasos li::before { content: counter(paso); width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--paso-1); color: #fff; font-weight: 800; font-size: 1.15rem; display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--surface); }
.pasos li::after { content: ""; position: absolute; left: calc(1.375rem - 1px); top: 2.75rem; bottom: 0; width: 2px; background: var(--border); }
.pasos li:last-child::after { display: none; }
.pasos li:nth-child(7n+2)::before { background: var(--paso-2); }
.pasos li:nth-child(7n+3)::before { background: var(--paso-3); }
.pasos li:nth-child(7n+4)::before { background: var(--paso-4); }
.pasos li:nth-child(7n+5)::before { background: var(--paso-5); }
.pasos li:nth-child(7n+6)::before { background: var(--paso-6); }
.pasos li:nth-child(7n+7)::before { background: var(--paso-7); }
.pasos b { display: block; margin-bottom: 2px; }
.pasos .paso__meta { margin-top: var(--s2); white-space: normal; }
/* En fila: tantas columnas como pasos (--n), desde 48rem con hasta tres pasos y desde 64rem con cuatro o cinco; antes, apilados. */
@media (min-width: 48rem) {
  .pasos--fila:not(.pasos--ancha) { max-width: none; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--s4); }
  .pasos--fila:not(.pasos--ancha) li { grid-template-columns: 1fr; align-content: start; padding-bottom: 0; }
  .pasos--fila:not(.pasos--ancha) li::before { margin-bottom: var(--s2); }
  .pasos--fila:not(.pasos--ancha) li::after { top: calc(1.375rem - 1px); left: 2.75rem; right: calc(-1 * var(--s4)); bottom: auto; width: auto; height: 2px; }
}
@media (min-width: 64rem) {
  .pasos--ancha { max-width: none; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--s3); }
  .pasos--ancha li { grid-template-columns: 1fr; align-content: start; padding-bottom: 0; }
  .pasos--ancha li::before { margin-bottom: var(--s2); }
  .pasos--ancha li::after { top: calc(1.375rem - 1px); left: 2.75rem; right: calc(-1 * var(--s3)); bottom: auto; width: auto; height: 2px; }
}

/* La línea de tiempo: nodos de color por orden, la etiqueta del momento sobre el texto. */
.linea { position: relative; padding-left: var(--s5); margin: var(--s4) 0; list-style: none; max-width: 60ch; }
.linea::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.linea li { position: relative; margin-bottom: var(--s4); }
.linea li:last-child { margin-bottom: 0; }
.linea li::before { content: ""; position: absolute; left: calc(-1 * var(--s5) + 2px); top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--paso-1); border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--border); }
.linea li:nth-child(7n+2)::before { background: var(--paso-2); }
.linea li:nth-child(7n+3)::before { background: var(--paso-3); }
.linea li:nth-child(7n+4)::before { background: var(--paso-4); }
.linea li:nth-child(7n+5)::before { background: var(--paso-5); }
.linea li:nth-child(7n+6)::before { background: var(--paso-6); }
.linea li:nth-child(7n+7)::before { background: var(--paso-7); }
.linea li.linea--hito::before { box-shadow: 0 0 0 2px var(--ambar-v); }
.linea__et { display: block; font-size: var(--t-1); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
/* En fila: un nodo por columna (--n), desde 48rem con hasta tres hitos y desde 64rem con cuatro o cinco. */
@media (min-width: 48rem) {
  .linea--fila:not(.linea--ancha) { max-width: none; padding-left: 0; padding-top: calc(var(--s4) + 8px); display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--s4); }
  .linea--fila:not(.linea--ancha)::before { left: 8px; right: 8px; top: 7px; bottom: auto; height: 2px; width: auto; }
  .linea--fila:not(.linea--ancha) li { margin-bottom: 0; }
  .linea--fila:not(.linea--ancha) li::before { left: 0; top: calc(-1 * var(--s4) - 8px); }
}
@media (min-width: 64rem) {
  .linea--ancha { max-width: none; padding-left: 0; padding-top: calc(var(--s4) + 8px); display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--s3); }
  .linea--ancha::before { left: 8px; right: 8px; top: 7px; bottom: auto; height: 2px; width: auto; }
  .linea--ancha li { margin-bottom: 0; }
  .linea--ancha li::before { left: 0; top: calc(-1 * var(--s4) - 8px); }
}

/* La escala: una barra partida en tramos proporcionales, con sus marcas y su leyenda. */
.escala { margin: var(--s4) 0; display: grid; gap: var(--s2); }
.escala__t { margin: 0; font-weight: 700; }
.escala__barra { display: flex; height: 2.25rem; border-radius: var(--r-pill); overflow: hidden; background: var(--tile); }
.escala__seg { display: flex; align-items: center; justify-content: center; min-width: 0; color: #fff; font-weight: 800; font-size: var(--t-1); }
.escala__seg > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 var(--s2); }
.escala__seg--ok { background: var(--ok); } .escala__seg--atencion { background: var(--aviso); } .escala__seg--alerta { background: var(--mal); } .escala__seg--marca { background: var(--marca); }
.escala__seg--vacio { background: transparent; }
.escala__marcas { position: relative; height: 3.75rem; }
.escala__marca { position: absolute; top: 0; transform: translateX(-100%); text-align: right; font-size: var(--t-1); color: var(--soft); line-height: 1.25; padding-top: var(--s2); border-right: 2px solid var(--border); padding-right: 6px; max-width: 12rem; }
.escala__marca b { display: block; color: var(--ink); }
.escala__leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--t-1); color: var(--soft); }
.escala__punto { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.escala__punto--ok { background: var(--ok); } .escala__punto--atencion { background: var(--aviso); } .escala__punto--alerta { background: var(--mal); } .escala__punto--marca { background: var(--marca); }
.escala__nota { margin: 0; color: var(--soft); font-size: var(--t-1); }

/* La decisión: la pregunta y sus ramas, con las tarjetas del sitio y un nodo de color por rama. */
.ramas { margin: var(--s4) 0; }
.ramas__q { margin: 0 0 var(--s3); font-weight: 800; font-size: var(--t1); padding-left: calc(14px + var(--s3)); position: relative; }
.ramas__q::before { content: ""; position: absolute; left: 0; top: .35em; width: 14px; height: 14px; border-radius: 50%; background: var(--paso-1); }
.ramas__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.ramas__lista li { margin: 0; }
.rama { display: flex; flex-direction: column; gap: 4px; position: relative; padding-left: calc(var(--s4) + 14px + var(--s2)); }
.rama::before { content: ""; position: absolute; left: var(--s4); top: calc(var(--s4) + .3em); width: 14px; height: 14px; border-radius: 50%; background: var(--paso-2); }
.ramas__lista li:nth-child(7n+2) .rama::before { background: var(--paso-3); }
.ramas__lista li:nth-child(7n+3) .rama::before { background: var(--paso-4); }
.ramas__lista li:nth-child(7n+4) .rama::before { background: var(--paso-5); }
.ramas__lista li:nth-child(7n+5) .rama::before { background: var(--paso-6); }
.ramas__lista li:nth-child(7n+6) .rama::before { background: var(--paso-7); }
.ramas__cond { font-size: var(--t-1); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.rama b { margin: 0; }

/* Las barras: etiqueta, barra proporcional al mayor y el valor; en el celular la etiqueta va arriba de la barra. */
.barras { margin: var(--s3) 0; display: grid; gap: var(--s2); }
.barra-fila { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr auto; gap: var(--s2) var(--s3); align-items: center; }
.barra-fila__l { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.barra-fila__p { display: block; height: 1rem; border-radius: var(--r-pill); background: var(--tile); overflow: hidden; }
.barra-fila__b { display: block; height: 100%; border-radius: var(--r-pill); background: var(--paso-2); min-width: 3px; }
.barra-fila__b--1 { background: var(--paso-1); } .barra-fila__b--2 { background: var(--paso-2); } .barra-fila__b--3 { background: var(--paso-3); } .barra-fila__b--4 { background: var(--paso-4); } .barra-fila__b--5 { background: var(--paso-5); } .barra-fila__b--6 { background: var(--paso-6); } .barra-fila__b--7 { background: var(--paso-7); }
.barra-fila__v { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--soft); }
@media (max-width: 30rem) { .barra-fila { grid-template-columns: 1fr auto; } .barra-fila__l { grid-column: 1 / -1; } }
.faq { max-width: none; }
.faq details { border-top: 1px solid var(--border); padding: var(--s3) 0; }
.faq details:last-child { border-bottom: 1px solid var(--border); }
.faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: var(--s3); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--marca); font-weight: 800; font-size: 1.3em; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq__a { padding-top: var(--s2); color: var(--soft); max-width: 60ch; }

/* ---------------------------------------------------------------------------------------------------------
   11. Lo del esqueleto (stubs, encabezado simple de las legales y el 404) y el sitio modelo
   --------------------------------------------------------------------------------------------------------- */
.pagina-head { margin-bottom: var(--s5); }
.lede { font-size: var(--t1); color: var(--soft); max-width: 46rem; }
[data-stub] { opacity: .92; }
.modelo-nav { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0; }
.modelo-nav a { font-size: var(--t-1); font-weight: 700; padding: 4px 12px; border-radius: var(--r-pill); background: var(--tile); text-decoration: none; color: var(--ink); }
.muestras { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin: var(--s4) 0; }
.muestra { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; font-size: var(--t-1); }
.muestra span { display: block; height: 56px; }
.muestra b { display: block; padding: var(--s2) var(--s3) 0; }
.muestra code { display: block; margin: 0 var(--s3) var(--s2); background: none; padding: 0; color: var(--muted); font-size: var(--t-1); }
.logos { display: grid; gap: var(--s4); margin: var(--s4) 0; }
.logo-alt { border: 1px solid var(--border); border-radius: var(--r-l); overflow: hidden; }
.logo-alt__vista { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; padding: var(--s4); background: var(--surface); }
.logo-alt__vista--oscuro { background: var(--marca-tinta); }
.logo-alt__vista--oscuro .marca__txt { color: #fff; }
.logo-alt__vista--oscuro .marca__txt b { color: var(--ambar-v); }
.logo-alt__vista--suave { background: var(--marca-l); }
.logo-alt__texto { padding: var(--s3) var(--s4) var(--s4); border-top: 1px solid var(--border); }
.logo-alt__texto h3 { margin-top: 0; }
.logo-alt__texto p { margin: 0; color: var(--soft); }
.favicons { display: inline-flex; gap: var(--s3); align-items: center; }
.favicons .marca__ico { width: 16px; height: 16px; }
.favicons .marca__ico + .marca__ico { width: 32px; height: 32px; }
.favicons .marca__ico + .marca__ico + .marca__ico { width: 48px; height: 48px; }

/* ---------------------------------------------------------------------------------------------------------
   9. Piezas del tema «Pacífico rojizo» (Claude Design, 19-10-2026; PARA-EL-REPO §3): el selector de opciones,
   la lista del simulador de puntos, dos campos en fila y el hero compacto en el celular
   --------------------------------------------------------------------------------------------------------- */
/* El selector de opciones («Buscar por», categoría, modo, gravedad, orden): píldoras de 44 px con aria-pressed. */
.selector { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0 0 var(--s3); }
.selector__t { font-weight: 700; font-size: var(--t-1); color: var(--soft); width: 100%; }
.selector--linea .selector__t { width: auto; }
.opc { white-space: nowrap; min-height: 44px; padding: 0 var(--s4); border-radius: var(--r-pill); border: 1px solid var(--marca-bd); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.opc:hover { border-color: var(--marca); }
.opc[aria-pressed="true"] { background: var(--celeste); border-color: var(--celeste); color: var(--marca-tinta); }
/* La lista de papeletas del simulador de puntos */
.sim { display: grid; gap: var(--s2); list-style: none; padding: 0; margin: var(--s3) 0; }
.sim li { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s3); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); margin: 0; }
.sim button { min-height: 44px; border: 0; background: none; color: var(--marca); font: inherit; font-weight: 700; cursor: pointer; }
.cod { font-weight: 800; font-variant-numeric: tabular-nums; }
/* Dos campos lado a lado en las calculadoras (fecha y entidad; año y ciudad): el botón entra en el primer pantallazo */
.campos-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); }
/* Celular: el botón primario de cada herramienta queda arriba de los 740 px (medido en las 16 herramientas) */
@media (max-width: 39.99rem) {
  .hero .contenedor { padding-top: var(--s2); padding-bottom: var(--s4); }
  .hero .migas { margin-top: 0; }
  .hero h1 { font-size: 1.6rem; margin: var(--s2) 0; }
  .hero--form .hero__lede { font-size: var(--t0); line-height: 1.45; margin-bottom: var(--s3); }
  .hero--form .consulta { padding: var(--s3); }
  .hero--form .consulta h2 { display: none; }
  .hero--form .campo { margin-bottom: var(--s2); }
  .hero--form .contenedor > *, .consulta { min-width: 0; }
  .hero--form .campo__ayuda { font-size: var(--t-1); margin-top: 2px; } /* 15 px: el diseño pedía 14, pero nada de lectura baja de 15 (decisión 3) */
  .selector--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--s3)); padding-inline: var(--s3); }
  .selector--scroll::-webkit-scrollbar { display: none; }
  .selector--scroll .opc, .selector--scroll .selector__t { flex: none; width: auto; }
}

/* ────────────────────────────────────────────────────────────────────────────────────────────────────────────
   10. Los resultados en lugar del hero (consultas y calculadoras, build) y las piezas de las herramientas
   ──────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.hero--resultado .contenedor { padding-bottom: var(--s4); }
.hero--resultado h1 { max-width: 32ch; }
.res-vista { margin-top: var(--s4); }
.res-vista__resumen { color: var(--soft); margin: calc(-1 * var(--s2)) 0 var(--s3); max-width: 70ch; }
.res-vista__nota { font-size: var(--t-1); color: var(--soft); max-width: 70ch; margin: var(--s3) 0 0; }
.res-fin { display: flex; align-items: center; gap: var(--s3); margin: var(--s5) 0 0; color: var(--muted); font-size: var(--t-1); }
.res-fin::before, .res-fin::after { content: ""; flex: 1; height: 1px; background: var(--marca-bd); }
.resultado--vacio .resultado__titulo { font-size: var(--t1); margin: 0 0 var(--s2); }
.resultado--vacio p { max-width: 60ch; }
.resultado--vacio .lista { margin: var(--s2) 0 0; }
.placa-boton { display: inline-block; }
.calc__aviso { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--ambar-bg); border: 1px solid var(--ambar-bd); color: var(--ambar); font-weight: 600; }
.calc-res:focus { outline: none; }
.calc-res .resultado { margin-top: 0; }
.datos--lista .dato { flex-direction: column; gap: 2px; }
.sim { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s2); }
.sim li { display: flex; justify-content: space-between; gap: var(--s3); align-items: center; padding: var(--s2) var(--s3); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); margin: 0; }
.sim li .cod { font-weight: 800; color: var(--marca-tinta); margin-right: var(--s2); }
.sim li button { font: inherit; font-size: var(--t-1); font-weight: 700; color: var(--marca); background: none; border: 0; cursor: pointer; padding: var(--s1) var(--s2); }
.sim li button:hover { text-decoration: underline; }
.sim--vacia { color: var(--muted); font-style: italic; }
.sim-agregar { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: flex-end; margin: var(--s3) 0; }
.sim-agregar .campo { flex: 1 1 20rem; margin: 0; }
.tabla-res { font-size: var(--t-1); color: var(--soft); margin: var(--s2) 0 0; }
.tabla tr[hidden] { display: none; }
.examen-app { max-width: 46rem; }
.examen-app .examen { margin-top: var(--s3); }
.examen__img { display: block; max-width: 220px; height: auto; margin: var(--s2) 0; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; }
.opcion__img { max-height: 70px; width: auto; }
.examen__fund { font-size: var(--t-1); color: var(--soft); margin: var(--s2) 0 0; }
.examen__nota { font-size: var(--t4); font-weight: 800; color: var(--marca-tinta); margin: 0; }
.examen__nota small { font-size: var(--t0); font-weight: 600; color: var(--soft); margin-left: var(--s2); }
.examen__nota--mal { color: var(--mal); }
.examen__lista { list-style: none; padding: 0; margin: var(--s3) 0; display: grid; gap: var(--s3); }
.examen__lista li { margin: 0; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.examen__lista li.es-mal { border-color: var(--mal-bd); background: var(--mal-bg); }
.examen__lista li.es-bien { border-color: var(--ok-bd); }
.bal-pregunta[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .puntos__lleno { transition: width .4s ease; } }

/* ---------------------------------------------------------------------------------------------------------
   La capa de «consultando» (app.js, capaProceso; portada de pe-placa, el patrón de mx-tv): fija sobre toda la página
   con el fondo oscurecido y desenfocado, la tarjeta de sbProcesar (sb-tools.css: .calc-load) tapa el formulario mientras
   el servidor consulta y se queda hasta que llega la respuesta. Con el filete coral de las tarjetas del sitio.
   --------------------------------------------------------------------------------------------------------- */
.capa-proceso { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--s4); background: rgba(11, 47, 91, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.capa-proceso[hidden] { display: none; }
.capa-proceso__caja { width: 100%; max-width: 440px; animation: capa-entra .26s cubic-bezier(.2, .8, .2, 1) both; }
.capa-proceso .calc-load { background: linear-gradient(var(--ambar-v), var(--ambar-v)) top / 100% 4px no-repeat, var(--surface); border: 0; border-radius: var(--r-l); box-shadow: 0 22px 55px rgba(0, 0, 0, .3); padding: calc(var(--s5) + 4px) var(--s5) var(--s5); }
@keyframes capa-entra { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .capa-proceso__caja { animation: none; } }
.con-capa { overflow: hidden; }   /* la página de abajo no se desplaza mientras está la capa */

/* «Y ahora, ¿qué?» (build 2.3): las rutas que salen de un resultado. El bloque .next, .cards y .card son los de sb-lib (sbRutas
   en el JS y sb_rutas_resultado en consulta.php); aquí se ven como las tarjetas del sitio, con el chip como insignia y, en las
   destacadas, el borde que ya tienen las tarjetas al pasar el puntero. Sin la flecha «Ver →» de la librería: las tarjetas
   del sitio no la llevan. */
.next { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--border); }
.next h2 { font-size: var(--t2); margin: 0 0 var(--s1); }
.next > p { color: var(--soft); margin: 0 0 var(--s4); }
.next .cards { margin: 0; }
.next .card { display: flex; flex-direction: column; align-items: flex-start; }
.next .card .chip { margin-bottom: var(--s2); }
.next .card__t { display: block; color: var(--marca); margin-bottom: var(--s1); font-size: var(--t1); font-weight: 700; }
.next .card__d { margin: 0; color: var(--soft); }
.next .card--feat { border-color: var(--marca-bd); box-shadow: var(--sh-2); }
.next .card::after { content: none; }

/* Documentos oficiales dibujados (build 1.5; partials/documentos.php): la hoja como el formulario impreso, en Arial y bandas grises,
   con cajas de borde fino; los números de las partes llevan la paleta de las infografías y se repiten en la leyenda. Nada mide
   más que la pantalla: las celdas se apilan solas. */
.docu { position: relative; overflow: hidden; background: #fff; color: #161a22; border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sh-2); font-family: Arial, Helvetica, sans-serif; font-size: .74rem; line-height: 1.3; max-width: 100%; text-align: left; }
.docu p, .hero .docu p { margin: 0; color: #161a22; }
/* La marca «Ejemplo»: el chip del sitio, arriba a la derecha, dentro de la hoja (una cinta girada se salía de la pantalla en el celular). */
.docu__marca { position: absolute; top: 8px; right: 8px; background: var(--ambar); color: #fff; padding: 2px 10px; border-radius: var(--r-pill); font: 800 .62rem/1.5 var(--font); letter-spacing: .12em; text-transform: uppercase; z-index: 1; }
.docu__cab { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 12px 14px 10px; border-bottom: 2px solid #3a3f47; }
.docu__logo { width: 64px; min-height: 40px; border: 1px dashed #99a0ab; display: grid; place-items: center; font-size: .5rem; line-height: 1.2; text-align: center; color: #6b7280; padding: 3px; }
.docu__tit { font-weight: 800; font-size: .86rem; letter-spacing: .03em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-right: 5rem; }
.docu__sub { margin-top: 2px; font-size: .62rem; color: #4b5563; }
.docu__banda { background: #e3e6ea; font-weight: 800; font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-top: 1px solid #3a3f47; border-bottom: 1px solid #3a3f47; display: flex; align-items: center; gap: 6px; }
.docu__fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); border-bottom: 1px solid #c3c8d0; }
.docu__celda { padding: 4px 10px 5px; border-right: 1px solid #d5d9df; min-width: 0; overflow-wrap: anywhere; }
.docu__celda:last-child { border-right: 0; }
.docu__k { display: block; font-size: .6rem; letter-spacing: .04em; text-transform: uppercase; color: #5b6472; }
.docu__v { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .74rem; color: #161a22; }
.docu__foto { min-height: 130px; display: grid; place-items: center; font-weight: 800; font-size: 1rem; letter-spacing: .06em; color: #6b7280; background: repeating-linear-gradient(135deg, rgba(0,0,0,.045) 0 1px, transparent 1px 9px), #f3f4f6; }
.docu__nota { padding: 6px 10px 8px; font-size: .56rem; color: #4b5563; border-top: 1px solid #c3c8d0; }
.docu__n { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; font: 800 .62rem/1 var(--font); flex: none; vertical-align: middle; margin-right: 6px; }
.docu__n--1 { background: var(--paso-1); } .docu__n--2 { background: var(--paso-2); } .docu__n--3 { background: var(--paso-3); } .docu__n--4 { background: var(--paso-4); } .docu__n--5 { background: var(--paso-5); } .docu__n--6 { background: var(--paso-6); } .docu__n--7 { background: var(--paso-7); }
.docu__pie { margin: var(--s2) 0 0; font-size: var(--t-1); color: rgba(255,255,255,.86); }
.docu__pie a { color: #fff; }
/* La tarjeta de la licencia: anverso y reverso, con la proporción de la tarjeta (8,5 por 5,4) como altura preferida. Sin
   overflow:hidden ni min-height a propósito: cualquiera de los dos fija la altura a la proporción y el anverso pierde el pie
   (la firma y el sello); con min-height:auto la tarjeta crece hasta su contenido (CSS Sizing 4, mínimo automático del ratio).
   El ancho va clavado (la columna minmax(0,1fr) y width:100%): un ítem de grid con aspect-ratio no se estira solo, y sin esto
   el ratio se transfería de la altura al ancho y la tarjeta medía 454 px en una pantalla de 360. */
.docu--licencia { background: none; border: 0; box-shadow: none; overflow: visible; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.tarj { position: relative; width: 100%; background: linear-gradient(135deg, #f7f9fc, #e8edf4); color: #161a22; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--sh-2); display: grid; grid-template-rows: auto 1fr auto; aspect-ratio: 85 / 54; }
.tarj__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 7px 5rem 5px 10px; font-size: .5rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #22324a; border-bottom: 1px solid #c3c8d0; }
.tarj__cab span:last-child { width: 100%; font-size: .66rem; }
.tarj__cuerpo { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: 8px; padding: 8px 10px; align-items: start; }
.tarj__foto { aspect-ratio: 3 / 4; display: grid; place-items: center; background: repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 1px, transparent 1px 7px), #dfe4ea; color: #4b5563; font-weight: 800; font-size: .7rem; border: 1px solid #c3c8d0; }
.tarj__foto--gris { filter: grayscale(1); }
.tarj__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 10px; }
.tarj__campos p { min-width: 0; overflow-wrap: anywhere; }
.tarj__campos .docu__k { font-size: .5rem; }
.tarj__campos .docu__v { font-size: .7rem; }
.tarj__pie { display: flex; justify-content: space-between; align-items: end; gap: 8px; padding: 4px 10px 8px; font-size: .58rem; text-transform: uppercase; letter-spacing: .04em; color: #4b5563; }
.tarj__firma { border-top: 1px solid #3a3f47; padding-top: 2px; min-width: 9rem; }
.tarj__sello { font-weight: 900; font-size: .9rem; letter-spacing: .08em; background: linear-gradient(90deg, #3b5f8f, #2bb38a, #ec6a55); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tarj__codigos { display: inline-flex; align-items: center; gap: 6px; }
.tarj__qr { width: 30px; height: 30px; border: 2px solid #161a22; background: repeating-conic-gradient(#161a22 0 25%, #fff 0 50%) 0 0 / 8px 8px; }
.tarj__barras { width: 64px; height: 22px; background: repeating-linear-gradient(90deg, #161a22 0 2px, #fff 2px 4px, #161a22 4px 5px, #fff 5px 8px); }
/* La figura dentro de una sección y la leyenda. */
.docu-fig { margin: var(--s4) 0; display: grid; gap: var(--s4); }
@media (min-width: 64rem) { .docu-fig { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.docu-ley { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.docu-ley li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; margin: 0; }
.docu-ley li { grid-template-columns: 1.5rem minmax(0, 1fr); }
.docu-ley li .docu__n { margin: 2px 0 0; width: 1.5rem; height: 1.5rem; font-size: .95rem; }
.docu-ley__nota { margin: var(--s3) 0 0; font-weight: 700; }
.docu-ley__fuente { margin: var(--s2) 0 0; font-size: var(--t-1); color: var(--soft); }
/* En el hero, a la derecha (Leandro, 20-oct): la columna del formulario. En el celular, debajo del texto. */
.hero .docu { max-width: 30rem; }
.hero .docu--licencia { max-width: 24rem; }