@layer reset, tokens, base, components, pages, utilities;

/* ===== tokens.css ===== */
/* ==========================================================================
   Tokens do design system — Ramo Estendido + Hub 5x7
   Uma paleta institucional para os dois sites. Superfícies escuras não são
   "dark mode": são bandas (.theme-dark) que trocam os tokens semânticos.
   ========================================================================== */
@layer tokens {
  :root {
    /* --- paleta aprovada no documento de alterações --- */
    --c-branco:       #fff;
    --c-preto:        #000;
    --c-areia:        oklch(95.5% 0.012 92);
    --c-areia-2:      oklch(93%   0.016 90);
    --c-pedra:        oklch(90%   0.020 88);
    --c-pedra-2:      oklch(84%   0.022 86);
    --c-umbra:        oklch(26%   0.025 55);
    --c-umbra-2:      oklch(44%   0.022 58);
    --c-verde:        #58720F;                  /* fundo e início do degradê */
    --c-verde-escuro: #3B4817;                  /* seções e fim do degradê */
    --c-verde-limao:  #A7D42C;                  /* cor principal: folha, ações e detalhes */

    /* Estados também usam a paleta institucional, sem introduzir novas cores. */
    --c-foco:         var(--c-verde-limao);
    --c-ok:           var(--c-verde-limao);
    --c-erro:         var(--c-preto);
    --c-aovivo:       var(--c-verde-limao);

    /* degradê da identidade: do verde do fundo ao verde das seções.
       Sobre os verdes, use branco para preservar o contraste. */
    --grad-verde: linear-gradient(135deg, var(--c-verde) 0%, var(--c-verde-escuro) 100%);

    /* --- semânticos (é neles que os componentes se apoiam) --- */
    --bg:            var(--c-branco);
    --bg-2:          var(--c-areia);
    --surface:       var(--c-branco);
    --surface-2:     var(--c-areia-2);
    --fg:            var(--c-preto);
    --fg-2:          var(--c-umbra);
    --fg-3:          var(--c-umbra-2);
    --line:          var(--c-pedra);
    --line-strong:   var(--c-pedra-2);
    --accent:        var(--c-verde-limao);
    --accent-hover:  var(--c-preto);
    --accent-fg:     var(--c-preto);
    --accent-hover-fg: var(--c-branco);
    --accent-soft:   rgb(167 212 44 / 0.18);
    --highlight:     var(--c-verde-limao);
    --highlight-2:   var(--c-verde-limao);
    --green:         var(--c-verde-limao);
    --green-2:       var(--c-verde-limao);
    --link:          var(--c-preto);
    --link-hover:    var(--c-preto);

    /* --- tipografia --- */
    --font-display: "Roboto Slab", Georgia, "Times New Roman", serif;
    --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    --fs--2: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
    --fs--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
    --fs-0:  clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --fs-1:  clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
    --fs-2:  clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
    --fs-3:  clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
    --fs-4:  clamp(2.25rem, 1.6rem + 2.9vw, 3.75rem);
    --fs-5:  clamp(2.5rem, 1.3rem + 5.4vw, 5.6rem);
    --lh-tight: 1.05;
    --lh-heading: 1.15;
    --lh-body: 1.55;
    --lh-serif: 1.6;
    --measure: 64ch;
    --measure-narrow: 52ch;
    --tracking-caps: 0.06em;

    /* --- espaço e grade --- */
    --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
    --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
    --section: clamp(3.5rem, 2.5rem + 4vw, 6rem);
    --section-s: clamp(2.5rem, 1.75rem + 3vw, 4.5rem);
    --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
    --gap: clamp(1rem, 0.75rem + 1.2vw, 1.75rem);
    --container: 74rem;
    --container-narrow: 46rem;
    --container-wide: 92rem;
    --header-h: 4.25rem;
    --strip-h: 3.25rem;

    /* --- forma e profundidade: somente preto translúcido --- */
    --radius-s: 0.375rem;
    --radius: 0.75rem;
    --radius-l: 1.25rem;
    --radius-pill: 999px;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.06), 0 6px 20px -8px rgb(0 0 0 / 0.14);
    --shadow-2: 0 2px 6px rgb(0 0 0 / 0.08), 0 20px 48px -16px rgb(0 0 0 / 0.24);
    --ring: 0 0 0 3px rgb(167 212 44 / 0.45);

    /* --- movimento --- */
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --dur: 0.22s;
    --dur-slow: 0.5s;

    /* --- textura: grão em SVG, um tile de 200px repetido (barato de compor) --- */
    --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    --grain-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }

  /* Banda escura: troca só os semânticos. Qualquer componente dentro dela
     continua funcionando sem CSS extra. O fundo é o verde escuro; superfícies
     internas usam preto ou branco translúcidos. */
  .theme-dark {
    --bg:           var(--c-verde-escuro);
    --bg-2:         var(--c-verde);
    --surface:      rgb(0 0 0 / 0.18);
    --surface-2:    rgb(0 0 0 / 0.32);
    --fg:           var(--c-branco);
    --fg-2:         rgb(255 255 255 / 0.82);
    --fg-3:         rgb(255 255 255 / 0.66);
    --line:         rgb(255 255 255 / 0.18);
    --line-strong:  rgb(255 255 255 / 0.35);
    --accent:       var(--c-verde-limao);
    --accent-hover: var(--c-branco);
    --accent-fg:    var(--c-preto);
    --accent-hover-fg: var(--c-preto);
    --accent-soft:  rgb(255 255 255 / 0.12);
    --highlight:    var(--c-verde-limao);
    --highlight-2:  var(--c-verde-limao);
    --green:        var(--c-verde-limao);
    --green-2:      var(--c-branco);
    --link:         var(--c-verde-limao);
    --link-hover:   var(--c-branco);
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -8px rgb(0 0 0 / 0.5);
    --shadow-2: 0 2px 6px rgb(0 0 0 / 0.35), 0 24px 56px -16px rgb(0 0 0 / 0.6);
    color: var(--fg);
    background-color: var(--bg);
    background-image: var(--grad-verde);
    color-scheme: dark;
  }

  /* Reforço semântico para áreas que pedem texto integralmente branco sobre o degradê. */
  .theme-degrade {
    background-image: var(--grad-verde);
    --fg-2: var(--fg);
    --fg-3: var(--fg);
    --link: var(--fg);
    --link-hover: var(--c-branco);
  }

  /* Banda clara de apoio: os neutros aparecem pontualmente, sem competir com
     branco, preto e verde-limão, que continuam dominantes. */
  .theme-warm {
    --bg: var(--c-areia-2);
    --bg-2: var(--c-pedra);
    --surface: var(--c-branco);
    --line: var(--c-pedra);
    --fg-3: var(--c-umbra-2);
    background-color: var(--bg);
  }
  /* no desktop o header ganha a barra superior (2rem + 1px); o Hub tem o logo maior */
  @media (min-width: 64rem) {
    :root { --header-h: 6.35rem; }
    .site--hub { --header-h: 7.35rem; }
  }
}

/* ===== base.css ===== */
/* ==========================================================================
   Base: reset curto, fontes, tipografia raiz, elementos nus, utilitários.
   ========================================================================== */
@layer reset, tokens, base, components, pages, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; hanging-punctuation: first last; }
  body { min-height: 100dvh; line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
  p, li, dd, figcaption { text-wrap: pretty; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  [hidden] { display: none !important; }
  :target { scroll-margin-block: calc(var(--header-h) + 1rem); }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
}

@layer base {
  /* --- fontes locais (subset latino, variáveis) --- */
  /* Tipografia da marca (é a que os dois sites atuais usam): Roboto Slab nos títulos, Roboto no corpo.
     Servidas daqui, variáveis, subset latino, pesos 300 a 700. */
  @font-face {
    font-family: "Roboto Slab";
    src: url("/assets/fonts/RobotoSlab-normal.woff2") format("woff2");
    font-weight: 300 700; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: "Roboto";
    src: url("/assets/fonts/Roboto-normal.woff2") format("woff2");
    font-weight: 300 700; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: "Roboto";
    src: url("/assets/fonts/Roboto-italic.woff2") format("woff2");
    font-weight: 300 700; font-style: italic; font-display: swap;
  }
  /* fallbacks com métricas ajustadas: menos salto quando a fonte chega (CLS) */
  @font-face {
    font-family: "Roboto Slab Fallback"; src: local("Georgia"), local("Times New Roman");
    ascent-override: 104%; descent-override: 27%; line-gap-override: 0%; size-adjust: 100%;
  }
  @font-face {
    font-family: "Roboto Fallback"; src: local("Arial"), local("Helvetica");
    ascent-override: 93%; descent-override: 24%; line-gap-override: 0%; size-adjust: 100%;
  }
  :root {
    --font-display: "Roboto Slab", "Roboto Slab Fallback", Georgia, serif;
    --font-body: "Roboto", "Roboto Fallback", system-ui, sans-serif;
  }

  html { font-size: 100%; }
  .main { overflow-x: clip; }
  @media (max-width: 63.99rem) { html { scroll-padding-bottom: calc(var(--strip-h) + 1rem); } }
  body {
    font-family: var(--font-body);
    font-size: var(--fs-0);
    color: var(--fg);
    background-color: var(--bg);
    background-image: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
    background-attachment: scroll;
    font-feature-settings: "kern", "liga", "calt";
    font-variant-numeric: proportional-nums;
    font-synthesis: none; /* Roboto Slab não tem itálico: nada de oblíquo falso */
  }
  /* grão: uma camada fixa, sem blend, sem custo de repaint no scroll */
  body { position: relative; }
  body::after {
    content: ""; position: absolute; inset: 0; z-index: 9999; pointer-events: none;
    background-image: var(--grain); background-size: 200px 200px; opacity: 0.55;
  }
  @media print { body::after { display: none; } }

  /* --- títulos: serifa com opsz alto; corpo: sans --- */
  h1, h2, h3, .display, .h1, .h2, .h3 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: var(--lh-heading);
    letter-spacing: -0.01em;
    color: var(--fg);
  }
  h1, .h1 { font-size: var(--fs-4); line-height: var(--lh-tight); letter-spacing: -0.02em; font-weight: 300; }
  h2, .h2 { font-size: var(--fs-3); letter-spacing: -0.015em; }
  h3, .h3 { font-size: var(--fs-2); }
  /* a slab não tem itálico: ênfase dentro de título vira peso, não inclinação */
  :is(h1, h2, h3, .display, .h1, .h2, .h3, .serif, .quote, blockquote) :is(em, i) { font-style: normal; font-weight: 500; }
  h4, .h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-1); line-height: 1.3; }
  h5, h6 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-0); }
  .display { font-size: var(--fs-5); line-height: var(--lh-tight); letter-spacing: -0.025em; font-weight: 300; }
  em, i { font-style: italic; }
  strong, b { font-weight: 600; }
  small, .small { font-size: var(--fs--1); }
  .lead { font-size: var(--fs-1); line-height: 1.5; color: var(--fg-2); max-width: var(--measure); }

  a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease); }
  a:hover { color: var(--link-hover); text-decoration-color: currentColor; }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--c-foco); outline-offset: 3px; border-radius: var(--radius-s);
  }
  ::selection { background: var(--highlight); color: var(--c-preto); }
  hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--s-6); }
  blockquote { font-family: var(--font-display); font-size: var(--fs-2); line-height: 1.3; font-weight: 300; color: var(--fg); }
  blockquote cite { display: block; font-family: var(--font-body); font-style: normal; font-size: var(--fs--1); color: var(--fg-3); margin-top: var(--s-3); }
  code, kbd { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; }
  table { border-collapse: collapse; width: 100%; }
  th, td { text-align: left; padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--line); vertical-align: top; }
  th { font-weight: 600; color: var(--fg-2); font-size: var(--fs--1); }
  address { font-style: normal; }
  summary { cursor: pointer; }
  iframe { border: 0; max-width: 100%; }

  /* transições de página (MPA). O header e a faixa não "voam". */
  @view-transition { navigation: auto; }
  @media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }
  }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  }
}

@layer utilities {
  .container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
  .container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); margin-inline: auto; }
  .container--wide { width: min(100% - 2 * var(--gutter), var(--container-wide)); margin-inline: auto; }
  .measure { max-width: var(--measure); }
  .measure-narrow { max-width: var(--measure-narrow); }
  .stack > * + * { margin-block-start: var(--stack, var(--s-4)); }
  .stack-s { --stack: var(--s-2); } .stack-m { --stack: var(--s-5); } .stack-l { --stack: var(--s-7); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-gap, var(--s-3)); align-items: center; }
  .grid { display: grid; gap: var(--gap); }
  .flow > * + * { margin-block-start: 1em; }
  .muted { color: var(--fg-2); } .faint { color: var(--fg-3); }
  .serif { font-family: var(--font-display); }
  .caps { text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--fs--2); font-weight: 600; }
  .tnum { font-variant-numeric: tabular-nums; }
  .center { text-align: center; }
  .visually-hidden, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .skip-link { position: absolute; top: -100%; left: var(--s-4); z-index: 1000; background: var(--c-verde-escuro); color: var(--c-branco); padding: var(--s-3) var(--s-4); border-radius: var(--radius-s); }
  .skip-link:focus { top: var(--s-4); }
  .no-scroll { overflow: hidden; }
  .hide-mobile { @media (max-width: 47.99rem) { display: none !important; } }
  .hide-desktop { @media (min-width: 48rem) { display: none !important; } }

  /* revelação de seção: nativa, guiada pelo scroll, uma por seção */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 5% entry 35%; }
      @keyframes reveal { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }
    }
  }
}

/* ===== components.css ===== */
/* ==========================================================================
   Componentes. Convenção: bloco__elemento e bloco--modificador, uma classe por
   seletor, tudo dentro de @layer components. Nada aqui conhece página alguma.
   ========================================================================== */
