/* ============================================================
   Sorriso Leonor — Folha de estilos global
   ============================================================ */

/* ---------- Importar fontes ---------- */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;700;800&family=Nunito:wght@400;600;700&display=swap');

/* ---------- Variáveis de design ---------- */
:root {
  --rosa-claro:  #F9D9E6;
  --magenta:     #D6336C;
  --roxo-escuro: #3D2C6B;
  --lilas:       #C9B6E4;
  --branco:      #FFFFFF;

  --font-titulo: 'Baloo 2', cursive;
  --font-texto:  'Nunito', sans-serif;

  --radius-card: 1rem;
  --radius-img:  50%;
  --sombra:      0 4px 20px rgba(61, 44, 107, 0.12);
  --sombra-hover:0 8px 32px rgba(214, 51, 108, 0.22);

  --max-largura: 1100px;
  --padding-sec: 5rem 1.5rem;
}

/* ---------- Reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-texto);
  background: var(--branco);
  color: var(--roxo-escuro);
  line-height: 1.7;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ---------- Utilitários ---------- */
.container {
  max-width: var(--max-largura);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.btn {
  display: inline-block;
  padding: .75rem 2rem;
  border-radius: 2rem;
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .2s;
  border: none;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sombra-hover); }
.btn-primario  { background: var(--magenta);     color: var(--branco); }
.btn-secundario{ background: var(--branco);       color: var(--magenta); border: 2px solid var(--magenta); }
.btn-roxo      { background: var(--roxo-escuro); color: var(--branco); }

.secao-titulo {
  font-family: var(--font-titulo);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  color: var(--roxo-escuro);
  margin-bottom: .5rem;
}
.secao-subtitulo {
  font-size: 1.05rem;
  color: #777;
  margin-bottom: 2.5rem;
}
.divisor-coracao {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}
.divisor-coracao::before,
.divisor-coracao::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--lilas);
}
.divisor-coracao span { color: var(--magenta); font-size: 1.2rem; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--branco);
  box-shadow: 0 2px 12px rgba(61,44,107,.1);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}
.logo {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.logo-icon {
  width: 42px;
  height: 42px;
}
.logo-texto {
  font-family: var(--font-titulo);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--roxo-escuro);
  line-height: 1.2;
}
.logo-texto span { color: var(--magenta); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.8rem;
}
.nav-links a {
  font-family: var(--font-titulo);
  font-weight: 600;
  font-size: .95rem;
  color: var(--roxo-escuro);
  position: relative;
  transition: color .2s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 2px;
  background: var(--magenta);
  transition: width .25s;
}
.nav-links a:hover { color: var(--magenta); }
.nav-links a:hover::after,
.nav-links a.ativo::after { width: 100%; }
.nav-links a.ativo { color: var(--magenta); }
.nav-links .btn { margin-left: .5rem; }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: .4rem;
  background: none;
  border: none;
}
.hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--roxo-escuro);
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.hamburger.aberto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.aberto span:nth-child(2) { opacity: 0; }
.hamburger.aberto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .hamburger { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 70px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--branco);
    padding: 1rem 1.5rem 1.5rem;
    box-shadow: 0 8px 20px rgba(61,44,107,.1);
    gap: .5rem;
  }
  .nav-links.visivel { display: flex; }
  .nav-links a { padding: .6rem 0; border-bottom: 1px solid var(--rosa-claro); }
  .nav-links a:last-child { border-bottom: none; }
  .nav-links .btn { margin-left: 0; margin-top: .5rem; text-align: center; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--roxo-escuro);
  color: rgba(255,255,255,.85);
  padding: 3.5rem 1.5rem 1.5rem;
  font-size: .9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
  max-width: var(--max-largura);
  margin-inline: auto;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.footer-logo .logo-texto { color: var(--branco); }
.footer-logo .logo-texto span { color: var(--lilas); }
.footer-descricao {
  margin-top: .75rem;
  line-height: 1.6;
  color: rgba(255,255,255,.7);
}
.footer-col h4 {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1rem;
  color: var(--lilas);
  margin-bottom: 1rem;
}
.footer-col ul li { margin-bottom: .5rem; }
.footer-col ul a { color: rgba(255,255,255,.7); transition: color .2s; }
.footer-col ul a:hover { color: var(--branco); }
.footer-social {
  display: flex;
  gap: .75rem;
  margin-top: .75rem;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: var(--branco);
  transition: background .2s;
  font-size: .95rem;
}
.footer-social a:hover { background: var(--magenta); }
.footer-bottom {
  max-width: var(--max-largura);
  margin-inline: auto;
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  color: rgba(255,255,255,.5);
  font-size: .82rem;
}

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ============================================================
   HERO — INÍCIO
   ============================================================ */
