/* =========================================================
   Design tokens — docs/DESIGN-SYSTEM.md
   ========================================================= */
:root {
  /* Paleta v4 (definida pela Julia): vermelho + verde + bege + branco, sem outras cores de destaque */
  --color-red: #931A1B;
  --color-red-hover: #7A1616;
  --color-green: #0F502E;
  --color-green-hover: #0B3D23;
  --color-beige: #F3E8D8;
  --color-beige-light: #FAF6EF;
  --color-black: #111111;
  --color-white: #FFFFFF;
  --color-text: #1F1F1F;
  --color-text-muted: #6B625B;
  --color-border: #E8DED1;
  --color-success: #16A34A;
  --color-alert: #F59E0B;
  --color-error: #DC2626;

  /* Aliases — mantem compatibilidade com o restante do CSS (nomes antigos) */
  --color-blue: var(--color-green);
  --color-blue-hover: var(--color-green-hover);
  --color-bg: var(--color-beige);
  --color-gray-light: var(--color-beige-light);
  --color-text-secondary: var(--color-text-muted);

  /* Tipografia v5: Satoshi (titulos e corpo, fonte da campanha). Auto-hospedada
     em assets/fonts/, sem CDN. */
  --font-heading: "Satoshi-Variable", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Satoshi-Variable", -apple-system, BlinkMacSystemFont, sans-serif;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 128px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-card: 20px;
  --radius-pill: 999px;

  /* Sombra em camadas v2 (era flat na v1) */
  --shadow-soft:
    0 1px 2px rgba(17, 24, 39, 0.04),
    0 8px 24px rgba(17, 24, 39, 0.06),
    0 24px 48px rgba(17, 24, 39, 0.05);
  --shadow-softer:
    0 1px 2px rgba(17, 24, 39, 0.03),
    0 4px 12px rgba(17, 24, 39, 0.05);

  --container: 1440px;
  --content: 1280px;

  /* Gutter: inset horizontal unico usado por .container e .content-width */
  --gutter: 64px;

  --navbar-height: 88px;
}

@media (max-width: 1024px) { :root { --gutter: 40px; } }
@media (max-width: 480px)  { :root { --gutter: 20px; } }

/* =========================================================
   Fontes da campanha (auto-hospedadas, ver docs/Fontes)
   ========================================================= */
@font-face {
  font-family: "Satoshi-Variable";
  src: url("../fonts/satoshi/Satoshi-Variable.woff2") format("woff2"),
       url("../fonts/satoshi/Satoshi-Variable.woff") format("woff");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi-Variable";
  src: url("../fonts/satoshi/Satoshi-VariableItalic.woff2") format("woff2"),
       url("../fonts/satoshi/Satoshi-VariableItalic.woff") format("woff");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

/* =========================================================
   Reset
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  max-width: 100vw;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  max-width: 100vw;
  position: relative;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.035em;
  margin: 0 0 var(--space-2);
}
h3, h4 { font-weight: 700; letter-spacing: -0.02em; }
.text-hero { letter-spacing: -0.045em; }
p { margin: 0 0 var(--space-2); color: var(--color-text); }
button { font-family: inherit; }

/* Skip-link (WCAG 2.4.1) — invisivel ate' receber foco por teclado (Tab). */
.skip-link {
  position: absolute; top: -100px; left: var(--space-2); z-index: 999;
  background: var(--color-red); color: var(--color-white);
  padding: 12px 20px; border-radius: var(--radius-sm);
  font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.03em;
  transition: top 150ms ease;
}
.skip-link:focus { top: var(--space-2); outline: 3px solid var(--color-white); outline-offset: 2px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.content-width { max-width: var(--content); margin: 0 auto; padding: 0 var(--gutter); }
.content-width--wide { max-width: 1440px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =========================================================
   Type scale
   ========================================================= */
.text-hero { font-size: 72px; }
h1, .h1 { font-size: 56px; }
h2, .h2 { font-size: 44px; }
h3, .h3 { font-size: 36px; }
h4, .h4 { font-size: 28px; }
.text-lg { font-size: 18px; }
.text-sm { font-size: 16px; }
.caption { font-size: 14px; color: var(--color-text-secondary); }
/* "Etiqueta" tipo cartaz de campanha — bloco solido, nao so texto colorido. */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-red);
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  display: inline-block;
}

@media (max-width: 1280px) { .text-hero { font-size: 64px; } }
@media (max-width: 1024px) { .text-hero { font-size: 56px; } h1, .h1 { font-size: 44px; } h2, .h2 { font-size: 36px; } }
@media (max-width: 768px)  { .text-hero { font-size: 48px; } }
@media (max-width: 480px)  { .text-hero { font-size: 36px; } h1, .h1 { font-size: 32px; } h2, .h2 { font-size: 28px; } h3, .h3 { font-size: 24px; } }

/* =========================================================
   Icons
   ========================================================= */
.icon { width: 22px; height: 22px; }
.icon-lg { width: 28px; height: 28px; }
.icon-sm { width: 18px; height: 18px; }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 16px 32px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
  white-space: nowrap;
}
.btn:hover { transform: scale(1.02); }
.btn-primary { background: var(--color-red); color: var(--color-white); }
.btn-primary:hover { background: var(--color-red-hover); }
.btn-secondary { background: transparent; color: var(--color-red); border-color: var(--color-red); }
.btn-secondary:hover { background: var(--color-red); color: var(--color-white); }
.btn-on-blue { background: var(--color-white); color: var(--color-blue); }
.btn-on-blue:hover { background: var(--color-gray-light); }
.btn-block { width: 100%; justify-content: center; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-red);
  border-bottom: 2px solid transparent;
  transition: border-color 150ms ease;
}
.text-link:hover { border-color: var(--color-red); }
/* Quando e' <button> (ex: toggle "leia mais"), zera o cromo nativo do
   navegador — sem isso sobra borda/fundo padrao por cima do estilo acima
   (mesmo bug ja visto no botao "Ver mes inteiro" da agenda). */
button.text-link { background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; }

.about-bleed-full { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 400ms ease, opacity 300ms ease; }
/* overflow:visible (nao so max-height maior) e' necessario aqui: um
   ancestral com overflow:hidden quebra `position:sticky` dos descendentes
   (o ano "grudado" da timeline, ver .timeline2-row-sticky mais abaixo) —
   ate' com max-height generosa, overflow:hidden continuava recortando a
   area em que o sticky pode colar. */
.about-bleed-full[data-open] { max-height: 6000px; opacity: 1; margin-bottom: var(--space-2); overflow: visible; }
/* Seta comeca apontando pra baixo ("abrir" o painel) e vira pra cima
   ("fechar") quando expandido — padrao clássico de accordion. */
[data-about-toggle-icon] { display: inline-flex; transition: transform 200ms ease; transform: rotate(90deg); }
[data-about-toggle][aria-expanded="true"] [data-about-toggle-icon] { transform: rotate(-90deg); }

/* =========================================================
   Header / Nav
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--navbar-height);
  display: flex;
  align-items: center;
  background: rgba(250, 237, 205, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color 250ms ease, border-color 250ms ease, backdrop-filter 250ms ease, box-shadow 250ms ease;
}
.site-header.is-scrolled {
  background: rgba(250, 237, 205, 0.97);
  backdrop-filter: blur(20px);
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-softer);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; }
.brand { display: flex; align-items: center; gap: var(--space-2); }
.brand-logo { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.brand-logo img, .brand-logo svg { height: 44px; width: auto; display: block; }
/* "Nunes" (cls-2) fica quase invisivel no verde do rodape — vira bege ali. */
.brand-logo--footer .cls-1 { fill: #911C33; }
.brand-logo--footer .cls-2 { fill: var(--color-beige-light); }
.brand-tagline { font-size: 12px; color: var(--color-text-secondary); max-width: 220px; line-height: 1.3; }
.main-nav { display: flex; align-items: center; gap: var(--space-3); }
.main-nav a {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  padding: var(--space-1) 0;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover, .main-nav a.active { color: var(--color-red); border-color: var(--color-red); }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--color-text); }

@media (max-width: 1024px) {
  /* Dropdown que abre pra baixo, colado no header — nao usa position:fixed
     (o backdrop-filter do .site-header cria "containing block" pra
     descendentes fixed em alguns navegadores e quebrava o posicionamento). */
  .main-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--color-bg); border-bottom: 1px solid var(--color-border);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0 var(--gutter);
    max-height: 0; overflow: hidden;
    transition: max-height 280ms ease, padding 280ms ease;
    box-shadow: var(--shadow-softer);
  }
  .main-nav.is-open { max-height: 60vh; overflow-y: auto; padding: var(--space-2) var(--gutter) var(--space-3); }
  .main-nav a { padding: 14px 0; border-bottom: 1px solid var(--color-border); width: 100%; }
  .main-nav a:last-child { border-bottom: none; }
  .nav-toggle { display: block; }
}

/* =========================================================
   Hero — foto de fundo full-bleed
   ========================================================= */
