/* ============================================================================
   Isapres360 · /planes-y-precios
   Diseño profesional compacto
   Archivo exclusivo para views/clientes/planes_y_precios.php
   Todas las clases usan prefijo pyp- para evitar colisiones globales.
   ============================================================================ */

:root{
  --pyp-primary:#0056b3;
  --pyp-primary-2:#003580;
  --pyp-primary-dark:#003580;
  --pyp-accent:#00a651;
  --pyp-accent-hover:#008840;
  --pyp-ink:#0f172a;
  --pyp-text:#334155;
  --pyp-muted:#64748b;
  --pyp-soft:#94a3b8;
  --pyp-line:#e2e8f0;
  --pyp-line-strong:#cbd5e1;
  --pyp-bg:#f8fafc;
  --pyp-surface:#ffffff;
  --pyp-surface-soft:#f1f5f9;
  --pyp-dark:#0f172a;
  --pyp-danger:#b91c1c;
  --pyp-success:#15803d;
  --pyp-radius-sm:8px;
  --pyp-radius:12px;
  --pyp-radius-lg:18px;
  --pyp-shadow:0 10px 28px rgba(15,23,42,.07);
  --pyp-shadow-hover:0 16px 38px rgba(15,23,42,.11);
}

/* ---------- Base aislada ---------- */
.pyp-hero *,
.pyp-sec *,
.pyp-logos *,
.pyp-formsec *,
.pyp-trust *{box-sizing:border-box}

#planes,#cotizar{scroll-margin-top:90px}

.pyp-sec > .wrap,
.pyp-logos > .wrap,
.pyp-trust > .wrap{
  width:min(100% - 32px, 1080px);
  margin-inline:auto;
}

/* ============================================================================
   HERO
   ============================================================================ */
.pyp-hero{
  position:relative;
  overflow:hidden;
  margin-top:70px;
  padding:52px 0 46px;
  color:#fff;
  background:
    radial-gradient(circle at 12% 14%, rgba(255,255,255,.12), transparent 28%),
    radial-gradient(circle at 88% 86%, rgba(255,255,255,.09), transparent 24%),
    linear-gradient(135deg,#0b2a4a 0%,var(--pyp-primary-2) 45%,var(--pyp-primary) 100%);
}

/* Foto de familia real: translúcida y teñida de azul, al fondo del hero */
.pyp-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("../images/hero_familia.jpg") center 10% / cover no-repeat;
  opacity:.3;
  mix-blend-mode:luminosity;
  pointer-events:none;
}

/* Velo azul detrás del texto para que siempre se lea bien */
.pyp-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 60% 85% at 50% 50%, rgba(11,42,74,.55), transparent 75%),
    linear-gradient(180deg, transparent 55%, rgba(11,42,74,.35) 100%);
  pointer-events:none;
}

.pyp-hero-in{
  position:relative;
  z-index:1;
  width:min(100% - 32px, 820px);
  margin-inline:auto;
  text-align:center;
}

.pyp-pill{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 12px;
  margin:0 0 17px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
}

.pyp-hero-in h1{
  margin:0;
  color:#fff;
  font-size:clamp(30px,4.6vw,46px);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.035em;
}

.pyp-hero-sub{
  max-width:620px;
  margin:16px auto 0;
  color:rgba(255,255,255,.88);
  font-size:clamp(15px,2vw,18px);
  line-height:1.65;
}

.pyp-hero-cta{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}

.pyp-hero-tags{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 22px;
  margin:23px 0 0;
  padding:0;
  list-style:none;
}

.pyp-hero-tags li{
  position:relative;
  padding-left:20px;
  color:rgba(255,255,255,.82);
  font-size:12.5px;
}

.pyp-hero-tags li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:-1px;
  width:15px;
  height:15px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  color:#fff;
  font-size:10px;
  font-weight:900;
}

/* ============================================================================
   BOTONES
   ============================================================================ */
