@charset "UTF-8";

/* ===========================================================================
   Kheper - folha de estilo unica do site
   ===========================================================================

   Primeiro arquivo de estilo do projeto. O que ele fixa aqui as Etapas 5 e 6
   herdam, entao os valores moram todos em custom properties no :root e as
   paginas novas consomem token, nunca hexadecimal solto.

   ARQUIVO UNICO, DE PROPOSITO. O site inteiro sao quatro paginas pequenas.
   Dividir em varios arquivos custaria uma requisicao por arquivo em 4G ruim e
   nao pouparia byte nenhum, porque toda pagina usa cabecalho, rodape e
   tipografia. asset() acrescenta ?v=<filemtime>, entao o cache pode ser longo
   sem prender correcao no navegador de quem ja visitou.

   SEM ESTILO INLINE EM LUGAR NENHUM (regra 12 do CLAUDE.md). A CSP nao tem
   'unsafe-inline' em nenhuma diretiva: atributo style= e bloco <style> sem hash
   sao bloqueados pelo navegador. Tudo que precisa de aparencia precisa de
   classe aqui.

   SEM url(data:...) (regra 13). img-src e 'self' e alcanca url() do CSS. Icone
   se faz com elemento <svg> escrito no HTML, que a diretiva nao alcanca.

   ---------------------------------------------------------------------------
   DE ONDE VEM O DESENHO
   ---------------------------------------------------------------------------

   Do proprio logo, que e geometria plana: um losango de diagonais em 45 graus
   com um olho concentrico no centro. A diagonal aparece UMA VEZ, no corte da
   base do heroi, e em nenhum outro lugar. Repetida, viraria enfeite; sozinha,
   liga a pagina a marca.

   Cores: todas de dados/identidade-visual.md, sem excecao. O cinza de apoio e
   a unica alteracao, e esta justificada no bloco de tokens.

   Ordem das secoes, medida no espelho e diferente do que o BRIEF sugere:
   heroi, #quemsomos, #beneficios, #simule, #associacao, #contato.

   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. Tipografia auto-hospedada
   ---------------------------------------------------------------------------

   Oswald 600 em um peso so, para titulo. Condensada e em caixa alta, combina
   com o lettering do logo. SIL Open Font License, sem vinculo com o tema em
   litigio.

   font-display: swap faz o texto aparecer imediatamente na fonte de sistema e
   trocar quando o woff2 chegar. Em 4G ruim isso e a diferenca entre ler o
   titulo agora ou olhar para um retangulo vazio.

   A pilha de reserva NAO e decoracao: se o woff2 faltar, 404 ou for bloqueado,
   a pagina continua legivel e proporcional. Impact e Haettenschweiler sao
   condensadas presentes em Windows e macOS, e aproximam a largura do Oswald;
   a ultima palavra e sans-serif generica. */

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/oswald-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    /* Latino basico e suplemento: cobre o portugues inteiro. */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2018-201A,
                   U+201C-201E, U+2022, U+2039-203A, U+2044, U+20AC;
}


/* ---------------------------------------------------------------------------
   2. Tokens
   --------------------------------------------------------------------------- */

