@charset "UTF-8";
/* ==========================================================================
   SOS Casa da Criança — estilo.css
   Carregado DEPOIS do bootstrap.min.css: o que está aqui vence.

   O tom desta folha é sóbrio de propósito. A entidade acolhe crianças e
   adolescentes por determinação judicial; o site precisa passar seriedade e
   cuidado, não entusiasmo publicitário. Por isso: nenhum gradiente decorativo,
   sombra sempre discreta, movimento só quando ajuda a entender a interface.
   O que carrega o visual é espaço em branco, hierarquia de texto e a alternância
   de fundo entre seções.

   Índice
   1. Fonte
   2. Tokens (:root)
   3. Bootstrap — sobrescrita de variáveis
   4. Reset leve
   5. Base
   6. Utilitários de layout
   7. Componentes
   8. Acessibilidade e impressão
   ========================================================================== */

/* ==========================================================================
   1. Fonte
   Inter variável, servida do nosso servidor. Sem Google Fonts em runtime:
   a fonte não pode depender de terceiro nem entregar IP de visitante a ninguém.
   Licença em assets/fonts/OFL-Inter.txt.
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;           /* arquivo variável: um só para todos os pesos */
    font-display: swap;             /* o texto aparece na hora, na fonte de sistema */
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. Tokens
   ========================================================================== */

:root {
    /* Cores da marca — tiradas do logo. */
    --laranja: #F48000;             /* fundo e detalhe; 2,65:1 sobre branco, nunca em texto */
    --laranja-escuro: #D96E00;      /* borda e ícone; 3,40:1 sobre branco — passa como elemento, não como texto */
    --laranja-texto: #A65200;       /* o laranja que pode ser lido: 5,49:1 sobre branco, 5,13:1 sobre areia.
                                       É também o fundo de todo botão sólido com rótulo branco (5,49:1) */
    --laranja-texto-escuro: #8A4400;/* hover desse botão: branco sobre ele dá 7,22:1 */
    --laranja-claro: #FFF1E0;
    --azul: #004B98;
    --azul-escuro: #003569;
    --azul-claro: #EAF2FB;

    /* Neutros */
    --areia: #FAF7F2;
    --branco: #FFFFFF;
    --texto: #1F2933;
    --texto-suave: #5B6B7C;
    --borda: #E5E9EF;

    /* Estados */
    --sucesso: #1D7A3C;
    --sucesso-claro: #E8F5EC;
    --erro: #B3261E;
    --erro-claro: #FCEBEA;
    --aviso: #8A5A00;
    --aviso-claro: #FFF6E5;

    /* Forma */
    --raio: 16px;
    --raio-grande: 28px;
    --raio-pilula: 999px;
    --sombra: 0 4px 24px rgba(0, 0, 0, .06);
    --sombra-forte: 0 12px 40px rgba(0, 0, 0, .12);
    --container: 1200px;

    /* Tipografia fluida: cresce com a tela, sem media query.
       O mínimo do clamp é o tamanho no celular de 360px. */
    --fs-1: .875rem;                                        /* apoio, legenda, rótulo */
    --fs-2: 1rem;                                           /* corpo */
    --fs-3: clamp(1.0625rem, .35vw + 1rem, 1.25rem);        /* texto de abertura */
    --fs-4: clamp(1.25rem, .9vw + 1.05rem, 1.625rem);       /* h3, título de card */
    --fs-5: clamp(1.625rem, 1.9vw + 1.1rem, 2.375rem);      /* h2, título de seção */
    --fs-6: clamp(2rem, 3.6vw + 1.1rem, 3.25rem);           /* h1, chamada do banner */

    --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --altura-linha: 1.65;

    /* Espaçamento — escala 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 */
    --esp-1: .25rem;
    --esp-2: .5rem;
    --esp-3: 1rem;
    --esp-4: 1.5rem;
    --esp-5: 2rem;
    --esp-6: 3rem;
    --esp-7: 4rem;
    --esp-8: 6rem;

    /* Respiro vertical das seções: é o que dá o ar de site institucional. */
    --secao-y: clamp(3rem, 7vw, 6rem);

    --transicao: 160ms ease;
}

/* ==========================================================================
   3. Bootstrap — sobrescrita de variáveis
   O arquivo do Bootstrap não é editado. Trocamos só os valores que ele expõe.
   ========================================================================== */

:root {
    --bs-primary: var(--azul);
    --bs-primary-rgb: 0, 75, 152;
    --bs-secondary: var(--laranja);
    --bs-secondary-rgb: 244, 128, 0;
    --bs-body-color: var(--texto);
    --bs-body-color-rgb: 31, 41, 51;
    --bs-body-bg: var(--branco);
    --bs-body-font-family: var(--fonte);
    --bs-body-font-size: var(--fs-2);
    --bs-body-line-height: var(--altura-linha);
    --bs-link-color: var(--azul);
    --bs-link-color-rgb: 0, 75, 152;
    --bs-link-hover-color: var(--azul-escuro);
    --bs-border-color: var(--borda);
    --bs-border-radius: var(--raio);
    --bs-border-radius-lg: var(--raio-grande);
    --bs-focus-ring-color: rgba(244, 128, 0, .35);
    --bs-emphasis-color: var(--azul-escuro);
}

/* Os botões do Bootstrap seguem variáveis próprias; sem isto, .btn-primary
   continuaria azul-Bootstrap mesmo com --bs-primary trocado. */
.btn-primary {
    --bs-btn-bg: var(--azul);
    --bs-btn-border-color: var(--azul);
    --bs-btn-hover-bg: var(--azul-escuro);
    --bs-btn-hover-border-color: var(--azul-escuro);
    --bs-btn-active-bg: var(--azul-escuro);
    --bs-btn-active-border-color: var(--azul-escuro);
    --bs-btn-disabled-bg: var(--azul);
    --bs-btn-disabled-border-color: var(--azul);
}

/* Mesma regra do .botao: fundo sólido com rótulo branco usa --laranja-texto. */
.btn-secondary {
    --bs-btn-bg: var(--laranja-texto);
    --bs-btn-color: var(--branco);
    --bs-btn-border-color: var(--laranja-texto);
    --bs-btn-hover-bg: var(--laranja-texto-escuro);
    --bs-btn-hover-border-color: var(--laranja-texto-escuro);
    --bs-btn-active-bg: var(--laranja-texto-escuro);
    --bs-btn-active-border-color: var(--laranja-texto-escuro);
}

/* ==========================================================================
   4. Reset leve
   Só o que o Bootstrap não resolve ou resolve diferente do que queremos.
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
picture,
video,
svg {
    max-width: 100%;
    height: auto;
}

ul[class],
ol[class] {
    list-style: none;
    margin: 0;
    padding: 0;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

/* ==========================================================================
   5. Base
   ========================================================================== */

html {
    scroll-behavior: smooth;
    /* Âncora não pode parar embaixo do cabeçalho fixo. */
    scroll-padding-top: 6rem;
}

body {
    margin: 0;
    background-color: var(--branco);
    color: var(--texto);
    font-family: var(--fonte);
    font-size: var(--fs-2);
    line-height: var(--altura-linha);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--esp-3);
    color: var(--azul-escuro);
    font-weight: 700;
    line-height: 1.2;
    text-wrap: balance;             /* evita título com uma palavra sozinha na 2ª linha */
}

h1 { font-size: var(--fs-6); letter-spacing: -.02em; }
h2 { font-size: var(--fs-5); letter-spacing: -.015em; }
h3 { font-size: var(--fs-4); }
h4 { font-size: var(--fs-3); }
h5, h6 { font-size: var(--fs-2); text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); }

p {
    margin: 0 0 var(--esp-3);
    /* Linha longa demais cansa; 68ch é o limite confortável de leitura. */
    max-width: 68ch;
}

a {
    color: var(--azul);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    transition: color var(--transicao);
}

a:hover {
    color: var(--azul-escuro);
}

strong, b { font-weight: 600; }

hr {
    height: 1px;
    margin: var(--esp-6) 0;
    border: 0;
    background: var(--borda);
    opacity: 1;
}

blockquote {
    margin: var(--esp-5) 0;
    padding-left: var(--esp-4);
    border-left: 3px solid var(--laranja);
    color: var(--texto-suave);
    font-size: var(--fs-3);
}

/* Foco visível em laranja: contrasta com o azul da marca e nunca some.
   Nada de outline: none em lugar nenhum desta folha. */
:focus-visible {
    outline: 3px solid var(--laranja);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection {
    background: var(--laranja-claro);
    color: var(--azul-escuro);
}

/* ==========================================================================
   6. Utilitários de layout
   ========================================================================== */

.container-sos {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--esp-3);
}

@media (min-width: 768px) {
    .container-sos { padding-inline: var(--esp-4); }
}

/* Seção larga. A alternância de fundo entre seções é o ritmo do site:
   branco → areia → branco → azul, sem duas iguais em sequência. */
.secao {
    padding-block: var(--secao-y);
    background-color: var(--branco);
}

.secao--areia { background-color: var(--areia); }
.secao--azul-claro { background-color: var(--azul-claro); }

.secao--azul {
    background-color: var(--azul);
    color: var(--branco);
}

/* Sobre laranja o texto é ESCURO, não branco: branco sobre #F48000 mede
   2,65:1 e reprova até em texto grande. Azul escuro sobre laranja dá 4,63:1 e
   o cinza-azulado do corpo, 5,57:1 — os dois passam em AA. */
.secao--laranja {
    background-color: var(--laranja);
    color: var(--texto);
}

.secao--azul h1, .secao--azul h2, .secao--azul h3, .secao--azul h4 {
    color: var(--branco);
}

.secao--laranja h1, .secao--laranja h2, .secao--laranja h3, .secao--laranja h4 {
    color: var(--azul-escuro);
}

.secao--azul a:not(.botao) {
    color: var(--branco);
    text-decoration: underline;
}

.secao--laranja a:not(.botao) {
    color: var(--azul-escuro);
    text-decoration: underline;
}

.secao--compacta { padding-block: clamp(2rem, 4vw, 3rem); }

/* Título de seção com um traço curto acima — o único "enfeite" da folha. */
.titulo-secao {
    margin-bottom: var(--esp-5);
}