.hero {
  position: relative;
  z-index: 0; /* cria stacking context proprio — sem isso o z-index:-1 da
                 foto de fundo escapa do .hero e fica atras do body inteiro */
  /* A foto e' uma arte pronta (texto/faixa desenhados nela), nao uma foto
     solta pra recortar — a secao segue a MESMA proporcao da arte
     (3515x1475 no desktop), entao "cover" nunca precisa cortar nem sobra
     tarja vazia dos lados: a caixa e a imagem sempre tem a mesma forma. */
  aspect-ratio: 2400 / 1007;
  overflow: hidden;
}
.hero-bg-layer {
  position: absolute; inset: -4% 0; z-index: -1;
  display: block;
}
.hero-bg-layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(17,17,17,0.82) 0%, rgba(17,17,17,0.55) 45%, rgba(17,17,17,0.15) 75%);
  z-index: 0;
}
/* Hero so com foto (sem texto por cima) — sem degrade escurecendo a imagem. */
.hero--image-only::before { display: none; }
.hero-grid { position: relative; z-index: 1; width: 100%; }
.hero-copy { max-width: 640px; }
.hero-tag {
  display: inline-block; background: var(--color-red); color: var(--color-white);
  font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em;
  padding: 8px 18px; border-radius: var(--radius-sm); margin-bottom: var(--space-2);
}
.hero-copy h1,
.hero-copy p.text-lg { color: var(--color-white); }
.hero-copy p.text-lg { color: rgba(255,255,255,0.82); max-width: 46ch; }
.hero-ctas { display: flex; gap: var(--space-2); margin: var(--space-3) 0; flex-wrap: wrap; }
.hero-social { display: flex; gap: var(--space-2); align-items: center; }
.hero-social span { font-size: 13px; color: rgba(255,255,255,0.7); margin-right: var(--space-1); }
.hero-social a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; color: var(--color-white); }
.hero-social a:hover { border-color: var(--color-red); background: var(--color-red); }
@media (max-width: 768px) {
  /* Foto mobile e' outra arte, proporcao muda toda vez que a Julia troca a
     imagem pelo admin — uma proporcao fixa no CSS (a da imagem antiga)
     cortava/sobrava barra quando a nova nao batia. site.js mede a
     proporcao REAL da imagem carregada e aplica em .hero via JS
     (style.aspectRatio inline, sobrescreve o "auto" daqui) — a caixa
     sempre casa exatamente com a imagem, "cover" nunca precisa cortar
     alem da folga pequena de baixo, que existe so pra caber o parallax. */
  .hero { aspect-ratio: auto; }
  /* Folga menor que o desktop (-4%) — movimento mais sutil, evita o
     efeito de "zoom" que a Julia pediu pra tirar antes. */
  .hero-bg-layer { inset: -1.5% 0; }
}

/* Faixa do divisor (SVG proprio da Julia, mesmo usado entre Causas/Projetos)
   repetida (estatica, sem animacao) na borda inferior do hero — decorativo,
   nao repete a arte ja desenhada na foto de fundo. */
.hero-divider-strip {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  overflow: hidden; line-height: 0; pointer-events: none;
}
.hero-divider-track { display: flex; width: max-content; }
.hero-divider-track img { height: 84px; width: auto; display: block; flex-shrink: 0; }
@media (max-width: 768px) {
  .hero-divider-track img { height: 48px; }
}

/* =========================================================
   Sections generic
   ========================================================= */
.section { padding: var(--space-10) 0; position: relative; }
.section-head { margin-bottom: var(--space-4); position: relative; }
.section-head.center { text-align: center; }
section h2 { text-transform: uppercase; font-weight: 800; }
/* Linha de introducao curta abaixo do titulo — compartilhada por
   Projetos/Noticias/Agenda. */
.section-intro { max-width: 640px; margin: var(--space-1) auto 0; color: var(--color-text-muted); }

/* =========================================================
   Formas decorativas — assinatura visual do site (triangulo + estrela
   perto de toda etiqueta "eyebrow", sutil, cor da paleta). Pseudo-elemento
   pra nao precisar editar cada partial — aparece em qualquer .eyebrow
   automaticamente (About, Numeros, Projetos, Noticias, Presenca...).
   Sem interacao (pointer-events none), decorativo puro.
   ========================================================= */
.eyebrow { position: relative; }
.eyebrow::before,
.eyebrow::after {
  content: '';
  position: absolute;
  pointer-events: none;
  opacity: 0.9;
}
/* Estrela de 4 pontas — logo antes da etiqueta */
.eyebrow::before {
  top: 50%; left: -16px;
  width: 9px; height: 9px;
  margin-top: -4.5px;
  background: var(--color-red);
  clip-path: polygon(50% 0%, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0% 50%, 39% 38%);
}
/* Triangulo pequeno — logo depois */
.eyebrow::after {
  top: 50%; right: -14px;
  width: 0; height: 0;
  margin-top: -4px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid var(--color-green);
  transform: rotate(20deg);
}
/* Dentro de blocos escuros (Presenca/verde), a estrela vermelha destoa
   pouco do fundo — clareia pro bege da paleta. */
.presence-copy .eyebrow::before,
.community-layout .eyebrow::before,
.quote-content .eyebrow::before { background: var(--color-beige-light); }

/* Frase final nao usa .eyebrow — acento proprio perto do texto principal
   (Manifesto tem o proprio estilo, ver mais abaixo). Comunidade e'
   centralizada (text-align:center) — o mesmo triangulo "de canto"
   ficava desalinhado, flutuando solto na borda esquerda do bloco em vez
   de perto do texto (virava mancha esquisita, "troncha"). Comunidade
   ganha o acento proprio, centralizado, mais abaixo. */
.quote-content .quote-text { position: relative; }
.quote-content .quote-text::before {
  content: ''; position: absolute; top: -18px; left: -4px;
  width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-bottom: 12px solid var(--color-beige-light);
  transform: rotate(-16deg); opacity: 0.85;
}

/* Textura sutil de pontilhado no fundo da pagina — quase imperceptivel,
   da uma sensacao de "tecido"/papel em vez de cor solida chapada. */
