/* ============================================================
   Arca Insurance — camada de reforço (injetada no deploy)
   Vive fora do HTML exportado do Claude Design e é reaplicada
   pelo GitHub Actions a cada deploy, sobrevivendo a re-exports.
   Especificidade: prefixo `body ` vence os seletores de atributo
   "pelados" do export; `!important` bate os estilos inline.
   ============================================================ */

/* ---------- Imagens de hero por produto (todos os viewports) ----------
   Pousa o SVG on-brand atrás do texto branco do hero, com overlay navy
   para manter o título legível. A classe .arca-hero é adicionada pelo
   inject.mjs na primeira <section> navy de cada página. */
body[data-arca-page="produto-equipamentos"] .arca-hero {
  background-image: linear-gradient(100deg, rgba(21,41,74,.86) 0%, rgba(21,41,74,.52) 50%, rgba(21,41,74,.24) 100%), url('equipamentos.svg') !important;
  background-color:#15294a !important; background-size:cover !important; background-position:78% center !important; background-repeat:no-repeat !important;
}
body[data-arca-page="produto-benfeitorias"] .arca-hero {
  background-image: linear-gradient(100deg, rgba(21,41,74,.86) 0%, rgba(21,41,74,.52) 50%, rgba(21,41,74,.24) 100%), url('benfeitorias.svg') !important;
  background-color:#15294a !important; background-size:cover !important; background-position:78% center !important; background-repeat:no-repeat !important;
}
body[data-arca-page="produto-penhor-rural"] .arca-hero {
  background-image: linear-gradient(100deg, rgba(21,41,74,.86) 0%, rgba(21,41,74,.52) 50%, rgba(21,41,74,.24) 100%), url('penhor-rural.svg') !important;
  background-color:#15294a !important; background-size:cover !important; background-position:78% center !important; background-repeat:no-repeat !important;
}
body[data-arca-page="produto-joalheria"] .arca-hero {
  background-image: linear-gradient(100deg, rgba(21,41,74,.84) 0%, rgba(21,41,74,.48) 50%, rgba(21,41,74,.20) 100%), url('joalheria.svg') !important;
  background-color:#15294a !important; background-size:cover !important; background-position:78% center !important; background-repeat:no-repeat !important;
}
body[data-arca-page="produto-fianca-locaticia"] .arca-hero {
  background-image: linear-gradient(100deg, rgba(21,41,74,.86) 0%, rgba(21,41,74,.52) 50%, rgba(21,41,74,.24) 100%), url('fianca-locaticia.svg') !important;
  background-color:#15294a !important; background-size:cover !important; background-position:78% center !important; background-repeat:no-repeat !important;
}
body[data-arca-page="produto-garantia"] .arca-hero {
  background-image: linear-gradient(100deg, rgba(21,41,74,.86) 0%, rgba(21,41,74,.52) 50%, rgba(21,41,74,.24) 100%), url('garantia.svg') !important;
  background-color:#15294a !important; background-size:cover !important; background-position:78% center !important; background-repeat:no-repeat !important;
}
body[data-arca-page="produto-property"] .arca-hero {
  background-image: linear-gradient(100deg, rgba(21,41,74,.86) 0%, rgba(21,41,74,.52) 50%, rgba(21,41,74,.24) 100%), url('property.svg') !important;
  background-color:#15294a !important; background-size:cover !important; background-position:78% center !important; background-repeat:no-repeat !important;
}
body[data-arca-page="produto-roubo-de-bens"] .arca-hero {
  background-image: linear-gradient(100deg, rgba(21,41,74,.86) 0%, rgba(21,41,74,.52) 50%, rgba(21,41,74,.24) 100%), url('roubo-de-bens.svg') !important;
  background-color:#15294a !important; background-size:cover !important; background-position:78% center !important; background-repeat:no-repeat !important;
}

/* ---------- Reforço mobile ---------- */
@media (max-width: 820px) {
  /* (A) Colapso UNIVERSAL de grid — resolve todos os grids 2-col que o
     export não colapsa (e futuros), independente dos valores fr. */
  body [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* (B) Padding lateral — derrota o seletor morto `max-width: 1200px`
     (com espaço) do export cobrindo ambas as formas. */
  body [style*="max-width:1200px"],
  body [style*="max-width: 1200px"],
  body [style*="max-width:1080px"],
  body [style*="max-width: 1080px"] {
    padding-left: 18px !important; padding-right: 18px !important;
  }

  /* (D) Tipografia fluida — substitui os fixos 46/54/24px. */
  body h1 { font-size: clamp(28px, 8vw, 40px) !important; line-height: 1.1 !important; }
  body h2 { font-size: clamp(23px, 6.4vw, 34px) !important; line-height: 1.12 !important; }
  body h3 { font-size: clamp(18px, 5vw, 22px) !important; }

  /* (C/E) Nav e footer empilhados com área de toque ~44px. */
  body header nav { gap: 6px !important; }
  body header nav a,
  body .prodmenu a,
  body footer a {
    display: block !important;
    padding: 11px 8px !important;
    white-space: normal !important;
  }

  /* (F) Footer: quebra tokens longos (CNPJ/SUSEP). */
  body footer { overflow-wrap: anywhere !important; }

  /* Respiro extra no topo do hero para a imagem aparecer atrás do título. */
  body .arca-hero > div { padding-top: 56px !important; padding-bottom: 52px !important; }
}