/* ============================================================================
   hosannagroup.com.br — estilos do site
   ============================================================================

   A home que estava no ar em https://hosannagroup.com.br/ até 25/10/2026,
   refeita do zero sobre as medidas dela: cores, letras, tamanhos e respiros.
   O site antigo era um tema comprado (Bootstrap 4, jQuery e 23 scripts, quatro
   deles dando 404); nada do código dele veio para cá.

   Regras desta folha (o GroupCssTest confere):
   - cor, letra, entrelinha, peso, espaçamento e raio só por variável do :root;
   - todo par de texto e fundo passa no contraste do WCAG 2.1 AA.

   O que mudou em relação ao original, e por quê:
   - Gilroy Bold (títulos) e Font Awesome 5 Pro (ícones) são licenças
     comerciais. Os títulos usam a Sora, que já estava no projeto e tem o mesmo
     desenho geométrico; os ícones são SVG desenhados para o site.
   - Texto cinza-azulado: #81a3bb dava 2,7 de contraste sobre o branco (o
     mínimo é 4,5). Virou #58758a, mesma família de cor. No rodapé azul-marinho
     o #81a3bb original passa (5,9) e ficou.
   - Campo do formulário: contorno branco sobre #f7fcff, invisível (1,04).
     Ganhou contorno de 3,2.
   - Menu do celular: no tema, os links saíam brancos sobre o painel branco.
   ========================================================================== */

/* --- Letras ---------------------------------------------------------------- */

/* Karla e Open Sans (licença OFL, texto em /assets/fonts/OFL-*.txt) são
   variáveis: um arquivo cobre todos os pesos. Só o subconjunto latino. */
@font-face {
    font-family: 'Karla';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/karla-latin-variavel.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('/assets/fonts/open-sans-latin-variavel.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/sora-latin-700-normal.woff2') format('woff2');
}

/* --- Variáveis ------------------------------------------------------------- */

:root {
    /* Cores. As do site antigo, menos as três da nota do topo. */
    --fundo: #ffffff;
    --fundo-suave: #f7fcff;
    --fundo-rodape: #002249;
    --veu-banner: rgba(0, 16, 52, .8);
    --titulo: #002249;
    --texto: #58758a;
    --texto-menu: #4f79a9;
    --texto-claro: #ffffff;
    --texto-rodape: #81a3bb;
    --texto-direitos: #c2d1e2;
    --destaque: #0c59db;
    --destaque-mouse: #0947b0;
    --borda-cartao: #e3eeff;
    --borda-controle: #7a93a8;
    --linha-rodape: rgba(255, 255, 255, .2);
    --linha-ciano: #00fffc;
    --marca-dagua: #f5f6f8;
    --foco: #0c59db;
    --foco-escuro: #00fffc;
    --sombra-menu: 0 1.625rem 3rem 0 rgba(0, 0, 0, .15);
    --sombra-botao: 0 .5rem 1rem 0 rgba(0, 34, 73, .25);

    /* Letras. A Sora entra no lugar da Gilroy Bold. */
    --fonte-titulo: 'Sora', 'Karla', system-ui, sans-serif;
    --fonte-texto: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fonte-menu: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Tamanhos: o valor do celular, o do computador e a rampa entre eles. */
    --letra-banner: clamp(3rem, 1.2rem + 7.2vw, 8.5rem);
    --letra-banner-sobre: clamp(1.125rem, .9rem + 1vw, 1.875rem);
    --letra-banner-frase: clamp(1.125rem, 1rem + .6vw, 1.5rem);
    --letra-secao: clamp(2.25rem, 1.2rem + 3.6vw, 4.375rem);
    --letra-contato: clamp(2.25rem, 1.4rem + 2.8vw, 3.75rem);
    --letra-marca-dagua: clamp(3.75rem, .5rem + 11vw, 11.25rem);
    --letra-numero: clamp(8rem, 5rem + 6vw, 12.5rem);
    --letra-cartao: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
    --letra-texto: 1rem;
    --letra-rodape-titulo: 1.0625rem;
    --letra-rodape: .875rem;

    --entrelinha-texto: 1.75;
    --entrelinha-titulo: 1.15;
    --entrelinha-banner: 1;
    --entrelinha-rodape: 1.8;
    --entrelinha-controle: 1.5;

    --peso-normal: 400;
    --peso-medio: 500;
    --peso-forte: 700;

    /* Espaçamento: 4, 8, 12, 16, 24, 32, 48, 72 e 120px. */
    --esp-1: .25rem;
    --esp-2: .5rem;
    --esp-3: .75rem;
    --esp-4: 1rem;
    --esp-5: 1.5rem;
    --esp-6: 2rem;
    --esp-7: 3rem;
    --esp-8: 4.5rem;
    --esp-9: 7.5rem;

    --raio-1: .375rem;
    --raio-circulo: 50%;

    /* Medidas das peças. */
    --coluna: 71.25rem;
    --altura-banner: 56.25rem;
    --altura-banner-celular: 43.75rem;
    --altura-cabecalho: 6.25rem;
    --altura-cabecalho-rolado: 5rem;
    --altura-campo: 4.375rem;
    --altura-texto-longo: 10.625rem;
    --altura-botao: 3.75rem;
    --altura-mapa: 35rem;
    --largura-mapa: 33.125rem;
    --largura-cartao-celular: 22.5rem;
    --largura-logo-rodape: 15rem;
    --traco-banner: 7.5rem;
    --traco-rodape: 3.75rem;
    --triangulo: 25rem;
    --onda: 5.8125rem;
    --alvo-toque: 2.75rem;
    --botao-topo: 3rem;
    --duracao: .3s;
}

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

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

