/* ==========================================================================
   enhance.css — Camada de POLIMENTO (entrada + hover) para o site público
   --------------------------------------------------------------------------
   Princípios de segurança (não regredir o que já existe):
   • Animações de entrada só agem quando o JS marca <html class="enh-js">.
     Sem JS → nada é ocultado (conteúdo 100% visível, zero regressão).
   • Todo hover novo fica atrás de @media (hover:hover) and (pointer:fine):
     desktop ganha o efeito; toque/mobile não recebem estado preso.
   • Respeita prefers-reduced-motion: reduce → desliga tudo.
   • Só anima opacity/transform/box-shadow/filter (nunca propriedades de layout),
     e usa baixa especificidade para os componentes poderem sobrepor.
   ========================================================================== */

/* ---------- 1) Fade-in suave ao carregar a página ----------
   Animação CSS que SEMPRE termina em opacity:1 (both). Não depende de JS para
   revelar — se qualquer coisa falhar, o body fica visível ao fim da animação. */
html.enh-js body { animation: enhBodyIn .5s ease both; }
@keyframes enhBodyIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 2) Reveal ao rolar / ao abrir (marcado via JS) ---------- */
html.enh-js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
html.enh-js [data-reveal].enh-in { opacity: 1; transform: none; }
/* Itens em grade/lista revelam em cascata leve */
html.enh-js [data-reveal-stagger] > * { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
html.enh-js [data-reveal-stagger].enh-in > * { opacity: 1; transform: none; }
html.enh-js [data-reveal-stagger].enh-in > *:nth-child(2){ transition-delay:.06s }
html.enh-js [data-reveal-stagger].enh-in > *:nth-child(3){ transition-delay:.12s }
html.enh-js [data-reveal-stagger].enh-in > *:nth-child(4){ transition-delay:.18s }
html.enh-js [data-reveal-stagger].enh-in > *:nth-child(5){ transition-delay:.24s }
html.enh-js [data-reveal-stagger].enh-in > *:nth-child(n+6){ transition-delay:.3s }

/* ---------- 3) Polimento de HOVER (somente ponteiro fino) ---------- */
@media (hover: hover) and (pointer: fine) {
  /* Transição-base para links/botões que ainda não têm uma própria */
  a, button { transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease, opacity .18s ease; }

  /* Botões em pílula/CTA: leve elevação */
  .btn, .flex-hero .btn, .flex-form button, .imp-dl, .imp-bi-dl, .sac-btn, .arc-hoje, .pt-btn {
    transition: transform .18s ease, box-shadow .2s ease, background-color .18s ease, filter .18s ease;
  }
  .btn:hover, .imp-dl:hover, .imp-bi-dl:hover, .sac-btn:hover, .arc-hoje:hover, .pt-btn:hover { transform: translateY(-2px); }

  /* Cartões clicáveis / imagens dentro de wrappers com overflow: zoom sutil.
     (Muitos componentes já têm o seu; aqui só reforçamos os que não têm.) */
  .flex-card, .home-card, .pt-card, .grid-card { transition: transform .22s ease, box-shadow .22s ease; }
  .flex-card:hover, .home-card:hover, .pt-card:hover, .grid-card:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(18,63,89,.14); }

  /* Imagem com leve zoom quando o card pai tem overflow:hidden */
  .zoomable, .flex-card, .home-card { overflow: hidden; }
  .zoomable img, .flex-card > img, .flex-card figure img, .home-card img { transition: transform .45s cubic-bezier(.22,.61,.36,1); }
  .zoomable:hover img, .flex-card:hover img, .flex-card:hover figure img, .home-card:hover img { transform: scale(1.045); }

  /* Sublinhado que cresce em links de navegação/rodapé (não destrói os existentes) */
  .pt-fcol a { position: relative; }
  .pt-fcol a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: currentColor; transition: width .22s ease; }
  .pt-fcol a:hover::after { width: 100%; }
}

/* ==========================================================================
   5) CORREÇÕES RESPONSIVAS (mobile-only) — auditoria 320–430px
   Todas dentro de @media max-width → o DESKTOP fica intacto.
   ========================================================================== */

/* [1] Tabelas em conteúdo rico (CMS) não podem ser cortadas pelo overflow-x:hidden
   do body — dá scroll horizontal só na tabela e quebra palavras/URLs longas. */
@media (max-width: 768px) {
  .pt-art-body, .flex-rich, .sac-rich, .imp-rel-single .flex-rich, .arc-reader { overflow-wrap: anywhere; }
  .pt-art-body table, .flex-rich table, .sac-rich table, .arc-reader table {
    display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
}

/* [2] Hero da home: título/eyebrow com px fixo grande estouravam abaixo de 400px. */
@media (max-width: 400px) {
  .hero-content h1 { font-size: clamp(52px, 17vw, 82px); }
  .hero-eyebrow    { font-size: clamp(26px, 9vw, 37px); }
}

/* [3] Rótulos dos cards de atalho: nowrap + overflow:hidden cortava o texto. */
@media (max-width: 560px) {
  .quick-card span { white-space: normal; line-height: 1.05; text-align: center; }
}

/* [4] Colagem histórica (imagem decorativa) vazava ~7px em telas muito estreitas. */
@media (max-width: 360px) {
  .history-collage { min-height: 250px; }
  .collage-two { width: 210px; left: 40px; }
  .collage-one { width: 180px; }
}

/* [5] Chips de doação: 3 colunas fixas ficavam apertadas — 2 colunas no celular. */
@media (max-width: 400px) {
  .flex-doar-chips { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 4) Acessibilidade: sem movimento se o usuário pedir ---------- */
@media (prefers-reduced-motion: reduce) {
  html.enh-js body,
  html.enh-js [data-reveal],
  html.enh-js [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { scroll-behavior: auto !important; }
}