.pyp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:42px;
  padding:11px 18px;
  border:0;
  border-radius:9px;
  background:var(--pyp-accent);
  color:#111827;
  font:inherit;
  font-size:14px;
  font-weight:800;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}

.pyp-btn:hover{
  background:var(--pyp-accent-hover);
  box-shadow:0 7px 16px rgba(0,166,81,.22);
  color:#111827;
}

.pyp-btn:active{transform:translateY(1px)}

.pyp-btn-line{
  background:rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.42);
}

.pyp-btn-line:hover{
  background:rgba(255,255,255,.15);
  color:#fff;
  box-shadow:none;
}

.pyp-btn-ghost{
  background:#fff;
  color:var(--pyp-text);
  border:1px solid var(--pyp-line-strong);
}

.pyp-btn-ghost:hover{
  background:var(--pyp-bg);
  box-shadow:none;
}

.pyp-btn-lg{width:100%;min-height:45px;font-size:14.5px}
.pyp-hero-cta .pyp-btn{min-width:150px}

/* ============================================================================
   PLANES / CALUGAS
   ============================================================================ */
.pyp-sec{
  padding:52px 0 56px;
  background:var(--pyp-bg);
}

.pyp-sec-head{
  max-width:620px;
  margin:0 auto 29px;
  text-align:center;
}

.pyp-sec-head h2{
  margin:0;
  color:var(--pyp-ink);
  font-size:clamp(25px,3.2vw,32px);
  font-weight:800;
  line-height:1.18;
  letter-spacing:-.025em;
}

.pyp-sec-head p{
  margin:10px 0 0;
  color:var(--pyp-muted);
  font-size:14px;
  line-height:1.6;
}

.pyp-ref{font-size:12px!important}

.pyp-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0, 290px));
  justify-content:center;
  align-items:stretch;
  gap:16px;
  width:100%;
  max-width:902px;
  margin-inline:auto;
}

.pyp-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:18px;
  border:1px solid var(--pyp-line);
  border-radius:12px;
  background:var(--pyp-surface);
  box-shadow:0 3px 10px rgba(15,23,42,.035);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.pyp-card:hover{
  transform:translateY(-2px);
  border-color:#cbd5e1;
  box-shadow:var(--pyp-shadow);
}

.pyp-card.pyp-best{
  border:1.5px solid #4d8fd6;
  box-shadow:0 8px 22px rgba(0,86,179,.10);
}

.pyp-badge{
  position:absolute;
  top:-10px;
  left:16px;
  padding:4px 9px;
  border-radius:999px;
  background:var(--pyp-primary);
  color:#fff;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.06em;
  box-shadow:0 4px 10px rgba(0,86,179,.18);
}

.pyp-card-isapre{
  height:26px;
  margin:0;
  display:flex;
  align-items:center;
}

.pyp-card-isapre img{
  display:block;
  width:auto;
  max-width:132px;
  max-height:25px;
  object-fit:contain;
  object-position:left center;
}

.pyp-card-plan{
  margin:8px 0 0;
  color:var(--pyp-ink);
  font-size:17px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.015em;
}

.pyp-card-price{
  display:flex;
  align-items:baseline;
  gap:5px;
  margin:12px 0 0;
}

.pyp-card-price b{
  color:var(--pyp-ink);
  font-size:26px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.025em;
}

.pyp-card-price span{
  color:var(--pyp-muted);
  font-size:12.5px;
}

.pyp-card-uf{
  margin:4px 0 0;
  color:var(--pyp-muted);
  font-size:12px;
}

.pyp-card hr{
  width:100%;
  margin:13px 0;
  border:0;
  border-top:1px solid var(--pyp-line);
}

.pyp-card ul{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:7px;
  margin:0;
  padding:0;
  list-style:none;
  color:var(--pyp-text);
  font-size:12.5px;
  line-height:1.45;
}

.pyp-card li{
  position:relative;
  padding-left:20px;
}