:root {
    /* Paleta, de dados/identidade-visual.md.
       Contraste medido, e nao estimado. Nenhum par usado no site fica abaixo
       de 5,3:1, que passa em AA para corpo de texto com folga. */
    --azul: #2a58a5;              /* marca e acao. 6,91:1 sobre branco */
    --azul-profundo: #1d2f52;     /* blocos escuros. 13,29:1 com branco */
    --azul-claro: #d8e3ef;        /* fundo de secao alternada */
    --texto: #3d3d3d;             /* 10,86:1 sobre branco */
    --branco: #ffffff;
    --borda: #b4b4b4;

    /* O identidade-visual.md traz #888888 como cinza de apoio e ja avisa que
       ele mede cerca de 3,5:1 sobre branco. Medido aqui: 3,54:1, que REPROVA
       em AA para corpo de texto. Promovido para #6b6b6b, que da 5,33:1 e
       mantem a mesma leitura de "texto secundario". O #888888 nao aparece em
       lugar nenhum deste arquivo. */
    --cinza: #6b6b6b;

    /* Erro. Nao esta na paleta da marca porque nao e cor de marca: e sinal, e
       precisa destoar do azul para nao se confundir com estado normal.
       7,33:1 sobre branco. */
    --erro: #b00020;
    --erro-fundo: #fdf2f4;

    /* Sucesso, na propria familia azul: o site nao tem verde, e introduzir um
       so para uma mensagem quebraria a paleta por um caso raro. */
    --ok-fundo: #eef4fb;

    /* Aviso de desenvolvimento. Deliberadamente feio e fora da paleta: ele
       precisa ser impossivel de confundir com conteudo do site, e impossivel
       de nao notar caso escape para producao. */
    --aviso: #7a4a00;
    --aviso-fundo: #fff4d6;
    --aviso-borda: #d9a500;

    --fonte-titulo: 'Oswald', 'Impact', 'Haettenschweiler',
                    'Arial Narrow Bold', sans-serif;
    --fonte-corpo: system-ui, -apple-system, 'Segoe UI', Roboto, Arial,
                   sans-serif;

    /* Escala de espaco em progressao, para o ritmo vertical nao virar
       coincidencia de numeros escolhidos um a um. */
    --e1: 0.25rem;
    --e2: 0.5rem;
    --e3: 0.75rem;
    --e4: 1rem;
    --e5: 1.5rem;
    --e6: 2rem;
    --e7: 3rem;
    --e8: 4rem;

    --largura: 68rem;             /* limite do conteudo em telas grandes */
    --largura-texto: 38rem;       /* aprox. 70 caracteres por linha */
    --raio: 4px;

    /* Altura do corte diagonal na base do heroi. Um valor so, usado pelo
       clip-path e pelo espacamento que compensa o corte: separados, um ajuste
       em um deixaria texto dentro da area cortada. */
    --corte: 3.5rem;
}


/* ---------------------------------------------------------------------------
   3. Base
   --------------------------------------------------------------------------- */

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

html {
    /* Sem font-size em px no html: quem aumenta a fonte padrao do navegador,
       e isso e comum em celular, precisa que a pagina inteira acompanhe. */
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* O cabecalho e fixo; sem isto a ancora para no meio do titulo. */
    scroll-padding-top: 5rem;
}

body {
    margin: 0;
    background: var(--branco);
    color: var(--texto);
    font-family: var(--fonte-corpo);
    font-size: 1.0625rem;         /* 17px: corpo confortavel no celular */
    line-height: 1.65;
}

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

a {
    color: var(--azul);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

a:hover {
    text-decoration-thickness: 2px;
}

/* Foco visivel em tudo que recebe teclado. Um contorno so, em um lugar so,
   para nao haver regra de foco espalhada que alguem desligue sem perceber. */
:focus-visible {
    outline: 3px solid var(--azul);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Quem pediu menos movimento no sistema operacional nao recebe rolagem
   animada. A pagina nao tem outra animacao. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}


/* ---------------------------------------------------------------------------
   4. Tipografia
   ---------------------------------------------------------------------------

   Os titulos usam clamp para crescer com a tela sem media query. O piso e
   legivel em 320px de largura, que ainda existe em celular antigo. */

h1, h2, h3 {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    line-height: 1.15;
    color: var(--azul-profundo);
    margin: 0 0 var(--e4);
    /* Oswald tem espacamento apertado por natureza; um pouco de letter-spacing
       devolve ar em tamanho grande. */
    letter-spacing: 0.01em;
}

h1 {
    font-size: clamp(2rem, 8vw, 3.5rem);
}

h2 {
    font-size: clamp(1.6rem, 5.5vw, 2.5rem);
}

h3 {
    font-size: clamp(1.15rem, 3.5vw, 1.35rem);
}

p {
    margin: 0 0 var(--e4);
    max-width: var(--largura-texto);
}

/* Paragrafo dentro de bloco centralizado precisa do auto para o max-width
   acima nao empurrar o texto para a esquerda. */
.centro p,
.centro h2 {
    margin-left: auto;
    margin-right: auto;
}

.centro {
    text-align: center;
}

.conducao {
    color: var(--cinza);
    max-width: var(--largura-texto);
}


/* ---------------------------------------------------------------------------
   5. Acessibilidade
   --------------------------------------------------------------------------- */

/* Escondido do olho, presente para leitor de tela. Nao usa display:none nem
   visibility:hidden, que removem o elemento da arvore de acessibilidade. */
.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Pular para o conteudo: primeiro elemento focavel da pagina, invisivel ate
   receber foco. Sem ele, quem navega por teclado atravessa o menu inteiro em
   toda pagina. */
.pular {
    position: absolute;
    left: var(--e3);
    top: -4rem;
    z-index: 20;
    background: var(--azul-profundo);
    color: var(--branco);
    padding: var(--e3) var(--e4);
    border-radius: var(--raio);
    text-decoration: none;
    transition: top 0.15s ease-out;
}

.pular:focus {
    top: var(--e3);
}

@media (prefers-reduced-motion: reduce) {
    .pular {
        transition: none;
    }
}


/* ---------------------------------------------------------------------------
   6. Estrutura
   --------------------------------------------------------------------------- */

.envelope {
    width: 100%;
    max-width: var(--largura);
    margin: 0 auto;
    padding-left: var(--e4);
    padding-right: var(--e4);
}

/* O espacamento vertical de secao mora AQUI e em nenhum outro lugar. Se cada
   secao trouxesse o proprio padding, duas regras acabariam disputando a mesma
   distancia e o ritmo vertical viraria acidente. As secoes so escolhem cor. */
.secao {
    padding-top: var(--e7);
    padding-bottom: var(--e7);
}

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

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

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

.secao--escura .conducao {
    color: var(--azul-claro);
}

@media (min-width: 48em) {
    .secao {
        padding-top: var(--e8);
        padding-bottom: var(--e8);
    }
}


/* ---------------------------------------------------------------------------
   7. Cabecalho
   ---------------------------------------------------------------------------

   Fixo no topo porque a pagina e longa e o botao de simular vive no menu: sem
   fixar, quem chega ao fim precisa rolar de volta para agir.

   Sem menu sanfonado e sem hamburger. Com quatro itens curtos, a lista cabe em
   uma linha e quebra sozinha em tela estreita. Hamburger exigiria JavaScript
   ou truque de checkbox, e o site nao tem JavaScript nenhum -- o que tambem
   significa nada a liberar na CSP. Quando a Etapa 5 acrescentar Clube e
   Consultor, a lista passa a quebrar em duas linhas no celular, que continua
   funcionando; se passar de seis itens, ai sim vale rediscutir. */

.cabecalho {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--branco);
    border-bottom: 1px solid var(--azul-claro);
}

