/* Planes y precios — vitrina comercial. Fase de validación: se muestra el precio, todavía no se cobra. */
.planes-page{ --p-navy:#102B57; --p-ink:#14233C; --p-gold:#F5B800; --p-gold-soft:#FFD54A;
              --p-bg:#F7F8FB; --p-line:#E5E8EF; --p-sub:#66748C; }
.planes-page{ background:var(--p-bg); }
.planes-main{ padding:24px 0 0; }

/* ───────── HERO ───────── */
.plhero{ position:relative; border-radius:22px; overflow:hidden; background:#05080F; isolation:isolate; }
.plhero-img{ position:absolute; inset:0; background:url(assets/planes/hero-planes.jpg) center right/cover no-repeat; }
.plhero-veil{ position:absolute; inset:0;
  background:linear-gradient(96deg,#05080F 0%,rgba(5,8,15,.97) 30%,rgba(8,14,26,.78) 50%,rgba(8,14,26,.25) 72%,transparent 100%); }
.plhero-in{ position:relative; padding:56px 52px 58px; max-width:640px; }
.plhero-kicker{ display:inline-flex; align-items:center; gap:8px; font-size:10.5px; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:var(--p-gold); margin-bottom:18px; }
.plhero-kicker::before{ content:""; width:22px; height:2px; background:var(--p-gold); border-radius:2px; }
.plhero h1{ font-size:clamp(34px,4.6vw,52px); line-height:1.04; letter-spacing:-.035em; color:#fff; margin:0; font-weight:800; }
.plhero h1 em{ font-style:normal; color:var(--p-gold); display:block; }
.plhero-sub{ color:#B7C4D8; font-size:15.5px; line-height:1.62; margin:16px 0 0; max-width:52ch; }
.plhero-note{ display:flex; gap:13px; align-items:flex-start; margin-top:26px; padding:15px 18px; max-width:56ch;
  background:rgba(245,184,0,.10); border:1px solid rgba(245,184,0,.34); border-left:3px solid var(--p-gold); border-radius:12px; }
.plhero-note svg{ width:19px; height:19px; flex:none; margin-top:1px; fill:none; stroke:var(--p-gold); stroke-width:1.9; stroke-linecap:round; }
.plhero-note p{ color:#DCE5F1; font-size:13.2px; line-height:1.58; margin:0; }
.plhero-note b{ color:var(--p-gold); }

/* ───────── SELECTOR ───────── */
.psw{ display:flex; gap:5px; background:#fff; padding:6px; border:1px solid var(--p-line); border-radius:15px;
  margin:-30px auto 0; width:max-content; max-width:100%; position:relative; z-index:2;
  box-shadow:0 12px 34px -14px rgba(16,43,87,.30); }
.psw button{ display:flex; align-items:center; gap:9px; border:0; background:transparent; cursor:pointer;
  padding:13px 26px; border-radius:11px; font:800 13.5px var(--font); color:var(--p-sub); transition:.16s; }
.psw button svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }
.psw button:hover{ color:var(--p-navy); }
.psw button.on{ background:var(--p-navy); color:#fff; }

/* ───────── CABECERAS ───────── */
.psec{ text-align:center; margin:52px 0 26px; }
.psec h2{ font-size:clamp(22px,2.6vw,29px); letter-spacing:-.025em; color:var(--p-ink); margin:0 0 8px; font-weight:800; }
.psec p{ color:var(--p-sub); font-size:14.5px; margin:0; }

/* ───────── PLANES ───────── */
.pgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
.pcard{ background:#fff; border:1px solid var(--p-line); border-radius:20px; padding:30px 26px 26px;
  display:flex; flex-direction:column; position:relative; transition:.18s; }
.pcard:hover{ transform:translateY(-3px); box-shadow:0 20px 44px -24px rgba(16,43,87,.30); }
.pcard.best{ border:2px solid var(--p-navy); box-shadow:0 26px 60px -26px rgba(16,43,87,.42); transform:translateY(-10px); padding-top:36px; }
.pcard.best:hover{ transform:translateY(-14px); }
.pcard.top{ border:2px solid var(--p-gold); background:linear-gradient(180deg,#FFFCF2 0%,#fff 46%); }
.pbadge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--p-navy); color:var(--p-gold);
  font-size:9.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; padding:6px 16px; border-radius:999px; white-space:nowrap; }
.pcard.top .pbadge{ background:var(--p-gold); color:var(--p-navy); }
.pname{ font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--p-sub); margin:0; }
.pcard.best .pname{ color:var(--p-navy); }
.pprice{ font-size:52px; font-weight:800; letter-spacing:-.045em; color:var(--p-navy); line-height:1; margin:12px 0 3px; }
.pprice small{ font-size:15px; font-weight:700; color:var(--p-sub); letter-spacing:0; }
.pper{ font-size:12px; color:var(--p-sub); font-weight:600; min-height:18px; }
.plist{ list-style:none; margin:22px 0 0; padding:20px 0 0; border-top:1px solid var(--p-line); flex:1; }
.plist li{ display:flex; gap:11px; align-items:flex-start; font-size:13.4px; line-height:1.5; color:#2B3A54; padding:6px 0; }
.plist li svg{ width:17px; height:17px; flex:none; margin-top:2px; fill:none; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
.plist li.si svg{ stroke:#0E9F5A; }
.plist li.no{ color:#9AA6B8; }
.plist li.no svg{ stroke:#C6CEDB; }
.plist li b{ color:var(--p-ink); font-weight:700; }
.tia{ display:inline-block; background:var(--p-gold); color:var(--p-navy); font-size:9px; font-weight:800;
  letter-spacing:.09em; padding:2px 6px; border-radius:5px; margin-right:6px; vertical-align:1px; }
.ppitch{ font-size:12.6px; line-height:1.55; color:var(--p-sub); margin:18px 0 0; padding-top:16px; border-top:1px dashed var(--p-line); }
.pbtn{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:20px; padding:15px 18px;
  border-radius:12px; font:800 13.5px var(--font); text-decoration:none; border:1.5px solid transparent; transition:.16s; cursor:pointer; }
.pbtn.ghost{ background:#fff; border-color:var(--p-line); color:var(--p-ink); }
.pbtn.ghost:hover{ border-color:var(--p-navy); }
.pbtn.solid{ background:var(--p-navy); color:#fff; box-shadow:0 10px 24px -12px rgba(16,43,87,.7); }
.pbtn.solid:hover{ background:#0B1F42; }
.pbtn.gold{ background:var(--p-gold); color:var(--p-navy); box-shadow:0 10px 24px -12px rgba(245,184,0,.9); }
.pbtn.gold:hover{ background:var(--p-gold-soft); }

/* ───────── FUNDADOR ───────── */
.pfound{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:20px; padding:20px 26px;
  border:2px solid var(--p-gold); border-radius:18px; background:linear-gradient(100deg,#FFFBEC,#fff 62%); }
.pfound .ft{ display:flex; align-items:center; gap:11px; font-size:19px; font-weight:800; color:var(--p-navy); white-space:nowrap; }
.pfound .ft svg{ width:23px; height:23px; fill:none; stroke:var(--p-gold); stroke-width:1.9; stroke-linejoin:round; }
.pfound p{ flex:1; min-width:250px; font-size:13.4px; line-height:1.55; color:#3A4A66; margin:0; }

/* ───────── CÓMO FUNCIONA ───────── */
.plflow{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.plstep{ background:#fff; border:1px solid var(--p-line); border-radius:18px; padding:24px 24px 26px; position:relative; }
.plstep .n{ width:34px; height:34px; border-radius:11px; background:var(--p-navy); color:var(--p-gold);
  font:800 15px var(--font); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.plstep h3{ font-size:15.5px; margin:0 0 7px; color:var(--p-ink); letter-spacing:-.01em; }
.plstep p{ font-size:13px; line-height:1.55; color:var(--p-sub); margin:0; }

/* ───────── SERVICIOS ───────── */
.psv{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.psvc{ background:#fff; border:1px solid var(--p-line); border-radius:20px; padding:28px 26px; display:flex; flex-direction:column; }
.psvc-h{ display:flex; align-items:center; gap:14px; }
.psvc-h .ic{ width:52px; height:52px; border-radius:15px; background:#FFF6DE; display:flex; align-items:center; justify-content:center; flex:none; }
.psvc-h .ic svg{ width:25px; height:25px; fill:none; stroke:#B8860B; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.psvc-h h3{ font-size:18px; margin:0; color:var(--p-ink); letter-spacing:-.015em; }
.psvc .pprice{ font-size:38px; margin:16px 0 2px; }
.psvc-d{ font-size:13.4px; line-height:1.6; color:#3A4A66; margin:14px 0 0; flex:1; }
.psvc-s{ font-size:11.6px; line-height:1.5; color:var(--p-sub); border-top:1px dashed var(--p-line); margin-top:14px; padding-top:12px; }
.psvc-a{ display:flex; gap:10px; margin-top:18px; }
.psvc-a .pbtn{ margin-top:0; flex:1; padding:13px 14px; font-size:12.8px; }

/* ───────── PAGOS ───────── */
.ppay{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ppc{ background:#fff; border:1px solid var(--p-line); border-radius:18px; padding:24px; text-align:center; }
.ppc-logo{ height:38px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.ppc-logo img{ max-height:34px; width:auto; }
.ppc h4{ font-size:15px; margin:0 0 6px; color:var(--p-ink); }
.ppc p{ font-size:12.8px; line-height:1.55; color:var(--p-sub); margin:0; }

/* ───────── FAQ ───────── */
.pfaq{ background:#fff; border:1px solid var(--p-line); border-radius:20px; padding:6px 28px; max-width:900px; margin:0 auto; }
.pfaq details{ border-bottom:1px solid var(--p-line); }
.pfaq details:last-child{ border-bottom:0; }
.pfaq summary{ cursor:pointer; padding:19px 0; font-weight:700; font-size:15px; color:var(--p-ink);
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:18px; }
.pfaq summary::-webkit-details-marker{ display:none; }
.pfaq summary::after{ content:""; width:11px; height:11px; flex:none; border-right:2.4px solid var(--p-gold);
  border-bottom:2.4px solid var(--p-gold); transform:rotate(45deg) translate(-3px,-3px); transition:.2s; }
.pfaq details[open] summary::after{ transform:rotate(-135deg) translate(-3px,-3px); }
.pfaq p{ font-size:13.8px; line-height:1.68; color:#3A4A66; margin:0 0 20px; max-width:78ch; }

/* ───────── CIERRE ───────── */
.plcta{ position:relative; overflow:hidden; border-radius:22px; background:linear-gradient(104deg,#0B1F42,#16386E 62%,#1B4380);
  padding:38px 44px; margin:52px 0 0; display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.plcta::after{ content:""; position:absolute; right:-70px; top:-70px; width:290px; height:290px; border-radius:50%;
  background:radial-gradient(circle,rgba(245,184,0,.24),transparent 68%); }
.plcta>*{ position:relative; }
.plcta .txt{ flex:1; min-width:280px; }
.plcta h2{ color:#fff; font-size:25px; margin:0 0 8px; letter-spacing:-.025em; }
.plcta p{ color:#AFC0D8; font-size:14.2px; line-height:1.6; margin:0; }
.plcta .acts{ display:flex; gap:11px; flex-wrap:wrap; }
.plcta .pbtn{ margin-top:0; padding:15px 26px; }
.plcta .pbtn.ghost{ background:transparent; border-color:rgba(255,255,255,.32); color:#fff; }
.plcta .pbtn.ghost:hover{ border-color:#fff; }

@media(max-width:980px){
  .pgrid,.plflow,.ppay{ grid-template-columns:1fr; max-width:470px; margin-left:auto; margin-right:auto; }
  .psv{ grid-template-columns:1fr; }
  .pcard.best{ transform:none; order:-1; }
  .pcard.best:hover{ transform:translateY(-3px); }
  /* En pantallas angostas el carro va como franja al pie, con su propio recorte:
     una foto apaisada estirada a lo alto se ve como un acercamiento borroso. */
  .plhero-in{ padding:34px 24px 24px; max-width:none; }
  .plhero-img{ top:auto; height:215px; background-image:url(assets/planes/hero-planes-mov.jpg);
               background-position:center; background-size:cover; }
  .plhero-veil{ top:auto; height:215px;
    background:linear-gradient(180deg,#05080F 0%,rgba(5,8,15,.62) 34%,rgba(5,8,15,.18) 100%); }
  .plhero{ padding-bottom:215px; }
  .plcta{ padding:28px 24px; }
}
@media(max-width:560px){
  .psw{ width:100%; }
  .psw button{ flex:1; justify-content:center; padding:12px 8px; font-size:12.5px; }
  .psw button svg{ display:none; }
  .psvc-a{ flex-direction:column; }
}