/* ===========================================================================
   ojogodobicho.net — folha de estilo do site novo (MVC / Etapa 2)
   Design aprovado: cores da marca, resto modernizado. Público leigo.
   Mobile-first, alto contraste, áreas de toque grandes (mín. 44px), acessível.
   =========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS (paleta da marca + apoio)
   -------------------------------------------------------------------------- */
:root {
    /* Cores da marca */
    --ouro:        #FFC140;   /* marca */
    --laranja:     #FF6040;   /* destaque / CTA */
    --marinho:     #1C4873;   /* cabeçalho / títulos / texto */

    /* Apoio */
    --azul-claro:  #BBCCDC;   /* cabeçalho de tabela */
    --texto-2:     #516A88;   /* texto secundário */
    --fundo-claro: #F4F6FB;   /* fundo de página */
    --link:        #254E99;   /* links */
    --positivo:    #006600;   /* valores positivos */
    --alerta:      #FF0000;   /* alerta (usar pouco) */
    --branco:      #FFFFFF;

    /* Derivados */
    --marinho-90:  #16395c;
    --ouro-suave:  #FFF3D6;
    --laranja-hover:#e8512f;
    --borda:       #d7dfeb;
    --sombra:      0 2px 8px rgba(28, 72, 115, .10);
    --sombra-forte:0 6px 20px rgba(28, 72, 115, .18);

    /* Tipografia (sans moderna com fallback Verdana, como a marca) */
    --fonte: system-ui, -apple-system, "Segoe UI", Roboto, Verdana, Helvetica, Arial, sans-serif;

    /* Medidas */
    --toque: 44px;            /* área mínima de toque */
    --raio: 12px;
    --raio-sm: 8px;
    --largura-max: 960px;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--fonte);
    font-size: 17px;            /* letra grande/legível para leigos */
    line-height: 1.5;
    color: var(--marinho);
    background: var(--fundo-claro);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); }
h1, h2, h3 { color: var(--marinho); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }

/* Foco visível e acessível em TODA a página */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--laranja);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Leitor de tela */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Pular para o conteúdo (acessibilidade) */
.pular-conteudo {
    position: absolute; left: -999px; top: 0; z-index: 100;
    background: var(--marinho); color: #fff; padding: .75rem 1rem;
    border-radius: 0 0 var(--raio-sm) 0;
}
.pular-conteudo:focus { left: 0; }

.container { width: 100%; max-width: var(--largura-max); margin: 0 auto; padding: 0 1rem; }

/* --------------------------------------------------------------------------
   3. CABEÇALHO (logo) + BUSCA + NAVEGAÇÃO GLOBAL
   -------------------------------------------------------------------------- */
.cabecalho {
    background: var(--branco);
    border-bottom: 4px solid var(--ouro);
    box-shadow: var(--sombra);
    position: sticky; top: 0; z-index: 20;
}
.cabecalho-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .6rem 1rem; max-width: var(--largura-max); margin: 0 auto;
}
.cabecalho-logo img { height: 52px; width: auto; }
.cabecalho-acao a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--toque); padding: .4rem .9rem;
    color: var(--marinho); text-decoration: none; font-weight: 700;
    border-radius: var(--raio-sm);
}
.cabecalho-acao a:hover { background: var(--fundo-claro); }

/* Faixa de busca grande, bem visível */
.busca {
    background: var(--marinho);
    padding: 1rem;
}
.busca form {
    display: flex; gap: .5rem; max-width: var(--largura-max); margin: 0 auto;
}
.busca label { color: #fff; }
.busca input[type="search"] {
    flex: 1 1 auto; min-height: 52px; font-size: 1.05rem;
    padding: .6rem .9rem; border: 2px solid transparent; border-radius: var(--raio-sm);
    background: #fff; color: var(--marinho);
}
.busca input[type="search"]::placeholder { color: var(--texto-2); }
.busca .btn-busca {
    flex: 0 0 auto;
    min-height: 52px; min-width: 52px; padding: 0 1rem;
    background: var(--laranja); color: #fff; font-size: 1.05rem; font-weight: 700;
    border: none; border-radius: var(--raio-sm); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
}
.busca .btn-busca:hover { background: var(--laranja-hover); }
/* No celular o botão é só a lupa (rótulo volta no desktop) */
.busca .btn-busca-rotulo { display: none; }
@media (min-width: 720px) {
    .busca .btn-busca { padding: 0 1.2rem; }
    .busca .btn-busca-rotulo { display: inline; }
}

/* Navegação global — hambúrguer no mobile (público leigo), horizontal no desktop.
   Mobile: o menu fica empilhado e oculto; o botão "☰ Menu" abre a lista COMPLETA
   com alvos de toque grandes (≥44px). Sem rolagem horizontal (overflow 0). */
.nav-global { background: var(--marinho-90); }
.nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Barra do botão hambúrguer (visível só no mobile). */
.nav-barra {
    display: flex; align-items: center;
    max-width: var(--largura-max); margin: 0 auto; padding: .4rem 1rem;
}
.nav-hamburguer {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    width: 100%; min-height: var(--toque); padding: .6rem 1rem;
    color: #fff; font-weight: 700; font-size: 1.08rem;
    background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.4);
    border-radius: var(--raio-sm); cursor: pointer; user-select: none;
}
.nav-hamburguer:hover { background: rgba(255,255,255,.14); }
.nav-hamburguer-ico { font-size: 1.3rem; line-height: 1; }

/* Lista de itens: empilhada e oculta por padrão no mobile. */
.nav-lista {
    list-style: none; margin: 0 auto; padding: 0;
    max-width: var(--largura-max); display: none;
}
.nav-toggle:checked ~ .nav-lista { display: block; }
.nav-lista li { border-top: 1px solid rgba(255,255,255,.12); }
.nav-lista a {
    display: flex; align-items: center; min-height: 48px;
    padding: .9rem 1.1rem; color: #fff; text-decoration: none;
    font-weight: 600; font-size: 1.05rem;
}
.nav-lista a:hover { background: rgba(255,255,255,.12); }
.nav-lista a.is-active { background: var(--ouro); color: var(--marinho); }

/* Desktop: oculta o hambúrguer e mostra o menu horizontal (com wrap, overflow 0). */
@media (min-width: 720px) {
    .nav-barra { display: none; }
    .nav-lista {
        display: flex; flex-wrap: wrap; gap: .25rem; padding: .35rem 1rem;
    }
    .nav-lista li { border-top: none; }
    .nav-lista a {
        min-height: var(--toque); padding: .4rem .85rem;
        border-radius: var(--raio-sm); font-size: .98rem;
    }
}

/* --------------------------------------------------------------------------
   4. CONTEÚDO PRINCIPAL / RODAPÉ
   -------------------------------------------------------------------------- */
.principal { padding: 1.25rem 0 2.5rem; }
.principal > .container > section { margin-bottom: 1.75rem; }

.rodape {
    background: var(--marinho); color: #cdd9e6;
    padding: 1.5rem 1rem; text-align: center; font-size: .92rem;
}
.rodape a { color: #fff; }
.rodape .rodape-links {
    display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; justify-content: center;
    list-style: none; padding: 0; margin: 0 0 .75rem;
}
.rodape .rodape-links a {
    display: inline-flex; min-height: var(--toque); align-items: center;
    text-decoration: none; font-weight: 600;
}

/* Alertas/flash */
.alert { padding: .85rem 1rem; border-radius: var(--raio-sm); margin-bottom: 1rem; }
.alert-success { background: #e7f5e7; color: var(--positivo); border: 1px solid #b9dfb9; }

/* --------------------------------------------------------------------------
   5. HOME — Resultado de hoje + botões grandes
   -------------------------------------------------------------------------- */
.bloco-titulo {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: .25rem .75rem; margin-bottom: .75rem;
}
.bloco-titulo h2 { margin: 0; }
.bloco-titulo .bloco-data { color: var(--texto-2); font-weight: 600; font-size: .98rem; }

/* Cartão "Resultado de hoje" em destaque */
.resultado-card {
    background: #fff; border: 1px solid var(--borda); border-top: 6px solid var(--ouro);
    border-radius: var(--raio); box-shadow: var(--sombra-forte); overflow: hidden;
}
.resultado-card .resultado-cabeca {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; padding: .85rem 1rem; background: var(--ouro-suave);
    border-bottom: 1px solid var(--borda);
}
.resultado-card .resultado-banca {
    font-weight: 800; color: var(--marinho); font-size: 1.05rem;
}
.resultado-card .resultado-banca small { display: block; font-weight: 600; color: var(--texto-2); }

/* Tabela do resultado: letra grande, mas cabe no celular (390px) */
.tabela-resultado { width: 100%; border-collapse: collapse; font-size: 1.02rem; table-layout: fixed; }
.tabela-resultado thead th {
    background: var(--azul-claro); color: var(--marinho); text-align: left;
    padding: .55rem .55rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .01em;
}
.tabela-resultado tbody td { padding: .6rem .55rem; border-top: 1px solid var(--borda); }
.tabela-resultado tbody tr:nth-child(even) { background: #fafbfe; }
.tabela-resultado .col-premio { width: 3.9rem; font-weight: 700; color: var(--texto-2); white-space: nowrap; }
/* número do grupo (código 01-25) sempre separado do nome do bicho */
.grupo-num { margin-right: .35em; }
.tabela-resultado .col-milhar { width: 5.2rem; }
/* Ênfase (grande/negrito) da MILHAR é só do CORPO (o número). Escopar ao tbody
   evita que o <th> "MILHAR" herde o tamanho grande e grude no "Prêmio". */
.tabela-resultado tbody td.col-milhar { font-weight: 800; font-size: 1.18rem; letter-spacing: .03em; color: var(--marinho); }
.tabela-resultado .col-bicho { color: var(--marinho); }
.tabela-resultado .col-bicho .grupo-num { color: var(--texto-2); font-weight: 700; }
@media (min-width: 720px) {
    .tabela-resultado { font-size: 1.08rem; }
    .tabela-resultado thead th { padding: .6rem 1rem; font-size: .92rem; }
    .tabela-resultado tbody td { padding: .7rem 1rem; }
    .tabela-resultado .col-milhar { width: 8rem; }
    .tabela-resultado tbody td.col-milhar { font-size: 1.3rem; }
    .tabela-resultado .col-premio { width: 6rem; }
}

.resultado-rodape { padding: .85rem 1rem; border-top: 1px solid var(--borda); text-align: center; }
.resultado-vazio { padding: 1.5rem 1rem; text-align: center; color: var(--texto-2); }

/* Botão grande de CTA (texto) */
.btn-link-forte {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: var(--toque); padding: .55rem 1.1rem; font-weight: 700; font-size: 1rem;
    color: #fff; background: var(--laranja); border-radius: var(--raio-sm);
    text-decoration: none;
}
.btn-link-forte:hover { background: var(--laranja-hover); }

/* Grid de botões grandes "O que você procura?" */
.botoes-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem;
}
.botao-grande {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .5rem; text-align: center; text-decoration: none;
    min-height: 120px; padding: 1.1rem .75rem; min-width: 0;
    background: #fff; color: var(--marinho); font-weight: 700; font-size: 1.05rem;
    border: 2px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
    transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease;
}
.botao-grande:hover, .botao-grande:focus-visible {
    border-color: var(--ouro); box-shadow: var(--sombra-forte); transform: translateY(-2px);
}
.botao-grande .botao-icone {
    width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--ouro-suave); color: var(--marinho);
}
.botao-grande .botao-icone svg { width: 28px; height: 28px; }
.botao-grande small { font-weight: 600; color: var(--texto-2); font-size: .85rem; }

/* --------------------------------------------------------------------------
   6. ESTATÍSTICAS — índice, ranking, período, frequência
   -------------------------------------------------------------------------- */
.ranking-voltar a, .ranking-head .voltar a {
    display: inline-flex; align-items: center; min-height: var(--toque);
    text-decoration: none; font-weight: 700; color: var(--link);
}
.ranking-head h1, .indice-head h1 { color: var(--marinho); }
.ranking-legenda, .indice-legenda { color: var(--texto-2); margin-top: -.25rem; }

/* Índice / menu de estatísticas */
.indice-grupo {
    margin: 1.5rem 0 .5rem; padding-bottom: .35rem;
    border-bottom: 3px solid var(--ouro); color: var(--marinho);
}
.indice-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; }
.indice-card {
    background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra); padding: 1rem; min-width: 0;
}
.indice-card h3 { margin: 0 0 .6rem; color: var(--marinho); }
.indice-variantes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
/* Botões de variante: preenchidos (padrão de botão do site) — leem como CTA,
   não como tag/pill de baixo contraste. (P2.4) */