.cabecalho__envelope {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e3) var(--e5);
    padding-top: var(--e3);
    padding-bottom: var(--e3);
}

.cabecalho__marca {
    display: flex;
    align-items: center;
    gap: var(--e3);
    text-decoration: none;
    color: inherit;
    flex: 0 0 auto;
}

/* O logo e quase quadrado, 633x480, diferente da faixa horizontal do site
   antigo. A altura fica curta de proposito: o cabecalho e fixo e come area
   util de tela em celular. Largura por auto, para nao deformar. */
.cabecalho__logo {
    height: 2.75rem;
    width: auto;
    display: block;
}

.cabecalho__nome {
    font-family: var(--fonte-titulo);
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--azul-profundo);
}

.menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e2) var(--e4);
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
}

.menu a {
    display: inline-block;
    padding: var(--e2) 0;
    color: var(--azul-profundo);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

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

/* Empurra o ultimo item para a direita quando sobra espaco, e nao faz nada em
   tela estreita, onde a lista ja quebrou. */
.menu__acao {
    margin-left: auto;
}

@media (min-width: 48em) {
    .cabecalho__logo {
        height: 3.25rem;
    }
}


/* ---------------------------------------------------------------------------
   8. Heroi
   ---------------------------------------------------------------------------

   Sem fotografia, por decisao: as tres imagens herdadas do site antigo eram
   preview de banco de imagem, a maior com 1024px de largura e a escolhida com
   511px -- estreita demais para a primeira tela de um celular com densidade
   2x, e sem licenca comprovada. Cor de marca carrega instantaneo, nao tem
   risco e nao envelhece.

   O corte diagonal na base e o UNICO angulo do site, e cita as diagonais do
   losango do logo. padding-bottom soma --corte para nenhum texto cair dentro
   da area removida pelo clip-path. */

.heroi {
    background: var(--azul-claro);
    padding-top: var(--e7);
    padding-bottom: calc(var(--e7) + var(--corte));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--corte)));
    text-align: center;
}

.heroi__logo {
    height: 6.5rem;
    width: auto;
    margin: 0 auto var(--e5);
    display: block;
}

.heroi h1 {
    margin-bottom: var(--e4);
}

.heroi__linha {
    font-size: 1.15rem;
    color: var(--azul-profundo);
    max-width: 34rem;
    margin: 0 auto var(--e6);
}

