/* ==========================================================================
   Grupo Vasco · Estilos del cotizador (mobile-first: primero celular, después escritorio)
   ========================================================================== */

:root {
  --azul: #003B8B;        /* el azul del logo */
  --azul-oscuro: #002C6A;
  --azul-claro: #E6EEF8;
  --azul-suave: rgba(0, 59, 139, .09); /* fondo transparente con el azul del logo (etiqueta "Clientes de") */
  --fondo: #F3F5F8;
  --texto: #0F1E2E;
  --gris: #4A5868;
  --borde: #B6C1CE;
  --borde-suave: #D9DFE7;
  --verde: #1B7A47;
  --verde-oscuro: #15623A;
  --rojo: #A8322A;
  --blanco: #FFFFFF;
  --radio: 10px;
  --fuente-titulos: 'Ubuntu', system-ui, sans-serif;
  --fuente: 'Public Sans', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fuente); color: var(--texto); background: var(--fondo); font-size: 16px; line-height: 1.5; }
img { max-width: 100%; }
a { color: var(--azul); }
a:hover { color: var(--azul-oscuro); }
h1, h2, h3 { font-family: var(--fuente-titulos); line-height: 1.15; margin: 0; }
h2:focus { outline: none; }

/* Con JavaScript desactivado, ocultar los controles que dependen de él. */
.no-js .js-only { display: none !important; }

