/* ===========================
   responsive.css
   =========================== */

@media (max-width:1200px){
  .payment-buttons-5{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (max-width:1024px){
  .hero-inner,
  .vip-inner{grid-template-columns:1fr;}
  .hero-card{order:-1;}
  .main-nav{display:none;}

  .footer-content{
    grid-template-columns:repeat(2,minmax(200px,1fr));
  }

  .payment-methods-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }

  .trust-badges{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }

  .guarantees-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
}

@media (max-width:768px){
  .logo-img{height:25px;}

  .feature-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .contact-inner{flex-direction:column;}
  .contact-actions{flex:1;width:100%;}

  .footer-content{grid-template-columns:1fr;}
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
  .footer-top-link{margin-left:0;}

  .payment-buttons-5{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:640px){
  #prices.section{
    padding-top:20px;
    padding-bottom:20px;
  }

  .pricing-selector{
    padding:12px 8px 14px;
    border-radius:14px;
  }

  .plan-options{margin-bottom:8px;}
  .option-group{margin-bottom:8px;}

  .option-group h3{
    font-size:0.9rem;
    margin-bottom:4px;
  }

  .option-description{
    font-size:0.78rem;
    margin-bottom:6px;
  }

  .option-buttons{
    grid-template-columns:1fr;
    gap:6px;
  }

  .option-btn{
    padding:8px 8px;
    font-size:0.8rem;
  }

  .duration-label,
  .devices-label{font-size:0.85rem;}

  .duration-price,
  .devices-price,
  .duration-info,
  .devices-info{font-size:0.75rem;}

  .duration-badge{font-size:0.7rem;}

  .option-group[data-group="duration"] .option-buttons{
    grid-template-columns:repeat(3,1fr);
    gap:6px;
  }

  .option-group[data-group="duration"] .option-btn{
    padding:8px 4px;
    font-size:0.78rem;
  }

  .option-group[data-group="duration"] .duration-label{
    font-size:0.8rem;
  }

  .option-group[data-group="duration"] .duration-price,
  .option-group[data-group="duration"] .duration-info{
    font-size:0.72rem;
  }

  .option-group[data-group="devices"] .option-buttons{
    grid-template-columns:repeat(3,1fr);
    gap:6px;
  }

  .option-group[data-group="devices"] .option-btn{
    padding:8px 4px;
    font-size:0.78rem;
  }

  .option-group[data-group="devices"] .devices-label{
    font-size:0.8rem;
  }

  .option-group[data-group="devices"] .devices-price,
  .option-group[data-group="devices"] .devices-info{
    font-size:0.72rem;
  }

  .payment-buttons-5{
    grid-template-columns:repeat(2,1fr);
    gap:6px;
  }

  .payment-name{font-size:0.8rem;}
  .payment-badge{font-size:0.7rem;}

  .plan-summary{
    margin-top:8px;
    padding:10px 8px;
  }

  .summary-header{margin-bottom:6px;}
  .plan-summary h3{font-size:0.9rem;}
  .summary-status{font-size:0.75rem;}

  .summary-item{
    font-size:0.8rem;
    margin-bottom:3px;
  }

  .summary-total{
    font-size:0.9rem;
    margin-bottom:8px;
  }

  .summary-info{
    font-size:0.78rem;
    gap:3px;
  }

  .summary-note{font-size:0.7rem;}

  .btn.btn-whatsapp{
    padding:9px 10px;
    font-size:0.85rem;
    margin-top:4px;
  }

  .hero-title{font-size:1.5rem;}
  .hero-actions{flex-direction:column;}
  .btn{width:100%;}

  .faq-grid{grid-template-columns:1fr;}
  .contact-warning{flex-direction:column;}
  .contact-list{font-size:0.85rem;}
  .footer-badges{width:100%;}

  .payment-methods-grid{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }

  .payment-method-card{padding:12px;}
  .payment-method-card h4{font-size:0.95rem;}
  .payment-method-desc{font-size:0.8rem;}

  .trust-badges{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }

  .guarantees-grid{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }

  .guarantee-item{padding:10px;}
  .guarantee-item h4{font-size:0.85rem;}
  .guarantee-item p{
    font-size:0.75rem;
    line-height:1.35;
  }
}

@media (max-width:480px){
  .header-inner{padding:8px 12px;}
  .logo{font-size:0.75rem;}
  .lang-btn{
    width:24px;
    height:18px;
  }

  .hero{
    padding:24px 0 30px;
  }

  .hero-title{font-size:1.25rem;}
  .hero-lead{font-size:0.85rem;}

  .section{
    padding:24px 0;
  }

  .section h2{font-size:1.25rem;}

  .feature-item{padding:10px;}
  .feature-item h3{font-size:0.85rem;}
  .feature-item p{font-size:0.78rem;}

  .option-group h3{font-size:0.85rem;}
  .option-description{font-size:0.75rem;}

  .option-group[data-group="duration"] .option-btn{
    padding:7px 3px;
  }

  .pricing-selector{
    padding:8px 6px 10px;
    border-radius:10px;
  }

  .plan-summary{
    padding:6px 4px;
  }

  .btn.btn-whatsapp{
    padding:6px 10px;
    font-size:0.8rem;
  }

  .payment-methods-grid{
    grid-template-columns:1fr;
    gap:8px;
  }

  .guarantees-grid{
    grid-template-columns:1fr;
    gap:8px;
  }
}