html {
    scrollbar-gutter: stable;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

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

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: var(--fonte-texto);
    font-size: var(--letra-texto);
    font-weight: var(--peso-normal);
    line-height: var(--entrelinha-texto);
}

img,
svg,
iframe {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

h1,
h2,
h3 {
    margin: 0;
    color: var(--titulo);
    font-family: var(--fonte-titulo);
    font-weight: var(--peso-forte);
    line-height: var(--entrelinha-titulo);
}

p {
    margin: 0;
}

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

:where(a) {
    color: var(--destaque);
    text-decoration: none;
}

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

/* Alvo do foco do voltar ao topo: recebe o foco só para o próximo Tab seguir
   dali; não é controle, então não ganha anel. */
[tabindex='-1']:focus {
    outline: none;
}

/* Nos fundos escuros (cabeçalho, banner e rodapé) o anel azul some. */
.cabecalho :focus-visible,
.banner :focus-visible,
.rodape :focus-visible {
    outline-color: var(--foco-escuro);
}

.so-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.pular {
    position: absolute;
    top: var(--esp-2);
    left: var(--esp-2);
    z-index: 40;
    padding: var(--esp-2) var(--esp-4);
    border-radius: var(--raio-1);
    background: var(--destaque);
    color: var(--texto-claro);
    font-weight: var(--peso-forte);
    transform: translateY(-200%);
}

.pular:focus {
    transform: none;
}

.coluna {
    max-width: var(--coluna);
    margin: 0 auto;
    padding-inline: var(--esp-4);
}

.icone {
    flex: none;
    width: 1em;
    height: 1em;
}

/* --- Cabeçalho ------------------------------------------------------------- */

/* Fixo e transparente sobre o banner; ao rolar ganha o azul-marinho do
   rodapé (o `sticky` que o tema pretendia e que o script em 404 não fazia).
   `data-rolado` vem do cabecalho.js; sem script ele fica transparente. */
.cabecalho {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 30;
    padding-top: var(--esp-4);
    transition: background-color var(--duracao) ease-out, padding var(--duracao) ease-out;
}

.cabecalho[data-rolado] {
    padding-top: 0;
    background-color: var(--fundo-rodape);
}

.cabecalho-faixa {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--esp-5);
    min-height: var(--altura-cabecalho-rolado);
    padding-inline: var(--esp-4);
}

.marca {
    flex: none;
}

.botao-menu {
    display: grid;
    place-content: center;
    gap: var(--esp-1);
    width: var(--alvo-toque);
    height: var(--alvo-toque);
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--texto-claro);
    border-radius: var(--raio-1);
    background: transparent;
    color: var(--texto-claro);
    cursor: pointer;
}

.botao-menu[hidden] {
    display: none;
}

.botao-menu-barra {
    display: block;
    width: var(--esp-5);
    height: 2px;
    background: currentColor;
    transition: transform var(--duracao) ease-out, opacity var(--duracao) ease-out;
}

.botao-menu[aria-expanded='true'] .botao-menu-barra:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.botao-menu[aria-expanded='true'] .botao-menu-barra:nth-child(2) {
    opacity: 0;
}

