/* ============================================================================
   Vía Libre — hoja de estilo única.

   Concepto: señalética urbana. Asfalto, pintura vial y ámbar de obras.
   NO es una web de aseguradora: nada de azul corporativo, escudos ni paraguas.

   Disciplina de color (si se rompe, se pierde la identidad):
     · verde  -> SÓLO acción y confirmación. Es el "vía libre".
     · ámbar  -> SÓLO la fecha límite y las advertencias. Uno por pantalla.
     · azul   -> SÓLO cuando se habla literalmente de la DGT.
     · rojo   -> SÓLO errores y "no asegurable".
   El acento nunca pasa del 5% de la superficie: manda por escasez.
   ========================================================================= */

:root {
  /* ── Superficies ── */
  --asfalto:      #22262B;
  --asfalto-alto: #2E333A;
  --hormigon:     #ECEEF0;   /* gris FRÍO, nunca crema */
  --hormigon-2:   #E981EC;   /* (sin uso: reservado) */
  --pintura:      #FFFFFF;

  /* ── Tinta (contrastes verificados sobre --pintura) ── */
  --tinta:        #14171A;   /* 15.8:1 */
  --tinta-media:  #4E565F;   /* 8.1:1  — texto secundario */
  --tinta-suave:  #6E767F;   /* 4.9:1  — mínimo legal AA en cuerpo */
  --sobre-oscuro:       #F4F6F8;
  --sobre-oscuro-media: #C2C9D0;  /* 9.4:1 sobre asfalto */

  /* ── Acentos ── */
  --verde:        #00A85A;
  --verde-hover:  #00914D;
  --verde-tinta:  #04220F;
  --verde-oscuro: #046B3C;
  --ambar:        #FFB200;
  --ambar-tinta:  #2B1D00;
  --ambar-oscuro: #7A5200;   /* ámbar legible sobre claro */
  --azul-dgt:     #0B5FA5;
  --rojo:         #C31B32;
  --rojo-fondo:   #FDECEF;

  --borde:        #D9DDE2;
  --borde-fuerte: #B5BCC4;

  /* ── Radios: uno por jerarquía, no uno para todo ── */
  --r-chip:  4px;
  --r-campo: 10px;
  --r-caja:  18px;

  /* ── Escala de espacio. TODO el espaciado sale de aquí. ── */
  --e1: .5rem;
  --e2: .875rem;
  --e3: 1.25rem;
  --e4: 2rem;
  --e5: 3rem;
  --e6: clamp(4rem, 9vw, 6.5rem);   /* separación entre secciones */

  --ancho: 1120px;
  --lectura: 62ch;      /* cuerpo */
  --lectura-corta: 46ch;/* entradillas */
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--hormigon);
  color: var(--tinta);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* ── Tipografía de señal ────────────────────────────────────────────────
   Una familia, dos anchos. Los titulares se leen a tres metros, como un
   panel vial; el cuerpo es de ancho normal para no cansar.               */
h1, h2, h3, h4 {
  font-family: 'Archivo', system-ui, sans-serif;
  font-stretch: 112%;
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 6.4vw, 4rem); }
h2 { font-size: clamp(1.75rem, 4.2vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 2.2vw, 1.3rem); font-stretch: 105%; letter-spacing: -.012em; }
h4 { font-size: 1rem; font-stretch: 105%; }

p { margin: 0 0 var(--e3); max-width: var(--lectura); }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

.plomo {
  font-size: clamp(1.05rem, 1.9vw, 1.2rem);
  line-height: 1.55;
  color: var(--tinta-media);
  max-width: var(--lectura-corta);
}
.oscuro .plomo { color: var(--sobre-oscuro-media); }

/* ── Estructura y ritmo vertical ────────────────────────────────────────
   Toda sección respira igual: --e6 arriba y abajo. Dentro, --e4 entre
   bloques. Sin excepciones ad hoc.                                       */
.env { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.5rem); }
.bloque { padding-block: var(--e6); }
.bloque > .env > * + * { margin-top: var(--e4); }
.bloque > .env > h2 + .plomo { margin-top: var(--e3); }

.oscuro { background: var(--asfalto); color: var(--sobre-oscuro); }
.oscuro h1, .oscuro h2, .oscuro h3 { color: var(--pintura); }

/* Línea de carril: divisor que dice "sigues avanzando". Informa, no adorna. */
.carril { height: 12px; background-image: repeating-linear-gradient(90deg, var(--pintura) 0 44px, transparent 44px 80px); }
.carril.claro { background-image: repeating-linear-gradient(90deg, var(--borde-fuerte) 0 44px, transparent 44px 80px); }

