/* ============================================================
   ACNET — responsive.css
   Breakpoints: 1440 / 1280 / 1200 (nav drawer) / 1024 / 820-768 / 600 / 480-360
   ============================================================ */

/* ---------- ≤1440px : slightly tighten container ---------- */
@media (max-width: 1440px) {
  :root { --container-w: 1140px; }
}

/* ---------- ≤1280px : large tablets / small laptops ---------- */
@media (max-width: 1280px) {
  .hero-inner { gap: 24px; }
  .speed-orbit { width: 290px; height: 290px; }
  .speed-core { width: 150px; height: 150px; }
  .entret-grid, .precisa-grid, .ajuda-grid { gap: 18px; }
}

/* ---------- ≤1024px : tablets ---------- */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-content { order: 1; }
  .hero-visual { order: 2; margin-top: 20px; }
  .hero-lead { margin-inline: auto; }
  .hero-actions, .hero-tags { justify-content: center; }

  .plans-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .plan-card { padding: 32px 22px; }
  .plan-featured { transform: none; }
  .plan-featured:hover { transform: translateY(-8px); }

  .fibra-grid { grid-template-columns: 1fr; gap: 46px; }
  .fibra-visual { justify-content: flex-start; }

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

  .local-grid { grid-template-columns: 1fr; }
  .local-map { order: -1; }

  .footer-inner { grid-template-columns: 1fr 1fr; row-gap: 40px; }

  .porque-grid { grid-template-columns: repeat(3, 1fr); }
  .porque-grid .porque-card:last-child:nth-child(3n+2) { grid-column: span 2; max-width: 320px; margin-inline: auto; }
}

/* ---------- ≤1200px : nav collapses to drawer (raised from 900px so the ---------- */
/*             desktop inline menu never gets squeezed on notebook widths) */
@media (max-width: 1200px) {
  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    background: rgba(12, 6, 32, 0.98);
    backdrop-filter: blur(16px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 24px 26px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .main-nav.is-open { opacity: 1; transform: translateY(0); visibility: visible; }
  .main-nav a { padding: 14px 4px; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 1rem; }
  .main-nav a.nav-cta { margin-top: 12px; text-align: center; border-bottom: none; }

  .menu-toggle { display: flex; }
  .header-actions .whatsapp-pill span { display: none; }
  .whatsapp-pill { padding: 10px; }
}

/* ---------- ≤768px : phones (landscape / large) ---------- */
@media (max-width: 768px) {
  .container { padding-inline: 20px; }

  .hero { padding-top: calc(var(--header-h) + 28px); padding-bottom: 36px; }
  .hero-content h1 { font-size: clamp(2rem, 7vw, 2.6rem); margin-bottom: 16px; }
  .hero-lead { margin-bottom: 20px; }
  .hero-price { margin-bottom: 20px; padding: 10px 18px; }
  .hero-actions { flex-direction: column; align-items: stretch; margin-bottom: 22px; }
  .hero-actions .btn { justify-content: center; }

  /* defensive: prevent any long button label from overflowing narrow viewports */
  .btn { min-width: 0; }
  .hero-actions .btn,
  .cta-final-actions .btn {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }
  .hero-tags { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; }

  .hero-visual { margin-top: 8px; }
  .speed-orbit { width: 200px; height: 200px; }
  .speed-core { width: 110px; height: 110px; }
  .speed-num { font-size: 1.8rem; }
  .orbit-chip { font-size: 0.7rem; padding: 6px 10px; }

  section, .planos, .fibra, .porque, .entretenimento, .precisa, .ajuda, .onde-estamos { padding: 72px 0; }
  .cta-final { padding: 80px 0; }

  .plans-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .plan-featured { order: -1; }

  .fibra-benefits { gap: 10px; }
  .fibra-benefits li { font-size: 0.84rem; padding: 8px 14px; }

  .porque-grid { grid-template-columns: repeat(2, 1fr); }
  .porque-grid .porque-card:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 280px; margin-inline: auto; }

  .entret-grid, .precisa-grid, .ajuda-grid { grid-template-columns: 1fr; }

  .footer-inner { grid-template-columns: 1fr; text-align: left; }
  .cta-final-actions { flex-direction: column; align-items: stretch; }
  .cta-final-actions .btn { justify-content: center; }

  .combo-inner { flex-direction: column; text-align: center; }
  .combo-btn { width: 100%; justify-content: center; }

  /* mobile sticky contract bar */
  .mobile-sticky-cta { display: flex; }
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .whatsapp-float { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- ≤600px : phones (standard) ---------- */
@media (max-width: 600px) {
  .logo-sub { display: none; }
  .section-head h2 { font-size: 1.7rem; }
  .fibra-content h2 { font-size: 1.7rem; }
  .flow-label { font-size: 1rem; }
  .local-list li { font-size: 0.92rem; }
  .whatsapp-float { width: 54px; height: 54px; right: 16px; bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
  .porque-grid { grid-template-columns: repeat(2, 1fr); }
  .sticky-label { display: none; }
}

/* ---------- ≤414px : common phone widths (414/390/375) ---------- */
@media (max-width: 414px) {
  .container { padding-inline: 16px; }
  .hero-content h1 { font-size: 1.9rem; }
  .hero-lead { font-size: 1rem; }
  .btn { padding: 14px 20px; font-size: 0.92rem; }
  .btn-lg { padding: 16px 24px; }

  .speed-orbit { width: 180px; height: 180px; }
  .speed-core { width: 98px; height: 98px; }
  .speed-num { font-size: 1.5rem; }
  .chip-1, .chip-2, .chip-3 { font-size: 0.62rem; padding: 5px 9px; }

  .hero-price { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 18px; }

  .plan-card { padding: 28px 18px; }
  .plan-number { font-size: 2.6rem; }
  .price-value { font-size: 2rem; }

  .sticky-btn { padding: 11px 16px; font-size: 0.85rem; }
}

/* ---------- ≤360px : smallest supported width ---------- */
@media (max-width: 360px) {
  .logo-text { font-size: 1.05rem; }
  .hero-content h1 { font-size: 1.7rem; }
  .eyebrow { font-size: 0.7rem; }
  .plan-number { font-size: 2.3rem; }
  .price-value { font-size: 1.8rem; }
  .entret-card, .precisa-card, .ajuda-card { padding: 24px 18px; }
}