.indice-variantes a {
    display: inline-flex; align-items: center; min-height: var(--toque);
    padding: .45rem 1rem; background: var(--marinho); color: #fff;
    border: 2px solid var(--marinho); border-radius: var(--raio-sm); text-decoration: none; font-weight: 700;
}
.indice-variantes a:hover, .indice-variantes a:focus-visible { background: var(--marinho-90); border-color: var(--marinho-90); }
.indice-bancas-count { color: var(--texto-2); font-size: .85rem; }

/* Seletor de banca compacto */
.banca-seletor {
    display: flex; align-items: center; gap: .5rem; margin: .75rem 0 .25rem;
    flex-wrap: wrap; max-width: 100%;
}
.banca-seletor label { font-weight: 700; color: var(--marinho); }
.banca-seletor select {
    min-height: var(--toque); font-size: 1rem; padding: .35rem .6rem;
    border: 2px solid var(--borda); border-radius: var(--raio-sm); background: #fff; color: var(--marinho);
    /* nunca estourar a viewport no mobile (rótulos de opção por extenso) */
    width: 100%; max-width: 100%; box-sizing: border-box;
    flex: 1 1 0; min-width: 0;
}
/* Form da busca por número (/buscar/milhar|centena|dezena|grupo) — SEMPRE visível.
   Classe própria de propósito: .banca-seletor é o seletor de banca mobile e é
   escondido no desktop (≥720px), o que sumia com esta caixa (bug 13/07/2026). */
.busca-num-form {
    display: flex; align-items: center; gap: .5rem; margin: .75rem 0 .25rem;
    flex-wrap: wrap; max-width: 100%;
}
.busca-num-form label { font-weight: 700; color: var(--marinho); }
.busca-num-form input[type="text"], .busca-num-form select {
    min-height: var(--toque); font-size: 1.1rem; padding: .35rem .6rem;
    border: 2px solid var(--borda); border-radius: var(--raio-sm); background: #fff;
    color: var(--marinho); box-sizing: border-box; flex: 1 1 9rem; min-width: 0; max-width: 16rem;
}
.busca-num-form .bnf-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: var(--toque);
    padding: .45rem 1.2rem; background: var(--marinho); color: #fff; border: 2px solid var(--marinho);
    border-radius: var(--raio-sm); font-weight: 700; font-size: 1rem; cursor: pointer;
}
.busca-num-form .bnf-btn:hover, .busca-num-form .bnf-btn:focus-visible { background: var(--marinho-90); }

/* Abas de banca (desktop) */
.banca-abas { display: none; flex-wrap: wrap; gap: .35rem; margin: .5rem 0; }
/* Na busca por número as "abas" são a navegação de MODALIDADE — visíveis sempre,
   inclusive no mobile (lá não existe um <select> equivalente). */
.busca-numero .banca-abas { display: flex; }
.banca-aba {
    display: inline-flex; align-items: center; min-height: 40px; padding: .25rem .8rem;
    background: #fff; border: 1px solid var(--borda); border-radius: 999px;
    color: var(--link); text-decoration: none; font-weight: 700; font-size: .95rem;
}
.banca-aba.is-active { background: var(--ouro); border-color: var(--ouro); color: var(--marinho); }

/* Alternador de período (atual / histórico — o cut "1") */
.periodo-toggle { display: inline-flex; gap: .35rem; margin: .25rem 0 .75rem; flex-wrap: wrap; }
.periodo-toggle a {
    display: inline-flex; align-items: center; min-height: 40px; padding: .25rem .9rem;
    border: 2px solid var(--marinho); border-radius: 999px; text-decoration: none;
    font-weight: 700; color: var(--marinho); background: #fff;
}
.periodo-toggle a.is-active { background: var(--marinho); color: #fff; }

/* Tabelas de estatística */
.ranking-tabela { width: 100%; border-collapse: collapse; background: #fff;
    border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; font-size: 1rem; }
.ranking-tabela thead th {
    background: var(--azul-claro); color: var(--marinho); text-align: left;
    padding: .6rem .75rem; font-size: .9rem; text-transform: uppercase; letter-spacing: .02em;
    white-space: nowrap;
}
.ranking-tabela tbody td { padding: .6rem .75rem; border-top: 1px solid var(--borda); }
.ranking-tabela tbody tr:nth-child(even) { background: #fafbfe; }
.ranking-tabela .col-pos { color: var(--texto-2); font-weight: 700; width: 2.5rem; }
.ranking-tabela .col-chave strong { font-size: 1.1rem; color: var(--marinho); }
.ranking-tabela .col-total { font-weight: 800; text-align: right; }
.ranking-tabela .col-bicho { color: var(--marinho); }
.ranking-tabela td.col-total, .ranking-tabela th.col-total { text-align: right; }

.tabela-rolavel { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--raio); }
.ranking-rodape { color: var(--texto-2); font-size: .92rem; margin-top: .5rem; }

/* Banca redundante (banca já escolhida) — oculta a coluna e seu cabeçalho. */
.ranking-tabela.sem-banca .col-tipo { display: none; }
/* Nome do bicho empilhado dentro da coluna "Grupo" — só aparece no mobile
   (no desktop o nome fica na coluna "Bicho", intacta). */
.ranking-tabela .chave-bicho { display: none; }
/* Compactação no mobile para os rankings simples caberem sem deslize a 360px.
   Fonte/padding menores; o número (chave) e o total continuam legíveis. */
@media (max-width: 560px) {
    .ranking-tabela { font-size: .82rem; }
    .ranking-tabela thead th { padding: .4rem .3rem; font-size: .68rem; letter-spacing: 0; }
    .ranking-tabela tbody td { padding: .4rem .3rem; }
    .ranking-tabela .col-pos { width: 1.5rem; padding-left: .35rem; padding-right: .2rem; }
    .ranking-tabela .col-chave strong { font-size: .95rem; }
    .ranking-tabela .col-data { white-space: nowrap; font-size: .78rem; }
    /* Grupo (só nos rankings SIMPLES): empilha o bicho embaixo do número e remove
       a coluna "Bicho". NÃO afeta periodo/frequencia (que mantêm rolagem). */
    .ranking-tabela.ranking-simples .col-bicho { display: none; }
    .ranking-tabela.ranking-simples .chave-bicho { display: block; font-weight: 400; font-size: .7rem; color: var(--texto-2); line-height: 1.1; }
}
.ranking-vazio { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
    padding: 1.5rem; text-align: center; color: var(--texto-2); }

/* --------------------------------------------------------------------------
   7. RESPONSIVO (tablet/desktop)
   -------------------------------------------------------------------------- */
@media (min-width: 720px) {
    body { font-size: 18px; }
    h1 { font-size: 2rem; }
    .botoes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
    .indice-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .banca-seletor { display: none; }      /* no desktop usamos abas */
    .banca-abas { display: flex; }
    .cabecalho-logo img { height: 60px; }
}
@media (min-width: 980px) {
    .indice-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
    .botao-grande:hover { transform: none; }
}

/* ===========================================================================
   8. DEU NO POSTE (página principal) — poste em destaque, apurações e menu
   Acrescentado na Etapa 4. Familiar (como o site atual) + identidade nova.
   =========================================================================== */

/* ---- Faixa de destaque "Deu no Poste" ---- */
.poste-destaque-head {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: .25rem .75rem; margin-bottom: .75rem;
}
.poste-destaque-head h1 { margin: 0; display: flex; align-items: center; gap: .5rem; }
.poste-destaque-head .bloco-data { color: var(--texto-2); font-weight: 700; font-size: 1rem; }

/* Grade do poste: bancas nas colunas, prêmios nas linhas (estilo familiar).
   COMPACTA no celular para caber INTEIRA em 390px SEM rolagem. Em telas ainda
   mais estreitas, rola só ELA (a PÁGINA nunca tem overflow) e o JS liga um
   fade na borda + a dica "deslize" para o público leigo perceber. */
.poste-grid-wrap { position: relative; }
.poste-grid-scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    background: #fff; border: 1px solid var(--borda); border-top: 6px solid var(--ouro);
    border-radius: var(--raio); box-shadow: var(--sombra-forte);
}
/* Fade/gradiente na borda direita — só aparece quando HÁ rolagem (classe via JS) */
.poste-grid-wrap.tem-rolagem::after {
    content: ''; position: absolute; top: 7px; right: 1px; bottom: 1px; width: 36px;
    background: linear-gradient(to left, rgba(255,255,255,.95), rgba(255,255,255,0));
    border-radius: 0 var(--raio) var(--raio) 0; pointer-events: none;
    transition: opacity .15s ease;
}
.poste-grid-wrap.tem-rolagem.rolagem-fim::after { opacity: 0; }
.poste-grid {
    width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .95rem;
    /* Opção A (escolha do Luiz): matriz enxuta = milhar + nº do grupo (sem ícone/
       nome). CABE inteira em 360px com TODAS as bancas visíveis, SEM rolagem.
       table-layout:fixed + width:100% garante largura = container (scrollWidth
       <= clientWidth). O nome do bicho fica na legenda abaixo da tabela. */
}
.poste-grid caption { text-align: left; padding: .6rem .6rem .3rem; color: var(--texto-2); font-weight: 600; font-size: .8rem; }
.poste-grid thead th {
    background: var(--marinho); color: #fff; text-align: center;
    padding: .4rem .1rem; font-size: .82rem; font-weight: 800; letter-spacing: .01em;
}
.poste-grid thead th.col-premio-h { background: var(--marinho-90); width: 1.7rem; }
.poste-grid tbody th {
    background: var(--azul-claro); color: var(--marinho); text-align: center;
    padding: .35rem .05rem; font-weight: 800; white-space: nowrap; font-size: .78rem;
}
.poste-grid tbody td {
    border-top: 1px solid var(--borda); border-left: 1px solid var(--borda);
    padding: .35rem .1rem; text-align: center; vertical-align: middle; overflow: hidden;
}
/* Zebra por COLUNA (vertical): 1ª banca branca, 2ª clara, alternando.
   A coluna "Nº" (th) mantém seu estilo próprio; a alternância começa na 1ª banca. */
