/* ==========================================================================
   Decide Tu Salud — Sistema de diseño
   Paleta de marca: Lochmara #0079C7 · Prussian Blue #00335A · Teal #008385 · Blanco #FFFFFF
   ========================================================================== */

:root{
  /* Marca */
  --brand:        #0079C7;
  --brand-600:    #0069AE;
  --brand-700:    #005791;
  --brand-900:    #00335A;
  --accent:       #008385;
  --accent-600:   #006A6C;
  --accent-050:   #e6f2f2;
  --brand-050:    #e8f3fb;
  --brand-100:    #c6e0f4;

  /* Neutros */
  --ink:          #0E2338;
  --ink-2:        #33414f;
  --muted:        #5b6b7c;
  --line:         #dce6ef;
  --surface:      #ffffff;
  --surface-2:    #f4f8fc;
  --surface-3:    #e7f0f8;

  /* Semánticos */
  --warn:         #f4b400;
  --danger:       #cf2e2e;

  /* Tipografía */
  --font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Sora", "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;

  /* Formas */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Sombras */
  --sh-1: 0 1px 2px rgba(0,51,90,.06), 0 2px 8px rgba(0,51,90,.05);
  --sh-2: 0 4px 12px rgba(0,51,90,.07), 0 12px 32px rgba(0,51,90,.08);
  --sh-3: 0 18px 50px rgba(0,121,199,.18);

  --maxw: 1180px;
  --nav-h: 76px;
}

