/**
 * PNEUMABR - Landing "A História da Igreja"
 * Identidade visual do livro. Mobile first.
 */

:root {
    --navy: #000814;
    --navy-claro: #0A1420;
    --navy-borda: #1F2E40;
    --campo-borda: #415368;
    --ambar: #EAA84A;
    --ambar-claro: #F3C07A;
    --texto: #FCFAF6;
    --texto-2: #C8D0D8;
    --texto-3: #93A2B0;
    --pedra: #C9B6A0;
    --erro: #FFA494;

    --f-titulo: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --f-texto: 'Lora', Georgia, 'Times New Roman', serif;

    --largura: 1120px;
    --gutter: 20px;
    --raio: 4px;
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--navy);
    color: var(--texto-2);
    font-family: var(--f-texto);
    font-size: 1.125rem; /* 18px: público mais velho, no celular */
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1.1rem; }

a { color: var(--ambar); text-underline-offset: 3px; }
a:hover { color: var(--ambar-claro); }

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

h1, h2, h3 {
    font-family: var(--f-titulo);
    color: var(--texto);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .14em;
    line-height: 1.3;
    margin: 0 0 1rem;
}

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

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

.pular {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--ambar);
    color: var(--navy);
    padding: .7rem 1rem;
    font-family: var(--f-titulo);
    font-weight: 600;
}
.pular:focus { left: 16px; top: 16px; }

/* Honeypot: fora da tela, nunca com display:none (alguns robôs ignoram). */
.hp {
    position: absolute;
    left: -10000px;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* ---------- Componentes ---------- */
.rotulo {
    font-family: var(--f-titulo);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ambar);
    text-align: center;
    margin-bottom: .75rem;
}

.divisor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 1.25rem auto 2rem;
}
.divisor::before,
.divisor::after {
    content: "";
    width: 56px;
    height: 2px;
    background: var(--ambar);
}
.divisor span {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--ambar);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: .9rem 1.4rem;
    font-family: var(--f-titulo);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1.3;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: var(--navy);
    background: var(--ambar);
    border: 2px solid var(--ambar);
    border-radius: var(--raio);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover { color: var(--navy); background: var(--ambar-claro); border-color: var(--ambar-claro); }
.btn:focus-visible { outline-color: var(--texto); }
.btn--contorno { background: transparent; color: var(--ambar); }
.btn--contorno:hover { background: rgba(234, 168, 74, .12); color: var(--ambar-claro); }
.btn--bloco { display: flex; width: 100%; }
.btn--grande { min-height: 60px; font-size: 1.125rem; }
.btn[disabled], fieldset[disabled] .btn { opacity: .5; cursor: not-allowed; }

.aviso {
    margin: 0 0 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--navy);
    border: 1px solid var(--navy-borda);
    border-left: 3px solid var(--ambar);
    border-radius: var(--raio);
    color: var(--texto-2);
}
.aviso--erro { border-left-color: var(--erro); color: var(--texto); }
.aviso h3 { font-size: 1rem; color: var(--ambar); }
.aviso p:last-child { margin-bottom: 0; }

.prova {
    margin: 1.25rem 0 0;
    font-family: var(--f-titulo);
    font-size: 1rem;
    color: var(--texto-2);
}

/* ---------- Cabeçalho mínimo ---------- */
.topo-site {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 5;
    padding: 18px var(--gutter);
}
.marca {
    font-family: var(--f-titulo);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--texto-2);
    text-decoration: none;
}
.marca:hover { color: var(--texto); }

/* ---------- Topo (hero) ----------
   Celular: pergunta + livro pequeno + oferta + formulário já na primeira tela.
   Desktop: texto e formulário à esquerda, livro à direita. */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--navy);
    padding: 46px 0 28px;
}
.hero:focus { outline: none; }
.hero-fundo {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 0;
    opacity: .6;
}
.hero-fundo img { width: 100%; height: auto; }
.hero-fundo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(rgba(0, 8, 20, .5) 0%, rgba(0, 8, 20, .82) 30%, var(--navy) 70%);
}
.hero-grade { position: relative; z-index: 1; }