.poste-grid tbody td { background: #fff; }
.poste-grid tbody td:nth-child(odd) { background: #F4F6FB; }
/* Célula = milhar em destaque + nº do grupo abaixo (menor, discreto). */
.poste-grid .pg-cel {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .05rem; min-height: 2.3em; line-height: 1.05;
}
.poste-grid .pg-milhar { font-weight: 800; font-size: 1rem; letter-spacing: 0; color: var(--marinho); display: block; }
.poste-grid .pg-grupo { font-size: .72rem; line-height: 1.1; font-weight: 700; color: var(--texto-2); display: block; }
.poste-grid .pg-vazio { color: var(--texto-2); }
.poste-grid tbody tr.linha-cabeca td .pg-milhar { color: var(--laranja); }
.poste-rolar-dica { color: var(--texto-2); font-size: .82rem; margin: .4rem .2rem 0; }
@media (min-width: 480px) {
    /* Mais folga a partir de ~480px: milhar ainda maior. */
    .poste-grid .pg-milhar { font-size: 1.16rem; }
    .poste-grid .pg-grupo { font-size: .78rem; }
}
@media (min-width: 720px) {
    .poste-grid { font-size: 1.05rem; }
    .poste-grid caption { padding: .85rem 1rem .25rem; font-size: .9rem; }
    .poste-grid thead th { padding: .55rem .4rem; font-size: .95rem; letter-spacing: .02em; }
    .poste-grid thead th.col-premio-h { width: 3.4rem; }
    .poste-grid tbody th { padding: .5rem .45rem; font-size: .9rem; }
    .poste-grid tbody td { padding: .5rem .4rem; }
    .poste-grid .pg-cel { min-height: 2.6em; gap: .1rem; }
    .poste-grid .pg-milhar { font-size: 1.32rem; letter-spacing: .02em; }
    .poste-grid .pg-grupo { font-size: .9rem; }
}
/* Legenda grupo -> bicho, logo abaixo da matriz (orientação p/ o leigo).
   <details> nativo: fechada por padrão, abre no clique. */
.poste-legenda-grupos {
    margin: .5rem 0 .25rem; background: #fff;
    border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
}
.poste-legenda-grupos .plg-summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem;
    padding: .7rem .8rem; min-height: var(--toque); color: var(--marinho); font-weight: 800;
    border-radius: var(--raio);
}
.poste-legenda-grupos .plg-summary::-webkit-details-marker { display: none; }
/* Chevron próprio (gira quando aberto) */
.poste-legenda-grupos .plg-summary::before {
    content: ""; flex: none; width: .6rem; height: .6rem; border: 2px solid var(--marinho);
    border-left: 0; border-top: 0; transform: rotate(45deg); transition: transform .15s ease;
    margin-right: .1rem;
}
.poste-legenda-grupos[open] .plg-summary::before { transform: rotate(225deg); }
.poste-legenda-grupos .plg-summary:hover,
.poste-legenda-grupos .plg-summary:focus-visible { background: var(--fundo-claro); }
.poste-legenda-grupos .plg-corpo { padding: 0 .8rem .8rem; }
.poste-legenda-grupos .plg-titulo { font-weight: 800; color: var(--marinho); font-size: .95rem; }
.poste-legenda-grupos .plg-lista {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: .18rem .6rem;
}
.poste-legenda-grupos .plg-lista li { font-size: .82rem; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poste-legenda-grupos .plg-num { font-weight: 800; color: var(--marinho); }
.poste-legenda-grupos .plg-link { display: inline-block; margin-top: .5rem; font-weight: 700; color: var(--link); font-size: .88rem; }
@media (min-width: 720px) {
    .poste-legenda-grupos .plg-lista { grid-template-columns: repeat(5, 1fr); }
    .poste-legenda-grupos .plg-lista li { font-size: .9rem; }
}

/* ---- Tabelas "detalhe de cada apuração" (reusa .resultado-card/.tabela-resultado) ---- */
.apuracoes-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.1rem; }
@media (min-width: 720px) { .apuracoes-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 980px) { .apuracoes-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* ---- Menu de resultados (MILHAR / GRUPO) — grande e tocável ---- */
.menu-res { margin-top: .5rem; }
.menu-res-bloco {
    background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra); overflow: hidden; margin-bottom: 1.25rem;
}
.menu-res-titulo {
    background: var(--marinho); color: #fff; text-align: center; margin: 0;
    padding: .7rem 1rem; font-size: 1.15rem; font-weight: 800; letter-spacing: .04em;
}
.menu-res-corpo { padding: 1rem; }
.menu-res-sub { font-weight: 800; color: var(--marinho); margin: .25rem 0 .5rem; font-size: .95rem; text-transform: uppercase; letter-spacing: .02em; }
.menu-res-sub:not(:first-child) { margin-top: 1.1rem; }

/* botões/chips grandes do menu */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--toque); min-width: 56px; padding: .45rem .9rem;
    background: var(--fundo-claro); color: var(--link); font-weight: 800;
    border: 2px solid var(--borda); border-radius: var(--raio-sm);
    text-decoration: none; font-size: 1rem;
}
.chip:hover, .chip:focus-visible { background: var(--ouro-suave); border-color: var(--ouro); }
.chip.chip-forte { background: var(--ouro); border-color: var(--ouro); color: var(--marinho); }
.chip.chip-largo { width: 100%; }

/* linha de seletor (mês do ano, data) */
.menu-form-linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }
.campo { display: flex; flex-direction: column; gap: .2rem; }
.campo label { font-weight: 700; color: var(--marinho); font-size: .9rem; }
.campo select {
    min-height: var(--toque); font-size: 1rem; padding: .4rem .6rem;
    border: 2px solid var(--borda); border-radius: var(--raio-sm); background: #fff; color: var(--marinho);
}
.menu-form-linha .btn-link-forte { min-height: var(--toque); }
.menu-res-busca { margin-top: 1.25rem; border-top: 2px dashed var(--borda); padding-top: 1rem; }
.menu-res-busca .menu-res-sub { text-align: center; }
.menu-res-busca .menu-form-linha { justify-content: center; }
.menu-res-dica { color: var(--texto-2); font-size: .85rem; text-align: center; margin: .5rem 0 0; }

/* ---- Stubs (consulta / conta) ---- */
.stub-card {
    background: #fff; border: 1px solid var(--borda); border-top: 6px solid var(--ouro);
    border-radius: var(--raio); box-shadow: var(--sombra); padding: 1.25rem 1.1rem;
}
.stub-card h1 { margin-top: 0; }
.stub-params { list-style: none; margin: .75rem 0; padding: 0; }
.stub-params li { padding: .5rem .25rem; border-top: 1px solid var(--borda); }
.stub-params li:first-child { border-top: 0; }
.stub-params .k { font-weight: 800; color: var(--marinho); display: inline-block; min-width: 9rem; }
.stub-params .v { color: var(--link); font-weight: 700; }
.stub-nota { color: var(--texto-2); font-size: .92rem; }

/* ---- Tabela de detalhe da apuração: grupo na MESMA linha do milhar; bicho abaixo.
   Layout estreito (2 colunas) que não corta no celular. (Etapa 4 — ajuste) ---- */