/* ---------- Reset ligero ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--brand-700); text-decoration:none; }
a:hover{ text-decoration:underline; }
button{ font:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.18; letter-spacing:-.02em; margin:0 0 .5em; font-weight:700; }
h1{ font-size:clamp(2.1rem, 1.3rem + 3.4vw, 3.65rem); }
h2{ font-size:clamp(1.7rem, 1.15rem + 2.2vw, 2.6rem); }
h3{ font-size:clamp(1.15rem, 1rem + .6vw, 1.4rem); }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ width:min(100% - 2.5rem, var(--maxw)); margin-inline:auto; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brand-900); color:#fff; padding:.8rem 1.2rem; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1.5rem; border-radius:var(--r-pill);
  font-weight:700; font-size:.98rem; letter-spacing:.01em;
  border:2px solid transparent; cursor:pointer; text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.btn:hover{ text-decoration:none; transform:translateY(-2px); }
.btn--primary{ background:var(--brand); color:#fff; box-shadow:0 8px 20px rgba(0,121,199,.28); }
.btn--primary:hover{ background:var(--brand-600); box-shadow:0 12px 26px rgba(0,121,199,.34); }
.btn--accent{ background:var(--accent); color:#fff; box-shadow:0 8px 20px rgba(0,131,133,.28); }
.btn--accent:hover{ background:var(--accent-600); }
.btn--ghost{ background:transparent; color:var(--brand-700); border-color:var(--brand-100); }
.btn--ghost:hover{ background:var(--brand-050); border-color:var(--brand); }
.btn--light{ background:#fff; color:var(--brand-700); }
.btn--light:hover{ background:var(--brand-050); }
.btn--sm{ padding:.6rem 1.1rem; font-size:.88rem; }
.btn--block{ width:100%; }

/* ---------- Etiquetas ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-sans); font-size:.78rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brand-700);
  background:var(--brand-050); border:1px solid var(--brand-100);
  padding:.4rem .9rem; border-radius:var(--r-pill); margin-bottom:1rem;
}
.eyebrow--on-dark{ color:#cfe6f7; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); }
.badge{
  display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; padding:.28rem .7rem; border-radius:var(--r-pill);
}
.badge--hot{ background:#fff3d6; color:#8a5b00; }
.badge--new{ background:var(--accent-050); color:#005A5C; }

.lead{ font-size:1.1rem; color:var(--muted); max-width:62ch; }

/* ---------- Barra superior ---------- */
.topbar{
  background:linear-gradient(90deg, var(--brand-900), var(--brand-700) 55%, var(--accent-600));
  color:#e6f2fb; font-size:.86rem;
}
.topbar__inner{ display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; align-items:center; padding:.55rem 0; }
.topbar a{ color:#fff; display:inline-flex; align-items:center; gap:.45rem; font-weight:600; }
.topbar__spacer{ margin-left:auto; }
.topbar__hours{ opacity:.85; display:inline-flex; align-items:center; gap:.45rem; }

/* ---------- Navegación ---------- */
.nav{
  position:sticky; top:0; z-index:90;
  background:rgba(255,255,255,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav__inner{ display:flex; align-items:center; gap:1rem; height:var(--nav-h); }
.logo{ display:flex; align-items:center; gap:.55rem; font-family:var(--font-display); font-weight:800; font-size:1.12rem; color:var(--ink); text-decoration:none; letter-spacing:-.03em; white-space:nowrap; flex:0 0 auto; }
.logo:hover{ text-decoration:none; }
.logo__mark{
  width:40px; height:40px; border-radius:12px; flex:0 0 auto;
  background:linear-gradient(135deg, var(--brand), var(--accent));
  display:grid; place-items:center; color:#fff;
}
.logo__mark svg{ width:22px; height:22px; }
.logo b{ color:var(--brand); font-weight:800; }

.nav__links{ display:flex; align-items:center; gap:.25rem; margin-left:auto; }
.nav__links > li{ position:relative; }
.nav__links a, .nav__toggle-sub{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.6rem .8rem; border-radius:var(--r-sm);
  color:var(--ink-2); font-weight:600; font-size:.94rem; white-space:nowrap;
  background:none; border:0; cursor:pointer; text-decoration:none;
}
.nav__links a:hover, .nav__toggle-sub:hover{ background:var(--brand-050); color:var(--brand-700); text-decoration:none; }
.nav__toggle-sub svg{ width:12px; height:12px; transition:transform .2s ease; }
.nav__toggle-sub[aria-expanded="true"] svg{ transform:rotate(180deg); }

/* Mega menú */
.mega{
  position:absolute; top:calc(100% + 10px); right:0; z-index:95;
  width:min(92vw, 720px);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-2); padding:1.4rem;
  display:none; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.2rem;
}
.mega[data-open="true"]{ display:grid; }
.mega__col h4{
  font-size:.76rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--brand-700); margin-bottom:.5rem; font-family:var(--font-sans); font-weight:800;
}
.mega__col a{ display:block; padding:.4rem .55rem; font-size:.92rem; font-weight:500; color:var(--ink-2); border-radius:8px; }
.nav__cta{ margin-left:.5rem; }

.nav__burger{
  display:none; margin-left:auto; width:44px; height:44px;
  border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer;
  align-items:center; justify-content:center;
}
.nav__burger span{ display:block; width:20px; height:2px; background:var(--ink); position:relative; }
.nav__burger span::before,.nav__burger span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink); }
.nav__burger span::before{ top:-6px; } .nav__burger span::after{ top:6px; }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 520px at 88% -12%, rgba(0,131,133,.20), transparent 62%),
    radial-gradient(900px 460px at 4% 8%, rgba(0,121,199,.18), transparent 60%),
    linear-gradient(180deg, var(--surface-2), #fff 78%);
  padding:clamp(2.6rem,1.5rem + 4vw,5rem) 0 clamp(3rem,2rem + 4vw,5.5rem);
}
.hero__grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(1.5rem,1rem + 3vw,3.5rem); align-items:center; }
.hero h1 span{
  background:linear-gradient(100deg, var(--brand), var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__trust{ display:flex; flex-wrap:wrap; gap:.55rem; margin:1.6rem 0 0; }
.hero__trust li{
  display:inline-flex; align-items:center; gap:.45rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:.45rem .95rem; font-size:.85rem; font-weight:600; color:var(--ink-2);
  box-shadow:var(--sh-1);
}
.hero__trust svg{ width:16px; height:16px; color:var(--accent); flex:0 0 auto; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.8rem; }
.hero__note{ font-size:.82rem; color:var(--muted); margin-top:1rem; max-width:46ch; }

/* Tarjeta cotizador */
.quoter{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--sh-3); padding:1.6rem; position:relative;
}
.quoter__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.quoter__head h2{ font-size:1.35rem; margin:0 0 .2rem; }
.quoter__head p{ margin:0; font-size:.88rem; color:var(--muted); }
.quoter__steps{ display:flex; gap:.4rem; margin-bottom:1.2rem; }
.quoter__steps span{ height:5px; flex:1; border-radius:var(--r-pill); background:var(--surface-3); }
.quoter__steps span.is-active{ background:linear-gradient(90deg,var(--brand),var(--accent)); }
.qstep{ display:none; }
.qstep.is-active{ display:block; animation:fade .3s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1;transform:none;} }
.qstep > p.q{ font-weight:700; font-size:1.02rem; margin-bottom:.9rem; }

.opts{ display:grid; gap:.6rem; }
.opts--2{ grid-template-columns:1fr 1fr; }
.opt{
  border:2px solid var(--line); border-radius:var(--r); padding:.85rem 1rem;
  background:#fff; cursor:pointer; text-align:left; font-weight:600; font-size:.93rem;
  display:flex; align-items:center; gap:.6rem; transition:all .18s ease; color:var(--ink);
}
.opt:hover{ border-color:var(--brand); background:var(--brand-050); }
.opt.is-sel{ border-color:var(--brand); background:var(--brand-050); box-shadow:0 0 0 3px rgba(0,121,199,.12); }
.opt small{ display:block; font-weight:500; color:var(--muted); font-size:.78rem; }