.botao-menu[aria-expanded='true'] .botao-menu-barra:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Celular: painel branco embaixo do cabeçalho. */
.menu {
    position: absolute;
    top: 100%;
    right: var(--esp-4);
    left: var(--esp-4);
    padding: var(--esp-2) var(--esp-4);
    background: var(--fundo);
    box-shadow: var(--sombra-menu);
}

.menu[data-menu='fechado'] {
    display: none;
}

.menu a {
    display: flex;
    align-items: center;
    min-height: var(--alvo-toque);
    color: var(--texto-menu);
    font-family: var(--fonte-menu);
    font-weight: var(--peso-forte);
    text-transform: uppercase;
}

.menu a:hover {
    color: var(--destaque);
}

@media (min-width: 62rem) {
    .cabecalho {
        padding-top: var(--esp-5);
    }

    .cabecalho-faixa {
        min-height: var(--altura-cabecalho);
        padding-inline: var(--esp-6);
    }

    .botao-menu {
        display: none;
    }

    .menu,
    .menu[data-menu='fechado'] {
        position: static;
        display: block;
        flex: 1;
        padding: 0;
        background: none;
        box-shadow: none;
    }

    /* O tema centrava o menu no espaço que sobra ao lado do logo. */
    .menu ul {
        display: flex;
        justify-content: center;
        gap: var(--esp-7);
    }

    .menu a {
        min-height: var(--altura-cabecalho);
        color: var(--texto-claro);
        transition: min-height var(--duracao) ease-out, color var(--duracao) ease-out;
    }

    .menu a:hover {
        color: var(--linha-ciano);
    }

    .cabecalho[data-rolado] .menu a {
        min-height: var(--altura-cabecalho-rolado);
    }
}

/* Âncoras do menu: o cabeçalho fixo não cobre o começo da seção. */
.secao {
    scroll-margin-top: var(--altura-cabecalho-rolado);
}

/* --- Banner ---------------------------------------------------------------- */

.banner {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: var(--altura-banner-celular);
    background: var(--fundo-rodape);
    color: var(--texto-claro);
}

.banner-foto {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.banner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--veu-banner);
}

.banner-conteudo {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--esp-4);
    padding-top: var(--esp-9);
    padding-bottom: var(--esp-6);
    text-align: center;
}

.banner-sobre {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-5);
    font-size: var(--letra-banner-sobre);
    opacity: .8;
}

/* Os dois fios do lado do sobretítulo; saem no celular, como no tema. */
.banner-sobre::before,
.banner-sobre::after {
    content: '';
    display: none;
    width: var(--traco-banner);
    height: 2px;
    background: currentColor;
}

.banner-titulo {
    color: var(--texto-claro);
    font-size: var(--letra-banner);
    line-height: var(--entrelinha-banner);
    text-wrap: balance;
}

.banner-frase {
    font-size: var(--letra-banner-frase);
    opacity: .8;
}

/* Marcas do grupo na base do banner. O tema as punha num carrossel que nunca
   iniciava; as seis cabem numa fila. */
.marcas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: var(--esp-5) var(--esp-4);
    padding: 0 var(--esp-4) var(--esp-7);
}

.marcas img {
    margin: 0 auto;
    opacity: .3;
    transition: opacity var(--duracao) ease-out;
}

.marcas img:hover {
    opacity: 1;
}

@media (min-width: 36rem) {
    .banner-sobre::before,
    .banner-sobre::after {
        display: block;
    }
}

@media (min-width: 48rem) {
    .banner {
        min-height: var(--altura-banner);
    }

    .marcas {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--esp-6);
        padding: 0 var(--esp-6) var(--esp-8);
    }
}

/* --- Cabeça de seção ------------------------------------------------------- */

.secao-topo {
    position: relative;
    isolation: isolate;
    margin-bottom: var(--esp-6);
    text-align: center;
}

.secao-sobre {
    display: block;
    padding-bottom: var(--esp-1);
    color: var(--destaque);
    font-weight: var(--peso-forte);
    text-transform: uppercase;
}

.secao-titulo {
    font-size: var(--letra-secao);
}

/* A palavra gigante e clara atrás do título. */
.marca-dagua {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: -1;
    color: var(--marca-dagua);
    font-family: var(--fonte-titulo);
    font-size: var(--letra-marca-dagua);
    font-weight: var(--peso-forte);
    line-height: var(--entrelinha-banner);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    transform: translateX(-50%);
}