.titulo-secao__rotulo {
    display: block;
    margin-bottom: var(--esp-2);
    color: var(--laranja-texto);
    font-size: var(--fs-1);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.titulo-secao__titulo {
    margin-bottom: var(--esp-3);
}

.titulo-secao__titulo::after {
    content: '';
    display: block;
    width: 56px;
    height: 4px;
    margin-top: var(--esp-3);
    border-radius: var(--raio-pilula);
    background: var(--laranja);
}

.titulo-secao__texto {
    max-width: 60ch;
    color: var(--texto-suave);
    font-size: var(--fs-3);
}

.secao--azul .titulo-secao__rotulo { color: rgba(255, 255, 255, .85); }
.secao--azul .titulo-secao__texto { color: rgba(255, 255, 255, .9); }

.secao--laranja .titulo-secao__rotulo { color: var(--azul-escuro); }
.secao--laranja .titulo-secao__texto { color: var(--texto); }
.secao--laranja .titulo-secao__titulo::after { background: var(--azul-escuro); }

.titulo-secao--centro {
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
}

.titulo-secao--centro .titulo-secao__titulo::after { margin-inline: auto; }
.titulo-secao--centro .titulo-secao__texto { margin-inline: auto; }

/* Grade simples, sem depender do grid do Bootstrap em blocos nossos. */
.grade {
    display: grid;
    gap: var(--esp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.grade--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.grade--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* Foto com máscara arredondada, proporção fixa e sem distorção. */
.foto-arredondada {
    display: block;
    width: 100%;
    border-radius: var(--raio-grande);
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background-color: var(--areia);
}

.foto-arredondada--retrato { aspect-ratio: 3 / 4; }
.foto-arredondada--larga { aspect-ratio: 16 / 9; }

.espaco-acima { margin-top: var(--esp-7); }
.espaco-abaixo { margin-bottom: var(--esp-6); }
.texto-apoio { color: var(--texto-suave); font-size: var(--fs-1); }
.texto-abertura { max-width: 62ch; color: var(--texto-suave); font-size: var(--fs-3); }
.sem-margem-final > *:last-child { margin-bottom: 0; }

/* Campo isca dos formulários (honeypot). Fica fora da tela em vez de
   display:none — robô costuma ignorar campo escondido por display. */
.campo-oculto {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Só para leitor de tela. */
.apenas-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Primeiro elemento focável da página: pula o menu inteiro. */
.pular-conteudo {
    position: absolute;
    left: var(--esp-3);
    top: -100px;
    z-index: 1100;
    /* Alvo de toque de 44px (§7 do CLAUDE.md). O padding sozinho dava 42px —
       medido em 30/08/2026 na revisão do Prompt 16. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--esp-2) var(--esp-4);
    background: var(--azul);
    color: var(--branco);
    border-radius: 0 0 var(--raio) var(--raio);
    text-decoration: none;
    transition: top var(--transicao);
}

.pular-conteudo:focus {
    top: 0;
    color: var(--branco);
}

/* ==========================================================================
   7. Componentes
   ========================================================================== */

/* --- Botão ---------------------------------------------------------------
   Altura mínima de 44px em todas as variações: é o alvo de toque confortável
   no celular, e o padrão de acessibilidade que adotamos. */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2);
    min-height: 44px;
    padding: .7rem 1.6rem;
    border: 2px solid transparent;
    border-radius: var(--raio-pilula);
    /* Fundo --laranja-texto, não --laranja: botão sólido tem rótulo branco, e
       branco sobre #F48000 mede 2,65:1. Aqui são 5,49:1. O laranja da marca
       continua sendo área, traço, ícone e detalhe — não fundo de texto. */
    background: var(--laranja-texto);
    color: var(--branco);
    font-size: var(--fs-2);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transicao), border-color var(--transicao), color var(--transicao);
}

.botao:hover {
    background: var(--laranja-texto-escuro);
    color: var(--branco);
}

.botao--primario { background: var(--laranja-texto); border-color: var(--laranja-texto); }
.botao--primario:hover { background: var(--laranja-texto-escuro); border-color: var(--laranja-texto-escuro); }

.botao--secundario { background: var(--azul); border-color: var(--azul); }
.botao--secundario:hover { background: var(--azul-escuro); border-color: var(--azul-escuro); }

.botao--fantasma {
    background: transparent;
    border-color: var(--azul);
    color: var(--azul);
}

.botao--fantasma:hover {
    background: var(--azul);
    color: var(--branco);
}

.botao--grande {
    min-height: 52px;
    padding: .95rem 2.2rem;
    font-size: var(--fs-3);
}

.botao--bloco { display: flex; width: 100%; }

.botao[disabled],
.botao[aria-disabled='true'] {
    opacity: .55;
    cursor: not-allowed;
}

/* Em fundo colorido, o botão fantasma inverte. */
.secao--azul .botao--fantasma {
    border-color: var(--branco);
    color: var(--branco);
}

.secao--azul .botao--fantasma:hover { background: var(--branco); color: var(--azul); }

.secao--laranja .botao--fantasma {
    border-color: var(--azul-escuro);
    color: var(--azul-escuro);
}

.secao--laranja .botao--fantasma:hover { background: var(--azul-escuro); color: var(--branco); }

.grupo-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-3);
}

.grupo-botoes--centro { justify-content: center; }

/* --- Card de notícia ---------------------------------------------------- */

.card-noticia {
    position: relative;             /* âncora do link que cobre o card inteiro */
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio-grande);
    transition: border-color var(--transicao), transform var(--transicao);
}

.card-noticia:hover {
    border-color: var(--azul-claro);
    transform: translateY(-2px);    /* movimento mínimo, só para confirmar o alvo */
}

.card-noticia__figura {
    margin: 0;
    background: var(--areia);
}

.card-noticia__imagem {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.card-noticia__corpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: var(--esp-4);
}

.card-noticia__data {
    margin-bottom: var(--esp-2);
    color: var(--laranja-texto);
    font-size: var(--fs-1);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.card-noticia__titulo {
    margin-bottom: var(--esp-2);
    font-size: var(--fs-4);
    line-height: 1.25;
}

.card-noticia__titulo a {
    color: inherit;
    text-decoration: none;
}

/* O link do título cobre o card inteiro: o card todo vira alvo de clique,
   mas continua sendo um link só na navegação por teclado e leitor de tela. */
.card-noticia__titulo a::after {
    content: '';
    position: absolute;
    inset: 0;
}

.card-noticia__titulo a:hover { color: var(--azul); }

.card-noticia__resumo {
    margin-bottom: var(--esp-3);
    color: var(--texto-suave);
    max-width: none;
}

.card-noticia__rodape {
    margin-top: auto;
    color: var(--azul);
    font-size: var(--fs-1);
    font-weight: 600;
}

/* --- Card de projeto / serviço ------------------------------------------ */

.card-projeto {
    height: 100%;
    padding: var(--esp-5);
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio-grande);
}

.card-projeto__icone {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--esp-4);
    border-radius: var(--raio);
    background: var(--laranja-claro);
    color: var(--laranja-escuro);
}

.card-projeto__icone svg { width: 28px; height: 28px; }

.card-projeto__titulo { font-size: var(--fs-4); }

.card-projeto__texto {
    margin-bottom: 0;
    color: var(--texto-suave);
    max-width: none;
}

.secao--areia .card-projeto { border-color: transparent; box-shadow: var(--sombra); }

/* --- Número de impacto -------------------------------------------------- */

.numero-impacto { text-align: center; }

