/* ============================================================
   Sempre Vale a Pena — design system único do site (v3, 05/07/2026)
   Fonte única de tokens, header, rodapé e componentes.
   Base 18px (público 50+ no celular) · contrastes AA medidos.
   ============================================================ */
/* Paleta das MARCAS: terracota do coração alado da CCEV (#a03000) como cor viva
   principal; verde-sálvia e dourado do brasão do Mosteiro da Esperança como
   secundárias. Contrastes AA medidos. */
:root{
  --bg:#fbf7f0; --ink:#2a2521; --muted:#6e6456; --line:#ece1d1;
  --card:#fffdf9; --accent:#a8371a; --on-accent:#ffffff; --accent-soft:#f6e2d6;
  --gold:#c08a2e; --gold-text:#7f571b; --ok:#2f6b47; --band:#e6efe7; --nav:#fffdf9ee;
  --err-ink:#9c3030; --err-bg:#fbeaea; --focus:#a8371a;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#191510; --ink:#efe7da; --muted:#b3a892; --line:#3a332a;
    --card:#221d17; --accent:#e8926a; --on-accent:#2a1206; --accent-soft:#33241c;
    --gold:#d9a566; --gold-text:#e0b070; --ok:#6cc48d; --band:#1b2620; --nav:#221d17ee;
    --err-ink:#e08a8a; --err-bg:#3a2020; --focus:#e8926a; }
}
:root[data-theme="light"]{
  --bg:#fbf7f0; --ink:#2a2521; --muted:#6e6456; --line:#ece1d1;
  --card:#fffdf9; --accent:#a8371a; --on-accent:#ffffff; --accent-soft:#f6e2d6;
  --gold:#c08a2e; --gold-text:#7f571b; --ok:#2f6b47; --band:#e6efe7; --nav:#fffdf9ee;
  --err-ink:#9c3030; --err-bg:#fbeaea; --focus:#a8371a;
}
:root[data-theme="dark"]{
  --bg:#191510; --ink:#efe7da; --muted:#b3a892; --line:#3a332a;
  --card:#221d17; --accent:#e8926a; --on-accent:#2a1206; --accent-soft:#33241c;
  --gold:#d9a566; --gold-text:#e0b070; --ok:#6cc48d; --band:#1b2620; --nav:#221d17ee;
  --err-ink:#e08a8a; --err-bg:#3a2020; --focus:#e8926a;
}