.hero {
  background: linear-gradient(135deg, var(--rosa-claro) 0%, #fce8f0 60%, var(--lilas) 100%);
  padding: 5rem 1.5rem 4rem;
  overflow: hidden;
  position: relative;
}
.hero::before {
  content: '♥';
  position: absolute;
  font-size: 18rem;
  color: rgba(214,51,108,.04);
  right: -2rem; top: -3rem;
  line-height: 1;
  pointer-events: none;
}
.hero-inner {
  max-width: var(--max-largura);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3rem;
}
.hero-titulo {
  font-family: var(--font-titulo);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: var(--roxo-escuro);
  line-height: 1.15;
  margin-bottom: 1rem;
}
.hero-titulo em {
  font-style: normal;
  color: var(--magenta);
}
.hero-subtitulo {
  font-size: 1.1rem;
  color: var(--roxo-escuro);
  opacity: .8;
  margin-bottom: 2rem;
  max-width: 46ch;
}
.hero-botoes { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-img-wrap {
  display: flex;
  justify-content: center;
  position: relative;
}
.hero-img-circulo {
  width: 340px;
  height: 340px;
  border-radius: 50%;
  object-fit: cover;
  border: 6px solid var(--magenta);
  box-shadow: 0 8px 40px rgba(214,51,108,.25);
}
.hero-badge {
  position: absolute;
  bottom: 10px; right: 20px;
  background: var(--magenta);
  color: var(--branco);
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: .85rem;
  padding: .5rem 1rem;
  border-radius: 2rem;
  box-shadow: var(--sombra-hover);
}

@media (max-width: 768px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-botoes { justify-content: center; }
  .hero-img-circulo { width: 240px; height: 240px; }
  .hero-img-wrap { order: -1; }
}

/* ============================================================
   SECÇÃO — RESUMO DA HISTÓRIA
   ============================================================ */
.historia-resumo {
  padding: var(--padding-sec);
  background: var(--branco);
}
.historia-resumo-inner {
  max-width: var(--max-largura);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.historia-texto p { margin-bottom: 1.1rem; color: #555; }
.historia-texto p strong { color: var(--roxo-escuro); }
.historia-visual {
  background: var(--rosa-claro);
  border-radius: 1.5rem;
  padding: 2.5rem;
  text-align: center;
}
.historia-visual .data-nascimento {
  font-family: var(--font-titulo);
  font-size: 1rem;
  color: var(--magenta);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.historia-visual .nome-grande {
  font-family: var(--font-titulo);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--roxo-escuro);
  margin-bottom: 1rem;
}
.historia-visual .coracao-svg {
  margin-inline: auto;
  width: 80px; height: 80px;
  fill: none;
  stroke: var(--magenta);
  stroke-width: 2.5;
}
.historia-visual .historia-frase {
  margin-top: 1rem;
  font-style: italic;
  color: #888;
  font-size: .95rem;
}

@media (max-width: 768px) {
  .historia-resumo-inner { grid-template-columns: 1fr; }
}

/* ============================================================
   SECÇÃO — COMO AJUDAR (PRÉVIA)
   ============================================================ */
.como-ajudar-previa {
  padding: var(--padding-sec);
  background: linear-gradient(180deg, var(--rosa-claro) 0%, var(--branco) 100%);
  text-align: center;
}
.como-ajudar-previa .container { max-width: var(--max-largura); }
.ajudar-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.ajudar-card {
  background: var(--branco);
  border-radius: var(--radius-card);
  padding: 2rem 1.5rem;
  box-shadow: var(--sombra);
  transition: transform .25s, box-shadow .25s;
  text-align: center;
}
.ajudar-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-hover); }
.ajudar-card .icone {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: block;
}
.ajudar-card h3 {
  font-family: var(--font-titulo);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--roxo-escuro);
  margin-bottom: .6rem;
}
.ajudar-card p { font-size: .93rem; color: #666; margin-bottom: 1.2rem; }

@media (max-width: 768px) {
  .ajudar-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   SEPARADOR ILUSTRADO — CAMINHADA
   ============================================================ */
.separador-caminhada {
  position: relative;
  background: var(--roxo-escuro);
  overflow: hidden;
  padding: 3.5rem 1.5rem;
  text-align: center;
  color: var(--branco);
}
.separador-caminhada .ribbon-frase {
  font-family: var(--font-titulo);
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  font-weight: 700;
  max-width: 700px;
  margin-inline: auto;
  line-height: 1.4;
  position: relative;
  z-index: 1;
}
.separador-caminhada .ribbon-frase span { color: var(--lilas); }
.separador-caminhada .silhuetas {
  margin-top: 1.5rem;
  opacity: .25;
  pointer-events: none;
}
.silhuetas svg { width: 100%; max-width: 700px; height: auto; }

/* ============================================================
   SECÇÃO — ÚLTIMAS NOTÍCIAS
   ============================================================ */
.ultimas-noticias {
  padding: var(--padding-sec);
  background: var(--branco);
}
.ultimas-noticias .container { max-width: var(--max-largura); }
.noticias-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.noticia-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--sombra);
  transition: transform .25s, box-shadow .25s;
  background: var(--branco);
}
.noticia-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-hover); }
.noticia-card .noticia-img {
  width: 100%; height: 180px;
  object-fit: cover;
  background: var(--lilas);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--branco);
  font-size: 2rem;
}
.noticia-card .noticia-corpo { padding: 1.25rem; }
.noticia-card .noticia-data {
  font-size: .78rem;
  color: var(--magenta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .4rem;
}
.noticia-card h3 {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1rem;
  color: var(--roxo-escuro);
  margin-bottom: .5rem;
  line-height: 1.35;
}
.noticia-card p { font-size: .88rem; color: #666; margin-bottom: 1rem; }
.noticia-card a.ler-mais {
  font-size: .85rem;
  font-weight: 700;
  color: var(--magenta);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  transition: gap .2s;
}
.noticia-card a.ler-mais:hover { gap: .6rem; }

@media (max-width: 900px) {
  .noticias-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .noticias-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SECÇÃO — IMPACTO / ESTATÍSTICAS
   ============================================================ */
.impacto {
  padding: var(--padding-sec);
  background: var(--rosa-claro);
  text-align: center;
}
.impacto .container { max-width: var(--max-largura); }
.badges-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2.5rem;
}
.badge-circular {
  width: 140px; height: 140px;
  border-radius: 50%;
  background: var(--branco);
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  transition: transform .2s;
}
.badge-circular:hover { transform: scale(1.05); }
.badge-circular .badge-num {
  font-family: var(--font-titulo);
  font-size: 2rem;
  font-weight: 800;
  color: var(--magenta);
  line-height: 1;
}
.badge-circular .badge-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--roxo-escuro);
  text-align: center;
  padding-inline: .5rem;
}

/* ============================================================
   SECÇÃO — PRÉVIA GALERIA
   ============================================================ */
.previa-galeria {
  padding: var(--padding-sec);
  background: var(--branco);
  text-align: center;
}
.previa-galeria .container { max-width: var(--max-largura); }
.galeria-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 160px 160px;
  gap: .75rem;
  margin-top: 2rem;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.galeria-item {
  background: var(--lilas);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--roxo-escuro);
  opacity: .6;
  position: relative;
  overflow: hidden;
}
.galeria-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.galeria-item:hover img { transform: scale(1.07); }
.galeria-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
@media (max-width: 600px) {
  .galeria-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .galeria-item:first-child { grid-column: span 2; grid-row: span 1; }
}

/* ============================================================
   SECÇÃO — PARCEIROS / APOIOS
   ============================================================ */
.parceiros {
  padding: 3rem 1.5rem;
  background: var(--rosa-claro);
  text-align: center;
}
.parceiros .container { max-width: var(--max-largura); }
.parceiros h3 {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1rem;
  color: var(--roxo-escuro);
  opacity: .7;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.parceiros-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}