body {
  background-image: radial-gradient(rgba(147, 26, 27, 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
}

.empty-section-notice {
    border: 1px dashed var(--color-border, #ccc);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-4, 24px);
    text-align: center;
    color: var(--color-text-muted, #777);
    font-size: 14px;
}

/* About */
/* Faixa-manifesto: redesenho baseado em referencia visual da Julia — fundo
   claro, linha fina no topo, kicker numerado, estrela grande, titulo
   grande em duas cores, cacto decorativo no canto. */
.manifesto-strip {
  background: var(--color-beige-light); padding: 88px 0 72px;
  position: relative; overflow: hidden;
  border-top: 1px solid var(--color-border);
}
.manifesto-strip .content-width { max-width: 1100px; position: relative; }
/* Estrela grande — mesma forma de 4 pontas do acento pequeno do .eyebrow,
   so que em escala bem maior, como elemento visual proprio. */
.manifesto-spark {
  display: block; width: 64px; height: 64px; margin-bottom: var(--space-4);
  background: var(--color-red);
  clip-path: polygon(50% 0%, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0% 50%, 39% 38%);
}
.manifesto-heading {
  font-size: 56px; line-height: 1.08; max-width: 14ch; margin: 0;
}
.manifesto-heading .is-green { color: var(--color-green); }
.manifesto-heading .is-red { color: var(--color-red); }
@media (max-width: 768px) {
  .manifesto-strip { padding: 56px 0; }
  .manifesto-spark { width: 44px; height: 44px; }
  .manifesto-heading { font-size: 34px; max-width: none; }
}

.about-bleed { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 560px; }
.about-bleed-photo { position: relative; overflow: hidden; background: var(--color-gray-light); min-height: 360px; }
/* --divider-w e' medida de verdade em JS a partir da largura RENDERIZADA
   da faixa (site.js) — nao um numero fixo chutado (que nunca bate com a
   proporcao real do SVG pra toda altura possivel da secao, sempre cortava
   um pouco). 112px aqui e' so' o valor antes do JS rodar (1o paint). */
.about-bleed-photo img { position: absolute; top: 0; left: var(--divider-w, 112px); width: calc(100% - var(--divider-w, 112px)); height: 116%; object-fit: cover; object-position: top center; }
/* Faixa vertical do divisor (SVG proprio da Julia) — aspect-ratio (mesma
   proporcao do viewBox, 435.59x2175.15) faz a LARGURA vir certa pra
   qualquer altura, sem cortar o desenho; site.js le esse valor
   renderizado e ajusta a foto acima pra casar exatamente. */
.about-divider-strip {
  position: absolute; top: 0; left: 0; bottom: 0; z-index: 1;
  aspect-ratio: 435.59 / 2175.15;
  overflow: hidden; pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.about-bleed-copy { padding: var(--space-8) var(--gutter); display: flex; flex-direction: column; justify-content: center; position: relative; }
/* Flex-column estica os filhos pro cross-axis (largura) por padrao — bom
   pra paragrafo/titulo, ruim pra tag e botao, que viravam blocos de ponta
   a ponta em vez de ficar do tamanho do proprio conteudo. */
.about-bleed-copy > .eyebrow,
.about-bleed-copy > .text-link { align-self: flex-start; }
@media (max-width: 900px) {
  .about-bleed { grid-template-columns: 1fr; min-height: 0; }
  .about-bleed-photo { min-height: 380px; }
  .about-bleed-copy { padding: var(--space-6) var(--space-4); }
}
@media (max-width: 767px) {
  /* object-fit:cover + aspect-ratio calculado via JS + buffer pro
     translateY se mostrou fragil entre navegadores (Julia viu foto
     cortada/estreita num iPhone real mesmo depois de ajustes). Solucao
     mais robusta: imagem no tamanho natural (100% de largura garantido,
     nunca corta — nao depende de JS medindo nada), e o movimento vem de
     um zoom sutil (scale, ver animations.js) em vez de deslizar a foto —
     zoom nunca abre vao nem precisa cortar mais que o proprio zoom (que
     e' contido pelo overflow:hidden aqui). */
  .about-bleed-photo { aspect-ratio: auto; min-height: 0; overflow: hidden; }
  .about-bleed-photo img { position: static; width: calc(100% - var(--divider-w, 80px)); margin-left: var(--divider-w, 80px); height: auto; object-fit: unset; }
  .about-bleed-copy { padding: var(--space-6) 20px; }
}

/* Timeline de trajetoria — dentro do "Conheca minha trajetoria" (about.php),
   configuravel em admin/timeline (aba "Timeline" de Configuracao). Ano
   "gruda" (position:sticky) enquanto a secao rola, linha vertical com
   gradiente (vermelho -> verde, as duas cores da marca) preenche
   conforme o scroll (GSAP ScrollTrigger scrub, ver animations.js), ano
   fica em destaque quando a linha do tempo daquele marco esta no centro
   da tela. Precisa de `.about-bleed-full[data-open] { overflow: visible }`
   (ver acima) — sticky nao funciona dentro de ancestral com overflow:hidden. */
.timeline2 { margin-top: var(--space-3); }
.timeline2 .eyebrow { margin-bottom: var(--space-3); }

.timeline2-track { position: relative; padding-left: 88px; }
.timeline2-line {
  position: absolute; top: 4px; bottom: 4px; left: 33px; width: 2px;
  background: var(--color-border); border-radius: 2px; overflow: hidden;
}
.timeline2-line-fill {
  position: absolute; top: 0; left: 0; width: 100%; height: 0%;
  background: linear-gradient(180deg, var(--color-red) 0%, var(--color-green) 100%);
  border-radius: 2px;
}

.timeline2-row { position: relative; padding-bottom: var(--space-6); }
.timeline2-row:last-child { padding-bottom: 0; }

.timeline2-row-sticky {
  position: sticky; top: 120px; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  margin-left: -88px; width: 88px; height: 32px;
}
.timeline2-dot {
  flex-shrink: 0; width: 12px; height: 12px; margin-left: 27px; border-radius: 50%;
  background: var(--color-beige-light); border: 2px solid var(--color-border);
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.timeline2-row.is-active .timeline2-dot {
  background: var(--color-red); border-color: var(--color-red); transform: scale(1.15);
}
.timeline2-year {
  font-family: var(--font-heading); font-weight: 800; font-size: 22px; letter-spacing: -0.02em;
  color: var(--color-text-muted); transition: color 200ms ease; white-space: nowrap;
}
.timeline2-row.is-active .timeline2-year { color: var(--color-red); }

.timeline2-row-body { padding-top: 2px; }
.timeline2-date-mobile {
  display: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-red); margin-bottom: 4px;
}
.timeline2-photo {
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-softer); aspect-ratio: 16/10; background: var(--color-beige);
}
.timeline2-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.timeline2-row:hover .timeline2-photo img { transform: scale(1.05); }

/* Mosaico de fotos por marco (media_relations, campo "gallery" — varias
   fotos por marco, configuravel em admin/timeline). 1 foto = card unico
   16:10 (igual antes); 2+ fotos = grid, cada celula quadrada. */
.timeline2-gallery {
  display: grid; gap: 4px; margin-bottom: var(--space-1);
  border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-softer);
}
.timeline2-gallery .timeline2-photo { border-radius: 0; box-shadow: none; }
.timeline2-gallery--1 { grid-template-columns: 1fr; }
.timeline2-gallery--2,
.timeline2-gallery--3,
.timeline2-gallery--4 { grid-template-columns: 1fr 1fr; }
.timeline2-gallery--2 .timeline2-photo,
.timeline2-gallery--3 .timeline2-photo,
.timeline2-gallery--4 .timeline2-photo { aspect-ratio: 1/1; }
.timeline2-title { font-size: 15px; margin: 0 0 2px; letter-spacing: -0.01em; }
.timeline2-desc { font-size: 13.5px; color: var(--color-text-muted); margin: 0; line-height: 1.55; }

@media (max-width: 640px) {
  /* Sem espaco pra sticky + coluna de ano num celular estreito — ano vira
     um chip normal em cima de cada card, mesma linguagem de
     .timeline2-date-mobile (que so aparece aqui). */
  .timeline2-track { padding-left: 24px; }
  .timeline2-line { left: 3px; }
  .timeline2-row-sticky { display: none; }
  .timeline2-date-mobile { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .timeline2-row:hover .timeline2-photo img { transform: none; }
}

/* Divisor entre secoes (foto opcional, ver app/Views/site/partials/divider.php) */
.section-divider {
  height: 220px;
  background-size: cover;
  background-position: center;
  background-color: var(--color-gray-light);
}
@media (max-width: 768px) { .section-divider { height: 140px; } }

/* Divisor ilustrado entre Causas e Projetos (SVG proprio da Julia) — sem
   gutter, de ponta a ponta, mantendo a proporcao original da arte (sem
   cortar via background-size:cover). */
.section-image-divider { line-height: 0; overflow: hidden; background: var(--color-beige-light); }
.section-image-divider img { width: 100%; height: auto; display: block; }
@media (max-width: 767px) {
  /* Na largura do celular a arte (proporcao ~6:1) fica baixa demais pra
     ler os detalhes — trava uma altura maior e centraliza, cortando as
     pontas em vez de encolher tudo. */
  .section-image-divider { height: 130px; }
  .section-image-divider img { width: auto; height: 100%; max-width: none; margin: 0 auto; }
}

/* Cards */
.card { background: var(--color-bg); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-softer); }
.card-image { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; background: var(--color-gray-light); margin-bottom: var(--space-2); box-shadow: var(--shadow-softer); transition: transform 300ms ease, box-shadow 300ms ease; }
.card-image img { transition: opacity 400ms ease; }
.card-image.is-loading img { opacity: 0; }
.card-image.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-gray-light) 25%, #EDE1C4 37%, var(--color-gray-light) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .card-image.is-loading::after { animation: none; }
}

/* Projects + News */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.feature-card { display: flex; flex-direction: column; }
.feature-card strong { margin-top: var(--space-1); }
.feature-card .caption { margin-top: 2px; }
.feature-card:hover .card-image { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.news-featured .card-image { aspect-ratio: 16/10; }
.news-list-item { display: flex; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); transition: transform 200ms ease; }
.news-list-item:hover { transform: translateX(4px); }
.news-list-item .card-image { width: 96px; height: 72px; aspect-ratio: auto; flex-shrink: 0; margin-bottom: 0; }
.badge { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--color-red); color: var(--color-white); padding: 4px 10px; border-radius: var(--radius-sm); margin-bottom: var(--space-1); }
.section-cta-center { text-align: center; margin-top: var(--space-4); }
@media (max-width: 900px) { .two-col, .project-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .feature-card:hover .card-image, .news-list-item:hover { transform: none; } }

/* Numeros da atuacao — fundo branco, composicao horizontal, sem cards pesados */
.stats-section { background: var(--color-white); }
.stats-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.stat-block {
  flex: 1; min-width: 160px; text-align: center; padding: 0 var(--space-3);
  border-left: 1px solid var(--color-border);
}
.stat-block:first-child { border-left: none; }
.stat-block .stat-value { display: block; font-family: var(--font-heading); font-size: 40px; font-weight: 700; color: var(--color-red); line-height: 1.1; transition: transform 200ms ease; }
.stat-block:hover .stat-value { transform: scale(1.08); }
.stat-block .stat-label { display: block; margin-top: var(--space-1); font-size: 13px; color: var(--color-text-muted); }
@media (max-width: 767px) {
  .stats-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) 0; }
  .stat-block {
    border-left: none; border-top: 1px solid var(--color-border); padding: var(--space-3) var(--space-2) 0;
  }
  .stat-block:nth-child(1), .stat-block:nth-child(2) { border-top: none; }
  .stat-block:nth-child(odd) { border-right: 1px solid var(--color-border); }
  .stat-block .stat-value { font-size: 30px; }
  .stat-block .stat-label { font-size: 12px; }
}