*{box-sizing:border-box}
html{font-size:112.5%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
[id]{scroll-margin-top:5rem}
body{margin:0;font-family:Georgia,'Times New Roman',serif;color:var(--ink);
  background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip:focus{left:1rem;top:.5rem;background:var(--accent);color:var(--on-accent);
  padding:.5rem .8rem;border-radius:8px;z-index:100}

/* Larguras */
.wrap{max-width:38rem;margin:0 auto;padding:0 1.25rem}
.wrap-largo{max-width:60rem;margin:0 auto;padding:0 1.25rem}

/* Escala tipográfica (6 degraus; piso informativo .875rem) */
h1{font-size:clamp(2.2rem,5vw + 1rem,3.2rem);line-height:1.12;font-weight:400;margin:.2rem 0 .6rem;text-wrap:balance}
h2{font-size:clamp(1.5rem,2.5vw + .8rem,1.9rem);line-height:1.25;font-weight:400;margin:0 0 1rem;color:var(--accent);text-wrap:balance}
h3{font-family:system-ui,-apple-system,sans-serif;font-size:1.125rem;margin:1.2rem 0 .3rem}
p{margin:.75rem 0}
.lead{font-size:1.125rem}
ul{padding-left:1.1rem;margin:.5rem 0}
li{margin:.35rem 0}
.kicker{font-family:system-ui,sans-serif;text-transform:uppercase;letter-spacing:.18em;
  font-size:.875rem;color:var(--gold-text);margin:0 0 .8rem}
.meta,figcaption{font-family:system-ui,sans-serif;font-size:.875rem;color:var(--muted)}

/* ---------- Header padrão (todas as páginas) ---------- */
.topo-site{position:sticky;top:0;z-index:40;background:var(--nav);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;padding:.4rem clamp(1rem,4vw,1.5rem);min-height:3.5rem}
.topo-site .brand{font-family:Georgia,serif;font-size:1.05rem;color:var(--ink);
  text-decoration:none;min-height:44px;display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.topo-site .brand img{height:28px;width:auto;flex:none}
.topo-site nav{display:flex;align-items:center;gap:.25rem}
.topo-site nav a{font-family:system-ui,sans-serif;font-size:.9375rem;color:var(--ink);
  text-decoration:none;padding:.55rem .9rem;border-radius:999px;min-height:44px;
  display:flex;align-items:center;white-space:nowrap}
.topo-site nav a:hover{background:var(--accent-soft)}
.topo-site nav a[aria-current="page"]{background:var(--accent-soft)}
.topo-site nav a.btn-topo{background:var(--accent);color:var(--on-accent);font-weight:600}
@media(max-width:420px){ .topo-site .brand{font-size:.95rem} .topo-site nav a{padding:.55rem .7rem} }

/* ---------- Botões e controles ---------- */
button,.cta{font-family:system-ui,sans-serif;font-size:1.0625rem;font-weight:600;
  background:var(--accent);color:var(--on-accent);border:0;border-radius:999px;
  padding:.75rem 1.5rem;min-height:3rem;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem}
button:disabled{opacity:.6;cursor:progress}
.cta.ghost,button.sec{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.cta.doar{background:var(--gold);color:#1a1206}
label{font-family:system-ui,sans-serif;font-size:.9375rem;font-weight:600}
input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select{font:inherit;font-size:1rem;padding:.7rem .8rem;border:1px solid var(--line);
  border-radius:10px;background:var(--card);color:var(--ink);width:100%;min-height:3rem}
/* radios e checkboxes ficam NATIVOS (a regra acima os transformava em caixas de 48px,
   deixando a bolinha desalinhada); só damos a cor da marca e o cursor. */
input[type=checkbox],input[type=radio]{width:22px;height:22px;accent-color:var(--accent);cursor:pointer}
textarea{min-height:130px;resize:vertical}
.field{display:grid;gap:.35rem}
.req-tag{font-family:system-ui,sans-serif;font-size:.8rem;font-weight:700;color:var(--on-accent);
  background:var(--accent);border-radius:999px;padding:.1rem .55rem;margin-left:.4rem;vertical-align:middle}
.opc-tag{font-family:system-ui,sans-serif;font-size:.8rem;font-weight:400;color:var(--muted);margin-left:.4rem}

/* ---------- Termômetro de doação (home #apoiar) ---------- */
.termometro{margin:1.1rem 0 1.2rem}
.termometro .barra{height:1.15rem;background:var(--accent-soft);border:1px solid var(--line);
  border-radius:999px;overflow:hidden}
.termometro .barra > i{display:block;height:100%;width:0;background:var(--ok);
  border-radius:999px;transition:width .7s ease}
@media (prefers-reduced-motion: reduce){.termometro .barra > i{transition:none}}
.termometro .nums{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;margin-top:.5rem;flex-wrap:wrap}
.termometro .nums .arre{font-family:system-ui,sans-serif;font-size:1.15rem;font-weight:700;color:var(--ink)}
.termometro .nums .meta{font-family:system-ui,sans-serif;font-size:.9375rem;color:var(--muted)}
.doar-valores{display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0 .3rem}
.doar-valores button{background:var(--card);color:var(--accent);border:1px solid var(--accent);
  padding:.6rem 1.05rem;font-size:1rem;min-height:2.8rem}
.doar-valores button.on{background:var(--accent);color:var(--on-accent)}
.pix-box{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:1rem;margin-top:1rem;text-align:center}
.pix-box img{width:min(240px,62vw);height:auto;image-rendering:pixelated;
  border-radius:8px;background:#fff;padding:.5rem;border:1px solid var(--line)}
.pix-copia{display:flex;gap:.4rem;margin-top:.7rem}
.pix-copia input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem}
.pix-copia button{white-space:nowrap;padding:.7rem 1rem}

/* ---------- Herói + páginas próprias (institucional) ---------- */
.hero .mission{font-size:1.2rem;line-height:1.55;max-width:34ch;margin:.1rem 0 1.4rem;color:var(--ink)}
.hero .mission strong{color:var(--accent)}
.page-cab{padding:clamp(2rem,6vw,3.2rem) 0 clamp(1.4rem,4vw,2rem);border-bottom:1px solid var(--line);background:var(--card)}
.page-cab .kicker{margin-bottom:.4rem}
.page-cab h1{margin:.1rem 0 .5rem}
.page-cab .sub{margin:0}
/* cartões que levam às páginas (home) */
.destaques{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.4rem}
@media(min-width:680px){.destaques{grid-template-columns:1fr 1fr}}
.destaque{display:flex;flex-direction:column;gap:.35rem;text-decoration:none;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.3rem;
  box-shadow:0 1px 2px #0000000a,0 6px 16px #0000000d;transition:border-color .15s,transform .15s}
.destaque:hover{border-color:var(--accent);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.destaque:hover{transform:none}}
.destaque h3{font-family:Georgia,serif;font-size:1.2rem;margin:0}
.destaque p{color:var(--muted);margin:0;flex:1}
.destaque .vai{font-family:system-ui,sans-serif;font-weight:600;color:var(--accent);margin-top:.2rem}
@media(max-width:520px){
  .topo-site{flex-wrap:wrap;justify-content:center;gap:.15rem;padding-top:.5rem;padding-bottom:.5rem}
  .topo-site .brand{flex:1 0 100%;justify-content:center;text-align:center}
  .topo-site nav{width:100%;justify-content:center;flex-wrap:wrap;gap:.25rem}
}

/* ---------- Linha do tempo (A história) ---------- */
.timeline{list-style:none;padding:0;margin:1.5rem 0 0;position:relative}
.timeline::before{content:"";position:absolute;left:.55rem;top:.3rem;bottom:.3rem;width:2px;background:var(--line)}
.timeline li{position:relative;padding-left:2.2rem;margin:1.1rem 0}
.timeline li::before{content:"";position:absolute;left:.15rem;top:.45rem;width:.85rem;height:.85rem;
  background:var(--accent);border-radius:50%;border:2px solid var(--bg)}
.timeline .ano{font-family:system-ui,sans-serif;font-weight:600;font-size:.9375rem;color:var(--gold-text);display:block}
/* ---------- Caminho do projeto (passos numerados) ---------- */
.caminho{counter-reset:passo;display:grid;gap:1rem;margin-top:1.5rem}
.passo{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem 1rem 3.4rem;position:relative}
section.alt .passo{background:var(--card)}
.passo::before{counter-increment:passo;content:counter(passo);position:absolute;left:1rem;top:1rem;
  width:1.7rem;height:1.7rem;border-radius:50%;background:var(--accent);color:var(--on-accent);
  font-family:system-ui,sans-serif;font-weight:700;font-size:1rem;display:grid;place-items:center}
.passo h3{margin:.1rem 0 .25rem;font-family:Georgia,serif;font-size:1.2rem}
.passo .agora{font-family:system-ui,sans-serif;font-size:.875rem;color:var(--gold-text);font-weight:600}

/* ---------- Cartões e blocos ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.5rem}
@media(max-width:560px){.cards{grid-template-columns:1fr}}
.note{font-family:system-ui,sans-serif;font-size:.875rem;color:var(--muted);
  background:var(--card);border:1px dashed var(--line);border-radius:10px;padding:.8rem 1rem;margin-top:1rem}
.msg{font-family:system-ui,sans-serif;font-size:.95rem;padding:.9rem 1rem;border-radius:10px;display:none}
.msg.ok{display:block;background:var(--accent-soft);color:var(--ok);border:1px solid var(--ok)}
.msg.err{display:block;background:var(--err-bg);color:var(--err-ink);border:1px solid var(--err-ink)}

/* ---------- Rodapé institucional padrão ---------- */
footer.rodape{border-top:1px solid var(--line);background:var(--card);
  padding:2.4rem 0 2.8rem;margin-top:3rem;color:var(--muted);
  font-family:system-ui,sans-serif;font-size:.9375rem}
footer.rodape .wrap-largo{display:grid;gap:1.1rem}
.rodape-top{display:flex;flex-wrap:wrap;gap:.9rem 2rem;justify-content:space-between;align-items:flex-start}
.rodape-marca .fnome{font-family:Georgia,serif;font-size:1.2rem;color:var(--ink);margin:0}
.rodape-marca .fsub{margin:.2rem 0 0;font-size:.875rem}
.rodape-links{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;align-items:center}
.rodape-links a{color:var(--ink);text-decoration:none;font-weight:600;white-space:nowrap;padding:.15rem 0}
.rodape-links a:hover{color:var(--accent);text-decoration:underline}
.rodape-ext{display:flex;flex-wrap:wrap;gap:.35rem 1.3rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.875rem}
.rodape-ext a{white-space:nowrap}
footer.rodape .fequipe{font-size:.82rem;margin:1rem 0 0;padding-top:1rem;border-top:1px solid var(--line);color:var(--muted)}
footer.rodape .fequipe a{color:var(--muted);text-decoration:none;font-weight:600}
footer.rodape .fequipe a:hover{color:var(--accent);text-decoration:underline}
/* Marcas (realização): logos da CCEV e do Mosteiro em "chips" brancos (legíveis nos 2 temas) */
.rodape-realiza{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.rodape-realiza .rlabel{font-family:system-ui,sans-serif;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);width:100%;margin:0}
.marca{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink)}
.marca .chip{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.4rem;display:grid;place-items:center;box-shadow:0 1px 2px #0000000f}
.marca .chip img{display:block;height:46px;width:auto}
.marca .mnome{font-family:Georgia,serif;font-size:.95rem;color:var(--ink);line-height:1.2}
.marca .mnome small{display:block;font-family:system-ui,sans-serif;font-size:.78rem;color:var(--muted)}
.marca:hover .chip{border-color:var(--accent)}
.marca:hover .mnome{color:var(--accent)}
/* marcas em tamanho maior (dentro de uma seção, ex.: "A comunidade") */
.marcas{display:flex;flex-wrap:wrap;gap:1.2rem 1.6rem;align-items:center;margin:1.4rem 0 .2rem}
.marcas .marca .chip img{height:76px}
@media(max-width:560px){.rodape-top{flex-direction:column;gap:.5rem}}

/* ---------- Componentes compartilhados (promovidos p/ todas as páginas) ---------- */
section{padding:clamp(2.6rem,7vw,4rem) 0}
section.alt{background:var(--band);border-block:1px solid var(--line)}
section.clima{background:var(--accent-soft)}
.sub{color:var(--muted);font-size:1.125rem;max-width:52ch}
.note{color:var(--muted);font-size:.95rem}
.acao-central{text-align:center;margin-top:1.8rem}
.contato-alt{margin-top:1.4rem;font-family:system-ui,sans-serif;font-size:.9375rem;text-align:center}
.oficiais{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}
.oficiais a{font-family:system-ui,sans-serif;font-size:.9375rem;text-decoration:none;color:var(--accent);
  border:1px solid var(--line);background:var(--card);border-radius:999px;padding:.6rem 1.1rem;
  min-height:44px;display:inline-flex;align-items:center;gap:.4rem}
.oficiais a:hover{border-color:var(--accent)}
/* títulos de cartão/passo em serifa (lente: h3 consistente) */
.card h3,.passo h3,.destino h3,.escolha h3{font-family:Georgia,serif;font-size:1.2rem}
/* Vídeo responsivo (16:9) */
.video-wrap{position:relative;width:100%;aspect-ratio:16/9;margin-top:1.3rem;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 6px 20px #00000018;background:#000}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Citação (fala do Irmão Bernardo) */
.citacao{margin:1.6rem 0 0;padding:1rem 1.3rem;border-left:4px solid var(--accent);background:var(--card);border-radius:0 12px 12px 0}
.citacao p{font-family:Georgia,serif;font-size:1.2rem;font-style:italic;line-height:1.5;margin:0}
.citacao cite{display:block;margin-top:.6rem;font-family:system-ui,sans-serif;font-style:normal;font-weight:600;font-size:.9rem;color:var(--gold-text)}
/* Foto dentro do texto da biografia */
.foto-bio{max-width:480px;margin:1.6rem auto .4rem}
.foto-bio img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);box-shadow:0 6px 20px #00000018;display:block}
.foto-bio figcaption{text-align:center;margin-top:.5rem}
/* Galeria curada (fotos reais da comunidade) */
.galeria-cur{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-top:1.4rem}
.galeria-cur figure{margin:0;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  cursor:pointer;transition:transform .15s,box-shadow .15s}
.galeria-cur figure:hover{transform:translateY(-3px);box-shadow:0 10px 28px #00000022}
@media (prefers-reduced-motion: reduce){.galeria-cur figure{transition:none} .galeria-cur figure:hover{transform:none}}
.galeria-cur img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--bg)}
.galeria-cur figcaption{padding:.7rem .9rem;font-family:system-ui,sans-serif;font-size:.9rem;color:var(--muted)}
.galeria-cur figure:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* profundidade suave (lente M1): borda + sombra leve, some no dark sem quebrar */
.card,.destino,.pix-box,.escolha{box-shadow:0 1px 2px #0000000a,0 6px 16px #0000000d}
@media (prefers-color-scheme:dark){ .card,.destino,.pix-box,.escolha{box-shadow:0 1px 2px #00000030} }

/* ---------- Revisão de celular: nada estoura a largura da tela ---------- */
@media(max-width:560px){
  html,body{overflow-x:hidden}
  .hero-marca{flex-wrap:wrap;gap:.45rem .6rem}
  .hero-marca h1{font-size:clamp(1.9rem,9vw,2.5rem);line-height:1.12}
  .hero-acao{flex-direction:column;align-items:stretch}
  .hero-acao .cta{width:100%;justify-content:center}
  .apoio{min-width:0;flex:1 1 100%}
}

/* ---------- Menu de celular (botão hambúrguer) ---------- */
.menu-btn{display:none}
@media(max-width:560px){
  .topo-site{flex-wrap:wrap;justify-content:space-between;align-items:center}
  .topo-site .brand{flex:0 1 auto;justify-content:flex-start;text-align:left;order:1}
  .menu-btn{display:inline-flex;order:2;flex-direction:column;justify-content:center;gap:5px;
    width:46px;height:46px;padding:12px;background:transparent;border:1px solid var(--line);border-radius:10px;cursor:pointer}
  .menu-btn span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
  .topo-site.nav-aberto .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .topo-site.nav-aberto .menu-btn span:nth-child(2){opacity:0}
  .topo-site.nav-aberto .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .topo-site nav{display:none;order:3;flex:1 0 100%;width:100%;flex-direction:column;align-items:stretch;
    gap:.15rem;padding-top:.5rem;margin-top:.4rem;border-top:1px solid var(--line)}
  .topo-site.nav-aberto nav{display:flex}
  .topo-site nav a{width:100%;justify-content:flex-start;padding:.8rem .85rem;border-radius:10px;min-height:48px}
  .topo-site nav a.btn-topo,.topo-site nav a.btn-doar{justify-content:center;margin-top:.2rem}
}

/* ===== DEDO EM VEZ DE MOUSE (29/08/2026) =====================================
   Medido num telefone de 390px: os links do rodapé tinham 32px de altura e os
   telefones da página de contato, 29px. A vacina de estilo §4.5 pede alvo de
   toque grande — o público é de gente simples e em boa parte com mais de 50
   anos, e um telefone é justamente o link que essa pessoa vai TOCAR para ligar.
   Vale por tipo de ponteiro: no computador, com mouse, nada muda.             */
@media (pointer:coarse){
  .rodape-links a,.rodape-ext a,footer.rodape .fequipe a{
    min-height:44px;display:inline-flex;align-items:center}
  .info-linha a{min-height:44px;display:inline-flex;align-items:center}
}