.parceiro-placeholder {
  width: 120px; height: 48px;
  background: rgba(61,44,107,.08);
  border-radius: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(61,44,107,.35);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
}

/* ============================================================
   HERO INTERIOR (páginas internas)
   ============================================================ */
.hero-interior {
  background: linear-gradient(135deg, var(--rosa-claro) 0%, #fce8f0 60%, var(--lilas) 100%);
  padding: 4rem 1.5rem 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-interior::before {
  content: '♥';
  position: absolute;
  font-size: 16rem;
  color: rgba(214,51,108,.04);
  right: -1rem; top: -2rem;
  line-height: 1;
  pointer-events: none;
}
.hero-interior .breadcrumb {
  font-size: .85rem;
  color: rgba(61,44,107,.55);
  margin-bottom: 1rem;
}
.hero-interior .breadcrumb a { color: var(--magenta); font-weight: 600; }
.hero-interior .breadcrumb a:hover { text-decoration: underline; }
.hero-interior h1 {
  font-family: var(--font-titulo);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--roxo-escuro);
  margin-bottom: .75rem;
}
.hero-interior h1 em { font-style: normal; color: var(--magenta); }
.hero-interior .hero-descricao {
  font-size: 1.05rem;
  color: rgba(61,44,107,.7);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: 2.5rem;
}
.hero-foto-interior {
  width: 260px; height: 260px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid var(--magenta);
  box-shadow: 0 8px 36px rgba(214,51,108,.22);
  margin-inline: auto;
}
@media (max-width: 600px) {
  .hero-foto-interior { width: 190px; height: 190px; }
}

/* ============================================================
   PÁGINA HISTÓRIA — TIMELINE
   ============================================================ */
.historia-pagina {
  padding: var(--padding-sec);
  background: var(--branco);
}
.historia-pagina .container { max-width: 900px; }

/* Linha vertical da timeline */
.timeline {
  position: relative;
  margin-top: 3rem;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--lilas), var(--magenta) 60%, var(--lilas));
  border-radius: 2px;
}

.tl-item {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  align-items: start;
  gap: 0;
  margin-bottom: 3.5rem;
  position: relative;
}
/* Marca central */
.tl-marca {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  z-index: 1;
}
.tl-circulo {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--magenta);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--branco);
  font-size: 1.1rem;
  box-shadow: 0 0 0 5px var(--rosa-claro), 0 0 0 7px var(--lilas);
  flex-shrink: 0;
}
.tl-ano {
  font-family: var(--font-titulo);
  font-size: .78rem;
  font-weight: 700;
  color: var(--magenta);
  letter-spacing: .04em;
  white-space: nowrap;
}

/* Conteúdo alternado esquerda / direita */
.tl-conteudo {
  background: var(--branco);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  box-shadow: var(--sombra);
  position: relative;
  transition: box-shadow .25s;
}
.tl-conteudo:hover { box-shadow: var(--sombra-hover); }

/* Item par — conteúdo à esquerda */
.tl-item:nth-child(odd) .tl-conteudo  { grid-column: 1; }
.tl-item:nth-child(odd) .tl-marca     { grid-column: 2; }
.tl-item:nth-child(odd) .tl-vazio     { grid-column: 3; }

/* Item ímpar — conteúdo à direita */
.tl-item:nth-child(even) .tl-vazio    { grid-column: 1; }
.tl-item:nth-child(even) .tl-marca    { grid-column: 2; }
.tl-item:nth-child(even) .tl-conteudo { grid-column: 3; }

/* Seta de ligação ao centro */
.tl-item:nth-child(odd)  .tl-conteudo::after,
.tl-item:nth-child(even) .tl-conteudo::before {
  content: '';
  position: absolute;
  top: 1.2rem;
  border: 8px solid transparent;
}
.tl-item:nth-child(odd) .tl-conteudo::after {
  right: -16px;
  border-left-color: var(--branco);
  filter: drop-shadow(2px 0 4px rgba(61,44,107,.08));
}
.tl-item:nth-child(even) .tl-conteudo::before {
  left: -16px;
  border-right-color: var(--branco);
  filter: drop-shadow(-2px 0 4px rgba(61,44,107,.08));
}

.tl-conteudo h3 {
  font-family: var(--font-titulo);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--roxo-escuro);
  margin-bottom: .5rem;
}
.tl-conteudo p { font-size: .95rem; color: #555; margin-bottom: .6rem; }
.tl-conteudo p:last-child { margin-bottom: 0; }
.tl-conteudo strong { color: var(--roxo-escuro); }
.tl-conteudo .tl-tag {
  display: inline-block;
  background: var(--rosa-claro);
  color: var(--magenta);
  font-size: .75rem;
  font-weight: 700;
  padding: .2rem .75rem;
  border-radius: 2rem;
  margin-bottom: .75rem;
  letter-spacing: .04em;
}
/* Foto opcional dentro de um bloco de timeline */
.tl-img {
  width: 100%; height: 180px;
  object-fit: cover;
  border-radius: .75rem;
  margin-top: .75rem;
  background: var(--lilas);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--roxo-escuro);
  opacity: .5;
}

/* Versão mobile: timeline linear */
@media (max-width: 700px) {
  .timeline::before { left: 22px; transform: none; }
  .tl-item {
    grid-template-columns: 60px 1fr;
    grid-template-rows: auto;
    margin-bottom: 2.5rem;
  }
  .tl-item:nth-child(odd) .tl-marca,
  .tl-item:nth-child(even) .tl-marca  { grid-column: 1; grid-row: 1; }
  .tl-item:nth-child(odd) .tl-conteudo,
  .tl-item:nth-child(even) .tl-conteudo { grid-column: 2; grid-row: 1; }
  .tl-item:nth-child(odd) .tl-vazio,
  .tl-item:nth-child(even) .tl-vazio  { display: none; }
  .tl-item:nth-child(odd) .tl-conteudo::after  { display: none; }
  .tl-item:nth-child(even) .tl-conteudo::before { display: none; }
  .tl-conteudo::before {
    content: '';
    position: absolute;
    top: 1.2rem;
    left: -16px;
    border: 8px solid transparent;
    border-right-color: var(--branco);
  }
}

/* ============================================================
   SECÇÃO — IMPACTO NA FAMÍLIA
   ============================================================ */
