/* Página inicial - Associação Tocando em Frente (versão aprovada em /novo/).
   O inicio-estilo.css antigo continua no servidor: a página /materiais usa ele.
   Temas: claro (padrão), alto-contraste, escuro, pelo atributo data-theme da tag html.
   Cores da marca (tiradas do logo): azul #2B3898, amarelo #FEE103, laranja #FAB80A, vermelho #D72825.
   Fonte da marca (manual do logo): Asap, a mesma do SIGTEF. */

@font-face {
    font-family: 'Asap';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('inicio-asap.woff2') format('woff2');
}

/* ---------- Tokens: cada tema troca só estes valores ---------- */
:root {
    color-scheme: light;
    --cor-fundo: #FFFFFF;
    --cor-fundo-alt: #F3F4F9;
    --cor-superficie: #FFFFFF;
    --cor-texto: #12163A;
    --cor-texto-suave: #454B6B;
    --cor-borda: #D3D6E6;          /* decorativa (contorno de cartão) */
    --cor-borda-forte: #5A6090;    /* controles: 3:1 ou mais sobre o fundo */
    --cor-link: #2B3898;
    --cor-primaria: #2B3898;
    --cor-primaria-hover: #1E2873;
    --cor-primaria-texto: #FFFFFF;
    --cor-escura: #161C4F;         /* hero e rodapé */
    --cor-escura-texto: #FFFFFF;
    --cor-escura-suave: #D5D9F2;
    --cor-escura-link: #FEE103;
    --cor-destaque: #FEE103;
    --cor-destaque-texto: #161C4F;
    --cor-foco: #12163A;
    --cor-foco-halo: #FEE103;
    --cor-erro: #A3201D;
    --sombra: 0 1px 2px rgba(18, 22, 58, 0.06), 0 12px 28px -16px rgba(18, 22, 58, 0.28);

    --fonte: 'Asap', 'Segoe UI', Verdana, Arial, sans-serif;
    --raio: 1rem;
    --esp-1: 0.5rem;
    --esp-2: 1rem;
    --esp-3: 1.5rem;
    --esp-4: 2rem;
    --esp-6: 3rem;
    --largura: 72rem;
}

html[data-theme="escuro"] {
    color-scheme: dark;
    --cor-fundo: #11142B;
    --cor-fundo-alt: #171B38;
    --cor-superficie: #1D2246;
    --cor-texto: #ECEEF8;
    --cor-texto-suave: #C3C8E0;
    --cor-borda: #343B68;
    --cor-borda-forte: #8C93C4;
    --cor-link: #B9C2FF;
    --cor-primaria: #FEE103;
    --cor-primaria-hover: #FFF07A;
    --cor-primaria-texto: #11142B;
    --cor-escura: #0A0D22;
    --cor-escura-texto: #FFFFFF;
    --cor-escura-suave: #C3C8E0;
    --cor-escura-link: #FEE103;
    --cor-destaque: #FEE103;
    --cor-destaque-texto: #0A0D22;
    --cor-foco: #FEE103;
    --cor-foco-halo: #11142B;
    --cor-erro: #FFB4A9;
    --sombra: 0 12px 28px -16px rgba(0, 0, 0, 0.7);
}

html[data-theme="alto-contraste"] {
    color-scheme: dark;
    --cor-fundo: #000000;
    --cor-fundo-alt: #000000;
    --cor-superficie: #000000;
    --cor-texto: #FFFF00;
    --cor-texto-suave: #FFFF00;
    --cor-borda: #FFFF00;
    --cor-borda-forte: #FFFF00;
    --cor-link: #00FFFF;
    --cor-primaria: #FFFF00;
    --cor-primaria-hover: #FFFFFF;
    --cor-primaria-texto: #000000;
    --cor-escura: #000000;
    --cor-escura-texto: #FFFF00;
    --cor-escura-suave: #FFFF00;
    --cor-escura-link: #00FFFF;
    --cor-destaque: #FFFF00;
    --cor-destaque-texto: #000000;
    --cor-foco: #FFFFFF;
    --cor-foco-halo: #000000;
    --cor-erro: #FFFF00;
    --sombra: none;
}

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

html {
    font-size: 100%; /* respeita o tamanho de fonte escolhido no navegador */
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    margin: 0;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: var(--fonte);
    font-size: 1.125rem; /* 18px, também no celular */
    line-height: 1.6;
    overflow-wrap: break-word;
}

