/* ---------------------------------------------------------------------------
   components.css - componentes do design novo
   Depende de tokens.css e base.css.
   --------------------------------------------------------------------------- */

/* =========================================================================
   Botões
   ========================================================================= */

.btn
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 48px;
    padding: var(--sp-3) var(--sp-6);
    border: 2px solid transparent;
    border-radius: var(--r-pill);
    background: var(--c-green);
    color: var(--c-on-dark);
    font-family: var(--f-head);
    font-size: 1rem;
    font-weight: var(--fw-bold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}

.btn:hover
{
    background: var(--c-green-dark);
    color: var(--c-on-dark);
    text-decoration: none;
}

.btn--blue
{
    background: var(--c-blue);
}

.btn--blue:hover
{
    background: var(--c-blue-dark);
}

.btn--gold
{
    background: var(--c-gold);
    color: var(--c-text);
}

.btn--gold:hover
{
    background: var(--c-gold-dark);
    color: var(--c-text);
}

/* Sobre fundo colorido: branco com texto da cor da faixa */
.btn--onDark
{
    background: var(--c-surface);
    color: var(--c-green);
}

.btn--onDark:hover
{
    background: var(--c-bg-alt);
    color: var(--c-green-dark);
}

/* Sobre a faixa azul */
.btn--onBlue
{
    color: var(--c-blue);
}

.btn--onBlue:hover
{
    color: var(--c-blue-dark);
}

.btn--outline
{
    background: transparent;
    border-color: currentColor;
    color: var(--c-green);
}

.btn--outline:hover
{
    background: var(--c-green);
    color: var(--c-on-dark);
}

.section--green .btn--outline,
.section--blue .btn--outline
{
    color: var(--c-on-dark);
}

.section--green .btn--outline:hover
{
    background: var(--c-on-dark);
    color: var(--c-green);
}

/* =========================================================================
   Header e navegação
   ========================================================================= */

.siteHeader
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-header);
    background: var(--c-surface);
    box-shadow: var(--shadow-soft);
}

