/* Web pública asegurados.com.ar (venta online auto/moto). Paleta azul (canvas 1-oct-2026). Sólo fuentes del
   sistema: el CSP de la app cierra font-src a 'self'. Sin handlers inline (script-src 'self'). */
:root{ --marino:#0F2454; --azul:#2563EB; --azul-osc:#1D4ED8; --cian:#0EA5E9; --celeste:#E8F0FF; --fondo:#F7F9FC;
  --gris:#64748B; --gris-osc:#4A5B82; --linea:#E3E8F2; --borde:#C7D2E8; --wa:#25D366; --err:#B4234A; }
*{ box-sizing:border-box }
html,body{ margin:0; background:var(--fondo); color:var(--marino); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased }
a{ color:var(--azul) }
svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.oculta{ position:absolute; left:-9999px }
.pantalla[hidden]{ display:none }
.pantalla{ min-height:100dvh; display:flex; flex-direction:column; position:relative }

/* ---- marca ---- */
.logo{ display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:22px; letter-spacing:-.02em; color:var(--marino); text-decoration:none }
.logo i{ width:30px; height:30px; border-radius:999px; background:linear-gradient(135deg,var(--azul),var(--cian)); display:grid; place-items:center }
.logo i svg{ width:16px; height:16px; stroke:#fff; stroke-width:3 }

/* ---- landing ---- */
.landing{ overflow:hidden }
.blob{ position:absolute; border-radius:999px; filter:blur(70px); opacity:.6; pointer-events:none }
.b1{ width:560px; height:560px; background:#BFDBFE; top:-200px; right:-140px }
.b2{ width:420px; height:420px; background:#A5F3FC; bottom:-220px; left:-160px }
.top{ position:relative; display:flex; align-items:center; justify-content:space-between; height:72px; padding:0 32px; max-width:1180px; width:100%; margin:0 auto }
.nav-links{ display:flex; gap:28px; font-size:15px; font-weight:600 } .nav-links a{ color:var(--marino); text-decoration:none }
.wa-top{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--marino); text-decoration:none; min-height:44px } .wa-top svg{ width:18px; height:18px; stroke:var(--wa) }
.hero{ position:relative; flex:1; display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; padding:8px 32px; max-width:1180px; width:100%; margin:0 auto }
.hero-tx{ display:flex; flex-direction:column; gap:22px }
.kick{ display:inline-flex; align-items:center; gap:16px; align-self:flex-start; width:max-content; max-width:100%; white-space:nowrap; padding:10px 20px 10px 18px; border-radius:16px; background:#fff; border:1px solid var(--linea); box-shadow:0 12px 32px rgba(29,78,216,.10); line-height:1; margin-bottom:4px }
.kick-n{ display:flex; flex-direction:column; align-items:flex-start }
.kick small{ font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--azul-osc); margin-bottom:4px }
.kick b{ font-size:34px; font-weight:900; letter-spacing:-.04em; background:linear-gradient(90deg,#1D4ED8,#2DA8FF); -webkit-background-clip:text; background-clip:text; color:transparent }
.kick i{ width:1px; align-self:stretch; background:var(--linea) }
.kick-t{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--marino); line-height:1.3 }
.kick-t svg{ width:22px; height:22px; fill:none; stroke:var(--azul); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; flex:0 0 auto }
h1{ margin:0; font-size:54px; line-height:1.02; letter-spacing:-.035em; font-weight:800; text-wrap:pretty }
.grad{ background:linear-gradient(90deg,var(--azul),var(--cian)); -webkit-background-clip:text; background-clip:text; color:transparent }
.sub{ margin:0; font-size:18px; line-height:1.55; color:var(--gris-osc); max-width:470px }
.card{ background:#fff; border:1px solid var(--linea); border-radius:24px; padding:22px; box-shadow:0 30px 70px rgba(15,36,84,.12); display:flex; flex-direction:column; gap:14px }
.tabs{ display:flex; gap:4px; padding:4px; background:#EEF3FB; border-radius:14px; align-self:flex-start }
.tab{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border-radius:12px; border:0; background:transparent; font:inherit; font-weight:600; font-size:15px; color:var(--gris); cursor:pointer }
.tab svg{ width:18px; height:18px } .tab.on{ background:#fff; color:var(--marino); box-shadow:0 2px 10px rgba(15,36,84,.08) } .tab[hidden]{ display:none }
.campo{ display:flex; flex-direction:column; gap:6px } .campo label{ font-size:13px; font-weight:600; color:var(--gris-osc) }
.inp{ width:100%; min-height:48px; padding:0 14px; border-radius:12px; border:1.5px solid var(--borde); font:inherit; font-size:16px; color:var(--marino); background:#fff; -webkit-appearance:none }
.inp:focus{ outline:none; border-color:var(--azul); box-shadow:0 0 0 3px rgba(37,99,235,.15) }
.inp.pat{ text-transform:uppercase; padding-right:44px } .inp:disabled{ background:#F3F6FB; color:var(--gris) }
select.inp{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:40px }
.con-icono{ position:relative } .con-icono svg{ position:absolute; right:14px; top:14px; width:20px; height:20px; stroke:var(--gris) }
.ayuda-campo{ font-size:12px; color:var(--gris); min-height:14px } .ayuda-campo.ok{ color:var(--azul-osc); font-weight:600 } .ayuda-campo.err{ color:var(--err) } .ayuda-campo:empty{ display:none }
.campo{ position:relative } .loc-opciones{ position:absolute; left:0; right:0; top:100%; z-index:20; margin-top:4px; display:flex; flex-direction:column; gap:2px; padding:6px; background:#fff; border:1px solid var(--linea); border-radius:12px; box-shadow:0 12px 32px rgba(15,23,42,.14); max-height:260px; overflow:auto } .loc-opciones button{ text-align:left; padding:10px 12px; border-radius:8px; border:0; background:#fff; cursor:pointer; font:inherit; font-size:14px; color:var(--marino) } .loc-opciones button:hover{ background:var(--celeste) }
.btn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:54px; padding:0 26px; border-radius:999px; background:linear-gradient(90deg,var(--azul),var(--cian)); color:#fff; font:inherit; font-weight:700; font-size:16px; border:0; text-decoration:none; cursor:pointer; box-shadow:0 10px 28px rgba(37,99,235,.28) }
.btn svg{ width:18px; height:18px; stroke-width:2.5 } .btn[disabled]{ opacity:.55; cursor:default }
.btn.wa{ background:var(--wa); color:#fff; box-shadow:0 10px 24px rgba(37,211,102,.28) } .btn.wa svg{ stroke:#fff }
.btn.sec{ background:#fff; color:var(--marino); border:1.5px solid var(--borde); box-shadow:none } .btn.sec svg{ stroke:var(--wa) }
.link{ display:flex; align-items:center; justify-content:center; min-height:44px; font-size:14px; font-weight:600; color:var(--azul); text-decoration:none }
.error{ padding:12px 14px; border-radius:12px; background:#FBE3E8; color:#7A1330; font-size:13px; line-height:1.4 } .error[hidden]{ display:none }
.logos{ position:relative; display:flex; align-items:center; justify-content:center; gap:56px; flex-wrap:nowrap; padding:0 32px 28px } .logos img{ height:30px; width:auto; max-width:200px; object-fit:contain; display:block }
.pie-legal{ position:relative; border-top:1px solid var(--linea); min-height:52px; display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap; padding:12px 32px; max-width:1180px; width:100%; margin:0 auto; font-size:12px; color:var(--gris) } .pie-legal strong{ color:var(--marino) }
.pie-links{ display:flex; justify-content:center; gap:18px } .pie-links a{ color:var(--gris) }
.wa-flot{ position:fixed; right:28px; bottom:28px; width:56px; height:56px; border-radius:999px; background:var(--wa); display:grid; place-items:center; box-shadow:0 10px 24px rgba(37,211,102,.35); z-index:5 } .wa-flot svg{ width:28px; height:28px; stroke:#fff; stroke-width:2.2 } .wa-flot[hidden]{ display:none }

/* ---- pantallas internas (móvil-first, centradas en desktop) ---- */
.top-mini{ display:flex; justify-content:space-between; align-items:center; padding:calc(env(safe-area-inset-top) + 14px) 22px 10px; max-width:520px; width:100%; margin:0 auto }
.top-mini .logo{ font-size:18px } .top-mini .logo i{ width:24px; height:24px } .top-mini .logo i svg{ width:13px; height:13px }
.paso,.volver-chico{ font-size:12px; color:var(--gris); font-weight:600; text-decoration:none }
.barra{ display:flex; gap:6px; padding:0 22px 14px; max-width:520px; width:100%; margin:0 auto } .barra i{ flex:1; height:4px; border-radius:2px; background:var(--borde) } .barra i.on{ background:var(--azul) }
.cuerpo{ padding:4px 22px 22px; display:flex; flex-direction:column; gap:16px; flex:1; max-width:520px; width:100%; margin:0 auto }
.cuerpo.ancho{ max-width:1100px }
.cuerpo.centrado{ align-items:center; text-align:center; padding-top:28px } .cuerpo.centrado .campo{ width:100% }
h2{ margin:0; font-size:28px; line-height:1.1; letter-spacing:-.03em; font-weight:800 }
.cuerpo .sub{ font-size:15px }
.circ{ width:64px; height:64px; border-radius:999px; background:var(--celeste); display:grid; place-items:center } .circ svg{ width:30px; height:30px; stroke:var(--wa); stroke-width:2.2 }
.resumen{ font-size:13px; color:var(--gris); background:#fff; border:1px solid var(--linea); border-radius:12px; padding:10px 14px; width:100% } .resumen:empty{ display:none }
.pie{ margin-top:auto; display:flex; flex-direction:column; gap:6px; width:100% }
.volver{ text-align:center; font-size:13px; color:var(--gris); text-decoration:none; padding:8px; min-height:44px; display:flex; align-items:center; justify-content:center }
.mini{ font-size:12px; color:var(--gris) }

/* ---- buscando ---- */
@keyframes gira{ to{ transform:rotate(360deg) } }
@keyframes late{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.06) } }
.anillo-wrap{ position:relative; width:96px; height:96px; margin-top:40px }
.anillo{ width:96px; height:96px; border-radius:999px; border:5px solid var(--celeste); border-top-color:var(--azul); animation:gira 1.1s linear infinite }
.centro{ position:absolute; inset:0; display:grid; place-items:center; animation:late 1.6s ease-in-out infinite } .centro svg{ width:34px; height:34px; stroke:var(--azul); stroke-width:2.2 }
.cias-estado{ display:flex; flex-direction:column; gap:12px; align-items:flex-start }
.cia-est{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--gris-osc) }
.cia-est i{ width:18px; height:18px; border-radius:999px; border:2px solid var(--borde); flex:none; display:grid; place-items:center } .cia-est i svg{ width:10px; height:10px; stroke:#fff; stroke-width:4 }
.cia-est.ok{ color:var(--marino) } .cia-est.ok i{ border-color:var(--azul); background:var(--azul) }
.cia-est.no{ color:var(--gris) } .cia-est.no i{ border-color:#D9D7CF; background:#EEF0F4 } .cia-est.no i svg{ stroke:var(--gris) }
@media (prefers-reduced-motion:reduce){ .anillo,.centro{ animation:none } }

/* ---- tabla 4 × 4 ---- */
.tabla-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -22px; padding:0 22px }
.tabla{ width:100%; border-collapse:separate; border-spacing:0; min-width:640px; background:#fff; border:1px solid var(--linea); border-radius:16px; overflow:hidden }
.tabla th,.tabla td{ padding:14px 12px; text-align:center; border-bottom:1px solid var(--linea); vertical-align:middle }
.tabla tr:last-child td{ border-bottom:0 }
.tabla th{ font-size:12px; font-weight:700; color:var(--gris-osc); background:#F3F6FB; letter-spacing:.02em }
.tabla th:first-child,.tabla td:first-child{ text-align:left; width:170px }
.tabla td.cia img{ height:24px; width:auto; max-width:140px; object-fit:contain; display:block }
.tabla td.cia .no-cot{ font-size:11px; color:var(--gris); margin-top:4px; display:block }
.celda{ display:flex; flex-direction:column; align-items:center; gap:4px }
.celda b{ font-size:18px; letter-spacing:-.02em } .celda b small{ font-size:11px; color:var(--gris); font-weight:500 }
.celda span{ font-size:11px; color:var(--gris); line-height:1.25; max-width:150px }
/* Las dos celdas remarcadas: dorada (★ la más elegida) y verde ($ la más económica) */
.tabla td.oro{ background:#FFF7DB; box-shadow:inset 0 0 0 2px #E6B800 } .tabla td.verde{ background:#E9F8EF; box-shadow:inset 0 0 0 2px #22A35A }
.sello{ font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:999px; letter-spacing:.01em } .sello.oro{ background:#E6B800; color:#3D2F00 } .sello.verde{ background:#22A35A; color:#fff }
.tabla td.oro .celda b{ color:#8A6D00 } .tabla td.verde .celda b{ color:#157A41 }
.leyenda{ display:flex; gap:18px; justify-content:center; margin-top:12px; font-size:12px; font-weight:700 } .ley.oro{ color:#8A6D00 } .ley.verde{ color:#157A41 }
.sin{ color:#B9BFCC; font-size:13px }
.pie-ofertas{ display:flex; justify-content:center; padding-top:8px } .pie-ofertas .btn{ max-width:360px }

/* ---- responsive ---- */
@media (max-width:860px){
  .hero{ grid-template-columns:1fr; gap:28px; padding:16px 20px 24px; align-items:start }
  .nav-links{ display:none } .top{ padding:0 20px } h1{ font-size:36px }
  .logos{ gap:18px 28px; padding:0 20px 20px; flex-wrap:wrap } .logos img{ height:20px; max-width:120px }
  .pie-legal{ padding:12px 20px; font-size:11px }
  .wa-flot{ right:16px; bottom:16px }
}

/* Vehículo identificado: logo de la marca + título + versión/año */
.veh-card{ display:flex; align-items:center; gap:12px; margin-top:4px; padding:10px 12px; background:#fff; border:1px solid var(--linea); border-radius:12px; font-size:13px; color:var(--gris) }
.veh-card:empty{ display:none } .veh-logo{ width:40px; height:40px; object-fit:contain; flex:none } .veh-logo[hidden]{ display:none }
.veh-tit{ font-weight:700; font-size:15px; color:var(--marino) } .veh-det{ font-size:12.5px; color:var(--gris); margin-top:2px }
.resumen{ display:flex; align-items:center; gap:12px; text-align:left } .resumen:empty{ display:none }
.fila2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100% } .cuerpo.centrado .campo label,.cuerpo.centrado .ayuda-campo{ text-align:left } @media (max-width:480px){ .fila2{ grid-template-columns:1fr } }


/* El atributo hidden gana a cualquier display de clase (la lista de localidades quedaba abierta) */
[hidden]{ display:none !important }
.cotizando{ display:inline-block; width:16px; height:16px; border-radius:50%; border:2px solid var(--linea); border-top-color:var(--azul); animation:gira .8s linear infinite }

/* Resultado: una sección por cobertura, cards por compañía */
.secciones{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:16px; align-items:start }
.seccion h3{ font-size:14px; font-weight:700; color:var(--marino); margin:0 0 6px; text-align:center }
.cards{ display:flex; flex-direction:column; gap:12px; padding-top:12px }
.oferta{ position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 14px 16px; background:#fff; border:1.5px solid var(--linea); border-radius:16px; text-align:center }
.oferta .cab{ height:28px; display:flex; align-items:center } .oferta .cab img{ height:24px; width:auto; max-width:140px; object-fit:contain }
.oferta .precio{ font-size:24px; font-weight:800; letter-spacing:-.03em; color:var(--marino); min-height:30px; display:flex; align-items:center } .oferta .precio small{ font-size:12px; font-weight:500; color:var(--gris); margin-left:3px }
.oferta .sello{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); white-space:nowrap }
.oferta.oro{ background:#FFF7DB; border-color:#E6B800; box-shadow:0 8px 24px rgba(230,184,0,.18) } .oferta.oro .precio{ color:#8A6D00 }
.oferta.verde{ background:#E9F8EF; border-color:#22A35A; box-shadow:0 8px 24px rgba(34,163,90,.16) } .oferta.verde .precio{ color:#157A41 }
.oferta.pend{ opacity:.7 }
@media (max-width:860px){ .secciones{ grid-template-columns:repeat(2,1fr) } } @media (max-width:480px){ .secciones{ grid-template-columns:1fr } }
.con-tilde{ position:relative } .con-tilde .inp{ padding-right:44px } .tilde{ position:absolute; right:14px; top:14px; width:20px; height:20px; fill:none; stroke:#22A35A; stroke-width:3; stroke-linecap:round; stroke-linejoin:round }
.oferta .plan{ font-size:12px; color:var(--gris); line-height:1.3; margin-top:-4px }

/* Botón «Ver detalle» de la card + modal */
.btn-det{ margin-top:6px; width:100%; min-height:40px; border-radius:10px; border:1.5px solid var(--azul); background:#fff; color:var(--azul); font:inherit; font-size:14px; font-weight:700; cursor:pointer }
.btn-det:hover{ background:var(--celeste) } .oferta.oro .btn-det{ border-color:#C9A200; color:#8A6D00 } .oferta.verde .btn-det{ border-color:#22A35A; color:#157A41 }
.modal{ position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:16px }
.modal-fondo{ position:absolute; inset:0; background:rgba(15,23,42,.45) }
.modal-card{ position:relative; width:100%; max-width:960px; background:#fff; border-radius:20px; padding:28px 24px 24px; box-shadow:0 24px 64px rgba(15,23,42,.25); text-align:center }
.modal-x{ position:absolute; top:10px; right:12px; width:36px; height:36px; border:0; background:transparent; font-size:26px; line-height:1; color:var(--gris); cursor:pointer }
.det-logo{ height:28px; width:auto; max-width:160px; object-fit:contain; margin:0 auto 12px; display:block }
.det-tit{ font-size:18px; font-weight:800; color:var(--marino) } .det-plan{ font-size:12.5px; color:var(--gris); margin-top:2px }
.det-precio{ font-size:30px; font-weight:800; letter-spacing:-.03em; color:var(--azul-osc); margin:12px 0 14px } .det-precio small{ font-size:13px; font-weight:500; color:var(--gris); margin-left:3px }
.det-fila{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--linea); font-size:14px; color:var(--gris-osc) } .det-fila b{ color:var(--marino) }
.det-sub{ margin-top:14px; font-size:12px; font-weight:700; color:var(--gris); text-transform:uppercase; letter-spacing:.04em; text-align:left }
.det-lista{ margin:6px 0 0; padding:0 0 0 18px; text-align:left; font-size:13.5px; color:var(--marino); line-height:1.6 }
/* Ofertas en UNA pantalla, sin scroll: encabezado en una línea y cards compactas */
.cuerpo.ancho{ gap:8px; padding-top:0 }
.cuerpo.ancho h2{ font-size:22px; margin:0 } .cuerpo.ancho > .sub{ font-size:13px; margin:0 }
.secciones{ margin-top:6px; gap:10px }
.seccion h3{ font-size:13px; margin:0 0 2px }
.cards{ gap:8px; padding-top:10px }
.oferta{ padding:12px 10px 10px; gap:5px; border-radius:12px }
.oferta .cab{ height:22px } .oferta .cab img{ height:19px; max-width:120px }
.oferta .precio{ font-size:19px; min-height:22px } .oferta .precio small{ font-size:11px }
.oferta .plan{ font-size:11px; margin-top:-2px }
.btn-det{ margin-top:4px; min-height:32px; font-size:13px; border-radius:8px }
.oferta .sello{ font-size:9.5px; padding:2px 8px; top:-9px }

/* Resultado: cuadro de doble entrada (cías en columnas, coberturas en filas) */
.grilla{ display:grid; grid-template-columns:150px repeat(4,1fr); gap:8px; margin-top:8px; align-items:stretch }
.g-esq{ }
.g-cia{ display:flex; align-items:center; justify-content:center; min-height:52px; background:#fff; border:1px solid var(--linea); border-radius:12px } .g-cia img{ height:22px; width:auto; max-width:130px; object-fit:contain }
.g-fila{ display:flex; flex-direction:column; justify-content:center; gap:2px; padding:10px 12px; background:var(--celeste); border-radius:12px } .g-fila b{ font-size:14px; color:var(--azul-osc) } .g-fila span{ font-size:11.5px; color:var(--gris) }
.g-cel{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:88px; padding:12px 10px; background:#fff; border:1.5px solid var(--linea); border-radius:12px; text-align:center }
.g-cel .precio{ font-size:21px; font-weight:800; letter-spacing:-.03em; color:var(--marino) } .g-cel .precio small{ font-size:11px; font-weight:500; color:var(--gris); margin-left:3px }
.g-cel.sin{ color:var(--gris); font-size:18px; opacity:.6 } .g-cel.pend{ opacity:.7 }
.g-cel.oro{ background:#FFF7DB; border-color:#E6B800; box-shadow:0 8px 24px rgba(230,184,0,.18) } .g-cel.oro .precio{ color:#8A6D00 }
.g-cel .sellos{ position:absolute; top:-9px; left:50%; transform:translateX(-50%); display:flex; gap:4px; white-space:nowrap } .g-cel .sello{ font-size:9.5px; padding:2px 8px }
.g-cel.verde{ background:#E9F8EF; border-color:#22A35A; box-shadow:0 8px 24px rgba(34,163,90,.16) } .g-cel.verde .precio{ color:#157A41 }
.lnk-det{ border:0; background:transparent; font:inherit; font-size:12px; color:var(--azul); text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:2px 6px } .lnk-det:hover{ color:var(--azul-osc) }
.cabecera{ display:grid; grid-template-columns:1fr; gap:10px } .cabecera .resumen{ margin:0; min-height:62px } .avatar{ width:40px; height:40px; border-radius:999px; background:var(--celeste); color:var(--azul-osc); font-weight:800; font-size:18px; display:grid; place-items:center; flex:none } @media (max-width:700px){ .cabecera{ grid-template-columns:1fr } }
@media (max-width:860px){ .grilla{ grid-template-columns:110px repeat(4,1fr); gap:6px } .g-cel .precio{ font-size:15px } .g-cia img{ height:16px; max-width:80px } .g-fila b{ font-size:12px } .g-fila span{ display:none } }
.cliente{ display:flex; gap:14px; align-items:center; justify-content:center; font-size:13px; color:var(--gris) } .cliente b{ color:var(--marino); font-size:14px } .cliente span::before{ content:'·'; margin-right:14px; color:var(--linea) }
.lista{ font-size:12px; color:var(--gris); text-decoration:line-through; display:block; line-height:1 } .g-cel .lista{ margin-bottom:-2px } .modal-card .lista{ margin-top:10px; font-size:13px }
.det-acciones{ display:flex; flex-direction:column; gap:8px; margin-top:18px } .det-acciones .btn{ width:100% }
.circ.ok{ background:#E9F8EF } .circ.ok svg{ stroke:#22A35A; stroke-width:3 }
.g-cia{ flex-direction:column; gap:6px; padding:8px 6px } .g-suma{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 12px; border-radius:10px; background:var(--celeste); line-height:1; white-space:nowrap } .g-suma small{ font-size:9px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gris) } .g-suma b{ font-size:13px; color:var(--azul-osc) }
.g-fila{ justify-content:center } .g-fila b{ font-size:15px }
.g-plan{ font-size:10.5px; color:var(--gris); line-height:1.25; min-height:26px; display:flex; align-items:center; justify-content:center }
.g-cel .btn-det{ margin-top:2px; min-height:28px; font-size:12px; border-radius:8px; border-width:1px; width:auto; padding:0 14px; background:transparent; font-weight:600 }
.g-cel.oro .btn-det{ border-color:#C9A200; color:#8A6D00 } .g-cel.verde .btn-det{ border-color:#22A35A; color:#157A41 }
.g-cel{ min-height:0; padding:12px 8px 10px; gap:3px }

.det-cobs{ margin-top:8px; text-align:left; display:grid; grid-template-columns:repeat(5,1fr); gap:10px }
.det-cob{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:12px 8px 10px; border-radius:14px; background:var(--celeste); border:1px solid transparent }
.det-cob i{ width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#fff; color:var(--azul-osc); box-shadow:0 4px 12px rgba(29,78,216,.10) }
.det-cob i svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.det-cob b{ font-size:12.5px; color:var(--marino); line-height:1.2 } .det-cob span{ font-size:10.5px; color:var(--gris); line-height:1.3; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.det-cob.no{ background:#F5F6F8 } .det-cob.no i{ color:#B4BCCB; box-shadow:none } .det-cob.no b{ color:#9CA3AF } .det-cob.no span{ color:#B4BCCB }
/* Dos paneles: a la izquierda el plan (logo, precio, anual, franquicia, acciones), a la derecha las
   coberturas en DOS columnas → entra en pantalla sin scroll (regla de Martín: nada scrollea). */
.modal-card{ max-height:96vh; overflow:auto; padding:22px 26px 22px; text-align:left }
.det{ display:grid; grid-template-columns:250px 1fr; gap:26px; align-items:start }
.det-izq{ text-align:center; position:sticky; top:0 }
.det-izq .det-tit{ margin-top:4px } .det-izq .det-precio{ margin:8px 0 10px } .det-izq .det-sub{ display:none }
.det-der .det-sub{ margin-top:0 }
@media (max-width:760px){ .det{ grid-template-columns:1fr } .det-cobs{ grid-template-columns:repeat(2,1fr) } .modal-card{ max-width:420px } }

@media (max-width:520px){ .kick{ gap:12px; padding:8px 14px 8px 12px } .kick b{ font-size:26px } .kick-t{ font-size:13px; gap:8px } .kick-t svg{ width:18px; height:18px } }

/* Celular: el cuadro de doble entrada no entra en 375 px (4 cías + rótulo). Pasa a: rótulo de la
   cobertura a todo el ancho y las 4 cías en 2×2 debajo, cada celda con el logo chico de su cía.
   La fila de cabecera (logos + suma asegurada) se oculta; la suma queda en «Ver detalle». */
.g-cel-logo{ display:none } .g-grupo{ display:contents }
@media (max-width:640px){
  .grilla{ display:flex; flex-direction:column; gap:12px }
  .g-esq,.g-cia{ display:none }
  .g-grupo{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:10px; background:#fff; border:1px solid var(--linea); border-radius:16px; box-shadow:0 8px 24px rgba(15,36,84,.06) }
  .g-fila{ grid-column:1 / -1; padding:6px 4px 2px; min-height:0; background:transparent; border-radius:0; align-items:center; text-align:center } .g-fila b{ font-size:15px }
  .g-grupo .g-cel{ background:var(--fondo); border-color:var(--linea) } .g-grupo .g-cel.oro{ background:#FFF7DB } .g-grupo .g-cel.verde{ background:#EEFBF3 }
  .g-cel{ padding:14px 8px 10px; min-height:0 } .g-cel .precio{ font-size:18px }
  .g-cel-logo{ display:block; height:14px; width:auto; max-width:90px; object-fit:contain; margin-bottom:2px }
  .g-cel .sellos{ top:-8px } .g-cel .sello{ font-size:9px; padding:2px 7px }
  .g-plan{ min-height:0 }
}

/* Celular: el detalle entra SIN scroll — cabecera compacta y las 10 coberturas en 3 columnas sin la línea de límite. */
@media (max-width:520px){
  .modal{ padding:10px } .modal-card{ padding:14px 14px 14px; max-height:none }
  .det{ gap:10px } .det-logo{ height:20px; margin-bottom:4px } .det-tit{ font-size:15px } .det-plan{ font-size:11px }
  .det-izq .det-precio{ font-size:24px; margin:4px 0 6px } .modal-card .lista{ margin-top:4px; font-size:11px }
  .det-fila{ padding:6px 0; font-size:12.5px } .det-acciones{ margin-top:8px } .det-acciones .btn{ min-height:44px }
  .det-cobs{ grid-template-columns:repeat(3,1fr); gap:6px; margin-top:4px }
  .det-cob{ padding:8px 4px 7px; gap:4px; border-radius:10px } .det-cob i{ width:28px; height:28px } .det-cob i svg{ width:15px; height:15px }
  .det-cob b{ font-size:10.5px } .det-cob span{ display:none }
}

/* Celular (≤520 px): la landing entra entera en un iPhone (402×874) sin scroll — todo más apretado. */
@media (max-width:520px){
  /* Landing fluida: las medidas escalan con el ALTO real del viewport (dvh = lo visible debajo de las barras del navegador), así entra sin scroll en cualquier celular. */
  .landing{ height:100dvh; min-height:0; display:flex; flex-direction:column; overflow:hidden }
  .top{ height:clamp(44px,7dvh,56px); padding:0 16px } .logo{ font-size:19px } .wa-top{ font-size:13px }
  .hero{ gap:clamp(6px,1.4dvh,12px); padding:0 16px clamp(2px,.8dvh,6px); flex:1; min-height:0; align-content:center }
  .hero-tx{ gap:clamp(5px,1.1dvh,10px); align-items:center; text-align:center } h1{ font-size:clamp(20px,3.6dvh,27px); line-height:1.1 } .sub{ font-size:clamp(12px,1.9dvh,14px); line-height:1.35 }
  .kick{ align-self:center } .tabs{ align-self:center }
  .kick{ padding:clamp(4px,.8dvh,6px) 12px clamp(4px,.8dvh,6px) 10px; gap:10px } .kick b{ font-size:clamp(18px,3dvh,22px) } .kick small{ font-size:8.5px; margin-bottom:2px } .kick-t{ font-size:12px }
  .card.cotz,.cotz{ padding:clamp(8px,1.6dvh,14px) 14px clamp(6px,1.2dvh,12px); gap:clamp(5px,1.1dvh,10px) } .tabs{ padding:3px } .tab{ min-height:clamp(30px,4.6dvh,36px); font-size:14px }
  .campo{ gap:3px } .campo label{ font-size:12px } .inp{ min-height:clamp(36px,5.6dvh,42px); font-size:15px }
  .btn{ min-height:clamp(40px,6.2dvh,46px); font-size:15px } .cotz .link{ min-height:clamp(24px,3.8dvh,32px); font-size:13px }
  .logos{ display:grid; grid-template-columns:1fr 1fr; gap:0 8px; padding:0 16px clamp(2px,.6dvh,6px); justify-items:stretch }
  .logos img{ box-sizing:border-box; width:100%; max-width:100%; height:clamp(30px,5.8dvh,46px); padding:clamp(4px,.9dvh,8px) 18px; object-fit:contain }
  .pie-legal{ padding:clamp(3px,.7dvh,8px) 16px; font-size:9px; line-height:1.25; min-height:0; gap:4px } .pie-links{ gap:10px }
}

/* Recomendaciones (sólo celular): dos cards grandes + «Ver todas las opciones» que despliega el cuadro. */
.reco,.ver-todas{ display:none }
@media (max-width:640px){
  .reco{ display:block; margin-top:4px } .reco-tit{ font-size:15px; font-weight:800; color:var(--marino); margin:4px 0 8px; text-align:center }
  .reco-cards{ display:flex; flex-direction:column; gap:12px }
  .ver-todas{ display:flex; margin:12px auto 4px; max-width:320px; min-height:44px; font-size:14px } .ver-todas svg{ width:18px; height:18px; stroke:var(--azul); fill:none; stroke-width:2.2 }
  .ver-todas[hidden]{ display:none } .grilla.plegada{ display:none }
  #grilla .g-cel.en-reco{ display:none }   /* ya están en las recomendaciones: el cuadro no las repite */
  .pantalla[data-p="ofertas"] h2{ font-size:20px; margin:clamp(2px,.8dvh,6px) 0 }
  /* Ofertas plegadas (recomendaciones + «Ver todas» + contacto) fluidas por alto del viewport, como la landing: sin scroll en cualquier celular. */
  .pantalla[data-p="ofertas"] .top-mini{ padding:calc(env(safe-area-inset-top) + clamp(4px,1.6dvh,14px)) 22px clamp(2px,1dvh,10px) }
  .pantalla[data-p="ofertas"] .cuerpo{ gap:clamp(3px,.8dvh,8px); padding-bottom:clamp(4px,1.2dvh,16px) }
  .cabecera .resumen{ min-height:0; padding:clamp(3px,.9dvh,10px) 12px }
  .reco-cards{ gap:clamp(5px,1.2dvh,12px) } .reco-tit{ margin:clamp(2px,.6dvh,4px) 0 clamp(4px,1dvh,8px) }
  .g-grupo{ padding:clamp(4px,.9dvh,10px); gap:clamp(4px,.8dvh,8px) } .g-fila{ padding:clamp(1px,.6dvh,6px) 4px 1px }
  .g-cel{ padding:clamp(6px,1.2dvh,14px) 8px clamp(4px,.8dvh,10px) }
  .ver-todas{ margin:clamp(2px,1dvh,12px) auto 0; min-height:clamp(36px,5.6dvh,44px) }
  .pie-ofertas{ padding-top:clamp(0px,.6dvh,8px) } .pie-ofertas .btn{ min-height:clamp(34px,5.4dvh,44px) }
  .pantalla[data-p="ofertas"] h2{ font-size:clamp(15px,3dvh,20px); margin:clamp(0px,.8dvh,6px) 0 }
  .cabecera .veh-tit{ font-size:clamp(13px,2.2dvh,15px) } .cabecera .veh-det{ font-size:clamp(11px,1.9dvh,12.5px); line-height:1.3 } .cabecera .resumen > div{ min-width:0 }
  .reco-tit{ font-size:clamp(13px,2.3dvh,15px) } .g-fila b{ font-size:clamp(13px,2.3dvh,15px) }
  .g-cel{ gap:clamp(2px,.4dvh,3px) } .g-cel .precio{ font-size:clamp(15px,2.7dvh,18px) } .g-cel .lista{ font-size:clamp(10.5px,1.8dvh,12px) }
  .g-cel-logo{ height:clamp(11px,2.1dvh,14px) }
  .g-plan{ font-size:clamp(10px,1.6dvh,10.5px); max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; text-align:center; line-height:1.3 }
  .g-cel .btn-det{ min-height:clamp(22px,4.2dvh,28px); font-size:clamp(11px,1.8dvh,12px) }
}

/* Ofertas en desktop/tablet: el cuadro 4×4 escala con el alto del viewport (dvh con topes) — sin scroll en una pantalla de 800 px. */
@media (min-width:641px){
  .pantalla[data-p="ofertas"] .top-mini{ padding-top:calc(env(safe-area-inset-top) + clamp(8px,1.4dvh,14px)); padding-bottom:clamp(6px,1dvh,10px) }
  .pantalla[data-p="ofertas"] .cuerpo{ padding-bottom:clamp(10px,2dvh,22px); gap:clamp(10px,1.6dvh,16px) }
  .pantalla[data-p="ofertas"] .cabecera .resumen{ min-height:clamp(48px,6.5dvh,62px); padding:clamp(6px,1dvh,10px) 14px }
  .pantalla[data-p="ofertas"] .grilla{ gap:clamp(5px,.8dvh,8px); margin-top:clamp(4px,.8dvh,8px) }
  .pantalla[data-p="ofertas"] .g-cia{ padding:clamp(5px,.8dvh,8px) 6px; gap:clamp(3px,.6dvh,6px) }
  .pantalla[data-p="ofertas"] .g-cel{ padding:clamp(8px,1.1dvh,12px) 8px clamp(6px,.9dvh,10px) }
  .pantalla[data-p="ofertas"] .g-cel .precio{ font-size:clamp(18px,2.3dvh,21px) }
  .pantalla[data-p="ofertas"] .g-plan{ min-height:clamp(18px,2.6dvh,26px) }
  .pantalla[data-p="ofertas"] .pie-ofertas{ padding-top:clamp(2px,.8dvh,8px) }
}
.lnk-mod{ margin-left:auto; align-self:center; flex:none; font-size:12.5px; font-weight:600; color:var(--azul); text-decoration:none; padding:6px 10px; border:1px solid var(--azul); border-radius:8px } .lnk-mod:hover{ background:var(--celeste) }