/* =====================================================================
   Paróquia Auxiliadora dos Cristãos — folha de estilo única

   Uma folha só para o site e para as inscrições: são o mesmo site, e
   duas folhas divergem com o tempo.

   Sem Bootstrap, sem Google Fonts, sem ícone de CDN. O público abre isto
   no celular, muitas vezes com sinal fraco — cada requisição a outro
   domínio é uma chance de a página não carregar.

   Ordem do arquivo: variáveis, base, layout, seções e — por último —
   componentes. Isso importa: componente e seção têm a mesma
   especificidade, e quem vem depois vence. Ver "armadilha do contraste".
   ===================================================================== */

:root {
    /* Paleta tirada do BRASÃO da paróquia, medida pixel a pixel — não
       escolhida a olho:

         #3253C7  azul do fundo do brasão
         #ECD377  ouro da mitra
         #C23E32  vermelho da cruz

       O azul oficial já dá 6,57:1 com texto branco, então entra puro,
       sem precisar escurecer. As variações abaixo foram calculadas até
       atingirem o contraste alvo, não estimadas. */
    --primaria:        #3253c7;   /* branco sobre ele: 6,57:1 */
    --primaria-escura: #27409a;   /* branco sobre ele: 9,19:1 */
    --primaria-clara:  #e9ecf7;   /* texto sobre ela: 12,87:1 */

    /* Dois dourados de propósito: o do brasão é claro e serve de enfeite
       — filete, contorno de foco. Como TEXTO ele dá 1,48:1 no branco, o
       que é ilegível; para palavra escrita existe o escuro. */
    --dourado:         #ecd377;
    --dourado-escuro:  #897013;   /* sobre branco: 4,78:1 */

    /* Vermelho da cruz do brasão. Reservado para detalhe — não é o
       vermelho de erro, que precisa ser mais escuro para ler bem. */
    --vermelho-brasao: #c23e32;

    --clara:           #fcfbf5;   /* creme quente, derivado do ouro */
    --branco:          #ffffff;
    --texto:           #23262b;
    --texto-suave:     #5c574c;
    --borda:           #e4ddcd;
    --verde:           #0f5132;
    --verde-fundo:     #d1e7dd;
    --amarelo-fundo:   #fff3cd;
    --amarelo-texto:   #664d03;
    --vermelho:        #842029;
    --vermelho-fundo:  #f8d7da;

    --fonte-titulo: Georgia, 'Times New Roman', serif;
    --fonte-texto:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    --raio: 10px;
    --sombra: 0 1px 3px rgba(0, 0, 0, .08);
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--fonte-texto);
    font-size: 17px;
    line-height: 1.65;
    color: var(--texto);
    background: var(--clara);
}

h1, h2, h3, h4 {
    font-family: var(--fonte-titulo);
    line-height: 1.25;
    margin: 0 0 .6rem;
    color: var(--primaria-escura);
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 1rem; }

a { color: var(--primaria); }
a:hover { color: var(--primaria-escura); }

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

:focus-visible {
    outline: 3px solid var(--dourado);
    outline-offset: 2px;
}

.pular {
    position: absolute;
    left: -9999px;
    background: var(--branco);
    color: var(--texto);
    padding: .75rem 1rem;
    z-index: 100;
}
.pular:focus { left: .5rem; top: .5rem; }

.conteiner {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1rem;
}

.conteiner--estreito { max-width: 740px; }

/* ------------------------------------------------------------------ */
/* Topo e menu                                                         */
/* ------------------------------------------------------------------ */

.topo {
    background: var(--primaria);
    color: var(--branco);
    /* O filete dourado é o que faz o azul virar "Auxiliadora" e não
       "site institucional azul". Some no modo de impressão. */
    border-bottom: 3px solid var(--dourado);
}

.topo__interno {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding-top: .7rem;
    padding-bottom: .7rem;
}

.topo__marca {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--branco);
    text-decoration: none;
    margin-right: auto;
}

.topo__marca strong {
    display: block;
    font-family: var(--fonte-titulo);
    font-size: 1.05rem;
    line-height: 1.2;
}

.topo__marca small {
    display: block;
    font-size: .8rem;
    opacity: .9;
}

