/* Ágape Valor — landing page styles
   Layout/conteúdo preservados 1:1 do design aprovado.
   A maior parte do posicionamento vem de estilos inline no HTML (fiel ao design original);
   este arquivo cobre apenas o que style inline não resolve: reset, hover, foco, responsivo e acordeões. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #F7F6F2;
  color: #00323C;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: #00323C; text-decoration: none; }
input, select, textarea, button { font: inherit; color: inherit; }
::placeholder { color: rgba(0, 50, 60, .42); }
:focus-visible { outline: 2px solid #00323C; outline-offset: 2px; }
img { max-width: 100%; }

@keyframes om-pop {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Responsivo: troca desktop/mobile (breakpoint 768px, igual ao design aprovado) ---------- */
.only-desktop { display: flex; }
.only-mobile { display: none; }
@media (max-width: 767px) {
  .only-desktop { display: none !important; }
  .only-mobile { display: flex; }
}

/* ---------- Header / navegação ---------- */
.nav-link { color: rgba(0, 50, 60, .8); }
.nav-link:hover { color: #00323C; }

.mobile-nav { display: none; }
.mobile-nav.is-open { display: flex; }

/* ---------- Botões ---------- */
.btn-yellow-sm:hover { background: #F0B01A; color: #00323C; box-shadow: 0 6px 16px rgba(255, 193, 40, .35); }
.btn-yellow:hover { background: #F0B01A; color: #00323C; box-shadow: 0 10px 24px rgba(255, 193, 40, .45); transform: translateY(-2px); }
.btn-yellow-submit:hover { background: #F0B01A; color: #00323C; box-shadow: 0 10px 24px rgba(255, 193, 40, .4); }
.btn-outline:hover { background: rgba(0, 50, 60, .06); color: #00323C; transform: translateY(-2px); }
.btn-outline-light:hover { background: rgba(247, 246, 242, .12); color: #F7F6F2; transform: translateY(-2px); }

/* ---------- Linhas de acordeão ---------- */
.acc-row:hover { background: rgba(0, 50, 60, .035); }
.pillar-row:hover { background: rgba(0, 50, 60, .03); }
.acc-row-dark:hover { background: rgba(247, 246, 242, .06); }

.acc-panel { animation: om-pop .3s ease both; }
.acc-panel[hidden] { display: none; }

.pillar-card { transition: box-shadow .25s ease, background .25s ease; }
.pillar-card.is-open { background: #FFFFFF; box-shadow: 0 10px 26px rgba(0, 50, 60, .1); }

.step-card { transition: background .2s ease; }
.step-toggle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 22px;
}
@media (max-width: 767px) {
  .step-toggle {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 20px;
  }
}

.timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 767px) {
  .timeline-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ---------- Cartões ---------- */
.card-hover-4:hover { box-shadow: 0 14px 32px rgba(0, 50, 60, .12); transform: translateY(-4px); }
.card-hover-3:hover { box-shadow: 0 12px 28px rgba(0, 50, 60, .1); transform: translateY(-3px); }

/* ---------- Termos do glossário (abrem modal) ---------- */
.term-btn {
  background: transparent; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: #00323C; border-bottom: 1.5px dashed #FFC128; line-height: inherit;
}
.term-btn.term-light { color: #FFC128; border-bottom-color: rgba(255, 193, 40, .7); }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 90; background: rgba(0, 50, 60, .4);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: om-pop .2s ease both;
}
.modal-backdrop[hidden] { display: none; }
.modal-box {
  background: #F7F6F2; border-radius: 14px; border-top: 3px solid #FFC128;
  max-width: 520px; width: 100%; padding: 32px; animation: om-pop .3s ease both;
  max-height: 86vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 50, 60, .25);
}
@media (max-width: 767px) {
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal-box { border-radius: 20px 20px 0 0; padding: 28px 22px 32px; }
}
.modal-close {
  flex: 0 0 auto; width: 44px; height: 44px; margin: -8px -8px 0 0;
  background: transparent; border: 0; font-size: 24px; line-height: 1; color: #00323C; cursor: pointer;
}
.modal-cta {
  margin-top: 24px; min-height: 48px; padding: 13px 22px; background: #FFC128; color: #00323C;
  border: 0; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer;
  transition: box-shadow .2s ease;
}
.modal-cta:hover { box-shadow: 0 8px 20px rgba(255, 193, 40, .4); }

/* ---------- Rodapé ---------- */
.footer-link { color: rgba(247, 246, 242, .86); }
.footer-link:hover { color: #FFC128; }
.footer-link-muted { color: rgba(247, 246, 242, .8); text-decoration: underline; }
.footer-link-muted:hover { color: #FFC128; }

/* ---------- Utilitário: reveal ao rolar (progressive enhancement via JS) ---------- */
[data-fade] { transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1); }
[data-fade].is-hidden { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) {
  [data-fade].is-hidden { opacity: 1; transform: none; }
}

/* ---------- Barra de consentimento de cookies ---------- */
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: #FFFFFF; color: #00323C; border-top: 3px solid #FFC128;
  box-shadow: 0 -8px 30px rgba(0, 50, 60, .14); animation: om-pop .35s ease both;
}
.cookie-bar__inner {
  max-width: 1200px; margin: 0 auto; padding: 18px 22px;
  display: flex; align-items: center; gap: 28px;
}
.cookie-bar__title {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 19px;
}
.cookie-bar__text {
  margin: 0; flex: 1 1 320px; font-size: 15px; line-height: 1.5; color: rgba(0, 50, 60, .78);
}
.cookie-bar__actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.cookie-btn {
  min-height: 44px; padding: 10px 20px; border-radius: 8px; font-size: 15px; font-weight: 600;
  cursor: pointer; border: 1px solid #00323C; transition: background .2s ease, box-shadow .2s ease;
}
.cookie-btn--primary { background: #00323C; color: #F7F6F2; }
.cookie-btn--primary:hover { box-shadow: 0 6px 16px rgba(0, 50, 60, .3); }
.cookie-btn--ghost { background: #FFFFFF; color: #00323C; border-color: rgba(0, 50, 60, .25); }
.cookie-btn--ghost:hover { background: rgba(0, 50, 60, .06); }
.cookie-link { font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.cookie-link:hover { color: #6B5300; }
@media (max-width: 900px) {
  .cookie-bar__inner { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 18px 18px; }
  .cookie-bar__text { flex: 0 0 auto; }
  .cookie-bar__actions { flex-wrap: wrap; }
  .cookie-btn { flex: 1 1 0; }
  .cookie-link { flex: 1 0 100%; text-align: center; padding: 6px 0; }
}
@media (prefers-reduced-motion: reduce) { .cookie-bar { animation: none; } }