.pyp-card li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:1px;
  width:14px;
  height:14px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e8f0fe;
  color:var(--pyp-primary);
  font-size:9px;
  font-weight:900;
}

.pyp-card .pyp-btn{
  width:100%;
  margin-top:15px;
  min-height:40px;
  padding:10px 12px;
  font-size:12.5px;
}

.pyp-card-pend .pyp-card-price b{
  color:var(--pyp-muted);
  font-size:18px;
  line-height:1.25;
}

.pyp-card-note{
  flex:1;
  margin:0;
  color:var(--pyp-muted);
  font-size:12px;
  line-height:1.55;
}

.pyp-disclaimer{
  max-width:600px;
  margin:23px auto 0;
  color:var(--pyp-soft);
  font-size:11.5px;
  line-height:1.6;
  text-align:center;
}

/* ============================================================================
   LOGOS
   ============================================================================ */
.pyp-logos{
  padding:28px 0;
  border-top:1px solid var(--pyp-line);
  border-bottom:1px solid var(--pyp-line);
  background:#fff;
}

.pyp-logos-t{
  margin:0 0 16px;
  color:var(--pyp-muted);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.09em;
  text-align:center;
  text-transform:uppercase;
}

.pyp-logos-row{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:9px;
  max-width:860px;
  margin-inline:auto;
}

.pyp-logo-box{
  height:46px;
  display:grid;
  place-items:center;
  padding:7px 9px;
  border:1px solid var(--pyp-line);
  border-radius:8px;
  background:#fbfdff;
}

.pyp-logo-box img{
  display:block;
  width:auto;
  max-width:78px;
  max-height:21px;
  object-fit:contain;
}

/* ============================================================================
   FORMULARIO
   ============================================================================ */
.pyp-formsec{
  padding:50px 0;
  color:#fff;
  background:
    radial-gradient(circle at 15% 20%, rgba(0,102,204,.24), transparent 28%),
    linear-gradient(180deg,#14456f 0%,#0b2a4a 100%);
}

.pyp-formsec-in{
  width:min(100% - 32px, 900px);
  margin-inline:auto;
  display:grid;
  grid-template-columns:300px minmax(0,500px);
  justify-content:center;
  align-items:start;
  gap:36px;
}

.pyp-formsec-in > div:first-child{padding-top:8px}

.pyp-formsec-in h2{
  margin:0;
  color:#fff;
  font-size:27px;
  font-weight:800;
  line-height:1.17;
  letter-spacing:-.025em;
}

.pyp-lead{
  margin:13px 0 0;
  color:#a8b3c5;
  font-size:13.5px;
  line-height:1.65;
}

.pyp-trust-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:20px 0 0;
  padding:0;
  list-style:none;
}

.pyp-trust-list li{
  position:relative;
  padding-left:27px;
  color:#dbe3ee;
  font-size:12.5px;
  line-height:1.5;
}

.pyp-trust-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border:1px solid rgba(120,180,240,.5);
  border-radius:50%;
  background:rgba(0,102,204,.2);
  color:#9cc7f2;
  font-size:10px;
  font-weight:900;
}

.pyp-formcard{
  width:100%;
  max-width:500px;
  padding:22px;
  border:1px solid rgba(226,232,240,.75);
  border-radius:14px;
  background:#fff;
  color:var(--pyp-ink);
  box-shadow:0 20px 50px rgba(0,0,0,.22);
}

.pyp-steps{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}

.pyp-steps b{
  color:var(--pyp-primary);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.06em;
}

.pyp-steps small{
  margin-left:auto;
  color:var(--pyp-muted);
  font-size:10.5px;
}

.pyp-bar{
  height:5px;
  margin-bottom:17px;
  overflow:hidden;
  border-radius:999px;
  background:#e8edf3;
}

.pyp-bar i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--pyp-primary),#17a2b8);
  transition:width .25s ease;
}