.hero-cabeca { display: flex; gap: 14px; align-items: center; }
.hero-pergunta {
    flex: 1 1 auto;
    margin: 0;
    font-size: clamp(1.45rem, 6.2vw, 2.5rem);
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.25;
    text-transform: none; /* frase longa: em caixa normal é mais fácil de ler */
}
.hero-capa-mini { flex: 0 0 76px; }
.hero-capa-mini img { width: 76px; height: auto; }

.hero-livro-nome {
    margin: .6rem 0 .3rem;
    font-family: var(--f-titulo);
    line-height: 1.45;
    text-transform: uppercase;
}
.hero-livro-titulo {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .16em;
    color: var(--ambar);
}
.hero-livro-autor {
    display: none; /* no celular, o nome do autor aparece na capa ao lado */
    margin-top: .1rem;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .16em;
    color: var(--texto-2);
}
.hero-oferta {
    margin: 0 0 .75rem;
    font-family: var(--f-titulo);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--texto);
}
.divisor--esquerda { justify-content: flex-start; margin: 1rem 0 1.25rem; }

.hero-livro { display: none; }
.mockup { width: 100%; height: auto; }

/* ---------- Contador ---------- */
.contador { margin: 1.5rem 0 1.75rem; }
.contador-rotulo {
    margin: 0 0 .6rem;
    font-family: var(--f-titulo);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--texto-3);
}
.contador-numeros { display: flex; gap: 8px; }
.contador-bloco {
    flex: 1 1 0;
    max-width: 78px;
    padding: .6rem .25rem .5rem;
    text-align: center;
    background: rgba(10, 20, 32, .85);
    border: 1px solid var(--navy-borda);
    border-radius: var(--raio);
}
.contador-num {
    display: block;
    font-family: var(--f-titulo);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--texto);
    font-variant-numeric: tabular-nums;
}
.contador-rot {
    display: block;
    font-family: var(--f-titulo);
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--texto-3);
}
.contador-data {
    margin: .6rem 0 0;
    font-size: 1rem;
    color: var(--texto-3);
}
.contador--centro { text-align: center; }
.contador--centro .contador-numeros { justify-content: center; }

/* ---------- Seções ---------- */
.secao { padding: 72px 0; }
.secao--clara { background: var(--navy-claro); }
.secao h2 {
    font-size: clamp(1.3rem, 5vw, 2rem);
    text-align: center;
    margin-bottom: 0;
}
.titulo-esquerda, .secao .titulo-esquerda { text-align: left; }
.rotulo--esquerda { text-align: left; }

.texto-largo { max-width: 700px; margin-left: auto; margin-right: auto; }

/* Cartões (3.2) */
.cartoes {
    display: grid;
    gap: 16px;
    margin-top: 2.5rem;
}
.cartao {
    padding: 1.5rem 1.4rem;
    background: var(--navy);
    border: 1px solid var(--navy-borda);
    border-top: 2px solid var(--ambar);
    border-radius: var(--raio);
}
.cartao h3 { font-size: .9rem; color: var(--ambar); margin-bottom: .6rem; }
.cartao p { margin: 0; }

/* Destaques para líderes (3.3) */
.lista-destaques {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 760px;
    display: grid;
    gap: 1.75rem;
}
.lista-destaques li {
    padding-left: 1.25rem;
    border-left: 2px solid rgba(234, 168, 74, .55);
}
.lista-destaques strong {
    display: block;
    margin-bottom: .35rem;
    font-family: var(--f-titulo);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texto);
}

/* Para quem quer aprender (3.4) */
.aprender { display: grid; gap: 2.5rem; align-items: center; }
.aprender-capa { max-width: 240px; margin: 0 auto; }
.capa { border-radius: 2px; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.lista-check { list-style: none; padding: 0; margin: 0; }
.lista-check li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 1rem;
}
.lista-check li::before {
    content: "";
    position: absolute;
    left: 0; top: .68em;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ambar);
}

