/* ===========================================================
   Landing Prosegma — seguro de hogar
   Colores EXACTOS de la marca, los mismos del CRM (derivados del logo).
   Mobile-first: casi todo el tráfico de Meta llega por celular.
   =========================================================== */

:root{
  --navy:#0b1628;
  --navy-700:#1b2d52;
  --navy-800:#142442;
  --brand:#4a87be;
  --brand-600:#3d74a6;
  --brand-400:#7aaed2;
  --brand-50:#eef4fa;
  --brand-pale:#a8c8df;
  --ink:#0f1b2d;
  --muted:#64748b;
  --line:#e6ebf2;
  --canvas:#f5f7fb;
  --ok:#1f7a4d;
  --alerta:#b4531a;
  --error:#c0392b;
  --wa:#25d366;
  --radio:12px;
  --sombra:0 1px 2px rgba(15,27,45,.05), 0 10px 30px rgba(15,27,45,.07);
  --fuente:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:#fff; color:var(--ink);
  font-family:var(--fuente); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
h1,h2,h3{margin:0; line-height:1.15; text-wrap:balance; letter-spacing:-.02em}
h1{font-size:clamp(1.85rem,6.2vw,3.1rem); font-weight:800}
h2{font-size:clamp(1.45rem,4.4vw,2.15rem); font-weight:800}
h3{font-size:1.1rem; font-weight:700}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.contenedor{width:100%; max-width:1120px; margin:0 auto; padding:0 20px}
.angosto{max-width:720px}
.centro{text-align:center}

.ojo{
  font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand-600); margin-bottom:10px;
}
.parrafo{color:#33415c; margin-top:16px; font-size:1.03rem}

/* ---------- barra ---------- */
.barra{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40}
.barra-in{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:10px; padding-bottom:10px}
.logo{width:auto; height:46px}
.barra-wa{
  color:var(--brand-600); font-weight:700; font-size:.92rem; text-decoration:none;
  border:1.5px solid var(--brand-400); padding:9px 15px; border-radius:999px; white-space:nowrap;
}
.barra-wa:hover{background:var(--brand-50)}

/* ---------- hero ---------- */
.hero{background:linear-gradient(170deg,var(--navy) 0%, var(--navy-700) 100%); color:#fff; padding:36px 0 44px}
.hero-in{display:grid; gap:30px}
.hero .ojo{color:var(--brand-pale)}
.hero h1{color:#fff}
.bajada{margin-top:16px; color:#c9d8ea; font-size:1.06rem; max-width:52ch}
.lista-hero{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:9px}
.lista-hero li{position:relative; padding-left:26px; color:#dce7f3; font-size:.98rem}
.lista-hero li::before{
  content:"✓"; position:absolute; left:0; top:-1px;
  color:var(--brand-400); font-weight:800;
}

/* ---------- cotizador ---------- */
.cotizador{background:#fff; color:var(--ink); border-radius:16px; box-shadow:var(--sombra); overflow:hidden}
.cot-cab{padding:18px 20px 0}
.pasos{display:flex; gap:6px}
.pt{flex:1; height:4px; border-radius:99px; background:var(--line); transition:background .25s}
.pt.on{background:var(--brand)}
.cot-paso{font-size:.82rem; color:var(--muted); font-weight:600; margin-top:10px}

form{padding:6px 20px 20px}
.paso{display:none; border:0; margin:0; padding:0; min-width:0}
.paso.activo{display:block}
.campo{display:block; margin-top:20px}
.campo.oculto{display:none}
.etq{display:block; font-weight:700; font-size:1rem; margin-bottom:9px; line-height:1.35}
.etq em{font-weight:500; font-style:normal; color:var(--muted)}
.ayuda{font-size:.87rem; color:var(--muted); margin:-4px 0 10px; line-height:1.45}

input,select{
  width:100%; font:inherit; font-size:1rem; color:var(--ink); background:#fff;
  padding:13px 14px; border:1.5px solid var(--line); border-radius:var(--radio);
  appearance:none; -webkit-appearance:none;
}
select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:12px; padding-right:40px;
}
input:focus,select:focus{outline:0; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-50)}
input::placeholder{color:#9aa7b8}
input.mal,select.mal{border-color:var(--error)}

.ops{display:flex; flex-wrap:wrap; gap:9px}
.op{
  font:inherit; font-size:.95rem; font-weight:600; color:var(--ink); background:#fff; cursor:pointer;
  border:1.5px solid var(--line); border-radius:999px; padding:11px 17px; line-height:1.2;
  transition:border-color .15s, background .15s, color .15s;
}
.op:hover{border-color:var(--brand-400); background:var(--brand-50)}
.op.sel{background:var(--brand); border-color:var(--brand); color:#fff}
.op:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

.miel{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.legal{font-size:.83rem; color:var(--muted); margin-top:20px; line-height:1.5}
.error{
  color:var(--error); font-size:.92rem; font-weight:600; margin:16px 0 0;
  background:#fdeceb; border:1px solid #f5c6c2; border-radius:10px; padding:11px 13px;
}

/* resultado del cotizador */
.resultado{
  background:var(--brand-50); border:1px solid var(--brand-pale);
  border-radius:var(--radio); padding:17px 18px; margin-bottom:4px;
}
.resultado .r-tit{font-weight:800; font-size:1.05rem; margin-bottom:6px}
.resultado .r-monto{font-size:1.9rem; font-weight:800; color:var(--navy-700); line-height:1.1; margin:8px 0}
.resultado .r-txt{font-size:.94rem; color:#33415c; line-height:1.5}
.resultado .r-nota{font-size:.8rem; color:var(--muted); margin-top:10px; line-height:1.45}
.resultado.revisar{background:#fdf4ec; border-color:#f0d0ae}
.resultado.revisar .r-tit{color:var(--alerta)}

.acciones{display:flex; gap:10px; align-items:center; margin-top:24px}
.btn{
  font:inherit; font-size:1.02rem; font-weight:700; color:#fff; background:var(--brand);
  border:0; border-radius:var(--radio); padding:15px 22px; cursor:pointer; flex:1;
  text-align:center; text-decoration:none; transition:background .15s;
}
.btn:hover{background:var(--brand-600)}
.btn:focus-visible{outline:2px solid var(--navy); outline-offset:2px}
.btn[disabled]{opacity:.6; cursor:default}
.btn-atras{
  font:inherit; font-size:1rem; font-weight:600; color:var(--muted); background:transparent;
  border:1.5px solid var(--line); border-radius:var(--radio); padding:15px 18px; cursor:pointer;
}
.btn-atras:hover{background:var(--canvas)}
.btn-grande{display:inline-block; flex:0 0 auto; padding:16px 30px; font-size:1.06rem}

/* gracias */
.gracias{padding:34px 22px 30px; text-align:center}
.tic{
  width:56px; height:56px; margin:0 auto 16px; border-radius:50%;
  background:var(--ok); color:#fff; font-size:1.9rem; line-height:56px; font-weight:700;
}
.gracias h2{font-size:1.5rem}
.gracias p{color:#33415c; margin-top:10px}
.btn-wa{background:var(--wa); margin-top:20px; display:inline-block; flex:0 0 auto}
.btn-wa:hover{background:#1fbb59}

/* ---------- secciones ---------- */
.seccion{padding:52px 0}
.seccion-alt{background:var(--canvas)}

.dos-cajas{display:grid; gap:14px; margin-top:24px}
.caja{border-radius:var(--radio); padding:18px 20px; border:1.5px solid}
.caja-tit{font-weight:800; font-size:1.05rem; margin-bottom:6px}
.caja-txt{font-size:.97rem; line-height:1.5}
.caja-si{background:#eaf6f0; border-color:#bfe3d1}
.caja-si .caja-tit{color:var(--ok)}
.caja-no{background:#fdf4ec; border-color:#f0d0ae}
.caja-no .caja-tit{color:var(--alerta)}

.tres{display:grid; gap:16px; margin-top:26px}
.tarjeta{background:#fff; border:1px solid var(--line); border-radius:var(--radio); padding:22px; box-shadow:var(--sombra)}
.tarjeta h3{color:var(--navy-700)}
.tarjeta p{color:#33415c; margin-top:9px; font-size:.97rem}

.faq{border-bottom:1px solid var(--line); padding:15px 0}
.faq summary{
  font-weight:700; cursor:pointer; list-style:none; font-size:1.02rem;
  display:flex; justify-content:space-between; gap:14px; align-items:flex-start;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--brand); font-weight:800; font-size:1.3rem; line-height:1}
.faq[open] summary::after{content:"–"}
.faq p{color:#33415c; margin-top:11px; font-size:.97rem}

.cierre{background:var(--navy); color:#fff; padding:56px 0}
.cierre h2{color:#fff}
.cierre .parrafo{color:#c9d8ea; margin-bottom:26px}

/* ---------- pie ---------- */
.pie{background:var(--navy-800); color:#c9d8ea; padding:32px 0 96px}
.pie-in{display:flex; flex-direction:column; gap:18px; align-items:flex-start}
.logo-pie{height:52px; width:auto; filter:brightness(0) invert(1); opacity:.92}
.pie-txt p{font-size:.92rem}
.pie-legal{margin-top:10px; color:#8fa3bd; font-size:.85rem}

/* ---------- whatsapp flotante ---------- */
.wa-flotante{
  position:fixed; right:14px; bottom:14px; z-index:60;
  display:inline-flex; align-items:center; gap:9px;
  background:var(--wa); color:#fff; text-decoration:none; font-weight:700; font-size:.95rem;
  padding:13px 18px; border-radius:999px; box-shadow:0 6px 22px rgba(0,0,0,.25);
}
.wa-flotante:hover{background:#1fbb59}
.wa-flotante svg{flex:0 0 auto}
/* Al terminar el cotizador ya hay un botón grande de WhatsApp:
   el flotante sobra y además se le encimaba encima. */
body.enviado .wa-flotante{display:none}

@media (max-width:400px){
  .wa-flotante span{display:none}
  .wa-flotante{padding:15px; right:12px; bottom:12px}
}

/* ---------- escritorio ---------- */
@media (min-width:900px){
  body{font-size:18px}
  .hero{padding:60px 0 70px}
  .hero-in{grid-template-columns:1fr 480px; gap:52px; align-items:start}
  .hero-texto{padding-top:14px}
  .dos-cajas{grid-template-columns:1fr 1fr}
  .tres{grid-template-columns:repeat(3,1fr)}
  .seccion{padding:72px 0}
  .pie-in{flex-direction:row; align-items:center; gap:26px}
  .pie{padding-bottom:34px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important; animation:none!important}
}