/* Estilo «Pacífico» (Claude Design, 21-10-2026; Downloads/sitio-pacifico/PARA-CLAUDE-CODE.md). Se carga después de
   app.css, en lugar de tema-acero.css: el diseño original del sitio (cabecera azul marino con línea celeste, hero celeste
   claro, Source Sans 3) y el formulario F4. La primera parte es la hoja del handoff tal cual (con los 13 y 14 px subidos a
   15: el piso del sitio para texto de lectura, decisión 3); la segunda, las piezas del sitio recoloreadas. */
/* Estilo «Pacífico» (Claude Design, 21-10-2026). Se carga después de app.css, en lugar de tema-acero.css: el diseño
   original del sitio (cabecera azul marino con línea celeste, hero celeste claro, Source Sans 3) y el formulario F4. */
.hero .consulta{background:#fff;border:0;border-radius:18px;padding:24px;box-shadow:0 14px 36px rgba(11,47,91,.12)}
.hero .consulta h2{margin:0 0 14px;font-size:22px;color:#0b2f5b}
.consulta .f4-sub{margin:-12px 0 14px;font-size:15px;color:#5b6270}
.consulta .campo input:not([type=hidden]):not([type=checkbox]):not([type=radio]),.consulta .campo select{border:1.5px solid #c9d1dc;border-radius:12px;min-height:52px;font-size:20px;font-weight:700;color:#0b2f5b}
.consulta .campo input:focus,.consulta .campo select:focus{border-color:#0b2f5b;box-shadow:0 0 0 4px #c4ecfb;outline:0}
.consulta .campo--placa input,.consulta .campo--dni input{font-size:26px!important;font-weight:800!important;letter-spacing:.14em;padding:12px 16px}
.consulta .campo--placa label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.consulta .campo--placa .campo__ayuda{margin-top:5px}
.consulta .campos-2{display:grid!important;grid-template-columns:1fr!important;gap:16px}
.consulta .campos-2 > .campo{margin:0;min-width:0}
.consulta .campo > label[data-tip]{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.consulta .campo > label[data-tip] .field__info{display:inline-grid;margin:0;flex:none}
.consulta .campo > label[data-tip] .field__tip{flex-basis:100%}
/* Opciones: baldosas con el check al lado del texto */
.consulta .selector{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:8px;align-items:stretch} /* stretch: app.css centra (flex) y las baldosas de una línea quedaban más bajas que las de dos */
.consulta .selector .opc{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:10px 12px;border-radius:12px;background:#f4f7fa;border:1.5px solid #d9e2ec;/* borde sutil: Leandro, 21-10 */color:#0b2f5b;text-align:center;white-space:normal;line-height:1.2;font-size:16px;font-weight:800;box-shadow:none}
.consulta .selector .opc:hover{border-color:#9fb0c4;background:#f4f7fa}
.consulta .selector .opc[aria-pressed="true"]{background:#e4f6fd;border-color:#6fd3f5}
.consulta .selector .opc[aria-pressed="true"]::before{content:"";width:18px;height:18px;flex:none;border-radius:50%;background:#6fd3f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.5l2.6 2.6L11 4.5' fill='none' stroke='%230b2f5b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.consulta .selector .opc:focus-visible{outline:3px solid #155fa8;outline-offset:2px}
/* El seleccionado de los selectores fuera del formulario (los filtros de la tabla: gravedad y orden), como la baldosa elegida
   del formulario pero sin el check (Leandro, 23-10): celeste claro con el borde celeste, en vez del celeste lleno de app.css.
   Dentro del formulario manda la regla de la baldosa, más específica. */
.opc[aria-pressed="true"]{background:#e4f6fd;border-color:#6fd3f5;color:#0b2f5b}
.consulta .selector--linea .selector__t{grid-column:1/-1;font-weight:700;font-size:15px;color:#1b2230;margin-bottom:-2px}
/* Home: mosaico de entidades (sigla + ámbito, check en la esquina) */
.consulta .selector--mosaico{grid-template-columns:repeat(3,minmax(0,1fr))}
.consulta .selector--mosaico .opc{flex-direction:column;gap:0;min-height:64px;padding:12px 8px}
.consulta .selector--mosaico .opc b{font-size:18px;font-weight:800;letter-spacing:.02em}
.consulta .selector--mosaico .opc small{font-size:15px;font-weight:600;color:#5b6270}
.consulta .selector--mosaico .opc[aria-pressed="true"]::before{position:absolute;top:6px;right:6px}
@media (max-width:26rem){.consulta .selector--mosaico{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* El aviso de arriba (Leandro, 21-10): negro y lo más bajo posible; el texto queda en 15 px, el piso del sitio */
.aviso-independiente{background:#000;color:#8f98a4;line-height:1.2;padding:2px 12px} /* gris medio, no blanco (Leandro: «menos contraste»): 6:1 sobre negro, por encima del 4,5 mínimo */
@media (max-width:24.99rem){.aviso-independiente{white-space:nowrap;padding:2px 8px}.aviso-independiente__x{display:none}} /* a 360 px no entra entero: queda «Sitio independiente. No somos el SAT ni el MTC», en una línea */

/* La línea de privacidad centrada, como el pie del formulario (Leandro, 22-10); el candado queda en el azul de app.css. En bloque y
   con el candado en la línea: con flex, cuando el texto partía en dos líneas el candado quedaba suelto a la izquierda. */
.consulta__privacidad{display:block;text-align:center}
.consulta__privacidad svg{display:inline-block;vertical-align:-3px;margin:0 6px 0 0}
/* Los botones con el texto en dos líneas (Leandro, 22-10: «se ve raro»): interlínea apretada, aire arriba y abajo y el texto
   a la izquierda junto al ícono (sin equilibrar las líneas: dejaba un hueco a la derecha). Los de una línea no cambian (48 px
   de alto mínimo). */
.btn{line-height:1.25;padding-top:10px;padding-bottom:10px;text-align:left}

/* Botón */
.consulta [data-sb-submit]{margin-top:16px;min-height:54px;border-radius:12px;background:#155fa8;color:#fff;font-size:18px}
.consulta [data-sb-submit]:hover{background:#0b2f5b;color:#fff}
/* El pie del formulario (Gratis · Sin registro · Fuentes oficiales; No sale a la red · Con la norma de cada cifra) se ve
   en todos los formularios: el handoff lo escondía y Leandro lo pidió de vuelta (21-10). Lo estila app.css. */

/* Hero de datos: las tres cifras como fichas */
.hero--datos .tarjetas{counter-reset:ficha;gap:12px}
.hero--datos .tarjetas > li{counter-increment:ficha}
.hero--datos .tarjeta{position:relative;height:100%;display:flex;flex-direction:column;gap:6px;padding:16px;border:0;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(11,47,91,.06),0 10px 28px rgba(11,47,91,.1);overflow:hidden}
.hero--datos .tarjeta::before{content:"0" counter(ficha);display:block;font-size:15px;font-weight:800;letter-spacing:.12em;color:#155fa8;padding-bottom:10px;margin-bottom:4px;border-bottom:1px solid #e3edf5}
.hero--datos .tarjeta::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:#6fd3f5}
.hero--datos .tarjetas > li:first-child .tarjeta::after{background:#ec6a55}
.hero--datos .tarjeta__num{font-size:28px;line-height:1.1;font-weight:800;letter-spacing:-.01em;color:#0b2f5b}
.hero--datos .tarjeta b{align-self:flex-start;padding:2px 10px;border-radius:12px;background:#e4f6fd;color:#0b2f5b;font-size:15px;font-weight:700;line-height:1.4}
.hero--datos .tarjeta span:not(.tarjeta__num){font-size:15px;line-height:1.45;color:#3a4250}
/* Las fichas más anchas (Leandro, 22-10: «tan delgado hace menos legible el texto»): en el escritorio el reparto pasa de
   1,05/,95 a ,88/1,12 con 40 px entre columnas (antes 48), y el relleno de la ficha de 18 a 16 px. A 1280 px el texto de cada
   ficha va de 128 a 161 px de ancho (promedio de las 32 páginas con fichas) y el hero no crece en ninguna. Un ,8/1,2 llegaba a
   174 px pero alargaba el hero 48 px de promedio y 150 en /atu/taxi: la columna del texto no puede bajar de unos 475 px. */
@media (min-width:64rem){.hero--datos .contenedor{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);column-gap:40px}}

/* Migas pegadas a la cabecera y el H1 alineado con el techo del formulario o de las fichas */
.hero .contenedor{position:relative;padding-top:52px}
.hero .migas{position:absolute;top:14px;left:var(--s4);right:var(--s4);margin:0}
.hero .migas ol{margin:0;flex-wrap:wrap;font-size:15px}
.hero .contenedor > div:first-child > h1{margin-top:0}
@media (min-width:64rem){.hero .contenedor{padding-top:60px}.hero .migas{top:18px}.hero--form .consulta,.hero--datos .tarjetas{margin-top:0}}
/* En una columna (celular y tableta) las migas van en el flujo, no en posición absoluta: con una ruta larga parten en dos
   líneas y la segunda caía sobre el H1 (/atu/taxi a 360 y 390 px; Leandro, 22-10; tests/anchos.mjs lo controla como PISADO).
   Los rellenos dejan el H1 donde estaba con las migas de una línea. En el escritorio siguen arriba y absolutas, para que el
   H1 quede alineado con el techo del formulario. */
@media (max-width:63.99rem){.hero .contenedor{padding-top:14px}.hero .migas{position:static;margin:0 0 15px}}
@media (max-width:39.99rem){.hero .contenedor{padding-top:10px}.hero .migas{margin-bottom:11px}}
/* La home no tiene migas: en una columna no hace falta reservarles el alto (Leandro, 22-10) */
@media (max-width:63.99rem){@supports selector(:has(*)){.hero .contenedor:not(:has(.migas)){padding-top:22px}}}
/* Celular y tableta (una columna): la línea «Actualizado…» va al final del hero, después del formulario o de las fichas
   (Leandro, 21-10; el Acero lo hacía así). El div del texto se disuelve (display:contents) y el hero pasa a columna sin
   gap, con los márgenes de cada pieza; la línea se manda al final con order. */
@media (max-width:63.99rem){
  .hero--form .contenedor{display:flex;flex-direction:column;gap:0}
  .hero--form .contenedor > div:first-child{display:contents}
  .hero--form .consulta,.hero--datos .tarjetas{margin-top:var(--s4)}
  .hero--form .hero__act{order:2;margin-top:var(--s4)}
}
/* …y la bajada se queda con la primera frase (sb_hero_lede en ui.php deja el resto en un span) */
@media (max-width:63.99rem){.hero .hero__lede-resto{display:none}}

/* Prueba del 21-10 (Leandro): el H1 del hero a 40 px en escritorio (app.css lo tenía en 36) y un filete coral arriba del card
   de los formularios, el mismo coral de la primera ficha del hero de datos. En celular el H1 sigue en 1.6 rem (app.css). */
@media (min-width:64rem){.hero h1{font-size:40px}}
.hero .consulta{border-top:3px solid #ec6a55}
/* El cierre del hero (Leandro, 21-10, tras probar cinco): una línea continua de 1 px en vez de la punteada de 3 de app.css */
.hero::after{content:"";display:block;height:0;border-bottom:1px solid var(--marca-bd)}
/* La leyenda bajo el documento del hero (/fotopapeletas, /impugnar): app.css la escribe en blanco para el hero oscuro; sobre el celeste claro va en gris */
.hero .docu__pie{color:#5b6270}
.hero .docu__pie a{color:#155fa8}
/* Los ✓ del hero: el mismo círculo con check del mosaico de entidades, en verde con el check blanco (Leandro, 21-10). El
   ícono «visto» queda en el HTML (sb_hero no cambia); el círculo es un ::before del li. */
.hero__puntos li > svg{display:none}
.hero__puntos li::before{content:"";width:20px;height:20px;flex:none;margin-top:2px;border-radius:50%;background:#1f9e78 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.5l2.6 2.6L11 4.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   Lo de abajo no viene del handoff: son las piezas que el sitio ya tenía con el tema Acero (06-design §2 bis) recoloreadas
   al Pacífico. El markup es el mismo (partials/consulta.php, assets/js/app.js y herramientas.js); acá sólo cambia la piel.
   Colores del handoff §4: estados verde #1f9e78 · rojo #c0392b · ámbar #c98a00 (claros #e3f6ef · #fdeceb · #fff4dc, textos
   #0f5a44 · #8c1d14 · #6b4700), azul marino #0b2f5b, azul #155fa8, celeste #6fd3f5, gris #f4f7fa.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── La página de resultado (handoff §4, Resultados.html): D1, la tarjeta a la izquierda (1,45) y «Y ahora» a la derecha (1) ── */
.hero .res-pagina{margin-top:var(--s4)}
.hero .res-pagina .res-vista{max-width:none;margin-top:0}
@media (min-width:60rem){
  .hero .res-pagina--d1{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:28px;align-items:start}
  .hero .res-pagina--d1 .ahora{position:sticky;top:16px;margin-top:0}
}
.hero .res-pagina__notas{margin-top:12px}
.hero .res-pagina__notas > p{margin:0 0 8px;max-width:75ch;font-size:15px;color:#3a4250}

/* La respuesta genérica (sb_resultado_vacio) y la R11/P3: blancas, radio 18; la genérica va ANTES porque su border:0 pisaría el borde de estado */
.hero .res-vista .resultado{background:#fff;border:0;border-radius:18px;box-shadow:0 14px 36px rgba(11,47,91,.12);margin:0}
/* La tarjeta: blanca, radio 18, borde de 4 px arriba en el color del estado */
.hero .res-vista .resultado--r11{background:#fff;border:0;border-top:4px solid #6fd3f5;border-radius:18px;overflow:hidden;box-shadow:0 14px 36px rgba(11,47,91,.12);padding:0;margin:0;color:var(--ink)}
.hero .res-vista .resultado--ok{border-top-color:#1f9e78}
.hero .res-vista .resultado--tiene{border-top-color:#c0392b}
.hero .res-vista .resultado--error{border-top-color:#c98a00}
/* La franja: fondo claro del estado, texto oscuro del mismo tono, el círculo fuerte con el ícono blanco, la hora a la derecha */
.hero .res-vista .r11__franja{display:flex;align-items:center;gap:12px;margin:0;padding:15px 22px;font-weight:800;font-size:17px;background:#e4f6fd;color:#0b2f5b}
.hero .res-vista .resultado--ok .r11__franja{background:#e3f6ef;color:#0f5a44}
.hero .res-vista .resultado--tiene .r11__franja{background:#fdeceb;color:#8c1d14}
.hero .res-vista .resultado--error .r11__franja{background:#fff4dc;color:#6b4700}
.hero .res-vista .r11__franja svg{width:28px;height:28px;padding:5px;border-radius:50%;flex:none;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;color:#fff;background:#0b2f5b}
.hero .res-vista .resultado--ok .r11__franja svg{background:#1f9e78}
.hero .res-vista .resultado--tiene .r11__franja svg{background:#c0392b}
.hero .res-vista .resultado--error .r11__franja svg{background:#c98a00}
.hero .res-vista .resultado--neutro .r11__franja svg{background:#9aa5b4}
.hero .res-vista .r11__t{flex:1 1 0;min-width:0}   /* base cero: el texto se queda en la línea del ícono y parte adentro */
.hero .res-vista .r11__franja time,.hero .res-vista .r11__franja .r11__cuando{margin-left:auto;flex:none;font-size:15px;font-weight:600;color:#3a4250;white-space:nowrap}
.hero .res-vista .r11__cuerpo{padding:20px 22px 22px}
.hero .res-vista .r11__doc{margin:0;font-size:28px;line-height:1.15;font-weight:800;letter-spacing:.14em;color:#0b2f5b;font-variant-numeric:tabular-nums;background:none;border:0;padding:0}
.hero .res-vista .r11__doc small{display:block;margin-bottom:2px;font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;color:#5b6270}
.hero .res-vista .r11__sub{margin:4px 0 0;font-size:15px;color:#3a4250}
/* Las filas: grises, desplegables; abiertas, blancas con borde */
.hero .res-vista .r11__filas{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.hero .res-vista .r11__fila{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;margin:0;padding:11px 14px;border-radius:12px;background:#f4f7fa;color:var(--ink)}
.hero .res-vista .r11__fila b{color:#0b2f5b;line-height:1.25}
.hero .res-vista .r11__v{font-weight:800;text-align:right;color:#14674f;font-variant-numeric:tabular-nums}
.hero .res-vista .r11__ic{width:30px;height:30px;flex:none;border-radius:50%;background:#1f9e78;color:#fff;display:grid;place-items:center;font:800 16px/1 var(--font)}
.hero .res-vista .r11__ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hero .res-vista .r11__fila--tiene .r11__ic{background:#c0392b}
.hero .res-vista .r11__fila--tiene .r11__v{color:#a8241a}
.hero .res-vista .r11__fila--error .r11__ic{background:#c98a00}
.hero .res-vista .r11__fila--error .r11__v{color:#8a5a00}
.hero .res-vista .r11__fila--na .r11__ic,.hero .res-vista .r11__fila--neutro .r11__ic{background:#9aa5b4}
.hero .res-vista .r11__fila--na .r11__v,.hero .res-vista .r11__fila--neutro .r11__v{color:#5b6270}
@supports selector(:has(*)){
  .hero .res-vista .r11__fila:has(details){padding:0;display:block}
  .hero .res-vista .r11__fila:has(details[open]){background:#fff;box-shadow:inset 0 0 0 1.5px #dfe4ea}
}
.hero .res-vista .r11__fila details{width:100%}
.hero .res-vista .r11__fila summary{display:grid;grid-template-columns:30px minmax(0,1fr) auto 12px;gap:12px;align-items:center;padding:11px 14px;list-style:none;cursor:pointer}
.hero .res-vista .r11__fila summary::-webkit-details-marker{display:none}
.hero .res-vista .r11__fila summary::after{content:"";width:8px;height:8px;border-right:2.4px solid #5b6270;border-bottom:2.4px solid #5b6270;transform:rotate(45deg) translateY(-3px);transition:transform .15s}
.hero .res-vista .r11__fila details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.hero .res-vista .r11__fila details p{margin:0;padding:0 14px 14px 56px;font-size:15px;color:#3a4250}
.hero .res-vista .r11__fila details .acciones{margin:0;padding:0 14px 14px 56px}
/* La entidad con papeletas, abierta: cada papeleta con el código en píldora, la descripción a la izquierda y el monto a la derecha */
@supports selector(:has(*)){
  .hero .res-vista .r11__fila--tiene:has(.r11__fila-h){display:block;padding:11px 14px 14px;background:#fff;box-shadow:inset 0 0 0 1.5px #dfe4ea}
}
.hero .res-vista .r11__fila-h{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center}
.hero .res-vista .r11__paps{list-style:none;margin:12px 0 0 42px;padding:0;display:grid;gap:8px}
.hero .res-vista .r11__pap{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;margin:0;padding:12px 14px;border-radius:10px;background:#f4f7fa}
.hero .res-vista .r11__pap > div:first-child{flex:1 1 16rem;min-width:0;display:grid;align-content:start}
.hero .res-vista .r11__pap .cod{justify-self:start;font-size:15px;font-weight:800;color:#0b2f5b;background:#e4f6fd;border-radius:6px;padding:0 7px}
.hero .res-vista .r11__pap span{display:block;font-size:15px;color:#5b6270;margin-top:4px}
.hero .res-vista .r11__monto{margin-left:auto;text-align:right;display:grid;justify-items:end;align-content:start}
.hero .res-vista .r11__monto strong{display:block;font-size:22px;line-height:1.1;font-weight:800;color:#0b2f5b;font-variant-numeric:tabular-nums}
.hero .res-vista .r11__monto small{display:block;font-size:15px;font-weight:700;color:#14674f;max-width:22rem}
.hero .res-vista .r11__fila--tiene .acciones{margin:12px 0 0 42px}
.hero .res-vista .r11__texto{margin:14px 0 0;font-size:15px;color:#3a4250;max-width:none}
.hero .res-vista .r11__detalle{margin-top:16px}
.hero .res-vista .r11__detalle > :first-child{margin-top:0}
.hero .res-vista .r11__detalle .datos,.hero .res-vista .r11__detalle .papeletas{background:#f4f7fa;border-radius:12px;padding:6px 14px}
.hero .res-vista .r11__detalle .papeletas{list-style:none;margin:12px 0 0;display:grid;gap:0}
.hero .res-vista .r11__detalle .papeleta{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin:0;border:0;border-bottom:1px solid #e3e8ef;border-radius:0;background:none;padding:10px 0}
.hero .res-vista .r11__detalle .papeleta > *{min-width:0}
.hero .res-vista .r11__detalle .papeleta:last-child{border-bottom:0}
.hero .res-vista .r11__detalle .papeleta__cod{font-weight:800;color:#0b2f5b;letter-spacing:.04em}
.hero .res-vista .r11__detalle .papeleta__desc{color:#3a4250;flex:1 1 16rem}
.hero .res-vista .r11__detalle .papeleta__monto{margin-left:auto;font-weight:800;color:#0b2f5b;font-variant-numeric:tabular-nums}
.hero .res-vista .r11__fuente{margin:18px 0 0;padding-top:14px;border-top:1px solid #e3edf5;font-size:15px;line-height:1.45;color:#5b6270;max-width:none}
/* Botones del resultado: el primario azul, los demás con borde; todos de radio 12 */
.hero .res-vista .resultado--r11 .acciones{margin:18px 0 0;gap:8px}
.hero .res-vista .resultado--r11 .btn{border-radius:12px;min-height:48px;font-weight:800}
.hero .res-vista .resultado--r11 .btn--primario,.hero .res-vista .resultado--r11 .btn--oscuro{background:#155fa8;color:#fff;border:0;box-shadow:none}
.hero .res-vista .resultado--r11 .btn--primario:hover,.hero .res-vista .resultado--r11 .btn--oscuro:hover{background:#0b2f5b;color:#fff}
.hero .res-vista .resultado--r11 .btn--secundario,.hero .res-vista .resultado--r11 .btn--celeste,.hero .res-vista .resultado--r11 .btn--fantasma,.hero .res-vista .resultado--r11 .btn--oficial{background:#fff;color:#0b2f5b;border:0;box-shadow:inset 0 0 0 1.5px #c9d1dc}
.hero .res-vista .resultado--r11 .btn--secundario:hover,.hero .res-vista .resultado--r11 .btn--celeste:hover,.hero .res-vista .resultado--r11 .btn--fantasma:hover,.hero .res-vista .resultado--r11 .btn--oficial:hover{background:#fff;color:#0b2f5b;box-shadow:inset 0 0 0 1.5px #0b2f5b}
/* La respuesta genérica (sb_resultado_vacio): tarjeta blanca, el mensaje en un panel teñido por el chip, con su ícono */
.hero .res-vista .resultado--vacio{padding:26px 24px 24px;border-top:4px solid #6fd3f5}
@supports selector(:has(*)){
  .hero .res-vista .resultado--vacio:has(.chip--ok){border-top-color:#1f9e78}
  .hero .res-vista .resultado--vacio:has(.chip--atencion){border-top-color:#c98a00}
  .hero .res-vista .resultado--vacio:has(.chip--alerta){border-top-color:#c0392b}
}
.hero .res-vista .resultado__cabeza{justify-content:flex-start;align-items:center;gap:10px 14px;border-bottom:0;padding-bottom:0;margin-bottom:16px}
.hero .res-vista .resultado__placa{color:#0b2f5b;font-size:26px;letter-spacing:.14em}
.hero .res-vista .resultado__mensaje{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;align-items:start;background:#f4f7fa;border-radius:12px;padding:16px 18px;margin:0 0 16px}
.hero .res-vista .resultado__mensaje > *{grid-column:2}
.hero .res-vista .resultado__mensaje > :first-child{margin-top:0}
.hero .res-vista .resultado__mensaje > :last-child{margin-bottom:0}
.hero .res-vista .resultado__mensaje::before{content:"i";grid-column:1;grid-row:1/span 9;width:40px;height:40px;border-radius:50%;background:#9aa5b4;color:#fff;font:800 20px/40px var(--font);text-align:center}
@supports selector(:has(*)){
  .hero .res-vista .resultado--vacio:has(.chip--ok) .resultado__mensaje{background:#e3f6ef}
  .hero .res-vista .resultado--vacio:has(.chip--ok) .resultado__mensaje::before{content:"";background:#1f9e78 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
  .hero .res-vista .resultado--vacio:has(.chip--atencion) .resultado__mensaje{background:#fff4dc}
  .hero .res-vista .resultado--vacio:has(.chip--atencion) .resultado__mensaje::before{content:"!";background:#c98a00}
  .hero .res-vista .resultado--vacio:has(.chip--alerta) .resultado__mensaje{background:#fdeceb}
  .hero .res-vista .resultado--vacio:has(.chip--alerta) .resultado__mensaje::before{content:"!";background:#c0392b}
}
.hero .res-vista .resultado__titulo{margin:0 0 6px}
.hero .res-vista .resultado__titulo strong{color:#0b2f5b;font-size:18px}
.hero .res-vista .resultado--vacio .acciones{margin:0} /* sólo la tarjeta vacía: la genérica pisaba los 18 px de la R11 y el botón quedaba pegado al aviso */

/* ── Las calculadoras (/descuentos, /impuesto-vehicular): la misma tarjeta, con filas de datos y la cifra grande ── */
.hero .res-vista .r11__fila--dato{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:12px}
.hero .res-vista .r11__fila--dato b{color:#3a4250;font-weight:600}
.hero .res-vista .r11__fila--dato .r11__v{color:#0b2f5b}
.hero .res-vista .r11__cifra{margin:16px 0 0}
.hero .res-vista .r11__cifra strong{display:block;font-size:34px;line-height:1.05;font-weight:800;color:#0b2f5b;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hero .res-vista .r11__cifra small{display:block;margin-top:4px;font-size:15px;font-weight:700;color:#3a4250}
.hero .res-vista .resultado .aviso{margin:16px 0 0;max-width:none;border-radius:12px}

/* ── El panel «Y ahora, ¿qué?» (handoff §4): blanco con borde celeste arriba; sugerencias grises con ícono azul marino; las dos
      primeras en celeste claro con el ícono azul. Vale dentro y fuera del hero (el simulador y el examen lo ponen en su bloque). ── */
:is(.hero,.seccion,.res-vista) .ahora{background:#fff;border-top:4px solid #6fd3f5;border-radius:18px;padding:20px;box-shadow:0 14px 36px rgba(11,47,91,.1);margin-top:24px}
.seccion .ahora{box-shadow:none;border:1px solid var(--border);border-top:4px solid #6fd3f5;margin-top:20px}
:is(.hero,.seccion,.res-vista) .ahora h2{margin:0;padding:0;font-size:22px;font-weight:800;color:#0b2f5b}
:is(.hero,.seccion,.res-vista) .ahora h2::before{display:none}
:is(.hero,.seccion,.res-vista) .ahora__s{margin:2px 0 0;font-size:15px;color:#3a4250}
:is(.hero,.seccion,.res-vista) .ahora__lista{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
:is(.hero,.seccion,.res-vista) .ahora__lista li{margin:0}
:is(.hero,.seccion,.res-vista) .ahora__item{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;align-content:start;height:100%;padding:12px;border-radius:12px;background:#f4f7fa;color:#3a4250;text-decoration:none}
:is(.hero,.seccion,.res-vista) .ahora__item > :not(.ahora__ic){grid-column:2}
:is(.hero,.seccion,.res-vista) .ahora__item:hover{color:#3a4250;box-shadow:inset 0 0 0 1.5px #9fb0c4}
:is(.hero,.seccion,.res-vista) .ahora__item b{display:block;font-size:16px;color:#0b2f5b}
:is(.hero,.seccion,.res-vista) .ahora__d{display:block;margin-top:2px;font-size:15px;color:#3a4250}
:is(.hero,.seccion,.res-vista) .ahora__ic{grid-row:1/4;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:#0b2f5b;color:#fff}
:is(.hero,.seccion,.res-vista) .ahora__ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:is(.hero,.seccion,.res-vista) .ahora__tag{justify-self:start;margin-bottom:3px;padding:1px 9px;border-radius:999px;font-size:15px;font-weight:800;letter-spacing:.02em;background:#fff;color:#155fa8}
:is(.hero,.seccion,.res-vista) .ahora__item--dest{background:#e4f6fd;box-shadow:inset 0 0 0 1.5px #6fd3f5}
:is(.hero,.seccion,.res-vista) .ahora__item--dest:hover{box-shadow:inset 0 0 0 1.5px #155fa8}
:is(.hero,.seccion,.res-vista) .ahora__item--dest .ahora__ic{background:#155fa8}

/* ── La tarjeta «consultando» C1 (app.js), en Pacífico: cabecera azul marino con la línea celeste ── */
.consultando{width:100%;max-width:440px;border-radius:18px;overflow:hidden;background:#e4f6fd;box-shadow:0 22px 55px rgba(0,0,0,.3);color:var(--ink)}
.consultando__h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;background:#0d2d57;color:#fff;border-bottom:4px solid #6fd3f5}
.consultando__h small{display:block;font-size:15px;font-weight:700;color:#b9cbe0}
.consultando__h b{font-size:22px;letter-spacing:.14em;font-variant-numeric:tabular-nums}
.consultando__pct{font-size:28px;font-weight:800;color:#6fd3f5;font-variant-numeric:tabular-nums}
.consultando__barra{height:6px;background:rgba(11,47,91,.1)}
.consultando__barra i{display:block;height:100%;background:#6fd3f5;transition:width .5s ease}
.consultando__b{padding:16px 18px 18px}
.consultando__pasos{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.paso{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.55);font-size:15px;font-weight:600;color:#5b6270;transition:background .2s}
.paso .paso__t{min-width:0}
.paso em{margin-left:auto;font-style:normal;font-size:15px;font-weight:700;flex:none}
.paso__ic{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 2px #dfe4ea;color:#9aa5b4;font-size:15px;font-weight:800}
.paso__ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.paso--ok{background:#fff;color:#0b2f5b}
.paso--ok .paso__ic{background:#1f9e78;box-shadow:none;color:#fff}
.paso--ok em{color:#14674f}
.paso--ahora{background:#fff;color:#0b2f5b;font-weight:800;box-shadow:0 0 0 2px #6fd3f5}
.paso--ahora .paso__ic{background:none;box-shadow:none;border:3px solid #c4ecfb;border-top-color:#155fa8;animation:paso-gira .8s linear infinite}
.paso--ahora em{color:#155fa8}
.paso--error{background:#fff;color:#0b2f5b}
.paso--error .paso__ic{background:#c98a00;box-shadow:none;color:#fff}
.paso--error em{color:#8a5a00}
.consultando__nota{margin:12px 0 0;font-size:15px;line-height:1.45;color:#3a4250}
@keyframes paso-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.paso--ahora .paso__ic{animation:none}.consultando__barra i{transition:none}}

/* ── Celular ── */
@media (max-width:39.99rem){
  .hero .res-vista .r11__franja{flex-wrap:nowrap;padding:14px 18px;gap:10px}
  .hero .res-vista .r11__franja time,.hero .res-vista .r11__franja .r11__cuando{display:none}   /* ni la hora ni «guardado»: hacían partir el texto (Leandro, 20-10) */
  .hero .res-vista .r11__cuerpo{padding:18px}
  .hero .res-vista .r11__doc{font-size:24px}
  .hero .res-vista .r11__fila details p,.hero .res-vista .r11__fila details .acciones{padding-left:14px}
  .hero .res-vista .r11__paps,.hero .res-vista .r11__fila--tiene .acciones{margin-left:0}
  .hero .res-vista .r11__pap{flex-direction:column}
  .hero .res-vista .r11__pap > div:first-child,.hero .res-vista .r11__pap > .r11__monto{flex:0 0 auto}
  .hero .res-vista .r11__monto{margin-left:0;text-align:left;justify-items:start}
  .hero .res-vista .resultado--r11 .acciones .btn{width:100%}
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   El contenido, con la disposición del tema Acero (Leandro, 21-10: «me gustaba cómo teníamos la disposición antes en el
   contenido»; y después «evita las cards, que sea todo el fondo blanco»): la página blanca y las secciones sin tarjeta,
   con el título a la izquierda (filete coral corto debajo) y el texto a la derecha desde 64 rem, el ejemplo en una caja
   gris, las tarjetas y avisos planos. Son las reglas de
   tema-acero.css (commit 7fb7d1a, bloques «El contenido», «Resultado, datos y piezas», «Avisos, tarjetas…», «Ajustes
   para que el contenido calce con /puntos» e «Infografías»), acotadas a .seccion donde la pieza también vive en el hero,
   para que la tarjeta del resultado siga siendo la del Pacífico. Sin Manrope ni la escala de títulos del Acero.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root{--acero:#3b5f8f;--acero-d:#22324a;--coral:#ec6a55;--tile:#eef1f5;--surface-alt:#f5f7fa}
.seccion > h2{padding-top:0;font-size:22px;position:relative;padding-bottom:12px;font-weight:800;color:var(--marca-tinta);letter-spacing:-.02em}
.seccion h3{font-weight:800;color:var(--acero-d);letter-spacing:-.02em}
.seccion > h2::before{display:block;content:"";position:absolute;left:0;top:auto;bottom:0;width:36px;height:4px;border-radius:2px;background:var(--coral)}
@media (min-width:64rem){.seccion > h2{font-size:24px}}
/* Separación sutil entre secciones (Leandro, 21-10): una línea fina arriba de cada sección desde la segunda, con el mismo aire a cada lado */
.seccion + .seccion{margin-top:36px;padding-top:36px;border-top:1px solid #e3edf5}
@media (min-width:64rem){.seccion + .seccion{margin-top:44px;padding-top:44px}}
@media (min-width:64rem){
  @supports selector(:has(*)){
    .seccion:has(> h2:first-child){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);column-gap:48px;align-items:start}
    .estrecho .seccion:has(> h2:first-child){display:block}
    .seccion:has(> h2:first-child) > *{grid-column:2;max-width:none}
    .seccion:has(> h2:first-child) > h2{grid-column:1;margin:0;padding-right:8px;line-height:1.15}
    .seccion:has(> h2:first-child) > h2 + *{margin-top:0}
    .seccion:has(> h2:first-child) > p{max-width:none}
    .seccion:has(> h2:first-child) > :is(.resultado,.tarjetas,.cards,.tabla,table,.entidades,.res-vista,.calc-res,.examen-app,.muestras,.logos,.datos--2,.tabla-barra,.docu-fig){grid-column:1/-1}
    .seccion:has(> h2:first-child) > :is(.resultado,.tarjetas,.cards,.tabla,table,.entidades,.res-vista,.calc-res,.examen-app,.muestras,.logos,.datos--2,.tabla-barra,.docu-fig) ~ *{grid-column:1/-1}
    .seccion > h2:first-child:has(+ :is(.resultado,.tarjetas,.cards,.tabla,table,.entidades,.res-vista,.calc-res,.examen-app,.muestras,.logos,.datos--2,.tabla-barra,.docu-fig)){grid-column:1/-1}
  }
  .seccion > h2:first-child + :is(.resultado,.tarjetas,.cards,.tabla,table,.entidades,.res-vista,.calc-res,.examen-app,.muestras,.logos,.datos--2,.tabla-barra,.docu-fig){margin-top:20px}
}
.actualizado,.fuente{font-size:15px;color:var(--muted);margin-top:14px}
.ejemplo{color:#a8372a;background:#fdeeeb;border:0;font-size:15px;padding:3px 10px}
/* Las piezas dentro de las secciones */
/* Los botones del contenido (Leandro, 21-10: «dale color sólido»): el secundario, que app.css dibuja con borde y texto azul,
   pasa a azul sólido con texto blanco; el oficial (sale del sitio: gob.pe, el SAT) también sólido, pero en azul acero, un tono
   más apagado, para que se siga notando que es otra cosa. */
.seccion .btn--secundario,.respuesta .btn--secundario{background:var(--marca);color:#fff;border-color:var(--marca)}
.seccion .btn--secundario:hover,.respuesta .btn--secundario:hover{background:var(--marca-d);color:#fff;border-color:var(--marca-d)}
.seccion .btn--oficial,.respuesta .btn--oficial{background:var(--acero);color:#fff;border-color:var(--acero);font-weight:700}
.seccion .btn--oficial:hover,.respuesta .btn--oficial:hover{background:#2f4d75;color:#fff;border-color:#2f4d75}
.seccion .resultado{border:0;border-radius:20px;box-shadow:none;background:var(--surface-alt)}
.seccion .entidad{border-radius:14px;border-width:1px}
.seccion .entidad--na{border:0}
.seccion .resultado__cifra,.seccion .puntos__total,.seccion .tarjeta__num{color:var(--acero-d);letter-spacing:-.03em}
.seccion .dato{border-bottom-color:var(--tile)}
.seccion .cuenta{background:#fdeeeb;border:0;border-radius:14px}
.seccion .aviso{border:1px solid var(--border);border-left-width:1px;border-radius:16px;max-width:none}
.seccion .aviso--info{border-color:#c4ecfb}
.seccion .aviso--atencion{border-color:#f0dcae;background:#fff8ec}
.seccion .aviso--atencion .aviso__titulo{color:#7a5000}
.seccion .callout{border-left:0;border-radius:16px;background:var(--surface-alt);max-width:none}
.seccion .tarjeta,.seccion .cards a{border:0;border-radius:14px;box-shadow:none;background:var(--surface-alt)}
.seccion a.tarjeta:hover,.seccion .cards a:hover{background:#e6ecf3;box-shadow:none}
.seccion .tarjeta b,.seccion .cards strong{color:var(--marca-tinta)}
.seccion .tarjeta span,.seccion .cards span{font-size:16px;color:#3a4250}
/* Las tablas (Leandro, 21-10: «dale una mejor estética»): marco de borde fino y radio 16, cabecera en gris claro sin
   mayúsculas, filas alternadas apenas, el código como píldora celeste (la misma de las papeletas en la R11) y las cifras
   a la derecha. Debajo de 48 rem (64 en las anchas) app.css las vuelve tarjetas por fila y el marco se quita. */
.seccion .tabla{border-collapse:separate;border-spacing:0;border:1px solid #dbe9f3;border-radius:16px;overflow:hidden;background:#fff;font-size:16px;box-shadow:0 1px 2px rgba(11,47,91,.05),0 8px 24px rgba(11,47,91,.07)}
.seccion .tabla caption{caption-side:top;font-size:18px;font-weight:800;color:var(--marca-tinta);margin:0 0 10px}
.seccion .tabla thead th{background:var(--acero);text-transform:none;letter-spacing:0;font-size:15px;font-weight:700;color:#fff;padding:13px 18px;border-bottom:3px solid #ec6a55}
.seccion .tabla thead th.num{color:#fff}
/* Las esquinas redondeadas van en las celdas, no sólo en el overflow de la tabla (Safari no recorta las tablas) */
.seccion .tabla thead tr:first-child th:first-child{border-top-left-radius:15px}
.seccion .tabla thead tr:first-child th:last-child{border-top-right-radius:15px}
.seccion .tabla tbody tr:last-child > :first-child{border-bottom-left-radius:15px}
.seccion .tabla tbody tr:last-child > :last-child{border-bottom-right-radius:15px}
.seccion .tabla td,.seccion .tabla tbody th{padding:14px 18px;border-bottom:1px solid #e8eef5;color:#3a4250}
.seccion .tabla tbody th,.seccion .tabla tbody td:first-child{color:#0b2f5b;font-weight:700}
.seccion .tabla tbody tr:last-child td,.seccion .tabla tbody tr:last-child th{border-bottom:0}
.seccion .tabla tbody tr:nth-child(even){background:#f7fafc}
.seccion .tabla tbody tr:hover{background:#f4f7fa}
.seccion .tabla td.num{color:#0b2f5b;font-weight:600}
@media (min-width:48rem){.seccion .tabla td.num,.seccion .tabla thead th{white-space:nowrap}.seccion .tabla thead th{vertical-align:bottom}.seccion .tabla--ancha thead th{white-space:normal;min-width:5em;text-wrap:balance}}
/* Las cifras y los rótulos van en una línea («S/ 440,00» partía en tres). Sólo en la tabla ancha (la de infracciones, nueve
   columnas) los rótulos parten, con un piso de 5em por columna y las líneas equilibradas: sin el piso partían en su palabra más
   corta («% / de / la / UIT»), y en una línea dejaban la descripción en 277 px; así ninguno pasa de dos líneas (cabecera de 76 px)
   y la descripción conserva 400. En las demás, partir dejaba la cabecera alta con lugar de sobra (Leandro, 23-10: «quedó
   alto»). Medido en las 95 tablas del sitio a 768, 1024 y 1280 px: en una línea ninguna desborda. */
@media (min-width:64rem){.seccion .tabla--ancha th,.seccion .tabla--ancha td{padding-left:14px;padding-right:14px}}
.seccion .tabla .cod{display:inline-block;padding:2px 10px;border-radius:999px;background:#e4f6fd;color:#0b2f5b;font-weight:800;font-size:15px;line-height:1.5;text-decoration:none;white-space:nowrap}
.seccion .tabla a.cod:hover{background:#c4ecfb}
/* El código con el color de su gravedad (Leandro, 22-10-2026): leve verde, grave ámbar, muy grave rojo; los tonos de los chips del sitio. */
.cod--l,.seccion .tabla .cod--l,.hero .res-vista .r11__pap .cod--l{background:#e3f6ef;color:#136c4a}.seccion .tabla a.cod--l:hover,a.cod--l:hover{background:#c9eedd}
.cod--g,.seccion .tabla .cod--g,.hero .res-vista .r11__pap .cod--g{background:#fff4dc;color:#7a4b00}.seccion .tabla a.cod--g:hover,a.cod--g:hover{background:#ffe9b8}
.cod--m,.seccion .tabla .cod--m,.hero .res-vista .r11__pap .cod--m{background:#fdeceb;color:#a8372a}.seccion .tabla a.cod--m:hover,a.cod--m:hover{background:#f9d6d2}
@media (max-width:47.99rem){.seccion .tabla{border:0;border-radius:0;background:none;box-shadow:none}.seccion .tabla tbody tr:nth-child(even){background:var(--surface-alt)}}
@media (max-width:63.99rem){.seccion .tabla--ancha{border:0;border-radius:0;background:none;box-shadow:none}.seccion .tabla--ancha tbody tr:nth-child(even){background:var(--surface-alt)}}
@media (max-width:47.99rem){.seccion .tabla tr{border:0;background:var(--surface-alt);border-radius:14px}.seccion .tabla tbody tr:hover{background:var(--surface-alt)}}
@media (max-width:63.99rem){.seccion .tabla--ancha tr{border:0;background:var(--surface-alt);border-radius:14px}.seccion .tabla--ancha tbody tr:hover{background:var(--surface-alt)}}
/* Las tablas largas de las guías, cortas en el celular (Leandro, 23-10): con tabla--movil-10, herramientas.js marca la tabla
   (tabla--tapada) y agrega «Ver las N»; debajo de 48 rem se ven 10 filas. Sin JS se ven todas; en el escritorio, siempre. */
.tabla-mas.tabla-ver-todas{display:none}   /* más específico que .tabla-mas{display:flex}, que está más abajo */
@media (max-width:47.99rem){.tabla--tapada tbody tr:nth-child(n+11){display:none}.tabla--tapada + .tabla-mas.tabla-ver-todas{display:flex}}
/* Las tablas son tarjetas en el celular (app.css: una por fila, el rótulo de cada celda sale de data-label). Leandro, 22-10:
   «se ve raro, muy chico y salto de línea innecesario». La primera celda es el título de la tarjeta, sin rótulo y más grande
   (el código en píldora o el nombre en negrita); en las demás el valor va al lado del rótulo si entra y abajo si es largo
   (flex con wrap: el valor ocupa lo que mide su texto). Sin el relleno ni las líneas de la tabla de escritorio. */
@media (max-width:47.99rem){
  .seccion .tabla tr{padding:12px 16px;margin-bottom:10px}
  .seccion .tabla td{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:8px 0;border:0;border-top:1px solid #e3eaf2}
  .seccion .tabla td::before{flex:0 0 8.5rem;font-weight:700;color:#3a4250}
  .seccion .tabla td .tabla__v{flex:1 1 auto;min-width:0;text-align:left}
  .seccion .tabla td:first-child{border-top:0;padding:2px 0 8px}
  .seccion .tabla td:first-child::before{display:none}
  .seccion .tabla td:first-child .tabla__v{font-size:17px;font-weight:800;line-height:1.3;color:#0b2f5b}
  .seccion .tabla td:first-child .cod{font-size:17px;padding:3px 12px}
}
@media (min-width:48rem) and (max-width:63.99rem){
  .seccion .tabla--ancha tr{padding:12px 16px;margin-bottom:10px}
  .seccion .tabla--ancha td{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:8px 0;border:0;border-top:1px solid #e3eaf2}
  .seccion .tabla--ancha td::before{flex:0 0 8.5rem;font-weight:700;color:#3a4250}
  .seccion .tabla--ancha td .tabla__v{flex:1 1 auto;min-width:0;text-align:left}
  .seccion .tabla--ancha td:first-child{border-top:0;padding:2px 0 8px}
  .seccion .tabla--ancha td:first-child::before{display:none}
  .seccion .tabla--ancha td:first-child .tabla__v{font-size:17px;font-weight:800;line-height:1.3;color:#0b2f5b}
  .seccion .tabla--ancha td:first-child .cod{font-size:17px;padding:3px 12px}
}
.seccion .pasos{max-width:none}
.seccion .pasos b{color:var(--marca-tinta)}
.seccion .linea::before{background:#c9d1dc}
.seccion .linea li::before{border-color:#fff}
.seccion .faq details{border-top-color:var(--border);padding:16px 0}
.seccion .faq summary{font-size:18px;color:var(--ink)}
.seccion .faq summary::after{color:var(--acero);font-weight:400;font-size:26px}
.seccion .faq__a{color:var(--soft);max-width:62ch}
.seccion .faq__a,.seccion .faq details p{font-size:16px}
.seccion .chip--marca{color:var(--marca-tinta);background:#e4f6fd;border-color:#c4ecfb}
.seccion > p:not(.fuente):not(.actualizado),.seccion > ul:not([class]) li,.seccion > ol:not([class]) li{color:#3a4250;font-size:16px}
.seccion > p strong,.seccion > p b{color:var(--ink)}
/* El pie: cada grupo va en su .pie-grupo (layout.php). Los títulos, todos en mayúsculas como los de las familias (los de
   app.css: .pie-cols h2 y .pie-sub; Leandro, 23-10). En escritorio, como antes: cuatro columnas y el segundo grupo de una
   columna separado. En el celular (Leandro, 22-10: «la mejor organización de links»): los grupos cortos de a dos por fila
   (Consultar | Pagar y reclamar; Infracciones | El sitio), las dos familias a lo ancho y apretadas (las ciudades en tres
   columnas, los códigos en cuatro) y Legal en una línea al final. Antes los 23 códigos en dos columnas dejaban media
   pantalla vacía al lado de «El sitio». */
.pie-grupo + .pie-grupo{margin-top:var(--s4)}
.pie-grupo .pie-sub{margin-top:0}
.pie-grupo h2,.pie-grupo .pie-sub{margin-bottom:6px}
@media (max-width:47.99rem){
  .pie-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
  .pie-col{display:contents}
  .pie-grupo + .pie-grupo{margin-top:0}
  .pie-grupo--consultar{order:1}.pie-grupo--pagar-y-reclamar{order:2}.pie-grupo--infracciones{order:3}.pie-grupo--el-sitio{order:4}
  .pie-grupo--por-ciudad{order:5}.pie-grupo--por-codigo{order:6}.pie-grupo--legal{order:7}
  .pie-grupo--familia,.pie-grupo--legal{grid-column:1/-1}
  .pie-grupo--por-ciudad ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:12px}
  .pie-grupo--por-codigo ul.pie-grilla{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pie-grupo--legal ul{display:flex;flex-wrap:wrap;gap:4px 18px}
  .pie-grupo--legal li{margin:0}
}
/* Infografías con la paleta del tema (acero oscuro, ámbar, azul, verde, aviso, acero y frambuesa) */
:root{--paso-1:var(--acero-d);--paso-2:var(--ambar);--paso-3:var(--marca);--paso-4:var(--ok);--paso-5:var(--aviso);--paso-6:var(--acero);--paso-7:var(--mal)}
.pasos li::before{box-shadow:0 0 0 4px #fff}
.seccion .pasos li::before{box-shadow:0 0 0 4px #fff}
.linea__et,.ramas__cond{color:var(--muted)}
.ramas__q,.rama b{color:var(--marca-tinta)}
.escala__t{color:var(--acero-d)}
.docu-ley strong{color:var(--marca-tinta)}
.docu-ley__fuente{color:var(--muted)}

/* ── La tabla de infracciones (Leandro, 22-10-2026; decisión 76): la barra de búsqueda pegada a la tabla y fija arriba al
   hacer scroll, lo buscado resaltado, «Ver más» de a 24, y en el celular cada fila es una tarjeta compacta. ── */
.tabla-barra{display:flex;flex-direction:column;gap:10px;margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid #e3eaf2}   /* pegada a la tabla, sin quedarse fija: fija se veía mal (Leandro, 22-10) */
.tabla-barra__q{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.tabla-barra__q label{flex:1 1 100%;font-weight:700;color:#0b2f5b;font-size:16px}
.tabla-barra__q input[type=search]{flex:1 1 220px;min-width:0;min-height:48px;padding:0 14px;border:1.5px solid #c9d1dc;border-radius:12px;font:inherit;font-size:18px;font-weight:700;color:#0b2f5b;background:#fff}
.tabla-barra__q input[type=search]:focus{border-color:#0b2f5b;box-shadow:0 0 0 4px #c4ecfb;outline:0}
.tabla-barra__n{flex:0 0 auto;font-weight:800;color:#0b2f5b;white-space:nowrap}
.tabla-barra__f{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.tabla-barra__f .selector{margin:0}
.tabla-barra__btn{min-height:40px}
.tabla-barra__btn[hidden]{display:none}   /* herramientas.js lo oculta: con JS filtra al escribir */
.seccion .tabla mark,.tabla-barra mark{background:#ffe07a;color:#0b2f5b;border-radius:3px;padding:0;-webkit-box-decoration-break:clone;box-decoration-break:clone}   /* sin relleno lateral: partía la palabra («velocid ad»; Leandro, 22-10) */
.tabla-mas{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.tabla-vacia{margin:6px 0 0;padding:16px 18px;border-radius:14px;background:#f5f7fa;color:#3a4250;font-weight:600}
.tabla-vacia .btn{margin:10px 0 0;display:inline-flex}
.tabla-vacia[hidden]{display:none}
.tabla-mas[hidden]{display:none}
@media (max-width:63.99rem){
  .tabla-barra{padding:0 0 10px;gap:8px}
  /* Las filas como tarjetas compactas: código y monto en la primera línea, la infracción debajo, y gravedad, puntos,
     pronto pago y 90 % en una línea de chips; el % de la UIT y las impuestas en Lima se quedan para la pantalla grande. */
  .seccion .tabla--ancha[data-tabla="infracciones"] tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:12px 16px;margin-bottom:10px}
  .seccion .tabla--ancha[data-tabla="infracciones"] tr[hidden]{display:none}   /* el display:flex no puede pisar al hidden */
  .seccion .tabla--ancha[data-tabla="infracciones"] td{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;padding:0;border:0}
  .seccion .tabla--ancha[data-tabla="infracciones"] td::before{flex:none;font-size:15px;font-weight:600;color:#5b6572}
  .seccion .tabla--ancha[data-tabla="infracciones"] td:nth-child(1){order:1;flex:1 1 auto}
  .seccion .tabla--ancha[data-tabla="infracciones"] td:nth-child(5){order:2;flex:0 0 auto;margin-left:auto}
  .seccion .tabla--ancha[data-tabla="infracciones"] td:nth-child(5)::before{display:none}
  .seccion .tabla--ancha[data-tabla="infracciones"] td:nth-child(5) .tabla__v{font-size:18px;font-weight:800;color:#0b2f5b}
  .seccion .tabla--ancha[data-tabla="infracciones"] td:nth-child(2){order:3;flex:1 1 100%;margin-top:4px;padding-top:8px;border-top:1px solid #e3eaf2}
  .seccion .tabla--ancha[data-tabla="infracciones"] td:nth-child(2)::before{display:none}
  .seccion .tabla--ancha[data-tabla="infracciones"] td:nth-child(2) .tabla__v{font-size:16px;line-height:1.45;color:#3a4250}
  .seccion .tabla--ancha[data-tabla="infracciones"] td:nth-child(3),.seccion .tabla--ancha[data-tabla="infracciones"] td:nth-child(6),.seccion .tabla--ancha[data-tabla="infracciones"] td:nth-child(7),.seccion .tabla--ancha[data-tabla="infracciones"] td:nth-child(8){order:4;flex:0 0 auto;margin-top:6px;font-size:15px}
  .seccion .tabla--ancha[data-tabla="infracciones"] td:nth-child(4),.seccion .tabla--ancha[data-tabla="infracciones"] td:nth-child(9){display:none}
}

/* Las ramas que son enlace se ven como enlace (Leandro, 22-10-2026: «no se entiende como link, no queda claro que es clickeable»):
   chevron coral a la derecha y el nombre de la entidad subrayado, como los enlaces del sitio. */
a.rama{padding-right:46px}
a.rama::after{content:"";position:absolute;right:18px;top:50%;width:11px;height:11px;margin-top:-7px;border-right:3px solid var(--ambar-v);border-bottom:3px solid var(--ambar-v);transform:rotate(-45deg)}
a.rama b{text-decoration:underline;text-decoration-color:#6fd3f5;text-decoration-thickness:2px;text-underline-offset:4px}
a.rama:hover b,a.rama:focus-visible b{text-decoration-color:var(--ambar-v)}

/* El enlace al oficial con texto corto en el celular (Leandro, 23-10-2026: «estos botones se ven raros en mobile»): sb_enlace_oficial()
   manda los dos textos y acá se muestra uno u otro. */
.btn__t--corto{display:none}
@media (max-width:39.99rem){.btn--oficial .btn__t--largo{display:none}.btn--oficial .btn__t--corto{display:inline}}

/* El H1 del hero, variante G con el azul de K (Leandro, 23-10-2026: «probemos la variante G, pero con el azul de K» → «sí,
   aplícalo»; decisión 84; reemplaza los 2 rem del celular de la decisión 82): el peso máximo de Source Sans 3 (800), un poco más
   apretado y más grande, con el kicker arriba («tipo de página · alcance», sb_hero(..., kicker:)) en mayúsculas espaciadas y en
   acero. El kicker va a 15 px (la maqueta tenía 14): anchos.mjs no deja texto de lectura por debajo. */
.hero h1{font-weight:800;letter-spacing:-.02em}
@media (min-width:64rem){.hero h1{font-size:46px}}
@media (min-width:40rem) and (max-width:63.99rem){.hero h1{font-size:2.5rem}}
@media (max-width:39.99rem){.hero h1,main h1{font-size:2.2rem;line-height:1.12}}
.hero__kicker{display:block;margin:0 0 8px;color:#3b5f8f;font-size:15px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;line-height:1.35}
@media (max-width:39.99rem){.hero__kicker{letter-spacing:.1em;margin-bottom:6px}}