.familia {
  padding: var(--padding-sec);
  background: var(--rosa-claro);
}
.familia .container { max-width: 900px; }
.familia-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.familia-texto p { color: #555; margin-bottom: 1.1rem; font-size: .97rem; }
.familia-texto p:last-child { margin-bottom: 0; }
.familia-texto strong { color: var(--roxo-escuro); }
.familia-visual {
  background: var(--branco);
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: var(--sombra);
  text-align: center;
}
.familia-visual .familia-icone {
  font-size: 3rem;
  margin-bottom: .75rem;
  display: block;
}
.familia-visual blockquote {
  font-style: italic;
  font-size: 1.05rem;
  color: var(--roxo-escuro);
  line-height: 1.6;
  position: relative;
  padding: 0 1rem;
}
.familia-visual blockquote::before {
  content: '"';
  font-family: Georgia, serif;
  font-size: 4rem;
  color: var(--lilas);
  line-height: 0;
  vertical-align: -1.4rem;
  margin-right: .1rem;
}
.familia-visual cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-size: .83rem;
  color: var(--magenta);
  font-weight: 700;
}
@media (max-width: 700px) {
  .familia-inner { grid-template-columns: 1fr; }
}

/* ============================================================
   SECÇÃO — COMO NASCEU A ASLA
   ============================================================ */
.como-nasceu {
  padding: var(--padding-sec);
  background: var(--branco);
}
.como-nasceu .container { max-width: 900px; }
.nasceu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  margin-top: 2.5rem;
}
.nasceu-texto p { color: #555; margin-bottom: 1.1rem; font-size: .97rem; }
.nasceu-texto p strong { color: var(--roxo-escuro); }
.nasceu-lema {
  background: var(--roxo-escuro);
  color: var(--branco);
  border-radius: 1.5rem;
  padding: 2.5rem;
  text-align: center;
}
.nasceu-lema .lema-label {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lilas);
  margin-bottom: .75rem;
}
.nasceu-lema .lema-frase {
  font-family: var(--font-titulo);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--branco);
  line-height: 1.2;
  margin-bottom: 1rem;
}
.nasceu-lema .lema-frase span { color: var(--lilas); }
.nasceu-lema .lema-descricao {
  font-size: .9rem;
  color: rgba(255,255,255,.7);
  line-height: 1.6;
}
@media (max-width: 700px) {
  .nasceu-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-final {
  padding: 5rem 1.5rem;
  background: linear-gradient(135deg, var(--rosa-claro), #fce8f0);
  text-align: center;
}
.cta-final .container { max-width: 700px; }
.cta-final .cta-coracao {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 1rem;
}
.cta-final h2 {
  font-family: var(--font-titulo);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 800;
  color: var(--roxo-escuro);
  margin-bottom: .75rem;
  line-height: 1.3;
}
.cta-final p {
  font-size: 1.05rem;
  color: rgba(61,44,107,.7);
  margin-bottom: 2rem;
  max-width: 48ch;
  margin-inline: auto;
}
.cta-final .cta-botoes { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* ============================================================
   PÁGINA NOTÍCIAS — GRELHA
   ============================================================ */
.noticias-pagina {
  padding: var(--padding-sec);
  background: var(--branco);
}
.noticias-pagina .container { max-width: var(--max-largura); }

/* Cartão featured (primeiro, ocupa toda a largura) */
.noticia-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--sombra);
  margin-bottom: 2.5rem;
  transition: box-shadow .25s;
  background: var(--branco);
}
.noticia-featured:hover { box-shadow: var(--sombra-hover); }
.noticia-featured .feat-img {
  min-height: 300px;
  background: var(--lilas);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  color: var(--roxo-escuro);
  opacity: .55;
  overflow: hidden;
}
.noticia-featured .feat-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 1;
}
.noticia-featured .feat-corpo {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .75rem;
}
.noticia-featured .feat-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--rosa-claro);
  color: var(--magenta);
  font-size: .75rem;
  font-weight: 700;
  padding: .25rem .85rem;
  border-radius: 2rem;
  letter-spacing: .04em;
  width: fit-content;
}
.noticia-featured .feat-data {
  font-size: .82rem;
  color: #999;
  font-weight: 600;
}
.noticia-featured h2 {
  font-family: var(--font-titulo);
  font-size: clamp(1.25rem, 2.5vw, 1.7rem);
  font-weight: 800;
  color: var(--roxo-escuro);
  line-height: 1.3;
}
.noticia-featured .feat-resumo {
  font-size: .97rem;
  color: #555;
  line-height: 1.7;
}
.noticia-featured a.btn { align-self: flex-start; margin-top: .5rem; }

@media (max-width: 768px) {
  .noticia-featured { grid-template-columns: 1fr; }
  .noticia-featured .feat-img { min-height: 200px; font-size: 3rem; }
  .noticia-featured .feat-corpo { padding: 1.75rem; }
}