/* Linha do tempo dos capítulos (3.5) */
.linha-tempo {
    list-style: none;
    counter-reset: capitulo;
    padding: 0;
    margin: 0 auto;
    max-width: 760px;
}
.linha-tempo li {
    position: relative;
    counter-increment: capitulo;
    padding: 0 0 2rem 3.6rem;
}
.linha-tempo li::before {
    content: counter(capitulo);
    position: absolute;
    left: 0; top: 0;
    width: 2.4rem; height: 2.4rem;
    display: grid;
    place-items: center;
    font-family: var(--f-titulo);
    font-weight: 500;
    color: var(--ambar);
    background: var(--navy);
    border: 1px solid var(--ambar);
    border-radius: 50%;
}
.linha-tempo li::after {
    content: "";
    position: absolute;
    left: 1.2rem; top: 2.6rem; bottom: .2rem;
    width: 1px;
    background: var(--navy-borda);
}
.linha-tempo li:last-child { padding-bottom: 0; }
.linha-tempo li:last-child::after { display: none; }
.linha-tempo h3 {
    font-size: .95rem;
    letter-spacing: .1em;
    margin: .45rem 0 .4rem;
}
.linha-tempo p { margin: 0; }

/* Trecho (3.6) */
.trecho { max-width: 780px; margin: 0 auto; text-align: center; }
.trecho blockquote { margin: 0; }
.trecho blockquote p {
    font-size: clamp(1.15rem, 4vw, 1.5rem);
    font-style: italic;
    line-height: 1.65;
    color: var(--texto);
    margin: 0;
}
.trecho figcaption {
    font-family: var(--f-titulo);
    font-size: .8rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--texto-3);
}
.trecho cite { font-style: normal; color: var(--pedra); }

/* ---------- Formulário (topo, #cadastro) ---------- */
.form-cadastro {
    padding: .875rem;
    background: rgba(10, 20, 32, .94);
    border: 1px solid var(--navy-borda);
    border-radius: 6px;
}
.form-cadastro fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form-cadastro fieldset[disabled] { opacity: .6; }

.campo { margin-bottom: .7rem; }
.campo label {
    display: block;
    margin-bottom: .3rem;
    font-family: var(--f-titulo);
    font-size: 1rem;
    font-weight: 500;
    color: var(--texto);
}
.opcional { font-weight: 400; color: var(--texto-3); }
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo select {
    width: 100%;
    min-height: 50px;
    padding: .6rem .85rem;
    font-family: var(--f-titulo);
    font-size: 1.125rem; /* 18px: legível e o iOS não dá zoom no campo */
    color: var(--texto);
    background: var(--navy);
    border: 1px solid var(--campo-borda);
    border-radius: var(--raio);
    appearance: none;
}
.campo select {
    padding-right: 1.8rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--texto-3) 50%), linear-gradient(135deg, var(--texto-3) 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}
.campo select option { background: var(--navy); color: var(--texto); }
.campo input:focus, .campo select:focus { border-color: var(--ambar); }
.campo input::placeholder { color: var(--texto-3); opacity: 1; }
.campo [aria-invalid="true"] { border-color: var(--erro); }

.campo-tel { display: flex; gap: 8px; }
.campo-tel select { flex: 0 0 auto; width: 5.6rem; }
.campo-tel input { flex: 1 1 auto; min-width: 0; }

.campo-erro {
    margin: .35rem 0 0;
    font-family: var(--f-titulo);
    font-size: 1rem;
    color: var(--erro);
}

.campo-check { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .2rem; }
.campo-check input {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    margin: .1rem 0 0;
    accent-color: var(--ambar);
    cursor: pointer;
}
.campo .campo-check label,
.campo-check label {
    display: block;
    margin: 0;
    font-family: var(--f-texto);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--texto-2);
    cursor: pointer;
}
.form-cadastro .btn { margin-top: .75rem; }
.form-nota { margin: .75rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--texto-3); text-align: center; }
.form-nota a { color: var(--texto-2); }