@layer components {

  /* ---------------------------------------------------------------- ícones */
  .icon { display: inline-block; vertical-align: -0.2em; flex: none; }

  /* ---------------------------------------------------------------- botões */
  .btn {
    --btn-bg: var(--accent); --btn-fg: var(--accent-fg); --btn-bg-hover: var(--accent-hover); --btn-fg-hover: var(--accent-hover-fg);
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
    padding: 0.8em 1.4em; border-radius: 0.5rem; border: 1.5px solid transparent;
    background: var(--btn-bg); color: var(--btn-fg);
    font-weight: 600; font-size: var(--fs-0); line-height: 1.2; text-decoration: none; white-space: nowrap;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    cursor: pointer;
  }
  .btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg-hover); text-decoration: none; }
  .btn:active { transform: translateY(1px); }
  .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
  .btn--secondary { --btn-bg: transparent; --btn-fg: var(--accent); --btn-bg-hover: var(--accent-soft); --btn-fg-hover: var(--accent-hover); border-color: currentColor; }
  .btn--secondary:hover { color: var(--accent-hover); }
  .btn--ghost { --btn-bg: transparent; --btn-fg: var(--link); --btn-bg-hover: var(--accent-soft); --btn-fg-hover: var(--link-hover); padding-inline: 0.9em; }
  .btn--light { --btn-bg: var(--c-areia); --btn-fg: var(--c-preto); --btn-bg-hover: var(--c-preto); --btn-fg-hover: var(--c-branco); }
  .btn--green { --btn-bg: var(--c-verde-limao); --btn-fg: var(--c-preto); --btn-bg-hover: var(--c-preto); --btn-fg-hover: var(--c-branco); }
  .btn--s { font-size: var(--fs--1); padding: 0.6em 1.05em; min-height: 2.5rem; }
  .btn--l { font-size: var(--fs-1); padding: 0.9em 1.7em; border-radius: 0.625rem; }
  .btn--block { width: 100%; }
  .btn .icon { margin-inline: -0.2em; }

  /* -------------------------------------------------------------- etiquetas */
  .tag { display: inline-flex; align-items: center; gap: 0.35em; font-size: var(--fs--2); font-weight: 600; letter-spacing: 0.01em; padding: 0.3em 0.7em; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
  .tag--congresso { background: var(--c-pedra-2); color: var(--c-preto); }
  .tag--festa { background: var(--c-areia-2); color: var(--c-preto); }
  .tag--primicias { background: var(--surface); color: var(--fg-2); border: 1px solid var(--c-pedra-2); }
  .tag--vigilia { background: var(--c-umbra); color: var(--c-areia); }
  .tag--escola { background: var(--c-verde-limao); color: var(--c-preto); }
  .tag--treinamento { background: var(--c-pedra); color: var(--c-preto); }
  .tag--agenda, .tag--intercessao, .tag--meses { background: var(--surface-2); color: var(--fg); }
  .tag--modality { background: transparent; color: var(--fg-2); border: 1px solid var(--line-strong); }
  .theme-dark .tag { background: var(--surface); color: var(--fg); }
  .theme-dark .tag--congresso { background: var(--c-branco); color: var(--c-preto); }
  .kicker { font-size: var(--fs--1); color: var(--fg-2); font-weight: 500; }
  .kicker--serif { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-1); color: var(--fg-2); }
  /* Estado "ao vivo" usa o verde-limão aprovado em todos os fundos. */
  .live-dot { --live: var(--c-aovivo); display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 rgb(167 212 44 / 0.5); vertical-align: 0.05em; margin-right: 0.35em; }
  .theme-dark .live-dot { --live: var(--c-verde-limao); }
  @media (prefers-reduced-motion: no-preference) { .live-dot { animation: pulse 1.8s var(--ease) infinite; } }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(167 212 44 / 0.55); } 70% { box-shadow: 0 0 0 0.6em rgb(167 212 44 / 0); } 100% { box-shadow: 0 0 0 0 rgb(167 212 44 / 0); } }

  /* ----------------------------------------------------------------- header */
  .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.2) blur(12px); -webkit-backdrop-filter: saturate(1.2) blur(12px); border-bottom: 1px solid var(--line); view-transition-name: site-header; transition: box-shadow var(--dur) var(--ease); }
  .site-header--scrolled { box-shadow: var(--shadow-1); }
  .site-header--dark { background-color: color-mix(in srgb, var(--c-verde-escuro) 90%, transparent); background-image: linear-gradient(135deg, color-mix(in srgb, var(--c-verde) 90%, transparent) 0%, color-mix(in srgb, var(--c-verde-escuro) 90%, transparent) 100%); }
  .site-header__top { display: none; }
  @media (min-width: 64rem) {
    .site-header__top { display: block; border-bottom: 1px solid var(--line); font-size: var(--fs--2); }
    .site-header__topinner { display: flex; justify-content: space-between; align-items: center; min-height: 2rem; gap: var(--s-4); }
  }
  .header-cross { color: var(--fg-2); text-decoration: none; font-weight: 500; }
  .header-cross:hover { color: var(--fg); text-decoration: underline; }
  .site-header__contact { display: inline-flex; align-items: center; gap: 0.4em; color: var(--fg-2); }
  .site-header__contact a { color: inherit; text-decoration: none; }
  .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: var(--header-h); }
  .brand { display: inline-flex; align-items: center; flex: none; }
  .brand__img { height: 3rem; width: auto; }
  .brand__img--hub { height: 3.75rem; }
  @media (min-width: 64rem) { .brand__img { height: 3.25rem; } .brand__img--hub { height: 4.25rem; } .site-header--dark .site-header__inner { min-height: 5.25rem; } }

  .nav-toggle { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.5em 0.75em; min-height: 2.75rem; border-radius: var(--radius-s); font-weight: 600; font-size: var(--fs--1); color: var(--fg); }
  .nav-toggle__open, .nav-toggle__close { display: inline-flex; }
  .nav-toggle__close, .site-header--open .nav-toggle__open { display: none; }
  .site-header--open .nav-toggle__close { display: inline-flex; }

  /* mobile: painel abaixo do header */
  .nav { display: none; }
  /* absoluto (não fixed): o backdrop-filter do header vira bloco de contenção e um fixed encolheria */
  .site-header--open .nav { display: block; position: absolute; top: 100%; left: 0; right: 0; height: calc(100dvh - 100%); overflow-y: auto; background: var(--bg); padding: var(--s-4) var(--gutter) var(--s-9); z-index: 49; border-top: 1px solid var(--line); }
  .nav__list { display: flex; flex-direction: column; }
  .nav__item { border-bottom: 1px solid var(--line); }
  .nav__link, .nav__sublink { display: block; padding: 0.9rem 0; text-decoration: none; color: var(--fg); font-weight: 500; font-size: var(--fs-1); }
  .nav__sublink { font-size: var(--fs-0); padding: 0.55rem 0 0.55rem 1rem; color: var(--fg-2); }
  .nav__link[aria-current="page"], .nav__sublink[aria-current="page"] { color: var(--accent); }
  .nav__toggle { display: none; }
  .nav__sub { padding-bottom: var(--s-3); }
  .nav__item--cta { border: 0; padding-top: var(--s-5); }
  .nav__item--cta .btn { font-size: var(--fs-0); padding: 0.8em 1.4em; }
  .nav__extra { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
  .nav__contact { display: inline-flex; align-items: center; gap: 0.5em; text-decoration: none; color: var(--fg-2); }

  @media (min-width: 64rem) {
    .nav-toggle { display: none; }
    .nav { display: block; }
    .nav__list { flex-direction: row; align-items: center; gap: 0.25rem; }
    .nav__item { border: 0; position: relative; display: flex; align-items: center; }
    .nav__link { padding: 0.55rem 0.7rem; font-size: var(--fs--1); font-weight: 500; border-radius: var(--radius-s); }
    .nav__link:hover { background: var(--accent-soft); color: var(--fg); }
    .theme-dark .nav__link:hover { background: var(--surface); }
    .nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: var(--radius-s); color: var(--fg-2); margin-left: -0.35rem; }
    .nav__toggle .icon { transition: transform var(--dur) var(--ease); }
    .nav__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
    .nav__sub { position: absolute; top: calc(100% + 0.4rem); left: 0; min-width: 15rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 0.4rem; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur); }
    .nav__item--has-children:hover .nav__sub, .nav__item--has-children:focus-within .nav__sub, .nav__toggle[aria-expanded="true"] + .nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
    .nav__sublink { padding: 0.55rem 0.8rem; border-radius: var(--radius-s); color: var(--fg); font-size: var(--fs--1); }
    .nav__sublink:hover { background: var(--accent-soft); }
    .theme-dark .nav__sublink:hover { background: var(--surface); }
    .nav__item--cta { padding: 0 0 0 0.5rem; }
    .nav__item--cta .btn { font-size: var(--fs--1); padding: 0.6em 1.05em; }
  }
  /* nove itens no menu do Ramo: entre 64rem e 80rem o respiro encolhe para caber numa linha */
  @media (min-width: 64rem) and (max-width: 79.99rem) {
    .nav__list { gap: 0; }
    .nav__link { padding-inline: 0.45rem; }
    .nav__toggle { margin-left: -0.3rem; width: 1.4rem; }
    .site-header__inner { gap: var(--s-4); }
  }

  /* item em destaque (Escola de Issacar): peso e um fio verde-limão embaixo;
     o texto continua preto. */
  .nav__link--destaque { position: relative; font-weight: 600; }
  .nav__link--destaque::after { content: ""; position: absolute; left: 0; bottom: 0.5rem; width: 2rem; height: 3px; border-radius: 2px; background: var(--c-verde-limao); }
  @media (min-width: 64rem) { .nav__link--destaque::after { left: 0.7rem; right: 0.7rem; width: auto; bottom: 0.2rem; } }
  @media (min-width: 64rem) and (max-width: 79.99rem) { .nav__link--destaque::after { left: 0.45rem; right: 0.45rem; } }
  .nav__externo { display: inline-block; margin-left: 0.25em; vertical-align: -0.1em; color: var(--fg-3); }

  /* ------------------------------------------------- faixa do próximo evento */
  .strip { background-color: var(--bg); background-image: var(--grad-verde); color: var(--fg); border-bottom: 1px solid var(--line); }
  .strip__inner { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title cta" "meta cta"; column-gap: var(--s-4); row-gap: 0.1rem; align-items: center; min-height: var(--strip-h); padding-block: 0.5rem; }
  .strip__label { display: none; }
  .strip__title { grid-area: title; font-family: var(--font-display); font-size: var(--fs-1); line-height: 1.15; color: var(--fg); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .strip__meta { grid-area: meta; font-size: var(--fs--2); color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .strip__count { display: none; }
  .strip__cta { grid-area: cta; }
  .strip--live .strip__count { color: var(--highlight); }
  @media (max-width: 63.99rem) {
    .strip { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; border-bottom: 0; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgb(0 0 0 / 0.25); padding-bottom: env(safe-area-inset-bottom); }
    .site:has(.strip) .site-footer { padding-bottom: calc(var(--strip-h) + 1.5rem); }
  }
  @media (min-width: 64rem) {
    .strip__inner { grid-template-columns: auto auto 1fr auto auto; grid-template-areas: "label title meta count cta"; column-gap: var(--s-5); }
    .strip__label { display: block; grid-area: label; font-size: var(--fs--2); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-3); font-weight: 600; }
    .strip__count { display: block; grid-area: count; font-size: var(--fs--1); color: var(--highlight); font-weight: 600; white-space: nowrap; }
    .strip__meta { font-size: var(--fs--1); white-space: normal; }
    .strip__title { white-space: normal; }
  }

  /* ----------------------------------------------------------------- seções */
  .section { padding-block: var(--section); position: relative; }
  .section--s { padding-block: var(--section-s); }
  .section--flush-top { padding-top: 0; }
  .section--line { border-top: 1px solid var(--line); }
  .section--dark { background-color: var(--bg); background-image: var(--grad-verde); }
  .section--dark::before { content: ""; position: absolute; inset: 0; background-image: var(--grain-light); background-size: 200px 200px; opacity: 0.5; pointer-events: none; }
  .section--dark > * { position: relative; }
  .section__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-7); align-items: end; }
  .section__title { font-size: var(--fs-3); }
  .section__intro { color: var(--fg-2); font-size: var(--fs-1); max-width: var(--measure-narrow); }
  .section__more { justify-self: start; font-weight: 500; }
  @media (min-width: 48rem) {
    .section__head { grid-template-columns: 1fr auto; }
    .section__head .section__intro { grid-column: 1; }
    .section__more { grid-column: 2; grid-row: 1 / span 2; align-self: end; justify-self: end; margin-bottom: 0.3em; }
  }

  /* ------------------------------------------------------------- cabeçalhos */
  .page-head { padding-block: var(--section-s) 0; }
  .page-head__crumbs { font-size: var(--fs--1); color: var(--fg-3); margin-bottom: var(--s-4); display: flex; flex-wrap: wrap; gap: 0.5em; }
  .page-head__crumbs a { color: inherit; text-decoration: none; }
  .page-head__crumbs a:hover { color: var(--fg); text-decoration: underline; }
  .page-head__crumbs li + li::before { content: "/"; margin-right: 0.5em; color: var(--line-strong); }
  .page-head__title { font-size: var(--fs-4); max-width: 22ch; }
  .page-head__intro { margin-top: var(--s-5); font-size: var(--fs-1); color: var(--fg-2); max-width: var(--measure-narrow); line-height: 1.5; }
  .page-head__meta { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: 0.5em 1.25em; color: var(--fg-2); font-size: var(--fs--1); }
  .page-head--image > .container, .page-head--image:not(:has(> .container)) { display: grid; gap: var(--s-6); align-items: end; }
  .page-head__figure img { border-radius: var(--radius-l); aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
  .page-head__figure--square img { aspect-ratio: 1; }
  .page-head__figure--portrait img { aspect-ratio: 4 / 5; }
  @media (min-width: 64rem) { .page-head--image > .container, .page-head--image:not(:has(> .container)) { grid-template-columns: 7fr 5fr; gap: var(--s-8); } }

  /* ----------------------------------------------------------- hero (evento) */
  .hero { padding-block: var(--section-s) var(--section); }
  .hero__grid { display: grid; gap: var(--s-6); align-items: center; }
  .hero__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em 0.9em; color: var(--fg-2); font-size: var(--fs--1); margin-bottom: var(--s-4); }
  .hero__title { font-size: var(--fs-4); max-width: 16ch; }
  .hero__theme { margin-top: var(--s-3); font-family: var(--font-display); font-weight: 300; font-size: var(--fs-2); color: var(--fg-2); max-width: 30ch; line-height: 1.25; }
  .hero__text { margin-top: var(--s-5); max-width: var(--measure-narrow); color: var(--fg-2); font-size: var(--fs-1); line-height: 1.5; }
  .hero__facts { margin-top: var(--s-6); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); }
  .hero__facts div { display: grid; grid-template-columns: auto 1fr; gap: 0.3em 0.6em; align-items: start; }
  .hero__facts .icon { color: var(--accent); margin-top: 0.15em; grid-row: 1 / span 2; }
  .hero__facts dt { font-size: var(--fs--2); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-3); font-weight: 600; }
  .hero__facts dd { font-weight: 500; }
  .hero__actions { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); }
  .hero__media { position: relative; }
  .hero__media img { width: 100%; border-radius: var(--radius-l); box-shadow: var(--shadow-2); aspect-ratio: 4 / 3; object-fit: cover; }
  .hero__media--wide img { aspect-ratio: 16 / 10; }
  @media (min-width: 64rem) { .hero__media { align-self: stretch; display: flex; } .hero__media img, .hero__media--wide img { aspect-ratio: auto; height: 100%; min-height: 100%; } }
  .hero__media::before { content: ""; position: absolute; inset: 8% -6% -8% 10%; background: radial-gradient(60% 60% at 50% 50%, var(--highlight) 0%, transparent 70%); opacity: 0.55; z-index: -1; filter: blur(24px); }
  @media (min-width: 64rem) {
    .hero__grid { grid-template-columns: 6.5fr 5.5fr; gap: var(--s-8); align-items: stretch; }
    .hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 63.99rem) { .hero__media { order: -1; } }

  /* ------------------------------------------- hero com a arte do evento */
  /* Quando o próximo evento tem arte oficial (events.json → hero), o hero é uma
     faixa de largura total com a arte tratada ao fundo e o lockup do congresso
     como título. Sem isso, cai no hero de duas colunas acima. */
  .hero--art { padding: 0; position: relative; isolation: isolate; overflow: hidden; }
  .hero--art .hero__bg { position: absolute; inset: 0; z-index: -2; }
  .hero--art .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 42%; }
  .hero--art::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
      linear-gradient(180deg, rgb(0 0 0 / 0.72) 0%, rgb(0 0 0 / 0.55) 45%, rgb(0 0 0 / 0.95) 100%),
      linear-gradient(90deg, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.45) 55%, transparent 100%);
  }
  .hero--art::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: var(--grain-light); background-size: 200px 200px; opacity: 0.4;
  }
  .hero--art .hero__inner { padding-block: clamp(2rem, 1.2rem + 3vw, 3.5rem) clamp(2.5rem, 1.5rem + 4vw, 4.5rem); display: grid; gap: var(--s-6); align-items: end; }
  .hero--art .hero__art { max-width: min(100%, 44rem); margin-block: var(--s-2) var(--s-5); width: 100%; height: auto; filter: drop-shadow(0 6px 24px rgb(0 0 0 / 0.55)); }
  .hero--art .hero__kicker { color: var(--c-branco); }
  .hero--art .hero__text { color: var(--c-branco); max-width: 46ch; text-shadow: 0 1px 12px rgb(0 0 0 / 0.7); }
  .hero--art .hero__facts dt { color: var(--c-branco); }
  .hero--art .hero__facts dd { color: var(--c-branco); }
  .hero--art .hero__facts .icon { color: var(--c-verde-limao); }
  .hero--art .hero__actions { margin-top: var(--s-6); }
  .hero--art .btn--secondary { --btn-fg: var(--c-branco); --btn-bg-hover: color-mix(in srgb, var(--c-branco) 14%, transparent); border-color: color-mix(in srgb, var(--c-branco) 70%, transparent); }
  .hero__titulo-visual { margin: 0; }
  @media (min-width: 64rem) {
    .hero--art .hero__inner { grid-template-columns: minmax(0, 1.2fr) minmax(19rem, 0.8fr); gap: var(--s-8); padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) clamp(3rem, 2rem + 4vw, 5rem); }
    .hero--art .hero__facts { grid-template-columns: 1fr; gap: var(--s-4); padding: var(--s-6); border-radius: var(--radius-l); background: rgb(0 0 0 / 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgb(255 255 255 / 0.16); }
    .hero--art .hero__aside { align-self: end; }
  }

  /* ----------------------------------------------------------- versículo */
  /* o versículo é o lugar principal do degradê da identidade: a seção leva "theme-dark theme-degrade" */
  .verse { min-height: 100svh; display: grid; align-content: center; position: relative; overflow: hidden; padding-block: var(--section); }
  .verse::before { content: ""; position: absolute; inset: -20% -10% auto -10%; height: 90%; background: radial-gradient(50% 55% at 68% 40%, color-mix(in srgb, var(--c-verde-limao) 14%, transparent) 0%, transparent 70%); pointer-events: none; }
  .verse::after { content: ""; position: absolute; inset: 0; background-image: var(--grain-light); background-size: 200px 200px; opacity: 0.6; pointer-events: none; }
  .verse > * { position: relative; }
  .verse__text { font-family: var(--font-display); font-size: var(--fs-3); line-height: 1.06; letter-spacing: -0.025em; font-weight: 300; max-width: 18ch; text-wrap: balance; color: var(--fg); }
  .verse__text em { font-style: normal; font-weight: 400; color: var(--highlight); }
  .verse__ref { margin-top: var(--s-6); font-size: var(--fs-1); color: var(--fg-2); display: flex; align-items: center; gap: var(--s-4); }
  .verse__ref::before { content: ""; width: 3rem; height: 1px; background: var(--highlight); }
  .verse__aside { margin-top: var(--s-7); max-width: var(--measure-narrow); color: var(--fg-2); font-size: var(--fs-1); line-height: 1.5; }
  /* no desktop o versículo ocupa a largura, e o texto de apoio desce para a
     coluna da direita: sem isso metade da tela fica vazia. */
  @media (min-width: 64rem) {
    .verse__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.55fr); gap: var(--s-8); align-items: end; }
    .verse__text { max-width: 15ch; font-size: clamp(2rem, 2rem + 6.2vw, 4rem); }
    .verse__aside { margin-top: 0; padding-bottom: 0.6rem; border-left: 1px solid color-mix(in srgb, var(--c-branco) 22%, transparent); padding-left: var(--s-6); font-size: var(--fs-0); }
    .verse__ref { margin-top: var(--s-7); }
  }

  /* ------------------------------------------------------------------ cards */
  .card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid color-mix(in srgb, var(--c-umbra-2) 35%, transparent); border-radius: var(--radius-l); overflow: hidden; container: card / inline-size; isolation: isolate; }
  .card--flat { background: transparent; border: 0; border-radius: 0; }
  .card--outline { background: transparent; border: 1px solid var(--line-strong); }
  .card--warm { background: var(--c-pedra-2); color: var(--c-umbra); border: 1px solid color-mix(in srgb, var(--c-umbra-2) 35%, transparent); }
  .card--warm .card__text, .card--warm .card__kicker { color: var(--c-umbra-2); }
  .card__inner { display: flex; flex-direction: column; flex: 1; }
  .card__media { position: relative; flex: none; }
  .card__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
  .card__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
  .card__kicker { font-size: var(--fs--1); color: var(--fg-2); font-weight: 500; }
  .card__title { font-size: var(--fs-2); line-height: 1.15; }
  .card__title a { color: inherit; text-decoration: none; }
  .card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .card__text { color: var(--fg-2); }
  .card__meta { font-size: var(--fs--1); color: var(--fg-3); display: flex; flex-wrap: wrap; gap: 0.4em 1em; }
  .card__cta { margin-top: auto; padding-top: var(--s-2); font-weight: 600; }
  .card__logo { height: 2.5rem; width: auto; align-self: flex-start; }
  .card__body > img, .card__body > .app-badges { align-self: flex-start; }
  .card:has(.card__title a)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow var(--dur) var(--ease); pointer-events: none; }
  .card:has(.card__title a:hover)::after, .card:has(.card__title a:focus-visible)::after { box-shadow: inset 0 0 0 2px var(--accent); }
  .card--photo { color: var(--c-branco); min-height: 22rem; justify-content: flex-end; border: 0; }
  .card--photo .card__media { position: absolute; inset: 0; z-index: -1; }
  .card--photo .card__media img { aspect-ratio: auto; height: 100%; }
  .card--photo .card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0.0) 30%, rgb(0 0 0 / 0.55) 60%, rgb(0 0 0 / 0.9) 100%); }
  .card--photo .card__body { justify-content: flex-end; padding-top: var(--s-9); }
  .card--photo .card__cta { margin-top: 0; }
  .card--photo .card__title, .card--photo .card__text, .card--photo .card__kicker { color: inherit; }
  .card--photo .card__text { opacity: 0.85; }
  .card--photo .card__cta { color: var(--c-verde-limao); }
  .card--dark { background-color: var(--c-verde-escuro); background-image: var(--grad-verde); color: var(--c-branco); border: 0; }
  .card--dark .card__title { color: inherit; }
  .card--dark .card__text, .card--dark .card__kicker { color: var(--c-branco); }
  .card--dark .card__cta { color: var(--c-verde-limao); }
  /* em contêiner largo, mídia e corpo lado a lado (funciona no bento e na sidebar sem outra classe) */
  @container card (min-width: 34rem) {
    .card--image .card__inner { flex-direction: row; }
    .card--image .card__media { width: 44%; }
    .card--image .card__media img { aspect-ratio: auto; height: 100%; }
    .card--image .card__body { padding: var(--s-6); }
  }
  @container card (min-width: 44rem) {
    .card--photo .card__body { padding: var(--s-7); max-width: 34rem; }
    .card--photo .card__title { font-size: var(--fs-3); }
  }

  /* ------------------------------------------------------------------ bento */
  .bento { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
  .bento > * { min-width: 0; }
  @media (min-width: 40rem) {
    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bento__item--xl { grid-column: span 2; }
  }
  @media (min-width: 64rem) {
    .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(12rem, auto); }
    .bento__item--xl { grid-column: span 3; grid-row: span 2; }
    .bento__item--l { grid-column: span 3; }
    .bento__item--m { grid-column: span 2; }
    .bento__item--s { grid-column: span 3; }
    .bento__item--w { grid-column: span 4; }
  }
  .bento .card { height: 100%; }

  /* -------------------------------------------------------- índice editorial */
  .index { border-top: 1px solid var(--line-strong); }
  .index__row { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s-2) var(--s-5); padding-block: var(--s-5); border-bottom: 1px solid var(--line); position: relative; align-items: start; }
  .index__row[hidden] { display: none; }
  .index__date { display: flex; flex-direction: column; line-height: 1; }
  .index__day { font-family: var(--font-display); font-size: 2.25rem; letter-spacing: -0.02em; color: var(--fg); }
  .index__month { font-size: var(--fs--2); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-3); font-weight: 600; margin-top: 0.35rem; }
  .index__weekday { font-size: var(--fs--2); color: var(--fg-3); margin-top: 0.15rem; }
  .index__body { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
  .index__title { font-size: var(--fs-2); line-height: 1.15; }
  .index__title a { color: inherit; text-decoration: none; }
  .index__title a::after { content: ""; position: absolute; inset: 0; }
  .index__title a:hover { color: var(--accent); }
  .index__sub { font-family: var(--font-display); font-weight: 300; color: var(--fg-2); font-size: var(--fs-1); }
  .index__meta { font-size: var(--fs--1); color: var(--fg-2); display: flex; flex-wrap: wrap; gap: 0.3em 1em; }
  .index__meta .icon { color: var(--fg-3); }
  .index__text { color: var(--fg-2); max-width: var(--measure-narrow); }
  .index__tags { display: flex; flex-wrap: wrap; gap: 0.4em; }
  .index__action { grid-column: 2; pointer-events: none; font-weight: 600; justify-self: start; color: var(--link); } /* o link do título cobre a linha inteira; a ação é só rótulo */
  .index__thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }
  .index__row--thumb { grid-template-areas: "date body" "thumb body" "action action"; }
  .index__row--thumb .index__date { grid-area: date; }
  .index__row--thumb .index__thumb { grid-area: thumb; }
  .index__row--thumb .index__body { grid-area: body; }
  .index__row--thumb .index__action { grid-area: action; }
  @media (min-width: 48rem) {
    .index__row { grid-template-columns: 6rem minmax(0, 1fr) auto; gap: var(--s-6) var(--s-7); align-items: center; }
    .index__body { max-width: 62ch; }
    .index__row--thumb { grid-template-columns: 6rem 7rem 1fr auto; grid-template-areas: "date thumb body action"; }
    .index__action { grid-column: auto; justify-self: end; }
    .index__day { font-size: 2.75rem; }
  }
  .index__group-title { font-family: var(--font-body); font-weight: 600; font-size: var(--fs--1); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-3); padding: var(--s-6) 0 var(--s-3); }
  .index [data-group][hidden] { display: none; }
  .index__empty { padding: var(--s-7) 0; color: var(--fg-2); }

  /* vídeos como índice: miniatura + título + série */
  .index--videos .index__row { grid-template-columns: 3.5rem 1fr; grid-template-areas: "date thumb" "date body" "date action"; align-items: start; }
  .index--videos .index__date { grid-area: date; }
  .index--videos .index__thumb { grid-area: thumb; max-width: 14rem; }
  .index--videos .index__body { grid-area: body; }
  .index--videos .index__action { grid-area: action; }
  .index--videos .index__thumb img { aspect-ratio: 16 / 9; }
  @media (min-width: 48rem) { .index--videos .index__row { grid-template-columns: 6rem 12rem 1fr auto; grid-template-areas: "date thumb body action"; align-items: center; } .index--videos .index__thumb { max-width: none; } }

  /* ------------------------------------------------------------------ filtro */
  .filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-5); border: 0; padding: 0; min-width: 0; }
  .filter legend { font-size: var(--fs--1); color: var(--fg-2); margin-right: var(--s-2); float: left; }
  .filter__option { position: relative; }
  .filter__option input { position: absolute; inset: 0; opacity: 0; }
  .filter__option span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.45em 1em; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); font-size: var(--fs--1); font-weight: 500; color: var(--fg-2); cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
  .filter__option input:checked + span { background: var(--c-umbra); border-color: var(--c-umbra); color: var(--c-areia); }
  .theme-dark .filter__option input:checked + span { background: var(--c-verde-limao); border-color: var(--c-verde-limao); color: var(--c-preto); }
  .filter__option input:focus-visible + span { outline: 2px solid var(--c-foco); outline-offset: 2px; }
  .filter__count { margin-left: auto; font-size: var(--fs--1); color: var(--fg-3); }

  /* --------------------------------------------------------------- prosa/TOC */
  .prose { max-width: var(--measure); font-size: var(--fs-0); line-height: 1.65; }
  .prose > * + * { margin-top: 1em; }
  .prose > :first-child { margin-top: 0; }
  .prose section > * + *, .prose .statement > * + * { margin-top: 1em; }
  .prose :is(ol, ul)[role="list"] { padding-left: 0; }
  .prose :is(ol, ul)[role="list"] li + li { margin-top: 0; }
  .prose h2 { font-size: var(--fs-2); margin-top: 2.25em; }
  .prose h3 { font-size: var(--fs-1); font-family: var(--font-body); font-weight: 600; margin-top: 1.75em; }
  .prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
  .prose ul, .prose ol { padding-left: 1.25em; }
  .prose li + li { margin-top: 0.35em; }
  .prose li::marker { color: var(--accent); }
  .prose blockquote { margin-block: 1.5em; padding-left: 1.25em; border-left: 3px solid var(--highlight-2); font-size: var(--fs-1); }
  .prose figure { margin-block: 2em; }
  .prose figcaption { font-size: var(--fs--1); color: var(--fg-3); margin-top: 0.6em; }
  .prose img { border-radius: var(--radius); }
  .prose strong { color: var(--fg); }
  .prose .lead { font-size: var(--fs-1); }
  .prose--serif { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-1); line-height: var(--lh-serif); }
  .prose .statement { margin-top: 2.5em; }
  .prose .statement h2 { margin-top: 0; }

  .article { display: grid; gap: var(--s-7); align-items: start; }
  .toc { font-size: var(--fs--1); }
  .toc__title { font-weight: 600; font-size: var(--fs--2); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-3); margin-bottom: var(--s-3); }
  .toc ol { list-style: none; padding: 0; border-left: 1px solid var(--line); }
  .toc a { display: block; padding: 0.4em 0 0.4em 1em; color: var(--fg-2); text-decoration: none; margin-left: -1px; border-left: 2px solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
  .toc a:hover { color: var(--fg); }
  .toc a[aria-current="true"] { color: var(--fg); border-left-color: var(--accent); font-weight: 500; }
  @media (min-width: 64rem) {
    .article { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s-9); }
    .toc { position: sticky; top: calc(var(--header-h) + 1.5rem); max-height: calc(100vh - var(--header-h) - 3rem); overflow: auto; }
  }
  @media (max-width: 63.99rem) { .toc { display: none; } .toc--mobile { display: block; margin-bottom: var(--s-6); } .toc--mobile ol { border: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; } .toc--mobile a { border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 0.35em 0.8em; margin: 0; } .toc--mobile a[aria-current="true"] { background: var(--c-umbra); color: var(--c-areia); border-color: var(--c-umbra); } }

  /* --------------------------------------------------------------- figuras */
  .figure img { border-radius: var(--radius-l); width: 100%; }
  .figure__caption { margin-top: var(--s-3); font-size: var(--fs--1); color: var(--fg-3); }
  .gallery { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 48rem) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } }
  @media (min-width: 64rem) { .gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .gallery__item { position: relative; display: block; border-radius: var(--radius); overflow: hidden; background: var(--surface); }
  .gallery__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
  .gallery__item--tall img { aspect-ratio: 3 / 4; }
  .gallery__item:hover img { transform: scale(1.02); }
  .gallery__caption { position: absolute; inset: auto 0 0 0; padding: var(--s-6) var(--s-4) var(--s-3); color: var(--c-branco); font-size: var(--fs--1); background: linear-gradient(180deg, transparent, rgb(0 0 0 / 0.7)); }
  .gallery__group { margin-top: var(--s-7); }
  .gallery__group-title { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-4); }
  .gallery__group-title small { color: var(--fg-3); font-family: var(--font-body); font-size: var(--fs--1); }

  .video { position: relative; aspect-ratio: 16 / 9; background: var(--c-preto); border-radius: var(--radius-l); overflow: hidden; }
  .video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
  .video iframe { width: 100%; height: 100%; }
  .video__play { position: absolute; inset: 0; width: 100%; display: grid; place-items: center; color: var(--c-branco); cursor: pointer; }
  .video__play span { display: grid; place-items: center; width: 4.25rem; height: 4.25rem; border-radius: 50%; background: color-mix(in srgb, var(--c-branco) 92%, transparent); color: var(--c-preto); box-shadow: var(--shadow-2); transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); }
  .video__play:hover span { transform: scale(1.06); background: var(--c-verde-limao); color: var(--c-preto); }
  .video__title { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-9) var(--s-5) var(--s-4); color: var(--c-branco); font-family: var(--font-display); font-size: var(--fs-1); background: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.55) 45%, rgb(0 0 0 / 0.88) 100%); pointer-events: none; }
  .video--playing .video__title { display: none; }

  .lightbox { border: 0; padding: 0; background: transparent; max-width: min(96vw, 90rem); max-height: 96vh; }
  .lightbox::backdrop { background: rgb(0 0 0 / 0.88); }
  .lightbox figure { display: grid; gap: var(--s-3); }
  .lightbox img { max-height: 84vh; width: auto; max-width: 96vw; margin-inline: auto; border-radius: var(--radius); }
  .lightbox figcaption { color: var(--c-branco); text-align: center; font-size: var(--fs--1); }
  .lightbox__close { position: fixed; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 0.15); color: var(--c-branco); }

  /* ------------------------------------------------------------ formulários */
  .form { display: grid; gap: var(--s-5); }
  .form__row { display: grid; gap: var(--s-5); }
  @media (min-width: 40rem) { .form__row { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
  .field { display: grid; gap: 0.4rem; align-content: start; }
  .field__label { font-weight: 600; font-size: var(--fs--1); }
  .field__label small { font-weight: 400; color: var(--fg-3); }
  .field__hint { font-size: var(--fs--1); color: var(--fg-3); }
  .input, .select, .textarea { width: 100%; padding: 0.8em 1em; border: 1px solid var(--line-strong); border-radius: 0.5rem; background: var(--bg); color: var(--fg); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  .theme-dark .input, .theme-dark .select, .theme-dark .textarea { background: var(--surface); }
  .input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--accent); box-shadow: var(--ring); }
  .input:user-invalid, .textarea:user-invalid { border-color: var(--c-erro); }
  .textarea { min-height: 8rem; resize: vertical; }
  .select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 0.9em center; padding-right: 2.6em; }
  .choice { display: flex; gap: 0.7em; align-items: flex-start; font-size: var(--fs-0); cursor: pointer; }
  .choice input { width: 1.15em; height: 1.15em; margin-top: 0.2em; accent-color: var(--accent); flex: none; }
  .choice-group { display: grid; gap: 0.6rem; }
  .form__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
  .form__status { padding: var(--s-4) var(--s-5); border-radius: var(--radius); background: color-mix(in srgb, var(--c-verde-limao) 18%, var(--c-branco)); color: var(--c-preto); font-weight: 500; }
  .form__status:empty { display: none; }
  .form--sent .form__status { display: block; }
  .form--error .form__status { display: block; background: rgb(0 0 0 / 0.08); color: var(--c-preto); }
  .form [aria-invalid="true"] { border-color: var(--c-erro); box-shadow: 0 0 0 3px rgb(0 0 0 / 0.18); }
  .form__note { font-size: var(--fs--1); color: var(--fg-3); }
  .fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
  .fieldset > legend { font-weight: 600; margin-bottom: var(--s-2); padding: 0; }

  /* -------------------------------------------------------------------- PIX */
  .pix { display: grid; gap: var(--s-5); }
  .pix__amounts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .pix__amounts .filter__option span { font-size: var(--fs-0); padding: 0.55em 1.1em; font-variant-numeric: tabular-nums; }
  .pix__custom { display: grid; gap: 0.4rem; max-width: 16rem; }
  .pix__keybox { display: grid; gap: 0.5rem; }
  .pix__keyrow { display: flex; gap: var(--s-2); }
  .pix__keyrow .input { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs--1); }
  .pix__grid { display: grid; gap: var(--s-6); align-items: start; }
  @media (min-width: 48rem) { .pix__grid { grid-template-columns: minmax(0, 1fr) auto; } }
  .pix__qr { width: 15rem; aspect-ratio: 1; background: var(--c-branco); padding: 0.75rem; border-radius: var(--radius); border: 1px solid var(--line-strong); display: grid; place-items: center; justify-self: center; }
  .pix__qr svg { width: 100%; height: 100%; }
  .pix__qr:empty::after { content: "QR Code"; color: var(--fg-3); font-size: var(--fs--1); }
  .copy-status { font-size: var(--fs--1); color: var(--c-ok); min-height: 1.2em; }
  .is-copied { --btn-bg: var(--c-verde-limao); --btn-bg-hover: var(--c-preto); --btn-fg: var(--c-preto); --btn-fg-hover: var(--c-branco); border-color: transparent; }

  /* ---------------------------------------------------------------- callout */
  .callout { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); padding: var(--s-5); border-radius: var(--radius); background: var(--surface); border-left: 4px solid var(--highlight-2); }
  .callout .icon { color: var(--accent); margin-top: 0.15em; }
  .callout--plain { grid-template-columns: 1fr; }
  .callout--warm { background: var(--c-areia-2); color: var(--c-umbra); border-left-color: var(--c-verde-limao); }
  .callout--outline { background: transparent; border: 1px solid var(--line-strong); border-left-width: 4px; }
  .callout__title { font-weight: 600; margin-bottom: 0.25em; }

  /* -------------------------------------------------------------- progresso */
  .progress { display: grid; gap: 0.4rem; }
  .progress__head { display: flex; justify-content: space-between; gap: var(--s-4); align-items: baseline; }
  .progress__label { font-weight: 500; }
  .progress__value { font-variant-numeric: tabular-nums; color: var(--fg-2); font-size: var(--fs--1); font-weight: 600; display: inline-flex; align-items: center; gap: 0.3em; }
  .progress__bar { height: 0.5rem; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
  .progress__fill { height: 100%; width: var(--pct, 0%); background: var(--green); border-radius: inherit; transition: width var(--dur-slow) var(--ease); }
  .progress--done .progress__value { color: var(--green); }
  .progress--done .progress__fill { background: var(--green); }
  .progress:not(.progress--done) .progress__fill { background: var(--highlight-2); }
  .timeline { display: grid; gap: var(--s-7); }
  .timeline__phase { display: grid; gap: var(--s-5); padding: var(--s-6); border-radius: var(--radius-l); background: var(--surface); }
  .timeline__head { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start; }
  .timeline__n { font-family: var(--font-display); font-size: var(--fs-3); line-height: 1; color: var(--fg-3); min-width: 2.2ch; }
  .timeline__title { font-size: var(--fs-2); }
  .timeline__status { margin-top: 0.25rem; }
  .timeline__steps { display: grid; gap: var(--s-4); }
  @media (min-width: 48rem) { .timeline__phase { grid-template-columns: 18rem 1fr; gap: var(--s-7); padding: var(--s-7); } }

  /* ---------------------------------------------------------------- pessoas */
  .person { display: grid; grid-template-columns: 5rem 1fr; gap: var(--s-4); align-items: center; }
  .person img { width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; }
  .person__name { font-family: var(--font-display); font-size: var(--fs-1); }
  .person__role { font-size: var(--fs--1); color: var(--fg-2); }
  .avatar { border-radius: 50%; object-fit: cover; }

  /* ---------------------------------------------------------------- split */
  .split { display: grid; gap: var(--s-7); align-items: center; }
  .split__media img { width: 100%; border-radius: var(--radius-l); }
  .split__body > * + * { margin-top: var(--s-4); }
  @media (min-width: 48rem) {
    .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
    .split--reverse .split__media { order: 2; }
    .split--text-wide { grid-template-columns: 3fr 2fr; }
  }

  /* ------------------------------------------------ programação semanal */
  .schedule { border-top: 1px solid var(--line-strong); }
  .schedule__row { display: grid; grid-template-columns: 1fr; gap: 0.25rem var(--s-5); padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
  .schedule__name { font-family: var(--font-display); font-size: var(--fs-1); }
  .schedule__when { font-weight: 600; font-variant-numeric: tabular-nums; }
  .schedule__where { color: var(--fg-2); font-size: var(--fs--1); }
  .schedule__desc { color: var(--fg-2); font-size: var(--fs--1); }
  @media (min-width: 48rem) { .schedule__row { grid-template-columns: 1.3fr 1fr 1fr; align-items: baseline; } .schedule__desc { grid-column: 1 / -1; } }

  /* ------------------------------------------------------------ endereços */
  .address-card { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); padding: var(--s-5); border: 1px solid color-mix(in srgb, var(--c-umbra-2) 35%, transparent); border-radius: var(--radius); background: var(--surface); }
  .address-card .icon { color: var(--accent); margin-top: 0.2em; }
  .address-card strong { display: block; margin-bottom: 0.2em; }
  .address-card a { display: table; margin-top: 0.5em; font-weight: 500; }
  .map { aspect-ratio: 16 / 9; border-radius: var(--radius-l); overflow: hidden; background: var(--surface); }
  .map iframe { width: 100%; height: 100%; }
  .map--tall { aspect-ratio: 4 / 3; }

  /* ---------------------------------------------------------- listas úteis */
  .list-marked { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
  .list-marked li { display: grid; grid-template-columns: auto 1fr; gap: 0.6em; align-items: start; }
  .list-marked .icon { color: var(--green); margin-top: 0.2em; }
  .list-inline { display: flex; flex-wrap: wrap; gap: 0.4em 0.8em; list-style: none; padding: 0; }
  .list-inline li { padding: 0.35em 0.8em; border-radius: var(--radius-pill); background: var(--surface); font-size: var(--fs--1); font-weight: 500; }
  .dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.25rem; }
  .dl dt { color: var(--fg-3); font-size: var(--fs--1); }
  .dl dd { font-weight: 500; }
  .dl--stack { grid-template-columns: 1fr; gap: 0.15rem 0; }
  .dl--stack dd + dt { margin-top: var(--s-3); }
  @media (max-width: 47.99rem) { .dl--responsive { grid-template-columns: 1fr; gap: 0.15rem 0; } .dl--responsive dd + dt { margin-top: var(--s-3); } }
  .app-badges { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
  .app-badges img { height: 3rem; width: auto; }
  .app-badges--s img { height: 2.5rem; }
  .app-badges a { display: inline-block; border-radius: 0.4rem; }
  .logo-row { display: flex; flex-wrap: wrap; gap: var(--s-6); align-items: center; }
  .logo-row img { height: 3.5rem; width: auto; }
  .social-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .social-list a { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--surface); color: var(--fg); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
  .social-list a:hover { background: var(--accent); color: var(--accent-fg); }
  .quote { font-family: var(--font-display); font-size: var(--fs-2); line-height: 1.3; font-weight: 300; max-width: 30ch; letter-spacing: -0.01em; }
  .quote cite { display: block; margin-top: var(--s-3); font-family: var(--font-body); font-style: normal; font-size: var(--fs--1); color: var(--fg-3); }
  .quote--l { font-size: var(--fs-3); }
  .numbered { counter-reset: n; display: grid; gap: var(--s-5); }
  .numbered > li { counter-increment: n; display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--s-4); }
  .numbered > li::before { content: counter(n); font-family: var(--font-display); font-size: var(--fs-3); line-height: 1; color: var(--fg-3); }
  .stat { display: grid; gap: 0.2rem; }
  .stat__n { font-family: var(--font-display); font-size: var(--fs-4); line-height: 1; letter-spacing: -0.02em; }
  .stat__l { color: var(--fg-2); font-size: var(--fs--1); }
  .notice { font-size: var(--fs--1); color: var(--fg-3); border: 1px dashed var(--line-strong); padding: var(--s-3) var(--s-4); border-radius: var(--radius-s); }

  /* ------------------------------------------------------------------ footer */
  .site-footer { background-color: var(--bg); background-image: var(--grad-verde); color: var(--fg); padding-block: var(--section) var(--s-6); position: relative; }
  .site-footer::before { content: ""; position: absolute; inset: 0; background-image: var(--grain-light); background-size: 200px 200px; opacity: 0.5; pointer-events: none; }
  .site-footer > * { position: relative; }
  .site-footer__grid { display: grid; gap: var(--s-7); }
  @media (min-width: 48rem) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__brand { grid-column: 1 / -1; } }
  @media (min-width: 64rem) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-8); } .site-footer__brand { grid-column: auto; } }
  .site-footer__logo { height: 2.75rem; width: auto; margin-bottom: var(--s-5); }
  .site-footer__verse { font-size: var(--fs-1); line-height: 1.35; max-width: 26ch; color: var(--fg); }
  .site-footer__ref { color: var(--fg-3); font-size: var(--fs--1); margin: var(--s-2) 0 var(--s-5); }
  .site-footer__title { font-family: var(--font-body); font-size: var(--fs--2); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-weight: 600; color: var(--fg-3); margin-bottom: var(--s-4); }
  .site-footer__col + .site-footer__col .site-footer__title, .site-footer__col .site-footer__links + .site-footer__title { margin-top: var(--s-6); }
  .site-footer__address { color: var(--fg-2); font-size: var(--fs--1); line-height: 1.6; }
  .site-footer__address + .site-footer__address { margin-top: var(--s-5); }
  .site-footer__address strong { color: var(--fg); }
  .site-footer__contacts { display: grid; gap: 0.6rem; font-size: var(--fs--1); margin-bottom: var(--s-5); }
  .site-footer__contacts li { display: flex; gap: 0.6em; align-items: center; }
  .site-footer__contacts .icon { color: var(--fg-3); }
  .site-footer__contacts a { color: var(--fg); text-decoration: none; }
  .site-footer__contacts a:hover { text-decoration: underline; }
  .site-footer__links { display: grid; gap: 0.45rem; font-size: var(--fs--1); }
  .site-footer__links a { color: var(--fg-2); text-decoration: none; }
  .site-footer__links a:hover { color: var(--fg); text-decoration: underline; }
  .site-footer__bottom { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); font-size: var(--fs--2); color: var(--fg-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5); }
  .site-footer .social-list a { background: var(--surface); color: var(--fg); }
  .site-footer .social-list a:hover { background: var(--c-verde-limao); color: var(--c-preto); }
  .site-footer .app-badges img { height: 2.25rem; }
  /* três perfis de Instagram: um ícone só e os @ escritos, em vez de três ícones iguais */
  .site-footer__insta { display: flex; gap: var(--s-3); align-items: flex-start; margin-top: var(--s-4); font-size: var(--fs--1); }
  .site-footer__insta > .icon { color: var(--fg-3); margin-top: 0.15em; }
  .site-footer__insta ul { display: grid; gap: 0.35rem; }
  .site-footer__insta a { color: var(--fg); text-decoration: none; }
  .site-footer__insta a:hover { text-decoration: underline; }

  /* --------------------------------------------- degradê: botão de contorno */
  /* sobre o verde o verde-limão dá 3,2:1; o botão de contorno usa o texto claro */
  .theme-degrade .btn--secondary { --btn-fg: var(--fg); --btn-bg-hover: color-mix(in srgb, var(--c-branco) 10%, transparent); border-color: color-mix(in srgb, var(--c-branco) 70%, transparent); }
  .theme-degrade .btn--secondary:hover { color: var(--fg); }

  /* ------------------------------------------------------------ aplicativos */
  /* Um card por app. O de destaque vai no degradê (class="app-card app-card--destaque theme-dark
     theme-degrade") com a lista do que o app faz ao lado; os demais ficam na superfície. */
  .apps { display: grid; gap: var(--gap); }
  /* background-color, e não o atalho background: o atalho apagaria o degradê do .theme-degrade (camada tokens) */
  .app-card { position: relative; display: grid; gap: var(--s-5); padding: var(--s-6) var(--s-5); border: 1px solid color-mix(in srgb, var(--c-umbra-2) 35%, transparent); border-radius: var(--radius-l); background-color: var(--surface); align-items: start; overflow: hidden; }
  .app-card__marca { width: 4.5rem; aspect-ratio: 1; border-radius: 1.1rem; display: grid; place-items: center; padding: 0.55rem; background: var(--bg); box-shadow: var(--shadow-1); }
  .app-card__marca img { width: 100%; height: auto; }
  .app-card__body { display: grid; gap: var(--s-3); justify-items: start; min-width: 0; }
  .app-card__kicker { font-size: var(--fs--1); color: var(--fg-2); font-weight: 500; }
  .app-card__title { font-size: var(--fs-2); line-height: 1.15; }
  .app-card__text { color: var(--fg-2); max-width: 48ch; }
  .app-card__actions { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; margin-top: var(--s-2); }
  .app-card .app-badges { margin-top: var(--s-2); }
  .app-card__actions .app-badges { margin-top: 0; }
  .app-card__lead { font-weight: 600; margin-bottom: var(--s-3); }
  .app-card--destaque { padding: var(--s-7) var(--s-5); border: 0; }
  .app-card--destaque .app-card__marca { background: color-mix(in srgb, var(--c-branco) 8%, transparent); box-shadow: none; width: 5.5rem; }
  .app-card--destaque .app-card__title { font-size: var(--fs-3); }
  .app-card--destaque .app-card__text { font-size: var(--fs-1); }
  .app-card--destaque .list-marked { gap: 0.7rem; }
  .app-card--destaque::after { content: ""; position: absolute; inset: 0; background-image: var(--grain-light); background-size: 200px 200px; opacity: 0.45; pointer-events: none; }
  .app-card--destaque > * { position: relative; z-index: 1; }
  @media (min-width: 48rem) {
    .app-card { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-6); padding: var(--s-6); align-items: center; }
    .app-card--destaque { grid-template-columns: auto minmax(0, 1fr); padding: var(--s-8) var(--s-7); align-items: start; }
    .app-card--destaque .app-card__extra { grid-column: 2; }
  }
  @media (min-width: 64rem) {
    .app-card--destaque { grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s-7); }
    .app-card--destaque .app-card__extra { grid-column: auto; padding-left: var(--s-7); border-left: 1px solid color-mix(in srgb, var(--c-branco) 22%, transparent); }
  }

  /* -------------------------------------------------------- WhatsApp fixo */
  /* Canto inferior direito em todas as páginas dos dois sites. No celular a faixa do próximo
     evento também é fixa embaixo: o site.js mede a altura dela em --faixa-h e o botão sobe junto. */
  .whats-fab { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 45; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--c-verde-limao); color: var(--c-preto); text-decoration: none; box-shadow: 0 0 0 2px var(--c-preto), var(--shadow-2); transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); }
  .whats-fab:hover { background: var(--c-preto); color: var(--c-branco); transform: translateY(-2px); }
  .whats-fab:focus-visible { outline-offset: 4px; border-radius: 50%; }
  @media (max-width: 63.99rem) { .site:has(.strip:not([hidden])) .whats-fab { bottom: calc(var(--faixa-h, 4rem) + 0.75rem); } }
  @media (min-width: 64rem) { .whats-fab { right: 1.5rem; bottom: 1.5rem; width: 3.75rem; height: 3.75rem; } }

  /* ------------------------------------------------------ pop-up de evento */
  /* <dialog> aberto pelo site.js dentro do período, uma vez por sessão (content/popup.json). */
  /* margin: auto devolve a centralização nativa do <dialog>, que o reset "* { margin: 0 }" apaga */
  .popup { margin: auto; width: min(100% - 2rem, 34rem); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: var(--radius-l); background: var(--c-branco); color: var(--c-preto); box-shadow: var(--shadow-2); overflow: auto; overscroll-behavior: contain; }
  .popup::backdrop { background: rgb(0 0 0 / 0.62); }
  @media (prefers-reduced-motion: no-preference) { .popup[open] { animation: popup-entra 0.28s var(--ease); } }
  @keyframes popup-entra { from { opacity: 0; transform: translateY(0.75rem) scale(0.98); } }
  .popup__media { background: var(--c-preto); }
  .popup__media img { width: 100%; height: auto; }
  .popup__body { display: grid; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-6); }
  .popup__kicker { font-size: var(--fs--1); font-weight: 600; color: var(--c-preto); }
  .popup__title { font-size: var(--fs-2); line-height: 1.15; }
  .popup__text { color: var(--c-preto); }
  .popup__facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--fs--1); font-weight: 500; }
  .popup__facts li { display: inline-flex; align-items: center; gap: 0.45em; }
  .popup__facts .icon { color: var(--c-verde-limao); }
  .popup__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-3); }
  .popup__fechar { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 1; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; background: rgb(0 0 0 / 0.6); color: #fff; }
  .popup__fechar:hover { background: var(--c-preto); }
  @media (min-width: 40rem) { .popup__body { padding: var(--s-6) var(--s-6) var(--s-7); } }

  /* --------------------------------------------------- banner de congresso */
  /* A arte do evento em faixa, com link para a página do congresso. Mesmo tratamento do hero da
     home (fundo + lockup), em tamanho de bloco. */
  .event-banner { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-l); }
  .event-banner__bg { position: absolute; inset: 0; z-index: -2; }
  .event-banner__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 42%; }
  .event-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(0 0 0 / 0.92) 0%, rgb(0 0 0 / 0.6) 55%, rgb(0 0 0 / 0.35) 100%), linear-gradient(180deg, transparent 40%, rgb(0 0 0 / 0.7) 100%); }
  .event-banner__inner { display: grid; gap: var(--s-5); padding: var(--s-6) var(--s-5); align-items: center; }
  .event-banner__title { margin: 0; font-size: var(--fs-3); }
  .event-banner__art { width: min(100%, 24rem); height: auto; filter: drop-shadow(0 6px 24px rgb(0 0 0 / 0.55)); }
  .event-banner__body { display: grid; gap: var(--s-3); justify-items: start; }
  .event-banner__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 0.9em; font-size: var(--fs--1); color: var(--c-branco); }
  .event-banner__meta { display: flex; flex-wrap: wrap; gap: 0.35em 1.25em; font-size: var(--fs-0); font-weight: 500; color: var(--c-branco); }
  .event-banner__meta span { display: inline-flex; align-items: center; gap: 0.4em; }
  .event-banner__meta .icon { color: var(--c-verde-limao); }
  .event-banner .cluster { margin-top: var(--s-2); }
  .event-banner .btn--secondary { --btn-fg: var(--c-branco); --btn-bg-hover: color-mix(in srgb, var(--c-branco) 14%, transparent); border-color: color-mix(in srgb, var(--c-branco) 70%, transparent); }
  @media (min-width: 48rem) {
    .event-banner__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); padding: var(--s-7); }
  }

  /* ------------------------------------------------ player ao vivo tratado */
  /* O embed "live_stream" do YouTube mostra "Este vídeo não está disponível" fora do ar. O player
     começa como um estado desenhado; o site.js calcula pela programação semanal se é horário de
     transmissão e só então oferece carregar o iframe. */
  .live-player { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-l); display: grid; align-content: center; padding: var(--s-7) var(--s-5); }
  .live-player::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain-light); background-size: 200px 200px; opacity: 0.45; pointer-events: none; }
  .live-player__estado { display: grid; gap: var(--s-3); justify-items: start; max-width: 40rem; }
  .live-player__status { display: inline-flex; align-items: center; gap: 0.5em; font-size: var(--fs--1); font-weight: 600; color: var(--fg); }
  .live-player__status .icon { color: var(--c-verde-limao); }
  .live-player__title { font-family: var(--font-display); font-size: var(--fs-3); line-height: 1.12; color: var(--fg); text-wrap: balance; }
  .live-player__next { font-size: var(--fs-1); color: var(--fg); max-width: 46ch; }
  .live-player__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }
  .live-player--playing { padding: 0; aspect-ratio: 16 / 9; background: var(--c-preto); }
  .live-player--playing::after { display: none; }
  .live-player--playing iframe { width: 100%; height: 100%; }
  @media (min-width: 48rem) { .live-player { aspect-ratio: 16 / 9; padding: var(--s-8); } }

  /* ------------------------------------------- hero rotativo das duas homes */
  .home-hero-carousel { position: relative; isolation: isolate; background-color: var(--c-verde-escuro); background-image: var(--grad-verde); }
  /* Os slides ocupam a mesma célula. Todos continuam participando do cálculo da linha,
     portanto o hero adota a altura do maior e não salta durante a rotação. */
  .home-hero-carousel__slides { display: grid; }
  .home-hero { grid-area: 1 / 1; align-self: stretch; position: relative; isolation: isolate; overflow: hidden; min-height: clamp(40rem, 76svh, 58rem); display: grid; align-items: end; }
  .home-hero[hidden] { display: grid !important; visibility: hidden; pointer-events: none; }
  .home-hero__background { position: absolute; inset: 0; z-index: -2; }
  .home-hero__background img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(0 0 0 / 0.92) 0%, rgb(0 0 0 / 0.68) 52%, rgb(0 0 0 / 0.38) 100%), linear-gradient(0deg, rgb(0 0 0 / 0.72), transparent 55%); }
  .home-hero__inner { width: 100%; display: grid; gap: var(--s-6); align-items: end; padding-block: clamp(2.5rem, 3vw, 4rem) clamp(6.5rem, 8vw, 8rem); }
  .home-hero__body { display: grid; justify-items: start; }
  .home-hero__overlay { width: auto; height: auto; max-width: min(100%, 42rem); max-height: clamp(11rem, 34vh, 27rem); object-fit: contain; object-position: left bottom; margin-bottom: var(--s-4); filter: drop-shadow(0 6px 24px rgb(0 0 0 / 0.55)); }
  .home-hero__eyebrow { color: var(--c-verde-limao); text-shadow: 0 1px 10px rgb(0 0 0 / 0.8); }
  .home-hero__title { max-width: 15ch; margin-top: var(--s-2); font-size: var(--fs-4); color: var(--c-branco); text-shadow: 0 2px 30px rgb(0 0 0 / 0.75); }
  .home-hero__description { margin-top: var(--s-4); max-width: 48ch; color: var(--c-branco); font-size: var(--fs-1); line-height: 1.5; text-shadow: 0 1px 14px rgb(0 0 0 / 0.8); }
  .home-hero__aside .hero__facts { margin: 0; padding: var(--s-5); border: 1px solid rgb(255 255 255 / 0.16); border-radius: var(--radius-l); background: rgb(0 0 0 / 0.58); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .home-hero__aside .hero__facts dt { color: var(--c-branco); }
  .home-hero__aside .hero__facts dd { color: var(--c-branco); }
  .home-hero__aside .hero__facts .icon { color: var(--c-verde-limao); }
  .home-hero .btn--secondary { --btn-fg: var(--c-branco); --btn-bg-hover: color-mix(in srgb, var(--c-branco) 14%, transparent); border-color: color-mix(in srgb, var(--c-branco) 70%, transparent); }
  .home-hero--hub { min-height: min(92svh, 60rem); }
  .home-hero--hub .home-hero__overlay { max-width: 10rem; max-height: 10rem; }
  .home-hero--hub .home-hero__background img { object-position: 50% 60%; filter: brightness(0.82) saturate(0.95); }
  .home-hero-carousel__controls { position: absolute; z-index: 3; inset-inline: 0; bottom: var(--s-4); display: flex; align-items: center; justify-content: flex-end; gap: var(--s-2); pointer-events: none; }
  .home-hero-carousel__controls button { pointer-events: auto; min-width: 2.75rem; min-height: 2.75rem; display: inline-grid; place-items: center; padding: 0.55rem 0.75rem; border: 1px solid color-mix(in srgb, var(--c-branco) 38%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--c-preto) 76%, transparent); color: var(--c-branco); font: inherit; font-size: var(--fs--1); cursor: pointer; backdrop-filter: blur(8px); }
  .home-hero-carousel__controls button:hover { background: var(--c-verde-limao); color: var(--c-preto); }
  .home-hero-carousel__dots { display: flex; gap: 0.45rem; padding: 0.7rem; border-radius: 999px; background: color-mix(in srgb, var(--c-preto) 76%, transparent); backdrop-filter: blur(8px); pointer-events: auto; }
  .home-hero-carousel__dots button { min-width: 0.7rem; min-height: 0.7rem; width: 0.7rem; height: 0.7rem; padding: 0; border: 0; background: color-mix(in srgb, var(--c-branco) 42%, transparent); }
  .home-hero-carousel__dots button[aria-current="true"] { width: 1.75rem; background: var(--c-verde-limao); }
  @media (min-width: 64rem) {
    .home-hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(19rem, 0.75fr); gap: var(--s-8); }
    .home-hero__aside { align-self: end; }
    .home-hero__aside .hero__facts { grid-template-columns: 1fr; }
  }
  @media (max-width: 47.99rem) {
    .home-hero { min-height: 44rem; }
    .home-hero__overlay { max-height: 14rem; }
    .home-hero__aside .hero__facts { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
    .home-hero-carousel__controls { justify-content: center; }
    .home-hero-carousel__controls > button:first-child, .home-hero-carousel__controls > button:nth-last-child(2) { display: none; }
  }
  @media (prefers-reduced-motion: no-preference) { .home-hero:not([hidden]) { animation: hero-slide-in 420ms var(--ease); } }
  @keyframes hero-slide-in { from { opacity: 0.35; } to { opacity: 1; } }
}

