/* ==========================================================================
   Calculadora de peritaje · Cautos.es
   Medidas tomadas del diseño de Figma (lienzo de 1900 px).
   ========================================================================== */

:root {
    /* Color */
    --verde:          #2caf86;
    --verde-suave:    rgba(44, 175, 134, .32);
    --verde-halo:     rgba(44, 175, 134, .9);
    --verde-linea:    #3d6c5f;
    --negro:          #000000;
    --blanco:         #ffffff;
    --gris-fondo:     #f4f4f4;
    --gris-borde:     #a8a8a8;
    --gris-campo:     #b0b0b0;
    --gris-texto:     #868686;
    --gris-apagado:   #757575;
    --gris-pista:     #d9d9d9;
    --rojo:           #d64545;

    /* Retícula */
    --ancho-contenido: 792px;
    --ancho-resumen:   350px;
    --ancho-marco:     1200px;
    --alto-cabecera:   91px;
}

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

/* El `[hidden] { display: none }` del navegador es hoja de usuario-agente, así
   que cualquier `display` declarado aquí lo pisaría. Con esto, poner `hidden`
   oculta de verdad, sin depender del orden de las reglas. */
[hidden] {
    display: none !important;
}

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

body {
    margin: 0;
    /* `clip` y no `hidden`: recorta lo que sobresalga en horizontal sin crear
       un contenedor de scroll, así el panel de resumen sigue siendo sticky. */
    overflow-x: clip;
    background: var(--blanco);
    color: var(--negro);
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

/* --------------------------------------------------------------- Cabecera */

.cabecera {
    background: var(--gris-fondo);
    height: var(--alto-cabecera);
}

.cabecera__interior {
    width: min(var(--ancho-marco), 100% - 48px);
    height: 100%;
    margin-inline: auto;
    display: flex;
    align-items: center;
}

.cabecera__logo img {
    width: 200px;
    height: 55px;
    object-fit: contain;
}

/* -------------------------------------------------------------- Estructura */

/* La columna central va centrada sobre el ancho total de la página y el panel
   de resumen se ancla al borde derecho, tal y como está compuesto el diseño. */
.disposicion {
    display: grid;
    grid-template-columns: 1fr minmax(0, var(--ancho-contenido)) minmax(var(--ancho-resumen), 1fr);
    align-items: stretch;
}

.disposicion__columna {
    grid-column: 2;
    grid-row: 1;
    padding-block: 64px 0;
}

.paso {
    display: flex;
    flex-direction: column;
    gap: 46px;
    margin-top: 37px;
    padding-bottom: 90px;
}

.complementos {
    display: flex;
    flex-direction: column;
    gap: 34px;
}

/* ---------------------------------------------------------------- Progreso */

.progreso {
    position: relative;
    height: 6px;
    margin-bottom: 9px;
}

/* El diseño nuevo lleva la pista a todo el ancho de la columna y ambas piezas
   con un resplandor verde. */
.progreso__pista {
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    border-radius: 7px;
    background: var(--gris-pista);
    box-shadow: 0 0 6.6px 0 rgba(127, 231, 198, 1);
}

.progreso__relleno {
    position: absolute;
    left: 0;
    width: var(--avance);
    height: 6px;
    border-radius: 7px;
    background: var(--verde);
    box-shadow: 0 0 6.6px 0 rgba(127, 231, 198, 1);
    transition: width .35s ease;
}

/* El SVG llega en vertical (22×41); al girarlo 90° sobre su centro ocupa 41×22
   y queda tumbado sobre la barra, con el morro asomando tras el relleno. */
.progreso__coche {
    position: absolute;
    top: 3px;
    left: var(--avance);
    width: 22px;
    height: 41px;
    margin: -20.5px 0 0 -22.5px;
    transform: rotate(90deg);
    transition: left .35s ease;
}

.progreso__etiqueta {
    margin: 0;
    color: var(--verde);
    font-size: 14px;
    font-weight: 400;
}

/* ----------------------------------------------------------------- Titular */

.titular {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.titular__texto {
    margin: 0;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.4;
}

.titular__sub {
    margin: 0;
    color: var(--gris-texto);
    font-size: 18px;
    font-weight: 400;
}

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

.formulario {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
}

.formulario__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
}

.campos {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.campo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.etiqueta {
    display: block;
    padding: 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--negro);
}

.etiqueta em {
    font-weight: 300;
    font-style: italic;
}

.obligatorio {
    color: var(--verde);
}

.error {
    margin: 0;
    color: var(--rojo);
    font-size: 14px;
}

/* Fichas de tipo de vehículo */

.fichas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ficha {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 190px;
    padding: 10px 14px;
    border: 1px solid var(--negro);
    border-radius: 4px;
    background: var(--blanco);
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

.ficha:hover {
    border-color: var(--verde);
}

.ficha--activa {
    background: var(--verde-suave);
    border-color: var(--verde);
}

.ficha:focus-within {
    outline: 2px solid var(--verde);
    outline-offset: 2px;
}

.ficha__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Cada pictograma conserva su geometría propia: el ancho de la caja se fija a
   36 px (28 px en la moto) y la altura la marca el atributo del propio SVG. */
.ficha__icono {
    flex: 0 0 auto;
}

.ficha__texto {
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
}

/* Campos de selección y texto */

.campo--doble {
    flex-direction: row;
    gap: 10px;
}

.campo__mitad {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.selector {
    position: relative;
    border: 1px solid var(--gris-campo);
    border-radius: 4px;
    background: var(--blanco);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.selector::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 14px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    background: url('../img/iconos/arrow-down.svg') center / 24px 24px no-repeat;
    pointer-events: none;
}

.selector--texto::after {
    content: none;
}

.selector--relleno,
.selector:focus-within {
    border-color: var(--verde);
    box-shadow: 0 0 4.3px 0 var(--verde-halo);
}

.selector__control {
    width: 100%;
    /* 10 px de sangrado horizontal, como los campos de texto del diseño. */
    padding: 14px 10px;
    padding-right: 44px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--negro);
    font-family: inherit;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
    outline: none;
    appearance: none;
}

.selector--texto .selector__control {
    padding-right: 10px;
}

.selector__control:disabled {
    cursor: not-allowed;
}

/* Sin valor elegido el campo se ve en gris, como el «Selecciona un modelo»
   del diseño; al rellenarlo pasa a negro y el borde se vuelve verde. */
.selector:not(.selector--relleno) .selector__control {
    color: var(--gris-campo);
}

.selector__control option {
    color: var(--negro);
}

.selector__control::placeholder {
    color: var(--gris-campo);
    font-weight: 300;
    opacity: 1;
}

.campo--matricula .selector {
    width: 258px;
    max-width: 100%;
}

/* Botón principal */

.boton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 60px;
    border: 0;
    border-radius: 4px;
    background: var(--negro);
    color: var(--blanco);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    cursor: pointer;
    transition: opacity .18s ease;
}

.boton:hover {
    opacity: .85;
}

.boton:focus-visible {
    outline: 2px solid var(--verde);
    outline-offset: 3px;
}

.boton img {
    width: 8px;
    height: 12px;
}

/* ----------------------------------------------------- Paso 2 · Ubicación */

.formulario--ubicacion,
.formulario--contacto {
    align-items: stretch;
    gap: 0;
}

.ubicacion {
    display: flex;
    flex-direction: column;
    gap: 29px;
}

.ubicacion__mapa {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 17px;
}

/* Buscador de direcciones */

.buscador {
    position: relative;
}

.buscador__caja {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--gris-campo);
    border-radius: 4px;
    background: var(--blanco);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.buscador__caja:focus-within {
    border-color: var(--verde);
    box-shadow: 0 0 4.3px 0 var(--verde-halo);
}

.buscador__caja--error {
    border-color: var(--rojo);
}

.buscador__campo {
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px 13px;
    border: 0;
    border-radius: 4px 0 0 4px;
    background: transparent;
    color: var(--negro);
    font-family: inherit;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
    outline: none;
}

.buscador__campo::placeholder {
    color: var(--gris-campo);
    font-weight: 300;
    opacity: 1;
}

.buscador__boton {
    flex: 0 0 auto;
    padding: 15px 26px;
    /* Pegado al borde derecho de la caja: solo se redondean esas esquinas. */
    border: 0;
    border-radius: 0 4px 4px 0;
    background: var(--negro);
    color: var(--blanco);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    cursor: pointer;
    transition: opacity .18s ease;
}

.buscador__boton:hover {
    opacity: .85;
}

.buscador__sugerencias {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1000;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--blanco);
    border: 1px solid var(--gris-campo);
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
    overflow: hidden;
}