.menu-alternador { position: absolute; left: -9999px; }

.menu-botao {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    padding: .4rem .8rem;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: var(--raio);
    color: var(--branco);
    cursor: pointer;
}

.menu {
    display: none;
    width: 100%;
    flex-direction: column;
}

.menu-alternador:checked ~ .menu { display: flex; }
.menu-alternador:focus-visible ~ .menu-botao { outline: 3px solid var(--dourado); }

.menu a {
    display: block;
    min-height: 44px;
    padding: .6rem .25rem;
    color: var(--branco);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .25);
}

.menu a.ativo { font-weight: 700; text-decoration: underline; }

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

    .menu {
        display: flex;
        flex-direction: row;
        width: auto;
        gap: .25rem;
    }

    .menu a {
        border-bottom: none;
        padding: .5rem .7rem;
        border-radius: var(--raio);
    }

    .menu a:hover { background: rgba(255, 255, 255, .15); }
    .menu a.ativo { background: rgba(0, 0, 0, .2); text-decoration: none; }
}

/* ------------------------------------------------------------------ */
/* Seções                                                              */
/* ------------------------------------------------------------------ */

main { display: block; }

.secao { padding: 2.25rem 0; }
.secao--clara { background: var(--branco); }
.secao--destaque { background: var(--primaria-clara); }

/* Seção escura define a cor do texto no container. Todo componente de
   fundo claro dentro dela precisa declarar a própria cor — ver abaixo. */
.secao--escura {
    background: var(--primaria-escura);
    color: #eef3fa;
}

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

.secao--escura a { color: #cfe0f5; }

.secao__titulo { margin-bottom: 1.25rem; }

.secao__titulo::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    margin-top: .5rem;
    background: var(--dourado);
}

.capa {
    background: var(--primaria-escura);
    color: #eef3fa;
    padding: 2.75rem 0;
}

.capa h1 { color: var(--branco); margin-bottom: .5rem; }
.capa p { font-size: 1.1rem; margin-bottom: 1.25rem; }

/* ------------------------------------------------------------------ */
/* Capa com foto da matriz — só na página inicial                      */
/*                                                                     */
/* A cor de fundo continua declarada: ela é o que aparece enquanto a    */
/* foto carrega, e é o que sobra numa conexão ruim. Sem ela, o título   */
/* branco ficaria alguns segundos sobre o branco da página.            */

/* A faixa precisa de altura própria. Sem ela, a altura vinha só do texto
   — davam uns 300px — e uma foto deitada de 2:1 esticada na largura da
   tela ficava com dois terços da altura fora do corte: sumiam a coroa e
   o rosto da santa em cima, e a praça embaixo.

   O grid é só para centralizar o texto na vertical sem mexer na largura
   do .conteiner, que continua se virando sozinho. */
.capa--foto {
    position: relative;
    display: grid;
    align-content: center;

    /* A capa tem a MESMA proporção da foto (1600x748). É o que faz a
       imagem aparecer inteira, sem corte nenhum, em qualquer largura:
       não sobra altura para o navegador descartar.

       Trocar a foto por outra de proporção diferente exige mudar estes
       dois números junto — senão o corte volta.

       O piso de 20rem garante espaço para o texto em tela estreita, e o
       teto impede que a capa vire uma página inteira em monitor
       ultralargo, onde a proporção passaria de 1100px de altura. */
    aspect-ratio: 1600 / 745;
    min-height: 20rem;
    max-height: 58rem;
    background-color: var(--primaria-escura);
    background-repeat: no-repeat;
    background-size: cover;

    /* Ancorada no topo, e não no centro: alguma coisa tem de ser cortada,
       porque a foto nunca terá a proporção da faixa. Cortar por baixo
       preserva a coroa, o rosto da santa e as torres — o que identifica
       a paróquia. O que se perde é a calçada da praça. */
    background-position: center top;

    padding: 3.5rem 0;
}

/* Véu escuro por cima da foto. A foto aérea tem céu claro e telhado
   amarelo; sem o véu, o texto branco desaparece justamente na parte de
   cima. O gradiente escurece mais embaixo, onde ficam os botões. */
.capa--foto::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(21, 34, 82, .62) 0%,
        rgba(21, 34, 82, .70) 55%,
        rgba(21, 34, 82, .82) 100%
    );
}