/* ===== pages/404.css ===== */
/* Página não encontrada (/404/ nos dois sites): só tipografia e respiro, sem ilustração.
   Componentes vêm de components.css; aqui fica o layout do hero, a lista de saídas e o índice compacto. */
@layer pages {
  .p-404__grid { display: grid; gap: var(--s-8); align-items: start; }
  .p-404__body { min-width: 0; }

  /* o numeral é o único elemento grande da página: slab leve, cor de apoio, decorativo (aria-hidden) */
  .p-404__code { font-family: var(--font-display); font-weight: 300; font-size: clamp(5.5rem, 3rem + 12vw, 11rem); line-height: 0.9; letter-spacing: -0.04em; color: var(--fg-3); font-variant-numeric: tabular-nums; margin-bottom: var(--s-5); }
  .p-404__title { max-width: 14ch; }
  .p-404__lead { margin-top: var(--s-5); max-width: var(--measure-narrow); }

  /* saídas: linhas finas como no índice editorial; o link cobre a linha inteira (alvo de toque generoso) */
  .p-404__exits { min-width: 0; }
  .p-404__exits-title { font-size: var(--fs-1); margin-bottom: var(--s-4); }
  .p-404__list { border-top: 1px solid var(--line-strong); }
  .p-404__list li { position: relative; display: grid; gap: 0.2rem; padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
  .p-404__link { font-family: var(--font-display); font-size: var(--fs-2); line-height: 1.15; color: var(--fg); text-decoration: none; }
  .p-404__link::after { content: ""; position: absolute; inset: 0; }
  .p-404__link:hover { color: var(--accent); }
  .p-404__list li:has(.p-404__link:hover) .p-404__desc { color: var(--fg); }
  .p-404__desc { color: var(--fg-2); font-size: var(--fs--1); max-width: 40ch; }
  .p-404__cross { margin-top: var(--s-5); color: var(--fg-2); font-size: var(--fs--1); }

  /* índice compacto dos próximos encontros: menos respiro entre linhas que na agenda */
  .p-404__next .index__row { padding-block: var(--s-4); }

  /* tablet: a lista abre em duas colunas para a página não virar uma coluna comprida */
  @media (min-width: 48rem) {
    .p-404__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); }
  }

  /* desktop: texto à esquerda, saídas à direita, numa coluna só, alinhadas ao topo do numeral */
  @media (min-width: 64rem) {
    .p-404__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-10); }
    .p-404__list { grid-template-columns: minmax(0, 1fr); }
    .p-404__exits { padding-top: var(--s-4); }
  }
}