/* Projetos e acoes — fundo bege, cards brancos, imagem predominante */
.projects-section { background: var(--color-beige); }
@media (max-width: 767px) {
  .projects-section { padding-bottom: 0; }
}
/* Full-bleed: foto cobre o card inteiro, texto sobreposto com gradiente
   escuro embaixo — mesma linguagem em todas as larguras (antes so existia
   no carrossel mobile, promovido pra base porque a Julia pediu o mesmo
   visual no grid de 3 colunas do desktop). */
.project-card {
  position: relative; border-radius: var(--radius-md); overflow: hidden;
  aspect-ratio: 4/5;
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.project-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.project-card .card-image {
  position: absolute; inset: 0; margin: 0; border-radius: 0; aspect-ratio: auto; height: 100%;
}
.project-card .card-image img { width: 100%; height: 100%; object-fit: cover; transition: opacity 400ms ease, transform 400ms ease; }
.project-card:hover .card-image img { transform: scale(1.05); }
.project-card-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: var(--space-4) var(--space-3);
  background: linear-gradient(0deg, rgba(17,17,17,0.85) 0%, rgba(17,17,17,0.5) 55%, transparent 100%);
}
.project-card-body h3, .project-card-body .caption { color: var(--color-white); }
.project-card-date { display: block; margin-bottom: 4px; color: var(--color-beige); font-weight: 600; }

@media (max-width: 767px) {
  /* Carrossel de tela cheia: cada projeto ocupa a secao inteira, sangrando
     ate a borda da tela. pan-x + scroll-snap-stop:always: arrasta e o card
     sempre para inteiro, nunca corta no meio. */
  .project-grid {
    display: flex; grid-template-columns: none; overflow-x: auto; gap: 0;
    scroll-snap-type: x mandatory; touch-action: pan-x;
    margin: 0 calc(-1 * var(--gutter)); padding: 0;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .project-grid::-webkit-scrollbar { display: none; }
  .project-card {
    flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
    aspect-ratio: auto; min-height: 78vh; border-radius: 0;
  }
}

/* Ultimas noticias — fundo branco, composicao editorial */
.news-section { background: var(--color-white); }
.news-editorial { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-4); align-items: start; }
@media (max-width: 900px) { .news-editorial { grid-template-columns: 1fr; } }

/* Comunidade — banda vermelha, CTA unico */
.community-section { background: var(--color-red); overflow: hidden; }
.community-section::before {
  content: ''; position: absolute; top: 0; left: -5%; width: 110%; height: 8px;
  background: var(--color-beige-light); transform: skewY(180deg); transform-origin: left top;
}
.community-layout { max-width: 640px; margin: 0 auto; text-align: center; position: relative; }
.community-section h2 { color: var(--color-white); }
/* Estrela centralizada acima do titulo — layout centralizado precisa de
   centralizacao de verdade, nao o mesmo canto usado nos blocos a esquerda. */
.community-layout::before {
  content: ''; position: absolute; top: -34px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 22px;
  background: var(--color-beige-light);
  clip-path: polygon(50% 0%, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0% 50%, 39% 38%);
  opacity: 0.85;
}
.community-section .text-lg { color: rgba(255,255,255,0.88); }
.btn-on-red { background: var(--color-white); color: var(--color-red); }
.btn-on-red:hover { background: var(--color-beige-light); }
@media (max-width: 767px) {
  .community-section { padding: 56px 0; }
  .community-layout .btn { margin-top: var(--space-1); }
}

/* "Ajude a caminhada" — ultima secao da home, metade foto / metade banda
   vermelha cortada na diagonal (clip-path, mesma linguagem "cortada" ja
   usada em .presence-copy-cta e nos cartoes de agenda). CTA abre o modal
   guiado (.volunteer-modal, ver mais abaixo). */
.caminhada-section {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  min-height: 560px; background: var(--color-red); overflow: hidden;
}
.caminhada-photo { position: relative; overflow: hidden; background: var(--color-beige); clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
.caminhada-photo img, .caminhada-photo .photo-placeholder { width: 100%; height: 100%; object-fit: cover; }
.caminhada-copy {
  position: relative; z-index: 1; margin-left: -7%;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: var(--space-8) var(--gutter) var(--space-8) calc(var(--gutter) + 7%);
}
.caminhada-copy .eyebrow { background: var(--color-beige-light); color: var(--color-red); }
.caminhada-copy h2 { color: var(--color-white); }
.caminhada-copy .btn { margin-top: var(--space-2); }
@media (max-width: 900px) {
  .caminhada-section { grid-template-columns: 1fr; min-height: 0; }
  .caminhada-photo { clip-path: none; aspect-ratio: 16/10; order: 2; }
  .caminhada-copy { margin-left: 0; padding: var(--space-6) var(--gutter); order: 1; }
}

/* Frase institucional — full-bleed: foto de fundo + frase grande por cima,
   selo redondo com a marca no canto (referencia passada pela Julia). */
.quote-section {
  position: relative; overflow: hidden;
  min-height: clamp(480px, 82vh, 860px);
  display: flex; align-items: center;
  background: var(--color-black);
}
.quote-section.section { min-height: 0; overflow: visible; background: var(--color-white); display: block; }
.quote-bg-layer {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
.quote-section::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(17,17,17,0.85) 0%, rgba(17,17,17,0.55) 45%, rgba(17,17,17,0.12) 75%);
}
.quote-content { position: relative; z-index: 2; max-width: 680px; padding: 0 var(--gutter); }
.quote-text {
  font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.03em;
  font-size: 52px; line-height: 1.15; color: var(--color-white); margin-bottom: var(--space-3);
}
.quote-highlight { color: var(--color-red); }
.quote-caption { font-size: 16px; color: rgba(255,255,255,0.75); max-width: 46ch; margin: 0; }
.quote-badge {
  position: absolute; z-index: 2; right: var(--gutter); bottom: var(--space-4);
  width: 92px; height: 92px; border-radius: 50%;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; padding: 14px;
  box-shadow: var(--shadow-soft);
}
.quote-badge img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 767px) {
  .quote-section { min-height: clamp(420px, 90vh, 620px); align-items: flex-end; padding-bottom: var(--space-8); }
  .quote-text { font-size: 30px; }
  .quote-caption { font-size: 14px; }
  .quote-badge { width: 68px; height: 68px; padding: 10px; right: var(--gutter); bottom: var(--space-2); }
}

/* Mapa de presenca (app/Views/site/partials/presence-map.php) */
.presence-section { overflow: visible; background: var(--color-green); padding: var(--space-8) 0; }
.presence-section .eyebrow { background: var(--color-beige-light); color: var(--color-green); }
.presence-section h2 { color: var(--color-white); }

/* Layout texto-a-esquerda + mapa-a-direita (referencia passada pela
   Julia) — antes o mapa ia full-bleed sozinho, titulo flutuando em cima. */
.presence-layout { display: grid; grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.8fr); gap: var(--space-6); align-items: center; }
.presence-copy-text { color: rgba(255,255,255,0.75); }
/* Mesma linguagem visual dos cartoes da agenda logo acima (canto cortado
   na diagonal, fundo bege, estrela no canto) — pra nao dar disparidade
   entre o CTA e a lista, pedido direto da Julia. */
.presence-copy-cta {
  position: relative;
  display: flex; align-items: center; gap: var(--space-1);
  width: fit-content; margin: var(--space-3) auto 0;
  background: var(--color-beige-light); color: var(--color-red);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
  border: none; padding: 14px 20px 12px 18px;
  font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer; box-shadow: var(--shadow-softer);
  transition: transform 150ms ease;
}
.presence-copy-cta:hover { transform: translateY(-2px); }
.presence-copy-cta::after {
  content: ''; position: absolute; top: 8px; right: 8px;
  width: 10px; height: 10px;
  background: var(--color-green);
  clip-path: polygon(50% 0%, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0% 50%, 39% 38%);
  opacity: 0.8;
}
.presence-map-wrap { position: relative; }
@media (max-width: 1024px) {
  .presence-layout { grid-template-columns: 1fr; }
}

.presence-shell { position: relative; }
/* Agenda só aparece dentro do modal de tela cheia — no modo normal da
   section e' so o mapa, largura toda. Mesmo bloco (.presence-movable) e'
   reaproveitado nos dois lugares (JS move ele pro modal e de volta), so a
   troca de layout via seletor de ancestral `.presence-modal-slot`. */
.presence-movable {
  position: relative; display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2); align-items: stretch;
}
.presence-modal-slot .presence-movable {
  grid-template-columns: minmax(0, 78fr) minmax(260px, 22fr);
}
.presence-agenda { display: none; }
.presence-modal-slot .presence-agenda { display: flex; }