.field{ margin-bottom:.85rem; }
.field label{ display:block; font-size:.85rem; font-weight:700; margin-bottom:.35rem; color:var(--ink-2); }
.field .hint{ font-weight:500; color:var(--muted); font-size:.78rem; display:block; margin-top:.25rem; }
.field input, .field select, .field textarea{
  width:100%; padding:.75rem .9rem; font:inherit; font-size:.95rem;
  border:2px solid var(--brand-100); border-radius:var(--r-sm);
  background:#fff; color:var(--ink); transition:border-color .16s ease, box-shadow .16s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(0,121,199,.14);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"]{ border-color:var(--danger); }
.err{ color:var(--danger); font-size:.78rem; font-weight:600; margin-top:.3rem; display:none; }
.err.is-on{ display:block; }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }

.qnav{ display:flex; gap:.6rem; margin-top:1.1rem; }
.qresult{
  background:var(--brand-050); border:1px solid var(--brand-100);
  border-radius:var(--r); padding:1rem; margin-bottom:1rem; font-size:.9rem;
}
.qresult strong{ color:var(--brand-700); }

/* ---------- Consentimiento (Ley 21.719) ---------- */
.consent{
  border:1px solid var(--line); border-radius:var(--r); padding:1rem;
  background:var(--surface-2); margin:1rem 0;
}
.consent__title{
  font-size:.74rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:var(--brand-700); margin-bottom:.7rem; display:flex; align-items:center; gap:.4rem;
}
.consent__title svg{ width:14px; height:14px; }
.check{ display:flex; gap:.65rem; align-items:flex-start; margin-bottom:.7rem; font-size:.83rem; line-height:1.5; color:var(--ink-2); }
.check:last-of-type{ margin-bottom:0; }
.check input[type="checkbox"]{
  width:18px; height:18px; margin:2px 0 0; flex:0 0 auto; accent-color:var(--brand); cursor:pointer;
}
.check span{ cursor:pointer; }
.check .req{ color:var(--danger); font-weight:700; }
.consent__legal{ font-size:.75rem; color:var(--muted); margin:.8rem 0 0; line-height:1.55; }