/* ===== pages/hub-como-chegar.css ===== */
/* Como chegar (Hub): só layout. Componentes vêm de components.css. */
@layer pages {
  /* o bloco do mapa segue o cabeçalho dentro da mesma região (o page-head não tem respiro embaixo) */
  .p-como-chegar__where { padding-block: var(--s-7) var(--section); }

  /* no celular a ação vem primeiro (endereço e rotas), depois o mapa, depois a ajuda */
  .p-como-chegar__grid { display: grid; gap: var(--s-6); grid-template-areas: "card" "map" "info"; }
  .p-como-chegar__card { grid-area: card; display: grid; gap: var(--s-4); align-content: start; }
  .p-como-chegar__map { grid-area: map; min-width: 0; }
  .p-como-chegar__info { grid-area: info; display: grid; gap: var(--s-6); align-content: start; }
  /* o número do WhatsApp não quebra no meio */
  .p-como-chegar__info .callout a { white-space: nowrap; }
  /* os dois botões dividem a largura; em tela estreita cada um ocupa a linha inteira */
  .p-como-chegar__routes .btn { flex: 1 1 12rem; }

  @media (min-width: 48rem) {
    .p-como-chegar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "map map" "card info"; gap: var(--s-7) var(--gap); }
  }
  @media (min-width: 64rem) {
    .p-como-chegar__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; grid-template-areas: "map card" "map info"; gap: var(--s-6) var(--s-7); }
    /* o mapa acompanha a altura da coluna ao lado em vez de deixar um vazio embaixo dela */
    .p-como-chegar__map .map { height: 100%; aspect-ratio: auto; min-height: 28rem; }
  }

  /* ---------- referências: a arte grande, os dados e os horários ao lado ---------- */
  .p-como-chegar__refs { display: grid; gap: var(--s-6); align-items: start; }
  /* a arte tem canto transparente: a superfície evita o recorte cru sobre o grão */
  .p-como-chegar__art img { background: var(--surface); }
  .p-como-chegar__facts { display: grid; gap: var(--s-6); align-content: start; }
  .p-como-chegar__dl { row-gap: var(--s-3); align-content: start; }
  .p-como-chegar__meet { display: grid; gap: var(--s-3); align-content: start; }
  .p-como-chegar__meet .schedule { margin-top: var(--s-1); }
  @media (min-width: 48rem) {
    /* no tablet os dados e os horários dividem a linha sob a arte */
    .p-como-chegar__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); }
    /* coluna estreita: nome, horário e formato empilhados em vez de três colunas apertadas */
    .p-como-chegar__meet .schedule__row { grid-template-columns: 1fr; }
  }
  @media (min-width: 64rem) {
    .p-como-chegar__refs { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-8); }
    .p-como-chegar__facts { grid-template-columns: 1fr; gap: var(--s-6); padding-top: var(--s-2); }
  }

  /* ---------- escritório ---------- */
  .p-como-chegar__office { display: grid; gap: var(--s-6); align-items: start; }
  .p-como-chegar__office .lead { margin-top: var(--s-4); }
  .p-como-chegar__office-card { max-width: 26rem; padding: var(--s-4) var(--s-5); font-size: var(--fs--1); }
  @media (min-width: 48rem) {
    .p-como-chegar__office { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-8); }
  }
}

