/* Fontes locais: Poppins para títulos (acompanha o logotipo da Videira), Open Sans para o corpo. */
@font-face { font-family: Poppins; src: url('../fonts/Poppins-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Poppins; src: url('../fonts/Poppins-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Open Sans'; src: url('../fonts/OpenSans.woff2') format('woff2'); font-weight: 300 800; font-display: swap; }

:root {
  /* Base clara e quente; contraste no azul-marinho do logotipo, nunca preto. */
  --c-base: #f8f7f4;
  --c-ink: #283048;
  --c-ink-hover: #1b2134;
  --c-muted: #5a6075;

  /* Tríade do símbolo da Videira, sempre nesta ordem: verde-água, azul, roxo. */
  --c-1: #2f9e9a;
  --c-2: #4f86c6;
  --c-3: #622a7f;
  --c-1-soft: #bfe9e6;
  --c-2-soft: #cddff3;
  --c-3-soft: #ddcbe8;
  /* Versões vivas, só para grafismos e degradês da marca. */
  --c-1-bright: #4dbcb8;
  --c-2-bright: #55a6dc;

  /* Superfícies e linhas derivadas das mesmas cores. */
  --surface-page: var(--c-base);
  --surface-card: #fff;
  --surface-1-mix: color-mix(in srgb, var(--c-1-soft) 32%, var(--c-base));
  --surface-2-mix: color-mix(in srgb, var(--c-2-soft) 42%, var(--c-base));
  --surface-3-mix: color-mix(in srgb, var(--c-3-soft) 38%, var(--c-base));
  --border-subtle: color-mix(in srgb, var(--c-ink) 14%, transparent);
  --line-ink: color-mix(in srgb, var(--c-ink) 15%, transparent);
  --on-dark-muted: color-mix(in srgb, var(--c-base) 82%, transparent);
  --hero-glow: color-mix(in srgb, var(--c-3) 70%, var(--c-ink));
  --focus-ring: var(--c-ink);

  /* Assinatura: contorno em degradê, na mesma direção do símbolo. */
  --brand-gradient: linear-gradient(120deg, var(--c-1-soft), var(--c-2-soft), var(--c-3-soft));
  --brand-gradient-strong: linear-gradient(120deg, var(--c-1-bright), var(--c-2-bright), var(--c-3));

  /* Tipografia: três papéis fixos e escala fluida. */
  --font-display: Poppins, 'Open Sans', system-ui, sans-serif;
  --font-subheading: Poppins, 'Open Sans', system-ui, sans-serif;
  --font-body: 'Open Sans', Arial, sans-serif;
  --weight-display: 600;
  --weight-subheading: 500;
  --text-hero: clamp(2.25rem, 1.6rem + 3.2vw, 3.75rem);
  --text-page-title: clamp(2.125rem, 1.7rem + 1.9vw, 3rem);
  --text-section-title: clamp(1.75rem, 1.45rem + 1.25vw, 2.5rem);
  --text-h3: clamp(1.125rem, 1.02rem + .45vw, 1.375rem);
  --text-lead: clamp(1.125rem, 1rem + .3vw, 1.25rem);
  --text-small: .875rem;
  --line-body: 1.65;

  /* Espaço, raio, tempo. */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem;
  --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem;
  --radius: 6px;
  --container: 72rem;
  --gutter: 20px;
  --duration: 180ms;
  --ease-reveal: cubic-bezier(.22, 1, .36, 1);
  --shadow-lift: 0 5px 14px color-mix(in srgb, var(--c-ink) 18%, transparent);
  --shadow-soft: 0 8px 22px color-mix(in srgb, var(--c-ink) 6%, transparent);
}

/* Radicais Kids: as cores do ministério substituem a tríade dentro do seu contexto. */
.kids-palette {
  --c-1: #138aa5;
  --c-2: #c8257e;
  --c-3: #6f3089;
  --c-1-soft: #c2e8f1;
  --c-2-soft: #f6cde2;
  --c-3-soft: #ffe7a6;
  --kids-yellow: #fdc42d;
  --kids-purple: #6f3089;
  --hero-glow: color-mix(in srgb, var(--kids-purple) 85%, var(--c-ink));
  --brand-gradient: linear-gradient(120deg, var(--c-1-soft), var(--c-2-soft), var(--c-3-soft));
}

/* Margens laterais crescem com a tela. */
@media (min-width: 768px) { :root { --gutter: 4rem; } }
@media (min-width: 1100px) { :root { --gutter: 6rem; } }