/*
Theme Name: Lar Comunitário São Vicente de Paulo
Theme URI: https://saovicentedepauloguarani.org.br
Description: Tema institucional com Portal da Transparência para ILPI. Acessível (WCAG AA), leve, sem dependências externas. Desenvolvido para o Lar Comunitário São Vicente de Paulo — Guarani/MG.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: larcomunitario
License: GPLv2 or later
*/

/* ========================================================================
   ESTE ARQUIVO É GERADO — não edite à mão.
   ------------------------------------------------------------------------
   O visual do tema e o da prévia saem do mesmo arquivo de origem. Editar
   aqui faz a correção se perder no próximo build, e recria a divergência
   que custou caro em julho de 2026 (ver DECISOES.md A-10).
   ======================================================================== */


:root{
  /* LARANJA — cor principal */
  --lar-forte:#E8641E; --lar:#DE5A16; --lar-escuro:#C0410F; --lar-profundo:#A03509;
  --lar-suave:#F7A574; --lar-fraco:#FBE3D2; --lar-nevoa:#FDF4EE; --lar-papel:#FEFAF7;
  --lar-vidro:rgba(232,100,30,.09); --lar-vidro-borda:rgba(232,100,30,.20);
  --lar-linha:#F2DCCB;

  /* MARROM — títulos e textos de destaque */
  --marrom-claro:#C89478; --marrom:#A87860; --marrom-medio:#8A5348;
  --marrom-escuro:#6E4038; --marrom-cafe:#4A2A24;

  /* VERDE — botões e ações */
  --verde-claro:#29B372; --verde:#1E9E63; --verde-escuro:#18804F; --verde-link:#177A4C;
  --zap:#25D366; --zap-escuro:#128C4A;

  --ambar:#F0C070; --ambar-forte:#F0A83C; --ambar-escuro:#B07B1E;

  --texto:#2A231F; --texto-sec:#6B5C54; --linha:#EFE3D9;
  --fundo:#fff; --fundo-alt:#FDF7F2; --fundo-caixa:#FBEDE2;
  --ok:#1F6B3A; --ok-bg:#E6F4EA; --alerta:#8A5A00; --alerta-bg:#FFF4D6; --erro:#A32020; --erro-bg:#FBEAEA;
  --fonte:'Segoe UI',system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --larg:1240px; --larg-texto:46rem;
  --r:14px; --r-pill:999px;
  --seta-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --sombra:0 1px 3px rgba(42,35,31,.05),0 6px 22px rgba(42,35,31,.055);
  --sombra-alta:0 4px 14px rgba(42,35,31,.08),0 16px 42px rgba(42,35,31,.10);
  --grad-lar:linear-gradient(100deg,#EC6D26 0%,#E4611E 50%,#D9571A 100%);
  --grad-lar-sutil:linear-gradient(100deg,#EE7229 0%,#E86322 100%);
  --grad-lar-claro:linear-gradient(100deg,#FBB681 0%,#F79E62 100%);
  --t:.28s cubic-bezier(.4,0,.2,1);
}
html[data-fonte="1"]{font-size:112.5%} html[data-fonte="2"]{font-size:125%}
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fundo);color:var(--texto);font-family:var(--fonte);font-size:18px;line-height:1.65}
img{max-width:100%;height:auto;display:block}
a{color:var(--verde-link);text-underline-offset:3px}
a:hover{color:#0F6640}
:focus-visible{outline:3px solid var(--lar-escuro);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .6em;color:var(--marrom-escuro);font-weight:800;letter-spacing:-.015em}
h1{font-size:2.5rem} h2{font-size:1.85rem} h3{font-size:1.2rem}
p,ul,ol{margin:0 0 1.1em}
.conteudo p,.conteudo li{max-width:var(--larg-texto)}
.container{width:100%;max-width:var(--larg);margin-inline:auto;padding-inline:1.5rem}
.secao{padding-block:4rem}
.secao--alt{background:var(--lar-nevoa)}
.pular{position:absolute;left:-9999px;background:var(--marrom-escuro);color:#fff;padding:.9rem 1.3rem;z-index:999}
.pular:focus{left:.5rem;top:.5rem}

/* ---------- BARRA SUPERIOR LARANJA ---------- */
.topo{background:#FFF8E8;color:#6B5423;font-size:.84rem;border-bottom:1px solid #F0D89A}
.topo .container{display:flex;align-items:center;gap:1.6rem;padding-block:.48rem;flex-wrap:wrap}
.topo a{color:#5A4200;text-decoration:none;display:inline-flex;align-items:center;gap:.45rem;padding:.1rem 0;transition:opacity var(--t)}
.topo a:hover{opacity:.7}
.topo svg{width:17px;height:17px;flex:none;display:block}
.topo__end{display:inline-flex;align-items:center;gap:.45rem}
.topo__redes{margin-left:auto;display:flex;gap:.5rem}
.topo__redes a{width:30px;height:30px;justify-content:center;border-radius:50%;background:#fff;
  border:1px solid #EBD6A6;color:#8A5A00;transition:transform var(--t),background var(--t),color var(--t)}
.topo__redes a:hover{background:var(--lar-vidro);color:var(--lar-escuro);transform:translateY(-2px)}
@media(max-width:860px){.topo__end{display:none}}

/* ---------- CABEÇALHO ---------- */
.cab{background:#fff;box-shadow:0 1px 0 var(--lar-linha)}
/* Cabeçalho + navegação grudam JUNTOS, como um bloco só.
   Eram dois sticky irmãos no mesmo top: disputavam o lugar e a
   navegação sumia atrás do cabeçalho. Ver DECISOES.md A-29. */
.cab-fixo{position:sticky;top:0;z-index:60}

.cab .container{display:flex;align-items:center;gap:2rem;padding-block:2.1rem}
.cab__logo{display:flex;align-items:center;gap:.85rem;text-decoration:none}
.cab__logo .sim{height:86px;width:auto}
.cab__logo .tip{height:58px;width:auto}
@media(max-width:640px){.cab__logo .tip{display:none}.cab__logo .sim{height:64px}}
.cab__acoes{margin-left:auto;display:flex;gap:.65rem;align-items:center}
.pill{display:inline-flex;align-items:center;gap:.66rem;padding:.87rem 1.62rem;border-radius:var(--r-pill);
  font-weight:700;font-size:1.06rem;text-decoration:none;border:0;cursor:pointer;font-family:inherit;
  transition:transform var(--t),box-shadow var(--t),filter var(--t);white-space:nowrap}
.pill svg{width:25px;height:25px;display:block}
.pill:hover{transform:translateY(-2px)}
.pill--transp{background:var(--lar-vidro);color:var(--lar-escuro);border:1px solid var(--lar-vidro-borda);backdrop-filter:blur(8px)}
.pill--transp:hover{background:rgba(232,100,30,.16);border-color:rgba(232,100,30,.34);color:var(--lar-profundo)}
.pill--doar{background:linear-gradient(160deg,var(--verde-claro),var(--verde));color:#fff;box-shadow:0 2px 10px rgba(30,158,99,.24)}
.pill--doar:hover{box-shadow:0 6px 18px rgba(30,158,99,.34);color:#fff}
.busca{display:flex;align-items:center;gap:.5rem;background:var(--lar-papel);border:1px solid var(--lar-linha);
  border-radius:var(--r-pill);padding:.45rem .55rem .45rem 1.1rem;transition:border-color var(--t)}
.busca:focus-within{border-color:var(--lar-suave)}
.busca input{border:0;background:none;font:inherit;font-size:.95rem;outline:0;width:150px}
.busca button{width:38px;height:38px;border-radius:50%;border:1px solid var(--lar-vidro-borda);cursor:pointer;
  background:var(--lar-vidro);color:var(--lar-escuro);display:grid;place-items:center;transition:all var(--t)}
.busca button:hover{transform:scale(1.07)}
/* ---------- BOTÃO DE MENU: TRÊS TRAÇOS QUE VIRAM UM X ----------
   Sem palavra e sem fundo — ver DECISOES.md V-28.

   A curva `cubic-bezier(.34,1.56,.64,1)` vem do design system Lumina,
   trazido como referência. O 1,56 no terceiro número passa de 1 de propósito:
   é o que faz o movimento ultrapassar o destino e voltar. Num gesto
   curto como este, é o que separa "mudou de ícone" de "respondeu ao
   toque".

   A ORDEM DAS FUNÇÕES IMPORTA e é contraintuitiva: em `transform`, a
   função mais à DIREITA é aplicada primeiro. Por isso
   `rotate(45deg) translateY(6px)` — o traço primeiro desce até o centro,
   e só então gira em torno dele. Escrito ao contrário, ele giraria
   estando ainda no alto e sairia do lugar.

   `transform-box:view-box` faz o `transform-origin:center` valer o
   centro do desenho de 24×24. Sem isso, a caixa de um traço horizontal
   tem altura zero e o centro cai num ponto sem sentido. */
.menu-btn{display:none;background:none;border:0;padding:.45rem;margin:0;
  color:var(--lar-escuro);line-height:0;cursor:pointer;border-radius:12px;
  transition:scale .22s cubic-bezier(.34,1.56,.64,1),color var(--t)}
.menu-btn:hover{color:var(--lar-profundo)}
.menu-btn:active{scale:.88}
.menu-btn svg{width:30px;height:30px;display:block;overflow:visible;
  transition:rotate .45s cubic-bezier(.34,1.56,.64,1)}
.menu-btn line{stroke:currentColor;stroke-width:2.2;stroke-linecap:round;
  transform-box:view-box;transform-origin:center;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .18s linear}

.menu-btn[aria-expanded="true"] svg{rotate:90deg}
.menu-btn[aria-expanded="true"] line:nth-child(1){transform:rotate(45deg) translateY(6px)}
.menu-btn[aria-expanded="true"] line:nth-child(2){opacity:0;transform:scaleX(.15)}
.menu-btn[aria-expanded="true"] line:nth-child(3){transform:rotate(-45deg) translateY(-6px)}

/* Sem movimento, a troca acontece de uma vez — continua legível, só não
   tem o gesto. */
@media (prefers-reduced-motion:reduce){
  .menu-btn,.menu-btn svg,.menu-btn line{transition:none}
}
@media(max-width:1080px){.cab__acoes .busca{display:none}}
/* ---------- CABEÇALHO NO CELULAR ----------
   Três peças, nesta ordem: logotipo · Doar agora · botão de menu.

   No documento o botão de menu vem ANTES dos botões de ação, porque
   para quem usa leitor de tela faz sentido encontrar a navegação logo
   depois do logotipo. `order` reposiciona só o desenho, sem mexer nessa
   sequência — que é o uso certo da propriedade.

   As duas margens automáticas em `.cab__acoes` são o que deixa o "Doar
   agora" no meio: ele empurra igual dos dois lados do espaço livre.

   "Transparência" sai da barra no celular. Não se perde nada: o item
   existe no menu, e três alvos de toque mais o logotipo não cabem em
   390px sem apertar. */
@media(max-width:900px){
  .menu-btn{display:inline-flex;order:3}
  .cab__acoes{order:2;margin-left:auto;margin-right:auto;gap:.5rem}
  .cab__logo{order:1}
  .cab__acoes .pill--transp{display:none}
  .cab .container{gap:.6rem}
  .pill{padding:.68rem 1.2rem}
}
@media(max-width:380px){
  .pill{padding:.62rem 1rem;font-size:.94rem}
  .pill svg{width:19px;height:19px}
}

/* ---------- NAVEGAÇÃO ---------- */
.nav{background:var(--grad-lar)}
.nav ul{list-style:none;display:flex;justify-content:center;margin:0;padding:0;gap:.15rem;flex-wrap:wrap}
.nav a{display:inline-flex;align-items:center;gap:.5rem;padding:1.33rem 1.25rem;color:rgba(255,255,255,.9);text-decoration:none;
  font-weight:600;font-size:.97rem;position:relative;transition:color var(--t),background var(--t)}
.nav svg{width:20px;height:20px;opacity:.9;display:block}
.nav a::after{content:"";position:absolute;left:1.25rem;right:1.25rem;bottom:.75rem;height:3px;border-radius:3px;
  background:#fff;transform:scaleX(0);transform-origin:left;transition:transform var(--t)}
.nav a:hover{color:#fff;background:rgba(255,255,255,.14)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav a[aria-current]{color:#fff}
@media(max-width:900px){.nav{display:none}.nav.aberto{display:block}.nav ul{flex-direction:column}.nav a::after{display:none}}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:480px;display:flex;align-items:center;overflow:hidden;background:var(--lar-nevoa)}
.hero__img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.16;filter:grayscale(.35)}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--lar-nevoa) 0%,rgba(253,244,238,.86) 48%,rgba(253,244,238,.55) 100%)}
.hero .container{position:relative;z-index:2;padding-block:5.5rem}
.hero h1{color:var(--marrom-escuro);font-size:3rem;max-width:16ch;margin-bottom:.7rem}
.hero p{color:var(--texto-sec);font-size:1.18rem;max-width:48ch}
.hero__acoes{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.hero__selo{display:inline-flex;align-items:center;gap:.5rem;background:var(--lar-vidro);border:1px solid var(--lar-vidro-borda);
  color:var(--lar-escuro);padding:.42rem 1.05rem;border-radius:var(--r-pill);font-size:.85rem;font-weight:600;margin-bottom:1.4rem;backdrop-filter:blur(8px)}
@media(max-width:700px){.hero h1{font-size:2.1rem}}

/* ---------- ATALHOS ---------- */
.atalhos{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.1rem;margin-top:-3.8rem;position:relative;z-index:3}
.atalho{background:#fff;border:1px solid var(--lar-linha);border-radius:var(--r);padding:2rem 1rem 1.8rem;text-align:center;
  text-decoration:none;color:var(--marrom-escuro);box-shadow:var(--sombra);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t),background var(--t)}
.atalho:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta);border-color:var(--lar-suave);background:var(--lar-papel);color:var(--lar-escuro)}
.atalho svg{width:35px;height:35px;color:#fff;opacity:1;display:block}
.atalho .atalho__ico{width:66px;height:66px;margin:0 auto 1.05rem;border-radius:20px;display:flex;align-items:center;justify-content:center;
  line-height:0;background:var(--grad-lar);border:0;color:#fff;
  box-shadow:0 4px 14px rgba(224,97,34,.30),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform var(--t),box-shadow var(--t)}
.atalho:hover .atalho__ico{transform:translateY(-2px) scale(1.06);box-shadow:0 8px 24px rgba(224,97,34,.42),inset 0 1px 0 rgba(255,255,255,.32)}
.atalho .atalho__txt{display:block;font-weight:700;font-size:.97rem;line-height:1.3}
.atalho--destaque{background:var(--lar-papel);border-color:var(--lar-suave);border-width:2px;color:var(--lar-escuro)}
.atalho--destaque .atalho__ico{box-shadow:0 4px 14px rgba(224,97,34,.34),0 0 0 5px rgba(232,100,30,.12),inset 0 1px 0 rgba(255,255,255,.28)}
.atalho--destaque:hover .atalho__ico{box-shadow:0 8px 26px rgba(224,97,34,.46),0 0 0 7px rgba(232,100,30,.16),inset 0 1px 0 rgba(255,255,255,.32)}
.atalho--destaque svg{color:#fff;opacity:1}
.atalho--destaque:hover{color:var(--lar-profundo);background:var(--lar-nevoa)}

/* ---------- TÍTULOS DE SEÇÃO ---------- */
.tit{display:flex;align-items:center;gap:.8rem;margin-bottom:.4rem}
.tit svg{width:27px;height:27px;color:var(--lar-escuro);flex:none;display:block}
.tit__ico{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;line-height:0;flex:none;
  background:var(--lar-vidro);border:1px solid var(--lar-vidro-borda);backdrop-filter:blur(8px)}
.tit h2{margin:0}
.tit-linha{height:3px;background:var(--grad-lar);border-radius:3px;margin-bottom:2rem;max-width:180px}

/* ---------- NÚMEROS ---------- */
.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.2rem;margin:0}
.numeros>div{background:#fff;border:1px solid var(--lar-linha);
  border-radius:var(--r);padding:1.8rem 1rem;text-align:center;transition:transform var(--t),box-shadow var(--t)}
.numeros>div:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.numeros dt{font-size:2.7rem;font-weight:800;line-height:1;
  background:var(--grad-lar);-webkit-background-clip:text;background-clip:text;color:transparent}
.numeros dd{margin:.5rem 0 0;color:var(--texto-sec);font-size:.95rem}

/* ---------- BASE DE ÍCONE ----------
   Todo svg inline nasce com tamanho definido. Sem esta regra, um ícone usado
   num contexto ainda sem regra própria assume o tamanho do container e
   aparece gigante. Qualquer regra com classe vence esta por especificidade. */
svg{width:23px;height:23px;flex:none;display:inline-block;vertical-align:-.2em}

.diario-sub svg{width:18px;height:18px;color:var(--lar-escuro)}
.bloco-transp__intro svg{width:19px;height:19px}
.perguntas svg{width:19px;height:19px}
.hero__selo svg{width:18px;height:18px}
.tag svg{width:13px;height:13px}
.doc svg{width:18px;height:18px}
.contador-docs svg{width:17px;height:17px}
.selo svg{width:13px;height:13px}
.convite svg{width:21px;height:21px}

/* ---------- BOTÕES ---------- */
.botao{display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.8rem;border-radius:var(--r-pill);
  font-weight:700;text-decoration:none;border:0;cursor:pointer;font-family:inherit;font-size:1rem;
  transition:transform var(--t),box-shadow var(--t)}
.botao svg{width:22px;height:22px;display:block}
.botao:hover{transform:translateY(-3px)}
.botao--verde{background:linear-gradient(160deg,var(--verde-claro),var(--verde));color:#fff !important;box-shadow:0 2px 10px rgba(30,158,99,.22)}
.botao--verde:hover{box-shadow:0 6px 20px rgba(30,158,99,.32)}
.botao--laranja{background:var(--grad-lar);color:#fff !important;box-shadow:0 2px 10px rgba(224,74,24,.22)}
.botao--laranja:hover{box-shadow:0 6px 20px rgba(224,74,24,.34)}
.botao--claro{background:var(--lar-vidro);color:var(--lar-escuro) !important;border:1px solid var(--lar-vidro-borda);backdrop-filter:blur(8px)}
.botao--claro:hover{background:rgba(232,100,30,.16);border-color:rgba(232,100,30,.34)}
.botao--sec{background:#fff;color:var(--marrom-escuro) !important;border:1px solid var(--lar-linha)}
.botao--sec:hover{border-color:var(--lar-suave);background:var(--lar-papel);box-shadow:var(--sombra)}

/* ---------- CARTÕES ---------- */
.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}
.cartao{background:#fff;border:1px solid var(--lar-linha);border-radius:var(--r);padding:2rem;box-shadow:var(--sombra);
  transition:transform var(--t),box-shadow var(--t)}
.cartao:hover{transform:translateY(-5px);box-shadow:var(--sombra-alta)}
.cartao__ico{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;line-height:0;margin-bottom:1.2rem;
  background:var(--lar-vidro);border:1px solid var(--lar-vidro-borda);backdrop-filter:blur(8px);color:var(--lar-escuro)}
.cartao__ico svg{width:31px;height:31px;display:block}

.cartao h3{margin-top:0}

.aviso{border-left:4px solid var(--lar-forte);background:var(--lar-nevoa);padding:1.3rem 1.5rem;border-radius:0 var(--r) var(--r) 0}
.atualizado{font-size:.9rem;color:var(--texto-sec)}

/* ========================================================================
   MATERIAL DE REVISÃO — nada aqui entra na versão publicada
   ------------------------------------------------------------------------
   Tudo que é apenas da prévia usa ROXO. A cor não existe na paleta do site,
   então qualquer elemento roxo lê imediatamente como estranho ao produto
   final, sem precisar de legenda.
   ======================================================================== */
:root{
  --rev:#6B3FA0; --rev-forte:#54307F; --rev-clara:#F3EDFB;
  --rev-borda:#C9B3E8; --rev-texto:#4A2B72;
}

/* Etiqueta comum a todo elemento de revisão */
.rev-tag{display:inline-flex;align-items:center;gap:.35rem;background:var(--rev);color:#fff;
  font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  border-radius:var(--r-pill);padding:.22rem .7rem;margin-bottom:.6rem;line-height:1.3}
.rev-tag::before{content:"●";font-size:.6em;opacity:.85}

/* Marcador de dado a confirmar */
.marcador{background:var(--rev-clara);color:var(--rev-texto);font-weight:700;
  border:1px dashed var(--rev-borda);border-radius:5px;padding:.05em .4em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.marcador::after{content:" a confirmar";font-size:.6em;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:#fff;background:var(--rev);border-radius:var(--r-pill);
  padding:.12em .5em;margin-left:.35em;font-style:normal;white-space:nowrap;
  display:inline-block;vertical-align:.15em;line-height:1.5}
/* Onde o espaço é curto, a etiqueta some e fica só o realce roxo.
   O aviso do topo da prévia já explica o que o roxo significa. */
.numeros .marcador::after,.contador-docs .marcador::after,.diario-item .marcador::after,
.projeto__linha .marcador::after,.doc__meta .marcador::after,.selo .marcador::after{content:none}
.numeros .marcador,.contador-docs .marcador{border-style:dashed;padding:.02em .28em}
.pendente{color:var(--texto-sec);font-style:italic}

/* Caixa de pendência interna */
.aviso--alerta{position:relative;border:1px solid var(--rev-borda);border-left:0;
  background:var(--rev-clara);color:var(--rev-texto);padding:1.3rem 1.5rem 1.3rem 2rem;
  border-radius:0 var(--r) var(--r) 0;overflow:hidden}
.aviso--alerta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;
  background:repeating-linear-gradient(45deg,var(--rev) 0 6px,var(--rev-forte) 6px 12px)}
.aviso--alerta::after{content:"Não entra no site — pendência para a Diretoria";
  display:block;margin-top:.7rem;font-size:.72rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--rev)}
.aviso--alerta strong{color:var(--rev-forte)}
.aviso--alerta a{color:var(--rev-forte)}

/* ---------- PORTAL ---------- */
.filtros{display:flex;gap:.9rem;flex-wrap:wrap;align-items:flex-end;background:var(--lar-papel);
  border:1px solid var(--lar-linha);border-radius:var(--r);padding:1.2rem 1.4rem;margin-bottom:2.5rem;box-shadow:var(--sombra)}
.filtros label{display:block;font-size:.82rem;font-weight:700;color:var(--texto-sec);margin-bottom:.3rem}
.filtros select,.filtros input{font:inherit;font-size:.95rem;padding:.65rem .9rem;border:1px solid var(--lar-linha);
  border-radius:var(--r-pill);background:#fff;min-height:44px;transition:border-color var(--t)}
.filtros select:focus,.filtros input:focus{border-color:var(--lar-suave)}
.filtros__acoes{display:flex;gap:.6rem;align-items:flex-end}
.filtros__acoes .botao{padding:.72rem 1.5rem;font-size:.95rem;min-height:44px}
.filtros__resultado{margin:-1.8rem 0 2.5rem;font-size:.95rem;color:var(--texto-sec)}
.filtros__resultado b{color:var(--marrom-escuro)}
/* O atributo hidden precisa de regra própria onde há display declarado:
   sem isto o exemplo escondido e o botão Limpar continuariam visíveis. */
.filtros__resultado[hidden],.botao[hidden],.busca-exemplos a[hidden],.busca-exemplos[hidden]{display:none}
.indice-blocos{list-style:none;margin:0 0 2.5rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.indice-blocos a{display:block;padding:.55rem 1.1rem;background:var(--lar-vidro);border:1px solid var(--lar-vidro-borda);border-radius:var(--r-pill);
  text-decoration:none;color:var(--lar-escuro);font-weight:600;font-size:.9rem;transition:all var(--t)}
.indice-blocos a:hover{background:var(--grad-lar);border-color:transparent;color:#fff;transform:translateY(-2px)}
.bloco-transp{margin-bottom:3.5rem}
.bloco-transp>h2{display:flex;align-items:center;gap:.75rem;padding-bottom:.7rem;border-bottom:2px solid var(--lar-linha);font-size:1.5rem}
.bloco-transp__letra{background:var(--lar-vidro);border:1px solid var(--lar-vidro-borda);backdrop-filter:blur(8px);
  color:var(--lar-escuro);width:2.3rem;height:2.3rem;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem;flex:none}
.bloco-transp__intro{color:var(--texto-sec);max-width:var(--larg-texto)}
.docs{list-style:none;margin:0;padding:0;border:1px solid var(--lar-linha);border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra)}
.docs li+li{border-top:1px solid var(--lar-linha)}
.doc{display:flex;gap:1.1rem;align-items:flex-start;padding:1.15rem 1.4rem;background:#fff;transition:background var(--t)}
.doc:hover{background:var(--lar-papel)}
.doc__icone{flex:none;width:2.7rem;height:2.7rem;border-radius:12px;background:var(--lar-vidro);border:1px solid var(--lar-vidro-borda);
  color:var(--lar-escuro);display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:800}
.doc__corpo{flex:1 1 auto;min-width:0}
.doc__titulo{font-weight:700;margin:0 0 .25rem}
.doc__titulo a{text-decoration:none;color:var(--texto)}
.doc__titulo a:hover{color:var(--verde-escuro)}
.doc__meta{font-size:.87rem;color:var(--texto-sec);display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin:0}
.doc__desc{font-size:.94rem;color:var(--texto-sec);margin:.4rem 0 0}
.doc__nota{font-size:.9rem;color:var(--texto-sec);margin:.5rem 0 0;padding:.5rem .7rem;background:#FBF6EF;border-left:3px solid #C9A227;border-radius:4px}
.portal-nota{margin:0 0 1.6rem;padding:.9rem 1.1rem;background:#FBF7F3;border-left:3px solid var(--lar-linha);border-radius:6px;color:var(--texto-sec);font-size:.95rem;max-width:var(--larg-texto)}
.selo{display:inline-block;font-size:.73rem;font-weight:800;padding:.2rem .7rem;border-radius:var(--r-pill);vertical-align:middle}
.selo--ok{background:var(--ok-bg);color:var(--ok)} .selo--vence{background:var(--alerta-bg);color:var(--alerta)}
.selo--vencido{background:var(--erro-bg);color:var(--erro)}
.vazio{position:relative;padding:1.3rem 1.5rem 1.3rem 3.4rem;background:#FFF8E8;
  border:1px solid #F0D89A;border-left:4px solid #E0A32A;border-radius:0 var(--r) var(--r) 0;
  color:#6B5423;font-size:.95rem;line-height:1.6}
.vazio::before{content:"!";position:absolute;left:1.15rem;top:1.25rem;width:22px;height:22px;
  border-radius:50%;background:#E0A32A;color:#fff;font-weight:800;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;line-height:1}
.vazio a{color:#8A5A00;font-weight:700}
.vazio strong{color:#5A4200}

/* ---------- MOMENTOS ---------- */
.momentos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.6rem}
.momento{background:#fff;border:1px solid var(--lar-linha);border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra);
  transition:transform var(--t),box-shadow var(--t)}
.momento:hover{transform:translateY(-6px);box-shadow:var(--sombra-alta)}
.momento__foto{aspect-ratio:4/3;background-size:cover;background-position:center;transition:transform .5s ease}
.momento:hover .momento__foto{transform:scale(1.05)}
.momento__crop{overflow:hidden}
.momento__corpo{padding:1.2rem 1.3rem 1.4rem}
.momento__data{font-size:.82rem;color:var(--texto-sec);margin:0}
.momento h3{font-size:1.08rem;margin:.3rem 0 0}
.momento h3 a{text-decoration:none;color:var(--marrom-escuro)}

/* ---------- FORMULÁRIO ---------- */
.campo{margin-bottom:1.2rem;max-width:34rem}
.campo label{display:block;font-weight:700;margin-bottom:.35rem}
.campo input,.campo select,.campo textarea{width:100%;font:inherit;padding:.8rem 1.1rem;border:1px solid var(--lar-linha);
  border-radius:var(--r);background:#fff;transition:border-color var(--t)}
.campo textarea{border-radius:var(--r)}
.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:var(--lar-suave);outline:0}

/* ---------- FLUTUANTES ---------- */
.flutua{position:fixed;right:1.2rem;bottom:1.2rem;z-index:120;display:flex;flex-direction:column;gap:.7rem;align-items:flex-end}

/* Botões flutuantes: só ícone, alvo generoso, sem texto em nenhuma tela */
.fab{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;flex:none;
  border:0;cursor:pointer;border-radius:50%;color:#fff;padding:0;
  transition:transform var(--t),box-shadow var(--t)}
.fab svg{width:27px;height:27px;flex:none;display:block}
.fab:hover{transform:translateY(-3px) scale(1.03)}
.fab--zap{background:linear-gradient(160deg,var(--verde-claro),var(--verde));box-shadow:0 3px 14px rgba(30,158,99,.32);text-decoration:none}
.fab--zap:hover{box-shadow:0 8px 24px rgba(30,158,99,.42);color:#fff}
.fab--acess{background:var(--grad-lar);box-shadow:0 3px 14px rgba(224,74,24,.32)}
.fab--acess[aria-expanded="true"]{background:var(--lar-profundo)}

/* ---------- PAINEL DE ACESSIBILIDADE ---------- */
.acess{position:fixed;right:1.2rem;bottom:6.4rem;width:min(380px,calc(100vw - 2.4rem));
  max-height:min(78vh,660px);background:#fff;border:1px solid var(--lar-linha);border-radius:20px;
  box-shadow:0 10px 30px rgba(42,35,31,.13),0 30px 70px rgba(42,35,31,.16);
  display:flex;flex-direction:column;overflow:hidden;z-index:121;
  animation:acess-entra .22s cubic-bezier(.2,.9,.3,1)}
.acess[hidden]{display:none}
@keyframes acess-entra{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

.acess__topo{display:flex;align-items:center;gap:.7rem;padding:1.15rem 1.3rem;
  border-bottom:1px solid var(--lar-linha);background:var(--lar-papel)}
.acess__topo h2{margin:0;font-size:1.02rem;display:flex;align-items:center;gap:.6rem;color:var(--marrom-escuro)}
.acess__topo svg{width:21px;height:21px;color:var(--lar-escuro)}
.acess__fechar{margin-left:auto;width:34px;height:34px;flex:none;display:grid;place-items:center;
  border:1px solid var(--lar-linha);background:#fff;border-radius:50%;cursor:pointer;color:var(--texto-sec);
  transition:all var(--t)}
.acess__fechar svg{width:15px;height:15px}
.acess__fechar:hover{border-color:var(--lar-suave);color:var(--lar-escuro)}

.acess__corpo{overflow-y:auto;padding:1.1rem 1.3rem 1.3rem;display:grid;gap:1.4rem}
.acess__grupo h3{margin:0 0 .65rem;font-size:.72rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--texto-sec);display:flex;align-items:center;gap:.45rem}
.acess__grupo h3 svg{width:15px;height:15px;color:var(--texto-sec)}

/* Escala de texto: A crescente, com o nível ativo preenchido */
.acess__escala{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;
  background:var(--lar-papel);border:1px solid var(--lar-linha);border-radius:14px;padding:.35rem}
.acess__escala button{font:inherit;font-weight:800;color:var(--texto-sec);background:none;border:0;
  border-radius:11px;cursor:pointer;padding:.6rem .2rem;line-height:1;transition:all var(--t)}
.acess__escala button:nth-child(1){font-size:.85rem}
.acess__escala button:nth-child(2){font-size:1rem}
.acess__escala button:nth-child(3){font-size:1.2rem}
.acess__escala button:nth-child(4){font-size:1.42rem}
.acess__escala button:hover{background:#fff;color:var(--lar-escuro)}
.acess__escala button[aria-pressed="true"]{background:var(--grad-lar);color:#fff;box-shadow:0 2px 8px rgba(224,74,24,.28)}

/* Interruptores */
.acess__opcoes{display:grid;gap:.4rem}
.acess__op{display:flex;align-items:center;gap:.85rem;width:100%;text-align:left;font:inherit;
  background:#fff;border:1px solid var(--lar-linha);border-radius:14px;padding:.7rem .85rem;cursor:pointer;
  transition:border-color var(--t),background var(--t)}
.acess__op:hover{border-color:var(--lar-suave);background:var(--lar-papel)}
.acess__ico{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:var(--lar-vidro);border:1px solid var(--lar-vidro-borda);color:var(--lar-escuro);transition:all var(--t)}
.acess__ico svg{width:19px;height:19px}
.acess__op>span:last-child{display:block;font-size:.85rem;color:var(--texto-sec);line-height:1.35}
.acess__op b{display:block;font-size:.95rem;color:var(--marrom-escuro);font-weight:700;margin-bottom:.05rem}
.acess__op::after{content:"";margin-left:auto;flex:none;width:38px;height:22px;border-radius:99px;
  background:var(--lar-linha);position:relative;transition:background var(--t);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.acess__op::before{content:"";position:absolute;right:calc(.85rem + 18px);width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.22);transition:transform var(--t);z-index:2}
.acess__op{position:relative}
.acess__op[aria-pressed="true"]{border-color:var(--lar-suave);background:var(--lar-papel)}
.acess__op[aria-pressed="true"]::after{background:linear-gradient(160deg,var(--verde-claro),var(--verde))}
.acess__op[aria-pressed="true"]::before{transform:translateX(16px)}
.acess__op[aria-pressed="true"] .acess__ico{background:var(--grad-lar);border-color:transparent;color:#fff}

.acess__atalhos{margin:0;display:grid;gap:.3rem}
.acess__atalhos>div{display:flex;align-items:baseline;gap:.7rem;font-size:.85rem}
.acess__atalhos dt{flex:none;font-weight:700;color:var(--marrom-escuro);background:var(--lar-papel);
  border:1px solid var(--lar-linha);border-radius:7px;padding:.16rem .5rem;font-size:.78rem;min-width:5.4rem;text-align:center}
.acess__atalhos dd{margin:0;color:var(--texto-sec)}

.acess__rodape{border-top:1px solid var(--lar-linha);background:var(--lar-papel);padding:.9rem 1.3rem;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.acess__reset{display:inline-flex;align-items:center;gap:.5rem;font:inherit;font-size:.88rem;font-weight:700;
  color:var(--lar-escuro);background:#fff;border:1px solid var(--lar-linha);border-radius:var(--r-pill);
  padding:.5rem 1rem;cursor:pointer;transition:all var(--t)}
.acess__reset svg{width:16px;height:16px}
.acess__reset:hover{border-color:var(--lar-suave);background:var(--lar-vidro)}
.acess__link{margin-left:auto;font-size:.84rem}

/* Régua de leitura */
.regua-leitura{position:fixed;left:0;right:0;height:44px;pointer-events:none;z-index:119;
  background:rgba(232,100,30,.10);border-top:2px solid rgba(224,74,24,.55);border-bottom:2px solid rgba(224,74,24,.55)}
.regua-leitura[hidden]{display:none}

/* ---------- MODOS DE ACESSIBILIDADE ---------- */
html[data-fonte="3"]{font-size:137.5%}
html.ac-cinza{filter:grayscale(1)}
html.ac-links a{text-decoration:underline !important;text-underline-offset:3px;
  outline:1px dashed currentColor;outline-offset:2px;border-radius:3px}
html.ac-legivel body{letter-spacing:.055em;word-spacing:.16em}
html.ac-espaco body{line-height:2.05}
html.ac-espaco p,html.ac-espaco li{margin-bottom:1.4em}
html.ac-parar *{animation:none !important;transition:none !important;scroll-behavior:auto !important}

/* ========================================================================
   MOVIMENTO E ACABAMENTO — DECISOES.md V-05 e V-06
   ------------------------------------------------------------------------
   Tudo daqui para baixo é enriquecimento visual: entrada ao rolar,
   parallax, acabamento de botão, cartão e ícone. Três regras governam o
   bloco inteiro, e nenhuma delas é opcional:

   1. ZERO DEPENDÊNCIA. Nada de GSAP, Lenis, ScrollTrigger, Tailwind ou
      fonte externa. Os design systems de referência usavam os quatro; aqui
      o mesmo efeito sai de CSS nativo. Ver A-01.

   2. NUNCA ESCONDE CONTEÚDO. Todo efeito de entrada vive dentro de
      @supports + prefers-reduced-motion. Se o navegador não entender, ou
      se a pessoa tiver pedido menos movimento, o conteúdo aparece direto,
      em opacidade 1. Não existe estado em que o visitante perde algo
      porque a animação não rodou.

   3. O PAINEL DESLIGA TUDO. html.ac-parar zera animation e transition —
      por isso todo movimento daqui usa uma dessas duas propriedades, e
      nenhuma outra.
   ------------------------------------------------------------------------ */

/* ---------- ENTRADA AO ROLAR ---------- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .reveal{animation:lar-entra .6s cubic-bezier(.4,0,.2,1) both;
      animation-timeline:view();animation-range:entry 0% entry 40%}
    .reveal-atraso-2{animation-delay:.08s}
    .reveal-atraso-3{animation-delay:.16s}
    .reveal-atraso-4{animation-delay:.24s}

    /* A entrada desloca por `translate`, NÃO por `transform`.
       Motivo, e vale registrar porque não é óbvio: animação com
       fill-mode `both` continua valendo depois de terminar, e valor
       animado vence declaração comum na cascata. Escrita em `transform`,
       ela travaria o `transform:translateY(-5px)` do hover do cartão — o
       cartão deixaria de subir ao passar o mouse, sem erro nenhum
       aparecer. `translate` é propriedade separada e se compõe com
       `transform`, então os dois convivem. */
    @keyframes lar-entra{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}

    /* Variante lateral, para blocos em coluna dupla */
    .reveal--lado{animation-name:lar-entra-lado}
    @keyframes lar-entra-lado{from{opacity:0;translate:24px 0}to{opacity:1;translate:0 0}}

    /* Escalonamento dentro de uma grade.
       Aplicado ao filho, e não ao contêiner, para que os itens entrem um
       depois do outro. O atraso é curto: acima de ~0,3s no último item a
       grade parece lenta em vez de elegante. */
    .numeros.reveal>div,.momentos .momento.reveal,.parceiros.reveal>div{
      animation:lar-entra .6s cubic-bezier(.4,0,.2,1) both;
      animation-timeline:view();animation-range:entry 0% entry 40%}
    .numeros.reveal,.parceiros.reveal{animation:none}
    .numeros.reveal>div:nth-child(2),.momentos .momento.reveal:nth-child(2),.parceiros.reveal>div:nth-child(2){animation-delay:.06s}
    .numeros.reveal>div:nth-child(3),.momentos .momento.reveal:nth-child(3),.parceiros.reveal>div:nth-child(3){animation-delay:.12s}
    .numeros.reveal>div:nth-child(4),.parceiros.reveal>div:nth-child(4){animation-delay:.18s}
    .numeros.reveal>div:nth-child(5),.parceiros.reveal>div:nth-child(5){animation-delay:.24s}
    .parceiros.reveal>div:nth-child(6){animation-delay:.30s}
  }
}

/* ---------- PARALLAX ----------
   A foto do hero sobe mais devagar que a página. Amplitude curta de
   propósito: parallax largo é o efeito que mais provoca desconforto em
   quem tem sensibilidade vestibular, e o público deste site inclui
   pessoas idosas. 6% resolve a sensação de profundidade sem exagero. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .hero__img{animation:lar-parallax linear;animation-timeline:scroll();animation-range:0 90vh}
    /* Desloca por `translate` e não por `transform`: o hover da foto usa
       `scale`, e as duas são propriedades independentes que se compõem.
       Escritas ambas em `transform`, a animação venceria e a aproximação
       no hover simplesmente não aconteceria. A ampliação de repouso vive
       no `scale:1.06` da regra base — é ela que evita a borda vazia
       aparecer quando a foto sobe. */
    @keyframes lar-parallax{to{translate:0 6%}}
  }
}

/* ---------- ENTRADA DO HERO, UMA VEZ SÓ ----------
   Ao abrir a página, os elementos do hero entram em sequência curta.
   Acontece uma vez e termina — não é laço, não se repete, não pede
   atenção depois. */
@media (prefers-reduced-motion:no-preference){
  .hero__selo,.hero h1,.hero p,.hero__acoes{animation:lar-sobe .7s cubic-bezier(.16,1,.3,1) both}
  .hero h1{animation-delay:.06s}
  .hero p{animation-delay:.12s}
  .hero__acoes{animation-delay:.18s}
  @keyframes lar-sobe{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
}

/* ---------- CABEÇALHO EM VIDRO FOSCO ----------
   Pedido em 13/08/2026. Ver DECISOES.md V-13.

   O cabeçalho era branco chapado. Passa a ser translúcido com desfoque
   de fundo: o conteúdo da página aparece esfumaçado por trás enquanto
   rola, que é o efeito da referência.

   ALTURA 15% MENOR, também pedido: o conjunto cabeçalho + navegação fica
   grudado no topo (A-29) e custava cerca de 150px permanentes de tela.

   O FUNDO NÃO É `transparent`: é branco a 82%. Com desfoque puro, texto
   escuro do cabeçalho sobre uma foto escura rolando por baixo perderia
   contraste — o desfoque borra, não clareia. Os 82% garantem o piso. */
/* O DESFOQUE VAI NO `.cab-fixo`, o elemento que gruda — e não nos filhos.
   Na primeira tentativa ele estava em `.cab` e `.nav`, que são filhos do
   contêiner sticky, e o cabeçalho se comportou mal ao rolar.

   Motivo: `backdrop-filter` cria um contexto de empilhamento e uma raiz
   de fundo próprios. Posto no filho de um elemento grudado, o navegador
   precisa reconciliar duas camadas compostas que se movem em ritmos
   diferentes — e o resultado varia de navegador para navegador. Posto no
   próprio elemento grudado, há uma camada só, e é o caminho que todo
   cabeçalho de vidro usa.

   Regra que fica: `backdrop-filter` pertence ao elemento que se move,
   nunca ao que é carregado por ele. */
/* VIDRO MAIS FUNDO — 13/08/2026, ver DECISOES.md V-25.
   A barra desceu de 82% para 54% de branco, com desfoque maior e mais
   saturação. O degradê de 60% no alto para 48% embaixo simula espessura:
   vidro real não tem opacidade uniforme.

   O QUE TORNOU ISSO POSSÍVEL foi mover a opacidade da barra para as
   pastilhas. Antes, o texto "Transparência" ficava direto sobre a barra,
   e passam por trás dela o verde escuro da campanha e o laranja da
   chamada final. Medido sobre o pior deles:

     barra 82%, pastilha translúcida  ->  3,96:1  reprovava já antes
     barra 54%, pastilha a 86%        ->  6,3:1

   Ou seja: a barra ficou bem mais transparente E o texto ficou mais
   legível do que estava. */
/* O DESFOQUE FICA NO `.cab-fixo`, O VIDRO NO `.cab`.
   A divisão parece arbitrária e não é: `.cab-fixo` só pode carregar uma
   propriedade `animation`, e ela foi reservada ao recolhimento do menu.
   Pondo a pintura do vidro no `.cab`, ele ganha a própria animação e o
   cabeçalho pode mudar de densidade ao rolar sem disputar com o menu.

   Desfocar num elemento e pintar no outro funciona porque o desfoque
   atua no que está ATRÁS do bloco todo; o branco translúcido do `.cab`
   apenas se assenta por cima do resultado. */
.cab-fixo{
  backdrop-filter:blur(26px) saturate(1.9);-webkit-backdrop-filter:blur(26px) saturate(1.9)}

/* --vidro-a é a densidade do vidro. Vai de 42% no topo da página a 62%
   com a página rolada — ver a animação adiante. O degradê de ±6% em
   volta dela mantém a leitura de espessura. */
@property --vidro-a{syntax:'<number>';initial-value:.62;inherits:false}

.cab{
  background:linear-gradient(180deg,
    rgba(255,255,255,calc(var(--vidro-a) + .06)),
    rgba(255,255,255,calc(var(--vidro-a) - .06)));
  border-bottom:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78),
             0 6px 26px rgba(42,35,31,.07)}

/* As pastilhas viram superfícies próprias: é nelas que mora a opacidade
   que a barra perdeu. Sem desfoque próprio — `.cab-fixo` já é raiz de
   fundo, então um desfoque aqui dentro não teria o que desfocar. */
.pill--transp{background:rgba(255,255,255,.86);
  border-color:rgba(192,65,15,.24);color:var(--lar-profundo)}
.pill--transp:hover{background:rgba(255,241,233,.95);
  border-color:rgba(192,65,15,.42);color:var(--lar-profundo)}
.busca{background:rgba(255,255,255,.86);border-color:rgba(192,65,15,.18)}
.cab .container{padding-block:1.5rem}
.cab__logo .sim{height:73px}
.cab__logo .tip{height:49px}
.pill{padding:.74rem 1.38rem}
.pill svg{width:22px;height:22px}

/* Os dois botões do cabeçalho com a mesma largura. Eles já tinham o
   mesmo respiro — o que os deixava diferentes era o texto: "Transparência"
   tem treze letras, "Doar agora" tem dez.

   A medida está em `em`, não em pixel, de propósito: assim ela acompanha
   o texto quando alguém sobe a fonte para 137,5% no painel de
   acessibilidade. Em pixel, o botão pararia de caber no próprio rótulo.

   Abaixo de 1024px o par volta à largura natural — dois botões de
   largura fixa mais o logotipo não cabem em tela estreita. */
@media(min-width:1025px){
  .cab__acoes .pill{min-width:11.6em;justify-content:center}
}

/* A navegação fica translúcida para o vidro do contêiner aparecer
   através dela. Sem desfoque próprio: quem desfoca é o `.cab-fixo`. */
/* ---------- A NAVEGAÇÃO FLUTUA E SOME AO ROLAR ----------
   Ver DECISOES.md V-23.

   Só o cabeçalho — logotipo e botões — fica preso ao topo. A barra
   laranja passa a flutuar logo abaixo dele, POR CIMA do conteúdo: com
   `position:absolute` ela sai do fluxo, e por isso aparecer e sumir não
   empurra mais nada na página. Sem isso, cada vez que o menu voltasse o
   conteúdo daria um solavanco.

   Ao rolar, ela se recolhe; ao passar o mouse pelo cabeçalho, volta.

   A opacidade subiu de 90% para 96%: agora ela fica sobre a fotografia e
   sobre o conteúdo, e não mais sobre o branco do cabeçalho. Menu branco
   sobre laranja translúcido sobre foto perderia contraste. */
/* O MOVIMENTO VEM DE VARIÁVEIS, NÃO DA ANIMAÇÃO DIRETA — e essa volta é
   o que faz a diferença entre suave e duro.

   Na primeira versão, a animação de rolagem escondia a barra e o hover
   a trazia de volta com `animation:none`. Cancelar animação não
   transiciona: o navegador salta para o estado base num quadro só. Ida
   suave, volta seca.

   Agora a animação move duas variáveis herdadas — `--nav-y` e
   `--nav-op` — e é a BARRA que reage a elas com `transition`. Como a
   transição é dela, ela suaviza qualquer mudança de valor: venha da
   rolagem ou do hover, venha entrando ou saindo. Os dois sentidos ficam
   iguais.

   Curva de saída longa (.55s) e entrada de opacidade mais curta (.4s):
   a barra chega deslizando e some antes de terminar de subir, que é
   como a coisa parece leve em vez de mecânica. */
@property --nav-y{syntax:'<percentage>';initial-value:0%;inherits:true}

/* A CAIXA QUE RECORTA — é ela que faz a barra sair POR TRÁS.
   ------------------------------------------------------------------
   Antes a barra deslizava para cima e passava POR CIMA do cabeçalho:
   elemento posicionado pinta acima do conteúdo em fluxo, então ela
   cobria o logotipo no caminho. E, para disfarçar, ela desaparecia com
   um fade — que era o efeito feio.

   Agora ela desliza dentro de uma caixa com `overflow:hidden` colada à
   base do cabeçalho. A parte que sobe é recortada exatamente ali, e o
   resultado é a barra enrolando para debaixo do cabeçalho. Sem fade
   nenhum: o movimento sozinho explica o que aconteceu.

   O respiro embaixo, com margem negativa de mesmo valor, existe para a
   sombra da barra caber dentro do recorte. Sem ele, `overflow:hidden`
   cortaria a sombra rente e a barra pareceria colada na página.

   A caixa não intercepta clique — só a barra dentro dela. */
.nav-caixa{position:absolute;top:100%;left:0;right:0;
  overflow:hidden;padding-bottom:30px;margin-bottom:-30px;
  pointer-events:none;z-index:1}

/* ...mas o mesmo recorte cortaria o menu suspenso, que desce para fora da
   caixa. Enquanto houver um submenu aberto, a caixa deixa de recortar. O
   script põe e tira esta classe. Ver DECISOES.md V-37. */
.nav-caixa.submenu-aberto{overflow:visible}

.nav{position:relative;pointer-events:auto;
  background:linear-gradient(100deg,rgba(236,109,38,.96),rgba(228,97,30,.96) 50%,rgba(217,87,26,.96));
  box-shadow:0 8px 24px rgba(42,35,31,.14);
  translate:0 var(--nav-y);
  transition:translate .5s cubic-bezier(.16,1,.3,1)}

/* Mais 5% de altura — 13/08/2026. */
.nav a{padding-block:.84rem;
  transition:color var(--t),background var(--t),translate .34s cubic-bezier(.16,1,.3,1)}

/* Cada item sobe 1px e o filete abaixo dele se abre da esquerda. Um
   pixel parece pouco escrito, e é exatamente o que se quer: o item
   responde sem que o menu inteiro pareça mexer. */
.nav a:hover{translate:0 -1px}
.nav a::after{transition:transform .34s cubic-bezier(.16,1,.3,1)}

/* Houve aqui uma tentativa de fazer os itens entrarem em sequência, com
   `transition-delay` crescente sob `.cab-fixo:hover`. Foi removida no
   mesmo dia: `transition-delay` atrasa a transição DO PRÓPRIO ITEM, não
   a entrada dele. Na prática não escalonava nada e ainda atrasava em até
   0,24s a resposta ao passar o mouse em cada link — o oposto do que se
   queria.

   Escalonar de verdade exigiria que os itens tivessem propriedade
   própria mudando na entrada. Não vale a complexidade: quem se move é a
   barra, e ela já carrega os itens junto. */

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    /* `hover:hover` NÃO É DETALHE: sem ele, um tablet de 1024px — que é
       largo o bastante para escapar do menu-botão e não tem cursor —
       veria a barra sumir na primeira rolagem e nunca mais voltar, porque
       não há como passar o mouse por cima. Em aparelho de toque a barra
       fica onde está. */
    @media(min-width:901px) and (hover:hover){
      /* A animação mora no CONTÊINER e move só a variável. Sem opacidade:
         o recorte da caixa já esconde a barra, e o fade era justamente
         o que ficava feio. Um movimento só, e ele se explica. */
      .cab-fixo{animation:lar-nav-recolhe linear both;
        animation-timeline:scroll();animation-range:0 90px}
      @keyframes lar-nav-recolhe{to{--nav-y:-100%}}

      /* `!important` VENCE ANIMAÇÃO, e é por isso que está aqui.
         Na cascata, declaração `!important` de autor tem precedência
         sobre valores vindos de animação. Assim o hover devolve as
         variáveis SEM cancelar a animação — e é justamente por ela
         continuar rodando que a barra volta ao lugar certo, e não ao
         topo da página, quando o mouse sai.

         `:focus-within` faz o mesmo pelo teclado: sem ele, quem navega
         com Tab cairia num menu invisível. */
      .cab-fixo:hover,
      .cab-fixo:focus-within{--nav-y:0% !important}

      /* Não é mais preciso mexer em `pointer-events`: a parte que sobe
         fica fora da caixa recortada, e `overflow:hidden` tira do
         recorte tanto a pintura quanto o alcance do clique. */
    }
  }
}

/* Abaixo de 901px o menu já é um botão que abre e fecha (`.nav.aberto`),
   então recolher ao rolar não se aplica — e as duas regras brigariam. */

/* Navegador sem backdrop-filter recebe fundo quase opaco — sem isto o
   cabeçalho ficaria semitransparente e ilegível sobre a foto. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cab{background:rgba(255,255,255,.97)}
  .nav{background:var(--grad-lar)}
}

/* ---------- O VIDRO ADENSA CONFORME A PÁGINA ROLA ----------
   No alto da página o cabeçalho está sobre a fotografia e fica mais
   aberto — 42% —, deixando a imagem respirar. Ao rolar, fecha para 62%:
   dali em diante passa conteúdo variado por trás, e o vidro mais denso
   acalma o fundo.

   A sombra cresce junto, que é o sinal clássico de "esta peça descolou
   da página". São 160px de percurso, mais longos que os 90px do menu, de
   propósito — o menu precisa sair rápido, o vidro precisa adensar devagar
   o bastante para não se notar a transição acontecendo. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .cab{animation:lar-cab-adensa linear both;
      animation-timeline:scroll();animation-range:0 160px}
    @keyframes lar-cab-adensa{
      from{--vidro-a:.42;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 10px rgba(42,35,31,.03)}
      to  {--vidro-a:.62;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 10px 30px rgba(42,35,31,.11)}}
  }
}

@media(max-width:1024px){.cab .container{padding-block:1.1rem}}

/* ---------- HERO: A FOTO EM PRIMEIRO PLANO ----------
   Reescrito em 13/08/2026 a pedido. Ver DECISOES.md V-11.

   A foto era exibida a 16% de opacidade, dessaturada e sob um véu que
   cobria a largura inteira — na prática, textura de fundo. Agora ela é
   a imagem do Lar, nítida e em tamanho real.

   NADA COBRE A FOTOGRAFIA. Sem véu, sem painel, sem película: o texto
   fica direto sobre a imagem, como foi pedido. Ver DECISOES.md V-16.

   O QUE ISSO CUSTA, REGISTRADO PARA NÃO SE PERDER: medida pixel a pixel,
   esta fotografia tem, em TODA região testada, luminância de 0,004 a
   1,0 — fios elétricos escuros cruzando o céu claro, a porta escura da
   entrada, a parede clara. Nenhuma cor de texto alcança 4,5:1 sobre
   isso, e nenhum modo de mesclagem corrige: multiply apaga contra o
   escuro, screen apaga contra o claro, difference some no meio-tom.

   Não existe solução de CSS para este caso. O que resolve de verdade é
   uma FOTO com uma região calma onde o texto caiba — sem fios, sem vão
   escuro. Rode `verificar-contraste.py` numa foto candidata antes de
   trocar; ele responde em dois segundos.

   Enquanto isso, o que está aqui é o melhor possível sem cobrir a
   imagem: mesclagem no título e halo claro no texto de apoio. Halo é
   contorno do glifo, não camada sobre a foto. */
.hero{align-items:center}
.hero__img{opacity:1;filter:none;scale:1.06;
  transition:scale 1.4s cubic-bezier(.16,1,.3,1),filter 1.4s ease}
.hero:hover .hero__img{scale:1.1;filter:saturate(1.06)}
/* O ::after é redefinido adiante como degradê de leitura — V-20. */

/* ---------- DEGRADÊ DE LEITURA ----------
   Preto que desce de 80% à esquerda até transparente aos 84% da largura.
   Ver DECISOES.md V-20.

   O CONTORNO SAIU. Ele resolvia o contraste (21:1) mas deixava cada letra
   com um halo grosso — de perto, aspecto amador. O degradê faz o mesmo
   trabalho de forma invisível: em vez de tratar o texto, escurece o
   fundo dele.

   AS PARADAS NÃO SÃO ESTÉTICAS, SÃO CALCULADAS — e foram recalculadas
   em 13/08/2026 para o título aguentar `--lar-forte`, que é bem mais
   escuro que o creme anterior. O patamar de 78% agora se estende até
   32% da largura, que é o trecho ocupado pelo título:

     0%   preto 82%  →  --lar-forte 4,1:1 · branco 12,1:1
     32%  preto 78%  →  --lar-forte 3,5:1 · branco 10,3:1
     55%  preto 50%  →  fora da zona do texto
     72%  preto 22%  →  fotografia quase limpa
     86%  transparente

   O parágrafo termina por volta de 43% da tela e ali o branco dá 6,8:1.
   O título ocupa até ~30%. Nenhum dos dois alcança a região clara. */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,
    rgba(10,7,5,.82) 0%,
    rgba(10,7,5,.78) 32%,
    rgba(10,7,5,.50) 55%,
    rgba(10,7,5,.22) 72%,
    rgba(10,7,5,0)   86%)}

/* No celular o texto ocupa a largura toda: o degradê vira vertical, mais
   forte em cima, onde o texto está, e abrindo embaixo. */
@media(max-width:900px){
  .hero::after{background:linear-gradient(178deg,
    rgba(10,7,5,.78) 0%,
    rgba(10,7,5,.7) 55%,
    rgba(10,7,5,.5) 100%)}
}

/* ---------- HIERARQUIA POR COR ----------
   O título no laranja da casa, o resto em branco. Duas cores dão
   hierarquia sem mudar corpo nem peso.

   `--lar-forte` É A COR MAIS DIFÍCIL DE SUSTENTAR AQUI, e por isso o
   degradê acima foi refeito. Números medidos no trecho do título:

     com o degradê antigo  ->  2,5:1   reprova em qualquer critério
     com o degradê novo    ->  3,5 a 4,1:1

   POR QUE 3,5:1 É ACEITÁVEL AQUI, E SÓ AQUI: o título tem 48px e peso
   800. Pela WCAG isso é "texto grande", cujo mínimo é 3:1 e não 4,5:1 —
   letra grande é legível com menos contraste. O corpo do texto continua
   preso aos 4,5:1, sem exceção.

   Se um dia se preferir folga em vez do laranja cheio, `#F3B18E` é o
   laranja mais saturado que alcança 4,5:1 neste degradê. Uma linha.

   Reprovados na medição: pêssego, `--lar-suave` e âmbar. */
.hero h1{color:var(--lar-forte);text-shadow:0 1px 3px rgba(10,7,5,.45)}
.hero p{color:rgba(255,255,255,.94);text-shadow:0 1px 3px rgba(10,7,5,.4)}

/* Pastilha de contorno: sem fundo próprio, o degradê já é o fundo. */
.hero__selo{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.42);color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero__selo svg{color:#fff}

.hero__acoes .botao--sec{border-color:rgba(255,255,255,.5);
  box-shadow:0 6px 22px rgba(10,7,5,.34)}
.cta-final{position:relative;overflow:hidden}
.cta-final::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(38rem 20rem at 15% 0%,rgba(255,255,255,.18),transparent 60%)}
.cta-final .container{position:relative;z-index:1}

/* ---------- CHUVA DE LUZ ----------
   Feixes verticais de 1px caindo devagar, em alturas, velocidades e
   atrasos diferentes. Ver DECISOES.md V-09.

   NÃO CARREGA INFORMAÇÃO NENHUMA. É a razão de existir sem pedir licença:
   quem não vê, não perde nada. O contêiner leva aria-hidden e
   pointer-events:none — não é lido, não é focado, não intercepta clique.

   O padrão é NÃO EXISTIR. A chuva só é criada dentro de
   prefers-reduced-motion, e o painel a remove por display:none — não por
   animation:none, que deixaria os feixes parados e visíveis no topo,
   parecendo listras tortas. */
.chuva{display:none}

@media (prefers-reduced-motion:no-preference){
  .chuva{display:block;position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}

  /* A INCLINAÇÃO SE FAZ COM DUAS PROPRIEDADES SEPARADAS, e a distinção
     importa: `rotate` inclina o risco, e o `translate` da animação o faz
     descer indo para a direita. Se a inclinação fosse escrita em
     `transform`, a animação a sobrescreveria e os riscos voltariam a
     cair na vertical. */
  /* A INCLINAÇÃO É NEGATIVA, e o sinal importa. Em CSS o ângulo positivo
     gira no sentido horário, o que joga o TOPO do risco para a direita e
     produz "/" — inclinação contrária à queda. A primeira versão tinha
     esse erro: o risco apontava para um lado e caía para o outro.
     Com -14deg o topo vai para a esquerda e o risco fica "\", que é o
     desenho de chuva descendo da esquerda alta para a direita baixa. */
  .chuva span{position:absolute;top:0;width:1px;rotate:-14deg;
    background:linear-gradient(to bottom,transparent,var(--chuva-cor,rgba(224,97,34,.55)),transparent);
    animation:lar-chuva var(--chuva-tempo,7s) linear infinite}
  @keyframes lar-chuva{
    0%  {translate:-11vw -100%;opacity:0}
    8%  {opacity:.55}
    50% {opacity:1}
    92% {opacity:.55}
    100%{translate:11vw 115vh;opacity:0}}

  /* Posição, altura, duração e atraso de cada risco. Números irregulares
     de propósito: em progressão regular o olho percebe o padrão e a
     chuva vira animação de carregamento.

     Alturas reduzidas duas vezes a pedido: −20% em 13/08 e mais −35%
     na mesma data. Os riscos agora vão de 4,5rem a 11,5rem — riscos
     curtos leem como chuva; longos, como listras de fundo. */
  .chuva span:nth-child(1){left:7%;  height:7rem;   --chuva-tempo:6.2s; animation-delay:0s}
  .chuva span:nth-child(2){left:18%; height:11.5rem;--chuva-tempo:9.2s; animation-delay:2.4s}
  .chuva span:nth-child(3){left:29%; height:4.5rem; --chuva-tempo:7.1s; animation-delay:5.1s}
  .chuva span:nth-child(4){left:41%; height:9.5rem; --chuva-tempo:10.8s;animation-delay:1.2s}
  .chuva span:nth-child(5){left:53%; height:6rem;   --chuva-tempo:7.9s; animation-delay:6.3s}
  .chuva span:nth-child(6){left:64%; height:12rem;  --chuva-tempo:10s;  animation-delay:3.7s}
  .chuva span:nth-child(7){left:76%; height:7rem;   --chuva-tempo:6.7s; animation-delay:0.9s}
  .chuva span:nth-child(8){left:88%; height:10rem;  --chuva-tempo:11.7s;animation-delay:4.6s}
  .chuva span:nth-child(9){left:95%; height:5rem;   --chuva-tempo:8.3s; animation-delay:7.2s}

  /* Em tela estreita há menos largura para os feixes se distribuírem;
     nove viram grade, quatro continuam sendo chuva. */
  @media(max-width:700px){
    .chuva span:nth-child(2),.chuva span:nth-child(4),
    .chuva span:nth-child(6),.chuva span:nth-child(8),
    .chuva span:nth-child(9){display:none}
  }
}

/* O botão "parar animações" apaga a chuva inteira. */
html.ac-parar .chuva{display:none}

/* Cada fundo pede a sua cor. Sobre o laranja da chamada final e o verde da
   campanha, laranja sobre laranja não apareceria.

   O HERO NÃO TEM CHUVA — retirada em 13/08/2026. Ele é o banner de
   abertura e vai receber carrossel de imagens no futuro; efeito de fundo
   ali disputaria com a foto e teria de ser refeito a cada banner novo. */
.cta-final .chuva{--chuva-cor:rgba(255,255,255,.55)}
.premiada .chuva{--chuva-cor:rgba(190,240,215,.5)}

.premiada{position:relative;overflow:hidden}
.premiada .container{position:relative;z-index:2}
.cta-final .container{z-index:2}

/* ---------- BOTÕES: VARREDURA NO HOVER ----------
   Uma película clara sobe de baixo ao passar o mouse. Vem do design
   system de referência; aqui usa a cor da própria casa e mantém o texto
   sempre acima, para o contraste não mudar durante o movimento. */
.botao{position:relative;overflow:hidden;isolation:isolate}
.botao::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateY(101%);
  transition:transform var(--t);background:rgba(255,255,255,.16)}
.botao:hover::before,.botao:focus-visible::before{transform:translateY(0)}
.botao--sec::before,.botao--claro::before{background:var(--lar-vidro)}
/* A seta anda junto com o cursor.
   Vale só para quem tem a classe .ico-seta, e não para todo svg do botão:
   um coração ou um cadeado deslizando para a direita não quer dizer nada.
   Seletor por posição não resolve — em "Quero ajudar" o ícone é o único
   filho, portanto é ao mesmo tempo o primeiro e o último. */
.botao .ico-seta{transition:transform var(--t)}
.botao:hover .ico-seta,.botao:focus-visible .ico-seta{transform:translateX(3px)}

/* ---------- FEIXE NA BORDA ----------
   Um arco de luz percorrendo a borda do botão. Ver DECISOES.md V-10.

   COMO FUNCIONA, porque não é óbvio: o `::after` cobre o botão inteiro com
   um conic-gradient — transparente em quase toda a volta, claro num arco
   curto. A máscara `mask-composite: exclude` recorta o miolo e deixa
   visível só a faixa de 2px da borda. Girando o ângulo do gradiente, o
   arco caminha pela borda.

   POR QUE O ÂNGULO E NÃO `transform: rotate()`: girar o elemento giraria
   a máscara junto, e o recorte deixaria de coincidir com a borda. Só o
   ângulo do gradiente se move; a máscara fica parada.

   POR QUE `@property`: o navegador não sabe interpolar uma variável
   qualquer — sem registrar o tipo, `--lar-giro` saltaria de 0 a 360 no
   fim, sem caminho. Registrada como <angle>, ela é animável.

   DEGRADAÇÃO: navegador sem @property ignora a regra e a variável não
   interpola — o gradiente fica parado e o botão exibe um anel estático.
   Mesma coisa sob movimento reduzido. Nunca some, nunca pisca. */
@property --lar-giro{syntax:'<angle>';initial-value:0deg;inherits:false}

.botao--verde,.botao--feixe,.pill--doar{position:relative}
.botao--verde::after,.botao--feixe::after,.pill--doar::after{content:"";position:absolute;inset:0;border-radius:inherit;
  padding:2px;pointer-events:none;
  background:conic-gradient(from var(--lar-giro),
    transparent 0deg,transparent 296deg,
    var(--feixe-cor,rgba(255,255,255,.92)) 340deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}

@media (prefers-reduced-motion:no-preference){
  .botao--verde::after,.botao--feixe::after,.pill--doar::after{animation:lar-giro 3.2s linear infinite}
  @keyframes lar-giro{to{--lar-giro:360deg}}
  /* No hover o feixe acelera — devolve resposta ao gesto sem mudar nada
     de posição, que é o que faria o botão "fugir" do cursor. */
  .botao--verde:hover::after,.botao--feixe:hover::after,.pill--doar:hover::after{animation-duration:1.4s}
}

/* ---------- COR DO FEIXE: contraste, não harmonia ----------
   O feixe existe para chamar atenção, então usa a cor OPOSTA à do botão,
   não uma variação dela. Branco sobre verde é discreto demais; o laranja
   da casa sobre o verde salta, e continua sendo cor do sistema — não
   entra tom novo na paleta.

   O par laranja/verde é o mesmo que o site já usa para separar "ação
   principal" de "identidade", então o contraste soa intencional. */
.botao--verde,.pill--doar{--feixe-cor:rgba(255,138,58,.98)}
.premiada .botao--verde{--feixe-cor:rgba(255,150,70,1)}
.cta-final .botao--feixe{--feixe-cor:rgba(255,255,255,.98);border-color:transparent}
/* O `.botao--claro` já tem borda de 1px. Somada ao anel de 2px daria
   contorno duplo, então a estática sai e o feixe passa a ser a borda.
   Sobre o laranja da chamada final o contraste vem do branco: laranja
   sobre laranja não apareceria. */

/* O botão secundário do hero não recebe feixe: dois botões disputando
   atenção lado a lado anulam a hierarquia que o feixe existe para criar. */

/* ---------- CARTÕES COM MAIS ACABAMENTO ----------
   Filete superior em degradê que se abre da esquerda no hover, e o ícone
   reagindo junto. O cartão inteiro continua branco: inverter para escuro,
   como faz um dos design systems de referência, quebraria o contraste
   medido em DESIGN.md. */
.cartao{position:relative;overflow:hidden;transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.cartao::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-lar);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t)}
.cartao:hover{border-color:var(--lar-suave)}
.cartao:hover::before{transform:scaleX(1)}
.cartao__ico{transition:transform var(--t),background var(--t),border-color var(--t),box-shadow var(--t)}
.cartao:hover .cartao__ico{transform:translateY(-3px) rotate(-4deg);
  background:var(--grad-lar);border-color:transparent;color:#fff;box-shadow:0 8px 22px rgba(224,97,34,.34)}

/* ---------- FOTO DE MOMENTO ----------
   Ao passar o mouse: aproxima devagar, ganha cor e a legenda sobe sobre
   um véu escuro. A referência partia de preto e branco; aqui a foto só
   perde um pouco de saturação em repouso — foto de casa de idosos em
   escala de cinza lê como tristeza, que é o oposto do que o site diz. */
.momento__crop{position:relative}
.momento__foto{filter:saturate(.82);transition:transform .7s cubic-bezier(.16,1,.3,1),filter .7s ease}
.momento:hover .momento__foto{transform:scale(1.07);filter:saturate(1.05)}
.momento__crop::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity var(--t);
  background:linear-gradient(to top,rgba(42,35,31,.42),transparent 55%)}
.momento:hover .momento__crop::after{opacity:1}

/* ---------- ATALHOS ----------
   O anel do atalho do Portal respira devagar. É o único movimento em laço
   do site, e está aqui de propósito: o Portal da Transparência é o
   destino que o site mais precisa que se encontre. Ver DECISOES.md V-06. */
.atalho{position:relative;overflow:hidden}
.atalho::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity var(--t);
  background:radial-gradient(20rem 10rem at 50% 120%,rgba(232,100,30,.14),transparent 70%)}
.atalho:hover::after{opacity:1}
.atalho .atalho__ico svg{transition:transform var(--t)}
.atalho:hover .atalho__ico svg{transform:scale(1.08)}
@media (prefers-reduced-motion:no-preference){
  .atalho--destaque .atalho__ico{animation:lar-respira 4.5s ease-in-out infinite}
  @keyframes lar-respira{
    0%,100%{box-shadow:0 4px 14px rgba(224,97,34,.34),0 0 0 5px rgba(232,100,30,.12),inset 0 1px 0 rgba(255,255,255,.28)}
    50%    {box-shadow:0 4px 16px rgba(224,97,34,.38),0 0 0 9px rgba(232,100,30,.07),inset 0 1px 0 rgba(255,255,255,.28)}}
  .atalho--destaque:hover .atalho__ico{animation:none}
}

/* ---------- NÚMEROS ----------
   Filete inferior que se abre no hover, mesma gramática do cartão. */
.numeros>div{position:relative;overflow:hidden;transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.numeros>div::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--grad-lar);
  transform:scaleX(0);transform-origin:center;transition:transform var(--t)}
.numeros>div:hover{border-color:var(--lar-suave)}
.numeros>div:hover::after{transform:scaleX(1)}

/* ---------- ÍCONE DO TÍTULO DE SEÇÃO ----------
   O quadro de vidro ganha cor quando a seção entra na tela. Enriquece a
   iconografia sem trocar nenhum desenho de ícone. */
.tit__ico{transition:background var(--t),border-color var(--t),color var(--t),transform var(--t)}
.tit:hover .tit__ico{background:var(--grad-lar);border-color:transparent;color:#fff;transform:rotate(-4deg)}
.tit:hover .tit__ico svg{color:#fff}

/* ---------- FILETE DE TÍTULO QUE SE ABRE ---------- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .tit-linha{animation:lar-filete .8s cubic-bezier(.16,1,.3,1) both;
      animation-timeline:view();animation-range:entry 0% entry 45%;transform-origin:left}
    @keyframes lar-filete{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
}

/* ---------- FAIXA INFINITA ----------
   Conteúdo deslizando em laço, sem fim. Ver DECISOES.md V-07.

   COMO FUNCIONA: a lista é escrita duas vezes no HTML. A pista desliza
   até -50% e recomeça — como a segunda metade é idêntica à primeira, o
   ponto de emenda cai exatamente onde o desenho se repete e o laço fica
   invisível. A segunda cópia leva aria-hidden, senão o leitor de tela
   anuncia tudo duas vezes.

   AS QUATRO FORMAS DE PARAR, e nenhuma é enfeite:
   1. passar o mouse por cima;
   2. chegar pelo teclado (focus-within) — hover não serve a quem não usa
      mouse, e sem isto o item focado poderia sair da tela sozinho;
   3. o botão "parar animações" do painel de acessibilidade, alcançável de
      qualquer página;
   4. "reduzir movimento" no sistema operacional, que desliga antes de
      começar.
   Os itens 1 a 3 existem para cumprir o critério WCAG 2.2.2 (nível A),
   que exige um jeito de parar qualquer coisa que se mova sozinha por mais
   de cinco segundos. */
/* O ESTADO PARADO É O PADRÃO, e isto é deliberado.
   Sem movimento a pista não é uma pista: é uma lista que quebra linha e
   mostra tudo, centralizada. A animação é acréscimo por cima.

   Escrever ao contrário — pista em linha única como padrão, quebra como
   exceção — deixaria o conteúdo que passa da largura da tela inalcançável
   justamente para quem desligou o movimento, que é quem menos consegue
   ir atrás dele. */
.faixa{position:relative}
.faixa__pista{display:flex;flex-wrap:wrap;justify-content:center}
.faixa__grupo{display:flex;flex-wrap:wrap;justify-content:center;align-items:center}
.faixa__grupo+.faixa__grupo{display:none}

@media (prefers-reduced-motion:no-preference){
  .faixa{overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .faixa__pista{flex-wrap:nowrap;width:max-content;justify-content:flex-start;
    animation:lar-desliza var(--faixa-tempo,42s) linear infinite}
  .faixa__grupo{flex-wrap:nowrap;flex:none}
  .faixa__grupo+.faixa__grupo{display:flex}
  .faixa:hover .faixa__pista,
  .faixa:focus-within .faixa__pista{animation-play-state:paused}
  @keyframes lar-desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
}

/* "Parar animações" do painel precisa devolver a lista parada E completa.
   A regra html.ac-parar zera a animação, mas não desfaz o nowrap nem a
   segunda cópia — sem o bloco abaixo, quem apertasse o botão veria o
   conteúdo duplicado e cortado na borda da tela. */
html.ac-parar .faixa{overflow:visible;-webkit-mask-image:none;mask-image:none}
html.ac-parar .faixa__pista{flex-wrap:wrap;width:auto;justify-content:center;transform:none}
html.ac-parar .faixa__grupo{flex-wrap:wrap}
html.ac-parar .faixa__grupo+.faixa__grupo{display:none}

/* Faixa dos números — a informação principal da home em movimento.
   Tipografia maior que a de uma faixa decorativa comum, justamente
   porque aqui há conteúdo a ler. */
.faixa--numeros{background:var(--lar-nevoa);border-block:1px solid var(--lar-linha);padding-block:1.5rem}
.faixa--numeros .faixa__grupo{gap:0}
.faixa-item{display:flex;align-items:baseline;gap:.6rem;padding-inline:2.2rem;white-space:nowrap}
.faixa-item b{font-size:2.1rem;font-weight:800;line-height:1;
  background:var(--grad-lar);-webkit-background-clip:text;background-clip:text;color:transparent}
.faixa-item span{color:var(--texto-sec);font-size:.98rem}
.faixa-sep{width:7px;height:7px;border-radius:50%;background:var(--lar-suave);flex:none}
@media(max-width:560px){.faixa-item{padding-inline:1.4rem}.faixa-item b{font-size:1.7rem}}

/* Carrossel de pessoas — diretoria e conselho fiscal */
.faixa--pessoas{--faixa-tempo:56s;padding-block:.5rem}
.faixa--pessoas .faixa__grupo{gap:1.2rem;padding-right:1.2rem}
.faixa--pessoas .pessoa{flex:none;width:190px;margin:0;
  background:#fff;border:1px solid var(--lar-linha);border-radius:var(--r);padding:1.1rem 1rem;text-align:center;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.faixa--pessoas .pessoa:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-color:var(--lar-suave)}
.faixa--pessoas .pessoa__foto{width:96px;height:96px;margin:0 auto .8rem;border-radius:50%;overflow:hidden;
  background:var(--lar-vidro);border:1px solid var(--lar-vidro-borda);
  display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center}
.faixa--pessoas figcaption strong{display:block;font-size:.95rem;color:var(--marrom-escuro);line-height:1.25}
.faixa--pessoas figcaption span{display:block;font-size:.85rem;color:var(--texto-sec);margin-top:.15rem}

/* Iniciais no lugar do retrato, enquanto não houver autorização de imagem.
   Um círculo com duas letras é sóbrio e não parece defeito — silhueta
   genérica ou ícone de "usuário sem foto" leem como cadastro incompleto,
   e estas são as pessoas que respondem pela instituição. */
.pessoa__foto--iniciais{background:var(--grad-lar);border-color:transparent}
.pessoa__foto--iniciais span{font-size:1.6rem;font-weight:800;color:#fff;letter-spacing:.02em}

/* Houve aqui um aviso escrito — "passe o mouse para pausar" — retirado em
   13/08/2026 por deixar a seção suja. As formas de parar continuam todas
   de pé; o que saiu foi só o texto que as anunciava. O mecanismo que
   cumpre o WCAG 2.2.2 é o botão "parar animações" do painel de
   acessibilidade, que independe deste aviso. Ver DECISOES.md V-07. */

/* ---------- SEPARADOR ENTRE SEÇÕES ----------
   Um fio que nasce e morre transparente, em vez de borda de ponta a
   ponta. É o acabamento minimalista das referências, na cor da casa. */
.secao--alt{position:relative}
.secao--alt::before,.secao--alt::after{content:"";position:absolute;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,var(--lar-linha) 22%,var(--lar-linha) 78%,transparent)}
.secao--alt::before{top:0}
.secao--alt::after{bottom:0}

/* ---------- FAIXA DA HISTÓRIA ----------
   Na Quem Somos a história corre sobre uma foto de jornal antigo, com uma
   película da cor do fundo por cima para o texto continuar legível, e a
   foto presa à tela enquanto o texto rola. Quem traz a faixa é o próprio
   conteúdo da página (ver page.php): ela precisa da largura inteira, e
   dentro do `.container` não caberia. */
.secao--historia{position:relative;background-image:linear-gradient(color-mix(in srgb,var(--fundo) 90%,transparent),color-mix(in srgb,var(--fundo) 90%,transparent)),var(--foto-jornal);background-size:cover;background-position:center 35%;background-attachment:fixed}

/* Foto presa à tela custa caro em celular e em tela sensível ao toque: o
   navegador repinta a cada quadro do rolagem. Nesses casos a foto rola
   junto, e o desenho continua o mesmo. */
@media (max-width:900px),(pointer:coarse){.secao--historia{background-attachment:scroll}}

/* A linha "Página atualizada em" fecha a página quando o conteúdo traz as
   próprias faixas. Não é faixa de conteúdo: leva só o respiro de baixo. */
.secao--rodape-pagina{padding-block:0 3rem}

html.ac-contraste{background:#000}
html.ac-contraste body{background:#000;color:#FFF6E5}
html.ac-contraste .cab,html.ac-contraste .topo,html.ac-contraste .rodape,
html.ac-contraste .secao,html.ac-contraste .secao--alt,html.ac-contraste .cartao,
html.ac-contraste .doc,html.ac-contraste .docs,html.ac-contraste .projeto,
html.ac-contraste .momento,html.ac-contraste .diario-item,html.ac-contraste .perguntas>div,
html.ac-contraste .fontes,html.ac-contraste .fontes__lista li,html.ac-contraste .intencao,
html.ac-contraste .convite,html.ac-contraste .aviso,html.ac-contraste .vazio,
html.ac-contraste .filtros,html.ac-contraste .nota-arquivo,html.ac-contraste .nota-valores,
html.ac-contraste .acess,html.ac-contraste .acess__topo,html.ac-contraste .acess__rodape,
html.ac-contraste .hero{background:#000 !important;color:#FFF6E5 !important;border-color:#FFD37A !important}
html.ac-contraste h1,html.ac-contraste h2,html.ac-contraste h3,html.ac-contraste h4,
html.ac-contraste dt,html.ac-contraste strong,html.ac-contraste b{color:#FFD37A !important}
html.ac-contraste a{color:#7FE3FF !important}
html.ac-contraste .botao,html.ac-contraste .pill,html.ac-contraste .fab,
html.ac-contraste .nav,html.ac-contraste .cta-final,html.ac-contraste .bloco-transp__letra,
html.ac-contraste .atalho__ico,html.ac-contraste .acess__escala button[aria-pressed="true"]{
  background:#000 !important;background-image:none !important;color:#FFD37A !important;
  border:2px solid #FFD37A !important;box-shadow:none !important}
html.ac-contraste .hero__img,html.ac-contraste .hero::after{opacity:.12}
html.ac-contraste .numeros dt{background:none;-webkit-text-fill-color:#FFD37A;color:#FFD37A}
html.ac-contraste img{filter:grayscale(1) contrast(1.15)}

/* ---------- RODAPÉ minimalista ---------- */
.rodape{background:var(--lar-nevoa);color:var(--texto-sec);font-size:.86rem;line-height:1.55;
  border-top:3px solid transparent;border-image:var(--grad-lar) 1;padding-block:2.4rem 1.1rem}
.rodape a{color:var(--texto-sec);text-decoration:none;transition:color var(--t)}
.rodape a:hover{color:var(--lar-escuro)}
.rodape h3 svg{width:17px;height:17px;display:block}
.rodape h3{display:inline-flex;align-items:center;gap:.45rem;color:var(--lar-escuro);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.11em;font-weight:800;margin:0 0 .7rem;padding-bottom:.35rem;
  border-bottom:2px solid var(--lar-vidro-borda)}
.rodape__grade{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:1.6rem 2rem}
.rodape ul{list-style:none;margin:0;padding:0}
.rodape li{margin-bottom:.28rem}
.rodape p{margin:0 0 .5rem}
.rodape__selos{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.6rem}
.rodape__selo{font-size:.68rem;font-weight:700;letter-spacing:.04em;color:var(--lar-escuro);
  background:var(--lar-vidro);border:1px solid var(--lar-vidro-borda);border-radius:var(--r-pill);padding:.25rem .7rem}
.rodape__fim{border-top:1px solid var(--lar-linha);margin-top:1.4rem;padding-top:.9rem;font-size:.78rem;
  display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;justify-content:space-between;color:var(--texto-sec)}
@media(max-width:860px){.rodape__grade{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.rodape__grade{grid-template-columns:1fr}}

/* ---------- FUNDO DO IDOSO ---------- */
@media(max-width:640px){.fundo-idoso{padding:1.8rem 1.3rem}}

/* ---------- DIÁRIO DO LAR ---------- */
/* ========================================================================
   CABEÇALHO DE PÁGINA — a faixa que abre toda página interna
   ------------------------------------------------------------------------
   Ver DECISOES.md V-29. Até 13/08/2026 esta faixa só existia na prévia, com
   o nome `.diario-cabeca`, e nenhum modelo do tema a usava: cada página
   abria de um jeito. Agora é uma peça só, gerada por
   lar_titulo_da_pagina(), e todas as páginas passam por ela.

   O LARANJA É MAIS FUNDO QUE O DA NAVEGAÇÃO, e por dois motivos. O
   primeiro é medido: sobre o laranja da barra de menu, o subtítulo branco
   dava 3,48:1 e reprovava. Sobre este, dá 6,4:1. O segundo é de desenho —
   a faixa fica logo abaixo da navegação, e dois laranjas iguais
   empilhados viram um bloco só; escurecendo, lê-se camada sobre camada.

   A ALTURA GENEROSA NO TOPO NÃO É RESPIRO, É FUNÇÃO: a barra de navegação
   flutua por cima do que vem depois do cabeçalho (V-23). Com pouco
   espaço, ela cobria o título ao aparecer. Os 5,4rem garantem que o
   título comece abaixo dela. */
.cab-pagina{position:relative;overflow:hidden;color:#fff;
  padding-block:5.4rem 3rem;
  background:linear-gradient(120deg,var(--lar-profundo) 0%,#8A2C08 55%,#7A2606 100%)}
.cab-pagina::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(42rem 22rem at 88% -20%,rgba(240,168,60,.18),transparent 62%)}
.cab-pagina .container{position:relative;z-index:1;display:flex;align-items:center;gap:1.3rem}
.cab-pagina__ico{width:66px;height:66px;flex:none;border-radius:19px;
  display:flex;align-items:center;justify-content:center;line-height:0;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform var(--t),background var(--t),border-color var(--t),box-shadow var(--t)}
.cab-pagina__ico svg{width:34px;height:34px;display:block;color:#fff}

/* A animação padrão dos ícones do sistema: gira 4° e a caixa acende.
   Aqui o acender é em âmbar, que é a cor de destaque desta faixa. */
.cab-pagina:hover .cab-pagina__ico{transform:rotate(-4deg) scale(1.04);
  background:rgba(240,168,60,.28);border-color:rgba(240,168,60,.6);
  box-shadow:0 6px 22px rgba(240,168,60,.28)}

.cab-pagina h1{color:#fff;margin:0;font-size:clamp(1.8rem,1.35rem + 1.9vw,2.5rem);line-height:1.12}
.cab-pagina__sub{margin:.35rem 0 0;color:rgba(255,255,255,.92);font-size:1.02rem;max-width:56ch}

/* O RISCO EMBAIXO DO TÍTULO, em âmbar. Sobre o laranja fundo ele dá
   4,2:1 — não é texto, mas precisa ser visto, e âmbar é a única cor do
   sistema que salta desse fundo sem brigar com ele. */
.cab-pagina__risco{height:4px;width:78px;border-radius:4px;margin-top:.85rem;
  background:linear-gradient(90deg,var(--ambar-forte),var(--ambar));
  transform-origin:left;transition:width .5s cubic-bezier(.16,1,.3,1)}
.cab-pagina:hover .cab-pagina__risco{width:104px}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .cab-pagina__risco{animation:lar-risco .7s cubic-bezier(.16,1,.3,1) both;
      animation-timeline:view();animation-range:entry 0% entry 30%}
    @keyframes lar-risco{from{width:0}to{width:78px}}
  }
}

@media(max-width:820px){
  .cab-pagina{padding-block:4.6rem 2.4rem}
  .cab-pagina .container{flex-direction:column;align-items:flex-start;gap:.9rem}
  .cab-pagina__ico{width:56px;height:56px;border-radius:16px}
  .cab-pagina__ico svg{width:29px;height:29px}
}

/* `.diario-cabeca` era o nome antigo, usado só na prévia. Mantido como
   apelido para nenhuma marcação antiga quebrar. */
.diario-cabeca{background:var(--grad-lar);color:#fff;padding-block:2.6rem}
.diario-cabeca .container{display:flex;align-items:center;gap:1.2rem}
.diario-cabeca__ico{width:64px;height:64px;flex:none;border-radius:18px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px)}
.diario-cabeca__ico svg{width:34px;height:34px;display:block}
.diario-cabeca h1{color:#fff;margin:0;font-size:2rem}
.diario-cabeca p{margin:.2rem 0 0;color:rgba(255,255,255,.9);font-size:1rem}

.diario-grade{display:grid;grid-template-columns:330px 1fr;gap:2rem;align-items:start}
@media(max-width:900px){.diario-grade{grid-template-columns:1fr}}

.cal{background:#fff;border:1px solid var(--lar-linha);border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra)}
.cal__topo{background:var(--grad-lar);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem}
.cal__topo strong{font-size:.98rem;letter-spacing:.02em}
.cal__nav{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.16);
  color:#fff;cursor:pointer;font:inherit;line-height:1;display:grid;place-items:center;transition:background var(--t)}
.cal__nav:hover{background:rgba(255,255,255,.32)}
.cal table{width:100%;border-collapse:collapse;font-size:.88rem}
.cal th{padding:.7rem .2rem .4rem;color:var(--texto-sec);font-weight:700;font-size:.76rem}
.cal td{text-align:center;padding:.16rem}
.cal__dia{width:32px;height:32px;border-radius:50%;display:inline-grid;place-items:center;color:var(--texto-sec);
  border:1px solid transparent;font-size:.86rem}
.cal__dia--tem{border-color:var(--lar-suave);color:var(--lar-escuro);font-weight:700;cursor:pointer;transition:all var(--t)}
.cal__dia--tem:hover{background:var(--lar-vidro)}
.cal__dia--futuro{border-color:rgba(30,158,99,.45);color:var(--verde-link);font-weight:700;cursor:pointer}
.cal__dia--futuro:hover{background:rgba(30,158,99,.10)}
.cal__dia--hoje{background:var(--grad-lar);color:#fff;font-weight:800;border-color:transparent}
.cal__legenda{border-top:1px solid var(--lar-linha);padding:.9rem 1rem;font-size:.8rem;color:var(--texto-sec)}
.cal__legenda div{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}
.cal__bola{width:14px;height:14px;border-radius:50%;flex:none;border:1px solid}
.cal__bola--tem{border-color:var(--lar-suave);background:#fff}
.cal__bola--futuro{border-color:rgba(30,158,99,.45);background:#fff}
.cal__bola--hoje{background:var(--grad-lar);border-color:transparent}

.diario-item{display:flex;gap:1.1rem;background:#fff;border:1px solid var(--lar-linha);border-radius:var(--r);
  padding:1.1rem 1.3rem;margin-bottom:.9rem;transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.diario-item:hover{transform:translateX(3px);box-shadow:var(--sombra);border-color:var(--lar-suave)}
.diario-item__data{flex:none;width:62px;text-align:center;border-radius:12px;overflow:hidden;border:1px solid var(--lar-linha);height:fit-content}
.diario-item__dia{display:block;font-size:1.5rem;font-weight:800;color:var(--marrom-escuro);line-height:1;padding:.45rem 0 .3rem}
.diario-item__mes{display:block;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:var(--grad-lar);color:#fff;padding:.22rem 0}
.diario-item--futuro .diario-item__mes{background:linear-gradient(160deg,var(--verde-claro),var(--verde))}
.diario-item h3{font-size:1.05rem;margin:0 0 .25rem}
.diario-item h3 a{text-decoration:none;color:var(--marrom-escuro)}
.diario-item h3 a:hover{color:var(--lar-escuro)}
.diario-item p{margin:0;font-size:.93rem;color:var(--texto-sec)}
.diario-item__tags{display:flex;gap:.4rem;margin-top:.55rem;flex-wrap:wrap}
.tag{font-size:.72rem;font-weight:700;padding:.16rem .6rem;border-radius:var(--r-pill);
  background:var(--lar-vidro);border:1px solid var(--lar-vidro-borda);color:var(--lar-escuro)}
.tag--futuro{background:rgba(30,158,99,.10);border-color:rgba(30,158,99,.24);color:var(--verde-link)}
.diario-sub{font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--lar-escuro);
  margin:0 0 .9rem;display:flex;align-items:center;gap:.5rem}
.diario-sub::after{content:"";flex:1;height:1px;background:var(--lar-linha)}

/* ---------- PROJETOS ---------- */
.projetos{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.6rem}
.projeto{background:#fff;border:1px solid var(--lar-linha);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sombra);transition:transform var(--t),box-shadow var(--t)}
.projeto:hover{transform:translateY(-5px);box-shadow:var(--sombra-alta)}
.projeto__crop{overflow:hidden;position:relative}
.projeto__foto{aspect-ratio:16/10;background-size:cover;background-position:center;transition:transform .5s ease}
.projeto:hover .projeto__foto{transform:scale(1.05)}
.projeto__status{position:absolute;top:.9rem;left:.9rem;font-size:.72rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:.3rem .8rem;border-radius:var(--r-pill);backdrop-filter:blur(8px)}
.projeto__status--andamento,.projeto__status--em-andamento{background:rgba(30,158,99,.92);color:#fff}
.projeto__status--concluido,.projeto__status--planejado{background:rgba(232,100,30,.92);color:#fff}
.projeto__corpo{padding:1.4rem}
.projeto__corpo h3{margin:0 0 .5rem;font-size:1.15rem}
.projeto__corpo p{margin:0 0 1rem;font-size:.95rem;color:var(--texto-sec)}
.projeto__dados{border-top:1px solid var(--lar-linha);padding-top:.9rem;display:grid;gap:.45rem;font-size:.87rem}
.projeto__linha{display:flex;justify-content:space-between;gap:1rem}
.projeto__linha span:first-child{color:var(--texto-sec)}
.projeto__linha span:last-child{font-weight:700;color:var(--marrom-escuro);text-align:right}
.barra-prog{height:7px;border-radius:99px;background:var(--lar-fraco);overflow:hidden;margin-top:.7rem}
.barra-prog i{display:block;height:100%;border-radius:99px;background:var(--grad-lar)}

/* ---------- PARCEIROS ---------- */
.parceiros{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}
.parceiro{background:#fff;border:1px solid var(--lar-linha);border-radius:var(--r);padding:1.4rem 1rem;
  text-align:center;transition:border-color var(--t),transform var(--t)}
.parceiro:hover{border-color:var(--lar-suave);transform:translateY(-3px)}
.parceiro strong{display:block;font-size:.94rem;color:var(--marrom-escuro);line-height:1.25}
.parceiro span{display:block;font-size:.78rem;color:var(--texto-sec);margin-top:.25rem}

/* ---------- CTA FINAL ---------- */
.cta-final{background:var(--grad-lar);color:#fff;padding-block:3.4rem;text-align:center}
.cta-final h2{color:#fff;margin:0 0 .6rem;font-size:2rem}
.cta-final p{color:rgba(255,255,255,.92);max-width:52ch;margin:0 auto 1.8rem;font-size:1.08rem}
.cta-final .botao--claro{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.55);color:#fff !important;backdrop-filter:blur(8px)}
.cta-final .botao--claro:hover{background:rgba(255,255,255,.3)}
.cta-final__acoes{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* ---------- ESCOLHA POR INTENÇÃO ---------- */
.intencoes{display:grid;gap:.9rem;max-width:820px}
.intencao{display:flex;align-items:center;gap:1.2rem;background:#fff;border:1px solid var(--lar-linha);
  border-radius:var(--r);padding:1.3rem 1.5rem;text-decoration:none;color:inherit;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.intencao:hover{transform:translateX(4px);box-shadow:var(--sombra);border-color:var(--lar-suave);color:inherit}
.intencao__ico{width:52px;height:52px;flex:none;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:var(--lar-vidro);border:1px solid var(--lar-vidro-borda);color:var(--lar-escuro)}
.intencao__ico svg{width:27px;height:27px;display:block}
.intencao__txt{flex:1;min-width:0}
.intencao__txt strong{display:block;font-size:1.08rem;color:var(--marrom-escuro);margin-bottom:.15rem}
.intencao__txt span{display:block;font-size:.93rem;color:var(--texto-sec)}
.intencao__seta{flex:none;color:var(--lar-escuro);transition:transform var(--t)}
.intencao__seta svg{width:24px;height:24px;display:block}
.intencao:hover .intencao__seta{transform:translateX(4px)}
.intencao--verde .intencao__ico{background:linear-gradient(160deg,var(--verde-claro),var(--verde));border-color:transparent;color:#fff}
.intencao--verde{border-color:rgba(30,158,99,.28)}

/* ---------- CONVITE CONTEXTUAL ---------- */
.convite{display:flex;align-items:center;gap:1.2rem;background:var(--lar-nevoa);border:1px solid var(--lar-linha);
  border-left:4px solid var(--lar-forte);border-radius:0 var(--r) var(--r) 0;padding:1.3rem 1.6rem;margin-top:2rem;flex-wrap:wrap}
.convite p{margin:0;flex:1;min-width:240px;color:var(--texto-sec);font-size:.98rem}
.convite strong{color:var(--marrom-escuro)}

/* ---------- CONTADOR DE DOCUMENTOS ---------- */
.contador-docs{display:inline-flex;align-items:baseline;gap:.5rem;background:var(--lar-vidro);
  border:1px solid var(--lar-vidro-borda);border-radius:var(--r-pill);padding:.4rem 1.1rem;margin-bottom:1rem}
.contador-docs b{font-size:1.5rem;font-weight:800;color:var(--lar-escuro);line-height:1}
.contador-docs span{font-size:.88rem;color:var(--texto-sec)}

/* ---------- DIÁRIO: destaque ---------- */
.diario-item--destaque{border-color:var(--lar-suave);border-width:2px;background:linear-gradient(140deg,#fff,var(--lar-papel))}
.diario-item--destaque h3{font-size:1.2rem}
.selo-destaque{display:inline-flex;align-items:center;gap:.3rem;font-size:.68rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;background:var(--grad-lar);border-radius:var(--r-pill);padding:.2rem .65rem;
  margin-bottom:.4rem}

/* ---------- PROJETO: benefício ---------- */
.projeto__beneficio{display:flex;gap:.6rem;align-items:flex-start;background:var(--lar-nevoa);border-radius:10px;
  padding:.75rem .9rem;margin-top:.9rem;font-size:.9rem;color:var(--marrom-escuro);line-height:1.45}
.projeto__beneficio svg{width:20px;height:20px;flex:none;color:var(--verde-link);margin-top:.1rem;display:block}

/* ---------- BUSCA COM EXEMPLOS ---------- */
.busca-exemplos{font-size:.85rem;color:var(--texto-sec);margin:.6rem 0 0}
.busca-exemplos b{color:var(--marrom-escuro);font-weight:700}
.busca-exemplos a{display:inline-block;background:var(--lar-vidro);border:1px solid var(--lar-vidro-borda);
  border-radius:var(--r-pill);padding:.15rem .65rem;margin:.2rem .25rem 0 0;text-decoration:none;color:var(--lar-escuro);font-size:.82rem}
.busca-exemplos a:hover{background:rgba(232,100,30,.16)}

/* ---------- FRASE-RESUMO DA HOME ---------- */
.resumo-lead{font-size:1.22rem;line-height:1.55;color:var(--marrom-escuro);font-weight:600;
  max-width:56rem;margin:0 auto 2.4rem;text-align:center}
@media(max-width:640px){.resumo-lead{font-size:1.08rem;text-align:left}}
/* ---------- COMO O LAR SE MANTÉM ---------- */
.fontes{background:var(--lar-nevoa);border:1px solid var(--lar-linha);border-radius:var(--r);
  padding:2rem 2.2rem;margin:2.5rem 0 3rem}
.fontes h2{margin:0 0 .5rem;font-size:1.5rem}
.fontes>p{margin:0 0 1.4rem;max-width:var(--larg-texto);color:var(--texto-sec)}
.fontes__lista{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.fontes__lista li{display:flex;align-items:flex-start;gap:.95rem;background:#fff;
  border:1px solid var(--lar-linha);border-radius:10px;padding:.85rem 1.1rem}
.fontes__lista svg{width:23px;height:23px;flex:none;color:var(--lar-escuro);margin-top:.1rem}
.fontes__lista li>span{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem;flex:1;min-width:0}
.fontes__lista strong{flex:0 0 100%;color:var(--marrom-escuro);font-size:1rem}
.fontes__lista li>span{font-size:.9rem;color:var(--texto-sec);line-height:1.45}
.fontes__lista a{margin-left:auto;white-space:nowrap;font-size:.85rem;font-weight:600}
.fontes__nota{margin:1.3rem 0 0;font-size:.9rem;color:var(--texto-sec);
  border-top:1px solid var(--lar-linha);padding-top:1rem}
@media(max-width:640px){.fontes{padding:1.5rem 1.2rem}.fontes__lista a{margin-left:0}}
/* ---------- NOTA SOBRE DOCUMENTOS ARQUIVADOS ---------- */
.nota-arquivo{display:flex;gap:.9rem;align-items:flex-start;background:var(--lar-papel);
  border:1px solid var(--lar-linha);border-radius:var(--r);padding:1.1rem 1.3rem;margin-top:3rem}
.nota-arquivo svg{width:23px;height:23px;flex:none;color:var(--lar-escuro);margin-top:.2rem}
.nota-arquivo p{margin:0;font-size:.92rem;color:var(--texto-sec);line-height:1.55}
/* ---------- AVISO DE VALORES EM CONFERÊNCIA ---------- */
.nota-valores{display:flex;gap:.9rem;align-items:flex-start;background:var(--lar-nevoa);
  border:1px solid var(--lar-linha);border-left:4px solid var(--lar-suave);
  border-radius:0 var(--r) var(--r) 0;padding:1rem 1.3rem;margin-bottom:1.8rem}
.nota-valores svg{width:23px;height:23px;flex:none;color:var(--lar-escuro);margin-top:.15rem}
.nota-valores p{margin:0;font-size:.92rem;color:var(--texto-sec);line-height:1.55}
.projeto__linha .pendente{color:var(--texto-sec);font-style:italic}
/* ---------- PERGUNTAS E RESPOSTAS DO BLOCO H ---------- */
.perguntas{display:grid;gap:.8rem;margin:1.6rem 0}
.perguntas>div{background:#fff;border:1px solid var(--lar-linha);border-radius:var(--r);padding:1.2rem 1.4rem}
.perguntas h3{margin:0 0 .5rem;font-size:1.05rem;color:var(--marrom-escuro)}
.perguntas p{margin:0 0 .6rem;font-size:.95rem;line-height:1.6}
.perguntas p:last-child{margin-bottom:0}
.perguntas .base{display:inline-block;margin-top:.3rem;font-size:.82rem;color:var(--texto-sec);
  background:var(--lar-vidro);border:1px solid var(--lar-vidro-borda);border-radius:var(--r-pill);padding:.15rem .7rem}
.contador-data{margin:.35rem 0 .9rem;font-size:.82rem;color:var(--texto-sec)}
/* ---------- COLUNAS DUPLAS ----------
   Estes blocos usavam grid em style inline, que nenhuma media query alcança:
   no celular continuavam em duas colunas e deformavam texto e imagem. */
.duo{display:grid;grid-template-columns:1.1fr 1fr;gap:3.5rem;align-items:center}
.duo--lateral{grid-template-columns:minmax(0,1fr) 380px;gap:3.5rem;align-items:start}
.duo--igual{grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.duo>*{min-width:0}

/* Trava geral: nada empurra a largura da janela */
html,body{overflow-x:clip}
/* .container tem largura máxima própria (--larg) e NÃO entra aqui:
   incluí-la sobrescrevia o limite e o site ia de margem a margem. */
.secao,.duo,.cartoes,.projetos,.momentos,.docs{max-width:100%}
/* .intencoes tem limite de leitura próprio (820px) e por isso NÃO entra na
   trava acima: incluí-la fazia os cartões de intenção atravessarem a página
   inteira na Contato. A trava contra estouro fica na forma min(). */
.intencoes{max-width:min(820px,100%)}

/* O mapa acompanha a mesma coluna dos cartões de intenção.
   ------------------------------------------------------------------
   Na Contato os dois são vizinhos: os cartões paravam em 820px e o mapa
   seguia até a largura cheia do container, então a borda direita da página
   quebrava no meio da leitura. Foi apontado em 27/08/2026. Um mapa não
   precisa ser largo — precisa estar alinhado com o que vem antes dele.
   Ver DECISOES.md V-32. */
.mapa{max-width:min(820px,100%)}

/* A classe .foto era usada em várias páginas sem nenhuma regra: o
   background aparecia no tamanho natural, sem cobrir o bloco. Era a causa
   das imagens em miniatura. */
.foto{width:100%;display:block;background-size:cover;background-position:center;
  background-repeat:no-repeat;border-radius:var(--r);overflow:hidden;background-color:var(--lar-nevoa);
  height:340px}
.foto--alta{height:460px}

/* ---------- IMAGENS: altura garantida em qualquer tela ----------
   O aspect-ratio sozinho falha em navegador antigo e faz o bloco colapsar,
   que foi o efeito de "miniatura" relatado. A altura explícita é a rede. */
.momento__crop,.projeto__crop{overflow:hidden;position:relative;background:var(--lar-nevoa)}
.momento__foto,.projeto__foto{width:100%;display:block;background-size:cover;background-position:center;
  background-repeat:no-repeat;transition:transform .5s ease}
.momento__foto{height:240px;aspect-ratio:auto}
.projeto__foto{height:230px;aspect-ratio:auto}
.momento__crop img,.projeto__crop img{width:100%;height:100%;object-fit:cover;display:block}
.hero{background-size:cover}

/* ---------- LIGAÇÃO PROJETO ↔ DIÁRIO ---------- */
.projeto__evento{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.4rem;
  border-top:1px solid var(--lar-linha);background:var(--lar-papel);text-decoration:none;
  font-size:.9rem;font-weight:600;color:var(--marrom-escuro);transition:background var(--t)}
.projeto__evento:hover{background:var(--lar-nevoa);color:var(--lar-escuro)}
.projeto__evento span{flex:1;min-width:0}
.projeto__evento svg{width:18px;height:18px;flex:none;color:var(--lar-escuro)}
.projeto__evento svg:last-child{width:16px;height:16px}
.tag--proj{text-decoration:none;background:var(--lar-vidro);border-color:var(--lar-vidro-borda);
  color:var(--lar-escuro);font-weight:700;transition:background var(--t)}
.tag--proj:hover{background:var(--grad-lar);border-color:transparent;color:#fff}

/* ---------- CAMPANHA DOAÇÃO PREMIADA ---------- */
.premiada{background:linear-gradient(135deg,#124F35,#18804F 55%,#1E9E63);color:#EAF6EF;padding-block:3.4rem}
.premiada__grade{display:grid;grid-template-columns:1.15fr 1fr;gap:3rem;align-items:center}
.premiada__grade>*{min-width:0}
.premiada__texto{min-width:0}
.premiada__selo{display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:var(--r-pill);
  padding:.35rem 1rem;font-size:.8rem;font-weight:700;margin-bottom:1rem;backdrop-filter:blur(6px)}
.premiada__selo svg{width:17px;height:17px}
.premiada h2{color:#fff;margin:0 0 .4rem;font-size:2.2rem}
.premiada__linha{color:#BFE6D2;font-size:1.2rem;font-weight:600;margin:0 0 1rem}
.premiada p{color:#D6EEE1;margin:0 0 .8rem}
.premiada strong{color:#fff}
.premiada__acoes{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}
.premiada .botao--verde{background:#fff;color:var(--verde-escuro) !important;box-shadow:0 3px 14px rgba(0,0,0,.18)}
.premiada .botao--verde:hover{box-shadow:0 8px 24px rgba(0,0,0,.26);color:var(--verde-escuro) !important}
.premiada .botao--claro{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.42);color:#fff !important}
.premiada .botao--claro:hover{background:rgba(255,255,255,.24)}

.premiada__passos{display:grid;gap:.7rem}
.premiada__passo{display:flex;align-items:flex-start;gap:1rem;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:1rem 1.1rem;backdrop-filter:blur(6px)}
.premiada__passo>span{width:32px;height:32px;flex:none;border-radius:50%;background:#fff;color:var(--verde-escuro);
  display:grid;place-items:center;font-weight:800;font-size:.95rem}
.premiada__passo div{font-size:.9rem;color:#CDEADB;line-height:1.45}
.premiada__passo strong{display:block;color:#fff;font-size:.98rem;margin-bottom:.1rem}

/* Números de destaque na página da campanha */
.premiada__destaque{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-top:2rem}
.premiada__destaque>div{background:var(--lar-papel);border:1px solid var(--lar-linha);border-radius:var(--r);
  padding:1.3rem 1rem;text-align:center}
.premiada__destaque span{display:block;font-size:.82rem;color:var(--texto-sec)}
.premiada__destaque strong{display:block;font-size:1.9rem;font-weight:800;line-height:1.1;margin:.15rem 0;
  background:linear-gradient(160deg,var(--verde-claro),var(--verde));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Resultados dos sorteios */
.sorteios{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1.6rem}
.sorteio{background:#fff;border:1px solid var(--lar-linha);border-radius:var(--r);padding:1.3rem;
  transition:transform var(--t),box-shadow var(--t)}
.sorteio:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.sorteio__mes{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--verde-link);background:rgba(30,158,99,.10);border:1px solid rgba(30,158,99,.24);
  border-radius:var(--r-pill);padding:.2rem .7rem;margin-bottom:.7rem}
.sorteio h3{margin:0 0 .3rem;font-size:1.1rem}
.sorteio__ganhador{margin:0 0 .9rem;font-size:.9rem;color:var(--texto-sec)}
.sorteio__link{display:inline-flex;align-items:center;gap:.45rem;font-size:.87rem;font-weight:700;text-decoration:none}
.sorteio__link svg{width:16px;height:16px}

/* Página da campanha: respiro menor entre blocos — é uma landing, precisa
   ser percorrida de uma vez, não navegada aos poucos. */
#pg-premiada .secao{padding-block:2.6rem}
#pg-premiada .tit{margin-bottom:.3rem}
#pg-premiada .tit-linha{margin-bottom:1rem}
#pg-premiada .conteudo p{margin-bottom:.75em}
#pg-premiada .conteudo h2{margin-top:1.6rem}
#pg-premiada .premiada__destaque{margin-top:1.4rem}
#pg-premiada .sorteios{margin-top:1.1rem}
#pg-premiada .cartoes{margin-top:1.1rem}
#pg-premiada .docs{margin-top:.9rem}
#pg-premiada .cartao{padding:1.4rem}
#pg-premiada>div>div>div[style*="margin-top:3.5rem"]{margin-top:2.4rem !important}
#pg-premiada .convite{margin-top:1.8rem !important}
#pg-premiada .aviso--alerta{margin-top:1.2rem !important}

/* ---------- ENDEREÇO COM ROTA ---------- */
.endereco{display:inline-flex;align-items:flex-start;gap:.45rem;text-decoration:none;
  color:inherit;transition:color var(--t)}
.endereco svg{width:16px;height:16px;flex:none;margin-top:.18em;color:var(--lar-escuro)}
.endereco span{flex:1;min-width:0}
.endereco:hover{color:var(--lar-escuro)}
.endereco:hover span{text-decoration:underline;text-underline-offset:2px}

/* ---------- MAPA ---------- */
.mapa{margin-top:1.4rem;border:1px solid var(--lar-linha);border-radius:var(--r);
  overflow:hidden;background:var(--lar-papel)}
.mapa iframe{display:block;width:100%;height:300px;border:0}

/* ---------- RODAPÉ: nome com link ---------- */
.rodape__nome{display:inline-block;font-weight:800;font-size:1rem;color:var(--marrom-escuro) !important;
  text-decoration:none;line-height:1.3;margin-bottom:.15rem}
.rodape__nome:hover{color:var(--lar-escuro) !important;text-decoration:underline;text-underline-offset:3px}

/* ---------- PESSOAS (diretoria) ---------- */
.pessoas-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:1.2rem}
.pessoa{margin:0;text-align:center}
.pessoa__foto{aspect-ratio:1;width:80%;max-width:132px;margin-inline:auto;border-radius:50%;background:var(--lar-papel);
  border:1px dashed var(--lar-linha);display:grid;place-items:center;margin-bottom:.8rem;
  background-size:cover;background-position:center;overflow:hidden}
.pessoa figcaption strong{display:block;color:var(--marrom-escuro);font-size:1rem;line-height:1.3;margin-bottom:.1rem}
.pessoa figcaption span{display:block;font-size:.87rem;color:var(--texto-sec)}

/* ---------- EMPRESAS AMIGAS ---------- */
.amigas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem}
.amiga{background:#fff;border:1px solid var(--lar-linha);border-radius:var(--r);padding:1.4rem;
  text-align:center;position:relative;transition:transform var(--t),box-shadow var(--t)}
.amiga:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.amiga__nivel{display:inline-flex;align-items:center;gap:.35rem;font-size:.7rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-pill);padding:.25rem .75rem;margin-bottom:.9rem}
.amiga__nivel svg{width:14px;height:14px}
.amiga--apoiadora .amiga__nivel{background:var(--lar-vidro);color:var(--lar-escuro);border:1px solid var(--lar-vidro-borda)}
.amiga--mantenedora .amiga__nivel{background:rgba(30,158,99,.12);color:var(--verde-link);border:1px solid rgba(30,158,99,.28)}
.amiga--patrona .amiga__nivel{background:var(--grad-lar);color:#fff}
.amiga--patrona{border-color:var(--lar-suave);border-width:2px}
.amiga__logo{height:74px;display:grid;place-items:center;background:var(--lar-papel);
  border:1px dashed var(--lar-linha);border-radius:10px;margin-bottom:.9rem}
.amiga h3{margin:0 0 .15rem;font-size:1.05rem}
.amiga__ramo{margin:0 0 .5rem;font-size:.86rem;color:var(--texto-sec)}
.amiga__apoio{margin:0 0 .8rem;font-size:.88rem;color:var(--marrom-medio);font-weight:600}
.amiga__contato{display:inline-flex;align-items:center;gap:.4rem;font-size:.88rem;font-weight:700;text-decoration:none}
.amiga__contato svg{width:16px;height:16px}

/* ---------- NÍVEIS DO PROGRAMA ---------- */
.niveis{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.2rem;margin-top:1.6rem}
.nivel{background:#fff;border:1px solid var(--lar-linha);border-radius:var(--r);padding:1.5rem}
.nivel__selo{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:.9rem;
  background:var(--lar-vidro);border:1px solid var(--lar-vidro-borda);color:var(--lar-escuro)}
.nivel__selo svg{width:24px;height:24px}
.nivel--medio .nivel__selo{background:linear-gradient(160deg,var(--verde-claro),var(--verde));border-color:transparent;color:#fff}
.nivel--alto .nivel__selo{background:var(--grad-lar);border-color:transparent;color:#fff}
.nivel--alto{border-color:var(--lar-suave);border-width:2px}
.nivel h4{margin:0 0 .3rem;font-size:1.15rem;color:var(--marrom-escuro);font-weight:800}
.nivel__quem{margin:0 0 .9rem;font-size:.88rem;color:var(--texto-sec);line-height:1.45}
.nivel ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.nivel li{position:relative;padding-left:1.4rem;font-size:.9rem;line-height:1.45}
.nivel li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--lar-suave)}

/* ========================================================================
   RESPONSIVO — revisão completa
   ------------------------------------------------------------------------
   Ordem: primeiro a tipografia fluida, que resolve a maior parte sozinha;
   depois três pontos de quebra, do maior para o menor. Este bloco vem por
   último de propósito: precisa vencer as regras de componente.
   ======================================================================== */

/* --- Tipografia fluida: o título acompanha a largura da tela --- */
h1{font-size:clamp(1.75rem,1.25rem + 2.2vw,2.5rem)}
h2{font-size:clamp(1.4rem,1.1rem + 1.4vw,1.85rem)}
h3{font-size:clamp(1.05rem,1rem + .35vw,1.2rem)}
.hero h1{font-size:clamp(1.9rem,1.2rem + 3.2vw,3rem)}
.cta-final h2{font-size:clamp(1.5rem,1.15rem + 1.6vw,2rem)}
.tit h1{font-size:clamp(1.65rem,1.2rem + 2vw,2.3rem) !important}

/* Nenhum elemento pode estourar a largura da tela */
img,svg,video,table{max-width:100%}
.doc__titulo,.doc__meta,.momento h3,.projeto h3,.diario-item h3{overflow-wrap:anywhere}

/* ======================= até 1024px — tablet largo ======================= */
@media(max-width:1024px){
  .secao{padding-block:3.2rem}
  .cab .container{gap:1.2rem;padding-block:1.5rem}
  .cab__logo .sim{height:70px}
  .cab__logo .tip{height:46px}
  .hero .container{padding-block:4rem}
  .hero{min-height:auto}
  .cartao{padding:1.6rem}
  .fontes{padding:1.7rem 1.6rem}
  .momento__foto{height:215px}
  .projeto__foto{height:210px}
  .duo{gap:2.4rem}
  .duo--lateral{grid-template-columns:minmax(0,1fr) 320px;gap:2.4rem}
  .foto{height:300px}
  .foto--alta{height:380px}
}

/* ========================== até 820px — tablet ========================== */
@media(max-width:820px){
  .secao{padding-block:2.6rem}
  .container{padding-inline:1.15rem}

  /* Título de página: ícone acima do texto em vez de disputar a linha */
  .tit{flex-direction:column;align-items:flex-start;gap:.6rem}
  .tit__ico{width:42px;height:42px}
  .tit__ico svg{width:21px;height:21px}

  /* Filtros do Portal ocupam a largura toda */
  .filtros{flex-direction:column;align-items:stretch;gap:1rem;padding:1.1rem}
  .filtros>div{width:100%}
  .filtros input,.filtros select{width:100% !important;box-sizing:border-box}
  .filtros__acoes{width:100%}
  .filtros__acoes .botao{flex:1;justify-content:center}

  /* Documento: selo abaixo do título, botão em linha própria */
  .doc{flex-wrap:wrap;padding:1rem 1.1rem;gap:.85rem}
  .doc__corpo{flex:1 1 100%;order:2}
  .doc__icone{order:1}
  .doc>span:last-child{order:3;flex:1 1 100%}
  .doc>span:last-child .botao{width:100%;justify-content:center}

  /* Convite e notas empilham */
  .convite,.nota-arquivo,.nota-valores{flex-direction:column;align-items:flex-start;gap:.9rem}
  .convite .botao{width:100%;justify-content:center}

  /* Intenções: seta sai, o cartão inteiro já é o alvo de toque */
  .intencao{padding:1.1rem 1.2rem;gap:1rem}
  .intencao__seta{display:none}
  .intencao__ico{width:46px;height:46px}

  .perguntas>div{padding:1.1rem 1.2rem}
  .cta-final{padding-block:2.6rem}
  /* Com uma coluna, a imagem ganha largura: pode e deve crescer */
  .momento__foto{height:260px}
  .projeto__foto{height:250px}
  /* Colunas duplas empilham — a partir daqui não há mais duas colunas */
  .duo,.duo--lateral,.duo--igual,.premiada__grade{grid-template-columns:1fr;gap:2rem}
  .premiada{padding-block:2.6rem}
  .foto,.foto--alta{height:280px}
  /* Barra de contato some: no celular ela competia com o cabeçalho */
  .topo{display:none}
}

/* ======================= até 560px — celular ======================= */
@media(max-width:560px){
  .secao{padding-block:2.2rem}
  .container{padding-inline:1rem}
  body{font-size:17px}

  /* Cabeçalho: logo e menu na mesma linha, sem empurrar um ao outro */
  .cab .container{gap:.75rem;padding-block:1rem}
  .cab__logo .sim{height:62px}
  .cab__acoes{gap:.4rem}
  .menu-btn{padding:.55rem .8rem;font-size:.9rem}
  .pill{padding:.7rem 1.1rem;font-size:.95rem}
  .pill svg{width:19px;height:19px}
  .cab__acoes .pill--transp{display:none}

  .foto,.foto--alta{height:230px}
  /* Botão de seção nunca quebra em duas linhas */
  .duo .botao,.conteudo>p>.botao{width:100%;justify-content:center}

  /* Hero */
  .hero .container{padding-block:2.8rem}
  .hero p{font-size:1.02rem}
  .hero__acoes{gap:.6rem;margin-top:1.4rem}
  .hero__acoes .botao{width:100%;justify-content:center}
  .hero__selo{font-size:.78rem;padding:.36rem .85rem;margin-bottom:1rem}

  /* Atalhos deixam de sobrepor o hero */
  .atalhos{grid-template-columns:1fr 1fr;gap:.7rem;margin-top:-2rem}
  .atalho{padding:1.3rem .7rem 1.2rem}
  .atalho__ico{width:54px;height:54px;border-radius:16px}
  .atalho svg{width:25px;height:25px}
  .atalho__txt{font-size:.88rem}

  /* Números: duas colunas em vez de uma coluna esticada */
  .numeros{grid-template-columns:1fr 1fr;gap:1rem .8rem}
  .numeros dt{font-size:2rem}
  .numeros dd{font-size:.86rem}
  .resumo-lead{margin-bottom:1.8rem}

  /* Cartões e listagens */
  .cartoes,.momentos,.projetos,.intencoes,.niveis,.sorteios{grid-template-columns:1fr;gap:1rem}
  .premiada h2{font-size:1.65rem}
  .premiada__linha{font-size:1.05rem}
  .premiada__acoes .botao{width:100%;justify-content:center}
  .premiada__destaque{grid-template-columns:1fr 1fr 1fr;gap:.6rem}
  .premiada__destaque>div{padding:.9rem .5rem}
  .premiada__destaque strong{font-size:1.35rem}
  .premiada__destaque span{font-size:.74rem}
  .amigas{grid-template-columns:1fr 1fr;gap:.8rem}
  .amiga{padding:1rem .8rem}
  .amiga__logo{height:60px}
  .pessoas-grade{grid-template-columns:1fr 1fr 1fr;gap:.9rem}
  .pessoa figcaption strong{font-size:.9rem}
  .pessoa figcaption span{font-size:.8rem}
  .cartao{padding:1.4rem}
  .cartao__ico{width:48px;height:48px;border-radius:14px;margin-bottom:.9rem}
  .cartao__ico svg{width:24px;height:24px}
  .botao{padding:.85rem 1.4rem;font-size:.96rem}

  /* Portal */
  .bloco-transp__letra{width:34px;height:34px;font-size:1rem}
  .indice-blocos{gap:.4rem;margin-bottom:1.8rem}
  .indice-blocos a{padding:.45rem .85rem;font-size:.85rem}
  .vazio{padding:1.1rem 1.1rem 1.1rem 2.9rem;font-size:.9rem}
  .vazio::before{left:.9rem;top:1.05rem;width:20px;height:20px;font-size:.82rem}
  .fontes{padding:1.3rem 1.1rem}
  .fontes__lista li{flex-direction:column;gap:.5rem;padding:.9rem 1rem}
  .fontes__lista a{margin-left:0}
  .fontes__nota{font-size:.85rem}
  .contador-docs{font-size:.9rem;padding:.35rem .9rem}

  /* Projeto: rótulo e valor em linhas próprias */
  .projeto__linha{flex-direction:column;align-items:flex-start;gap:.15rem;padding:.55rem 0}
  .projeto__linha span:first-child{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
  .momento__foto{height:220px}
  .projeto__foto{height:210px}

  /* Diário */
  .diario-item{flex-direction:column;gap:.7rem}
  .diario-item__data{flex-direction:row;align-items:baseline;gap:.4rem;padding:.3rem .7rem}
  .diario-item__dia{font-size:1.15rem}
  .cal{font-size:.82rem}
  .cal__bola{width:26px;height:26px}

  /* Formulários */
  .campo{max-width:none}
  .campo input,.campo select,.campo textarea{font-size:16px}

  /* Rodapé mais curto: menos rolagem para chegar ao fim da página */
  .rodape{padding-block:2rem 1.2rem;font-size:.84rem}
  .rodape__grade{gap:1.3rem}
  .rodape h3{margin-bottom:.5rem}
  .rodape p{margin-bottom:.4rem}
  .rodape li{margin-bottom:.2rem}
  .rodape__selos{margin-top:1rem;gap:.3rem}
  .rodape__fim{margin-top:1.1rem;padding-top:.7rem}
  .mapa iframe{height:240px}
  .cta-final__acoes .botao{width:100%;justify-content:center}

  /* Flutuantes: menores, mas com ícone ainda legível e alvo de 52px */
  .fab{width:52px;height:52px}
  .fab svg{width:25px;height:25px}
  .flutua{right:.9rem;bottom:.9rem;gap:.55rem}
  .acess{right:.7rem;left:.7rem;bottom:5.6rem;width:auto;max-height:72vh;border-radius:18px}
  .acess__corpo{padding:1rem 1.05rem 1.15rem;gap:1.15rem}
  .acess__topo,.acess__rodape{padding-inline:1.05rem}
  .acess__op{padding:.65rem .75rem;gap:.7rem}
  .acess__ico{width:34px;height:34px}
  .acess__link{margin-left:0;width:100%}
  .acess__atalhos dt{min-width:4.8rem;font-size:.74rem}
}

/* ===================== até 380px — celular estreito ===================== */
@media(max-width:380px){
  .atalhos{grid-template-columns:1fr}
  .numeros{grid-template-columns:1fr}
  .amigas{grid-template-columns:1fr}
  .pessoas-grade{grid-template-columns:1fr 1fr}
  .cab__logo .sim{height:52px}
  .topo{font-size:.78rem}
  .momento__foto{height:190px}
  .projeto__foto{height:180px}
  .foto,.foto--alta{height:200px}
  }

/* Toque: nenhum alvo abaixo de 44px em tela sensível */
@media(pointer:coarse){
  .nav a{padding-block:1.1rem}
  .indice-blocos a,.busca-exemplos a,.tag{min-height:38px;display:inline-flex;align-items:center}
  .doc__titulo a{display:inline-block;padding-block:.15rem}
}

/* ------------------------------------------------------------------------
   AJUSTES DO TEMA — o que difere da prévia por vir do WordPress
   ------------------------------------------------------------------------ */

/* Na prévia as imagens são variáveis fixas; aqui vêm da biblioteca de mídia. */
.hero{background-size:cover;background-position:center}
.hero__img{background-size:cover;background-position:center}

/* Enquanto o logotipo não é enviado, o cabeçalho mostra o nome em texto */
.cab__txt strong{display:block;color:var(--marrom-escuro);font-size:1.3rem;line-height:1.15;font-weight:800}
.cab__txt span{display:block;color:var(--texto-sec);font-size:.95rem}
@media(max-width:560px){.cab__txt strong{font-size:1.05rem}.cab__txt span{font-size:.82rem}}

/* A barra do administrador desloca o cabeçalho fixo */
.admin-bar .cab-fixo{top:32px}
@media(max-width:782px){.admin-bar .cab-fixo{top:46px}}

/* Estados de foco e listas do conteúdo vindo do editor */
.conteudo ul{list-style:disc;padding-left:1.4rem}
.conteudo li{margin-bottom:.4rem}

/* ============================================================================
   MENU SUSPENSO (Mídia > Galeria de Fotos)              — versão 0.66.0
   ==========================================================================*/

.nav-tem-sub{position:relative}
.nav-pai{cursor:pointer}
.nav-pai__seta{width:14px;height:14px;margin-left:.15rem;transition:transform .2s}
.nav-tem-sub.aberto .nav-pai__seta{transform:rotate(180deg)}
.nav-sub{list-style:none;margin:0;padding:.5rem;position:absolute;top:100%;right:0;min-width:220px;
background:#fff;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.18);opacity:0;pointer-events:none;
translate:0 6px;transition:opacity .18s ease,translate .18s ease;z-index:50}
.nav-tem-sub.aberto .nav-sub{opacity:1;pointer-events:auto;translate:0 0;display:block}
.nav-sub li{width:100%}
.nav-sub a{color:var(--texto)!important;padding:.7rem .9rem!important;border-radius:8px;display:flex!important}
.nav-sub a:hover{background:var(--fundo-alt);color:var(--lar-forte)!important}

/* No celular o menu vira lista empilhada: o suspenso passa a ser um bloco
   comum, sempre visível, para ninguém precisar acertar o toque no pai. */
@media (max-width:900px){
	.nav-sub{position:static;opacity:1;pointer-events:auto;translate:0 0;box-shadow:none;
	padding:0 0 0 1.2rem;min-width:0;background:transparent;display:block}
	.nav-pai__seta{display:none}
}

/* ============================================================================
   GALERIA DE FOTOS                                      — versão 0.66.0
   ==========================================================================*/

.galeria-albuns{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.6rem;margin:1.4rem 0 2.6rem}
.album-card{display:block;width:100%;padding:0;border:0;background:#fff;cursor:pointer;text-align:left;
font:inherit;color:inherit;border-radius:14px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.1);
transition:transform .25s ease,box-shadow .25s ease}
.album-card:hover,.album-card:focus-visible{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.18)}
.album-card__capa{display:block;aspect-ratio:4/3;background-size:cover;background-position:center}
.album-card__legenda{display:block;padding:.9rem 1.1rem 1.1rem}
.album-card__legenda strong{display:block;font-size:1.08rem;color:var(--texto)}
.album-card__legenda span{display:block;font-size:.85rem;color:var(--texto-sec);margin-top:.2rem}

.lightbox{position:fixed;inset:0;z-index:300;background:rgba(12,9,6,.94);display:flex;flex-direction:column}
.lightbox[hidden]{display:none}
.lightbox__topo{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.3rem;color:#fff;flex:0 0 auto}
.lightbox__contagem{font-size:.9rem;opacity:.85}
.lightbox__fechar{background:none;border:0;color:#fff;font-size:2rem;line-height:1;cursor:pointer;padding:0 .3rem}
.lightbox__corpo{position:relative;flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0;padding:0 3.4rem}
.lightbox__img{width:100%;height:100%;background-size:contain;background-repeat:no-repeat;background-position:center}
.lightbox__seta{position:absolute;top:50%;translate:0 -50%;background:rgba(255,255,255,.14);border:0;color:#fff;
width:46px;height:46px;border-radius:50%;font-size:1.7rem;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0}
.lightbox__seta:hover{background:rgba(255,255,255,.26)}
.lightbox__seta--esq{left:.6rem}
.lightbox__seta--dir{right:.6rem}
.lightbox__legenda{color:rgba(255,255,255,.88);text-align:center;font-size:.92rem;padding:.5rem 1.2rem;flex:0 0 auto}
.lightbox__miniaturas{display:flex;gap:.5rem;overflow-x:auto;padding:.7rem 1rem 1.1rem;flex:0 0 auto}
.lightbox__miniatura{flex:0 0 62px;height:46px;border-radius:6px;border:2px solid transparent;background-size:cover;
background-position:center;cursor:pointer;opacity:.5;transition:opacity .2s,border-color .2s;padding:0}
.lightbox__miniatura.ativa{opacity:1;border-color:var(--lar-forte)}

@media (max-width:700px){
	.lightbox__corpo{padding:0 2.6rem}
}


/* ---------- BOTÃO DE ENVIO DO FLUENT FORM ----------
   Os formulários da Ouvidoria e da Contato são do Fluent Forms, e o botão de
   envio deles vinha com o desenho do plugin: canto reto, cor do plugin, sem
   seta. No esboço esse botão é `.botao--laranja`, arredondado e com seta. Aqui
   ele volta a ser o botão da casa.

   A seta não pode ser um <svg> — o markup é do plugin e não se edita. Então ela
   é uma máscara em ::after, pintada com currentColor: mesma cor do texto, mesmo
   desenho do `.ico-seta`, e acompanha o hover como os outros botões. */
.ff-btn-submit,
.frm-fluent-form .ff-btn-submit{
	display:inline-flex;align-items:center;gap:.6rem;
	padding:.95rem 1.8rem;border-radius:var(--r-pill);
	font-weight:700;font-family:inherit;font-size:1rem;line-height:1.2;
	border:0;cursor:pointer;
	background:var(--grad-lar);color:#fff;
	box-shadow:0 2px 10px rgba(224,74,24,.22);
	transition:transform var(--t),box-shadow var(--t)}

.ff-btn-submit::after{
	content:"";width:22px;height:22px;flex:none;
	background-color:currentColor;
	-webkit-mask:var(--seta-mask) center/contain no-repeat;
	        mask:var(--seta-mask) center/contain no-repeat;
	transition:transform var(--t)}

.ff-btn-submit:hover,
.frm-fluent-form .ff-btn-submit:hover{
	transform:translateY(-3px);box-shadow:0 6px 20px rgba(224,74,24,.34)}

.ff-btn-submit:hover::after,
.ff-btn-submit:focus-visible::after{transform:translateX(3px)}

/* Enquanto envia, o plugin desabilita o botão. Sem isto ele continua com cara
   de clicável. */
.ff-btn-submit[disabled]{opacity:.6;cursor:default;transform:none}
.ff-btn-submit[disabled]:hover{transform:none;box-shadow:0 2px 10px rgba(224,74,24,.22)}