.pyp-formcard h3{
  margin:0;
  color:var(--pyp-ink);
  font-size:19px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.018em;
}

.pyp-hint{
  margin:6px 0 0;
  color:var(--pyp-muted);
  font-size:12px;
  line-height:1.55;
}

.pyp-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:17px;
}

.pyp-f{display:flex;flex-direction:column;min-width:0}
.pyp-f.pyp-full{grid-column:1/-1}

.pyp-f label{
  margin-bottom:5px;
  color:#334155;
  font-size:11.5px;
  font-weight:700;
}

.pyp-f label em{
  color:var(--pyp-soft);
  font-style:normal;
  font-weight:500;
}

.pyp-f input,
.pyp-f select,
.pyp-f textarea{
  width:100%;
  border:1px solid var(--pyp-line-strong);
  border-radius:8px;
  background:#fff;
  color:var(--pyp-ink);
  font:inherit;
  font-size:13px;
  outline:none;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}

.pyp-f input,
.pyp-f select{
  height:42px;
  padding:0 11px;
}

.pyp-f textarea{
  min-height:68px;
  padding:10px 11px;
  resize:vertical;
  line-height:1.5;
}

.pyp-f input:focus,
.pyp-f select:focus,
.pyp-f textarea:focus{
  border-color:#4d8fd6;
  box-shadow:0 0 0 3px rgba(0,102,204,.12);
}

.pyp-f select:disabled{
  background:var(--pyp-bg);
  color:var(--pyp-soft);
}

.pyp-f small{
  margin-top:4px;
  color:var(--pyp-soft);
  font-size:10.5px;
  line-height:1.4;
}

.pyp-f .pyp-err,
#pyp-errConsent{
  display:none;
  margin:4px 0 0;
  color:var(--pyp-danger);
  font-size:11px;
  font-weight:600;
  line-height:1.4;
}