/* ── Barra superior ─────────────────────────────────────────────────────── */
.barra { position: sticky; top: 0; z-index: 50; background: rgba(236,238,240,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borde); }
.barra .env { display: flex; align-items: center; gap: var(--e3); height: 64px; }
.marca { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-stretch: 112%; font-size: 1.1rem; letter-spacing: -.02em; text-decoration: none; }
.marca-glifo { width: 30px; height: 30px; border-radius: var(--r-chip); background: var(--asfalto); position: relative; flex: none; }
.marca-glifo::before, .marca-glifo::after { content: ''; position: absolute; left: 6px; right: 6px; height: 3px; border-radius: 1px; }
.marca-glifo::before { top: 11px; background: var(--pintura); }
.marca-glifo::after  { top: 17px; background: var(--verde); }
.barra nav { margin-left: auto; display: flex; align-items: center; gap: var(--e4); }
.barra nav a.enlace { text-decoration: none; font-size: .95rem; color: var(--tinta-media); font-weight: 500; }
.barra nav a.enlace:hover { color: var(--tinta); }
@media (max-width: 760px) { .barra nav a.enlace { display: none; } .barra nav { gap: var(--e2); } }

/* ── Botones ────────────────────────────────────────────────────────────
   UNA sola acción principal en toda la web: "Contratar ahora". El mismo
   nombre en la barra, en el héroe, en precios y en el cierre.            */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 700; font-stretch: 105%;
  padding: 1rem 1.9rem; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn-principal { background: var(--verde); color: var(--verde-tinta); }
.btn-principal:hover { background: var(--verde-hover); }
.btn-linea { background: transparent; border-color: var(--asfalto); color: var(--asfalto); }
.btn-linea:hover { background: var(--asfalto); color: var(--pintura); }
.oscuro .btn-linea { border-color: var(--sobre-oscuro-media); color: var(--sobre-oscuro); }
.oscuro .btn-linea:hover { background: var(--pintura); color: var(--asfalto); }
.btn-g { padding: 1.15rem 2.2rem; font-size: 1.06rem; }
.btn-s { padding: .6rem 1.25rem; font-size: .95rem; }
.btn-ancho { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Enlace de texto, para la acción secundaria. No compite con el botón. */
.enlace-sec { font-weight: 600; font-size: .97rem; color: var(--tinta-media); text-decoration: underline; text-underline-offset: 3px; }
.oscuro .enlace-sec { color: var(--sobre-oscuro-media); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--azul-dgt); outline-offset: 2px; border-radius: var(--r-chip);
}
.oscuro :where(a, button, input, select, summary):focus-visible { outline-color: var(--ambar); }