.presence-map-col {
  position: relative; overflow: hidden;
  /* Era min-height:560px fixo — com o padding da section + titulo, passava
     da altura da tela e pedia 2 scrolls. Agora acompanha a viewport. */
  height: clamp(380px, 58vh, 520px);
  border-radius: var(--radius-lg);
}
/* No card normal (fora do modal) a altura em vh deixava muito vao verde
   vazio acima/abaixo do mapa no mobile — o SVG fica centralizado (nao
   esticado) dentro da caixa, entao uma caixa bem mais alta que a forma
   real do mapa (viewBox 1000x544) sobra espaco morto dos dois lados.
   Altura por proporcao real do mapa resolve. Seletor com ">" de proposito
   (nao so ".presence-map-wrap .presence-map-col") — quando o mapa vai pro
   modal de tela cheia, o JS move .presence-movable pra dentro de
   .presence-modal-slot, mas isso continua fisicamente dentro de
   .presence-map-wrap (o modal e' irmao do movable, os dois dentro do
   mesmo .presence-shell) — sem os ">", essa regra tambem pegava o mapa
   dentro do modal e espremia ele (bug: "mapa quebrado" na tela cheia). */
@media (max-width: 767px) {
  .presence-map-wrap > .presence-shell > .presence-movable > .presence-map-col { height: auto; aspect-ratio: 1000 / 544; }
}
/* Full-bleed dentro do modal de tela cheia — sem cantos arredondados. */
.presence-modal-slot .presence-map-col { border-radius: 0; }
/* touch-action:none so dentro do modal de tela cheia — fora dele o dedo
   precisa continuar rolando a pagina normalmente. */
.presence-modal-slot .presence-map-col { touch-action: none; }
.presence-svg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.presence-svg svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Dificulta salvar/arrastar o SVG do mapa (nao ha bloqueio 100% possivel no
   navegador, so' desestimula download casual — arquivo fonte tambem fica
   fora do webroot, ver writable/assets/alagoas-municipios.svg). */
.presence-svg svg, .presence-svg svg * { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }

.municipio {
  fill: var(--color-gray-light); stroke: var(--color-white); stroke-width: 1;
  cursor: pointer; transition: fill 150ms ease, opacity 150ms ease;
}
/* Mosaico colorido — 6 tons derivados da propria paleta do site (misturas
   de --color-green/--color-red/--color-beige com branco/preto via
   color-mix, nada de cor nova). Vermelho puro fica reservado pro
   hover/selecionado, pra nao confundir com o mosaico de base. */
.municipio.muni-c1 { fill: var(--color-green); }
.municipio.muni-c2 { fill: color-mix(in srgb, var(--color-green) 55%, white); }
.municipio.muni-c3 { fill: var(--color-beige); }
.municipio.muni-c4 { fill: color-mix(in srgb, var(--color-green) 78%, black); }
.municipio.muni-c5 { fill: var(--color-beige-light); }
.municipio.muni-c6 { fill: color-mix(in srgb, var(--color-red) 32%, var(--color-beige)); }
.municipio:hover { fill: var(--color-red); opacity: 0.85; }
.municipio.is-selected { fill: var(--color-red); }
.municipio:focus-visible { outline: 2px solid var(--color-blue); outline-offset: -2px; }

/* Cardzinho flutuante por municipio, quando um dia com agenda esta selecionado */
.muni-tooltip {
  position: absolute; transform: translate(-50%, -100%); margin-top: -4px;
  background: var(--color-red); color: var(--color-white); padding: 12px 14px; border-radius: var(--radius-md);
  font-size: 14px; line-height: 1.5; min-width: 160px; max-width: 260px; pointer-events: none;
  box-shadow: var(--shadow-soft); z-index: 5;
}
.muni-tooltip strong { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
.muni-tooltip ul { list-style: none; margin: 0; padding: 0; }
.muni-tooltip li { font-size: 13px; opacity: 0.92; margin-bottom: 2px; }
.muni-tooltip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: var(--color-red);
}

/* Pontinho no centro de cada municipio com agenda (hover/tap abre o cardzinho) */
.muni-dot {
  fill: var(--color-red); stroke: var(--color-white); stroke-width: 1.2;
  pointer-events: none; transition: fill 150ms ease;
}
.muni-dot.is-hover { fill: var(--color-black); }

/* Icone decorativo por municipio — glifo unico, sem preenchimento, tom
   claro translucido pra funcionar sobre qualquer uma das 6 cores do
   mosaico sem precisar calcular contraste por tile. */
.muni-icon {
  fill: none; stroke: rgba(255,255,255,0.55); stroke-width: 1.1;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}

.muni-hover-card {
  position: absolute; transform: translate(-50%, -100%); margin-top: -4px;
  background: var(--color-white); color: var(--color-text); padding: 12px 14px; border-radius: var(--radius-md);
  font-size: 14px; line-height: 1.5; min-width: 160px; max-width: 260px; pointer-events: none;
  border: 1px solid var(--color-border); box-shadow: var(--shadow-soft); z-index: 6;
}
.muni-hover-card strong { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; color: var(--color-red); }
.muni-hover-card ul { list-style: none; margin: 0; padding: 0; }
.muni-hover-card li { font-size: 13px; margin-bottom: 2px; }
.muni-hover-card p { font-size: 13px; color: var(--color-text-secondary); margin: 0; }
.muni-hover-card::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: var(--color-white);
}

@media (max-width: 640px) {
  .muni-tooltip, .muni-hover-card {
    font-size: 15px; padding: 14px 16px; min-width: 190px; max-width: min(280px, 78vw);
  }
  .muni-tooltip strong, .muni-hover-card strong { font-size: 14px; }
  .muni-tooltip li, .muni-hover-card li, .muni-hover-card p { font-size: 14px; }
  .muni-dot { r: 4.4; }
  .muni-dot:hover, .muni-dot.is-hover { r: 6; }
}

.presence-zoom-controls {
  position: absolute; bottom: 16px; left: 16px; display: flex; flex-direction: column; gap: 6px; z-index: 2;
}
.presence-zoom-controls button {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border);
  background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); color: var(--color-text);
  font-size: 16px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-softer);
  display: flex; align-items: center; justify-content: center;
  transition: background-color 150ms ease, transform 150ms ease;
}
.presence-zoom-controls button:hover { background: var(--color-white); transform: scale(1.05); }


/* Modal de tela cheia: mapa + agenda com zoom/pan liberado */
.presence-modal {
  position: fixed; inset: 0; z-index: 200; display: none;
}
.presence-modal.is-open { display: block; }
.presence-modal-backdrop {
  position: absolute; inset: 0; background: rgba(22, 20, 15, 0.7); backdrop-filter: blur(4px);
}
.presence-modal-panel {
  position: relative; z-index: 1; margin: 0; width: 100vw; height: 100vh;
  background: var(--color-bg); border-radius: 0;
  box-shadow: none; overflow: hidden; padding: var(--space-2);
  display: flex; flex-direction: column;
}
.presence-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border);
  background: var(--color-white); font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-softer);
}
.presence-modal-close:hover { background: var(--color-gray-light); }
.presence-modal-slot { flex: 1; min-height: 0; }
.presence-modal-slot .presence-movable { height: 100%; }
.presence-modal-slot .presence-map-col { height: 100%; min-height: 0; }
.presence-modal-slot .presence-agenda { max-height: 100%; }
body.presence-modal-open { overflow: hidden; }

/* Card de agenda: do lado do mapa, sticky (acompanha so dentro da secao) */
.presence-modal-slot .presence-agenda {
  position: sticky; top: 96px; max-height: calc(100vh - 140px); overflow: hidden;
  background: rgba(255,255,255,0.78); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(231,221,195,0.8); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-soft); transition: padding 200ms ease, border-radius 200ms ease;
  flex-direction: column;
}
.presence-agenda-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); gap: 8px; }
.presence-agenda-header button {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-white);
  cursor: pointer; font-size: 16px; line-height: 1; color: var(--color-text); display: flex; align-items: center; justify-content: center;
  transition: background-color 150ms ease; flex-shrink: 0;
}
.presence-agenda-header button:hover { background: var(--color-gray-light); }
.presence-agenda-month { font-family: var(--font-heading); font-weight: 700; font-size: 15px; text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; text-align: center; }

.presence-agenda-body { overflow: hidden; display: flex; flex-direction: column; min-height: 0; flex: 1; }

.presence-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: var(--space-2); }
.presence-calendar .cal-dow { font-size: 10px; text-align: center; color: var(--color-text-secondary); font-weight: 700; text-transform: uppercase; padding-bottom: 2px; }
.presence-calendar .cal-day {
  aspect-ratio: 1; border: none; background: none; border-radius: 50%; font-size: 13px; color: var(--color-text);
  cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 32px; transition: background-color 150ms ease, color 150ms ease;
}
.presence-calendar .cal-day:hover { background: var(--color-gray-light); }
.presence-calendar .cal-day.is-today { font-weight: 700; color: var(--color-red); }
.presence-calendar .cal-day.is-selected { background: var(--color-red); color: var(--color-white); }
.presence-calendar .cal-day.has-events::after {
  content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--color-green);
}
.presence-calendar .cal-day.is-selected.has-events::after { background: var(--color-white); }
.presence-calendar .cal-day.is-empty { visibility: hidden; }
.presence-calendar .cal-day.is-adjacent { color: var(--color-text-secondary); opacity: 0.5; }

