/* =========================================================================
   Site ABMES 2026 — estilo base

   As cores nao foram escolhidas: sairam dos operadores de preenchimento do
   proprio layout aprovado (LandingPage-Homepage.pdf), com a contagem de uso.
   As medidas idem — a pagina tem 1440 x 860, com cabecalho 88, miolo 720 e
   rodape 52.
   ========================================================================= */

:root {
    /* --- paleta, extraida do layout ------------------------------------ */
    --verde-escuro:      #214138;   /* institucional, a mais usada */
    --verde-quase-preto: #24332D;   /* bloco da data no banner */
    --lima:              #A8E61E;   /* telefone, e-mail, rodape */
    --verde-medio:       #A4D85B;
    --verde-claro:       #A3D75D;   /* "9H — 12H" */
    /* Corrigidos em 07/08/2026 com os valores exatos que o Jonathan informou.
       Os que eu tinha vieram da contagem de cores do PDF e caiam num tom claro
       demais -- na tela a coluna aparecia quase branca, e nao verde palido. */
    --menu-fundo:        #E0E9D3;   /* area do menu principal */
    --atalhos-fundo:     #DAE6B8;   /* bloco de atalhos, um tom abaixo */
    --atalhos-texto:     #214138;
    --branco:            #FFFFFF;

    /* --- medidas do layout --------------------------------------------- */
    --altura-cabecalho:  88px;
    --altura-rodape:     52px;
    --largura-coluna:    25%;        /* 360 de 1440 */

    /* --- tipografia ----------------------------------------------------- */
    --fonte: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--fonte);
    color: var(--verde-escuro);
    background: var(--menu-fundo);
    -webkit-font-smoothing: antialiased;
}

.pular {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 1080;
    background: var(--lima);
    color: var(--verde-escuro);
    padding: .5rem 1rem;
    border-radius: .25rem;
    font-weight: 600;
}

/* =========================== CABECALHO =================================== */

.cabecalho {
    height: var(--altura-cabecalho);
    background: var(--verde-escuro);
    display: flex;
    align-items: center;
}

.cabecalho__interno {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 2vw, 2rem);
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
}

.cabecalho__logo { flex: 0 0 auto; display: inline-flex; }

/* A logo ocupa boa parte da altura do cabecalho no layout aprovado -- estava
   pequena demais em 44px. 54px e a altura nativa do arquivo, sem interpolar. */
.cabecalho__logo img { display: block; height: 54px; width: auto; }

/* --- campo de busca (entrada da SofIA ABMES) --- */
.busca {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    background: var(--atalhos-fundo);
    /* CANTO SUAVE, NAO PILULA. No layout o campo e um retangulo arredondado;
       999px deixava a lateral totalmente redonda, diferente do aprovado. */
    border-radius: 8px;
    padding: 0 .5rem 0 1.5rem;
    height: 46px;
    max-width: 720px;
}