@media (min-width: 48em) {
    .heroi {
        padding-top: var(--e8);
        padding-bottom: calc(var(--e8) + var(--corte));
    }

    .heroi__logo {
        height: 8.5rem;
    }
}


/* ---------------------------------------------------------------------------
   9. Botoes
   ---------------------------------------------------------------------------

   min-height de 2.75rem, que da 44px na fonte padrao: e o alvo minimo de toque
   recomendado, e aqui nao e detalhe, porque quase todo mundo chega pelo
   Instagram no celular. */

.acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e3);
    justify-content: center;
}

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    min-height: 2.75rem;
    padding: var(--e3) var(--e5);
    border: 2px solid var(--azul);
    border-radius: var(--raio);
    background: var(--azul);
    color: var(--branco);
    font-family: var(--fonte-corpo);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

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

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

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

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

/* Icone dentro de botao: svg inline, nunca img com data: URI (regra 13).
   currentColor faz o desenho acompanhar a cor do texto em hover e em foco sem
   segunda regra. */
.botao svg {
    width: 1.25em;
    height: 1.25em;
    fill: currentColor;
    flex: 0 0 auto;
}


/* ---------------------------------------------------------------------------
   10. Beneficios
   ---------------------------------------------------------------------------

   Grade que se adapta sozinha, sem media query: auto-fit com minmax deixa o
   navegador escolher o numero de colunas. Um card por linha no celular, dois
   no tablet, tres no desktop, sem ponto de quebra escrito a mao. */

.grade-beneficios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--e4);
    margin-top: var(--e6);
}

.beneficio {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: var(--e5);
}

/* Sobre fundo claro o card branco ja se destaca; sobre fundo branco ele
   precisaria de outra separacao. A secao de beneficios e clara, entao a borda
   fina basta e nao ha sombra em lugar nenhum do site. */
.beneficio__icone {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: var(--e3);
    color: var(--azul);
    display: block;
}

.beneficio h3 {
    margin-bottom: var(--e2);
}

.beneficio p {
    margin-bottom: 0;
    max-width: none;
}


/* ---------------------------------------------------------------------------
   11. Formulario
   ---------------------------------------------------------------------------

   Vive dentro da secao escura, em bloco claro: e a acao principal da pagina e
   o unico ponto de contraste forte do site. */

.cartao-form {
    background: var(--branco);
    border-radius: var(--raio);
    padding: var(--e5);
    margin-top: var(--e6);
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
    color: var(--texto);
}

@media (min-width: 48em) {
    .cartao-form {
        padding: var(--e6);
    }
}

.campo {
    margin-bottom: var(--e4);
}

.campo label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--e1);
    color: var(--azul-profundo);
}

.campo input,
.campo textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: var(--e3);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--branco);
    color: var(--texto);
    /* 1rem = 16px: abaixo disso o Safari do iPhone da zoom sozinho ao focar o
       campo, e a pagina fica torta depois. */
    font-family: var(--fonte-corpo);
    font-size: 1rem;
    line-height: 1.4;
}

.campo textarea {
    min-height: 6rem;
    resize: vertical;
}

.campo input:focus,
.campo textarea:focus {
    border-color: var(--azul);
}

.campo__dica {
    display: block;
    font-size: 0.9rem;
    color: var(--cinza);
    margin-top: var(--e1);
}

/* Campo com erro: borda mais grossa E mensagem escrita. Cor sozinha nao serve
   -- quem nao distingue vermelho de cinza nao receberia sinal nenhum. */
.campo--erro input,
.campo--erro textarea {
    border-color: var(--erro);
    border-width: 2px;
    background: var(--erro-fundo);
}

.campo__erro {
    display: block;
    color: var(--erro);
    font-size: 0.95rem;
    font-weight: 600;
    margin-top: var(--e1);
}

.obrigatorio {
    color: var(--erro);
    font-weight: 700;
}

/* -----------------------------------------------------------------------
   Campo isca do honeypot
   -----------------------------------------------------------------------

   ESCONDIDO POR CSS, e NUNCA type=hidden: robo ignora campo escondido por
   CSS e preenche campo hidden, que e exatamente o inverso do que se quer.

   Fora da tela em vez de display:none porque parte dos robos pula o que
   esta com display:none, e a isca so funciona se for preenchida.

   aria-hidden e tabindex=-1 ficam no HTML: quem usa leitor de tela ou
   teclado nao pode tropecar num campo que existe para pegar robo. */
