/* LookupVia · estilos (Etapa A). Paleta y medidas de GUIA-ESTILO.md. Móvil primero; el ordenador tiene su propia composición.
:hover solo con (hover: hover) and (pointer: fine). Nada de importes aquí ni en el HTML. */
/* Inter por alfabetos (Etapa D): el navegador solo descarga el archivo de los caracteres que usa la página (unicode-range). latin = el de
PhotoSetGo; latin-ext, cyrillic, greek y vietnamese = subconjuntos de Inter 4.1 (OFL, licencia en fuentes/LICENSE-inter.txt).
Tailandés y coreano no tienen Inter: usan la letra del sistema (ver :lang(th) y :lang(ko) más abajo). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fuentes/inter-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fuentes/inter-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fuentes/inter-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fuentes/inter-greek-400-normal.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF, U+1F00-1FFF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fuentes/inter-vietnamese-400-normal.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fuentes/inter-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fuentes/inter-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fuentes/inter-cyrillic-600-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fuentes/inter-greek-600-normal.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF, U+1F00-1FFF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fuentes/inter-vietnamese-600-normal.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fuentes/inter-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fuentes/inter-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fuentes/inter-cyrillic-700-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fuentes/inter-greek-700-normal.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF, U+1F00-1FFF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fuentes/inter-vietnamese-700-normal.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
:root {
--tinta: #0E1A33; --texto-2: #5B6478; --principal: #2B5CFF; --principal-hover: #1E46D8; --principal-suave: #EEF3FF;
--bien: #16A34A; --bien-suave: #E9F7EE; --aviso-fondo: #FFF6D6; --aviso-texto: #7A5600; --error: #D92D20;
--fondo: #FFFFFF; --fondo-2: #F5F7FB; --borde: #E3E8F2;
--radio: 8px; --radio-tarjeta: 16px; --sombra: 0 1px 2px rgba(14,26,51,.04), 0 4px 16px rgba(14,26,51,.05);
--cab-h: 56px;
--letra: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 16px/1.5 var(--letra); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 12px; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: 28px; } h2 { font-size: 24px; } h3 { font-size: 18px; }
p { margin: 0 0 12px; }
a { color: var(--principal); }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
.oculto { display: none !important; }
.oculto-visual { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.suave { color: var(--texto-2); } .pequeno { font-size: 14px; }
.saltar { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--tinta); color: #fff; padding: 8px 12px; border-radius: var(--radio); }
.saltar:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--principal); outline-offset: 2px; }
.contenedor { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.contenedor.estrecho { max-width: 760px; }
.icono { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icono-tarjeta { width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: var(--principal-suave); color: var(--principal); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 12px; }
/* ---------- cabecera ---------- */
.cabecera { height: var(--cab-h); border-bottom: 1px solid var(--borde); background: #fff; position: relative; z-index: 20; }
.cabecera-dentro { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta); text-decoration: none; font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.logo-icono { width: 30px; height: 30px; }
.cabecera-der { display: flex; align-items: center; gap: 8px; }
.entrar { color: var(--tinta); font-weight: 600; font-size: 15px; text-decoration: none; padding: 8px 12px; border: 1px solid var(--borde); border-radius: var(--radio); }
.idiomas { position: relative; }
.idiomas summary { list-style: none; display: flex; align-items: center; gap: 4px; cursor: pointer; padding: 8px; border-radius: var(--radio); font-size: 14px; font-weight: 600; color: var(--texto-2); }
.idiomas summary::-webkit-details-marker { display: none; }
.idiomas ul { position: absolute; right: 0; top: calc(100% + 4px); margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra); min-width: 160px; max-height: 60vh; overflow: auto; }
.idiomas a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--tinta); text-decoration: none; }
.idiomas a[aria-current] { font-weight: 700; background: var(--principal-suave); }
/* ---------- botones y campos ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 24px; border: 0; border-radius: var(--radio); font-size: 18px; font-weight: 600; line-height: 1.15; text-align: center; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.boton-principal { background: var(--principal); color: #fff; }
.boton-principal .icono { width: 22px; height: 22px; }
.boton-secundario { background: #fff; color: var(--tinta); border: 1.5px solid var(--borde); }
.boton-peligro { background: #fff; color: var(--error); border: 1.5px solid #F4C7C3; }
.boton-igual { background: #fff; color: var(--tinta); border: 2px solid var(--tinta); flex: 1; }
.boton[disabled] { opacity: .6; cursor: progress; }
.ancho { width: 100%; }
.late { animation: latido 2.2s ease-in-out infinite; }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(43,92,255,.35); } 50% { box-shadow: 0 0 0 9px rgba(43,92,255,0); } }
@media (prefers-reduced-motion: reduce) { .late { animation: none; } }
.enlace-boton { background: none; border: 0; padding: 0; color: var(--principal); text-decoration: underline; cursor: pointer; font-size: inherit; }
.campo { display: block; margin-bottom: 14px; }
.campo > span { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 56px; padding: 14px 16px; border: 1.5px solid var(--borde); border-radius: var(--radio); background: #fff; font-size: 16px; }
.campo textarea { min-height: 120px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--principal); outline: none; box-shadow: 0 0 0 3px var(--principal-suave); }
.error { color: var(--error); font-size: 14px; font-weight: 600; margin: 8px 0 0; }
.aviso { background: var(--aviso-fondo); color: var(--aviso-texto); border-radius: var(--radio); padding: 12px 14px; font-size: 15px; }
.aviso.bien { background: var(--bien-suave); color: #0F6A31; }
.error-caja { background: #FDECEA; color: var(--error); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.casilla { display: flex; gap: 10px; align-items: flex-start; text-align: start; font-size: 15px; cursor: pointer; }
.casilla input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--principal); }
/* ---------- buscadores ---------- */
.buscador { margin: 0; text-align: start; }
.fila-buscador { display: flex; flex-direction: column; gap: 10px; }
.campo-tel, .campo-vin { display: flex; align-items: stretch; min-height: 56px; border: 1.5px solid var(--borde); border-radius: var(--radio); background: #fff; }
.campo-tel:focus-within, .campo-vin:focus-within { border-color: var(--principal); box-shadow: 0 0 0 3px var(--principal-suave); }
.pais-boton { display: flex; align-items: center; gap: 6px; padding: 0 10px 0 14px; border: 0; border-right: 1px solid var(--borde); background: none; cursor: pointer; font-size: 16px; font-weight: 600; flex: none; border-radius: var(--radio) 0 0 var(--radio); }
.pais-boton .flecha { width: 16px; height: 16px; color: var(--texto-2); }
.bandera { font-size: 20px; line-height: 1; width: 24px; text-align: center; }
.bandera.sin-emoji { font-size: 11px; font-weight: 700; letter-spacing: .02em; background: var(--fondo-2); border-radius: 3px; padding: 3px 0; }
.campo-tel input, .campo-vin input { flex: 1; min-width: 0; border: 0; background: none; padding: 0 14px; font-size: 16px; outline: none; }
.campo-vin input { text-transform: uppercase; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.campo-vin input::placeholder { text-transform: none; letter-spacing: 0; }
.buscador-foto { display: grid; gap: 12px; }
.ayuda-campo { margin: 0; font-size: 13px; color: var(--texto-2); text-align: center; }
/* Hoja para elegir país (la monta landing.js / telefono.js) */
.hoja-paises { position: fixed; inset: 0; z-index: 60; background: rgba(14,26,51,.45); display: flex; align-items: flex-end; justify-content: center; }
.hoja-paises .hoja { width: 100%; max-width: 480px; height: min(88svh, 640px); background: #fff; border-radius: 16px 16px 0 0; display: flex; flex-direction: column; overflow: hidden; }
.hoja-cab { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--borde); }
.hoja-cab input { flex: 1; min-height: 48px; border: 1.5px solid var(--borde); border-radius: var(--radio); padding: 0 12px; font-size: 16px; }
.hoja-cab button { border: 0; background: var(--fondo-2); border-radius: var(--radio); padding: 0 14px; font-weight: 600; cursor: pointer; }
.hoja-lista { list-style: none; margin: 0; padding: 4px 0; overflow: auto; flex: 1; }
.hoja-lista button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 0; background: none; text-align: start; cursor: pointer; font-size: 16px; }
.hoja-lista button[aria-selected="true"] { background: var(--principal-suave); font-weight: 600; }
.hoja-lista .prefijo-lista { margin-left: auto; color: var(--texto-2); }
.hoja-vacia { padding: 16px; color: var(--texto-2); }
@media (min-width: 700px) { .hoja-paises { align-items: center; } .hoja-paises .hoja { border-radius: 16px; } }
/* ---------- landing · primera pantalla (NORMAS_DURAS §3) ----------
El hero mide el alto GRANDE (lvh) menos la cabecera: lo siguiente empieza por debajo incluso tras la barra translúcida de Safari.
El contenido se centra en lo que se ve al llegar (svh). En la primera pantalla: pestañas, titular, frase, buscador y beneficios. */
.hero { min-height: calc(100vh - var(--cab-h)); min-height: calc(100lvh - var(--cab-h)); display: flex; background: linear-gradient(180deg, #fff 0%, #F7F9FE 100%); }
/* El hero se estira al alto grande; el contenido se centra en lo que queda a la vista por encima del aviso de cookies.
Móvil (< 800 px): el aviso siempre es barra, con su alto en --ck-h. Desde 800 px el aviso puede ser tarjeta o barra: ahí el centro no
depende de --ck-h (si dependiera, al pasar de tarjeta a barra el contenido se movería y el aviso volvería a cambiar). */
.hero-rejilla { display: flex; align-items: center; min-height: calc(100vh - var(--cab-h) - var(--ck-h, 0px)); min-height: calc(100svh - var(--cab-h) - var(--ck-h, 0px)); padding-top: clamp(10px, 3svh, 32px); padding-bottom: calc(clamp(10px, 3svh, 32px) + var(--ck-h, 0px)); }
@media (min-width: 800px) { .hero-rejilla { padding-bottom: clamp(10px, 3svh, 32px); } }
.hero-texto { width: 100%; max-width: 560px; margin: 0 auto; }
.hero-ilus { display: none; }
.pestanas { display: flex; gap: 4px; margin: 0 0 clamp(12px, 2.6svh, 24px); overflow-x: auto; scrollbar-width: none; }
.pestanas a, .pestanas button { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; min-height: 40px; border-radius: var(--radio); color: var(--texto-2); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; border: 0; background: none; cursor: pointer; }
.pestanas .icono { width: 18px; height: 18px; }
.pestanas a[aria-current], .pestanas button[aria-selected="true"] { background: var(--principal-suave); color: var(--principal); }
.hero h1 { font-size: clamp(26px, min(8vw, 4.6svh), 34px); margin-bottom: clamp(6px, 1.4svh, 12px); }
.hero-sub { color: var(--texto-2); font-size: clamp(15px, 2.2svh, 18px); margin-bottom: clamp(12px, 2.6svh, 24px); }
.beneficios { list-style: none; margin: clamp(12px, 2.8svh, 24px) 0 0; padding: 0; display: grid; gap: clamp(6px, 1.2svh, 10px); }
.beneficios li { display: flex; gap: 10px; align-items: flex-start; font-size: clamp(14px, 2svh, 16px); color: var(--tinta); }
.beneficios .icono { color: var(--bien); width: 20px; height: 20px; margin-top: 1px; stroke-width: 2.6; }
[data-prueba-social]:empty { display: none; }
@media (max-height: 600px) and (max-width: 899px) {
.hero-sub { display: none; }
.pestanas a { min-height: 36px; }
}
@media (max-width: 440px) { .pestanas a, .pestanas button { padding: 0 10px; } .pestanas .icono { display: none; } }
@media (max-width: 340px) { .pestanas a, .pestanas button { padding: 0 8px; font-size: 14px; } }
.pestanas-cuenta { flex-wrap: wrap; }
/* ---------- landing · resto ---------- */
.bloque { padding: 56px 0; }
.bloque.gris { background: var(--fondo-2); }
.bloque h2 { text-align: center; margin-bottom: 28px; }
.rejilla { display: grid; gap: 16px; }
.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); padding: 20px; box-shadow: var(--sombra); }
.tarjeta h3 { font-size: 18px; margin-bottom: 6px; }
.tarjeta p:last-child { margin-bottom: 0; }
.tarjeta p { color: var(--texto-2); }
.motivos-h { text-align: center; margin: 40px 0 16px; font-size: 20px; }
.motivos { list-style: none; padding: 0; margin: 0 auto; display: grid; gap: 10px; max-width: 760px; }
.motivos li { display: flex; gap: 10px; align-items: center; }
.motivos .icono, .lista-tic .icono { color: var(--bien); stroke-width: 2.6; }
.faq details { border-bottom: 1px solid var(--borde); }
.faq summary { cursor: pointer; padding: 18px 32px 18px 0; font-weight: 600; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 14px; font-size: 24px; font-weight: 400; color: var(--texto-2); }
.faq details[open] summary::after { content: '−'; }
.faq details p { color: var(--texto-2); padding-bottom: 12px; }
.cierre { text-align: center; }
.cierre .buscador { margin-top: 20px; }
.bloque-precio .precio-pasos { display: grid; gap: 12px; }
.precio-paso { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); padding: 18px 20px; }
.precio-cuando { display: block; font-weight: 700; margin-bottom: 4px; }
.precio-importe { font-size: 28px; font-weight: 700; display: block; margin-bottom: 4px; }
.precio-paso p { margin: 0; color: var(--texto-2); }
[data-con-oferta]:empty, [data-oferta-campo]:empty { visibility: hidden; }
/* ---------- pie ---------- */
.pie { background: var(--tinta); color: #C9D1E3; padding: 48px 0 32px; font-size: 14px; }
.pie a, .pie .enlace-boton { color: #fff; text-decoration: none; }
.pie h2 { color: #fff; font-size: 15px; text-align: start; margin-bottom: 10px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pie-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px; margin-bottom: 28px; }
.pie-aviso { border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; color: #A9B3C9; }
/* ---------- interiores ---------- */
.cabeza-pagina { background: var(--fondo-2); padding: 32px 0 24px; border-bottom: 1px solid var(--borde); }
.cabeza-pagina h1 { margin: 0; }
.cabeza-pagina .entrada { color: var(--texto-2); margin: 10px 0 0; }
.documento { padding: 28px 0 56px; }
.documento h2 { font-size: 20px; margin: 28px 0 12px; }
.documento .tarjeta { margin-bottom: 16px; }
.texto-legal h2 { font-size: 19px; margin-top: 28px; }
.texto-legal p, .texto-legal li { color: #2B3550; }
.texto-legal table { width: 100%; border-collapse: collapse; font-size: 14px; }
.texto-legal th, .texto-legal td { text-align: start; padding: 8px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.volver { margin-bottom: 16px; } .volver a { text-decoration: none; font-weight: 600; }
.datos { margin: 0; display: grid; gap: 10px; }
.datos div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--borde); padding-bottom: 8px; }
.datos div:last-child { border-bottom: 0; padding-bottom: 0; }
.datos dt { color: var(--texto-2); } .datos dd { margin: 0; font-weight: 600; text-align: end; overflow-wrap: anywhere; }
/* Listas de bloques en el informe (retiradas, cuentas, direcciones, páginas…): cada elemento en su tarjeta, etiqueta encima del valor. */
.lista-datos { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; text-align: start; }
.lista-datos > li { border: 1px solid var(--borde); border-radius: 12px; padding: 12px; }
.lista-datos .datos div { flex-direction: column; gap: 2px; }
.lista-datos .datos dd { text-align: start; font-weight: 400; }
.acciones-dos { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.retencion { border-top: 1px solid var(--borde); margin-top: 16px; padding-top: 16px; }
.fila-creditos { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fila-creditos strong { font-size: 24px; }
.lista-busquedas, .lista-peticiones { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lista-busquedas a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--borde); border-radius: 12px; text-decoration: none; color: var(--tinta); background: #fff; }
.lista-busquedas .icono { color: var(--principal); }
.lista-busquedas .dato { flex: 1; min-width: 0; } .lista-busquedas .dato strong { display: block; overflow-wrap: anywhere; } .lista-busquedas .dato span { font-size: 13px; color: var(--texto-2); }
.estado { font-size: 13px; font-weight: 600; padding: 4px 8px; border-radius: 999px; background: var(--fondo-2); color: var(--texto-2); white-space: nowrap; }
.estado.listo, .estado.aceptada { background: var(--bien-suave); color: #0F6A31; }
.estado.rechazada, .estado.caducada, .estado.fallo { background: #FDECEA; color: var(--error); }
.nueva-busqueda .pestanas { margin-bottom: 16px; }
.panel-busqueda .fila-buscador { flex-direction: column; }
.enlaces-cuenta { margin-top: 20px; }
.lista-peticiones li { border: 1px solid var(--borde); border-radius: 12px; padding: 14px 16px; background: #fff; }
.lista-peticiones .cab-peticion { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.sms-vista { margin: 6px 0 16px; }
.sms-h { font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.sms-burbuja { background: var(--fondo-2); border-radius: 16px 16px 16px 4px; padding: 12px 14px; font-size: 15px; margin: 0; overflow-wrap: anywhere; }
#form-localizar .buscador-tel { margin-bottom: 14px; }
/* Informe */
.informe-entrada { font-size: 22px; font-weight: 700; margin-bottom: 4px; overflow-wrap: anywhere; }
.informe-acciones { margin: 12px 0 20px; }
.seccion-informe { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); padding: 18px 20px; margin-bottom: 14px; }
.seccion-informe h2 { font-size: 18px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.seccion-informe .estado-texto { color: var(--texto-2); margin: 0; }
.seccion-informe.bloqueado h2::after { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,') center/contain no-repeat; color: var(--texto-2); }
.seccion-informe ul { margin: 0; padding-left: 20px; }
.seccion-informe li { margin-bottom: 6px; overflow-wrap: anywhere; }
/* ---------- recorrido, pago y ofertas (una pantalla por paso) ---------- */
.flujo-pagina { background: var(--fondo-2); }
.flujo-pagina .cabecera { --cab-h: 52px; height: 52px; }
.flujo-pagina .cabecera-dentro { justify-content: center; }
.flujo-pagina .cabecera-der { position: absolute; right: 16px; }
.flujo { min-height: calc(100vh - 52px); min-height: calc(100svh - 52px); padding: 16px; display: flex; flex-direction: column; align-items: center; }
.paso { width: 100%; max-width: 480px; margin: auto 0; }
.tarjeta-pago, .tarjeta-flujo { width: 100%; max-width: 480px; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra); padding: 22px 20px; text-align: center; }
.tarjeta-pago.centro { margin: auto 0; display: grid; gap: 12px; justify-items: center; }
.insignia { display: inline-flex; align-items: center; gap: 6px; background: var(--bien-suave); color: #0F6A31; border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 600; margin: 0 0 10px; }
.insignia .icono { width: 16px; height: 16px; }
.entrada-grande { color: var(--principal); font-weight: 700; font-size: 22px; margin: 0 0 6px; overflow-wrap: anywhere; }
.mensaje-rota { color: var(--texto-2); min-height: 1.5em; margin-bottom: 14px; }
.filas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; text-align: start; }
.filas li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--borde); border-radius: 10px; background: #fff; font-size: 15px; }
.filas li .valor { font-weight: 600; text-align: end; overflow-wrap: anywhere; }
.filas li .valor.candado { color: var(--texto-2); display: inline-flex; gap: 4px; align-items: center; font-weight: 500; font-size: 14px; }
.filas li .valor.candado .icono { width: 15px; height: 15px; }
.filas li .marca-tic { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--borde); flex: none; display: grid; place-items: center; }
.filas li.hecho .marca-tic { background: var(--bien); border-color: var(--bien); color: #fff; }
.filas li.hecho .marca-tic .icono { width: 14px; height: 14px; stroke-width: 3; }
.filas li.ahora .marca-tic { border-top-color: var(--principal); animation: gira .8s linear infinite; }
.puntos { display: inline-flex; gap: 5px; } .puntos i { width: 6px; height: 6px; border-radius: 50%; background: var(--principal); opacity: .3; animation: punto 1.2s infinite; } .puntos i:nth-child(2) { animation-delay: .2s; } .puntos i:nth-child(3) { animation-delay: .4s; }
@keyframes punto { 50% { opacity: 1; } }
@keyframes gira { to { transform: rotate(360deg); } }
.girando { width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--principal-suave); border-top-color: var(--principal); animation: gira .9s linear infinite; }
.anim-mapa { position: relative; }
.fondo-mapa { position: fixed; inset: 52px 0 0; z-index: 0; opacity: .5; pointer-events: none; }
.fondo-mapa svg { width: 100%; height: 100%; }
.flujo > .paso { position: relative; z-index: 1; }
.barra { height: 12px; border-radius: 999px; background: var(--principal-suave); overflow: hidden; }
.barra i { display: block; height: 100%; width: 0; background: var(--principal); border-radius: inherit; transition: width .25s linear; }
.barra-cab { display: flex; justify-content: space-between; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.quien { display: flex; align-items: center; gap: 14px; text-align: start; margin: 14px 0; }
.foto-borrosa { position: relative; width: 64px; height: 64px; flex: none; border-radius: 50%; overflow: visible; }
.foto-borrosa .dentro { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.foto-borrosa .dentro > * { width: 100%; height: 100%; object-fit: cover; filter: blur(7px); transform: scale(1.25); display: block; }
.foto-borrosa .candado-insignia, .mapa-borroso .candado-insignia { position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; background: var(--principal); color: #fff; display: grid; place-items: center; border: 2px solid #fff; }
.candado-insignia .icono { width: 14px; height: 14px; stroke-width: 2.4; }
.nombre-borroso { display: block; width: 160px; height: 26px; max-width: 100%; }
.mapa-borroso { position: relative; height: 150px; border-radius: 12px; overflow: hidden; margin: 12px 0; }
.mapa-borroso svg { width: 100%; height: 100%; filter: blur(5px); transform: scale(1.1); }
.mapa-borroso .candado-insignia { right: 50%; bottom: 50%; transform: translate(50%, 50%); width: 44px; height: 44px; }
.mapa-borroso .candado-insignia .icono { width: 22px; height: 22px; }
.foto-escaneo { position: relative; width: 100%; max-width: 260px; aspect-ratio: 1; margin: 0 auto 14px; border-radius: 14px; overflow: hidden; background: var(--fondo-2); }
.foto-escaneo img { width: 100%; height: 100%; object-fit: cover; filter: blur(10px); transform: scale(1.1); }
.foto-escaneo .linea { position: absolute; left: 0; right: 0; height: 3px; background: var(--principal); box-shadow: 0 0 12px var(--principal); top: 0; animation: escanea 2.4s ease-in-out infinite; }
@keyframes escanea { 50% { top: calc(100% - 3px); } }
.dialogo-fondo { position: fixed; inset: 0; z-index: 40; background: rgba(14,26,51,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dialogo { width: 100%; max-width: 420px; background: #fff; border-radius: var(--radio-tarjeta); padding: 24px 20px 20px; text-align: center; }
.dialogo .aviso-icono { width: 48px; height: 48px; border-radius: 50%; background: var(--aviso-fondo); color: #B7791F; display: grid; place-items: center; margin: 0 auto 12px; }
.dialogo .aviso-icono .icono { width: 26px; height: 26px; }
.dialogo p { color: var(--texto-2); }
.dialogo .nota { display: flex; gap: 10px; text-align: start; align-items: flex-start; border: 1px solid var(--borde); border-radius: 12px; padding: 12px; color: var(--tinta); font-weight: 600; font-size: 14px; }
.dialogo .nota .icono { color: var(--bien); }
.dialogo .boton { width: 100%; margin-top: 6px; }
.aviso-amarillo { background: var(--aviso-fondo); border: 1px solid #F3DE9B; color: var(--aviso-texto); border-radius: 12px; padding: 12px 14px; text-align: start; font-size: 14px; margin: 14px 0; }
.aviso-amarillo strong { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.aviso-amarillo .icono { width: 16px; height: 16px; }
.muro form { text-align: start; margin-top: 8px; }
.muro .campo input { text-align: start; }
.muro .boton { width: 100%; }
.fecha-informe { font-size: 13px; color: var(--texto-2); margin: 0; }
.vehiculo-ficha { margin: 12px 0; }
/* Pago · paso A (precio): todo lo de la primera pantalla cabe sin bajar en cualquier móvil (lo mide herramientas/auditar-tamanos.mjs) */
.pago-pagina .flujo { padding: 10px 12px 24px; }
.pantalla-pago { width: 100%; max-width: 480px; }
.pago-primera { min-height: calc(100vh - 52px - 10px - var(--ck-h, 0px)); min-height: calc(100svh - 52px - 10px - var(--ck-h, 0px)); display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.caduca { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 14px; background: #fff; border: 1px solid var(--borde); border-radius: 999px; padding: 6px 14px; align-self: center; }
.caduca strong { color: var(--principal); font-variant-numeric: tabular-nums; }
.caduca .icono { width: 18px; height: 18px; color: var(--principal); }
.tarjeta-pago h1 { font-size: clamp(20px, 3.3svh, 24px); margin-bottom: 4px; overflow-wrap: anywhere; }
.tarjeta-pago h1 .acento { color: var(--principal); white-space: nowrap; }
.pago-fecha { font-size: 13px; margin-bottom: 8px; }
.pago-quien .quien { margin: 8px 0; }
.pago-quien .detalle { font-size: 14px; color: var(--texto-2); }
.pago-quien .detalle p { margin: 2px 0 0; }
.resumen-precio { border: 1px solid var(--borde); border-radius: 12px; margin: 10px 0 14px; text-align: start; }
.fila-precio { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; font-size: 15px; }
.fila-precio + .fila-precio { border-top: 1px solid var(--borde); }
.fila-precio.total { font-weight: 700; font-size: 17px; }
.pago-debajo { margin-top: 28px; display: grid; gap: 20px; }
.pago-debajo h2 { font-size: 20px; text-align: center; margin: 0 0 10px; }
.lista-tic { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-tic li { display: flex; gap: 10px; align-items: center; }
.lista-tic li::before { content: ''; width: 18px; height: 18px; flex: none; background: var(--bien); -webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,') center/contain no-repeat; }
.garantias { display: grid; gap: 12px; text-align: center; }
.garantias h3 { font-size: 16px; margin-bottom: 2px; } .garantias p { color: var(--texto-2); margin: 0; font-size: 14px; }
#paso-pagar .tarjeta-pago { margin-top: 8px; }
#paso-pagar form { text-align: start; }
#pago-stripe:empty { display: none; }
#pago-stripe { margin-bottom: 12px; }
.legal-pago { font-size: 12.5px; line-height: 1.5; color: var(--texto-2); text-align: start; margin: 12px 0; }
.sellos { display: grid; gap: 10px; justify-items: center; border-top: 1px solid var(--borde); padding-top: 14px; }
.sello-garantia { display: flex; gap: 10px; align-items: center; text-align: start; font-size: 13px; }
.sello-garantia svg { width: 36px; height: 36px; flex: none; }
.sello-garantia strong { display: block; } .sello-garantia span { color: var(--texto-2); }
.logos-pago { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.logos-pago li { width: 40px; height: 26px; border: 1px solid var(--borde); border-radius: 4px; display: grid; place-items: center; background: #fff; }
.logos-pago svg { width: 26px; height: 18px; }
.sello-stripe { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-2); margin: 0; }
.sello-stripe svg { width: 16px; height: 16px; } .sello-stripe .icono { width: 15px; height: 15px; }
/* Pantallas bajas: se aprieta todo para que el botón quede a la vista (320×480, 375×553, apaisado…) */
@media (max-height: 640px) {
.caduca { padding: 4px 12px; font-size: 13px; }
.tarjeta-pago { padding: 14px 14px; }
.insignia { margin-bottom: 6px; padding: 2px 8px; font-size: 12px; }
.pago-fecha { display: none; }
.foto-borrosa { width: 52px; height: 52px; }
.pago-quien .quien { margin: 4px 0; }
.resumen-precio { margin: 8px 0 10px; }
.fila-precio { padding: 7px 12px; font-size: 14px; }
.fila-precio.total { font-size: 16px; }
.pago-primera { gap: 6px; }
}
@media (max-height: 520px) {
.tarjeta-pago h1 { font-size: 18px; }
.pago-quien .detalle { font-size: 13px; }
.insignia { display: none; }
.pago-quien .detalle p:nth-child(n+3) { display: none; }
}
/* Ofertas */
.pantalla-oferta { width: 100%; max-width: 480px; margin: auto 0; }
.oferta-caja { text-align: start; }
.oferta-caja h1 { text-align: center; }
.oferta-precio { font-size: 26px; font-weight: 700; text-align: center; margin: 8px 0 12px; }
.oferta-caja .no-gracias { display: block; margin: 14px auto 0; font-size: 16px; }
/* Destinatario del SMS */
.ubic-icono { width: 56px; height: 56px; border-radius: 50%; background: var(--principal-suave); color: var(--principal); display: grid; place-items: center; margin: 0 auto 12px; }
.ubic-icono .icono { width: 28px; height: 28px; }
.ubic-lista { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; text-align: start; }
.ubic-lista li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.ubic-lista .icono { color: var(--principal); margin-top: 2px; }
.dos-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.dos-botones .boton { min-width: 140px; font-size: 17px; padding: 0 12px; }
.ubic-baja { margin: 16px 0 8px; font-size: 14px; }
.tic-grande { width: 64px; height: 64px; border-radius: 50%; background: var(--bien); color: #fff; display: grid; place-items: center; }
.tic-grande .icono { width: 34px; height: 34px; stroke-width: 3; }
/* Ilustración del hero (solo ordenador) */
.ilustracion { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1 / 1; margin-left: auto; }
.ilus-fondo { position: absolute; inset: 8% 4% 0 10%; border-radius: 48% 48% 24px 24px; background: linear-gradient(180deg, var(--principal-suave), #F7F9FE); }
.ilus-movil { position: absolute; left: 30%; top: 4%; height: 92%; width: auto; filter: drop-shadow(0 20px 30px rgba(14,26,51,.18)); }
.tarjeta-flotante { position: absolute; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--borde); border-radius: 14px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(14,26,51,.10); font-weight: 600; font-size: 15px; min-width: 190px; }
.tarjeta-flotante .icono-flotante { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--principal-suave); color: var(--principal); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tarjeta-flotante .tic { width: 20px; height: 20px; margin-left: auto; color: var(--bien); fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tarjeta-flotante.t1 { right: 0; top: 14%; } .tarjeta-flotante.t2 { left: 0; top: 46%; } .tarjeta-flotante.t3 { right: 2%; bottom: 10%; }
/* ---------- ordenador ---------- */
@media (min-width: 700px) {
.rejilla.dos { grid-template-columns: 1fr 1fr; }
.rejilla.tres { grid-template-columns: repeat(2, 1fr); }
.rejilla.cuatro { grid-template-columns: repeat(2, 1fr); }
.motivos { grid-template-columns: repeat(2, 1fr); }
.pie-columnas { grid-template-columns: repeat(4, 1fr); }
.bloque-precio .precio-pasos { grid-template-columns: repeat(3, 1fr); }
.garantias { grid-template-columns: repeat(3, 1fr); }
.acciones-dos { flex-direction: row; }
}
@media (min-width: 900px) {
:root { --cab-h: 68px; }
h1 { font-size: 40px; } h2 { font-size: 32px; }
.contenedor { padding: 0 32px; }
.logo { font-size: 22px; } .logo-icono { width: 34px; height: 34px; }
.hero-rejilla { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; }
.hero-texto { margin: 0; max-width: 620px; }
.hero-ilus { display: block; }
.hero h1 { font-size: clamp(36px, min(4vw, 6.4svh), 52px); }
.hero-sub { font-size: clamp(17px, 2.3svh, 20px); max-width: 34em; }
.fila-buscador { flex-direction: row; gap: 0; border: 1.5px solid var(--borde); border-radius: 12px; padding: 6px; background: #fff; box-shadow: var(--sombra); }
.fila-buscador:focus-within { border-color: var(--principal); box-shadow: 0 0 0 3px var(--principal-suave); }
.fila-buscador .campo-tel, .fila-buscador .campo-vin { flex: 1; border: 0; box-shadow: none !important; min-height: 56px; }
.fila-buscador .boton { padding: 0 48px; flex: none; }
.buscador-foto { grid-template-columns: auto 1fr; align-items: center; column-gap: 20px; }
.buscador-foto .casilla { grid-column: 1 / -1; }
.buscador-foto .boton { padding: 0 48px; }
.buscador-foto .ayuda-campo { text-align: start; }
.buscador-foto .error { grid-column: 1 / -1; }
.beneficios li { font-size: clamp(15px, 2svh, 17px); }
.bloque { padding: 88px 0; }
.bloque h2 { margin-bottom: 40px; }
.rejilla.tres { grid-template-columns: repeat(3, 1fr); }
.rejilla.cuatro { grid-template-columns: repeat(4, 1fr); }
.motivos { grid-template-columns: repeat(3, 1fr); max-width: none; }
.cierre .buscador { max-width: 720px; margin-left: auto; margin-right: auto; }
.flujo { padding: 32px 16px; }
.flujo-pagina .cabecera { height: 60px; }
.flujo { min-height: calc(100svh - 60px); }
.fondo-mapa { inset: 60px 0 0; }
.pago-primera { min-height: calc(100svh - 60px - 32px - var(--ck-h, 0px)); }
.cabeza-pagina { padding: 48px 0 32px; }
.panel-busqueda .fila-buscador { flex-direction: row; }
}
@media (min-width: 900px) and (max-height: 700px) {
.ilustracion { max-width: min(520px, 78svh); }
}
/* ---------- :hover solo con ratón ---------- */
@media (hover: hover) and (pointer: fine) {
.boton-principal:hover { background: var(--principal-hover); }
.boton-secundario:hover, .boton-igual:hover { background: var(--fondo-2); }
.boton-peligro:hover { background: #FDECEA; }
.entrar:hover { border-color: var(--texto-2); }
.pestanas a:hover { color: var(--tinta); background: var(--fondo-2); }
.pestanas a[aria-current]:hover { color: var(--principal); background: var(--principal-suave); }
.idiomas summary:hover { background: var(--fondo-2); }
.idiomas a:hover, .hoja-lista button:hover { background: var(--fondo-2); }
.lista-busquedas a:hover, .enlace-tarjeta:hover { border-color: var(--principal); }
.pie a:hover { text-decoration: underline; }
}
.enlace-tarjeta { text-decoration: none; color: var(--tinta); }
/* Aviso de cookies (medicion.js, Etapa C): mientras no está montado se reserva el alto estimado de su barra en móvil; al montarse pone el real en --ck-h. */
@media (max-width: 799px) { html[data-lkv-ck="pendiente"] { --ck-h: 58px; } }
/* ---------- pantallas bajas: la primera pantalla tiene que caber (NORMAS_DURAS §3) ----------
Móvil en vertical: sin la frase bajo el titular por debajo de 700 px de alto; sin pestañas y con cabecera más baja por debajo de 560 px.
Teléfono apaisado (alto ≤ 500 px): titular y buscador a la izquierda, beneficios a la derecha; pago en dos columnas. */
@media (max-width: 899px) and (max-height: 700px) and (orientation: portrait) { .hero-sub { display: none; } .hero h1 { margin-bottom: 14px; } }
@media (max-width: 899px) and (max-height: 600px) and (orientation: portrait), (max-width: 559px) and (max-height: 600px) {
:root { --cab-h: 48px; } .logo { font-size: 18px; } .logo-icono { width: 26px; height: 26px; }
.landing .pestanas { display: none; }
.hero h1 { font-size: 23px; margin-bottom: 10px; }
.beneficios { margin-top: 10px; gap: 4px; } .beneficios li { font-size: 13.5px; line-height: 1.35; }
.fila-buscador { gap: 8px; } .buscador-foto { gap: 8px; } .buscador-foto .ayuda-campo { display: none; } .casilla { font-size: 14px; }
}
@media (orientation: landscape) and (max-height: 500px) and (min-width: 500px) {
:root { --cab-h: 48px; }
.cabecera { height: 48px; } .logo { font-size: 18px; } .logo-icono { width: 26px; height: 26px; }
.hero-rejilla { display: flex; padding-top: 6px; padding-bottom: calc(6px + max(var(--ck-h, 0px), 58px)); } /* reserva fija para la barra del aviso */
.hero-ilus, .landing .pestanas, .hero-sub, .buscador-foto .ayuda-campo { display: none; }
.hero-texto { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 28px; align-items: center; }
.hero h1 { grid-column: 1; font-size: clamp(20px, 6svh, 28px); margin-bottom: 8px; }
.hero form.buscador { grid-column: 1; }
.hero .beneficios { grid-column: 2; grid-row: 1 / span 2; margin: 0; gap: 6px; }
.beneficios li { font-size: 14px; line-height: 1.35; }
.fila-buscador { flex-direction: row; gap: 8px; border: 0; padding: 0; box-shadow: none; background: none; }
.fila-buscador .campo-tel, .fila-buscador .campo-vin { flex: 1; border: 1.5px solid var(--borde); }
.hero form.buscador { min-width: 0; }
.fila-buscador .campo-tel, .fila-buscador .campo-vin { min-width: 0; }
.fila-buscador .boton { padding: 0 14px; flex: 0 1 auto; min-width: 0; font-size: 16px; }
.fila-buscador .boton .icono { display: none; }
.buscador-foto { gap: 8px; }
.flujo-pagina .cabecera { height: 44px; }
.flujo { min-height: calc(100svh - 44px); padding-top: 6px; }
.pago-pagina .flujo { padding: 6px 12px 16px; }
.pantalla-pago { max-width: 780px; }
.pago-primera { min-height: calc(100svh - 44px - 6px - var(--ck-h, 0px)); gap: 6px; }
.tarjeta-pago { padding: 12px 16px; }
#paso-precio .tarjeta-pago, #paso-pagar .tarjeta-pago { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; align-items: center; }
#paso-precio .pago-izq { text-align: start; }
#paso-precio .insignia, .pago-fecha { display: none; }
.tarjeta-pago h1 { font-size: 19px; }
.resumen-precio { margin: 0 0 10px; } .fila-precio { padding: 7px 12px; font-size: 14px; }
#paso-pagar .tarjeta-pago { margin-top: 0; }
#paso-pagar .legal-pago, #paso-pagar .sellos { grid-column: 1 / -1; }
#paso-pagar .campo { margin-bottom: 8px; } #paso-pagar .campo > span { font-size: 13px; margin-bottom: 4px; }
.caduca { padding: 3px 12px; font-size: 13px; }
}
@media (max-height: 340px) {
.hero h1 { font-size: 19px; } .beneficios li { font-size: 13px; }
.caduca { display: none; }
.tarjeta-pago h1 { font-size: 17px; }
.foto-borrosa { width: 44px; height: 44px; }
}
/* Tailandés y coreano (Etapa D): Inter no tiene esos alfabetos. Letra del sistema de cada plataforma, con los números y el latín en Inter.
iOS/macOS: Thonburi y Apple SD Gothic Neo · Windows: Leelawadee UI y Malgun Gothic · Android/Linux: Noto Sans Thai y Noto Sans KR/CJK KR. */
html:lang(th) { --letra: 'Inter', 'Thonburi', 'Leelawadee UI', 'Noto Sans Thai', 'Noto Sans Thai UI', Tahoma, system-ui, sans-serif; }
html:lang(th) body { line-height: 1.6; }
html:lang(ko) { --letra: 'Inter', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Noto Sans CJK KR', system-ui, sans-serif; word-break: keep-all; overflow-wrap: anywhere; }