/* Botão fixo no rodapé da tela (celular): some quando o formulário aparece */
.barra-fixa {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    font-family: var(--f-titulo);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--navy);
    background: var(--ambar);
    border-radius: 6px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
}
.barra-fixa:hover { color: var(--navy); background: var(--ambar-claro); }
.barra-fixa[hidden] { display: none; }
.pagina-landing .rodape { padding-bottom: 104px; }

/* Página de agradecimento */
.obrigado-intro { font-size: 1.125rem; color: var(--texto); }
.btn--download { font-size: 1.125rem; }
.lista-livros { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lista-livros .btn { text-transform: none; letter-spacing: .02em; font-weight: 500; }

/* ---------- Perguntas frequentes (3.9) ---------- */
.faq details { border-bottom: 1px solid var(--navy-borda); }
.faq details:first-child { border-top: 1px solid var(--navy-borda); }
.faq summary {
    position: relative;
    padding: 1.1rem 2.25rem 1.1rem 0;
    font-family: var(--f-titulo);
    font-weight: 500;
    color: var(--texto);
    cursor: pointer;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+";
    position: absolute;
    right: .25rem; top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--ambar);
}
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: .5rem; }

/* ---------- Chamada final (3.10) ---------- */
.chamada-final { text-align: center; }
.chamada-final .aviso { text-align: left; max-width: 620px; margin: 0 auto; }

/* ---------- Rodapé ---------- */
.rodape {
    padding: 40px 0 48px;
    background: #00040B;
    text-align: center;
    font-family: var(--f-titulo);
    font-size: .85rem;
    color: var(--texto-3);
}
.rodape .divisor { margin-top: 0; }
.rodape-links a { color: var(--texto-2); }
.rodape-links a:hover { color: var(--ambar); }
.rodape-links span { margin: 0 .5rem; }
.rodape p { margin-bottom: .5rem; }

/* ---------- Páginas simples (confirmação, download, erros) ---------- */
.pagina-simples .topo-site { position: static; }
.pagina-simples .secao { padding-top: 32px; }
.cartao-mensagem { max-width: 640px; text-align: center; }
.cartao-mensagem h1 { font-size: clamp(1.4rem, 6vw, 2rem); }
.cartao-mensagem .aviso { text-align: left; }
.cartao-mensagem .btn { margin: .5rem 0 1rem; }
.etapa {
    margin: 2rem 0;
    padding: 1.5rem 1.25rem;
    background: var(--navy-claro);
    border: 1px solid var(--navy-borda);
    border-radius: 6px;
}
.etapa--destaque { border-color: var(--ambar); }
.etapa h2 { font-size: 1rem; text-align: center; margin-bottom: .75rem; }

/* Política de Privacidade */
.texto-legal { text-align: left; }
.texto-legal h2 { font-size: 1rem; text-align: left; margin: 2rem 0 .75rem; }
.texto-legal ul { padding-left: 1.25rem; }

