/* ============================================================
   SifaPlus — responsive.css (propuesta clara)
   Breakpoints: 1600 / 1200 / 992 / 768 / 576 / 380
   Todo escopeado a .landing-page para no afectar el dashboard.
   ============================================================ */

@media (min-width:1600px){
  .landing-page{--container:1320px}
  .landing-page .hero h1{font-size:4rem}
}

@media (max-width:1200px){
  .landing-page .section{padding:96px 0}
  .landing-page .proc-grid{grid-template-columns:repeat(3,1fr)}
  .landing-page .mod-grid{grid-template-columns:repeat(3,1fr)}
  .landing-page .float-a{left:-2%}
  .landing-page .float-b{right:-1%}
}

@media (max-width:992px){
  .landing-page .nav-menu{
    position:fixed;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:4px;
    background:rgba(255,255,255,.98);backdrop-filter:blur(20px);
    padding:16px 20px 24px;border-bottom:1px solid var(--border);
    transform:translateY(-140%);transition:transform .4s var(--ease);
    max-height:calc(100vh - var(--nav-h));overflow:auto;
    box-shadow:0 20px 40px rgba(15,27,45,.08);
  }
  .landing-page .nav-menu.open{transform:translateY(0)}
  .landing-page .nav-menu a{padding:13px 16px;font-size:1rem}
  .landing-page .nav-toggle{display:grid;place-items:center}
  .landing-page .nav-actions .btn:not(.nav-toggle){display:none}

  .landing-page .hero{padding-top:calc(var(--nav-h) + 40px)}
  .landing-page .hero .container{grid-template-columns:minmax(0,1fr);gap:56px}
  .landing-page .hero .lead{max-width:none}
  .landing-page .hero-adv{max-width:none}
  .landing-page .mockup{max-width:560px;margin:0 auto}
  .landing-page .dash{transform:none}

  .landing-page .plans{max-width:640px}
  .landing-page .ben-grid{grid-template-columns:repeat(2,1fr)}
  .landing-page .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
}

@media (max-width:768px){
  .landing-page .section{padding:72px 0}
  .landing-page h2{font-size:1.8rem}
  .landing-page .section-head{margin-bottom:42px}

  .landing-page .proc-grid{grid-template-columns:1fr;gap:14px}
  .landing-page .proc-card::before{font-size:2.6rem}

  .landing-page .mod-grid{grid-template-columns:repeat(2,1fr);gap:14px}

  .landing-page .plans{grid-template-columns:1fr;max-width:440px}

  .landing-page .stats-grid{grid-template-columns:1fr 1fr;gap:30px 24px}
  .landing-page .stat+.stat{border-left:none}
  .landing-page .stat:nth-child(3),.landing-page .stat:nth-child(4){padding-top:26px;border-top:1px solid var(--border)}

  .landing-page .compare-wrap{overflow-x:auto}
  .landing-page table.compare{min-width:520px}

  .landing-page .cta{padding:52px 26px}
  .landing-page .foot-grid{grid-template-columns:1fr;gap:30px}
  .landing-page .float{display:none}
  .landing-page .services .row{gap:10px 12px}
  .landing-page .services .row span{padding:9px 16px;font-size:.88rem}
}

@media (max-width:576px){
  .landing-page{--radius-lg:22px}
  .landing-page .section{padding:58px 0}
  .landing-page .container{width:90%}
  .landing-page .hero h1{font-size:2.1rem}
  .landing-page .hero .lead{font-size:1.02rem}
  .landing-page .hero-adv{grid-template-columns:1fr}
  .landing-page .hero-cta{flex-direction:column}
  .landing-page .hero-cta .btn{width:100%;justify-content:center}
  .landing-page .hero-trust{flex-direction:column;align-items:flex-start;gap:10px}

  .landing-page .ben-grid{grid-template-columns:1fr}
  .landing-page .mod-grid{grid-template-columns:1fr}
  .landing-page .plan{padding:30px 24px}
  .landing-page .plan .p-price{font-size:2.4rem}

  .landing-page .stats{padding:36px 22px}
  .landing-page .stats-grid{grid-template-columns:1fr;gap:22px}
  .landing-page .stat:nth-child(n){border-top:none;padding-top:0}
  .landing-page .stat+.stat{border-top:1px solid var(--border);padding-top:22px}

  .landing-page .play-btn{width:74px;height:74px;font-size:1.5rem}
  .landing-page .foot-bottom{flex-direction:column;text-align:center}
  .landing-page .fab a,.landing-page .fab button{width:50px;height:50px}
}

@media (max-width:380px){
  .landing-page .brand img{height:30px}
  .landing-page .hero h1{font-size:1.9rem}
  .landing-page .eyebrow{font-size:.7rem}
  .landing-page .btn{padding:13px 20px;font-size:.92rem}
}