/* ==========================================================================
   Responsivo
   --------------------------------------------------------------------------
   Mobile-first: o CSS dos outros arquivos já é o do celular. Aqui só entra
   o que precisa de media query — o que dá para resolver com clamp(),
   auto-fit ou min() foi resolvido lá e não aparece neste arquivo.

   Breakpoints: sm 480 · md 768 · lg 1024 · xl 1280
   ========================================================================== */

/* --------------------------------------------------------------------------
   sm — 480px
   -------------------------------------------------------------------------- */

@media (min-width: 30em) {
  .form__grade {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero__acoes .btn {
    flex: 0 1 auto;
    min-width: 12rem;
  }
}

/* --------------------------------------------------------------------------
   md — 768px : tablet
   -------------------------------------------------------------------------- */

@media (min-width: 48em) {
  .numeros__grade {
    grid-template-columns: repeat(4, 1fr);
  }

  .grade-dores {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .flutuantes {
    right: var(--espaco-5);
    bottom: var(--espaco-5);
  }
}

/* --------------------------------------------------------------------------
   lg — 1024px : desktop
   A partir daqui o menu mobile some e a navegação completa aparece.
   -------------------------------------------------------------------------- */

@media (min-width: 64em) {
  .header__nav,
  .header__acoes {
    display: flex;
  }

  .hamburguer {
    display: none;
  }

  /* Se a viewport crescer com o menu aberto, ele precisa sumir junto. */
  .menu-mobile,
  .menu-fundo {
    display: none;
  }

  .hero__grade {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--espaco-7);
  }

  .solucao {
    grid-template-columns: 1fr 1fr;
    gap: var(--espaco-7);
  }

  /* Bloco par inverte a ordem: texto à direita, imagem à esquerda. */
  .solucao:nth-child(even) .solucao__texto {
    order: 2;
  }

  .contato__grade {
    grid-template-columns: 1fr 1.15fr;
    gap: var(--espaco-7);
  }

  .footer__grade {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

/* --------------------------------------------------------------------------
   Paisagem no celular
   Header fixo em tela baixa come metade do viewport. Encolhe tudo.
   -------------------------------------------------------------------------- */

@media (max-height: 30em) and (orientation: landscape) {
  :root {
    --altura-header: 3.5rem;
    --altura-header-compacto: 3.25rem;
    --espaco-secao: 2.5rem;
  }

  .hero {
    padding-top: calc(var(--altura-header) + var(--espaco-6));
  }

  .menu-mobile {
    padding-top: calc(var(--altura-header) + var(--espaco-2));
  }
}

/* --------------------------------------------------------------------------
   Impressão
   -------------------------------------------------------------------------- */

@media print {
  .header,
  .menu-mobile,
  .menu-fundo,
  .flutuantes,
  .form,
  .pular-para-conteudo {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  .secao--escura {
    background: #fff;
    color: #000;
  }

  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
  }
}