.isca {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* ---------------------------------------------------------------------------
   12. Mensagens de retorno do envio
   ---------------------------------------------------------------------------

   Vem de $_SESSION['kheper_form'], gravada pelo enviar.php antes do 303. A
   borda grossa a esquerda da o sinal sem depender de cor, e o texto diz o que
   aconteceu. */

.recado {
    border-left: 4px solid var(--azul);
    background: var(--ok-fundo);
    padding: var(--e4);
    border-radius: var(--raio);
    margin-bottom: var(--e5);
    color: var(--texto);
}

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

.recado--erro {
    border-left-color: var(--erro);
    background: var(--erro-fundo);
}

.recado__titulo {
    font-weight: 700;
    color: var(--azul-profundo);
}

.recado--erro .recado__titulo {
    color: var(--erro);
}


/* ---------------------------------------------------------------------------
   13. Aviso de desenvolvimento
   ---------------------------------------------------------------------------

   So aparece fora de producao, decidido por kheper_em_producao() no PHP. A
   aparencia e deliberadamente estranha ao resto do site: se um dia escapar
   para producao, precisa gritar. Amarelo nao existe na paleta da marca
   justamente por isso. */

.aviso-dev {
    background: var(--aviso-fundo);
    border: 2px dashed var(--aviso-borda);
    border-radius: var(--raio);
    color: var(--aviso);
    padding: var(--e4);
    margin: var(--e5) auto;
    max-width: var(--largura);
    font-size: 0.95rem;
}

.aviso-dev h2 {
    font-size: 1.1rem;
    color: var(--aviso);
    margin-bottom: var(--e2);
}

.aviso-dev ul {
    margin: 0;
    padding-left: var(--e5);
}

.aviso-dev li {
    margin-bottom: var(--e1);
}

.aviso-dev code {
    background: var(--branco);
    padding: 0 var(--e1);
    border-radius: 2px;
    font-size: 0.9em;
}


/* ---------------------------------------------------------------------------
   14. Contato e rodape
   --------------------------------------------------------------------------- */

.contatos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e4);
    justify-content: center;
    list-style: none;
    margin: var(--e5) 0 0;
    padding: 0;
}

.contatos a {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    color: var(--branco);
    min-height: 2.75rem;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.contatos a:hover,
.contatos a:focus-visible {
    border-bottom-color: var(--branco);
}

.contatos svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
    flex: 0 0 auto;
}

.rodape {
    background: var(--azul-profundo);
    color: var(--azul-claro);
    padding: var(--e6) 0;
    font-size: 0.95rem;
    /* O contato acima tambem e escuro; sem a linha, as duas areas viram um
       bloco so e o rodape some. */
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.rodape p {
    max-width: none;
    margin-bottom: var(--e2);
}

.rodape a {
    color: var(--branco);
}

.rodape__legal {
    color: var(--azul-claro);
    margin-bottom: 0;
}


/* ---------------------------------------------------------------------------
   15. Conteudo em prosa
   ---------------------------------------------------------------------------

   Nasce na Etapa 5, para a pagina de privacidade e para o texto da pagina de
   consultor. A home nao precisava: ela e feita de blocos curtos, e todo
   paragrafo dela mora dentro de .secao ou de .centro.

   O QUE ESTE BLOCO RESOLVE, e que na home nao aparecia:

   1. h2 e h3 nao tem max-width. O p tem 38rem; sem regra, em 68rem de tela o
      titulo atravessa a largura inteira e o paragrafo abaixo para na metade. O
      desalinhamento so aparece em texto longo.
   2. ul e ol no corpo do texto nao tem regra nenhuma neste arquivo: herdam o
      padrao do navegador e o li nao pega o limite de linha do p. Uma politica
      de privacidade e feita de lista.

   NAO redefine o max-width do p. Ele ja vale globalmente, e repetir aqui
   criaria duas fontes para a mesma medida. */

.conteudo h2,
.conteudo h3 {
    max-width: var(--largura-texto);
}

/* Ar entre blocos de assunto. O :first-child zera o de cima para o primeiro
   titulo nao empurrar o comeco da seccao, cujo espacamento ja vem de .secao --
   e o espacamento vertical de seccao mora la e em nenhum outro lugar. */
.conteudo h2 {
    margin-top: var(--e7);
}

.conteudo h3 {
    margin-top: var(--e5);
}

.conteudo > :first-child {
    margin-top: 0;
}

.conteudo ul,
.conteudo ol {
    max-width: var(--largura-texto);
    margin: 0 0 var(--e4);
    /* Recuo em rem, e nao o padrao em px do navegador: acompanha quem aumenta a
       fonte, o que e comum em celular. */
    padding-left: var(--e5);
}

.conteudo li {
    margin-bottom: var(--e2);
}

/* Lista dentro de lista nao repete a margem de baixo do bloco pai, senao o
   aninhamento abre um buraco no meio do texto. */
.conteudo li > ul,
.conteudo li > ol {
    margin-top: var(--e2);
    margin-bottom: 0;
}

.conteudo dl {
    max-width: var(--largura-texto);
    margin: 0 0 var(--e4);
}

.conteudo dt {
    font-weight: 600;
    color: var(--azul-profundo);
}

.conteudo dd {
    margin: 0 0 var(--e3);
    padding-left: var(--e4);
    border-left: 2px solid var(--azul-claro);
}


/* ---------------------------------------------------------------------------
   16. Catalogo de produtos
   ---------------------------------------------------------------------------

   Clube Kheper: 19 produtos resgataveis por pontos BK.

   Mesma grade auto-fit dos beneficios, com minimo menor: o card de produto e
   mais estreito que o de beneficio porque carrega imagem, nome e preco, e nao
   um paragrafo. Em 320px continua um por linha.

   A FIGURA TEM PROPORCAO FIXA E object-fit: contain. As fotos vem do site
   antigo, sao PNG de dimensoes diferentes entre si, e o contain garante que
   nenhuma seja cortada nem esticada seja qual for a proporcao dela. O
   aspect-ratio do quadro faz todos os cards da linha terem a mesma altura de
   imagem sem que o HTML precise saber o tamanho de cada arquivo -- e sem isso
   a grade fica com os nomes dos produtos em alturas diferentes. */

.grade-produtos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--e4);
    margin-top: var(--e6);
}