/* O conteúdo precisa subir acima do véu, senão fica atrás dele. */
.capa--foto > .conteiner {
    position: relative;
    z-index: 1;
}

.capa--foto h1 { text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.capa--foto p  { text-shadow: 0 1px 2px rgba(0, 0, 0, .40); }

/* No celular a faixa é quase quadrada e a foto é deitada, então sobra
   pouca largura: centralizada, a tela cortaria a matriz ao meio e
   mostraria sobretudo o canto direito. Puxar o enquadramento para a
   esquerda devolve a igreja, que é o que identifica a paróquia.

   Menos altura, também: quem abre o site no celular vem ver horário de
   missa, e não deve precisar rolar uma tela inteira até chegar nele. */
@media (max-width: 700px) {
    .capa--foto {
        min-height: 20rem;
        padding: 2.5rem 0;

        /* No celular a conta se inverte: a tela é estreita, então a foto
           cabe inteira na altura e o corte passa a ser lateral. Aqui o
           risco não é a coroa, é a matriz sair pela esquerda. */
        background-position: 25% center;
    }
}

.grade {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 700px) {
    .grade--2 { grid-template-columns: repeat(2, 1fr); }
    .grade--3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 980px) {
    .grade--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------------------------ */
/* Componentes — declaram a própria cor de texto                       */
/*                                                                     */
/* Vêm depois das seções de propósito: com a mesma especificidade,     */
/* quem vem por último vence. Um cartão branco dentro de .secao--escura*/
/* herdaria o texto claro e ficaria ilegível — o sintoma é o cartão    */
/* parecer vazio.                                                      */
/* ------------------------------------------------------------------ */

.cartao {
    background: var(--branco);
    color: var(--texto);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 1.25rem;
    box-shadow: var(--sombra);
}

.cartao h2,
.cartao h3,
.cartao h4 { color: var(--primaria-escura); }

.cartao p,
.cartao li,
.cartao td,
.cartao th { color: var(--texto); }

.cartao--link { text-decoration: none; display: block; }
.cartao--link:hover { border-color: var(--primaria); }

.cartao__rotulo {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-suave);
}

.lista-limpa { list-style: none; padding: 0; margin: 0; }
.lista-limpa li { padding: .3rem 0; }

/* Horários --------------------------------------------------------- */

.dia {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--borda);
    color: var(--texto);
}

.dia:last-child { border-bottom: none; }

.dia__nome {
    flex: 0 0 9.5rem;
    font-weight: 700;
    color: var(--primaria-escura);
}

.dia__horas { flex: 1 1 12rem; margin: 0; }

.hora {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--primaria);
    min-width: 3.6rem;
}

.observacao {
    display: block;
    font-size: .85rem;
    color: var(--texto-suave);
}

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

.marco {
    display: flex;
    gap: 1rem;
    padding: .75rem 0;
    border-left: 3px solid var(--primaria-clara);
    padding-left: 1rem;
    color: var(--texto);
}

.marco__ano {
    flex: 0 0 4rem;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    /* Dourado escuro, não o vivo: como aqui é texto sobre fundo claro,
       o dourado da coroa daria 2,4:1 e seria ilegível para muita gente. */
    color: var(--dourado-escuro);
}

/* Perguntas frequentes --------------------------------------------- */

details.pergunta {
    background: var(--branco);
    color: var(--texto);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: .85rem 1rem;
    margin-bottom: .6rem;
}

details.pergunta summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--primaria-escura);
    min-height: 44px;
    display: flex;
    align-items: center;
}

details.pergunta[open] summary { margin-bottom: .5rem; }

/* Galeria ---------------------------------------------------------- */