.numero-impacto__valor {
    display: block;
    color: var(--laranja);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.numero-impacto__rotulo {
    display: block;
    margin-top: var(--esp-2);
    font-weight: 600;
}

.numero-impacto__descricao {
    margin-top: var(--esp-1);
    margin-bottom: 0;
    color: var(--texto-suave);
    font-size: var(--fs-1);
    max-width: none;
}

.secao--azul .numero-impacto__valor { color: var(--branco); }
.secao--azul .numero-impacto__descricao { color: rgba(255, 255, 255, .8); }

/* --- Depoimento --------------------------------------------------------- */

.depoimento {
    height: 100%;
    padding: var(--esp-5);
    background: var(--branco);
    border-radius: var(--raio-grande);
    box-shadow: var(--sombra);
}

.depoimento__texto {
    margin-bottom: var(--esp-4);
    color: var(--texto);
    font-size: var(--fs-3);
    line-height: 1.55;
    max-width: none;
}

.depoimento__texto::before {
    content: '“';
    display: block;
    margin-bottom: -.35em;
    color: var(--laranja);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.depoimento__autoria {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
}

.depoimento__foto {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--areia);
    flex-shrink: 0;
}

.depoimento__nome { display: block; font-weight: 600; }
.depoimento__papel { display: block; color: var(--texto-suave); font-size: var(--fs-1); }

/* --- Logo de parceiro ---------------------------------------------------
   Sem filtro cinza: apagar a marca de quem apoia a entidade é desrespeitoso. */

.logo-parceiro {
    display: grid;
    place-items: center;
    min-height: 110px;
    padding: var(--esp-4);
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}

.logo-parceiro img {
    max-height: 64px;
    width: auto;
    object-fit: contain;
}

/* --- Faixa de chamada (CTA) --------------------------------------------- */

.faixa-cta {
    padding: clamp(2rem, 5vw, 3.5rem);
    background: var(--azul);
    border-radius: var(--raio-grande);
    color: var(--branco);
    text-align: center;
}

/* Mesma regra da .secao--laranja: sobre laranja, texto escuro. */
.faixa-cta--laranja { background: var(--laranja); color: var(--texto); }
.faixa-cta--laranja .faixa-cta__titulo { color: var(--azul-escuro); }
.faixa-cta--laranja .faixa-cta__texto { color: var(--texto); }

.faixa-cta__titulo {
    max-width: 24ch;
    margin-inline: auto;
    color: var(--branco);
}

.faixa-cta__texto {
    max-width: 56ch;
    margin-inline: auto;
    margin-bottom: var(--esp-5);
    color: rgba(255, 255, 255, .9);
    font-size: var(--fs-3);
}

.faixa-cta .grupo-botoes { justify-content: center; }

/* Todo bloco de fundo escuro precisa inverter o botão fantasma — sem isto ele
   fica azul sobre azul, invisível. A lista vale para a faixa de chamada e para
   o hero da home, que têm fundo próprio e não são .secao--azul. */
.faixa-cta .botao--fantasma,
.hero .botao--fantasma { border-color: var(--branco); color: var(--branco); }

.faixa-cta .botao--fantasma:hover,
.hero .botao--fantasma:hover { background: var(--branco); color: var(--azul); }

.faixa-cta--laranja .botao--fantasma { border-color: var(--azul-escuro); color: var(--azul-escuro); }
.faixa-cta--laranja .botao--fantasma:hover { background: var(--azul-escuro); color: var(--branco); }

/* --- Trilha de navegação ------------------------------------------------ */

.breadcrumb-sos {
    padding-block: var(--esp-4);
    background: var(--areia);
    font-size: var(--fs-1);
}

.breadcrumb-sos ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb-sos li + li::before {
    content: '/';
    margin-right: var(--esp-2);
    color: var(--texto-suave);
}

.breadcrumb-sos a { color: var(--texto-suave); text-decoration: none; }
.breadcrumb-sos a:hover { color: var(--azul); text-decoration: underline; }
.breadcrumb-sos [aria-current='page'] { color: var(--texto); font-weight: 600; }

/* --- Formulário --------------------------------------------------------- */

.form-sos__campo { margin-bottom: var(--esp-4); }

.form-sos__rotulo {
    display: block;
    margin-bottom: var(--esp-2);
    font-weight: 600;
}

.form-sos__obrigatorio {
    color: var(--erro);
    margin-left: .15em;
}

.form-sos__ajuda {
    display: block;
    margin-top: var(--esp-2);
    color: var(--texto-suave);
    font-size: var(--fs-1);
}

.form-sos__controle {
    width: 100%;
    min-height: 48px;
    padding: .7rem 1rem;
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    color: var(--texto);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

.form-sos__controle::placeholder { color: #97A3B0; }

.form-sos__controle:hover { border-color: #C9D3DF; }

.form-sos__controle:focus {
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(0, 75, 152, .12);
    outline: none;                  /* substituído pelo anel acima, com contraste */
}

.form-sos__controle:focus-visible {
    outline: 3px solid var(--laranja);
    outline-offset: 1px;
}

textarea.form-sos__controle { min-height: 9rem; resize: vertical; }

select.form-sos__controle {
    /* Seta desenhada em SVG embutido: nenhuma requisição extra. */
    appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%235B6B7C' d='M8 11 3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

.form-sos__controle[aria-invalid='true'] {
    border-color: var(--erro);
}

.form-sos__erro {
    display: block;
    margin-top: var(--esp-2);
    color: var(--erro);
    font-size: var(--fs-1);
    font-weight: 600;
}

.form-sos__marcador {
    display: flex;
    align-items: flex-start;
    gap: var(--esp-3);
    margin-bottom: var(--esp-3);
}

.form-sos__marcador input[type='checkbox'],
.form-sos__marcador input[type='radio'] {
    width: 22px;
    height: 22px;
    margin-top: .15rem;
    accent-color: var(--azul);
    flex-shrink: 0;
}

.form-sos__linha {
    display: grid;
    gap: var(--esp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

/* --- Alerta ------------------------------------------------------------- */

.alerta {
    display: flex;
    gap: var(--esp-3);
    padding: var(--esp-4);
    border: 1px solid transparent;
    border-left-width: 5px;
    border-radius: var(--raio);
    margin-bottom: var(--esp-4);
}

.alerta p:last-child { margin-bottom: 0; }
.alerta__titulo { margin-bottom: var(--esp-1); font-weight: 700; }
/* Quando o título do alerta é um heading de verdade, ele herdaria o corpo
   de h2 da página e ficaria maior que o aviso inteiro. */
h2.alerta__titulo, h3.alerta__titulo { font-size: var(--fs-3); }

.alerta--sucesso {
    background: var(--sucesso-claro);
    border-color: var(--sucesso);
    color: #14522A;
}

.alerta--erro {
    background: var(--erro-claro);
    border-color: var(--erro);
    color: #7F1B15;
}

.alerta--aviso {
    background: var(--aviso-claro);
    border-color: var(--aviso);
    color: #6B4600;
}

.alerta--info {
    background: var(--azul-claro);
    border-color: var(--azul);
    color: var(--azul-escuro);
}

/* --- Botões flutuantes --------------------------------------------------- */

.whatsapp-flutuante {
    position: fixed;
    right: var(--esp-3);
    bottom: var(--esp-3);
    z-index: 1030;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #1EA855;            /* verde do WhatsApp: a marca é deles */
    color: var(--branco);
    box-shadow: var(--sombra-forte);
    transition: background-color var(--transicao);
}

.whatsapp-flutuante:hover { background: #17853F; color: var(--branco); }
.whatsapp-flutuante svg { width: 28px; height: 28px; fill: currentColor; }

.voltar-topo {
    position: fixed;
    right: var(--esp-3);
    bottom: calc(var(--esp-3) + 68px);
    z-index: 1030;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--borda);
    border-radius: 50%;
    background: var(--branco);
    color: var(--azul);
    box-shadow: var(--sombra);
    cursor: pointer;
    /* Nasce escondido; o site.js liga quando a página rola. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}

.voltar-topo.esta-visivel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.voltar-topo:hover { background: var(--azul); color: var(--branco); border-color: var(--azul); }
.voltar-topo svg { width: 22px; height: 22px; }

@media (min-width: 992px) {
    .whatsapp-flutuante { right: var(--esp-5); bottom: var(--esp-5); }
    .voltar-topo { right: var(--esp-5); bottom: calc(var(--esp-5) + 68px); }
}

/* --- Cabeçalho -----------------------------------------------------------
   As classes que o site.js manipula. A marcação vem no Prompt 4; aqui fica só
   o comportamento visual, para o JS não apontar para o vazio. */

.cabecalho {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: var(--branco);
    border-bottom: 1px solid var(--borda);
    transition: box-shadow var(--transicao), padding var(--transicao);
}

.cabecalho__interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-4);
    padding-block: var(--esp-3);
    transition: padding var(--transicao);
}

/*
 * 92px em repouso, 60px depois de rolar (02/09/2026, a pedido, em três
 * passos: 60 -> 72 -> 80 -> 92, olhando a tela entre um e outro).
 *
 * Cabia crescer porque o arquivo cresceu junto: o logo passou a ter 320px de
 * largura real, vindo de um original de 3000px, então mesmo a 92px numa tela
 * de 3x ele ainda está REDUZINDO (276px pedidos para 320 disponíveis). Com o
 * PNG de 160px que havia antes, este tamanho estaria ampliando 1,7x.
 *
 * OS DOIS ESTADOS SE SEPARARAM, e é o que paga o tamanho novo. Antes o estado
 * reduzido acompanhava a proporção do outro; a partir dos 80px isso passou a
 * custar caro no lugar errado, porque quem fica grudado no topo durante toda
 * a leitura é o estado REDUZIDO, não o de repouso. Então o de repouso cresceu
 * (o cabeçalho vai a 125px, e ele só aparece no alto da página, junto com o
 * hero) e o reduzido ficou em 60px, que dá 77px de barra — 4px a mais do que
 * os 73px de antes de hoje. Na prática o logo ficou 53% maior na abertura e a
 * barra que acompanha a rolagem quase não mudou.
 *
 * O que NÃO se resolve crescendo: o subtítulo "Dr. José Costa Monteiro" só
 * fica legível lá pelos 140px de altura, o que pediria um cabeçalho de 172px.
 * Quem tem de mostrá-lo é o rodapé, onde não atrapalha ninguém.
 */
.cabecalho__logo img {
    height: 92px;
    width: auto;
    transition: height var(--transicao);
}

/* Estado aplicado pelo site.js depois de rolar a página. */
.cabecalho--reduzido { box-shadow: var(--sombra); }
.cabecalho--reduzido .cabecalho__interno { padding-block: var(--esp-2); }
.cabecalho--reduzido .cabecalho__logo img { height: 60px; }  /* de propósito NÃO acompanha o de repouso — ver acima */

/* --- Barra superior -----------------------------------------------------
   Faixa fina com contato. Some no celular: lá o contato fica no menu e no
   botão flutuante do WhatsApp, e a tela não sobra para uma faixa a mais. */

.barra-topo {
    display: none;
    background: var(--azul-escuro);
    color: var(--branco);
    font-size: var(--fs-1);
}

@media (min-width: 992px) {
    .barra-topo { display: block; }
}

.barra-topo__interno {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--esp-4);
    min-height: 40px;
}

.barra-topo__contatos,
.barra-topo__redes {
    display: flex;
    align-items: center;
    gap: var(--esp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.barra-topo__redes { gap: var(--esp-2); }

.barra-topo a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #EAF2FB;                 /* 10,85:1 sobre o azul escuro */
    text-decoration: none;
}

.barra-topo a:hover { color: var(--branco); text-decoration: underline; }
.barra-topo svg { width: 16px; height: 16px; flex-shrink: 0; }

.barra-topo__redes a {
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
}

.barra-topo__redes a:hover { background: rgba(255, 255, 255, .24); }

/* --- Menu principal ----------------------------------------------------- */

.menu-principal {
    display: flex;
    align-items: center;
    gap: var(--esp-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-principal__link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 44px;
    padding: .5rem .75rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--texto);
    font-size: var(--fs-2);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transicao), color var(--transicao);
}

.menu-principal__link:hover,
.menu-principal__link[aria-expanded="true"] {
    background: var(--azul-claro);
    color: var(--azul-escuro);
}

/* Item da página aberta: cor + traço. Só cor não basta — quem não distingue
   as duas cores precisa do traço para saber onde está. */
.menu-principal__link.active {
    position: relative;
    color: var(--azul);
}

.menu-principal__link.active::after {
    content: "";
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: .25rem;
    height: 3px;
    border-radius: var(--raio-pilula);
    background: var(--laranja);
}

/* Botão de ação da navbar (Como Ajudar). Fundo --laranja-texto com rótulo
   branco: 5,49:1. Hover 7,22:1. */
.menu-principal__destaque {
    margin-left: var(--esp-2);
    padding: .6rem 1.2rem;
    border-radius: var(--raio-pilula);
    background: var(--laranja-texto);
    color: var(--branco);
}

.menu-principal__destaque:hover,
.menu-principal__destaque[aria-expanded="true"] {
    background: var(--laranja-texto-escuro);
    color: var(--branco);
}

.menu-principal__destaque.active { color: var(--branco); }
.menu-principal__destaque.active::after { background: var(--branco); }

.menu-principal .seta { width: 12px; height: 12px; flex-shrink: 0; }

/* Submenu — restilo do dropdown do Bootstrap, sem tocar no arquivo dele. */
.menu-principal .dropdown-menu {
    --bs-dropdown-min-width: 15rem;
    --bs-dropdown-padding-y: .5rem;
    --bs-dropdown-padding-x: .5rem;
    --bs-dropdown-border-color: var(--borda);
    --bs-dropdown-border-radius: var(--raio);
    --bs-dropdown-link-color: var(--texto);
    --bs-dropdown-link-hover-bg: var(--azul-claro);
    --bs-dropdown-link-hover-color: var(--azul-escuro);
    --bs-dropdown-link-active-bg: var(--azul-claro);
    --bs-dropdown-link-active-color: var(--azul-escuro);
    box-shadow: var(--sombra);
    margin-top: .35rem;
}

.menu-principal .dropdown-item {
    display: flex;
    align-items: center;
    min-height: 44px;
    border-radius: 10px;
    font-weight: 500;
}

.menu-principal .dropdown-item.active { font-weight: 700; }

/* Botão que abre o menu no celular. */
.abrir-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: var(--branco);
    color: var(--azul-escuro);
    cursor: pointer;
}

.abrir-menu:hover { background: var(--azul-claro); }
.abrir-menu svg { width: 24px; height: 24px; }

@media (min-width: 992px) {
    .abrir-menu { display: none; }
}

/* --- Menu lateral do celular (offcanvas do Bootstrap) -------------------- */

.menu-lateral {
    --bs-offcanvas-width: min(20rem, 88vw);
    --bs-offcanvas-padding-x: var(--esp-4);
    --bs-offcanvas-padding-y: var(--esp-4);
}

.menu-lateral .offcanvas-header { border-bottom: 1px solid var(--borda); }

.menu-lateral .menu-principal {
    flex-direction: column;
    align-items: stretch;
    gap: var(--esp-1);
}

.menu-lateral .menu-principal__link {
    width: 100%;
    justify-content: space-between;
    padding: .75rem;
    font-size: var(--fs-3);
}

.menu-lateral .menu-principal__link.active::after { left: .75rem; right: auto; width: 28px; }

.menu-lateral .menu-principal__destaque {
    margin: var(--esp-3) 0 0;
    justify-content: center;
}

.menu-lateral .menu-principal__destaque.active::after { display: none; }

/* No celular o submenu fica sempre aberto, recuado: abrir dropdown dentro de
   gaveta é um toque a mais para chegar no mesmo lugar. */
.menu-lateral .dropdown-menu {
    position: static !important;
    display: block;
    width: 100%;
    margin: 0 0 var(--esp-2);
    padding-left: var(--esp-3);
    border: 0;
    border-left: 2px solid var(--borda);
    border-radius: 0;
    box-shadow: none;
    transform: none !important;
}

.menu-lateral__contato {
    margin-top: var(--esp-5);
    padding-top: var(--esp-4);
    border-top: 1px solid var(--borda);
    font-size: var(--fs-1);
}

.menu-lateral__contato a { display: block; padding: .35rem 0; color: var(--azul); text-decoration: none; }
.menu-lateral__contato a:hover { text-decoration: underline; }

/* --- Hero das páginas internas ------------------------------------------ */

.hero-interno {
    padding-block: clamp(2rem, 5vw, 3.5rem);
    background: var(--azul);
    color: var(--branco);
}

.hero-interno__titulo {
    margin-bottom: 0;
    color: var(--branco);
}

.hero-interno__texto {
    max-width: 60ch;
    margin-top: var(--esp-3);
    margin-bottom: 0;
    color: rgba(255, 255, 255, .9);
    font-size: var(--fs-3);
}

/* A trilha dentro do hero perde o fundo areia e clareia os links. */
.hero-interno .breadcrumb-sos {
    padding: 0 0 var(--esp-3);
    background: transparent;
}

.hero-interno .breadcrumb-sos a { color: rgba(255, 255, 255, .85); }
.hero-interno .breadcrumb-sos a:hover { color: var(--branco); }
.hero-interno .breadcrumb-sos li + li::before { color: rgba(255, 255, 255, .6); }
.hero-interno .breadcrumb-sos [aria-current="page"] { color: var(--branco); }

/* Link dentro do texto do hero: sem esta regra ele fica azul sobre azul e
   some — foi o que aconteceu com o "contato" da página de downloads. Vale
   para qualquer página, porque a próxima que puser um link ali vai herdar o
   mesmo defeito. Sublinhado sempre: sobre fundo colorido, cor sozinha não
   distingue link de texto. */
.hero-interno__texto a {
    color: var(--branco);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.hero-interno__texto a:hover,
.hero-interno__texto a:focus-visible { text-decoration-thickness: 2px; }

/* --- Rodapé ------------------------------------------------------------- */

.rodape {
    padding-top: var(--secao-y);
    background: var(--azul-escuro);
    color: #C7D6E6;                 /* 8,28:1 sobre o fundo */
}

/*
 * São TRÊS colunas — identidade, Como ajudar, Contato — e o número delas é
 * DECLARADO em vez de calculado.
 *
 * O `auto-fit` que estava aqui caía em três colunas entre 62rem e 75rem com a
 * última sozinha numa segunda fila: medido, 879px de rodapé a 1024px contra
 * 809 a 768px — mais alto na tela maior. Grade de conteúdo fixo e conhecido
 * não precisa adivinhar quantas cabem.
 *
 * As larguras não são iguais, e a razão é o conteúdo de cada uma:
 *   - a identidade leva a maior porque é a única com texto corrido;
 *   - "Como ajudar" leva a menor porque o rótulo mais longo ("Sócio
 *     Contribuinte") pede 139px e o resto seria vão;
 *   - Contato precisa passar de 307px, que é o que telefone e WhatsApp medem
 *     lado a lado — abaixo disso o par quebra em duas linhas.
 * Em três colunas iguais sobrava um terço da largura sem uso à direita.
 */
.rodape__grade {
    display: grid;
    /* Linha menor que coluna: quando as três empilham no celular, o vão de
       3rem entre elas somava mais de 100px de rodapé sem conteúdo nenhum. */
    gap: var(--esp-5) var(--esp-6);
    grid-template-columns: 1fr;
    padding-bottom: var(--esp-5);
}

/* Em 768px o container tem 609px para repartir. Contato cede aqui, porque um
   par telefone/WhatsApp em duas linhas é degradação; rótulo de link quebrado
   em duas linhas é defeito — e a 124px "Sócio Contribuinte" quebrava. */
@media (min-width: 48rem) {
    .rodape__grade { grid-template-columns: 1.3fr .8fr 1.1fr; }
}

@media (min-width: 62rem) {
    .rodape__grade { grid-template-columns: 1.22fr .72fr 1.26fr; }
}

.rodape__logo { margin-bottom: var(--esp-3); }

.rodape__logo img {
    height: 124px;
    width: auto;
    padding: var(--esp-2);
    background: var(--branco);
    border-radius: var(--raio);
}

.rodape p { max-width: 42ch; }

/* A margem de 1em que o navegador dá ao <p> abria 16px entre a descrição e o
   CNPJ, numa coluna que já sobra espaço embaixo. Os blocos ficam juntos e a
   sobra vira uma só, no fim — que é o que a coluna do meio manda. */
.rodape__grade p { margin: 0 0 var(--esp-2); }
.rodape__grade p:last-child { margin-bottom: 0; }

.rodape__titulo {
    margin-bottom: var(--esp-3);
    color: var(--branco);
    font-size: var(--fs-2);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.rodape__lista { margin: 0; padding: 0; list-style: none; }

.rodape__lista a,
.rodape__contato a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #EAF2FB;                 /* 10,85:1 */
    text-decoration: none;
}

/* Os 44px do §7 ficam onde a regra foi escrita para valer: telefone, WhatsApp
   e e-mail são o que alguém aperta com o polegar para falar com a Casa. Um
   link de navegação do rodapé não é isso, e a 44px a coluna Institucional
   media 396px só de lista. A 36px continua bem acima do mínimo AA de 24x24
   (WCAG 2.5.8) e o rodapé encurta sem apertar nada. */
/* Rótulo de link não quebra em duas linhas. Além de feio, é o que segura a
   coluna: `1fr` reparte a SOBRA, e a mínima de uma coluna de texto é a maior
   PALAVRA — "Contribuinte", 95px. A 768px a coluna ganhava 132px e "Sócio
   Contribuinte" (139px) dobrava, com as proporções aparentemente respeitadas.
   Com nowrap a mínima passa a ser o rótulo inteiro, e a grade obedece. */
.rodape__lista a { min-height: 36px; white-space: nowrap; }
.rodape__contato a { min-height: 44px; }

.rodape__lista a:hover,
.rodape__contato a:hover { color: var(--branco); text-decoration: underline; }

.rodape__contato { margin: 0; padding: 0; list-style: none; }

.rodape__contato > li {
    display: flex;
    gap: .5rem;
    align-items: flex-start;        /* o endereço tem duas linhas: o pino fica na primeira */
}

/* Telefone e WhatsApp na mesma linha. Eram dois blocos com rótulo para dois
   valores curtos do mesmo assunto. Os dois juntos pedem 292px; abaixo disso
   embrulham para duas linhas, que é a degradação certa — nunca cortam. */
.rodape__contato__dupla {
    flex-wrap: wrap;
    column-gap: var(--esp-3);
}

/* `> li` tem uma classe E um tipo; a classe sozinha perderia para ele e o
   horário continuaria em flex, com o rótulo ao lado do valor em vez de acima. */
.rodape__contato > li.rodape__contato__horario {
    display: block;
    margin-top: var(--esp-2);
}

.rodape__contato__rotulo {
    display: block;
    color: var(--branco);
    font-weight: 600;
    font-size: var(--fs-1);
}

.rodape__contato svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Fora de um link (o endereço), o ícone não tem a linha de 44px para se
   centralizar: desce até a altura da maiúscula da primeira linha. */
.rodape__contato > li > svg { margin-top: .3em; }

/* O endereço é uma linha só, digitada no painel: `pretty` evita que a última
   linha fique com uma palavra sozinha — o "504" do CEP, medido a 1600px. */
.rodape__contato > li > span { text-wrap: pretty; }

.rodape__redes {
    display: flex;
    gap: var(--esp-2);
    margin: var(--esp-4) 0 0;
    padding: 0;
    list-style: none;
}

.rodape__redes a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--branco);
}

.rodape__redes a:hover { background: rgba(255, 255, 255, .26); }
.rodape__redes svg { width: 20px; height: 20px; }

.rodape__base {
    padding-block: var(--esp-4);
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-size: var(--fs-1);
}

.rodape__base-linha p { margin: 0; max-width: none; }

.rodape__base-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
}

.rodape__base a { color: #EAF2FB; }

/* --- Busca simples (usada na página 404) -------------------------------- */

.busca {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-2);
    max-width: 30rem;
}

.busca__campo { flex: 1 1 14rem; }

/* --- Hero da home -------------------------------------------------------
   Carrossel de faixas grandes. Sem imagem cadastrada, o slide é um bloco azul
   sólido — nada de imagem genérica de banco de imagens fingindo ser a Casa.
   ------------------------------------------------------------------------- */

.hero {
    position: relative;
    background: var(--azul);
}

.hero__slide {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(24rem, 62vh, 38rem);
    background: var(--azul);
    color: var(--branco);
    overflow: hidden;
}

.hero__imagem {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Véu azul sobre a foto. Existe para o texto ter contraste em cima de
   qualquer imagem, não para enfeitar: por isso é escuro do lado do texto e
   quase transparente do outro. */
.hero__veu {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 53, 105, .92) 0%, rgba(0, 53, 105, .78) 45%, rgba(0, 53, 105, .35) 100%);
}

.hero__conteudo {
    position: relative;
    max-width: 44rem;
    padding-block: var(--esp-7);
}

.hero__titulo {
    margin-bottom: var(--esp-3);
    color: var(--branco);
}

.hero__texto {
    max-width: 46ch;
    margin-bottom: var(--esp-5);
    color: rgba(255, 255, 255, .92);
    font-size: var(--fs-3);
}

/* Controles do carrossel do Bootstrap, com área de toque de verdade. */
.hero .carousel-control-prev,
.hero .carousel-control-next {
    width: auto;
    padding: var(--esp-3);
    opacity: 1;
}

.hero .carousel-control-prev-icon,
.hero .carousel-control-next-icon {
    width: 44px;
    height: 44px;
    padding: .6rem;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .35);
    background-size: 45%;
}