.siteHeader__inner
{
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    min-height: var(--header-h);
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.siteHeader__logo
{
    flex: 0 0 auto;
    margin-right: auto;
}

.siteHeader__logo img
{
    width: auto;
    height: 40px;
}

.siteHeader__seal
{
    flex: 0 0 auto;
}

.siteHeader__seal img
{
    width: auto;
    height: 44px;
}

.mainNav
{
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.mainNav__item
{
    position: relative;
}

.mainNav__link
{
    display: block;
    padding: var(--sp-3) var(--sp-3);
    color: var(--c-text);
    font-family: var(--f-head);
    font-size: 0.9375rem;
    font-weight: var(--fw-medium);
    white-space: nowrap;
}

.mainNav__link:hover
{
    color: var(--c-green);
    text-decoration: none;
}

.mainNav__link.is-active
{
    color: var(--c-blue);
    font-weight: var(--fw-bold);
}

/* Submenu (desktop: dropdown / mobile: acordeão) */
.mainNav__sub
{
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 15rem;
    margin: 0;
    padding: var(--sp-2) 0;
    list-style: none;
    background: var(--c-surface);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}

.mainNav__item:hover > .mainNav__sub,
.mainNav__item:focus-within > .mainNav__sub,
.mainNav__item.is-open > .mainNav__sub
{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mainNav__sub a
{
    display: block;
    padding: var(--sp-2) var(--sp-4);
    color: var(--c-text);
    font-size: 0.9375rem;
}

.mainNav__sub a:hover
{
    background: var(--c-bg-alt);
    color: var(--c-green);
    text-decoration: none;
}

/* Seletor de idiomas (não existe no design de referência) */
.langSwitch
{
    position: relative;
    flex: 0 0 auto;
}

.langSwitch__toggle
{
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border: 0;
    background: transparent;
    border-radius: var(--r-sm);
    cursor: pointer;
}

.langSwitch__toggle img
{
    width: 32px;
    height: 16px;
    border-radius: 2px;
}

.langSwitch__menu
{
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 11rem;
    margin: 0;
    padding: var(--sp-2) 0;
    list-style: none;
    background: var(--c-surface);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base), visibility var(--t-base);
}

.langSwitch:hover .langSwitch__menu,
.langSwitch:focus-within .langSwitch__menu,
.langSwitch.is-open .langSwitch__menu
{
    opacity: 1;
    visibility: visible;
}

.langSwitch__menu a
{
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    color: var(--c-text);
    font-size: 0.9375rem;
}

.langSwitch__menu a:hover
{
    background: var(--c-bg-alt);
    text-decoration: none;
}

.langSwitch__menu img
{
    width: 28px;
    height: 14px;
    border-radius: 2px;
}

/* Hamburger */
.navToggle
{
    display: none;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.navToggle span,
.navToggle span::before,
.navToggle span::after
{
    display: block;
    width: 24px;
    height: 2px;
    background: var(--c-text);
    border-radius: 2px;
    transition: transform var(--t-base), opacity var(--t-base);
}

.navToggle span
{
    margin-inline: auto;
    position: relative;
}

.navToggle span::before,
.navToggle span::after
{
    content: '';
    position: absolute;
}

.navToggle span::before
{
    top: -7px;
}

.navToggle span::after
{
    top: 7px;
}

.navToggle[aria-expanded="true"] span
{
    background: transparent;
}

.navToggle[aria-expanded="true"] span::before
{
    top: 0;
    transform: rotate(45deg);
}

.navToggle[aria-expanded="true"] span::after
{
    top: 0;
    transform: rotate(-45deg);
}

@media (max-width: 1024px)
{
    .navToggle
    {
        display: block;
    }

    .siteHeader__seal
    {
        display: none;
    }

    .mainNav
    {
        position: fixed;
        inset: 72px 0 0 auto;
        width: min(22rem, 100%);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--sp-4);
        background: var(--c-surface);
        box-shadow: var(--shadow-soft);
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform var(--t-base);
        z-index: var(--z-menu);
    }

    .mainNav.is-open
    {
        transform: translateX(0);
    }

    .mainNav__link
    {
        padding: var(--sp-4) var(--sp-2);
        font-size: 1.0625rem;
        border-bottom: 1px solid var(--c-bg-alt);
    }

    .mainNav__sub
    {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding: 0 0 var(--sp-3) var(--sp-4);
        display: none;
    }

    .mainNav__item.is-open > .mainNav__sub
    {
        display: block;
    }
}

/* =========================================================================
   Hero
   ========================================================================= */

.hero
{
    position: relative;
    display: grid;
    place-items: center;
    /* Alturas fixas como na proposta (herói interno 471px, home 548px). O vh é
       só guarda para tela baixa — não pode ser ele a mandar no caso normal. */
    min-height: min(29.5rem, 80vh);
    padding-block: var(--sp-9);
    background: var(--c-text) center / cover no-repeat;
    color: var(--c-on-dark);
    text-align: center;
    isolation: isolate;
}

.hero::after
{
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
    z-index: -1;
}

.hero__title
{
    margin-bottom: var(--sp-3);
    color: var(--c-on-dark);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.hero__subtitle
{
    font-size: var(--fs-lead);
    color: var(--c-on-dark);
}

/* Hero da home: imagem real (melhor para LCP que background-image).
   Na proposta ele ocupa pouco mais da metade da tela — 548px em 1440x1080 —,
   e não a tela quase inteira. */
.hero--full
{
    --hero-height: min(34rem, 80vh);

    min-height: var(--hero-height);
    overflow: hidden;
    background: var(--c-text);
}

.hero__media
{
    position: absolute;
    inset: 0;
    z-index: -2;
}

.hero__media img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Enquadramento da foto da home igual ao da proposta: o recorte fica acima do
   centro. Conferido contra design/shots/home_1440.png — no centro (50%) o
   conteúdo sobe 50px em relação à captura. */
.hero--full .hero__media img
{
    object-position: 50% 38%;
}

/* A home não leva véu escuro: medindo o brilho de pico, a captura da home dá
   161 contra os nossos 116 (exatamente os 28% do véu), enquanto no /tohelp os
   dois dão 80 — lá o véu confere e fica. O título tem 60px em negrito e
   text-shadow, então segue acima do mínimo de contraste sem ele. */
.hero--full::after
{
    content: none;
}

/* Revisto: o herói de /tohelp também não leva véu no Wix — o CSS de lá
   define --bg-overlay-color:transparent para essa faixa (comp-mljhnwne, em
   como-ajudar.html). A régua antiga (comentário acima) media só o pico de
   brilho, que se apaga em branco dos dois lados; a média da faixa toda dá
   47 no Wix contra 39 aqui — o véu de 28% estava escurecendo uma foto que na
   proposta é exibida crua. O título já tem text-shadow suficiente sem ele. */
.hero--noVeil::after
{
    content: none;
}

/* Na proposta o título da home é maior que os demais h1 (60px contra 44px em
   1440px); os h1 das outras páginas já batem com --fs-h1 e ficam como estão. */
.hero--full .hero__title
{
    font-size: clamp(2rem, 4.2vw, 3.75rem);

    /* O herói centraliza o conteúdo, mas na proposta o título fica um pouco
       acima do centro — a margem extra embaixo empurra o bloco para cima. */
    margin-bottom: calc(var(--sp-3) + 2.1rem);
}

/* Paralaxe do herói da home: a foto fica parada e a página rola por cima dela,
   como na proposta. Quem desloca a imagem é o site.js (setupHeroParallax) —
   `animation-timeline: scroll()` resolveria em CSS puro, mas ainda não está
   habilitado no Firefox. Sem JavaScript a foto fica estática, que é aceitável.
   O will-change só entra com a classe, para não custar uma camada de composição
   em quem não vai ter o efeito. */
.hero--parallax .hero__media
{
    will-change: transform;
}

/* Faixa de foto de largura total, sem texto por cima. O aspect-ratio reserva a
   altura antes de a imagem carregar, para a página não pular. */
.photoBand
{
    display: block;
    width: 100%;
    aspect-ratio: 2.6 / 1;
    object-fit: cover;
}

@media (max-width: 768px)
{
    .photoBand
    {
        aspect-ratio: 4 / 3;
    }
}

/* =========================================================================
   Blocos de conteúdo
   ========================================================================= */

/* Largura de leitura confortável para parágrafos longos centralizados */
.measure
{
    max-width: 46rem;
    margin-inline: auto;
}

.eyebrow
{
    margin-bottom: var(--sp-2);
    font-family: var(--f-head);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-green);
}

/* Tipografia idêntica ao Wix (variável --font_5 do site de referência):
   Nunito Sans em negrito, 25px, entrelinha 1.34 — não é o --fs-lead usado
   nos outros "leads" do site, é um tratamento específico dessa seção. */
.quote
{
    /* 812px é a largura real do bloco de texto no Wix — com o corpo maior
       (25px) a largura antiga (44rem/704px) quebrava uma linha a mais do
       que a proposta. */
    max-width: 812px;
    margin: var(--sp-6) auto;
    padding: 0;
    font-family: var(--f-head);
    font-weight: var(--fw-bold);
    font-size: 25px;
    line-height: 1.34;
}

.quote cite
{
    display: block;
    margin-top: var(--sp-3);
    font-size: var(--fs-small);
    font-style: normal;
    opacity: 0.85;
}

.quote--inlineCite cite
{
    display: inline;
    margin-top: 0;
    margin-left: var(--sp-2);
    font-size: inherit;
    opacity: 1;
}

.valueTrio
{
    margin-block: var(--sp-8);
}

/* O parágrafo de apoio ("O Dorcas é um ninho seguro...") usa --font_7 no
   Wix: Roboto normal, 18px/1.67 — diferente do --fs-lead (20px) que a classe
   .lead aplica no resto do site, por isso o ajuste fica só aqui. */
#homeBibleSection .lead
{
    font-family: var(--f-body);
    font-weight: var(--fw-body);
    font-size: 18px;
    line-height: 1.67;
}

/* "Projeto Dorcas em Curitiba..." também tem tipografia própria no Wix: o
   título usa --font_4 (Nunito Sans 800, como o h2 padrão) mas reduzido a
   25px só nesse bloco — nas outras seções o mesmo font_4 fica no tamanho
   cheio (34px, já é o --fs-h2 do site). O texto usa --font_8, 18px/1.75. */
#homeLocalPresenceSection h2
{
    font-size: 25px;
    line-height: 1.25;
}

#homeLocalPresenceSection .lead
{
    font-family: var(--f-body);
    font-weight: var(--fw-body);
    font-size: 18px;
    line-height: 1.75;
}

/* Carrossel de depoimentos: faixa azul de largura total.
   As setas e os marcadores nascem com [hidden] no HTML e só aparecem quando o
   site.js assume o controle — sem JavaScript os depoimentos ficam empilhados e
   todos legíveis. */
.quoteBand
{
    padding-block: var(--section-y);
    background: var(--c-blue);
    color: var(--c-on-dark);
}

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

.quoteBand__track
{
    flex: 1;
    min-width: 0;
}

.quoteBand__slide
{
    max-width: 52rem;
    margin-inline: auto;
    text-align: center;
}

.quoteBand__slide + .quoteBand__slide
{
    margin-top: var(--sp-7);
}

/* Aspas como na proposta, sem sujar as chaves de tradução com pontuação. */
.quoteBand__slide p:first-of-type::before
{
    content: "\201C";
}

.quoteBand__slide p:last-of-type::after
{
    content: "\201D";
}

.quoteBand__name
{
    margin-top: var(--sp-4);
    font-family: var(--f-head);
    font-weight: var(--fw-bold);
}

.quoteBand__arrow
{
    flex: none;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    cursor: pointer;
}

.quoteBand__arrow:hover
{
    background: rgb(255 255 255 / 0.18);
}

.quoteBand__arrow svg
{
    width: 1.1rem;
    height: 1.1rem;
}

.quoteBand__dots
{
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
}

.quoteBand__dots button
{
    width: 0.7rem;
    height: 0.7rem;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: none;
    color: inherit;
    cursor: pointer;
}

.quoteBand__dots button[aria-current="true"]
{
    background: currentColor;
}

/* Bloco em duas colunas: texto + imagem lateral */
.splitBlock
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--sp-7);
    align-items: center;
}