/* ===== pages/hub-contribua.css ===== */
/* Contribua (Hub 5x7): só layout. Componentes (pix, callout, card, progress, gallery) vêm de components.css. */
@layer pages {
  /* ---------- cabeçalho + caixa PIX + callout de confiança ---------- */
  .p-contribua .page-head { padding-bottom: var(--s-7); }
  .p-contribua__give { display: grid; gap: var(--s-6); align-items: start; padding-bottom: var(--section); }
  .p-contribua__pixcard { display: grid; gap: var(--s-6); padding: var(--s-5); border-radius: var(--radius-l); background: var(--surface); min-width: 0; }
  .p-contribua__pixhead { display: grid; gap: var(--s-2); }
  .p-contribua__pixhead .muted { max-width: var(--measure-narrow); }
  /* o payload é longo: o campo cede e o botão quebra para baixo quando não cabe */
  .p-contribua__pixcard .pix__keyrow { flex-wrap: wrap; }
  .p-contribua__pixcard .pix__keyrow .input { flex: 1 1 14rem; min-width: 0; }
  .p-contribua__key { margin-top: var(--s-2); display: grid; gap: 0.4rem; padding-top: var(--s-4); border-top: 1px solid var(--line-strong); }
  .p-contribua__keyline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; }
  .p-contribua__keyline code { font-size: var(--fs-0); font-weight: 500; color: var(--fg); overflow-wrap: anywhere; }
  .p-contribua__keyline .btn--ghost { padding-inline: 0.6em; margin-left: -0.6em; min-height: 2.5rem; }
  .p-contribua__qrcol { display: grid; gap: var(--s-2); justify-items: center; }
  .p-contribua__qrcol .pix__qr { justify-self: center; }
  .p-contribua__aside .callout { height: 100%; }
  .p-contribua__aside .callout p + p { margin-top: var(--s-3); }
  @media (min-width: 48rem) {
    .p-contribua__pixcard { padding: var(--s-6); }
    /* o QR fica ao lado do código só quando há largura para os dois sem apertar o campo */
    .p-contribua__pixcard .pix__grid { grid-template-columns: minmax(0, 1fr) 15rem; gap: var(--s-7); }
  }
  @media (min-width: 64rem) {
    .p-contribua__give { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s-8); }
    .p-contribua__pixcard { padding: var(--s-7); }
    .p-contribua__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
  }

  /* ---------- outras formas: dois cartões lado a lado ---------- */
  /* cada cartão tem a altura do próprio conteúdo: esticar o do PayPal até a ficha bancária deixava um vazio */
  .p-contribua__ways { display: grid; gap: var(--gap); align-items: start; }
  .p-contribua__ways .card__body { gap: var(--s-4); }
  .p-contribua__ways .card__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
  .p-contribua__dl { margin-top: var(--s-2); }
  .p-contribua__dl dt { color: var(--fg-2); }
  .p-contribua__general { margin-top: var(--s-7); max-width: var(--measure); color: var(--fg-2); }
  @media (min-width: 48rem) { .p-contribua__ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* ---------- fases resumidas ---------- */
  .p-contribua__phases { display: grid; gap: var(--s-6); }
  .p-contribua__phases .progress { align-content: start; }
  @media (min-width: 48rem) { .p-contribua__phases { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7); } }

  /* ---------- a gleba já recebe: lista + quatro fotos ---------- */
  .p-contribua__moments .list-marked { margin-top: var(--s-5); }
  .p-contribua__moments .list-marked strong { color: var(--fg); }
  /* na coluna de mídia, quatro fotos em 2x2 em qualquer largura (três colunas deixariam uma órfã) */
  .p-contribua__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 48rem) { .p-contribua__moments { align-items: start; } }
}

/* ===== pages/hub-cronograma.css ===== */
@layer pages {
  /* resumo em três números logo abaixo do cabeçalho, como uma linha de razão: fio em cima e embaixo */
  .p-cronograma__summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-7); padding-block: var(--s-5); border-block: 1px solid var(--line-strong); }
  .p-cronograma__summary .stat__n { margin: 0; }
  .p-cronograma__summary .stat__l { max-width: 12rem; }

  .p-cronograma__timeline { padding-block: var(--s-7) var(--section); }

  /* no celular o cartão da fase cede margem interna para o rótulo da etapa caber em menos linhas */
  .p-cronograma__phase { padding: var(--s-5) var(--s-4); }
  .p-cronograma__phase-body { display: grid; gap: var(--s-2); }
  .p-cronograma__phase-body .timeline__status { margin-top: 0.15rem; }
  .p-cronograma__phase-sum { margin: 0; }

  /* Correção de componente, não de layout: o rótulo da etapa pode quebrar em duas linhas e o valor à direita não.
     Pedida ao dono do sistema para .progress__label/.progress__value em components.css; sai daqui quando entrar lá. */
  .p-cronograma .progress__label { min-width: 0; }
  .p-cronograma .progress__value { white-space: nowrap; flex: none; }

  @media (min-width: 48rem) {
    .p-cronograma__summary { gap: var(--s-6); padding-block: var(--s-6); }
    .p-cronograma__summary .stat__l { max-width: 16rem; }
    /* de volta ao valor do componente (.timeline__phase) */
    .p-cronograma__phase { padding: var(--s-6); }
  }
  @media (min-width: 64rem) {
    .p-cronograma__summary { grid-template-columns: repeat(3, minmax(0, 16rem)); gap: var(--s-8); }
  }
}

/* ===== pages/hub-home.css ===== */
@layer pages {
  .p-hub-hero { position: relative; min-height: min(92svh, 60rem); display: grid; align-items: end; overflow: hidden; isolation: isolate; }
  .p-hub-hero__media { position: absolute; inset: 0; z-index: -1; }
  .p-hub-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; filter: brightness(0.82) saturate(0.95); }
  /* a foto é um pôr do sol claro: sem um scrim forte o texto branco fica ilegível.
     Duas camadas, uma vertical e uma da esquerda, para o texto ter fundo próprio. */
  .p-hub-hero__media::after {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.35) 30%, rgb(0 0 0 / 0.96) 100%),
      linear-gradient(90deg, rgb(0 0 0 / 0.92) 0%, rgb(0 0 0 / 0.55) 48%, rgb(0 0 0 / 0.1) 100%);
  }
  .p-hub-hero__body { padding-block: var(--section) var(--section-s); max-width: none; }
  .p-hub-hero__logo { height: clamp(6rem, 5rem + 6vw, 10rem); width: auto; margin-bottom: var(--s-6); }
  .p-hub-hero__ref { color: var(--c-verde-limao); text-shadow: 0 1px 10px color-mix(in srgb, var(--c-preto) 80%, transparent); }
  .p-hub-hero__title { max-width: 12ch; margin-top: var(--s-2); text-shadow: 0 2px 30px rgb(0 0 0 / 0.75); }
  .p-hub-hero__text { margin-top: var(--s-5); max-width: var(--measure-narrow); font-size: var(--fs-1); color: var(--c-branco); line-height: 1.5; text-shadow: 0 1px 14px rgb(0 0 0 / 0.8); }
  .p-hub-hero__where { margin-top: var(--s-6); color: var(--c-branco); font-size: var(--fs--1); display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; text-shadow: 0 1px 10px rgb(0 0 0 / 0.8); }
  .p-hub-hero__where a { color: var(--fg); }
  .p-hub-hero .btn--secondary { --btn-fg: var(--c-branco); --btn-bg-hover: color-mix(in srgb, var(--c-branco) 12%, transparent); }

  .p-hub__pillars { gap: var(--s-7); }
  @media (min-width: 48rem) { .p-hub__pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) var(--s-8); } }
  .p-hub__phases { display: grid; gap: var(--s-6); }
  @media (min-width: 48rem) { .p-hub__phases { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7); } }
}

/* ===== pages/hub-momentos.css ===== */
/* Momentos (/momentos/ do Hub): só layout desta página. */
@layer pages {
  /* filtro e grupos logo abaixo do cabeçalho, dentro da mesma região */
  .p-momentos__list { padding-block: var(--s-6) var(--section); }
  .p-momentos__groups { display: grid; gap: var(--s-6); }
  .p-momentos__group { margin-top: 0; }
  .p-momentos__group + .p-momentos__group { border-top: 1px solid var(--line); padding-top: var(--s-6); }
  /* catorze títulos na página: um degrau abaixo do h2 padrão para as fotos mandarem.
     O ano corre em linha depois da última palavra (o flex do componente jogava o ano para
     a borda direita só quando o título quebrava, e partia "24 de abril de 2023" em duas linhas). */
  .p-momentos .gallery__group-title { display: block; font-size: var(--fs-2); }
  .p-momentos .gallery__group-title small { white-space: nowrap; margin-left: var(--s-2); }

  /* Fotos em pé ocupam duas linhas da grade; o fluxo denso preenche os vãos com as
     deitadas. A foto enche a área recebida (quando as duas linhas têm foto deitada, a
     área fica um pouco mais alta que 3:4 e o cover recorta no máximo uns 11% da largura,
     bem menos do que forçar 4:3 recortaria). */
  .p-momentos .gallery { grid-auto-flow: dense; }
  .p-momentos .gallery__item--tall { grid-row: span 2; }
  .p-momentos .gallery__item--tall img { height: 100%; }

  /* no desktop o título vira legenda de margem, como num álbum: texto à esquerda, fotos à direita */
  @media (min-width: 64rem) {
    .p-momentos__group { display: grid; grid-template-columns: 15rem minmax(0, 1fr); column-gap: var(--s-8); align-items: start; }
    .p-momentos .gallery__group-title { margin-bottom: 0; }
    .p-momentos .gallery__group-title small { display: block; margin: var(--s-2) 0 0; }
  }

  /* índice compacto na chamada final */
  .p-momentos__index .index__row { padding-block: var(--s-4); }
}