.hero .carousel-control-prev:hover .carousel-control-prev-icon,
.hero .carousel-control-next:hover .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, .6);
}

.hero .carousel-indicators {
    margin-bottom: var(--esp-4);
}

.hero .carousel-indicators [data-bs-target] {
    width: 32px;
    height: 6px;
    margin-inline: 5px;
    border: 0;
    border-radius: var(--raio-pilula);
    background-color: rgba(255, 255, 255, .45);
    opacity: 1;
}

.hero .carousel-indicators .active {
    background-color: var(--laranja);
}

/* --- Bloco de duas colunas (texto + foto) -------------------------------- */

.bloco-duplo {
    display: grid;
    gap: var(--esp-6);
    align-items: center;
    grid-template-columns: 1fr;
}

@media (min-width: 992px) {
    .bloco-duplo { grid-template-columns: 1fr 1fr; gap: var(--esp-7); }
    .bloco-duplo--invertido .bloco-duplo__midia { order: -1; }
}

.bloco-duplo__texto > *:last-child { margin-bottom: 0; }

/*
 * Texto justificado, a pedido, em 01/09/2026.
 *
 * `hyphens: auto` anda junto: sem quebrar palavra, a justificação só tem os
 * ESPAÇOS para esticar, e é daí que vêm os "rios" de branco. Medido nesta
 * coluna de 544px, o esticão médio é de 2,5px e o maior de 9px sobre um
 * espaço natural de 4,4px — pouco. Não consegui provar a hifenização aqui: o
 * Chrome desta máquina não hifeniza nem em inglês (falta o dicionário), então
 * os números acima são o PIOR caso, o de quem não hifeniza. Onde o navegador
 * hifenizar, melhora.
 *
 * Justifica só o parágrafo. Rótulo, título e botão continuam onde estavam —
 * justificar uma linha só não faz nada, e justificar título faria estrago.
 */
.bloco-duplo__texto p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/*
 * Foto ao lado do texto, no bloco de duas colunas da home.
 *
 * Substituiu o `.bloco-marca`, que mostrava a logo num fundo azul claro
 * enquanto a foto da Casa não existia — e cujo próprio comentário mandava
 * sumir no dia em que ela chegasse. Chegou em 01/09/2026.
 *
 * O 4:3 é o mesmo do bloco anterior, e continua NA CAIXA e não na imagem: com
 * `object-fit: cover` a foto preenche sem deformar, e trocar por outra de
 * proporção diferente não mexe no layout. O `overflow: hidden` é o que faz o
 * arredondamento valer sobre a imagem.
 */
.foto-bloco {
    margin: 0;
    overflow: hidden;
    border-radius: var(--raio-grande);
}

.foto-bloco img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* --- Faixa de números ---------------------------------------------------- */

.faixa-numeros__frase {
    max-width: 34ch;
    margin-inline: auto;
    margin-bottom: 0;
    color: var(--azul-escuro);
    font-size: var(--fs-5);
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-wrap: balance;
}

.faixa-numeros__apoio {
    max-width: 52ch;
    margin: var(--esp-3) auto 0;
    color: var(--texto-suave);
    text-align: center;
}

/* --- Certificações ------------------------------------------------------- */

.certificacao {
    height: 100%;
    padding: var(--esp-4);
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}

.certificacao__titulo {
    margin-bottom: var(--esp-1);
    color: var(--azul-escuro);
    font-size: var(--fs-2);
    font-weight: 700;
}

.certificacao__detalhe {
    margin-bottom: 0;
    max-width: none;
    color: var(--texto-suave);
    font-size: var(--fs-1);
}

