/* ==========================================================================
   avatardeia — camada mobile compartilhada
   Carregada por TODAS as páginas públicas depois do CSS da página.
   Regra: só entra aqui o que vale pro site inteiro; ajuste de uma tela
   específica continua no <style> dela.
   ========================================================================== */

@media (max-width: 900px) {
  /* --- 1. nada vaza da tela ------------------------------------------------ */
  html, body { overflow-x: hidden; max-width: 100%; }

  /* glows decorativos não podem criar scroll lateral */
  .glow, .glow-topo, .g1, .g2, .g3, .g4, .g5, .marca-fundo, .holofote, .pincel { max-width: 100vw; }

  /* faixas de marquee: contidas, mas seguem rolando */
  .marquee, .faixa, .painel-marquee { max-width: 100vw; overflow: hidden; }

  /* --- 2. escala tipográfica de celular ------------------------------------ */
  .avd-heading--xl { font-size: clamp(2rem, 9vw, 3rem); line-height: 1.04; }

  .avd-heading--lg { font-size: clamp(1.6rem, 7.4vw, 2.25rem); line-height: 1.1; }

  .avd-eyebrow { font-size: 0.6rem; letter-spacing: 0.14em; line-height: 1.5; }

  .avd-stat__value { font-size: clamp(2rem, 9vw, 2.75rem); }

  /* parágrafos de apoio: menos largura, mais respiro */
  .sub, .cabeca .sub, .hero-copy .sub { font-size: 15px; line-height: 1.6; }

  /* --- 3. alvos de toque confortáveis (44px) ------------------------------- */
  .avd-btn, .avd-chip, .set-item, .seta, .mural-nav button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .avd-chip { padding: 0 0.95rem; }

  .avd-btn--lg { min-height: 52px; }

  /* --- 4. navegação: links viram trilho rolável, botão fica ancorado ------- */
  .nav-inner, .site-nav-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding: 12px 16px;
    align-items: center;
  }

  .nav-links, .site-links {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px;
    margin: 0 -2px;
    min-width: 0;
    justify-content: flex-start;
  }

  .nav-links::-webkit-scrollbar, .site-links::-webkit-scrollbar { display: none; }

  .nav-links a, .nav-links span, .site-links a {
    white-space: nowrap;
    padding: 6px 0;
    font-size: 12.5px;
  }

  .nav-inner > .avd-btn, .site-nav-inner > .avd-btn {
    padding: 0 0.95rem;
    font-size: 13px;
    white-space: nowrap;
  }

  .nav-inner img, .site-nav-inner img, .nav-inner .marca img { height: 16px; }

  /* --- 5. mídia e cartões ocupam a largura util ---------------------------- */
  .telona, .celular, .midia-card { max-width: 100%; }

  /* --- 6. respiro geral de seções ----------------------------------------- */
  .sec { padding: 56px 20px; }

  .hero { padding: 56px 20px 64px; }

  .hero-logo { width: min(58vw, 220px); margin-bottom: 32px; }

  /* tags flutuantes do hero encostavam fora da tela */
  .hero-logo .flutua { transform: scale(0.82); }
  .hero-logo .f1 { left: -18%; }
  .hero-logo .f2 { right: -20%; }
  .hero-logo .f3 { left: -12%; }

  /* fileiras/marquee da landing: contidas e sem sangria negativa exagerada */
  .fileiras { margin: 0 -20px; max-width: 100vw; overflow: hidden; }

  .fileira { max-width: 100vw; }

  .fileira .midia-card { flex-basis: 140px; }

  .cta-final { padding: 48px 22px; }

  .cta-final .marca-fundo { display: none; }

  .numeros-grid { gap: 24px; padding-top: 40px; }

  .planos-grid, .cards3 { grid-template-columns: 1fr; }
}

/* celular estreito: aperta mais um passo */
@media (max-width: 420px) {
  .avd-heading--xl { font-size: clamp(1.85rem, 8.6vw, 2.5rem); }

  .nav-links, .site-links { gap: 14px; }

  .nav-inner, .site-nav-inner { padding: 10px 14px; }
}