/* ---------- Secciones ---------- */
.section{ padding:clamp(3rem,2rem + 3.5vw,5.5rem) 0; }
.section--tint{ background:var(--surface-2); }
.section--dark{
  background:linear-gradient(135deg, var(--brand-900), var(--brand-700) 60%, #00595B);
  color:#e8f2fa;
}
.section--dark h2{ color:#fff; }
.section--dark .lead{ color:#bfd9ee; }
.section__head{ max-width:64ch; margin-bottom:2.4rem; }
.section__head--center{ margin-inline:auto; text-align:center; }
.section__head--center .lead{ margin-inline:auto; }

/* ---------- Franja de confianza ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.stat{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-lg); padding:1.4rem; }
.stat b{ display:block; font-family:var(--font-display); font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem); line-height:1.1; color:#fff; }
.stat span{ font-size:.87rem; color:#b7d4ea; }

/* ---------- Filtro de planes ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:2rem; }
.filter{
  border:1.5px solid var(--line); background:#fff; color:var(--ink-2);
  padding:.6rem 1.15rem; border-radius:var(--r-pill); font-weight:700; font-size:.88rem; cursor:pointer;
  transition:all .18s ease;
}
.filter:hover{ border-color:var(--brand); color:var(--brand-700); }
.filter.is-on{ background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 6px 16px rgba(0,121,199,.25); }

.plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.2rem; align-items:stretch; }
.plan{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.5rem; display:flex; flex-direction:column; position:relative;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.plan:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); border-color:var(--brand-100); }
.plan.is-hidden{ display:none; }
.plan--featured{ border:2px solid var(--brand); box-shadow:var(--sh-3); }
.plan__flag{
  position:absolute; top:-13px; left:1.5rem;
  background:linear-gradient(90deg,var(--brand),var(--accent)); color:#fff;
  font-size:.7rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  padding:.35rem .85rem; border-radius:var(--r-pill);
}
.plan__tag{ font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-600); margin-bottom:.4rem; }
.plan h3{ margin-bottom:.35rem; }
.plan__sub{ font-size:.86rem; color:var(--muted); margin-bottom:1rem; }
.plan__price{ display:flex; align-items:baseline; gap:.4rem; padding:.9rem 0; border-block:1px dashed var(--line); margin-bottom:1rem; flex-wrap:wrap; }
.plan__price b{ font-family:var(--font-display); font-size:1.75rem; color:var(--brand-700); line-height:1; }
.plan__price small{ font-size:.8rem; color:var(--muted); }
.plan__price em{ font-style:normal; font-size:.75rem; color:var(--muted); display:block; width:100%; }
.plan ul{ display:grid; gap:.5rem; margin-bottom:1.4rem; }
.plan ul li{ display:flex; gap:.55rem; align-items:flex-start; font-size:.9rem; color:var(--ink-2); }
.plan ul svg{ width:17px; height:17px; flex:0 0 auto; margin-top:3px; color:var(--accent); }
.plan .btn{ margin-top:auto; }

/* ---------- Comparativa ---------- */
.tablewrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; }
table.cmp{ width:100%; border-collapse:collapse; min-width:660px; font-size:.92rem; }
table.cmp th, table.cmp td{ padding:.9rem 1.1rem; text-align:left; border-bottom:1px solid var(--line); }
table.cmp thead th{ background:var(--surface-3); font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--brand-900); }
table.cmp tbody tr:last-child td{ border-bottom:0; }
table.cmp td:first-child{ font-weight:700; }
.yes{ color:var(--accent-600); font-weight:800; }
.no{ color:var(--muted); }

/* ---------- Pasos ---------- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.2rem; counter-reset:s; }
.step{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5rem; position:relative; }
.step::before{
  counter-increment:s; content:counter(s);
  display:grid; place-items:center; width:38px; height:38px; border-radius:12px;
  background:linear-gradient(135deg,var(--brand),var(--accent)); color:#fff;
  font-family:var(--font-display); font-weight:800; margin-bottom:.9rem;
}
.step h3{ font-size:1.05rem; }
.step p{ font-size:.9rem; color:var(--muted); margin:0; }

/* ---------- Red de prestadores ---------- */
.network{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; }
.net{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r); padding:1.2rem; display:flex; gap:.75rem; align-items:center;
}
.net svg{ width:22px; height:22px; color:#6FD0D2; flex:0 0 auto; }
.net b{ display:block; font-size:.98rem; color:#fff; }
.net span{ font-size:.8rem; color:#b7d4ea; }

/* ---------- Testimonios ---------- */
.quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem; }
.quote{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5rem; }
.quote__stars{ color:var(--warn); letter-spacing:.12em; font-size:.95rem; margin-bottom:.6rem; }
.quote p{ font-size:.95rem; color:var(--ink-2); }
.quote footer{ display:flex; align-items:center; gap:.7rem; margin-top:1rem; font-size:.85rem; }
.quote__av{
  width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(135deg,var(--brand-100),var(--accent-050));
  display:grid; place-items:center; font-weight:800; color:var(--brand-700);
}
.quote footer b{ display:block; }
.quote footer span{ color:var(--muted); font-size:.8rem; }

/* ---------- Noticias ---------- */
.posts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem; }
.post{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease;
}
.post:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); }
.post__cover{ height:130px; background:linear-gradient(135deg,var(--brand),var(--accent)); display:grid; place-items:center; }
.post__cover svg{ width:44px; height:44px; color:rgba(255,255,255,.85); }
.post__body{ padding:1.3rem; display:flex; flex-direction:column; flex:1; }
.post__meta{ font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-600); font-weight:800; margin-bottom:.5rem; }
.post h3{ font-size:1.05rem; }
.post p{ font-size:.88rem; color:var(--muted); flex:1; }
.post a.more{ font-weight:700; font-size:.88rem; display:inline-flex; gap:.35rem; align-items:center; }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin-inline:auto; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:#fff; }
.faq__item + .faq__item{ border-top:1px solid var(--line); }
.faq__q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.15rem 1.4rem; background:none; border:0; cursor:pointer; text-align:left;
  font-weight:700; font-size:1rem; color:var(--ink);
}
.faq__q:hover{ background:var(--surface-2); }
.faq__q svg{ width:18px; height:18px; flex:0 0 auto; color:var(--brand); transition:transform .22s ease; }
.faq__q[aria-expanded="true"] svg{ transform:rotate(45deg); }
.faq__a{ display:none; padding:0 1.4rem 1.3rem; font-size:.93rem; color:var(--muted); }
.faq__a.is-open{ display:block; }