/* --- Cartão grande de "Como ajudar" -------------------------------------- */

.cartao-ajuda {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--esp-5);
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio-grande);
}

.cartao-ajuda__icone {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--esp-4);
    border-radius: var(--raio);
    background: var(--laranja-claro);
    color: var(--laranja-texto);
}

.cartao-ajuda__icone svg { width: 32px; height: 32px; }
.cartao-ajuda__titulo { font-size: var(--fs-4); }

.cartao-ajuda__texto {
    margin-bottom: var(--esp-5);
    color: var(--texto-suave);
    max-width: none;
}

.cartao-ajuda .botao { margin-top: auto; align-self: flex-start; }

/* --- Carrossel de logos de parceiros ------------------------------------- */

.carrossel-logos { padding-block: var(--esp-2); }

.carrossel-logos .carousel-item > .grade { padding-bottom: var(--esp-2); }

/* --- Conteúdo vindo do banco --------------------------------------------
   O texto institucional é gravado como HTML na tabela paginas e sai daqui sem
   escape (é conteúdo do painel, não do visitante). Esta classe dá tipografia a
   ele sem precisar de classe em cada tag — o painel gera h2, p e ul simples.
   ------------------------------------------------------------------------- */

.conteudo-rico > *:first-child { margin-top: 0; }
.conteudo-rico > *:last-child { margin-bottom: 0; }

.conteudo-rico h2 {
    margin-top: var(--esp-6);
    margin-bottom: var(--esp-3);
    font-size: var(--fs-5);
}

.conteudo-rico h2::after {
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    margin-top: var(--esp-3);
    border-radius: var(--raio-pilula);
    background: var(--laranja);
}

.conteudo-rico h3 { margin-top: var(--esp-5); font-size: var(--fs-4); }

.conteudo-rico p { margin-bottom: var(--esp-4); }

.conteudo-rico > ul:not([class]),
.conteudo-rico > ol:not([class]) {
    margin: 0 0 var(--esp-4);
    padding-left: 1.35rem;
    max-width: 68ch;
}

.conteudo-rico > ul:not([class]) li,
.conteudo-rico > ol:not([class]) li { margin-bottom: var(--esp-2); }

/* --- Valores (lista que vira cards) -------------------------------------- */

.lista-valores {
    display: grid;
    gap: var(--esp-3);
    /* 13rem e não 11rem: a lista vai até a largura do container (§9), e em
       11rem os nove Valores davam SEIS colunas de 179px — "Responsabilidade"
       e "Transparência" quebravam em duas linhas e a última fila ficava com
       três itens e metade da linha vazia. Em 13rem dá cinco colunas de 218px,
       nenhum rótulo quebra e a quebra fica 5+4. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    margin: 0 0 var(--esp-4);
    padding: 0;
    list-style: none;
}

.lista-valores li {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    min-height: 64px;
    padding: var(--esp-3) var(--esp-4);
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    font-weight: 600;
    color: var(--azul-escuro);
}

/* Marcador losango em laranja: é detalhe, não texto — 3:1 basta. */
.lista-valores li::before {
    content: "";
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--laranja);
    transform: rotate(45deg);
}

/* --- Conselhos (nome + cargo em cards) ----------------------------------- */

.lista-conselho {
    display: grid;
    gap: var(--esp-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    margin: 0 0 var(--esp-4);
    padding: 0;
    list-style: none;
}

.lista-conselho li {
    padding: var(--esp-4);
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    border-left: 4px solid var(--laranja);
}

.lista-conselho strong { display: block; color: var(--azul-escuro); font-weight: 700; }
.lista-conselho span { display: block; margin-top: .15rem; color: var(--texto-suave); font-size: var(--fs-1); }

.secao--areia .lista-valores li,
.secao--areia .lista-conselho li { border-color: transparent; box-shadow: var(--sombra); }

/* --- Linha do tempo ------------------------------------------------------ */

/*
 * Linha do tempo — reescrita em 31/08/2026. O que mudou, e por quê:
 *
 * UM EIXO SÓ. A linha e os pontos recebem o mesmo `left` e são centrados com
 * translateX(-50%), então o ponto ATRAVESSA a linha. Antes a linha era o
 * `border-left` do <ol> e o ponto era colocado por um calc() com número solto
 * (`-9px`): o centro do ponto caía 4px à direita do fio, e lia-se como bolinha
 * ao lado da linha, não como marco dela.
 *
 * A LINHA É DO <li>, NÃO DO <ol>. Cada item desenha o trecho que vai do centro
 * do próprio ponto até o centro do ponto seguinte — `top` no centro do ponto e
 * `height: 100%`, que é exatamente a distância até o item de baixo. O último
 * item não desenha trecho nenhum. Resultado: a linha começa e termina em
 * ponto, sem sobra depois do "Hoje", e o componente aceita QUANTOS MARCOS a
 * entidade acrescentar sem tocar no CSS. Um fio único no <ol> não conseguiria
 * isso: ele teria de saber a altura do último item.
 *
 * PESO DO PRESENTE. Os marcos passados são contorno; o último é maior e
 * preenchido. É `:last-child`, não uma classe no HTML — marco novo entra no
 * array do .php e o destaque anda sozinho para ele.
 *
 * O ponto é OPACO para o fio não aparecer dentro do contorno. Daí --lt-fundo,
 * que acompanha o fundo da seção: hoje o componente vive em .secao--areia, e
 * se um dia for para uma seção branca, o padrão já está certo.
 *
 * As medidas saem umas das outras: o eixo é metade do maior ponto (assim a
 * borda esquerda dele encosta no eixo do container, junto com o <h2> acima), e
 * a altura do ponto sobre o texto é meia linha do rótulo do ano, calculada dos
 * tokens de tipografia em vez de um `.45rem` que envelheceria com a escala.
 */
.linha-tempo {
    --lt-ponto: 13px;
    --lt-ponto-hoje: 20px;
    --lt-linha: 2px;
    --lt-eixo: calc(var(--lt-ponto-hoje) / 2);
    --lt-topo: calc(var(--fs-1) * var(--altura-linha) / 2);
    --lt-recuo: 3rem;
    --lt-recuo-direita: clamp(0rem, 4vw, 3rem);
    --lt-fundo: var(--branco);

    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.secao--areia .linha-tempo { --lt-fundo: var(--areia); }

.linha-tempo > li {
    position: relative;
    padding: 0 var(--lt-recuo-direita) var(--esp-6) var(--lt-recuo);
}

.linha-tempo > li:last-child { padding-bottom: 0; }

/* O ponto do marco. */
.linha-tempo > li::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: var(--lt-eixo);
    top: var(--lt-topo);
    width: var(--lt-ponto);
    height: var(--lt-ponto);
    border: var(--lt-linha) solid var(--laranja);
    border-radius: 50%;
    background: var(--lt-fundo);
    transform: translate(-50%, -50%);
}

/* O trecho de linha até o marco seguinte. */
.linha-tempo > li::after {
    content: "";
    position: absolute;
    left: var(--lt-eixo);
    top: var(--lt-topo);
    width: var(--lt-linha);
    height: 100%;
    background: var(--borda);
    transform: translateX(-50%);
}

.linha-tempo > li:last-child::after { content: none; }

/* O presente, preenchido e maior. */
.linha-tempo > li:last-child::before {
    width: var(--lt-ponto-hoje);
    height: var(--lt-ponto-hoje);
    background: var(--laranja);
}

/*
 * Em tela estreita o recuo da esquerda e o da direita somados espremeriam o
 * texto contra a borda: a 360px sobrariam 266px de linha. Encolhem os dois, e
 * o da direita some — ele existe para equilibrar a largura cheia, que a 360px
 * não existe.
 */
@media (max-width: 40rem) {
    .linha-tempo {
        --lt-ponto: 11px;
        --lt-ponto-hoje: 16px;
        --lt-recuo: 2.25rem;
        --lt-recuo-direita: 0rem;
    }

    .linha-tempo > li { padding-bottom: var(--esp-5); }
}

.linha-tempo__ano {
    display: block;
    color: var(--laranja-texto);
    font-size: var(--fs-1);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.linha-tempo__titulo { margin: var(--esp-1) 0 var(--esp-2); font-size: var(--fs-4); }
.linha-tempo__texto { margin-bottom: 0; color: var(--texto-suave); }

/* --- Documentos (transparência) ------------------------------------------ */

.documento {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-4);
    padding: var(--esp-4);
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}

.documento + .documento { margin-top: var(--esp-3); }

.documento__icone {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--azul-claro);
    color: var(--azul);
}

.documento__icone svg { width: 24px; height: 24px; }
.documento__dados { flex: 1 1 16rem; }
.documento__titulo { margin: 0 0 .15rem; font-size: var(--fs-3); font-weight: 700; color: var(--azul-escuro); }
.documento__texto { margin: 0 0 .25rem; max-width: 60ch; color: var(--texto-suave); font-size: var(--fs-1); }

.documento__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-3);
    margin: 0;
    color: var(--texto-suave);
    font-size: var(--fs-1);
}

/* Estado vazio: diz o que falta, em vez de mostrar uma lista em branco. */
.vazio {
    padding: var(--esp-5);
    background: var(--areia);
    border: 1px dashed #D8D0C6;
    border-radius: var(--raio);
    color: var(--texto-suave);
}

.vazio > *:last-child { margin-bottom: 0; }

/* --- Grade de parceiros ---------------------------------------------------
   Caixas de altura igual e logo centralizado: a uniformidade vem do tamanho
   da caixa, NÃO de filtro de escala de cinza. Decisão do Prompt 5 — a marca
   de quem apoia aparece na cor dela.
   Enquanto o logo não chega, o nome ocupa o lugar dele (.parceiro__nome), com
   o mesmo peso visual, para a grade não ficar com buracos.
--------------------------------------------------------------------------- */

.grade-parceiros {
    display: grid;
    /* 200px e não 160px: com sete parceiros, 160 dava seis numa linha e um
       sozinho embaixo. Em 200 a quebra fica 5+2, menos torta. */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--esp-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.parceiro {
    display: grid;
    place-items: center;
    gap: var(--esp-2);
    min-height: 128px;
    padding: var(--esp-4);
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    text-align: center;
}

.parceiro__link {
    display: grid;
    place-items: center;
    /* Área de toque de 44px garantida mesmo com logo pequeno. */
    min-height: 44px;
    min-width: 44px;
    text-decoration: none;
}

.parceiro__logo {
    max-height: 72px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

.parceiro__nome {
    color: var(--azul-escuro);
    font-size: var(--fs-2);
    font-weight: 700;
    line-height: 1.3;
}

.parceiro__link:hover .parceiro__nome,
.parceiro__link:focus-visible .parceiro__nome { color: var(--laranja-texto); }

.parceiro__texto { margin: 0; color: var(--texto-suave); font-size: var(--fs-1); }

/* Bloco de texto de leitura, centralizado e com medida confortável. */
.texto-abertura { max-width: 65ch; margin-inline: auto; }
.texto-destaque { font-size: var(--fs-3); line-height: 1.6; text-align: center; }

/* --- Downloads ------------------------------------------------------------
   Cartão em vez da linha da transparência: aqui a pessoa está escolhendo um
   arquivo entre vários, e cartão dá mais espaço para o título e a ressalva.
--------------------------------------------------------------------------- */

.grade-downloads {
    display: grid;
    /* auto-FIT, e não auto-fill: o auto-fill cria a trilha mesmo sem item, e
       a categoria com um documento só deixaria metade da linha vazia. O
       auto-fit recolhe a trilha vazia e o card ocupa a largura. Dentro da
       coluna de leitura (640px) dá duas colunas — que é o que as categorias
       de hoje precisam. */
    /* Trilha com TETO, e não 1fr: a grade vai até o container (§9), e com
       1fr as duas categorias de hoje (dois documentos cada) viravam dois
       cartões de 568px para um link de PDF. Com teto de 22rem os cartões
       param de crescer e a sobra fica à direita, que é onde o eixo manda. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 22rem));
    gap: var(--esp-3);
}

.cartao-download {
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
    padding: var(--esp-4);
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}

.cartao-download__icone {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--azul-claro);
    color: var(--azul);
}

.cartao-download__icone svg { width: 24px; height: 24px; }

/* Empurra o botão para a base: cartões vizinhos alinham os botões mesmo com
   descrições de tamanhos diferentes. */
.cartao-download__corpo { flex: 1 1 auto; }

.cartao-download__titulo {
    margin: 0 0 var(--esp-2);
    font-size: var(--fs-3);
    font-weight: 700;
    color: var(--azul-escuro);
}

.cartao-download__texto { margin: 0 0 var(--esp-2); color: var(--texto-suave); font-size: var(--fs-1); }

.cartao-download__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-3);
    margin: 0;
    color: var(--texto-suave);
    font-size: var(--fs-1);
}

.cartao-download__botao { align-self: flex-start; }

.bloco-fichas { margin-top: var(--esp-6); }
.bloco-fichas .grupo-botoes { margin-top: var(--esp-3); }

/* --- Caminhos de "Como ajudar" -------------------------------------------
   Quatro cards altos, com o botão sempre na base para os cartões vizinhos
   terminarem alinhados mesmo com textos de tamanhos diferentes.
--------------------------------------------------------------------------- */

.grade-caminhos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--esp-4);
}

