/* =============================================================
 * responsivo.css — adapta o site fixo de 1440px a telas menores
 *
 * POR QUE ESTE ARQUIVO É ESTRANHO
 * O projeto inteiro estiliza por atributo `style` inline (ver
 * CLAUDE.md). Inline vence classe, então a única forma de mudar
 * um layout inline em outra largura é `!important` — daí o uso
 * abundante dele aqui. Não é desleixo: é o preço da convenção.
 *
 * E como não há classes para mirar, os seletores usam o trecho
 * literal do style inline, que é único em cada arquivo
 * (ex.: [style*="repeat(6, 1fr)"] = a grade de problemas).
 * ISSO CRIA UM ACOPLAMENTO FRÁGIL: reformatar um style inline
 * quebra a regra correspondente, em silêncio.
 * Rode `php verificar-responsivo.php` depois de mexer em markup.
 *
 * ESTRATÉGIA
 * Desktop-first, quatro degraus:
 *   <= 1280px  respira: padding menor, grades largas encolhem
 *   <=  980px  tablet:  2 colunas, mockup desce, efeitos pesados saem
 *   <=  720px  celular: 1 coluna, tipografia fluida
 *   <=  520px  estreito: ajustes finais
 * ============================================================= */

/* --- A trava de 1440px. Sem isto, nada mais importa. ---------- */
[style*="min-width: 1440px"] { min-width: 0 !important; }

/* Nenhuma imagem/mídia estoura a linha. */
img, svg, video { max-width: 100%; }

/* =============================================================
 * <= 1280px — respiro
 * ============================================================= */