.buscador__sugerencia {
    padding: 11px 14px;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
    border-bottom: 1px solid var(--gris-fondo);
}

.buscador__sugerencia:last-child {
    border-bottom: 0;
}

.buscador__sugerencia:hover,
.buscador__sugerencia[aria-selected='true'] {
    background: rgba(44, 175, 134, .09);
}

.buscador__sugerencia--vacia {
    color: var(--gris-texto);
    cursor: default;
}

/* Mapa */

.mapa {
    height: 373.5px;
    background: var(--gris-fondo);
}

.mapa .leaflet-container {
    font-family: inherit;
}

/* Chincheta con el verde de marca. */
.chincheta {
    width: 28px;
    height: 28px;
    border: 3px solid var(--blanco);
    border-radius: 50% 50% 50% 0;
    background: var(--verde);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
    transform: rotate(-45deg);
}

/* Nota informativa bajo el mapa */

.nota {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0;
    color: var(--gris-texto);
    font-size: 14px;
    line-height: 1.4;
}

.nota img {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin-top: 1px;
}

/* Pareja de botones */

.acciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 43px;
}

.boton--secundario {
    background: var(--blanco);
    border: 1px solid var(--negro);
    color: var(--negro);
    text-decoration: none;
}

.boton--secundario:hover {
    opacity: 1;
    background: var(--gris-fondo);
}