.caminho {
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
    padding: var(--esp-5);
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio-grande);
}

/* Um único destaque por página: o PIX, que é o caminho mais curto. */
.caminho--destaque { border-color: var(--laranja-escuro); border-width: 2px; }

.caminho__icone {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--azul-claro);
    color: var(--azul);
}

.caminho--destaque .caminho__icone { background: #FDF0E0; color: var(--laranja-texto); }
.caminho__icone svg { width: 28px; height: 28px; }
.caminho__titulo { margin: 0; font-size: var(--fs-4); color: var(--azul-escuro); }
.caminho__texto { margin: 0; flex: 1 1 auto; color: var(--texto-suave); }
.caminho__botao { align-self: flex-start; }

/* --- Doação via PIX ------------------------------------------------------ */

.doacao {
    display: grid;
    gap: var(--esp-6);
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .doacao { grid-template-columns: 1.4fr 1fr; align-items: start; }
}

.doacao__titulo { font-size: var(--fs-4); color: var(--azul-escuro); margin-top: var(--esp-5); }
.doacao__titulo:first-child { margin-top: 0; }

.valores { display: flex; flex-wrap: wrap; gap: var(--esp-2); }

.valor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    min-width: 5.5rem;
    padding: .6rem 1.2rem;
    background: var(--branco);
    border: 2px solid var(--borda);
    border-radius: var(--raio-pilula);
    color: var(--azul-escuro);
    font-weight: 700;
    text-decoration: none;
    transition: border-color var(--transicao), background var(--transicao);
}

.valor:hover, .valor:focus-visible { border-color: var(--azul); }

/* O valor escolhido: fundo azul e texto branco (8,54:1), não só borda —
   distinguir por cor de borda sozinha falha para quem não enxerga a diferença. */
.valor--atual {
    background: var(--azul);
    border-color: var(--azul);
    color: var(--branco);
}

.valor-livre { margin-top: var(--esp-4); max-width: 26rem; }
.valor-livre__linha { display: flex; gap: var(--esp-2); align-items: flex-start; }
.valor-livre__linha .botao { flex-shrink: 0; min-height: 48px; }

.pix-chave {
    display: grid;
    gap: var(--esp-3);
    padding: var(--esp-4);
    background: var(--areia);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    margin-bottom: var(--esp-4);
}

.pix-chave__rotulo { font-weight: 700; color: var(--azul-escuro); }

.pix-chave__valor {
    display: block;
    /* O payload é uma linha longa sem espaços: sem o break-all ele estoura a
       caixa no celular e leva a página inteira para a rolagem horizontal. */
    word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--fs-1);
    line-height: 1.5;
    color: var(--texto);
}

.qr {
    margin: 0;
    padding: var(--esp-4);
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    text-align: center;
}

/* Fundo branco garantido atrás do QR: leitor de código não perdoa contraste. */
.qr__imagem { max-width: 100%; height: auto; background: #FFF; }
.qr__legenda { margin-top: var(--esp-3); font-weight: 700; color: var(--azul-escuro); }

/* --- Formulários grandes (sócio e voluntário) ---------------------------- */

.form-sos__caixa {
    max-width: 52rem;
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 3rem);
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio-grande);
}

/* Divisória de assunto dentro de um formulário longo. */
.form-sos__secao {
    margin: var(--esp-6) 0 var(--esp-4);
    padding-top: var(--esp-4);
    border-top: 1px solid var(--borda);
    font-size: var(--fs-3);
    color: var(--azul-escuro);
}

.form-sos__secao:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

/* Dias e turnos: caixas lado a lado em vez de uma coluna comprida. */
.form-sos__marcadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: var(--esp-2) var(--esp-4);
}

.form-sos__marcadores .form-sos__marcador { margin-bottom: 0; }

.form-sos fieldset { border: 0; padding: 0; margin: 0 0 var(--esp-4); }
.form-sos legend { padding: 0; }

/* O rótulo do marcador é clicável inteiro: área de toque de sobra. */
.form-sos__marcador label { cursor: pointer; }
.form-sos__marcador .form-sos__ajuda { margin-top: .1rem; }

/* Lista da Lei do Voluntariado. */
.lista-lei { margin: var(--esp-4) 0; padding-left: 0; list-style: none; }

.lista-lei li {
    position: relative;
    margin-bottom: var(--esp-3);
    padding-left: var(--esp-5);
}

.lista-lei li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--laranja);
}

/* --- Página de contato ---------------------------------------------------- */

.contato {
    display: grid;
    gap: var(--esp-6);
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 900px) {
    .contato { grid-template-columns: 1.5fr 1fr; }
}

.contato__formulario { min-width: 0; }
.contato__dados { display: grid; gap: var(--esp-4); }

.cartao-contato {
    padding: var(--esp-5);
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio-grande);
}

.cartao-contato__titulo { margin: 0 0 var(--esp-4); font-size: var(--fs-3); color: var(--azul-escuro); }
.cartao-contato__endereco { margin: 0 0 var(--esp-4); font-style: normal; line-height: 1.7; }

.cartao-contato__lista { margin: 0; padding: 0; list-style: none; }

.cartao-contato__lista li {
    padding: var(--esp-3) 0;
    border-top: 1px solid var(--borda);
}

.cartao-contato__lista li:first-child { border-top: 0; padding-top: 0; }

.cartao-contato__rotulo {
    display: block;
    margin-bottom: .15rem;
    color: var(--texto-suave);
    font-size: var(--fs-1);
}

/* Alvo de toque de 44px em telefone, WhatsApp e e-mail, que são links longos
   e é onde o dedo erra. */
.cartao-contato__lista a {
    display: inline-block;
    min-height: 24px;
    padding: .25rem 0;
    font-weight: 600;
    word-break: break-word;
}

/* Mapa: proporção fixa para o iframe não empurrar o layout enquanto carrega. */
.mapa {
    position: relative;
    margin-bottom: var(--esp-4);
    padding-top: 62%;
    overflow: hidden;
    border-radius: var(--raio);
    background: var(--areia);
}

.mapa iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Card de destaque da listagem de notícias ---------------------------- */

@media (min-width: 768px) {
    .card-noticia--destaque {
        flex-direction: row;
        align-items: stretch;
    }

    .card-noticia--destaque .card-noticia__figura {
        flex: 1 1 52%;
        margin: 0;
    }

    .card-noticia--destaque .card-noticia__imagem {
        height: 100%;
        aspect-ratio: auto;
        min-height: 18rem;
    }

    .card-noticia--destaque .card-noticia__corpo {
        flex: 1 1 48%;
        justify-content: center;
        padding: var(--esp-6);
    }

    .card-noticia--destaque .card-noticia__titulo { font-size: var(--fs-5); }
}

/* --- Paginação ----------------------------------------------------------- */

.paginacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2);
    margin-top: var(--esp-7);
}

.paginacao__lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.paginacao__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: .5rem .9rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio-pilula);
    background: var(--branco);
    color: var(--azul);
    font-weight: 600;
    text-decoration: none;
}

.paginacao__link:hover { background: var(--azul-claro); color: var(--azul-escuro); }

.paginacao__link--atual {
    background: var(--azul);
    border-color: var(--azul);
    color: var(--branco);
}

.paginacao__resumo { margin-top: var(--esp-3); text-align: center; }

/* --- Leitura de uma notícia ---------------------------------------------- */

.noticia__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-4);
    margin: var(--esp-4) 0 0;
    max-width: none;
    color: rgba(255, 255, 255, .88);
    font-size: var(--fs-1);
}

.noticia__meta time { font-weight: 600; }

.noticia__capa {
    margin: 0 0 var(--esp-6);
}

.noticia__capa img {
    display: block;
    width: 100%;
    max-height: 32rem;
    object-fit: cover;
    border-radius: var(--raio-grande);
    background: var(--areia);
}

.noticia__capa figcaption {
    margin-top: var(--esp-3);
    color: var(--texto-suave);
    font-size: var(--fs-1);
}

/* A largura do corpo da notícia é a do container: ver a seção 9. */

.noticia__abertura {
    margin-bottom: var(--esp-5);
    padding-bottom: var(--esp-4);
    border-bottom: 1px solid var(--borda);
    color: var(--texto-suave);
    font-size: var(--fs-3);
}

/* --- Compartilhar -------------------------------------------------------- */

.compartilhar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-3);
    max-width: 44rem;
    margin-top: var(--esp-6);
    padding-top: var(--esp-4);
    border-top: 1px solid var(--borda);
}

.compartilhar__rotulo { color: var(--texto-suave); font-size: var(--fs-1); font-weight: 600; }

.compartilhar__botao {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: .5rem 1rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio-pilula);
    background: var(--branco);
    color: var(--azul-escuro);
    font-size: var(--fs-1);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.compartilhar__botao:hover { background: var(--azul-claro); color: var(--azul-escuro); }
.compartilhar__botao svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Confirmação do "copiar link" — vira verde por um instante. */
.compartilhar__botao.esta-copiado {
    border-color: var(--sucesso);
    background: var(--sucesso-claro);
    color: #14522A;
}

/* --- Card de álbum ------------------------------------------------------- */

.card-album {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio-grande);
    transition: border-color var(--transicao), transform var(--transicao);
}

.card-album:hover { border-color: var(--azul-claro); transform: translateY(-2px); }

/* O link cobre o card inteiro, mas continua sendo um único link no teclado. */
.card-album__link { position: absolute; inset: 0; z-index: 1; }
.card-album__link:focus-visible { outline-offset: -3px; }

.card-album__figura { background: var(--areia); }