h1, h2, h3 {
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 var(--esp-2);
}

h2 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); letter-spacing: -0.01em; }
h3 { font-size: 1.3rem; margin-bottom: var(--esp-1); }

p, li { max-width: 68ch; }

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

.container {
    max-width: var(--largura);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2rem);
}

/* ---------- Links e foco ---------- */
a {
    color: var(--cor-link);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 0.08em;
}

a:hover { text-decoration-thickness: 0.18em; }

/* Foco em duas cores: aparece em fundo claro e em fundo escuro */
:focus-visible {
    outline: 3px solid var(--cor-foco);
    outline-offset: 3px;
    box-shadow: 0 0 0 7px var(--cor-foco-halo);
}

main:focus { outline: none; }

.pular {
    position: absolute;
    left: 1rem;
    top: -10rem;
    z-index: 10;
    padding: 0.75rem 1rem;
    background: var(--cor-destaque);
    color: var(--cor-destaque-texto);
    font-weight: 700;
    border-radius: 0.5rem;
}

.pular:focus { top: 1rem; }

/* Texto lido pelo leitor de tela, mas fora da tela */
.somente-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Botões (links com cara de botão e botões de verdade) ---------- */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    min-height: 2.75rem; /* 44px */
    padding: 0.55rem 1.25rem;
    border: 2px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.botao:hover { text-decoration: underline; }

.botao--primario {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: var(--cor-primaria-texto);
}

.botao--primario:hover {
    background: var(--cor-primaria-hover);
    border-color: var(--cor-primaria-hover);
}

.botao--contorno {
    background: var(--cor-superficie);
    border-color: var(--cor-borda-forte);
    color: var(--cor-texto);
}

.botao--contorno:hover { border-color: var(--cor-link); }

/* Botão do WhatsApp (eventos e "Fale conosco"): ícone, o que faz e o número embaixo */
.botao-whatsapp {
    gap: 0.65em;
    justify-content: flex-start;
    text-align: left;
    padding-left: 1rem;
}

.botao-whatsapp svg {
    flex: none;
    width: 1.6em;
    height: 1.6em;
}

.botao-whatsapp__texto {
    display: flex;
    flex-direction: column;
}

.botao-whatsapp__numero {
    font-size: 0.95em;
    font-weight: 400;
}

.botao--destaque {
    background: var(--cor-destaque);
    border-color: var(--cor-destaque);
    color: var(--cor-destaque-texto);
}

.botao--claro {
    background: transparent;
    border-color: var(--cor-escura-texto);
    color: var(--cor-escura-texto);
}

.acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-2) var(--esp-3);
    max-width: none;
}

@media (prefers-reduced-motion: no-preference) {
    .botao, .cartao { transition: background-color 0.15s, border-color 0.15s, transform 0.15s; }
}

/* ---------- Cabeçalho ---------- */
.aviso-teste {
    margin: 0;
    max-width: none;
    padding: 0.4rem 1rem;
    background: var(--cor-destaque);
    color: var(--cor-destaque-texto);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
}

.aviso-teste a { color: inherit; }

.topo { background: var(--cor-fundo); }

.topo__linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-2) var(--esp-3);
    padding-top: var(--esp-2);
    padding-bottom: var(--esp-2);
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--cor-texto);
    text-decoration: none;
    font-weight: 700;
    line-height: 1.15;
    margin-right: auto;
}

.marca img { width: 4.5rem; }

.marca__nome { font-size: 1.2rem; }

.marca__linha1 {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cor-texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.marca:hover .marca__nome { text-decoration: underline; }

.menu {
    flex-basis: 100%;
    border-top: 1px solid var(--cor-borda);
    padding-top: 0.5rem;
}

.menu ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.4rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--cor-texto);
    font-weight: 600;
    text-decoration: none;
}

.menu a:hover {
    background: var(--cor-fundo-alt);
    text-decoration: underline;
}

.topo__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Botão "Menu": só aparece no celular e só com JavaScript (sem JavaScript o menu fica sempre aberto) */
.menu-botao { display: none; }

.menu-botao__icone,
.menu-botao__icone::before,
.menu-botao__icone::after {
    display: block;
    width: 1.1rem;
    height: 2px;
    background: currentColor;
}

