/* -------------------------------------------------------
   responsive.css - Ajustes responsivos globais (PróximoPasso IA)
   Caminho: /assets/css/responsive.css
   Atualizado: 07/06/2026 16:40 (Brasilia, UTC-3)
   Carregado DEPOIS dos CSS existentes. Apenas reforca a
   responsividade (PC, tablet e celular) sem reescrever o layout.
------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* Nada deve gerar rolagem horizontal */
html, body { max-width: 100%; overflow-x: hidden; }

/* Midia nunca estoura a largura da tela */
img, video, iframe, canvas { max-width: 100%; height: auto; }
svg { max-width: 100%; }

/* Codigo e tabelas rolam dentro do proprio espaco */
pre { overflow-x: auto; max-width: 100%; }
table { max-width: 100%; }

/* Quebra de palavras longas (URLs, codigo inline) no celular */
p, li, td, th, .msg-bubble, .bubble { overflow-wrap: anywhere; word-break: break-word; }

/* ---------- TABLET (ate 1024px) ---------- */
@media (max-width: 1024px) {
  .home-cards { gap: 10px; }
}

/* ---------- CELULAR (ate 768px) ---------- */
@media (max-width: 768px) {
  /* Paginas institucionais respiram nas bordas */
  .legal-main { padding-left: 16px !important; padding-right: 16px !important; }
  .legal-main h1 { font-size: clamp(22px, 7vw, 30px); line-height: 1.2; }
  .legal-actions { flex-wrap: wrap; gap: 10px; }
  .legal-actions a { flex: 1 1 auto; text-align: center; }

  /* Grids de cards empilham bem */
  .home-cards { grid-template-columns: 1fr 1fr; }
}

/* ---------- CELULAR PEQUENO (ate 460px) ---------- */
@media (max-width: 460px) {
  .home-cards { grid-template-columns: 1fr; }
}