.card-album__imagem {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.card-album__sem-capa {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    background: var(--azul-claro);
    color: #96AFC9;
}

.card-album__sem-capa svg { width: 56px; height: 56px; }

.card-album__corpo { display: flex; flex: 1; flex-direction: column; padding: var(--esp-4); }

.card-album__data {
    margin-bottom: var(--esp-2);
    color: var(--laranja-texto);
    font-size: var(--fs-1);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.card-album__titulo { margin-bottom: var(--esp-2); font-size: var(--fs-4); line-height: 1.25; }
.card-album__texto { margin-bottom: var(--esp-3); max-width: none; color: var(--texto-suave); }

.card-album__contagem {
    margin-top: auto;
    color: var(--azul);
    font-size: var(--fs-1);
    font-weight: 600;
}

/* --- Mosaico de fotos ----------------------------------------------------
   Colunas CSS: é o único jeito de fazer mosaico de alturas diferentes sem
   JavaScript. A ordem visual passa a ser por coluna, mas a ordem do teclado
   segue o HTML, que é a ordem cadastrada no painel.
   ------------------------------------------------------------------------- */

.mosaico {
    columns: 4 16rem;
    column-gap: var(--esp-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mosaico__item {
    break-inside: avoid;
    margin-bottom: var(--esp-3);
}

.mosaico__link {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--raio);
    background: var(--areia);
    line-height: 0;
}

.mosaico__imagem {
    display: block;
    width: 100%;
    height: auto;
    transition: transform var(--transicao);
}

.mosaico__link:hover .mosaico__imagem { transform: scale(1.02); }

.mosaico__legenda {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--esp-4) var(--esp-3) var(--esp-3);
    background: linear-gradient(transparent, rgba(0, 53, 105, .88));
    color: var(--branco);
    font-size: var(--fs-1);
    line-height: 1.35;
}

/* --- Lightbox ------------------------------------------------------------ */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr;
    align-items: center;
    gap: var(--esp-3);
    padding: var(--esp-3);
    background: rgba(11, 22, 34, .96);
}

.lightbox[hidden] { display: none; }

/* Fundo travado enquanto o lightbox está aberto. */
body.sem-rolagem { overflow: hidden; }

.lightbox__barra {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
}

.lightbox__contador { margin: 0; max-width: none; color: rgba(255, 255, 255, .85); font-size: var(--fs-1); }

.lightbox__botao {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: var(--branco);
    cursor: pointer;
}

.lightbox__botao:hover { background: rgba(255, 255, 255, .22); }
.lightbox__botao:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; }
.lightbox__botao svg { width: 24px; height: 24px; }
.lightbox__botao[disabled] { opacity: .35; cursor: not-allowed; }

.lightbox__figura {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--esp-3);
    margin: 0;
    min-width: 0;
    max-height: 100%;
}

.lightbox__imagem {
    max-width: 100%;
    max-height: min(74vh, 46rem);
    width: auto;
    border-radius: var(--raio);
    object-fit: contain;
    background: #0B1622;
}

.lightbox__legenda {
    max-width: 60ch;
    color: rgba(255, 255, 255, .88);
    font-size: var(--fs-1);
    text-align: center;
}

.lightbox__legenda:empty { display: none; }

/* No celular as setas saem das laterais e vão para baixo da foto. */
@media (max-width: 767px) {
    .lightbox {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr auto;
    }

    .lightbox__figura { grid-column: 1 / -1; }
    .lightbox__botao--anterior { grid-column: 1; justify-self: end; }
    .lightbox__botao--proxima { grid-column: 2; justify-self: start; }
}

/* ==========================================================================
   8. Acessibilidade e impressão
   ========================================================================== */

/* Quem pediu menos movimento no sistema recebe menos movimento. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .card-noticia:hover { transform: none; }
}

/* Em contraste alto o navegador já reforça as cores; tiramos o que atrapalha. */
@media (prefers-contrast: more) {
    .card-noticia,
    .card-projeto,
    .logo-parceiro { border-color: var(--texto-suave); }
}

@media print {
    .cabecalho,
    .barra-topo,
    .menu-lateral,
    .lightbox,
    .whatsapp-flutuante,
    .voltar-topo,
    .faixa-cta,
    .breadcrumb-sos { display: none !important; }

    body { color: #000; background: #fff; font-size: 11pt; }
    .secao { padding-block: 1rem; background: #fff !important; color: #000 !important; }
    a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; word-break: break-all; }
}

/* ==========================================================================
   Aviso de cookies e tabelas da Política de Privacidade (Prompt 14)
   ========================================================================== */

/* --- Aviso de cookies ----------------------------------------------------

   Faixa no pé da tela, e não cortina modal em cima do conteúdo. O site não
   dispara rastreador nenhum antes da resposta, então não há o que bloquear —
   e uma cortina obrigaria a pessoa a responder algo antes de ler a página que
   veio ler.

   position: fixed no rodapé da JANELA para a pessoa achar a resposta sem
   rolar até o fim do documento. Em telas estreitas ele empilha e ocupa o
   necessário, nunca mais que metade da altura.
   -------------------------------------------------------------------------- */

/*
 * Aviso de cookies — teto de altura e botões presos, revistos em 31/08/2026.
 *
 * O defeito: `max-height: 50vh` com `overflow-y: auto` NO CONTAINER. Num
 * celular o aviso tomava metade da tela e, quando o texto passava do teto,
 * quem saía de vista eram os BOTÕES — a pessoa via um bloco de texto
 * bloqueando a página, sem ação nenhuma à mostra. Aviso sem resposta visível
 * é pior que aviso nenhum: ele só atrapalha.
 *
 * A correção tem três partes, e as três precisam existir juntas:
 *
 * 1. A rolagem saiu do container e foi para o TEXTO (`__texto`). O container
 *    é uma coluna flex: o texto é o que encolhe (`min-height: 0`, sem o qual
 *    um item flex não encolhe abaixo do próprio conteúdo) e os botões são
 *    `flex: 0 0 auto`. Se um dia o texto crescer, ele rola — os botões não
 *    saem do lugar. É a garantia estrutural, e não um ajuste de medida.
 * 2. O teto caiu para 30dvh no celular. `dvh` e não `vh` porque a barra do
 *    navegador entra na conta do `vh` e o aviso ficaria mais alto do que a
 *    conta diz, justamente no aparelho onde o espaço é curto.
 * 3. A redação curta (ver cookies.php) faz o conteúdo caber nesse teto em vez
 *    de depender da rolagem.
 *
 * --aviso-altura é a altura RESERVADA para o aviso, usada pelos dois botões
 * flutuantes lá embaixo. Sem JavaScript vale o teto — reserva de sobra, que
 * nunca deixa o aviso cobrir o botão. Com JavaScript, o site.js escreve a
 * altura real medida e a reserva fica exata.
 */
.aviso-cookies {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    /* Acima dos dois botões flutuantes (z-index 1030): enquanto o aviso está
       na tela, ele é o que precisa ser lido e respondido. */
    z-index: 1040;
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-3, 1rem);
    align-items: center;
    justify-content: space-between;
    max-height: 50vh;
    padding: var(--esp-3, 1rem) var(--esp-4, 1.5rem);
    background: var(--branco);
    border-top: 3px solid var(--laranja);
    box-shadow: var(--sombra-forte);
}

.aviso-cookies__texto {
    flex: 1 1 22rem;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
}

/* Uma redação por largura. `display: none` tira da árvore de acessibilidade,
   então o leitor de tela anuncia uma frase só. */
.aviso-cookies__curto { display: none; }

.aviso-cookies__texto p {
    margin: 0;
    font-size: var(--fs-1);
    line-height: 1.5;
    color: var(--texto);
}

.aviso-cookies__link {
    margin-top: var(--esp-1, .35rem) !important;
}

.aviso-cookies__botoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-2, .75rem);
    /* Os botões não encolhem: "Só os necessários" quebrado em três linhas é
       a diferença entre uma escolha legível e um obstáculo. */
    flex: 0 0 auto;
}

.aviso-cookies__botoes .botao {
    /* Menor que o botão de página, porque isto é um aviso e não uma chamada
       para ação — mas nunca abaixo dos 44px de área de toque. */
    padding: .5rem 1.1rem;
    font-size: var(--fs-1);
}

@media (max-width: 40rem) {
    .aviso-cookies {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: var(--esp-2, .75rem);
        max-height: 30vh;
        max-height: 30dvh;
        padding: var(--esp-3, 1rem);
    }

    .aviso-cookies__curto    { display: block; }
    .aviso-cookies__completo { display: none; }

    /*
     * ESTA e a linha que fazia o aviso tomar meia tela.
     *
     * `flex: 1 1 22rem` foi escrito para o layout em LINHA, onde 22rem e a
     * largura mínima do texto. No celular o container vira COLUNA — e num
     * flex em coluna o flex-basis passa a ser ALTURA. O bloco de texto pedia
     * 352px de altura e crescia (`flex-grow: 1`) até o teto, com o conteúdo
     * ocupando 150px e o resto virando um vão branco entre o texto e os
     * botões. Visto na captura: texto no topo, botões no rodapé, 300px de
     * nada no meio.
     *
     * Baixar o teto de 50vh para 30vh (o que fiz primeiro) só encolhia o vão:
     * o aviso continuava colando no teto em vez de caber no conteúdo. Com
     * `flex: 0 1 auto` ele passa a ter a altura do que tem dentro, e o teto
     * volta a ser o que deveria — um limite, não uma medida.
     */
    .aviso-cookies__texto {
        flex: 0 1 auto;
    }

    /*
     * Lado a lado, dividindo a linha em partes iguais. Com `flex: 1 1 10rem`
     * os dois pediam 160px cada e, com o vão, passavam dos 328px úteis de uma
     * tela de 360 — quebravam em duas linhas e comiam a altura que falta para
     * os dois caberem. Base 0 faz o vão ser repartido, não disputado.
     */
    .aviso-cookies__botoes {
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }

    .aviso-cookies__botoes .botao {
        flex: 1 1 0;
        min-width: 0;
        padding-inline: .5rem;
        text-align: center;
    }
}

/*
 * Os dois botões flutuantes sobem enquanto o aviso está na tela, para não
 * ficarem escondidos atrás dele. A classe vem do PHP (header.php), e não de
 * um seletor :has(): o :has() não existe em navegador antigo, e o resultado
 * seria o botão de WhatsApp desaparecido sem explicação justamente em quem
 * tem o navegador mais velho.
 */
.com-aviso-cookies {
    /* Teto do aviso no celular. O site.js troca pela altura medida. */
    --aviso-altura: 30vh;
}

@supports (height: 1dvh) {
    .com-aviso-cookies { --aviso-altura: 30dvh; }
}

.com-aviso-cookies .whatsapp-flutuante { bottom: calc(var(--esp-3) + var(--aviso-altura)); }
.com-aviso-cookies .voltar-topo { bottom: calc(var(--esp-3) + var(--aviso-altura) + 68px); }

@media (min-width: 992px) {
    .com-aviso-cookies { --aviso-altura: 6.5rem; }

    .com-aviso-cookies .whatsapp-flutuante { bottom: calc(var(--esp-5) + var(--aviso-altura)); }
    .com-aviso-cookies .voltar-topo { bottom: calc(var(--esp-5) + var(--aviso-altura) + 68px); }
}

/* --- Tabelas da política -------------------------------------------------

   O site não tinha estilo de tabela: até aqui não havia dado tabular no lado
   público. "Dado / finalidade / base legal" é tabela de verdade — três
   colunas que só fazem sentido lidas em conjunto —, e transformar isso em
   lista faria a pessoa reconstruir a relação de cabeça.
   -------------------------------------------------------------------------- */

.tabela-dados__rolagem {
    /* A tabela rola dentro desta caixa; a PÁGINA nunca rola de lado. O
       max-width existe para a caixa não ser esticada pelo conteúdo — sem ele
       o overflow-x não chega a agir (mesma lição do painel, 30/08/2026). */
    max-width: 100%;
    overflow-x: auto;
    margin: var(--esp-4, 1.5rem) 0;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}

.tabela-dados {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: var(--fs-1);
    background: var(--branco);
}

.tabela-dados th,
.tabela-dados td {
    padding: .8rem 1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--borda);
    line-height: 1.5;
}

.tabela-dados thead th {
    background: var(--azul-claro);
    color: var(--azul-escuro);
    font-weight: 700;
    white-space: nowrap;
}