/* Grelha de cartões normais */
.noticias-grelha {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Cartão normal — reutiliza .noticia-card do index mas com override */
.noticias-grelha .noticia-card .noticia-img-wrap {
  width: 100%;
  height: 190px;
  background: var(--lilas);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--roxo-escuro);
  opacity: .55;
  overflow: hidden;
}
.noticias-grelha .noticia-card .noticia-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: transform .4s;
}
.noticias-grelha .noticia-card:hover .noticia-img-wrap img { transform: scale(1.06); }
.noticias-grelha .noticia-card .noticia-corpo { padding: 1.25rem; }
.noticias-grelha .noticia-card .noticia-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .6rem;
}
.tag-pill {
  font-size: .7rem;
  font-weight: 700;
  padding: .2rem .65rem;
  border-radius: 2rem;
  letter-spacing: .04em;
}
.tag-pill.evento   { background: #fce8f0; color: var(--magenta); }
.tag-pill.campanha { background: #ede8f9; color: var(--roxo-escuro); }
.tag-pill.leonor   { background: var(--rosa-claro); color: #b02959; }
.tag-pill.parceria { background: #e8f4e8; color: #2e6b2e; }
.tag-pill.recolha  { background: #fff3e0; color: #b36200; }

.noticias-grelha .noticia-card .noticia-data {
  font-size: .78rem;
  color: #bbb;
  font-weight: 600;
  margin-bottom: .4rem;
}
.noticias-grelha .noticia-card h3 {
  font-family: var(--font-titulo);
  font-size: 1rem;
  font-weight: 700;
  color: var(--roxo-escuro);
  line-height: 1.35;
  margin-bottom: .5rem;
}
.noticias-grelha .noticia-card p {
  font-size: .875rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.noticias-grelha .noticia-card .ler-mais {
  font-size: .83rem;
  font-weight: 700;
  color: var(--magenta);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  transition: gap .2s;
}
.noticias-grelha .noticia-card .ler-mais:hover { gap: .6rem; }

@media (max-width: 900px) {
  .noticias-grelha { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .noticias-grelha { grid-template-columns: 1fr; }
}

/* Paginação */
.paginacao {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin-top: 3rem;
  flex-wrap: wrap;
}
.paginacao a,
.paginacao span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: .5rem;
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: .9rem;
  transition: background .2s, color .2s;
}
.paginacao a {
  background: var(--branco);
  color: var(--roxo-escuro);
  box-shadow: var(--sombra);
}
.paginacao a:hover { background: var(--rosa-claro); color: var(--magenta); }
.paginacao span.atual {
  background: var(--magenta);
  color: var(--branco);
  box-shadow: var(--sombra-hover);
}
.paginacao .pag-reticencias {
  background: none;
  box-shadow: none;
  color: #bbb;
  cursor: default;
}
.carregar-mais {
  text-align: center;
  margin-top: 2rem;
}

/* CTA redes sociais */
.cta-redes {
  padding: 4rem 1.5rem;
  background: var(--roxo-escuro);
  text-align: center;
  color: var(--branco);
}
.cta-redes .container { max-width: 600px; }
.cta-redes h2 {
  font-family: var(--font-titulo);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  margin-bottom: .75rem;
}
.cta-redes p {
  color: rgba(255,255,255,.72);
  font-size: 1rem;
  margin-bottom: 2rem;
  max-width: 44ch;
  margin-inline: auto;
}
.redes-lista {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.rede-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.5rem;
  border-radius: 2rem;
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: .9rem;
  transition: transform .2s, box-shadow .2s;
  color: var(--branco);
}
.rede-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.rede-btn.facebook  { background: #1877F2; }
.rede-btn.instagram { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.rede-btn.email     { background: var(--magenta); }

/* ============================================================
   PÁGINA GALERIA — FILTROS
   ============================================================ */
.galeria-pagina {
  padding: var(--padding-sec);
  background: var(--branco);
}
.galeria-pagina .container { max-width: var(--max-largura); }

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 2.5rem;
}
.filtro-btn {
  padding: .5rem 1.25rem;
  border-radius: 2rem;
  border: 2px solid var(--lilas);
  background: var(--branco);
  color: var(--roxo-escuro);
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: .88rem;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.filtro-btn:hover {
  background: var(--rosa-claro);
  border-color: var(--magenta);
  color: var(--magenta);
}
.filtro-btn.ativo {
  background: var(--magenta);
  border-color: var(--magenta);
  color: var(--branco);
}

/* ============================================================
   GALERIA — GRELHA PRINCIPAL
   Usa CSS grid com células de alturas variadas (span) para
   simular masonry sem JavaScript extra.
   ============================================================ */
.galeria-grid-principal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: .75rem;
}

.gal-item {
  position: relative;
  overflow: hidden;
  border-radius: .75rem;
  cursor: pointer;
  background: var(--lilas);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Célula dupla vertical */
.gal-item.tall  { grid-row:    span 2; }
/* Célula dupla horizontal */
.gal-item.wide  { grid-column: span 2; }
/* Célula 2×2 */
.gal-item.big   { grid-column: span 2; grid-row: span 2; }

/* Imagem / placeholder */
.gal-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}
.gal-placeholder {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  color: rgba(61,44,107,.4);
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: .85rem;
  background: linear-gradient(135deg, var(--lilas) 0%, #ddd0f5 100%);
  pointer-events: none;
  user-select: none;
}
.gal-placeholder .ph-icone { font-size: 2rem; opacity: .5; }

/* Overlay de hover */
.gal-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(61,44,107,.35);
  opacity: 0;
  transition: opacity .3s;
}
.gal-item:hover::after  { opacity: 1; }
.gal-item:hover img     { transform: scale(1.07); }

/* Ícone de lupa no hover */
.gal-lupa {
  position: absolute;
  z-index: 2;
  color: var(--branco);
  font-size: 1.6rem;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.gal-item:hover .gal-lupa { opacity: 1; transform: scale(1); }

/* Legenda discreta */
.gal-legenda {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: .6rem .85rem;
  background: linear-gradient(to top, rgba(61,44,107,.75) 0%, transparent 100%);
  color: var(--branco);
  font-size: .78rem;
  font-weight: 600;
  z-index: 2;
  transform: translateY(100%);
  transition: transform .3s;
}
.gal-item:hover .gal-legenda { transform: translateY(0); }

/* Responsive: colapsa em menos colunas */
@media (max-width: 900px) {
  .galeria-grid-principal {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 170px;
  }
  .gal-item.big { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 600px) {
  .galeria-grid-principal {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 150px;
  }
  .gal-item.wide { grid-column: span 2; }
  .gal-item.tall { grid-row: span 1; }
  .gal-item.big  { grid-column: span 2; grid-row: span 1; }
}

/* Itens ocultos pelo filtro */
.gal-item.oculto {
  display: none;
}

/* ============================================================
   GALERIA — LIGHTBOX
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 10, 30, .93);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s;
}
.lightbox.aberto {
  opacity: 1;
  pointer-events: all;
}
.lb-img-wrap {
  position: relative;
  max-width: min(90vw, 960px);
  max-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-img-wrap img {
  max-width: 100%;
  max-height: 85vh;
  border-radius: .75rem;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  user-select: none;
  -webkit-user-drag: none;
}
/* Placeholder no lightbox quando não há imagem real */
.lb-placeholder {
  width: min(80vw, 700px);
  height: min(70vh, 500px);
  background: linear-gradient(135deg, var(--lilas) 0%, #ddd0f5 100%);
  border-radius: .75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: rgba(61,44,107,.5);
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1.1rem;
}
.lb-placeholder .lb-ph-icone { font-size: 3.5rem; opacity: .5; }

.lb-legenda {
  position: absolute;
  bottom: -2.2rem;
  left: 0; right: 0;
  text-align: center;
  color: rgba(255,255,255,.65);
  font-size: .85rem;
  font-weight: 600;
}
.lb-fechar {
  position: fixed;
  top: 1rem; right: 1.25rem;
  background: rgba(255,255,255,.12);
  border: none;
  color: var(--branco);
  font-size: 1.5rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
  z-index: 1001;
}
.lb-fechar:hover { background: var(--magenta); }

.lb-nav {
  position: fixed;
  top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.1);
  border: none;
  color: var(--branco);
  font-size: 1.6rem;
  width: 50px; height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s;
  z-index: 1001;
}
.lb-nav:hover { background: var(--magenta); }
.lb-nav.prev { left: 1rem; }
.lb-nav.next { right: 1rem; }
.lb-nav:active { transform: translateY(-50%) scale(.92); }

.lb-contador {
  position: fixed;
  bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.5);
  font-size: .82rem;
  font-family: var(--font-titulo);
  font-weight: 700;
  letter-spacing: .05em;
  z-index: 1001;
}

@media (max-width: 600px) {
  .lb-nav.prev { left: .25rem; }
  .lb-nav.next { right: .25rem; }
}

/* ============================================================
   GALERIA — SECÇÃO VÍDEOS
   ============================================================ */
.galeria-videos {
  padding: var(--padding-sec);
  background: var(--rosa-claro);
}
.galeria-videos .container { max-width: var(--max-largura); }
.videos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.video-placeholder {
  aspect-ratio: 16/9;
  background: var(--roxo-escuro);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  color: rgba(255,255,255,.55);
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: .9rem;
  text-align: center;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}
.video-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(201,182,228,.08), transparent);
}
.video-play {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  color: var(--branco);
}
.video-desc {
  font-size: .82rem;
  color: rgba(255,255,255,.45);
  font-weight: 400;
  margin-top: .2rem;
}
/* iframe real (quando se adicionar embed) */
.videos-grid iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  border-radius: var(--radius-card);
}
@media (max-width: 640px) {
  .videos-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CTA PARTILHA FOTOS
   ============================================================ */
.cta-partilha {
  padding: 4.5rem 1.5rem;
  text-align: center;
  background: linear-gradient(135deg, var(--rosa-claro), #fce8f0);
}
.cta-partilha .container { max-width: 640px; }
.cta-partilha .cta-coracao { font-size: 2.5rem; display: block; margin-bottom: 1rem; }
.cta-partilha h2 {
  font-family: var(--font-titulo);
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: 800;
  color: var(--roxo-escuro);
  margin-bottom: .75rem;
  line-height: 1.3;
}
.cta-partilha p {
  color: rgba(61,44,107,.7);
  font-size: 1rem;
  margin-bottom: 2rem;
  max-width: 46ch;
  margin-inline: auto;
}
.cta-partilha .cta-botoes { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* ============================================================
   PÁGINA CONTACTOS
   ============================================================ */
.contactos-pagina {
  padding: var(--padding-sec);
  background: var(--branco);
}
.contactos-pagina .container { max-width: var(--max-largura); }
.contactos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}
@media (max-width: 820px) {
  .contactos-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* --- Formulário --- */
.form-contacto { display: flex; flex-direction: column; gap: 1.1rem; }

.form-grupo { display: flex; flex-direction: column; gap: .35rem; }
.form-grupo label {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: .88rem;
  color: var(--roxo-escuro);
}
.form-grupo label .obrigatorio { color: var(--magenta); margin-left: .1rem; }

.form-grupo input,
.form-grupo select,
.form-grupo textarea {
  width: 100%;
  padding: .75rem 1rem;
  border: 2px solid var(--lilas);
  border-radius: .65rem;
  font-family: var(--font-texto);
  font-size: .95rem;
  color: var(--roxo-escuro);
  background: var(--branco);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.form-grupo input:focus,
.form-grupo select:focus,
.form-grupo textarea:focus {
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px rgba(214,51,108,.12);
}
.form-grupo input.erro,
.form-grupo select.erro,
.form-grupo textarea.erro {
  border-color: #e05260;
  box-shadow: 0 0 0 3px rgba(224,82,96,.1);
}
.form-grupo .msg-erro {
  font-size: .78rem;
  color: #c0392b;
  font-weight: 600;
  display: none;
}
.form-grupo .msg-erro.visivel { display: block; }

.form-grupo textarea { resize: vertical; min-height: 130px; }

/* Select arrow custom */
.select-wrap { position: relative; }
.select-wrap::after {
  content: '\f107';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  right: 1rem;
  top: 50%; transform: translateY(-50%);
  color: var(--magenta);
  pointer-events: none;
}

.form-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 500px) { .form-linha { grid-template-columns: 1fr; } }

.form-aviso {
  font-size: .8rem;
  color: #999;
  line-height: 1.5;
}

/* Mensagem de sucesso */
.form-sucesso {
  display: none;
  background: #e8f7ee;
  border: 2px solid #4caf82;
  border-radius: .75rem;
  padding: 1.5rem;
  text-align: center;
  color: #276642;
  font-family: var(--font-titulo);
  font-weight: 700;
}
.form-sucesso.visivel { display: block; }
.form-sucesso .sucesso-icon { font-size: 2rem; display: block; margin-bottom: .5rem; }

/* --- Coluna B — Informação --- */
.info-contacto { display: flex; flex-direction: column; gap: 2rem; }

.info-bloco {
  background: var(--rosa-claro);
  border-radius: var(--radius-card);
  padding: 1.5rem;
}
.info-bloco h3 {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1rem;
  color: var(--magenta);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.info-linha {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .75rem;
  font-size: .92rem;
  color: #555;
}
.info-linha:last-child { margin-bottom: 0; }
.info-linha .info-icone {
  color: var(--magenta);
  font-size: 1rem;
  margin-top: .15rem;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}
.info-linha a { color: var(--roxo-escuro); font-weight: 600; transition: color .2s; }
.info-linha a:hover { color: var(--magenta); }
.info-linha strong { color: var(--roxo-escuro); }

/* Redes sociais na coluna B */
.info-redes {
  display: flex;
  gap: .75rem;
  margin-top: .25rem;
}
.info-rede {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem 1rem;
  border-radius: 2rem;
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: .82rem;
  color: var(--branco);
  transition: transform .2s, opacity .2s;
}
.info-rede:hover { transform: translateY(-2px); opacity: .9; }
.info-rede.fb  { background: #1877F2; }
.info-rede.ig  { background: linear-gradient(135deg,#f09433,#dc2743,#bc1888); }

/* Mapa placeholder */
.mapa-placeholder {
  width: 100%;
  aspect-ratio: 16/8;
  background: linear-gradient(135deg, var(--lilas) 0%, #e8dff5 100%);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: rgba(61,44,107,.5);
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: .88rem;
  text-align: center;
  padding: 1rem;
}
.mapa-placeholder .mapa-icone { font-size: 2.5rem; opacity: .6; }
/* iframe real (quando se inserir embed do Google Maps) */
.mapa-placeholder iframe {
  width: 100%; height: 100%;
  border: none;
  border-radius: var(--radius-card);
}

/* CTA discreta no fundo */
.cta-ajuda-discreta {
  padding: 3.5rem 1.5rem;
  text-align: center;
  background: var(--rosa-claro);
}
.cta-ajuda-discreta .container { max-width: 580px; }
.cta-ajuda-discreta p {
  font-size: 1rem;
  color: var(--roxo-escuro);
  margin-bottom: 1.25rem;
}
.cta-ajuda-discreta p strong { color: var(--magenta); }

/* ============================================================
   PÁGINA COMO AJUDAR
   ============================================================ */

/* Hero com badge de custo anual */
.hero-ajudar {
  background: linear-gradient(135deg, var(--rosa-claro) 0%, #fce8f0 60%, var(--lilas) 100%);
  padding: 4.5rem 1.5rem 3.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-ajudar::before {
  content: '♥';
  position: absolute;
  font-size: 18rem;
  color: rgba(214,51,108,.04);
  right: -2rem; top: -3rem;
  line-height: 1;
  pointer-events: none;
}
.hero-ajudar .breadcrumb { font-size: .85rem; color: rgba(61,44,107,.55); margin-bottom: 1rem; }
.hero-ajudar .breadcrumb a { color: var(--magenta); font-weight: 600; }
.hero-ajudar .breadcrumb a:hover { text-decoration: underline; }
.hero-ajudar h1 {
  font-family: var(--font-titulo);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--roxo-escuro);
  margin-bottom: .75rem;
}
.hero-ajudar h1 em { font-style: normal; color: var(--magenta); }
.hero-ajudar .hero-descricao {
  font-size: 1.05rem;
  color: rgba(61,44,107,.75);
  max-width: 54ch;
  margin-inline: auto;
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

/* Badge de custo anual */
.badge-custo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 170px; height: 170px;
  border-radius: 50%;
  background: var(--magenta);
  color: var(--branco);
  box-shadow: 0 8px 32px rgba(214,51,108,.35);
  margin-inline: auto;
  gap: .1rem;
}
.badge-custo .custo-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .85;
}
.badge-custo .custo-valor {
  font-family: var(--font-titulo);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
}
.badge-custo .custo-sub {
  font-size: .75rem;
  opacity: .8;
  text-align: center;
  max-width: 120px;
  line-height: 1.3;
}

/* ---- Navegação âncoras ---- */
.ancora-nav {
  padding: 1.5rem 1.5rem 0;
  display: flex;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.ancora-nav a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1.1rem;
  border-radius: 2rem;
  background: var(--branco);
  border: 2px solid var(--lilas);
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: .85rem;
  color: var(--roxo-escuro);
  transition: background .2s, border-color .2s, color .2s;
  box-shadow: var(--sombra);
}
.ancora-nav a:hover {
  background: var(--magenta);
  border-color: var(--magenta);
  color: var(--branco);
}

/* ============================================================
   SECÇÃO DONATIVOS
   ============================================================ */
.sec-donativos {
  padding: var(--padding-sec);
  background: var(--branco);
}
.sec-donativos .container { max-width: var(--max-largura); }

.donativos-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: start;
  margin-top: 2.5rem;
}
@media (max-width: 820px) { .donativos-grid { grid-template-columns: 1fr; } }

/* Cartão de pagamento */
.cartao-pagamento {
  background: var(--roxo-escuro);
  color: var(--branco);
  border-radius: 1.5rem;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
}
.cartao-pagamento::before {
  content: '';
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  top: -80px; right: -80px;
}
.cartao-pagamento::after {
  content: '';
  position: absolute;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(214,51,108,.12);
  bottom: -60px; left: -40px;
}
.cartao-pagamento h3 {
  font-family: var(--font-titulo);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--lilas);
  margin-bottom: 1.5rem;
  position: relative; z-index: 1;
}
.dado-pagamento {
  background: rgba(255,255,255,.07);
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  margin-bottom: .85rem;
  position: relative; z-index: 1;
}
.dado-pagamento:last-of-type { margin-bottom: 0; }
.dado-pagamento .dp-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lilas);
  margin-bottom: .3rem;
}
.dado-pagamento .dp-valor {
  font-family: var(--font-titulo);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--branco);
  letter-spacing: .02em;
  word-break: break-all;
}
.dado-pagamento .dp-copiar {
  float: right;
  background: none;
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.6);
  border-radius: .4rem;
  padding: .2rem .6rem;
  font-size: .72rem;
  cursor: pointer;
  transition: background .2s, color .2s;
  margin-top: -.1rem;
}
.dado-pagamento .dp-copiar:hover { background: var(--magenta); color: var(--branco); border-color: var(--magenta); }
.cartao-nif {
  margin-top: 1.25rem;
  font-size: .8rem;
  color: rgba(255,255,255,.5);
  position: relative; z-index: 1;
  line-height: 1.5;
}

/* Coluna de destino dos fundos */
.donativos-destino h3 {
  font-family: var(--font-titulo);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--roxo-escuro);
  margin-bottom: 1.25rem;
}
.destino-lista { display: flex; flex-direction: column; gap: .85rem; }
.destino-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--rosa-claro);
  border-radius: var(--radius-card);
  border-left: 4px solid var(--magenta);
}
.destino-item .di-icone {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: .1rem;
}
.destino-item .di-texto strong {
  display: block;
  font-family: var(--font-titulo);
  font-size: .95rem;
  font-weight: 700;
  color: var(--roxo-escuro);
  margin-bottom: .2rem;
}
.destino-item .di-texto span { font-size: .88rem; color: #666; }

/* ============================================================
   SECÇÃO TAMPINHAS
   ============================================================ */
.sec-tampinhas {
  padding: var(--padding-sec);
  background: var(--roxo-escuro);
  position: relative;
  overflow: hidden;
  color: var(--branco);
}
/* Silhuetas decorativas como fundo */
.sec-tampinhas .silhuetas-fundo {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  opacity: .07;
  pointer-events: none;
}
.sec-tampinhas .silhuetas-fundo svg { width: 100%; height: auto; display: block; }
.sec-tampinhas .container { max-width: var(--max-largura); position: relative; z-index: 1; }
.sec-tampinhas .divisor-coracao::before,
.sec-tampinhas .divisor-coracao::after { background: rgba(255,255,255,.2); }
.sec-tampinhas .secao-titulo { color: var(--branco); }
.sec-tampinhas .secao-subtitulo { color: rgba(255,255,255,.65); }

.tampinhas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  margin-top: 2.5rem;
}
@media (max-width: 768px) { .tampinhas-grid { grid-template-columns: 1fr; } }

/* O que recolhemos */
.recolha-tipos h4 {
  font-family: var(--font-titulo);
  font-size: 1rem;
  font-weight: 700;
  color: var(--lilas);
  margin-bottom: 1rem;
}
.tipo-lista { display: flex; flex-direction: column; gap: .6rem; }
.tipo-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .93rem;
  color: rgba(255,255,255,.85);
}
.tipo-item .tipo-icone {
  font-size: 1.3rem;
  flex-shrink: 0;
}
.tipo-item strong { color: var(--branco); }

/* Pontos de entrega */
.pontos-entrega h4 {
  font-family: var(--font-titulo);
  font-size: 1rem;
  font-weight: 700;
  color: var(--lilas);
  margin-bottom: 1rem;
}
.ponto-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .9rem 1.1rem;
  background: rgba(255,255,255,.06);
  border-radius: .65rem;
  margin-bottom: .65rem;
  border-left: 3px solid var(--lilas);
}
.ponto-item:last-child { margin-bottom: 0; }
.ponto-item .ponto-icone { color: var(--lilas); font-size: 1rem; margin-top: .15rem; flex-shrink: 0; }
.ponto-item .ponto-texto { font-size: .9rem; color: rgba(255,255,255,.8); line-height: 1.5; }
.ponto-item .ponto-texto strong { color: var(--branco); display: block; }

/* ============================================================
   SECÇÃO VOLUNTARIADO
   ============================================================ */
.sec-voluntariado {
  padding: var(--padding-sec);
  background: var(--rosa-claro);
}
.sec-voluntariado .container { max-width: var(--max-largura); }

.voluntariado-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 3rem;
  align-items: start;
  margin-top: 2.5rem;
}
@media (max-width: 820px) { .voluntariado-grid { grid-template-columns: 1fr; } }

/* Texto de convite */
.voluntariado-intro p {
  color: #555;
  margin-bottom: 1.1rem;
  font-size: .97rem;
}
.voluntariado-intro p strong { color: var(--roxo-escuro); }
.areas-lista { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.5rem; }
.area-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .9rem;
  color: var(--roxo-escuro);
  background: var(--branco);
  padding: .65rem 1rem;
  border-radius: .65rem;
  box-shadow: var(--sombra);
}
.area-item .area-icone { font-size: 1.2rem; flex-shrink: 0; }