@media (max-width: 1280px) {
  header, section, footer { padding-left: 40px !important; padding-right: 40px !important; }

  /* Hero da landing: a coluna do texto ganha prioridade. */
  [style*="grid-template-columns: 1.02fr 0.98fr"] { grid-template-columns: 1.1fr 0.9fr !important; }

  /* Problemas: 6 colunas viram 3. */
  [style*="grid-template-columns: repeat(6, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; row-gap: 40px !important; }

  /* Cases e artigos: 4 e 3 viram 2. */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* Detalhe de solução: some a coluna do numeral gigante. */
  [style*="grid-template-columns: 190px 1fr 360px"] { grid-template-columns: 1fr 320px !important; }
  [style*="grid-template-columns: 190px 1fr 360px"] > [aria-hidden="true"] { display: none !important; }

  /* Sumário jurídico mais estreito. */
  [style*="grid-template-columns: 250px 1fr"] { grid-template-columns: 200px 1fr !important; gap: 48px !important; }
}

/* =============================================================
 * <= 980px — tablet: o layout de 3+ colunas acaba aqui
 * ============================================================= */
@media (max-width: 980px) {
  header, section, footer { padding-left: 28px !important; padding-right: 28px !important; }

  /* Cabeçalho: logo menor e menu que rola na horizontal em vez de
     estourar. Sem JS e sem markup novo — o site continua zero-JS. */
  header { flex-wrap: wrap !important; row-gap: 14px !important; padding-top: 16px !important; padding-bottom: 16px !important; }
  header img { height: 52px !important; }
  header nav {
    order: 3 !important;
    width: 100% !important;
    gap: 22px !important;
    overflow-x: auto !important;
    padding-bottom: 6px !important;
    scrollbar-width: none;
  }
  header nav::-webkit-scrollbar { display: none; }
  header nav > * { flex: 0 0 auto !important; }

  /* Todas as grades de 2+ colunas viram uma só. */
  [style*="grid-template-columns: 1.02fr 0.98fr"],
  [style*="grid-template-columns: 0.9fr 1.1fr 0.9fr"],
  [style*="grid-template-columns: 1fr 0.9fr 0.9fr"],
  [style*="grid-template-columns: 1.15fr 0.85fr"],
  [style*="grid-template-columns: 1.1fr 0.9fr"],
  [style*="grid-template-columns: 0.9fr 1.1fr"],
  [style*="grid-template-columns: 190px 1fr 360px"],
  [style*="grid-template-columns: 250px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Método: 5 passos em 2 colunas; a linha tracejada perde o sentido. */
  [style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; row-gap: 48px !important; }
  [style*="border-top: 1px dashed"] { display: none !important; }

  /* Rodapé: 4 colunas viram 2. */
  [style*="grid-template-columns: 1.25fr 0.8fr 1fr 1.1fr"] { grid-template-columns: repeat(2, 1fr) !important; gap: 40px !important; }

  /* Mockup do celular: sai do posicionamento absoluto e centraliza. */
  [style*="height: 660px"] { height: auto !important; }
  [style*="left: 34px; top: 14px; width: 320px"] {
    position: static !important;
    margin: 0 auto !important;
    transform: none !important;
  }
  /* Selos do hero: deixam de flutuar sobre o mockup. */
  [style*="right: -10px; top: 150px"] {
    position: static !important;
    margin-top: 32px !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 14px !important;
  }

  /* Sumário jurídico: vira índice comum no topo. */
  .sumario { position: static !important; }
  .sumario nav { display: flex !important; flex-wrap: wrap !important; gap: 4px 18px !important; }
  .sumario a { border-left: 0 !important; padding-left: 0 !important; }

  /* Mapa de soluções: matriz não cabe — rola na horizontal. */
  [style*="grid-template-columns: 2.3fr repeat(5, 1fr)"] { min-width: 700px !important; }
  [style*="border: 1px solid #1f1f1f; border-radius: 16px"] { overflow-x: auto !important; }

  /* Faixa final e barra do rodapé empilham. */
  [style*="justify-content: space-between"] { flex-wrap: wrap !important; }

  /* Tipografia fluida. */
  h1 { font-size: clamp(34px, 6.4vw, 62px) !important; line-height: 1.08 !important; }
  h2 { font-size: clamp(26px, 4.4vw, 42px) !important; }

  /* Efeitos pesados saem do celular: giro, dobra e degraus viram
     movimento neutro — o conteúdo importa mais que a referência. */
  .fx-cidade { display: none !important; }
  .fx-corredor { transform: none !important; }
  .fx-nivel, .fx-nivel.fx-on { transform: none !important; filter: none !important; }
  .fx-niveis { transform: none !important; }
  .fx-trilha { margin-top: 56px !important; margin-bottom: 0 !important; }
  .fx-kick, .fx-kick-h { display: none !important; }
  .fx-sec, .fx-sec.fx-on { transform: none !important; }
  .fx-card { transform: none !important; }
  .fx-totem { width: 46px !important; height: 46px !important; right: 16px !important; bottom: 16px !important; }
  .fx-selo { left: 12px !important; bottom: 12px !important; font-size: 10.5px !important; padding: 6px 10px !important; }

  /* A película inteira sai do celular: grão custa GPU e bateria, e
     barras widescreen numa tela pequena só roubam altura útil. */
  .fx-filme { display: none !important; }
  .fx-palco { transform: none !important; }
  .fx-selos > .fx-on { animation: none !important; }
  .fx-cinema .fx-sec { filter: none !important; }
  .fx-cinema .fx-sec::before { display: none !important; }
}

/* =============================================================
 * <= 720px — celular
 * ============================================================= */
@media (max-width: 720px) {
  header, section, footer { padding-left: 20px !important; padding-right: 20px !important; }
  section { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* Tudo que ainda tinha 2+ colunas cai para uma. */
  [style*="grid-template-columns: repeat(6, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: 1.25fr 0.8fr 1fr 1.1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Exceção: os dois números de cada case cabem lado a lado. */
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }

  /* Os selos do hero em coluna. */
  [style*="right: -10px; top: 150px"] { flex-direction: column !important; align-items: stretch !important; }

  /* Mockup ocupa a largura disponível. */
  [style*="left: 34px; top: 14px; width: 320px"] { width: 100% !important; max-width: 320px !important; }

  /* Listas horizontais do hero empilham. */
  [style*="gap: 34px; margin-top: 56px"] { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }

  /* Botões lado a lado passam a ocupar a linha inteira. */
  [style*="gap: 18px; margin-top: 40px"] { flex-direction: column !important; align-items: stretch !important; }
  [style*="gap: 18px; margin-top: 40px"] > * { justify-content: center !important; }

  h1 { font-size: clamp(30px, 8.4vw, 44px) !important; }
  h2 { font-size: clamp(23px, 6vw, 32px) !important; }

  /* Numerais gigantes e blocos decorativos grandes saem. */
  [style*="-webkit-text-stroke"] { display: none !important; }
  [style*="font-size: 60px"], [style*="font-size: 72px"] { font-size: 34px !important; }
}

/* =============================================================
 * <= 520px — telas estreitas
 * ============================================================= */
@media (max-width: 520px) {
  header, section, footer { padding-left: 16px !important; padding-right: 16px !important; }
  header img { height: 44px !important; }
  /* O botão do cabeçalho vira ícone-texto curto. */
  header > a:last-child { padding: 10px 14px !important; font-size: 13px !important; }
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  .prosa p, .prosa li { font-size: 15.5px !important; }
}

/* Quem pediu menos movimento continua mandando. */
@media (prefers-reduced-motion: reduce) {
  .esqueleto { animation: none !important; }
}