.splitBlock__aside
{
    max-width: 14rem;
    margin-inline: auto;
}

/* Faixa de cor em duas colunas com foto sangrando na borda.
   Usada na seção "Apoie o Dorcas" — no design de referência a faixa é azul. */
.bandSplit
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    background: var(--c-blue);
    color: var(--c-on-dark);
}

.bandSplit__text
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--section-y) var(--sp-7);
    margin-left: auto;
    max-width: calc(var(--container-wide) / 2);
}

.bandSplit__media
{
    position: relative;
    min-height: 22rem;
}

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

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

    .bandSplit__text
    {
        padding: var(--section-y) var(--gutter);
        max-width: none;
        text-align: center;
        align-items: center;
    }

    .bandSplit__media
    {
        min-height: 16rem;
        order: -1;
    }
}

/* Variantes da faixa dividida */
.bandSplit--light
{
    background: var(--c-surface);
    color: var(--c-text);
}

.bandSplit--alt
{
    background: var(--c-bg-alt);
    color: var(--c-text);
}

.bandSplit--green
{
    background: var(--c-green);
    color: var(--c-on-dark);
}

.bandSplit--gold
{
    background: var(--c-gold);
    color: var(--c-text);
}

/* Faixa sem foto: o texto ocupa a largura toda, centralizado no container */
.bandSplit--noMedia
{
    grid-template-columns: 1fr;
}

/* O segundo seletor vence a regra de .bandSplit--reverse, que zera a margem. */
.bandSplit--noMedia .bandSplit__text,
.bandSplit--noMedia.bandSplit--reverse .bandSplit__text
{
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.bandSplit--reverse .bandSplit__text
{
    margin-left: 0;
    margin-right: auto;
}

@media (max-width: 768px)
{
    .bandSplit--reverse .bandSplit__media
    {
        order: -1;
    }
}

/* Variante "moldura": usada em /wedo para as áreas de atuação. Na proposta
   cada faixa tem altura fixa (620px) e a foto não é full-bleed — é um
   quadrado de 430×430 com borda branca de 5px e sombra, tipo Polaroid,
   centralizado na sua metade da faixa. Medido pixel a pixel na captura de
   referência (design/shots/wedo_1440.png): toda faixa tem exatos 620px, a
   foto ocupa 430px com 95px de respiro acima/abaixo — por isso os números
   fixos abaixo, não tokens de espaçamento do resto do site.

   Testado contra a posição real da foto na captura (centro em x≈936 no lado
   com foto à direita, x≈531 à esquerda, viewport 1440) — com flex+conteúdo
   próprio ficou a poucos px disso; um grid 1fr/1fr chegava a ~170px longe,
   porque a coluna da foto era obrigada a abrir até 430px e alargava o bloco
   inteiro quase pra viewport toda.

   Na proposta as duas colunas (foto+texto) não se espalham pela viewport
   inteira — ficam dentro de um bloco central, então sobra bastante fundo
   colorido visível nas laterais. O fundo continua full-bleed (é a section);
   quem centraliza é o .bandSplit__inner. É flex, não grid: um grid 1fr/1fr
   força a coluna da foto a abrir até os 430px fixos da imagem, alargando o
   bloco inteiro de volta pra quase a viewport toda — o efeito que o usuário
   reportou. Com flex cada lado fica do tamanho do próprio conteúdo (foto
   430px de um lado, texto até 420px do outro) e o conjunto é que centraliza. */
.bandSplit--framed
{
    min-height: 620px;
    display: flex;
    align-items: center;
}

.bandSplit--framed .bandSplit__inner
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-6);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* 1024px, não 768px como o resto do site: a linha foto+texto desta variante
   (430px de foto + até 64px de padding + 420px de texto + gap) só cabe sem
   vazar a partir de ~1000px de largura — entre 768 e ~900px ela ainda tentava
   ficar lado a lado e transbordava da viewport (visível na varredura de
   responsividade do /wedo, faixa 780-900px). */
@media (max-width: 1024px)
{
    .bandSplit--framed .bandSplit__inner
    {
        flex-direction: column;
        gap: 0;
    }
}