/* Era um <button> puro sem reset — herdava borda/fundo nativos do browser
   por cima do .text-link, virando uma caixa feia de ponta a ponta. Reset
   explicito + pill sutil, do jeito que devia ter sido desde o inicio. */
.presence-agenda-toggle {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 40px; margin: 0 0 var(--space-2); padding: 8px 14px;
  background: none; border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  font-size: 12px; text-align: center; cursor: pointer;
}
.presence-agenda-toggle:hover { background: var(--color-gray-light); border-color: var(--color-red); }
.presence-agenda-city {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-red);
  margin: 0 0 var(--space-1); display: none;
}
.presence-agenda-city.is-visible { display: block; }

.presence-agenda-list { display: flex; flex-direction: column; gap: var(--space-2); overflow-y: auto; flex: 1; min-height: 60px; padding-right: 2px; }
.presence-agenda-list .presence-day-group + .presence-day-group { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
.presence-agenda-list .presence-day-heading { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary); margin-bottom: 4px; }
.presence-month-divider {
  margin: var(--space-3) 0 var(--space-2); padding-top: var(--space-2); border-top: 2px dashed var(--color-border);
  font-family: var(--font-heading); font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--color-red); text-align: center;
}
.presence-panel-empty { color: var(--color-text-secondary); font-size: 13px; margin: 0; }
.presence-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.presence-events li {
  border-left: 3px solid var(--color-red); background: rgba(255,255,255,0.55);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 8px 10px;
}
.presence-events .event-time { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--color-red); margin-right: 6px; }
.presence-events .event-title { font-size: 13.5px; font-weight: 600; color: var(--color-text); }
.presence-events .event-location, .presence-events .event-municipality { display: block; font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }

.presence-mobile-list.is-noscript { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.presence-mobile-list.is-noscript ul { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.presence-mobile-list.is-noscript .caption { color: var(--color-text-secondary); }

@media (max-width: 900px) {
  /* So dentro do modal de tela cheia (fora dele a agenda nem aparece —
     display:none, ver regra la em cima). Mapa + agenda empilhados, mas
     juntos numa unica "tela" (viewport inteira do modal), lista de
     eventos rola por dentro se precisar. */
  .presence-modal-slot .presence-movable {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 42fr) minmax(0, 58fr);
    gap: 0;
  }
  .presence-modal-slot .presence-agenda { position: static; max-height: none; height: 100%; border-radius: 0; border-left: none; border-right: none; }
  .presence-agenda-list { max-height: none; }
  .presence-modal-slot .presence-map-col { min-height: 0; height: 100%; border-radius: 0; }
}

/* Agenda — proxima eventos, previa embutida na coluna de texto da secao
   "Alagoas em Movimento" (fundo verde escuro). CTA abre o mesmo modal de
   tela cheia (data-presence-fullscreen-open). Cartao com "chip" de data
   tipo folhinha de calendario, no lugar de uma lista generica de texto
   empilhado com linha embaixo — mais identidade, mais facil de escanear.
   Mostra no maximo ~3 por vez; o resto rola por dentro da lista (nao a
   pagina) com scroll-snap — sempre para com um item inteiro visivel,
   nunca corta um no meio. */
.presence-copy .agenda-list {
  display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0;
  max-height: 288px; overflow-y: auto; scroll-snap-type: y mandatory;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.35) transparent;
}
.presence-copy .agenda-list::-webkit-scrollbar { width: 4px; }
.presence-copy .agenda-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-radius: 4px; }
/* Cartao com cara propria: fundo bege solido (nao vidro fosco generico),
   canto superior esquerdo cortado na diagonal (mesma linguagem "angulada"
   dos divisores entre sections), chip de data vermelho solido tipo carimbo
   de ingresso, estrelinha verde no canto — o mesmo motivo de estrela ja
   usado no resto do site (eyebrow, manifesto). */
.presence-copy .agenda-item {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--space-2);
  background: var(--color-beige-light);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
  padding: 12px 12px 10px 14px;
  scroll-snap-align: start; scroll-snap-stop: always; flex-shrink: 0;
  box-shadow: var(--shadow-softer);
  transition: transform 150ms ease;
}
.presence-copy .agenda-item:hover { transform: translateY(-2px); }
/* Item com municipio cadastrado eh clicavel — destaca o municipio no mapa
   ao lado (ver public/assets/js/site.js, selectMunicipio/openHoverCardBridge). */
.presence-copy .agenda-item[data-municipality-id] { cursor: pointer; }
.presence-copy .agenda-item::after {
  content: ''; position: absolute; top: 8px; right: 8px;
  width: 10px; height: 10px;
  background: var(--color-green);
  clip-path: polygon(50% 0%, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0% 50%, 39% 38%);
  opacity: 0.8;
}
.presence-copy .agenda-item-chip {
  flex-shrink: 0; width: 44px; text-align: center;
  background: var(--color-red); border-radius: var(--radius-sm);
  padding: 6px 2px;
}
.presence-copy .agenda-item-chip-day {
  display: block; font-family: var(--font-heading); font-weight: 800;
  font-size: 18px; line-height: 1; color: var(--color-white);
}
.presence-copy .agenda-item-chip-month {
  display: block; margin-top: 2px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-beige-light);
}
.presence-copy .agenda-item-body { min-width: 0; padding-top: 2px; padding-right: 12px; }
.presence-copy .agenda-item h3 { font-size: 14.5px; color: var(--color-text); margin-bottom: 2px; line-height: 1.3; }
.presence-copy .agenda-item-place { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--color-text-muted); }

/* =========================================================
   Placeholder photo (sem foto oficial ainda)
   ========================================================= */
.photo-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--color-beige), var(--color-beige-light));
  color: var(--color-text-muted);
}
.photo-placeholder .monogram { font-family: var(--font-heading); font-size: 48px; font-weight: 700; color: var(--color-red); opacity: 0.5; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: var(--color-blue); color: rgba(255,255,255,0.85); padding: var(--space-8) 0 var(--space-4); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 0.8fr 0.9fr 1.2fr; gap: var(--space-4); margin-bottom: var(--space-6); }
.footer-grid h4 { color: var(--color-white); font-family: var(--font-body); font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-2); }
.footer-grid ul li { margin-bottom: var(--space-1); }
.footer-grid a:hover { color: var(--color-white); }
.footer-social { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.footer-social a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; }
.footer-form { display: flex; gap: 8px; margin-top: var(--space-2); }
.footer-form input { flex: 1; padding: 12px 16px; border-radius: var(--radius-pill); border: none; font-family: var(--font-body); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); padding-top: var(--space-3); font-size: 13px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

@media (max-width: 767px) {
  .site-footer { padding: var(--space-4) 0 var(--space-3); }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "brand brand" "nav info" "news news";
    gap: var(--space-3); margin-bottom: var(--space-4);
  }
  .footer-brand { grid-area: brand; }
  .footer-col-nav { grid-area: nav; }
  .footer-col-info { grid-area: info; }
  .footer-col-news { grid-area: news; }
  .footer-brand .caption { margin-top: 4px !important; }
  .footer-social { margin-top: var(--space-1); }
  .footer-bottom { padding-top: var(--space-2); font-size: 12px; gap: 4px; }
}

/* =========================================================
   Flash messages (formularios publicos)
   ========================================================= */
.flash { padding: var(--space-2); border-radius: var(--radius-sm); margin-bottom: var(--space-2); font-size: 14px; }
.flash.success { background: #DCFCE7; color: #14532D; }
.flash.error { background: #FEE2E2; color: #7F1D1D; }

/* Stub pages */
.stub-page { padding-top: var(--space-12); padding-bottom: var(--space-12); text-align: center; }

/* Pagina de agradecimento (video) + pagina de materiais — fim do fluxo
   "Ajude a caminhada" (Site\VolunteerController). So' acessiveis por quem
   acabou de se cadastrar (gate por sessao no controller). */
.volunteer-thanks-video {
  width: 100%; max-width: 720px; margin: 0 auto; display: block;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); background: var(--color-black);
}
/* Botao "Ver materiais" fica escondido ate' os ultimos ~10% do video
   (timeupdate em volunteer-thanks.php) — fade sutil em vez de aparecer
   seco. Sem video cadastrado essa classe nem entra no HTML (fica visivel
   desde o load). */
.volunteer-materials-link { transition: opacity 300ms ease, transform 300ms ease; }
.volunteer-materials-link.is-hidden { opacity: 0; transform: translateY(6px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .volunteer-materials-link { transition: none; }
}
.volunteer-materials-page { padding-top: var(--space-10); padding-bottom: var(--space-12); }
.volunteer-materials-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4);
  margin: var(--space-4) 0;
}
.volunteer-material-card { display: flex; flex-direction: column; gap: 6px; }
.volunteer-material-card .card-image { aspect-ratio: 4/3; }
.volunteer-material-card .btn { align-self: flex-start; margin-top: 4px; }
@media (max-width: 767px) {
  .volunteer-materials-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* =========================================================
   Página Sobre
   ========================================================= */
.about-page { padding-top: var(--space-10); padding-bottom: var(--space-12); }
.about-page-layout { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: var(--space-8); align-items: start; }
.about-page-photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-softer); position: sticky; top: calc(var(--space-6) + 72px); }
.about-page-photo img { width: 100%; height: auto; display: block; aspect-ratio: 4/5; object-fit: cover; }
.about-page-body p { font-size: 17px; line-height: 1.75; color: var(--color-text); margin-bottom: var(--space-4); }