/* --- Empresas -------------------------------------------------------------- */

.secao-empresas {
    padding-block: var(--esp-9);
    overflow-x: hidden;
    overflow-x: clip;
}

.empresas {
    display: grid;
    gap: var(--esp-6);
    counter-reset: empresa;
}

.empresa {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--esp-8) var(--esp-6);
    border: 2px solid var(--borda-cartao);
    text-align: center;
    counter-increment: empresa;
}

/* O número claro no canto (01 a 06), atrás do texto. O segundo `content`
   tira o número do leitor de tela onde o navegador aceita. */
.empresa::before {
    content: counter(empresa, decimal-leading-zero);
    content: counter(empresa, decimal-leading-zero) / '';
    position: absolute;
    right: var(--esp-4);
    bottom: -.22em;
    z-index: -1;
    color: var(--marca-dagua);
    font-family: var(--fonte-titulo);
    font-size: var(--letra-numero);
    font-weight: var(--peso-forte);
    line-height: var(--entrelinha-banner);
}

.empresa img {
    margin: 0 auto;
}

.empresa h3 {
    padding: var(--esp-6) 0 var(--esp-5);
    font-size: var(--letra-cartao);
}

.empresa-link {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-1);
    margin-top: var(--esp-4);
    color: var(--texto);
    font-weight: var(--peso-forte);
    transition: color var(--duracao) ease-out;
}

.empresa-link:hover {
    color: var(--destaque);
}

@media (min-width: 36rem) {
    .empresas {
        grid-template-columns: minmax(0, var(--largura-cartao-celular));
        justify-content: center;
    }
}

@media (min-width: 48rem) {
    .empresas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 62rem) {
    .empresas {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* --- Contato --------------------------------------------------------------- */

.secao-contato {
    padding-block: var(--esp-9);
    background: var(--fundo-suave);
    overflow-x: hidden;
    overflow-x: clip;
}

.contato-grade {
    display: grid;
    gap: var(--esp-7);
}

.secao-contato .secao-topo {
    text-align: left;
}

.secao-contato .secao-titulo {
    font-size: var(--letra-contato);
}

.formulario {
    display: grid;
    gap: var(--esp-5);
    padding-top: var(--esp-6);
}

.formulario input,
.formulario textarea {
    width: 100%;
    min-height: var(--altura-campo);
    padding: 0 var(--esp-6);
    border: 1px solid var(--borda-controle);
    border-radius: 0;
    background: var(--fundo);
    color: var(--texto);
    font: inherit;
    line-height: var(--entrelinha-controle);
}

.formulario textarea {
    min-height: var(--altura-texto-longo);
    padding: var(--esp-6);
    resize: vertical;
}

.formulario ::placeholder {
    color: var(--texto);
    opacity: 1;
}

.formulario input:focus-visible,
.formulario textarea:focus-visible {
    outline-offset: 0;
    border-color: var(--foco);
}

/* Enquanto o envio não existe: o aviso fica antes dos campos. */
.formulario-aviso {
    display: flex;
    align-items: flex-start;
    gap: var(--esp-3);
    color: var(--titulo);
}

.formulario-aviso .icone {
    margin-top: var(--esp-1);
    color: var(--destaque);
}

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    gap: var(--esp-2);
    min-height: var(--altura-botao);
    margin-top: var(--esp-5);
    padding: 0 var(--esp-7);
    border: 2px solid var(--destaque);
    border-radius: 0;
    background: var(--destaque);
    color: var(--texto-claro);
    font: inherit;
    font-weight: var(--peso-forte);
    cursor: pointer;
    transition: background-color var(--duracao) ease-out, border-color var(--duracao) ease-out;
}

.botao:hover {
    border-color: var(--destaque-mouse);
    background-color: var(--destaque-mouse);
}

.botao:disabled {
    cursor: not-allowed;
    opacity: .6;
}

.botao:disabled:hover {
    border-color: var(--destaque);
    background-color: var(--destaque);
}

/* O mapa só no computador, como no tema, com o triângulo azul atrás do canto
   de baixo. */
.contato-mapa {
    display: none;
}

@media (min-width: 62rem) {
    .contato-grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contato-mapa {
        position: relative;
        isolation: isolate;
        display: block;
        /* `start`: sem ele a célula estica até a altura do formulário e o
           triângulo desce para baixo do mapa. */
        align-self: start;
        justify-self: end;
        width: 100%;
        max-width: var(--largura-mapa);
        margin-top: var(--esp-7);
    }

    .contato-mapa::before {
        content: '';
        position: absolute;
        right: calc(-1 * var(--esp-5));
        bottom: calc(-1 * var(--esp-5));
        z-index: -1;
        width: var(--triangulo);
        height: var(--triangulo);
        background: var(--destaque);
        clip-path: polygon(100% 0, 100% 100%, 0 100%);
    }

    .contato-mapa iframe {
        width: 100%;
        height: var(--altura-mapa);
        border: 0;
        background: var(--fundo);
    }
}

/* --- Rodapé ---------------------------------------------------------------- */

.rodape {
    background: var(--fundo-rodape);
    color: var(--texto-rodape);
    font-size: var(--letra-rodape);
    line-height: var(--entrelinha-rodape);
}

/* A onda: a cor do contato escorrendo para dentro do rodapé. */
.rodape-onda {
    width: 100%;
    height: var(--onda);
    fill: var(--fundo-suave);
}

.rodape-grade {
    display: grid;
    gap: var(--esp-6);
    padding-top: var(--esp-3);
}

.rodape-marca img {
    width: 100%;
    max-width: var(--largura-logo-rodape);
    margin-top: var(--esp-5);
}

.rodape-titulo {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--esp-4);
    margin-bottom: var(--esp-4);
    color: var(--texto-claro);
    font-family: var(--fonte-menu);
    font-size: var(--letra-rodape-titulo);
    font-weight: var(--peso-medio);
}