/* ── Avisos ─────────────────────────────────────────────────────────────── */
.chip-aviso { display: inline-flex; align-items: center; background: var(--ambar); color: var(--ambar-tinta); font-weight: 700; font-size: .88rem; padding: .35rem .85rem; border-radius: var(--r-chip); }
.nota-ambar { border-left: 3px solid var(--ambar); background: #FFF7E6; color: var(--ambar-oscuro); padding: var(--e2) var(--e3); border-radius: var(--r-chip); font-size: .93rem; }
.nota-ambar p { color: inherit; max-width: none; }
.stop { background: var(--rojo-fondo); border: 2px solid var(--rojo); border-radius: var(--r-campo); padding: var(--e3); }
.stop h3 { color: var(--rojo); font-size: 1.05rem; margin-bottom: var(--e1); }
.stop p { font-size: .94rem; color: #7A1220; max-width: none; }

/* ── Héroe ──────────────────────────────────────────────────────────────── */
.heroe { background: var(--asfalto); color: var(--sobre-oscuro); padding-block: var(--e5) var(--e6); }
.heroe-rejilla { display: grid; gap: var(--e5); align-items: start; }
@media (min-width: 980px) { .heroe-rejilla { grid-template-columns: 1fr 430px; gap: var(--e6); } }
.heroe-texto > * + * { margin-top: var(--e3); }
.heroe-texto .acciones { margin-top: var(--e4); display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }

/* ── Clasificador (el héroe interactivo) ────────────────────────────────── */
.clasificador { background: var(--pintura); color: var(--tinta); border-radius: var(--r-caja); padding: clamp(1.4rem, 3vw, 1.9rem); box-shadow: 0 20px 44px rgba(0,0,0,.3); }
.clasificador > h2 { font-size: 1.2rem; font-stretch: 105%; }
.clasificador > .ayuda { font-size: .92rem; color: var(--tinta-suave); margin-top: var(--e1); margin-bottom: var(--e4); max-width: none; }

.campo { margin-bottom: var(--e3); }
.campo:last-child { margin-bottom: 0; }
.campo > .etiqueta, label.etiqueta { display: block; font-weight: 700; font-size: .95rem; margin-bottom: var(--e1); }
.etiqueta .pista { font-weight: 400; color: var(--tinta-suave); }

.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.opciones.una { grid-template-columns: 1fr; }
.opcion { position: relative; display: block; border: 2px solid var(--borde); border-radius: var(--r-campo); padding: .8rem .9rem; cursor: pointer; background: var(--pintura); transition: border-color .12s ease, background-color .12s ease; }
.opcion input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcion .titulo { display: block; font-weight: 700; font-size: .97rem; }
.opcion .detalle { display: block; font-size: .84rem; color: var(--tinta-suave); margin-top: .1rem; }
.opcion:hover { border-color: var(--borde-fuerte); }
.opcion:has(input:checked) { border-color: var(--asfalto); background: #F3F5F7; }
.opcion:has(input:focus-visible) { outline: 3px solid var(--azul-dgt); outline-offset: 2px; }

.veredicto { border-top: 2px dashed var(--borde); padding-top: var(--e3); margin-top: var(--e4); }
.veredicto .clase { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: var(--e1); }
.etiqueta-clase { font-weight: 800; font-stretch: 112%; font-size: 1rem; padding: .18rem .6rem; border-radius: var(--r-chip); background: var(--verde); color: var(--verde-tinta); }
.etiqueta-clase.vm { background: var(--azul-dgt); color: #fff; }
.veredicto .nota { font-size: .9rem; color: var(--tinta-media); margin: var(--e1) 0 var(--e3); max-width: none; }
.precio { display: flex; align-items: baseline; gap: .5rem; font-size: clamp(2.3rem, 5.5vw, 3rem); font-weight: 800; font-stretch: 112%; letter-spacing: -.03em; line-height: 1; margin-bottom: var(--e1); }
.precio .u { font-size: .34em; font-weight: 700; color: var(--tinta-suave); letter-spacing: 0; }
.precio-pie { font-size: .88rem; color: var(--tinta-suave); margin-bottom: var(--e3); max-width: none; }

/* ── Pasos numerados (hay secuencia real, por eso van numerados) ─────────── */
.pasos { counter-reset: paso; display: grid; gap: var(--e4); }
@media (min-width: 780px) { .pasos { grid-template-columns: repeat(3, 1fr); gap: var(--e5); } }
.paso { counter-increment: paso; border-top: 3px solid currentColor; padding-top: var(--e2); }
.paso::before { content: counter(paso); display: block; font-weight: 800; font-stretch: 112%; font-size: 1.6rem; line-height: 1; margin-bottom: var(--e1); }
.paso h3 { margin-bottom: var(--e1); }
.paso p { font-size: .95rem; color: var(--tinta-media); max-width: none; }
.oscuro .paso p { color: var(--sobre-oscuro-media); }

/* ── Ficha de precio ────────────────────────────────────────────────────── */
.ficha { background: var(--pintura); border: 2px solid var(--borde); border-radius: var(--r-caja); padding: clamp(1.5rem, 3.5vw, 2.4rem); }
.ficha-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e3); padding-bottom: var(--e3); border-bottom: 1px solid var(--borde); margin-bottom: var(--e3); }
.ficha-cab .imp { font-size: clamp(2.2rem, 5vw, 2.9rem); font-weight: 800; font-stretch: 112%; letter-spacing: -.03em; line-height: 1; }
.ficha-cab .imp .u { font-size: .32em; font-weight: 700; color: var(--tinta-suave); letter-spacing: 0; }

.lista { list-style: none; padding: 0; margin: 0; }
.lista li { position: relative; padding-left: 1.8rem; margin-bottom: var(--e2); font-size: .97rem; line-height: 1.5; }
.lista li:last-child { margin-bottom: 0; }
.lista li::before { content: ''; position: absolute; left: 0; top: .45em; width: 11px; height: 6px; border-left: 2.5px solid var(--verde); border-bottom: 2.5px solid var(--verde); transform: rotate(-45deg); }
.lista.no li { color: var(--tinta-suave); }
.lista.no li::before { border: 0; width: 12px; height: 2.5px; background: var(--borde-fuerte); transform: none; top: .72em; }

/* ── Las dos vías (con y sin matrícula) ─────────────────────────────────── */
.ofertas { display: grid; gap: var(--e4); align-items: start; }
@media (min-width: 880px) { .ofertas { grid-template-columns: 1fr 1fr; } }
.oferta { background: var(--pintura); border: 2px solid var(--borde); border-radius: var(--r-caja); padding: clamp(1.5rem, 3.2vw, 2.1rem); display: flex; flex-direction: column; }
.oferta.destacada { border-color: var(--asfalto); border-width: 3px; position: relative; padding: calc(clamp(1.5rem, 3.2vw, 2.1rem) - 1px); }
.oferta.destacada::before {
  content: 'Lo que necesita casi todo el mundo';
  position: absolute; top: -12px; left: 1.5rem;
  background: var(--ambar); color: var(--ambar-tinta);
  font-size: .76rem; font-weight: 800; padding: .2rem .7rem; border-radius: var(--r-chip);
}
.oferta h3 { margin-bottom: var(--e1); }
.oferta .para { color: var(--tinta-media); font-size: .94rem; margin-bottom: var(--e3); max-width: none; }
.oferta .cifra { font-size: clamp(2rem, 4.4vw, 2.5rem); font-weight: 800; font-stretch: 112%; letter-spacing: -.03em; line-height: 1; margin-bottom: .3rem; }
.oferta .cifra .u { font-size: .32em; font-weight: 700; color: var(--tinta-suave); letter-spacing: 0; }
.oferta .desde { font-size: .85rem; color: var(--tinta-suave); margin-bottom: var(--e3); max-width: none; }
.oferta .lista { margin-bottom: var(--e3); }
.oferta .btn { margin-top: auto; }

.desglose { font-size: .88rem; color: var(--tinta-media); border-top: 1px dashed var(--borde); margin-bottom: var(--e3); padding-top: var(--e2); }
.desglose div { display: flex; justify-content: space-between; gap: var(--e3); margin-bottom: .25rem; }

.dos-listas { display: grid; gap: var(--e4); }
@media (min-width: 720px) { .dos-listas { grid-template-columns: 1fr 1fr; gap: var(--e5); } }
.dos-listas h4 { margin-bottom: var(--e2); }

/* ── Datos de urgencia ──────────────────────────────────────────────────── */
.datos { display: grid; gap: var(--e4); }
@media (min-width: 740px) { .datos { grid-template-columns: repeat(3, 1fr); gap: var(--e5); } }
.dato .n { font-size: clamp(2.3rem, 5.5vw, 3.2rem); font-weight: 800; font-stretch: 112%; letter-spacing: -.03em; line-height: 1; margin: 0 0 var(--e2); }
.dato .n.alerta { color: var(--ambar); }
.dato p { font-size: .95rem; max-width: none; }

/* ── Preguntas ──────────────────────────────────────────────────────────── */
.preguntas { border-top: 1px solid var(--borde); }
.pregunta { border-bottom: 1px solid var(--borde); }
.pregunta summary { cursor: pointer; list-style: none; padding: var(--e3) 2.5rem var(--e3) 0; font-weight: 700; font-size: 1.03rem; position: relative; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: ''; position: absolute; right: .5rem; top: 1.55rem; width: 10px; height: 10px; border-right: 2.5px solid var(--tinta-suave); border-bottom: 2.5px solid var(--tinta-suave); transform: rotate(45deg); transition: transform .18s ease; }
.pregunta[open] summary::after { transform: rotate(-135deg); }
.pregunta .cuerpo { padding-bottom: var(--e3); color: var(--tinta-media); }
.pregunta .cuerpo p { margin-bottom: var(--e2); }

/* ── Pie ────────────────────────────────────────────────────────────────── */
.pie { background: var(--asfalto); color: var(--sobre-oscuro-media); font-size: .9rem; padding-block: var(--e5) var(--e4); }
.pie a { color: var(--sobre-oscuro); }
.pie-rejilla { display: grid; gap: var(--e4); margin-bottom: var(--e5); }
@media (min-width: 740px) { .pie-rejilla { grid-template-columns: 2fr 1fr 1fr; } }
.pie h4 { color: var(--pintura); margin-bottom: var(--e2); font-size: .88rem; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: var(--e1); }
.pie .legal { border-top: 1px solid #3A4048; padding-top: var(--e4); font-size: .82rem; line-height: 1.65; }
.pie .legal p { max-width: none; margin-bottom: var(--e2); }

/* ── Utilidades ─────────────────────────────────────────────────────────── */
.centro { text-align: center; }
.centro .plomo, .centro p { margin-inline: auto; }
.centro .acciones { justify-content: center; }
.fino { font-size: .86rem; color: var(--tinta-suave); line-height: 1.55; }
.solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }