/* ============================================================
   SEGURO OBLIGATORIO PATINETE — Sistema de diseño
   Dirección de arte: «menta y cielo» — claro, limpio y amable.
   Fondo luminoso, azul noche para el texto, menta para la acción
   y acentos de sol y coral para avisos y sanciones.
   Tipografías: Bricolage Grotesque (display) · Schibsted Grotesk (cuerpo)
                Spline Sans Mono (datos, importes, fechas)
   ============================================================ */

:root {
    /* --- Color --- */
    --tinta:        #16294D;   /* azul noche: texto y fondos oscuros */
    --tinta-2:      #1E3765;
    --tinta-suave:  #5A6B8C;
    --nube:         #F3F7FB;   /* fondo suave */
    --nube-2:       #E9F1FA;
    --blanco:       #FFFFFF;

    --menta:        #00C9A7;   /* color de marca y de acción */
    --menta-hondo:  #00806B;   /* menta legible sobre fondo claro */
    --menta-tenue:  #DFF8F2;

    --cielo:        #2F6BFF;   /* enlaces e información */
    --cielo-hondo:  #1B4FD1;
    --cielo-tenue:  #E7EFFF;

    --sol:          #FFC53D;   /* energía, plazos, advertencias */
    --sol-hondo:    #8A6100;
    --sol-tenue:    #FFF4DA;

    --coral:        #FF6B5A;   /* prohibido, multas */
    --coral-hondo:  #D33A26;
    --coral-tenue:  #FFEDE9;

    --borde:        rgba(22, 41, 77, 0.10);
    --borde-fuerte: rgba(22, 41, 77, 0.20);
    --borde-claro:  rgba(255, 255, 255, 0.18);

    /* --- Tipografía --- */
    --f-display: 'Bricolage Grotesque', 'Schibsted Grotesk', system-ui, sans-serif;
    --f-cuerpo:  'Schibsted Grotesk', 'Segoe UI', system-ui, sans-serif;
    --f-mono:    'Spline Sans Mono', Consolas, monospace;

    /* --- Ritmo --- */
    --ancho: 1240px;
    --ancho-prosa: 720px;
    --radio: 16px;
    --radio-grande: 28px;
    --sombra: 0 1px 2px rgba(22,41,77,.04), 0 10px 30px rgba(22,41,77,.07);
    --sombra-alta: 0 18px 50px rgba(22,41,77,.14);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
    font-family: var(--f-cuerpo);
    font-size: 1.0625rem;
    line-height: 1.62;
    color: var(--tinta);
    background: var(--blanco);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

a { color: var(--cielo); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cielo-hondo); }

ul, ol { padding-left: 1.15em; }

h1, h2, h3, h4 {
    font-family: var(--f-display);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.025em;
    text-wrap: balance;
    color: var(--tinta);
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.18rem, 2vw, 1.42rem); letter-spacing: -0.015em; }

p { text-wrap: pretty; }

::selection { background: var(--menta-tenue); color: var(--tinta); }

:focus-visible {
    outline: 3px solid var(--cielo);
    outline-offset: 3px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ---------- Utilidades ---------- */
.contenedor { width: min(var(--ancho), 100% - 2.5rem); margin-inline: auto; }
.prosa { max-width: var(--ancho-prosa); }
.visualmente-oculto {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.salto-contenido {
    position: absolute; top: -60px; left: 16px; z-index: 200;
    background: var(--tinta); color: var(--blanco);
    padding: .6em 1.2em; border-radius: 0 0 12px 12px;
    transition: top .2s ease;
}
.salto-contenido:focus { top: 0; color: var(--blanco); }

.eyebrow {
    font-family: var(--f-mono);
    font-size: .74rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--menta-hondo);
    display: inline-flex;
    align-items: center;
    gap: .65em;
}
.eyebrow::before {
    content: '';
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--menta);
    animation: latido 2.6s ease-out infinite;
}
@keyframes latido {
    0%   { box-shadow: 0 0 0 0 rgba(0,201,167,.5); }
    70%  { box-shadow: 0 0 0 10px rgba(0,201,167,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,201,167,0); }
}