.tabela-dados tbody tr:last-child th,
.tabela-dados tbody tr:last-child td {
    border-bottom: 0;
}

/* --- Trecho de código no meio do texto ----------------------------------
   O Bootstrap pinta <code> de #D63384 (rosa). Sobre a areia isso dá 4,21:1 —
   abaixo do AA para texto normal, medido em 30/08/2026 na revisão do Prompt 16,
   nos nomes de cookie da Política de Privacidade. A cor passa a ser a nossa,
   que dá 12,4:1 sobre a areia. Vale em todo o site, não só na tabela: o <code>
   também aparece nos avisos de "conteúdo ainda não publicado".
   -------------------------------------------------------------------------- */

code {
    color: var(--azul-escuro);
}

code,
.tabela-dados code {
    padding: .1rem .35rem;
    border-radius: 4px;
    background: var(--areia);
    font-size: .95em;
    /* overflow-wrap para nome de cookie longo não estourar a coluna. */
    overflow-wrap: anywhere;
}

/* Dentro de bloco que já é areia, o fundo do code precisa se separar. */
.secao--areia code,
.vazio code {
    background: var(--branco);
}

/* Dentro de um botão, o tom de apoio herda a cor do botão. O cinza fixo do
   .texto-apoio sobre o azul preenchido dava 1,56:1 — medido no "(PDF, 226 KB)"
   dos botões de download do /historia, na mesma revisão. */
.botao .texto-apoio {
    color: inherit;
}

/* Dentro de seção com fundo areia, a tabela branca precisa se destacar. */
.secao--areia .tabela-dados__rolagem {
    box-shadow: var(--sombra);
}

/* ==========================================================================
   9. Eixo esquerdo único, largura cheia
   ==========================================================================

   Quatro tentativas em 30/08/2026. Ficam as quatro registradas porque as
   três primeiras eram plausíveis e nenhuma resistiu a ser olhada.

   1ª — texto encostado à esquerda num container de 1200px, com 480 a 566px
        de vazio à direita, e a faixa CTA logo abaixo ocupando a largura
        toda. A mesma página seguia duas regras.
   2ª — coluna centralizada e blocos de card rompendo para o container, para
        dar ritmo. Não se leu como ritmo: em /a-casa o parágrafo começava em
        608px e o "Valores" logo abaixo em 377px, dois <h2> do mesmo tamanho
        na mesma seção.
   3ª — coluna de 40rem ancorada à esquerda. Resolveu o eixo (o mesmo x da
        navbar e do rodapé) e deixou o defeito de origem: o texto parava em
        640 e os 512px seguintes ficavam em branco, lidos como uma segunda
        coluna que ninguém preencheu.
   4ª, esta — NÃO HÁ COLUNA. O conteúdo vai de borda a borda do container,
        igual à faixa CTA e ao rodapé. Um eixo esquerdo e um eixo direito,
        os mesmos da página inteira.

   O preço é a linha longa (cerca de 125 caracteres a 1600px), e ele se paga
   na tipografia, não na largura: corpo de 18px e entrelinha de 1,75. Linha
   larga cansa por causa do RETORNO — achar o começo da linha seguinte —, e é
   a entrelinha que resolve isso, não o recuo. Junto vem mais respiro entre
   seções: bloco largo colado no de baixo vira parede de texto.
   -------------------------------------------------------------------------- */

:root {
    /*
     * O corpo do texto das páginas internas. Maior que o --fs-2 (16px) do
     * resto do site porque aqui a linha é o dobro de larga.
     */
    --fs-corpo-largo: 1.125rem;
    --entrelinha-larga: 1.75;

    /*
     * O respiro entre seções, medido em 30/08/2026 e cortado pela metade
     * logo depois. A primeira tentativa foi clamp(3.5rem, 8vw, 8rem) — 128px
     * de padding a 1600px, que somados aos 128 da seção de cima davam 288px
     * de vão entre uma seção e a outra. Não era respiro, era um buraco: o
     * hero azul terminava e o primeiro <h2> aparecia meia tela abaixo.
     *
     * Em 360px o valor bate com o --secao-y comum (48px), porque lá o
     * problema nunca existiu.
     */
    --secao-y-interna: clamp(3rem, 4.5vw, 4rem);

    /*
     * Os três vãos do texto, juntos e nesta ordem de propósito: é a ordem
     * que agrupa o título ao parágrafo dele e separa uma seção da seguinte.
     * Escritos como variáveis para que a relação entre eles seja visível —
     * espalhados por três regras, o dia em que um crescesse ninguém notaria
     * que o outro tinha de crescer junto.
     *
     *   título -> parágrafo dele   12px   \  o menor de todos: o <h2> e o
     *                                      \  texto abaixo são UMA coisa
     *   entre parágrafos           24px   -- o dobro
     *   parágrafo -> <h2> seguinte 40px   -- mais que o dobro do anterior
     */
    --vao-titulo: .75rem;
    --vao-paragrafo: 1.5rem;
    --vao-secao: 2.5rem;
}

/*
 * 1. Nada limita a largura.
 *
 * A regra desarma os limites em `ch` NA RAIZ, dentro do <main> das páginas
 * internas, em vez de tentar listar cada invólucro que os carrega. Foi a
 * lição da tentativa anterior: listando invólucros, o texto do .texto-
 * abertura, o do <li> da linha do tempo e o de dentro do .alerta ficaram
 * para trás cada um em sua largura — 858, 686 e 652px na mesma página.
 * Limite existe em quatro lugares (o `p { max-width: 68ch }` global, o 60ch
 * do .titulo-secao__texto, o 65ch do .texto-abertura, o 60ch do
 * .hero-interno__texto) e vai continuar aparecendo em componentes novos:
 * desarmar de uma vez é o que não envelhece.
 *
 * O <main> delimita: o rodapé fica de fora e mantém o `.rodape p` em 42ch,
 * que é a medida das colunas dele.
 */
body:has(.hero-interno) main :is(
    p, ul, ol, dl, blockquote,
    h1, h2, h3, h4,
    .coluna-leitura, .conteudo-rico, .texto-abertura,
    .noticia__corpo, .compartilhar, .form-sos__caixa
) {
    max-width: none;
}

/*
 * ...menos o interior da faixa CTA. Ali a medida curta e o centro são o
 * desenho do componente, e é o mesmo componente da home.
 */
body:has(.hero-interno) main .faixa-cta__titulo { max-width: 24ch; }
body:has(.hero-interno) main .faixa-cta__texto { max-width: 56ch; }

/* E o que se centrava por conta própria volta ao eixo da página. */
body:has(.hero-interno) main :is(.texto-abertura, .form-sos__caixa) {
    margin-inline: 0;
}

/*
 * 2. A tipografia que paga a linha larga.
 *
 * A lista é explícita, e não um `p, li` solto, por causa dos rótulos dos
 * cards: subir a .lista-valores para 18px faria "Responsabilidade" pedir
 * 242px numa trilha de 218 e quebrar em duas linhas — o texto do conteúdo
 * cresce, o rótulo de card não.
 */
body:has(.hero-interno) .secao > .container-sos > p:not(.texto-apoio),
body:has(.hero-interno) .secao > .container-sos > :is(ul, ol):not([class]),
body:has(.hero-interno) .secao > .container-sos > .vazio > p,
body:has(.hero-interno) .secao > .container-sos > .texto-abertura > p:not(.texto-apoio),
body:has(.hero-interno) :is(.conteudo-rico, .noticia__corpo) > p,
body:has(.hero-interno) :is(.conteudo-rico, .noticia__corpo) > blockquote,
body:has(.hero-interno) :is(.conteudo-rico, .noticia__corpo) > :is(ul, ol):not([class]) li,
body:has(.hero-interno) .linha-tempo li > p,
body:has(.hero-interno) .alerta > div > p {
    font-size: var(--fs-corpo-largo);
    line-height: var(--entrelinha-larga);
}

/*
 * O texto de apoio sobe de 14px para 16px: continua menor que o corpo, mas a
 * 14px numa linha de 1152px daria 165 caracteres, e aí nem a entrelinha
 * salva.
 */
body:has(.hero-interno) .secao > .container-sos > .texto-apoio,
body:has(.hero-interno) .secao > .container-sos > .texto-abertura > .texto-apoio {
    font-size: var(--fs-2);
    line-height: var(--entrelinha-larga);
}

/*
 * O .texto-destaque nasceu centrado, para uma coluna estreita. Numa linha de
 * 1152px, uma frase centralizada no meio de uma página inteira alinhada à
 * esquerda é o único elemento fora do eixo — e lê-se como descuido, não como
 * ênfase. A ênfase continua vindo do corpo maior; o alinhamento volta ao da
 * página.
 */
body:has(.hero-interno) .secao > .container-sos .texto-destaque {
    text-align: left;
}

/* O subtítulo da seção e o do hero acompanham a entrelinha do corpo. */
body:has(.hero-interno) .titulo-secao__texto,
.hero-interno__texto {
    line-height: var(--entrelinha-larga);
}

/*
 * 3. O respiro, na mesma proporção do bloco.
 *
 * Sem isto o <h2> seguinte encosta no parágrafo anterior: a distância que
 * bastava numa coluna de 640px some quando a linha tem 1152.
 */
body:has(.hero-interno) .secao {
    padding-block: var(--secao-y-interna);
}

/*
 * Os mesmos três vãos valem para o texto que vem do .conteudo-rico (o que a
 * entidade escreve no painel) e para o que está escrito direto no .php — a
 * /privacidade é toda assim. Sem a segunda metade de cada regra, os dois
 * ritmos conviviam na mesma navegação: 24px entre parágrafos numa página e
 * 16px na seguinte, sem motivo visível.
 */
body:has(.hero-interno) .secao > .container-sos > :is(h2, h4),
body:has(.hero-interno) .conteudo-rico :is(h2, h4) {
    margin-top: var(--vao-secao);
    margin-bottom: var(--vao-titulo);
}

/* O <h3> abre uma subseção, não uma seção: fica entre os dois outros vãos. */
body:has(.hero-interno) .secao > .container-sos > h3,
body:has(.hero-interno) .conteudo-rico h3 {
    margin-top: calc(var(--vao-secao) - var(--vao-titulo));
    margin-bottom: var(--vao-titulo);
}

body:has(.hero-interno) .secao > .container-sos > :is(p, ul, ol),
body:has(.hero-interno) .conteudo-rico :is(p, ul, ol) {
    margin-bottom: var(--vao-paragrafo);
}

/*
 * O primeiro bloco do conteúdo não recua: quem separa o hero do texto é o
 * padding da seção, e só ele. Sem esta linha o margin-top do <h2> escapa
 * pelo topo do .conteudo-rico (não há borda nem padding para o segurar) e se
 * SOMA ao padding — medido, 128 + 64 = 192px de vão embaixo do hero, contra
 * os 128 que a regra prometia. O `.conteudo-rico > *:first-child` que já
 * existia perdia para a regra acima, que é mais específica.
 */
body:has(.hero-interno) .secao > .container-sos > *:first-child,
body:has(.hero-interno) .conteudo-rico > *:first-child { margin-top: 0; }

body:has(.hero-interno) .secao > .container-sos > *:last-child,
body:has(.hero-interno) .conteudo-rico > *:last-child { margin-bottom: 0; }

body:has(.hero-interno) .secao > .container-sos > .titulo-secao {
    margin-bottom: var(--vao-paragrafo);
}

/*
 * 4. Em telas estreitas nada disso muda a largura — já era cheia. O que
 * encolhe é o vão entre seções, porque numa tela de 360px cada pixel de
 * respiro é uma rolagem a mais. A ORDEM entre os três se mantém.
 */
@media (max-width: 48rem) {
    :root {
        --vao-secao: 2rem;
        --vao-paragrafo: 1.25rem;
    }
}