/* ---------- Painel administrativo ---------- */
.pagina-admin { font-size: 1rem; }
.admin-topo { border-bottom: 1px solid var(--navy-borda); background: var(--navy-claro); }
.admin-topo-grade { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }
.admin-nav { display: flex; gap: 18px; align-items: center; font-family: var(--f-titulo); font-size: .85rem; }
.admin-nav form { margin: 0; }
.admin-conteudo { padding-top: 32px; padding-bottom: 64px; }
.admin-titulo { font-size: 1.4rem; margin-bottom: .4rem; }
.admin-sub { color: var(--texto-3); font-size: .95rem; }
.admin-login { max-width: 440px; margin: 0 auto; text-align: center; }
.admin-login .aviso, .admin-login form { text-align: left; }
.admin-codigo {
    overflow-x: auto;
    padding: .9rem 1rem;
    background: var(--navy);
    border: 1px solid var(--navy-borda);
    border-radius: var(--raio);
    font-size: .8rem;
    color: var(--texto);
    white-space: pre;
}
.admin-resumo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 1.5rem 0; }
.admin-numero {
    display: block;
    padding: .9rem 1rem;
    background: var(--navy-claro);
    border: 1px solid var(--navy-borda);
    border-radius: var(--raio);
    font-family: var(--f-titulo);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-3);
    text-decoration: none;
}
.admin-numero span { display: block; font-size: 1.5rem; letter-spacing: 0; color: var(--texto); }
a.admin-numero:hover, .admin-numero.ativo { border-color: var(--ambar); color: var(--ambar); }
.admin-barra, .admin-lote { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 1rem 0; }
.admin-lote form { margin: 0; }
.admin-busca { display: flex; gap: 8px; flex: 1 1 320px; margin: 0; }
.admin-busca input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 52px;
    padding: .7rem .9rem;
    font-family: var(--f-titulo);
    font-size: 1rem;
    color: var(--texto);
    background: var(--navy);
    border: 1px solid var(--campo-borda);
    border-radius: var(--raio);
}
.admin-tabela-rolagem { overflow-x: auto; border: 1px solid var(--navy-borda); border-radius: var(--raio); }
.admin-tabela { width: 100%; min-width: 860px; border-collapse: collapse; font-size: .9rem; line-height: 1.45; }
.admin-tabela th {
    padding: .7rem .8rem;
    text-align: left;
    font-family: var(--f-titulo);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--texto-3);
    background: var(--navy-claro);
}
.admin-tabela td { padding: .75rem .8rem; border-top: 1px solid var(--navy-borda); vertical-align: top; }
.admin-tabela td strong { color: var(--texto); }
.admin-tabela small { color: var(--texto-3); }
.admin-acoes form { margin: 0 0 .35rem; }
.link-botao {
    padding: 0;
    font-family: var(--f-titulo);
    font-size: .85rem;
    color: var(--ambar);
    background: none;
    border: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.link-botao:hover { color: var(--ambar-claro); }
.link-botao--perigo { color: var(--erro); }
.selo-status {
    display: inline-block;
    padding: .1rem .5rem;
    font-family: var(--f-titulo);
    font-size: .72rem;
    border-radius: 999px;
    border: 1px solid currentColor;
}
.selo-status--pendente { color: var(--ambar); }
.selo-status--confirmado { color: #8FD3A8; }
.selo-status--descadastrado { color: var(--texto-3); }
.selo-status--falhou { color: var(--erro); }
.admin-paginas { display: flex; gap: 16px; align-items: center; justify-content: center; margin-top: 1.5rem; color: var(--texto-3); }
@media (min-width: 760px) {
    .admin-resumo { grid-template-columns: repeat(6, 1fr); }
}

/* ---------- Telas maiores ---------- */
@media (max-width: 899px) {
    /* Celular: botões ocupam a largura da tela */
    .btn { display: flex; width: 100%; }
}

@media (min-width: 640px) {
    :root { --gutter: 32px; }
    .cartoes { grid-template-columns: repeat(3, 1fr); }
    .form-cadastro { padding: 1.5rem; }
}

@media (min-width: 900px) {
    .hero { padding: 0; }
    .hero-fundo { bottom: 0; opacity: 1; }
    .hero-fundo picture { display: block; height: 100%; }
    .hero-fundo img { height: 100%; object-fit: cover; object-position: 70% 50%; }
    .hero-fundo::after {
        background: linear-gradient(90deg, var(--navy) 0%, rgba(0, 8, 20, .92) 48%, rgba(0, 8, 20, .3) 100%);
    }

    .hero-grade {
        display: grid;
        grid-template-columns: minmax(0, 560px) 1fr;
        gap: 64px;
        align-items: center;
        min-height: min(100vh, 920px);
        padding-top: 84px;
        padding-bottom: 56px;
    }
    .hero-capa-mini { display: none; }
    .hero-livro-autor { display: block; }
    .hero-pergunta { font-size: 2.3rem; }
    .hero-livro { display: block; max-width: 380px; margin: 0 auto; }

    .btn--largo { min-width: 360px; }
    .barra-fixa { display: none !important; }
    .pagina-landing .rodape { padding-bottom: 48px; }

    .secao { padding: 96px 0; }
    .aprender { grid-template-columns: 280px 1fr; gap: 4rem; }
    .aprender-capa { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}