/* ==========================================================================
   ORBIS — responsive.css
   Ajustes transversais de responsividade (320px → 1920px).

   As media queries de cada componente (menu, cards, tabela comparativa,
   footer...) vivem em style.css, junto das respectivas seções. Aqui ficam
   apenas os ajustes globais e as faixas ainda não cobertas:
   - proteção contra overflow horizontal;
   - celulares estreitos (320–374px);
   - telas grandes (≥1440px);
   - detalhes de dispositivos móveis (safe area, zoom de inputs no iOS).

   Carregado depois de style.css — pode sobrescrever regras base.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Proteção contra overflow horizontal
   Elementos decorativos (anéis do hero, brilhos) nunca devem criar rolagem
   lateral. `clip` (ao contrário de `hidden`) não cria contexto de rolagem,
   preservando o position: sticky do header.
   -------------------------------------------------------------------------- */
html,
body {
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   2. Celulares estreitos — 320px a 374px
   -------------------------------------------------------------------------- */
@media (max-width: 374.98px) {
  :root {
    --container-pad: 1rem;
    --section-pad: 3rem;
  }

  /* CTAs empilhados e fáceis de tocar */
  .hero__cta .btn {
    width: 100%;
  }

  .header__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .header__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   3. Celulares e tablets — evita o zoom automático de campos no iOS
   (inputs com fonte menor que 16px disparam zoom ao receber foco)
   -------------------------------------------------------------------------- */
@media (max-width: 959.98px) {
  .input,
  .select,
  .textarea {
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
   4. Telas grandes — respiração extra sem alterar a largura do conteúdo
   (acima de 1440px os clamps de --section-pad já atingiram o teto;
   o valor extra evita que a página pareça "achatada" em monitores largos)
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  :root {
    --section-pad: 7.5rem;
  }
}

/* --------------------------------------------------------------------------
   5. Dispositivos móveis — safe area (notch / barra de gestos do iPhone)
   Mantém os mesmos offsets base de style.css e apenas garante o respiro.
   -------------------------------------------------------------------------- */
.whatsapp-float {
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
}

@media (max-width: 768px) {
  .whatsapp-float {
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
  }
}