.galeria {
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 700px) { .galeria { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .galeria { grid-template-columns: repeat(4, 1fr); } }

.galeria figure {
    margin: 0;
    background: var(--branco);
    color: var(--texto);
    border-radius: var(--raio);
    overflow: hidden;
    border: 1px solid var(--borda);
}

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

.galeria figcaption {
    padding: .5rem .6rem;
    font-size: .85rem;
    color: var(--texto-suave);
}

/* Avisos ----------------------------------------------------------- */

.aviso {
    border-radius: var(--raio);
    padding: .85rem 1rem;
    margin: 0 0 1rem;
    border: 1px solid transparent;
}

.aviso--erro    { background: var(--vermelho-fundo); border-color: #f5c2c7; color: var(--vermelho); }
.aviso--ok,
.aviso--sucesso { background: var(--verde-fundo);    border-color: #badbcc; color: var(--verde); }
.aviso--atencao { background: var(--amarelo-fundo);  border-color: #ffecb5; color: var(--amarelo-texto); }
.aviso--info    { background: var(--primaria-clara); border-color: #c3d5ec; color: #12386b; }

/* Etiquetas -------------------------------------------------------- */

.etiqueta {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .15rem .55rem;
    border-radius: 999px;
}

.etiqueta--vagas    { background: var(--amarelo-fundo); color: var(--amarelo-texto); }
.etiqueta--esgotado { background: var(--vermelho-fundo); color: var(--vermelho); }
.etiqueta--gratuito { background: var(--verde-fundo); color: var(--verde); }
.etiqueta--aberto   { background: var(--primaria-clara); color: #12386b; }

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

.botao {
    display: inline-block;
    min-height: 44px;
    padding: .7rem 1.4rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--branco);
    background: var(--primaria);
    border: 1px solid var(--primaria);
    border-radius: var(--raio);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.botao:hover { background: var(--primaria-escura); border-color: var(--primaria-escura); color: var(--branco); }

.botao--largo { display: block; width: 100%; }

.botao--secundario {
    background: var(--branco);
    color: var(--primaria);
}

.botao--secundario:hover { background: var(--primaria-clara); color: var(--primaria-escura); }

/* Um botão claro dentro da capa escura precisa reafirmar as cores. */
.capa .botao--secundario { background: var(--branco); color: var(--primaria-escura); }

/* ------------------------------------------------------------------ */
/* Formulários                                                         */
/* ------------------------------------------------------------------ */

.campo { margin-bottom: 1rem; }

.campo label {
    display: block;
    font-weight: 600;
    margin-bottom: .3rem;
    color: var(--texto);
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    min-height: 44px;
    padding: .6rem .75rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--texto);
    background: var(--branco);
    border: 1px solid #98a2ae;
    border-radius: var(--raio);
}

.campo textarea { min-height: 8rem; }

.campo--erro input,
.campo--erro select,
.campo--erro textarea { border-color: var(--vermelho); }

.ajuda {
    display: block;
    font-size: .85rem;
    color: var(--texto-suave);
    margin-top: .25rem;
}

.erro-campo {
    display: block;
    font-size: .85rem;
    color: var(--vermelho);
    margin-top: .25rem;
}

.obrigatorio { color: var(--vermelho); }

/* Campo-armadilha: fora da tela, mas não display:none — robô ignora o
   que está escondido dessa forma e preenche assim mesmo. */
.armadilha {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Inscrições e pagamento                                              */
/* ------------------------------------------------------------------ */

/* Termo de responsabilidade ------------------------------------------ */

/* Premiação no comprovante. Só quem confirmou a inscrição chega aqui,
   e é boa notícia — o dourado do brasão marca isso sem gritar. */
.premiacao {
    border-left: 4px solid var(--dourado);
}

.premiacao h2 {
    margin-top: 0;
    color: var(--dourado-escuro);
}

.premiacao p { margin: 0 0 .5rem; }
.premiacao p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ */
/* Documento longo — regulamento                                       */
/*                                                                     */
/* São dezessete mil caracteres. A largura de leitura é o que decide    */
/* se alguém chega ao fim: linha muito longa faz o olho perder a linha  */
/* seguinte no retorno.                                                 */

.documento {
    max-width: 62ch;
    margin: 0 auto;
}

.documento p {
    margin: 0 0 1rem;
    text-align: justify;
    hyphens: auto;
}

.documento h2 {
    margin: 2.25rem 0 .9rem;
    padding-bottom: .4rem;
    border-bottom: 2px solid var(--primaria-clara);
    color: var(--primaria-escura);
    font-size: 1.15rem;
}

.documento h2:first-child { margin-top: 0; }

/* Alvo do índice: sem isto o cabeçalho fixo esconderia o título ao
   pular para a seção. */
.documento h2[id] { scroll-margin-top: 1.5rem; }

.documento__itens {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
    list-style: none;
}

.documento__itens li {
    position: relative;
    margin-bottom: .45rem;
    padding-left: .25rem;
}

/* Os itens já vêm numerados em romano dentro do próprio texto
   ("III – ..."), então não levam marcador — seria numeração dobrada. */

.documento__premio {
    margin: 0 0 .3rem;
    padding: .5rem .8rem;
    background: var(--primaria-clara);
    border-radius: var(--raio);
    font-weight: 600;
    text-align: left;
    max-width: 22rem;
}

/* Índice das seções */

.indice { margin-bottom: 2rem; }
.indice h2 { font-size: 1rem; margin: 0 0 .75rem; }

.indice__lista {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: 1.5rem;
    font-size: .93rem;
}

.indice__lista li {
    margin-bottom: .4rem;
    break-inside: avoid;
}

@media (max-width: 640px) {
    .indice__lista { columns: 1; }
    .documento p { text-align: left; }
}

/* ------------------------------------------------------------------ */
/* Resumo do pedido — logo acima do botão de enviar                    */
/*                                                                     */
/* Fica onde a pessoa olha antes de se comprometer. O fundo claro o    */
/* separa dos campos: é conferência, não mais um campo para preencher. */

.resumo {
    border: 2px solid var(--primaria);
    border-radius: var(--raio);
    background: var(--primaria-clara);
    padding: 1rem 1.15rem;
    margin: 0 0 1.25rem;
}

.resumo__titulo {
    font-size: 1rem;
    margin: 0 0 .6rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--primaria-escura);
}

.resumo__linhas { margin: 0; }

.resumo__linha {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .3rem 0;
}

.resumo__linha dt { color: var(--texto-suave); }
.resumo__linha dd { margin: 0; font-weight: 600; text-align: right; }

/* O total se separa do resto por um filete, como numa nota. */
.resumo__linha--total {
    margin-top: .4rem;
    padding-top: .6rem;
    border-top: 1px solid var(--primaria);
    font-size: 1.15rem;
}

.resumo__linha--total dt { color: var(--texto); font-weight: 600; }
.resumo__linha--total dd { color: var(--primaria-escura); }

.resumo__dica {
    margin: .6rem 0 0;
    font-size: .9rem;
    color: var(--texto-suave);
}

.termo {
    border: 2px solid var(--borda);
    border-radius: var(--raio);
    padding: 1rem;
    margin: 0 0 1.25rem;
    background: var(--branco);
    color: var(--texto);
}

.termo legend { font-weight: 600; padding: 0 .4rem; }

.termo--erro { border-color: var(--vermelho); }

/* Altura limitada com rolagem própria: o termo é longo e, solto na
   página, empurraria o botão de enviar para longe do formulário. */
.termo__texto {
    max-height: 260px;
    overflow-y: auto;
    padding: .75rem;
    margin-bottom: .75rem;
    background: var(--clara);
    border: 1px solid var(--borda);
    border-radius: 8px;
    font-size: .92rem;
}

.termo__texto p { margin: 0 0 .7rem; }
.termo__texto p:last-child { margin-bottom: 0; }
.termo__texto:focus-visible { outline: 3px solid var(--dourado); }

.termo__aceite {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
}

.termo__aceite input {
    width: 22px;
    height: 22px;
    margin-top: .15rem;
    flex: 0 0 auto;
    accent-color: var(--primaria);
}

/* Escolha de modalidade ---------------------------------------------- */

/* O cartão inteiro é clicável porque o alvo é dedo em celular, não
   mouse: acertar só o botãozinho do rádio é frustrante. */

.opcoes {
    border: none;
    padding: 0;
    margin: 0 0 1.25rem;
}

.opcoes legend {
    font-weight: 600;
    padding: 0;
    margin-bottom: .5rem;
}

.opcoes--erro .opcao { border-color: var(--vermelho); }

.opcao {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    background: var(--branco);
    color: var(--texto);
    border: 2px solid var(--borda);
    border-radius: var(--raio);
    padding: 1rem;
    margin-bottom: .6rem;
    cursor: pointer;
}

.opcao:hover { border-color: var(--primaria); }

/* :has() marca o cartão escolhido. Onde o navegador for antigo demais,
   o rádio marcado continua visível — a escolha nunca fica ambígua. */
.opcao:has(input:checked) {
    border-color: var(--primaria);
    background: var(--primaria-clara);
}

.opcao:has(input:focus-visible) {
    outline: 3px solid var(--dourado);
    outline-offset: 2px;
}

.opcao input {
    margin-top: .25rem;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    accent-color: var(--primaria);
}

.opcao__corpo { display: block; }

.opcao__nome {
    display: block;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primaria-escura);
}

.opcao__valor {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    margin: .2rem 0;
}

.opcao__precos {
    display: block;
    font-size: .88rem;
    color: var(--texto-suave);
    margin-bottom: .3rem;
}

.opcao__descricao {
    display: block;
    font-size: .9rem;
    color: var(--texto-suave);
    margin-bottom: .4rem;
}

.opcao__inclui {
    display: block;
    font-size: .9rem;
    color: var(--texto);
}

.opcao__item {
    display: block;
    padding-left: .2rem;
}

.opcao--esgotada {
    opacity: .55;
    cursor: not-allowed;
    background: var(--clara);
}

.opcao--esgotada:hover { border-color: var(--borda); }

.dados { width: 100%; border-collapse: collapse; }

.dados th,
.dados td {
    text-align: left;
    padding: .55rem 0;
    border-bottom: 1px solid var(--borda);
    vertical-align: top;
    color: var(--texto);
}

.dados tr:last-child th,
.dados tr:last-child td { border-bottom: none; }

.dados th {
    width: 40%;
    font-weight: 600;
    color: var(--texto-suave);
}

.qrcode {
    text-align: center;
    padding: 1rem;
    background: var(--branco);
    border-radius: var(--raio);
}

.qrcode svg {
    width: 100%;
    max-width: 280px;
    height: auto;
}

.copia-cola {
    display: flex;
    gap: .5rem;
    align-items: stretch;
}

.copia-cola input {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, 'Courier New', monospace;
    font-size: .8rem;
    padding: .6rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--clara);
    color: var(--texto);
}

.contador { font-weight: 700; font-variant-numeric: tabular-nums; }

.aguardando { display: flex; align-items: center; gap: .6rem; }

.pulso {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primaria);
    animation: pulsar 1.4s ease-in-out infinite;
}

@keyframes pulsar {
    0%, 100% { opacity: 1;  transform: scale(1); }
    50%      { opacity: .3; transform: scale(.7); }
}

.selo {
    text-align: center;
    padding: 1.5rem 1rem;
    background: var(--verde-fundo);
    color: var(--verde);
    border-radius: var(--raio);
    margin-bottom: 1rem;
}

.selo h1 { color: var(--verde); margin: .5rem 0 .25rem; }
.selo .marca { font-size: 2.5rem; line-height: 1; }

.codigo-grande {
    font-family: ui-monospace, 'Courier New', monospace;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .12em;
}

/* ------------------------------------------------------------------ */
/* Rodapé e WhatsApp                                                   */
/* ------------------------------------------------------------------ */

.rodape {
    background: var(--primaria-escura);
    color: #dde7f3;
    margin-top: 2.5rem;
    padding: 2rem 0 1rem;
    border-top: 3px solid var(--dourado);
}

.rodape h2 {
    font-size: 1rem;
    color: var(--branco);
    margin-bottom: .5rem;
}

.rodape a { color: #cfe0f5; }
.rodape__miudo { font-size: .85rem; opacity: .85; }

.rodape__grade {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 700px) {
    .rodape__grade { grid-template-columns: repeat(3, 1fr); }
}

.rodape__fim {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .2);
    font-size: .85rem;
}

.zap {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25d366;
    color: #073d20;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
    z-index: 50;
}

/* ------------------------------------------------------------------ */
/* Preferências e impressão                                            */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

@media print {
    .topo, .rodape, .zap, .sem-impressao, .pular { display: none; }
    body { background: var(--branco); font-size: 12pt; }
    .cartao { border: none; box-shadow: none; padding: 0; }
}