.menu-botao__icone { position: relative; }

.menu-botao__icone::before,
.menu-botao__icone::after {
    content: "";
    position: absolute;
    left: 0;
}

.menu-botao__icone::before { top: -6px; }
.menu-botao__icone::after { top: 6px; }

@media (max-width: 64rem) {
    .com-js .menu-botao {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        min-height: 2.75rem;
        padding: 0.5rem 1rem;
        border: 2px solid var(--cor-borda-forte);
        border-radius: 999px;
        background: var(--cor-superficie);
        color: var(--cor-texto);
        font: inherit;
        font-weight: 700;
        cursor: pointer;
    }

    .com-js .menu-botao[aria-expanded="false"] ~ .menu { display: none; }

    .menu ul { flex-direction: column; }

    .menu a { width: 100%; }
}

/* Faixa com as cores do logo, abaixo do cabeçalho (só enfeite) */
.faixa-marca {
    height: 6px;
    background: linear-gradient(90deg,
        #D72825 0 25%, #FAB80A 25% 50%, #FEE103 50% 75%, #2B3898 75% 100%);
}

html[data-theme="alto-contraste"] .faixa-marca { display: none; }

/* ---------- Hero ---------- */
.hero {
    background: var(--cor-escura);
    color: var(--cor-escura-texto);
    padding: clamp(3rem, 8vw, 6rem) 0;
}

.hero a:not(.botao) { color: var(--cor-escura-link); }

.hero__grade {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--esp-4);
}

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

.hero__instituicao {
    display: block;
    margin-bottom: var(--esp-2);
    color: var(--cor-escura-link);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hero__chamada {
    display: block;
    font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.hero__apoio {
    margin: 0 0 var(--esp-4);
    color: var(--cor-escura-suave);
    font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
}

/* O manual da marca pede o logo colorido sobre fundo branco: por isso o círculo branco */
.hero__simbolo {
    justify-self: center;
    display: grid;
    place-items: center;
    width: min(100%, 22rem);
    aspect-ratio: 1;
    padding: 12%;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.08), 0 0 0 28px rgba(255, 255, 255, 0.04);
}

html[data-theme="alto-contraste"] .hero__simbolo {
    box-shadow: none;
    border: 3px solid #FFFF00;
}

@media (max-width: 48rem) {
    .hero__grade { grid-template-columns: minmax(0, 1fr); }
    .hero__simbolo { display: none; } /* enfeite: no celular, o texto vem primeiro e sozinho */
}

/* ---------- Seções ---------- */
.secao { padding: clamp(3rem, 7vw, 5.5rem) 0; }

.secao--alt { background: var(--cor-fundo-alt); }

.secao__intro {
    margin: 0 0 var(--esp-4);
    color: var(--cor-texto-suave);
    font-size: 1.2rem;
}

.cartao {
    padding: var(--esp-3);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: var(--cor-superficie);
    box-shadow: var(--sombra);
}

html[data-theme="alto-contraste"] .cartao { border-width: 2px; }

.cartao p { margin: 0.4rem 0; }

.cartao__categoria {
    color: var(--cor-texto-suave);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cartao .cartao__acao { margin-top: var(--esp-2); font-weight: 700; }

/* Caminhos: 3 cartões com a cor da marca no topo (enfeite; o texto diz tudo) */
.caminhos,
.contatos,
.numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--esp-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.caminhos li,
.contatos li,
.numeros li { max-width: none; }

.caminho { border-top: 6px solid var(--cor-primaria); }
.caminho--participar { border-top-color: #D72825; }
.caminho--ajudar { border-top-color: #FAB80A; }
.caminho--orientacao { border-top-color: #2B3898; }

html[data-theme="alto-contraste"] .caminho { border-top-color: #FFFF00; }

.cartao .caminho__links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: var(--esp-2);
    font-weight: 700;
}

.caminho__links a {
    display: inline-block;
    padding: 0.35rem 0; /* área de toque de 24px ou mais (WCAG 2.5.8) */
}

/* Quem somos */
.sobre__grade {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--esp-6);
    align-items: start;
}

@media (max-width: 52rem) {
    .sobre__grade { grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); }
}

.destaque {
    font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
    font-weight: 700;
    color: var(--cor-link);
}

.numeros { grid-template-columns: minmax(0, 1fr); gap: var(--esp-2); }

.numeros li {
    padding: var(--esp-3);
    border-left: 6px solid var(--cor-destaque);
    border-radius: 0 var(--raio) var(--raio) 0;
    background: var(--cor-superficie);
    color: var(--cor-texto-suave);
}

html[data-theme="claro"] .numeros li { border-left-color: #FAB80A; }

.numero {
    display: block;
    color: var(--cor-texto);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.15;
}

/* Listas automáticas (oficinas e eventos) */
.lista-cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--esp-3);
    margin: 0 0 var(--esp-4);
}

/* Mensagens (carregando, sem itens, erro) ocupam a linha toda */
.lista-cartoes > .estado {
    grid-column: 1 / -1;
    margin: 0;
    padding: var(--esp-3);
    border: 2px dashed var(--cor-borda-forte);
    border-radius: var(--raio);
}

.lista-cartoes > .estado--erro { border-color: var(--cor-erro); }

/* Como participar: lista numerada de verdade, só com o número maior */
.passos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--esp-3);
    margin: 0 0 var(--esp-3);
    padding: 0 0 0 1.75rem;
}