@media (max-width: 900px) {
  .about-page-layout { grid-template-columns: 1fr; }
  .about-page-photo { position: static; max-width: 320px; margin: 0 auto var(--space-4); }
}

/* =========================================================
   Notícias — listagem, busca, paginação e detalhe
   ========================================================= */
.news-page { padding-top: var(--space-10); padding-bottom: var(--space-10); }

.news-search { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); flex-wrap: wrap; }
.news-search input[type="search"] {
  flex: 1 1 280px; padding: 12px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 15px; color: var(--color-text); background: var(--color-white);
}
.news-search input[type="search"]:focus { outline: none; border-color: var(--color-red); box-shadow: 0 0 0 3px rgba(147,26,27,0.12); }
.news-search .btn { flex-shrink: 0; }
.news-search-clear { flex-shrink: 0; }
.news-search-result { margin-bottom: var(--space-4); }

.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.news-grid-card { display: block; color: var(--color-text); text-decoration: none; }
.news-grid-card h3 { font-size: 18px; margin-bottom: 4px; }
.news-grid-card:hover .card-image { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.news-grid-date { margin-top: 2px; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin: var(--space-6) 0; }
.pagination-link {
  min-width: 44px; height: 44px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--color-border); color: var(--color-text); text-decoration: none;
  font-size: 14px; font-weight: 600; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.pagination-link:hover { border-color: var(--color-red); color: var(--color-red); }
.pagination-link.is-current { background: var(--color-red); border-color: var(--color-red); color: var(--color-white); }
.pagination-link.is-disabled { opacity: 0.35; pointer-events: none; }

.news-article { padding-top: var(--space-10); padding-bottom: var(--space-10); max-width: 760px; }
.news-article-back { display: inline-block; margin-bottom: var(--space-4); }
.news-article-image { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-4); box-shadow: var(--shadow-softer); }
.news-article-image img { width: 100%; height: auto; display: block; }
.news-article-body { font-size: 17px; line-height: 1.75; color: var(--color-text); }
.news-article-body p { margin: 0 0 var(--space-3); }
.news-article-body h2, .news-article-body h3, .news-article-body h4 { margin: var(--space-5) 0 var(--space-2); }
.news-article-body ul, .news-article-body ol { margin: 0 0 var(--space-3); padding-left: 1.4em; }
.news-article-body blockquote {
  margin: var(--space-4) 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-red);
  color: var(--color-text-secondary); font-style: italic;
}
.news-article-body img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: var(--space-3) 0; display: block; }
.news-article-body a { color: var(--color-red); text-decoration: underline; }
.news-article-source { margin-top: var(--space-5); font-size: 14px; color: var(--color-text-muted); }
.news-article-source a { color: var(--color-red); font-weight: 600; }
.news-article-related { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.news-article-related .news-grid { margin-top: var(--space-3); }

@media (max-width: 767px) {
  .news-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .news-article { padding-top: var(--space-6); padding-bottom: var(--space-6); }
}

/* Scroll reveal agora e via GSAP + ScrollTrigger — ver public/assets/js/animations.js */

/* =========================================================
   Loader inicial (breve, tipo app — some apos animations.js rodar)
   ========================================================= */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-beige-light);
}
.page-loader .brand-logo img { height: 120px; }
@media (prefers-reduced-motion: reduce) {
  .page-loader { display: none; }
}
.page-loader--pending { position: static; }
.page-loader--pending .page-loader-inner { text-align: center; }
.page-loader--pending .brand-logo img { animation: page-loader-pulse 1.8s ease-in-out infinite; }
.page-loader-msg { margin-top: 24px; font-size: 15px; color: var(--color-text-muted, #6b6558); }
@keyframes page-loader-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .page-loader--pending { display: flex; }
  .page-loader--pending .brand-logo img { animation: none; }
}

/* =========================================================
   Modal "Ajude a caminhada" — cadastro guiado (3 passos), ver
   public/assets/js/volunteer.js e site/partials/home/caminhada.php.
   Mesma familia visual do .presence-modal (fixed + backdrop blur), so'
   centralizado num cartao em vez de tela cheia (e' um formulario, nao mapa).
   ========================================================= */
/* [hidden] tem a mesma especificidade de .btn/.text-link (0,1,0) —
   quando os dois miram o mesmo elemento (ex: botao "Confirmar cadastro"
   com hidden + class="btn"), o CSS de classe declarado depois no arquivo
   vence o atributo do navegador e o elemento fica visivel mesmo
   "escondido". Essa regra (especificidade 0,2,0) garante que hidden
   sempre ganha dentro do modal. */
.volunteer-modal-panel [hidden] { display: none; }

.volunteer-modal { position: fixed; inset: 0; z-index: 300; display: none; }
.volunteer-modal.is-open { display: flex; align-items: center; justify-content: center; padding: var(--space-3); }
.volunteer-modal-backdrop { position: absolute; inset: 0; background: rgba(17,17,17,0.72); backdrop-filter: blur(4px); }
.volunteer-modal-panel {
  position: relative; z-index: 1; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
  background: var(--color-beige-light); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-4) var(--space-3);
  box-shadow: var(--shadow-soft);
}
.volunteer-modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border);
  background: var(--color-white); cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--color-text); box-shadow: var(--shadow-softer);
}
.volunteer-modal-close:hover { background: var(--color-gray-light); }
body.volunteer-modal-open { overflow: hidden; }

.volunteer-modal-title { font-size: 22px; margin: 0 0 var(--space-3); padding-right: 40px; }
.volunteer-modal-error {
  background: #FEE2E2; color: #7F1D1D; border-radius: var(--radius-sm); padding: 10px 14px;
  font-size: 13.5px; margin-bottom: var(--space-2);
}

.volunteer-progress { display: flex; gap: 8px; margin-bottom: var(--space-3); }
.volunteer-progress span { flex: 1; height: 4px; border-radius: 2px; background: var(--color-border); transition: background-color 200ms ease; }
.volunteer-progress span.is-active, .volunteer-progress span.is-done { background: var(--color-red); }

.volunteer-step { display: none; }
.volunteer-step.is-active { display: block; }
.volunteer-step label { display: block; font-size: 13px; font-weight: 700; margin: var(--space-2) 0 4px; }
.volunteer-step label:first-child { margin-top: 0; }
.volunteer-step input[type="text"],
.volunteer-step input[type="tel"],
.volunteer-step input[type="email"] {
  width: 100%; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 15px; color: var(--color-text); background: var(--color-white);
}
.volunteer-step input:focus { outline: none; border-color: var(--color-red); box-shadow: 0 0 0 3px rgba(147,26,27,0.12); }
.volunteer-field-error { display: block; font-size: 12px; color: #B91C1C; margin-top: 2px; min-height: 15px; }
.volunteer-field-hint { display: block; font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }

.volunteer-checkbox {
  display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 400;
  cursor: pointer; line-height: 1.4;
}
.volunteer-checkbox input { width: auto; margin-top: 3px; flex-shrink: 0; }

.volunteer-address { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px dashed var(--color-border); }
.volunteer-address-grid { margin-top: var(--space-1); }
.volunteer-address-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

.volunteer-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-4); }
.volunteer-nav .btn { margin-left: auto; }
.volunteer-nav .btn:disabled { opacity: 0.6; cursor: default; }

/* Passo 1 — consentimento LGPD */
.volunteer-consent-text { font-size: 14px; line-height: 1.6; color: var(--color-text-muted); margin: 0 0 var(--space-3); }

/* Passo 4 — "(opcional)" ao lado do rotulo do numero, discreto */
.volunteer-optional { font-weight: 400; text-transform: none; color: var(--color-text-muted); }

/* Passo 5 — revisao antes de confirmar */
.volunteer-review-intro { font-size: 14px; color: var(--color-text-muted); margin: 0 0 var(--space-2); }
.volunteer-review { margin: 0; }
.volunteer-review-row {
  display: flex; justify-content: space-between; gap: var(--space-2);
  padding: 10px 0; border-bottom: 1px solid var(--color-border);
}
.volunteer-review-row:last-child { border-bottom: none; }
.volunteer-review-row dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); margin: 0; flex-shrink: 0; }
.volunteer-review-row dd { font-size: 14px; margin: 0; text-align: right; color: var(--color-text); }