/* ===== pages/hub-o-projeto.css ===== */
/* O projeto (Hub 5x7): só layout. Componentes vêm de components.css. */
@layer pages {
  /* o cabeçalho encosta numa banda escura; sem respiro o título ficaria colado nela */
  .p-o-projeto .page-head { padding-bottom: var(--section-s); }
  /* as âncoras internas (texto fundador, movimentos) param abaixo do header fixo */
  .p-o-projeto .section[id] { scroll-margin-block-start: calc(var(--header-h) + 1rem); }
  .p-o-projeto__figura img { object-position: 50% 60%; }

  /* ---------- texto fundador: rótulo curto e versículo largo ---------- */
  .p-o-projeto__verso { display: grid; gap: var(--s-6); }
  .p-o-projeto__verso-intro { display: grid; gap: var(--s-3); align-content: start; color: var(--fg-2); max-width: var(--measure-narrow); }
  .p-o-projeto__verso-titulo { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-0); color: var(--fg); }
  .p-o-projeto__verso-texto { max-width: 34ch; text-wrap: pretty; }
  .p-o-projeto__verso-texto em { color: var(--highlight); }
  /* a referência ganha o mesmo traço do versículo da página inicial do Ramo: os dois sites falam a mesma língua */
  .p-o-projeto__verso-texto cite { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-5); font-size: var(--fs-0); color: var(--fg-2); }
  .p-o-projeto__verso-texto cite::before { content: ""; width: 3rem; height: 1px; background: var(--highlight); flex: none; }
  @media (min-width: 64rem) {
    .p-o-projeto__verso { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: var(--s-9); align-items: start; }
    .p-o-projeto__verso-texto { max-width: 40ch; }
  }

  /* ---------- o nome: duas colunas, um numeral grande em cada ---------- */
  .p-o-projeto__nome { display: grid; gap: var(--s-7); }
  .p-o-projeto__nome-col { display: grid; gap: var(--s-4); align-content: start; padding-top: var(--s-5); border-top: 1px solid var(--line-strong); }
  .p-o-projeto__nome-titulo { display: flex; align-items: baseline; gap: 0.3em; font-size: var(--fs-2); }
  .p-o-projeto__num { font-size: var(--fs-4); line-height: 1; letter-spacing: -0.02em; font-weight: 300; color: var(--accent); }
  .p-o-projeto__nome-col p { max-width: var(--measure-narrow); }
  @media (min-width: 48rem) { .p-o-projeto__nome { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); } }

  /* ---------- os quatro movimentos: numeral, título e texto em colunas no desktop ---------- */
  .p-o-projeto__movimentos { gap: 0; }
  .p-o-projeto__movimentos > li { padding-block: var(--s-6); border-top: 1px solid var(--line); }
  .p-o-projeto__movimentos > li:last-child { border-bottom: 1px solid var(--line); }
  .p-o-projeto__mov { display: grid; gap: var(--s-3); min-width: 0; }
  .p-o-projeto__mov-titulo { font-size: var(--fs-2); }
  .p-o-projeto__mov-corpo { display: grid; gap: var(--s-4); max-width: var(--measure); }
  @media (min-width: 48rem) {
    .p-o-projeto__movimentos > li { grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--s-5); padding-block: var(--s-7); }
    .p-o-projeto__movimentos > li::before { font-size: var(--fs-4); }
  }
  @media (min-width: 64rem) {
    .p-o-projeto__mov { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
  }

  /* ---------- estudo preliminar: desenhos largos, uma coluna no celular ---------- */
  .p-o-projeto__galeria { grid-template-columns: 1fr; }
  /* Pranchas e plantas não podem ser recortadas como foto; a borda preta translúcida separa a prancha do fundo branco. */
  .p-o-projeto__galeria .gallery__item { border: 1px solid var(--line); background: var(--c-branco); }
  .p-o-projeto__galeria .gallery__item img { aspect-ratio: 16 / 10; object-fit: contain; }
  .p-o-projeto__galeria-nota { margin-top: var(--s-4); max-width: var(--measure); }
  @media (min-width: 48rem) { .p-o-projeto__galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* ---------- vídeos ---------- */
  .p-o-projeto__videos { display: grid; gap: var(--gap); }
  @media (min-width: 48rem) { .p-o-projeto__videos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* ---------- onde estamos hoje ---------- */
  .p-o-projeto__fases { display: grid; gap: var(--s-6); }
  .p-o-projeto__fase { display: grid; gap: var(--s-4); align-content: start; padding-top: var(--s-5); border-top: 1px solid var(--line-strong); }
  .p-o-projeto__fase p { color: var(--fg-2); }
  @media (min-width: 48rem) { .p-o-projeto__fases { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7); } }

  /* ---------- chamada final ---------- */
  .p-o-projeto__chamada { display: grid; gap: var(--s-5); }
  .p-o-projeto__chamada .lead { max-width: var(--measure-narrow); margin-top: var(--s-3); }
  @media (min-width: 64rem) { .p-o-projeto__chamada { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-8); } }
}

/* ===== pages/ramo-agenda.css ===== */
@layer pages {
  /* filtro e lista logo abaixo do cabeçalho de página, dentro da mesma região */
  .p-agenda__list { padding-block: var(--s-7) var(--section); }
  .p-agenda__banner { margin-top: var(--s-6); }
  .p-agenda__quarterly { margin-top: var(--s-7); }
  .p-agenda__quarterly-inner { display: grid; gap: var(--s-7); align-items: center; padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); }
  .p-agenda__quarterly-body { display: grid; gap: var(--s-4); }
  .p-agenda__quarterly-body h2 { max-width: 12ch; font-size: var(--fs-4); }
  .p-agenda__quarterly-body .lead { max-width: 42ch; color: var(--fg-2); }
  .p-agenda__quarterly-media { overflow: hidden; border-radius: var(--radius); }
  .p-agenda__quarterly-media img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
  .p-agenda__group > .index__group-title { margin: 0; }
  .p-agenda__group:first-child > .index__group-title { padding-top: var(--s-4); }

  /* a ação da linha é âncora (o componente a desenha como span acima do link que cobre a linha e o
     clique morria nela); veste-se como o texto ao lado, e a cor de link fica para o hover */
  .p-agenda a.index__action { color: inherit; text-decoration: none; }
  .p-agenda a.index__action:hover { color: var(--accent); }

  /* no celular a miniatura fica sob a data, na coluna estreita; o corpo ocupa a coluna larga inteira
     (o componente sozinho colocaria o corpo na coluna de 4.5rem) */
  @media (max-width: 47.99rem) {
    .p-agenda .index__row--thumb { grid-template-areas: "date body" "thumb body" ". action"; }
    .p-agenda .index__row--thumb .index__date { grid-area: date; }
    .p-agenda .index__row--thumb .index__thumb { grid-area: thumb; align-self: start; }
    .p-agenda .index__row--thumb .index__body { grid-area: body; }
    .p-agenda .index__row--thumb .index__action { grid-area: action; }
  }

  /* a partir do tablet toda linha reserva a coluna da miniatura: os títulos ficam numa borda só,
     com ou sem imagem */
  @media (min-width: 48rem) {
    .p-agenda .index__row:not(.index__row--thumb) { grid-template-columns: 6rem 7rem 1fr auto; }
    .p-agenda .index__row:not(.index__row--thumb) .index__body { grid-column: 3; }
  }

  /* no desktop o mês vira um rótulo de margem, fixo enquanto as linhas do mês rolam */
  @media (min-width: 64rem) {
    .p-agenda__group { display: grid; grid-template-columns: 11rem minmax(0, 1fr); column-gap: var(--s-7); align-items: start; }
    .p-agenda__group > .index__group-title, .p-agenda__group:first-child > .index__group-title { position: sticky; top: 7.5rem; padding-top: var(--s-5); }
  }

  .p-agenda__week .schedule { max-width: 60rem; }
  .p-agenda__replays { margin-top: clamp(5rem, 9vw, 8rem); padding-top: var(--s-8); border-top: 1px solid var(--line); }
  .p-agenda__replays .section__title { font-size: var(--fs-3); }
  .p-agenda__replay-grid { display: grid; gap: var(--s-8) var(--gap); }
  .p-agenda__replay { min-width: 0; }
  .p-agenda__replay .video { width: 100%; border-radius: var(--radius); }
  .p-agenda__replay-placeholder { width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
  .p-agenda__replay-body { display: grid; gap: var(--s-2); padding-top: var(--s-4); }
  .p-agenda__replay-program { color: var(--fg-2); font-size: var(--fs--1); font-weight: 600; }
  .p-agenda__replay-title { font-family: var(--font-body); font-size: var(--fs-1); line-height: 1.3; }
  .p-agenda__replay-title a { color: inherit; text-decoration: none; }
  .p-agenda__replay-title a:hover { color: var(--accent); text-decoration: underline; }
  .p-agenda__replay-meta { color: var(--fg-3); font-size: var(--fs--1); }

  @media (min-width: 40rem) { .p-agenda__replay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64rem) {
    .p-agenda__quarterly-inner { grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.8fr); padding: var(--s-8); }
    .p-agenda__quarterly-inner--text-only { grid-template-columns: minmax(0, 1fr); }
    .p-agenda__replay-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
}

/* ===== pages/ramo-alinhamentos.css ===== */
@layer pages {
  /* ---------------------------------------------- /alinhamentos-apostolicos/ */
  .p-alinhamentos__grid { max-width: 58rem; }
  /* os blocos são <section> dentro de .prose: o fluxo de 1em do .prose só vale para filhos diretos */
  .p-alinhamentos__bloco > * + * { margin-top: 1em; }
  .p-alinhamentos__bloco h2 { margin-top: 0; }
  .p-alinhamentos__bloco + .p-alinhamentos__bloco { margin-top: var(--s-8); }
  .p-alinhamentos__cta > * + * { margin-top: var(--s-5); }

  /* ------------------------------------------------------------ /alinhe-se/ */
  .p-alinhe-se__secao > * + * { margin-top: 1em; }
  .p-alinhe-se__secao > h2 + * { margin-top: 0.6em; }
  .p-alinhe-se__secao h2 { margin-top: 0; }
  .p-alinhe-se__secao + .p-alinhe-se__secao { margin-top: var(--s-8); }
  .p-alinhe-se__secao:first-child { scroll-margin-top: calc(var(--header-h) + 1rem); }
  .p-alinhe-se__links { --cluster-gap: 0.5em 1em; }
  .p-alinhe-se__definicao { max-width: 40ch; }
  /* as cinco frentes: palavras em serifa sobre um fio. Uma coluna no celular e cinco a partir do
     tablet, para a grade nunca terminar com célula vazia (3+2 ou 2+2+1 lê como bloco inacabado) */
  .p-alinhe-se__frentes { display: grid; gap: var(--s-3); margin-top: 1.25em; padding-left: 0; /* a prosa recua listas */ }
  .p-alinhe-se__frentes li { padding-top: var(--s-2); border-top: 1px solid var(--line-strong); font-family: var(--font-display); font-size: var(--fs-1); line-height: 1.2; }
  .p-alinhe-se__frentes li + li { margin-top: 0; } /* a prosa põe margem entre itens de lista */
  @media (min-width: 48rem) {
    .p-alinhe-se__frentes { grid-template-columns: repeat(5, 1fr); gap: var(--s-4); }
    .p-alinhe-se__frentes li { padding-top: var(--s-3); }
  }
  /* .numbered dentro de .prose: tira o recuo e a margem de h3 que a prosa impõe */
  .p-alinhe-se__passos { padding-left: 0; gap: var(--s-6); margin-top: 1.25em; }
  .p-alinhe-se__passos > li + li { margin-top: 0; }
  .p-alinhe-se__passos h3 { margin-top: 0; }
  .p-alinhe-se__passos .stack > * + * { margin-top: var(--s-2); }
  .p-alinhe-se__pedido { display: grid; gap: var(--s-7); align-items: start; }
  /* .field é grid de linhas implícitas: sem isto, a altura extra de uma linha do .form__row vira input mais alto no campo vizinho */
  .p-alinhe-se__pedido .form__row { align-items: start; }
  .p-alinhe-se__pedido .field { align-content: start; }
  .p-alinhe-se__aside { display: grid; gap: var(--s-4); }
  .p-alinhe-se__aside .callout p + p { margin-top: 0.5em; }
  .p-alinhe-se__aside .callout a { font-weight: 500; overflow-wrap: anywhere; }
  @media (min-width: 64rem) {
    .p-alinhe-se__pedido { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--s-9); }
  }
}

/* ===== pages/ramo-atualizacoes.css ===== */
/* Atualizações: lista (.p-atualizacoes) e notícia (.p-atualizacao). Só layout; os componentes vêm do sistema. */
@layer pages {
  /* ---------- lista: fecho com newsletter e agenda ---------- */
  .p-atualizacoes__fim { display: grid; gap: var(--gap); }
  @media (min-width: 48rem) { .p-atualizacoes__fim { grid-template-columns: 3fr 2fr; } }
  .p-atualizacoes__newsform { gap: var(--s-2); margin-top: var(--s-2); }
  .p-atualizacoes__newsrow { display: flex; gap: var(--s-2); }
  .p-atualizacoes__newsrow .input { min-width: 0; }
  .p-atualizacoes__newsform .form__status { font-size: var(--fs--1); padding: var(--s-3) var(--s-4); }
  /* O card de destaque mantém texto e kicker pretos sobre o fundo branco. */
  .p-atualizacoes__newsform .form__note { color: var(--c-preto); }

  /* ---------- notícia: cabeçalho ---------- */
  .p-atualizacao__tag { margin-bottom: var(--s-4); }
  .p-atualizacao__sub { margin-top: var(--s-3); max-width: 40ch; }
  /* o título da notícia é longo; no rastro ele não pode empurrar o resto para uma segunda linha */
  .p-atualizacao .page-head__crumbs li:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ---------- notícia: corpo ---------- */
  /* pares rótulo/valor empilham no celular (rótulos longos comiam a coluna do valor) e voltam a duas colunas com largura */
  .p-atualizacao__dl { grid-template-columns: 1fr; gap: 0.15rem; }
  /* Rótulo pequeno usa preto para preservar o contraste. */
  .p-atualizacao__dl dt { color: var(--fg-2); }
  .p-atualizacao__dl dd + dt { margin-top: var(--s-3); }
  @media (min-width: 48rem) {
    .p-atualizacao__dl { grid-template-columns: auto 1fr; gap: 0.6rem 1.5rem; }
    .p-atualizacao__dl dd + dt { margin-top: 0; }
  }
  .p-atualizacao__videos { display: grid; gap: var(--gap); }
  .p-atualizacao__cta { margin-top: 2em; }
  .p-atualizacao__assinatura { margin-top: 2.5em; padding-top: var(--s-5); border-top: 1px solid var(--line); }
  .p-atualizacao__voltar { margin-top: var(--s-7); }

  /* com índice lateral, cabeçalho e rodapé seguem a grade do .article para o texto alinhar com a prosa */
  @media (min-width: 64rem) {
    .p-atualizacao--toc .p-atualizacao__cols { display: grid; grid-template-columns: 15rem minmax(0, 1fr); column-gap: var(--s-9); }
    .p-atualizacao--toc .p-atualizacao__cols > * { grid-column: 2; }
  }
}

/* ===== pages/ramo-ayin-cursos.css ===== */
@layer pages {
  /* cabeçalho: o logo e o título formam um só bloco de marca */
  .p-ayin-cursos__brand { display: grid; gap: var(--s-5); }
  .p-ayin-cursos__logo { height: 4.5rem; width: auto; }
  .p-ayin-cursos__badges { margin-top: var(--s-6); }
  .p-ayin-cursos__head .page-head__meta { margin-top: var(--s-5); }
  @media (min-width: 48rem) {
    .p-ayin-cursos__brand { grid-template-columns: auto 1fr; align-items: center; gap: var(--s-7); }
    .p-ayin-cursos__logo { height: 7.5rem; }
  }

  /* os PNGs dos badges trazem margem transparente (22% de cada lado, 17% em cima e embaixo) e são intocáveis:
     a âncora recorta só a arte visível, para foco e toque baterem com o que se vê e a arte alinhar com a coluna.
     Tudo derivado da altura (--badge-h); vale só para os dois blocos desta página, o rodapé fica como está. */
  .p-ayin-cursos__badges, .p-ayin-cursos__download .app-badges { --badge-h: 3rem; gap: var(--s-3) var(--s-4); }
  .p-ayin-cursos__badges a, .p-ayin-cursos__download .app-badges a { display: block; overflow: hidden; width: calc(var(--badge-h) * 2.23); height: calc(var(--badge-h) * 0.67); border-radius: 0.3rem; }
  .p-ayin-cursos__badges img, .p-ayin-cursos__download .app-badges img { height: 100%; width: 100%; object-fit: contain; }

  /* prosa institucional */
  .p-ayin-cursos__about .prose { margin-top: var(--s-5); }

  /* vídeo do último lançamento, separado da apresentação institucional */
  .p-ayin-cursos__launch-media { max-width: 52rem; margin-inline: auto; }
  .p-ayin-cursos__launch-media .figure__caption { margin-top: var(--s-3); }

  /* dentro do app: dois cards lado a lado */
  .p-ayin-cursos__inside { display: grid; gap: var(--gap); }
  @media (min-width: 48rem) { .p-ayin-cursos__inside { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .p-ayin-cursos__next { font-size: var(--fs--1); color: var(--fg-2); }
  .p-ayin-cursos__next-title { font-weight: 600; margin-bottom: var(--s-1); }
  .p-ayin-cursos__next li { display: grid; gap: 0 var(--s-3); }
  .p-ayin-cursos__next time { color: var(--fg-2); font-variant-numeric: tabular-nums; }
  /* área de toque de 44px; empilhado, o link fica colado à sua data e o respiro sobra para a linha seguinte.
     Os links de evento ficam acima do link que cobre o card inteiro. */
  .p-ayin-cursos__next a { position: relative; z-index: 2; display: flex; align-items: flex-start; min-height: 2.75rem; padding-top: 0.15rem; }
  @media (min-width: 40rem) {
    .p-ayin-cursos__next li { grid-template-columns: 9rem 1fr; align-items: center; }
    .p-ayin-cursos__next a { align-items: center; padding-top: 0; }
  }

  /* conteúdos e assinaturas: quatro cards, o anual em destaque */
  .p-ayin-cursos__plans { display: grid; gap: var(--gap); }
  @media (min-width: 48rem) { .p-ayin-cursos__plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 75rem) { .p-ayin-cursos__plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .p-ayin-cursos__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-3); }
  .p-ayin-cursos__price-now { font-family: var(--font-display); font-size: var(--fs-3); line-height: 1; letter-spacing: -0.02em; }
  .p-ayin-cursos__price-old { color: var(--fg-2); font-size: var(--fs-0); }
  .p-ayin-cursos__note { margin-top: var(--s-5); max-width: var(--measure); font-size: var(--fs-0); }

  /* faixa final centralizada */
  .p-ayin-cursos__download > * + * { margin-top: var(--s-5); }
  .p-ayin-cursos__download .lead { margin-inline: auto; }
  .p-ayin-cursos__download .app-badges { justify-content: center; }
  .p-ayin-cursos__download .small a { display: inline-flex; align-items: center; gap: 0.4em; }
}

/* ===== pages/ramo-contato.css ===== */
/* Página de contato (/contato/): só layout. Componentes vêm de components.css. */
@layer pages {
  /* ---------- formulário e canais logo abaixo do cabeçalho, na mesma região ---------- */
  .p-contato__grid { display: grid; gap: var(--s-8); padding-block: var(--s-7) var(--section); align-items: start; }
  .p-contato__formcol, .p-contato__channels { min-width: 0; }
  .p-contato__coltitle { margin-bottom: var(--s-5); }
  /* na mesma linha, o campo sem dica não pode esticar o input para igualar a altura do vizinho */
  .p-contato__formcol .field { align-content: start; }
  .p-contato__channel-list { display: grid; gap: var(--s-3); }
  /* o valor (número ou e-mail) em slab, logo sob o rótulo; o componente dá ao link margem de ação, aqui ele é o próprio dado */
  .p-contato__value { display: table; margin-top: 0.15em; font-family: var(--font-display); font-size: var(--fs-1); font-weight: 400; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .p-contato__value--mail { font-size: var(--fs-0); }
  /* .address-card a vira display: table; o botão precisa voltar a ser flex para alinhar o ícone */
  .p-contato__channel .btn { display: inline-flex; margin-top: var(--s-4); }
  .p-contato__support { margin-top: var(--s-4); display: flex; gap: 0.4em; align-items: flex-start; }
  .p-contato__support .icon { color: var(--fg-3); margin-top: 0.15em; }
  .p-contato__support a { white-space: nowrap; }
  @media (min-width: 48rem) {
    .p-contato__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  }
  @media (min-width: 64rem) {
    .p-contato__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-9); }
  }

  /* ---------- onde estamos: dois endereços e o mapa ---------- */
  .p-contato__where { display: grid; gap: var(--s-6); align-items: start; }
  .p-contato__addresses { display: grid; gap: var(--s-4); }
  .p-contato__where .map { aspect-ratio: 4 / 3; }
  @media (min-width: 48rem) {
    .p-contato__where { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s-8); align-items: stretch; }
    /* o mapa acompanha a altura dos dois cartões em vez de impor a própria proporção */
    .p-contato__where .map { aspect-ratio: auto; height: 100%; min-height: 20rem; }
  }

  /* ---------- agendar um seminário ---------- */
  .p-contato__seminar .callout .btn { margin-top: var(--s-4); }

  /* ---------- fecho: saudação em slab leve (a Roboto Slab não tem itálico) e redes com rótulo ---------- */
  .p-contato__closing { padding-block: var(--section); }
  .p-contato__greeting { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-3); line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; max-width: 24ch; margin-inline: auto; }
  .p-contato__signature { margin-top: var(--s-4); font-family: var(--font-display); font-weight: 400; font-size: var(--fs-2); }
  .p-contato__role { margin-top: var(--s-3); max-width: 40ch; margin-inline: auto; }
  .p-contato__social { justify-content: center; margin-top: var(--s-6); gap: var(--s-2) var(--s-3); }
  /* o componente desenha círculos só com ícone; aqui três deles seriam Instagram iguais, então o nome vai junto */
  .p-contato__social a { display: inline-flex; align-items: center; gap: 0.5em; width: auto; height: auto; min-height: 2.75rem; padding: 0.5em 1.1em 0.5em 0.9em; border-radius: var(--radius-pill); font-size: var(--fs--1); font-weight: 500; text-decoration: none; }
}