/* Sem isso o texto herda margin-left:auto/max-width:600px do .bandSplit__text
   comum, feito pra um grid 50/50 — aqui, dentro de um flex centralizado, essa
   margem automática empurraria o texto pra fora do centro em vez de deixar o
   justify-content do .bandSplit__inner fazer o trabalho. 420px é perto da
   largura real do parágrafo na captura (quebra por volta de 380–400px). */
.bandSplit--framed .bandSplit__text
{
    margin: 0;
    max-width: 420px;
    padding-block: var(--sp-5);
}

.bandSplit--framed .bandSplit__media
{
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: var(--sp-6);
    flex-shrink: 0;
}

.bandSplit--framed .bandSplit__media img
{
    position: static;
    width: 430px;
    height: 430px;
    max-width: min(430px, 70vw);
    max-height: min(430px, 70vw);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 5px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

@media (max-width: 1024px)
{
    .bandSplit--framed
    {
        min-height: 0;
    }

    .bandSplit--framed .bandSplit__media
    {
        min-height: 0;
    }
}

/* =========================================================================
   Doação: chave PIX, QR Codes e blocos de pergunta/resposta
   ========================================================================= */

.pixKey
{
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    border: 0;
    border-radius: var(--r-pill);
    background: var(--c-surface);
    color: var(--c-text);
    font-family: var(--f-body);
    font-size: 1.0625rem;
    cursor: pointer;
    transition: background var(--t-base);
}

.pixKey:hover
{
    background: var(--c-bg-alt);
}

.pixKey.is-copied
{
    background: var(--c-gold);
}

.pixKey svg
{
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.qrGrid
{
    margin-top: var(--sp-6);
}

.qrCard
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    margin: 0;
    padding: var(--sp-4);
    background: var(--c-surface);
    border-radius: var(--r-card);
    color: var(--c-text);
}

.qrCard__label
{
    font-family: var(--f-head);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
}

.qrCard__code
{
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 11rem;
}

.qrCard__code img
{
    width: 100%;
    max-width: 11rem;
    height: auto;
    image-rendering: pixelated;
}

/* Linha ícone + pergunta/resposta (Lei de Incentivo) */
.faqRow
{
    display: flex;
    align-items: flex-start;
    gap: var(--sp-5);
    padding-block: var(--sp-5);
}

.faqRow + .faqRow
{
    border-top: 1px solid var(--c-border);
}

.faqRow__icon
{
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    color: var(--c-green);
}

.faqRow__icon svg
{
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
}

.faqRow h3
{
    margin-bottom: var(--sp-2);
    font-size: var(--fs-h4);
}

.faqRow ul
{
    margin-top: var(--sp-3);
}

/* Moldura de vídeo */
.videoFrame
{
    overflow: hidden;
    border-radius: var(--r-card);
    background: var(--c-text);
    box-shadow: var(--shadow-sm);
}

.videoFrame video
{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.videoFrame--portrait video
{
    aspect-ratio: 9 / 16;
}

/* Mesma moldura para os embeds do YouTube */
.videoFrame iframe
{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* Galeria com legenda por foto (memórias dos 30 anos) */
.figureGrid
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--sp-5);
}

.figureGrid figure
{
    margin: 0;
}

.figureGrid img,
.figureGrid video
{
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-card);
    background: var(--c-text);
}

.figureGrid figcaption
{
    margin-top: var(--sp-3);
    font-size: var(--fs-small);
    color: var(--c-text-muted);
}

/* Galeria de fotos: colunas de altura igual, recorte central */
.photoGrid
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--sp-4);
}

/* Fotos maiores, três por linha no desktop */
.photoGrid--large
{
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

/* Recorte central: as fotos vêm em retrato e paisagem misturados */
.photoGrid img
{
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-card);
    box-shadow: var(--shadow-sm);
}

/* Card de link para as páginas principais */
.linkCard
{
    display: block;
    padding: var(--sp-6);
    background: var(--c-surface);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-sm);
    color: var(--c-text);
    transition: transform var(--t-base), box-shadow var(--t-base);
}

.linkCard:hover
{
    transform: translateY(-3px);
    box-shadow: var(--shadow-soft);
    color: var(--c-text);
    text-decoration: none;
}

.linkCard h3
{
    margin-bottom: var(--sp-2);
    color: var(--c-green);
}

.linkCard__cta
{
    display: inline-block;
    margin-top: var(--sp-3);
    font-family: var(--f-head);
    font-weight: var(--fw-bold);
    color: var(--c-blue);
}

.linkCard__cta::after
{
    content: ' →';
}

/* =========================================================================
   Divisor "pincelada" — assinatura visual do design
   O traço é o mesmo asset da proposta: o SVG embutido nas variáveis
   --divider-bottom-image do Wix (ver design/docs/design-system.md), com os
   respingos de pincel seco que uma silhueta desenhada à mão não reproduz.
   Uso: <div class="divider divider--green"></div> antes da faixa colorida e
   <div class="divider divider--bg divider--flip"></div> depois dela.
   ========================================================================= */

/* Um divisor é sempre pintado com a cor da seção DE BAIXO e avança para cima
   sobre a seção anterior — é assim que a proposta monta as duas bordas da faixa
   verde. Sem a margem negativa a parte transparente da máscara mostra o fundo
   da página e abre uma faixa clara entre as seções. */
.divider
{
    /* Medidas da proposta: --divider-bottom-size 1203px 100%,
       --divider-bottom-height 50px, --divider-bottom-offset-x 0. O traço fica
       em px, não em %, porque esticá-lo na largura da viewport achataria os
       respingos até sumirem — a textura só lê no grão original. Em telas mais
       largas que o traço ele se repete, como no Wix; a emenda cai onde as duas
       pontas da pincelada têm quase a mesma altura e não aparece. */
    --divider-h: 50px;
    --divider-w: 1203px;
    --divider-x: 0px;

    position: relative;
    z-index: 1;
    height: var(--divider-h);
    margin-top: calc(-1 * var(--divider-h));
    color: var(--c-green);            /* currentColor pinta a máscara        */
    background: currentColor;
    /* Centrado, não ancorado à esquerda: é assim que o Wix posiciona o traço,
       e é o que mantém o mesmo trecho da pincelada no meio da tela em qualquer
       largura. */
    -webkit-mask: url(/img/divider-brush.svg) calc(50% + var(--divider-x)) bottom / var(--divider-w) 100% repeat-x;
    mask: url(/img/divider-brush.svg) calc(50% + var(--divider-x)) bottom / var(--divider-w) 100% repeat-x;
    pointer-events: none;
}