/* Formulário de voluntariado (reutiliza estilos de .form-contacto) */
.form-voluntariado {
  background: var(--branco);
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: var(--sombra);
}
.form-voluntariado h3 {
  font-family: var(--font-titulo);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--roxo-escuro);
  margin-bottom: 1.5rem;
}

/* ============================================================
   CTA FINAL — COMO AJUDAR
   ============================================================ */
.cta-ajudar-final {
  padding: 5rem 1.5rem;
  background: linear-gradient(135deg, var(--magenta) 0%, #b02959 100%);
  text-align: center;
  color: var(--branco);
  position: relative;
  overflow: hidden;
}
.cta-ajudar-final::before {
  content: '♥';
  position: absolute;
  font-size: 20rem;
  color: rgba(255,255,255,.05);
  right: -2rem; top: -4rem;
  line-height: 1;
  pointer-events: none;
}
.cta-ajudar-final .container { max-width: 680px; position: relative; z-index: 1; }
.cta-ajudar-final .cta-coracao { font-size: 2.5rem; display: block; margin-bottom: 1rem; }
.cta-ajudar-final h2 {
  font-family: var(--font-titulo);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  margin-bottom: .75rem;
  line-height: 1.2;
}
.cta-ajudar-final p {
  font-size: 1.05rem;
  color: rgba(255,255,255,.82);
  margin-bottom: 2rem;
  max-width: 50ch;
  margin-inline: auto;
  line-height: 1.6;
}
.cta-ajudar-final .btn-branco {
  background: var(--branco);
  color: var(--magenta);
  font-weight: 800;
}
.cta-ajudar-final .btn-branco:hover {
  background: var(--rosa-claro);
}

/* ============================================================
   SELETOR DE IDIOMA / LANGUAGE SWITCHER
   ============================================================ */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: .15rem;
  margin-left: .75rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  flex-shrink: 0;
}
.lang-switcher a,
.lang-switcher span.lang-sep {
  text-decoration: none;
  padding: .2rem .3rem;
  border-radius: 4px;
  transition: color .2s, background .2s;
  line-height: 1;
}
.lang-switcher a {
  color: rgba(255,255,255,.55);
}
.lang-switcher a:hover {
  color: #fff;
  background: rgba(255,255,255,.12);
}
.lang-switcher a.ativo {
  color: var(--magenta);
  background: rgba(255,255,255,.1);
}
.lang-switcher .lang-sep {
  color: rgba(255,255,255,.22);
  padding: 0;
  font-weight: 400;
}
@media (max-width: 768px) {
  .lang-switcher {
    margin-left: 0;
    margin-top: .5rem;
    justify-content: center;
  }
}
/* Esconder lang-switcher no menu mobile quando fechado */
.nav-links:not(.aberto) .lang-switcher-mobile {
  display: none;
}