/* ============================================================
   Benstudios — Estilos de la página de planes y del carrito de planes
   Va en public_html/css/planes.css (se suma a style.css, no lo reemplaza)
   ============================================================ */

/* ---- Página de planes ---- */
.planes-page{ padding:56px 0 90px; }
.planes-title{ font-size:clamp(28px,4vw,40px); font-weight:800; letter-spacing:-0.02em; }
.planes-actual{ margin-top:12px; display:inline-block; background:var(--accent-soft); color:var(--accent-deep); font-weight:700; font-size:13px; padding:7px 14px; border-radius:999px; }
.planes-grid{ margin-top:34px; }
.plan.current{ border-color:var(--accent); }
.plan.current::after{ content:"Tu plan"; position:absolute; top:14px; right:14px; background:var(--accent-soft); color:var(--accent-deep); font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px; }
.planes-compare-title{ font-size:22px; font-weight:800; text-align:center; margin:64px 0 24px; }

.pt-wrap{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); }
.pt{ width:100%; min-width:680px; border-collapse:collapse; font-size:14px; }
.pt thead th{ background:var(--surface); padding:18px 12px; font-family:var(--font-display); font-size:15px; font-weight:800; color:var(--ink); text-align:center; border-bottom:1px solid var(--border); }
.pt th.pt-label, .pt td.pt-label{ text-align:left; padding-left:22px; width:34%; }
.pt td{ padding:14px 12px; border-bottom:1px solid var(--border); color:var(--ink-soft); }
.pt tbody:last-of-type tr:last-child td{ border-bottom:none; }
.pt .pt-group td{ background:var(--bg-alt); font-size:12px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted); padding:10px 22px; }
.pt .pt-val{ text-align:center; font-weight:600; }
.pt .pt-val .icon{ width:18px; height:18px; display:inline-block; }
.pt .pt-val .icon.yes{ color:var(--green); stroke:var(--green); }
.pt .pt-val .icon.no{ color:var(--muted-soft); stroke:var(--muted-soft); }

/* ---- Ícono "i" con explicación ---- */
.info-tip{ position:relative; display:inline-flex; vertical-align:middle; margin-left:6px; }
.info-btn{ border:none; background:transparent; padding:2px; cursor:pointer; color:var(--muted); display:inline-flex; border-radius:50%; }
.info-btn:hover{ color:var(--accent-deep); }
.info-btn .icon{ width:16px; height:16px; }
.info-pop{ display:none; position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); width:260px; background:var(--ink); color:#fff; font-size:12.5px; font-weight:500; line-height:1.5; padding:11px 13px; border-radius:10px; z-index:20; box-shadow:0 14px 30px -12px var(--shadow-color); text-align:left; }
.info-tip.open .info-pop, .info-tip:hover .info-pop{ display:block; }
@media (max-width:760px){
  .pt-wrap{ overflow-x:auto; }
  .pt th.pt-label, .pt td.pt-label{ position:sticky; left:0; background:var(--surface); z-index:1; min-width:120px; width:120px; padding-left:12px; }
  .pt{ min-width:520px; }
  .pt td, .pt thead th{ padding-left:6px; padding-right:6px; font-size:13px; }
  .info-pop{ left:0; transform:none; bottom:auto; top:calc(100% + 6px); }
}

/* ---- Carrito: aviso de cuenta, módulos, texto del plan ---- */
.cart-logged{ background:var(--accent-soft); border:1px solid var(--accent-pastel); border-radius:var(--radius-md); padding:16px 20px; margin-bottom:20px; }
.cart-logged-main{ font-size:15px; color:var(--ink); }
.cart-logged-sub{ font-size:13px; color:var(--muted); margin-top:3px; }
.cart-logged-warn{ font-size:12.5px; color:#8A5A0B; background:var(--gold-soft); border-radius:8px; padding:8px 10px; margin-top:10px; line-height:1.45; }
.cart-plan-incluye{ font-size:13px; color:var(--muted); margin:10px 0 0; line-height:1.5; }
.cart-modulo-hint{ font-size:12px; color:var(--muted); margin:8px 0 0; }
.cart-modulo-hint:empty{ display:none; }
.cart-item .field select + select{ margin-top:8px; }
.cart-item .field label{ display:block; font-size:12px; font-weight:700; color:var(--ink-soft); margin-bottom:6px; }