.contenedor { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

.saltar { position: absolute; left: -9999px; top: 8px; background: var(--blanco); padding: 8px 12px; z-index: 10; }
.saltar:focus { left: 8px; }

/* ----- Botones ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: var(--radio); border: 0;
  font: inherit; font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer;
}
.btn:disabled { opacity: .7; cursor: progress; }
.btn-primario { background: var(--azul); color: var(--blanco); }
.btn-primario:hover { background: var(--azul-oscuro); color: var(--blanco); }
.btn-secundario { background: var(--blanco); color: var(--azul); border: 1.5px solid var(--borde); }
.btn-whatsapp { background: var(--verde); color: var(--blanco); }
.btn-whatsapp:hover { background: var(--verde-oscuro); color: var(--blanco); }
.btn-link { background: none; color: var(--azul); padding: 12px; }
.btn-ancho { width: 100%; font-size: 17px; }
.btn-chico {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px;
  border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none;
}
:focus-visible { outline: 3px solid #5B9BE0; outline-offset: 2px; }

/* ----- Barra superior ----- */
.barra { background: var(--azul); }
.barra-interior { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.barra-logo img { display: block; height: 34px; width: auto; }
@media (min-width: 960px) { .barra-logo img { height: 40px; } }

/* ----- Hero + tarjeta del cotizador ----- */
.hero { background: linear-gradient(var(--azul) 0, var(--azul) 110px, var(--fondo) 110px); padding: 12px 0 12px; }
.hero-grid { display: flex; flex-direction: column; gap: 12px; }
.hero-texto { color: var(--blanco); }
.origen {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  padding: 6px 14px 6px 8px; border-radius: 999px; font-size: 14px;
}
.origen img { height: 28px; width: auto; border-radius: 6px; background: var(--blanco); }
.sobretitulo { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #B9CCE2; }
/* En celular la cabecera es mínima: el protagonista es el formulario. */
.hero h1 { font-size: 20px; font-weight: 700; line-height: 1.2; }
.bajada { display: none; margin: 12px 0 0; font-size: 16px; color: #DCE6F1; max-width: 520px; }
.origen { margin-bottom: 8px; }

.tarjeta {
  min-width: 0; max-width: 100%;
  background: var(--blanco); border-radius: 18px; padding: 20px 18px;
  box-shadow: 0 18px 40px rgba(0, 20, 45, .22);
}
.aviso { margin: 0 0 14px; font-size: 14px; color: var(--gris); background: var(--fondo); padding: 10px 12px; border-radius: 8px; }
.alerta { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: #FBEAE8; color: #7E2119; font-size: 15px; }

.progreso { display: flex; gap: 6px; }
.progreso span { flex: 1; height: 5px; border-radius: 3px; background: var(--borde-suave); transition: background .2s; }
.progreso span.hecho { background: var(--azul); }
.paso-numero { margin: 10px 0 2px; font-size: 13px; font-weight: 600; color: var(--gris); }

.paso + .paso { margin-top: 28px; }
.js .paso + .paso { margin-top: 0; }
.paso h2 { font-size: 24px; font-weight: 700; margin: 4px 0 16px; }
.paso-bajada { margin: -8px 0 16px; font-size: 15px; color: var(--gris); }

/* Paso 1: ramos */
.ramos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
/* En celular: una columna, ícono a la izquierda y nombre + descripción a la derecha. */
.ramo {
  display: flex; flex-direction: row; align-items: center; gap: 14px; min-height: 0;
  padding: 12px 14px; border: 1.5px solid var(--borde-suave); border-radius: 12px;
  color: var(--texto); text-decoration: none; background: var(--blanco);
}
.ramo svg { flex: none; color: var(--azul); }
.ramo:hover { border-color: var(--azul); color: var(--texto); }
.ramo.activo { border: 2px solid var(--azul); background: var(--azul-claro); }
.ramo-nombre { font-weight: 600; font-size: 16px; }
/* Ramo recomendado por el punto de venta: mismo lugar, con color y la insignia "Recomendado". */
.ramo-recomendado, .ramo-recomendado:hover { border: 2px solid var(--azul); background: var(--azul-claro); }
.ramo-recomendado .ramo-nombre { color: var(--azul); }
/* Ramos todavía no habilitados: solo visuales */
.ramo-proximamente, .ramo-proximamente:hover { cursor: default; border-color: var(--borde-suave); background: var(--fondo); }
.ramo-proximamente svg { color: var(--gris); opacity: .7; }
.ramo-proximamente .ramo-nombre { color: var(--gris); }
.inicio-titulo { font-size: 24px; font-weight: 700; margin: 0 0 16px; }
.ramo-texto { display: flex; flex-direction: column; gap: 2px; }
.ramo-recomendado .ramo-nombre { font-size: 16px; color: var(--azul); }
.insignia {
  align-self: flex-start; font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--blanco); background: var(--azul);
  padding: 2px 8px; border-radius: 999px; margin-bottom: 2px;
}
@media (min-width: 560px) {
  /* En pantallas grandes, grilla de tarjetas con el ícono arriba. */
  .ramos { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .ramos .ramo { flex-direction: column; align-items: flex-start; gap: 6px; min-height: 104px; padding: 14px; }
  .insignia { font-size: 12px; padding: 3px 10px; }
}
.ramo-desc { font-size: 13px; color: var(--gris); }

/* Campos */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
.ramo-campos > legend { width: 100%; }
.campo { margin: 0 0 18px; }
.campo-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; padding: 0; }
.opcional { font-weight: 400; color: var(--gris); }
.sub-label { display: block; font-size: 13px; color: var(--gris); margin-bottom: 4px; }
.campo textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--borde); border-radius: var(--radio);
  font: inherit; font-size: 16px; color: var(--texto); background: var(--blanco); resize: vertical; min-height: 110px;
}
.campo textarea:focus { border-color: var(--azul); outline: 2px solid var(--azul-claro); outline-offset: 0; }
.campo-label .icono-label { display: inline-block; vertical-align: -3px; margin-right: 8px; color: var(--azul); }
.privacidad { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 16px; font-size: 13px; line-height: 1.45; color: var(--gris); }
.privacidad .icono { flex: none; margin-top: 2px; color: var(--azul); }
.campo input[type="text"], .campo input[type="tel"], .campo input[type="email"], .campo select {
  width: 100%; height: 50px; padding: 0 14px; border: 1.5px solid var(--borde); border-radius: var(--radio);
  font: inherit; font-size: 16px; color: var(--texto); background: var(--blanco);
}
.campo input[data-mayusculas] { font-weight: 600; letter-spacing: .05em; }
.campo input:focus, .campo select:focus { border-color: var(--azul); outline: 2px solid var(--azul-claro); outline-offset: 0; }
.campo [aria-invalid="true"] { border-color: var(--rojo); }
.con-prefijo { position: relative; }
.con-prefijo span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--gris); font-weight: 600; }
.con-prefijo input { padding-left: 32px !important; }
.campo-ayuda { margin: 6px 0 0; font-size: 13px; color: var(--gris); }
.campo-error { margin: 6px 0 0; font-size: 14px; color: var(--rojo); font-weight: 500; }
.campo-error:empty { display: none; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* Opciones (radios con forma de botón) */
.opciones { display: grid; gap: 8px; }
.opciones.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opcion { position: relative; display: block; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion span {
  display: flex; align-items: center; min-height: 48px; padding: 10px 16px;
  border: 1.5px solid var(--borde); border-radius: var(--radio); background: var(--blanco);
  font-size: 15px; font-weight: 500;
}
.opciones.cols-2 .opcion span { justify-content: center; font-weight: 600; }
.opcion span { gap: 12px; }
.opcion-icono { flex: none; color: var(--azul); }
.opcion:hover span { border-color: var(--azul); }
.opcion input:checked + span { border: 2px solid var(--azul); background: var(--azul-claro); color: var(--azul); font-weight: 600; }
.opcion input:focus-visible + span { outline: 3px solid #5B9BE0; outline-offset: 2px; }

.navegacion { display: flex; gap: 10px; margin-top: 8px; }
.navegacion .btn-primario, .navegacion .btn-whatsapp { flex: 1; }
.navegacion-centro { justify-content: center; }

/* Paso 3: vista previa tipo WhatsApp */
.chat { background: #E9E2D6; border-radius: 16px; padding: 16px 12px; margin-bottom: 18px; }
.burbuja {
  margin: 0 0 0 28px; background: #DCF3D5; border-radius: 12px 12px 2px 12px; padding: 12px 14px;
  font-size: 15px; line-height: 1.5; color: #13261A; white-space: pre-line; box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
.nota { margin: 10px 0 0; text-align: center; font-size: 14px; color: var(--gris); }

/* ----- Carrusel de compañías ----- */
.companias { min-width: 0; max-width: 100%; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--borde-suave); }
.companias-titulo { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--gris); text-align: center; }
.carrusel {
  /* Se puede deslizar con el dedo; el avance automático lo hace assets/js/carrusel.js */
  overflow-x: auto; overflow-y: hidden; max-width: 100%;
  scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.pista {
  display: flex; align-items: center; width: max-content; margin: 0; padding: 0; list-style: none;
}
.pista li { padding-right: 36px; flex: none; }
.pista { min-height: 56px; }
.pista img { display: block; height: 40px; width: auto; max-width: none; filter: grayscale(1); opacity: .7; } /* la altura real viene de app/companias.php */
.carrusel::-webkit-scrollbar { display: none; }

/* Sin animaciones si el usuario lo pidió: fila estática con scroll horizontal */
@media (prefers-reduced-motion: reduce) {
  .carrusel { -webkit-mask-image: none; mask-image: none; }
  .pista .duplicado { display: none; }
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* ----- Secciones informativas ----- */
.seccion { padding: 24px 0 8px; }
.seccion-ultima { padding-bottom: 56px; }
.seccion-titulo { font-size: 26px; color: var(--azul); margin-bottom: 20px; }
.pasos-info { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pasos-info li { background: var(--blanco); border: 1px solid var(--borde-suave); border-radius: 16px; padding: 22px; }
.pasos-info h3 { font-family: var(--fuente); font-size: 18px; font-weight: 600; margin: 14px 0 6px; }
.pasos-info p { margin: 0; color: var(--gris); }
.num {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--azul); color: var(--blanco); font-family: var(--fuente-titulos); font-weight: 700;
}
.num-verde { background: var(--verde); }
.texto { margin: 0 0 10px; font-size: 17px; color: var(--gris); max-width: 720px; }
.texto-chico { margin: 0; font-size: 15px; color: var(--gris); }

.pagina-simple { padding: 64px 16px; min-height: 50vh; }
.pagina-simple h1 { font-size: 32px; color: var(--azul); margin-bottom: 12px; }

/* ----- Pie ----- */
.pie { background: var(--azul-oscuro); color: #DCE6F1; padding: 40px 0 96px; font-size: 15px; }
.pie p { margin: 0 0 4px; }
.pie-grid { display: grid; gap: 24px; }
.pie-logo { height: 32px; width: auto; display: block; margin: 0 0 12px; }
.pie-titulo { font-weight: 600; color: var(--blanco); }
.pie-legal { font-size: 13px; color: #B9CCE2; }

.wa-flotante {
  position: fixed; right: 16px; bottom: 16px; z-index: 5; width: 58px; height: 58px; border-radius: 50%;
  background: var(--verde); color: var(--blanco); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.wa-flotante:hover { color: var(--blanco); background: var(--verde-oscuro); }
.wa-flotante .icono { width: 28px; height: 28px; }

/* ----- Pantallas más grandes ----- */
@media (min-width: 560px) {
  .tarjeta { padding: 28px; }
}

@media (min-width: 960px) {
  .hero { background: var(--azul); padding: 56px 0 72px; }
  .hero-grid { flex-direction: row; align-items: flex-start; gap: 56px; }
  .hero-texto { flex: 1 1 0; padding-top: 32px; }
  .hero h1 { font-size: 52px; line-height: 1.05; }
  .bajada { display: block; font-size: 19px; }
  .origen { margin-bottom: 14px; }
  .tarjeta { flex: 0 0 480px; width: 480px; min-width: 0; }
  .seccion { padding-top: 64px; }
  .pasos-info { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie-grid { grid-template-columns: 1fr 1fr 1.4fr; }
  .pie { padding-bottom: 48px; }
}
.pie-legal a { color: inherit; text-decoration: underline; }
.pie a { color: inherit; }
.pie-responsable { display: block; margin-bottom: 6px; color: #DCE6F1; }
.pie-responsable strong { color: var(--blanco); font-weight: 600; }
.pie .sin-corte { white-space: nowrap; }

/* Casillas: "Es 0 km" (antes de la patente) y "Ya soy cliente" */
.casilla { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; cursor: pointer; }
.casilla input { width: 20px; height: 20px; accent-color: var(--azul); flex: none; }
.casilla-destacada {
  margin: 0 0 18px; padding: 10px 14px; border: 1.5px solid var(--borde); border-radius: var(--radio);
  font-weight: 600; background: var(--blanco);
}
.casilla-destacada:has(input:checked) { border: 2px solid var(--azul); background: var(--azul-claro); color: var(--azul); }
.campo input:disabled { background: var(--fondo); color: var(--gris); }

/* Marca y modelo cuando el vehículo es 0 km */
.campos-0km { margin: -4px 0 18px; padding: 14px 14px 0; border-radius: 12px; background: var(--fondo); }
.campos-0km[hidden] { display: none; }

/* "Ya soy cliente" */
.aviso-cliente { margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; background: var(--azul-claro); color: var(--azul); font-size: 15px; }

/* Coberturas (debajo del cotizador de un ramo) */
.coberturas { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.coberturas li { background: var(--blanco); border: 1px solid var(--borde-suave); border-radius: 16px; padding: 22px; }
.coberturas h3 { font-family: var(--fuente); font-size: 18px; font-weight: 600; color: var(--azul); margin: 0 0 6px; }
.coberturas p { margin: 0; color: var(--gris); }
@media (min-width: 720px) { .coberturas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .coberturas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Texto solo para lectores de pantalla */
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ----- Campo patente con forma de chapa ----- */
.patente {
  width: 100%; margin: 0; border: 3px solid #111; border-radius: 10px; overflow: hidden;
  background: var(--blanco); box-shadow: 0 2px 0 rgba(0,0,0,.08);
}
.patente-banda {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 26px; padding: 0 8px; background: #0B3C9C; color: var(--blanco);
}
.patente-mercosur { display: flex; flex-direction: column; align-items: center; font-size: 6.5px; font-weight: 700; letter-spacing: .04em; line-height: 1; }
.patente-estrellas { font-size: 6px; letter-spacing: 1px; margin-bottom: 1px; }
.patente-pais { flex: 1; text-align: center; font-family: var(--fuente-titulos); font-size: 14px; font-weight: 700; letter-spacing: .03em; }
.patente-bandera {
  flex: none; width: 24px; height: 16px; border-radius: 2px; border: 1px solid rgba(255,255,255,.6);
  background:
    radial-gradient(circle, #F6B40E 0 2.2px, transparent 2.6px),
    linear-gradient(#74ACDF 33.3%, #FFFFFF 33.3% 66.6%, #74ACDF 66.6%);
}
.patente-banda-vieja { display: none; }
.campo .patente input[type="text"] {
  display: block; width: 100%; height: 52px; border: 0; border-radius: 0; padding: 0 8px;
  text-align: center; font-family: var(--fuente-titulos); font-size: 32px; font-weight: 700;
  letter-spacing: .1em; color: #111; background: transparent;
}
.campo .patente input::placeholder { color: #C4C9D0; }
.campo .patente input:focus { outline: none; }
.patente:focus-within { box-shadow: 0 0 0 3px #5B9BE0; }
.patente:has([aria-invalid="true"]) { border-color: var(--rojo); }

/* Modelo viejo (ABC123): marco plateado, "ARGENTINA" en celeste con escudos, y recuadro negro con letras blancas */
.patente.patente-vieja { background: #E4E7EB; border: 2px solid #A9B0B9; padding: 0 10px 8px; }
.patente-vieja .patente-banda { display: none; }
.patente-vieja .patente-banda-vieja {
  display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 2px;
  color: #3D9AD1; font-family: var(--fuente-titulos); font-size: 14px; font-weight: 700; letter-spacing: .14em;
}
.patente-escudo {
  width: 10px; height: 13px; border-radius: 50% 50% 45% 45%;
  background: linear-gradient(#74ACDF 50%, #FFFFFF 50%); border: 1.5px solid #8C949E;
}
.campo .patente.patente-vieja input[type="text"] {
  height: 50px; border-radius: 4px; background: #0E0E0E; color: var(--blanco);
  font-family: 'Barlow Condensed', var(--fuente-titulos); font-size: 42px; font-weight: 600; letter-spacing: .08em;
}
.campo .patente.patente-vieja input::placeholder { color: #6B7280; }

/* Patente arriba (sin título visible) y "Es 0 km" debajo, chica y sin marco */
.campo-patente { margin-bottom: 2px; }
.campo-patente .campo-ayuda { margin-top: 4px; }
.casilla-0km { min-height: 36px; margin: 0 0 14px; font-size: 14px; color: var(--gris); }
.casilla-0km input { width: 18px; height: 18px; }
.casilla-0km:has(input:checked) { color: var(--azul); font-weight: 600; }

/* ----- Pantalla de inicio: lista de ramos sin descripción -----
   Celular: uno debajo del otro, con la etiqueta ("Recomendado" / "Próximamente") a continuación del nombre.
   Pantallas grandes: tarjetas en grilla, con la etiqueta debajo del nombre. */
.ramo-texto { flex-direction: row; flex-wrap: nowrap; align-items: center; column-gap: 8px; row-gap: 4px; min-width: 0; }
.ramos .ramo > .ramo-texto { flex: 1 1 auto; }
.ramo .ramo-nombre { min-width: 0; flex: 0 1 auto; }
.ramo .insignia { align-self: center; margin: 0 0 0 auto; flex: none; white-space: nowrap; } /* en la lista: alineada a la derecha */
.insignia-gris { background: var(--borde-suave); color: var(--gris); }
.ramos .ramo { min-height: 52px; }
@media (min-width: 560px) {
  .ramos .ramo { min-height: 0; }
  .ramos .ramo-texto { flex-direction: column; align-items: flex-start; }
  .ramos .ramo .insignia { align-self: flex-start; margin: 0; }
}

/* ----- Logo azul centrado, sin franja azul: toda la página del mismo gris claro -----
   El celular (Safari en iPhone) pinta la zona de la cámara y la hora con el color de fondo
   de la página. Como arriba también es gris claro, se ve todo como una sola pieza.
   La tarjeta ya no queda montada sobre un corte de color que cambia según el largo del texto. */
html, body { background: var(--fondo); }
.barra { background: var(--fondo); }
.barra-interior { justify-content: center; min-height: 0; padding: 14px 0 6px; }
.barra-logo img { height: 78px; width: auto; }
.hero, .hero { background: var(--fondo); padding-top: 6px; }
.hero-texto { color: var(--texto); }
.hero h1 { color: var(--azul); }
.bajada { color: var(--gris); }
/* "Clientes de …": mismo azul del logo, pero suave (fondo transparente y texto azul). */
.origen { background: var(--azul-suave); border: 0; color: var(--azul); }
.origen strong { color: var(--azul); }
@media (min-width: 960px) {
  .barra-interior { padding: 20px 0 8px; }
  .barra-logo img { height: 84px; }
  .hero { background: var(--fondo); padding: 32px 0 64px; }
}

/* ----- Campos y opciones un poco más compactos (menos aire entre el texto y el borde) ----- */
.campo input[type="text"], .campo input[type="tel"], .campo input[type="email"], .campo select { height: 44px; padding: 0 12px; }
.opcion span { min-height: 42px; padding: 7px 14px; }
.casilla-destacada { padding: 6px 12px; min-height: 40px; }
.ramo { padding: 10px 12px; }
.ramos .ramo { min-height: 46px; }
@media (min-width: 560px) {
  .ramos .ramo { min-height: 0; padding: 12px; }
}

/* ----- Cotizador de un ramo, en celular: sin el título "Tu seguro de …" -----
   La persona ya eligió qué cotizar y la tarjeta lo dice ("Contanos de tu auto"); el título
   solo empujaba el formulario hacia abajo. Sigue en el código (Google y lectores de pantalla)
   y en computadora, donde hay lugar al costado de la tarjeta. */
@media (max-width: 959px) {
  .hero-ramo h1 { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .hero-ramo .origen { margin-bottom: 0; }
  .hero-ramo .hero-texto:not(:has(.origen)) { display: none; }
}

/* ----- Título del paso fuera de la tarjeta ("Contanos de tu auto" / "Sobre vos") -----
   Con JavaScript se muestra arriba de la tarjeta y se ocultan los de adentro.
   Sin JavaScript se ve el formulario entero y cada parte conserva su título adentro. */
.columna-cotizador { display: flex; flex-direction: column; gap: 12px; min-width: 0; max-width: 100%; }
.titulo-fuera { padding: 0 2px; }
.titulo-fuera h2 { font-size: 24px; font-weight: 700; color: var(--texto); }
.titulo-fuera .paso-bajada { margin: 4px 0 0; }
.js .paso > h2, .js .paso > .paso-bajada { display: none; }
.js .paso-numero { margin-bottom: 14px; }
@media (min-width: 960px) {
  .columna-cotizador { flex: 0 0 480px; width: 480px; }
  .columna-cotizador .tarjeta { flex: none; width: auto; }
}

/* ----- Página de coberturas de un ramo (/seguros/autos) ----- */
.info-intro { max-width: 760px; }
.hero-info h1 { font-size: 30px; font-weight: 700; line-height: 1.15; margin: 4px 0 0; }
.info-intro { margin: 10px 0 0; font-size: 16px; color: var(--gris); }
.cta-cotizar { margin-top: 18px; }
.cta-nota { margin: 8px 0 0; text-align: center; font-size: 14px; color: var(--gris); }
.info-cierre { max-width: 480px; margin: 24px auto 0; }
.info-cierre .cta-cotizar { margin-top: 0; }
@media (min-width: 960px) {
  .hero-info { padding: 32px 0 8px; }
  .hero-info h1 { font-size: 44px; }
  .info-intro { font-size: 19px; }
  .hero-info .cta-cotizar { max-width: 360px; }
  .hero-info .cta-nota { text-align: left; }
}

/* Botón "¿Qué coberturas ofrecemos?" debajo del formulario */
.link-coberturas { background: transparent; }

/* ----- Inicio en celular: seguros en grilla de 2 columnas -----
   El recomendado por el punto de venta va primero, ocupando todo el ancho (como lista). */
@media (max-width: 559px) {
  .ramos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ramos .ramo { flex-direction: column; align-items: flex-start; gap: 6px; min-height: 0; padding: 12px; }
  .ramos .ramo-texto { flex-direction: column; align-items: flex-start; }
  .ramos .ramo .insignia { align-self: flex-start; margin: 0; }
  .ramos .ramo-recomendado { grid-column: 1 / -1; order: -1; flex-direction: row; align-items: center; gap: 14px; padding: 10px 12px; min-height: 46px; }
  .ramos .ramo-recomendado .ramo-texto { flex-direction: row; align-items: center; }
  .ramos .ramo-recomendado .insignia { align-self: center; margin: 0 0 0 auto; }
}

/* ----- Formulario (/cotizar) sin tarjeta: los campos van sobre el fondo gris, como el resto de la página ----- */
.hero-ramo .tarjeta { background: transparent; box-shadow: none; border-radius: 0; padding: 0; }
@media (min-width: 560px) { .hero-ramo .tarjeta { padding: 0; } }
/* Título del paso (azul del logo, con dos puntos) y "Paso 1 de 2" a la derecha, arriba de la patente */
.titulo-fuera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 12px; padding: 0; }
.titulo-fuera h2 { font-size: 22px; font-weight: 700; color: var(--azul); }
.titulo-fuera .paso-numero { margin: 0; font-size: 13px; font-weight: 600; color: var(--gris); white-space: nowrap; }
.titulo-fuera .paso-bajada { flex-basis: 100%; }
.no-js .paso-numero { display: none; }

/* "¿Cómo funciona?": el número va en el título ("1. Completá lo justo") */
.pasos-info li { padding: 18px 20px; }
.pasos-info h3 { margin: 0 0 4px; }

/* ----- Pie: logo nuevo centrado y datos de contacto debajo ----- */
.pie { padding: 36px 0 40px; }
.pie-centro { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pie-logo { height: 56px; width: auto; margin: 0 0 8px; }
.pie-lema { color: #DCE6F1; margin: 0 0 18px !important; }
.pie-contacto { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.pie-contacto a { color: var(--blanco); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.pie-contacto a:hover { border-bottom-color: var(--blanco); }
.pie-horario { color: #DCE6F1; }
.pie-legal { max-width: 640px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); }
@media (min-width: 960px) { .pie { padding-bottom: 48px; } }

/* Paso 2: "Volver" + "Continuar" verde en la misma fila. " por WhatsApp" solo si entra. */
.navegacion .btn-whatsapp { gap: 8px; }
.solo-ancho { display: none; }
@media (min-width: 420px) { .solo-ancho { display: inline; } }

/* ----- Inicio: ícono, nombre y etiqueta centrados en cada opción (celular y computadora) ----- */
.ramos .ramo { align-items: center; text-align: center; justify-content: center; }
.ramos .ramo-texto { align-items: center; }
.ramos .ramo .insignia { align-self: center; }
.ramos .ramo > .ramo-texto { flex: 0 0 auto; } /* que el bloque no se estire: así queda centrado también en altura */

/* ----- Página de coberturas: grupos (Robo, Incendio, Accidentes…) con cada cobertura y su explicación ----- */
.grupos-cobertura { display: grid; gap: 14px; }
.grupo-cobertura { background: var(--blanco); border: 1px solid var(--borde-suave); border-radius: 16px; padding: 18px 20px; }
.grupo-cobertura h3 { font-family: var(--fuente-titulos); font-size: 18px; font-weight: 700; color: var(--azul); margin: 0 0 6px; }
.grupo-cobertura ul { list-style: none; margin: 0; padding: 0; }
.grupo-cobertura li { position: relative; padding: 10px 0 10px 26px; border-top: 1px solid var(--borde-suave); }
.grupo-cobertura li:first-child { border-top: 0; }
/* Tilde azul a la izquierda de cada cobertura */
.grupo-cobertura li::before {
  content: ""; position: absolute; left: 2px; top: 15px; width: 12px; height: 7px;
  border-left: 2.5px solid var(--azul); border-bottom: 2.5px solid var(--azul); transform: rotate(-45deg);
}
.grupo-cobertura strong { display: block; font-weight: 600; color: var(--texto); }
.grupo-cobertura span { display: block; margin-top: 2px; font-size: 15px; color: var(--gris); }
.a-medida { margin-top: 18px; background: var(--azul-suave); border-radius: 16px; padding: 18px 20px; }
.a-medida h3 { font-family: var(--fuente-titulos); font-size: 18px; font-weight: 700; color: var(--azul); margin: 0 0 6px; }
.a-medida p { margin: 0 0 8px; color: var(--texto); }
.a-medida p:last-child { margin-bottom: 0; }
.nota-valores { margin: 12px 4px 0; font-size: 13px; color: var(--gris); }
@media (min-width: 720px) { .grupos-cobertura { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .grupos-cobertura { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ----- Página de coberturas: una tarjeta por cobertura (sin agrupar), con una tilde azul ----- */
.lista-coberturas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lista-coberturas li { position: relative; background: var(--blanco); border: 1px solid var(--borde-suave); border-radius: 14px; padding: 14px 18px 14px 44px; }
.lista-coberturas li::before {
  content: ""; position: absolute; left: 19px; top: 20px; width: 12px; height: 7px;
  border-left: 2.5px solid var(--azul); border-bottom: 2.5px solid var(--azul); transform: rotate(-45deg);
}
.lista-coberturas h3 { font-family: var(--fuente); font-size: 16px; font-weight: 600; color: var(--azul); margin: 0 0 2px; }
.lista-coberturas p { margin: 0; font-size: 15px; color: var(--gris); }
@media (min-width: 720px) { .lista-coberturas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .lista-coberturas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nota-valores strong { color: var(--texto); font-weight: 600; }

/* ----- "¿Por qué elegirnos?" (inicio y coberturas) ----- */
.beneficios { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.beneficios li { display: flex; gap: 14px; align-items: flex-start; background: var(--blanco); border: 1px solid var(--borde-suave); border-radius: 14px; padding: 16px 18px; }
.beneficio-icono { flex: none; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--azul-suave); color: var(--azul); }
.beneficios h3 { font-family: var(--fuente); font-size: 16px; font-weight: 600; color: var(--azul); margin: 2px 0 2px; }
.beneficios p { margin: 0; font-size: 15px; color: var(--gris); }
@media (min-width: 720px) { .beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) {
  .beneficios { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .beneficios li { flex-direction: column; gap: 10px; }
}
/* En coberturas, el botón final va después de "¿Por qué elegirnos?" */
.por-que + .seccion-ultima { padding-top: 0; }
.por-que:has(+ .seccion-ultima) { padding-bottom: 24px; }

/* ----- Página de coberturas: bloque "Sumá a tu plan" (adicionales que se venden aparte) ----- */
.adicionales { margin-top: 18px; background: var(--blanco); border: 1px dashed var(--borde); border-radius: 16px; padding: 18px 20px; }
.adicionales h3 { font-family: var(--fuente-titulos); font-size: 18px; font-weight: 700; color: var(--azul); margin: 0 0 2px; }
.adicionales p { margin: 0 0 12px; color: var(--gris); font-size: 15px; }
.adicionales ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.adicionales li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--azul-claro); color: var(--azul); font-size: 15px; font-weight: 600; }
.adicionales li svg { flex: none; }

/* ----- Inicio: tarjetas de seguros más compactas y todas del mismo tamaño -----
   Todas las filas miden lo mismo (la de la tarjeta más alta), con menos aire adentro,
   ícono un poco más chico y nombre en hasta dos líneas. Así entra más contenido en pantalla. */
.ramos { gap: 8px; }
/* Mismo alto para todas: alcanza para un nombre de dos líneas o un nombre con "Próximamente". */
.ramos .ramo { min-height: 84px; padding: 8px 6px; gap: 4px; }
.ramos .ramo svg { width: 24px; height: 24px; }
.ramos .ramo-nombre { font-size: 15px; line-height: 1.2; }
.ramos .ramo-texto { gap: 3px; }
.ramos .ramo .insignia { font-size: 11px; padding: 1px 8px; }
.inicio-titulo { margin-bottom: 12px; }
.companias { margin-top: 16px; padding-top: 14px; }
@media (min-width: 560px) {
  /* 6 seguros = 2 filas de 3, sin huecos */
  .ramos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ramos .ramo { padding: 10px 6px; }
  .ramos .ramo-nombre { font-size: 14px; }
}
/* Título "¿Qué seguro te interesa?": más chico */
.inicio-titulo { font-size: 20px; }
/* Si la cantidad de seguros no completa la última fila, la última tarjeta ("Otro") ocupa todo el ancho:
   en celular (2 columnas) cuando queda sola; en pantallas grandes (3 columnas) cuando queda sola en la fila. */
/* Esa tarjeta ancha va más baja: ícono y nombre en una sola línea. */
@media (max-width: 559px) {
  .ramos > :last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 0; flex-direction: row; justify-content: center; gap: 10px; padding: 10px 12px; }
}
@media (min-width: 560px) {
  .ramos > :last-child:nth-child(3n+1) { grid-column: 1 / -1; min-height: 0; flex-direction: row; justify-content: center; gap: 10px; padding: 10px 12px; }
}

/* ----- Inicio: botón "Escribinos por WhatsApp" debajo del título ----- */
.hero-whatsapp { margin-top: 10px; }
@media (min-width: 960px) { .hero-whatsapp { margin-top: 24px; } }

/* ----- Páginas de texto (política de privacidad) ----- */
.pagina-simple h2 { font-size: 20px; color: var(--azul); margin: 28px 0 8px; }
.pagina-simple ul { margin: 0 0 10px; padding-left: 22px; max-width: 720px; color: var(--gris); font-size: 17px; }
.pagina-simple li { margin-bottom: 6px; }
.pagina-simple .texto-chico { margin-top: 28px; }