.pyp-f.pyp-invalid input,
.pyp-f.pyp-invalid select{border-color:#ef4444}
.pyp-f.pyp-invalid .pyp-err{display:block}

.pyp-cargas{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:5px;
}

.pyp-cargas button{
  min-width:0;
  height:39px;
  padding:0;
  border:1px solid var(--pyp-line-strong);
  border-radius:8px;
  background:#fff;
  color:var(--pyp-text);
  font:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

.pyp-cargas button:hover{background:var(--pyp-bg)}

.pyp-cargas button[aria-pressed="true"]{
  border-color:#4d8fd6;
  background:#e8f0fe;
  color:var(--pyp-primary-dark);
  box-shadow:inset 0 0 0 1px #4d8fd6;
}

.pyp-consents{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:16px;
}

.pyp-cs{
  display:flex;
  align-items:flex-start;
  gap:9px;
  color:#475569;
  font-size:10.8px;
  line-height:1.48;
  cursor:pointer;
}

.pyp-cs input{
  flex:none;
  width:16px;
  height:16px;
  margin-top:1px;
  accent-color:var(--pyp-primary);
}

.pyp-cs a{color:var(--pyp-primary);font-weight:700}

.pyp-legal{
  margin:9px 0 0;
  color:var(--pyp-soft);
  font-size:10px;
  line-height:1.45;
  text-align:center;
}

.pyp-step[hidden]{display:none}

.pyp-nav-row{
  display:flex;
  gap:9px;
  margin-top:17px;
}

.pyp-nav-row .pyp-btn{flex:1;min-width:0}
.pyp-nav-row .pyp-btn-ghost{flex:0 0 auto}

.pyp-resumen{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:13px;
  padding:9px 11px;
  border:1px solid #b6d0f2;
  border-radius:8px;
  background:#e8f0fe;
}

.pyp-resumen p{
  margin:0;
  color:#003580;
  font-size:10.8px;
  line-height:1.45;
}

.pyp-resumen button{
  padding:0;
  border:0;
  background:none;
  color:var(--pyp-primary);
  font:inherit;
  font-size:10.8px;
  font-weight:800;
  text-decoration:underline;
  cursor:pointer;
}

.pyp-noelig{
  padding:12px 4px;
  text-align:center;
}
.pyp-noelig[hidden]{display:none}
.pyp-noelig h3{margin:0 0 10px;color:var(--pyp-ink);font-size:19px;line-height:1.3}
.pyp-noelig h3:focus{outline:none}
.pyp-noelig p{margin:0;color:var(--pyp-ink);font-size:15px;line-height:1.55}
.pyp-alert-error{
  margin-bottom:14px;
  padding:10px 12px;
  border:1px solid #fecaca;
  border-radius:8px;
  background:#fef2f2;
  color:var(--pyp-danger);
  font-size:11.5px;
  font-weight:700;
}

/* ============================================================================
   CONFIANZA
   ============================================================================ */
.pyp-trust{
  padding:34px 0;
  background:#fff;
}

.pyp-trust-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  text-align:center;
}

.pyp-trust-grid > div{
  padding:8px 10px;
}

.pyp-trust-grid b{
  display:block;
  color:var(--pyp-ink);
  font-size:13px;
  font-weight:800;
}

.pyp-trust-grid span{
  display:block;
  margin-top:2px;
  color:var(--pyp-muted);
  font-size:11px;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width:960px){
  .pyp-grid{
    grid-template-columns:repeat(2,minmax(0,290px));
    max-width:596px;
  }

  .pyp-logos-row{
    grid-template-columns:repeat(4,minmax(0,1fr));
    max-width:620px;
  }

  .pyp-formsec-in{
    grid-template-columns:1fr;
    max-width:520px;
    gap:24px;
  }

  .pyp-formsec-in > div:first-child,
  .pyp-formcard{
    width:100%;
    max-width:500px;
    margin-inline:auto;
  }

  .pyp-formsec-in > div:first-child{text-align:center}
  .pyp-trust-list{max-width:380px;margin-inline:auto;text-align:left}
}

@media (max-width:640px){
  .pyp-hero{margin-top:64px;padding:42px 0 38px}
  .pyp-hero-in{width:min(100% - 28px, 520px)}
  .pyp-hero-in h1{font-size:31px}
  .pyp-hero-sub{font-size:14.5px}

  .pyp-hero-cta{flex-direction:column;align-items:stretch}
  .pyp-hero-cta .pyp-btn{width:100%}
  .pyp-hero-tags{justify-content:flex-start;max-width:280px;margin-inline:auto;text-align:left}

  .pyp-sec{padding:42px 0 46px}
  .pyp-sec > .wrap,
  .pyp-logos > .wrap,
  .pyp-trust > .wrap{width:min(100% - 28px, 520px)}

  .pyp-grid{
    grid-template-columns:1fr;
    width:100%;
    max-width:340px;
  }

  .pyp-card{width:100%;padding:18px}

  .pyp-logos-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:340px;
  }

  .pyp-logo-box{height:45px}

  .pyp-formsec{padding:42px 0}
  .pyp-formsec-in{width:min(100% - 28px, 430px)}
  .pyp-formsec-in h2{font-size:24px}
  .pyp-formcard{padding:18px;border-radius:12px}
  .pyp-fields{grid-template-columns:1fr}
  .pyp-cargas{grid-template-columns:repeat(4,1fr)}

  .pyp-nav-row{flex-direction:column-reverse}
  .pyp-nav-row .pyp-btn-ghost{width:100%}

  .pyp-trust-grid{grid-template-columns:repeat(2,1fr);gap:12px}
}

@media (max-width:390px){
  .pyp-card-price b{font-size:24px}
  .pyp-formcard{padding:16px}
  .pyp-cargas{gap:4px}
}

@media (prefers-reduced-motion:reduce){
  .pyp-card,
  .pyp-btn,
  .pyp-bar i,
  .pyp-f input,
  .pyp-f select,
  .pyp-f textarea{transition:none!important}
}