/* pe-placa (PlacaPerú) — sistema de diseño. Mobile-first (el nicho es móvil).
   La fuente de verdad de los ESTILOS es este archivo; el ds-mirror lo copia tal cual para
   diseñar en Claude Design. Se carga DESPUÉS de sb-tools.css (la base de UI de la librería).
   Identidad: verde lima registral (--verde #5C8A12) + ámbar reservado al enlace oficial,
   bandas grises a todo el ancho y cuatro colores de detalle (--d1..--d4) sólo para barras,
   puntos y círculos. Modo claro por defecto; oscuro sólo bajo :root[data-theme="dark"]. */

/* ── Tipografía self-hosteada (conventions/fuentes-self-hosted.md): font-display:optional + preload del subset latin en el layout.
   Los @font-face viven SÓLO acá (única fuente). Rutas RELATIVAS ../fonts/: desde /assets/css/app.css resuelven a
   /assets/fonts/ en el sitio, y desde ds-mirror/styles/app.css a ds-mirror/fonts/ en el espejo (el conversor las resuelve).
   Noto Sans variable 400-900 + itálica 400 (latin y latin-ext). ── */
@font-face{font-family:'Noto Sans';font-style:italic;font-weight:400;font-display:optional;src:url(../fonts/noto-sans-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:'Noto Sans';font-style:italic;font-weight:400;font-display:optional;src:url(../fonts/noto-sans-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:'Noto Sans';font-style:normal;font-weight:400 900;font-display:optional;src:url(../fonts/noto-sans-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:'Noto Sans';font-style:normal;font-weight:400 900;font-display:optional;src:url(../fonts/noto-sans-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}

/* ── Tokens ── */
:root{
  --font:'Noto Sans',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  /* marca */
  --verde:#5C8A12; --verde-osc:#476C0C; --verde-cl:#EEF5DE; --verde-cl2:#DDEBBE; --lima:#8CBE22;
  --ambar:#B45309; --ambar-cl:#fdf0dd;          /* acento: SÓLO el enlace al portal oficial (SUNARP) */
  --rojo:#b42318; --rojo-cl:#fdecea; --ok:#4C7A10; --ok-cl:#F2F7E6;
  /* superficie y texto */
  --tinta:#1C1F17; --gris:#545750; --gris-cl:#8197908f; --linea:#E6E6E2; --linea2:#D2D3CC;
  --fondo:#FFFFFF; --card:#FFFFFF; --card-enlace:#EFF2EC; --hero:#E3E6E4;   /* --hero: el gris de las rayas de las tablas, el separador «Fin del resultado» y el menú */
  --hero-banda:#1E5F67;   /* las bandas a todo el ancho (migas, hero, encabezado propio, vista de resultado), en azul
                             petróleo claro: la 72 de la tercera ronda de fondos, con el rayado de la TIVe de la 47
                             (Leandro, 2026-10-10). También se probaron la 13 (petróleo #0F3B3A), la 30
                             (petróleo medio #15504E, también con el rayado), la 80 (turquesa vivo #156F6C) y la 78
                             (turquesa profundo #115F5D); antes de todo eran el gris --hero. Los textos que van encima
                             se invierten más abajo («Bandas del hero en petróleo»). */
  --sobre-verde:#fff;     /* el texto del botón principal; sobre la banda oscura el botón va en lima y el texto, oscuro */
  --pie:#1C1F17; --pie-txt:#F0F0EC; --pie-suave:#B4B6AE; --pie-linea:#3C3D37;   /* el pie oscuro: --tinta de fondo y los claros del modo oscuro */
  --sombra:none; --sombra-2:none;
  /* detalle: barras, puntos y círculos. NUNCA texto ni los cuatro juntos en una misma franja. */
  --d1:#00A5A5; --d2:#8CBE22; --d3:#FFAD00; --d4:#EE3523;
  --filete:linear-gradient(90deg,var(--d1),var(--verde));   /* el de las tarjetas de formulario y de progreso: los dos colores del logo */
  /* escala */
  --r:8px; --r-sm:6px; --r-lg:10px; --ancho:1040px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
}

/* ── Tokens que consume sb-lib/assets/sb-tools.css (herramientas-ux.md §2 y §2b) ──
   Sin esto los componentes de la librería salen a medias y NO se ve como error: el (i) de
   ayuda se dibujaba como una «i» suelta sin disco (pasó en ar-cobro y acá, 2026-10-08). La
   lista sale del propio archivo: grep -oE 'var\(--[a-z0-9-]+' sb-lib/assets/sb-tools.css.
   El acento de la librería va en VERDE: el ámbar del sitio es sólo para el enlace al oficial. */
:root{
  --surface:var(--card); --surface-alt:var(--hero); --tile:var(--verde-cl);
  --ink:var(--tinta); --soft:var(--gris); --muted:var(--gris); --border:var(--linea2);
  --r-l:var(--r-lg); --r-bar:999px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(28,31,23,.08); --sh-2:0 12px 32px -12px rgba(40,60,10,.35);
  --sb-brand:var(--verde); --sb-brand-d:var(--verde-osc); --sb-brand-l:var(--verde-cl); --sb-brand-bd:var(--verde-cl2);
  --sb-accent:var(--verde-osc); --sb-accent-d:var(--verde-osc); --sb-accent-o:var(--verde);
  --sb-accent-bg:var(--verde-cl); --sb-accent-bd:var(--verde-cl2);
  --sb-mal:var(--rojo); --sb-mal-bg:var(--rojo-cl); --sb-mal-bd:#f6cfca;
  --sb-track:var(--linea); --bar-off:var(--linea);
  --verde-d:var(--verde-osc); --verde-l:var(--verde-cl); --verde-bd:var(--verde-cl2);
  --ambar-d:#8A3F06; --ambar-o:var(--ambar); --ambar-bg:var(--ambar-cl); --ambar-bd:#F3D3A8;
}
/* Oscuro SÓLO por data-theme (el sitio fija data-theme="light"; un script puede poner "dark"). */
:root[data-theme="dark"]{
  --verde:#9DCC3F; --verde-osc:#C2E58A; --verde-cl:#1D2314; --verde-cl2:#26301A; --lima:#9DCC3F;
  --ok:#9DCC3F; --ok-cl:#1D2314;
  --tinta:#F0F0EC; --gris:#B4B6AE; --linea:#2E2F2A; --linea2:#3C3D37;
  --fondo:#151613; --card:#151613; --card-enlace:#1F211D; --hero:#202220; --pie:#0E0F0C;
}

/* ── Base ── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);overflow-x:hidden;
  font:17px/1.6 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{line-height:1.25;color:var(--tinta);font-weight:800;margin:0}
h1{font-size:2.2rem;font-weight:900;letter-spacing:-.03em;line-height:1.08;margin:.1em 0 .4em}
h2{font-size:1.3rem;margin:1.4em 0 .5em}
h3{font-size:1.08rem;margin:1.1em 0 .4em;font-weight:700}
p{margin:.6em 0}
a{color:var(--verde-osc);text-underline-offset:2px}
img,svg{max-width:100%;height:auto}
.logo{color:var(--verde);display:block}

.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 var(--s4)}
.fila{display:flex;align-items:center;gap:var(--s3)}
.saltar{position:absolute;left:-999px}
.saltar:focus{left:8px;top:8px;background:var(--card);padding:8px 12px;border-radius:8px;z-index:30}

/* ── Botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:15px 22px;border-radius:var(--r-sm);font:inherit;font-size:1rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.03em;
  cursor:pointer;border:2px solid transparent;text-decoration:none;line-height:1;white-space:nowrap}
.btn--primary{background:var(--verde);color:var(--sobre-verde)}
.btn--primary:hover{background:var(--verde-osc)}
.btn--accent{background:var(--ambar);color:#fff}                    /* sólo el deep-link al oficial (SUNARP) */
.btn--ghost{background:var(--card);color:var(--tinta);border:2px solid var(--tinta)}
.btn--ghost:hover{background:var(--verde-cl);color:var(--verde-osc);border-color:var(--verde)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn .ico{width:1.1em;height:1.1em}

/* ── Aviso de no-oficial + header ── */
.aviso-oficial{background:var(--tinta);color:var(--fondo);font-size:.82rem;text-align:center;padding:7px var(--s4)}
.aviso-oficial a{color:var(--fondo);text-decoration:underline}
.cabecera{background:var(--card);border-bottom:1px solid #ccc;position:sticky;top:0;z-index:20;transition:box-shadow .2s}
/* Con la página desplazada (la clase la pone app.js), una sombra separa la cabecera del contenido, que
   también es blanco (Leandro, 2026-10-09: al avanzar por el texto el menú se perdía). */
.cabecera--despegada{box-shadow:0 10px 24px -12px rgba(0,0,0,.35)}
/* La franja de color de abajo del hero (d1 → d4) queda fija: cuando el borde del hero pasa por debajo de
   la cabecera, la cabecera la toma como borde inferior (cabecera--linea, de app.js) (Leandro, 2026-10-09). */
.cabecera::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:4px;pointer-events:none;opacity:0;transition:opacity .15s;
  background:linear-gradient(90deg,var(--d1),var(--d2),var(--d3),var(--d4))}
.cabecera--linea::after{opacity:1}
.cabecera .fila{min-height:60px;justify-content:space-between}
.marca{display:inline-flex;align-items:center;gap:2px;text-decoration:none;color:var(--verde);font-weight:800}
.marca__ico{width:45px;height:45px;flex:none;display:block}   /* el logo (sb_logo): auto + check, 2026-10-08 */
/* El nombre es el dominio, placaperu.com (Leandro, 2026-10-09): 20 letras contra las 9 de
   PlacaPerú, más chico para que entre al lado del menú de escritorio y del botón «Menú» en celular. */
/* Logotipo: dos pesos de Noto Sans (consulta liviana, vehiculos sólida), tracking cerrado, y un
   filete teal→verde bajo «vehiculos» (los colores del ícono y de las tarjetas de formulario). */
.marca__txt{font-size:1.4rem;color:var(--tinta);font-weight:500;letter-spacing:-.045em;line-height:1;transform:translateY(.16em)}
@media (max-width:719px){.cabecera .marca__txt{font-size:1.4rem;letter-spacing:-.045em}.cabecera .marca__ico{width:38px;height:38px}.cabecera .marca{gap:2px}}
/* El texto del logo (decisión 44): «placa» + «peru» + «.com» en Outfit, en trazos SVG (partials/logo-texto.php, lo genera
   tools/logo-svg.py), así no se carga la tipografía. El tamaño lo da el font-size: 1,8 rem en todos los anchos (Leandro,
   2026-10-10; antes 2,2 y después 2 en escritorio). En celular son 160 de los 242 px que deja el botón «Menú» a 360 px.
   La caja del SVG está centrada en la altura de las mayúsculas: centrada en la cabecera, la palabra queda en el medio.
   Colores: --marca-1 (placa), --marca-2 (peru), --marca-3 (.com). */
.marca{--marca-1:var(--tinta);--marca-2:var(--verde);--marca-3:var(--gris)}
.marca__txt{font-size:1.8rem;line-height:0;letter-spacing:0;transform:none}
@media (max-width:719px){.cabecera .marca__txt{font-size:1.8rem}}   /* le gana a la regla vieja de 1,4 rem en celular, que es más específica */
.marca__svg{display:block;width:5.551em;height:1.124em}
.menu{display:none}
.menu a:hover{color:var(--verde)}
.abrir-menu{background:none;border:1px solid var(--linea2);color:var(--tinta);border-radius:var(--r-sm);padding:9px 13px;font:inherit;font-size:.95rem;font-weight:700}
/* El menú de celular repite los grupos del pie (sb_grupos), en 2×2 y con sus colores. Va encima de la
   página, no la empuja: el velo (sombra extendida, recortada arriba para no tapar la cabecera) oscurece
   lo de abajo, y la línea de color marca dónde termina (Leandro, 2026-10-09: no se veía la separación
   con el contenido de atrás). Si no entra en la pantalla se desplaza adentro; el JS ajusta el alto. */
.menu-movil{position:absolute;left:0;right:0;top:100%;border-top:1px solid var(--linea);border-bottom:4px solid var(--d1);
  background:var(--card);padding:var(--s5) 0 var(--s4);
  max-height:calc(100vh - 61px);max-height:calc(100dvh - 61px);overflow-y:auto;overscroll-behavior:contain;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.5);clip-path:inset(0 -100vmax -100vmax)}
/* La página no se desplaza detrás del menú abierto. En <body>, no en <html>: body tiene overflow-x:hidden y,
   con html en overflow:hidden, el overflow de body deja de pasar a la ventana y body se vuelve su propio
   contenedor de scroll; la cabecera sticky (y el menú colgado de ella) volvía al tope del documento, fuera
   de la vista, y la página quedaba trabada (Leandro, 2026-10-09: «toco en menú en medio del contenido y no
   abre nada, y no puedo scrollear»). Lo mismo para .con-capa. */
body.menu-abierto{overflow:hidden}
.menu-movil__cols{display:grid;gap:var(--s5) var(--s4);grid-template-columns:repeat(2,minmax(0,1fr))}
.menu-movil__t{font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.09em;color:var(--tinta);margin:0 0 var(--s1)}
.menu-movil__t::before{content:"";display:block;width:24px;height:4px;border-radius:2px;background:var(--d1);margin-bottom:var(--s2)}
.menu-movil__cols>:nth-child(2) .menu-movil__t::before{background:var(--d2)}.menu-movil__cols>:nth-child(3) .menu-movil__t::before{background:var(--d3)}.menu-movil__cols>:nth-child(4) .menu-movil__t::before{background:var(--d4)}
.menu-movil ul{list-style:none;margin:0;padding:0}
/* Cada enlace es una fila tocable: el verde de los enlaces del sitio, una línea entre filas y la flecha
   (Leandro, 2026-10-09: en negro y sin más, los enlaces se leían como texto). */
.menu-movil a{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:10px 0;
  border-bottom:1px solid var(--linea);text-decoration:none;color:var(--verde-osc);font-weight:600;font-size:.92rem;line-height:1.3}
.menu-movil a::after{content:"›";flex:none;font-size:1.3em;line-height:1;color:var(--gris)}
.menu-movil li:last-child a{border-bottom:0}
.menu-movil a:hover,.menu-movil a:active{color:var(--verde)}

/* ── Migas de pan ── */
.migas{font-size:calc(.8rem + 1px);color:var(--gris);padding:10px 0}
.migas ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;padding:0}
.migas li{display:inline-flex;align-items:center}
.migas li+li::before{content:"";width:7px;height:7px;margin-right:8px;border:solid var(--verde);border-width:0 2px 2px 0;transform:rotate(-45deg);opacity:.8}
.migas li:first-child a{display:inline-flex;align-items:center;gap:6px}
.migas li:first-child a::before{content:"";width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23545750' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E") center/14px no-repeat}
.migas a{color:var(--gris);text-decoration:none;font-weight:600}
.migas a:hover{color:var(--verde-osc);text-decoration:underline;text-underline-offset:3px}
.migas li:last-child{color:var(--tinta);font-weight:800}
/* Migas dentro de la banda del hero */
.migas-hero{background:var(--hero-banda);box-shadow:0 0 0 100vmax var(--hero-banda);clip-path:inset(0 -100vmax);margin-top:calc(-1 * var(--s2));padding:var(--s5) 0 0}
/* El encabezado propio (sb_pagina_header: oficinas, legales, resultado) deja las migas a la misma
   distancia del menú que la migas-hero: 24 px en celular y 32 en escritorio. Antes eran 16 y 22, y
   las migas quedaban pegadas arriba (Leandro, 2026-10-08). */
.pagina-head{margin-top:calc(-1 * var(--s2));padding:var(--s5) 0 var(--s6)}   /* el margen, como .migas-hero: compensa el padding de <main> */
.pagina-head>.migas{padding-top:0}
@media (min-width:900px){.migas-hero{padding-top:var(--s6)}}
.migas-hero ol{justify-content:flex-start}
.migas-hero ~ .hero,.migas-hero ~ * .hero{margin-top:0;padding-top:var(--s4)}

main{padding:var(--s2) 0 var(--s7);min-height:52vh;counter-reset:sec}

/* ── Bandas del hero en petróleo (--hero-banda; Leandro, 2026-10-10) ──
   Las migas, el hero, el encabezado propio y la vista de resultado van sobre el petróleo. Adentro de
   la banda se invierten los tokens de texto, así lo que va directo encima sale claro sin tocar regla
   por regla. Sobre el azul petróleo claro, en el peor punto (con el degradé y una línea del rayado):
   título blanco 5,9:1, gris claro 4,7:1 (bajada, nota), lima claro 4,9:1 (enlaces). Sobre el fondo
   liso: 7,3, 5,8 y 6,1. Con los textos del petróleo medio la bajada caía a 4,2:1 sobre el rayado: por
   eso van dos puntos más claros. El verde (acento, antetítulo, botones, flechitas de las migas) es el
   del logo: ver «Un solo verde» más abajo. Las líneas, blanco translúcido: sirven con
   cualquier tono de la banda. Las superficies propias que van adentro (la caja de placa, la
   calculadora, las píldoras, las tarjetas, los avisos, el documento dibujado, la ficha del resultado; la
   respuesta corta no: va como velo sobre la banda, ver más abajo)
   recuperan los tokens claros, guardados en --claro-*. Todo con :where, sin especificidad: las reglas
   de cada componente siguen ganando. El botón principal suelto sobre la banda (oficinas, «Consultar
   otra placa») va en el verde del logo con texto oscuro (7,6:1; 3,3:1 contra la banda): el de la marca se perdía
   contra el petróleo. Los alias
   de texto de la librería (--ink, --soft, --muted, --border) se resuelven una vez en :root y no ven la
   inversión: se vuelven a declarar en los dos niveles (sin eso, la bajada de «Y ahora, ¿qué?» de
   sbRutas salía gris oscuro sobre el petróleo, 1,67:1). Sólo en modo claro: el oscuro
   (data-theme="dark", hoy sin uso) ya tiene sus propios tokens. */
:root{--claro-tinta:var(--tinta);--claro-gris:var(--gris);--claro-verde:var(--verde);--claro-verde-osc:var(--verde-osc);
  --claro-linea:var(--linea);--claro-linea2:var(--linea2)}
:where(:root:not([data-theme="dark"])) :where(.hero,.migas-hero,.banda-hero,.res-vista){
  --tinta:#FFFFFF; --gris:#E4E7DF; --verde:var(--lima); --verde-osc:#DFF2BF; --linea:rgba(255,255,255,.12); --linea2:rgba(255,255,255,.22);
  --sobre-verde:#1C1F17; --ink:var(--tinta); --soft:var(--gris); --muted:var(--gris); --border:var(--linea2); color:var(--tinta)}
:where(:root:not([data-theme="dark"])) :where(.hero,.migas-hero,.banda-hero,.res-vista)
  :where(.placa,.calc,.pildora,.resultado,.callout,.card,.tarjeta,.docu,.ppe-ad,.chip,.actualizado){
  --tinta:var(--claro-tinta); --gris:var(--claro-gris); --verde:var(--claro-verde); --verde-osc:var(--claro-verde-osc);
  --linea:var(--claro-linea); --linea2:var(--claro-linea2); --sobre-verde:#fff;
  --ink:var(--tinta); --soft:var(--gris); --muted:var(--gris); --border:var(--linea2); color:var(--tinta)}
/* «Por placa» y el antetítulo, en el verde del logo (--lima, #8CBE22; Leandro, 2026-10-10, elegido entre
   cuatro). El verde del botón (#5C8A12) daba 1,8:1 como texto sobre la banda: no se leía. Con este: «por
   placa» 3,3:1 (alcanza: es texto grande); el antetítulo, que es chico, queda en 3,3:1, debajo del 4,5:1
   que pide (aceptado así). El botón del formulario sigue en el verde de la marca con texto blanco: se
   probó en el verde del logo y Leandro lo quiso como estaba. Las flechitas de las migas toman el --verde
   de la banda (lima); los BOTONES primarios sueltos sobre la banda («Consultar otra placa», «Reintentar»),
   en cambio, van en el verde de la marca con texto blanco, igual que el del formulario (Leandro,
   2026-10-11: el lima quedaba raro al lado del submit). */
:where(:root:not([data-theme="dark"])) :where(.hero,.res-vista) .btn--primary{background:var(--claro-verde);color:#fff}
:where(:root:not([data-theme="dark"])) :where(.hero,.res-vista) .btn--primary:hover{background:var(--claro-verde-osc)}
:where(:root:not([data-theme="dark"])) .hero .hero__ante{color:var(--verde)}
/* La respuesta corta del hero (gravamen, oficinas, orden de captura, tarjeta, transferencia, vehículos a
   mi nombre): un velo translúcido sobre la banda, con el texto en blanco, en lugar de una caja blanca como la
   del formulario. Blanca competía con el formulario sin ser una herramienta (Leandro, 2026-10-10: «queda muy
   contrastado… no es tan relevante como un form»). Velo de blanco al 6 %: el texto blanco queda en 6,3:1, y
   5,1:1 donde lo cruzan el degradé y el rayado. El gris claro de la bajada daría ahí 4,1:1: por eso va en
   blanco; los enlaces, en blanco y subrayados (el lima claro daba 4,3:1). Hoy no lleva enlaces. */
:where(:root:not([data-theme="dark"])) .hero .respuesta{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-left:4px solid var(--verde);color:var(--tinta)}
:where(:root:not([data-theme="dark"])) .hero .respuesta a{color:var(--tinta)}
/* Dos bandas seguidas (migas → hero, migas → resultado, encabezado → resultado) se tocan en un píxel
   fraccionario (142,05 px, 308,43 px): la sombra que las lleva a todo el ancho no se ajusta al píxel y
   ahí se colaba una línea clara a los costados de la columna. Sobre el gris no se veía; sobre el
   petróleo, sí. La segunda sube 1 px por encima de la primera (Leandro, 2026-10-10: «línea indeseada»). */
:is(.migas-hero,.banda-hero) + :is(.hero,.res-vista){clip-path:inset(-1px -100vmax 0)}
/* Las migas sobre el petróleo (Leandro, 2026-10-10: «se pierde un poco con el fondo»): con el gris de la
   bajada (5,7:1) y las flechitas en lima al 80 % (3,7:1) quedaban apagadas. Los enlaces van casi blancos
   y las flechitas en el verde del logo, sin transparencia (sobre el azul petróleo claro: 6,3:1 los
   enlaces; 3,3:1 las flechitas, que son un gráfico); la página actual sigue en
   blanco y negrita.
   .migas-hero es la propia .migas; en el encabezado propio, la .migas va adentro de .banda-hero.
   La casita es un SVG con el trazo fijo: va del mismo color que los enlaces. */
:where(:root:not([data-theme="dark"])) :is(.migas-hero,.banda-hero .migas){--gris:#EDF0EA}
:where(:root:not([data-theme="dark"])) :is(.migas-hero,.banda-hero .migas) li+li::before{opacity:1}
:where(:root:not([data-theme="dark"])) :is(.migas-hero,.banda-hero .migas) li:first-child a::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDF0EA' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E")}

/* ── Hero: banda a todo el ancho ── */
.hero{background:var(--hero-banda);box-shadow:0 0 0 100vmax var(--hero-banda);clip-path:inset(0 -100vmax);
  color:var(--tinta);border-radius:0;margin:calc(-1 * var(--s2)) 0 0;padding:var(--s6) 0;text-align:center;position:relative}
/* prueba: línea de color (d1->d4) a todo el ancho, en el borde inferior del hero */
.hero::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:100vw;height:4px;background:linear-gradient(90deg,var(--d1),var(--d2),var(--d3),var(--d4))}
/* Degradé del hero (Leandro, 2026-10-10: «levemente más claro hacia abajo a la derecha»): un resplandor
   desde la esquina de abajo a la derecha de la PANTALLA (100vw, como la línea de color), que se apaga
   hacia arriba y a la izquierda. La sombra que lleva la banda a todo el ancho sólo admite un color
   plano: por eso va en un ::before detrás del contenido (el clip-path ya hace de la banda un contexto de
   apilamiento, y el z-index -1 queda arriba de su fondo). El borde de arriba queda en el color plano:
   sin costura con las migas. En la esquina, 8 % de blanco; donde hay texto, como mucho la mitad. También
   en el encabezado propio (contacto, legales), salvo cuando lo sigue un resultado: el resplandor del borde
   de abajo cortaría.
   Rayado de la TIVe (la 47 de la segunda ronda; Leandro, 2026-10-10): el rayado diagonal de seguridad de
   la tarjeta de propiedad, líneas blancas al 5 % cada 8 px, sólo hacia la derecha (del lado de la
   herramienta): dos capas del color de la banda lo apagan hacia la izquierda y en los primeros 96 px de
   arriba, así no corta contra la franja de las migas, que va lisa. Orden de las capas: la de arriba se
   pinta encima. */
:where(:root:not([data-theme="dark"])) :is(.hero,.banda-hero):not(:has(+ .res-vista))::before{content:"";position:absolute;top:0;bottom:0;
  left:50%;width:100vw;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(farthest-side at 100% 100%,color-mix(in srgb,var(--hero-banda) 92%,#fff),transparent),
    linear-gradient(90deg,var(--hero-banda) 25%,transparent 65%),
    linear-gradient(180deg,var(--hero-banda) 0,transparent 96px),
    repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1px,transparent 1px 8px)}
.hero h1{color:var(--tinta);font-size:clamp(1.9rem,9vw,2.4rem);line-height:1.04;margin:0 auto .3em;max-width:11em}   /* 9vw: a 2,4rem fijo, «(reemplacamiento)» medía 359 px y a 360 px de pantalla la página se iba 16 px de costado */
.hero h1::after{content:"";display:block;width:56px;height:6px;border-radius:3px;background:var(--d1);margin:var(--s4) auto 0}
.hero__lede{color:var(--gris);font-size:1.06rem;margin:var(--s3) auto var(--s5);max-width:34em}
.hero__nota{color:var(--gris);font-size:.85rem;margin:var(--s3) 0 0}
/* Los detalles del hero de mx-tv (Leandro, 2026-10-08), con la paleta de este sitio:
   - el antetítulo, en --verde-osc (era 5,1:1 sobre el gris; sobre el petróleo es lima claro, 8,7:1; el turquesa --d1 daba 2,4:1 y es
     sólo para detalles). En celular no va, como en mx-tv: repite el título y empuja la caja hacia abajo.
   - la parte del título en verde de marca (3,4:1: alcanza para texto grande, AA);
   - las píldoras: un punto de color y un dato con fila en FUENTES (sb_pildoras). El ámbar del sitio
     es sólo para el enlace a SUNARP, así que el aviso lleva el fondo de .callout--warn y el punto --d3. */
.hero__ante{margin:0 0 var(--s3);font-size:calc(.78rem + 3px);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--verde-osc)}
.hero__acento{color:var(--verde);white-space:nowrap}   /* «por placa» no se parte: «por» solo al final de una línea se leía como otra palabra */
@media (max-width:719px){.hero__ante{display:none}}
.hero__bajo{margin-top:var(--s4)}
.pildoras{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2)}
.pildora{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--linea2);border-radius:999px;
  padding:6px 13px;font-size:.84rem;font-weight:600;line-height:1.3;color:var(--tinta);text-align:left}
.pildora__punto{width:8px;height:8px;border-radius:50%;background:var(--d2);flex:none}
/* Las píldoras sin tono rotan los colores de marca d2 → d3 → d4, sin el turquesa (d1), que ya está en
   todos lados (Leandro, 2026-10-09); las de tono (ok, acento, aviso) conservan el suyo. */
.pildoras>.pildora:not([class*="pildora--"]):nth-child(3n+2) .pildora__punto{background:var(--d3)}
.pildoras>.pildora:not([class*="pildora--"]):nth-child(3n+3) .pildora__punto{background:var(--d4)}
.pildora--ok{background:var(--ok-cl);border-color:var(--verde-cl2);color:var(--ok)}   /* 4,7:1 */
.pildora--ok .pildora__punto{background:var(--ok)}
.pildora--acento .pildora__punto{background:var(--verde)}
.pildora--aviso{background:var(--ambar-cl);border-color:var(--ambar-bd)}
.pildora--aviso .pildora__punto{background:var(--d3)}
:root[data-theme="dark"] .pildora--aviso{background:#2A2215;border-color:#4A3B1F}
/* Desde 900 px, dos columnas como el hero de mx-tv: antetítulo, título, bajada, píldoras y nota a la
   izquierda, alineados con las migas; la herramienta a la derecha. El texto va centrado en vertical
   contra la herramienta (las dos filas 1fr de los extremos se reparten lo que sobra): arriba, con un
   título de una línea («SOAT por placa»), quedaba todo apelotonado y un hueco de ~130 px debajo
   (Leandro, 2026-10-08). Las migas no se mueven: están fuera de la grilla. Si el texto es más alto
   que la herramienta, las filas 1fr quedan en cero y todo arranca arriba. Debajo de 900 px las dos
   columnas no entran: una columna centrada, con las píldoras y la nota después de la herramienta. */
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .hero{text-align:left}
  .hero__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:'. herr' 'txt herr' 'bajo herr' '. herr';
    grid-template-rows:1fr auto auto 1fr;column-gap:clamp(var(--s6),4vw,var(--s7));align-items:start}
  .hero .hero__txt h1{font-size:clamp(2.6rem,4.4vw,3.4rem)}   /* a 3,4rem fijo, «Consulta vehicular SUNARP por placa» iba en 4 líneas a 920 px */
  .hero__grid--solo{grid-template-columns:minmax(0,1fr);grid-template-areas:'txt' 'bajo';grid-template-rows:auto auto}
  /* Texto arriba (sb_hero con 'arriba'): para una herramienta mucho más alta que el texto, que centrado
     quedaba flotando a media altura (Leandro, 2026-10-10). El hueco va abajo, debajo de la nota. Hoy:
     el decisor de /comprar-auto-usado y el documento de /boleta-informativa-vehicular (a 1280 px, el
     título quedaba 165 px más abajo que el documento). */
  .hero__grid--arriba{grid-template-areas:'txt herr' 'bajo herr' '. herr';grid-template-rows:auto auto 1fr}
  /* Herramienta ancha (sb_hero con 'ancha'): 1 : 1,35 en vez de 1,1 : 1 (Leandro: «más ancho al form, para
     equilibrar con el título»). Con el decisor, a 1280 px pasa de 457 a 551 px y desde 1000 px las seis
     preguntas entran en una línea (815 → 766 px de alto). Va aparte de 'arriba': un documento dibujado
     crece en alto al ensancharse, y el título pasaría a tres líneas. */
  .hero__grid--ancha{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
  .hero__txt{grid-area:txt}.hero__herr{grid-area:herr}.hero__bajo{grid-area:bajo;margin-top:0}
  .hero__grid--solo .hero__bajo{margin-top:var(--s5)}   /* sin bajada de por medio, se pegaba al botón */
  /* En una columna el título va en una línea (sin el corte a 11em, pensado para media pantalla) y la
     respuesta corta queda alineada con el texto, al ancho de lectura. */
  .hero__grid--solo h1{max-width:none}
  .hero__grid--solo .hero__lede{max-width:40em}
  .hero .hero__grid--solo .respuesta{max-width:44rem;margin:0}
  .pildoras{justify-content:flex-start}
  .hero h1,.hero__lede{margin-left:0;margin-right:0}
  .hero h1::after{margin-left:0}
  /* Con .hero adelante: .hero .respuesta (más abajo) le gana a lo que no la iguale. */
  .hero .hero__herr>.placa,.hero .hero__herr>.calc,.hero .hero__herr>.respuesta{max-width:none;margin-left:0;margin-right:0}
  .hero .hero__herr>:first-child{margin-top:0}
  /* En la columna, el botón va debajo de la placa, como en celular: en una fila, con la tarjeta de
     400 px (pantalla de 920) o un botón largo («Consultar la placa»), el ejemplo «Ej. ABC-123» se cortaba. */
  .hero__herr .placa__fila{flex-wrap:wrap}
  .hero__herr .placa__fila>button{flex:1 1 100%;margin-top:var(--s3)}
  .hero__herr .placa__fila>.placa__hint{order:0}   /* en la columna, la ayuda vuelve entre el input y el botón */
}

/* ── Línea de confianza al pie de la tarjeta del formulario (sb_form_pie; la «tv-form-foot» de mx-tv) ──
   Adentro de la tarjeta (Leandro, 2026-10-08), separada por un filete; tildes en el verde de marca con
   el tilde blanco y la privacidad chica abajo. En .calc el aire lo pone el gap de la grilla. */
.form-pie{margin:var(--s4) 0 0;padding-top:var(--s3);border-top:1px solid var(--linea);text-align:center}
.calc>.form-pie{margin-top:0}
.form-pie__lista{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px var(--s4);
  font-size:.84rem;font-weight:600;color:var(--gris)}
.form-pie__lista li{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.form-pie__lista li::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;background:var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat}
.form-pie__priv{display:inline-block;margin-top:6px;font-size:.8rem;color:var(--gris);text-decoration:underline;text-underline-offset:2px}
.form-pie__priv:hover{color:var(--verde-osc)}

/* ── Caja de placa (Field): campo blanco, borde grueso, ícono «placa» del sprite a la izquierda ── */
.placa{background:var(--card);border-radius:var(--r-lg);box-shadow:0 1px 0 var(--linea2),0 18px 40px -18px rgba(40,60,10,.35);
  padding:var(--s5) var(--s4);color:var(--tinta);text-align:left;max-width:560px;margin:0 auto}
.placa label{display:block;color:var(--tinta);font-size:1rem;font-weight:800;margin-bottom:var(--s2)}
/* Las etiquetas con ayuda (sbTips): el (i) al lado del texto y la etiqueta como ancla del panel,
   que va en absoluto (la librería deja el maquetado de la etiqueta al sitio). */
.placa label[data-tip],.calc__campo>label[data-tip],.calc__campo>legend[data-tip]{position:relative;display:flex;align-items:center;gap:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.placa__fila{display:flex;flex-wrap:wrap;gap:var(--s2)}
.placa__campo{position:relative;flex:1 1 100%;min-width:0;display:flex}
.placa__ico{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:24px;height:24px;color:#2E3833;pointer-events:none}
.placa input{flex:1;min-width:0;background:#fff;color:#1C1F17;border:3px solid #2E3833;border-radius:14px;
  font-size:1.3rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:15px var(--s4) 15px 54px}
.placa input::placeholder{color:#BDBFB8;font-weight:400;letter-spacing:.06em;text-transform:none}
.placa input:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 4px var(--verde-cl2)}
/* El botón de envío, no «.placa button»: esa agarraba también el (i) de ayuda de la etiqueta, que es un
   <button> (sbTips), y lo estiraba como una barra a lo ancho (Leandro, 2026-10-08). */
.placa__fila>button{flex:1 1 100%;margin-top:var(--s3)}
.placa__hint{font-size:.76rem;color:var(--gris);margin:.5em 0 0}
/* En la caja de placa la ayuda va dentro de la fila, debajo del input: en celular y en la columna del hero
   el orden es input, ayuda, botón; en la fila de 720 px en adelante pasa a la línea de abajo (order). */
.placa__fila>.placa__hint{flex:1 1 100%;margin:-2px 0 0}
.placa__hint--mal{color:var(--rojo);font-weight:600}

/* ── Los documentos, dibujados como esquema (partials/documentos.php; Leandro, 2026-10-09) ──
   Una hoja de papel con los campos numerados y una leyenda con los mismos números. Papel blanco y texto
   oscuro fijos (también en modo oscuro), los valores en monoespaciada como en un registro, la cinta
   «Ejemplo» en la esquina y los números rotando d2 → d3 → d4 (como las píldoras, sin el turquesa). */
.docu{position:relative;overflow:hidden;background:#fff;color:#1C1F17;border:1px solid var(--linea2);border-radius:12px;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.35);text-align:left;font-size:.86rem}
.docu__cab{background:var(--filete) top/100% 4px no-repeat,#EEF0EE;padding:16px 18px 12px;border-bottom:1px dashed #C9CDC8}
.docu__tipo{margin:0;padding-right:44px;font-size:.8rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;line-height:1.3}
.docu__sub{margin:3px 0 0;font:.72rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#545750}
.docu__cuerpo{display:grid;gap:12px;padding:14px 18px 18px}
.docu__bloque{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start}
.docu__n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--d2);color:#1C1F17;font-size:.74rem;font-weight:800;line-height:1;flex:none}
.docu__n--1{background:var(--d3)}.docu__n--2{background:var(--d4)}   /* el color por número (sb_doc_n): hoja y leyenda coinciden */
.docu__k{margin:1px 0 3px;font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#545750}
.docu__v{margin:0;font:.78rem/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#1C1F17;overflow-wrap:anywhere}
.docu__marca{position:absolute;top:16px;right:-30px;transform:rotate(38deg);background:var(--d4);color:#fff;
  padding:3px 36px;font-size:.6rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.docu__qr{display:block;width:52px;height:52px;margin-top:6px;border:3px solid #1C1F17;
  background:repeating-conic-gradient(#1C1F17 0 25%,#fff 0 50%) 0 0/13px 13px}
.docu__firmas{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px}
.docu__firmas span{height:24px;border-bottom:1.5px solid #1C1F17}
/* La boleta y el CRV con el aspecto de los reales (manual de usuario del SPRL de SUNARP): hoja blanca de
   impresión en Arial negra, tablas con bordes finos, secciones subrayadas, el estado en rojo y las bandas
   centradas entre líneas. Sin el logo de SUNARP (el lugar queda vacío) ni un QR real. */
.docu--of{background:#fff;color:#111;font-family:Arial,Helvetica,sans-serif;font-size:.68rem;line-height:1.35;padding:16px 16px 14px}
.docu--of p{margin:0}
.docu--of .docu__n{width:17px;height:17px;font-size:.6rem;display:inline-grid;vertical-align:middle;margin-right:5px;font-family:var(--font,inherit)}
.of__cab{display:grid;grid-template-columns:1fr 2.2fr 1fr;gap:8px;align-items:start;text-align:center;margin:0 46px 8px 0;font-size:.66rem}
.of__der{text-align:right}
.of__titulo{text-align:center;font-weight:700;font-size:1.15rem;margin:6px 0 5px !important}
.of__pago,.of__tabla{border-collapse:collapse;font-size:.6rem}
.of__pago{margin:0 auto 10px}
.of__pago th,.of__pago td,.of__tabla th,.of__tabla td{border:1px solid #555;padding:2px 6px;text-align:center}
.of__pago th{background:#D9D9D9;font-weight:700}
.of__sec{display:flex;align-items:center;flex-wrap:wrap;gap:0 10px;font-weight:700;font-size:.78rem;margin:9px 0 4px !important}
.of__rojo{color:#D0021B;font-size:.7rem;display:inline-flex;align-items:center}
.of__prop{display:grid;grid-template-columns:1fr auto;gap:2px 12px}
.of__dni{text-align:right}
.docu--of .of__cols p,.of__prop>p:not(.of__dni){display:grid;grid-template-columns:5.6em minmax(0,1fr);gap:3px}
.docu--boleta .of__cols p{grid-template-columns:4.7em minmax(0,1fr)}   /* en el hero la columna es angosta */
.docu--of span{overflow-wrap:anywhere;min-width:0}   /* un valor largo se parte en su columna, no invade la de al lado */
.of__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 10px;font-size:.6rem}
.of__cols>div{display:grid;gap:1px;align-content:start}
.docu--of .of__cols p.of__marcado{grid-template-columns:auto 4.4em minmax(0,1fr);gap:0 3px;align-items:center}
.of__ofi{font-weight:700}
.of__aviso{font-style:italic;font-size:.56rem;margin:5px 0 !important;display:flex;align-items:center}
.of__aviso--c{justify-content:center;text-align:center}
.of__banda{border-top:1.5px solid #111;margin-top:9px;padding-top:4px;text-align:center;font-weight:700;font-size:.74rem;display:flex;justify-content:center;align-items:center}
.of__linea{text-align:center;font-size:.64rem}
.of__cab--crv{text-align:center;grid-template-columns:1fr 1.6fr 1fr}
.of__cab--crv .of__izq{text-align:left;align-self:end}
.of__sub{margin-top:5px !important}
.of__qr{display:block;width:44px;height:44px;margin:0 0 3px auto;border:4px solid #fff;outline:1px solid #DDD;
  background:repeating-conic-gradient(#111 0 25%,#fff 0 50%) 0 0/9px 9px}
.of__certifica{margin:4px 0 8px !important}
.of__cap{display:flex;align-items:center;font-weight:700;font-size:.74rem;margin:10px 0 5px !important}
.docu--crv .of__linea{text-align:left;padding-left:22px}
.of__tabla{width:100%}
.of__tabla th{font-weight:700;border-width:0 0 1px}
.of__tabla td{border:0;text-align:left;padding-top:4px}
@media (max-width:520px){.of__cols{grid-template-columns:1fr 1fr}.of__cab,.of__cab--crv{grid-template-columns:1fr;text-align:center}.of__der,.of__cab--crv .of__izq{text-align:center}.of__qr{margin:0 auto 3px}}
/* La TIVe con el aspecto de su diseño oficial (anexo de la Res. 131-2020): fondo gris con rayado diagonal, la
   línea de cuatro colores arriba (los de SUNARP, que son nuestros d1-d4), recuadros blancos para el QR y la
   placa, rótulos en negrita gris oscuro y el valor al lado. */
.docu--tive{background:repeating-linear-gradient(135deg,rgba(0,0,0,.035) 0 1px,transparent 1px 7px),#F3F4F3;color:#3A3D3A;
  padding:18px 18px 16px;font-size:.78rem}
.tive__linea{height:4px;border-radius:2px;margin:0 0 14px;
  background:repeating-linear-gradient(90deg,var(--d1) 0 12.5%,var(--d2) 12.5% 25%,var(--d3) 25% 37.5%,var(--d4) 37.5% 50%)}
.tive__cab{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-right:56px}
.tive__qr{flex:none;width:60px;height:60px;border:7px solid #fff;border-radius:4px;box-sizing:border-box;
  background:repeating-conic-gradient(#3A3D3A 0 25%,#fff 0 50%) 0 0/11px 11px}
.tive__cod{display:grid;grid-template-columns:22px 1fr;column-gap:8px;align-items:start}
.tive__cod .docu__n{grid-row:span 3}
.tive__cod p{margin:0;grid-column:2;font-size:.72rem;line-height:1.45;color:#545750}
.tive__tit{margin:0 0 12px}
.tive__t1{margin:0;font-size:.6rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#545750}
.tive__t2{margin:2px 0 0;font-size:.84rem;font-weight:900;letter-spacing:.02em;text-transform:uppercase;color:#2E302E;line-height:1.25}
.docu--tive p{margin:0}
.docu--tive b{font-weight:800;color:#2E302E}
.tive__gen{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px 10px;align-items:start;margin-bottom:12px}
.tive__campos{display:grid;gap:3px}
.tive__placa{text-align:center;font-size:.7rem}
.tive__placa>p:first-child{font-weight:800;color:#2E302E}
.tive__pl{background:#fff;border-radius:4px;padding:6px 12px;margin:3px 0 4px !important;font-size:1.05rem;letter-spacing:.06em;color:#2E302E;font-weight:600}
.tive__sub{display:flex;align-items:center;gap:8px;font-size:.86rem;font-weight:800;color:#2E302E;margin:0 0 8px !important;
  padding-bottom:4px;border-bottom:2px solid var(--d1);width:max-content}
.tive__big{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;margin:0 0 10px 30px;font-size:.84rem}
.tive__med,.tive__grid{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;margin-bottom:10px}
.tive__med>div{display:grid;gap:2px}
.tive__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 10px;font-size:.72rem}
.tive__cols>div{display:grid;gap:2px;align-content:start}
.tive__pie{display:grid;grid-template-columns:1.6fr 1fr;gap:10px;margin-top:4px}
.tive__pie span{background:#fff;border-radius:4px;min-height:38px;display:grid;place-items:center;font-size:.6rem;color:#8A8D88;text-align:center;padding:4px}
@media (max-width:420px){.tive__big{grid-template-columns:1fr;margin-left:0}.tive__cols{grid-template-columns:1fr 1fr}.tive__gen{grid-template-columns:22px minmax(0,1fr)}.tive__placa{grid-column:2;text-align:left}}
.docu__pie{margin:var(--s2) 0 0;font-size:.78rem;color:var(--gris);text-align:left}
.docu-fig{margin:var(--s4) 0;display:grid;gap:var(--s4)}
@media (min-width:980px){.docu-fig{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .docu-fig:has(.docu--tive),.docu-fig:has(.docu--of),.docu-fig:has(.docu--vamn){grid-template-columns:minmax(0,1fr)}}   /* hojas A4 y pantallas: a lo ancho, con la leyenda debajo */
.docu--tive,.docu--of,.docu--vamn{max-width:640px}
/* La ficha de la consulta vehicular de SUNARP (la imagen que devuelve el servicio), sin logos. */
.docu--ficha{background:#fff;color:#111;font-family:"DejaVu Sans",Verdana,Geneva,sans-serif;font-size:.74rem;line-height:1.3;padding:20px 18px 14px;max-width:420px}
.docu--ficha p{margin:0;position:relative}
.docu--ficha .docu__n{width:17px;height:17px;font-size:.6rem;display:inline-grid;flex:none;font-family:var(--font,inherit)}
.ficha__agua{position:absolute;inset:-40% -30%;transform:rotate(-27deg);display:grid;align-content:space-around;pointer-events:none;
  font-size:.82rem;line-height:1;color:rgba(0,0,0,.1);white-space:nowrap;overflow:hidden}
.ficha__tit{text-align:center;font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.02em;margin:0 0 6px !important}
.ficha__datos{display:grid;gap:1px}
.ficha__datos p,.ficha__prop,.ficha__pie{display:grid;grid-template-columns:17px 11.6em minmax(0,1fr);gap:0 6px;align-items:center}
.ficha__datos b,.ficha__prop b{font-weight:700}
.ficha__datos span:last-child{overflow-wrap:anywhere}
.ficha__prop{margin-top:12px !important}
.ficha__nom{padding-left:23px}
.ficha__pie{margin-top:14px !important;font-size:.66rem;grid-template-columns:17px auto}
.ficha__pie span{grid-column:auto}
@media (max-width:420px){.docu--ficha{font-size:.66rem;padding:18px 12px 12px}.ficha__datos p,.ficha__prop{grid-template-columns:17px 10.8em minmax(0,1fr)}}
/* «Vehículos a mi Nombre»: su pantalla (la captura oficial que publicó Andina), sin logos ni la dirección del servicio. */
.docu--vamn{background:#E9ECEB;color:#2B2F2D;font-family:Arial,Helvetica,sans-serif;font-size:.7rem;line-height:1.4}
.docu--vamn p{margin:0}
.docu--vamn .docu__n{width:17px;height:17px;font-size:.6rem;display:inline-grid;flex:none;margin-right:5px;font-family:var(--font,inherit)}
.vamn__nav{display:flex;gap:5px;padding:7px 10px;background:#F7F8F7;border-bottom:1px solid #D3D8D5}
.vamn__nav span{width:8px;height:8px;border-radius:50%;background:#C6CCC8}
.vamn__cab{background:#2E3A35;color:#fff;padding:11px 64px 11px 16px !important;font-weight:800;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase}
.vamn__fondo{padding:16px}
.vamn__panel{background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.14);padding:12px 12px 14px}
.vamn__tit{background:#DCE0DE;border-radius:4px;padding:8px 10px !important;text-align:center;font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.02em}
.vamn__doc{margin:11px 0 4px !important;font-weight:700}
.vamn__tabla{width:100%;border-collapse:collapse;table-layout:fixed;font-size:.64rem}
.vamn__tabla th{text-align:left;vertical-align:bottom;font-weight:700;padding:6px 4px;border-bottom:2px solid #6BA539}
.vamn__tabla th span{display:inline}
.vamn__tabla td{padding:7px 4px;border-bottom:1px solid #E3E7E5;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere}
.vamn__aviso{display:flex;align-items:flex-start;margin-top:10px !important;font-size:.6rem;color:#5A605C}
@media (max-width:520px){.vamn__tabla th{vertical-align:top}.vamn__tabla th .docu__n{display:grid;margin:0 0 3px}.vamn__fondo{padding:10px}.vamn__panel{padding:10px 8px 12px}}
.docu-ley{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.docu-ley li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;font-size:.95rem;line-height:1.45}
.docu-ley__nota{margin:var(--s3) 0 0;font-size:.95rem;font-weight:700}
.docu-ley__fuente{margin:var(--s2) 0 0;font-size:.8rem;color:var(--gris);text-wrap:pretty}

/* ── Calculadoras (partials/calculadoras.php): la misma tarjeta que la caja de placa ── */
.calc{background:var(--card);border-radius:var(--r-lg);box-shadow:0 1px 0 var(--linea2),0 18px 40px -18px rgba(40,60,10,.35);
  padding:var(--s5) var(--s4);color:var(--tinta);text-align:left;max-width:560px;margin:0 auto;display:grid;gap:var(--s4)}
/* El filete arriba de las tarjetas de formulario (el de mx-tv): un degradé del turquesa al verde
   de marca, los dos colores del logo (check y cuadrado). Se probaron el turquesa solo y los cuatro
   colores de los pasos, que rompían la regla de los tokens; Leandro pidió otra cosa (2026-10-08).
   Va como fondo y no como borde: border-image no respeta el border-radius, y así el filete sigue la
   curva de las esquinas. Los 4 px se suman al padding de arriba. Después de .calc, que si no le
   pisa el background. */
.placa,.calc{background:var(--filete) top/100% 4px no-repeat,var(--card);
  padding-top:calc(var(--s5) + 4px)}
.calc__campo{border:0;margin:0;padding:0;min-width:0}
.calc__campo>label,.calc__campo>legend{display:block;font-weight:800;font-size:.95rem;margin-bottom:var(--s2);padding:0}
.calc select,.calc input[type=number]{width:100%;max-width:100%;font:inherit;font-size:1.05rem;color:var(--tinta);background:#fff;
  border:2px solid #2E3833;border-radius:var(--r);padding:10px var(--s3)}
.calc select:focus,.calc input:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 4px var(--verde-cl2)}
/* El select sin el aspecto del navegador, igual al input de al lado, con su flecha (2026-10-09). */
.calc select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232E3833' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:14px}
/* Las opciones de las calculadoras, como botones de un grupo (Leandro, 2026-10-09: «¿estás usando los radio
   del browser?»). El <input type=radio> sigue ahí (teclado, required, lectores de pantalla) con
   appearance:none y un círculo propio: vacío, y al marcarlo verde lleno con un punto blanco. Del mismo
   ancho mientras entren en la fila (flex 1 1 0); si no entran, bajan a la línea siguiente. */
.calc__opciones{display:flex;flex-wrap:wrap;gap:var(--s2)}
.calc__opcion{display:flex;align-items:center;gap:10px;flex:1 1 0;min-width:fit-content;cursor:pointer;
  background:var(--card);border:1.5px solid var(--linea2);border-radius:12px;padding:11px 14px;
  font-size:.95rem;font-weight:600;color:var(--tinta);transition:border-color .12s,background .12s,box-shadow .12s}
.calc__opcion:hover{border-color:var(--verde)}
.calc__opcion input[type=radio]{appearance:none;-webkit-appearance:none;margin:0;flex:none;width:20px;height:20px;border-radius:50%;
  border:2px solid #B9BEB7;background:var(--card);display:grid;place-content:center;cursor:pointer;transition:border-color .12s,background .12s}
.calc__opcion input[type=radio]::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .12s}
.calc__opcion input[type=radio]:checked{border-color:var(--verde);background:var(--verde)}
.calc__opcion input[type=radio]:checked::before{transform:scale(1)}
.calc__opcion:has(input:checked){border-color:var(--verde);background:var(--verde-cl);color:var(--verde-osc);font-weight:700;
  box-shadow:inset 0 0 0 1px var(--verde)}
.calc__opcion:has(input:focus-visible){box-shadow:0 0 0 4px var(--verde-cl2)}
.calc__opcion input[type=radio]:focus{outline:none}
/* En celular, control segmentado: las opciones de un grupo, siempre en una fila y del mismo ancho, sin el
   círculo (el radio queda, invisible pero accesible), y la elegida con el relleno verde. Con el círculo,
   «No tiene · Sí tiene · No lo sé» no entraba y una bajaba sola a otra línea. */
@media (max-width:519px){
  .calc__opcion{position:relative;flex:1 1 0;min-width:0;justify-content:center;text-align:center;padding:11px 6px;gap:0}
  .calc__opcion input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
}
.calc__btn{width:100%}
.calc__aviso{color:var(--rojo);font-weight:600;font-size:.85rem;margin:0}
.calc__pasos{margin:var(--s3) 0 0;padding-left:1.2em}
.calc__pasos li{margin:0 0 var(--s2)}

/* ── La capa de progreso (app.js, capaProceso; el patrón de mx-tv, Leandro 2026-10-08) ──
   Fija sobre toda la página con el fondo desenfocado: la tarjeta de sbProcesar tapa el formulario
   mientras dura y se queda durante la navegación a la respuesta. La tarjeta lleva el filete y la
   sombra de las de formulario (la de la librería es gris con borde, para ir en el flujo). */
.capa-proceso{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:var(--s4);
  background:rgba(28,31,23,.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:var(--filete) top/100% 4px no-repeat,var(--card);border:0;border-radius:var(--r-lg);
  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 */

/* ── La vista de resultado de las calculadoras (sb_calc_resultado; el patrón de mx-tv) ──
   En lugar del hero: el encabezado compacto, la respuesta a todo el ancho, «‹ Calcular de nuevo» y
   el separador «Fin del resultado», que la aparta del contenido de la página que sigue. */
/* Toda la respuesta va sobre la banda del encabezado, como si fuera el hero (Leandro, 2026-10-08):
   la banda sigue de corrido desde las migas hasta «Calcular de nuevo». */
.res-vista{background:var(--hero-banda);box-shadow:0 0 0 100vmax var(--hero-banda);clip-path:inset(0 -100vmax);padding:0 0 var(--s7)}
.pagina-head:has(+ .res-vista){padding-bottom:var(--s5)}
/* En el view de resultado la banda continúa (header + .res-vista, los dos var(--hero-banda)): la línea de
   color quedaría flotando en medio de la banda. Se oculta cuando la banda va seguida de un resultado. */
:is(.hero,.banda-hero,.migas-hero):has(+ .res-vista)::after{display:none}
.res-vista__resumen{margin:0 0 var(--s4);color:var(--gris)}
.calc-res .resultado{margin:0}
.res-vista__pie{margin:var(--s5) 0 0}
.res-fin{display:flex;align-items:center;gap:14px;margin:var(--s6) 0 var(--s2);color:var(--gris);font-size:.72rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;text-align:center}
.res-fin::before,.res-fin::after{content:"";flex:1;height:1px;background:var(--linea2)}
.res-fin span{padding:6px 14px;border:1px solid var(--linea2);border-radius:999px;background:var(--hero)}

/* ── La vista de resultado de la caja de placa (partials/consulta.php): la misma banda y el mismo
   cierre que la de las calculadoras, con el h1 adentro (las migas las pone el layout arriba). ── */
.res-vista:first-child{margin-top:calc(-1 * var(--s2));padding-top:var(--s5)}   /* sin migas (la portada): como el hero, pegada al menú y con aire */
.migas-hero + .res-vista{padding-top:var(--s1)}
.res-vista__h1{margin:var(--s3) 0 0;text-wrap:balance}
.res-vista__h1::after{content:"";display:block;width:56px;height:6px;border-radius:3px;background:var(--d1);margin:var(--s4) 0 var(--s5)}
.res-vista__meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center;margin:0 0 var(--s4);font-size:.85rem;color:var(--gris)}
.res-vista__nota{font-size:.88rem;color:var(--gris);margin:var(--s3) 0 0}
.res-bloque,.res-rutas{margin-top:var(--s6)}
.res-bloque__t{font-size:1.3rem;margin:0 0 var(--s3)}
/* El resultado sin datos (no encontrada, formato malo, fuente que no respondió): la misma tarjeta
   que la ficha, con un mensaje, consejos y botones; nada de volver a mostrar el formulario. */
.resultado__titulo{font-weight:800;font-size:1.2rem;line-height:1.3;color:var(--tinta);margin:0 0 var(--s2)}
.resultado__texto{color:var(--gris);margin:0}
.resultado__consejos{list-style:none;margin:var(--s4) 0 0;padding:var(--s4) 0 0;border-top:1px solid var(--linea);display:grid;gap:var(--s2)}
.resultado__consejos li{position:relative;padding-left:22px;line-height:1.5}
.resultado__consejos li::before{content:"";position:absolute;left:4px;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--d1)}
.resultado__acciones{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-top:var(--s5)}
.placa-boton{display:contents}   /* el botón de reconsulta va en la fila como cualquier otro */
@media (max-width:599px){.resultado__acciones .btn,.res-vista__pie .btn{width:100%}}

/* La chapa de las rutas («TE AFECTA»): «.card span» del sitio le pisaba el blanco y el
   inline-flex de la librería, y salía como una barra verde a lo ancho con el texto ilegible. */
.card .card-badge{display:inline-flex;color:#fff;font-size:.69rem;margin:0 0 3px}

/* Lugares de anuncio (sb_ad_lugar): vacíos no ocupan lugar. */
.ppe-ad:empty{display:none}

/* Las oficinas que abren los sábados (hub /oficinas-sunarp): plegadas, por región, en dos columnas en escritorio. */
.sabados{border:1px solid var(--linea2);border-radius:var(--r-lg);background:var(--card);margin:var(--s2) 0 0}
.sabados summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);font-weight:700;color:var(--verde-osc)}
.sabados summary::-webkit-details-marker{display:none}
.sabados summary::after{content:"+";font-size:1.3rem;line-height:1}
.sabados[open] summary::after{content:"–"}
.sabados__grid{display:grid;grid-template-columns:1fr;gap:var(--s4) var(--s5);padding:var(--s1) var(--s4) var(--s4);border-top:1px solid var(--linea)}
@media (min-width:760px){.sabados__grid{grid-template-columns:1fr 1fr}}
.sabados__r{margin:var(--s2) 0 4px;font-size:.74rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--verde-osc)}
.sabados ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sabados li{font-size:.92rem;line-height:1.35;overflow-wrap:anywhere}
.sabados li span{display:block;color:var(--gris);font-size:.86rem}
/* El directorio completo del hub /oficinas-sunarp: una región por <details>, con buscador (app.js). */
.hero__boton{margin:var(--s4) 0 0}
#buscar-oficina,.dir details{scroll-margin-top:96px}   /* la cabecera fija no tapa el buscador ni la región al llegar por su ancla */
.dir__buscar{display:block;margin:0 0 var(--s3)}
.dir__buscar input{width:100%;font:inherit;padding:12px 14px;border:1px solid var(--linea2);border-radius:var(--r);background:var(--card);color:var(--tinta)}
.dir__buscar input:focus{outline:2px solid var(--verde);outline-offset:1px;border-color:var(--verde)}
.dir__estado{margin:0 0 var(--s3);font-size:.9rem;color:var(--gris)}
.dir details{border-bottom:1px solid var(--linea2)}
.dir details:first-of-type{border-top:1px solid var(--linea2)}
.dir summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:var(--s3);padding:var(--s3) 0;font-weight:700}
.dir summary::-webkit-details-marker{display:none}
.dir summary::after{content:"+";color:var(--verde);font-weight:700;font-size:1.3rem;line-height:1}
.dir details[open] summary::after{content:"–"}
.dir__n{margin-left:auto;font-size:.85rem;font-weight:600;color:var(--gris)}
.dir__ofis{list-style:none;margin:0 0 var(--s4);padding:0;display:grid;gap:var(--s2)}
.dir__ofi{background:var(--card);border:1px solid var(--linea);border-radius:var(--r);padding:var(--s3) var(--s4);overflow-wrap:anywhere}
.dir__ofi strong{display:block;margin-bottom:4px;line-height:1.3}
.dir__ofi p{margin:0;font-size:.92rem;color:var(--gris)}
.dir__ofi a{display:inline-block;margin-top:6px;font-size:.92rem;font-weight:600}
.dir mark{background:color-mix(in srgb,var(--d3) 38%,transparent);color:inherit;border-radius:3px;padding:0 1px}   /* lo que coincide con la búsqueda */

/* ── Respuesta destacada, callouts, bloque ── */
.respuesta{background:var(--card);border-left:4px solid var(--verde);border-radius:var(--r-sm);padding:var(--s4)}
.respuesta p:first-child{margin-top:0}.respuesta p:last-child{margin-bottom:0}
.hero .respuesta{max-width:600px;margin:var(--s4) auto 0;text-align:left;font-size:1.02rem;line-height:1.55}
.caja-paso{max-width:560px;margin-top:var(--s4)}
.caja-paso>p{margin:0 0 var(--s2);font-weight:700}
.link-consulta{margin:var(--s3) 0 var(--s4);font-weight:700}
.mapa__t{font-size:1.05rem;font-weight:800;margin:var(--s5) 0 var(--s3)}   /* los grupos del mapa del sitio de la portada y el paso a paso en SUNARP */
.col-der>.mapa__t:first-child{margin-top:0}
.link-consulta a{text-underline-offset:3px}
.caja-paso>.link-consulta{margin:0}
.callout{border-radius:var(--r);padding:14px var(--s4);margin:var(--s4) 0;border:1px solid var(--linea)}
.callout__t{font-weight:700;display:block;margin-bottom:2px}
.callout--info{background:var(--verde-cl);border-color:var(--linea2)}
.callout--warn{background:var(--ambar-cl);border-color:#f3dcbb}
.callout--ok{background:var(--ok-cl);border-color:var(--linea2)}
.callout--alerta{background:var(--rojo-cl);border-color:#f6cfca}
.bloque{background:var(--card);border:1px dashed var(--linea2);border-radius:var(--r);padding:14px var(--s4);margin:var(--s4) 0}
.firma{color:var(--gris);font-size:.85rem;margin-top:1.5em}
.nota{color:var(--gris);font-size:.9rem}

/* ── Tarjetas: sin sombra, punto de color a la derecha (rota los --d*) ── */
.cards,.tarjetas{list-style:none;padding:0;margin:var(--s4) 0;display:grid;gap:var(--s3);grid-template-columns:1fr}
.card,.tarjeta{position:relative;display:block;background:var(--card);border:1px solid var(--linea2);border-radius:var(--r);
  padding:var(--s4) var(--s6) var(--s4) var(--s4);text-decoration:none;color:var(--tinta);transition:border-color .12s,background .12s}
/* Las tarjetas que enlazan se ven tocables (Leandro, 2026-10-09: «no queda claro que son links»): el título
   en el verde de los enlaces y, en vez del punto, un círculo con la flecha, que avanza al pasar el mouse. */
/* Las tarjetas que son enlaces, con fondo propio y una sombra leve (Leandro, 2026-10-10: «el background de los botones es
   igual al fondo»): con el blanco de la página se fundían. Las que no son enlaces quedan blancas: la diferencia dice qué se toca. */
a.card,a.tarjeta{padding-right:calc(var(--s4) + 44px);background:var(--card-enlace);
  box-shadow:0 1px 2px rgba(28,31,23,.06),0 4px 12px -6px rgba(28,31,23,.18)}
a.card .card__t,a.tarjeta .card__t{color:var(--verde-osc)}
a.card::after,a.tarjeta::after{content:"→";content:"→" / "";position:absolute;right:var(--s4);top:var(--s4);width:30px;height:30px;border-radius:50%;
  background:#008786;color:#FFFFFF;display:grid;place-items:center;font-size:.95rem;font-weight:800;line-height:1;transition:transform .15s}
/* Los círculos, en versiones más profundas de los cuatro colores (Leandro, 2026-10-10: «se funden con el fondo»): el verde
   y el ámbar de marca daban 2,21:1 y 1,87:1 contra el blanco de la tarjeta, debajo del 3:1 de un elemento de interfaz. Estos
   pasan contra la tarjeta blanca y la oscura (turquesa 4,37 y 4,16; verde 4,28 y 4,25; ámbar 4,52 y 4,02; rojo 4,71 y 3,86),
   con la flecha en blanco. */
a.card:hover::after,a.tarjeta:hover::after{transform:translateX(3px)}
.cards>:nth-child(4n+2)::after{background:#5A8714}.cards>:nth-child(4n+3)::after{background:#A86800}.cards>:nth-child(4n+4)::after{background:#DA3221}
a.card:hover,a.tarjeta:hover{border-color:var(--tinta);background:var(--verde-cl)}
.card b,.tarjeta b,.card__t{display:block;color:var(--tinta);font-size:1.08rem;font-weight:800}
.card span,.tarjeta span,.card__d{display:block;font-size:.88rem;color:var(--gris);margin-top:2px}

/* ── Chip ── */
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.78rem;font-weight:600;
  background:var(--verde-cl);color:var(--verde-osc)}
.chip--warn{background:var(--ambar-cl);color:var(--ambar)}
.chip--ok{background:var(--ok-cl);color:var(--ok)}
.chip--alerta{background:var(--rojo-cl);color:var(--rojo)}

/* ── Tabla (sb_tabla): una caja como las tarjetas, con el filete arriba, el encabezado en verde claro, la
   primera columna como título de la fila y filas alternadas. En celular cada fila es una tarjeta con su
   título y los datos con la etiqueta encima (Leandro, 2026-10-09: se veían muy básicas y monótonas). ── */
.tabla-caja{margin:var(--s4) 0;border:1px solid var(--linea2);border-radius:var(--r-lg);overflow:hidden;
  background:var(--filete) top/100% 4px no-repeat,var(--card);padding-top:4px}
.tabla{width:100%;border-collapse:collapse;margin:0;font-size:.95rem}
.tabla caption{text-align:left;color:var(--gris);font-size:.85rem;padding:12px 16px 10px}
.tabla th,.tabla td{text-align:left;vertical-align:top;padding:13px 16px;border-bottom:1px solid var(--linea)}
.tabla th{background:var(--verde-cl);color:var(--verde-osc);font-size:.74rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.tabla td:first-child{font-weight:700;color:var(--tinta);min-width:9em}
.tabla tbody tr:nth-child(even){background:color-mix(in srgb,var(--hero) 45%,transparent)}
.tabla tbody tr:last-child td{border-bottom:0}
@media (max-width:599px){
  .tabla-caja{border:0;border-radius:0;overflow:visible;background:none;padding:0}
  .tabla,.tabla thead,.tabla tbody,.tabla tr,.tabla th,.tabla td{display:block}
  /* Con la tabla en block, la leyenda seguía como table-caption y se encogía al ancho mínimo (una
     palabra por línea a 360 px). */
  .tabla caption{display:block;padding:0 0 var(--s2)}
  .tabla thead{position:absolute;left:-999px}
  .tabla tbody tr,.tabla tbody tr:nth-child(even){background:var(--filete) top/100% 3px no-repeat,var(--card);border:1px solid var(--linea2);
    border-radius:var(--r);margin-bottom:var(--s3);padding:var(--s3) var(--s4) var(--s2);overflow:hidden}
  .tabla td,.tabla tbody tr:last-child td{border:0;padding:6px 0}
  .tabla td:first-child{font-size:1rem;font-weight:800;padding:2px 0 10px;margin-bottom:4px;border-bottom:1px solid var(--linea);min-width:0}
  .tabla td:not(:first-child)::before{content:attr(data-th);display:block;font-size:.72rem;font-weight:800;letter-spacing:.06em;
    text-transform:uppercase;color:var(--gris);margin-bottom:2px}
}

/* ── Stepper: círculos que rotan los --d* ── */
.steps{list-style:none;counter-reset:p;margin:var(--s4) 0;padding:0}
.steps__item{position:relative;padding:0 0 var(--s5) 48px;counter-increment:p}
.steps__item::before{content:counter(p);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:999px;
  background:var(--d1);color:#1C1F17;font-weight:900;font-size:.95rem;display:grid;place-items:center}
.steps__item:nth-child(4n+2)::before{background:var(--d2)}.steps__item:nth-child(4n+3)::before{background:var(--d3)}.steps__item:nth-child(4n+4)::before{background:var(--d4)}
.steps__item:not(:last-child)::after{content:"";position:absolute;left:16px;top:38px;bottom:0;width:2px;background:var(--linea2)}
.steps__item b{display:block;font-size:1.08rem}
.steps__item p{margin:.2em 0 0;color:var(--gris);font-size:.92rem}

/* ── Resultado de herramienta ── */
.resultado{background:var(--card);border:1px solid var(--linea2);border-radius:var(--r-lg);overflow:hidden;margin:var(--s4) 0}
.resultado__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s4);
  background:var(--card);border-bottom:1px solid var(--linea2);border-top:5px solid var(--d1)}
.resultado__placa{white-space:nowrap;background:#fff;color:#1C1F17;border:3px solid #2E3833;border-radius:10px;padding:5px 14px;
  font-weight:900;font-size:1.3rem;letter-spacing:.14em}
.resultado__body{padding:var(--s4)}
/* La columna puede achicarse (minmax(0,…)) y el valor corta línea donde haga falta: con 1fr, un valor sin
   espacios (el n.º de certificado del SOAT, 25 dígitos) ensanchaba la columna entera y en celular todas
   las filas se salían de la tarjeta, cortadas por su overflow:hidden (Leandro, 2026-10-11: «roto en mobile»). */
.resultado__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px var(--s4)}
.dato{display:flex;justify-content:space-between;gap:var(--s4);border-bottom:1px solid var(--linea);padding:6px 0}
.dato dt{color:var(--gris);font-size:.88rem}
.dato dd{margin:0;font-weight:700;text-align:right;min-width:0;overflow-wrap:anywhere}

/* ── Ayuda (i) ── */
.ayuda{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:999px;background:var(--linea2);color:var(--tinta);
  font-size:.72rem;font-weight:700;cursor:help;vertical-align:middle;margin-left:4px}

/* ── Figura / documento dibujado ── */
.figura{margin:var(--s4) 0;border:1px solid var(--linea);border-radius:var(--r);padding:var(--s4);background:var(--card)}
.figura figcaption{color:var(--gris);font-size:.85rem;margin-top:var(--s2)}

/* ── Encabezado de sección + actualizado ── */
/* Barrita de color arriba del h2; con data-numerar="si" en <main> las secciones llevan número (01, 02…). */
.sh{margin:var(--s7) 0 var(--s4)}
@media (max-width:719px){.sh{margin:var(--s4) 0 var(--s4)}}   /* en celular, menos aire arriba del título (Leandro, 2026-10-09) */
.sh h2,.faq>h2{font-size:1.75rem;font-weight:900;letter-spacing:-.025em;line-height:1.1;margin:0}
.faq>h2{margin-bottom:var(--s4)}
.sh p{color:var(--gris);margin:.2em 0 0}
.sh::before,.faq>h2::before{content:"";display:block;width:36px;border-top:5px solid var(--d1);border-radius:3px;margin-bottom:var(--s3)}
[data-numerar="si"] .sh::before,[data-numerar="si"] .faq>h2::before{counter-increment:sec;content:"0" counter(sec);padding-top:var(--s2);margin-bottom:var(--s1);font-weight:900;font-size:1.5rem;letter-spacing:.08em;color:var(--tinta)}
section:nth-of-type(4n+2) .sh::before{border-color:var(--d2)}
section:nth-of-type(4n+3) .sh::before,.faq>h2::before{border-color:var(--d3)}
section:nth-of-type(4n+4) .sh::before{border-color:var(--d4)}
.actualizado{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--gris);font-weight:600;
  background:var(--card);border:1px solid var(--linea2);border-radius:999px;padding:3px 10px}

/* ── FAQ ── */
.faq{margin:var(--s5) 0}
.faq details{border:0;border-bottom:1px solid var(--linea2);border-radius:0;margin:0;padding:0;background:none}
.faq h2+details{border-top:1px solid var(--linea2)}
.faq summary{cursor:pointer;padding:var(--s4) 0;font-size:1.05rem;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(--verde);font-weight:700;font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq__a{padding:0 0 var(--s4);color:var(--gris)}

/* ── Footer ── */
/* El pie va oscuro (Leandro, 2026-10-08): fondo --tinta y textos con los claros del modo oscuro.
   Contraste sobre #1C1F17: títulos 14,6:1 · links 8,1:1 · «Placa» 16,7:1 · «Perú» 4,05:1 (texto grande, AA). */
.pie{background:var(--pie);color:var(--pie-suave);border-top:5px solid var(--d1);margin-top:var(--s6);padding:var(--s7) 0 var(--s5)}
.pie-top{display:grid;gap:var(--s6)}
.pie-marca .marca{display:inline-flex;align-items:center;gap:2px;color:var(--pie-txt);text-decoration:none}
.pie .marca{--marca-1:#FFFFFF;--marca-2:#9FD13A;--marca-3:#B8BEB0}   /* el logo en el pie oscuro: «peru» en lima */
.pie-marca p{color:var(--pie-suave);margin:var(--s3) 0 var(--s4);max-width:24em;text-wrap:pretty}
.pie-cta{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:var(--card);color:var(--tinta);
  border:2px solid var(--tinta);border-radius:var(--r-sm);font-weight:800;font-size:.9rem;text-decoration:none}
.pie-cta:hover{background:var(--verde-cl);color:var(--verde-osc);border-color:var(--verde)}
.pie-cols{display:grid;gap:var(--s6) var(--s5);grid-template-columns:repeat(2,minmax(0,1fr))}   /* celular: los cuatro grupos en 2×2 (Leandro, 2026-10-09); desde 720 px, cuatro columnas */
.pie h2{font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.09em;color:var(--pie-txt);margin:0 0 var(--s3)}
.pie h2::before{content:"";display:block;width:24px;height:4px;border-radius:2px;background:var(--d1);margin-bottom:var(--s2)}
.pie-cols>:nth-child(2) h2::before{background:var(--d2)}.pie-cols>:nth-child(3) h2::before{background:var(--d3)}.pie-cols>:nth-child(4) h2::before{background:var(--d4)}
.pie-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pie li{margin:0;line-height:1.35}
.pie-cols a{color:var(--pie-suave);text-decoration:none;font-size:.92rem;line-height:1.35}
.pie-cols a:hover{color:#9DCC3F;text-decoration:underline}
.pie-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2) var(--s5);margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--pie-linea);font-size:.82rem;color:var(--pie-suave)}
.pie-base p{margin:0}
.pie-legal{max-width:none;border:0;padding:0;margin:0;color:var(--pie-suave);font-size:.82rem}

/* ── Patrones de layout de página (handoff: «Patrones de layout») ── */
/* Banda a todo el ancho (--hero-banda, petróleo): hero, encabezados internos. */
.banda-hero{background:var(--hero-banda);box-shadow:0 0 0 100vmax var(--hero-banda);clip-path:inset(0 -100vmax);position:relative}
/* La misma franja de color que el hero, abajo de la banda de las páginas sin hero (oficinas, legales…)
   (Leandro, 2026-10-09: «el hero no tiene la línea colorida debajo»). */
.banda-hero::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:100vw;height:4px;
  background:linear-gradient(90deg,var(--d1),var(--d2),var(--d3),var(--d4))}
/* Sección de dos columnas: izquierda el SectionHead, derecha el contenido. Reflowa a una en móvil. */
.seccion-cols{position:relative;display:flex;flex-wrap:wrap;gap:0 var(--s6);align-items:flex-start;padding:var(--s3) 0 var(--s5)}
.seccion-cols>.col-izq{flex:1 1 240px;min-width:0}
.seccion-cols>.col-der{flex:2 1 520px;min-width:0}
/* Las dos columnas arrancan a la MISMA altura: el título (.sh) baja 48 px por su margen, y la derecha
   baja lo mismo cuando están lado a lado (≥ 824 px: 240 + 520 + 32 de gap + 32 de márgenes). Antes lo
   hacía a mano .col-der--texto en 5 páginas y las otras 13 secciones quedaban desalineadas.
   Apiladas (celular) no hace falta: sería un hueco entre la bajada y el contenido. */
@media (min-width:824px){.seccion-cols>.col-der{padding-top:var(--s7)}}
.seccion-cols>.col-der>:first-child{margin-top:0}
/* Separación entre secciones: «regla» (Leandro, 2026-10-08, elegida entre cinco probadas con
   ?secciones=). Una regla fina del ancho del texto arriba de cada sección de dos columnas, con un
   tramo corto y grueso del color de su número, y aire. Sin fondos: las bandas alternadas partían la
   página en franjas de cebra; antes hubo una banda única («dato que decide») y una línea gris a
   todo el ancho. No va en la primera después del hero, del encabezado propio o de la vista de
   resultado (ahí ya separa el cambio de fondo). El tramo de color reemplaza a la barrita del número.
   Colores por section:nth-of-type, como antes. La FAQ, que la tenía sin regla y con su barrita, la
   lleva igual desde el 2026-10-09 (Leandro, «probemos»): ver .seccion-faq más abajo. */
.seccion-cols{border-top:1px solid var(--linea2);margin-top:var(--s4)}
.seccion-cols::before{content:"";position:absolute;top:-2px;left:0;width:96px;height:3px;background:var(--d1)}
section.seccion-cols:nth-of-type(4n+2)::before{background:var(--d2)}
section.seccion-cols:nth-of-type(4n+3)::before{background:var(--d3)}
section.seccion-cols:nth-of-type(4n+4)::before{background:var(--d4)}
/* El número de la sección, del color de su tramo (Leandro, 2026-10-09); el de la FAQ, del de su barrita. */
section.seccion-cols .sh::before{color:var(--d1)}
section.seccion-cols:nth-of-type(4n+2) .sh::before{color:var(--d2)}
section.seccion-cols:nth-of-type(4n+3) .sh::before{color:var(--d3)}
section.seccion-cols:nth-of-type(4n+4) .sh::before{color:var(--d4)}
.sh::before{border-top:0;padding-top:0}
:is(.hero,.banda-hero,.res-fin) + .seccion-cols{border-top:0;margin-top:0}
:is(.hero,.banda-hero,.res-fin) + .seccion-cols::before{display:none}
.seccion-faq{padding:var(--s5) 0 var(--s7)}
/* La FAQ con la misma regla que las secciones de dos columnas: línea fina, tramo de color por posición
   y el número del mismo color; sin la barrita. El aire de arriba, como el de .seccion-cols. */
.seccion-faq{position:relative;border-top:1px solid var(--linea2);margin-top:var(--s7);padding-top:var(--s3)}
.seccion-faq>.faq{margin-top:var(--s7)}   /* el mismo aire que el título de las otras (.sh) */
@media (max-width:719px){.seccion-faq>.faq{margin-top:var(--s4)}}
.seccion-faq::before{content:"";position:absolute;top:-2px;left:0;width:96px;height:3px;background:var(--d1)}
section.seccion-faq:nth-of-type(4n+2)::before{background:var(--d2)}
section.seccion-faq:nth-of-type(4n+3)::before{background:var(--d3)}
section.seccion-faq:nth-of-type(4n+4)::before{background:var(--d4)}
.seccion-faq .faq>h2::before{border-top:0;color:var(--d1)}
section.seccion-faq:nth-of-type(4n+2) .faq>h2::before{color:var(--d2)}
section.seccion-faq:nth-of-type(4n+3) .faq>h2::before{color:var(--d3)}
section.seccion-faq:nth-of-type(4n+4) .faq>h2::before{color:var(--d4)}
/* Cierre a SUNARP: banda verde clara centrada, con el Button accent. */
.cierre-sunarp{background:var(--verde-cl);box-shadow:0 0 0 100vmax var(--verde-cl);clip-path:inset(0 -100vmax);
  padding:var(--s7) 0;margin:var(--s7) 0 calc(-1 * var(--s7));display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s3)}
.cierre-sunarp h2{margin:0;font-size:1.75rem;font-weight:900;letter-spacing:-.025em;line-height:1.1;max-width:16em}
.cierre-sunarp p{color:var(--gris);margin:0;max-width:34em;text-wrap:pretty}

/* ── Desktop ── */
@media (min-width:720px){
  h1{font-size:2.8rem}
  .hero,.pagina-head{padding:70px 0}   /* 70 px arriba y abajo en escritorio (Leandro, 2026-10-09). .pagina-head iguala al hero */
  .hero h1{font-size:3.4rem}
  .sh h2,.faq>h2{font-size:2.2rem}
  .placa__fila{flex-wrap:wrap;align-items:stretch}   /* wrap: la ayuda baja a su línea (order 3) */
  .placa__campo{flex:1 1 0}
  .placa__fila>button{flex:none;margin-top:0}
  .placa__fila>.placa__hint{order:3}
  .cards,.tarjetas{grid-template-columns:1fr 1fr}
  .resultado__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pie-cols{grid-template-columns:repeat(4,1fr)}
}
/* El menú de escritorio, desde 1024 px: con los dos desplegables (Trámites, Antes de comprar) necesita
   ~1000 px; a 900 «Consulta vehicular», «Revisión técnica» y las flechas se partían en dos líneas.
   Debajo, el botón «Menú», que tiene todos los enlaces (2026-10-09; antes el corte era 900). */
@media (min-width:1024px){
  .menu{display:block}
  .menu>ul{list-style:none;display:flex;gap:2px;margin:0;padding:0}
  .menu>ul>li{position:relative}
  .menu a,.desplegar{display:block;padding:10px 12px;text-decoration:none;color:var(--tinta);background:none;border:0;font:inherit;font-size:.95rem;font-weight:600;cursor:pointer}
  .menu>ul>li>a,.desplegar{white-space:nowrap}
  .submenu{display:none;position:absolute;top:100%;left:0;min-width:250px;background:var(--card);list-style:none;margin:0;
    border:1px solid var(--linea);border-radius:var(--r);box-shadow:0 10px 30px -12px rgba(28,31,23,.28);padding:6px;z-index:25}
  .submenu a{border-radius:var(--r-sm)}
  .menu>ul>li:last-child .submenu{left:auto;right:0}   /* el último desplegable se abre hacia adentro de la pantalla */
  .menu li:hover .submenu,.menu .submenu:focus-within,.desplegar[aria-expanded="true"]+.submenu{display:block}
  .desplegar::after{content:"";display:inline-block;width:.42em;height:.42em;margin-left:7px;border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
  /* La página donde estás: abajo, una barra corta y centrada con el degradé del filete (d1 → verde, el de
     las tarjetas de formulario); en el desplegable, el fondo verde claro (Leandro, 2026-10-09). Va en
     ::before porque el ::after del desplegable es la flecha. */
  .menu>ul>li>a,.desplegar{position:relative}
  .menu>ul>li>a[aria-current="page"],.desplegar.activo{color:var(--verde-osc)}
  .menu>ul>li>a[aria-current="page"]::before,.desplegar.activo::before{content:"";position:absolute;left:50%;bottom:0;
    width:40px;height:4px;border-radius:2px;transform:translateX(-50%);background:var(--filete)}
  .submenu a[aria-current="page"]{background:var(--verde-cl);color:var(--verde-osc)}
  .submenu a:hover{background:var(--hero)}
  .abrir-menu,.menu-movil{display:none}
}
@media (min-width:900px){ .pie-top{grid-template-columns:minmax(0,1fr) minmax(0,2.2fr)} }
@media (min-width:980px){ .cards--3{grid-template-columns:1fr 1fr 1fr} }