/* ===== pages/ramo-doacoes.css ===== */
/* Doações (/doacoes/): só layout. Componentes vêm de components.css. */
@layer pages {
  /* cabeçalho: atalhos para as três formas de pagamento */
  .p-doacoes__atalhos a { font-weight: 500; }

  /* ---------- destinos: um sob o outro no celular, lado a lado no desktop ---------- */
  .p-doacoes__destinos-sec { padding-top: var(--s-7); }
  .p-doacoes__destinos { display: grid; gap: var(--gap); }
  .p-doacoes__destino .card__body { gap: var(--s-5); }
  .p-doacoes__subtitulo { font-size: var(--fs-2); }
  /* a linha do código: o botão desce quando não cabe ao lado do campo */
  .p-doacoes__destino .pix__keyrow { flex-wrap: wrap; }
  .p-doacoes__destino .pix__keyrow .input { flex: 1 1 10rem; min-width: 0; }
  .p-doacoes__destino .pix__grid { grid-template-columns: 1fr; }
  /* chave em texto, para quem digita no app do banco (e o CNPJ, na transferência) */
  .p-doacoes__chave { display: grid; gap: 0.5rem; padding-top: var(--s-5); border-top: 1px solid var(--line-strong); }
  .p-doacoes__chave-row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
  .p-doacoes__chave-valor { flex: 1 1 10rem; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs-0); padding: 0.6em 0.9em; border: 1px dashed var(--line-strong); border-radius: 0.5rem; background: var(--bg); overflow-wrap: anywhere; }
  .p-doacoes__seguranca { margin-top: var(--s-6); }
  /* no celular o botão de copiar não cabe ao lado do campo: ocupa a linha de baixo inteira,
     e a chave (ou o CNPJ) fica com a largura toda em vez de quebrar no meio do número */
  @media (max-width: 47.99rem) {
    .p-doacoes__destino .pix__keyrow .btn, .p-doacoes__chave-row .btn { flex: 1 1 100%; }
  }
  @media (min-width: 48rem) {
    .p-doacoes__destino .card__body { padding: var(--s-6); }
    /* valores à esquerda, QR à direita, código embaixo ocupando a largura toda */
    .p-doacoes__destino .pix { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "valores qr" "codigo codigo"; column-gap: var(--s-6); align-items: start; }
    .p-doacoes__destino .pix__grid { display: contents; }
    .p-doacoes__destino .pix > .fieldset { grid-area: valores; }
    .p-doacoes__destino .pix__keybox { grid-area: codigo; }
    .p-doacoes__destino .pix__qr { grid-area: qr; justify-self: end; }
  }
  @media (min-width: 64rem) {
    .p-doacoes__destinos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
  }

  /* ---------- outras formas: PayPal à esquerda, contas à direita ---------- */
  .p-doacoes__outras { display: grid; gap: var(--s-7); align-items: start; }
  .p-doacoes__paypal .card__body { gap: var(--s-4); }
  .p-doacoes__paypal .btn { align-self: flex-start; margin-top: var(--s-2); }
  .p-doacoes__contas > .muted { margin-top: var(--s-3); max-width: var(--measure-narrow); }
  .p-doacoes__tabela-wrap { overflow-x: auto; margin-top: var(--s-5); }
  .p-doacoes__tabela th, .p-doacoes__tabela td { padding-inline: 0 var(--s-4); }
  .p-doacoes__tabela th:last-child, .p-doacoes__tabela td:last-child { padding-right: 0; }
  .p-doacoes__tabela th[scope="row"] { color: var(--fg); font-size: var(--fs-0); font-weight: 500; }
  .p-doacoes__tabela .tnum { white-space: nowrap; }
  .p-doacoes__cnpj { margin-top: var(--s-5); padding-top: 0; border-top: 0; }
  @media (min-width: 64rem) {
    .p-doacoes__outras { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s-9); }
  }

  /* ---------- frentes: três cards planos com régua em cima, foto ao lado no desktop ---------- */
  .p-doacoes__frentes { display: grid; gap: var(--s-5); }
  .p-doacoes__frentes .card { border-top: 1px solid var(--line-strong); }
  .p-doacoes__frentes .card__body { padding: var(--s-5) 0 0; }
  .p-doacoes__frentes .card__kicker .icon { color: var(--accent); }
  .p-doacoes .split { align-items: start; }
  .p-doacoes__foto img { aspect-ratio: 4 / 3; object-fit: cover; }
  @media (min-width: 48rem) { .p-doacoes__foto img { aspect-ratio: 4 / 5; } }
}

/* ===== pages/ramo-escola-de-issacar.css ===== */
@layer pages {
  /* sem o cartaz lateral, a apresentação ocupa toda a largura disponível */
  .p-escola-de-issacar__prose { max-width: none; }

  .p-escola-de-issacar__quote .kicker { color: var(--fg-2); }
  .p-escola-de-issacar__quote-text { margin-top: var(--s-4); max-width: 24ch; }

  /* 20 aulas: sequência real, numeral serifado; duas listas independentes para cada coluna fluir sozinha */
  .p-escola-de-issacar__aulas { display: grid; gap: var(--s-4); }
  .p-escola-de-issacar__aulas .numbered { gap: var(--s-4); }
  .p-escola-de-issacar__aulas .numbered > li { align-items: baseline; padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
  .p-escola-de-issacar__aulas .numbered > li::before { font-size: var(--fs-2); }
  /* a segunda lista continua a contagem de onde a primeira parou (o template informa o deslocamento) */
  .p-escola-de-issacar__aulas ol + ol { counter-reset: n var(--inicio, 10); }
  .p-escola-de-issacar__aula { font-weight: 500; text-wrap: pretty; }
  .p-escola-de-issacar__nota { margin-top: var(--s-6); max-width: var(--measure); }
  @media (min-width: 48rem) {
    .p-escola-de-issacar__aulas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-8); align-items: start; }
  }

  /* Rótulos do .dl usam o texto secundário para preservar o contraste. */
  .p-escola-de-issacar__dados dt { color: var(--fg-2); }

  .p-escola-de-issacar__ayin { display: grid; place-items: center; }
  .p-escola-de-issacar__ayin-logo { width: min(60%, 14rem); height: auto; }
  @media (min-width: 48rem) { .p-escola-de-issacar__ayin-logo { width: min(70%, 16rem); } }
}

/* ===== pages/ramo-evento.css ===== */
/* Página de evento (/agenda/<slug>/): só layout. Componentes vêm de components.css. */
@layer pages {
  /* ---------- cabeçalho: texto + ficha (destaque) ou texto + cartaz (demais) ---------- */
  /* nos eventos comuns a seção seguinte tem linha; o cabeçalho precisa de respiro antes dela */
  .p-evento:not(.p-evento--destaque) .page-head { padding-bottom: var(--section-s); }
  .p-evento__headgrid { display: grid; gap: var(--s-6); align-items: start; }
  .p-evento__headbody { min-width: 0; }
  .p-evento__subtitle { display: block; margin-top: var(--s-3); font-size: var(--fs-2); }
  .p-evento__texts { margin-top: var(--s-4); display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em 0.5em; color: var(--fg-2); font-size: var(--fs--1); }
  .p-evento__texts .icon { color: var(--accent); }
  .p-evento__texts span { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-0); color: var(--fg); }
  .p-evento__tools { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-top: var(--s-5); }
  /* alvo de toque de 44px mesmo com .btn--s */
  .p-evento__tools .btn { min-height: 2.75rem; }
  .p-evento__tools .btn--ghost { padding-inline: 0.6em; margin-left: -0.6em; }
  .p-evento__dl { margin-top: var(--s-6); }
  .p-evento__facts { padding: var(--s-5); border-radius: var(--radius-l); background: var(--surface); }
  /* uma coluna em toda largura: a ficha é estreita demais para duas */
  .p-evento__facts .hero__facts { margin-top: 0; grid-template-columns: 1fr; }
  .p-evento__facts .p-evento__tools { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line-strong); }
  .p-evento__poster { max-width: 100%; }
  .p-evento__poster img { border-radius: var(--radius-l); box-shadow: var(--shadow-2); }
  .p-evento__banner { margin-top: var(--s-7); }
  .p-evento__banner img { border-radius: var(--radius); box-shadow: var(--shadow-2); }
  @media (min-width: 48rem) {
    .p-evento__headgrid { grid-template-columns: minmax(0, 1fr) 16rem; gap: var(--s-7); }
    .p-evento__headgrid--single { grid-template-columns: minmax(0, 1fr); }
    .p-evento__headgrid--featured { grid-template-columns: minmax(0, 1fr) 19rem; }
    .p-evento__banner { margin-top: var(--s-8); }
    .p-evento__banner img { border-radius: var(--radius-l); }
  }
  @media (min-width: 64rem) {
    .p-evento__headgrid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-9); }
    .p-evento__headgrid--single { grid-template-columns: minmax(0, 1fr); }
    .p-evento__headgrid--featured { grid-template-columns: minmax(0, 1fr) 23rem; gap: var(--s-9); }
    .p-evento__poster { max-width: 22rem; justify-self: end; }
    .p-evento__facts { padding: var(--s-6); }
  }

  /* ---------- preletores: um grupo por modalidade (arte + nomes) ---------- */
  /* 1.85 : 1 iguala a altura das duas artes (1076x432 e 646x480) */
  .p-evento__cast { display: grid; gap: var(--s-7); align-items: start; }
  .p-evento__group { display: grid; gap: var(--s-4); }
  .p-evento__group .figure { margin-bottom: var(--s-2); }
  .p-evento__group .figure img { border-radius: 0; }
  .p-evento__speakers { border-top: 1px solid var(--line-strong); }
  .p-evento__speakers li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.75em; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
  .p-evento__speaker-name { font-family: var(--font-display); font-size: var(--fs-1); }
  .p-evento__speaker-org { color: var(--fg-3); font-size: var(--fs--1); }
  .p-evento__speaker-foto { width: 3rem; height: 3rem; align-self: center; }
  @media (min-width: 48rem) {
    .p-evento__cast { grid-template-columns: 1.85fr 1fr; gap: var(--s-8); }
    .p-evento__cast--um { grid-template-columns: minmax(0, 1fr); max-width: 46rem; }
  }

  /* ---------- inscrição ---------- */
  .p-evento__offers { display: grid; gap: var(--gap); }
  .p-evento__offer .card__body { gap: var(--s-3); }
  .p-evento__offer .stat__n { font-size: var(--fs-3); }
  .p-evento__offer .stat__l { font-size: var(--fs-0); }
  .p-evento__offer.card--warm .stat__l { color: var(--c-preto); }
  @media (min-width: 40rem) { .p-evento__offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .p-evento__includes { margin-top: var(--s-6); display: grid; gap: var(--s-4); }
  .p-evento__signup { display: grid; gap: var(--s-8); margin-top: var(--s-8); padding-top: var(--s-7); border-top: 1px solid var(--line); align-items: start; }
  .p-evento__formcol { display: grid; gap: var(--s-6); min-width: 0; }
  .p-evento__formcol .form { margin-top: 0; }
  /* na mesma linha, o campo sem dica não pode esticar o input para igualar a altura do vizinho */
  .p-evento__formcol .field { align-content: start; }
  .p-evento__rules { margin-top: var(--s-2); }
  .p-evento__rulelist { padding-left: 1.1em; display: grid; gap: 0.5em; color: var(--fg-2); }
  .p-evento__rulelist li::marker { color: var(--accent); }
  .p-evento__onsite { margin-top: var(--s-4); }
  .p-evento__aside { display: grid; gap: var(--s-5); padding: var(--s-5); border: 1px solid var(--line-strong); border-radius: var(--radius-l); min-width: 0; }
  .p-evento__aside .pix__grid { grid-template-columns: 1fr; }
  .p-evento__aside .pix__qr { justify-self: start; }
  .p-evento__aside .pix__keyrow { flex-wrap: wrap; }
  .p-evento__aside .pix__keyrow .input { flex: 1 1 12rem; min-width: 0; }
  @media (min-width: 64rem) {
    .p-evento__signup { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-9); }
    .p-evento__signup--sem-pix { grid-template-columns: minmax(0, 46rem); }
    .p-evento__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); padding: var(--s-6); }
  }

  /* ---------- programação: um bloco por dia ---------- */
  .p-evento__days { display: grid; gap: var(--s-7); }
  .p-evento__day-title { font-size: var(--fs-2); margin-bottom: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line-strong); }
  .p-evento__table td { padding-inline: 0; padding-block: var(--s-3); }
  .p-evento__table td:first-child { width: 4.5rem; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--fg); }
  /* pausas se distinguem por itálico e peso, não por cor apagada (contraste na banda escura) */
  .p-evento__pause td { color: var(--fg-2); font-style: italic; }
  .p-evento__pause td:first-child { color: var(--fg-2); font-weight: 500; font-style: normal; }
  @media (min-width: 48rem) { .p-evento__days { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); } }
  @media (min-width: 64rem) { .p-evento__days { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* ---------- demais eventos ---------- */
  .p-evento__notify { margin-top: var(--s-4); gap: var(--s-2); }
  .p-evento__notify-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .p-evento__notify-row .input { flex: 1 1 12rem; min-width: 0; }
  .p-evento__notify .form__status { font-size: var(--fs--1); padding: var(--s-3) var(--s-4); }
}

/* ===== pages/ramo-home.css ===== */
@layer pages {
  .p-home__issacar .card__body { justify-content: center; }
  .p-home__issacar .card__title { font-size: var(--fs-3); }
  .p-home__issacar-lead { font-size: var(--fs-1); max-width: 34ch; }
  .p-home__issacar-list li { background: color-mix(in srgb, var(--c-branco) 70%, transparent); }
  .p-home__issacar { background: linear-gradient(160deg, var(--c-branco) 0%, var(--c-branco) 100%); }
  .p-home__nova { min-height: 18rem; }
  .p-home__newsrow { display: flex; gap: var(--s-2); }
  .p-home__newsrow .input { min-width: 0; }
  .p-home__newsform { gap: var(--s-2); }
  .p-home__newsform .form__status { font-size: var(--fs--1); padding: var(--s-3) var(--s-4); }
  .p-home__newsgrid { grid-template-columns: 1fr; }
  .p-home__newscard { border-top: 1px solid var(--line-strong); border-radius: 0; }
  .p-home__newscard .card__body { padding: var(--s-5) 0 0; }
  @media (min-width: 48rem) { .p-home__newsgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7); } }
  .p-home__give .split__media img { border-radius: var(--radius-l); aspect-ratio: 4 / 3; object-fit: cover; }
  .p-home__give .btn--secondary { --btn-fg: var(--c-preto); --btn-bg-hover: var(--c-preto); --btn-fg-hover: var(--c-branco); border-color: var(--c-preto); }
  .p-home__give .btn--secondary:hover { color: var(--c-branco); }
}

