/* =========================================================
   LuLyTV - Responsividade
   ========================================================= */

@media (max-width: 992px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .plan.featured{transform:none}
  .plan.featured:hover{transform:translateY(-6px)}
}

@media (max-width: 768px){
  section{padding:70px 0}
  .menu-toggle{display:block}
  .nav-menu{
    position:fixed;top:0;right:-100%;width:80%;max-width:320px;height:100vh;
    background:rgba(8,8,8,.98);backdrop-filter:blur(20px);
    flex-direction:column;align-items:flex-start;
    padding:90px 30px 30px;gap:18px;
    border-left:1px solid rgba(255,255,255,.05);
    transition:right .35s ease;z-index:1001;
  }
  .nav-menu.open{right:0}
  .nav-menu a{font-size:1.05rem;width:100%;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05)}
  .nav-actions .btn{display:none}
  .nav-actions .menu-toggle{display:block}
  .hero{padding:120px 0 60px;text-align:center}
  .hero-content{margin:0 auto}
  .hero p{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
  .footer-grid{grid-template-columns:1fr;text-align:center}
  .footer-brand p{margin:0 auto}
  .footer-contact a{justify-content:center}
  .float-wa{width:54px;height:54px;font-size:1.6rem;bottom:18px;right:18px}
}

@media (max-width: 480px){
  .container{padding:0 18px}
  .btn{padding:12px 22px;font-size:.9rem}
  .hero h1{font-size:2rem}
  .hero p{font-size:1rem}
  .plan{padding:30px 22px}
  .plan-price{font-size:2.2rem}
  .counter-num{font-size:2rem}
  .benefit-card{padding:24px 18px}
}