/* El caret del diseño apunta a la derecha; para «Volver» se voltea. */
.boton__caret-izq {
    transform: scaleX(-1);
}

/* ------------------------------------------------------ Paso 3 · Contacto */

.contacto {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 32px;
}

.contacto__fila {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.aviso-rgpd {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 26px 0 0;
    color: var(--gris-texto);
    font-size: 14px;
    line-height: 1.4;
}

.aviso-rgpd img {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

.aviso-rgpd a {
    color: var(--verde);
    text-decoration: underline;
}

.formulario--contacto .acciones {
    margin-top: 50px;
}

.error--bloque {
    margin-top: 16px;
}

/* Señuelo antibot: fuera de la vista y del recorrido de tabulación, pero sin
   display:none ni hidden, que es justo lo que los bots aprenden a saltarse. */
.senuelo {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------------------------------------------------- Paso 4 · Revisión y pago */

.formulario--pago {
    align-items: stretch;
    gap: 0;
}

/* Resumen de toda la solicitud. Sustituye a los campos de tarjeta del diseño:
   el cobro se hace en la pasarela y aquí solo se revisa lo pedido. */

.revision {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 32px;
    border: 1px solid var(--border-suave, #e6e6e6);
    border-radius: 4px;
    overflow: hidden;
}

.revision__bloque {
    position: relative;
    padding: 18px 20px;
    border-bottom: 1px solid var(--gris-fondo);
}

.revision__bloque:last-child {
    border-bottom: 0;
}

.revision__titulo {
    margin: 0 0 10px;
    color: var(--gris-borde);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.revision__datos {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding-right: 70px;
}

.revision__datos > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
}

.revision__datos dt {
    flex: 0 0 auto;
    color: var(--gris-texto);
    font-size: 14px;
}

.revision__datos dd {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    text-align: right;
    line-height: 1.4;
}

.revision__enlace {
    overflow-wrap: anywhere;
}

.revision__editar {
    position: absolute;
    top: 18px;
    right: 20px;
    color: var(--verde);
    font-size: 13px;
    font-weight: 500;
}

.nota--medida {
    margin-top: 26px;
}

/* Métodos de pago */

.campo--pago {
    margin-top: 34px;
}

.metodos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Reparto por contenido y no en tres partes iguales: con 1/3 del ancho,
   «Transferencia bancaria» no cabe en una línea. Cada opción arranca de su
   propio tamaño y el sobrante se reparte entre las tres. */
.metodo {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 13px 14px;
    border: 1px solid var(--gris-campo);
    border-radius: 4px;
    background: var(--blanco);
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

.metodo:hover {
    border-color: var(--verde);
}

.metodo--activo {
    background: rgba(44, 175, 134, .12);
    border-color: var(--verde);
}

.metodo:focus-within {
    outline: 2px solid var(--verde);
    outline-offset: 2px;
}

.metodo__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* El punto se pinta con el propio SVG exportado como fondo, para poder
   cambiarlo con el selector hermano del radio: así responde al instante sin
   necesitar JavaScript. */
.metodo__marca {
    flex: 0 0 auto;
    width: 19.5px;
    height: 19.5px;
    margin-right: 4px;
    background: url('../img/iconos/radio.svg') center / 19.5px 19.5px no-repeat;
}

.metodo__radio:checked ~ .metodo__marca {
    background-image: url('../img/iconos/radio-marcado.svg');
}

/* Reserva por si el navegador no soporta :has(): el punto ya se ve marcado. */
.metodo:has(.metodo__radio:checked) {
    background: rgba(44, 175, 134, .12);
    border-color: var(--verde);
}

.metodo__icono {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
}

.metodo__texto {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

/* Total a pagar */

.total-pagar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 34px;
    padding: 14px 10px;
    border: 1px solid rgba(44, 175, 134, .34);
    border-radius: 4px;
    background: rgba(44, 175, 134, .06);
}

.total-pagar__etiqueta {
    font-size: 16px;
    font-weight: 700;
}

.total-pagar__importe {
    color: var(--verde);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
}

.formulario--pago .acciones {
    margin-top: 30px;
}

.nota-segura {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    margin: 30px 0 0;
    color: var(--gris-texto);
    font-size: 13px;
    line-height: 1.4;
}

.nota-segura img {
    flex: 0 0 auto;
    width: 11px;
    height: 15px;
    margin-top: 1px;
}

/* Resumen lateral: desglose e importe total (aparecen en el paso 4). */

.resumen__total {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-top: 4px;
}

.resumen__total dt {
    font-size: 18px;
    font-weight: 600;
}

.resumen__total dd {
    margin: 0;
    text-align: right;
}

.resumen__cifra {
    display: block;
    color: var(--verde);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}

.resumen__iva {
    display: block;
    color: #787878;
    font-size: 13px;
    line-height: 1.3;
}

/* -------------------------------------------------------------- Ayuda / CTA */

.ayuda {
    border-top: 1px solid var(--gris-borde);
    padding: 35px 224px 10px;
}

.ayuda__interior {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.ayuda__cabecera {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ayuda__titulo,
.ayuda__subtitulo {
    margin: 0;
    font-size: 20px;
}

.ayuda__titulo {
    font-weight: 600;
}

.ayuda__subtitulo {
    font-weight: 400;
}

.ayuda__telefono {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--verde);
    font-size: 34px;
    font-weight: 500;
    text-decoration: none;
}

.ayuda__telefono img {
    width: 28px;
    height: 28px;
}

.ayuda__horario {
    margin: 0;
    color: var(--gris-apagado);
    font-size: 14px;
}

/* ---------------------------------------------------------------- Ventajas */

.ventajas {
    background: var(--gris-fondo);
    border-radius: 12px;
    padding: 54px 37px;
    min-height: 203px;
    display: flex;
    align-items: center;
}

.ventajas__lista {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

.ventajas__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    flex: 0 0 auto;
}

.ventajas__item p {
    margin: 0;
    width: var(--ancho);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
}

.ventajas__item strong {
    font-weight: 500;
}

.ventajas__icono {
    width: 40px;
    height: 40px;
}

.ventajas__circulo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 5px;
    border-radius: 44px;
    background: var(--verde);
}

/* ----------------------------------------------------------------- Resumen */

.resumen {
    position: relative;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: var(--ancho-resumen);
    padding: 44px 56px;
    background: var(--gris-fondo);
    border-left: 1px solid var(--gris-borde);
}

.resumen__panel {
    position: sticky;
    top: 44px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.resumen__titulo {
    margin: 0;
    color: var(--verde);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
}

.resumen__lista {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin: 0;
}

.resumen__fila {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 6px;
    border-bottom: .6px solid var(--verde-linea);
}

.resumen__fila dt {
    color: var(--gris-borde);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
}

.resumen__fila dd {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    text-align: right;
}

/* Mientras no haya nada elegido, el resumen no se muestra. */
.resumen--vacio {
    display: none;
}

/* El control del plegado y su barra solo existen en móvil. */
.resumen__control,
.resumen__barra {
    display: none;
}

/* Filigrana: el logotipo blanco ampliado al 311 % y recortado, como en el
   diseño, de modo que solo asome la silueta del coche. */
/* Se ancla con `right: 0` en vez de con un ancho fijo: la caja de relleno del
   panel mide 1 px menos que su ancho por el borde izquierdo, y un ancho fijo
   de 315 px asomaba ese píxel y provocaba scroll lateral. */
.resumen__filigrana {
    position: absolute;
    left: 35px;
    right: 0;
    bottom: 38px;
    height: 342px;
    overflow: hidden;
    pointer-events: none;
}

.resumen__filigrana img {
    position: absolute;
    top: 0;
    left: -19px;
    width: 1263px;
    height: 342px;
    max-width: none;
}

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

.pie {
    background: var(--negro);
    padding: 61px 0;
    color: var(--blanco);
}

.pie__interior {
    width: min(1211px, 100% - 48px);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.pie__logo {
    width: 251px;
    height: 68px;
    object-fit: contain;
    flex: 0 0 auto;
}

.pie__enlaces {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    text-align: center;
}

.pie__enlaces a {
    text-decoration: none;
}

.pie__enlaces a:hover {
    text-decoration: underline;
}

.pendiente {
    padding: 60px 0;
    color: var(--gris-texto);
}

/* ------------------------------------------- Diálogo de trámite pendiente */

/* No está en el Figma: construido con el lenguaje visual del resto. */

.con-modal {
    overflow: hidden;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(26, 26, 26, .55);
    animation: modal-entra .2s ease both;
}

.modal__panel {
    width: min(520px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 40px;
    border-radius: 12px;
    background: var(--blanco);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .25);
}

.modal__titulo {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
}

.modal__texto {
    margin: 0 0 22px;
    color: var(--gris-texto);
    font-size: 16px;
    line-height: 1.5;
}

.modal__texto strong {
    color: var(--negro);
    font-weight: 500;
}

.modal__resumen {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 28px;
    padding: 18px 20px;
    border-radius: 4px;
    background: var(--gris-fondo);
}

.modal__fila {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.modal__fila dt {
    color: var(--gris-borde);
    font-size: 14px;
    white-space: nowrap;
}

.modal__fila dd {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    text-align: right;
}

.modal__acciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.modal__acciones .boton {
    flex: 1 1 auto;
    justify-content: center;
    padding: 10px 24px;
}

@keyframes modal-entra {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .modal {
        animation: none;
    }
}

/* ------------------------------------------------------------- Adaptativo */








/* -------------------------------------------- Marca/modelo escritos a mano */

.manual {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.manual__volver {
    padding: 0;
    border: 0;
    background: none;
    color: var(--verde);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
}

.manual .selector {
    width: 100%;
}

/* ------------------------------------------------- Desplegable propio */

/* Sustituye al <select> nativo para poder abrir la lista SIEMPRE hacia abajo,
   cosa que el navegador no deja controlar. Ver assets/js/desplegable.js. */

.desplegable__campo {
    display: block;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Reserva el hueco del chevrón de .selector::after */
    padding-right: 44px;
}

.desplegable__campo:disabled {
    cursor: not-allowed;
}

.desplegable__campo--vacio {
    color: var(--gris-campo);
    font-weight: 300;
}

.selector--abierto {
    z-index: 60;
}

.desplegable__panel {
    position: absolute;
    /* Siempre por debajo del campo: nunca encima ni tapándolo. */
    top: calc(100% + 4px);
    left: -1px;
    right: -1px;
    z-index: 50;
    border: 1px solid var(--verde);
    border-radius: 4px;
    background: var(--blanco);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    overflow: hidden;
}

.desplegable__buscador {
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-bottom: 1px solid var(--gris-fondo);
    background: var(--blanco);
    color: var(--negro);
    font-family: inherit;
    font-size: 15px;
    outline: none;
}

.desplegable__buscador::placeholder {
    color: var(--gris-campo);
}

.desplegable__lista {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
}

.desplegable__opcion {
    padding: 10px 12px;
    font-size: 15px;
    line-height: 1.3;
    cursor: pointer;
}

.desplegable__opcion:hover,
.desplegable__opcion--activa {
    background: rgba(44, 175, 134, .1);
}

.desplegable__opcion[aria-selected='true'] {
    font-weight: 500;
}

.desplegable__opcion--vacia {
    color: var(--gris-texto);
    cursor: default;
}

.desplegable__opcion--vacia:hover {
    background: none;
}

/* ==================================================== Página final =========
   Diseño de gracias/Final.html. Sin barra de progreso y sin panel lateral: el
   resumen pasa a la columna central sobre un fondo verde muy suave.
   ========================================================================== */

.final {
    background: rgba(44, 175, 134, .08);
}

.final__contenido {
    width: min(var(--ancho-contenido), 100% - 48px);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 46px;
    padding-block: 78px 90px;
}

.final__mensaje {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: min(600px, 100%);
    margin-inline: auto;
}

.final__mensaje > img {
    width: 54px;
    height: 54px;
}

.final__textos {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.final__titulos {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
}

.final__titulo {
    margin: 0;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.4;
}

.final__subtitulo {
    margin: 0;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.4;
}

.final__detalle {
    margin: 0;
    color: var(--gris-texto);
    font-size: 18px;
    line-height: 1.4;
    text-align: center;
}

/* Panel del resumen */

.final__panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px 25px;
    background: rgba(44, 175, 134, .12);
}

.final__panel--transferencia {
    background: var(--blanco);
    border: 1px solid rgba(44, 175, 134, .34);
}

.final__panel-titulo {
    margin: 0 0 4px;
    color: var(--verde);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
}

.final__datos {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin: 0;
}

.final__datos > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 6px;
    border-bottom: .6px solid var(--verde-linea);
}

.final__datos dt {
    color: var(--gris-borde);
    font-size: 18px;
    line-height: 1.3;
    white-space: nowrap;
}

.final__datos dd {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    text-align: right;
}

.final__total {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin: 0;
}

.final__total dt {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.final__total dd {
    margin: 0;
    text-align: right;
}

.final__aviso {
    margin: -14px 0 0;
    color: var(--gris-texto);
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

.final__aviso strong {
    color: var(--negro);
    font-weight: 500;
}

.final__aviso a {
    color: var(--verde);
    font-weight: 500;
}

/* Sobre el fondo verde, la tarjeta de ventajas va en blanco. */
.final .ventajas {
    background: var(--blanco);
}



/* Variante de error de la pantalla final. */

.final--error {
    background: rgba(214, 69, 69, .06);
}

.final--error .final__panel {
    background: var(--blanco);
    border: 1px solid rgba(214, 69, 69, .25);
}

.final--error .final__panel-titulo {
    color: var(--gris-texto);
}

.final__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.final__acciones .boton {
    text-decoration: none;
}

/* ------------------------------------------------------- Barra de pruebas */

/* Solo se imprime fuera de producción (ver partes/barra-pruebas.php). El
   aspecto es deliberadamente ajeno al diseño para que no se confunda. */

.pruebas {
    position: fixed;
    left: 50%;
    bottom: 16px;
    z-index: 3000;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 32px);
    padding: 8px 10px;
    border-radius: 6px;
    background: #1f1f1f;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
    font-size: 13px;
    color: #fff;
}

.pruebas__etiqueta {
    padding: 2px 8px;
    border-radius: 4px;
    background: #f0b429;
    color: #1f1f1f;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.pruebas__enlace {
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
}

.pruebas__enlace:hover {
    background: rgba(255, 255, 255, .12);
}

.pruebas__enlace--activo {
    border-color: transparent;
    background: rgba(255, 255, 255, .22);
    font-weight: 600;
}

.pruebas__nota {
    color: rgba(255, 255, 255, .55);
    font-size: 11px;
}

/* ================================================ Paso 1 · Cómo identificar */

.formulario--metodo {
    align-items: stretch;
    gap: 38px;
}

.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.metodo-vehiculo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.metodo-vehiculo__opciones {
    display: flex;
    align-items: stretch;
    gap: 24px;
}

.metodo-vehiculo__acciones {
    display: flex;
    justify-content: flex-end;
}

/* Tarjeta de opción */

.tarjeta {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 38px;
    padding-top: 26px;
    border: 1px solid var(--gris-campo);
    border-radius: 4px;
    background: var(--blanco);
    cursor: pointer;
    transition: border-color .18s ease;
}

.tarjeta:hover {
    border-color: var(--verde);
}

.tarjeta--activa {
    border-color: var(--verde);
}

.tarjeta:focus-within {
    outline: 2px solid var(--verde);
    outline-offset: 2px;
}

.tarjeta__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.tarjeta__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 18px;
    padding-right: 18px;
}

/* El punto se pinta con el SVG exportado como fondo, para poder alternarlo
   con el selector hermano del radio y que responda sin JavaScript. */
.tarjeta__marca {
    width: 19.5px;
    height: 19.5px;
    background: url('../img/iconos/radio.svg') center / 19.5px 19.5px no-repeat;
}

.tarjeta__radio:checked ~ .tarjeta__cuerpo .tarjeta__marca {
    background-image: url('../img/iconos/radio-marcado.svg');
}

.tarjeta__titulo {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
}

.tarjeta__descripcion {
    margin-top: -6px;
    color: var(--gris-texto);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
}

.tarjeta__distintivo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    background: rgba(44, 175, 134, .12);
    font-size: 16px;
    line-height: 1.4;
}

.tarjeta__distintivo img {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}



.ayuda-campo {
    margin: 0;
    color: var(--gris-texto);
    font-size: 14px;
    line-height: 1.5;
}

/* --------------------------------------------- Diálogo de matrícula (paso 1) */

/* No está en el Figma. La placa con la banda azul europea viene de la
   aplicación de referencia. */

.modal__panel--matricula {
    width: min(560px, 100%);
}

.placa__etiqueta {
    display: block;
    margin-bottom: 8px;
    color: var(--gris-texto);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.placa {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.placa__banda {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    border-radius: 4px 0 0 4px;
    background: #003399;
    color: #ffdd00;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
}

.placa__campo {
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--gris-campo);
    border-left: 0;
    border-radius: 0 4px 4px 0;
    background: var(--blanco);
    color: var(--negro);
    font-family: inherit;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    outline: none;
}

.placa__campo::placeholder {
    color: var(--gris-campo);
    font-weight: 400;
    letter-spacing: .12em;
}

.placa__campo:focus {
    border-color: var(--verde);
    box-shadow: 0 0 4.3px 0 var(--verde-halo);
}

.placa--error .placa__campo {
    border-color: var(--rojo);
}

.placa__boton {
    flex: 0 0 auto;
    padding: 0 22px;
    border: 0;
    border-radius: 4px;
    background: var(--negro);
    color: var(--blanco);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: opacity .18s ease;
}

.placa__boton:hover {
    opacity: .85;
}

.placa__nota {
    margin: 8px 0 0;
    color: var(--gris-texto);
    font-size: 13px;
}

/* Vehículo encontrado */

.hallazgo {
    margin-top: 20px;
    padding: 18px 20px;
    border: 1px solid rgba(44, 175, 134, .34);
    border-radius: 4px;
    background: rgba(44, 175, 134, .08);
}

.hallazgo__titulo {
    margin: 0 0 12px;
    color: var(--verde);
    font-size: 14px;
    font-weight: 600;
}

.hallazgo__datos {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.hallazgo__datos > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
}

.hallazgo__datos dt {
    color: var(--gris-texto);
    font-size: 14px;
}

.hallazgo__datos dd {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    text-align: right;
}

.hallazgo__nota {
    margin: 12px 0 0;
    color: var(--gris-texto);
    font-size: 13px;
}

.modal__panel--matricula .modal__acciones {
    margin-top: 24px;
}



/* ==========================================================================
   Móvil y tablet · medidas tomadas de los frames de 375 px de responsive/

   No hay diseño de tablet: se usa la misma disposición del móvil, con la
   columna de contenido acotada y centrada para que las líneas no se estiren.
   El escritorio empieza donde cabe el panel lateral de 350 px junto a la
   columna de 792.
   ========================================================================== */

@media (max-width: 1199px) {

    /* ------------------------------------------------------------ Armazón */

    .cabecera {
        height: 72px;
    }

    .cabecera__interior {
        width: 100%;
        justify-content: center;
        padding-inline: 20px;
    }

    .cabecera__logo img {
        width: 152px;
        height: 42px;
    }

    /* Se deshace la retícula de tres columnas del escritorio: aquí todo va
       apilado y el resumen vive en la barra inferior. */
    .disposicion {
        grid-template-columns: minmax(0, 1fr);
    }

    .disposicion__columna {
        grid-column: 1;
        grid-row: 1;
        /* 335 de 375 en el frame; en tablet se acota para que las líneas no se
           estiren, manteniendo la misma disposición apilada. */
        width: min(720px, 100% - 40px);
        margin-inline: auto;
        padding: 30px 0 0;
    }

    .paso {
        gap: 78px;
        margin-top: 22px;
        /* Hueco para que la barra fija del resumen no tape el final. */
        padding-bottom: 120px;
    }

    .complementos {
        gap: 28px;
    }

    /* ---------------------------------------------------------- Progreso */

    .progreso__coche {
        /* Con 335 px de barra el coche se sale por la izquierda al inicio. */
        margin-left: -18px;
    }

    /* ---------------------------------------------------------- Titulares */

    .titular__texto {
        font-size: 20px;
    }

    .titular__sub {
        font-size: 16px;
    }

    /* ------------------------------------------------ Paso 1 · tarjetas */

    .formulario--metodo {
        gap: 24px;
    }

    .metodo-vehiculo__opciones {
        flex-direction: column;
        gap: 18px;
    }

    .tarjeta {
        gap: 30px;
        padding-top: 22px;
    }

    .tarjeta__titulo {
        font-size: 18px;
    }

    .tarjeta__descripcion {
        font-size: 16px;
    }

    /* ---------------------------------------- Paso 2 · tipo, marca, modelo */

    .fichas {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ficha {
        width: 100%;
    }

    .campo--doble {
        flex-direction: column;
        gap: 26px;
    }

    .campo--matricula .selector {
        width: 100%;
    }

    /* ------------------------------------------- Paso 3 · buscador y mapa */

    /* El botón baja debajo del campo y ocupa todo el ancho. */
    .buscador__caja {
        flex-direction: column;
        border: 0;
        gap: 12px;
    }

    .buscador__caja:focus-within {
        box-shadow: none;
    }

    .buscador__campo {
        border: 1px solid var(--gris-campo);
        border-radius: 4px;
        padding: 14px 13px;
    }

    .buscador__caja:focus-within .buscador__campo {
        border-color: var(--verde);
        box-shadow: 0 0 4.3px 0 var(--verde-halo);
    }

    .buscador__boton {
        border-radius: 4px;
        padding: 15px;
        text-align: center;
    }

    .mapa {
        /* Proporción del frame (337 × 155,6): a 335 de ancho da los 155,6
           exactos y en tablet crece con la columna. */
        height: auto;
        aspect-ratio: 337 / 155.6;
    }

    /* ----------------------------------------------- Paso 5 · métodos */

    .metodos {
        gap: 12px;
    }

    .total-pagar {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .revision__datos {
        padding-right: 60px;
    }

    /* ------------------------------------------------------- Acciones */

    .acciones .boton,
    .final__acciones .boton {
        padding: 15px 38px;
    }

    .boton {
        justify-content: center;
    }

    /* -------------------------------------------------- Ayuda y ventajas */

    .ayuda {
        padding: 34px 0 10px;
    }

    .ayuda__telefono {
        font-size: 26px;
    }

    .ventajas {
        padding: 35px 20px;
        min-height: 0;
    }

    .ventajas__lista {
        flex-direction: column;
        gap: 18px;
    }

    .ventajas__item {
        flex: 1 1 auto;
    }

    .ventajas__item p {
        width: auto;
    }

    /* --------------------------------------------------- Pantalla final */

    .final__contenido {
        width: min(720px, 100% - 40px);
        padding: 30px 0 120px;
        gap: 28px;
    }

    .final__titulo,
    .final__subtitulo {
        font-size: 20px;
    }

    .final__detalle {
        font-size: 16px;
    }

    .final__panel {
        padding: 24px 20px;
    }

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

    .pie {
        padding: 52px 20px;
    }

    .pie__interior {
        width: 100%;
        flex-direction: column;
        justify-content: center;
        gap: 34px;
    }

    .pie__enlaces {
        max-width: 272px;
        justify-content: center;
        text-align: center;
    }

    /* --------------------------------- Resumen plegado en barra inferior */

    .resumen {
        grid-column: 1;
        grid-row: 2;
        position: static;
        width: auto;
        padding: 0;
        border: 0;
        background: none;
    }

    .resumen__barra {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 25px 20px;
        background: var(--negro);
        color: var(--verde);
        font-size: 20px;
        font-weight: 600;
        cursor: pointer;
    }

    .resumen__barra-cerrar,
    .resumen__control:checked ~ .resumen__barra .resumen__barra-abrir {
        display: none;
    }

    .resumen__control:checked ~ .resumen__barra .resumen__barra-cerrar {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--blanco);
        font-size: 14px;
        font-weight: 400;
    }

    .resumen__panel {
        /* El panel acompaña al ancho de la columna, centrado como ella. */
        width: min(720px, 100%);
        margin-inline: auto;
        position: fixed;
        left: 0;
        right: 0;
        /* `top: auto` es imprescindible: el panel hereda el `top: 44px` de la
           regla sticky de escritorio y, con top y bottom a la vez, un elemento
           fijo se estira entre los dos en lugar de ajustarse al contenido. */
        top: auto;
        bottom: 70px;
        z-index: 900;
        display: none;
        max-height: calc(100vh - 160px);
        overflow-y: auto;
        padding: 26px 50px 36px;
        background: var(--gris-fondo);
    }

    .resumen__control:checked ~ .resumen__panel {
        display: flex;
    }

    .resumen__filigrana {
        display: none;
    }

    /* ------------------------- Paso 3 · ubicación (medidas del frame) */

    /* El botón cae bajo el campo con 14 de separación, no pegado a él. */
    .buscador__caja {
        gap: 14px;
    }

    .buscador__campo {
        padding: 14px;
    }

    /* Buscador -> mapa -> nota, todo a 24. */
    .ubicacion__mapa {
        gap: 24px;
        margin-top: 24px;
    }

    .formulario--ubicacion .acciones {
        margin-top: 51px;
    }

    /* -------------------------- Paso 4 · contacto (medidas del frame) */

    /* En móvil los cinco campos van en una sola columna, no en parejas. */
    .contacto {
        gap: 20px;
        margin-top: 24px;
    }

    .contacto__fila {
        flex-direction: column;
        /* En columna, `flex-start` encoge los campos al ancho de su contenido:
           hay que estirarlos explícitamente. */
        align-items: stretch;
        gap: 20px;
    }

    .aviso-rgpd {
        margin-top: 32px;
    }

    .formulario--contacto .acciones {
        margin-top: 44px;
    }
}