.divider--blue
{
    color: var(--c-blue);
}

.divider--bg
{
    color: var(--c-bg);
}

.divider--alt
{
    color: var(--c-bg-alt);
}

.divider--surface
{
    color: var(--c-surface);
}

.divider--gold
{
    color: var(--c-gold);
}

/* Borda de baixo da faixa: na proposta é o mesmo traço espelhado na horizontal
   e ampliado (--divider-bottom-size 1660px, height 69px, offset-x -724px), o
   que evita ver a mesma pincelada duas vezes na mesma tela. */
.divider--flip
{
    --divider-h: 69px;
    --divider-w: 1660px;
    --divider-x: -724px;

    transform: scaleX(-1);
}

/* =========================================================================
   Cards
   ========================================================================= */

.neoCard
{
    padding: var(--sp-6);
    background: var(--c-surface);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-sm);
}

.neoCard--flat
{
    box-shadow: none;
    border: 1px solid var(--c-bg-alt);
}

/* Frentes de atuação: cards azuis de canto reto, tudo centralizado */
.frontCard
{
    padding: var(--sp-6);
    background: var(--c-blue);
    color: var(--c-on-dark);
    text-align: center;
}

.frontCard h3
{
    margin-bottom: var(--sp-3);
}

.frontCard p:last-child
{
    margin-bottom: 0;
}

/* Card de estatística (fundo azul, ícone, número grande) */
/* Na proposta os cards são sempre quadrados de até 260×260 — não um
   retângulo que cresce com a largura da coluna do grid. justify-self centra
   o quadrado dentro da célula, que costuma ser mais larga que 260px.
   `width: min(260px, 100%)` + `aspect-ratio` (em vez de width/height fixos)
   deixa o quadrado encolher em telas estreitas, onde a célula da grade é
   menor que 260px — sem isso, o card mantinha o tamanho fixo e vazava da
   viewport (visível a partir de ~700px de largura, quando o .impactGrid
   já está em 2 ou 3 colunas mas a coluna disponível é menor que 260px). */
.statCard
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    width: min(260px, 100%);
    aspect-ratio: 1;
    padding: var(--sp-5);
    background: var(--c-blue);
    color: var(--c-on-dark);
    border-radius: var(--r-card);
    text-align: center;
    justify-self: center;
}

.statCard__icon
{
    width: 56px;
    height: 56px;
}

.statCard__icon svg
{
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
}

.statCard__value
{
    font-family: var(--f-head);
    font-size: 2rem;
    font-weight: var(--fw-black);
    line-height: 1.1;
}

.statCard__label
{
    font-size: 1rem;
    line-height: 1.35;
}

/* Selo que divide a grade com os cards, na primeira célula (ver about.php).
   Mesmo quadrado 260×260 dos cards ao lado — sem o fundo azul. */
.statCard__seal
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(260px, 100%);
    aspect-ratio: 1;
    margin: 0;
    justify-self: center;
}

.statCard__seal img
{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

/* Grade de impacto da home: 3 colunas fixas (duas linhas de 3 cards), sem o
   selo BTG misturado — ele fica isolado, centralizado, acima.
   `minmax(0, 1fr)` em vez de `1fr` puro: coluna `1fr` sozinha tem mínimo
   implícito "auto", e um item com largura em porcentagem (o `.statCard` usa
   `width: min(260px, 100%)` pra encolher em telas estreitas) não consegue
   resolver esse percentual contra uma coluna de tamanho ainda indefinido —
   o card ficava travado nos 260px fixos e vazava da grade. `minmax(0, 1fr)`
   dá um mínimo definido (zero) à coluna, permitindo o card encolher de
   verdade. */
.impactGrid
{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 640px)
{
    .impactGrid
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px)
{
    .impactGrid
    {
        grid-template-columns: 1fr;
    }
}

/* .pronacBox (caixa do PRONAC em /supporter) é do main.css antigo — `.pronacBox
   * { color: #fff }` pressupõe o fundo escuro que a seção tinha antes; a
   seção nova é clara. Sobrescreve aqui com especificidade maior (".pageHome"
   + ".pronacBox" vencem o empate contra o main.css, que carrega depois). */
.pageHome .pronacBox,
.pageHome .pronacBox *
{
    color: var(--c-text);
}

/* infoDorcas (/infodorcas) — só repintura de cor/tipografia em cima da
   estrutura e do JS atuais (barra de rolagem, setas, seleção por rádio);
   controles e conteúdo continuam intocados, por pedido explícito. */
#infoDorcasMain.bgLight
{
    background: var(--c-bg);
}

/* main,section{padding:3rem 8rem} do main.css antigo limitava a largura da
   barra de edições e do iframe a 128px de cada lado. Zera só o eixo
   horizontal aqui — o vertical continua, é só a largura que devia ir de
   ponta a ponta. */
#infoDorcasMain
{
    padding-inline: 0;
    margin-top: 0;
}

.pageHome .infoBtnBar
{
    background: var(--c-green);
}

.pageHome .btnBarButton
{
    background: var(--c-green);
    border-color: var(--c-green-dark);
    border-radius: var(--r-sm);
    font-family: var(--f-head);
}

#SheetButtons input[type=radio]:checked + label
{
    color: var(--c-blue);
}

.pageHome .btnSvg:hover
{
    background: var(--c-green);
}

/* Transparência (/transparency) — mesma ideia: só cor/tipografia em cima da
   estrutura atual (cardFrame/card/btnSlim/underBlue), sem tocar HTML. */
#transparencyMain.bgDark,
#transparencyFinancialSection.bgDark
{
    background: var(--c-green);
}

/* main.css antigo tem `main { margin-top: var(--navHeight) }` (60px),
   pensado pro cabeçalho fixo do design anterior. #transparencyMain é um
   <main> de verdade e ainda pegava essa margem — uma faixa branca entre o
   header e o fundo da seção, já que margem fica fora do background. */
#transparencyMain
{
    margin-top: 0;
}

#transparencyAgreementSection.bgLight
{
    background: var(--c-bg);
}

.pageHome #transparencyMain .underBlue,
.pageHome #transparencyAgreementSection .underBlue,
.pageHome #transparencyFinancialSection .underBlue
{
    border-bottom-color: var(--c-gold);
}

/* O reset de tipografia zera a margem de cima dos headings (:where(.pageHome)
   h1...h6), pensado pras páginas novas, que usam o padding da seção pra dar
   esse respiro. Esta página não foi reescrita — os <h4>/<h6> ainda dependem
   de uma margem de cima própria pra não colar no card anterior. Restaura
   aqui, só nela. */
.pageHome #transparencyMain h4,
.pageHome #transparencyMain h6,
.pageHome #transparencyAgreementSection h4,
.pageHome #transparencyFinancialSection h4,
.pageHome #transparencyFinancialSection h6
{
    margin-top: var(--sp-7);
}

.pageHome #transparencyMain .card,
.pageHome #transparencyAgreementSection .card,
.pageHome #transparencyFinancialSection .card
{
    border-color: var(--c-blue);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-sm);
}

