/* ============================================================================
   COTTOLENGO — Folha de estilo do site público
   ----------------------------------------------------------------------------
   NÃO HÁ UM ÚNICO #hex NESTE ARQUIVO. Cor, fonte, raio, largura de container e
   espaçamento saem todos de variáveis definidas em lib/tema.php e injetadas no
   <head>. Antes de escrever um valor literal aqui, crie o token lá.

   A razão prática: o azul #009EFD é Pantone 299C, cor oficial da instituição.
   Espalhado por 400 declarações, um ajuste de marca vira caça ao hexadecimal —
   e sempre sobra um esquecido numa borda de hover que ninguém olha.
   ============================================================================ */

*{box-sizing:border-box}
/* `[hidden]` vem do navegador com especificidade ZERO. Qualquer regra de classe
   que declare display — e `.hero .container{display:grid}` declara — vence e o
   elemento continua na tela. Foi assim que os dois banners do carrossel
   apareceram empilhados. Esta linha devolve ao atributo o poder que ele deveria
   ter, e vale para todo o site: onde o HTML disser `hidden`, some. */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
    font-family:var(--sans);
    color:var(--texto);
    background:var(--fundo);
    -webkit-font-smoothing:antialiased;
}
::selection{background:var(--primaria);color:#fff}
a{color:inherit}
img{max-width:100%}

/* O container raiz usa overflow-x: CLIP, não hidden.
   `hidden` cria um contexto de rolagem que quebra o position:sticky do
   cabeçalho — o header simplesmente para de grudar, sem erro nenhum no
   console. `clip` recorta igual e não cria o contexto. */
.raiz{width:100%;background:var(--fundo);overflow-x:clip}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--container-pad)}

/* ---------------------------------------------------------------- tipografia */
.serif{font-family:var(--serif)}
.eyebrow{
    font-size:13px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--primaria);font-weight:700;margin-bottom:16px;
}
.eyebrow.claro{color:var(--azul-claro)}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;margin:0}
.h1{font-size:60px;line-height:1.03}
.h2{font-size:42px;line-height:1.1}
.h3{font-size:27px;line-height:1.15}
.italico-azul{font-style:italic;color:var(--azul-claro)}

/* -------------------------------------------------------------------- botões */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    text-decoration:none;font-family:var(--sans);font-weight:600;
    border:none;cursor:pointer;transition:background .18s,transform .18s,box-shadow .18s;
}
/* A COR das variantes é declarada com a especificidade dobrada (`.btn.btn-x`),
   e não com `.btn-x` sozinho. Um botão dentro de texto de artigo cai sob
   `.conteudo a{color:var(--primaria)}` — 0,1,1 — que vence `.btn-primario`
   — 0,1,0 — e repinta a letra da cor do fundo do próprio botão. Foi o que
   apagou o CTA do rodapé, e voltaria a acontecer no dia em que alguém colasse
   um botão dentro de uma página cadastrada. */