.tabela-apuracao { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tabela-apuracao thead th {
    background: var(--azul-claro); color: var(--marinho); text-align: left;
    padding: .5rem .6rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .01em;
}
.tabela-apuracao tbody td { padding: .5rem .6rem; border-top: 1px solid var(--borda); vertical-align: middle; }
.tabela-apuracao tbody tr:nth-child(even) { background: #fafbfe; }
.tabela-apuracao .col-premio { width: 3.4rem; font-weight: 700; color: var(--texto-2); white-space: nowrap; }
.tabela-apuracao .res-top { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.tabela-apuracao .res-milhar { font-weight: 800; font-size: 1.2rem; letter-spacing: .03em; color: var(--marinho); }
.tabela-apuracao .res-grupo {
    font-weight: 800; font-size: .9rem; color: var(--marinho-90);
    background: var(--ouro-suave); border-radius: 999px; padding: .05rem .45rem;
}
.tabela-apuracao .res-bicho { display: block; color: var(--texto-2); font-size: .9rem; margin-top: .1rem; }
@media (min-width: 720px) {
    .tabela-apuracao thead th { padding: .6rem 1rem; font-size: .9rem; }
    .tabela-apuracao tbody td { padding: .6rem 1rem; }
    .tabela-apuracao .res-milhar { font-size: 1.3rem; }
    .tabela-apuracao .res-bicho { font-size: .95rem; }
}

/* Realce sutil quando a apuração da posição da noite é a Federal */
.resultado-card.is-fed { border-top-color: var(--laranja); }
.resultado-card.is-fed .resultado-cabeca { background: #ffe9e2; }
.poste-grid thead th.is-fed { background: var(--laranja); }
/* Em /loterias TODOS os cards da Federal são is-fed; o salmão destoa da paleta
   navy/#BBCCDC dos demais cabeçalhos. Alinha ao azul-claro de apoio. (P3.11)
   (Na home o salmão continua, pois ali distingue a FED das outras bancas.) */
.loterias .resultado-card.is-fed .resultado-cabeca { background: var(--azul-claro); }

/* ===========================================================================
   9. PÁGINA DE RESULTADOS (/resultados) — tabela familiar do legado
   DIA | DATA | TIPO | 1ºP…7ºP (Poste30/Postetudo), identidade nova. Etapa 5.
   =========================================================================== */
.consulta-grid-wrap { position: relative; }
.consulta-rolavel {
    background: #fff; border: 1px solid var(--borda); border-top: 6px solid var(--ouro);
    border-radius: var(--raio); box-shadow: var(--sombra);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.consulta-grid-wrap.tem-rolagem::after {
    content: ''; position: absolute; top: 7px; right: 1px; bottom: 1px; width: 36px;
    background: linear-gradient(to left, rgba(255,255,255,.95), rgba(255,255,255,0));
    border-radius: 0 var(--raio) var(--raio) 0; pointer-events: none;
    transition: opacity .15s ease;
}
.consulta-grid-wrap.tem-rolagem.rolagem-fim::after { opacity: 0; }

/* ---- Affordance de rolagem (P2.3): hint ACIMA da tabela + borda direita mais
   evidente. O hint de baixo continua existindo; este avisa ANTES de rolar. ---- */
.tabela-dica-topo {
    display: none; margin: 0 .1rem .4rem; color: var(--marinho); font-weight: 700;
    font-size: .9rem; align-items: center; gap: .4rem;
}
.tabela-dica-topo .seta { color: var(--laranja); font-weight: 800; }
.poste-grid-wrap.tem-rolagem .tabela-dica-topo,
.consulta-grid-wrap.tem-rolagem .tabela-dica-topo { display: flex; }
/* Borda direita da área rolável mais forte enquanto há conteúdo escondido. */
.poste-grid-wrap.tem-rolagem .poste-grid-scroll,
.consulta-grid-wrap.tem-rolagem .consulta-rolavel { box-shadow: var(--sombra-forte), inset -14px 0 12px -12px rgba(28,72,115,.28); }
.poste-grid-wrap.tem-rolagem.rolagem-fim .poste-grid-scroll,
.consulta-grid-wrap.tem-rolagem.rolagem-fim .consulta-rolavel { box-shadow: var(--sombra-forte); }

.consulta-tabela { width: 100%; border-collapse: collapse; min-width: 540px; font-size: .92rem; }
.consulta-tabela thead th {
    background: var(--azul-claro); color: var(--marinho); text-align: center;
    padding: .5rem .3rem; font-size: .78rem; text-transform: uppercase;
    letter-spacing: .01em; white-space: nowrap;
}
.consulta-tabela tbody td {
    padding: .45rem .3rem; border-top: 1px solid var(--borda); text-align: center;
    vertical-align: middle; white-space: nowrap;
}
.consulta-tabela tbody tr:nth-child(even) { background: #fafbfe; }
.consulta-tabela .col-ds { color: var(--texto-2); font-weight: 700; font-size: .8rem; }
.consulta-tabela .col-data { font-weight: 600; }
.consulta-tabela .col-tipo { font-weight: 800; color: var(--marinho); }
.consulta-tabela .col-tipo.is-fed { color: var(--laranja); }
.consulta-tabela .cv-milhar { font-weight: 800; letter-spacing: .03em; color: var(--marinho); font-size: 1rem; }
.consulta-tabela .cg-num { display: block; font-weight: 800; color: var(--marinho); font-size: 1rem; }
.consulta-tabela .cg-bicho { display: block; font-size: .62rem; color: var(--texto-2); line-height: 1.2; }
@media (min-width: 720px) {
    .consulta-tabela { font-size: 1rem; }
    .consulta-tabela thead th { padding: .6rem .5rem; font-size: .85rem; }
    .consulta-tabela tbody td { padding: .55rem .5rem; }
    .consulta-tabela .cv-milhar, .consulta-tabela .cg-num { font-size: 1.1rem; }
    .consulta-tabela .cg-bicho { font-size: .72rem; }
}

.consulta-paginacao { margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.consulta-contagem { margin: 0; color: var(--texto-2); font-size: .92rem; font-weight: 600; }
@media (min-width: 720px) {
    .consulta-paginacao { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ===========================================================================
   10. MINHA CONTA (/conta) — assinatura, dados e pagamentos. Etapa 6.
   =========================================================================== */
.conta-card {
    background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra); padding: 1.1rem 1rem; margin-bottom: 1.1rem;
    /* Não esticar por toda a largura no desktop (evita vazio à direita). */
    max-width: 640px;
}
.conta-card h2 { margin-top: 0; }
.conta-assinatura { border-top: 6px solid var(--positivo); }
.conta-assinatura.is-vencida { border-top-color: var(--alerta); }
.conta-status { font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.badge {
    display: inline-flex; align-items: center; padding: .2rem .7rem;
    border-radius: 999px; font-weight: 800; font-size: .85rem; letter-spacing: .04em;
}
.badge-ativa   { background: #e7f5e7; color: var(--positivo); border: 2px solid var(--positivo); }
.badge-vencida { background: #ffeceb; color: #c22914; border: 2px solid #e8512f; }

.conta-dados { list-style: none; margin: 0; padding: 0; }
.conta-dados li { display: flex; flex-wrap: wrap; gap: .25rem .75rem; padding: .55rem 0; border-top: 1px solid var(--borda); }
.conta-dados li:first-child { border-top: 0; }
.conta-dados .k { flex: 0 0 6rem; font-weight: 700; color: var(--texto-2); }
.conta-dados .v { font-weight: 600; color: var(--marinho); overflow-wrap: anywhere; }

.conta-pagamentos { width: 100%; border-collapse: collapse; font-size: .92rem; }
.conta-pagamentos thead th {
    background: var(--azul-claro); color: var(--marinho); text-align: left;
    padding: .5rem .45rem; font-size: .76rem; text-transform: uppercase;
}
.conta-pagamentos tbody td { padding: .5rem .4rem; border-top: 1px solid var(--borda); vertical-align: top; }
.conta-pagamentos tbody tr:nth-child(even) { background: #fafbfe; }
.pag-status { font-weight: 700; font-size: .85rem; }
.pag-ok     { color: var(--positivo); }
.pag-erro   { color: #c22914; }
.pag-neutro { color: var(--texto-2); }
@media (min-width: 720px) {
    .conta-pagamentos { font-size: 1rem; }
    .conta-pagamentos thead th { font-size: .85rem; padding: .55rem .75rem; }
    .conta-pagamentos tbody td { padding: .55rem .75rem; }
}

/* ===========================================================================
   11. RENOVAR ASSINATURA (/renovar) — cards de plano. Etapa 7 (Stripe).
   =========================================================================== */
.planos-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; }
@media (min-width: 720px) { .planos-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.plano-card {
    position: relative; display: flex; flex-direction: column; align-items: center;
    gap: .35rem; text-align: center;
    background: #fff; border: 2px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra); padding: 1.5rem 1rem 1.25rem;
}
.plano-card.is-destaque { border-color: var(--ouro); box-shadow: var(--sombra-forte); }
.plano-tag {
    position: absolute; top: -0.85rem;
    background: var(--ouro); color: var(--marinho); font-weight: 800; font-size: .8rem;
    padding: .2rem .8rem; border-radius: 999px;
}
.plano-nome { font-size: 1.25rem; font-weight: 800; color: var(--marinho); }
.plano-dias { color: var(--texto-2); font-weight: 600; }
.plano-preco { font-size: 1.9rem; font-weight: 800; color: var(--marinho); margin: .25rem 0 .5rem; letter-spacing: -.01em; }
.plano-btn { width: 100%; }
.alert-erro { background: #ffeceb; color: #c22914; border: 1px solid #e8512f; }
.alert-simulado { background: var(--ouro-suave); color: var(--marinho); border: 1px solid var(--ouro); font-weight: 600; }

/* ===========================================================================
   12. ETAPA 8 — Loterias, Tabelão, Resumo top-10 e Dígitos (aditivo)
   =========================================================================== */

/* ---- Loterias ---- */
.loterias-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: .85rem; }
@media (min-width: 720px)  { .loterias-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 980px)  { .loterias-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.loteria-card {
    display: flex; flex-direction: column; gap: .4rem; min-width: 0;
    background: #fff; border: 2px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra); padding: 1rem; text-decoration: none; color: var(--texto);
    transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease;
}
.loteria-card:hover, .loteria-card:focus-visible {
    border-color: var(--ouro); box-shadow: var(--sombra-forte); transform: translateY(-2px);
}
.loteria-nome { font-size: 1.2rem; font-weight: 800; color: var(--marinho); }
.loteria-desc { color: var(--texto-2); font-size: .92rem; }
.loteria-concurso { font-weight: 700; color: var(--marinho); font-size: .95rem; }
.loteria-bolas { display: flex; flex-wrap: wrap; gap: .3rem; }
.bola {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.1rem; height: 2.1rem; padding: 0 .3rem; border-radius: 50%;
    background: var(--marinho); color: #fff; font-weight: 800; font-size: 1rem;
    font-variant-numeric: tabular-nums;
}
.bola-mini { min-width: 1.7rem; height: 1.7rem; font-size: .85rem; background: var(--texto-2); }
.loteria-extra { color: var(--texto-2); font-size: .92rem; display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }

/* #6 (Luiz 06/07/2026): cores das bolinhas por loteria, iguais ao ojogodobicho.com
   (fonte: .com resultados.htm, classes bola-*). Texto branco herdado de .bola.
   Federal não tem bolinha (mostra milhar/bicho). */
.loteria--mega-sena       .bola { background: #209869; } /* Mega-Sena */
.loteria--quina           .bola { background: #1c4b9c; } /* Quina */
.loteria--lotofacil       .bola { background: #930989; } /* Lotofácil */
.loteria--lotomania       .bola { background: #f78100; } /* Lotomania */
.loteria--timemania       .bola { background: #00a651; } /* Timemania */
.loteria--dia-de-sorte    .bola { background: #cf9b00; } /* Dia de Sorte */
.loteria--dupla-sena      .bola { background: #a4123f; } /* Dupla Sena (inclui 2º sorteio) */
.loteria--super-sete      .bola { background: #128a3b; } /* Super Sete */
.loteria--mais-milionaria .bola { background: #1b3a8c; } /* +Milionária */
.loteria-ver { color: var(--link); font-weight: 700; margin-top: .25rem; }
.loteria-concursos { display: grid; gap: .85rem; grid-template-columns: minmax(0,1fr); }
.loteria-sorteio {
    background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .45rem;
}
.loteria-sorteio.is-ultimo { border: 2px solid var(--ouro); }
.loteria-sorteio-cabeca { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; color: var(--marinho); }
.loteria-sorteio-cabeca span { color: var(--texto-2); }
.loteria-tag {
    background: var(--ouro); color: var(--marinho) !important; font-weight: 800; font-size: .78rem;
    padding: .15rem .6rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em;
}
.loteria-stats-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 720px) { .loteria-stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.loteria-stats-card h3 { color: var(--marinho); margin: 0 0 .5rem; }

/* ---- Tabelão ---- */
.tabelao-cabecalho { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 .9rem; }
.tabelao-pill {
    display: inline-flex; align-items: center; gap: .3rem; background: #fff;
    border: 1px solid var(--borda); border-radius: 999px; padding: .35rem .8rem;
    font-size: .92rem; color: var(--texto);
}
.tabelao-pill strong { color: var(--marinho); }
.tabelao-pill-forte { background: var(--ouro-suave); border-color: var(--ouro); }
.tabelao-grade {
    display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .35rem;
    background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra); padding: .6rem;
}
@media (min-width: 720px) { .tabelao-grade { grid-template-columns: repeat(10, minmax(0,1fr)); gap: .4rem; } }
.tabelao-cel {
    display: flex; align-items: center; justify-content: center; gap: .15rem;
    min-height: 44px; border: 1px solid var(--borda); border-radius: var(--raio-sm);
    background: #fafbfe; font-weight: 700; color: var(--marinho);
    font-variant-numeric: tabular-nums; font-size: 1rem;
}
.tabelao-cel.acertou { background: var(--ouro); border-color: var(--ouro); }
.tabelao-acertos { font-size: .78rem; font-weight: 800; color: #7a4a00; }
.tabelao-explica {
    margin-top: .9rem; background: #fff; border: 1px solid var(--borda);
    border-radius: var(--raio); padding: .9rem 1rem; color: var(--texto-2); font-size: .95rem;
}
.tabelao-exemplo.acertou { background: var(--ouro); border-radius: var(--raio-sm); padding: 0 .35rem; color: var(--marinho); font-weight: 700; }

/* ---- Resumo do dia (top-10) ---- */
.resumo10-data { color: var(--texto-2); margin: .15rem 0 .5rem; }
.resumo10-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 720px) { .resumo10-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.resumo10-card {
    background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra); padding: 1rem; min-width: 0;
}
.resumo10-card h2 { font-size: 1.15rem; color: var(--marinho); margin: 0 0 .5rem; }
.resumo10-sub { font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
    color: var(--positivo); margin: .5rem 0 .3rem; }
.resumo10-sub-atraso { color: var(--laranja-hover); }
.resumo10-fichas { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; counter-reset: ficha; }
.resumo10-fichas li {
    display: inline-flex; align-items: center; min-height: 36px; padding: .15rem .6rem;
    background: #eef4ec; border: 1px solid #cfe0cc; border-radius: var(--raio-sm);
    font-weight: 700; color: var(--marinho); font-variant-numeric: tabular-nums; font-size: .98rem;
}
.resumo10-fichas-atraso li { background: #fdf0ee; border-color: #f0d2cc; }
.resumo10-links { margin: .6rem 0 0; font-size: .95rem; }
.resumo10-nota {
    margin-top: 1rem; background: var(--ouro-suave); border: 1px solid var(--ouro);
    border-radius: var(--raio); padding: 1rem; text-align: center;
}
.resumo10-nota p { margin: .25rem 0; }

/* ---- Dígitos ---- */
.digitos-explica {
    background: #fff; border: 2px solid var(--ouro); border-radius: var(--raio);
    box-shadow: var(--sombra); padding: 1rem; margin: 1.25rem 0 1rem;
}
.digitos-explica h2 { color: var(--marinho); margin: 0 0 .4rem; font-size: 1.2rem; }
.digitos-exemplo { display: flex; gap: .5rem; justify-content: center; margin: .75rem 0; }
.digitos-exemplo-coluna { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.digitos-exemplo-dig {
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: var(--raio-sm);
    background: var(--marinho); color: #fff; font-size: 1.7rem; font-weight: 800;
}
.digitos-exemplo-rotulo { font-weight: 700; color: var(--marinho); font-size: .82rem; }
.digitos-exemplo-ordem { color: var(--texto-2); font-size: .78rem; }
.digitos-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 720px) { .digitos-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.digitos-card {
    background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra); padding: 1rem; min-width: 0;
}
.digitos-card h2 { font-size: 1.1rem; color: var(--marinho); margin: 0 0 .5rem; }
.digitos-card h2 small { color: var(--texto-2); font-weight: 600; font-size: .85rem; }
.digitos-tabela { font-size: .95rem; }
.digitos-atraso { margin: .6rem 0 0; color: var(--texto-2); font-size: .92rem; }
.digitos-resumos { margin-top: 1.25rem; }
.digitos-resumos h2, .digitos-links h2 { font-size: 1.15rem; color: var(--marinho); }
.digitos-resumos h2 small { color: var(--texto-2); font-weight: 600; font-size: .85rem; }
.digitos-ultima {
    background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
    padding: .8rem 1rem; margin: .5rem 0 .75rem;
}
.digitos-lista { font-weight: 700; color: var(--marinho); letter-spacing: .35em; font-variant-numeric: tabular-nums; }
.digitos-links { margin-top: 1.25rem; }

/* ---- (0) Como está cada posição agora (resumo do topo) ---- */
.digitos-agora { margin-bottom: 1.25rem; }
.digitos-agora h2 { font-size: 1.15rem; color: var(--marinho); margin: 0 0 .25rem; }
.digitos-agora h2 small { color: var(--texto-2); font-weight: 600; font-size: .85rem; }
.digitos-agora-sub { margin: 0 0 .75rem; color: var(--texto-2); font-size: .88rem; line-height: 1.45; }
.digitos-agora-grid { display: grid; gap: .7rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 560px) { .digitos-agora-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 960px) { .digitos-agora-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.digitos-agora-card {
    background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra); padding: .8rem .9rem; min-width: 0;
}
.digitos-agora-card h3 { font-size: 1rem; color: var(--marinho); margin: 0 0 .5rem; }
.digitos-agora-card h3 small { color: var(--texto-2); font-weight: 600; font-size: .78rem; }
.digitos-agora-linha { display: flex; align-items: center; gap: .55rem; margin-top: .45rem; min-width: 0; }
.digitos-agora-dig {
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 42px; height: 42px; border-radius: var(--raio-sm);
    font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.digitos-agora-dig.is-mais   { background: var(--ouro); color: var(--marinho); }
.digitos-agora-dig.is-atraso { background: var(--marinho); color: #fff; }
.digitos-agora-txt { display: flex; flex-direction: column; min-width: 0; }
.digitos-agora-txt strong { color: var(--marinho); font-size: .88rem; }
.digitos-agora-txt small { color: var(--texto-2); font-size: .78rem; line-height: 1.35; }
.digitos-agora-nota {
    margin: .8rem 0 0; background: var(--ouro-suave); border: 1px solid var(--ouro);
    border-radius: var(--raio); padding: .7rem .9rem;
    color: var(--marinho); font-size: .85rem; line-height: 1.45;
}

/* ---- (1+2a) MCDU desta apuração (hero) ---- */
.digitos-apuracao {
    background: var(--marinho); color: #fff; border-radius: var(--raio);
    box-shadow: var(--sombra-forte); padding: 1rem; margin-bottom: 1rem;
}
.digitos-apuracao h2 { color: #fff; margin: 0 0 .35rem; font-size: 1.15rem; }
.digitos-apuracao-sub { margin: 0 0 .75rem; font-size: .9rem; color: #eaf1f8; line-height: 1.45; }
.digitos-apuracao-sub strong { color: var(--ouro); }
.digitos-mcdu-tira { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.digitos-mcdu-coluna { display: flex; flex-direction: column; align-items: center; gap: .2rem; min-width: 0; }
.digitos-mcdu-dig {
    display: flex; align-items: center; justify-content: center;
    width: 60px; height: 60px; border-radius: var(--raio-sm);
    background: var(--ouro); color: var(--marinho); font-size: 1.9rem; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.digitos-mcdu-rotulo { font-weight: 700; color: #fff; font-size: .8rem; }

/* ---- (3) Gráficos de % por posição ---- */
.digitos-graficos { margin-bottom: 1.25rem; }
.digitos-graficos h2 { font-size: 1.15rem; color: var(--marinho); margin: 0 0 .25rem; }
.digitos-graficos h2 small { color: var(--texto-2); font-weight: 600; font-size: .85rem; }
.digitos-graficos-sub { margin: 0 0 .75rem; color: var(--texto-2); font-size: .88rem; line-height: 1.45; }
.digitos-graficos-grid { display: grid; gap: .85rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 720px) { .digitos-graficos-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.digitos-grafico {
    margin: 0; background: #fff; border: 1px solid var(--borda);
    border-radius: var(--raio); box-shadow: var(--sombra); padding: .85rem .9rem; min-width: 0;
}
.digitos-grafico figcaption { font-weight: 700; color: var(--marinho); font-size: .98rem; margin-bottom: .5rem; }
.digitos-grafico figcaption small { color: var(--texto-2); font-weight: 600; font-size: .82rem; }
.barras { display: flex; flex-direction: column; gap: .28rem; }
.barra-linha { display: grid; grid-template-columns: 1.1rem 1fr auto; align-items: center; gap: .45rem; }
.barra-dig {
    font-weight: 800; color: var(--marinho); text-align: center;
    font-variant-numeric: tabular-nums; font-size: .92rem;
}
.barra-trilho {
    position: relative; height: 14px; background: var(--fundo-claro);
    border-radius: 999px; overflow: hidden; min-width: 0;
}
.barra-preenche {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--marinho), var(--link));
    min-width: 4px;
}
.barra-pct {
    font-size: .8rem; font-weight: 700; color: var(--texto-2);
    font-variant-numeric: tabular-nums; min-width: 3.1rem; text-align: right;
}

/* ---- (2b) O dia todo, apuração por apuração ---- */
.digitos-dia { margin-bottom: 1.25rem; }
.digitos-dia h2 { font-size: 1.15rem; color: var(--marinho); margin: 0 0 .25rem; }
.digitos-dia h2 small { color: var(--texto-2); font-weight: 600; font-size: .85rem; }
.digitos-dia-sub { margin: 0 0 .75rem; color: var(--texto-2); font-size: .88rem; line-height: 1.45; }
.digitos-dia-grid { display: grid; gap: .7rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 560px) { .digitos-dia-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 860px) { .digitos-dia-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.digitos-dia-card {
    background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra); padding: .7rem .8rem; min-width: 0;
}
.digitos-dia-card.is-active { border-color: var(--ouro); box-shadow: 0 0 0 2px var(--ouro-suave), var(--sombra); }
.digitos-dia-card-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: .4rem; margin-bottom: .5rem; flex-wrap: wrap;
}
.digitos-dia-banca { font-weight: 800; color: var(--marinho); font-size: 1rem; }
.digitos-dia-milhar { color: var(--texto-2); font-size: .82rem; }
.digitos-dia-milhar strong { color: var(--marinho); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.digitos-dia-mcdu { display: flex; gap: .35rem; }
.digitos-dia-col { display: flex; flex-direction: column; align-items: center; gap: .15rem; flex: 1 1 0; min-width: 0; }
.digitos-dia-dig {
    display: flex; align-items: center; justify-content: center; width: 100%;
    aspect-ratio: 1 / 1; max-width: 46px; border-radius: var(--raio-sm);
    background: var(--marinho); color: #fff; font-size: 1.35rem; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.digitos-dia-card.is-active .digitos-dia-dig { background: var(--laranja); }
.digitos-dia-rot { font-size: .68rem; color: var(--texto-2); font-weight: 600; }

/* ===========================================================================
   13. RESUMO DAS ESTATÍSTICAS — redesign progressivo (mobile-first)
   =========================================================================== */
.rstat-rotulo-campo { font-weight: 700; color: var(--marinho); margin: .5rem 0 .25rem; }

/* Toggle Mais Sorteados / Mais Atrasados (grande, tocável) */
.rstat-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin: .6rem 0 .25rem; }
.rstat-toggle a {
    display: flex; align-items: center; justify-content: center; min-height: var(--toque);
    padding: .5rem .6rem; border: 2px solid var(--marinho); border-radius: 999px;
    text-decoration: none; font-weight: 800; color: var(--marinho); background: #fff; text-align: center;
}
.rstat-toggle a.is-active { background: var(--marinho); color: #fff; }

.rstat-dir-titulo { font-weight: 800; color: var(--marinho); margin: .75rem 0 .4rem; font-size: 1.05rem; }
.rstat-dir-titulo small { font-weight: 600; color: var(--texto-2); }
/* Legenda curta das marcas, junto dos números (P3.10). */
.rstat-legenda-curta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem;
    margin: 0 0 .7rem; padding: .5rem .7rem; font-size: .9rem; color: var(--texto-2);
    background: var(--fundo-claro); border: 1px solid var(--borda); border-radius: var(--raio-sm);
}
.rstat-legenda-curta .rstat-m { margin-right: .1rem; }
.rstat-legenda-curta-sep { color: var(--borda); }
.rstat-legenda-curta a { margin-left: auto; font-weight: 700; color: var(--link); }

.rstat-grid { display: grid; gap: .75rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 720px) { .rstat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 980px) { .rstat-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.rstat-card {
    background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra); padding: .85rem; min-width: 0;
}
.rstat-card-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.rstat-sigla {
    font-weight: 800; color: #fff; background: var(--marinho);
    padding: .15rem .55rem; border-radius: var(--raio-sm); font-size: .95rem; letter-spacing: .03em;
}
.rstat-nome { color: var(--texto-2); font-size: .88rem; }

.rstat-fichas { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; }
.rstat-ficha {
    display: inline-flex; align-items: center; gap: .15rem; min-height: 38px; padding: .2rem .55rem;
    background: #eef2f8; border: 1px solid var(--borda); border-radius: var(--raio-sm);
    font-weight: 700; color: var(--marinho); font-variant-numeric: tabular-nums; font-size: 1rem;
}
.rstat-ficha.tem-estrela { background: var(--ouro); border-color: #e8a900; }
.rstat-num { display: inline-flex; align-items: baseline; gap: .25rem; }
.rstat-bicho { font-weight: 600; font-size: .8rem; color: var(--texto-2); }
.rstat-ficha.tem-estrela .rstat-bicho { color: #7a4a00; }
.rstat-m { font-weight: 900; }
.rstat-m-estrela { color: #b06f00; font-size: 1.15rem; line-height: 1; }
.rstat-m-hash { color: var(--laranja-hover); }

.rstat-vertudo { margin: .55rem 0 0; font-size: .9rem; }

/* MCDU (4 posições) */
.rstat-mcdu { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.rstat-mcdu-col { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.rstat-mcdu-dig {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px;
    background: var(--marinho); color: #fff; font-size: 1.4rem; font-weight: 800; border-radius: var(--raio-sm);
}
.rstat-mcdu-rot { font-size: .72rem; color: var(--texto-2); font-weight: 700; }

/* DFR (caixa separada) */
.rstat-card-dfr .rstat-dfr {
    display: flex; align-items: center; justify-content: center; min-height: 56px;
    background: var(--ouro-suave); border: 1px solid var(--ouro); border-radius: var(--raio-sm);
    font-size: 1.8rem; font-weight: 800; color: var(--marinho);
}

/* Legenda das marcas */
.rstat-legenda {
    margin-top: 1rem; background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra); padding: 1rem;
}
.rstat-legenda h2 { font-size: 1.1rem; color: var(--marinho); margin: 0 0 .6rem; }
.rstat-legenda ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.rstat-legenda li { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; color: var(--texto); }
.rstat-amostra {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: .15rem; min-height: 34px; padding: .15rem .5rem;
    border-radius: var(--raio-sm); border: 1px solid var(--borda); background: #eef2f8;
    font-weight: 800; color: var(--marinho); font-variant-numeric: tabular-nums;
}
.rstat-amostra.tem-estrela { background: var(--ouro); border-color: #e8a900; }
.rstat-legenda-nota { margin: .75rem 0 0; color: var(--texto-2); font-size: .92rem; }

/* ===========================================================================
   14. "ANTES DO DEPLOY" — Cadastro/CTA, Associe-se, Contato, FAQ, Termos/Privac.
   Aditiva. Reusa tokens da marca; mobile-first; áreas de toque ≥ 44px.
   =========================================================================== */

/* ---- CTA "Associe-se" no cabeçalho + link discreto ---- */
.cabecalho-acao { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: nowrap; justify-content: flex-end; }
.cabecalho-acao a { font-weight: 700; }
/* Conta = ícone + rótulo curto (não "Minha Conta", que já está na nav);
   fica lado a lado com "Sair", alinhado verticalmente, sem empurrar o header. */
.cabecalho-acao .conta-icone { gap: .3rem; padding: .4rem .55rem; color: var(--marinho); }
.cabecalho-acao .conta-icone svg { flex: none; }
.cabecalho-acao .conta-icone-txt { font-weight: 700; }
.cabecalho-acao .sair-link { color: var(--texto-2); padding: .4rem .55rem; }
.cabecalho-acao .sair-link:hover { color: var(--marinho); }
@media (max-width: 480px) {
    /* No celular só o ícone (com aria-label) para caber ao lado da logo. */
    .cabecalho-acao .conta-icone-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.cta-associar {
    display: inline-flex; align-items: center; min-height: 38px; padding: .3rem .85rem;
    background: var(--laranja); color: #fff !important; border-radius: 999px;
    font-weight: 800; text-decoration: none; font-size: .95rem; white-space: nowrap;
}
.cta-associar:hover { background: var(--laranja-hover); }

/* ---- Rodapé institucional (2ª linha de links) ---- */
.rodape-institucional { margin-top: .35rem; opacity: .95; font-size: .92rem; }

/* ---- Formulário padrão (contato e afins, dentro do layout main) ---- */
.form-padrao {
    background: #fff; border: 1px solid var(--borda); border-top: 6px solid var(--ouro);
    border-radius: var(--raio); box-shadow: var(--sombra); padding: 1.1rem 1rem 1.25rem;
    max-width: 640px;
}
.form-padrao .campo { margin-bottom: 1.05rem; }
.form-padrao label { display: block; font-weight: 700; color: var(--marinho); font-size: .95rem; margin-bottom: .35rem; }
.form-padrao input[type=text],
.form-padrao input[type=email],
.form-padrao textarea {
    width: 100%; min-height: 52px; padding: .6rem .9rem; font-size: 1.05rem; font-family: var(--fonte);
    background: #fff; color: var(--marinho); border: 2px solid var(--borda); border-radius: var(--raio-sm);
}
.form-padrao textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.form-padrao input::placeholder, .form-padrao textarea::placeholder { color: #8aa0b8; }
.form-padrao input:focus, .form-padrao textarea:focus { border-color: var(--marinho); outline: none; }
.form-padrao .btn-link-forte { width: 100%; margin-top: .25rem; }
@media (min-width: 560px) { .form-padrao .btn-link-forte { width: auto; } }

/* erros de campo e honeypot — compartilhados (contato + cadastro no layout main) */
.field-error { display: block; margin-top: .35rem; color: #c22914; font-weight: 600; font-size: .88rem; }
.input-erro { border-color: #e8512f !important; background: #fff7f6; }
.hp-campo { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

/* Cloudflare Turnstile — não estoura 390px (overflow 0) */
.turnstile-wrap { margin: 0 0 1.1rem; max-width: 100%; overflow: hidden; }
.turnstile-wrap .cf-turnstile { max-width: 100%; }

/* ---- Associe-se ---- */
.assoc-hero {
    background: linear-gradient(160deg, var(--marinho), var(--marinho-90));
    color: #fff; border-radius: var(--raio); box-shadow: var(--sombra-forte);
    padding: 1.75rem 1.25rem; text-align: center; margin-bottom: 1.5rem;
}
.assoc-hero h1 { color: #fff; font-size: 1.7rem; margin-bottom: .5rem; }
.assoc-sub { color: #e6eef7; font-size: 1.05rem; max-width: 38rem; margin: 0 auto 1.25rem; }
.assoc-cta { font-size: 1.1rem; padding: .7rem 1.6rem; }
.assoc-login-link { margin: .9rem 0 0; color: #cfe0f0; font-size: .95rem; }
.assoc-login-link a { color: var(--ouro); font-weight: 800; text-decoration: none; }
.assoc-h2 { font-size: 1.3rem; margin: 1.5rem 0 .9rem; }
.assoc-beneficios { display: grid; grid-template-columns: minmax(0,1fr); gap: .85rem; }
@media (min-width: 620px) { .assoc-beneficios { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 940px) { .assoc-beneficios { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.beneficio-card {
    background: #fff; border: 1px solid var(--borda); border-left: 5px solid var(--ouro);
    border-radius: var(--raio-sm); box-shadow: var(--sombra); padding: 1rem 1.1rem;
}
.beneficio-card h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.beneficio-card p { margin: 0; color: var(--texto-2); font-size: .95rem; }
.assoc-passos { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1.1rem 1.2rem; margin-top: 1.5rem; }
.passos-lista { margin: 0 0 .5rem; padding-left: 1.3rem; }
.passos-lista li { margin-bottom: .6rem; }
.assoc-passos .assoc-cta { margin-top: .9rem; }
.assoc-fina { margin-top: 1.5rem; text-align: center; color: var(--texto-2); }

/* ---- FAQ ---- */
.faq-grupo { font-size: 1.25rem; margin: 1.5rem 0 .75rem; padding-bottom: .3rem; border-bottom: 2px solid var(--borda); }
.faq-lista { display: grid; gap: .65rem; }
.faq-item {
    background: #fff; border: 1px solid var(--borda); border-radius: var(--raio-sm); box-shadow: var(--sombra);
    overflow: hidden;
}
.faq-item > summary {
    list-style: none; cursor: pointer; padding: .9rem 1rem; min-height: var(--toque);
    font-weight: 700; color: var(--marinho); display: flex; align-items: center; gap: .6rem;
    font-size: 1.02rem;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::before {
    content: '+'; flex: 0 0 1.3rem; font-weight: 800; font-size: 1.3rem; color: var(--laranja); line-height: 1;
}
.faq-item[open] > summary::before { content: '\2212'; } /* menos */
.faq-item[open] > summary { background: var(--ouro-suave); }
.faq-resposta { padding: 0 1rem 1rem; }
.faq-resposta p { margin: 0; color: var(--texto-2); }

/* ---- Documentos legais (Termos / Privacidade) ---- */
.doc-legal { max-width: 760px; }
.doc-legal h2 { font-size: 1.2rem; margin: 1.4rem 0 .5rem; }
.doc-legal p { margin: 0 0 .85rem; color: var(--marinho); }
.doc-lista { margin: 0 0 .85rem; padding-left: 1.3rem; }
.doc-lista li { margin-bottom: .4rem; color: var(--marinho); }
.doc-data { color: var(--texto-2); font-size: .9rem; font-weight: 600; margin-bottom: 1rem !important; }
.doc-rodape { margin-top: 1.5rem; }
.rascunho-aviso {
    background: var(--ouro-suave); border: 1px solid var(--ouro); border-left: 6px solid var(--ouro);
    border-radius: var(--raio-sm); padding: .85rem 1rem; margin-bottom: 1rem; color: var(--marinho); font-size: .95rem;
}
.rascunho-aviso em { font-style: normal; background: #fff; padding: 0 .25rem; border-radius: 3px; font-weight: 700; }
.doc-legal em { color: var(--texto-2); }
.rascunho-rodape { margin-top: 1rem; color: var(--texto-2); font-size: .9rem; }

/* ===========================================================================
   15. SIMULANDO (testador de combinações) + DESDOBRAMENTOS (fechamentos)
   Aditiva. Mobile-first; grades que quebram (overflow 0 em 390px); toque ≥44px.
   =========================================================================== */

/* ---- Cabeçalhos / introduções dos dois recursos ---- */
.simula-head, .desd-head { margin-bottom: 1rem; }
.simula-intro, .desd-intro, .simula-ajuda, .desd-ajuda, .desd-sub {
    color: var(--texto-2); margin: .4rem 0; max-width: 60ch;
}
.simula-ajuda, .desd-ajuda { background: var(--ouro-suave); border-radius: var(--raio-sm); padding: .6rem .8rem; color: var(--marinho); }

/* ---- Landing: cards de tipo (Simulando) e de roda (Desdobramentos) ---- */
.simula-tipos, .desd-cards {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; margin: 1rem 0;
}
@media (min-width: 560px) {
    .simula-tipos, .desd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.simula-tipo-card, .desd-card {
    display: flex; flex-direction: column; gap: .35rem;
    background: #fff; border: 1px solid var(--borda); border-top: 6px solid var(--ouro);
    border-radius: var(--raio); box-shadow: var(--sombra); padding: .9rem 1rem;
    text-decoration: none; color: var(--marinho);
}
.simula-tipo-card:hover, .desd-card:hover { box-shadow: var(--sombra-forte); }
.simula-tipo-nome, .desd-card-rot { font-weight: 800; font-size: 1.1rem; }
.simula-tipo-ajuda { color: var(--texto-2); font-size: .92rem; }
.desd-card-n { font-weight: 800; color: var(--marinho); }
.simula-tipo-cta, .desd-card-cta { color: var(--laranja); font-weight: 700; font-size: .95rem; }

.desd-loteria { margin: 1.2rem 0 .4rem; border-bottom: 2px solid var(--borda); padding-bottom: .2rem; }

/* ---- Abas de tipo (Simulando) ---- */
.simula-abas { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0; }
.simula-aba {
    display: inline-flex; min-height: 40px; align-items: center; padding: .3rem .7rem;
    background: #fff; border: 1px solid var(--borda); border-radius: 999px;
    text-decoration: none; color: var(--link); font-weight: 700; font-size: .9rem;
}
.simula-aba.is-active { background: var(--marinho); color: #fff; border-color: var(--marinho); }

/* ---- Mensagem de erro amigável ---- */
.simula-erro {
    background: #fff0ee; border: 1px solid #f3b6ab; color: #a3271a;
    border-radius: var(--raio-sm); padding: .65rem .85rem; font-weight: 600; margin: .6rem 0;
}

/* ---- Formulário / campos ---- */
.simula-form, .desd-form { margin: .8rem 0 1rem; }
.simula-campo-rotulo { font-weight: 700; color: var(--marinho); margin: .2rem 0 .5rem; }
.simula-campo-digitos {
    width: 100%; max-width: 320px; min-height: 56px; padding: .6rem .9rem;
    font-size: 1.6rem; letter-spacing: .25em; text-align: center; font-family: var(--fonte);
    border: 2px solid var(--borda); border-radius: var(--raio); background: #fff; color: var(--marinho);
}
.simula-campo-digitos:focus { outline: 3px solid var(--ouro); border-color: var(--ouro); }
.simula-dica { color: var(--texto-2); font-size: .9rem; margin: .4rem 0; }

/* ---- Grades de seleção (grupos / dezenas / números de loteria) ---- */
.simula-grade { display: grid; gap: .4rem; margin: .3rem 0 .6rem; }
.simula-grade-grupo   { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
.simula-grade-dezena  { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
.simula-grade-loteria { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }

.simula-cel {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 46px; padding: .25rem; border: 1px solid var(--borda); border-radius: var(--raio-sm);
    background: #fff; color: var(--marinho); cursor: pointer; text-align: center; user-select: none;
}
.simula-cel input { position: absolute; opacity: 0; width: 0; height: 0; }
.simula-cel-num { font-weight: 800; font-size: 1rem; line-height: 1.1; }
.simula-cel-bicho { font-size: .68rem; color: var(--texto-2); line-height: 1.1; }
.simula-cel.is-on, .simula-cel:has(input:checked) {
    background: var(--ouro); border-color: var(--ouro); color: var(--marinho);
}
.simula-cel:has(input:checked) .simula-cel-bicho { color: var(--marinho-90); }
.simula-cel:focus-within { outline: 3px solid var(--marinho); }

/* ---- Ações ---- */
.simula-acoes { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .6rem; }
.simula-btn {
    min-height: 50px; padding: .5rem 1.4rem; font-size: 1.05rem; font-weight: 800;
    background: var(--laranja); color: #fff; border: none; border-radius: 999px; cursor: pointer;
}
.simula-btn:hover { background: var(--laranja-hover); }
.simula-limpar { color: var(--link); font-weight: 700; text-decoration: none; }

/* ---- Chips (seleção / combinações) ---- */
.simula-selecao { margin: .5rem 0; color: var(--texto-2); }
.simula-chip {
    display: inline-block; margin: .15rem; padding: .12rem .5rem; background: var(--ouro-suave);
    border: 1px solid var(--ouro); border-radius: 999px; font-weight: 800; color: var(--marinho); font-size: .9rem;
}

/* ---- Resultado do backtest (grupo/dezena) ---- */
.simula-resultado { margin-top: 1rem; }
.simula-res-info { color: var(--marinho); margin: .4rem 0; }
.simula-baldes { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: .5rem; margin: .6rem 0 1rem; }
.simula-balde {
    display: flex; flex-direction: column; align-items: center; gap: .1rem;
    background: #fff; border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: .55rem .3rem; text-align: center;
}
.simula-balde.tem { border-top: 4px solid var(--ouro); }
.simula-balde-rot { font-weight: 800; color: var(--marinho); font-size: .9rem; }
.simula-balde-n { font-size: 1.5rem; font-weight: 800; color: var(--laranja); line-height: 1; }
.simula-balde-leg { font-size: .72rem; color: var(--texto-2); }

.simula-det { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio-sm); margin: .5rem 0; padding: .3rem .6rem; }
.simula-det summary { font-weight: 700; color: var(--marinho); cursor: pointer; padding: .4rem 0; }
.simula-lista { list-style: none; margin: .3rem 0; padding: 0; }
.simula-lista li {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    padding: .45rem 0; border-top: 1px dashed var(--borda);
}
.simula-li-data { font-weight: 700; color: var(--texto-2); min-width: 84px; font-size: .9rem; }
.simula-li-combo { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.simula-li-banca { color: var(--texto-2); font-size: .85rem; margin-left: auto; }
.simula-g {
    display: inline-block; min-width: 28px; text-align: center; padding: .1rem .35rem;
    border-radius: var(--raio-sm); background: var(--fundo-claro); border: 1px solid var(--borda); font-weight: 700; font-size: .85rem;
}
.simula-g.hit { background: var(--ouro); border-color: var(--ouro); color: var(--marinho); }

/* ---- Desdobramentos: jogos gerados ---- */
.loterias-ferramenta {
    display: block; background: var(--marinho); color: #fff !important; text-decoration: none;
    border-radius: var(--raio); padding: .9rem 1rem; margin: 0 0 1.1rem; box-shadow: var(--sombra);
    border-left: 6px solid var(--ouro);
}
.loterias-ferramenta:hover { background: var(--marinho-90); }
.loterias-ferramenta-tit { display: block; font-weight: 800; font-size: 1.15rem; }
.loterias-ferramenta-desc { display: block; opacity: .92; font-size: .92rem; margin: .15rem 0; }
.loterias-ferramenta-cta { display: block; color: var(--ouro); font-weight: 800; font-size: .95rem; }

.desd-resultado { margin-top: 1rem; }
.desd-jogos { list-style: none; counter-reset: jogo; margin: .6rem 0; padding: 0; display: grid; gap: .5rem; }
.desd-jogo {
    counter-increment: jogo; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
    background: #fff; border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: .55rem .7rem .55rem 2.4rem; position: relative;
}
.desd-jogo::before {
    content: counter(jogo); position: absolute; left: .6rem; top: 50%; transform: translateY(-50%);
    font-weight: 800; color: var(--texto-2); font-size: .9rem; min-width: 1.4rem;
}
.desd-dz {
    display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 38px;
    border-radius: 999px; background: var(--ouro); color: var(--marinho); font-weight: 800; font-size: 1rem;
}
.desd-nota { color: var(--texto-2); font-size: .88rem; margin-top: .8rem; }
.desd-nota-rolar { margin-top: 0; }
/* Rodas grandes (Lotofácil): lista rolável p/ não estourar a página no celular */
.desd-jogos-rolavel {
    max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: .5rem; border: 1px solid var(--borda); border-radius: var(--raio-sm);
    background: var(--ouro-suave); overscroll-behavior: contain;
}

/* ===========================================================================
   16. PAYWALL (Etapa 11) — gate "conteúdo exclusivo", flash info, externos
       (aditivo; mobile-first; overflow 0 em 390px)
   =========================================================================== */

/* Flash informativo (ex.: assinatura vencida na raiz) */
.alert-info { background: var(--ouro-suave); color: var(--marinho); border: 1px solid #f0d999; }

/* Tela do gate "Conteúdo exclusivo para assinantes" */
.gate-exclusivo { display: flex; justify-content: center; }
.gate-card {
    background: #fff; border: 1px solid var(--borda); border-top: 6px solid var(--ouro);
    border-radius: var(--raio); box-shadow: var(--sombra-forte);
    padding: 1.75rem 1.25rem; max-width: 520px; width: 100%; text-align: center;
}
.gate-cadeado {
    display: inline-flex; align-items: center; justify-content: center;
    width: 76px; height: 76px; border-radius: 999px;
    background: var(--ouro-suave); color: var(--marinho); margin-bottom: .75rem;
}
.gate-card h1 { font-size: 1.4rem; margin-bottom: .5rem; }
.gate-texto { color: var(--texto-2); margin: 0 auto 1.25rem; max-width: 42ch; }
.gate-acoes {
    display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 1rem;
}
.btn-link-suave {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--toque); padding: .55rem 1.1rem; font-weight: 700; font-size: 1rem;
    color: var(--marinho); background: #fff; border: 1.5px solid var(--marinho);
    border-radius: var(--raio-sm); text-decoration: none;
}
.btn-link-suave:hover { background: var(--fundo-claro); }
.gate-rodape { color: var(--texto-2); font-size: .9rem; margin: 0; }

/* Rodapé: bloco de links EXTERNOS (Diversos + Fórum, em ojogodobicho.com) */
.rodape-externos { margin: 0 0 .85rem; }
.rodape-externos-titulo {
    display: block; color: #9fb4cb; font-size: .82rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: .35rem;
}
.rodape-externos .rodape-links { margin-bottom: 0; }

/* ============================================================
   Ícones dos bichos (SVG) — Buscar Bicho, tabela de grupos,
   grade do Simulando. Apenas superfícies de identidade/seleção;
   NÃO usados nas tabelas de resultado.
   ============================================================ */
.bicho-ico { flex: none; vertical-align: middle; display: inline-block; }
.bicho-ico-lg { width: 40px; height: 40px; }

/* Título do card de resultado da busca: ícone + nº + nome */
.busca-res-titulo { display: flex; align-items: center; gap: .5rem; }

/* Tabela dos 25 grupos (Buscar Bicho) */
.grupos-tabela {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .6rem; margin: .3rem 0 .4rem;
}
.grupo-item {
    display: flex; align-items: center; gap: .6rem; min-width: 0;
    padding: .55rem .7rem; background: #fff; border: 1px solid var(--borda);
    border-radius: var(--raio); box-shadow: var(--sombra);
    text-decoration: none; color: var(--marinho);
    /* Altura uniforme: nomes longos que quebram em 2 linhas não deixam o card
       mais alto que os vizinhos. (P3.9) */
    min-height: 66px;
}
.grupo-item:hover { background: var(--ouro-suave); border-color: var(--ouro); }
.grupo-item .bicho-ico { width: 32px; height: 32px; }
/* Unificação visual dos ícones (P2.6): os SVGs-fonte são todos coloridos, mas os
   de corpo claro (creme) "somem" no branco enquanto os saturados saltam. Um disco
   de fundo neutro uniforme atrás de CADA ícone dá o mesmo peso visual a todos, sem
   recolorir a arte. Escopado à grade "Todos os bichos" e ao resultado da busca. */
.grupo-item .bicho-ico,
.busca-res-titulo .bicho-ico {
    background: radial-gradient(circle at 50% 50%, #FFF3D6 62%, rgba(255,243,214,0) 78%);
    border-radius: 50%;
}
.grupo-item-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.grupo-item-nome { font-weight: 700; }
.grupo-item-dz { font-size: .74rem; color: var(--texto-2); }

/* Grade do Simulando: ícone acima do número do grupo */
.simula-cel-grupo { min-height: 72px; gap: .1rem; }
.simula-cel-ico { width: 26px; height: 26px; margin-bottom: .1rem; }

/* (Opção A) A matriz do poste não tem mais toggle nem ícone/nome na célula —
   CSS do toggle "Somente os grupos" e do ícone da matriz removido. O detalhe
   por apuração abaixo continua com ícone grande, intacto. */

/* Detalhe por apuração: tudo na MESMA linha — milhar · nº · ícone · nome */
.tabela-apuracao .col-resultado { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .6rem; }
.tabela-apuracao .res-top { align-items: center; }
.tabela-apuracao .res-bicho { display: flex; align-items: center; gap: .35rem; margin-top: 0; }
.tabela-apuracao .res-bicho-ico { flex: none; width: 22px; height: 22px; }

@media (min-width: 720px) {
    .tabela-apuracao .res-bicho-ico { width: 24px; height: 24px; }
}

/* ---- Marca d'água anti-plágio "ojogodobicho.net" (só no Deu no Poste) ---- */
/* Texto repetido em diagonal, baixa opacidade, sobre a tabela; não captura clique. */
.apuracao-tabela-wrap { position: relative; }
.tabelao-grade { position: relative; }
.poste-grid-wrap::before,
.apuracao-tabela-wrap::before,
.tabelao-grade::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background-repeat: repeat; background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='130'%3E%3Ctext x='8' y='74' transform='rotate(-30 125 65)' font-family='Arial,Helvetica,sans-serif' font-size='16' font-weight='700' fill='%231C4873' fill-opacity='0.08'%3Eojogodobicho.net%3C/text%3E%3C/svg%3E");
}
/* No celular apertado a marca d'água concorre com os números: suaviza. (P3.8) */
@media (max-width: 480px) {
    .poste-grid-wrap::before,
    .apuracao-tabela-wrap::before,
    .tabelao-grade::before { opacity: .45; }
}

/* ---- Tabelão: navegação por mês + célula clicável + painel de últimas saídas ---- */
.tabelao-mesnav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: 0 0 .8rem; }
.tabelao-mes-form { display: inline-flex; align-items: center; gap: .4rem; }
.tabelao-mes-form select {
    min-height: 40px; padding: .25rem .6rem; border: 1px solid var(--borda);
    border-radius: var(--raio-sm); background: #fff; color: var(--marinho); font: inherit; font-weight: 700;
}
.tabelao-mes-passos .is-disabled {
    display: inline-flex; align-items: center; min-height: 40px; padding: .25rem .9rem;
    border: 2px solid var(--borda); border-radius: 999px; color: var(--texto-2); background: #f4f6fb; cursor: default;
}

/* Célula vira botão (mantém o visual existente, ganha foco/clique) */
.tabelao-grade .tabelao-cel {
    appearance: none; -webkit-appearance: none; width: 100%; font: inherit; cursor: pointer;
}
.tabelao-grade .tabelao-cel:hover { border-color: var(--marinho); }
.tabelao-grade .tabelao-cel:focus-visible { outline: 3px solid var(--marinho); outline-offset: 1px; }
.tabelao-grade .tabelao-cel.is-sel { outline: 3px solid var(--marinho); outline-offset: 1px; }

.tabelao-dica-clique { margin: 0 0 .6rem; }

/* Painel de últimas saídas */
.centena-painel {
    margin: .2rem 0 .9rem; background: #fff; border: 1px solid var(--borda);
    border-radius: var(--raio); box-shadow: var(--sombra); padding: .9rem 1rem;
}
.centena-painel-topo { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.centena-painel-chip {
    display: inline-flex; align-items: center; justify-content: center; min-width: 3.2rem;
    padding: .25rem .6rem; border-radius: 999px; background: var(--marinho); color: #fff;
    font-weight: 800; letter-spacing: .06em; font-variant-numeric: tabular-nums;
}
.centena-painel-titulo { font-weight: 700; color: var(--marinho); }
.centena-painel-fechar {
    margin-left: auto; appearance: none; border: 1px solid var(--borda); background: #fff;
    width: 32px; height: 32px; border-radius: 50%; cursor: pointer; color: var(--texto-2);
    font-size: 1.2rem; line-height: 1;
}
.centena-painel-fechar:hover { border-color: var(--marinho); color: var(--marinho); }
.centena-ocos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.centena-oco {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem .8rem;
    padding: .5rem .7rem; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: #fafbfe;
}
.centena-oco .oco-data { font-weight: 700; color: var(--marinho); font-variant-numeric: tabular-nums; }
.centena-oco .oco-banca { color: var(--texto-2); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.centena-oco .oco-premio { color: var(--texto-2); white-space: nowrap; }
.centena-painel-vazio { color: var(--texto-2); margin: 0; }
.centena-painel-nota { color: var(--texto-2); font-size: .82rem; margin: .6rem 0 0; }

/* ============================================================
   Busca Bicho — formulário de análise condicional (partial
   buscabicho_form.php; vale em /buscar e /estatisticas/busca-bicho).
   Mobile-first: campos empilhados com respiro, selects de largura
   normalizada, tap targets grandes, caret e cores da marca.
   ============================================================ */
.busca-cond-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;                 /* respiro entre as linhas */
    max-width: 460px;          /* desktop: largura agradável, não a página toda */
    margin: 1rem 0 .25rem;
}
.busca-cond-form .bc-campo {
    display: flex;
    flex-direction: column;    /* label acima do select, alinhados */
    gap: .4rem;
}
.busca-cond-form .bc-campo label {
    font-weight: 700;
    color: var(--marinho);
    font-size: .95rem;
    line-height: 1.2;
}
.busca-cond-form select {
    width: 100%;
    box-sizing: border-box;    /* larguras iguais entre todos os selects */
    min-height: 50px;          /* confortável de tocar no celular */
    padding: .6rem 2.4rem .6rem .85rem;
    font-size: 1.02rem;
    font-family: var(--fonte);
    color: var(--marinho);
    background-color: #fff;
    border: 2px solid var(--borda);
    border-radius: var(--raio-sm);
    box-shadow: var(--sombra);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* caret custom (chevron navy) alinhado à direita */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%231C4873' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    background-size: 1rem;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.busca-cond-form select:hover { border-color: var(--azul-claro); }
.busca-cond-form select:focus {
    border-color: var(--marinho);
    box-shadow: 0 0 0 3px rgba(28, 72, 115, .14);
    outline: none;
}
/* Botão Pesquisar: reusa o CTA da marca (.btn-link-forte), maior e com
   destaque, separado do último campo. */
.busca-cond-form .bc-submit { margin-top: .5rem; }
.busca-cond-form .bc-btn {
    width: 100%;
    min-height: 52px;
    font-size: 1.05rem;
    box-shadow: var(--sombra);
}
@media (min-width: 560px) {
    .busca-cond-form .bc-btn { width: auto; min-width: 200px; padding-left: 1.6rem; padding-right: 1.6rem; }
}

/* ===========================================================================
   LANDING DE CONVERSÃO (vitrine na raiz `/`) — 12/07/2026
   Reusa .assoc-*, .plano-*, .faq-* e adiciona só o que a landing precisa.
   =========================================================================== */

/* Hero: um pouco mais de respiro e o "kicker" de autoridade em ouro */
.lp-hero { padding: 2.1rem 1.25rem 1.9rem; }
.lp-kicker {
    color: var(--ouro);
    font-weight: 800;
    font-size: .95rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0 0 .6rem;
}
.lp-hero h1 { font-size: 1.9rem; }
@media (min-width: 720px) { .lp-hero h1 { font-size: 2.3rem; } }

/* Chips de prova (até 5 min · desde 2003 · base mais completa) */
.lp-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    padding: 0;
    margin: 1.25rem 0 0;
}
.lp-chips li {
    background: rgba(255, 193, 64, .14);
    border: 1px solid rgba(255, 193, 64, .5);
    color: #ffe1a3;
    border-radius: 999px;
    padding: .35rem .85rem;
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Ferramentas: 2 colunas no desktop (são 4 cards, fica simétrico) */
@media (min-width: 940px) { .lp-ferramentas { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.lp-ferramentas .beneficio-card { border-left-color: var(--laranja); }
.lp-e-mais { margin-top: .9rem; }

/* Catálogo (accordion de modalidades): reusa .faq-item; título mais forte */
.lp-catalogo .faq-item > summary { font-weight: 800; }

/* Bloco "resultado na hora": card marinho com checks em ouro */
.lp-resultados {
    background: #fff;
    border: 1px solid var(--borda);
    border-top: 5px solid var(--ouro);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1.1rem 1.2rem 1.2rem;
    margin-top: 1.5rem;
}
.lp-lista-check { list-style: none; margin: 0; padding: 0; }
.lp-lista-check li {
    position: relative;
    padding-left: 1.9rem;
    margin-bottom: .65rem;
    color: var(--texto-2);
}
.lp-lista-check li strong { color: var(--marinho); }
.lp-lista-check li::before {
    content: '\2713';
    position: absolute;
    left: 0; top: 0;
    width: 1.3rem; height: 1.3rem;
    background: var(--ouro-suave);
    color: var(--marinho);
    border-radius: 50%;
    font-weight: 800;
    font-size: .85rem;
    line-height: 1.3rem;
    text-align: center;
}

/* Extras (.com): título-link discreto */
.lp-extras .beneficio-card h3 a { color: var(--marinho); text-decoration: none; }
.lp-extras .beneficio-card h3 a:hover { color: var(--link); text-decoration: underline; }

/* Disclaimer legal: discreto, mas legível */
.lp-disclaimer {
    margin-top: 1.75rem;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
}
.lp-disclaimer p { margin: 0; color: var(--texto-2); font-size: .9rem; text-align: center; }