/* ---------- Contacto ---------- */
.contact{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(1.5rem,1rem + 2.5vw,3rem); align-items:start; }
.contact__card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:1.8rem; box-shadow:var(--sh-2); }
.contact__list{ display:grid; gap:1rem; margin-top:1.6rem; }
.contact__list li{ display:flex; gap:.85rem; align-items:flex-start; }
.contact__ico{
  width:42px; height:42px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--brand-050); color:var(--brand-700);
}
.contact__ico svg{ width:20px; height:20px; }
.contact__list b{ display:block; font-size:.95rem; }
.contact__list span, .contact__list a{ font-size:.9rem; color:var(--muted); }
.formstatus{ margin-top:1rem; padding:.9rem 1rem; border-radius:var(--r-sm); font-size:.9rem; font-weight:600; display:none; }
.formstatus.is-ok{ display:block; background:var(--accent-050); color:#005A5C; border:1px solid #9ecfd0; }
.formstatus.is-bad{ display:block; background:#fdeaea; color:#8f1f1f; border:1px solid #f3bcbc; }

/* ---------- CTA final ---------- */
.cta{
  background:linear-gradient(120deg,var(--brand-700),var(--brand) 45%, var(--accent));
  border-radius:var(--r-xl); padding:clamp(2rem,1.4rem + 2.4vw,3.4rem); color:#fff; text-align:center;
}
.cta h2{ color:#fff; }
.cta p{ color:#e2f1fb; max-width:56ch; margin-inline:auto; }
.cta .btn{ margin-top:1.2rem; }

/* ---------- Footer ---------- */
.footer{ background:var(--brand-900); color:#bcd6ea; padding:3.5rem 0 0; font-size:.9rem; }
.footer a{ color:#bcd6ea; }
.footer a:hover{ color:#fff; }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:2rem; padding-bottom:2.5rem; }
.footer h4{ color:#fff; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; font-family:var(--font-sans); margin-bottom:.9rem; }
.footer ul{ display:grid; gap:.5rem; }
.footer .logo{ color:#fff; margin-bottom:.8rem; }
.footer__legal{
  border-top:1px solid rgba(255,255,255,.13); padding:1.4rem 0;
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; align-items:center; font-size:.82rem; color:#93b4cd;
}
.footer__legal .sep{ margin-left:auto; }
.footer__disclaimer{ font-size:.78rem; color:#86a8c2; line-height:1.6; max-width:80ch; padding-bottom:2rem; }

/* ---------- WhatsApp flotante ---------- */
.wa{
  position:fixed; right:20px; bottom:20px; z-index:80;
  display:inline-flex; align-items:center; gap:.6rem;
  background:#25D366; color:#fff; font-weight:700; font-size:.92rem;
  padding:.8rem 1.2rem; border-radius:var(--r-pill);
  box-shadow:0 10px 26px rgba(0,0,0,.22); text-decoration:none;
}
.wa:hover{ background:#1eb85a; color:#fff; text-decoration:none; }
.wa svg{ width:22px; height:22px; }

/* ---------- Banner de cookies (Ley 21.719) ---------- */
.cookie{
  position:fixed; inset:auto 16px 16px 16px; z-index:120;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 20px 60px rgba(0,51,90,.25);
  padding:1.4rem; max-width:560px; margin-inline:auto;
  display:none;
}
.cookie[data-open="true"]{ display:block; }
.cookie h3{ font-size:1.1rem; margin-bottom:.4rem; }
.cookie p{ font-size:.86rem; color:var(--muted); margin-bottom:1rem; }
.cookie__prefs{ display:none; border-top:1px solid var(--line); padding-top:1rem; margin-bottom:1rem; }
.cookie__prefs[data-open="true"]{ display:block; }
.cookie__actions{ display:flex; flex-wrap:wrap; gap:.6rem; }
.cookie__actions .btn{ flex:1 1 auto; }

/* ---------- Página legal ---------- */
.legal{ padding:clamp(2.5rem,2rem + 2vw,4rem) 0; }
.legal__grid{ display:grid; grid-template-columns:260px 1fr; gap:3rem; align-items:start; }
.legal__toc{ position:sticky; top:calc(var(--nav-h) + 20px); border:1px solid var(--line); border-radius:var(--r); padding:1.2rem; background:var(--surface-2); }
.legal__toc h4{ font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-700); font-family:var(--font-sans); }
.legal__toc ul{ display:grid; gap:.35rem; }
.legal__toc a{ font-size:.86rem; color:var(--ink-2); }
.legal__body{ max-width:78ch; }
.legal__body h2{ font-size:1.5rem; margin-top:2.4rem; padding-top:.6rem; }
.legal__body h2:first-child{ margin-top:0; }
.legal__body h3{ font-size:1.1rem; margin-top:1.6rem; }
.legal__body p, .legal__body li{ font-size:.96rem; color:var(--ink-2); }
.legal__body ul{ list-style:disc; padding-left:1.3rem; margin-bottom:1em; display:grid; gap:.4rem; }
.legal__body ol{ padding-left:1.3rem; margin-bottom:1em; display:grid; gap:.4rem; }
.legal__body table{ width:100%; border-collapse:collapse; font-size:.9rem; margin-bottom:1.5em; }
.legal__body th, .legal__body td{ border:1px solid var(--line); padding:.7rem .9rem; text-align:left; vertical-align:top; }
.legal__body th{ background:var(--surface-3); }
.callout{
  border-left:4px solid var(--brand); background:var(--brand-050);
  padding:1rem 1.2rem; border-radius:0 var(--r-sm) var(--r-sm) 0; margin-bottom:1.5em;
}
.callout p:last-child{ margin-bottom:0; }
.legal__hero{ background:linear-gradient(135deg,var(--brand-900),var(--brand-700)); color:#fff; padding:clamp(2.4rem,2rem + 2vw,3.6rem) 0; }
.legal__hero h1{ color:#fff; font-size:clamp(1.9rem,1.4rem + 2vw,2.8rem); }
.legal__hero p{ color:#bfd9ee; margin:0; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px){
  .hero__grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .contact{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .legal__grid{ grid-template-columns:1fr; }
  .legal__toc{ position:static; }
}
@media (max-width: 1180px){
  .nav__burger{ display:flex; }
  .nav__links{
    position:absolute; top:var(--nav-h); left:0; right:0;
    background:#fff; border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0; padding:.6rem;
    box-shadow:var(--sh-2); display:none; max-height:calc(100vh - var(--nav-h)); overflow-y:auto;
  }
  .nav__links[data-open="true"]{ display:flex; }
  .nav__links a, .nav__toggle-sub{ width:100%; padding:.8rem 1rem; }
  .nav__toggle-sub{ justify-content:space-between; }
  .mega{ position:static; width:100%; box-shadow:none; border:0; padding:.2rem .6rem 1rem; grid-template-columns:1fr; }
  .nav__cta{ margin:.5rem; }
}
@media (max-width: 620px){
  body{ font-size:16px; }
  .stats{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .opts--2{ grid-template-columns:1fr; }
  .field--row{ grid-template-columns:1fr; }
  .topbar__spacer{ margin-left:0; }
  .wa span{ display:none; }
  .wa{ padding:.85rem; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- Impresión ---------- */
@media print{
  .nav,.topbar,.wa,.cookie,.hero__actions,.footer{ display:none !important; }
  body{ font-size:12pt; }
}

/* ==========================================================================
   Rediseño 2026 — rutas, criterios, franja de tranquilidad y ficha de asesora
   ========================================================================== */

/* Asterisco de campo obligatorio: antes solo existía dentro de .check */
.field label .req{ color:var(--danger); }

/* Pie del formulario de asesoría del héroe */
.quoter__foot{ text-align:center; font-size:.78rem; color:var(--muted); margin:.7rem 0 0; }

/* ---------- Rutas ---------- */
.routes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.2rem; }
.route{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.5rem; display:flex; flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.route:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); border-color:var(--brand-100); }
.route__tag{ font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-600); }
.route__ico{
  display:grid; place-items:center; width:46px; height:46px; border-radius:14px;
  background:var(--brand-050); color:var(--brand-700); margin:.9rem 0 .8rem;
}
.route__ico svg{ width:24px; height:24px; }
.route h3{ font-size:1.08rem; margin-bottom:.4rem; }
.route p{ font-size:.88rem; color:var(--muted); margin-bottom:1.1rem; }
.route .more{
  margin-top:auto; font-weight:700; font-size:.86rem;
  display:inline-flex; align-items:center; gap:.35rem; color:var(--brand-700);
}

/* ---------- Los tres seguros ---------- */
.plans--3{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); max-width:1020px; margin-inline:auto; }
.plans__nota{ max-width:72ch; margin:1.8rem auto 0; text-align:center; font-size:.8rem; line-height:1.6; color:var(--muted); }

/* ---------- Cinco criterios ---------- */
.crits{ display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; }
.crit{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.4rem 1.2rem; text-align:center; }
.crit__ico{
  display:grid; place-items:center; width:48px; height:48px; border-radius:50%;
  background:var(--accent-050); color:var(--accent-600); margin:0 auto .9rem;
}
.crit__ico svg{ width:24px; height:24px; }
.crit h3{ font-size:1rem; margin-bottom:.35rem; }
.crit p{ font-size:.84rem; color:var(--muted); margin:0; }

/* ---------- Pasos (tres columnas centradas) ---------- */
.steps--3{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); max-width:1020px; margin-inline:auto; }

/* ---------- Cotizar no te obliga a contratar ---------- */
.reassure{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:.8rem; }
.reassure li{
  display:flex; gap:.6rem; align-items:flex-start;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r); padding:1rem 1.1rem; font-size:.92rem; color:#e8f2fa;
}
.reassure svg{ width:18px; height:18px; flex:0 0 auto; margin-top:3px; color:#7fe3e5; }

/* ---------- Quién te atiende ---------- */
.asesora{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(1.5rem,1rem + 2.5vw,3rem); align-items:center; }
.asesora__card{
  background:linear-gradient(160deg,var(--brand-900),var(--brand-700));
  color:#e8f2fa; border-radius:var(--r-xl); padding:2rem 1.6rem; text-align:center; box-shadow:var(--sh-3);
}
/* Lleva dentro la foto de la asesora y, detrás, las iniciales como respaldo:
   si el archivo falta o falla, el círculo sigue viéndose bien en vez de
   mostrar el ícono de imagen rota. */
.asesora__avatar{
  position:relative; overflow:hidden;
  display:grid; place-items:center; width:120px; height:120px; margin:0 auto 1.1rem;
  border-radius:50%; background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.3);
  font-family:var(--font-display); font-size:2.3rem; font-weight:800; color:#fff;
}
/* La foto ya viene recortada en cuadrado con el rostro centrado, así que aquí
   no hace falta reencuadrar: cover solo la escala al tamaño del círculo. */
.asesora__avatar img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.asesora__name{ font-family:var(--font-display); font-size:1.25rem; font-weight:700; color:#fff; margin:0 0 .2rem; }
.asesora__role{ font-size:.85rem; color:#bfd9ee; margin:0 0 1.3rem; }
.asesora__meta{ display:grid; gap:.7rem; text-align:left; }
.asesora__meta li{ display:flex; gap:.6rem; align-items:center; font-size:.87rem; color:#dceaf6; }
.asesora__meta svg{ width:17px; height:17px; flex:0 0 auto; color:#7fe3e5; }
.asesora__meta a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.asesora__list{ display:grid; gap:.9rem; margin:1.4rem 0 1.8rem; }
.asesora__list li{ display:flex; gap:.65rem; align-items:flex-start; font-size:.93rem; color:var(--ink-2); }
.asesora__list svg{ width:18px; height:18px; flex:0 0 auto; margin-top:4px; color:var(--accent); }

/* ---------- Responsive de las secciones nuevas ---------- */
@media (max-width: 1000px){
  .crits{ grid-template-columns:repeat(3,1fr); }
  .asesora{ grid-template-columns:1fr; }
  .asesora__card{ max-width:420px; margin-inline:auto; }
}
@media (max-width: 620px){
  .crits{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Catálogo de seguros: acciones de tarjeta y ficha modal
   ========================================================================== */

.filters{ margin-bottom:1rem; }
.filters__conteo{
  text-align:center; font-size:.84rem; color:var(--muted);
  margin:0 0 2rem; min-height:1.3em;
}

/* Las dos acciones van al pie de la tarjeta, alineadas entre tarjetas de
   distinto alto gracias al margin-top:auto que ya trae .plan .btn */
.plan__actions{
  margin-top:auto; display:grid; grid-template-columns:1fr 1fr; gap:.5rem;
}
.plan__actions .btn{ margin-top:0; padding-inline:.6rem; }

/* Un plan resaltado al llegar desde "Cotizar seguro" o desde ?seguro= */
.plan.is-destacado{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,131,133,.18), var(--sh-2);
}

/* ---------- Ficha modal ---------- */
.modal{ position:fixed; inset:0; z-index:180; display:grid; place-items:center; padding:1rem; }
.modal[hidden]{ display:none; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(0,51,90,.55); backdrop-filter:blur(2px); }
.modal__panel{
  position:relative; z-index:1; background:#fff; border-radius:var(--r-xl);
  width:min(100%, 620px); max-height:min(88vh, 900px); overflow-y:auto;
  padding:2rem clamp(1.2rem,.8rem + 1.5vw,2.2rem); box-shadow:0 24px 70px rgba(0,51,90,.35);
  animation:modalIn .22s ease;
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.modal__close{
  position:absolute; top:.9rem; right:.9rem; width:38px; height:38px;
  display:grid; place-items:center; border-radius:50%;
  border:1.5px solid var(--line); background:#fff; color:var(--ink-2); cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease;
}
.modal__close:hover{ background:var(--brand-050); border-color:var(--brand); color:var(--brand-700); }
.modal__close svg{ width:18px; height:18px; }

.modal__panel h2{ font-size:clamp(1.4rem,1.2rem + .8vw,1.85rem); margin:.2rem 2.6rem .6rem 0; }
.modal__resumen{ color:var(--muted); font-size:.95rem; }
.modal__sub{
  font-family:var(--font-sans); font-size:.76rem; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase; color:var(--brand-700);
  margin:1.6rem 0 .7rem;
}
.modal__bullets{ display:grid; gap:.55rem; }
.modal__bullets li{ display:flex; gap:.55rem; align-items:flex-start; font-size:.93rem; color:var(--ink-2); }
.modal__bullets svg{ width:17px; height:17px; flex:0 0 auto; margin-top:3px; color:var(--accent); }

.modal__ficha{ display:grid; gap:.1rem; margin:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.modal__ficha > div{ display:grid; grid-template-columns:minmax(120px,.7fr) 1.3fr; gap:.8rem; padding:.7rem 1rem; }
.modal__ficha > div:nth-child(odd){ background:var(--surface-2); }
.modal__ficha dt{ font-size:.82rem; font-weight:700; color:var(--brand-900); }
.modal__ficha dd{ margin:0; font-size:.88rem; color:var(--ink-2); }

.modal__legal{ font-size:.76rem; line-height:1.6; color:var(--muted); margin:1.4rem 0 0; }
.modal__actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem; }
.modal__actions .btn{ flex:1 1 180px; }

/* Mientras la ficha está abierta, el fondo no se desplaza */
body.tiene-modal{ overflow:hidden; }

@media (max-width: 620px){
  .plan__actions{ grid-template-columns:1fr; }
  .modal__ficha > div{ grid-template-columns:1fr; gap:.15rem; }
  .modal__panel{ padding:1.6rem 1.1rem; max-height:92vh; }
}

/* ==========================================================================
   Fondo de página — #8CA5FF
   ========================================================================== */

:root{
  --page: #8CA5FF;
  /* Sobre este azul, el gris --muted (#5b6b7c) queda en 2,3:1 y deja de leerse.
     Este tono llega a 5,6:1, por encima del 4,5:1 que exige la norma AA.
     Solo se aplica al texto que cae directamente sobre el fondo: dentro de las
     tarjetas blancas se conserva el gris original. */
  --ink-on-page: #22304a;
}

body{ background:var(--page); }

/* El héroe ya no termina en blanco. Se aclara arriba, donde está el titular, y
   se disuelve hacia abajo en el fondo de la página, para que no quede un corte
   recto a media pantalla entre el héroe y la primera sección. */
.hero{
  background:
    radial-gradient(1100px 520px at 88% -12%, rgba(0,131,133,.20), transparent 62%),
    radial-gradient(900px 460px at 4% 8%, rgba(0,121,199,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,0) 84%);
}

/* Las franjas claras pasan a ser un velo blanco sobre el fondo, en vez de tener
   color propio: así se distinguen del resto sin competir con el azul. */
.section--tint{ background:rgba(255,255,255,.55); }

/* Texto secundario que queda directamente sobre el fondo de la página. */
.lead,
.plans__nota,
.hero__note,
.plans__vacio{ color:var(--ink-on-page); }

/* La política de privacidad es texto largo y corrido: se lee mucho mejor sobre
   blanco que sobre el fondo de color, así que va dentro de un panel. */
.legal__body{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(1.4rem, 1rem + 2vw, 2.4rem);
}

/* Bloques que quedaron directamente sobre el fondo de color y venían con el
   gris claro heredado del diseño anterior sobre blanco. Medidos en la página
   ya publicada: iban entre 2,3:1 y 4,45:1, todos por debajo del mínimo. */
.filters__conteo,
.contact__list,
.contact__list span,
.asesora__list li{ color:var(--ink-on-page); }

/* Los enlaces de contacto necesitan un azul más profundo que --brand-700:
   sobre el fondo de página ese tono se queda en 3,2:1 y este llega a 5,5:1. */
.contact__list a{ color:var(--brand-900); }



/* ==========================================================================
   Portada con fotografía
   La foto es apaisada (1,98) y luminosa, así que el héroe vuelve al
   tratamiento claro: texto oscuro, acento en el azul de marca y velo blanco.
   El velo es un degradado que va de casi opaco en el lado del titular a
   translúcido en el del formulario: el texto conserva su contraste y la
   fotografía se ve donde no estorba.
   ========================================================================== */
.hero{
  position:relative;
  background:
    linear-gradient(100deg,
      rgba(255,255,255,.88) 0%,
      rgba(255,255,255,.84) 30%,
      rgba(255,255,255,.58) 52%,
      rgba(238,242,255,.34) 74%,
      rgba(222,231,255,.20) 100%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 40%, rgba(140,165,255,.28)),
    url("../img/portada.jpg?v=2") center 30% / cover no-repeat,
    #E8EDFA;
}

/* La foto termina fundida en el color de la página, no cortada en seco. */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:5.5rem;
  background:linear-gradient(180deg, rgba(140,165,255,0), var(--page));
  pointer-events:none;
}

/* Sombra clara bajo el texto del héroe. No es adorno: sostiene el contraste
   cuando detrás cae una zona oscura de la foto (el pelo, la ropa marino),
   que es donde un velo plano se queda corto. */
.hero h1,
.hero .lead,
.hero__note{ text-shadow:0 1px 2px rgba(255,255,255,.75); }

/* "Fonasa e Isapre" es texto relleno con un degradado recortado, así que su
   color es transparente. Una sombra ahí no cae bajo la letra: dibuja la letra
   entera por detrás y se ve doble. */
.hero h1 span{ text-shadow:none; }

/* En móvil el héroe mide más de 2000 px de alto porque las columnas se apilan.
   Con "cover" la foto se estira a esa altura y solo se ve una franja vertical
   estrecha, irreconocible. Por eso aquí la imagen lleva altura propia: a ancho
   completo su proporción da 51vw, y el velo cubre exactamente esa banda antes
   de fundirse en blanco. */
@media (max-width: 1000px){
  .hero{
    background:
      linear-gradient(180deg,
        rgba(255,255,255,.20) 0%,
        rgba(255,255,255,.46) 42%,
        rgba(255,255,255,.90) 82%,
        #fff 100%) top center / 100% 51vw no-repeat,
      url("../img/portada.jpg?v=2") top center / 100% auto no-repeat,
      linear-gradient(180deg, #fff 0%, rgba(255,255,255,.55) 62%, rgba(255,255,255,0) 100%),
      var(--page);
  }
}