/* ===== pages/ramo-nova-safra.css ===== */
@layer pages {
  /* Paleta própria aprovada: roxo é principal; laranja aparece só como detalhe sobre branco. */
  .p-nova-safra {
    --c-nova-roxo: #4B2271;
    --c-nova-laranja: #FF7400;
    --accent: var(--c-nova-roxo);
    --accent-hover: var(--c-preto);
    --accent-fg: var(--c-branco);
    --accent-hover-fg: var(--c-branco);
    --accent-soft: rgb(75 34 113 / 0.12);
    --highlight: var(--c-nova-laranja);
    --highlight-2: var(--c-nova-laranja);
    --link: var(--c-nova-roxo);
    --link-hover: var(--c-preto);
  }
  .p-nova-safra .theme-dark {
    --bg: var(--c-nova-roxo);
    --bg-2: var(--c-nova-roxo);
    --accent: var(--c-branco);
    --accent-hover: var(--c-preto);
    --accent-fg: var(--c-nova-roxo);
    --accent-hover-fg: var(--c-branco);
    --highlight: var(--c-branco);
    --highlight-2: var(--c-branco);
    --link: var(--c-branco);
    --link-hover: var(--c-branco);
    background-image: none;
  }

  /* cabeçalho: a marca fica ao lado do título, sobre o roxo principal. */
  .p-nova-safra__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "crumbs crumbs" "titulo marca" "intro intro"; column-gap: var(--s-4); align-items: start; }
  .p-nova-safra__crumbs { grid-area: crumbs; }
  .p-nova-safra__titulo { grid-area: titulo; }
  .p-nova-safra__intro { grid-area: intro; }
  .p-nova-safra__marca { grid-area: marca; width: 3.5rem; height: 3.5rem; padding: 0.35rem; border-radius: var(--radius); background: var(--c-nova-roxo); display: grid; place-items: center; margin-top: 0.2rem; }
  .p-nova-safra__marca-img { width: 100%; height: auto; }
  .p-nova-safra .page-head { padding-bottom: var(--section-s); }
  @media (min-width: 48rem) {
    .p-nova-safra__head { grid-template-areas: "crumbs marca" "titulo marca" "intro marca"; column-gap: var(--s-6); }
    .p-nova-safra__marca { width: 6.5rem; height: 6.5rem; padding: 0.6rem; margin-top: var(--s-6); }
  }

  .p-nova-safra__verse { background: var(--c-nova-roxo); }
  .p-nova-safra__verse .quote { margin: 0; }
  .p-nova-safra__pillars { display: grid; gap: var(--s-5); }
  .p-nova-safra__pillar { padding: var(--s-6); border-left: 5px solid var(--c-nova-laranja); background: var(--c-branco); color: var(--c-preto); }
  .p-nova-safra__pillar .kicker { color: var(--c-preto); }
  .p-nova-safra__pillar h2 { max-width: 30ch; font-size: var(--fs-2); font-weight: 200; margin-top: 13px; }
  .p-nova-safra__dot-list { display: grid; gap: var(--s-3); padding-left: 0; list-style: none; }
  .p-nova-safra__dot-list li { display: flex; align-items: flex-start; gap: var(--s-2); break-inside: avoid; }
  .p-nova-safra__dot { flex: 0 0 auto; color: var(--c-nova-laranja); font-family: var(--font-body); font-size: 1.15em; font-weight: 700; line-height: 1.1; }
  .p-nova-safra__principles { display: grid; gap: var(--s-7); margin-top: var(--s-8); }
  .p-nova-safra__principles article { position: relative; padding-top: var(--s-5); }
  .p-nova-safra__principles article::before { content: ""; position: absolute; top: 0; left: 0; width: 3rem; height: 4px; border-radius: 999px; background: var(--c-nova-laranja); }
  .p-nova-safra__principles .p-nova-safra__dot-list { margin-top: var(--s-4); columns: 1; }
  .p-nova-safra__video-section .container { max-width: 52rem; }
  .p-nova-safra__video { margin-top: var(--s-5); }
  .p-nova-safra__video img { filter: saturate(0.85) contrast(1.05); }
  @media (min-width: 48rem) {
    .p-nova-safra__pillars, .p-nova-safra__principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .p-nova-safra__principles .p-nova-safra__dot-list { columns: 2; column-gap: var(--s-6); }
  }

  /* Nas seções claras, o laranja entra como acento e sempre acompanha texto preto. */
  .p-nova-safra .section:not(.theme-dark):not(.theme-warm) .section__title { padding-left: var(--s-4); border-left: 4px solid var(--c-nova-laranja); }

  /* histórico: o ano ocupa a coluna da data; até o tablet a lista tem largura de leitura */
  .p-nova-safra__anos { max-width: var(--container-narrow); }
  .p-nova-safra__anos .index__row { grid-template-columns: 5.5rem 1fr; align-items: start; }
  .p-nova-safra__ano-n { font-size: 2rem; letter-spacing: -0.02em; color: var(--c-branco); }
  .p-nova-safra__eventos { display: grid; gap: 0.35rem; padding-top: 0.35rem; }
  .p-nova-safra__evento { font-family: var(--font-display); font-size: var(--fs-1); line-height: 1.25; }
  .p-nova-safra__nota { font-family: var(--font-body); font-size: var(--fs--1); color: var(--fg-3); margin-left: 0.35em; }
  @media (min-width: 48rem) {
    .p-nova-safra__anos .index__row { grid-template-columns: 8rem 1fr; }
    .p-nova-safra__ano-n { font-size: 2.75rem; }
    .p-nova-safra__eventos { padding-top: 0.6rem; }
  }
  /* no desktop a banda escura enche a largura: duas colunas, lidas de cima para baixo (--linhas vem do template) */
  @media (min-width: 64rem) {
    .p-nova-safra__anos { max-width: none; display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--linhas, 3), auto); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-8); }
  }

  /* redes: bloco centrado e curto */
  .p-nova-safra__redes { text-align: center; display: grid; gap: var(--s-4); justify-items: center; }
  .p-nova-safra__redes .lead { max-width: 44ch; }
  .p-nova-safra__redes-acoes { justify-content: center; margin-top: var(--s-2); }
}

/* ===== pages/ramo-o-que-cremos.css ===== */
@layer pages {
  /* a primeira declaração alinha com o topo do índice; as demais guardam o respiro do .statement */
  .p-o-que-cremos__prosa .statement:first-child { margin-top: 0; }
  /* o ritmo de .prose só alcança filhos diretos; dentro do .statement os parágrafos precisam do mesmo 1em */
  .p-o-que-cremos__prosa .statement > p + p { margin-top: 1em; }
  /* ao saltar pelo índice, o título para com folga abaixo do header fixo */
  .p-o-que-cremos__prosa .statement h2 { scroll-margin-block-start: calc(var(--header-h) + 1.5rem); }
  .p-o-que-cremos__relacionados { grid-template-columns: 1fr; }
  @media (max-width: 63.99rem) {
    /* abaixo de 64rem o índice deixa de ser fixo e vira a única forma de pular entre quinze declarações: alvo de toque de 44px e um respiro extra antes da prosa, para a troca de navegação para leitura ficar clara */
    .p-o-que-cremos .toc { margin-bottom: var(--s-6); }
    .p-o-que-cremos .toc a { padding-block: 0.8em; }
  }
  @media (min-width: 48rem) { .p-o-que-cremos__relacionados { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64rem) {
    /* no desktop o header ganha a barra superior (2rem) que --header-h não inclui: sem isto o índice fixo e o alvo das âncoras entram por baixo dele */
    .p-o-que-cremos .toc { top: calc(var(--header-h) + 2rem + 1.5rem); max-height: calc(100vh - var(--header-h) - 2rem - 3rem); }
    .p-o-que-cremos__prosa .statement h2 { scroll-margin-block-start: calc(var(--header-h) + 2rem + 1.5rem); }
  }
}

/* ===== pages/ramo-quem-somos.css ===== */
@layer pages {
  /* cabeçalho: título e descrição à esquerda, versículo à direita no desktop */
  .p-quem-somos__head { display: grid; gap: var(--s-6); }
  .p-quem-somos__intro-2 { margin-top: var(--s-4); color: var(--fg-2); max-width: var(--measure-narrow); }
  .p-quem-somos__verso { border-left: 3px solid var(--highlight-2); padding-left: var(--s-5); }
  @media (min-width: 64rem) {
    .p-quem-somos__head { grid-template-columns: 7fr 5fr; gap: var(--s-9); align-items: end; }
    .p-quem-somos__verso { justify-self: end; margin-bottom: 0.4rem; }
  }

  /* a foto do casal é quadrada; no split ela não precisa ocupar a coluna inteira.
     Alinhado ao topo: centralizar empurrava o título para longe do cabeçalho da página. */
  .p-quem-somos .split { align-items: start; }
  .p-quem-somos .split__media { max-width: 28rem; margin-inline: auto; }

  /* história: o ano em serifa grande é o eixo; anos não são passos, por isso não é .numbered */
  .p-quem-somos__historia { border-top: 1px solid var(--line-strong); }
  .p-quem-somos__marco { display: grid; gap: var(--s-4); padding-block: var(--s-6); border-bottom: 1px solid var(--line); }
  .p-quem-somos__ano { display: flex; flex-direction: column; gap: 0.3rem; font-family: var(--font-display); font-size: var(--fs-3); line-height: 0.95; letter-spacing: -0.02em; color: var(--accent); }
  .p-quem-somos__ano small { font-family: var(--font-body); font-size: var(--fs--1); font-weight: 500; letter-spacing: 0; color: var(--fg-3); font-variation-settings: normal; }
  .p-quem-somos__marco-item { max-width: var(--measure); }
  .p-quem-somos__marco-item + .p-quem-somos__marco-item { margin-top: var(--s-5); }
  .p-quem-somos__marco-titulo { font-size: var(--fs-2); }
  .p-quem-somos__marco-item p { margin-top: var(--s-2); color: var(--fg-2); }
  .p-quem-somos__marco-link a { font-weight: 500; }
  @media (min-width: 48rem) {
    .p-quem-somos__marco { grid-template-columns: 9rem minmax(0, 1fr); column-gap: var(--s-7); row-gap: 0; padding-block: var(--s-7); }
    .p-quem-somos__marco-item { grid-column: 2; }
  }

  /* como nos movemos: manifesto em colunas na banda escura */
  .p-quem-somos__mover { display: grid; gap: var(--s-5); }
  .p-quem-somos__mover li { border-top: 1px solid var(--line-strong); padding-top: var(--s-4); }
  .p-quem-somos__mover-chave { font-size: var(--fs-2); color: var(--highlight); }
  .p-quem-somos__mover p { margin-top: var(--s-2); color: var(--fg-2); }
  @media (min-width: 48rem) { .p-quem-somos__mover { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-8); } }
  @media (min-width: 64rem) { .p-quem-somos__mover { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* biografias: duas colunas no desktop. Não há retrato individual: o avatar é um recorte da foto
     noturna do casal, a única em que os dois rostos estão afastados o bastante para caber sozinhos no círculo. */
  .p-quem-somos__bios { display: grid; gap: var(--s-8); }
  .p-quem-somos__bio .person { margin-bottom: var(--s-5); align-items: center; }
  .p-quem-somos__avatar { width: 5rem; height: 5rem; border-radius: 50%; overflow: hidden; background: var(--surface); }
  .p-quem-somos__avatar img { max-width: none; border-radius: 0; object-fit: cover; }
  .p-quem-somos__avatar--adriano img { width: 240%; height: 240%; translate: -41.7% -13%; }
  .p-quem-somos__avatar--daniela img { width: 220%; height: 220%; translate: 0 -39%; }
  @media (min-width: 48rem) { .p-quem-somos__bios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) var(--s-9); align-items: start; } }

  /* fecho: três cards planos com régua em cima */
  .p-quem-somos__fecho { grid-template-columns: 1fr; }
  .p-quem-somos__fecho .card { border-top: 1px solid var(--line-strong); }
  .p-quem-somos__fecho .card__body { padding: var(--s-5) 0 0; }
  @media (min-width: 48rem) { .p-quem-somos__fecho { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7); } }
}

/* ===== pages/ramo-rede-5x7.css ===== */
@layer pages {
  /* Cabeçalho sem o antigo logo lateral: texto ocupa uma coluna única e mantém boa medida de leitura. */
  .p-rede-5x7__head { max-width: 58rem; }
  .p-rede-5x7__intro { margin-top: var(--s-4); }
  /* o versículo é o gesto da página: slab leve, medida mais larga que a do .quote padrão, régua em verde-limão */
  .p-rede-5x7__verso { margin-top: var(--s-6); max-width: 40ch; padding-left: var(--s-5); border-left: 3px solid var(--highlight-2); }
  .p-rede-5x7__verso cite { color: var(--fg-2); }

  /* visão e valores: dois blocos planos com régua em cima; o título é rótulo e a frase é o destaque em slab leve */
  .p-rede-5x7__lemas { grid-template-columns: 1fr; gap: var(--s-6); }
  .p-rede-5x7__lema { border-top: 1px solid var(--line-strong); }
  .p-rede-5x7__lema .card__body { padding: var(--s-5) 0 0; gap: var(--s-3); }
  .p-rede-5x7__lema-titulo { font-size: var(--fs-1); color: var(--fg-2); }
  .p-rede-5x7__lema-texto { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-2); line-height: 1.3; letter-spacing: -0.01em; max-width: 26ch; text-wrap: balance; }
  @media (min-width: 48rem) { .p-rede-5x7__lemas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); } }

  /* principais operações: título à esquerda, lista com régua à direita; cinco itens curtos ganham corpo com uma linha por item */
  .p-rede-5x7__operacoes { display: grid; gap: var(--s-6); align-items: start; }
  .p-rede-5x7__operacoes-head > * + * { margin-top: var(--s-4); }
  .p-rede-5x7__lista { gap: 0; }
  .p-rede-5x7__lista li { padding-block: var(--s-4); border-top: 1px solid var(--line-strong); font-size: var(--fs-1); font-weight: 500; gap: var(--s-4); }
  .p-rede-5x7__lista li:last-child { border-bottom: 1px solid var(--line-strong); }
  .p-rede-5x7__lista .icon { margin-top: 0.3em; }
  @media (min-width: 48rem) { .p-rede-5x7__operacoes { grid-template-columns: 5fr 7fr; gap: var(--s-8); } }

  /* quem lidera: o bloco de pessoa respira mais que o padrão do split */
  .p-rede-5x7__lideres .person { margin-top: var(--s-5); }

  /* quem pode participar + passos: duas colunas alinhadas pelo topo, sem a antiga foto. */
  .p-rede-5x7__entrada { display: grid; gap: var(--s-8); align-items: start; }
  .p-rede-5x7__quem > * + *, .p-rede-5x7__passos > * + * { margin-top: var(--s-4); }
  .p-rede-5x7__quem, .p-rede-5x7__passos { align-self: start; }
  .p-rede-5x7__numerados { margin-top: var(--s-6); gap: 0; }
  .p-rede-5x7__numerados > li { padding-block: var(--s-5); border-top: 1px solid var(--line); align-items: baseline; }
  .p-rede-5x7__numerados > li:last-child { padding-bottom: 0; }
  .p-rede-5x7__passo { font-size: var(--fs-1); text-wrap: pretty; }
  .p-rede-5x7__envio > * + * { margin-top: var(--s-4); }
  @media (min-width: 64rem) {
    .p-rede-5x7__entrada { grid-template-columns: 5fr 7fr; gap: var(--s-9); }
  }
}

/* ===== pages/ramo-replays.css ===== */
/* Ao vivo e replays (/replays/) e Ao vivo (/ao-vivo/): só layout destas páginas. */
@layer pages {
  /* ---------- /replays/: cabeçalho respira antes da banda escura ---------- */
  .p-replays .page-head { padding-bottom: var(--section-s); }

  /* ---------- /replays/: banda "Ao vivo" em duas colunas ---------- */
  .p-replays__live { display: grid; gap: var(--s-7); align-items: start; }
  .p-replays__live-body > * + * { margin-top: var(--s-5); }
  .p-replays__live-media > * + * { margin-top: var(--s-3); }
  /* o ícone fica fora do parágrafo porque o JS troca o texto inteiro dele pela próxima transmissão;
     o mesmo bloco aparece nas duas páginas, cada uma com o prefixo dela */
  .p-replays__next { display: flex; gap: 0.6em; align-items: flex-start; font-weight: 500; color: var(--fg); }
  .p-replays__next .icon { color: var(--highlight); margin-top: 0.2em; }
  .p-replays__live-caption { text-wrap: pretty; }
  @media (min-width: 48rem) {
    .p-replays__live { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); }
  }

  /* ---------- /replays/: índice de vídeos ---------- */
  /* No celular, a data fica na coluna estreita e miniatura + título empilham à direita,
     como na agenda. O grid padrão de .index--videos jogaria o corpo na coluna de 8rem.
     PENDÊNCIA (dono do design system): isto é defeito de componente, não desta página. Promover para
     components.css como ".index--videos .index__row--thumb" e apagar este bloco. */
  @media (max-width: 47.99rem) {
    .p-replays .index--videos .index__row--thumb { grid-template-columns: 3.5rem minmax(0, 1fr); grid-template-areas: "date thumb" "date body" "date action"; column-gap: var(--s-4); }
    .p-replays .index--videos .index__date { grid-area: date; }
    .p-replays .index--videos .index__thumb { grid-area: thumb; }
    .p-replays .index--videos .index__body { grid-area: body; }
    .p-replays .index--videos .index__action { grid-area: action; }
    .p-replays .index--videos .index__day { font-size: 2rem; }
  }
  .p-replays .index__group-title { padding-top: var(--s-7); }
  .p-replays__group:first-child .index__group-title { padding-top: var(--s-5); }
  .p-replays__callout { margin-top: var(--s-8); }
  .p-replays__callout-actions, .p-ao-vivo__callout-actions { margin-top: var(--s-4); }

  /* ---------- /ao-vivo/ ---------- */
  .p-ao-vivo__player { max-width: 64rem; margin-inline: auto; box-shadow: var(--shadow-2); }
  .p-ao-vivo__note { max-width: 64rem; margin: var(--s-4) auto 0; }
  .p-ao-vivo__grid { display: grid; gap: var(--s-7); align-items: start; }
  .p-ao-vivo__schedule > * + * { margin-top: var(--s-5); }
  .p-ao-vivo__aside { display: grid; gap: var(--s-4); }
  @media (min-width: 64rem) {
    .p-ao-vivo__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-9); }
    .p-ao-vivo__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
  }
}

/* ===== pages/ramo-styleguide.css ===== */
@layer pages {
  .p-sg__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--s-3); }
  .p-sg__swatch { aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--sw); display: flex; align-items: flex-end; padding: var(--s-2); font-size: var(--fs--2); border: 1px solid var(--line); }
  .p-sg__swatch span { background: color-mix(in srgb, var(--c-branco) 85%, transparent); color: var(--c-preto); padding: 0.1em 0.5em; border-radius: var(--radius-s); font-family: ui-monospace, monospace; }
}