/* ============================================================
   Soluciones Integrales DJK — Página de Planes
   Usa las variables y la línea gráfica de style.css
   ============================================================ */

/* ---- Botón WhatsApp (específico de esta página) ---- */
.btn-whatsapp{background:#25d366;color:#fff;box-shadow:0 14px 28px -12px rgba(37,211,102,.6)}
.btn-whatsapp:hover{background:#1ebe5b}

/* ---- HERO ---- */
.plans-hero{position:relative;padding:150px 0 70px;color:#fff;background:linear-gradient(120deg,rgba(8,21,48,.93),rgba(11,30,59,.85)),url('assets/img/hero-cloud.jpg') center/cover}
.plans-hero h1{font-size:clamp(2rem,5vw,3.1rem);font-weight:800;margin-bottom:14px;color:#fff;position:relative}
.plans-hero-desc{max-width:620px;color:#cdd9ee;font-size:1.08rem;position:relative}

/* ---- NAV DE CATEGORÍAS (sticky) ---- */
.cat-nav{position:sticky;top:80px;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.cat-nav-inner{display:flex;gap:10px;overflow-x:auto;padding:14px 26px;scrollbar-width:none}
.cat-nav-inner::-webkit-scrollbar{display:none}
.cat-tab{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;padding:11px 20px;border-radius:999px;font-weight:600;font-size:.92rem;color:var(--ink);background:var(--bg-soft);border:1px solid var(--line);transition:.25s}
.cat-tab:hover{color:var(--blue);border-color:var(--blue)}
.cat-tab.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 12px 24px -12px rgba(37,99,235,.6)}

/* ---- CATEGORÍA ---- */
.plan-cat{padding:80px 0}
.plan-cat.alt{background:var(--bg-soft)}
.cat-head{text-align:center;max-width:680px;margin:0 auto 50px}
.cat-tag{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);color:var(--blue);font-weight:700;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;padding:8px 18px;border-radius:999px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.plan-cat.alt .cat-tag{background:#fff}
.cat-head h2{font-size:clamp(1.7rem,3.6vw,2.4rem);text-transform:uppercase;margin-bottom:12px}
.cat-head>p{color:var(--muted);font-size:1.05rem}

/* ---- TARJETAS DE PLAN ---- */
.plan-row{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:stretch}
.pcard{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s}
.pcard:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.pcard.featured{border:2px solid var(--blue);box-shadow:0 28px 56px -24px rgba(37,99,235,.5)}
@media(min-width:901px){.pcard.featured{transform:scale(1.04)}.pcard.featured:hover{transform:scale(1.04) translateY(-8px)}}
.pcard-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.04em;padding:6px 18px;border-radius:999px;white-space:nowrap;box-shadow:0 10px 20px -8px rgba(37,99,235,.6)}
.pcard-top{padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:22px}
.pcard-top h3{font-size:1.35rem;margin-bottom:12px}
.pcard-price{font-family:'Poppins';font-weight:800;font-size:1.9rem;color:var(--navy);line-height:1.1}
.pcard-price span{display:block;font-size:.85rem;font-weight:500;color:var(--muted);margin-top:4px}
.pcard-features{flex:1;margin-bottom:26px}
.pcard-features li{display:flex;align-items:flex-start;gap:11px;padding:7px 0;font-size:.93rem;color:var(--ink)}
.pcard-features i{color:var(--blue);margin-top:4px;font-size:.82rem;flex-shrink:0}

/* ---- FILA DE 4 PLANES (Backup y Cloud) ---- */
.plan-row-4{grid-template-columns:repeat(4,1fr);gap:22px}
.plan-row-4 .pcard{padding:30px 24px}
.plan-row-4 .pcard-price{font-size:1.55rem}
@media(min-width:1025px) and (max-width:1280px){.plan-row-4{gap:16px}.plan-row-4 .pcard{padding:26px 20px}}
@media(max-width:1024px){.plan-row-4{grid-template-columns:1fr 1fr;max-width:760px}}

/* ---- TODOS LOS PLANES INCLUYEN ---- */
.plans-included{margin:40px auto 0;max-width:900px;background:linear-gradient(120deg,var(--navy),var(--navy-2));color:#fff;border-radius:var(--radius);padding:30px 34px;box-shadow:0 24px 48px -24px rgba(11,30,59,.6)}
.plans-included h4{font-size:1.12rem;font-weight:700;margin-bottom:18px;color:#fff;display:flex;align-items:center;gap:10px}
.plans-included h4 i{color:#60a5fa}
.plans-included ul{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 26px;list-style:none}
.plans-included li{display:flex;align-items:center;gap:10px;font-size:.95rem;color:#dbe6f7}
.plans-included li i{color:#60a5fa;font-size:.82rem;flex-shrink:0}
@media(max-width:760px){.plans-included ul{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.plans-included ul{grid-template-columns:1fr}}

/* ---- FRANJA DE BENEFICIOS ---- */
.benefits-strip{background:linear-gradient(120deg,var(--navy),var(--navy-2));color:#fff;padding:40px 0}
.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.benefit{display:flex;align-items:center;gap:14px;justify-content:center;font-weight:600;font-size:.98rem}
.benefit i{font-size:1.7rem;color:#60a5fa}

/* ---- CTA FINAL ---- */
.plans-cta{padding:80px 0;background:var(--bg-soft);text-align:center}
.plans-cta-inner{max-width:640px;margin:0 auto}
.plans-cta h2{font-size:clamp(1.7rem,3.6vw,2.4rem);margin-bottom:14px}
.plans-cta p{color:var(--muted);font-size:1.08rem;margin-bottom:28px}

/* ---- NOTAS ---- */
.plans-notes{background:#fff;border-top:1px solid var(--line);padding:24px 0}
.plans-notes p{color:var(--muted);font-size:.9rem;text-align:center}
.plans-notes i{color:var(--blue);margin-right:7px}

/* ---- RESPONSIVE ---- */
@media(max-width:1024px){.plan-row{grid-template-columns:1fr;max-width:520px;margin:0 auto}.benefits-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.benefits-grid{grid-template-columns:1fr}.cat-nav{top:80px}.plan-cat{padding:60px 0}}