.pageHome #transparencyMain .cardTitle,
.pageHome #transparencyAgreementSection .cardTitle,
.pageHome #transparencyFinancialSection .cardTitle
{
    font-family: var(--f-head);
    color: var(--c-green);
}

.pageHome #transparencyMain .btnGreen,
.pageHome #transparencyAgreementSection .btnGreen,
.pageHome #transparencyFinancialSection .btnGreen
{
    background-color: var(--c-green) !important;
    border-color: var(--c-green-dark) !important;
    border-radius: var(--r-pill) !important;
}

/* Como ajudar (/tohelp) — mesma ideia: só cor/tipografia em cima da
   estrutura, JS e partials de AJAX atuais (SheetButtons, PIX, cartão,
   IRPF), sem tocar em nada disso. */
#toHelpMain.bgLight,
#toHelpVolunteerSection.bgLight
{
    background: var(--c-bg);
}

/* Mesma faixa branca de main.css `main { margin-top: var(--navHeight) }` —
   #toHelpMain também é um <main> de verdade. */
#toHelpMain
{
    margin-top: 0;
}

#toHelpMoneySection.bgDark,
#thrifStoreSection.bgDark
{
    background: var(--c-green);
}

.pageHome #toHelpMain .borderedH1,
.pageHome #toHelpVolunteerSection .borderedH1,
.pageHome #thrifStoreSection .borderedH1
{
    font-family: var(--f-head);
}

.pageHome #toHelpMoneySection .btnBarButton,
.pageHome #toHelpMoneyContent .btnGreen
{
    background-color: var(--c-green) !important;
    border-color: var(--c-green-dark) !important;
    border-radius: var(--r-pill) !important;
    color: var(--c-on-dark) !important;
}

/* Aba selecionada: main.css tem `#SheetButtons input:checked+label {
   background-color:#fff; color:var(--clrBlue70) }`, de especificidade igual
   à minha regra de cor (perde o empate porque o main.css carrega depois) —
   por isso o texto continuava saindo na cor antiga em vez da nova, e ficava
   ilegível dependendo do fundo. Repete o seletor com !important pra não
   depender de empate. */
.pageHome #toHelpMoneySection #SheetButtons input[type=radio]:checked + label
{
    background-color: var(--c-surface) !important;
    color: var(--c-green) !important;
}

.pageHome #toHelpMoneyContent .btnBlue
{
    background-color: var(--c-blue) !important;
    border-radius: var(--r-pill) !important;
}

.pageHome #toHelpMoneyContent .btnCopy
{
    color: var(--c-green);
    font-family: var(--f-body);
}

.pageHome #toHelpMoneySection #SheetButtons .btnBarButton
{
    border-radius: var(--r-sm) !important;
}

/* Trio de valores: ícone de linha + rótulo */
.valueItem
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    text-align: center;
}

.valueItem__icon
{
    width: 72px;
    height: 72px;
}

.valueItem__icon svg
{
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
}

.valueItem__label
{
    font-family: var(--f-head);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
}

/* Na home os três rótulos (Serviço/Transformação/Dignidade) usam o mesmo
   --font_5 do Wix (25px/1.34, ver .quote acima) — maior que o --fs-h4
   padrão do componente. */
#homeBibleSection .valueItem__label
{
    font-size: 25px;
    line-height: 1.34;
}

/* =========================================================================
   Abas
   ========================================================================= */

.tabs
{
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
}

.tabs__btn
{
    flex: 1 1 10rem;
    padding: var(--sp-3) var(--sp-5);
    border: 0;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    background: var(--c-text-soft);
    color: var(--c-on-dark);
    font-family: var(--f-head);
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: background var(--t-base);
}

.tabs__btn[aria-selected="true"]
{
    background: var(--c-green);
}

.tabs__panel[hidden]
{
    display: none;
}

.tabs__panel
{
    padding: var(--sp-6);
    background: var(--c-bg-alt);
    border-radius: 0 0 var(--r-sm) var(--r-sm);
}

/* =========================================================================
   Acordeão (FAQ)
   ========================================================================= */

.accordion__item
{
    border-bottom: 1px solid var(--c-border);
}

.accordion__trigger
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    width: 100%;
    padding: var(--sp-4) 0;
    border: 0;
    background: transparent;
    font-family: var(--f-head);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    text-align: left;
    cursor: pointer;
}

.accordion__trigger::after
{
    content: '';
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--c-green);
    border-bottom: 2px solid var(--c-green);
    transform: rotate(45deg);
    transition: transform var(--t-base);
}

.accordion__trigger[aria-expanded="true"]::after
{
    transform: rotate(-135deg);
}

.accordion__panel
{
    padding-bottom: var(--sp-5);
}

.accordion__panel[hidden]
{
    display: none;
}

/* Variante em caixas, usada nas perguntas frequentes */
.accordion--boxed
{
    display: grid;
    gap: var(--sp-3);
}

.accordion--boxed .accordion__item
{
    padding-inline: var(--sp-5);
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
}

/* Cabeçalho das perguntas frequentes: título à esquerda, busca à direita */
.faqHead
{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}