/* ---------- Botones ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55em;
    font-family: var(--f-cuerpo); font-size: 1rem; font-weight: 700;
    padding: .95em 1.65em; border: 1px solid transparent; border-radius: 999px;
    cursor: pointer; text-decoration: none; line-height: 1;
    transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease, color .16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }

.btn-primario { background: var(--menta); color: var(--tinta); box-shadow: 0 8px 20px rgba(0,201,167,.32); }
.btn-primario:hover { background: #12DCB9; color: var(--tinta); box-shadow: 0 12px 26px rgba(0,201,167,.42); }

.btn-oscuro { background: var(--tinta); color: var(--blanco); }
.btn-oscuro:hover { background: var(--tinta-2); color: var(--blanco); }

.btn-borde { background: var(--blanco); border-color: var(--borde-fuerte); color: var(--tinta); }
.btn-borde:hover { border-color: var(--tinta); color: var(--tinta); }

.btn-bloque { width: 100%; }
.btn-flecha::after { content: '→'; font-size: 1.05em; transition: transform .16s ease; }
.btn-flecha:hover::after { transform: translateX(3px); }

/* ---------- Navegación ---------- */
.navbar {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,.88);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--borde);
}
.navbar-inner {
    width: min(var(--ancho), 100% - 2.5rem); margin-inline: auto;
    display: flex; align-items: center; gap: 1.5rem;
    min-height: 70px;
}
.marca { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.marca svg { width: 36px; height: 36px; flex: none; }
.marca-texto { display: flex; flex-direction: column; line-height: 1; }
.marca-texto small {
    font-family: var(--f-mono); font-size: .55rem; font-weight: 500;
    letter-spacing: .2em; text-transform: uppercase; color: var(--menta-hondo);
}
.marca-texto strong {
    font-family: var(--f-display); font-size: 1.2rem; font-weight: 800;
    letter-spacing: -.03em; color: var(--tinta);
}

.menu { display: flex; align-items: center; gap: .35rem; list-style: none; padding: 0; margin: 0; }
.menu > li { position: relative; }

/* Cabecera de grupo: es un enlace de verdad a su hub, no un botón muerto */
.menu-cabecera {
    display: inline-flex; align-items: center; gap: .3rem;
    color: var(--tinta-suave); text-decoration: none; font-size: .95rem; font-weight: 600;
    padding: .55em .7em; border-radius: 10px;
    transition: color .15s ease, background-color .15s ease;
}
.menu-cabecera:hover,
.tiene-menu:focus-within > .menu-cabecera { color: var(--tinta); background: var(--nube); }
.grupo-activo > .menu-cabecera { color: var(--tinta); }
.grupo-activo > .menu-cabecera::after {
    content: ''; position: absolute; left: .7em; right: .7em; bottom: -.15rem;
    height: 2px; background: var(--menta); border-radius: 2px;
}
.menu-flecha { width: 13px; height: 13px; flex: none; opacity: .55; transition: transform .18s ease; }
.tiene-menu:hover .menu-flecha,
.tiene-menu:focus-within .menu-flecha { transform: rotate(180deg); opacity: 1; }

/* Desplegable. Sin JavaScript: :hover para el ratón y :focus-within para el teclado.
   El padding-top del contenedor evita que el menú se cierre al cruzar el hueco con el ratón. */
.submenu {
    position: absolute; top: 100%; left: 0; z-index: 60;
    min-width: 15rem; margin: 0; padding: .4rem;
    list-style: none;
    background: var(--blanco); border: 1px solid var(--borde);
    border-radius: 16px; box-shadow: var(--sombra-alta);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.tiene-menu:hover > .submenu,
.tiene-menu:focus-within > .submenu { opacity: 1; visibility: visible; transform: none; }

.submenu a {
    display: block; padding: .55em .8em; border-radius: 9px;
    color: var(--tinta-suave); text-decoration: none; font-size: .92rem; font-weight: 600;
    transition: color .15s ease, background-color .15s ease;
}
.submenu a:hover, .submenu a:focus-visible { color: var(--tinta); background: var(--nube); }
.submenu a[aria-current="page"] { color: var(--menta-hondo); background: var(--menta-tenue); }
.submenu-destacado {
    color: var(--tinta) !important;
    background: var(--menta-tenue);
    margin-top: .25rem;
}
.submenu-destacado:hover { background: var(--menta) !important; }
/* Una sola acción en la barra, separada de los grupos. El color se declara aquí porque
   `.btn` no hereda el de `.menu-cabecera` y el botón no es un enlace de navegación. */
.menu-accion { margin-left: .8rem; }
.menu .btn { color: var(--tinta); padding: .85em 1.5em; }

.menu-boton {
    display: none; background: none; border: 1px solid var(--borde-fuerte); border-radius: 12px;
    padding: .5em .6em; cursor: pointer; color: var(--tinta);
}
.menu-boton svg { width: 22px; height: 22px; }

/* En el panel móvil no hay desplegables: cada grupo se apila con su título y sus enlaces
   debajo. Es más largo pero se recorre de un vistazo, y no necesita ni una línea de JS. */
@media (max-width: 940px) {
    .menu-boton { display: inline-flex; }
    .menu {
        position: absolute; inset: 70px 0 auto 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--blanco); border-bottom: 1px solid var(--borde);
        box-shadow: var(--sombra-alta); padding: .5rem 1.25rem 1.5rem;
        max-height: calc(100vh - 70px); overflow-y: auto;
        display: none;
    }
    .menu.abierto { display: flex; }
    .menu > li { position: static; }

    .menu-cabecera {
        display: block; padding: 1.1rem 0 .35rem;
        font-family: var(--f-mono); font-size: .7rem; font-weight: 500;
        letter-spacing: .14em; text-transform: uppercase; color: var(--menta-hondo);
        background: none !important; border-radius: 0;
    }
    .grupo-activo > .menu-cabecera::after { display: none; }
    .menu-flecha { display: none; }

    .submenu {
        position: static; opacity: 1; visibility: visible; transform: none;
        min-width: 0; padding: 0; border: none; border-radius: 0; box-shadow: none;
        background: none;
    }
    .submenu a { padding: .75em 0; border-bottom: 1px solid var(--borde); border-radius: 0; }
    .submenu li:last-child a { border-bottom: none; }
    .submenu-destacado { margin-top: 0; padding-inline: .8em !important; border-radius: 10px; border-bottom: none !important; }

    .menu-accion { margin: 1.25rem 0 0; }
    .navbar .btn { padding: .95em 1.6em; width: 100%; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
    position: relative;
    background:
        radial-gradient(70% 60% at 85% 12%, rgba(0,201,167,.20) 0%, rgba(0,201,167,0) 60%),
        radial-gradient(60% 55% at 8% 0%, rgba(47,107,255,.14) 0%, rgba(47,107,255,0) 55%),
        linear-gradient(180deg, var(--nube-2) 0%, var(--nube) 45%, var(--blanco) 100%);
    overflow: hidden;
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem);
}
.hero-inner {
    width: min(var(--ancho), 100% - 2.5rem); margin-inline: auto;
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
    position: relative; z-index: 1;
}
.hero h1 { margin: .8rem 0 0; }
.hero h1 em { font-style: normal; color: var(--menta-hondo); }
.hero-sub {
    margin-top: 1.1rem; font-size: clamp(1.05rem, 1.5vw, 1.22rem);
    color: var(--tinta-suave); max-width: 34em;
}

.hero-avales { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .55rem; }
.hero-avales li {
    display: flex; align-items: flex-start; gap: .6rem;
    font-size: .95rem; color: var(--tinta);
}
.hero-avales svg {
    width: 20px; height: 20px; flex: none; margin-top: .05rem;
    color: var(--menta-hondo); background: var(--menta-tenue);
    border-radius: 50%; padding: 3px;
}

/* --- Cotizador --- */
.cotizador {
    margin-top: 1.9rem;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio-grande);
    padding: clamp(1.25rem, 2.4vw, 1.8rem);
    box-shadow: var(--sombra-alta);
    max-width: 34rem;
}
.cotizador h2 {
    font-size: 1.15rem; font-family: var(--f-cuerpo); font-weight: 800;
    letter-spacing: -.01em; display: flex; align-items: center; gap: .55rem;
}
.cotizador h2 svg { width: 22px; height: 22px; color: var(--menta-hondo); flex: none; }
.cotizador-campos { display: grid; grid-template-columns: 1fr 1.35fr; gap: .75rem; margin-top: 1.15rem; }
.campo { display: flex; flex-direction: column; gap: .35rem; }
.campo label {
    font-family: var(--f-mono); font-size: .68rem; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave);
}
.campo input, .campo select {
    font-family: var(--f-cuerpo); font-size: 1rem; color: var(--tinta);
    background: var(--nube); border: 1.5px solid var(--borde);
    border-radius: 12px; padding: .8em .9em; width: 100%;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.campo input::placeholder { color: #9AA7BF; }
.campo input:focus, .campo select:focus {
    border-color: var(--menta); background: var(--blanco);
    box-shadow: 0 0 0 4px rgba(0,201,167,.16); outline: none;
}
.campo select { appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2300806B' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .9em center; padding-right: 2.4em;
}
.campo-error { color: var(--coral-hondo); font-size: .82rem; }
.cotizador .btn { margin-top: 1rem; }
.cotizador-nota {
    margin-top: .9rem; font-size: .82rem; color: var(--tinta-suave);
    display: flex; align-items: flex-start; gap: .5rem;
}
.cotizador-nota svg { width: 16px; height: 16px; flex: none; margin-top: .12rem; color: var(--menta-hondo); }

/* --- Visual del hero: el perro --- */
.hero-visual { position: relative; }
.perro {
    width: 100%; height: auto; overflow: visible;
    /* El color del perro viaja en variables: el dibujo es UNO SOLO y la versión pequeña de las
       cabeceras las reescribe en línea para vestir de otro pelaje en cada carga. Mismo truco
       que el patinete del hermano, misma razón: un dibujo, muchas caras, cero peticiones. */
    --p-cuerpo:  #C98A5B;   /* pelaje */
    --p-detalle: #16294D;   /* hocico, ojos y pezuñas */
    --p-collar:  #00C9A7;   /* collar y chapa: el color de la acción, y no es casual */
    --p-fondo:   #DFF8F2;   /* círculo de fondo de la escena grande */
}

.perro-cuerpo { animation: bote 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes bote {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

/* La cola. Es la única animación que este sitio necesitaba y el hermano no: un perro quieto
   parece disecado. Gira desde el arranque, no desde el centro del trazo. */
.cola { transform-box: fill-box; transform-origin: 10% 88%; animation: rabear 1.1s ease-in-out infinite; }
@keyframes rabear {
    0%, 100% { transform: rotate(-16deg); }
    50%      { transform: rotate(18deg); }
}

.oreja { transform-box: fill-box; transform-origin: top center; animation: oreja 3.6s ease-in-out infinite; }
.oreja-2 { animation-delay: .4s; }
@keyframes oreja {
    0%, 84%, 100% { transform: rotate(0deg); }
    90%           { transform: rotate(-9deg); }
}

/* El parpadeo va por escala vertical del ojo: a 1 está abierto. */
.ojo { transform-box: fill-box; transform-origin: center; animation: parpadeo 4.5s ease-in-out infinite; }
@keyframes parpadeo {
    0%, 92%, 100% { transform: scaleY(1); }
    95%           { transform: scaleY(.1); }
}

/* La chapa del collar es un escudo: es el isotipo de la marca colgado del cuello del perro,
   que es exactamente lo que vende este sitio. Se balancea despacio para que se mire. */
.chapa { animation: chapa 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: top center; }
@keyframes chapa {
    0%, 100% { transform: rotate(-4deg); }
    50%      { transform: rotate(4deg); }
}

.halo-chapa { animation: halo 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes halo {
    0%, 100% { transform: scale(1);    opacity: .35; }
    50%      { transform: scale(1.25); opacity: .12; }
}

/* El PHP sortea en cada carga el pelaje (variables en línea) y hacia dónde mira; aquí solo se
   voltea. El volteo invierte de paso la cola y las orejas sin duplicar ninguna animación. */
.perro.hacia-izquierda { transform: scaleX(-1); }
/* La chapa es lo único que no debe voltearse: un escudo del revés se nota */
.perro.hacia-izquierda .chapa-escudo {
    transform: scaleX(-1); transform-box: fill-box; transform-origin: center;
}

/* Versión pequeña: acompaña la cabecera del resto de páginas */
.perro-mini { width: clamp(180px, 20vw, 300px); overflow: hidden; pointer-events: none; }

/* En los heroes de una sola columna (404 y resultado del cotizador) se queda suelto
   en la esquina inferior derecha, en el hueco que deja el texto. */
.hero-inner > .perro-mini {
    position: absolute; right: 0; bottom: 0;
    width: clamp(140px, 14vw, 200px);
}
@media (max-width: 780px) { .hero-inner > .perro-mini { display: none; } }

.chips { position: absolute; inset: 0; pointer-events: none; }
.chip {
    position: absolute;
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--blanco); border: 1px solid var(--borde);
    border-radius: 999px; padding: .55em 1em;
    font-size: .84rem; font-weight: 700; color: var(--tinta);
    box-shadow: var(--sombra);
    animation: flotar 5s ease-in-out infinite;
    animation-delay: var(--fd, 0s);
    white-space: nowrap;
}
.chip svg {
    width: 16px; height: 16px; flex: none; color: var(--menta-hondo);
    background: var(--menta-tenue); border-radius: 50%; padding: 2px;
}
.chip mark { background: none; color: var(--tinta-suave); font-family: var(--f-mono); font-size: .78em; }
.chip-1 { top: 2%;  left: 0; }
.chip-2 { top: 26%; right: -2%; }
.chip-3 { bottom: -2%; left: 4%; }
@keyframes flotar {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

@media (max-width: 940px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-visual { order: 3; max-width: 480px; margin-inline: auto; }
    .cotizador { max-width: none; }
}
@media (max-width: 460px) {
    .cotizador-campos { grid-template-columns: 1fr; }
    .chip { font-size: .76rem; padding: .45em .85em; }
}

/* ---------- Barra de cuenta atrás ---------- */
.urgencia {
    background: linear-gradient(90deg, var(--sol-tenue) 0%, #FFEFC4 55%, var(--sol-tenue) 100%);
    border-block: 1px solid rgba(255,197,61,.75);
    box-shadow: inset 0 -1px 0 rgba(255,197,61,.35);
}
.urgencia-inner {
    width: min(var(--ancho), 100% - 2.5rem); margin-inline: auto;
    display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1.1rem;
    padding: .7rem 0; font-size: .96rem; color: var(--tinta);
}
/* --- Cuenta atrás en vivo --- */
/* Contador tipográfico: la etiqueta va A LA DERECHA de su cifra, no debajo. Sin cajas,
   que en una barra fija presente en todas las páginas pesaban demasiado para lo que dicen. */
.cuenta { margin: 0; display: flex; align-items: baseline; gap: .35rem; }
.cuenta-bloques { display: flex; align-items: baseline; gap: .85rem; }
.urgencia-texto { flex: 1 1 22rem; min-width: 0; }

.cuenta-u { display: flex; align-items: baseline; gap: .3em; }
.cuenta-u b {
    font-family: var(--f-display); font-size: 1.3rem; font-weight: 800;
    letter-spacing: -.03em; color: var(--tinta);
    /* Cifras de ancho fijo y hueco reservado: sin esto la barra da un salto cada segundo,
       y es una barra pegada arriba que se ve en todas las páginas. */
    font-variant-numeric: tabular-nums;
    min-width: 2ch; text-align: right;
}
.cuenta-u small {
    font-family: var(--f-mono); font-size: .64rem; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase; color: var(--sol-hondo);
}

/* Los días son el dato que importa: mandan en tamaño y en color */
.cuenta-u:first-child b { font-size: 1.75rem; color: var(--sol-hondo); min-width: 3ch; }

/* Latido en los segundos: el único movimiento de la barra, y solo para señalar que esto
   corre de verdad. Con prefers-reduced-motion la regla global lo deja en nada. */
.cuenta-u:last-child b { animation: latir 1s ease-out infinite; }
@keyframes latir {
    0%   { opacity: .45; }
    12%  { opacity: 1; }
    100% { opacity: 1; }
}
/* Horas, minutos y segundos solo con JS: un valor congelado en una caché sería falso */
.cuenta-viva { display: none; }
.js .cuenta-viva { display: flex; }

.urgencia-dias {
    font-family: var(--f-mono); font-size: 1.02rem; font-weight: 500;
    color: var(--sol-hondo); background: var(--blanco);
    border: 1px solid rgba(255,197,61,.6); border-radius: 9px; padding: .25em .7em;
}
.urgencia a { margin-left: auto; font-weight: 700; }

/* ---------- Secciones ---------- */
.seccion { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.seccion-suave { background: var(--nube); }
.seccion-acento {
    background: linear-gradient(180deg, var(--menta-tenue) 0%, #EEFBF8 100%);
}
.seccion-cabecera { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.seccion-cabecera h2 { margin-top: .6rem; }
.seccion-cabecera .descripcion { margin-top: .9rem; font-size: 1.1rem; color: var(--tinta-suave); }

/* ---------- Rejillas y tarjetas ---------- */
.rejilla { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.tarjeta {
    background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-grande);
    padding: 1.7rem; box-shadow: var(--sombra);
    transition: transform .18s ease, box-shadow .18s ease;
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.tarjeta h3 { margin-bottom: .5rem; }
.tarjeta p { color: var(--tinta-suave); font-size: .98rem; }
.tarjeta-enlace { display: inline-flex; align-items: center; gap: .4em; margin-top: 1rem; font-weight: 700; font-size: .95rem; text-decoration: none; }
.tarjeta-enlace::after { content: '→'; transition: transform .16s ease; }
.tarjeta-enlace:hover::after { transform: translateX(3px); }

.tarjeta-icono {
    width: 46px; height: 46px; border-radius: 14px; margin-bottom: 1.1rem;
    display: grid; place-items: center; background: var(--menta-tenue); color: var(--menta-hondo);
}
.tarjeta-icono svg { width: 23px; height: 23px; }

/* ---------- Pasos ---------- */
.pasos { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: paso; }
.paso { position: relative; padding-top: 3.2rem; }
.paso::before {
    counter-increment: paso; content: counter(paso);
    position: absolute; top: 0; left: 0;
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--f-mono); font-size: 1rem; font-weight: 500;
    color: var(--tinta); background: var(--blanco);
    border: 1.5px solid var(--menta);
}
.paso h3 { margin-bottom: .45rem; }
.paso p { color: var(--tinta-suave); font-size: .97rem; }

/* ---------- Semáforo normativo ---------- */
.semaforo {
    display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.1rem; align-items: start;
    border: 1px solid var(--borde); border-top: 4px solid var(--menta);
    border-radius: var(--radio); background: var(--blanco);
    padding: 1.35rem 1.5rem; box-shadow: var(--sombra);
}
.semaforo-punto { width: 12px; height: 12px; border-radius: 50%; background: var(--menta); margin-top: .45rem; }
.semaforo h3 { font-family: var(--f-cuerpo); font-size: 1.05rem; font-weight: 800; }
.semaforo p { font-size: .95rem; color: var(--tinta-suave); margin-top: .35rem; }
.semaforo.ambar { border-top-color: var(--sol); }
.semaforo.ambar .semaforo-punto { background: var(--sol); }
.semaforo.rojo { border-top-color: var(--coral); }
.semaforo.rojo .semaforo-punto { background: var(--coral); }

/* ---------- Bloque de sanción ---------- */
.sancion {
    background: var(--coral-tenue); border: 1px solid rgba(255,107,90,.28);
    border-radius: var(--radio-grande); padding: 1.6rem;
}
.sancion-importe {
    font-family: var(--f-mono); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 500;
    color: var(--coral-hondo); line-height: 1; letter-spacing: -.02em;
}
.sancion-texto { margin-top: .6rem; font-size: .95rem; }
.sancion-fuente { margin-top: .8rem; font-family: var(--f-mono); font-size: .72rem; color: var(--tinta-suave); }

/* ---------- Ficha de fuente (E-E-A-T) ---------- */
.fuente {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
    background: var(--cielo-tenue); border: 1px solid rgba(47,107,255,.18);
    border-radius: var(--radio); padding: .9rem 1.15rem;
    font-family: var(--f-mono); font-size: .76rem; color: #1F3F8F;
}
.fuente svg { width: 16px; height: 16px; flex: none; }
.fuente a { color: #1F3F8F; }

/* ---------- Métricas ---------- */
.metricas { background: var(--blanco); border-bottom: 1px solid var(--borde); }
.metricas-inner {
    width: min(var(--ancho), 100% - 2.5rem); margin-inline: auto;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1.75rem; padding: clamp(2rem, 4vw, 3rem) 0;
}
.metrica-valor {
    font-family: var(--f-mono); font-size: clamp(1.7rem, 3.4vw, 2.25rem); font-weight: 500;
    letter-spacing: -.03em; line-height: 1; color: var(--tinta);
}
.metrica-valor .sufijo { color: var(--menta-hondo); }
.metrica-valor.compacta { font-size: clamp(1.35rem, 2.4vw, 1.75rem); white-space: nowrap; }
.metrica-texto { margin-top: .55rem; font-size: .92rem; color: var(--tinta-suave); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: .75rem; }
.faq details {
    background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 1.1rem 1.35rem; box-shadow: var(--sombra);
}
.faq details[open] { border-color: var(--menta); }
.faq summary {
    cursor: pointer; font-weight: 700; font-size: 1.02rem; list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--f-mono); font-size: 1.35rem; color: var(--menta-hondo); line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin-top: .75rem; color: var(--tinta-suave); font-size: .98rem; }

/* ---------- CTA final ---------- */
.cta-final {
    background: linear-gradient(135deg, #00C9A7 0%, #2FB8FF 100%);
    border-radius: var(--radio-grande);
    padding: clamp(2.2rem, 5vw, 3.6rem); text-align: center;
    color: var(--tinta);
}
.cta-final h2 { color: var(--tinta); }
.cta-final p { margin: .9rem auto 1.8rem; color: rgba(22,41,77,.78); max-width: 40rem; }
.cta-acciones { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.cta-final .btn-primario { background: var(--tinta); color: var(--blanco); box-shadow: 0 10px 26px rgba(22,41,77,.24); }
.cta-final .btn-primario:hover { background: var(--tinta-2); color: var(--blanco); }
.cta-final .btn-borde { background: rgba(255,255,255,.85); border-color: transparent; }

/* ---------- Footer ---------- */
.footer { background: var(--tinta); color: rgba(255,255,255,.72); padding: clamp(2.5rem, 5vw, 4rem) 0 2rem; }
.footer-inner { width: min(var(--ancho), 100% - 2.5rem); margin-inline: auto; }
/* Nota: repeat(auto-fit, …) no puede convivir con una pista flexible (1.4fr) en la
   misma lista; el navegador descartaría toda la declaración y el pie se caería a una
   sola columna. Por eso las columnas van explícitas, con saltos por consulta de medios. */
.footer-rejilla { display: grid; gap: 2rem 1.5rem; grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .footer-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .footer-rejilla { grid-template-columns: 1fr; } }
.footer h3 {
    font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .16em;
    text-transform: uppercase; color: var(--menta); margin-bottom: .9rem;
}
.footer ul { list-style: none; padding: 0; display: grid; gap: .5rem; }
.footer a { color: rgba(255,255,255,.72); text-decoration: none; font-size: .92rem; }
.footer a:hover { color: var(--blanco); }
.footer-legal {
    margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--borde-claro);
    font-size: .8rem; color: rgba(255,255,255,.55); display: grid; gap: .6rem;
}
.footer-legal strong { color: rgba(255,255,255,.8); font-weight: 600; }
.footer-legal a { color: var(--menta); text-decoration: underline; }
.footer-marca { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.footer-marca svg { width: 36px; height: 36px; }
.footer .marca-texto small { color: var(--menta); }
.footer .marca-texto strong { color: var(--blanco); }
.footer .aviso-divulgativo { color: rgba(255,255,255,.55); border-color: var(--borde-claro); }

/* ---------- Aviso de contenido divulgativo ---------- */
.aviso-divulgativo {
    font-size: .82rem; color: var(--tinta-suave); border-left: 3px solid var(--borde-fuerte);
    padding-left: .95rem; max-width: var(--ancho-prosa);
}

/* ---------- Animación de entrada ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.visible {
    opacity: 1; transform: none;
    transition: opacity .55s ease var(--d, 0s), transform .55s cubic-bezier(.2,.7,.3,1) var(--d, 0s);
}
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ============================================================
   PÁGINAS DE CONTENIDO (motor de bloques, includes/pagina.php)
   ============================================================ */
.articulo-cabecera {
    background:
        radial-gradient(60% 70% at 88% 0%, rgba(0,201,167,.16) 0%, rgba(0,201,167,0) 60%),
        linear-gradient(180deg, var(--nube-2) 0%, var(--blanco) 100%);
    padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3rem);
}
/* El texto manda y el perro ocupa el hueco que deja el H1 corto, a la derecha.
   Va anclado abajo pero levantado un poco, a la altura de la entradilla, no del pie. */
.articulo-cabecera .contenedor {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(1.25rem, 3vw, 2.5rem); align-items: end;
}
.articulo-cabecera .perro-mini { margin-bottom: clamp(1.5rem, 4vw, 3.5rem); }
.articulo-cabecera h1 { margin-top: .7rem; max-width: 18ch; }
.articulo-entradilla {
    margin-top: 1.1rem; font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    color: var(--tinta-suave); max-width: 40em;
}
.articulo-meta { margin-top: 1.4rem; font-family: var(--f-mono); font-size: .74rem; color: var(--tinta-suave); }

/* Respuesta directa: lo primero que se lee y lo que citan los asistentes de IA */
.respuesta-corta {
    margin-top: 1.5rem; max-width: 46em;
    background: var(--menta-tenue); border-left: 4px solid var(--menta);
    border-radius: 0 var(--radio) var(--radio) 0;
    padding: 1.1rem 1.35rem; font-size: 1.06rem; font-weight: 600;
}

/* Migas de pan */
.migas ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem .55rem; font-size: .84rem; }
.migas li + li::before { content: '›'; margin-right: .55rem; color: var(--tinta-suave); }
.migas a { color: var(--tinta-suave); text-decoration: none; }
.migas a:hover { color: var(--cielo); text-decoration: underline; }
.migas [aria-current] { color: var(--tinta); font-weight: 600; }

/* Cuerpo */
.articulo-cuerpo { padding-block: clamp(2.5rem, 5vw, 4rem); min-width: 0; }
.bloque + .bloque { margin-top: clamp(2.25rem, 4vw, 3.25rem); }
.bloque h2 { margin-bottom: 1.1rem; }
/* Uniformidad: dentro del artículo TODOS los bloques ocupan la columna de lectura completa.
   La medida la fija la rejilla, no cada bloque, así no hay unos anchos y otros a media caja. */
.bloque.prosa { max-width: none; }
.bloque.prosa p + p { margin-top: 1rem; }
.bloque.prosa p { font-size: 1.05rem; }

.lista-marcada { list-style: none; padding: 0; display: grid; gap: .7rem; }
.lista-marcada li { position: relative; padding-left: 1.9rem; }
.lista-marcada li::before {
    content: ''; position: absolute; left: 0; top: .45em;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--menta); box-shadow: 0 0 0 4px var(--menta-tenue);
}

/* Tablas: nunca deben empujar el ancho de la página */
.tabla-envoltorio { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--blanco); }
.tabla { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .96rem; }
.tabla th, .tabla td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla thead th { background: var(--nube); font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); }
.tabla tbody th { font-weight: 700; }
.tabla tbody tr:last-child th, .tabla tbody tr:last-child td { border-bottom: none; }

/* Avisos */
.aviso { border-radius: var(--radio); padding: 1.1rem 1.3rem; font-size: .98rem; border: 1px solid transparent; }
.aviso-ambar { background: var(--sol-tenue); border-color: rgba(255,197,61,.45); }
.aviso-coral { background: var(--coral-tenue); border-color: rgba(255,107,90,.28); }
.aviso-menta { background: var(--menta-tenue); border-color: rgba(0,201,167,.3); }

/* ---------- Maqueta de artículo: columna de lectura + lateral fijo ---------- */
/* Antes cada bloque llevaba su propio max-width y la página parecía cortada a media caja.
   Ahora el ancho lo fija la rejilla una sola vez y el lateral ocupa el hueco de la derecha
   con el sumario y el cotizador, que además es la mejor posición para convertir. */
.articulo-rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}
.articulo-lateral {
    position: sticky; top: 94px;
    display: grid; gap: 1.25rem;
    padding-block: clamp(2.5rem, 5vw, 4rem) 0;
}
.articulo-lateral .cotizador { margin-top: 0; max-width: none; }

.indice {
    background: var(--nube); border: 1px solid var(--borde);
    border-radius: var(--radio); padding: 1.25rem 1.4rem;
}
.indice h2 {
    font-family: var(--f-mono); font-size: .72rem; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave);
    margin-bottom: .85rem;
}
.indice ol { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; counter-reset: idx; }
.indice li { counter-increment: idx; display: flex; gap: .6rem; font-size: .93rem; line-height: 1.35; }
.indice li::before { content: counter(idx, decimal-leading-zero); font-family: var(--f-mono); font-size: .8rem; color: var(--menta-hondo); }
.indice a { color: var(--tinta); text-decoration: none; }
.indice a:hover { color: var(--cielo); text-decoration: underline; }

/* Variante compacta del cotizador (lateral) */
.cotizador-compacto { padding: 1.25rem 1.35rem; }
.cotizador-compacto .cotizador-campos { grid-template-columns: 1fr; gap: .65rem; }
.cotizador-compacto h2 { font-size: 1.02rem; }

@media (max-width: 1080px) {
    .articulo-rejilla { grid-template-columns: 1fr; }
    .articulo-lateral { position: static; padding-block: 0 clamp(2.5rem, 5vw, 4rem); max-width: 34rem; }
    .indice { order: -1; }
}

/* Sin sitio a la derecha, el patinete pasa a cerrar la cabecera por debajo */
@media (max-width: 860px) {
    .articulo-cabecera .contenedor { grid-template-columns: 1fr; gap: 0; }
    .articulo-cabecera .perro-mini {
        width: 170px; justify-self: end; margin-top: 1rem; margin-bottom: 0;
    }
}

/* El ancla de un título no debe quedar debajo de la barra fija */
.bloque h2, .articulo-cuerpo [id] { scroll-margin-top: 90px; }

/* ---------- FAQ de la home: título a la izquierda, preguntas a la derecha ---------- */
.seccion-faq .contenedor {
    display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr);
    gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start;
}
.seccion-faq .seccion-cabecera { margin-bottom: 0; position: sticky; top: 94px; }
@media (max-width: 900px) {
    .seccion-faq .contenedor { grid-template-columns: 1fr; }
    .seccion-faq .seccion-cabecera { position: static; margin-bottom: 1.75rem; }
}

/* Jerarquía dentro del artículo: el H1 manda, los H2 acompañan.
   A tamaño de sección (2,8rem) los H2 competían con el titular y rompían el ritmo de lectura. */
.articulo-cuerpo h2 { font-size: clamp(1.55rem, 2.4vw, 2rem); }
.articulo-cuerpo h3 { font-size: clamp(1.08rem, 1.6vw, 1.2rem); }
.articulo-cuerpo .cta-final h2 { font-size: clamp(1.7rem, 2.8vw, 2.2rem); }

/* ============================================================
   ASISTENTE DE CONTRATACIÓN (burbuja de la esquina)
   Sin JS no se pinta: el cotizador sigue siendo la vía principal y no queremos
   un botón que no lleve a ninguna parte.
   ============================================================ */
.chat { display: none; }
.js .chat {
    display: block;
    position: fixed; right: clamp(1rem, 2.5vw, 1.75rem); bottom: clamp(1rem, 2.5vw, 1.75rem);
    z-index: 120;
}

/* --- Lanzador --- */
.chat-lanzador {
    display: inline-flex; align-items: center; gap: .6rem;
    background: var(--blanco); color: var(--tinta);
    border: 1px solid var(--borde); border-radius: 999px;
    padding: .55rem 1.1rem .55rem .6rem;
    font-family: var(--f-cuerpo); font-size: .95rem; font-weight: 700;
    box-shadow: var(--sombra-alta); cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease;
}
.chat-lanzador:hover { transform: translateY(-2px); box-shadow: 0 22px 56px rgba(22,41,77,.20); }
.chat-lanzador .isotipo { width: 30px; height: 30px; flex: none; }
.chat-lanzador-punto {
    width: 9px; height: 9px; border-radius: 50%; background: var(--menta);
    animation: latido 2.6s ease-out infinite;
}

/* --- Panel --- */
.chat-panel {
    position: absolute; right: 0; bottom: calc(100% + .75rem);
    width: min(380px, calc(100vw - 2rem));
    max-height: min(560px, calc(100vh - 7rem));
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio-grande);
    box-shadow: 0 26px 70px rgba(22,41,77,.22);
    animation: chat-entra .22s ease-out;
}
.chat-panel[hidden] { display: none; }
@keyframes chat-entra {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

.chat-cabecera {
    display: flex; align-items: center; gap: .75rem;
    padding: .9rem 1rem; flex: none;
    background: linear-gradient(180deg, var(--menta-tenue) 0%, var(--blanco) 100%);
    border-bottom: 1px solid var(--borde);
}
.chat-cabecera .isotipo { flex: none; }
.chat-cabecera-texto { display: flex; flex-direction: column; line-height: 1.25; margin-right: auto; }
.chat-cabecera-texto strong { font-family: var(--f-display); font-size: 1.02rem; letter-spacing: -.02em; }
.chat-cabecera-texto small { font-size: .78rem; color: var(--tinta-suave); }
.chat-cerrar {
    flex: none; width: 32px; height: 32px; display: grid; place-items: center;
    background: none; border: none; border-radius: 50%; cursor: pointer; color: var(--tinta-suave);
    transition: background-color .15s ease, color .15s ease;
}
.chat-cerrar:hover { background: var(--nube); color: var(--tinta); }
.chat-cerrar svg { width: 18px; height: 18px; }

/* --- Conversación --- */
.chat-mensajes {
    flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
    padding: 1rem; display: flex; flex-direction: column; gap: .5rem;
    background: var(--nube);
}
.chat-mensaje {
    max-width: 88%; padding: .6rem .85rem; border-radius: 16px;
    font-size: .93rem; line-height: 1.5;
    animation: chat-burbuja .2s ease-out;
}
@keyframes chat-burbuja {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.chat-mensaje-bot {
    align-self: flex-start; background: var(--blanco);
    border: 1px solid var(--borde); border-bottom-left-radius: 5px;
    color: var(--tinta);
}
.chat-mensaje-bot strong { color: var(--menta-hondo); }
.chat-mensaje-yo {
    align-self: flex-end; background: var(--tinta); color: var(--blanco);
    border-bottom-right-radius: 5px;
}

.chat-escribiendo { display: flex; gap: 4px; padding: .75rem .85rem; }
.chat-escribiendo span {
    width: 6px; height: 6px; border-radius: 50%; background: var(--tinta-suave);
    animation: chat-punto 1.1s ease-in-out infinite;
}
.chat-escribiendo span:nth-child(2) { animation-delay: .15s; }
.chat-escribiendo span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-punto {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30%           { opacity: 1;  transform: translateY(-3px); }
}

/* --- Zona de respuesta --- */
.chat-acciones { flex: none; padding: .75rem 1rem 0; background: var(--blanco); }
.chat-acciones:empty { padding: 0; }

.chat-opciones { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.chat-opcion {
    font-family: var(--f-cuerpo); font-size: .88rem; font-weight: 600;
    color: var(--tinta); background: var(--blanco);
    border: 1.5px solid var(--borde-fuerte); border-radius: 999px;
    padding: .5em 1em; cursor: pointer; text-align: left;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.chat-opcion:hover { border-color: var(--menta); background: var(--menta-tenue); }
.chat-opcion-principal {
    background: var(--menta); border-color: var(--menta);
    box-shadow: 0 6px 16px rgba(0,201,167,.28);
}
.chat-opcion-principal:hover { background: #12DCB9; border-color: #12DCB9; }

.chat-form { display: flex; gap: .5rem; align-items: center; }
.chat-campo {
    flex: 1 1 auto; min-width: 0;
    font-family: var(--f-cuerpo); font-size: .95rem; color: var(--tinta);
    background: var(--nube); border: 1.5px solid var(--borde); border-radius: 12px;
    padding: .7em .9em;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.chat-campo::placeholder { color: #9AA7BF; }
.chat-campo:focus {
    border-color: var(--menta); background: var(--blanco);
    box-shadow: 0 0 0 4px rgba(0,201,167,.16); outline: none;
}
.chat-enviar {
    flex: none; width: 42px; height: 42px; display: grid; place-items: center;
    background: var(--menta); color: var(--tinta);
    border: none; border-radius: 50%; cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}
.chat-enviar:hover { background: #12DCB9; transform: translateX(1px); }
.chat-enviar svg { width: 19px; height: 19px; }

.chat-enlace { font-size: .84rem; color: var(--cielo); }
.chat-error { margin-top: .5rem; font-size: .84rem; color: var(--coral-hondo); }

.chat-pie {
    flex: none; padding: .75rem 1rem 1rem;
    font-size: .74rem; line-height: 1.45; color: var(--tinta-suave);
    background: var(--blanco);
}
.chat-pie a { color: var(--tinta-suave); text-decoration: underline; }

/* En móvil el panel ocupa la pantalla y el lanzador se aparta */
@media (max-width: 560px) {
    .js .chat { right: 0; bottom: 0; left: 0; }
    .chat-lanzador { position: absolute; right: 1rem; bottom: 1rem; }
    .chat.abierto .chat-lanzador { display: none; }
    .chat-panel {
        position: fixed; inset: auto 0 0 0;
        width: 100%; max-height: 86vh;
        border-radius: var(--radio-grande) var(--radio-grande) 0 0;
        border-bottom: none;
    }
}

/* ============================================================
   CATÁLOGO DE MODELOS (bloque `catalogo` de includes/pagina.php)
   Listados largos —76 marcas, 30 modelos de una marca— donde una tarjeta por
   elemento haría la página irrecorrible. Rejilla densa, estado a la vista.
   ============================================================ */
.catalogo {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .5rem;
}
.catalogo-item a, .catalogo-inerte {
    display: flex; flex-direction: column; gap: .12rem;
    height: 100%; padding: .7rem .9rem;
    background: var(--blanco); border: 1px solid var(--borde);
    border-left: 3px solid var(--borde-fuerte);
    border-radius: 10px; text-decoration: none; color: var(--tinta);
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.catalogo-item a:hover {
    border-color: var(--menta); border-left-color: var(--menta);
    background: var(--menta-tenue); color: var(--tinta); transform: translateY(-1px);
}
.catalogo-inerte { background: var(--nube); color: var(--tinta-suave); }
.catalogo-nombre { font-weight: 700; font-size: .95rem; line-height: 1.3; }
.catalogo-detalle {
    font-family: var(--f-mono); font-size: .72rem; color: var(--tinta-suave);
}
.catalogo-certificado a { border-left-color: var(--menta); }
.catalogo-no_consta a, .catalogo-no_consta .catalogo-inerte { border-left-color: var(--sol); }
.catalogo-retirado a,  .catalogo-retirado .catalogo-inerte  { border-left-color: var(--coral); }

/* ============================================================
   BUSCADOR DE MODELOS (/comprobar-si-mi-patinete-es-legal/)
   ============================================================ */
.buscador-modelos {
    position: relative;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio-grande);
    box-shadow: var(--sombra);
    padding: clamp(1.25rem, 2.4vw, 1.75rem);
}
.buscador-modelos label {
    display: block;
    font-family: var(--f-mono); font-size: .68rem; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave);
    margin-bottom: .45rem;
}
.buscador-fila { display: flex; gap: .6rem; align-items: stretch; }
.buscador-fila input {
    flex: 1 1 auto; min-width: 0;
    font-family: var(--f-cuerpo); font-size: 1.05rem; color: var(--tinta);
    background: var(--nube); border: 1.5px solid var(--borde);
    border-radius: 12px; padding: .8em .95em;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.buscador-fila input::placeholder { color: #9AA7BF; }
.buscador-fila input:focus {
    border-color: var(--menta); background: var(--blanco);
    box-shadow: 0 0 0 4px rgba(0,201,167,.16); outline: none;
}
.buscador-fila .btn { flex: none; }
.buscador-ayuda { margin-top: .7rem; font-size: .85rem; color: var(--tinta-suave); }

/* Sugerencias en vivo (solo con JS) */
.buscador-sugerencias {
    position: absolute; left: clamp(1.25rem, 2.4vw, 1.75rem); right: clamp(1.25rem, 2.4vw, 1.75rem);
    z-index: 20; margin-top: .35rem;
    background: var(--blanco); border: 1px solid var(--borde-fuerte);
    border-radius: 14px; box-shadow: var(--sombra-alta);
    overflow: hidden; max-height: 22rem; overflow-y: auto;
}
.sugerencia {
    display: flex; flex-direction: column; gap: .1rem;
    padding: .6rem .9rem; text-decoration: none; color: var(--tinta);
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--borde);
}
.sugerencia:last-child { border-bottom: none; }
.sugerencia:hover, .sugerencia:focus { background: var(--menta-tenue); color: var(--tinta); outline: none; }
.sugerencia-nombre { font-weight: 700; font-size: .95rem; }
.sugerencia-estado { font-size: .8rem; color: var(--tinta-suave); }
.sugerencia-certificado { border-left-color: var(--menta); }
.sugerencia-no_consta   { border-left-color: var(--sol); }
.sugerencia-retirado    { border-left-color: var(--coral); }

/* Resultados servidos en servidor */
.buscador-resultados { margin-top: 1.75rem; }
.buscador-resultados h3 { margin-bottom: 1rem; }
.resultados-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.resultado {
    background: var(--blanco); border: 1px solid var(--borde);
    border-left: 4px solid var(--borde-fuerte);
    border-radius: var(--radio); padding: 1.1rem 1.3rem;
}
.resultado-verde { border-left-color: var(--menta); }
.resultado-ambar { border-left-color: var(--sol); }
.resultado-rojo  { border-left-color: var(--coral); }
.resultado-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .75rem; }
.resultado-cabecera strong { font-family: var(--f-display); font-size: 1.15rem; letter-spacing: -.02em; }
.resultado-ref {
    font-family: var(--f-mono); font-size: .72rem; color: var(--menta-hondo);
    background: var(--menta-tenue); border-radius: 6px; padding: .15em .5em;
}
.resultado-veredicto { margin-top: .45rem; font-weight: 700; }
.resultado-texto { margin-top: .3rem; font-size: .96rem; color: var(--tinta-suave); }
.resultado-pie { margin-top: .6rem; font-size: .9rem; font-weight: 600; }

.buscador-acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.buscador-fecha {
    margin-top: 1.2rem; font-family: var(--f-mono); font-size: .74rem; color: var(--tinta-suave);
}

@media (max-width: 520px) {
    .buscador-fila { flex-direction: column; }
    .buscador-fila .btn { width: 100%; }
}

/* ============================================================
   TRÁMITE DE INSCRIPCIÓN EN LA DGT (registrar-patinete.php)
   Formulario largo: se apoya en .campo del cotizador y añade solo
   lo que necesita un formulario por bloques con resguardo final.
   ============================================================ */
.tramite { display: grid; gap: 1.25rem; max-width: 52rem; margin-inline: auto; }

.tramite-bloque {
    background: var(--blanco); border: 1px solid var(--borde);
    border-radius: var(--radio-grande); padding: clamp(1.25rem, 2.4vw, 1.9rem);
    box-shadow: var(--sombra);
}
.tramite-bloque > h2 {
    font-family: var(--f-cuerpo); font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em;
    display: flex; align-items: baseline; gap: .6rem;
}
.tramite-bloque > h2::before {
    content: counter(bloque, decimal-leading-zero); counter-increment: bloque;
    font-family: var(--f-mono); font-size: .78rem; font-weight: 500; color: var(--menta-hondo);
}
.tramite { counter-reset: bloque; }
.tramite-bloque > p { margin-top: .5rem; font-size: .93rem; color: var(--tinta-suave); }

.tramite-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin-top: 1.15rem; }
.tramite-campos .ancho { grid-column: 1 / -1; }
@media (max-width: 560px) { .tramite-campos { grid-template-columns: 1fr; } }

.campo-pista { font-size: .8rem; color: var(--tinta-suave); }
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"] { border-color: var(--coral); }

.tramite-check {
    display: flex; align-items: flex-start; gap: .7rem; font-size: .93rem;
    background: var(--nube); border: 1px solid var(--borde); border-radius: 12px; padding: .85rem 1rem;
}
.tramite-check input { margin-top: .25rem; accent-color: var(--menta-hondo); flex: none; width: 18px; height: 18px; }
.tramite-check + .tramite-check { margin-top: .6rem; }

/* Resguardo: lo que ve el titular cuando el expediente ya existe */
.resguardo {
    background: linear-gradient(180deg, var(--menta-tenue) 0%, var(--blanco) 55%);
    border: 2px solid var(--menta); border-radius: var(--radio-grande);
    padding: clamp(1.5rem, 3vw, 2.2rem);
}
.resguardo-ref {
    font-family: var(--f-mono); font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 500;
    letter-spacing: -.02em; color: var(--tinta); line-height: 1;
}
.resguardo-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.1rem; margin-top: 1.5rem; }
.resguardo-datos .rot { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave); }
.resguardo-datos .val { display: block; margin-top: .3rem; font-family: var(--f-mono); font-size: .95rem; color: var(--tinta); }

.lista-documentos { list-style: none; padding: 0; display: grid; gap: .55rem; margin-top: 1rem; }
.lista-documentos li { position: relative; padding-left: 1.9rem; font-size: .96rem; }
.lista-documentos li::before {
    content: ''; position: absolute; left: 0; top: .35em; width: 12px; height: 12px;
    border-radius: 4px; border: 2px solid var(--menta); background: var(--blanco);
}

/* Línea de tiempo del expediente */
.hilo { list-style: none; padding: 0; margin-top: 1.25rem; display: grid; gap: 0; }
.hilo li { position: relative; padding: 0 0 1.1rem 1.75rem; border-left: 2px solid var(--borde); }
.hilo li:last-child { border-left-color: transparent; padding-bottom: 0; }
.hilo li::before {
    content: ''; position: absolute; left: -7px; top: .35em; width: 12px; height: 12px;
    border-radius: 50%; background: var(--blanco); border: 2px solid var(--borde);
}
.hilo li.vivo::before { border-color: var(--menta); background: var(--menta); }
.hilo .cuando { font-family: var(--f-mono); font-size: .72rem; color: var(--tinta-suave); }
.hilo .que { font-weight: 700; font-size: .97rem; margin-top: .15rem; }
.hilo .nota { font-size: .9rem; color: var(--tinta-suave); margin-top: .2rem; }

/* La casilla del seguro no es un consentimiento más: es una oferta, y se ve como tal.
   Va sin marcar a propósito — el consentimiento del trámite no cubre esta otra finalidad. */
.tramite-check-extra {
    margin-top: 1.1rem; padding: .95rem 1.1rem;
    background: var(--menta-tenue); border: 1px solid var(--menta);
    border-radius: var(--radio);
}
.tramite-check-extra strong { display: block; margin-bottom: .15rem; }

/* ---------- Módulo de captación del registro (includes/modulo-registro.php) ---------- */
/* Hermano visual del cotizador, pero en menta para que se distinga de un vistazo:
   el sitio tiene dos conversiones y no deben parecer la misma. */
.modulo-registro {
    background: linear-gradient(180deg, var(--menta-tenue) 0%, var(--blanco) 62%);
    border: 1px solid rgba(0,201,167,.34);
    border-radius: var(--radio-grande);
    padding: clamp(1.25rem, 2.4vw, 1.8rem);
    box-shadow: var(--sombra);
}
.modulo-registro h2 {
    font-size: 1.15rem; font-family: var(--f-cuerpo); font-weight: 800;
    letter-spacing: -.01em; display: flex; align-items: center; gap: .55rem;
}
.modulo-registro h2 svg { width: 22px; height: 22px; color: var(--menta-hondo); flex: none; }

.modulo-registro-plazo {
    margin-top: 1rem; font-size: .9rem; line-height: 1.5; color: var(--tinta);
    background: var(--sol-tenue); border: 1px solid rgba(255,197,61,.45);
    border-radius: 12px; padding: .7rem .9rem;
}
.modulo-registro-plazo .dias {
    font-family: var(--f-mono); font-size: 1.15rem; font-weight: 500; color: var(--sol-hondo);
}

.modulo-registro-lista { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: .5rem; }
.modulo-registro-lista li {
    position: relative; padding-left: 1.6rem; font-size: .93rem; color: var(--tinta-suave); line-height: 1.45;
}
.modulo-registro-lista li::before {
    content: ''; position: absolute; left: 0; top: .42em;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--menta); box-shadow: 0 0 0 3px rgba(0,201,167,.18);
}
.modulo-registro .btn { margin-top: 1.15rem; }
.modulo-registro .cotizador-nota { margin-top: .85rem; }

.modulo-registro-compacto { padding: 1.25rem 1.35rem; }
.modulo-registro-compacto h2 { font-size: 1.02rem; }
.modulo-registro-compacto .modulo-registro-lista li { font-size: .88rem; }

/* La barra de urgencia vive ahora bajo la navbar, en todas las páginas */
.urgencia a { font-weight: 700; }
@media (max-width: 700px) {
    .urgencia-inner { font-size: .86rem; gap: .5rem .9rem; }
    .urgencia a { margin-left: 0; flex-basis: 100%; }
    .urgencia-texto { flex-basis: 100%; max-width: none; }
    .cuenta { flex-basis: 100%; justify-content: flex-start; }
    .cuenta-bloques { gap: .7rem; }
    .cuenta-u b { font-size: 1.15rem; }
    .cuenta-u:first-child b { font-size: 1.5rem; }
    .cuenta-u small { font-size: .58rem; }
}

/* El último grupo está pegado al borde derecho: su desplegable se alinea a la derecha para
   no salirse de la pantalla en resoluciones justas. El último <li> del menú es el botón. */
@media (min-width: 941px) {
    .menu > li:nth-last-child(2) > .submenu { left: auto; right: 0; }
}

/* Móviles estrechos: la barra sale en todas las páginas, así que no puede desbordar nunca */
@media (max-width: 400px) {
    .urgencia-inner { gap: .45rem .7rem; font-size: .82rem; }
    .cuenta-bloques { gap: .55rem; }
    .cuenta-u b { font-size: 1.05rem; }
    .cuenta-u:first-child b { font-size: 1.35rem; min-width: 2.6ch; }
    .cuenta-u small { font-size: .54rem; letter-spacing: .08em; }
}

/* ============================================================
   ASISTENTE POR PASOS (registrar-patinete.php)
   Sin JS los cuatro bloques se ven a la vez y se envía de una vez: el formulario
   funciona igual. Con JS se muestra uno cada vez. Nada de esto oculta contenido
   a un rastreador, que es la regla del proyecto.
   ============================================================ */
.solo-js { display: none; }
.js .solo-js { display: flex; }

/* --- Guía de pasos --- */
.pasos-guia {
    max-width: 52rem; margin: 0 auto 1.5rem; padding: 0; list-style: none;
    display: flex; align-items: center; gap: .4rem; counter-reset: guia;
}
.pasos-guia li {
    counter-increment: guia; flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: .45rem;
    font-family: var(--f-mono); font-size: .68rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--tinta-suave); text-align: center;
    position: relative;
}
/* La línea que une los pasos va detrás del número, no entre elementos */
.pasos-guia li::after {
    content: ''; position: absolute; top: 13px; left: calc(50% + 20px); right: calc(-50% + 20px);
    height: 2px; background: var(--borde-fuerte);
}
.pasos-guia li:last-child::after { display: none; }
.pasos-guia li::before {
    content: counter(guia);
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: .78rem; font-weight: 500;
    background: var(--blanco); color: var(--tinta-suave);
    border: 2px solid var(--borde-fuerte);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.pasos-guia li span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

.pasos-guia li.hecho::before {
    content: '✓'; background: var(--menta); border-color: var(--menta); color: var(--tinta);
}
.pasos-guia li.hecho::after { background: var(--menta); }
.pasos-guia li.activo::before {
    background: var(--tinta); border-color: var(--tinta); color: var(--blanco);
}
.pasos-guia li.activo { color: var(--tinta); font-weight: 500; }

/* --- Pasos --- */
.js .tramite [data-paso] { display: none; }
.js .tramite [data-paso].activo { display: block; }

/* --- Botonera --- */
.asistente-nav { justify-content: space-between; gap: .75rem; align-items: center; }
.asistente-nav .btn { flex: 0 0 auto; }
/* .btn declara display:inline-flex y eso gana al display:none que trae el atributo
   hidden del navegador. Sin esta regla, ocultar un botón con JS no oculta nada. */
.btn[hidden] { display: none; }

@media (max-width: 560px) {
    .pasos-guia li span { display: none; }
    .pasos-guia li::after { top: 13px; left: calc(50% + 18px); right: calc(-50% + 18px); }
    .asistente-nav { flex-direction: row; }
    .asistente-nav .btn { flex: 1 1 0; }
}

/* Con el asistente activo, la numeración la lleva la guía de pasos de arriba: el número
   dentro de la tarjeta sobra y además saldría mal, porque un contador CSS no cuenta los
   bloques ocultos y el paso visible siempre se vería como «01». */
.js [data-asistente] .tramite-bloque > h2::before { content: none; }

/* --- Cabecera de la página de trámite: centrada y a todo el ancho --- */
/* No es una página editorial: es un embudo. El titular manda, va centrado y no se
   estrangula a 18ch como en los artículos. */
.tramite-cabecera .contenedor { grid-template-columns: 1fr; }
.tramite-cabecera .articulo-cabecera-texto { text-align: center; }
/* A todo el ancho: con la medida estrangulada el titular se iba a tres o cuatro líneas
   y se comía la pantalla, que es justo lo contrario de lo que necesita un embudo. */
.tramite-cabecera h1 { max-width: none; }
.tramite-cabecera .articulo-entradilla { max-width: none; }
.tramite-cabecera .eyebrow { justify-content: center; }
.tramite-cabecera .perro-mini { display: none; }
.tramite-aviso { max-width: 52rem; margin: 0 auto 1.25rem; }

/* --- Campos que solo aparecen cuando hacen falta --- */
/* Sin JS se ven siempre: nadie se queda sin poder rellenar el tutor o el nº de certificado. */
.campo-condicional { margin-top: .9rem; }
.js .campo-condicional { display: none; }
.js .campo-condicional.abierto { display: block; }

/* La cabecera del trámite es un embudo, no un artículo: el titular no necesita el tamaño
   editorial y la página tiene que caber en pantalla con el primer paso incluido. */
.tramite-cabecera { padding: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(1.25rem, 2.5vw, 1.75rem); }
.tramite-cabecera h1 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); margin-top: .5rem; }
.tramite-cabecera .articulo-entradilla { font-size: 1.02rem; margin-top: .8rem; }
.pasos-guia { margin-bottom: 1.25rem; }

/* Un <select> aporta como anchura mínima la de su opción más larga, y una pista «1fr»
   (que es minmax(auto,1fr)) respeta ese suelo: con una opción larga la rejilla se
   ensancha y arrastra a toda la página. Con minmax(0,…) y min-width:0 no hay suelo. */
.campo input, .campo select, .campo textarea { min-width: 0; }
@media (max-width: 560px) {
    .tramite-campos { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   PIEZAS DE LAS HERRAMIENTAS
   Vienen de assets/css/pendiente-*.css, escritos por separado para poder trabajar
   en paralelo sin pisarse esta hoja. Se funden aquí porque cssInline() solo incrusta
   style.css: cualquier CSS que viva fuera sencillamente no llega a la página.
   ============================================================ */

/* --- actualidad --- */
/* ============================================================
   Pendiente de integrar en assets/css/style.css

   Una sola regla, para /actualidad/{fecha}/. La entrada lleva su NewsArticle DENTRO del cuerpo
   de la página, como un bloque de tipo «componente»: includes/pagina.php compone él mismo el
   JSON-LD de la cabecera y no admite bloques de fuera, y una entrada de actualidad necesita
   datePublished y dateModified reales, que el Article genérico del motor no da.

   El resultado es un <section class="bloque"> cuyo único hijo es un <script>: no pinta nada,
   pero hereda el margen que separa bloques y deja un hueco muerto antes del pie. Esto lo quita.

   Sirve para cualquier página que algún día haga lo mismo, no solo para esta.
   ============================================================ */

.bloque:has(> script:only-child) { display: none; }

/* --- alertas --- */
/* ============================================================
   PENDIENTE DE INTEGRAR EN assets/css/style.css

   Estilo de la alerta «avísame cuando certifiquen mi modelo»
   (comprobar-si-mi-patinete-es-legal.php → pintarAlertaModelo()).

   Va en un fichero aparte porque style.css es el único CSS que se
   incrusta en el <head> con cssInline(): este bloque hay que pegarlo
   dentro de style.css —justo detrás del bloque del buscador de
   modelos, que es donde vive la herramienta— y borrar este fichero.
   Mientras tanto el formulario se ve correcto igualmente: se apoya en
   .campo, .buscador-fila, .tramite-check, .campo-pista, .aviso y .btn,
   que ya existen. Lo que falta es solo la caja que los envuelve.
   ============================================================ */

/* La caja es ámbar, no menta: nace de un veredicto «no consta», que es
   un estado de espera, y no debe confundirse con la acción principal
   del sitio —contratar— ni con un resultado en verde. */
.alerta-dgt {
    margin-top: 1.75rem;
    background: var(--sol-tenue);
    border: 1px solid rgba(255, 197, 61, .45);
    border-radius: var(--radio-grande);
    padding: clamp(1.25rem, 2.4vw, 1.8rem);
}

.alerta-dgt h3 {
    font-family: var(--f-display);
    font-size: 1.2rem;
    letter-spacing: -.02em;
}

.alerta-dgt-texto {
    margin-top: .5rem;
    font-size: .96rem;
    color: var(--tinta-suave);
    max-width: 58ch;
}

.alerta-dgt-form { margin-top: 1.15rem; }

/* Sobre fondo ámbar el campo tiene que seguir leyéndose como un campo */
.alerta-dgt-form .campo input { background: var(--blanco); }

.alerta-dgt-check {
    margin-top: .85rem;
    background: var(--blanco);
}

.alerta-dgt-nota {
    margin-top: .8rem;
    max-width: 62ch;
}

.alerta-dgt-respuesta { margin-top: .9rem; }

/* El aviso de resultado (enviado / error) va pegado arriba del todo */
.alerta-dgt > .aviso { margin-bottom: 1rem; }

/* --- datos --- */
/* ============================================================
   PENDIENTE DE INTEGRAR EN assets/css/style.css

   Estilo de /datos-abiertos/ (datos-abiertos.php).

   Va en un fichero aparte porque style.css es el único CSS que se
   incrusta en el <head> con cssInline(): este bloque hay que pegarlo
   dentro de style.css —detrás del bloque de .catalogo, que es donde
   viven las rejillas compactas de datos— y borrar este fichero.

   Mientras tanto la página se ve correcta igualmente: se apoya en
   .rejilla, .tarjeta, .btn, .catalogo, .tabla y .aviso, que ya existen.
   Lo que falta es solo el matiz tipográfico de los nombres de campo y
   de la cita de atribución.
   ============================================================ */

/* Un nombre de campo o de fichero no es prosa: es algo que alguien va a
   copiar tal cual a su código. En monoespaciada se distingue del texto
   y se ve dónde empieza y dónde acaba, que con nombres tipo
   «velocidad_kmh_url» importa más de lo que parece. */
.dato-campo {
    font-family: var(--f-mono);
    font-size: .875em;
    background: var(--nube-2);
    border: 1px solid var(--borde);
    border-radius: 6px;
    padding: .1em .4em;
    white-space: nowrap;
    color: var(--tinta-2);
}

/* En la primera columna del diccionario y de la tabla de estados el
   campo va solo en la celda: ahí no hace falta el fondo, que a 19 filas
   ensucia la tabla entera. */
.tabla th[scope="row"] .dato-campo {
    background: none;
    border: none;
    padding: 0;
    font-size: .9375em;
}

/* Nombre del fichero y tamaño de la descarga, bajo el texto de la
   tarjeta y antes del botón. Es dato, no argumento de venta. */
.descarga-ficha {
    margin: .85rem 0 1.1rem;
    font-size: .875rem;
    color: var(--tinta-suave);
}

.descarga-ficha .dato-campo {
    background: none;
    border: none;
    padding: 0;
}

/* Las dos tarjetas de descarga tienen textos de distinta longitud y el
   botón no puede bailar de una a otra: en columna, con el botón
   empujado al fondo, quedan a la misma altura. */
.tarjeta-descarga {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tarjeta-descarga .descarga-ficha {
    margin-top: auto;
}

.descargas-resumen-titulo {
    margin: 2rem 0 .9rem;
    font-family: var(--f-display);
    font-size: 1.0625rem;
    color: var(--tinta-suave);
    font-weight: 600;
}

/* La atribución sugerida está para copiarla: caja seleccionable, en
   monoespaciada y con el texto partido, porque lleva una URL larga. */
.cita-atribucion {
    display: block;
    font-family: var(--f-mono);
    font-size: .9375rem;
    line-height: 1.6;
    background: var(--menta-tenue);
    border-left: 4px solid var(--menta);
    border-radius: 0 var(--radio) var(--radio) 0;
    padding: .9rem 1.1rem;
    color: var(--tinta);
    overflow-wrap: anywhere;
    user-select: all;
}

/* El código de fabricante junto al nombre en el desplegable del buscador. Discreto pero legible:
   es el dato con el que quien mira el adhesivo de su patinete reconoce lo que le hemos encontrado. */
.sugerencia-codigo {
    font-family: var(--f-mono); font-size: .72rem; letter-spacing: .04em;
    color: var(--tinta-suave); background: var(--nube-2);
    border-radius: 4px; padding: .1em .4em; white-space: nowrap;
}

/* El aviso de identificación dentro del resultado: por qué la DGT lo llama de otra manera.
   En sol porque es una advertencia (la variante alemana lleva otro código), no un error. */
.resultado-nota {
    margin-top: .55rem; padding: .55rem .7rem;
    background: var(--sol-tenue); border-left: 3px solid var(--sol);
    border-radius: 0 8px 8px 0;
    font-size: .88rem; line-height: 1.45; color: var(--tinta-2);
}

/* ============================================================
   CALCULADORA DE CLASIFICACIÓN — ¿ligero o pesado?
   Vive dentro de la página que explica el criterio, no en una página propia: el texto enseña
   la regla y esto la aplica al patinete de quien lee.
   ============================================================ */
.clasificador {
    background: var(--nube); border: 1px solid var(--borde);
    border-radius: var(--radio); padding: 1.4rem;
}
.clasificador-intro { margin: 0 0 1rem; color: var(--tinta-suave); }
.clasificador-campos {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem; margin-bottom: 1.1rem;
}
/* La unidad dentro del campo: quien escribe «16» ve «16 kg» y no duda de si son kilos o libras */
.campo-unidad { position: relative; display: flex; align-items: center; }
.campo-unidad input { width: 100%; padding-right: 3.2rem; }
.campo-unidad span {
    position: absolute; right: .85rem; pointer-events: none;
    font-family: var(--f-mono); font-size: .8rem; color: var(--tinta-suave);
}
.clasificador-ayuda { margin: .9rem 0 0; font-size: .88rem; color: var(--tinta-suave); }

.clasificador-veredicto {
    margin-top: 1.2rem; padding: 1.1rem 1.2rem;
    border-radius: var(--radio); border-left: 4px solid var(--menta);
    background: var(--menta-tenue);
}
/* Pesado no es «malo»: es otra categoría y otro precio. Ámbar, no rojo. */
.clasificador-pesado { border-left-color: var(--sol); background: var(--sol-tenue); }
/* Fuera sí es una alarma real: el seguro que venía a contratar no le sirve. */
.clasificador-fuera { border-left-color: var(--coral); background: var(--coral-tenue); }

.clasificador-titular { margin: 0; font-size: 1.15rem; font-weight: 700; }
.clasificador-porque { margin: .5rem 0 0; color: var(--tinta-2); font-size: .95rem; line-height: 1.5; }
.clasificador-precio { margin: .8rem 0 0; font-size: .95rem; }
.clasificador-precio strong { font-family: var(--f-mono); font-size: 1.05rem; }

.clasificador-parcial {
    margin-top: 1.2rem; padding: .9rem 1.1rem;
    background: var(--cielo-tenue); border-left: 4px solid var(--cielo);
    border-radius: var(--radio); font-size: .95rem; line-height: 1.5;
}
.clasificador-salida .cotizador { margin-top: 1.1rem; }