/* O traço ciano antes do título. */
.rodape-titulo::before {
    content: '';
    flex: none;
    width: var(--traco-rodape);
    border-bottom: 1px solid var(--linha-ciano);
}

.rodape address {
    font-style: normal;
}

.rodape-emails ul {
    display: grid;
    gap: var(--esp-2);
}

.rodape-emails li {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
}

.rodape-emails a {
    color: var(--texto-claro);
}

.rodape-emails a:hover {
    color: var(--linha-ciano);
}

.rodape-direitos {
    margin-top: var(--esp-6);
    padding-block: var(--esp-4);
    border-top: 1px solid var(--linha-rodape);
    color: var(--texto-direitos);
    text-align: center;
}

@media (min-width: 62rem) {
    .rodape-grade {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .rodape-marca {
        grid-column: span 4;
    }

    .rodape-endereco {
        grid-column: span 3;
    }

    .rodape-emails {
        grid-column: 9 / span 4;
    }

    /* No computador o traço fica pendurado à esquerda, no vão da coluna. */
    .rodape-titulo::before {
        position: absolute;
        top: 50%;
        right: calc(100% + var(--esp-4));
    }
}

/* --- Voltar ao topo -------------------------------------------------------- */

/* Aparece depois da primeira tela (voltar-topo.js põe `data-visivel`). */
.voltar-topo {
    position: fixed;
    right: var(--esp-5);
    bottom: var(--esp-5);
    bottom: calc(var(--esp-5) + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    display: grid;
    place-items: center;
    width: var(--botao-topo);
    height: var(--botao-topo);
    border-radius: var(--raio-1);
    background: var(--destaque);
    box-shadow: var(--sombra-botao);
    color: var(--texto-claro);
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--esp-2));
    transition: opacity var(--duracao) ease-out, transform var(--duracao) ease-out, visibility var(--duracao), background-color var(--duracao) ease-out;
}

.voltar-topo[data-visivel] {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.voltar-topo:hover {
    background-color: var(--destaque-mouse);
}

.voltar-topo:focus-visible {
    outline-color: var(--foco);
}

.voltar-topo-marco {
    position: absolute;
    top: 100vh;
    top: 100dvh;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* --- Entrada ao rolar ------------------------------------------------------ */

/* O `fadeInUp` do tema, pelo revelar.js. Sem script ou com movimento reduzido,
   nada fica escondido. */
@media (prefers-reduced-motion: no-preference) {
    .revelar {
        opacity: 0;
        transform: translateY(var(--esp-4));
        transition: opacity .6s ease-out, transform .6s ease-out;
    }

    .revelado {
        opacity: 1;
        transform: none;
    }
}

@media print {
    .revelar {
        opacity: 1;
        transform: none;
    }

    .cabecalho,
    .voltar-topo {
        position: static;
    }
}