.faqHead h1
{
    margin-bottom: 0;
}

/* Nasce com [hidden]: sem JavaScript o filtro não funcionaria e o campo só
   enganaria quem digitasse nele. */
.faqSearch
{
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 16rem;
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--c-border);
    color: var(--c-text-muted);
}

.faqSearch input
{
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--c-text);
}

.faqSearch input:focus
{
    outline: none;
}

.faqSearch:focus-within
{
    border-bottom-color: var(--c-blue);
}

.faqSearch svg
{
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
}

.faqEmpty[hidden]
{
    display: none;
}

/* =========================================================================
   Formulários
   ========================================================================= */

.formStack
{
    display: grid;
    gap: var(--sp-4);
    text-align: left;
}

.formStack > label
{
    display: grid;
    gap: var(--sp-2);
}

.formStack > label > span
{
    font-family: var(--f-head);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
}

.formStack input[type="email"],
.formStack input[type="text"]
{
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    background: var(--c-surface);
}

/* Coluna estreita do opt-in: nada compete com o formulário */
.optinColumn
{
    max-width: 30rem;
    margin-inline: auto;
}

.optinLanguages
{
    margin: 0;
    padding: 0;
    border: 0;
}

.optinLanguages legend
{
    padding: 0;
    font-family: var(--f-head);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
}

/* Grupo de caixas de seleção lado a lado (idiomas do infoDorcas) */
.checkGrid
{
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-5);
    margin-top: var(--sp-2);
}

.checkGrid label
{
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* Resultado do envio */
.notice
{
    padding: var(--sp-4) var(--sp-5);
    border-left: 4px solid var(--c-border);
    border-radius: var(--r-sm);
    background: var(--c-bg-alt);
    text-align: left;
}

.notice--success
{
    border-left-color: var(--c-green);
}

.notice--error
{
    border-left-color: var(--c-danger);
}

/* =========================================================================
   Linha do tempo (30 anos)
   ========================================================================= */

/* No celular a linha fica na borda esquerda com o ano acima do texto; a partir
   de 48em o ano ganha coluna própria à esquerda da linha. */
.timeline
{
    margin: 0;
    padding: 0;
    list-style: none;
}

.timeline__item
{
    position: relative;
    padding: 0 0 var(--sp-7) var(--sp-6);
    border-left: 2px solid var(--c-border);
}

.timeline__item:last-child
{
    border-left-color: transparent;
}

.timeline__item::before
{
    content: '';
    position: absolute;
    top: 0.5rem;
    left: -0.5rem;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: var(--c-blue);
}

.timeline__year
{
    display: block;
    font-family: var(--f-head);
    font-size: var(--fs-h3);
    font-weight: var(--fw-black);
    line-height: 1.2;
    color: var(--c-blue);
}

.timeline__label
{
    display: block;
    margin-bottom: var(--sp-3);
    font-family: var(--f-head);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}

.timeline__item p:last-child
{
    margin-bottom: 0;
}

@media (min-width: 48em)
{
    .timeline__item
    {
        margin-left: 7rem;
    }

    .timeline__year
    {
        position: absolute;
        top: 0;
        left: calc(var(--sp-6) * -1 - 7rem);
        width: 6rem;
        text-align: right;
    }
}

/* =========================================================================
   Histórias
   ========================================================================= */

.storyGrid
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--sp-5);
}

.neoStoryCard
{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    background: var(--c-surface);
}

.neoStoryCard video
{
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--c-text);
    object-fit: cover;
}

.neoStoryCard__body
{
    padding: var(--sp-5);
}

.neoStoryCard__body h2
{
    margin-bottom: var(--sp-2);
    font-size: var(--fs-h4);
}

.neoStoryCard__year
{
    margin-left: var(--sp-2);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    color: var(--c-text-muted);
}

.neoStoryCard__body p:last-child
{
    margin-bottom: 0;
}

/* =========================================================================
   infoDorcas
   ========================================================================= */

/* Moldura da edição. A altura inicial evita um salto grande quando o site.js
   mede o conteúdo do iframe. */
.infoFrame
{
    overflow: hidden;
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    background: var(--c-surface);
}

.infoFrame iframe
{
    display: block;
    width: 100%;
    min-height: 60rem;
    border: 0;
}

/* Índice das edições */
.editionList
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
    gap: var(--sp-2) var(--sp-4);
    margin: 0 0 var(--sp-6);
    padding: 0;
    list-style: none;
}

.editionList a
{
    display: block;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-pill);
    text-decoration: none;
}

.editionList a:hover
{
    background: var(--c-surface);
}

.editionList a[aria-current="page"]
{
    background: var(--c-blue);
    color: var(--c-on-dark);
}

/* =========================================================================
   Grade de logos (apoiadores)
   ========================================================================= */

/* No Wix cada logo mora numa célula de 206×120px — bem maior que os 9rem/
   4.5rem (144×72px) daqui, que deixavam os logos nitidamente menores que na
   proposta. 13rem/7.5rem reproduz a célula do Wix (e o mesmo número de
   colunas por linha: 5, em vez de 6-7 que o valor antigo cabia). */
.logoGrid
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--sp-6);
    align-items: center;
    justify-items: center;
}

/* Altura fixa da célula: reserva o espaço antes do logo carregar, evitando
   que a grade "pule" enquanto as imagens chegam. */
.logoGrid a
{
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 7.5rem;
}

/* No design de referência os logos aparecem coloridos, sem filtro. */
.logoGrid img
{
    max-height: 7.5rem;
    width: auto;
    object-fit: contain;
    transition: transform var(--t-base);
}

.logoGrid a:hover img
{
    transform: scale(1.06);
}

/* Linha separando os grupos de logos, como no design */
.logoSection + .logoSection .container
{
    padding-top: var(--sp-7);
    border-top: 1px solid var(--c-border);
}

/* Bloco com os dados do PRONAC */
.neoPronacBox
{
    max-width: 40rem;
    margin: var(--sp-6) auto 0;
    padding: var(--sp-5) var(--sp-6);
    background: var(--c-bg-alt);
    border-radius: var(--r-card);
    font-size: 1rem;
}

.neoPronacBox p
{
    margin-bottom: var(--sp-2);
}