.btn.btn-primario{
    background:var(--primaria);color:#fff;font-size:16px;padding:16px 30px;
    border-radius:var(--raio-btn);box-shadow:0 12px 30px rgba(var(--primaria-rgb),.4);
}
.btn.btn-primario:hover{background:var(--primaria-hover);color:#fff}
.btn.btn-branco{
    background:#fff;color:var(--primaria-hover);font-weight:700;
    padding:15px 28px;border-radius:var(--raio-btn);font-size:15px;
}
.btn.btn-branco:hover{transform:translateY(-2px)}
.btn.btn-contorno{
    border:1px solid rgba(255,255,255,.3);color:#fff;background:transparent;
    padding:14px 26px;border-radius:var(--raio-btn);font-size:15px;
}
.btn.btn-contorno:hover{background:rgba(255,255,255,.12)}
.btn-bloco{display:block;width:100%;text-align:center}

/* =========================================================== BARRA UTILITÁRIA */
.utilbar{
    background:var(--navy-2);color:rgba(255,255,255,.7);font-size:12.5px;
    letter-spacing:.01em;overflow:hidden;max-height:60px;
    transition:max-height .32s ease,opacity .28s ease;
}
/* O estado é uma CLASSE, não estilo embutido escrito a cada evento de scroll:
   o JS passa a trocar uma classe por gesto em vez de reescrever duas
   propriedades dezenas de vezes por segundo. */
.utilbar.oculta{max-height:0;opacity:0}
/* Quem pediu menos animação não deveria ganhar uma barra que se dobra: aqui ela
   simplesmente aparece e some. */
@media (prefers-reduced-motion:reduce){
    .utilbar{transition:none}
}
.utilbar .container{
    display:flex;align-items:center;justify-content:space-between;
    gap:16px;flex-wrap:wrap;padding-top:9px;padding-bottom:9px;
}
.utilbar-esq{display:flex;align-items:center;gap:22px;flex-wrap:wrap;min-width:0}
/* Agrupa os links do menu do topo, para saírem juntos no celular. */
.utilbar-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.utilbar-dir{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.utilbar a{text-decoration:none;color:inherit;transition:color .15s}
.utilbar a:hover{color:#fff}
.utilbar .div{width:1px;height:14px;background:rgba(255,255,255,.18)}
/* O telefone disca com um toque; com 16px de altura o alvo era metade do
   mínimo. O padding cresce a área sem mexer no tamanho da letra. */
.utilbar .fone{opacity:.7;padding:7px 0;display:inline-block}
.utilbar .hora{opacity:.6}

.langs{display:flex;align-items:center;gap:4px}
.langs a{
    padding:6px 8px;border-radius:5px;font-size:12px;font-weight:700;line-height:1;
    letter-spacing:.03em;color:rgba(255,255,255,.55);transition:all .15s;
}
.langs a:hover{color:rgba(255,255,255,.85)}
.langs a.on{color:#fff;background:rgba(var(--primaria-rgb),.9)}

.sociais{display:flex;align-items:center;gap:9px}
.sociais a{
    width:27px;height:27px;border-radius:50%;border:1px solid rgba(255,255,255,.28);
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;
    transition:all .2s;
}
.sociais a:hover{background:var(--primaria);border-color:var(--primaria)}

/* ==================================================================== HEADER */
.pilha-fixa{position:sticky;top:0;z-index:50}

.cabecalho{
    background:rgba(var(--navy-rgb),.94);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,.08);
    padding:15px 0;transition:padding .25s ease,box-shadow .25s ease,background .25s ease;
}
/* Comprimido ao rolar: o cabeçalho encolhe e ganha sombra, dando de volta ~14px
   de altura útil sem que a navegação saia da tela. */
.cabecalho.comprimido{
    padding:8px 0;background:rgba(var(--navy-rgb),.98);
    box-shadow:0 8px 26px -14px rgba(0,0,0,.6);
}
.cabecalho .container{
    display:flex;align-items:center;justify-content:space-between;
    gap:24px;position:relative;
}
.marca{display:flex;align-items:center;gap:14px;text-decoration:none;flex:none}
.marca img{height:46px;width:auto;display:block;transition:height .25s ease}
.cabecalho.comprimido .marca img{height:36px}
.marca b{color:#fff;font-family:var(--serif);font-size:22px;font-weight:500}

/* A ÁREA DE ACIONAMENTO dos itens.
   ---------------------------------------------------------------------------
   O item era do tamanho exato do texto: 19px de altura dentro de um cabeçalho
   de 77px, com 30px de vão entre um item e o seguinte. Para abrir um submenu
   era preciso manter o ponteiro dentro de uma tira fina na altura da palavra —
   subir dois pixels, descer dois, ou passar entre dois itens já tirava o mouse
   de cima e o `mouseenter` não disparava. Daí a sensação de que a seta vira e
   o painel não abre: o item recebia e perdia o hover em sequência.

   O padding cresce a área para ~43px de altura e encosta os itens uns nos
   outros; a margem negativa devolve o espaço para que o desenho não mude. É
   por isso que o `gap` do nav cai de 30px para 4px — o respiro entre os itens
   agora vem do padding deles, e o caminho de um item ao outro deixa de passar
   por região nenhuma. */
.nav{display:flex;align-items:center;gap:4px;font-size:14.5px;font-weight:500}
.nav > .item{position:relative;display:flex;padding:12px 0;margin:-12px 0}
.nav a.link{
    display:flex;align-items:center;gap:7px;text-decoration:none;padding:0 14px;
    color:rgba(255,255,255,.82);transition:color .15s;white-space:nowrap;
}
/* O botão de doar é irmão direto do nav, não um `.item`: sem esta margem ele
   encostaria no último item agora que o gap geral é de 4px. */
.nav a.destaque{margin-left:16px}
.nav a.link:hover,.nav .item.aberto a.link,.nav a.link.ativo{color:#fff}
.nav .chev{font-size:10px;color:var(--azul-claro);transition:transform .22s ease}
.nav .item.aberto .chev{transform:rotate(180deg)}
.nav a.destaque{
    text-decoration:none;color:#fff;background:var(--primaria);
    padding:11px 22px;border-radius:var(--raio-btn);font-weight:600;
    box-shadow:0 6px 18px rgba(var(--primaria-rgb),.32);transition:background .18s;
}
.nav a.destaque:hover{background:var(--primaria-hover)}

/* O item do mega-menu fica ESTÁTICO para que o painel largo se ancore no
   `.cabecalho .container` (que é position:relative) em vez de na caixa de ~90px
   do próprio link. Com o item posicionado, `left/right:var(--container-pad)`
   media a partir do link: o painel resolvia para uma tira de poucos pixels —
   aberta, mas estreita demais para o ponteiro acertar ao descer. */
.nav > .item.item-mega{position:static}

/* Só existe na gaveta do celular; no desktop estes links vivem na barra do topo. */
.nav-topo{display:none}

/* Painéis de submenu — a base é comum; o que muda é largura e ancoragem. */
/* `visibility` NÃO entra na lista de transições. A interpolação dela é
   discreta e os navegadores divergem no instante exato em que o valor vira —
   é uma das causas clássicas de "abriu para o script e não apareceu na tela".
   Aqui ela troca na hora, e quem faz a animação é opacity + transform. */
.painel{
    position:absolute;background:#fff;border:1px solid var(--borda);
    border-radius:var(--raio-card);box-shadow:0 34px 70px -28px rgba(var(--navy-rgb),.55);
    z-index:60;opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .18s ease,transform .18s ease;
}
/* A PONTE. Entre o link e o painel há um vão de ~14px onde o ponteiro não
   está sobre nada; num movimento diagonal — que é como se anda até a terceira
   coluna — ele sai do item antes de entrar no painel. A faixa invisível cobre
   exatamente esse vão, e por ser filha do painel só existe quando ele está
   aberto: fechado, o painel tem pointer-events:none e a ponte vai junto. */
.painel::before{content:'';position:absolute;left:0;right:0;top:-18px;height:18px}
.painel.mega{top:calc(100% + 14px);left:var(--container-pad);right:var(--container-pad);
    padding:26px 28px 0;transform:translateY(-6px)}
.item.aberto > .painel.mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
/* +8px, e não +20px: o item ganhou 12px de padding embaixo, então o painel
   parte de mais abaixo e o afastamento visual continua o mesmo de antes. */
.painel.drop{top:calc(100% + 8px);left:50%;padding:10px;width:290px;transform:translate(-50%,-6px)}
.painel.drop-estreito{width:270px}
.item.aberto > .painel.drop{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.painel.drop::before{top:-14px;height:14px}

.painel .rotulo{
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--primaria);font-weight:700;padding:6px 12px 10px;
}
.painel .lista{display:flex;flex-direction:column}
.painel .lista a{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    text-decoration:none;padding:11px 12px;border-radius:10px;transition:background .15s;
}
.painel .lista a:hover{background:#F2F6FA}
.painel .lista .nome{color:var(--navy);font-size:14.5px;font-weight:600}
.painel .lista .esq{display:flex;align-items:center;gap:11px}
.painel .dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--grad)}
.painel .cont{color:var(--texto-4);font-size:12px}
.painel .pe{
    display:block;text-align:center;text-decoration:none;color:var(--primaria);
    font-weight:700;font-size:13.5px;padding:12px 12px 6px;
    border-top:1px solid var(--borda);margin-top:6px;
}

/* A grade acompanha o CADASTRO: o header informa quantos grupos existem em
   --mega-cols e marca `com-card` quando o cartão escuro tem conteúdo. Antes eram
   quatro frações fixas (três grupos + cartão) — criar um quarto grupo espremia
   tudo numa coluna a mais que não existia no gabarito, e apagar o cartão deixava
   um vão morto à direita.
   minmax(0,1fr) e não 1fr: sem o mínimo zerado o nome longo da especialidade
   estoura a coluna em vez de truncar. */
.mega-grid{display:grid;gap:26px;align-items:stretch;
    grid-template-columns:repeat(var(--mega-cols,3),minmax(0,1fr))}
.mega-grid.com-card{grid-template-columns:repeat(var(--mega-cols,3),minmax(0,1fr)) 1.15fr}
/* Acima de cinco faixas, largura mínima em vez de linha única: seis colunas num
   painel de 1200px dariam ~170px cada, e o nome da especialidade viraria
   reticência antes da terceira palavra. Aqui a grade quebra em duas linhas. */
.mega-grid.muitos,
.mega-grid.muitos.com-card{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
/* Com quebra de linha a régua da esquerda cairia no primeiro item de cada fila,
   parecendo defeito. Nesse modo a separação fica só no espaçamento. */
.mega-grid.muitos .mega-col + .mega-col{border-left:0;padding-left:0}
/* A régua vai na BORDA ESQUERDA das colunas seguintes, não na direita de todas:
   o seletor de irmão adjacente só casa entre duas colunas, então o traço nunca
   aparece encostado no cartão azul — que já tem fundo próprio e não precisa de
   separador. */
.mega-col{display:flex;flex-direction:column;min-width:0}
.mega-col + .mega-col{border-left:1px solid var(--borda);padding-left:26px}
.mega-col .tit{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    text-decoration:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--primaria);font-weight:700;margin-bottom:12px;padding-bottom:10px;
    border-bottom:1px solid var(--borda);transition:color .15s;
}
.mega-col .tit:hover{color:var(--primaria-hover)}
.mega-col .tit .qtd{
    font-size:11px;letter-spacing:0;font-weight:700;color:var(--texto-4);
    background:var(--superficie-2);border:1px solid var(--borda);
    border-radius:999px;padding:2px 8px;flex:none;
}
.mega-grid .itens{display:flex;flex-direction:column;gap:2px}
.mega-grid .itens a{
    display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--texto-2);
    font-size:14.5px;font-weight:500;padding:8px 10px;margin:0 -10px;border-radius:9px;
    transition:background .15s,color .15s;
}
.mega-grid .itens a:hover{background:rgba(var(--navy-rgb),.05);color:var(--navy)}
.mega-grid .itens .dot{width:6px;height:6px;border-radius:50%;background:var(--grad);flex:none}
/* O nome trunca em vez de quebrar em duas linhas: com treze especialidades de
   nomes desiguais, uma quebra desalinha a coluna inteira e o painel deixa de
   parecer uma grade. */
.mega-grid .itens .nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* `margin-top:auto` prende o "+N" no pé da coluna: as três colunas terminam na
   mesma linha mesmo tendo quantidades diferentes de itens. */
.mega-col .mais{
    margin-top:auto;padding:12px 0 2px;text-decoration:none;
    color:var(--primaria);font-weight:700;font-size:12.5px;transition:color .15s;
}
.mega-col .mais:hover{color:var(--primaria-hover)}
.mega-pe{
    display:block;margin:24px -28px 0;padding:15px 28px;text-align:center;
    border-top:1px solid var(--borda);background:var(--superficie-2);
    border-radius:0 0 var(--raio-card) var(--raio-card);
    text-decoration:none;color:var(--primaria);font-weight:700;font-size:13.5px;
    transition:background .15s;
}
.mega-pe:hover{background:rgba(var(--navy-rgb),.05)}
.mega-card{
    background:var(--navy);border-radius:14px;padding:24px;color:#fff;
    display:flex;flex-direction:column;justify-content:space-between;gap:18px;
}
.mega-card .t{font-family:var(--serif);font-size:20px;line-height:1.2;margin-bottom:8px}
.mega-card .d{font-size:13px;line-height:1.5;color:rgba(255,255,255,.72)}
.mega-card a{
    text-decoration:none;background:var(--primaria);color:#fff;font-weight:600;
    font-size:14px;text-align:center;padding:12px;border-radius:10px;
}
.mega-card a:hover{background:var(--primaria-hover)}

/* Botão do menu no celular — escondido no desktop. */
.menu-btn{
    display:none;background:transparent;border:1px solid rgba(255,255,255,.28);
    color:#fff;width:42px;height:42px;border-radius:11px;cursor:pointer;font-size:20px;
    align-items:center;justify-content:center;
}

/* ====================================================================== HERO */
@keyframes heroUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes heroFade{from{opacity:0}to{opacity:1}}

.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero .brilho{
    position:absolute;inset:0;
    background:radial-gradient(1100px 520px at 78% -8%,rgba(var(--primaria-rgb),.55),transparent 60%),
               radial-gradient(700px 500px at 100% 100%,rgba(138,92,255,.28),transparent 55%);
}
.hero .container{
    position:relative;padding-top:78px;padding-bottom:84px;
    display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
}
.hero-txt{min-width:0}
.hero-badge{
    display:inline-flex;align-items:center;gap:9px;padding:7px 14px;
    border:1px solid rgba(255,255,255,.22);border-radius:var(--raio-btn);
    font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
    color:rgba(255,255,255,.9);margin-bottom:26px;
}
.hero-badge .ponto{width:6px;height:6px;border-radius:50%;
    background:linear-gradient(90deg,var(--grad-1),var(--grad-2))}
.hero h1{font-size:60px;line-height:1.03;margin:0 0 22px}
.hero p.chamada{
    font-size:18px;line-height:1.6;color:rgba(255,255,255,.82);
    max-width:520px;margin:0 0 34px;
}
.hero-ctas{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
/* O botão secundário do hero. Serve a <a> e a <button> com a mesma aparência:
   no modo link ele navega, no modo vídeo abre a lightbox — e o visitante não
   deve perceber diferença de forma entre os dois. Daí o reset de borda e fundo,
   que um <button> traz do navegador e um <a> não. */
.hero-video{
    display:inline-flex;align-items:center;gap:12px;color:#fff;
    font-weight:600;font-size:15px;text-decoration:none;
    background:none;border:none;padding:0;cursor:pointer;font-family:var(--sans);
}
.hero-video .circ{
    width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
    display:flex;align-items:center;justify-content:center;transition:background .2s;flex:none;
}
.hero-video:hover .circ{background:rgba(255,255,255,.12)}
/* Modo link: sem o círculo, o texto sozinho ficaria colado no botão azul e sem
   nada que o identifique como clicável. O sublinhado no hover devolve isso. */
.hero-video.simples{padding:14px 4px}
.hero-video.simples:hover{text-decoration:underline;text-underline-offset:4px}
.play-tri{
    width:0;height:0;border-left:11px solid #fff;
    border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px;
}

/* Animação escalonada: cada elemento entra um pouco depois do anterior, o que
   dá a leitura de cima para baixo em vez de tudo aparecendo de uma vez. */
.hero-anim > *{animation:heroUp .6s ease both}
.hero-anim > *:nth-child(2){animation-delay:.05s}
.hero-anim > *:nth-child(3){animation-delay:.1s}
.hero-anim > *:nth-child(4){animation-delay:.15s}

.hero-ctrl{display:flex;align-items:center;gap:16px;margin-top:44px}
.hero-dots{display:flex;gap:9px}
/* O PONTO CONTINUA COM 9px; O ALVO DE TOQUE PASSA A TER 25px de altura.
   O botão vira só a área clicável (transparente) e quem desenha o ponto é o
   ::before. A alternativa — padding + background-clip:content-box — cresce o
   alvo do mesmo jeito, mas o border-radius passa a ser calculado na caixa de
   25px e recortado na de 9px, e o ponto sai QUADRADO.
   Antes o alvo era o próprio ponto de 9×9: acertar isso com o polegar é sorte,
   não navegação. */
.hero-dots button{
    display:flex;align-items:center;justify-content:center;
    height:25px;padding:8px 6px;border:none;background:none;cursor:pointer;
}
.hero-dots button::before{
    content:'';display:block;width:9px;height:9px;
    border-radius:var(--raio-btn);background:rgba(255,255,255,.35);transition:all .3s;
}
.hero-dots button.on::before{width:28px;background:var(--primaria)}
.hero-linha{flex:1;height:1px;background:rgba(255,255,255,.14)}
.hero-setas{display:flex;gap:10px}
.hero-setas button{
    width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.28);
    background:transparent;color:#fff;cursor:pointer;display:flex;
    align-items:center;justify-content:center;font-size:16px;transition:background .2s;
}
.hero-setas button:hover{background:rgba(255,255,255,.12)}

.hero-foto{position:relative}
.hero-foto .moldura{
    aspect-ratio:4/5;border-radius:18px;overflow:hidden;
    border:1px solid rgba(255,255,255,.12);position:relative;
    display:flex;align-items:flex-end;justify-content:center;
}
.hero-foto img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    animation:heroFade .8s ease both;
}
.hero-citacao{
    position:relative;width:100%;padding:22px;
    background:linear-gradient(0deg,rgba(var(--navy-rgb),.94),transparent);
}
.hero-citacao .txt{font-family:var(--serif);font-style:italic;font-size:18px;color:#fff}
.hero-citacao .quem{font-size:13px;color:rgba(255,255,255,.7);margin-top:6px}

/* ============================================================ NÚMEROS (faixa) */
.impacto{background:#fff;border-bottom:1px solid var(--borda)}
/* `auto-fit` decide quantas colunas cabem, em vez de a contagem vir escrita do
   PHP. Escrita inline, ela vencia as media queries — um `style=` não é superado
   por regra nenhuma sem `!important` — e a faixa mantinha as seis colunas no
   celular, com as células vazando 700px para fora da tela.
   `repeat(var(--n),1fr)` NÃO resolve: a contagem do repeat() precisa ser um
   inteiro literal, e com var() a declaração inteira é descartada — a grade cai
   para colunas automáticas e desalinha do mesmo jeito.
   Assim a faixa se adapta sozinha a qualquer quantidade de números cadastrados,
   sem contagem no PHP e sem uma media query por faixa de largura. */
.impacto .grade{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    /* O vão de 1px sobre o fundo cinza É a linha divisória. Uma borda por
       célula precisaria saber onde a linha termina — e com o número de colunas
       variando, o `nth-child` que apagava a última erra em toda largura em que
       a conta muda. O vão acerta sempre, inclusive entre as linhas quando
       quebra. */
    gap:1px;background:rgba(11,39,64,.07);
}
.impacto .cel{padding:34px 18px;text-align:center;background:#fff}
.impacto .num{
    font-family:var(--serif);font-size:38px;font-weight:600;color:var(--primaria);
    line-height:1;letter-spacing:-.01em;
}
.impacto .rot{font-size:12.5px;line-height:1.35;color:var(--texto-3);margin-top:9px}

/* =================================================================== SEÇÕES */
.sec{padding:96px 0}
.sec.claro{background:var(--fundo)}
.sec.branco{background:#fff;border-top:1px solid var(--borda)}
.sec.escuro{background:var(--navy);color:#fff}
.sec-topo{text-align:center;max-width:680px;margin:0 auto 44px}
.sec-topo p{font-size:16px;line-height:1.6;color:var(--texto-2);margin:0}
.sec-cab{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:24px;flex-wrap:wrap;margin-bottom:40px;
}
.link-ver{text-decoration:none;font-weight:600;color:var(--primaria);font-size:15px}
.link-ver:hover{text-decoration:underline}

/* =================================================================== DOAÇÃO */
.doar-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.doar-txt h2{font-size:44px;line-height:1.08;margin:0 0 20px;color:var(--navy)}
.doar-txt p.intro{font-size:17px;line-height:1.65;color:var(--texto-2);max-width:480px;margin:0 0 30px}
.doar-usos{display:grid;gap:16px;max-width:480px}
.doar-uso{display:flex;gap:14px;align-items:flex-start}
.doar-uso .dot{width:9px;height:9px;border-radius:50%;background:var(--grad);margin-top:6px;flex:none}
.doar-uso b{font-weight:600;color:var(--navy)}
.doar-uso span{color:var(--texto-3)}

.card-doar{
    background:#fff;border:1px solid var(--borda);border-radius:var(--raio-card-g);
    padding:34px;box-shadow:0 24px 60px -30px rgba(var(--navy-rgb),.35);
}
.seg{display:flex;background:#F0EEE8;border-radius:var(--raio-btn);padding:5px;margin-bottom:24px}
.seg button{
    flex:1;border:none;padding:11px 0;border-radius:var(--raio-btn);
    font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer;
    transition:all .15s;background:transparent;color:#7a8894;
}
.seg button.on{background:#fff;color:var(--navy);box-shadow:0 3px 10px rgba(var(--navy-rgb),.14)}
.card-doar .lab{font-size:13px;font-weight:600;color:var(--texto-3);margin-bottom:12px}
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.chips button{
    padding:15px 0;border-radius:12px;border:1px solid var(--borda-2);
    font-family:var(--sans);font-size:15px;font-weight:700;cursor:pointer;
    transition:all .15s;color:var(--navy);background:var(--superficie-2);
}
.chips button:hover{border-color:var(--primaria)}
.chips button.on{
    border-color:var(--primaria);background:var(--primaria);color:#fff;
    box-shadow:0 8px 18px rgba(var(--primaria-rgb),.3);
}
.valor-box{
    display:flex;align-items:center;gap:10px;border:1px solid var(--borda-2);
    border-radius:12px;padding:0 16px;margin-bottom:22px;background:var(--superficie-2);
}
.valor-box:focus-within{border-color:var(--primaria)}
.valor-box .pre{font-weight:600;color:var(--navy)}
.valor-box input{
    border:none;outline:none;background:transparent;padding:15px 0;
    font-size:17px;font-weight:600;color:var(--navy);width:100%;font-family:var(--sans);
}
.valor-box .suf{font-size:13px;color:var(--texto-4);white-space:nowrap}
.btn-doar{
    display:block;width:100%;text-align:center;text-decoration:none;
    background:var(--primaria);color:#fff;font-weight:700;font-size:16px;
    padding:17px;border-radius:14px;border:none;cursor:pointer;font-family:var(--sans);
    box-shadow:0 14px 30px rgba(var(--primaria-rgb),.34);transition:background .18s;
}
.btn-doar:hover{background:var(--primaria-hover)}
.selo-seguro{
    display:flex;align-items:center;justify-content:center;gap:8px;
    margin-top:16px;font-size:12.5px;color:var(--texto-4);
}
.selo-seguro .dot{width:6px;height:6px;border-radius:50%;background:var(--verde)}

/* ================================================================= HISTÓRIA */
.historia-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:64px;align-items:center}
.historia-foto{position:relative}
.historia-foto .moldura{
    aspect-ratio:5/6;border-radius:18px;overflow:hidden;border:1px solid var(--borda);
}
.historia-foto img{width:100%;height:100%;object-fit:cover;display:block}
.historia-selo{
    position:absolute;bottom:-26px;left:-26px;background:var(--navy);color:#fff;
    border-radius:var(--raio-card);padding:22px 26px;
    box-shadow:0 20px 40px -18px rgba(var(--navy-rgb),.5);
}
.historia-selo .ano{font-family:var(--serif);font-size:40px;line-height:1;color:var(--azul-claro)}
.historia-selo .txt{font-size:12.5px;color:rgba(255,255,255,.72);margin-top:6px;max-width:150px}
.historia-txt h2{font-size:42px;line-height:1.1;margin:0 0 22px;color:var(--navy)}
.historia-txt p{font-size:16.5px;line-height:1.7;color:var(--texto-2);margin:0 0 18px}
.valores{
    display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
    border-top:1px solid var(--borda);padding-top:26px;margin-top:12px;
}
.valores .t{font-family:var(--serif);font-size:19px;color:var(--navy);margin-bottom:5px}
.valores .d{font-size:13.5px;line-height:1.5;color:var(--texto-3)}

/* ================================================================= SERVIÇOS */
.servicos-cab{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:24px;flex-wrap:wrap;margin-bottom:44px;
}
.servicos-cab h2{font-size:42px;line-height:1.1;margin:0;max-width:640px}
.servicos-cab p{
    font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.72);max-width:340px;margin:0;
}
.servicos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card-servico{
    position:relative;min-height:210px;border-radius:var(--raio-card);overflow:hidden;
    border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;
    justify-content:flex-end;padding:22px;text-decoration:none;
}
.card-servico img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:.5;transition:transform .4s,opacity .3s;
}
.card-servico:hover img{transform:scale(1.06);opacity:.62}
.card-servico .veu{
    position:absolute;inset:0;
    background:linear-gradient(0deg,rgba(var(--navy-rgb),.96) 8%,
               rgba(var(--navy-rgb),.5) 55%,rgba(var(--navy-rgb),.35));
}
.card-servico .info{position:relative}
.card-servico .n{font-family:var(--serif);font-size:15px;color:var(--azul-claro);margin-bottom:9px}
.card-servico .nome{font-size:17px;font-weight:600;color:#fff;line-height:1.3}
.servicos-nota{margin-top:34px;font-size:14.5px;color:rgba(255,255,255,.7)}
.servicos-nota b{color:#fff}

/* ==================================================================== VÍDEO */
.video-wrap{max-width:1120px;margin:0 auto;text-align:center}
.video-wrap h2{font-size:40px;line-height:1.1;margin:0 auto 40px;color:var(--navy);max-width:760px}
.player{
    position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;
    border:1px solid var(--borda);display:flex;align-items:center;justify-content:center;
    cursor:pointer;background:var(--navy);
}
.player img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.player .veu{position:absolute;inset:0;background:rgba(var(--navy-rgb),.34)}
.player .play{
    position:relative;width:84px;height:84px;border-radius:50%;background:var(--primaria);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 16px 40px rgba(var(--primaria-rgb),.45);transition:transform .2s;
}
.player:hover .play{transform:scale(1.06)}
.player .play span{
    width:0;height:0;border-left:22px solid #fff;
    border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:6px;
}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ================================================================= NOTÍCIAS */
.noticias-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card-noticia{
    text-decoration:none;display:block;border-radius:var(--raio-card);overflow:hidden;
    border:1px solid var(--borda);background:#fff;transition:transform .2s,box-shadow .2s;
}
.card-noticia:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(var(--navy-rgb),.4)}
.card-noticia .capa{aspect-ratio:16/10;overflow:hidden;background:var(--superficie-2)}
.card-noticia .capa img{width:100%;height:100%;object-fit:cover;display:block}
.card-noticia .corpo{padding:22px}
.card-noticia .meta{
    font-size:12px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--primaria);font-weight:700;margin-bottom:10px;
}
.card-noticia .titulo{font-family:var(--serif);font-size:21px;line-height:1.25;color:var(--navy)}

/* =========================================================== FAMÍLIA + REVISTA */
.dupla{display:grid;grid-template-columns:.82fr 1.18fr;gap:30px}
.card-familia{
    background:linear-gradient(135deg,var(--primaria),var(--primaria-hover));color:#fff;
    border-radius:var(--raio-card-g);padding:48px;position:relative;overflow:hidden;
}
.card-familia .bolha{
    position:absolute;top:-40px;right:-30px;width:220px;height:220px;border-radius:50%;
    background:radial-gradient(circle,rgba(224,69,155,.5),transparent 70%);
}
.card-familia .conteudo{position:relative}
.card-familia .eyebrow{color:rgba(255,255,255,.85)}
.card-familia h3{font-size:34px;line-height:1.12;margin:0 0 16px;max-width:420px}
.card-familia p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.9);max-width:420px;margin:0 0 28px}

.card-revista{
    background:var(--navy);color:#fff;border-radius:var(--raio-card-g);padding:40px;
    display:flex;gap:34px;align-items:center;
}
.card-revista .capa{
    width:172px;aspect-ratio:3/4;border-radius:6px;overflow:hidden;flex:none;position:relative;
    box-shadow:0 26px 50px -18px rgba(0,0,0,.7),-1px 0 0 rgba(255,255,255,.08) inset;
    background:var(--navy-2);
}
.card-revista .capa img{width:100%;height:100%;object-fit:cover;display:block}
/* A lombada: uma faixa escura na borda esquerda. É o que faz o retângulo ler
   como um exemplar em vez de uma imagem qualquer. */
.card-revista .lombada{
    position:absolute;left:0;top:0;bottom:0;width:8px;
    background:linear-gradient(90deg,rgba(0,0,0,.35),transparent);
}
.card-revista .txt{flex:1;min-width:0}
.card-revista h3{font-size:27px;line-height:1.15;margin:0 0 12px}
/* O selo diz QUAL edição está no ar. Discreto de propósito: é uma etiqueta de
   identificação sobre o cartão escuro, não uma segunda chamada disputando
   atenção com o título. */
.card-revista .edicao-selo{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.card-revista .edicao-selo span{
    font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--azul-claro);background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:4px 11px;
}
.card-revista p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.75);margin:0 0 22px}
.card-revista a.ler{text-decoration:none;font-weight:600;color:var(--azul-claro);font-size:15px}

/* ============================================================ TRANSPARÊNCIA */
.contas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card-conta{
    text-decoration:none;display:flex;flex-direction:column;gap:12px;
    background:var(--superficie-2);border:1px solid var(--borda);
    border-radius:var(--raio-card);padding:28px;transition:border-color .2s,transform .2s;
}
.card-conta:hover{border-color:var(--primaria);transform:translateY(-3px)}
.card-conta .ic{
    width:38px;height:38px;border-radius:10px;background:rgba(var(--primaria-rgb),.12);
    display:flex;align-items:center;justify-content:center;color:var(--primaria);font-size:19px;
}
.card-conta .t{font-family:var(--serif);font-size:20px;color:var(--navy);line-height:1.2}
.card-conta .d{font-size:13.5px;color:var(--texto-3);line-height:1.5}
.card-conta .cta{font-size:13.5px;font-weight:700;color:var(--primaria);margin-top:4px}

/* ========================================================== EMPRESAS DO BEM */
/* A faixa corre até -50% porque a lista é duplicada no HTML: nesse ponto a
   segunda cópia está exatamente onde a primeira começou, e o reinício não tem
   emenda. A DURAÇÃO não fica aqui — vem por variável, calculada em PHP a partir
   da quantidade de empresas. Com um valor fixo, cadastrar mais parceiros
   acelerava a faixa: 9 marcas em 42s são 39 px/s, 42 marcas nos mesmos 42s são
   180 px/s. Quem cadastra uma empresa não está pedindo para o carrossel correr. */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.empresas{background:#fff;padding:84px 0}
.empresas .topo{text-align:center;margin-bottom:44px}
.empresas .topo h2{font-size:40px;line-height:1.12;color:var(--navy)}
.marquee{
    position:relative;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;width:max-content;will-change:transform;
    animation:marquee var(--marquee-dur,120s) linear infinite}
/* A pausa precisa ser regra de CSS no PAI: um handler inline no cartão pausaria
   só o cartão sob o cursor, e a faixa inteira é uma animação só. */
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{width:180px;flex:none;display:flex;align-items:center;justify-content:center;padding:0 4px}
.marquee-card{
    display:flex;align-items:center;gap:12px;padding:12px 16px;
    border:1px solid var(--borda);border-radius:14px;background:var(--superficie-2);
    width:170px;height:74px;justify-content:center;text-decoration:none;
    filter:grayscale(1);opacity:.55;transition:filter .25s,opacity .25s,border-color .25s;
}
.marquee-card:hover{filter:grayscale(0);opacity:1;border-color:var(--primaria)}
/* Cartão com logo vai a BRANCO PURO, e não ao bege das superfícies.
   As logomarcas dos parceiros chegam em JPG, que não tem transparência: cada
   arquivo carrega o próprio retângulo branco. Sobre o bege, esse retângulo
   aparece como uma mancha clara dentro do cartão — o defeito clássico de
   galeria de logos. Igualando o fundo, a moldura do JPG desaparece na borda. */
.marquee-card.com-logo{background:#fff}
/* A LOGO ocupa o cartão inteiro e o nome sai de cena.
   O desenho original previa um ícone de 26px ao lado do nome, o que funciona
   para um símbolo — mas as logomarcas reais dos parceiros são lockups deitados
   com o nome dentro delas. A 26px viravam um borrão ao lado do mesmo nome
   escrito em texto: a marca ilegível e a informação duplicada. Com a arte real,
   ela fala sozinha; o nome fica no `title` para quem passa o mouse. */
.marquee-card img{max-width:100%;max-height:50px;width:auto;height:auto;object-fit:contain}
/* Sem logo cadastrada, o nome em serifada assume o cartão — é o marcador até a
   arte chegar, e lê melhor que um retângulo vazio. */
.marquee-card span{
    font-family:var(--serif);font-size:16px;font-weight:600;color:var(--navy);
    line-height:1.15;letter-spacing:-.01em;text-align:center;
    overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}

/* ================================================================ CTA FINAL */
.cta-final{
    background:var(--navy);color:#fff;padding:88px 0;text-align:center;
    position:relative;overflow:hidden;
}
.cta-final .brilho{
    position:absolute;inset:0;
    background:radial-gradient(700px 340px at 50% 120%,rgba(var(--primaria-rgb),.4),transparent 60%);
}
/* `cta-conteudo`, e não `conteudo`: a segunda é a classe do texto de artigo,
   que pinta o corpo de var(--texto-2) e os links de var(--primaria). Reusada
   aqui, ela deixava o h2 navy sobre fundo navy e o botão azul sobre azul. */
.cta-final .cta-conteudo{position:relative;max-width:720px;margin:0 auto;padding:0 var(--container-pad)}
.cta-final h2{font-size:46px;line-height:1.08;margin:0 0 22px;color:#fff}
.cta-final p{font-size:18px;color:rgba(255,255,255,.82);margin:0 0 32px}
.cta-final .btn.btn-primario{font-size:17px;padding:18px 40px;box-shadow:0 16px 40px rgba(var(--primaria-rgb),.4)}

/* =================================================================== RODAPÉ */
@keyframes pulso{0%,100%{transform:scale(1)}50%{transform:scale(1.28)}}
.rodape{
    background:var(--navy-2);color:rgba(255,255,255,.72);
    padding:64px 0 40px;scroll-margin-top:120px;
}
.rodape-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.rodape img.logo{height:52px;width:auto;margin-bottom:20px}
.rodape .missao{font-size:14px;line-height:1.6;max-width:300px;margin:0 0 18px}
.rodape .endereco{font-size:13px;line-height:1.7;color:rgba(255,255,255,.55)}
.rodape .tit{
    font-size:13px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--azul-claro);font-weight:700;margin-bottom:16px;
}
.rodape .col{display:flex;flex-direction:column;gap:11px;font-size:14px}
.rodape .col a{text-decoration:none;transition:color .15s}
.rodape .col a:hover{color:#fff}
.rodape .frase{font-family:var(--serif);font-style:italic;font-size:19px;color:#fff;line-height:1.3}
.rodape-base{
    max-width:var(--container);margin:44px auto 0;padding:22px var(--container-pad) 0;
    border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;
    gap:16px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.45);
}
.rodape-credito{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.6)}
.rodape-credito i{color:var(--azul-claro);font-size:12px;display:inline-block;
    animation:pulso 1.4s ease-in-out infinite}
.rodape-credito img{height:20px;width:auto;display:block;opacity:.85}
/* A assinatura virou link: sem o display:flex o <a> ganharia a linha de base do
   texto e empurraria a logo alguns pixels para baixo do coração. */
.rodape-credito a{display:flex;align-items:center;transition:opacity .2s}
.rodape-credito a:hover img{opacity:1}

/* ================================================================ LIGHTBOX */
@keyframes lbEntra{from{opacity:0}to{opacity:1}}
@keyframes lbSobe{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

.lightbox{
    position:fixed;inset:0;z-index:200;
    background:rgba(var(--navy-rgb),.92);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    display:flex;align-items:center;justify-content:center;padding:24px;
    animation:lbEntra .2s ease both;
}
.lightbox[hidden]{display:none}
.lightbox-caixa{
    width:min(1100px,100%);
    animation:lbSobe .28s cubic-bezier(.2,.8,.3,1) both;
}
/* A proporção fica no contêiner, e não no iframe: o iframe entra por JS depois
   da abertura, e sem a caixa já dimensionada a lightbox abriria com altura zero
   e "pularia" quando o vídeo chegasse. */
.lightbox-player{
    position:relative;aspect-ratio:16/9;width:100%;
    border-radius:var(--raio-card-g);overflow:hidden;background:#000;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
}
.lightbox-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lightbox-fechar{
    position:absolute;top:20px;right:24px;width:46px;height:46px;border-radius:50%;
    border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;
    font-size:26px;line-height:1;cursor:pointer;display:flex;
    align-items:center;justify-content:center;transition:background .2s;
}
.lightbox-fechar:hover{background:rgba(255,255,255,.14)}

/* Enquanto a lightbox está aberta a página de trás não rola: no celular, o
   toque de arrastar levava o fundo embora e deixava o vídeo flutuando sobre
   uma parte qualquer do site. */
body.lightbox-aberta{overflow:hidden}

/* ------------------------------------------------------------------ MODAL
   Ficha ampliada de um cartão (unidades). Mesmo escurecimento da lightbox,
   mas a caixa é branca e ROLA por dentro: o texto completo de uma unidade
   pode ser longo, e o fundo fica travado enquanto ela está aberta. */
.modal{
    position:fixed;inset:0;z-index:200;
    background:rgba(var(--navy-rgb),.88);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    display:flex;align-items:center;justify-content:center;padding:24px;
    animation:lbEntra .2s ease both;
}
.modal[hidden]{display:none}
.modal-caixa{
    position:relative;width:min(980px,100%);max-height:calc(100vh - 48px);
    background:#fff;border-radius:var(--raio-card-g);overflow:auto;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
    animation:lbSobe .28s cubic-bezier(.2,.8,.3,1) both;
    -webkit-overflow-scrolling:touch;
}
.modal-fechar{
    position:sticky;top:16px;z-index:2;
    /* Alinhado à direita por margem, e NÃO por float: o float encolhia a capa
       e deixava uma faixa branca à direita da foto. A margem inferior negativa
       faz o botão pairar sobre a foto sem empurrá-la para baixo. */
    margin:16px 16px -58px auto;
    width:42px;height:42px;border-radius:50%;border:1px solid var(--borda);
    background:#fff;color:var(--navy);font-size:24px;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 20px -10px rgba(var(--navy-rgb),.5);transition:background .2s;
}
.modal-fechar:hover{background:var(--superficie-2)}
.modal-capa{aspect-ratio:21/9;overflow:hidden;background:var(--superficie-2)}
.modal-capa img{width:100%;height:100%;object-fit:cover;display:block}
.modal-corpo{padding:36px 44px 44px}
.modal-corpo .sigla{
    display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:var(--primaria);background:rgba(var(--primaria-rgb),.1);
    padding:4px 10px;border-radius:6px;margin-bottom:14px;
}
.modal-titulo{font-family:var(--serif);font-size:34px;line-height:1.15;color:var(--navy);margin:0 0 12px}
.modal-resumo{font-size:17px;line-height:1.6;color:var(--texto-3);margin:0 0 26px}
.modal-corpo .conteudo{padding-top:22px;border-top:1px solid var(--borda)}
body.modal-aberta{overflow:hidden}
@media (max-width:640px){
    .modal{padding:0;align-items:stretch}
    .modal-caixa{width:100%;max-height:100vh;border-radius:0}
    .modal-corpo{padding:24px 22px 34px}
    .modal-titulo{font-size:27px}
}

/* Cartão que abre a modal: é um <button> com a cara do cartão comum. */
.card-abrir{
    appearance:none;-webkit-appearance:none;font:inherit;text-align:left;
    padding:0;cursor:pointer;color:inherit;width:100%;
}
.card-abrir:focus-visible{outline:3px solid rgba(var(--primaria-rgb),.45);outline-offset:3px}
.card-abrir .cta i{vertical-align:-2px;transition:transform .2s}
.card-abrir:hover .cta i{transform:translateX(4px)}

/* O retrato da diretoria também virou botão, e .card-abrir vem DEPOIS de
   .card-pessoa na folha: sem esta linha o `text-align:left` e o `padding:0`
   dele venciam por ordem de origem e o cartão da pessoa desalinhava — retrato
   colado na borda e nome jogado para a esquerda. Repõe o que é do cartão de
   pessoa, sem mexer no cartão comum. */
.card-pessoa.card-abrir{text-align:center;padding:32px 24px}

@media(max-width:640px){
    .lightbox{padding:14px}
    .lightbox-fechar{top:10px;right:12px;width:40px;height:40px;font-size:22px}
}

/* ========================================================= BOTÃO FLUTUANTE */
.flutuante{
    position:fixed;right:24px;bottom:24px;z-index:60;background:var(--primaria);
    color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:15px 24px;
    border-radius:var(--raio-btn);box-shadow:0 14px 34px rgba(var(--primaria-rgb),.5);
    display:flex;align-items:center;gap:9px;transition:background .18s,transform .18s;
}
.flutuante:hover{background:var(--primaria-hover);transform:translateY(-2px)}
.flutuante .dot{width:8px;height:8px;border-radius:50%;background:#fff;display:inline-block}

/* ====================================================== PÁGINAS INTERNAS */
.pag-hero{
    background:var(--navy);color:#fff;position:relative;overflow:hidden;
    padding:74px 0 68px;
}
.pag-hero .brilho{
    position:absolute;inset:0;
    background:radial-gradient(900px 460px at 80% -10%,rgba(var(--primaria-rgb),.45),transparent 60%);
}
/* Com foto de fundo o texto branco precisa de um véu, ou some sobre uma imagem
   clara. Sem foto, o véu não tem o que escurecer e o gradiente da marca basta. */
.pag-hero.com-foto{background-size:cover;background-position:center}
.pag-hero.com-foto:before{content:'';position:absolute;inset:0;background:rgba(var(--navy-rgb),.78)}
.pag-hero .container{position:relative}
.pag-hero h1{font-size:46px;line-height:1.08;margin:0 0 14px}
.pag-hero p{font-size:17px;line-height:1.6;color:rgba(255,255,255,.82);margin:0;max-width:640px}

.migalha{
    font-size:13px;color:rgba(255,255,255,.6);margin-bottom:18px;
    display:flex;gap:8px;flex-wrap:wrap;align-items:center;
}
.migalha a{text-decoration:none}
.migalha a:hover{color:#fff}

/* ============================================ SERVIÇOS — ESCOLHA DO CENTRO */
.centros-escolha,.centro-pag{
    background:var(--navy);color:#fff;position:relative;overflow:hidden;padding:72px 0 96px;
}
.centros-escolha .brilho,.centro-pag .brilho{
    position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(900px 500px at 85% 0%,rgba(var(--primaria-rgb),.28),transparent 60%);
}
.centros-escolha .container,.centro-pag .container{position:relative}
.centros-cab{
    display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;
    align-items:end;margin-bottom:40px;
}
.centros-cab .eyebrow{margin-bottom:12px}
.centros-cab h1{font-size:44px;line-height:1.12}
.centros-cab p{margin:0 0 6px;font-size:16px;line-height:1.65;color:rgba(255,255,255,.82);max-width:380px}

.centros-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.centro-card{
    position:relative;display:block;aspect-ratio:16/8.5;min-height:300px;
    border-radius:var(--raio-card-g);overflow:hidden;text-decoration:none;color:#fff;
    border:1px solid rgba(var(--primaria-rgb),.45);background:var(--navy-2);
    transition:transform .25s,box-shadow .25s,border-color .25s;
}
.centro-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.centro-card:before{
    content:'';position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,transparent 35%,rgba(var(--navy-rgb),.72) 62%,rgba(var(--navy-rgb),.96) 100%);
}
.centro-card:hover{transform:translateY(-4px);border-color:var(--azul-claro);box-shadow:0 22px 50px rgba(0,0,0,.35)}
.centro-card:hover img{transform:scale(1.04)}
.centro-card-ico{position:absolute;top:34px;left:34px;font-size:64px;color:var(--azul-claro);opacity:.7}
.centro-card-corpo{
    position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 28px;
    display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
}
.centro-card h2,.centro-card h3{font-size:26px;line-height:1.2;margin:0 0 12px}
.centro-card h2 span,.centro-card h3 span{display:block}
.centro-card p{margin:0;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.85);max-width:420px}
.centro-card-seta{
    flex:none;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    border:1.5px solid rgba(255,255,255,.75);font-size:20px;transition:background .2s,border-color .2s;
}
.centro-card:hover .centro-card-seta{background:var(--primaria);border-color:var(--primaria)}
.centros-nota{
    margin-top:36px;padding:22px 26px;border-radius:var(--raio-card);font-size:15px;line-height:1.65;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.82);
}

/* ============================================ PÁGINA DO CENTRO */
.centro-pag{padding:0 0 96px}
.centro-topo{position:relative;padding:28px 0 64px;min-height:360px}
.centro-topo.sem-foto{min-height:0}
.centro-topo-foto{
    position:absolute;top:0;right:0;bottom:0;width:58%;background-size:cover;background-position:center;
}
.centro-topo-foto:before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(90deg,var(--navy) 0%,rgba(var(--navy-rgb),.55) 30%,transparent 65%),
               linear-gradient(0deg,var(--navy) 0%,transparent 35%);
}
.centro-voltar{
    display:inline-flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,.85);
    text-decoration:none;margin-bottom:40px;
}
.centro-voltar i{color:var(--azul-claro)}
.centro-voltar:hover{color:#fff}
.centro-topo-txt{max-width:500px}
.centro-topo-txt .eyebrow{margin-bottom:10px}
.centro-topo-txt h1{font-size:48px;line-height:1.08;margin:0 0 18px}
.centro-topo-txt p{margin:0;font-size:18px;line-height:1.55;color:rgba(255,255,255,.9)}

.centro-servicos h2{font-size:36px;color:var(--azul-claro);margin:0 0 14px}
.centro-intro{margin:0 0 30px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.82);max-width:560px}
.centro-servicos-grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.centro-servico{
    display:flex;align-items:center;gap:16px;padding:24px 22px;min-height:92px;
    border-radius:var(--raio-card);text-decoration:none;color:#fff;font-size:15.5px;font-weight:600;
    background:rgba(255,255,255,.03);border:1px solid rgba(var(--primaria-rgb),.4);
    transition:background .2s,border-color .2s,transform .2s;
}
.centro-servico i{font-size:34px;color:var(--azul-claro);flex:none}
.centro-servico:hover{background:rgba(var(--primaria-rgb),.14);border-color:var(--azul-claro);transform:translateY(-2px)}
.centro-conteudo{margin-top:48px;color:rgba(255,255,255,.85)}
.centro-conteudo h2,.centro-conteudo h3{color:#fff}

@media(max-width:1080px){
    .centro-servicos-grade{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
    .centros-cab{grid-template-columns:1fr;gap:16px}
    .centros-cab h1{font-size:34px}
    .centros-grade{grid-template-columns:1fr}
    .centro-topo-foto{width:100%;opacity:.45}
    .centro-topo-txt h1{font-size:38px}
    .centro-servicos-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
    .centro-card{aspect-ratio:auto;min-height:340px}
    .centro-card h2,.centro-card h3{font-size:22px}
    .centro-servicos-grade{grid-template-columns:1fr}
    .centro-servicos h2{font-size:30px}
}

.conteudo{
    font-size:16.5px;line-height:1.75;color:var(--texto-2);max-width:820px;
}
.conteudo h2{font-size:30px;color:var(--navy);margin:38px 0 16px}
.conteudo h3{font-size:22px;color:var(--navy);margin:30px 0 12px}
.conteudo p{margin:0 0 18px}
.conteudo ul,.conteudo ol{margin:0 0 18px;padding-left:22px}
.conteudo li{margin-bottom:8px}
.conteudo a{color:var(--primaria);font-weight:600}
.conteudo img{border-radius:14px;margin:10px 0}
.conteudo blockquote{
    margin:24px 0;padding:20px 26px;border-left:3px solid var(--primaria);
    background:var(--superficie-2);border-radius:0 12px 12px 0;
    font-family:var(--serif);font-style:italic;font-size:19px;color:var(--navy);
}
.conteudo table{width:100%;border-collapse:collapse;margin:0 0 20px}
.conteudo th,.conteudo td{
    padding:11px 14px;border:1px solid var(--borda);text-align:left;font-size:15px;
}
.conteudo th{background:var(--superficie-2);font-weight:700;color:var(--navy)}

/* Grade genérica de cartões — unidades, centros, diretoria, serviços internos. */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:22px}
.card{
    background:#fff;border:1px solid var(--borda);border-radius:var(--raio-card);
    overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s;
    text-decoration:none;display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(var(--navy-rgb),.4)}
.card .capa{aspect-ratio:16/10;overflow:hidden;background:var(--superficie-2)}
.card .capa img{width:100%;height:100%;object-fit:cover;display:block}
.card .corpo{padding:24px;flex:1;display:flex;flex-direction:column;gap:9px}
.card .ic{
    width:44px;height:44px;border-radius:12px;background:rgba(var(--primaria-rgb),.12);
    display:flex;align-items:center;justify-content:center;color:var(--primaria);font-size:22px;
}
.card .sigla{
    display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:var(--primaria);background:rgba(var(--primaria-rgb),.1);
    padding:4px 10px;border-radius:6px;align-self:flex-start;
}
.card .t{font-family:var(--serif);font-size:21px;line-height:1.25;color:var(--navy)}
.card .d{font-size:14px;line-height:1.6;color:var(--texto-3)}
.card .cta{font-size:13.5px;font-weight:700;color:var(--primaria);margin-top:auto;padding-top:6px}

/* Pessoa (diretoria) — foto redonda em cima, nome e cargo embaixo. */
.card-pessoa{text-align:center;padding:32px 24px}
.card-pessoa .foto{
    width:110px;height:110px;border-radius:50%;overflow:hidden;margin:0 auto 18px;
    background:rgba(var(--primaria-rgb),.1);display:flex;align-items:center;
    justify-content:center;color:var(--primaria);font-size:40px;
}
.card-pessoa .foto img{width:100%;height:100%;object-fit:cover}
.card-pessoa .nome{font-family:var(--serif);font-size:20px;color:var(--navy);line-height:1.25}
.card-pessoa .cargo{font-size:13.5px;color:var(--texto-3);margin-top:7px;line-height:1.5}
/* "Ver perfil" só existe em quem tem ficha. `margin-top:auto` herdado de
   .card .cta encostaria o texto no rodapé do cartão e abriria um vão no meio
   dos cartões mais altos da linha — aqui ele fica logo abaixo do cargo. */
.card-pessoa .cta{margin-top:14px;font-size:13px}

/* Filtros em pílula — categorias de notícia, grupos de serviço, transparência. */
.filtros{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.filtros a{
    text-decoration:none;padding:9px 18px;border-radius:var(--raio-btn);
    border:1px solid var(--borda-2);background:#fff;font-size:14px;font-weight:600;
    color:var(--texto-2);transition:all .16s;display:flex;align-items:center;gap:8px;
}
.filtros a:hover{border-color:var(--primaria);color:var(--navy)}
.filtros a.on{background:var(--primaria);border-color:var(--primaria);color:#fff}
.filtros a .dot{width:8px;height:8px;border-radius:50%;flex:none}
.filtros a.on .dot{background:#fff !important}

/* Lista de documentos da transparência. */
.docs{display:flex;flex-direction:column;gap:10px}
.doc{
    display:flex;align-items:center;gap:16px;padding:18px 22px;background:#fff;
    border:1px solid var(--borda);border-radius:14px;text-decoration:none;
    transition:border-color .18s,transform .18s;
}
.doc:hover{border-color:var(--primaria);transform:translateX(3px)}
.doc .ic{
    width:42px;height:42px;border-radius:11px;flex:none;
    background:rgba(var(--primaria-rgb),.12);color:var(--primaria);
    display:flex;align-items:center;justify-content:center;font-size:21px;
}
.doc .info{flex:1;min-width:0}
.doc .t{font-weight:600;color:var(--navy);font-size:15.5px}
.doc .d{font-size:13px;color:var(--texto-3);margin-top:3px}
.doc .ano{
    font-size:12px;font-weight:700;color:var(--texto-4);
    background:var(--superficie-2);padding:5px 11px;border-radius:6px;flex:none;
}
.doc .baixar{color:var(--primaria);font-size:20px;flex:none}
/* O item inteiro abre a ficha; o ícone de baixar é um link próprio, com área
   de toque generosa e realce ao passar, para deixar claro que é outro gesto. */
.doc-abrir{cursor:pointer}
.doc-abrir:focus-visible{outline:3px solid rgba(var(--primaria-rgb),.45);outline-offset:2px}
.doc a.baixar{
    width:42px;height:42px;border-radius:11px;display:flex;align-items:center;
    justify-content:center;text-decoration:none;transition:background .18s,transform .18s;
}
.doc a.baixar:hover{background:rgba(var(--primaria-rgb),.12);transform:translateY(2px)}

/* Ficha do documento (modal da transparência). */
.modal-doc .modal-caixa{width:min(760px,100%)}
.modal-doc .modal-fechar{margin-bottom:-58px}
.modal-doc-topo{display:flex;align-items:flex-start;gap:18px;padding-right:56px}
.modal-doc-topo .ic{
    width:54px;height:54px;border-radius:14px;flex:none;
    background:rgba(var(--primaria-rgb),.12);color:var(--primaria);
    display:flex;align-items:center;justify-content:center;font-size:26px;
}
.modal-doc-topo .txt{flex:1;min-width:0}
.modal-doc-topo .modal-titulo{font-size:28px;margin:0}
.modal-doc-meta{
    display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px;
    font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primaria);
}
.modal-doc-meta .ano,.modal-doc-topo>.ano{
    font-size:12px;font-weight:700;color:var(--texto-4);letter-spacing:0;text-transform:none;
    background:var(--superficie-2);padding:5px 11px;border-radius:6px;
}
.modal-doc-baixar{flex:none;padding:12px 20px;font-size:14px;display:inline-flex;align-items:center;gap:8px}
.modal-doc-texto{
    margin-top:26px;padding-top:22px;border-top:1px solid var(--borda);
    font-size:16px;line-height:1.7;color:var(--texto-2);
}
@media (max-width:640px){
    .modal-doc-topo{flex-wrap:wrap}
    .modal-doc-topo .modal-titulo{font-size:23px}
    .modal-doc-baixar{width:100%;justify-content:center}
}

/* Ficha do centro sem foto: o ícone do cadastro entra no lugar da capa.
   Maior que o .ic do cartão porque aqui ele é o único elemento gráfico da
   modal — no tamanho do cartão pareceria um resto de layout. */
.modal-ic{
    width:60px;height:60px;border-radius:16px;margin-bottom:18px;
    background:rgba(var(--primaria-rgb),.12);color:var(--primaria);
    display:flex;align-items:center;justify-content:center;font-size:30px;
}

/* Ficha da pessoa (diretoria).
   Segue o topo em duas colunas da ficha do documento, e não a capa 21:9 das
   unidades: retrato é vertical, e esticá-lo numa faixa panorâmica cortaria a
   pessoa na altura do queixo. A caixa é mais estreita pelo mesmo motivo do
   documento — é texto corrido curto, e 980px deixaria linhas longas demais
   para ler. */
.modal-pessoa .modal-caixa{width:min(720px,100%)}
.modal-pessoa .modal-fechar{margin-bottom:-58px}
.modal-pessoa-topo{display:flex;align-items:center;gap:22px;padding-right:56px}
.modal-pessoa-topo .retrato{
    width:104px;height:104px;border-radius:50%;overflow:hidden;flex:none;
    background:var(--superficie-2);color:var(--texto-4);
    display:flex;align-items:center;justify-content:center;font-size:44px;
}
.modal-pessoa-topo .retrato img{width:100%;height:100%;object-fit:cover;display:block}
.modal-pessoa-topo .txt{flex:1;min-width:0}
.modal-pessoa-topo .modal-titulo{font-size:28px;margin:0}
.modal-pessoa-cargo{
    font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--primaria);margin-bottom:8px;
}
@media (max-width:640px){
    /* Empilhado e centralizado: lado a lado num aparelho estreito, o nome
       sobraria em duas ou três linhas ao lado do retrato. */
    .modal-pessoa-topo{flex-direction:column;text-align:center;gap:16px;padding-right:0}
    .modal-pessoa-topo .modal-titulo{font-size:23px}
}

/* Accordion de dúvidas. */
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq details{
    background:#fff;border:1px solid var(--borda);border-radius:14px;overflow:hidden;
}
.faq details[open]{border-color:var(--primaria)}
.faq summary{
    cursor:pointer;padding:20px 24px;font-weight:600;font-size:16px;color:var(--navy);
    list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';font-size:22px;color:var(--primaria);font-weight:400;flex:none}
.faq details[open] summary:after{content:'−'}
.faq .resp{padding:0 24px 22px;font-size:15px;line-height:1.7;color:var(--texto-2)}

/* --------------------------------------------------------------- formulários */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fg{display:flex;flex-direction:column;gap:7px}
.fg.full{grid-column:1/-1}
.fg label{font-size:13px;font-weight:700;color:var(--texto-2)}
.fg input,.fg select,.fg textarea{
    padding:14px 16px;border:1px solid var(--borda-2);border-radius:12px;
    font-family:var(--sans);font-size:15px;background:#fff;color:var(--texto);
    width:100%;transition:border-color .16s,box-shadow .16s;
}
.fg textarea{min-height:140px;resize:vertical}
.fg input:focus,.fg select:focus,.fg textarea:focus{
    outline:none;border-color:var(--primaria);
    box-shadow:0 0 0 3px rgba(var(--primaria-rgb),.14);
}
.fg .hint{font-size:12.5px;color:var(--texto-4);line-height:1.5}
.fg-check{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--texto-2);cursor:pointer}
.fg-check input{margin-top:3px;width:16px;height:16px;flex:none;accent-color:var(--primaria)}

.aviso{
    padding:15px 18px;border-radius:12px;font-size:14.5px;line-height:1.55;
    display:flex;gap:11px;align-items:flex-start;margin-bottom:22px;
}
.aviso i{font-size:19px;flex:none;margin-top:1px}
.aviso.ok{background:rgba(56,225,176,.14);color:#0d7a5c;border:1px solid rgba(56,225,176,.4)}
.aviso.erro{background:#fdf1f1;color:#a02020;border:1px solid #f6d7d7}
.aviso.info{background:rgba(var(--primaria-rgb),.09);color:var(--primaria-hover);
    border:1px solid rgba(var(--primaria-rgb),.24)}

/* Painel lateral de contato (telefone, e-mail, endereço). */
.contato-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:start}
.contato-box{
    background:var(--navy);color:#fff;border-radius:var(--raio-card-g);padding:34px;
}
.contato-box .item{display:flex;gap:14px;align-items:flex-start;padding:16px 0;
    border-bottom:1px solid rgba(255,255,255,.1)}
.contato-box .item:last-child{border-bottom:none}
.contato-box .ic{
    width:40px;height:40px;border-radius:11px;flex:none;background:rgba(255,255,255,.1);
    display:flex;align-items:center;justify-content:center;color:var(--azul-claro);font-size:19px;
}
.contato-box .rot{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--azul-claro);font-weight:700;margin-bottom:4px}
.contato-box .val{font-size:15px;line-height:1.55;color:rgba(255,255,255,.9)}
.contato-box a{text-decoration:none}
.contato-box a:hover{color:#fff}

/* Paginação. */
.paginacao{display:flex;gap:8px;justify-content:center;margin-top:44px;flex-wrap:wrap}
.paginacao a,.paginacao span{
    min-width:42px;height:42px;padding:0 14px;border-radius:11px;border:1px solid var(--borda-2);
    background:#fff;display:flex;align-items:center;justify-content:center;
    text-decoration:none;font-weight:600;font-size:14px;color:var(--texto-2);
}
.paginacao a:hover{border-color:var(--primaria);color:var(--navy)}
.paginacao .on{background:var(--primaria);border-color:var(--primaria);color:#fff}

/* Estado vazio — nunca deixar uma seção terminar em branco sem explicação. */
.vazio{
    text-align:center;padding:60px 24px;color:var(--texto-4);
    background:var(--superficie-2);border:1px dashed var(--borda-2);border-radius:var(--raio-card);
}
.vazio i{font-size:38px;display:block;margin-bottom:12px;opacity:.5}
.vazio b{display:block;color:var(--texto-2);font-size:16px;margin-bottom:5px}

/* ================================================================ RESPONSIVO */
@media(max-width:1080px){
    .hero .container{grid-template-columns:1fr;gap:44px}
    .hero-foto{max-width:460px}
    .hero h1{font-size:46px}
    .servicos-grid{grid-template-columns:repeat(2,1fr)}
    .noticias-grid{grid-template-columns:repeat(2,1fr)}
    .dupla{grid-template-columns:1fr}
    .contas-grid{grid-template-columns:1fr 1fr}
    .rodape-grid{grid-template-columns:1fr 1fr}
    .contato-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
    /* No celular o menu vira uma gaveta: a nav sai do fluxo e é revelada pelo
       botão. Manter os submenus no hover não funcionaria — não há hover. */
    .menu-btn{display:flex}
    .nav{
        display:none;position:absolute;top:calc(100% + 14px);left:var(--container-pad);
        right:var(--container-pad);background:#fff;border-radius:var(--raio-card);
        padding:14px;flex-direction:column;align-items:stretch;gap:2px;
        box-shadow:0 34px 70px -28px rgba(var(--navy-rgb),.55);max-height:70vh;overflow-y:auto;
    }
    .nav.aberto{display:flex}
    /* A gaveta é uma pilha vertical: o padding negativo que alarga a área de
       hover no desktop faria os itens se sobreporem aqui, onde não há hover
       nenhum para alargar. */
    .nav > .item{flex-direction:column;padding:0;margin:0}
    .nav a.link{color:var(--navy);padding:12px 14px;border-radius:10px;justify-content:space-between}
    /* BRANCO SOBRE BRANCO — o defeito que esta regra conserta.
       No desktop, `:hover`, `.aberto` e `.ativo` clareiam o link para #fff sobre
       o cabeçalho azul-escuro. Aquela regra vive fora de media query e tem
       especificidade maior que a de cor daqui, então continuava valendo dentro
       da gaveta — que é BRANCA. Tocar num item com submenu apagava o próprio
       rótulo. Aqui os três estados voltam para o azul-marinho. */
    .nav a.link:hover,
    .nav .item.aberto a.link,
    .nav a.link.ativo{color:var(--navy);background:#F2F6FA}
    /* A seta em azul-claro foi desenhada para fundo escuro; sobre branco ela
       quase some. */
    .nav .chev{color:var(--primaria)}

    /* OS LINKS DO TOPO dentro da gaveta — só existem aqui. */
    .nav-topo{display:flex;flex-direction:column;gap:2px;margin-top:8px;padding-top:10px;
        border-top:1px solid var(--borda)}
    .nav-topo a{
        text-decoration:none;color:var(--texto-3);font-size:14px;font-weight:500;
        padding:11px 14px;border-radius:10px;transition:background .15s,color .15s;
    }
    .nav-topo a:hover{background:#F2F6FA;color:var(--navy)}

    /* A BARRA DO TOPO NO CELULAR.
       Ela tinha 151px de conteúdo dentro de um limite de 60px com overflow
       escondido: telefone, três links, cinco idiomas e quatro redes não cabem em
       390px, e o que passava de 60px era simplesmente decapitado. Ficam o
       telefone (que disca com um toque) e os idiomas; os links foram para a
       gaveta, e as redes já estão no rodapé. */
    .utilbar .container{flex-wrap:nowrap;gap:12px}
    .utilbar-links{display:none}
    .utilbar-dir .sociais{display:none}
    /* Sem as redes, o separador que as antecedia apontaria para o nada. */
    .utilbar-dir .div:last-of-type{display:none}
    .nav a.destaque{margin-top:8px;margin-left:0;justify-content:center;padding:14px}
    /* Dentro da gaveta o submenu é uma lista recuada, sem painel flutuante. */
    .painel{
        position:static;opacity:1;visibility:visible;pointer-events:auto;transform:none;
        box-shadow:none;border:none;border-left:2px solid var(--borda);border-radius:0;
        width:auto;margin:0 0 6px 14px;padding:0;display:none;
    }
    .item.aberto > .painel{display:block}
    /* Sem painel flutuante não há vão a atravessar — a ponte de hover viraria
       uma faixa invisível cobrindo o link de cima dentro da gaveta. */
    .painel::before{display:none}
    /* Vence `.painel.drop{width:290px}` e `.drop-estreito{width:270px}`: na
       gaveta o painel acompanha a largura disponível. Com a largura fixa ele
       saía 87px para fora da tela pela esquerda e os rótulos eram cortados. */
    .painel.drop,.painel.mega,.painel.drop-estreito{width:auto;max-width:100%}
    /* E o TRANSFORM tem de morrer junto. `.item.aberto > .painel.drop` centra o
       painel no item com translate(-50%) — no desktop, onde ele é absoluto e
       pende do link. Na gaveta ele é estático e ocupa a linha inteira, e o
       mesmo translate o empurra meia largura para fora da tela: era daí que
       vinham os 76px cortados à esquerda, não da largura. */
    .item.aberto > .painel,
    .item.aberto > .painel.drop,
    .item.aberto > .painel.mega{transform:none;left:auto;right:auto}
    .painel.mega{padding:0}
    .mega-grid{grid-template-columns:1fr;gap:14px}
    /* Empilhadas, as colunas não levam régua vertical: a linha ficaria à
       esquerda de um bloco de largura total, apontando para nada. */
    .mega-col + .mega-col{border-left:none;padding-left:0}
    .mega-col .tit{margin-bottom:6px;padding:10px 12px 6px;border-bottom:none}
    .mega-col .mais{padding:6px 12px 10px}
    .mega-card{display:none}
    .mega-pe{margin:8px 0 0;padding:12px;background:none;border-radius:10px}
    .painel .rotulo{padding:10px 12px 4px}

    .doar-grid{grid-template-columns:1fr;gap:40px}
    .historia-grid{grid-template-columns:1fr;gap:52px}
    .historia-selo{left:0;bottom:-18px}
    .card-revista{flex-direction:column;align-items:flex-start;gap:24px}
    .sec{padding:70px 0}
    .h1,.hero h1{font-size:38px}
    .h2,.doar-txt h2,.historia-txt h2,.servicos-cab h2,.video-wrap h2,
    .empresas .topo h2,.cta-final h2,.pag-hero h1{font-size:32px}
    .form-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
    :root{--container-pad:20px}
    .utilbar-esq .hora{display:none}
    .servicos-grid,.noticias-grid,.contas-grid{grid-template-columns:1fr}
    .valores{grid-template-columns:1fr;gap:16px}
    .rodape-grid{grid-template-columns:1fr}
    .card-familia,.card-revista,.card-doar{padding:28px}
    .chips{grid-template-columns:repeat(2,1fr)}
    .flutuante{right:14px;bottom:14px;padding:13px 20px}
}

/* =========================================== LISTAGENS COM FILTRO DINÂMICO */
/* Trocar a lista sem recarregar tem um risco próprio: entre o clique e a
   resposta a tela fica idêntica, e quem clicou clica de novo achando que
   falhou. O esmaecimento é curto e discreto — sinal de "estou indo", não uma
   tela de carregamento por cima de conteúdo que já está ali. */
/* O esmaecimento pega SÓ a lista, não a barra de filtros: o botão que a pessoa
   acabou de clicar precisa continuar aceso e nítido — é ele que responde ao
   gesto enquanto o resto vai. */
.lista-dinamica .lista{transition:opacity .18s ease}
.lista-dinamica.carregando .lista{opacity:.4;pointer-events:none}
.lista-dinamica.carregando .filtros{pointer-events:none}

/* O clique não deve mexer no scroll: quem está no meio da grade e filtra
   espera ver a grade nova no mesmo lugar, não ser jogado para o topo. */
.filtros a{cursor:pointer}
.filtros a[aria-current]{cursor:default}

/* =============================================== TELEFONE CLICÁVEL (RODAPÉ) */
/* O número herda a cor do bloco de endereço; o sublinhado pontilhado é o que
   avisa que ele DISCA, sem transformá-lo num link azul no meio de um bloco de
   texto cinza. */
.rodape .endereco .fone{
    text-decoration:none;border-bottom:1px dotted rgba(255,255,255,.35);
    padding-bottom:1px;transition:color .15s,border-color .15s;
}
.rodape .endereco .fone:hover{color:#fff;border-bottom-color:rgba(255,255,255,.7)}

/* ============================================================ GOOGLE TRADUTOR
   O widget do Google injeta uma barra própria no topo da página e empurra o
   <body> 40px para baixo com style inline. É a "barra feia": ela cobre o
   cabeçalho fixo, desalinha a pilha sticky e não tem nada a ver com o desenho
   do site.

   Um `!important` de folha de estilo vence o style inline do elemento — é o que
   permite anular o deslocamento sem ficar corrigindo `body.style.top` num
   intervalo de tempo, que é a solução que costuma aparecer para isto e que
   pisca a cada aplicação.

   O que NÃO é escondido: a barra de progresso do próprio Google
   (.VIpgJd-ZVi9od-aZ2wEe-wOHMyf). Ela é o único aviso de que a tradução está a
   caminho, e é ela que faz a troca parecer instantânea em vez de quebrada. */
body{top:0 !important}
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.VIpgJd-ZVi9od-ORHb-OEVmcd{display:none !important}
#goog-gt-tt,.goog-tooltip,.goog-tooltip:hover{display:none !important}
.goog-text-highlight{background:none !important;box-shadow:none !important}
/* O contêiner do widget sai da tela em vez de receber display:none. Ele fica
   RENDERIZADO — o widget mede o próprio gadget durante a inicialização, e um
   elemento com display:none tem caixa zero. Esconder por posição custa o mesmo
   e não tira o elemento do fluxo de medição. */
#google_translate_element{
    position:absolute !important;left:-9999px !important;top:0 !important;
    width:1px;height:1px;overflow:hidden;
}
/* O <html> ganha .translated-ltr / .translated-rtl quando a tradução está
   ativa; o deslocamento é reaplicado nesse momento. */
.translated-ltr body,.translated-rtl body{top:0 !important}

/* O seletor esmaece enquanto o script do Google desce — a primeira troca leva
   um instante e sem sinal nenhum ela parece um clique perdido. */
.langs{transition:opacity .2s ease}
.langs.carregando{opacity:.5;pointer-events:none}

/* ============================================================== ACEITE LGPD */
/* O aceite é uma decisão, não um rodapé de letra miúda: ganha caixa própria,
   separada dos campos, para que ninguém marque sem ver o que marcou. Fica
   ACIMA do botão porque é a condição para ele — a ordem de leitura na tela é a
   mesma da regra. */
.lgpd{
    display:flex;align-items:flex-start;gap:12px;cursor:pointer;
    margin-top:22px;padding:16px 18px;
    background:var(--superficie-2);border:1px solid var(--borda-2);
    border-radius:var(--raio-card);transition:border-color .18s,background .18s;
}
.lgpd:hover{border-color:var(--primaria)}
/* Marcado, a caixa muda de cor: é o retorno visual de que a trava do botão
   caiu. Sem ele, quem marca e vê o botão acender não liga uma coisa à outra. */
.lgpd.aceito{background:rgba(var(--primaria-rgb),.06);border-color:var(--primaria)}
/* 24px é o mínimo de alvo de toque da WCAG 2.5.8 — e este checkbox
   especificamente é o que LIBERA o botão de doar: errar o toque nele é
   errar a doação. */
.lgpd input[type="checkbox"]{
    margin-top:1px;width:24px;height:24px;flex:none;
    accent-color:var(--primaria);cursor:pointer;
}
.lgpd .lgpd-txt{font-size:13.5px;line-height:1.6;color:var(--texto-2)}
.lgpd .lgpd-txt a{color:var(--primaria);font-weight:700;text-decoration:underline}
.lgpd .lgpd-txt a:hover{color:var(--primaria-hover)}

/* Botão travado. `cursor:not-allowed` e a opacidade dizem "ainda não", não
   "quebrado" — e a sombra colorida sai junto: um botão apagado que continua
   brilhando parece clicável e convida ao clique que não vai funcionar. */
.btn[disabled],.btn-doar[disabled],button[disabled]{
    opacity:.45;cursor:not-allowed;box-shadow:none;
    filter:grayscale(.35);
}
.btn[disabled]:hover,.btn-doar[disabled]:hover,button[disabled]:hover{
    transform:none;
}

/* Dentro do card de doação a caixa já está sobre fundo claro e a página é
   estreita: menos respiro em volta, para o botão não sair da primeira dobra. */
.card-doar .lgpd{margin-top:0;margin-bottom:16px;padding:14px 16px}
.card-doar .lgpd .lgpd-txt{font-size:12.5px}

/* ================================================== REVISTA — TOPO E ESTANTE */
.revista-topo{display:grid;grid-template-columns:280px 1fr;gap:52px;align-items:center}
.revista-meta{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:16px;
    font-size:13.5px;font-weight:600;color:var(--texto-4)}
.revista-meta span{display:flex;align-items:center;gap:7px}
.revista-meta i{color:var(--primaria);font-size:12px}

/* A estante. Os exemplares têm a mesma proporção de capa (3:4) mesmo quando a
   arte enviada não tem — `object-fit:cover` recorta em vez de deformar, porque
   uma capa esticada denuncia o site antes de qualquer outra coisa. */
.estante{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:28px}
.estante-item{text-decoration:none;display:block;transition:transform .2s}
.estante-item:hover{transform:translateY(-4px)}
.estante-item .capa{
    position:relative;aspect-ratio:3/4;border-radius:6px;overflow:hidden;
    background:var(--superficie-2);border:1px solid var(--borda);
    box-shadow:0 18px 34px -18px rgba(var(--navy-rgb),.5);transition:box-shadow .2s;
}
.estante-item:hover .capa{box-shadow:0 26px 44px -18px rgba(var(--navy-rgb),.6)}
.estante-item .capa img{width:100%;height:100%;object-fit:cover;display:block}
.estante-item .sem-capa{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    color:var(--texto-4);font-size:34px;
}
/* A lombada é o degradê na borda esquerda que faz o retângulo parecer um
   exemplar em vez de uma miniatura. */
.estante-item .lombada{
    position:absolute;left:0;top:0;bottom:0;width:9px;
    background:linear-gradient(90deg,rgba(0,0,0,.28),transparent);
}
.estante-item .t{margin-top:12px;font-size:14.5px;font-weight:700;color:var(--navy);line-height:1.3}
.estante-item .d{margin-top:3px;font-size:12.5px;color:var(--texto-4)}

/* ========================================================= REVISTA — FOLHEAR */
.folhear{margin-top:56px}
.folhear-convite{
    display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
    padding:54px 24px;background:var(--superficie-2);
    border:1px dashed var(--borda-2);border-radius:var(--raio-card-g);
}
.folhear-convite i{font-size:40px;color:var(--primaria);opacity:.8}
.folhear-convite b{font-size:18px;color:var(--navy)}
.folhear-convite span{font-size:14px;color:var(--texto-3)}
.folhear-convite .btn{margin-top:10px}
.folhear-erro{
    display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
    padding:48px 24px;background:var(--superficie-2);
    border:1px solid var(--borda-2);border-radius:var(--raio-card-g);
}
.folhear-erro i{font-size:36px;color:var(--texto-4)}
.folhear-erro b{font-size:17px;color:var(--navy)}
.folhear-erro span{font-size:14px;color:var(--texto-3);max-width:420px}

/* O PALCO. Fundo escuro de propósito: uma página branca sobre fundo branco não
   tem borda, e a revista deixa de parecer um objeto. `perspective` é o que dá
   profundidade à folha que gira — sem ela a rotação vira um achatamento. */
.folhear.ativo{
    background:var(--navy);border-radius:var(--raio-card-g);
    padding:28px 22px 18px;box-shadow:0 30px 60px -30px rgba(var(--navy-rgb),.6);
}
.fb-palco{
    position:relative;display:flex;justify-content:center;align-items:stretch;
    height:min(74vh,720px);perspective:2400px;outline:none;
}
.fb-palco:focus-visible{outline:2px solid var(--azul-claro);outline-offset:6px;border-radius:8px}
.fb-pag{
    width:50%;height:100%;display:flex;align-items:center;justify-content:center;
    background:#fff;overflow:hidden;
}
.fb-pag canvas{display:block;max-width:100%;max-height:100%}
.fb-pag.vazia{background:rgba(255,255,255,.06)}
.fb-esq{border-radius:4px 0 0 4px;box-shadow:inset -14px 0 22px -14px rgba(0,0,0,.45)}
.fb-dir{border-radius:0 4px 4px 0;box-shadow:inset 14px 0 22px -14px rgba(0,0,0,.45)}
/* Uma página só (celular): ela ocupa o palco inteiro e a segunda metade some. */
.fb-simples .fb-esq{width:100%;border-radius:4px;box-shadow:none}
.fb-simples .fb-dir{display:none}
.fb-simples.fb-desliza .fb-esq{opacity:.35;transition:opacity .16s}

/* A FOLHA QUE GIRA. Fica por cima das duas páginas, ancorada na dobra central;
   as duas faces são as duas páginas que o papel teria. `backface-visibility`
   é o que impede a frente de aparecer espelhada quando a folha passa dos 90°. */
.fb-folha{
    position:absolute;top:0;height:100%;width:50%;
    transform-style:preserve-3d;z-index:5;
}
.fb-ida{left:50%;transform-origin:left center;transform:rotateY(0deg)}
.fb-volta{left:0;transform-origin:right center;transform:rotateY(0deg)}
.fb-ida.fb-girando{transform:rotateY(-180deg);transition:transform .62s cubic-bezier(.42,0,.28,1)}
.fb-volta.fb-girando{transform:rotateY(180deg);transition:transform .62s cubic-bezier(.42,0,.28,1)}
.fb-face{
    position:absolute;inset:0;background:#fff;overflow:hidden;
    -webkit-backface-visibility:hidden;backface-visibility:hidden;
    display:flex;align-items:center;justify-content:center;
}
.fb-face canvas{display:block;max-width:100%;max-height:100%}
/* O verso nasce virado: é a mesma folha vista do outro lado. */
.fb-verso{transform:rotateY(180deg)}
.fb-ida .fb-frente{box-shadow:inset 14px 0 22px -14px rgba(0,0,0,.45)}
.fb-ida .fb-verso{box-shadow:inset -14px 0 22px -14px rgba(0,0,0,.45)}
.fb-volta .fb-frente{box-shadow:inset -14px 0 22px -14px rgba(0,0,0,.45)}
.fb-volta .fb-verso{box-shadow:inset 14px 0 22px -14px rgba(0,0,0,.45)}

.fb-carregando{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
@keyframes fbGira{to{transform:rotate(360deg)}}
.fb-spin{
    width:34px;height:34px;border-radius:50%;display:block;
    border:3px solid rgba(255,255,255,.22);border-top-color:var(--azul-claro);
    animation:fbGira .8s linear infinite;
}

.fb-barra{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px}
.fb-bt{
    width:40px;height:40px;border-radius:11px;border:1px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.06);color:#fff;cursor:pointer;font-size:14px;
    display:flex;align-items:center;justify-content:center;text-decoration:none;transition:.16s;
}
.fb-bt:hover{background:var(--primaria);border-color:var(--primaria)}
.fb-bt[disabled]{opacity:.3;cursor:not-allowed;filter:none}
.fb-bt[disabled]:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)}
.fb-conta{
    min-width:104px;text-align:center;color:rgba(255,255,255,.8);
    font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;
}
/* Em tela cheia o palco cresce e o fundo precisa cobrir a tela inteira, senão
   sobra o branco da página por baixo do leitor. */
.folhear:fullscreen{background:var(--navy);padding:24px;display:flex;
    flex-direction:column;justify-content:center;border-radius:0}
.folhear:fullscreen .fb-palco{height:88vh}

@media(max-width:900px){
    .revista-topo{grid-template-columns:1fr;gap:34px;justify-items:center;text-align:center}
    .revista-topo .card-revista{max-width:240px}
    .revista-meta{justify-content:center}
    .revista-topo > div:last-child > div[style*="flex"]{justify-content:center}
    .folhear.ativo{padding:16px 12px 12px}
    .fb-palco{height:min(64vh,560px);perspective:1600px}
    .estante{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:20px}
}

/* ========================================================= DÚVIDAS FREQUENTES */
/* O accordion é <details name="faq">: o agrupamento por `name` faz abrir um
   fechar os outros sem uma linha de JavaScript. Onde o navegador ainda não
   entende o atributo, os blocos simplesmente abrem de forma independente —
   menos elegante, nunca quebrado. */
.faq-lista{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{
    background:var(--superficie-2);border:1px solid var(--borda);
    border-radius:var(--raio-card);overflow:hidden;transition:border-color .18s,box-shadow .18s;
}
.faq-item[open]{border-color:var(--primaria);box-shadow:0 14px 34px -22px rgba(var(--navy-rgb),.5)}
.faq-item summary{
    display:flex;align-items:center;justify-content:space-between;gap:18px;
    padding:20px 24px;cursor:pointer;list-style:none;
    font-size:16.5px;font-weight:600;color:var(--navy);line-height:1.4;
}
/* O triângulo padrão sai nos dois motores — o Safari usa o pseudo-elemento
   -webkit, os demais usam `list-style`. Declarar só um deixa a seta dupla. */
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:''}
.faq-item summary:hover{color:var(--primaria-hover)}
.faq-item summary:focus-visible{outline:2px solid var(--primaria);outline-offset:-2px}

/* O sinal é desenhado com duas barras: a vertical some quando abre, virando um
   menos. Um caractere "+" mudaria de forma com a fonte carregada. */
.faq-item .sinal{
    position:relative;width:18px;height:18px;flex:none;
}
.faq-item .sinal::before,.faq-item .sinal::after{
    content:'';position:absolute;background:var(--primaria);border-radius:2px;
    transition:transform .22s ease,opacity .22s ease;
}
.faq-item .sinal::before{left:0;right:0;top:8px;height:2px}
.faq-item .sinal::after{top:0;bottom:0;left:8px;width:2px}
.faq-item[open] .sinal::after{transform:scaleY(0);opacity:0}

.faq-item .r{
    padding:0 24px 22px;font-size:15.5px;line-height:1.7;color:var(--texto-2);
    max-width:68ch;
}

/* O bloco de saída no fim da lista. */
.faq-ajuda{
    max-width:820px;margin:44px auto 0;padding:28px 32px;
    background:var(--superficie-2);border:1px solid var(--borda);
    border-radius:var(--raio-card-g);
    display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.faq-ajuda p{margin:0;font-size:15px;line-height:1.65;color:var(--texto-2);max-width:460px}
.faq-ajuda p a{color:var(--primaria);font-weight:700;text-decoration:none}
.faq-ajuda p a:hover{text-decoration:underline}

@media(max-width:640px){
    .faq-item summary{padding:16px 18px;font-size:15.5px}
    .faq-item .r{padding:0 18px 18px;font-size:15px}
    .faq-ajuda{padding:24px;flex-direction:column;align-items:flex-start}
}

/* =============================================== ÁREA DE TOQUE NO CELULAR */
@media(max-width:640px){
    /* As colunas do rodapé são uma LISTA de navegação, não links no meio de um
       texto: cada item precisa de alvo próprio. Com 18px de altura e 11px de
       vão, acertar um deles com o polegar é jogo de mira. O padding cresce o
       alvo para ~30px e o vão encolhe na mesma medida — o ritmo visual da
       coluna não muda, só a área que responde ao toque. */
    .rodape .col{gap:2px}
    .rodape .col a{padding:6px 0}
    /* Mesma razão para os links de "ver todos" das seções: são chamadas, e uma
       chamada de 21px de altura no celular é um alvo pequeno demais. */
    .link-ver,.painel .pe,.mega-pe{padding-top:10px;padding-bottom:10px}
}