/* flex em coluna para o preco e o botao poderem ser empurrados para a base com
   margin-top: auto. Sem isso, card de nome curto deixa o botao subido e a linha
   inteira fica desalinhada. */
.produto {
    display: flex;
    flex-direction: column;
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: var(--e4);
}

.produto__figura {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    margin: 0 0 var(--e3);
    background: var(--branco);
}

.produto__imagem {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Produto sem foto no acervo do site antigo -- hoje so a Blusa Kheper. O
   quadro tracejado ocupa o mesmo espaco da figura, para o card nao encolher e
   desalinhar a linha, e diz em texto que a foto falta. Espaco vazio sem
   explicacao pareceria imagem quebrada. */
.produto__semfoto {
    flex-direction: column;
    gap: var(--e2);
    border: 2px dashed var(--borda);
    border-radius: var(--raio);
    color: var(--cinza);
    font-size: 0.9rem;
    text-align: center;
    padding: var(--e3);
}

.produto__semfoto svg {
    width: 2rem;
    height: 2rem;
    color: var(--borda);
    flex: 0 0 auto;
}

.produto h3 {
    font-size: 1.05rem;
    margin-bottom: var(--e2);
}

/* margin-top: auto empurra o preco e o que vem abaixo dele para a base do
   card, qualquer que seja o tamanho do nome do produto. */
.produto__preco {
    font-family: var(--fonte-titulo);
    font-size: 1.35rem;
    line-height: 1.2;
    color: var(--azul);
    margin: auto 0 var(--e3);
    max-width: none;
}

.produto__preco .produto__moeda {
    font-size: 0.75em;
    color: var(--cinza);
}

/* O botao do card ocupa a largura toda: alvo de toque generoso e alinhamento
   entre cards sem depender do tamanho do rotulo. */
.produto .botao {
    width: 100%;
    padding-left: var(--e4);
    padding-right: var(--e4);
}


/* ---------------------------------------------------------------------------
   17. Impressao
   ---------------------------------------------------------------------------

   Uma pagina de associacao e impressa mais do que parece, para levar a um
   familiar decidir junto. O que nao serve no papel sai. */

@media print {
    .cabecalho,
    .acoes,
    .aviso-dev,
    .pular,
    /* O botao do card leva a uma ancora da propria pagina: no papel ele nao
       leva a lugar nenhum e so ocupa espaco em uma lista de 19 itens. */
    .produto .botao {
        display: none;
    }

    .heroi,
    .secao--escura,
    .rodape {
        background: var(--branco);
        color: #000;
        clip-path: none;
    }

    .secao--escura h2,
    .secao--escura h3,
    .rodape a {
        color: #000;
    }
}