.passos li {
    padding: var(--esp-2) var(--esp-2) var(--esp-2) var(--esp-1);
}

.passos li::marker {
    color: var(--cor-link);
    font-size: 1.6rem;
    font-weight: 700;
}

.nota {
    padding: var(--esp-2) var(--esp-3);
    border-radius: var(--raio);
    background: var(--cor-superficie);
    border: 2px solid var(--cor-borda-forte);
}

/* Como apoiar */
.apoio__grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--esp-3);
    align-items: start;
}

@media (max-width: 56rem) {
    .apoio__grade { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Pix ---------- */
.pix {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-2) var(--esp-4);
    align-items: flex-start;
    margin-top: var(--esp-2);
}

.pix__qr {
    margin: 0;
    max-width: 15rem;
}

/* Fundo branco em todos os temas: a câmera do banco precisa do contraste original */
.pix__qr img {
    display: block;
    width: 13rem;
    max-width: 100%;
    padding: 0.5rem;
    background: #FFFFFF;
    border: 2px solid var(--cor-borda-forte);
    border-radius: 0.75rem;
}

.pix__qr figcaption {
    margin-top: 0.5rem;
    font-size: 1rem;
    color: var(--cor-texto-suave);
}

.pix__textos {
    flex: 1 1 16rem;
    min-width: 0;
}

.pix__textos textarea {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.5rem;
    border: 2px solid var(--cor-borda-forte);
    border-radius: 0.5rem;
    background: var(--cor-superficie);
    color: var(--cor-texto);
    font: inherit;
    font-size: 1rem;
    word-break: break-all;
    resize: vertical;
}

.aviso-copia {
    margin: 0;
    font-weight: 700;
}

@media (max-width: 40rem) {
    .pix__textos textarea { min-height: 9em; }
}

/* ---------- Rodapé ---------- */
.rodape {
    background: var(--cor-escura);
    color: var(--cor-escura-suave);
    padding-top: var(--esp-6);
}

.rodape a { color: var(--cor-escura-link); }

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

.rodape__nome {
    margin-top: 0;
    color: var(--cor-escura-texto);
    font-size: 1.3rem;
    font-weight: 700;
}

.rodape__titulo {
    color: var(--cor-escura-texto);
    font-size: 1.15rem;
}

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

.rodape li a,
.rodape__base a {
    display: inline-block;
    padding: 0.3rem 0; /* área de toque de 24px ou mais */
}

.rodape__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 var(--esp-3);
    padding-top: var(--esp-2);
    padding-bottom: var(--esp-3);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 1rem;
}

html[data-theme="alto-contraste"] .rodape__base { border-top-color: #FFFF00; }

/* ---------- Modo de alto contraste do Windows: bordas e foco visíveis ---------- */
@media (forced-colors: active) {
    .botao,
    .menu-botao,
    .cartao,
    .numeros li,
    .nota {
        border: 2px solid ButtonText;
    }

    :focus-visible { outline: 3px solid Highlight; }

    .menu-botao__icone,
    .menu-botao__icone::before,
    .menu-botao__icone::after { background: ButtonText; }
}

/* A chave Pix é um e-mail longo, sem espaços: quebra a linha em vez de passar da tela */
#pix-chave { overflow-wrap: anywhere; }