/* ============================================================
   NEXOVIA SEGUROS — Boceto de demostración
   Sistema de diseño: Poppins autohospedada · azul petróleo + turquesa.
   Es un BOCETO para validar dirección visual y flujo del cotizador,
   no el sitio final. El lead se simula (no viaja al CRM todavía).
   ============================================================ */

@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap;
  src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap;
  src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap;
  src: url("../fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 800; font-display: swap;
  src: url("../fonts/poppins-800.woff2") format("woff2"); }

:root {
  --azul: #0b2a38;          /* azul petróleo profundo de la marca */
  --azul-2: #103b4e;
  --teal: #2f8794;          /* verde azulado del logo */
  --teal-claro: #7edee0;
  --oro: #c9a24b;           /* dorado del logo */
  --texto: #2b3a45;
  --muted: #5f6c81;
  --linea: #e2e8f0;
  --bg: #f6f8fa;
  --blanco: #ffffff;
  --sombra: 0 10px 40px rgba(11, 42, 56, .12);
  --sombra-sm: 0 2px 12px rgba(11, 42, 56, .08);
  --r: 14px;
  --maxw: 1200px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
body {
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  color: var(--texto); background: var(--bg); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.contenedor { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
/* En monitores anchos, topar el contenido a 1200px dejaba 400px muertos de cada
   lado: en el hero eso es una franja plana enorme antes de que empiece el titular,
   y estruja la foto contra la tarjeta. Se ensancha para todas las secciones a la
   vez, no solo el hero, para que el encabezado y lo de abajo sigan alineados. */
/* el umbral va en 1500 y no en 1600 a proposito: las laptops de 1920 con
   escala del 125% miden 1536px CSS — el caso mas comun en Windows — y con el
   umbral en 1600 se quedaban en el mundo angosto: la tarjeta del cotizador
   arrancaba en el 55% y tapaba media pareja en hogar. */
@media (min-width: 1500px) { :root { --maxw: 1440px; } }

/* ---------- Encabezado ---------- */
.header {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--linea);
}
.header .contenedor { display: flex; align-items: center; gap: 24px; height: 68px; }
.logo img { height: 34px; width: auto; }
.nav { display: flex; gap: 22px; margin-left: auto; font-weight: 600; font-size: 14.5px; }
.nav a { color: var(--texto); padding: 6px 0; border-bottom: 2px solid transparent; transition: .15s; }
.nav a:hover { color: var(--teal); border-color: var(--teal); }
.btn-cta {
  background: var(--teal); color: #fff; padding: 10px 20px; border-radius: 999px;
  font-weight: 700; font-size: 14px; border: none; cursor: pointer; transition: .15s;
}
.btn-cta:hover { background: #256b76; transform: translateY(-1px); }
.hamburguesa { display: none; background: none; border: none; cursor: pointer; }
.hamburguesa span { display: block; width: 24px; height: 2px; background: var(--azul); margin: 5px 0; }

/* ---------- Carrusel de aseguradoras ---------- */
.marquesina { background: #fff; border-bottom: 1px solid var(--linea); overflow: hidden;
  padding: 22px 0; position: relative; }
/* difuminado en los bordes para que los logos entren y salgan sin cortarse */
.marquesina::before, .marquesina::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.marquesina::before { left: 0; background: linear-gradient(90deg, #fff, transparent); }
.marquesina::after { right: 0; background: linear-gradient(270deg, #fff, transparent); }
.marquesina-pista { display: flex; align-items: center; width: max-content;
  animation: correr 55s linear infinite; }
/* el espaciado va como margen de cada logo y NO como gap del flex: con gap, la
   mitad de la pista duplicada no mide exactamente un juego completo y el bucle
   brincaba en la costura una vez por vuelta */
.marq-titulo { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.marquesina img { max-height: 40px; max-width: 130px; width: auto; height: auto;
  margin-right: 54px; object-fit: contain; opacity: .8; transition: .2s; }
/* sisnova es casi cuadrado y a 40px se veia enano junto a los anchos */
.marquesina img[src*="sisnova"] { max-height: 54px; }
.marquesina img:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .marquesina-pista { animation: none; } }
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Héroe con cotizador ---------- */
.hero { position: relative; background: var(--azul); overflow: hidden; }
.hero-fondo {
  position: absolute; inset: 0; z-index: 0;
}
.hero-fondo img {
  /* las 6 van SUPERPUESTAS, no apiladas: sin position absolute cada una ocupa
     su propio alto y solo se veria la primera, que era justo lo que pasaba */
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  opacity: 0; transition: opacity .5s ease;
}
.hero-fondo img.activa { opacity: 1; }
/* hogar: la pareja esta alta en el cuadro y la coronilla de el asoma por encima de
   la tarjeta del cotizador, leyendose como una mancha en vez de como una persona.
   Anclar arriba lo resuelve, pero SOLO sirve en una banda de anchos concreta: el
   desplazamiento es la mitad del sobrante vertical, y el sobrante crece con el ancho.
   A 1440 el sobrante es 74px y baja la imagen 37 — justo lo que hace falta. A 2000
   el sobrante es 380px y se los comeria todos de abajo, dejando solo el marco de la
   puerta. Pero medido en pantalla ancha, el recorte centrado es peor todavia: parte
   la cara de el por el borde de arriba y deja barbilla y boca colgando. Anclar arriba
   es lo correcto en todos los anchos — abajo de ~1290 no hay recorte vertical y la
   regla no hace nada. Lo que fallaba en pantalla ancha era el velo, no esto. */
.hero-fondo img[data-ramo="hogar"],
.hero-fondo img[data-ramo="viaje"],
.hero-fondo img[data-ramo="gmm"] { object-position: center top; }   /* en viaje la cabeza vive arriba; se sacrifica piso */
/* hogar: las llaves en su mano son el simbolo del ramo y viven abajo (71-80% del
   alto); la coronilla de el, arriba (8.4%). En pantalla ancha el hero solo enseña
   ~66% del alto y no caben ambos: se sube la imagen en pixeles fijos — lo maximo
   que la cabeza de el aguanta — y de 1900px en adelante ademas el hero crece un
   poco, que es lo que de verdad le devuelve las llaves al encuadre. */
@media (min-width: 1500px) {
  .hero-fondo img[data-ramo="hogar"] { object-position: 50% -60px; }
}
@media (min-width: 1900px) {
  .hero-fondo img[data-ramo="hogar"] { object-position: 50% -80px; }
}
/* velo degradado: apaga la izquierda para que se lea el texto.
   Las paradas van en pixeles calculados desde el borde de la columna de contenido,
   no en porcentaje del ancho de pantalla. Con porcentajes el velo solo cuadraba con
   el texto a un ancho concreto: en pantalla grande el contenido se queda topado a
   1200px centrados y el degradado se estiraba aparte, dejando una franja plana y
   muerta antes de que empezara siquiera el titular. Asi la zona oscura empieza y
   termina donde empieza y termina el texto, sea cual sea el monitor. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  --col: max(20px, calc(50% - var(--maxw) / 2 + 20px));   /* borde izquierdo del texto */
  background: linear-gradient(90deg,
    rgba(8,30,42,.62) 0,
    rgba(8,30,42,.90) calc(var(--col) + 90px),
    rgba(8,30,42,.76) calc(var(--col) + 470px),   /* 470px = ancho maximo de .hero-texto */
    rgba(8,30,42,.30) calc(var(--col) + 620px),
    rgba(8,30,42,.10) 100%);
}
.hero .contenedor {
  position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 500px;
  gap: 56px; align-items: center; padding-top: 64px; padding-bottom: 72px; min-height: 640px;
}
/* en pantalla grande el hero crece: es lo que hace falta para que en hogar quepan
   la coronilla de el (8.4% del alto) y las llaves en la mano de ella (~86%) a la
   vez. Pasa de 2.7:1 a 2.2:1 — mejor proporcion — y la tarjeta sigue completa en
   una pantalla de 900 de alto porque va centrada. OJO: esta regla debe vivir
   DESPUES de la base de .hero .contenedor; con la misma especificidad gana el
   orden del archivo, y antes quedaba arriba y nunca aplicaba. */
/* el crecimiento es GRADUAL con el ancho, no un escalon en 1900: las pantallas
   de 1500-1900 (portatiles grandes, monitores a 125%) caian en un valle donde la
   imagen ya se subia pero el hero seguia chaparro — caras pegadas arriba y llaves
   fuera. 49vw-60px sigue la proporcion de la foto; el techo de 900 evita un hero
   gigante en ultrapanoramicas. */
@media (min-width: 1500px) {
  .hero .contenedor { min-height: clamp(640px, calc(49vw - 60px), 900px); }
}
.hero-texto { color: #fff; max-width: 470px; text-shadow: 0 1px 12px rgba(6,22,32,.45); }
.hero-texto .kicker { color: var(--teal-claro); font-weight: 700; font-size: 13px;
  letter-spacing: .5px; text-transform: uppercase; margin-bottom: 12px; }
.hero-texto h1 { font-size: 45px; line-height: 1.08; font-weight: 800; margin-bottom: 14px; }
.hero-texto h1 span { color: var(--teal-claro); }
/* barra corta bajo el titular, de la maqueta aprobada */
.hero-texto h1::after { content: ""; display: block; width: 54px; height: 4px;
  border-radius: 2px; background: var(--teal-claro); margin-top: 16px; }
.hero-texto p { color: #cfe0e6; font-size: 16.5px; margin-bottom: 26px; }
.hero-bull { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
/* el texto va dentro de un solo <span>: cuando estaba suelto, el <b> contaba como
   otro elemento flex y se envolvia por su cuenta, partiendo la frase en dos bloques */
.hero-bull li { display: flex; align-items: flex-start; gap: 9px; color: #e4eef1; }
.ico-check { width: 19px; height: 19px; flex: none; margin-top: 1px; color: var(--teal-claro); }
.hero-bull b { color: #fff; }

/* doble llamada: boton principal + asesor, de la maqueta */
.hero-ctas { display: flex; align-items: center; gap: 22px; margin-top: 24px; flex-wrap: wrap; }
.btn-hero { display: inline-flex; align-items: center; gap: 9px; background: var(--teal);
  color: #fff; font-weight: 700; font-size: 15px; padding: 13px 24px; border-radius: 999px;
  text-decoration: none; transition: .15s; }
.btn-hero:hover { background: #256b76; transform: translateY(-1px); }
.btn-hero svg { width: 17px; height: 17px; }
.btn-wa { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600;
  font-size: 14px; text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1px; }
.btn-wa:hover { color: var(--teal-claro); }
.btn-wa svg { width: 18px; height: 18px; }

/* sellos de confianza bajo las llamadas */
.hero-sellos { display: flex; gap: 0; margin-top: 26px; flex-wrap: wrap; }
.sello { display: flex; align-items: center; gap: 7px; padding: 0 11px; }
.sello:first-child { padding-left: 0; }
.sello + .sello { border-left: 1px solid rgba(255,255,255,.22); }
.sello svg { width: 17px; height: 17px; flex: none; color: var(--teal-claro); }
.sello b { display: block; font-size: 11px; color: #fff; line-height: 1.25; white-space: nowrap; }
.sello span { display: block; font-size: 10px; color: #b9cdd4; }
.ico-mini { width: 13px; height: 13px; vertical-align: -2px; color: var(--muted); }
.modal .check svg { width: 32px; height: 32px; }

/* ---------- Tarjeta cotizador ---------- */
.cotizador {
  background: #fff; border-radius: var(--r); box-shadow: var(--sombra); overflow: hidden;
}
/* pestañas con icono sobre blanco, arquitectura de la maqueta:
   5 principales en la primera fila, las otras 4 debajo */
.cot-tabs {
  display: grid; grid-template-columns: repeat(5, 1fr); background: #fff;
  border-bottom: 1px solid var(--linea); padding: 8px 8px 0;
}
.cot-tab {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 2px 8px; border: none; background: none; font-family: inherit;
  font-weight: 600; font-size: 11px; color: var(--muted); cursor: pointer;
  border-bottom: 3px solid transparent; transition: .15s; min-width: 0;
}
.cot-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ico-tab { width: 22px; height: 22px; flex: none; }
.cot-tab:hover { color: var(--azul); }
.cot-tab.on { color: var(--teal); border-color: var(--teal); }
/* con 9 campos el ramo de auto no cabe en pantallas bajas: el cuerpo hace su
   propio desplazamiento en vez de estirar el hero sin control */
/* el alto se mide contra la ventana real: 100vh menos el encabezado y el aire del
   hero. Auto es el ramo mas largo (9 campos) y ahora entra completo sin deslizar
   en pantallas normales; en ventanas bajitas el scroll sigue disponible. */
.cot-cuerpo { padding: 24px 26px 22px; max-height: min(74vh, 650px); overflow-y: auto; }
.cot-cuerpo::-webkit-scrollbar { width: 6px; }
.cot-cuerpo::-webkit-scrollbar-thumb { background: #cfd8e0; border-radius: 3px; }
.cotizador { display: flex; flex-direction: column; }
.cot-cuerpo h3 { font-size: 15px; color: var(--azul); margin-bottom: 3px; }
.cot-cuerpo .sub { font-size: 12.5px; color: var(--muted); margin-bottom: 16px; }
.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .3px; margin-bottom: 5px; }
.campo input, .campo select {
  width: 100%; padding: 11px 12px; border: 1px solid var(--linea); border-radius: 9px;
  font-family: inherit; font-size: 14px; color: var(--texto); background: #fbfcfd; transition: .15s;
}
.campo input:focus, .campo select:focus { outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(47,135,148,.14); }
.campo .hint { font-size: 11px; color: var(--teal); margin-top: 4px; }
.campo.err input, .campo.err select { border-color: #d6283b; }
.campo .msg-err { font-size: 11px; color: #d6283b; margin-top: 4px; display: none; }
.campo.err .msg-err { display: block; }
.sep-form { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px;
  font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.sep-form::before, .sep-form::after { content: ""; flex: 1; height: 1px; background: var(--linea); }

.grupo-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.oculto { display: none !important; }


/* ---------- Selector progresivo de vehiculo ---------- */
.campo-veh { position: relative; }
.veh-picker { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 46px;
  padding: 7px 36px 7px 10px; border: 1.5px solid var(--linea); border-radius: 10px;
  background: #fff; cursor: text; position: relative; transition: border-color .15s, box-shadow .15s; }
.veh-picker:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(47,135,148,.12); }
.campo.err .veh-picker { border-color: #d6283b; }
.veh-flecha { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.veh-chips { display: contents; }
.veh-chip { display: inline-flex; align-items: center; gap: 4px; background: #e8f4f5;
  color: var(--teal); font-size: 12.5px; font-weight: 700; padding: 4px 5px 4px 10px;
  border-radius: 999px; white-space: nowrap; }
.veh-x { border: none; background: none; color: inherit; font: inherit; font-size: 15px;
  cursor: pointer; line-height: 1; padding: 0 3px; }
.veh-x:hover { color: #d6283b; }
.veh-picker input { flex: 1; min-width: 90px; border: none; outline: none; font: inherit;
  font-size: 14px; padding: 4px 2px; background: transparent; }
.veh-menu { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid var(--linea); border-radius: 12px;
  box-shadow: var(--sombra); max-height: 236px; overflow: auto; padding: 6px; }
.veh-menu-tit { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted); padding: 8px 10px 6px; }
.veh-op { display: block; width: 100%; text-align: left; background: none; border: none;
  font: inherit; font-size: 14px; color: var(--texto); padding: 9px 10px; border-radius: 8px;
  cursor: pointer; }
.veh-op:hover { background: #e8f4f5; color: var(--teal); }
.veh-vacio { padding: 10px; font-size: 13px; color: var(--muted); }

/* ---------- Cotizador en 2 pasos ---------- */
/* en el paso 2 la tarjeta arranca desde arriba: fuera pestañas, titulo y subtitulo */
.cotizador.en-paso2 .cot-tabs, .cotizador.en-paso2 #cotTitulo, .cotizador.en-paso2 #cotPaso { display: none; }
.paso2-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 2px 0 14px; }
.p2-ramo { display: inline-flex; align-items: center; gap: 8px; background: #e8f4f5;
  color: var(--teal); font-weight: 700; font-size: 13px; padding: 6px 14px; border-radius: 999px; }
.p2-ramo svg { width: 16px; height: 16px; }
.p2-cambiar { background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: underline;
  text-underline-offset: 3px; transition: .15s; }
.p2-cambiar:hover { color: var(--teal); }
.cot-progreso { margin: 0 0 16px; }
.cot-progreso b { display: block; font-size: 11.5px; letter-spacing: .4px; color: var(--muted);
  font-weight: 700; text-transform: uppercase; margin-bottom: 7px; }
.prog-barras { display: flex; gap: 6px; }
.prog-seg { height: 4px; border-radius: 999px; background: var(--linea); flex: 1; transition: background .3s; }
.prog-seg.on { background: var(--teal); }
.fila-pasos { display: flex; align-items: center; gap: 14px; }
.fila-pasos .cot-btn { flex: 1; }
.btn-atras { display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
  cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted);
  padding: 10px 2px; transition: .15s; }
.btn-atras:hover { color: var(--teal); }
.btn-atras svg { width: 15px; height: 15px; }
/* transicion deslizada entre pasos */
.fase-entra { animation: pasoIn .28s ease; }
.fase-entra-atras { animation: pasoInAtras .28s ease; }
@keyframes pasoIn { from { opacity: 0; transform: translateX(26px); } }
@keyframes pasoInAtras { from { opacity: 0; transform: translateX(-26px); } }
@media (prefers-reduced-motion: reduce) { .fase-entra, .fase-entra-atras { animation: none; } }

.cot-btn {
  width: 100%; padding: 13px; border: none; border-radius: 999px; background: var(--teal);
  color: #fff; font-family: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer;
  transition: .15s; display: flex; align-items: center; justify-content: center; gap: 9px;
}
.cot-btn svg { width: 16px; height: 16px; }
.cot-btn:hover { background: #256b76; }
/* icono dentro del campo, para los tres datos de contacto */
.campo-ico { position: relative; }
.campo-ico .ico-in { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: #9aa7b6; pointer-events: none; }
.campo-ico input { padding-left: 38px; }
.cot-nota { text-align: center; font-size: 11px; color: var(--muted); margin-top: 10px; }
/* deslizador de aportación */
.campo input[type=range] { width: 100%; padding: 0; height: 5px; border: none; background: var(--linea);
  border-radius: 3px; accent-color: var(--teal); cursor: pointer; }
.rango-pies { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-top: 5px; }
/* select deshabilitado del catálogo encadenado: se ve claramente que aún no toca */
.campo select:disabled { background: #f1f4f7; color: #9aa7b6; cursor: not-allowed; }

.consent { display: flex; gap: 9px; align-items: flex-start; margin: 4px 0 14px;
  font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.consent input { margin-top: 2px; flex: none; }

/* ---------- Bloques de contenido ---------- */
.seccion { padding: 68px 0; }
.seccion.alt { background: #fff; }
.titulo { text-align: center; max-width: 620px; margin: 0 auto 44px; }
.titulo .kicker { color: var(--teal); font-weight: 700; font-size: 13px; text-transform: uppercase;
  letter-spacing: .5px; }
.titulo h2 { font-size: 32px; font-weight: 800; color: var(--azul); margin: 8px 0; }
.titulo p { color: var(--muted); font-size: 15.5px; }

.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.paso { text-align: center; }
.paso .num { width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--azul)); color: #fff; font-weight: 800;
  display: grid; place-items: center; font-size: 18px; }
.paso h4 { font-size: 16px; color: var(--azul); margin-bottom: 6px; }
.paso p { font-size: 13.5px; color: var(--muted); }

/* ---------- Nuestros seguros: arquitectura de la maqueta del 6 de agosto ---------- */
.sec-ramos { position: relative; overflow: hidden; }
.marca-agua { position: absolute; top: -30px; right: -50px; width: 340px; height: 340px;
  color: var(--teal); opacity: .06; pointer-events: none;
  animation: flotar 14s ease-in-out infinite alternate; }
@keyframes flotar { from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(20px) rotate(4deg); } }
.grupo-toggle { display: flex; justify-content: center; gap: 6px; margin: -18px auto 30px;
  background: #eef2f5; border-radius: 999px; padding: 5px; width: max-content; }
.gt-btn { display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 14px; color: var(--muted);
  background: none; padding: 9px 22px; border-radius: 999px; transition: .18s; }
.gt-btn svg { width: 17px; height: 17px; }
.gt-btn.on { background: #fff; color: var(--teal); box-shadow: var(--sombra-sm); }
.ramos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  transition: opacity .16s ease, transform .16s ease; }
.ramos.cambiando { opacity: 0; transform: translateY(6px); }
/* Empresas son solo 2 tarjetas: van centradas pero con EXACTAMENTE el mismo ancho
   de columna que Personas. Antes un tope fijo de 420px las dejaba 33px mas
   angostas y se notaba al alternar. La cuenta es el ancho de la reticula menos
   los dos huecos, entre 3 columnas. */
.ramos.solo-empresas { grid-template-columns: repeat(2, calc((100% - 40px) / 3));
  justify-content: center; }
.ramo-card {
  position: relative; background: #fff; border: 1px solid var(--linea); border-radius: var(--r);
  padding: 26px 20px 22px; text-align: center; transition: .18s; cursor: pointer;
}
.ramo-card:hover, .ramo-card:focus-visible { transform: translateY(-4px); box-shadow: var(--sombra); border-color: var(--teal); outline: none; }
/* brillo radial que persigue al cursor dentro de la tarjeta (coordenadas via JS) */
.ramo-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%),
    rgba(47,135,148,.10), transparent 55%);
  opacity: 0; transition: opacity .25s; pointer-events: none; }
.ramo-card:hover::before { opacity: 1; }
/* cuando el cursor la inclina, la transicion corta para que siga la mano */
.ramo-card.tienta { transition: transform .14s ease-out, box-shadow .2s, border-color .2s; }
.ico-circ { display: flex; width: 62px; height: 62px; border-radius: 50%; background: #e8f4f5;
  align-items: center; justify-content: center; margin: 0 auto 14px; transition: .2s; }
.ico-circ .ico { width: 28px; height: 28px; color: var(--teal); transition: .2s; }
.ramo-card:hover .ico-circ { background: var(--teal); }
.ramo-card:hover .ico-circ .ico { color: #fff; }
/* anillo que pulsa una vez al entrar el cursor */
.ico-circ { position: relative; }
.ico-circ::after { content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid var(--teal); opacity: 0; pointer-events: none; }
.ramo-card:hover .ico-circ::after { animation: anillo .65s ease-out; }
@keyframes anillo { 0% { opacity: .5; transform: scale(.82); } 100% { opacity: 0; transform: scale(1.3); } }
.ramo-card h4 { font-size: 16px; color: var(--azul); margin-bottom: 6px; }
.ramo-card p { font-size: 13px; color: var(--muted); min-height: 40px; }
.ramo-liga { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  color: var(--teal); font-size: 13px; font-weight: 700; }
.ramo-liga svg { width: 14px; height: 14px; transition: transform .2s; }
.ramo-card:hover .ramo-liga svg { transform: translateX(4px); }
.oculta-r { display: none !important; }
/* tarjetas mini-editorial: chip + texto a la izquierda, foto sangrada al borde derecho */
.ramo-card { display: grid; grid-template-columns: 1fr 40%; padding: 0; text-align: left;
  overflow: hidden; min-height: 235px; }
.rc-cuerpo { padding: 20px 16px 18px 20px; display: flex; flex-direction: column;
  align-items: flex-start; }
.ramo-card .testi-chip { margin-bottom: 12px; font-size: 11.5px; padding: 4px 11px; }
.ramo-card .testi-chip svg { width: 14px; height: 14px; }
/* el titular editorial de la maqueta, a escala de tarjeta */
.ramo-card h4 { font-size: 19px; line-height: 1.22; font-weight: 800; color: var(--azul);
  margin-bottom: 7px; }
.ramo-card p { font-size: 12.5px; line-height: 1.5; min-height: 0; flex: 1; }
.ramo-card .ramo-liga { margin-top: 12px; font-size: 12.5px; }
.rc-foto { width: 100%; height: 100%; object-fit: cover; }
/* franja del asesor */
.asesor-strip { display: flex; align-items: center; justify-content: space-between; gap: 22px;
  background: var(--bg); border: 1px solid var(--linea); border-radius: var(--r);
  padding: 18px 24px; margin-top: 26px; flex-wrap: wrap; }
.as-izq { display: flex; align-items: center; gap: 13px; }
.as-izq > svg { width: 34px; height: 34px; color: var(--teal); flex: none; }
.as-izq b { display: block; font-size: 14.5px; color: var(--azul); }
.as-izq span { display: block; font-size: 12.5px; color: var(--muted); }
.as-items { display: flex; gap: 26px; flex-wrap: wrap; }
.as-item { display: flex; align-items: center; gap: 9px; font-size: 11px; color: var(--muted);
  line-height: 1.35; }
.as-item svg { width: 19px; height: 19px; color: var(--teal); flex: none; }
.ver-todos-wrap { text-align: center; margin-top: 26px; }
.btn-ver-todos { display: inline-flex; align-items: center; gap: 9px; background: var(--teal);
  color: #fff; border: none; cursor: pointer; font-family: inherit; font-weight: 700;
  font-size: 14.5px; padding: 13px 26px; border-radius: 999px; transition: .18s; }
.btn-ver-todos:hover { background: #256b76; transform: translateY(-1px); }
.btn-ver-todos svg { width: 16px; height: 16px; }
/* ---------- Testimonios ---------- */
.testi-pill { display: flex; align-items: center; justify-content: center; gap: 16px;
  width: max-content; max-width: 100%; margin: -14px auto 34px; background: #fff;
  border: 1px solid var(--linea); border-radius: 999px; padding: 11px 22px;
  box-shadow: var(--sombra-sm); flex-wrap: wrap; }
.testi-pill .estrellas { display: inline-flex; gap: 2px; }
.testi-pill .estrella { width: 17px; height: 17px; }
.tp-sep { width: 1px; height: 18px; background: var(--linea); }
.tp-item { display: inline-flex; align-items: center; gap: 7px; font-size: 13px;
  font-weight: 600; color: var(--muted); }
.tp-item svg { width: 17px; height: 17px; color: var(--teal); }
.testi-pista { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.testi { position: relative; display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--linea); border-radius: var(--r); padding: 22px 20px 18px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.testi:hover { transform: translateY(-5px); box-shadow: var(--sombra); border-color: #bfe3e6; }
.testi-chip { display: inline-flex; align-items: center; gap: 7px; width: max-content;
  background: #e8f4f5; color: var(--teal); font-size: 12px; font-weight: 700;
  padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
.testi-chip svg { width: 15px; height: 15px; }
.testi-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.comilla { font-size: 44px; line-height: .6; color: var(--teal); font-weight: 800;
  transform: translateY(9px); }
.estrellas { display: inline-flex; gap: 2px; }
.testi .estrella { width: 17px; height: 17px; opacity: 0;
  transform: scale(.2) rotate(-25deg); }
/* las estrellas aparecen una por una cuando la tarjeta ya se revelo */
.testi.vista .estrella { animation: estpop .4s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay: calc(.35s + var(--i) * 70ms); }
@keyframes estpop { to { opacity: 1; transform: none; } }
.testi-texto { font-size: 13.5px; color: var(--texto); line-height: 1.65; flex: 1; }
.testi-firma { display: flex; align-items: center; gap: 11px; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--linea); }
.avatar-foto { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--linea); }
.avatar { display: flex; align-items: center; justify-content: center; width: 42px;
  height: 42px; border-radius: 50%; flex: none; color: #fff; font-weight: 700;
  font-size: 13.5px; letter-spacing: .5px;
  background: linear-gradient(135deg, var(--teal), #16505c); }
.testi-firma b { display: block; font-size: 13.5px; color: var(--azul); }
.testi-firma span:not(.avatar) { display: block; font-size: 12px; color: var(--muted); }
.testi-puntos { display: none; }

/* ---------- Revision de poliza ---------- */
.rev-grid { display: grid; grid-template-columns: 440px 1fr; gap: 60px; align-items: center; }
.rev-figura { position: relative; margin: 0; }
.rev-foto { display: block; width: 100%; height: auto;
  /* la foto ya trae fondo blanco puro: se funde sola con la seccion, sin mascara */
  animation: flotar-suave 18s ease-in-out infinite alternate; }
@keyframes flotar-suave { from { transform: translateY(0); } to { transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .rev-foto { animation: none; } }
.rev-texto h2 { font-size: 30px; font-weight: 800; color: var(--azul); margin-bottom: 12px; }
.rev-texto h2 span { color: var(--teal); }
.rev-texto > p { color: var(--muted); font-size: 15.5px; margin-bottom: 22px; max-width: 560px; }
.rev-lista { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.rev-lista li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px;
  color: var(--texto); }
.rev-lista svg { width: 20px; height: 20px; flex: none; color: var(--teal); margin-top: 1px; }
.rev-lista b { color: var(--azul); }
.btn-rev { display: inline-flex; align-items: center; gap: 9px; background: var(--teal);
  color: #fff; font-weight: 700; font-size: 15px; padding: 13px 26px; border-radius: 999px;
  transition: .18s; }
.btn-rev:hover { background: #256b76; transform: translateY(-1px); }
.btn-rev svg { width: 16px; height: 16px; }
.rev-micro { font-size: 12.5px; color: var(--muted); margin-top: 10px; }

/* ---------- Popup del cotizador ---------- */
.cot-ov { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  padding: 24px; background: rgba(8,30,42,.55); backdrop-filter: blur(6px) saturate(120%);
  animation: ovIn .28s ease forwards; overflow-y: auto; }
.cot-ov[hidden] { display: none; }
.cot-ov.cerrando { animation: ovOut .2s ease forwards; }
@keyframes ovIn { from { opacity: 0; } }
@keyframes ovOut { to { opacity: 0; } }
.cot-ov-caja { position: relative; width: 100%; max-width: 560px;
  animation: cajaIn .34s cubic-bezier(.2,.8,.3,1) forwards; }
.cot-ov.cerrando .cot-ov-caja { animation: cajaOut .2s ease forwards; }
@keyframes cajaIn { from { opacity: 0; transform: translateY(18px) scale(.965); } }
@keyframes cajaOut { to { opacity: 0; transform: translateY(10px) scale(.98); } }
.cot-ov-caja .cotizador { width: 100%; max-width: none; box-shadow: 0 30px 70px rgba(6,22,32,.35); }
/* dentro del popup la tarjeta puede respirar mas: el hero ya no la limita */
.cot-ov-caja .cot-cuerpo { max-height: min(76vh, 680px); }
.cot-ov-x { position: absolute; top: -14px; right: -14px; z-index: 2; width: 38px; height: 38px;
  border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center;
  background: #fff; color: var(--azul); box-shadow: 0 6px 18px rgba(6,22,32,.28);
  transition: transform .18s, background .18s, color .18s; }
.cot-ov-x:hover { background: var(--azul); color: #fff; transform: rotate(90deg); }
.cot-ov-x svg { width: 17px; height: 17px; }
/* mientras el popup vive, la pagina no se desplaza detras */
body.sin-scroll { overflow: hidden; }
@media (max-width: 640px) {
  .cot-ov { padding: 14px; align-items: start; }
  .cot-ov-caja { margin-top: 30px; }
  .cot-ov-x { top: -12px; right: -6px; width: 34px; height: 34px; }
  .cot-ov-caja .cot-cuerpo { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cot-ov, .cot-ov-caja, .cot-ov.cerrando, .cot-ov.cerrando .cot-ov-caja { animation: none; }
}

/* ---------- Botón flotante de contacto ---------- */
.fab-zona { position: fixed; right: 22px; bottom: 22px; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.fab { position: relative; width: 56px; height: 56px; border-radius: 50%; border: none;
  cursor: pointer; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, #3f9aa6, var(--teal));
  box-shadow: 0 10px 26px rgba(11,42,56,.28); transition: transform .22s cubic-bezier(.34,1.4,.64,1), box-shadow .22s; }
.fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 32px rgba(11,42,56,.34); }
.fab svg { width: 25px; height: 25px; position: absolute; transition: opacity .2s, transform .28s; }
.fab-ico-cerrar { opacity: 0; transform: rotate(-90deg) scale(.6); }
.fab.abierto .fab-ico-abrir { opacity: 0; transform: rotate(90deg) scale(.6); }
.fab.abierto .fab-ico-cerrar { opacity: 1; transform: none; }
/* latido sutil que llama la atencion sin gritar; se detiene al primer clic */
.fab::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--teal); animation: fabPulso 2.8s ease-out infinite; }
.fab.abierto::after, .fab.usado::after { display: none; }
@keyframes fabPulso { 0% { opacity: .55; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.45); } }
.fab-opciones { display: flex; flex-direction: column; gap: 9px; align-items: flex-end; }
/* el atributo hidden lo pisaba el display:flex de arriba (una clase gana al
   estilo del navegador), asi que las opciones se veian siempre */
.fab-opciones[hidden] { display: none; }
.fab-op { display: flex; align-items: center; gap: 9px; background: #fff;
  border-radius: 999px; padding: 5px 15px 5px 6px; box-shadow: 0 6px 20px rgba(11,42,56,.14);
  opacity: 0; transform: translateY(14px) scale(.94);
  animation: fabIn .34s cubic-bezier(.34,1.4,.64,1) forwards;
  animation-delay: calc(var(--i, 1) * 60ms); transition: transform .18s, box-shadow .18s; }
.fab-op:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(11,42,56,.22); }
.fab-zona.cerrando .fab-op { animation: fabOut .18s ease forwards; animation-delay: 0s; }
@keyframes fabIn { to { opacity: 1; transform: none; } }
@keyframes fabOut { to { opacity: 0; transform: translateY(10px) scale(.96); } }
.fab-op-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  flex: none; }
.fab-op-ico svg { width: 16px; height: 16px; }
.fab-op-ico.llamada { background: #e8f4f5; color: var(--teal); }
.fab-op-ico.whats { background: #e6f7ec; color: #25d366; }
/* una sola linea: con dos renglones la pildora medía 48px contra los 56 del boton
   y competian; asi el boton manda y las etiquetas lo acompañan */
.fab-op-txt { font-size: 13px; font-weight: 600; color: var(--azul); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .fab::after { animation: none; }
  .fab-op { animation: none; opacity: 1; transform: none; }
  .fab-zona.cerrando .fab-op { animation: none; }
}
@media (max-width: 640px) {
  .fab-zona { right: 16px; bottom: 16px; }
  .fab { width: 54px; height: 54px; }
  .fab svg { width: 24px; height: 24px; }
  .fab-op { padding: 5px 13px 5px 5px; }
  .fab-op-txt { font-size: 12.5px; }
}

/* ---------- Newsletter del pie ---------- */
.news-banda { display: flex; align-items: center; justify-content: space-between; gap: 26px;
  padding: 6px 0 30px; margin-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.13);
  flex-wrap: wrap; }
.news-izq { display: flex; align-items: center; gap: 14px; }
.news-izq > svg { width: 30px; height: 30px; color: var(--teal-claro); flex: none; }
.news-izq b { display: block; font-size: 16px; color: #fff; }
.news-izq span { display: block; font-size: 12.5px; color: #b9cdd4; }
.news-form { display: flex; gap: 10px; position: relative; flex-wrap: wrap; }
.news-form input { width: 300px; max-width: 100%; padding: 12px 18px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff;
  font-family: inherit; font-size: 14px; transition: .18s; }
.news-form input::placeholder { color: #8fa6ae; }
.news-form input:focus { outline: none; border-color: var(--teal-claro);
  box-shadow: 0 0 0 3px rgba(126,222,224,.18); background: rgba(255,255,255,.12); }
.news-btn { display: inline-flex; align-items: center; gap: 9px; background: var(--teal);
  color: #fff; border: none; cursor: pointer; font-family: inherit; font-weight: 700;
  font-size: 14px; padding: 12px 22px; border-radius: 999px; transition: .18s;
  overflow: hidden; position: relative; }
.news-btn:hover { background: #256b76; transform: translateY(-1px); }
.news-btn .avion { width: 16px; height: 16px; }
/* el avion despega al enviar */
.news-btn.enviando .avion { animation: despega .55s ease-in forwards; }
@keyframes despega { to { transform: translate(46px, -30px) rotate(20deg); opacity: 0; } }
.news-form.error input { border-color: #ff9d9d; animation: tiembla .3s ease; }
@keyframes tiembla { 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); }
  70% { transform: translateX(-3px); } 100% { transform: translateX(0); } }
.news-err { display: none; width: 100%; font-size: 12px; color: #ffb3b3; padding: 4px 18px 0; }
.news-form.error .news-err { display: block; }
.news-form.enviado { opacity: 0; transform: translateY(-8px); transition: .3s; pointer-events: none; }
.news-ok { display: flex; align-items: center; gap: 12px; opacity: 0; transform: translateY(8px);
  transition: opacity .45s ease .25s, transform .45s ease .25s; }
.news-ok.visible { opacity: 1; transform: none; }
.news-ok svg { width: 30px; height: 30px; color: var(--teal-claro); flex: none; }
.news-ok b { display: block; font-size: 15px; color: #fff; }
.news-ok span { display: block; font-size: 12px; color: #b9cdd4; }
@media (prefers-reduced-motion: reduce) {
  .news-btn.enviando .avion, .news-form.error input { animation: none; }
  .news-ok { transition: none; }
}

/* ---------- revelado al hacer scroll: sutil, y apagado si el usuario pide
   menos movimiento. Los retardos escalonados los pone el JS con --d. ---------- */
.anim { opacity: 0; transform: translateY(18px) scale(.97); filter: blur(6px);
  transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1),
              filter .6s ease; transition-delay: var(--d, 0s); }
.anim.vista { opacity: 1; transform: none; filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .anim { opacity: 1; transform: none; filter: none; transition: none; }
  .ramos { transition: none; }
  .marca-agua { animation: none; }
  .ramo-card:hover .ico-circ::after { animation: none; }
  .testi .estrella { opacity: 1; transform: none; animation: none; }
}

.difs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.dif { text-align: center; }
.ico-dif { width: 38px; height: 38px; margin: 0 auto 12px; color: var(--teal); stroke-width: 1.5; }
.dif h4 { font-size: 15.5px; color: var(--azul); margin-bottom: 6px; }
.dif p { font-size: 13px; color: var(--muted); }

/* ---------- Preguntas frecuentes ---------- */
/* Acordeón con <details> nativo: accesible de fábrica, navegable con teclado
   y funciona aunque el guion no cargue. */
.faq { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--r);
  box-shadow: var(--sombra-sm); overflow: hidden; transition: .18s;
}
.faq-item[open] { border-color: var(--teal); box-shadow: var(--sombra); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; font-weight: 600; font-size: 15.5px; color: var(--azul);
  cursor: pointer; list-style: none; user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--teal); }
.faq-item summary:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.faq-mas { width: 20px; height: 20px; flex: none; color: var(--teal); transition: transform .22s; }
.faq-item[open] .faq-mas { transform: rotate(180deg); }
.faq-cuerpo { padding: 0 22px 20px; }
.faq-cuerpo p { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin: 0; }
.faq-pie { text-align: center; margin-top: 26px; font-size: 14px; color: var(--muted); }
.faq-pie a { color: var(--teal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Pie ---------- */
.footer { background: var(--azul); color: #b9cdd4; padding: 54px 0 26px; font-size: 13.5px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 34px; margin-bottom: 34px; }
.footer h5 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer a:hover { color: var(--teal-claro); }
.footer .marca img { height: 42px; width: auto; margin-bottom: 14px; }
.footer /* contacto corporativo del pie: iconos solidos y redes con su color de marca,
   recreados a mano — el sitio original los traia de un CDN externo */
.lista-contacto li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.lista-contacto svg { width: 21px; height: 21px; flex: none; color: var(--teal-claro); }
.lista-contacto a { display: flex; align-items: center; gap: 12px; }
.redes { display: flex; gap: 14px; margin-top: 20px; }
.red { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  border-radius: 50%; transition: .18s; }
.red svg { width: 34px; height: 34px; }
.red:hover { transform: translateY(-3px) scale(1.05); }
.red-ig { background: radial-gradient(circle at 30% 110%, #fdc468 0%, #f77737 26%,
  #dd2a7b 55%, #8134af 82%, #515bd4 100%); }

.legal { border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px;
  font-size: 12px; color: #8ba3ab; line-height: 1.7; }

/* ---------- Modal de resultado ---------- */
.modal-ov { position: fixed; inset: 0; background: rgba(8,30,42,.6); z-index: 100;
  display: none; place-items: center; padding: 20px; }
.modal-ov.abierto { display: grid; }
.modal { background: #fff; border-radius: var(--r); max-width: 440px; width: 100%; padding: 32px;
  text-align: center; box-shadow: var(--sombra); }
.modal .check { width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 50%;
  background: #e3f8ee; color: #19a06a; display: grid; place-items: center; font-size: 32px; }
.modal h3 { font-size: 21px; color: var(--azul); margin-bottom: 10px; }
.modal p { color: var(--muted); font-size: 14.5px; margin-bottom: 8px; }
.modal .resumen { background: #f6f8fa; border-radius: 9px; padding: 14px; text-align: left;
  font-size: 13px; margin-bottom: 18px; }
.modal .resumen div { display: flex; justify-content: space-between; padding: 3px 0; }
.modal .resumen b { color: var(--azul); }
.modal-pie { font-size: 12.5px; }
.modal-pie a { color: var(--teal); font-weight: 600; }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  /* En celular el cotizador sube: kicker + titular + subtitulo y de inmediato el
     formulario; viñetas, llamadas y sellos pasan abajo como refuerzo. El truco es
     display:contents — los hijos de .hero-texto se vuelven items de la reticula
     del hero y se ordenan junto con la tarjeta, sin tocar el HTML. */
  .hero-texto { display: contents; }
  /* sin gap de reticula: con display:contents el gap de 56px se metia entre cada
     pieza; los margenes propios de cada elemento ya dan el ritmo correcto */
  .hero .contenedor { gap: 0; }
  .hero-texto .kicker { order: 1; }
  .hero-texto h1 { order: 2; text-shadow: 0 1px 12px rgba(6,22,32,.45); }
  .hero-texto p { order: 3; text-shadow: 0 1px 12px rgba(6,22,32,.45); }
  .cotizador { order: 4; }
  .hero-bull { order: 5; margin-top: 26px; text-shadow: 0 1px 10px rgba(6,22,32,.4); }
  .hero-ctas { order: 6; }
  .hero-sellos { order: 7; }
  /* con el formulario a la vista, el boton que lleva al formulario sobra */
  .btn-hero { display: none; }
  /* el velo de escritorio es horizontal porque alli el texto vive en la mitad izquierda.
     En movil el texto cruza todo el ancho y caia sobre la parte clara de la foto: medido,
     el subtitulo daba 1.19:1 contra el 4.5:1 que exige WCAG AA. Aqui va vertical, oscuro
     donde esta el texto y mas abierto abajo, que de todos modos lo tapa el cotizador. */
  .hero::before {
    /* mas abierto que antes (.90/.85): el fondo dinamico por ramo — peticion
       expresa del cliente — era invisible en celular. Medido: aun asi todos los
       ramos quedan arriba de 4.5:1; la tarjeta blanca cubre la zona baja. */
    background: linear-gradient(180deg, rgba(8,30,42,.75) 0%, rgba(8,30,42,.78) 38%,
                                        rgba(8,30,42,.84) 60%, rgba(8,30,42,.84) 100%);
  }
  .hero .contenedor { grid-template-columns: minmax(0, 1fr); }
  .cotizador { max-width: 520px; width: 100%; }
  .pasos, .ramos, .difs { grid-template-columns: repeat(2, 1fr); }
  .ramos.solo-empresas { grid-template-columns: repeat(2, 1fr); }
  .asesor-strip { justify-content: center; text-align: left; }
  .ramo-card.editorial { grid-column: span 2; grid-template-columns: 1fr 44%; }
  .rev-grid { grid-template-columns: 1fr; gap: 26px; }
  .rev-figura { min-height: 300px; max-width: 330px; margin: 0 auto; width: 100%; }
  /* testimonios: carrusel deslizable con ajuste por tarjeta */
  .testi-pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 14px; padding-bottom: 6px; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; }
  .testi-pista::-webkit-scrollbar { display: none; }
  .testi { flex: 0 0 82%; scroll-snap-align: center; }
  .tp-sep { display: none; }   /* al envolver la pill, la rayita quedaba huerfana */
  .testi-puntos { display: flex; justify-content: center; gap: 7px; margin-top: 16px; }
  .punto { width: 8px; height: 8px; border-radius: 999px; background: #cdd9e0;
    transition: .25s; }
  .punto.on { width: 22px; background: var(--teal); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .nav { display: none; }
  .cot-tabs { grid-template-columns: repeat(3, 1fr); }
  .cot-tab { font-size: 10.5px; }
  /* el scroll interno de la tarjeta es incomodo al tacto: en telefono la pagina
     entera desplaza y la tarjeta crece natural */
  .cot-cuerpo { max-height: none; }
  /* a menos de 16px, iOS hace zoom automatico al enfocar un campo */
  .campo input, .campo select { font-size: 16px; }
  /* telefono y correo apilados: a dos columnas en 375px los campos se estrangulan */
  .grupo-2 { grid-template-columns: 1fr; }
  /* las mini-editoriales necesitan ancho: en telefono van una por fila; a dos
     columnas el chip reventaba la retícula y el overflow se tragaba la foto */
  .ramos, .ramos.solo-empresas { grid-template-columns: 1fr; }
  .ramo-card { min-height: 150px; }
  .ico-tab { width: 20px; height: 20px; }
  .hero-ctas { gap: 14px; }
  /* en movil los sellos se envuelven: sin rayas separadoras, que el que baja
     de fila arrastraba la suya como un palo suelto */
  .hero-sellos { gap: 12px 22px; }
  .sello { padding: 0; }
  .sello + .sello { border-left: none; }
  .hero .contenedor { padding-top: 32px; padding-bottom: 32px; min-height: 0; }
  .hamburguesa { display: block; margin-left: auto; }
  .header .contenedor { gap: 12px; }
  .hero-texto h1 { font-size: 32px; }
  .titulo h2 { font-size: 25px; }
  .pasos { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}