.busca__campo {
    flex: 1 1 auto;
    /* estica na altura da caixa: sem isto o campo tem so 23px de alto e o
       dedo acerta a moldura de 46, que nao foca coisa nenhuma */
    align-self: stretch;
    border: 0;
    background: transparent;
    font-size: .95rem;
    color: var(--verde-escuro);
    padding: 0;
}
.busca__campo::placeholder { color: #6d8078; }
.busca__campo:focus { outline: none; }
.busca:focus-within { box-shadow: 0 0 0 3px rgba(168, 230, 30, .45); }

.busca__botao {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--verde-escuro);
    font-size: 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.busca__botao:hover { background: rgba(33, 65, 56, .1); }
.busca__lupa { display: block; width: 22px; height: 22px; }

/* --- botoes do cabecalho --- */
.cabecalho__acoes {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .75rem;
}

.botao {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 46px;
    padding-inline: 1.25rem;
    border-radius: 8px;   /* mesmo canto do campo de busca, como no layout */
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.botao--solido {
    background: var(--lima);
    color: var(--verde-escuro);
}
.botao--solido:hover { background: #b9f03a; color: var(--verde-escuro); }

.botao--contorno {
    border: 2px solid var(--lima);
    color: var(--lima);
}
.botao--contorno:hover { background: var(--lima); color: var(--verde-escuro); }

/* ============================= MIOLO ===================================== */

.miolo {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - var(--altura-cabecalho) - var(--altura-rodape));
    max-width: 1440px;
    margin-inline: auto;
}

/* --- slideshow: 1080 de 1440 --- */
.slideshow {
    flex: 1 1 75%;
    min-width: 0;
    /* Cor amostrada das bordas da arte oficial (#022F25 na esquerda, #023227
       na direita). Serve de fundo quando a area do slide nao tem exatamente a
       proporcao da arte -- a sobra some dentro do banner. */
    background: #023026;
    position: relative;
    overflow: hidden;
}

.slideshow__link { display: block; height: 100%; }

/* Slide unico (sem carrossel) -- e o formato que a producao vai usar:
   uma imagem enviada por upload, ocupando a area inteira. */
.slideshow__unico { height: 100%; }

/* 🔴 CONTAIN, e nao COVER.
   A arte tem 3:2 (1620 x 1080), mas a area do slide muda de proporcao com a
   altura da janela -- numa tela larga e baixa ela fica bem mais larga que 3:2.
   Com "cover" o navegador preenchia a area cortando as laterais, e comia o
   cartao da data e parte dos palestrantes. Com "contain" o banner aparece
   INTEIRO, sempre, e a sobra fica na cor do proprio banner.

   Vale tambem para os banners enviados por upload, que nao terao proporcao
   garantida: nenhum deles sera cortado. */
.slideshow__imagem {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.slideshow__vazio {
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--menu-fundo);
}

/**
 * As bolinhas do slideshow.
 *
 * ⚠️ A borda transparente de 15px NAO e espacamento: e ALVO DE TOQUE. A
 * bolinha continua com 10px na tela, mas a area que responde ao dedo passa a
 * ter 40 -- que e o minimo adotado no projeto. `background-clip: padding-box`
 * e o que impede a cor de vazar para dentro da borda e virar um disco de 40.
 *
 * 🔴 15/09/2026 -- pedido do Jonh: aproximar as bolinhas. Zerar a margem do
 * Bootstrap (que vem com 3px de cada lado de fabrica) nao bastou: o que
 * sobrava de vazio entre duas bolinhas visiveis era a PROPRIA borda de
 * toque se encostando na da vizinha (15px + 15px = 30px). A margem negativa
 * abaixo faz as duas bordas transparentes se SOBREPOREM em vez de so se
 * tocarem -- a area de toque de 40px de CADA bolinha continua inteira (ela e
 * so a soma de width+border, que ninguem tocou), so passa a compartilhar um
 * pedaco com a vizinha na fronteira entre as duas. Nunca fica sem alvo: um
 * toque nessa faixa sempre cai numa das duas bolinhas, nunca no vazio.
 */
.carousel-indicators { margin-bottom: 1px; }
.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    margin: 0 -8px;
    border-radius: 50%;
    border: 15px solid transparent;
    background-clip: padding-box;
    background-color: rgba(255, 255, 255, .55);
}
.carousel-indicators .active { background-color: var(--lima); }

/* ------------------- a troca de um slide para o outro -------------------- *

   🔴 O DEFEITO: na troca, o slide antigo aparecia ATRAS do novo.

   Duas causas somadas, e cada uma tem o seu conserto -- um SEMPRE, outro SO
   QUANDO PRECISA:

   1. `.carousel-item` nao tinha fundo. Com `object-fit: contain`, arte de
      proporcao diferente deixa faixa VAZIA em cima e embaixo (ou nas
      laterais) -- e por ali se via o slide anterior. Fundo proprio em cada
      slide tapa isso, e nao custa nada: quando a arte enche a caixa, o fundo
      fica invisivel. Por isso vale sempre.

   2. O esmaecer do Bootstrap NAO e um cruzamento: o slide novo entra por cima
      enquanto o antigo fica em opacidade 1 o tempo todo, e so some de uma vez
      no fim (`transition: opacity 0s .6s`). Durante 600ms os dois estao la,
      inteiros, um sobre o outro.

      Para isso existe a troca em DOIS TEMPOS -- o antigo apaga, e so entao o
      novo acende. Mas ela SO ENTRA quando uma das duas artes deixa faixa
      vazia, porque e so ai que a sobreposicao se ve. Com as duas artes
      enchendo a caixa, o cruzamento simples e mais rapido e mais bonito.

   Quem decide e o `assets/js/slideshow.js`, medindo a arte desenhada: ele poe
   `slideshow--dois-tempos` na caixa antes de cada troca que precisa. Sem
   JavaScript fica o cruzamento do Bootstrap com o fundo tapando as faixas.
   ------------------------------------------------------------------------- */

.slideshow .carousel-item { background: #023026; }

/**
 * ⚠️ Esta linha nao e enfeite: o Bootstrap mede a duracao NO SLIDE QUE SAI
 * para saber quando terminar a troca. Como o que sai passou a durar 260ms, ele
 * devolve o `.active` ao novo ja nesse instante -- e dali em diante quem manda
 * e a duracao base, nao a regra com atraso abaixo. Sem acertar a base, o
 * segundo tempo herdaria os 600ms do Bootstrap e a passagem ficaria arrastada.
 *
 * ⚠️ Fica DENTRO do `.slideshow--dois-tempos`: fora dele o Bootstrap continua
 * com os 600ms dele, que e o efeito de antes, intacto.
 */
.slideshow--dois-tempos.carousel-fade .carousel-item {
    transition: opacity .3s ease-out;
}

/* o antigo apaga em 260ms */
.slideshow--dois-tempos.carousel-fade .active.carousel-item-start,
.slideshow--dois-tempos.carousel-fade .active.carousel-item-end {
    opacity: 0;
    transition: opacity .26s ease-in;
}

/* o novo so comeca a acender quando o antigo ja se foi */
.slideshow--dois-tempos.carousel-fade .carousel-item-next.carousel-item-start,
.slideshow--dois-tempos.carousel-fade .carousel-item-prev.carousel-item-end {
    opacity: 1;
    transition: opacity .3s ease-out .26s;
}

@media (prefers-reduced-motion: reduce) {
    .slideshow--dois-tempos.carousel-fade .carousel-item,
    .slideshow--dois-tempos.carousel-fade .active.carousel-item-start,
    .slideshow--dois-tempos.carousel-fade .active.carousel-item-end,
    .slideshow--dois-tempos.carousel-fade .carousel-item-next.carousel-item-start,
    .slideshow--dois-tempos.carousel-fade .carousel-item-prev.carousel-item-end {
        transition: none;
    }
}

/* --- coluna da direita: 360 de 1440 --- */
.coluna {
    flex: 0 0 var(--largura-coluna);
    max-width: var(--largura-coluna);
    background: var(--menu-fundo);
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* O MENU FICA CENTRADO NA VERTICAL. Antes ele nascia colado no topo e sobrava
   um vazio grande antes do bloco de atalhos. Agora o bloco do menu ocupa o
   espaco livre e se centra dentro dele; os atalhos e o rodape da coluna
   continuam ancorados embaixo. */
.coluna__topo {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}

.menu__lista,
.atalhos__lista,
.redes {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu { padding-inline: clamp(1rem, 2vw, 2rem); }

/* A linha pontilhada existe ACIMA do primeiro item tambem -- no layout ela
   abre a lista, nao so separa os itens. Por isso border-top em todos, e nao
   o seletor "item + item". */
.menu__item { border-top: 1px dotted #9fb3a8; }
.menu__item:last-child { border-bottom: 1px dotted #9fb3a8; }

.menu__link {
    display: block;
    padding: .7rem .25rem;
    color: var(--verde-escuro);
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: color .15s ease;
}
.menu__link:hover,
.menu__link:focus { color: #0f2a22; text-decoration: underline; }

/* --- atalhos: duas colunas, com marcador --- */
.atalhos {
    flex: 0 0 auto;
    background: var(--atalhos-fundo);
    padding: 1.25rem clamp(1rem, 2vw, 2rem);
}

.atalhos__lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem 1rem;
}

.atalhos__item { position: relative; padding-left: .9rem; }
.atalhos__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--verde-escuro);
}

.atalhos__link {
    color: var(--atalhos-texto);
    text-decoration: none;
    font-size: .875rem;
    line-height: 1.35;
}
.atalhos__link:hover { text-decoration: underline; }

/* --- pe da coluna: redes e contato --- */
.coluna__pe {
    flex: 0 0 auto;
    padding: 1.25rem clamp(1rem, 2vw, 2rem) 1.5rem;
    text-align: center;          /* o contato acompanha os icones */
}

/* ICONES CENTRALIZADOS na coluna, e nao alinhados a esquerda. */
.redes {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

/* REDONDOS e com o icone em LIMA -- eu tinha feito quadrado de canto suave com
   o icone claro, e no layout sao circulos verde-escuros com o simbolo em lima. */
.redes__link {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--verde-escuro);
    color: var(--lima);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    text-decoration: none;
    transition: background-color .15s ease, transform .15s ease;
}
.redes__link:hover {
    background: #0f2a22;
    color: var(--lima);
    transform: translateY(-2px);
}

.contato { margin: 0; font-size: .9rem; }
.contato a { color: var(--verde-escuro); text-decoration: none; }
.contato a:hover { text-decoration: underline; }

/* ================= SLIDE DO SEMINARIO 44 ANOS ============================
   Reproduz a arte do layout aprovado. A arte tem 1080 x 720 pt; todas as
   medidas abaixo saem de container query units (cqw = 1% da largura do slide),
   entao a peca inteira encolhe junto, sem quebrar linha nem desalinhar.
   ========================================================================= */

.slide-sem {
    container-type: inline-size;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #12362B url("/assets/img/seminario-fundo.jpg") center / cover no-repeat;
    display: block;
}

/* veu escuro: o fundo original e uma foto, e sem isto o texto branco disputa
   com ela em algumas partes */
.slide-sem::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(9, 40, 31, .78) 0%, rgba(9, 40, 31, .45) 55%, rgba(9, 40, 31, .15) 100%);
    pointer-events: none;
}

.slide-sem__conteudo {
    position: relative;
    z-index: 2;
    padding: 6.2cqw 0 0 6cqw;
    max-width: 72%;
}

/* --- chapeu: SEMINARIO ESPECIAL ABMES 44 ANOS --- */
.slide-sem__chapeu {
    display: flex;
    align-items: center;
    gap: 1.4cqw;
    margin: 0 0 2.6cqw;
    font-size: 2.05cqw;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #E8FFE5;
    font-weight: 600;
    white-space: nowrap;
}
.slide-sem__chapeu strong { color: var(--lima); font-weight: 700; }

.slide-sem__estrela { color: #fff; display: inline-flex; }
.slide-sem__estrela svg { width: 2.4cqw; height: 2.4cqw; }

.slide-sem__risco {
    width: 7cqw;
    height: 1px;
    background: #fff;
    display: inline-block;
}

/* --- titulo e subtitulo --- */
.slide-sem__titulo {
    margin: 0 0 1.4cqw;
    font-size: 5.4cqw;
    line-height: 1.1;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.01em;
}

.slide-sem__subtitulo {
    margin: 0;
    font-size: 4.1cqw;
    line-height: 1.24;
    font-weight: 700;
    color: var(--lima);
}

/* --- selo ABMES | 44 ANOS, no canto inferior esquerdo --- */
.slide-sem__selo {
    position: absolute;
    left: 6cqw;
    bottom: 6cqw;
    display: flex;
    align-items: center;
    gap: 1.6cqw;
    z-index: 2;
}
.slide-sem__selo img { height: 5.2cqw; width: auto; display: block; }

.slide-sem__selo-barra {
    width: 1px;
    height: 5.6cqw;
    background: rgba(255, 255, 255, .55);
}

.slide-sem__selo-anos {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: .92;
    color: #fff;
}
.slide-sem__selo-anos strong { font-size: 5.4cqw; font-weight: 800; }
.slide-sem__selo-anos small { font-size: 1.5cqw; letter-spacing: .22em; }

/* --- cartao da data, no alto a direita --- */
.slide-sem__data {
    position: absolute;
    z-index: 3;
    top: 5.6cqw;
    right: 5cqw;
    width: 17.5cqw;
    padding: 2.2cqw 1.4cqw 1.8cqw;
    background: var(--lima);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--verde-quase-preto);
    text-align: center;
}
.slide-sem__dia,
.slide-sem__mes,
.slide-sem__ano {
    font-weight: 800;
    line-height: .96;
    font-size: 6.4cqw;
}
.slide-sem__ano { margin-bottom: .9cqw; }

.slide-sem__hora {
    background: var(--verde-quase-preto);
    color: var(--lima);
    font-weight: 700;
    font-size: 1.6cqw;
    padding: .55cqw 1.1cqw;
    border-radius: 5px;
    white-space: nowrap;
}

/* --- faixa dos palestrantes, no canto inferior direito --- */
.slide-sem__palestrantes {
    position: absolute;
    z-index: 2;
    right: 3.2cqw;
    bottom: 3.4cqw;
    width: 55cqw;
    height: auto;
    display: block;
}

/* Em tela estreita o texto sufoca: o cartao da data encolhe, a faixa dos
   palestrantes sai (ela ja aparece na arte do evento) e o texto ganha o espaco. */
@container (max-width: 620px) {
    .slide-sem__conteudo { max-width: 84%; padding-top: 7cqw; }
    .slide-sem__palestrantes { display: none; }
    .slide-sem__selo { bottom: 4cqw; }
    .slide-sem__data { width: 21cqw; }
}

/* ============================ RODAPE ===================================== */

.rodape {
    min-height: var(--altura-rodape);
    background: var(--verde-escuro);
    color: var(--lima);
    display: flex;
    align-items: center;
}

.rodape__interno {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding: .75rem clamp(1rem, 2vw, 2rem);
    text-align: center;
    font-size: .8rem;
    line-height: 1.5;
}

/* ============================ WHATSAPP =================================== */

.whatsapp {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1030;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    transition: bottom .2s ease, transform .18s ease;
}
.whatsapp:hover { color: #fff; transform: scale(1.05); }

/* ==========================================================================
   PÁGINA DE ERRO 404 (08/09/2026)
   ---------------------------------------------------------------------------
   Mapeada pixel a pixel contra a arte de referência do Jonh
   (pagina_de_erro404_abmes.jfif). A ilustração é um recorte exato dessa arte
   (mesmo fundo verde-escuro, sem emenda visível -- a cor da seção abaixo foi
   amostrada da própria imagem, e não é a mesma do `--verde-escuro` do resto
   do site, que é mais claro/azulado).

   Fica em `site.css` (não numa folha por página) porque `error/404.phtml`
   renderiza dentro de `layout/layout.phtml` -- o layout da Home, que só
   carrega esta folha. Não há `cssPagina` na página de erro: o dispatch nunca
   passa pelo controller de verdade (é a RouteNotFoundStrategy do Laminas
   quem troca o template, sempre que a resposta chega em 404 -- de QUALQUER
   controller, inclusive o meu; ver o cabeçalho do próprio 404.phtml).
   ========================================================================== */

.erro404 {
    background: #04300a;
    color: var(--branco);
    text-align: center;
    padding: 48px 24px 64px;
}

.erro404__interno {
    max-width: 720px;
    margin: 0 auto;
}

.erro404__titulo {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 32px;
}

.erro404__ilustracao {
    display: block;
    width: 100%;
    max-width: 553px;
    height: auto;
    margin: 0 auto 32px;
    border-radius: 12px;
}

.erro404__opa {
    color: var(--lima);
    font-size: 36px;
    font-weight: 800;
    letter-spacing: .02em;
    margin: 0 0 20px;
}

.erro404__texto {
    font-size: 17px;
    line-height: 1.6;
    margin: 0;
}

.erro404__acoes {
    background: var(--lima);
    padding: 28px 24px;
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.erro404__botao {
    font-weight: 700;
    letter-spacing: .02em;
}

.erro404__botao--home {
    background: #e7f2db;
    color: var(--verde-escuro);
}
.erro404__botao--home:hover { background: var(--branco); color: var(--verde-escuro); }

.erro404__botao--associar {
    background: #0b2e0a;
    color: var(--lima);
}
.erro404__botao--associar:hover { background: #133d11; color: var(--lima); }

/* ========================= RESPONSIVIDADE ================================
   Os cortes sao os mesmos ja adotados nos outros projetos da ABMES
   (991.98 e 767.98), para nao haver dois criterios convivendo.
   Area de toque minima de 40px e requisito, nao detalhe.
   ========================================================================= */

@media (max-width: 991.98px) {
    :root { --altura-cabecalho: auto; }

    .cabecalho { padding-block: .75rem; }

    .cabecalho__interno {
        flex-wrap: wrap;
        row-gap: .75rem;
    }

    .busca { order: 3; flex-basis: 100%; max-width: none; }
    .cabecalho__acoes { margin-left: auto; }

    .miolo {
        flex-direction: column;
        min-height: 0;
    }

    .slideshow {
        flex: 0 0 auto;
        aspect-ratio: 3 / 2;
    }

    .coluna {
        flex: 0 0 auto;
        max-width: none;
        width: 100%;
    }

    .atalhos { margin-top: 0; }

    .erro404__opa { font-size: 30px; }
}

@media (max-width: 767.98px) {
    .cabecalho__logo img { height: 36px; }

    .erro404 { padding: 32px 16px 48px; }
    .erro404__titulo { font-size: 22px; margin-bottom: 24px; }
    .erro404__opa { font-size: 24px; }
    .erro404__texto { font-size: 15px; }
    .erro404__acoes { flex-direction: column; align-items: stretch; padding: 20px 16px; }
    .erro404__botao { justify-content: center; }

    .botao {
        height: 44px;
        padding-inline: 1rem;
        font-size: .875rem;
    }
    .botao--contorno span { display: none; }   /* vira so a seta, para caber */

    .menu__link { padding-block: .85rem; }      /* toque confortavel */

    .atalhos__lista { grid-template-columns: 1fr; }

    /**
     * ⚠️ O slideshow fica em 3/2 tambem no celular -- o 4/3 que havia aqui so
     * criava tarja.
     *
     * Com `object-fit: contain` quem manda no tamanho da arte e a LARGURA: em
     * 390px a arte oficial (1728x1153, 1,50:1) desenha 390x260 tanto numa
     * caixa de 292 quanto numa de 260. O 4/3 nao aumentava a arte em nada --
     * so acrescentava 32px de fundo escuro, 16 em cima e 16 embaixo.
     *
     * Em 3/2 a arte oficial preenche a caixa EXATA, sem tarja nenhuma.
     *
     * ⚠️ Banner largo continua com tarja, e nao ha como evitar: os do banco
     * atual sao 2,53:1 e a arte nova e 1,50:1. Enquanto conviverem duas
     * proporcoes, `contain` sempre sobra de um lado -- o fundo #023026 foi
     * amostrado da propria arte justamente para essa sobra passar despercebida.
     */

    .whatsapp { width: 52px; height: 52px; right: 1rem; bottom: 1rem; }
}

/* ========================= ALVO DE TOQUE ============================= *
   "OU" de proposito: por largura pega o celular e o tablet; por `pointer:
   coarse` pega o notebook com tela sensivel ao toque, que e largo. Ver a
   mesma faixa no internas.css.
   ===================================================================== */

@media (max-width: 991.98px), (pointer: coarse) {
    /* os atalhos da coluna da home: de 19 para 40 de altura */
    .atalhos__link { display: inline-block; padding-block: .65rem; }
    .atalhos__item::before { top: 1.15em; }   /* a bolinha acompanha o novo meio */

    /* 🔴 10/09/2026 -- 38px, 2px abaixo do mínimo do projeto (40px); o MESMO ícone social no rodapé interno (.rodapao__redes a, internas.css) já está correto em 40px */
    .redes__link { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ========================= VOLTAR AO TOPO ============================ *

   Link flutuante para a ancora #topo, no canto inferior direito.

   🔴 Sem JavaScript ele fica SEMPRE visivel, e isso e de proposito: o script
   so decide QUANDO mostrar. A regra `.com-js` abaixo e que o esconde -- e a
   classe `com-js` entra no <html> ainda no <head>, antes da primeira pintura,
   senao o botao pisca na tela toda vez que a pagina abre.
   ===================================================================== */

.ao-topo {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1030;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--verde-escuro);
    color: var(--lima);
    border: 2px solid var(--lima);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    transition: opacity .2s ease, translate .2s ease, background-color .18s ease;
}

.ao-topo:hover  { background: var(--lima); color: var(--verde-escuro); }
.ao-topo:focus-visible { outline: 3px solid var(--lima); outline-offset: 3px; }

/**
 * 🔴 16/09/2026 -- A SETA FICA ABAIXO DO WHATSAPP (pedido do Jonh).
 *
 * Quem sai do lugar e o WhatsApp, nao a seta: a seta guarda o canto de baixo
 * (o `bottom` proprio dela, ali em cima) e o WhatsApp sobe a altura dela mais
 * a folga. Foi de proposito assim, e o motivo importa: a seta VAI E VEM com a
 * rolagem. Se ela guardasse o lugar de cima, o WhatsApp ficaria parado a 60px
 * do fim da tela com um vazio embaixo sempre que a seta estivesse escondida --
 * e na home, que nem rola, esse vazio seria permanente.
 *
 * Por isso o gatilho e `.ao-topo--visivel`, e nao `.ao-topo`: o WhatsApp sobe
 * no mesmo instante em que a seta aparece e desce quando ela some, sem nunca
 * deixar buraco. O `transition` do `.whatsapp` e o que faz isso deslizar.
 */
body:has(.ao-topo--visivel) .whatsapp { bottom: calc(1.25rem + 48px + 12px); }

/**
 * Sem JavaScript a seta nasce visivel e nunca recebe `--visivel` (ver o bloco
 * `.com-js` abaixo) -- entao o gatilho de cima nao pegaria e os dois ficariam
 * um por cima do outro. Aqui o WhatsApp sobe de uma vez e fica.
 */
html:not(.com-js) body:has(.ao-topo) .whatsapp { bottom: calc(1.25rem + 48px + 12px); }

/**
 * 🔴 No celular as contas mudam, e os dois lados mudam: a seta desce para
 * `1rem` (acompanhando o `.whatsapp`, que ja tinha essa regra na faixa do
 * menu) e o degrau do WhatsApp passa a contar a partir de 1rem. Sem repetir
 * isto aqui, a conta continuaria com os numeros do computador -- que foi
 * exatamente o defeito medido em 390x844 antes deste bloco existir.
 */
@media (max-width: 767.98px) {
    .ao-topo { right: 1rem; bottom: 1rem; }
    body:has(.ao-topo--visivel) .whatsapp,
    html:not(.com-js) body:has(.ao-topo) .whatsapp { bottom: calc(1rem + 48px + 12px); }
}

.com-js .ao-topo {
    opacity: 0;
    visibility: hidden;
    translate: 0 10px;
}

.com-js .ao-topo--visivel {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
}

/* a rolagem suave vale para a ancora #topo e para o "Pular para o conteudo" */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .ao-topo { transition: none; }
}