/* =========================================================================
   Blocos de documentos (transparência)
   Rótulo da seção à esquerda, itens à direita — como no design de referência.
   ========================================================================= */

.docSection
{
    padding-block: var(--section-y);
    background: var(--c-surface);
}

.docSection--alt
{
    background: #F2F2F2;
}

.docSection__inner
{
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr);
    gap: var(--sp-7);
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.docSection__inner + .docSection__inner
{
    margin-top: var(--sp-8);
}

.docSection__label h1,
.docSection__label h2
{
    margin-bottom: var(--sp-2);
}

.docSection__label p
{
    color: var(--c-text-muted);
}

.docSection__items
{
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

.docItem h3
{
    margin-bottom: var(--sp-1);
    font-size: var(--fs-h4);
}

.docItem p
{
    margin-bottom: var(--sp-3);
    font-size: 1rem;
    color: var(--c-text-muted);
}

.docItem .btn
{
    min-height: 40px;
    padding: var(--sp-2) var(--sp-5);
    font-size: 0.9375rem;
}

.docItem .btn svg
{
    width: 18px;
    height: 18px;
}

.docItem--plain p
{
    margin-bottom: 0;
    color: var(--c-text);
}

@media (max-width: 768px)
{
    .docSection__inner
    {
        grid-template-columns: 1fr;
        gap: var(--sp-5);
    }
}

/* =========================================================================
   Lista de documentos (variante simples)
   ========================================================================= */

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

.docList li + li
{
    margin-top: var(--sp-2);
}

.docList a
{
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: var(--c-surface);
    border-radius: var(--r-sm);
    color: var(--c-text);
    box-shadow: var(--shadow-sm);
}

.docList a:hover
{
    color: var(--c-green);
    text-decoration: none;
}

.docList svg
{
    flex: 0 0 auto;
    width: 24px;
    height: 36px;
}

/* =========================================================================
   Rodapé
   ========================================================================= */

.siteFooter
{
    /* main.css antigo tem `footer { display:flex; flex-wrap:wrap;
       justify-content:space-between; padding:2rem; gap:1rem }` — como esta
       regra nunca competia em nenhuma propriedade (só padding-block era
       redefinido aqui), display/gap/padding-inline continuavam do rodapé
       antigo. Isso fazia `.siteFooter__inner` virar item flex (largura por
       conteúdo, não 100% do container) em vez de bloco normal, e a grade
       auto-fit lá dentro calculava colunas largas demais, estourando a
       página horizontalmente a partir de ~588px de largura. Reclama todas
       as propriedades que a regra antiga define, mesmo repetindo o valor
       que já seria o padrão do navegador. */
    display: block;
    flex-wrap: unset;
    justify-content: unset;
    gap: unset;
    background: var(--c-footer);
    color: var(--c-on-dark);
    padding: var(--section-y-sm) 0;
}

.siteFooter__logo img
{
    width: auto;
    height: 34px;
    margin-bottom: var(--sp-5);
}

.siteFooter__inner
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--sp-6);
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.siteFooter__title
{
    margin-bottom: var(--sp-4);
    font-family: var(--f-head);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
}

.siteFooter a:not(.btn)
{
    color: var(--c-on-dark);
    text-decoration: none;
}

.siteFooter a:not(.btn):hover
{
    text-decoration: underline;
}

.siteFooter__row
{
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.siteFooter__row svg
{
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 3px;
}

.siteFooter__links a
{
    display: block;
    margin-bottom: var(--sp-2);
}

.siteFooter__social
{
    display: flex;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}

.siteFooter__social a
{
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
}

.siteFooter__social a:hover
{
    background: rgba(255, 255, 255, 0.3);
}

.siteFooter__social svg
{
    width: 22px;
    height: 22px;
}

.siteFooter__bottom
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-3);
    max-width: var(--container-wide);
    margin-inline: auto;
    margin-top: var(--sp-6);
    padding: var(--sp-4) var(--gutter) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: var(--fs-small);
}

/* Selo/texto dos 30 anos, dentro da grade do rodapé */
.siteFooter__anniversary
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
}

.siteFooter__anniversary img
{
    width: 90px;
    height: auto;
}

.siteFooter__anniversary p
{
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--fs-small);
}

/* Atalhos rápidos para a página de FAQ, no rodapé */
.siteFooter__faq
{
    max-width: var(--container-wide);
    margin: var(--sp-6) auto 0;
    padding: var(--sp-5) var(--gutter) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.siteFooter__faqGrid
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--sp-3);
}

@media (max-width: 480px)
{
    .siteFooter__faqGrid
    {
        grid-template-columns: 1fr;
    }
}

.siteFooter__faqGrid a
{
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--r-card);
    font-size: var(--fs-small);
    transition: background .2s ease;
}

.siteFooter__faqGrid a:hover
{
    background: rgba(255, 255, 255, 0.16);
    text-decoration: none !important;
}

.siteFooter__faqGrid svg
{
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

/* No mobile o .floatBtns (fixed, canto inferior direito) sobrepõe o título
   e os links do FAQ do rodapé, que também ficam encostados na direita. Abre
   espaço pra coluna de botões (56px + 16px de margem, + folga) só onde
   colide — o resto do rodapé não precisa disso. */
@media (max-width: 640px)
{
    .siteFooter__faq
    {
        padding-right: 96px;
    }
}

/* =========================================================================
   Botões flutuantes (WhatsApp / topo / doar)
   ========================================================================= */

.floatBtns
{
    position: fixed;
    right: var(--sp-4);
    bottom: var(--sp-4);
    z-index: var(--z-totop);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.floatBtns a,
.floatBtns button
{
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    /* main.css antigo tem `button { padding: 0 1.5rem; font-size: 1.7rem;
       line-height: 3rem; ... }`, sem !important mas nunca contestado aqui —
       <a> não tem padding padrão do navegador, então só o <button>
       (backToTop) sofria, espremendo o espaço pro ícone. */
    padding: 0;
    font-size: initial;
    line-height: initial;
    border: 0;
    border-radius: 50%;
    background: var(--c-green);
    color: var(--c-on-dark);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.floatBtns svg,
.floatBtns img
{
    width: 26px;
    height: 26px;
}

.floatBtns .is-hidden
{
    display: none;
}