@media (max-width: 480px) {
  .volunteer-address-row { grid-template-columns: 1fr; }
  .volunteer-review-row { flex-direction: column; gap: 2px; }
  .volunteer-review-row dd { text-align: left; }
}

/* =========================================================
   Aviso de cookies (LGPD) — fixo no rodape da viewport
   ========================================================= */
.cookie-banner {
  position: fixed; left: var(--space-2); right: var(--space-2); bottom: var(--space-2); z-index: 500;
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  background: var(--color-black); color: var(--color-white);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
  box-shadow: var(--shadow-soft);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; font-size: 13.5px; line-height: 1.5; flex: 1 1 320px; }
.cookie-banner .btn { padding: 10px 24px; font-size: 12.5px; flex-shrink: 0; }

@media (max-width: 600px) {
  .cookie-banner { flex-direction: column; align-items: stretch; text-align: center; }
  .cookie-banner .btn { width: 100%; justify-content: center; }
}

/* =========================================================
   Propostas — secao "presa" (pin) enquanto rola: pilha de verdade, nao
   crossfade. Cada proposta sobe do fundo do card e assenta por cima da
   anterior, que recolhe pra tras (JS controla o transform por frame, ver
   animations.js). So' solta o pin depois da ultima. Se reduced-motion,
   o IIFE inteiro em animations.js nem roda — sobra so o estado de
   repouso definido aqui embaixo (.is-active visivel, resto escondido).

   Fundo: a foto da proposta em foco cobre a tela inteira (nao so' o
   card) — por isso o texto da intro vira claro aqui (mesmo padrao das
   secoes escuras do site: Presenca, Comunidade, Citacao). `position:fixed`
   + `opacity` ligado/desligado pelo MESMO ScrollTrigger que faz o pin
   (onEnter/onLeave/onEnterBack/onLeaveBack em animations.js) — nao um
   `sticky` calculado a parte, que desalinhava da janela real do pin e
   deixava a cor de fundo da secao (preta) aparecer como uma tarja antes
   de entrar e depois de sair. */
.proposals-section { position: relative; background: var(--color-beige-light); overflow: clip; padding-bottom: 0; }

.proposals-bg {
  position: fixed; inset: 0; z-index: 0;
  opacity: 0; pointer-events: none;
}
.proposals-bg.is-visible { opacity: 1; }
.proposals-bg-photo { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.proposals-bg-photo.is-active { opacity: 1; }
.proposals-bg-photo img, .proposals-bg-photo .photo-placeholder { width: 100%; height: 100%; object-fit: cover; }
.proposals-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(17,17,17,0.62), rgba(17,17,17,0.42) 45%, rgba(17,17,17,0.6));
}

[data-proposals-pin] { position: relative; z-index: 2; }

/* padding-top/bottom em longhand de proposito — um shorthand aqui
   ("padding: X 0 Y") zerava o gutter horizontal herdado de
   .content-width (mesma armadilha ja documentada no CLAUDE.md pra
   .about-page/.news-page: shorthand com a mesma especificidade vence
   TODOS os lados, nao so' o que a gente queria mudar). */
.proposals-layout {
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--space-8); align-items: stretch;
  min-height: 100vh; padding-top: var(--space-12); padding-bottom: 0;
}

/* Card colado na borda inferior da secao (efeito pedido); intro fica
   centralizada na propria coluna, acima do respiro do topo. */
.proposals-intro { align-self: center; }

.proposals-intro .eyebrow { margin-bottom: var(--space-2); }
.proposals-intro h2 { margin: 0 0 var(--space-3); font-size: 2rem; line-height: 1.15; color: var(--color-beige-light); }
.proposals-intro .is-red { color: var(--color-red); }
.proposals-intro p { color: rgba(250,246,239,0.78); }

.proposals-stack {
  position: relative; align-self: end; width: 100%; max-width: 440px; margin-inline: auto;
  height: min(620px, 78vh);
  padding-top: 44px; /* folga onde a pilha ja "recolhida" espia atras do card em foco */
}

/* Card: mensagem em vidro fosco, mesma linguagem do card de agenda do
   mapa de Presenca (rgba/blur/borda identicos) — chip circular 44px
   igual aos controles do mapa, canto cortado + estrelinha verde (motivo
   "carimbo de ingresso" ja usado la tambem). Ancorado no fundo do
   container — o espaco vazio no topo (padding-top do .proposals-stack)
   e onde as cartas ja passadas ficam empilhadas, subindo um pouco e
   encolhendo (ver animations.js). */
.proposal-card {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: calc(100% - 44px);
  overflow: hidden;
  clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px);
  background: rgba(255,255,255,0.82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(231,221,195,0.85);
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column;
  transform: translateY(100%);
  opacity: 0;
  will-change: transform, opacity;
}
.proposal-card.is-active { transform: translateY(0); opacity: 1; }

.proposal-card::after {
  content: ''; position: absolute; top: 20px; right: 20px; z-index: 3;
  width: 16px; height: 16px;
  background: var(--color-green);
  clip-path: polygon(50% 0%, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0% 50%, 39% 38%);
  opacity: 0.85;
}

.proposal-card-chip {
  position: absolute; left: 24px; top: 24px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-red); box-shadow: var(--shadow-softer);
  display: flex; align-items: center; justify-content: center;
}
.proposal-card-chip-number { font-family: var(--font-heading); font-weight: 800; font-size: 16px; line-height: 1; color: var(--color-white); }

/* Conteudo ocupa o card inteiro agora (sem foto tomando espaco em cima) —
   padding generoso com tokens validos (o bug antigo usava var(--space-5),
   que nao existe no projeto e virava 0, colando o texto na borda). */
.proposal-card-content {
  flex: 1; min-height: 0;
  padding: calc(var(--space-8) + var(--space-2)) var(--space-6) var(--space-6);
  display: flex; flex-direction: column;
}
.proposal-card-content h3 { margin: 0 0 var(--space-3); font-size: 1.4rem; line-height: 1.3; color: var(--color-text); }
.proposal-card-desc { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.proposal-card-desc p { margin: 0 0 var(--space-3); line-height: 1.7; color: var(--color-text-muted); }
.proposal-card-desc p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  /* Secao fica pinada (position:fixed via GSAP) enquanto rola — no mobile
     isso significa que TUDO (intro + pilha de cards) precisa caber numa
     tela so', senao a parte de baixo fica inalcancavel (sem scroll de
     pagina possivel durante o pin). Por isso aqui vira flex-column com
     altura travada em 100dvh (100vh como fallback pra navegador sem
     suporte) em vez de intro+stack com alturas fixas somadas — a pilha
     (flex:1) absorve o espaco que sobrar, nunca estoura o viewport. */
  .proposals-layout {
    grid-template-columns: 1fr;
    display: flex; flex-direction: column;
    /* .site-header e' sticky (fica por cima, sempre) — o pin do GSAP
       gruda a secao no topo do viewport (top top), mas os primeiros
       var(--navbar-height) ficam cobertos pelo header. 100dvh sozinho
       ainda estourava o card por baixo do viewport nesse tanto. */
    height: calc(100vh - var(--navbar-height));
    height: calc(100dvh - var(--navbar-height));
    min-height: 0;
    padding-top: var(--space-6); padding-bottom: 0;
  }
  /* Titulo/paragrafo do tamanho desktop (2rem + text-lg) sozinhos ja
     comiam ~335px de um viewport que agora precisa caber tudo — reduzido
     pra sobrar espaco real pro card. Paragrafo travado em 2 linhas
     (line-clamp) pra nao crescer sem controle em tela estreita. */
  .proposals-intro { flex: 0 0 auto; margin-bottom: var(--space-2); align-self: auto; }
  .proposals-intro .eyebrow { margin-bottom: var(--space-1); }
  .proposals-intro h2 { font-size: 1.3rem; margin-bottom: var(--space-2); }
  .proposals-intro p.text-lg {
    font-size: 0.95rem; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* flex:1 + min-height:0, sem "piso" fixo: a pilha nunca estoura o
     viewport (regra que motivou essa media query inteira), so' encolhe
     no pior caso (tela bem baixa). O texto continua legivel porque
     .proposal-card-desc rola por dentro (overflow-y:auto) quando nao
     cabe tudo. */
  .proposals-stack { flex: 1 1 auto; min-height: 0; max-width: 380px; width: 100%; height: auto; align-self: center; }
  /* top precisa limpar o chip (24px + 44px = 68px) sem repetir o padding
     desktop inteiro (64+16=80px, espaco demais numa tela ja apertada). */
  .proposal-card-content { padding: calc(var(--space-6) + var(--space-3)) var(--space-4) var(--space-4); }
}