/* =========================================================
   ARH Serrana — camada fina sobre o design system.
   Só o que o DS não cobre: faixa de aviso, menu mobile,
   botões nomeados e utilidades de acessibilidade.
   Cores e tipografia vêm do DS; nada é redefinido aqui.
   ========================================================= */

/* =========================================================
   TIPOGRAFIA: TUDO SEM SERIFA
   O design system apontava --font-heading para a bureauSerif. A ARH pediu
   tipografia sem serifa, porque a serifada não conversa com a identidade da
   associação. Trocamos só o ponteiro, então todo título do site passa a usar
   a bureauSans que já vinha no DS, sem precisar caçar regra por regra.
   Peso 500 nos títulos porque a Book de 400, no tamanho de display, ficava
   sem presença depois que a serifada saiu.
   ========================================================= */
:root{--font-heading:var(--font-bureau-sans)}
.text-h1,.text-h2,.text-h3,.text-h4,
.hero-animado__titulo,
.prosa-arh h2,.prosa-arh h3{font-weight:500;letter-spacing:-.02em}

/* =========================================================
   FAIXA DA MARCA
   O site tinha 40 seções em cinza claro e 11 em preto, contra nenhuma no
   laranja da ARH. Esta faixa existe para o laranja oficial ocupar seção
   inteira, e não só detalhe.
   Sobre #FF6601 o branco dá 2,94:1 e reprova, então tudo dentro dela é
   tinta escura. Texto de apoio abaixo de 85% de tinta também reprova, por
   isso a regra reescreve os utilitários translúcidos do DS.
   ========================================================= */
.bg-marca{background-color:#FF6601;color:#16202A}
.bg-marca .text-black\/50,.bg-marca .text-black\/55,.bg-marca .text-black\/60,
.bg-marca .text-black\/65,.bg-marca .text-black\/70,.bg-marca .text-black\/75{
    color:rgba(22,32,42,.88)}
.bg-marca .cartao-recurso,.bg-marca .cartao-norte,.bg-marca .cartao-post{
    background:#fff;border-color:rgba(22,32,42,.12)}
.bg-marca .cartao-recurso__icone{background:#16202A;border-color:#16202A;color:#FF6601}

/* ---- grade ----
   O .container do DS é content-box com margin-inline:auto. Como filho direto de
   um flex, as margens automáticas o centram no conteúdo e ele sai da grade do
   site. Esta faixa ocupa a linha do flex e devolve o container ao fluxo normal. */
.faixa-grade{position:relative;z-index:10;width:100%}

/* =========================================================
   RITMO VERTICAL DAS SEÇÕES
   Um valor só governa o respiro de cima e de baixo de TODA seção,
   independente de mudar ou não a cor de fundo. Antes havia dois
   níveis (288px na virada de cor, 144px na continuação) e ainda
   com exceções — era daí que vinha a sensação de desorganização.
   Para mudar o ritmo do site inteiro, mexa só em --ritmo-secao.
   ========================================================= */
:root{--ritmo-secao:56px}
@media (min-width:768px){ :root{--ritmo-secao:96px} }
.secao{--respiro:var(--ritmo-secao);
    padding-top:var(--respiro-topo,var(--respiro));
    padding-bottom:var(--respiro-base,var(--respiro))}

/* Duas seções da mesma cor coladas somavam o respiro das duas e abriam um
   vazio do dobro do tamanho. Como a emenda entre elas não aparece, cada uma
   entra com metade e o intervalo volta a valer um respiro só. Onde :has()
   não existir, zera o topo da segunda: o resultado é o mesmo respiro único. */
.secao.bg-grey-50 + .secao.bg-grey-50,
.secao.bg-black + .secao.bg-black,
.secao.bg-white + .secao.bg-white,
.secao.bg-peach + .secao.bg-peach,
.secao.bg-brand-deep + .secao.bg-brand-deep{--respiro-topo:calc(var(--respiro) / 2)}

@supports selector(:has(*)){
    .secao.bg-grey-50:has(+ .secao.bg-grey-50),
    .secao.bg-black:has(+ .secao.bg-black),
    .secao.bg-white:has(+ .secao.bg-white),
    .secao.bg-peach:has(+ .secao.bg-peach),
    .secao.bg-brand-deep:has(+ .secao.bg-brand-deep){--respiro-base:calc(var(--respiro) / 2)}
}
@supports not selector(:has(*)){
    .secao.bg-grey-50 + .secao.bg-grey-50,
    .secao.bg-black + .secao.bg-black,
    .secao.bg-white + .secao.bg-white{--respiro-topo:0px}
}

/* banda escura de abertura das páginas internas:
   o topo abre espaço para o cabeçalho fixo, a base segue o ritmo */
.topo-pagina__banda{padding-top:calc(var(--altura-cab) + var(--ritmo-secao));
    padding-bottom:var(--ritmo-secao)}

/* =========================================================
   FUNDO FOTOGRÁFICO DAS FAIXAS
   Faixa escura deixa de ser chapada: recebe uma foto de evento
   da própria ARH sob véu forte, só como textura. O texto continua
   com o mesmo contraste de antes. O fundo é a superfície onde o
   parallax e outros efeitos vão entrar.
   ========================================================= */
.faixa-foto{position:relative;isolation:isolate}
.faixa-foto > .container,.faixa-foto > .faixa-grade{position:relative;z-index:2}
.faixa-foto__fundo{position:absolute;inset:-12% -2%;z-index:0;
    background-size:cover;background-position:center;
    /* leve desfoque: a foto vira textura, não concorre com o texto */
    filter:blur(2px) saturate(.85);will-change:transform}
/* véu quente, igual ao do cabeçalho. O anterior era ardósia fria a 95%,
   calibrado para foto abstrata: com registro real da ARH atrás, ele apagava
   a sala inteira e a faixa virava um retângulo chapado. Aqui abre alguns
   pontos para a sala aparecer, sem tirar leitura do texto branco. */
.faixa-foto__veu{position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg, rgba(25,17,11,.92) 0%, rgba(25,17,11,.86) 50%, rgba(25,17,11,.94) 100%)}
/* variante clara: a foto entra como marca-d'água discreta */
/* sobre fundo claro a foto precisa recuar muito mais: as fotos de evento
   têm contraste alto e mesmo 10% visível já vira mancha. Véu mais forte e
   desfoque maior deixam só a textura. */
.faixa-foto--clara .faixa-foto__veu{
    background:linear-gradient(180deg, rgba(245,247,249,.965) 0%, rgba(245,247,249,.94) 50%, rgba(245,247,249,.975) 100%)}
.faixa-foto--clara .faixa-foto__fundo{filter:blur(5px) saturate(.6)}
@media (prefers-reduced-motion: reduce){
  .faixa-foto__fundo{inset:0;transform:none !important}
}

/* =========================================================
   COLUNAS DIVISORAS — do aero-hero-3
   Linhas verticais finas sobre o fundo, nas proporções 1/3/4/3/1 do
   original (que usa 12 colunas com divide-x). Ficam entre o véu e o
   conteúdo e não capturam clique.
   ========================================================= */
.colunas-divisoras{display:none}
.colunas-divisoras--ligadas{position:absolute;inset:0;z-index:1;display:grid;
    grid-template-columns:1fr 3fr 4fr 3fr 1fr;pointer-events:none}
.colunas-divisoras span + span{border-left:1px solid rgba(255,255,255,.16)}
@media (max-width:640px){
  .colunas-divisoras{grid-template-columns:1fr 4fr 1fr}
  .colunas-divisoras span:nth-child(n+4){display:none}
}

/* faixa com mais presença, para a CTA de fechamento respirar como no
   componente de referência sem virar uma segunda tela cheia */
.secao--alta{--respiro:calc(var(--ritmo-secao) * 1.6)}

/* o atributo hidden é estilo de agente do usuário e perde para qualquer
   classe com display; os cards são flex, então sem isto o filtro não esconde */
[hidden]{display:none !important}

/* imagens dentro do texto corrido: nunca estouram a coluna de leitura */
.prosa-arh img{display:block;max-width:100%;height:auto;border-radius:16px;
    margin:32px 0;border:1px solid rgba(22,32,42,.10)}

/* âncoras internas não podem parar atrás do cabeçalho fixo */
html{scroll-behavior:smooth}
/* Toda âncora do site parava 4px debaixo do menu. A conta usava só
   --altura-cab, que vale 123px, mas o cabeçalho vira 139px quando rolado,
   porque ali ganha o respiro de baixo. Somando --respiro-nav e um respiro
   de 24px, a seção chega alinhada e com folga, igual aos blocos fixos. */
[id]{scroll-margin-top:calc(var(--news-banner-height, 0px) + var(--altura-cab) + var(--respiro-nav) + 24px)}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

/* =========================================================
   BLOCO TÍTULO + TEXTO
   Duas colunas: título à esquerda, texto à direita. O texto encosta
   pela base, alinhando a última linha dele com a última linha do
   título. A coluna da esquerda mantém self-start para continuar no
   topo e seguir grudada ao rolar. Quando o texto é mais alto que o
   título, ele define a altura e o alinhamento não muda nada.
   ========================================================= */
@media (min-width:1024px){
  .bloco-titulo-texto{align-items:end}
  /* o título fica preso no topo pela própria classe: sem isto, nos blocos
     em que a coluna direita é mais alta, o alinhamento pela base arrastava
     o título para o rodapé do bloco. Só o /sobre tinha self-start no markup. */
  .bloco-titulo-texto > :first-child{align-self:start}
}

/* =========================================================
   VIÚVAS DE LINHA
   text-wrap:pretty faz o navegador reequilibrar as últimas linhas para
   não sobrar uma ou duas palavras soltas embaixo. Vale para todo texto
   de apoio do site; onde o navegador não dá conta, o texto é reescrito.
   ========================================================= */
.prosa-arh p,
.cartao-recurso__desc,.cartao-post__resumo,.pilar__desc,.recurso__desc,.cartao-norte__desc,
.cartao-orbita__desc,.atalho-grid__desc,.rodape-ds__sobre,
.hero-animado__descricao,.intro-apoio{text-wrap:pretty}

/* ---- acessibilidade ---- */
/* só para leitor de tela: usada no aviso de link que abre em nova guia */
.sr-apenas{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* ícone discreto de link externo no menu */
.nav-ds__externo{margin-left:6px;font-size:.78em;opacity:.6;vertical-align:baseline}

.pular-conteudo{position:absolute;left:12px;top:-100px;z-index:100;background:#2C3B49;color:#fff;
    font-size:15px;padding:12px 20px;border-radius:999px;text-decoration:none;transition:top .15s ease}
.pular-conteudo:focus{top:60px}
.sr-so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- cabeçalho ---- */
/* a barra tem a linha de 60px mais 15px de respiro no topo. Como o hero e
   a banda das páginas internas descontam essa altura, ela vira variável. */
/* a faixa de aviso foi retirada do site, então a variável que reservava
   a altura dela vale zero. Fica declarada para o dia em que voltar. */
:root{--news-banner-height:0px;--linha-nav:72px;--respiro-nav:15px;--altura-cab:87px;--barra-util:0px}
@media (min-width:1024px){ :root{--barra-util:36px;--altura-cab:123px} }
.h-nav{height:var(--linha-nav);padding-top:var(--respiro-nav);box-sizing:content-box}
.cab-solido{background:rgba(246,245,242,.92);color:#16202A;backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);box-shadow:inset 0 -1px 0 rgba(22,32,42,.08)}
#cabecalho.rolou{background:rgba(246,245,242,.94);color:#16202A;
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:inset 0 -1px 0 rgba(22,32,42,.08)}
/* ao rolar, a barra ganha o mesmo respiro embaixo que já tem em cima */
#cabecalho.rolou .h-nav{padding-bottom:var(--respiro-nav)}
.marca img{height:53.8px;width:auto;display:block}
/* logo clara sobre hero escuro, escura depois de rolar */
#cabecalho.bg-transparent .marca img{filter:brightness(0) invert(1)}
#cabecalho.rolou .marca img{filter:none}

/* ---- navegação ---- */
.nav-ds{display:none;align-items:center;gap:26px}
@media (min-width:1024px){ .nav-ds{display:flex} }
/* de 1024 a 1279px o menu não cabe em 26px de vão e itens como "Quem somos"
   e "Sala do Associado" quebravam em duas linhas dentro da barra. O vão
   aperta e os rótulos ficam proibidos de quebrar; acima de 1280 nada muda. */
@media (min-width:1024px) and (max-width:1279.98px){
    .nav-ds{gap:15px}
    .nav-ds > a,.nav-ds > div > button,.nav-ds__gatilho{white-space:nowrap}
    .nav-ds a{font-size:14px}
}
.nav-ds a{font-size:15px;line-height:1;color:currentColor;opacity:.8;text-decoration:none;
    transition:opacity .3s ease}
/* itens sem submenu precisam da mesma caixa dos que têm chevron, senão desalinham */
.nav-ds > a{display:inline-flex;align-items:center;height:24px}
.nav-ds a:hover,.nav-ds a[aria-current="page"]{opacity:1}
.nav-ds__item{position:relative}
.nav-ds__gatilho{display:inline-flex;align-items:center;gap:5px}
.nav-ds__seta{width:15px;height:15px;transition:transform .3s ease;opacity:.7}
.nav-ds__item:hover .nav-ds__seta,.nav-ds__item:focus-within .nav-ds__seta{transform:rotate(180deg)}
.submenu-ds{position:absolute;top:100%;left:-16px;padding-top:14px;min-width:300px;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s}

/* megamenu: o painel vira grade de colunas, com cada item trazendo o
   descritivo embaixo. A largura acompanha o número de colunas, e o
   translate de segurança impede que o painel saia pela direita da tela
   nos itens mais à direita da barra. */
.submenu-ds--mega{min-width:min(660px, calc(100vw - 48px));
    max-width:calc(100vw - 48px)}
.submenu-ds--mega .submenu-ds__painel{
    grid-template-columns:repeat(var(--colunas, 2), minmax(0, 1fr));
    gap:2px 8px;padding:12px}
.submenu-ds--mega .submenu-ds__link{padding:12px 14px}
.nav-ds__item:hover .submenu-ds,.nav-ds__item:focus-within .submenu-ds{opacity:1;visibility:visible;transform:none}
.submenu-ds__painel{background:#fff;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(22,32,42,.08),0 12px 32px rgba(22,32,42,.12);
    padding:8px;display:grid;gap:2px}
.submenu-ds__link{display:block;padding:11px 14px;border-radius:8px;text-decoration:none;
    transition:background .15s ease;opacity:1}
.submenu-ds__link b{display:block;font-size:15px;font-weight:500;color:#16202A}
.submenu-ds__link span{display:block;margin-top:2px;font-size:13.5px;line-height:1.45;color:rgba(22,32,42,.55)}
.submenu-ds__link:hover{background:#F5F7F9}
.submenu-ds__link:hover b{color:#FF6601}

/* =========================================================
   BOTÕES — estilo "flow"
   Contorno vazado que, no hover, perde a borda, fecha o raio e é
   tomado por um círculo laranja que cresce do centro. A seta entra
   pela esquerda enquanto a de saída escapa pela direita.

   O texto NÃO vira branco no hover, ao contrário do componente
   original: branco sobre #FF6601 dá 2,9:1 e reprova em acessibilidade.
   Sobre laranja a leitura pede tinta escura, que dá 5,5:1.

   Só existem dois contextos: sobre fundo claro e sobre fundo escuro.
   As variantes antigas (primario/laranja/fantasma/claro) continuam
   valendo como apelido de um dos dois, para não quebrar as chamadas.
   ========================================================= */
.btn-ds{position:relative;display:inline-flex;align-items:center;justify-content:center;
    gap:4px;overflow:hidden;height:48px;padding:0 38px;border-radius:100px;
    background:transparent;color:inherit;
    /* o contorno nasce da própria cor do texto, então o botão se adapta
       sozinho ao fundo da seção. Antes isso dependia de uma variante fixa
       e o mesmo --laranja era usado em faixa clara e escura: na escura o
       botão saía tinta sobre tinta, praticamente invisível. */
    border:1.5px solid rgba(22,32,42,.4);
    border-color:color-mix(in srgb, currentColor 40%, transparent);
    font-family:var(--font-sans);font-size:14px;font-weight:600;line-height:1;
    text-decoration:none;cursor:pointer;
    transition:border-color .6s cubic-bezier(.23,1,.32,1),
               border-radius .6s cubic-bezier(.23,1,.32,1),
               color .6s cubic-bezier(.23,1,.32,1),
               transform .15s ease}
.btn-ds:hover{border-color:transparent;border-radius:12px}
.btn-ds:active{transform:scale(.95)}
.btn-ds:focus-visible{outline:2px solid #FF6601;outline-offset:3px}

/* o círculo que toma o botão */
.btn-ds__circulo{position:absolute;top:50%;left:50%;z-index:0;
    width:16px;height:16px;border-radius:50%;background:#FF6601;opacity:0;
    transform:translate(-50%,-50%);pointer-events:none;
    transition:width .8s cubic-bezier(.19,1,.22,1),height .8s cubic-bezier(.19,1,.22,1),
               opacity .8s cubic-bezier(.19,1,.22,1)}
.btn-ds:hover .btn-ds__circulo{width:340px;height:340px;opacity:1}

.btn-ds__txt{position:relative;z-index:2;transform:translateX(-6px);
    transition:transform .8s ease}
.btn-ds:hover .btn-ds__txt,.btn-vidro:hover .btn-ds__txt{transform:translateX(10px)}

.btn-ds__icone{position:absolute;z-index:2;display:flex;font-size:15px;line-height:1;
    transition:left .8s cubic-bezier(.34,1.56,.64,1),right .8s cubic-bezier(.34,1.56,.64,1),
               opacity .35s ease}
.btn-ds__icone--esq{left:-30%;opacity:0}
.btn-ds__icone--dir{right:16px}
.btn-ds:hover .btn-ds__icone--esq,.btn-vidro:hover .btn-ds__icone--esq{left:16px;opacity:1}
.btn-ds:hover .btn-ds__icone--dir,.btn-vidro:hover .btn-ds__icone--dir{right:-30%;opacity:0}

/* No hover o fundo vira o círculo laranja, e sobre laranja a leitura pede
   tinta escura em qualquer contexto — inclusive quando o texto era branco. */
.btn-ds:hover{color:#16202A}

/* As variantes antigas viraram apelidos sem efeito de cor: o contexto agora
   vem por herança. Ficam declaradas só para documentar que continuam válidas
   nas chamadas existentes. */
.btn-ds--primario,.btn-ds--laranja,.btn-ds--fantasma,
.btn-ds--claro,.btn-ds--fantasma-claro,.btn-ds--sobre-escuro{}

/* ── botão sólido ─────────────────────────────────────────────────
   As variantes acima nunca existiram: nem aqui nem no build do DS,
   então todo botão do site nasce vazado e não havia como marcar a
   ação principal de uma página. Este é o sólido, reservado para a
   chamada principal.
   Branco sobre o laranja da marca dá 2,9:1 e reprova, então o texto
   é a tinta da paleta, que sobre #FF6601 entrega 5,71:1. */
.btn-ds--solido{background:#FF6601;color:#16202A;border-color:#FF6601}
.btn-ds--solido:hover{background:#E65C01;border-color:#E65C01;color:#16202A}
.btn-ds--solido .btn-ds__circulo{background:#16202A}
.btn-ds--solido:hover .btn-ds__txt,
.btn-ds--solido:hover .btn-ds__icone{color:#fff}

/* o botão do cabeçalho acompanha o estado da barra: sobre o hero escuro
   ele precisa de contorno claro, e volta à tinta quando a barra solidifica.
   A regra do .rolou vem depois de propósito — mesma especificidade, a ordem decide. */
/* o cabeçalho não precisa mais de regra própria: o botão herda a cor da barra */
#cabecalho.bg-transparent .btn-ds:hover{color:#16202A}
#cabecalho.rolou .btn-ds{border-color:rgba(22,32,42,.4);color:#16202A}
#cabecalho.rolou .btn-ds:hover{color:#16202A}

/* Associe-se do topo: a ARH pediu que ele nasça laranja, sem esperar o
   hover, para ser o único botão do cabeçalho que chama a atenção. As duas
   linhas repetem o id para vencer as regras da barra acima, que trocam a
   borda e a cor de todo .btn-ds quando a página rola. */
#cabecalho .btn-ds--solido,
#cabecalho.rolou .btn-ds--solido{background:#FF6601;border-color:#FF6601;color:#16202A}
#cabecalho .btn-ds--solido:hover,
#cabecalho.rolou .btn-ds--solido:hover{border-color:#16202A}

/* botão em tinta, para usar sobre a faixa laranja, onde o sólido laranja
   sumiria. Branco sobre tinta 16,5:1; no hover o círculo laranja cobre o
   botão e o texto passa a tinta, 5,61:1. */
.btn-ds--tinta{background:#16202A;color:#fff;border-color:#16202A}
.btn-ds--tinta .btn-ds__circulo{background:#FF6601}
.btn-ds--tinta:hover{color:#16202A}
/* botão vazado sobre a faixa laranja: o círculo laranja padrão sumiria no
   fundo, então vira tinta e o texto fica branco */
.bg-marca .btn-ds:not(.btn-ds--tinta):not(.btn-ds--solido) .btn-ds__circulo{background:#16202A}
.bg-marca .btn-ds:not(.btn-ds--tinta):not(.btn-ds--solido):hover{color:#fff}
.bg-marca .btn-ds:not(.btn-ds--tinta):not(.btn-ds--solido){border-color:#16202A;color:#16202A}

/* versão compacta, usada no cabeçalho */
.btn-ds--p{height:38px;padding:0 34px;font-size:13px}
.btn-ds--p .btn-ds__icone{font-size:14px}
.btn-ds--p .btn-ds__icone--dir{right:12px}
.btn-ds--p:hover .btn-ds__icone--esq{left:12px}
.btn-ds--p .btn-ds__txt{transform:translateX(-5px)}
.btn-ds--p:hover .btn-ds__txt{transform:translateX(8px)}

/* o hero fica sobre vídeo: mesma anatomia, com desfoque atrás para leitura */
.btn-vidro{position:relative;display:inline-flex;align-items:center;justify-content:center;
    gap:4px;overflow:hidden;height:52px;padding:0 38px;border-radius:100px;
    background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.45);color:#fff;
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    font-size:15px;font-weight:600;line-height:1;text-decoration:none;
    transition:border-color .6s cubic-bezier(.23,1,.32,1),
               border-radius .6s cubic-bezier(.23,1,.32,1),
               color .6s cubic-bezier(.23,1,.32,1),
               background-color .6s ease,transform .15s ease}
.btn-vidro:hover{border-color:transparent;border-radius:12px;color:#16202A;background:transparent}
.btn-vidro:active{transform:scale(.95)}
.btn-vidro:focus-visible{outline:2px solid #FF6601;outline-offset:3px}
.btn-vidro .btn-ds__circulo{background:#FF6601}
.btn-vidro:hover .btn-ds__circulo{width:360px;height:360px;opacity:1}

@media (prefers-reduced-motion: reduce){
  .btn-ds,.btn-vidro,.btn-ds__txt,.btn-ds__icone,.btn-ds__circulo{transition-duration:.01ms}
}

/* ---- menu mobile ---- */
/* Visibilidade do cabeçalho, resolvida aqui e não por utilidade do Tailwind:
   o `lg:hidden` do hambúrguer era atropelado por este próprio .menu-botao
   (mesma especificidade, arh.css carrega depois) e o `max-lg:hidden` do
   Associe-se simplesmente não existe no build do DS. Resultado: os dois
   apareciam ao mesmo tempo, no desktop e no mobile.
   Regra: acima de 1024px a barra mostra a navegação e o Associe-se;
   abaixo, só o hambúrguer — o Associe-se já vive dentro do menu. */
.menu-botao{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;
    border:none;background:none;cursor:pointer;padding:0}
.acao-cabecalho{display:none}
@media (max-width:1023.98px){ .menu-botao{display:flex} }
@media (min-width:1024px){ .acao-cabecalho{display:inline-flex} }
.menu-botao span{display:block;height:2px;width:100%;background:currentColor;border-radius:2px;
    transition:transform .2s,opacity .2s}
.menu-botao[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-botao[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-botao[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-mobile{position:fixed;inset:0;z-index:80;background:#16202A;color:#fff;display:flex;
    flex-direction:column;padding:24px;transform:translateX(100%);transition:transform .25s ease;
    overflow-y:auto}
.menu-mobile.aberto{transform:translateX(0)}
.menu-mobile__topo{display:flex;align-items:center;justify-content:space-between}
.menu-mobile__topo .marca img{filter:brightness(0) invert(1)}
.menu-mobile__fechar{background:none;border:none;color:#fff;font-size:28px;line-height:1;cursor:pointer;padding:6px}
.menu-mobile nav{display:flex;flex-direction:column;gap:2px;margin-top:36px}
.menu-mobile nav > a,.menu-mobile__grupo > summary{font-family:var(--font-heading);font-weight:400;
    font-size:26px;color:#fff;text-decoration:none;padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,.1)}
.menu-mobile__grupo > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px}
.menu-mobile__grupo > summary::-webkit-details-marker{display:none}
.menu-mobile__grupo > summary svg{width:20px;height:20px;opacity:.6;transition:transform .2s ease}
.menu-mobile__grupo[open] > summary svg{transform:rotate(180deg)}
.menu-mobile__filhos{display:flex;flex-direction:column;padding:8px 0 12px}
.menu-mobile__filhos a{font-size:16px;color:rgba(255,255,255,.7);text-decoration:none;
    padding:10px 0 10px 16px;border-left:2px solid rgba(255,255,255,.14)}
.menu-mobile__filhos a[aria-current="page"]{color:#FF6601;border-left-color:#FF6601}
.menu-mobile .btn-ds{margin-top:28px;align-self:flex-start}

/* ---- rodapé ---- */
/* =========================================================
   RODAPÉ
   Grey 50 do DS. As opacidades da tinta foram escolhidas pelo contraste
   medido sobre #F5F7F9, não a olho: rótulo e barra inferior em .66 dão
   ~5,1:1 e os links em .78 dão ~7,5:1 (AA pede 4,5:1). O hover usa o
   laranja profundo dos selos, que passa em 4,7:1; o #FF6601 puro daria
   2,7:1 e seria ilegível como texto.
   ========================================================= */
.rodape-ds{background:var(--color-grey-50, #F5F7F9);color:#16202A;
    border-top:1px solid rgba(22,32,42,.10)}

/* duas partes: a coluna da marca à esquerda e os cinco grupos de links à
   direita, lado a lado. Abaixo de 1180px a marca vira uma faixa horizontal
   em cima dos links. */
.rodape-ds__grade{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;
    padding-top:64px;padding-bottom:48px}
.rodape-ds__marca{display:flex;flex-wrap:wrap;align-items:flex-start;gap:28px 56px}
.rodape-ds__links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto 1fr;gap:34px 20px}
/* celular: Parceiros à esquerda, Conteúdo e Participe empilhados ao lado,
   para Participe não sobrar sozinho na última linha */
.rodape-ds__links > div:nth-child(3){grid-column:1;grid-row:2 / 4}
.rodape-ds__links > div:nth-child(4){grid-column:2;grid-row:2}
.rodape-ds__links > div:nth-child(5){grid-column:2;grid-row:3}
/* tablet: quatro colunas, com Participe embaixo de Conteúdo, que são as
   duas listas curtas; em três colunas a segunda linha ficava com um vão.
   Depende de serem cinco grupos, na ordem do menu. */
@media (min-width:640px){
  .rodape-ds__links{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto 1fr;gap:40px 28px}
  .rodape-ds__links > div:nth-child(-n+3){grid-column:auto;grid-row:1 / 3}
  .rodape-ds__links > div:nth-child(4){grid-column:4;grid-row:1}
  .rodape-ds__links > div:nth-child(5){grid-column:4;grid-row:2}
}
@media (min-width:900px){
  .rodape-ds__links{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto}
  .rodape-ds__links > div:nth-child(n){grid-column:auto;grid-row:auto}
}
/* na faixa horizontal as redes fecham a linha na borda direita; de 900px
   para cima a faixa segue as cinco colunas dos links, com o contato
   começando embaixo de Parceiros */
@media (min-width:640px) and (max-width:899.98px){ .rodape-ds__marca .rodape-ds__redes{margin-left:auto} }
@media (min-width:900px) and (max-width:1179.98px){
  .rodape-ds__marca{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px 28px}
  .rodape-ds__assinatura{grid-column:1 / 3}
  .rodape-ds__contato{grid-column:3 / 5}
  .rodape-ds__marca .rodape-ds__redes{grid-column:5;justify-self:end}
}
@media (min-width:1180px){
  .rodape-ds__grade{grid-template-columns:250px minmax(0,1fr);gap:56px}
  .rodape-ds__marca{flex-direction:column;flex-wrap:nowrap;gap:26px}
  .rodape-ds__links{gap:40px 26px}
}

.rodape-ds__logo{display:inline-block}
.rodape-ds__logo img{height:53.8px;width:auto;display:block}

/* ícones de rede na caixa branca. O .bi do site tem vertical-align
   negativo para casar com texto corrido, e isso desalinhava o glifo
   dentro do botão: aqui ele vira bloco. A regra genérica .rodape-ds a
   tem a mesma especificidade e vem depois no arquivo, por isso o
   nível extra no seletor. */
/* nowrap de propósito: com a sexta coluna do rodapé a faixa ficou com 157px
   na largura mais apertada, e os quatro ícones de 38px com vão de 10 pediam
   182px, então o quarto caía sozinho para a linha de baixo. A 32px com vão
   de 8 a fileira soma 152px e cabe inteira. */
.rodape-ds__redes{list-style:none;display:flex;flex-wrap:nowrap;gap:8px;margin:0;padding:0}
.rodape-ds .rodape-ds__redes a{display:flex;align-items:center;justify-content:center;
    flex:none;width:32px;height:32px;padding:0;border-radius:9px;
    border:1px solid rgba(22,32,42,.12);background:#fff;
    color:rgba(22,32,42,.72);font-size:15px;line-height:1;
    transition:color .2s ease,border-color .2s ease,background-color .2s ease}
.rodape-ds .rodape-ds__redes a:hover{color:#16202A;border-color:#FF6601;background:#FF6601}
.rodape-ds .rodape-ds__redes i{display:block;vertical-align:baseline;line-height:1}

.rodape-ds__contato{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rodape-ds__contato li{display:flex;align-items:flex-start;gap:10px;
    font-size:14px;line-height:1.4;color:rgba(22,32,42,.66)}
.rodape-ds .rodape-ds__contato i{display:block;font-size:15px;line-height:1.4;
    vertical-align:baseline;color:#B84A00;flex-shrink:0}
.rodape-ds .rodape-ds__contato a{display:inline;padding:0;font-size:14px}

.rodape-ds h5{font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    color:rgba(22,32,42,.66);margin:0 0 14px}
.rodape-ds a{display:block;color:rgba(22,32,42,.78);text-decoration:none;font-size:15px;padding:5px 0;
    transition:color .2s ease}
.rodape-ds a:hover{color:#B84A00}
.rodape-ds__base{border-top:1px solid rgba(22,32,42,.12);padding:22px 0;font-size:13.5px;
    color:rgba(22,32,42,.66);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.rodape-ds__base a{display:inline;padding:0;font-size:inherit;color:rgba(22,32,42,.66)}
.rodape-ds__base a:hover{color:#B84A00}
/* faixa da assinatura da Mi, no mesmo fundo do rodapé; o fio de cima a
   separa da linha do copyright */
.rodape-ds__mi{border-top:1px solid rgba(22,32,42,.08);display:flex;justify-content:center;padding:26px 16px}
.rodape-ds .rodape-ds__mi a{display:inline-flex;padding:0;transition:opacity .2s ease}
.rodape-ds .rodape-ds__mi a:hover{opacity:.7}
.rodape-ds .rodape-ds__mi a:focus-visible{outline:2px solid #16202A;outline-offset:4px;border-radius:4px}
/* 15 px de altura, o mesmo selo do rodapé da Guaíba Country */
.rodape-ds__mi img{display:block;height:15px;width:auto}

/* foto de pessoas num quadro mais largo que ela: o corte fica a 30% do alto,
   onde costumam estar os rostos, e não no meio (que cortava cabeças em foto
   tirada em pé). Em foto deitada quase não muda nada. */
.foto-gente{object-position:center 30%}

/* ---- cadastro de novidades, em cima da estrutura do rodapé ----
   Caixa no laranja da marca com o formulário do Grav (página /cadastro).
   Sobre o laranja, tudo o que era laranja no formulário padrão sumia:
   botão, visto marcado, anel de foco, asterisco e link viram tinta escura,
   que dá 5,6:1. O .rodape-ds a deixava todo link em bloco, e o link da
   Política quebrava a frase do aceite; aqui ele volta a ser inline.
   Na tela larga os três campos e o botão ficam numa linha, com o aceite
   embaixo; abaixo disso a caixa empilha. */
.rodape-cadastro{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;
    margin-top:56px;padding:28px 20px;border-radius:20px;
    background:#FF6601;color:#16202A}
.rodape-cadastro__titulo{margin:0;font-family:var(--font-heading);
    font-size:clamp(22px,2.4vw,28px);font-weight:500;line-height:1.15;
    letter-spacing:-.01em;color:#16202A}
.rodape-cadastro__apoio{margin:10px 0 0;font-size:15px;line-height:1.55;color:#16202A}
/* "e-mail" não parte no hífen, no fim da linha */
.rodape-cadastro__inteiro{white-space:nowrap}

.rodape-cadastro .form-grav{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.rodape-cadastro .linha-botoes{margin-top:2px}
.rodape-cadastro .form-grav button[type="submit"]{width:100%}
@media (min-width:640px){
    .rodape-cadastro{padding:36px 36px}
    .rodape-cadastro .form-grav{grid-template-columns:repeat(3,minmax(0,1fr))}
    .rodape-cadastro .form-field:has(input[type="checkbox"]),
    .rodape-cadastro .linha-botoes{grid-column:1 / -1}
    .rodape-cadastro .form-grav button[type="submit"]{width:auto}
}
@media (min-width:1100px){
    .rodape-cadastro{grid-template-columns:minmax(220px,.75fr) minmax(0,2.25fr);
        gap:44px;align-items:center;padding:40px 44px}
    .rodape-cadastro .form-grav{grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:end}
    .rodape-cadastro .linha-botoes{grid-column:4;grid-row:1;margin-top:0}
    .rodape-cadastro .form-field:has(input[type="checkbox"]){grid-column:1 / -1;grid-row:2}
}

.rodape-cadastro .form-grav .form-label label,
.rodape-cadastro .form-grav .required,
.rodape-cadastro .form-grav .form-input-wrapper > label[for]{color:#16202A}
.rodape-cadastro .form-grav input[type="text"],.rodape-cadastro .form-grav input[type="email"],
.rodape-cadastro .form-grav input[type="tel"]{border-color:rgba(22,32,42,.10)}
.rodape-cadastro .form-grav input:hover{border-color:rgba(22,32,42,.35)}
.rodape-cadastro .form-grav input:focus,
.rodape-cadastro .form-grav input[type="checkbox"]:focus-visible{
    border-color:#16202A;box-shadow:0 0 0 3px rgba(22,32,42,.28)}
.rodape-cadastro .form-grav input[type="checkbox"]{border-color:rgba(22,32,42,.45)}
.rodape-cadastro .form-grav input[type="checkbox"]:checked{background-color:#16202A;border-color:#16202A}
.rodape-ds .rodape-cadastro .form-input-wrapper > label[for] a{display:inline;padding:0;
    font-size:inherit;color:#16202A;text-decoration:underline;text-underline-offset:3px}
.rodape-ds .rodape-cadastro .form-input-wrapper > label[for] a:hover{color:#16202A;
    text-decoration-thickness:2px}
.rodape-cadastro .form-grav button[type="submit"]{background:#16202A;color:#fff}
.rodape-cadastro .form-grav button[type="submit"]:hover{background:#2B3947;
    box-shadow:0 12px 22px -10px rgba(22,32,42,.55)}
.rodape-cadastro .form-grav button[type="submit"]:focus-visible{
    box-shadow:0 0 0 3px #fff,0 0 0 5px #16202A}

/* ---- chips de filtro (agenda) ---- */
.chip-ds{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;
    font-size:14px;line-height:1;background:rgba(22,32,42,.05);color:rgba(22,32,42,.7);
    border:none;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.chip-ds:hover{background:rgba(22,32,42,.1);color:#16202A}
.chip-ds--ativo{background:#FF6601;color:#16202A}
.chip-ds--ativo:hover{background:#FF6601;color:#16202A}

/* atalhos dos Centros de Gestão: linha própria, os cinco lado a lado.
   Quando nao cabem, a faixa rola na horizontal em vez de quebrar em duas linhas. */
.atalhos-centros{margin-top:40px;display:flex;flex-wrap:nowrap;gap:10px;
    overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:2px}
.atalhos-centros::-webkit-scrollbar{display:none}
.atalhos-centros .chip-ds{flex:0 0 auto;white-space:nowrap}
.chip-ds--atalho{background:#FF6601;color:#16202A}
.chip-ds--atalho:hover{background:#F25E00;color:#16202A}
.chip-ds--atalho:focus-visible{outline:2px solid #16202A;outline-offset:2px}

/* ---- hero: zoom lento no lugar do vídeo ---- */
.hero-zoom{transform-origin:center;animation:hero-zoom 24s ease-in-out infinite alternate}
@keyframes hero-zoom{from{transform:scale(1)}to{transform:scale(1.08)}}

/* ---- utilidades de conteúdo ---- */
.prosa-arh > * + *{margin-top:18px}
.prosa-arh a{color:#FF6601;text-decoration:underline;text-underline-offset:3px}

/* listas do texto corrido: o preflight do design system faz ul{list-style:none},
   então sem isto o markdown vira um bloco de linhas soltas, sem marcador nem
   recuo. O marcador entra em laranja, como no resto do site. */
.prosa-arh ul,.prosa-arh ol{margin:18px 0 0;padding:0;list-style:none}
.prosa-arh li{position:relative;padding-left:26px;margin-top:9px;line-height:1.6}
.prosa-arh li::before{position:absolute;left:2px;top:.62em;
    width:6px;height:6px;border-radius:50%;background:#FF6601;content:''}
.prosa-arh ol{counter-reset:item}
.prosa-arh ol li{counter-increment:item}
.prosa-arh ol li::before{top:0;left:0;width:auto;height:auto;border-radius:0;
    background:none;color:#B84A00;font-weight:600;content:counter(item) '.'}

/* subtítulos do texto corrido: sem isto os ## do markdown saíam no mesmo
   tamanho do parágrafo e não separavam nada */
.prosa-arh h2,.prosa-arh h3{font-family:var(--font-heading);font-weight:400;
    letter-spacing:-.01em;line-height:1.22;color:#16202A;text-wrap:balance}
.prosa-arh h2{font-size:clamp(1.375rem, 1.2rem + .6vw, 1.75rem)}
.prosa-arh h3{font-size:clamp(1.125rem, 1rem + .4vw, 1.3rem)}
/* respiro maior antes do subtítulo do que depois, para ele puxar o bloco
   seguinte em vez de flutuar solto entre os dois */
.prosa-arh > * + h2{margin-top:44px}
.prosa-arh > * + h3{margin-top:34px}
.prosa-arh > h2 + *,.prosa-arh > h3 + *{margin-top:12px}
/* legenda de tabela: nota de rodapé de verdade, não recado de revisão.
   Sem itálico, que era o que dava ar de aviso provisório. */
/* ── cartão de pessoa (Diretoria Executiva) ─────────────────────
   Mesma moldura quadrada dos ex-presidentes. No hover a foto puxa um
   leve zoom e a borda acende, no mesmo idioma dos outros cartões. */
.cartao-pessoa{overflow:hidden;border-radius:10px;background:#E9EDF1;
    box-shadow:inset 0 0 0 1px rgba(22,32,42,.08);
    transition:transform .3s ease,box-shadow .3s ease}
.cartao-pessoa:hover{transform:translateY(-4px);
    box-shadow:inset 0 0 0 1px rgba(255,102,1,.38),
               0 18px 30px -14px rgba(22,32,42,.22)}
/* grade da Diretoria: os seis numa fileira só a partir de 1280px, que é
   onde o cartão ainda fica com ~198px. Abaixo disso a fileira de seis
   deixaria o cartão com 150px e o nome mais longo não caberia. As variantes
   do Tailwind para seis colunas não existem na build, então a grade é
   escrita aqui. */
.grade-diretoria{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:640px){ .grade-diretoria{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .grade-diretoria{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1280px){ .grade-diretoria{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px} }

/* nome sempre em uma linha: o corpo encolhe junto com o cartão, medido em
   cqi sobre a largura do próprio cartão, com teto no tamanho original */
.cartao-pessoa{container-type:inline-size}
.cartao-pessoa__corpo{padding:20px}
.cartao-pessoa .cartao-pessoa__nome{white-space:nowrap;
    font-size:clamp(14px, 7.2cqi, 22px)}
.cartao-pessoa .cartao-pessoa__cargo{white-space:nowrap;
    font-size:clamp(9.5px, 3.6cqi, 12px);line-height:1.5}

/* na fileira de seis o cartão não comporta 'Vice-Presidente de
   Desenvolvimento' numa pílula de uma linha, então ali a pílula vira
   rótulo solto e pode quebrar. O nome continua numa linha. */
@container (max-width: 250px){
    .cartao-pessoa .cartao-pessoa__cargo{white-space:normal;display:block;
        padding:0;border-radius:0;background:transparent;
        /* #B84A00 dá 4.44:1 sobre o cinza do cartão, abaixo do AA;
           o brand-deep da paleta resolve com 6.65:1 */
        font-size:11px;font-weight:600;line-height:1.3;color:#8A3A00}
    .cartao-pessoa__corpo{padding:16px}
    .cartao-pessoa .cartao-pessoa__nome{margin-top:6px}
}

.cartao-pessoa__foto{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.cartao-pessoa:hover .cartao-pessoa__foto{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){
    .cartao-pessoa,.cartao-pessoa__foto{transition:none}
    .cartao-pessoa:hover,.cartao-pessoa:hover .cartao-pessoa__foto{transform:none}
}

/* retrato em moldura quadrada: 15% deixa a cabeça inteira dentro do quadro
   em todos os retratos de estúdio, que enquadram o rosto no terço superior */
.foto-retrato{object-position:50% 15%}

.legenda-tabela{font-size:13.5px;line-height:1.5;color:rgba(22,32,42,.5)}

/* ---- tabela de preços (Pesquisa Salarial, Credenciar) ----
   Faixa de título na cor da marca, com tinta escura porque branco sobre
   #FF6601 dá 2,9:1 e reprova. Rola dentro da caixa quando não cabe. */
.tabela-precos{margin:0}
/* duas tabelas seguidas, como na Pesquisa Salarial, precisam de ar entre elas.
   Escrito aqui porque a regra acima é sem camada e anula qualquer mt-* do
   Tailwind aplicado na figure. */
.tabela-precos + .tabela-precos{margin-top:40px}
.tabela-precos__titulo{background:#FF6601;color:#16202A;font-size:15px;font-weight:600;
    line-height:1.35;padding:11px 16px;text-align:center;border-radius:10px 10px 0 0}
.tabela-precos__rolagem{overflow-x:auto;overscroll-behavior-x:contain;background:#fff;
    border:1px solid rgba(22,32,42,.12);border-radius:0 0 10px 10px}
.tabela-precos figcaption + .tabela-precos__rolagem{border-top:none}
.tabela-precos__rolagem:focus-visible{outline:2px solid #FF6601;outline-offset:2px}
.tabela-precos table{width:100%;min-width:660px;border-collapse:collapse;font-size:15px}
.tabela-precos th,.tabela-precos td{padding:11px 16px;text-align:right;white-space:nowrap;
    border-bottom:1px solid rgba(22,32,42,.08)}
.tabela-precos thead th{background:#F6F5F2;font-size:13.5px;font-weight:600;
    color:rgba(22,32,42,.7);white-space:normal}
.tabela-precos th:first-child{text-align:left;white-space:normal;min-width:230px}
.tabela-precos tbody th{font-weight:600;color:#16202A;font-size:14.5px;line-height:1.35}
.tabela-precos tbody td{font-variant-numeric:tabular-nums;color:rgba(22,32,42,.8)}
.tabela-precos tbody tr:last-child th,.tabela-precos tbody tr:last-child td{border-bottom:none}
.tabela-precos tbody tr:nth-child(even) th,.tabela-precos tbody tr:nth-child(even) td{background:rgba(22,32,42,.02)}

/* ---- linha do tempo: marco com foto opcional ----
   A foto só aparece no marco que tem registro real da ARH daquele momento.
   Ano em #B84A00, 5,23:1 sobre o cinza claro da seção, porque o laranja
   oficial como texto ali dá 2,69:1 e reprova. */
.marco-linha{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:24px;
    padding:24px 0;border-bottom:1px solid rgba(22,32,42,.08)}
.marco-linha:last-child{border-bottom:0}
.marco-linha__ano{font-family:var(--font-heading);font-size:20px;font-weight:600;
    line-height:1.3;font-variant-numeric:tabular-nums;color:#B84A00}
.marco-linha__foto{margin:16px 0 0}
.marco-linha__foto img{display:block;width:100%;max-width:520px;border-radius:12px;
    aspect-ratio:16/9;object-fit:cover}
.marco-linha__foto figcaption{margin-top:8px;font-size:13px;line-height:1.4;
    color:rgba(22,32,42,.6)}
@media (max-width:520px){
    .marco-linha{grid-template-columns:1fr;row-gap:6px}
}

/* As seções que a seta do hero pode alvejar param exatamente sob o cabeçalho.
   A folga de 24 px da regra geral de [id] deixava uma tira do vídeo visível
   entre o cabeçalho e o cinza, e o respiro da própria seção já dá o ar. */
#destaques,#proximos-encontros,#beneficios{
    scroll-margin-top:calc(var(--news-banner-height, 0px) + var(--altura-cab) + var(--respiro-nav))}

/* =========================================================
   GALERIA BENTO · página Sobre
   Porte do InteractiveImageBentoGallery (React) para CSS puro. Duas linhas
   de blocos que correm na horizontal; cada foto ocupa 1x1, 2x1 (larga),
   1x2 (alta) ou 2x2 (grande), e o dense fecha os buracos. A faixa sai do
   container e vai até a borda da tela; o recuo, medido pelo JS, alinha a
   primeira foto com o título.
   ========================================================= */
.galeria-bento{--celula:15rem;--vao:16px;--recuo:16px}
@media (max-width:640px){ .galeria-bento{--celula:10.5rem;--vao:10px} }
.galeria-bento__janela{margin-top:44px;overflow-x:auto;overflow-y:hidden;cursor:grab;
    overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.galeria-bento__janela::-webkit-scrollbar{display:none}
.galeria-bento__janela.arrastando{cursor:grabbing}
.galeria-bento__janela.arrastando .galeria-bento__botao{cursor:grabbing}
.galeria-bento__grade{display:grid;grid-auto-flow:column dense;
    grid-template-rows:repeat(2,var(--celula));grid-auto-columns:var(--celula);
    gap:var(--vao);width:max-content;margin:0;padding:8px var(--recuo) 20px;list-style:none}
.galeria-bento__item{min-width:0}
.galeria-bento__item--larga{grid-column:span 2}
.galeria-bento__item--alta{grid-row:span 2}
.galeria-bento__item--grande{grid-column:span 2;grid-row:span 2}

.galeria-bento__botao{position:relative;display:block;width:100%;height:100%;padding:0;border:0;
    border-radius:14px;overflow:hidden;background:#ECE9E4;cursor:zoom-in;
    box-shadow:0 1px 2px rgba(22,32,42,.08);
    transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease}
.galeria-bento__botao:hover{transform:scale(1.02);box-shadow:0 20px 32px -16px rgba(22,32,42,.45)}
.galeria-bento__botao:focus-visible{outline:3px solid #FF6601;outline-offset:3px}
.galeria-bento__botao img{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center 35%;transition:transform .6s ease;
    -webkit-user-drag:none;user-select:none}
.galeria-bento__botao:hover img{transform:scale(1.06)}
.galeria-bento__veu{position:absolute;inset:0;opacity:0;transition:opacity .45s ease;
    background:linear-gradient(to top,rgba(22,32,42,.82),rgba(22,32,42,.35) 45%,rgba(22,32,42,0))}
.galeria-bento__legenda{position:absolute;left:16px;right:16px;bottom:14px;
    display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;color:#fff;
    opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}
.galeria-bento__botao:hover .galeria-bento__veu,
.galeria-bento__botao:focus-visible .galeria-bento__veu{opacity:1}
.galeria-bento__botao:hover .galeria-bento__legenda,
.galeria-bento__botao:focus-visible .galeria-bento__legenda{opacity:1;transform:none}
.galeria-bento__titulo{font-size:17px;font-weight:600;line-height:1.25}
.galeria-bento__desc{font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.88)}
.galeria-bento__ampliar{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.galeria-bento__ampliar i{font-size:13px}

/* variante faixa: uma linha de blocos 4:3, o carrossel das fotos de cada
   credenciado. */
.galeria-bento--faixa{--larg:22rem;--alt:16.5rem}
@media (max-width:640px){ .galeria-bento--faixa{--larg:16rem;--alt:12rem} }
.galeria-bento--faixa .galeria-bento__grade{grid-template-rows:var(--alt);grid-auto-columns:var(--larg)}

/* entrada escalonada com mola, só quando o JS ligou a classe */
.galeria-bento.js-anima .galeria-bento__item{opacity:0;transform:translateY(20px) scale(.95);
    transition:opacity .5s ease calc(var(--i) * 55ms),
               transform .75s cubic-bezier(.34,1.56,.64,1) calc(var(--i) * 55ms)}
.galeria-bento.js-anima.visivel .galeria-bento__item{opacity:1;transform:none}

/* ampliação: dialog nativo, que já prende o foco e fecha no Esc */
.galeria-bento__modal{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;
    margin:0;padding:0;border:0;background:transparent;overflow:hidden}
.galeria-bento__modal[open]{display:flex;align-items:center;justify-content:center}
.galeria-bento__modal::backdrop{background:rgba(22,32,42,.88);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html:has(.galeria-bento__modal[open]){overflow:hidden}
.galeria-bento__quadro{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;
    max-width:min(1100px,calc(100vw - 150px))}
.galeria-bento__quadro img{display:block;max-width:100%;max-height:calc(100vh - 120px);
    border-radius:12px;object-fit:contain;animation:galeria-entra .3s ease}
@keyframes galeria-entra{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.galeria-bento__contador{font-size:13px;color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums}
.galeria-bento__fechar,.galeria-bento__nav{position:fixed;display:inline-flex;align-items:center;
    justify-content:center;width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;
    background:rgba(255,255,255,.12);color:#fff;font-size:20px;
    transition:background-color .2s ease,color .2s ease}
.galeria-bento__fechar:hover,.galeria-bento__nav:hover{background:#FF6601;color:#16202A}
.galeria-bento__fechar:focus-visible,.galeria-bento__nav:focus-visible{outline:2px solid #fff;outline-offset:3px}
.galeria-bento__fechar{top:18px;right:18px}
.galeria-bento__nav{top:50%;transform:translateY(-50%)}
.galeria-bento__nav--ant{left:20px}
.galeria-bento__nav--prox{right:20px}
@media (max-width:640px){
    .galeria-bento__quadro{max-width:calc(100vw - 24px)}
    .galeria-bento__quadro img{max-height:calc(100vh - 170px)}
    .galeria-bento__nav{top:auto;bottom:22px;transform:none}
    .galeria-bento__nav--ant{left:calc(50% - 56px)}
    .galeria-bento__nav--prox{right:calc(50% - 56px)}
}
@media (prefers-reduced-motion: reduce){
    .galeria-bento.js-anima .galeria-bento__item{opacity:1;transform:none;transition:none}
    .galeria-bento__botao,.galeria-bento__botao img,.galeria-bento__veu,.galeria-bento__legenda{transition:none}
    .galeria-bento__botao:hover,.galeria-bento__botao:hover img{transform:none}
    .galeria-bento__quadro img{animation:none}
}

/* ---- Patrocine a ARH Serrana ---- */
.cota-aberta{display:flex;flex-direction:column;align-items:center;gap:16px;
    padding:28px 24px;border-radius:12px;border:1.5px dashed rgba(22,32,42,.28);
    background:#F6F5F2;text-align:center}
.cota-aberta__texto{margin:0;font-size:16px;line-height:1.5;color:rgba(22,32,42,.75)}
.cota-aberta__texto strong{color:#16202A;font-weight:600}
.patrocinio-eventos__texto p{margin:0;font-size:18px;line-height:1.65;color:rgba(22,32,42,.9);max-width:62ch}
.patrocinio-eventos__texto p + p{margin-top:16px}

/* ---- página do credenciado: benefício em destaque, antes do texto ---- */
.beneficio-destaque{padding:22px 24px;border-radius:14px;background:#FF6601;color:#16202A;max-width:68ch}
.beneficio-destaque__rotulo{display:inline-flex;align-items:center;gap:8px;font-size:13px;
    font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.beneficio-destaque__texto{margin:8px 0 0;font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);
    font-weight:600;line-height:1.3}
.beneficio-destaque--vazio{background:#F6F5F2;border:1px dashed rgba(22,32,42,.25)}
.beneficio-destaque--vazio .beneficio-destaque__texto{font-weight:500;color:rgba(22,32,42,.68)}

/* ---- página do evento: preços, Pix e avisos ----
   Cada faixa de preço numa linha, categoria à esquerda e valor à direita,
   com os números alinhados. Tudo em tinta sobre o painel claro. */
/* rótulos Data, Local e Investimento: a tinta 45% do DS dava 2,9:1 em texto
   de 12 px; 68% dá cerca de 5,4:1 sobre o painel claro */
.col-fixa dl dt{color:rgba(22,32,42,.68)}
.precos-evento{margin:0;padding:0;list-style:none;border-top:1px solid rgba(22,32,42,.1)}
.precos-evento li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    padding:9px 0;border-bottom:1px solid rgba(22,32,42,.1);font-size:15px;line-height:1.35}
.precos-evento span{color:rgba(22,32,42,.75)}
.precos-evento strong{font-weight:600;color:#16202A;white-space:nowrap;font-variant-numeric:tabular-nums}
.pix-evento{padding:16px;border-radius:12px;background:#F6F5F2;border:1px solid rgba(22,32,42,.1)}
.pix-evento__rotulo{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;
    text-transform:uppercase;color:rgba(22,32,42,.7)}
.pix-evento__chave{display:block;margin-top:6px;font-family:var(--font-ibm-plex-mono),monospace;
    font-size:15px;line-height:1.4;color:#16202A;word-break:break-all}
.aviso-evento{display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:10px;
    background:#F6F5F2;font-size:15px;font-weight:500;color:#16202A}
.aviso-evento i{color:#B84A00}
.link-apoio-evento{display:inline-flex;margin-top:14px;font-size:14px;color:rgba(22,32,42,.72);
    text-decoration:underline;text-underline-offset:4px}
.link-apoio-evento:hover{color:#16202A}

/* ---- faixa de banners da home ----
   Até três artes em 1080 × 210, uma por vez, trocando com fade a cada 6 s.
   As slides dividem a mesma célula do grid, então a faixa não pula de altura
   na troca. Pausa sozinha no hover e no foco, e tem botão de pausa visível
   porque conteúdo que se mexe por mais de 5 s precisa poder ser parado. */
.faixa-banners__trilho{position:relative;display:grid;border-radius:14px;overflow:hidden;
    background:#ECE9E4;box-shadow:0 18px 34px -24px rgba(22,32,42,.45)}
.faixa-banners__slide{grid-area:1/1;align-self:center;opacity:0;visibility:hidden;
    transition:opacity .7s ease,visibility 0s linear .7s}
.faixa-banners__slide.ativo{opacity:1;visibility:visible;transition:opacity .7s ease}
.faixa-banners__slide > a{display:block;outline-offset:-4px}
.faixa-banners__slide > a:focus-visible{outline:3px solid #16202A}
.faixa-banners__slide img{display:block;width:100%;height:auto;aspect-ratio:1080/210;object-fit:cover}
@media (max-width:640px){
    .faixa-banners__slide.tem-mobile img{aspect-ratio:2/1}
}
.faixa-banners__controles{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px}
.faixa-banners__pontos{display:flex;align-items:center;gap:2px}
.faixa-banners__ponto{position:relative;width:28px;height:28px;padding:0;border:0;
    background:transparent;cursor:pointer}
.faixa-banners__ponto::before{content:'';position:absolute;top:50%;left:50%;
    width:10px;height:10px;border-radius:999px;transform:translate(-50%,-50%);
    background:rgba(22,32,42,.5);transition:width .3s ease,background-color .3s ease}
/* laranja sobre o cinza dá 2,69:1; o aro de tinta leva a borda a mais de 3:1 */
.faixa-banners__ponto.ativo::before{width:26px;background:#FF6601;box-shadow:0 0 0 1.5px rgba(22,32,42,.6)}
.faixa-banners__ponto:hover::before{background:rgba(22,32,42,.75)}
.faixa-banners__ponto.ativo:hover::before{background:#FF6601}
.faixa-banners__ponto:focus-visible,.faixa-banners__pausa:focus-visible{outline:2px solid #16202A;outline-offset:2px;border-radius:6px}
.faixa-banners__pausa{display:inline-flex;align-items:center;justify-content:center;
    width:28px;height:28px;padding:0;border:0;border-radius:50%;background:transparent;
    color:rgba(22,32,42,.62);font-size:18px;cursor:pointer}
.faixa-banners__pausa:hover{color:#16202A}
@media (prefers-reduced-motion: reduce){
    .faixa-banners__slide,.faixa-banners__slide.ativo{transition:none}
}

/* ---- barra da agenda: seletor de vista à esquerda, filtros à direita ---- */
.barra-agenda{display:flex;flex-direction:column;gap:18px;
    padding-bottom:18px;border-bottom:1px solid rgba(22,32,42,.12)}
@media (min-width:900px){
    .barra-agenda{flex-direction:row;align-items:center;justify-content:space-between;gap:24px}
}
.seletor-vista{display:inline-flex;flex:0 0 auto;padding:4px;border-radius:999px;
    background:rgba(22,32,42,.06)}
.vista-ds{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;
    border:none;border-radius:999px;background:transparent;cursor:pointer;
    font-size:14.5px;font-weight:500;color:rgba(22,32,42,.7);
    transition:background-color .2s ease,color .2s ease}
.vista-ds i{font-size:15px;line-height:1}
.vista-ds:hover{color:#16202A}
.vista-ds--ativa,.vista-ds--ativa:hover{background:#FF6601;color:#16202A}
.vista-ds:focus-visible{outline:2px solid #16202A;outline-offset:2px}

/* ---- calendário do ano: um bloco por mês, cada evento leva à página dele ---- */
.calendario-ano{display:grid;grid-template-columns:1fr;gap:32px}
@media (min-width:768px){ .calendario-ano{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 40px} }
@media (min-width:1180px){ .calendario-ano{grid-template-columns:repeat(3,minmax(0,1fr))} }
.mes-ano__nome{margin:0;font-size:13px;font-weight:600;text-transform:uppercase;
    letter-spacing:.1em;color:#8A3A00}
.mes-ano__lista{margin:12px 0 0;padding:0;list-style:none;
    border-top:1px solid rgba(22,32,42,.12)}
.mes-ano__item{border-bottom:1px solid rgba(22,32,42,.10)}
.mes-ano__item > a{display:flex;align-items:flex-start;gap:14px;padding:13px 4px;
    text-decoration:none;color:inherit;border-radius:8px;
    transition:background-color .2s ease}
.mes-ano__item > a:hover{background:rgba(255,102,1,.09)}
.mes-ano__item > a:focus-visible{outline:2px solid #FF6601;outline-offset:2px}
.mes-ano__dia{flex:0 0 auto;width:30px;font-family:var(--font-heading);font-size:20px;
    line-height:1.15;font-variant-numeric:tabular-nums;color:#8A3A00}
.mes-ano__txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.mes-ano__titulo{font-size:15.5px;font-weight:600;line-height:1.3;color:#16202A}
.mes-ano__extra{font-size:12.5px;line-height:1.3;color:rgba(22,32,42,.62)}
.mes-ano__item--passado .mes-ano__dia{color:rgba(22,32,42,.4)}
.mes-ano__item--passado .mes-ano__titulo{color:rgba(22,32,42,.62);font-weight:500}

/* ---- abas da agenda ----
   Duas abas, o que vem e o que já passou. Tinta escura sobre o laranja da
   marca porque branco ali dá 2,9:1 e reprova. */
.abas-ds{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid rgba(22,32,42,.12);
    padding-bottom:14px}
.aba-ds{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 20px;
    border:1px solid rgba(22,32,42,.14);border-radius:999px;background:transparent;
    font-size:15.5px;font-weight:500;color:rgba(22,32,42,.7);cursor:pointer;
    transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.aba-ds:hover{background:rgba(22,32,42,.05);color:#16202A}
.aba-ds--ativa,.aba-ds--ativa:hover{background:#FF6601;border-color:#FF6601;color:#16202A}
.aba-ds__num{display:inline-flex;align-items:center;justify-content:center;min-width:22px;
    height:22px;padding:0 6px;border-radius:999px;background:rgba(22,32,42,.10);
    font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.aba-ds--ativa .aba-ds__num{background:rgba(22,32,42,.18)}
.aba-ds:focus-visible{outline:2px solid #16202A;outline-offset:2px}
/* nas telas estreitas as duas abas só cabem lado a lado com menos respiro */
@media (max-width:420px){
    .abas-ds{gap:6px}
    .aba-ds{height:42px;padding:0 14px;font-size:14.5px;gap:7px}
}

/* ---- mosaico dos próximos: o primeiro cartão ocupa duas colunas e vira
   deitado, foto à esquerda e texto à direita, para o próximo encontro ter
   peso diferente do resto da grade. */
.mosaico-agenda{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:768px){ .mosaico-agenda{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){
    .mosaico-agenda{grid-template-columns:repeat(3,minmax(0,1fr))}
    .mosaico-agenda > .cartao-post:first-child{grid-column:span 2;flex-direction:row}
    .mosaico-agenda > .cartao-post:first-child .cartao-post__foto{width:50%;aspect-ratio:auto;align-self:stretch}
    .mosaico-agenda > .cartao-post:first-child .cartao-post__corpo{padding:32px;justify-content:center}
    .mosaico-agenda > .cartao-post:first-child .cartao-post__titulo{font-size:24px}
    /* no destaque o conteúdo fica centrado, então o link não precisa ser
       empurrado para o fim e não sobra um vão no meio do cartão */
    .mosaico-agenda > .cartao-post:first-child .cartao-post__link{margin-top:22px}
}

/* calendário do Grupo de Estudos: duas colunas que se leem de cima para baixo.
   grid-auto-flow column com linhas explícitas, para as duas colunas ficarem
   alinhadas entre si, coisa que column-count não garante. */
.calendario-colunas{display:grid;grid-template-columns:1fr}
@media (min-width:768px){
    .calendario-colunas{grid-auto-flow:column;
        grid-template-rows:repeat(var(--linhas,4),auto);
        grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px}
}

/* calendário anual: coluna de data com largura fixa para os títulos alinharem.
   Escrito aqui porque w-[62px] não existe no build do design system. */
.cal-anual__data{flex:0 0 auto;width:68px}

/* aviso de pré-requisito: recado curto que precisa ser lido antes do resto */
.aviso-requisito{display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding:16px 18px;
    border-radius:10px;background:#F6F5F2;border:1px solid rgba(22,32,42,.10);
    border-left:3px solid #FF6601;
    font-size:15.5px;line-height:1.5;color:#16202A}
.aviso-requisito i{color:#B84A00;font-size:17px;line-height:1.4;flex:0 0 auto}

/* faixa de parceira: logo do parceiro ao lado do texto, empilha no mobile */
.faixa-parceiro{display:flex;flex-direction:column;align-items:flex-start;gap:28px;
    padding:32px;border-radius:10px;background:#F6F5F2;border:1px solid rgba(22,32,42,.1)}
.faixa-parceiro__logo{width:230px;height:auto;flex:0 0 auto}
@media (min-width:768px){
    .faixa-parceiro{flex-direction:row;align-items:center;justify-content:space-between;gap:48px;padding:36px 40px}
    .faixa-parceiro__logo{width:270px}
}
.bg-black .legenda-tabela,.text-white .legenda-tabela{color:rgba(255,255,255,.55)}

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

/* ---- células de patrocinador: largura fixa para não esticar quando o nível
       tem uma empresa só (utilitário arbitrário do Tailwind não está na build) ---- */

@media (max-width:520px){}

/* =========================================================
   HERO ANIMADO — tradução do componente AnimatedHero (React)
   Tela cheia · véu preto 60% · entrada escalonada · botões de vidro
   ========================================================= */
.hero-animado{position:relative;display:flex;flex-direction:column;align-items:center;
    justify-content:center;overflow:hidden;width:100%;
    min-height:100svh;background:#16202A;
    /* compensa a faixa de aviso + cabeçalho fixos para centrar oticamente */
    padding-top:calc(60px + 48px);padding-bottom:48px}
.hero-animado__fundo{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
    animation:hero-animado-zoom 26s ease-in-out infinite alternate}
/* com vídeo no ar, o zoom da foto para: quem se move é o vídeo */
.hero-animado__fundo:has(.hero-animado__video.tocando){animation:none}
.hero-animado__video{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center;
    opacity:0;transition:opacity .8s ease}
.hero-animado__video.tocando{opacity:1}
/* véu do hero: escurecimento geral + reforço à esquerda, onde fica o texto,
   para a foto poder ter elementos claros sem comprometer a leitura */
/* véu quente, igual ao dos cabeçalhos internos: o vídeo do hero agora é
   registro da própria ARH, quente e noturno, e o véu azulado anterior
   acinzentava a cena. A opacidade de 82% na coluna do texto continua, e
   sobre ela até um pixel branco do vídeo entrega 11,9:1 no título. */
.hero-animado__veu{position:absolute;inset:0;
    background:linear-gradient(90deg, rgba(20,13,8,.82) 0%, rgba(20,13,8,.60) 42%, rgba(20,13,8,.38) 100%),
               linear-gradient(180deg, rgba(20,13,8,.58) 0%, rgba(20,13,8,.28) 45%, rgba(20,13,8,.62) 100%)}
@media (max-width:640px){
  .hero-animado__veu{background:linear-gradient(180deg, rgba(20,13,8,.74) 0%, rgba(20,13,8,.62) 45%, rgba(20,13,8,.80) 100%)}
}
@keyframes hero-animado-zoom{from{transform:scale(1)}to{transform:scale(1.07)}}

.hero-animado__conteudo{display:flex;flex-direction:column;
    align-items:flex-start;justify-content:center;text-align:left;color:#fff}

/* entrada escalonada: 0.2s de atraso + 0.15s entre itens, 0.6s cada */
.hero-animado__item{opacity:0;transform:translateY(20px);
    animation:hero-animado-entra .6s cubic-bezier(0,0,.2,1) forwards}
.hero-animado__item:nth-child(1){animation-delay:.20s}
.hero-animado__item:nth-child(2){animation-delay:.35s}
.hero-animado__item:nth-child(3){animation-delay:.50s}
.hero-animado__item:nth-child(4){animation-delay:.65s}
@keyframes hero-animado-entra{to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .hero-animado__item{opacity:1;transform:none;animation:none}
  .hero-animado__fundo{animation:none}
}

.hero-animado__eyebrow{margin:0}
/* a quebra do título vem do markup (<br>); nada de max-width para não re-quebrar */
.hero-animado__titulo{font-family:var(--font-heading);font-weight:400;letter-spacing:-.03em;
    line-height:1.06;color:#fff;margin:20px 0 0;
    font-size:clamp(2.25rem,1.4rem + 3.6vw,4.5rem)}
.hero-animado__descricao{margin-top:32px;max-width:38rem;font-size:1.125rem;line-height:1.85;
    color:rgba(255,255,255,.8);text-wrap:balance}
.hero-animado__acoes{margin-top:54px;display:flex;flex-wrap:wrap;align-items:center;gap:1rem}

/* O bloco antigo do botão de vidro vivia aqui e sobrescrevia o novo, logo
   acima: sem `position`, as setas absolutas passavam a se posicionar por
   outro ancestral e colavam no texto; a animação flow também morria. */

/* =========================================================
   INDICADOR DE ROLAGEM
   Seta no rodapé do hero, centrada, com um pulso suave para convidar
   ao scroll. É um link real para a próxima seção, então funciona no
   teclado e sem JS. Some para quem pediu menos movimento e em telas
   baixas, onde tomaria espaço do conteúdo.
   ========================================================= */
/* A ARH achou a seta discreta demais. Agora é um disco no laranja da marca,
   com o chevron em tinta (5,61:1), um quique mais amplo e uma onda que se
   abre em volta a cada ciclo. Leva à seção logo abaixo do hero, que hoje é
   a faixa de banners; antes apontava para os benefícios e pulava a agenda. */
.hero-rolagem{position:absolute;left:50%;bottom:30px;z-index:12;
    transform:translateX(-50%);
    display:flex;align-items:center;justify-content:center;
    width:56px;height:56px;border-radius:50%;border:0;
    background:#FF6601;color:#16202A;font-size:24px;line-height:1;text-decoration:none;
    box-shadow:0 12px 26px -10px rgba(0,0,0,.55);
    animation:hero-rolagem-pulso 1.8s ease-in-out infinite;
    transition:background-color .2s ease,color .2s ease}
.hero-rolagem i{position:relative;top:1px;-webkit-text-stroke:1px currentColor}
.hero-rolagem::after{content:'';position:absolute;inset:0;border-radius:50%;
    border:2px solid #FF6601;pointer-events:none;
    animation:hero-rolagem-onda 1.8s ease-out infinite}
.hero-rolagem:hover{background:#16202A;color:#FF6601}
.hero-rolagem:focus-visible{outline:2px solid #fff;outline-offset:4px}
@keyframes hero-rolagem-pulso{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%    {transform:translateX(-50%) translateY(10px)}
}
@keyframes hero-rolagem-onda{
  0%  {transform:scale(1);opacity:.75}
  100%{transform:scale(1.75);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .hero-rolagem,.hero-rolagem::after{animation:none}
}
@media (max-height:640px){ .hero-rolagem{display:none} }

@media (max-width:640px){
  .hero-animado{min-height:auto;padding-top:150px;padding-bottom:72px}
  .hero-rolagem{display:none}
  .hero-animado__titulo{margin-top:22px}
  .hero-animado__descricao{margin-top:22px;font-size:1rem;line-height:1.7}
  .hero-animado__acoes{margin-top:36px}
  .hero-animado__acoes .btn-vidro{flex:1 1 100%}
}

/* =========================================================
   SELO DE SEÇÃO — substitui a antiga bolinha + eyebrow.
   Pastilha de cantos arredondados, sem ícone, nas cores da ARH.
   ========================================================= */
.selo-arh{display:inline-flex;align-items:center;justify-content:center;
    min-height:35px;padding:0 16px;border-radius:12px;
    font-family:var(--font-sans);font-size:14px;font-weight:600;line-height:1.2;
    letter-spacing:.01em;text-transform:none;margin:0;
    background:#FF6601;color:#16202A}
/* sobre faixa escura */
.selo-arh--escuro{background:rgba(255,102,1,.16);color:#FFA35C}

/* ── etiqueta: 20px até o título abaixo, no site inteiro ─────────
   O vão vinha de cinco lugares diferentes: gap de 16px (33 usos com
   título H2 e 16 nos topos de página), gap de 12px, gap de 20px, e seis
   casos com mb-3 no markup que valia zero, porque o margin:0 do .selo-arh
   está fora de @layer e vence as utilitárias. Cada caso é completado aqui
   para o mesmo total. A etiqueta que fica em linha ao lado da data, na
   notícia, não entra: ali não há título abaixo. */
.gap-y-4 > .selo-arh,
.gap-4 > .selo-arh{margin-bottom:4px}
.gap-y-3 > .selo-arh{margin-bottom:8px}
.gap-y-5 > .selo-arh{margin-bottom:0}
.selo-arh.mb-3{margin-bottom:20px}
/* sobre cartão cinza claro, para não sumir no fundo */
.selo-arh--neutro{background:rgba(22,32,42,.06);color:#2C3B49}

/* fita de destaque sobre a borda do cartão de plano.
   Classe própria porque a utilidade -top-3 não existe no CSS compilado do DS. */
.selo-destaque{position:absolute;top:-13px;left:32px;display:inline-flex;align-items:center;
    height:26px;padding:0 12px;border-radius:999px;font-size:12px;line-height:1;
    background:#FF6601;color:#16202A}

/* =========================================================
   COLUNAS DE RECURSO — tradução do FeaturesSectionWithHoverEffects
   Colunas separadas por borda em vez de cartões, barra de destaque à
   esquerda do título que cresce e assume o laranja no hover, título que
   desliza e véu que sobe do rodapé da coluna. Cores da ARH no lugar do
   neutral/blue do original.
   ========================================================= */
.recursos{position:relative;z-index:10;display:grid;grid-template-columns:1fr}
@media (min-width:768px){ .recursos{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .recursos{grid-template-columns:repeat(3,1fr)} }

.recurso{position:relative;display:flex;flex-direction:column;padding:40px 0;overflow:hidden}
@media (min-width:1024px){
  .recurso{border-right:1px solid rgba(22,32,42,.12)}
  .recurso:first-child{border-left:1px solid rgba(22,32,42,.12)}
}
@media (max-width:1023.98px){
  .recurso + .recurso{border-top:1px solid rgba(22,32,42,.12)}
}
.recurso__veu{position:absolute;inset:0;pointer-events:none;opacity:0;
    transition:opacity .2s ease;
    background:linear-gradient(to top, rgba(22,32,42,.07), transparent)}
.recurso:hover .recurso__veu{opacity:1}

.recurso__icone{position:relative;z-index:10;padding:0 40px;margin-bottom:16px;
    font-size:26px;line-height:1;color:rgba(22,32,42,.5);transition:color .2s ease}
.recurso:hover .recurso__icone{color:#FF6601}

.recurso__titulo{position:relative;z-index:10;padding:0 40px;margin:0 0 10px;
    font-size:18px;font-weight:600;line-height:1.35;color:#16202A}
.recurso__barra{position:absolute;left:0;top:50%;width:4px;height:24px;
    transform:translateY(-50%);border-radius:0 999px 999px 0;
    background:rgba(22,32,42,.18);
    transition:height .2s ease,background-color .2s ease}
.recurso:hover .recurso__barra{height:32px;background:#FF6601}
.recurso__txt{display:inline-block;transition:transform .2s ease}
.recurso:hover .recurso__txt{transform:translateX(8px)}

.recurso__desc{position:relative;z-index:10;padding:0 40px;margin:0;
    font-size:14px;line-height:1.6;color:rgba(22,32,42,.65)}

@media (max-width:640px){
  .recurso{padding:28px 0}
  .recurso__icone,.recurso__titulo,.recurso__desc{padding-inline:24px}
}

/* =========================================================
   CARTÃO DE RECURSO — tradução do modern-feature-grid
   Cantos de 16px, borda fina, fundo translúcido sobre a seção, sombra
   suave e o ícone numa caixa de 48px com contorno. No hover o cartão
   sobe 4px com fundo branco sólido (mesma gramática do .cartao-norte) e a
   caixa do ícone inverte para o laranja cheio. Nada de scale: ele borrava
   o texto e empurrava o vizinho. O fundo do hover é sempre sólido porque o
   translúcido antigo vencia o branco do .bg-marca e o cartão sumia no
   laranja. O "Saiba mais" fica colado na base com margin-top:auto, para os
   três alinharem mesmo com textos de tamanhos diferentes.
   ========================================================= */
.cartao-recurso{display:flex;flex-direction:column;align-items:flex-start;gap:16px;
    height:100%;padding:24px;border-radius:16px;
    border:1px solid rgba(22,32,42,.10);background:rgba(22,32,42,.04);
    box-shadow:0 10px 15px -3px rgba(22,32,42,.07), 0 4px 6px -4px rgba(22,32,42,.05);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    transition:transform .35s cubic-bezier(.22,1,.36,1),background-color .3s ease,
               border-color .3s ease,box-shadow .35s ease}
.cartao-recurso:hover{transform:translateY(-4px);background:#fff;
    border-color:rgba(255,102,1,.38);
    box-shadow:0 18px 30px -14px rgba(22,32,42,.22)}

.cartao-recurso__icone{display:flex;align-items:center;justify-content:center;
    width:48px;height:48px;border-radius:8px;flex-shrink:0;
    border:1px solid rgba(22,32,42,.10);background:#fff;
    color:#FF6601;font-size:24px;line-height:1;
    transition:background-color .3s ease,color .3s ease,
               border-color .3s ease,transform .3s ease}
/* ícone escuro sobre o laranja (5,6:1); o branco ficaria abaixo de 3:1 */
.cartao-recurso:hover .cartao-recurso__icone{background:#FF6601;border-color:#FF6601;
    color:#16202A;transform:translateY(-2px) rotate(-6deg)}

.cartao-recurso__corpo{display:flex;flex-direction:column}
.cartao-recurso__titulo{margin:0;font-size:18px;font-weight:700;line-height:1.15;
    letter-spacing:-.01em;color:#16202A}
.cartao-recurso__desc{margin:8px 0 0;font-size:14px;line-height:1.6;color:rgba(22,32,42,.65)}

.cartao-recurso__link,.cartao-post__link{margin-top:auto;display:inline-flex;align-items:center;
    gap:8px;font-size:15px;font-weight:500;color:#16202A;text-decoration:none;
    transition:color .2s ease,gap .2s ease}
.cartao-recurso:hover .cartao-recurso__link,
.cartao-post:hover .cartao-post__link{color:#B84A00;gap:12px}

@media (prefers-reduced-motion: reduce){
  .cartao-recurso,.cartao-recurso__icone,.cartao-recurso__link{transition:none}
  .cartao-recurso:hover,.cartao-recurso:hover .cartao-recurso__icone{transform:none}
}

/* =========================================================
   CARTÃO DE POST — eventos e notícias na mesma linguagem do
   cartão de recurso: raio de 16px, borda fina, fundo translúcido,
   sombra suave e o mesmo crescimento no hover. O link de ação fica
   colado na base para alinhar entre cartões de textos desiguais.
   ========================================================= */
.cartao-post{position:relative;display:flex;flex-direction:column;overflow:hidden;
    height:100%;border-radius:16px;border:1px solid rgba(22,32,42,.10);
    background:rgba(22,32,42,.04);text-decoration:none;
    box-shadow:0 10px 15px -3px rgba(22,32,42,.07), 0 4px 6px -4px rgba(22,32,42,.05);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    transition:transform .3s ease,background-color .3s ease,
               border-color .3s ease,box-shadow .3s ease}
.cartao-post:hover{transform:scale(1.04);background:rgba(22,32,42,.07);
    border-color:rgba(255,102,1,.35);
    box-shadow:0 18px 28px -8px rgba(22,32,42,.14)}

.cartao-post__foto{position:relative;width:100%;flex-shrink:0;overflow:hidden;
    aspect-ratio:345/220;background:rgba(22,32,42,.08)}
.cartao-post__foto img{width:100%;height:100%;object-fit:cover;object-position:center;
    transition:transform .5s ease}
.cartao-post:hover .cartao-post__foto img{transform:scale(1.06)}

/* selo de data sobre a foto: tom claro da paleta, não o laranja cheio */
.cartao-post__data{position:absolute;top:16px;left:16px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;padding:8px 12px;border-radius:12px;
    background:#FF6601;color:#16202A;line-height:1;
    box-shadow:0 2px 10px rgba(22,32,42,.20)}
.cartao-post__data b{font-family:var(--font-heading);font-weight:600;font-size:22px;
    line-height:1;font-variant-numeric:tabular-nums;color:#16202A}
.cartao-post__data span{margin-top:4px;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
/* variante com o ano junto do mês: precisa de um pouco mais de respiro
   lateral e de tabular-nums para o ano não dançar entre um cartão e outro */
.cartao-post__data--ano{padding:9px 14px}
.cartao-post__data--ano span{font-variant-numeric:tabular-nums;white-space:nowrap}
/* variante de uma linha, para o evento cujo dia ainda não foi fechado:
   sem o número grande, a etiqueta vira uma faixa de texto e continua
   ocupando o mesmo canto do cartão. */
.cartao-post__data--texto{flex-direction:row;padding:9px 13px;max-width:calc(100% - 32px)}
.cartao-post__data--texto span{margin-top:0;font-size:12px;font-weight:600;
    line-height:1.25;text-align:center;text-transform:none;letter-spacing:.01em;
    white-space:nowrap}
.cartao-post__etiqueta{position:absolute;top:16px;right:16px;padding:5px 10px;border-radius:999px;
    background:rgba(255,255,255,.94);color:#16202A;font-size:12px;font-weight:600;line-height:1}

.cartao-post__corpo{display:flex;flex:1;flex-direction:column;padding:24px}
/* hora e local: uma linha cada, sem fundo, só ícone e texto */
/* ficha do evento, abaixo do título: data, horário e local com ícone.
   Contraste medido sobre o fundo real do cartão, #EDECEA: a data em #8A3A00
   dá 6,62:1 e o texto em tinta 70% dá 5,65:1. Os valores antigos, tinta 62%
   e ícone #B84A00, ficavam em 4,37:1 e 4,43:1 e reprovavam. */
.cartao-post__ficha{display:flex;flex-direction:column;gap:7px;margin:12px 0 0;padding:0;list-style:none}
.cartao-post__ficha + .cartao-post__resumo{margin-top:14px}
.cartao-post__ficha li{display:flex;align-items:flex-start;gap:9px;
    font-size:13.5px;line-height:1.4;color:rgba(22,32,42,.7)}
.cartao-post__ficha i{font-size:15px;line-height:1.3;color:#8A3A00;flex-shrink:0}
.cartao-post__ficha-data{font-weight:600;color:#8A3A00 !important}
.cartao-post__ficha-data i{color:#8A3A00}

/* selo de evento já realizado, no canto da foto */
.cartao-post__selo{position:absolute;top:16px;left:16px;padding:5px 10px;border-radius:999px;
    background:rgba(22,32,42,.86);color:#fff;font-size:11.5px;font-weight:600;
    text-transform:uppercase;letter-spacing:.06em;line-height:1}
.cartao-post--passado .cartao-post__foto img{filter:saturate(.55)}
.cartao-post--passado:hover .cartao-post__foto img{filter:saturate(1)}

.cartao-post__info{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.cartao-post__info span{display:inline-flex;align-items:center;gap:8px;
    font-size:13px;line-height:1.35;color:rgba(22,32,42,.62)}
.cartao-post__info i{font-size:15px;line-height:1;color:#B84A00;flex-shrink:0}
.cartao-post__meta{display:inline-flex;align-items:center;gap:6px;
    font-size:12px;color:rgba(22,32,42,.55);margin-bottom:8px}
.cartao-post__titulo{margin:0;font-size:18px;font-weight:700;line-height:1.25;
    letter-spacing:-.01em;color:#16202A;text-wrap:balance}
.cartao-post__resumo{margin:8px 0 0;font-size:14px;line-height:1.6;color:rgba(22,32,42,.65)}
/* mesma regra do "Saiba mais" do cartão de recurso, para o efeito ser idêntico */
.cartao-post__link{padding-top:20px}

@media (prefers-reduced-motion: reduce){
  .cartao-post,.cartao-post__foto img,.cartao-post__link{transition:none}
  .cartao-post:hover{transform:none}
  .cartao-post:hover .cartao-post__foto img{transform:none}
}

/* painel estático: mesma superfície do cartão de post, sem o hover —
   usado nos blocos do post de evento (imagem, citação, barra lateral) */
.painel-arh{border-radius:16px;border:1px solid rgba(22,32,42,.10);
    background:rgba(22,32,42,.04);overflow:hidden;
    box-shadow:0 10px 15px -3px rgba(22,32,42,.07), 0 4px 6px -4px rgba(22,32,42,.05)}
.painel-arh--claro{background:#fff}
/* arte vertical do evento (save the date, cartaz): entra inteira, centrada no
   painel, porque o recorte horizontal da foto cortava a data e o local */
.foto-evento--vertical{display:flex;justify-content:center;padding:28px}
.foto-evento--vertical img{display:block;width:100%;max-width:420px;height:auto;
    border-radius:10px;box-shadow:0 18px 30px -18px rgba(22,32,42,.45)}

/* =========================================================
   ATALHO COM MALHA — tradução do GridCard
   Cartão vertical, no arranjo do componente original: ícone no topo e
   o bloco de texto embaixo, separados por justify-content:space-between.
   Duas camadas decorativas sob o conteúdo: a malha em SVG, inclinada e
   mascarada na diagonal, e um brilho cônico desfocado. As duas só se
   movem no hover. O gradiente cônico usa a paleta da ARH no lugar do
   rosa/roxo/azul do componente original.
   ========================================================= */
.atalho-grid{position:relative;isolation:isolate;z-index:0;display:flex;
    flex-direction:column;justify-content:space-between;gap:14px;
    overflow:hidden;border-radius:16px;padding:18px 20px;
    border:1px solid rgba(22,32,42,.10);background:#fff;text-decoration:none;
    transition:border-color .2s ease,box-shadow .2s ease}
/* sem proporção fixa: a altura é a do conteúdo, e a grade iguala os
   quatro cartões entre si. Uma razão fixa aqui obrigaria a sobra de
   espaço vazio ou o estouro do texto quando a coluna mudasse. */
.atalho-grid:hover{border-color:rgba(255,102,1,.35);
    box-shadow:0 12px 22px -10px rgba(22,32,42,.16)}
.atalho-grid:focus-visible{outline:2px solid #FF6601;outline-offset:3px}

.atalho-grid__fundo{position:absolute;inset:-25%;z-index:-1;pointer-events:none;
    transform:skewY(-12deg);
    -webkit-mask-image:linear-gradient(225deg,#000,transparent);
            mask-image:linear-gradient(225deg,#000,transparent)}
.atalho-grid__malha{position:absolute;inset:0;width:100%;height:100%;
    fill:rgba(22,32,42,.05);stroke:rgba(22,32,42,.11);
    transform:translateY(8px);transition:transform .15s ease-out}
.atalho-grid:hover .atalho-grid__malha{transform:translateY(0)}

.atalho-grid__brilho{position:absolute;inset:-10%;z-index:-1;pointer-events:none;
    opacity:0;filter:blur(50px);transition:opacity .15s ease;
    background:conic-gradient(#FF6601 0deg,#FF6601 117deg,#B84A00 180deg,#FFA35C 240deg,#FF6601 360deg)}
.atalho-grid:hover .atalho-grid__brilho{opacity:.16}

/* ícone no topo, na mesma caixa dos cartões de recurso */
.atalho-grid__icone{position:relative;display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;flex-shrink:0;align-self:flex-start;border-radius:8px;
    border:1px solid rgba(22,32,42,.12);background:#FF6601;
    color:#16202A;font-size:19px;line-height:1}

.atalho-grid__base{position:relative;display:flex;flex-direction:column;gap:6px}
.atalho-grid__linha{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.atalho-grid__rotulo{font-size:17px;font-weight:600;line-height:1.3;
    letter-spacing:-.01em;color:#16202A;text-wrap:balance}
.atalho-grid__seta{flex-shrink:0;margin-top:2px;color:#16202A;transition:transform .3s ease}
.atalho-grid:hover .atalho-grid__seta{transform:translateX(4px)}
.atalho-grid__desc{font-size:13.5px;line-height:1.55;color:rgba(22,32,42,.6)}

@media (prefers-reduced-motion: reduce){
  .atalho-grid,.atalho-grid__malha,.atalho-grid__brilho,.atalho-grid__seta{transition:none}
  .atalho-grid:hover .atalho-grid__malha,.atalho-grid:hover .atalho-grid__seta{transform:none}
}

/* célula de logo de patrocinador: caixa de altura fixa para todos os logos
   ficarem no mesmo peso visual, independente da proporção do arquivo */
.celula-patrocinador{flex:0 1 190px;display:flex;align-items:center;justify-content:center;
    min-height:96px;padding:18px 22px;border-radius:12px;background:#fff;
    border:1px solid rgba(22,32,42,.10);
    transition:border-color .2s ease,box-shadow .2s ease}
.celula-patrocinador:hover{border-color:rgba(255,102,1,.3);
    box-shadow:0 10px 18px -10px rgba(22,32,42,.16)}
.celula-patrocinador img{max-width:100%;max-height:52px;width:auto;height:auto;display:block}
.celula-patrocinador__nome{font-size:15px;font-weight:500;color:rgba(22,32,42,.55);text-align:center}

/* =========================================================
   PILARES, tradução do HowItWorksBlock
   Três cartões lado a lado: número em pastilha no canto superior
   direito, ícone numa caixa quadrada de 48px com contorno, título e
   descrição. Cantos e cores da ARH no lugar dos tokens do shadcn.
   ========================================================= */
.pilar{position:relative;display:flex;flex-direction:column;padding:24px;
    border-radius:12px;border:1px solid rgba(22,32,42,.12);background:#fff;
    box-shadow:0 1px 2px rgba(22,32,42,.06);
    transition:border-color .2s ease,box-shadow .2s ease}
.pilar:hover{border-color:rgba(255,102,1,.32);
    box-shadow:0 12px 22px -12px rgba(22,32,42,.18)}

.pilar__num{position:absolute;top:24px;right:24px;
    display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;
    background:rgba(22,32,42,.06);color:rgba(22,32,42,.62);
    font-family:var(--font-mono, ui-monospace, monospace);
    font-size:12px;font-weight:600;line-height:1.5;font-variant-numeric:tabular-nums}

/* caixa quadrada, como no componente: sem raio, só contorno e fundo suave */
.pilar__icone{display:flex;align-items:center;justify-content:center;
    width:48px;height:48px;flex-shrink:0;
    border:1px solid rgba(22,32,42,.12);background:rgba(22,32,42,.04);
    color:#FF6601;font-size:20px;line-height:1}

.pilar__titulo{margin:20px 0 0;font-size:16px;font-weight:600;line-height:1.35;
    color:#16202A}
.pilar__desc{margin:8px 0 0;font-size:14px;line-height:1.6;color:rgba(22,32,42,.65)}

/* ── variante squad ─────────────────────────────────────────────
   Mesmo cartão numerado dos pilares, com o ícone respondendo ao hover
   como nos demais cartões do site e o link colado no rodapé, para os
   seis fecharem na mesma altura mesmo quando só um deles tem destino. */
.pilar--squad{display:flex;flex-direction:column;height:100%;
    text-decoration:none;color:inherit;
    /* o pêssego saiu: o laranja da ARH é um só, e agora vive no ícone.
       O cartão fica branco e ganha contorno na cor da marca no hover. */
    background:#fff;border-color:rgba(22,32,42,.10);
    transition:transform .3s ease,background-color .3s ease,
               border-color .3s ease,box-shadow .3s ease}
.pilar--squad:hover{transform:translateY(-4px);background:#fff;
    border-color:rgba(255,102,1,.40);
    box-shadow:0 18px 30px -14px rgba(22,32,42,.20)}

.pilar--squad .pilar__icone{border-radius:10px;
    background:#FF6601;border-color:#FF6601;color:#16202A;
    transition:background-color .3s ease,color .3s ease,
               border-color .3s ease,transform .3s ease}
.pilar--squad:hover .pilar__icone{background:#16202A;
    border-color:#16202A;color:#FF6601;
    transform:translateY(-2px) rotate(-6deg)}

/* o número precisa clarear junto: o cinza translúcido some no pêssego */
.pilar--squad .pilar__num{background:rgba(22,32,42,.06);color:rgba(22,32,42,.7)}
.pilar--squad:hover .pilar__num{background:rgba(22,32,42,.06)}
.pilar__link{margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;
    gap:8px;font-size:14px;font-weight:500;color:#16202A;
    transition:color .2s ease,gap .2s ease}
.pilar--squad:hover .pilar__link{color:#B84A00;gap:12px}

@media (prefers-reduced-motion:reduce){
    .pilar--squad,.pilar--squad .pilar__icone,.pilar--squad .pilar__num,
    .pilar__link{transition:none}
    .pilar--squad:hover,.pilar--squad:hover .pilar__icone{transform:none}
}

/* ── missão, visão e valores (Sobre) ────────────────────────────
   Mesma gramática dos cartões .pilar e .cartao-recurso: caixa de ícone de
   48px, título de 18px, descritivo de 14px. Os três têm cinco linhas de
   lista no rodapé, então fecham na mesma altura sem vão de branco. A barra
   corre da esquerda para a direita, o halo acende atrás do ícone e a caixa
   do ícone inverte para o laranja cheio. */
.cartao-norte{position:relative;display:flex;flex-direction:column;
    height:100%;padding:28px;overflow:hidden;
    border-radius:12px;border:1px solid rgba(22,32,42,.12);background:#fff;
    box-shadow:0 1px 2px rgba(22,32,42,.06);
    transition:transform .3s ease,border-color .3s ease,
               box-shadow .3s ease,background-color .3s ease}
.cartao-norte:hover{transform:translateY(-4px);
    border-color:rgba(255,102,1,.38);background:#FFFBF8;
    box-shadow:0 18px 30px -14px rgba(22,32,42,.22)}

.cartao-norte__barra{position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,#FF6601,#FFA35C);
    transform:scaleX(0);transform-origin:left;
    transition:transform .45s cubic-bezier(.22,1,.36,1)}
.cartao-norte:hover .cartao-norte__barra{transform:scaleX(1)}

.cartao-norte__brilho{position:absolute;top:-70px;left:-70px;
    width:220px;height:220px;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,rgba(255,102,1,.16),transparent 65%);
    opacity:0;transition:opacity .4s ease}
.cartao-norte:hover .cartao-norte__brilho{opacity:1}

.cartao-norte__icone{position:relative;display:flex;align-items:center;
    justify-content:center;width:48px;height:48px;flex-shrink:0;border-radius:10px;
    border:1px solid rgba(22,32,42,.12);background:#FF6601;
    color:#16202A;font-size:22px;line-height:1;
    transition:background-color .3s ease,color .3s ease,
               border-color .3s ease,transform .3s ease}
.cartao-norte:hover .cartao-norte__icone{background:#FF6601;border-color:#FF6601;
    color:#fff;transform:translateY(-2px) rotate(-6deg)}

.cartao-norte__titulo{position:relative;margin:20px 0 0;font-size:18px;font-weight:700;
    line-height:1.15;letter-spacing:-.01em;color:#16202A}
.cartao-norte__desc{position:relative;margin:10px 0 24px;font-size:14px;line-height:1.6;
    color:rgba(22,32,42,.65)}
/* variante sem a lista de rodapé (Centros de Gestão): o descritivo é o
   último elemento, então não precisa da folga que separava da lista.
   O título reserva duas linhas e as fileiras da grade têm a mesma altura,
   senão o centro de nome mais longo puxaria só a primeira fileira. */
.cartao-norte--simples .cartao-norte__desc{margin-bottom:0}
.cartao-norte--simples .cartao-norte__titulo{min-height:2.3em}
/* fileiras da mesma altura mesmo quando a grade quebra em 1 ou 2 colunas */
.grade-igual{grid-auto-rows:1fr}

/* ── variante escura do cartão, para as faixas sobre foto e a de marca ─
   Mesma anatomia e mesmos movimentos; só as cores mudam de lado.
   No hover tudo clareia, nada escurece: fundo, texto, marcadores e borda
   sobem um degrau. Antes a lista herdava a tinta escura do hover da versão
   clara, que vem depois no arquivo, e sumia na faixa marrom; por isso o
   seletor dobrado (.cartao-norte.cartao-norte--escuro) nos estados de hover.
   O laranja da marca some sobre #8A3A00, então barra, halo e marcadores
   usam o pêssego, e a caixa do ícone vira laranja cheio com ícone escuro
   (5,6:1; o branco ficava em 2,9:1). */
.cartao-norte.cartao-norte--escuro{background-color:rgba(255,255,255,.05);
    border-color:rgba(255,255,255,.12);box-shadow:none}
.cartao-norte.cartao-norte--escuro:hover{background-color:rgba(255,255,255,.10);
    border-color:rgba(255,163,92,.55);
    box-shadow:0 24px 40px -20px rgba(30,10,0,.65)}
.cartao-norte--escuro .cartao-norte__barra{background:linear-gradient(90deg,#FFA35C,#FFD9B8)}
.cartao-norte--escuro .cartao-norte__brilho{
    background:radial-gradient(circle,rgba(255,196,150,.20),transparent 65%)}
.cartao-norte--escuro .cartao-norte__icone{background:rgba(255,102,1,.16);
    border-color:rgba(255,102,1,.32);color:#FFA35C}
.cartao-norte.cartao-norte--escuro:hover .cartao-norte__icone{background:#FF6601;
    border-color:#FF6601;color:#16202A}
.cartao-norte--escuro .cartao-norte__titulo{color:#fff}
.cartao-norte--escuro .cartao-norte__desc{color:rgba(255,255,255,.75);transition:color .3s ease}
.cartao-norte.cartao-norte--escuro:hover .cartao-norte__desc{color:rgba(255,255,255,.92)}
.cartao-norte--escuro .cartao-norte__lista li{color:rgba(255,255,255,.80);
    border-color:rgba(255,255,255,.14)}
.cartao-norte.cartao-norte--escuro:hover .cartao-norte__lista li{color:#fff;
    border-color:rgba(255,196,150,.24)}
.cartao-norte--escuro .cartao-norte__marca{background:rgba(255,163,92,.9)}
.cartao-norte.cartao-norte--escuro:hover .cartao-norte__marca{background:#FFD9B8}

/* ── carrossel horizontal ───────────────────────────────────────
   Rolagem nativa com scroll-snap: funciona no dedo e no trackpad sem
   JS nenhum. As setas são um atalho por cima disso, não a única via.
   O trilho leva respiro em cima e embaixo para o cartão poder subir 4px
   no hover sem ser cortado pelo overflow, e margem negativa devolve
   esse respiro para o ritmo da seção não mudar. */
.carrossel{position:relative}
.carrossel__trilho{display:flex;gap:20px;list-style:none;
    margin:-10px 0 -26px;padding:10px 0 26px;
    overflow-x:auto;overscroll-behavior-x:contain;
    /* o smooth mora no JS (scrollBy), não aqui: no CSS ele briga com o
       snap mandatory e a rolagem programática volta para o zero */
    scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none}
.carrossel__trilho::-webkit-scrollbar{display:none}
.carrossel__trilho:focus-visible{outline:2px solid #FF6601;outline-offset:2px;
    border-radius:14px}

/* a conta divide o trilho em número inteiro de cartões, então nunca sobra
   um pedaço do próximo aparecendo na borda */
.carrossel__item{display:flex;scroll-snap-align:start;
    flex:0 0 calc((100% - 2 * 20px) / 3)}
.carrossel__item > *{width:100%}
@media (max-width:1023.98px){ .carrossel__item{flex-basis:calc((100% - 20px) / 2)} }
@media (max-width:639.98px){ .carrossel__item{flex-basis:100%} }

/* controles embaixo, centrados: seta, bullets, seta */
.carrossel__controles{display:flex;align-items:center;justify-content:center;
    gap:16px;margin-top:32px}

.carrossel__seta{display:flex;align-items:center;justify-content:center;
    width:48px;height:48px;padding:0;flex-shrink:0;
    border-radius:50%;border:1px solid rgba(22,32,42,.14);
    background:#fff;color:#FF6601;font-size:20px;line-height:1;cursor:pointer;
    box-shadow:0 6px 16px -6px rgba(22,32,42,.25);
    transition:background-color .25s ease,border-color .25s ease,
               color .25s ease,opacity .25s ease,transform .25s ease}
.carrossel__seta:hover:not([disabled]){background:#FF6601;border-color:#FF6601;
    color:#fff;transform:scale(1.06)}
/* desabilitada continua visível: some o comando, não o controle */
.carrossel__seta[disabled]{opacity:.32;cursor:default;box-shadow:none}

.carrossel__pontos{display:flex;align-items:center;gap:8px}
.carrossel__ponto{width:8px;height:8px;padding:0;border:0;border-radius:999px;
    background:rgba(22,32,42,.22);cursor:pointer;
    transition:width .3s ease,background-color .3s ease}
.carrossel__ponto:hover{background:rgba(22,32,42,.42)}
.carrossel__ponto[aria-current="true"]{width:26px;background:#FF6601}

@media (prefers-reduced-motion:reduce){
    .carrossel__seta,.carrossel__ponto{transition:none}
    .carrossel__seta:hover{transform:none}
}

/* rodapé em lista: cinco linhas nos três cartões, então as colunas fecham
   sem sobra de branco. Os marcadores acendem em cascata no hover. */
.cartao-norte__lista{position:relative;display:flex;flex-direction:column;
    margin:auto 0 0;padding:0;list-style:none}
.cartao-norte__lista li{display:flex;align-items:flex-start;gap:10px;
    padding:9px 0;font-size:14px;line-height:1.45;color:rgba(22,32,42,.66);
    border-top:1px solid rgba(22,32,42,.07);
    transition:color .3s ease,border-color .3s ease}
.cartao-norte__lista li:first-child{border-top:0;padding-top:0}
.cartao-norte__lista li:last-child{padding-bottom:0}
.cartao-norte:hover .cartao-norte__lista li{color:rgba(22,32,42,.82);
    border-color:rgba(255,102,1,.16)}

.cartao-norte__marca{flex-shrink:0;width:6px;height:6px;margin-top:7px;
    border-radius:50%;background:rgba(22,32,42,.22);
    transition:background-color .3s ease,transform .3s ease}
.cartao-norte:hover .cartao-norte__marca{background:#FF6601;transform:scale(1.3)}
.cartao-norte__lista li:nth-child(2) .cartao-norte__marca{transition-delay:.05s}
.cartao-norte__lista li:nth-child(3) .cartao-norte__marca{transition-delay:.1s}
.cartao-norte__lista li:nth-child(4) .cartao-norte__marca{transition-delay:.15s}
.cartao-norte__lista li:nth-child(5) .cartao-norte__marca{transition-delay:.2s}

@media (prefers-reduced-motion:reduce){
    .cartao-norte,.cartao-norte__barra,.cartao-norte__brilho,
    .cartao-norte__icone,.cartao-norte__lista li,.cartao-norte__marca{transition:none;transition-delay:0s}
    .cartao-norte:hover,.cartao-norte:hover .cartao-norte__icone{transform:none}
}

/* =========================================================
   ÓRBITAS DO ESTATUTO, tradução do stack-feature-section
   Seção branca de ponta a ponta e colada na de cima. O texto segue a
   grade do site; o conjunto giratório é posicionado pela borda direita
   da seção e cortado só por ela. Os anéis (11, 18 e 25rem) cabem na
   altura do bloco, então nada é cortado em cima nem embaixo.
   Cada ficha roda ao contrário do anel para o ícone ficar sempre em pé,
   detalhe que o componente original não trata.
   ========================================================= */
/* a seção não tem respiro próprio: a altura vem do anel externo, que assim
   encosta no topo e na base do branco. O texto leva o respiro dentro dele. */
.secao--estatuto{padding-top:0;padding-bottom:0;background:#fff}

.cartao-orbita{position:relative;display:flex;align-items:center;min-height:41.95rem}
.cartao-orbita__texto{position:relative;z-index:10;max-width:34rem;
    padding-block:var(--ritmo-secao)}
.cartao-orbita__titulo{margin:0;font-family:var(--font-heading);font-weight:400;
    letter-spacing:-.02em;line-height:1.08;color:#16202A;
    font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem)}
.cartao-orbita__desc{margin:18px 0 0;max-width:44ch;font-size:17px;line-height:1.65;
    color:rgba(22,32,42,.65)}
.cartao-orbita__acoes{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}

/* o palco é ancorado na borda direita da seção; o centro fica além dela,
   então só a metade esquerda do conjunto aparece */
.cartao-orbita__palco{position:absolute;top:0;right:0;bottom:0;width:42rem;
    pointer-events:none}
.cartao-orbita__centro{position:absolute;top:50%;right:-9rem;
    width:39.2rem;height:39.2rem;transform:translateY(-50%);
    display:flex;align-items:center;justify-content:center}

.cartao-orbita__nucleo{position:absolute;top:50%;left:50%;z-index:2;
    display:flex;align-items:center;justify-content:center;
    width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;
    background:#FF6601;color:#16202A;font-size:42px;line-height:1}

.orbita{position:absolute;top:50%;left:50%;width:var(--tam);height:var(--tam);
    margin:calc(var(--tam) / -2) 0 0 calc(var(--tam) / -2);
    border-radius:50%;border:2px dotted rgba(22,32,42,.16);
    animation:orbita-girar var(--dur) linear infinite}
.orbita__item{position:absolute;top:50%;left:50%;width:0;height:0;
    transform:rotate(var(--a)) translateY(calc(var(--tam) / -2))}
.orbita__ficha{position:absolute;display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
    background:#fff;border:1px solid rgba(22,32,42,.10);
    box-shadow:0 4px 12px -4px rgba(22,32,42,.20);
    color:rgba(22,32,42,.62);font-size:19px;line-height:1;
    animation:orbita-girar-inverso var(--dur) linear infinite}

@keyframes orbita-girar{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes orbita-girar-inverso{from{transform:rotate(0)}to{transform:rotate(-360deg)}}

@media (prefers-reduced-motion: reduce){ .orbita,.orbita__ficha{animation:none} }
@media (max-width:1023.98px){
  .cartao-orbita{min-height:0}
  .cartao-orbita__palco{display:none}
  .cartao-orbita__texto{max-width:none}
}

/* ---- ícones em listas e cards ---- */
.bi{display:inline-block;vertical-align:-.125em}
/* As utilitárias de espaçamento moram dentro de @layer utilities e este
   arquivo está fora de qualquer camada. Estilo sem camada vence camada,
   independente de especificidade, então o margin:0 daqui zerava o mt-*
   aplicado na lista e o texto colava no primeiro item. Nem :where() resolve,
   porque a camada é avaliada antes da especificidade. Em vez de brigar com a
   cascata, cada vão fica declarado aqui. */
.lista-icone{list-style:none;margin:0;padding:0}
.lista-icone.mt-4{margin-top:16px}
.lista-icone.mt-6{margin-top:24px}
.lista-icone.mt-8{margin-top:32px}
.lista-icone.mt-12{margin-top:48px}
.lista-icone li{display:flex;gap:12px;align-items:flex-start}
.lista-icone li + li{margin-top:12px}
.lista-icone i{flex:none;font-size:17px;line-height:1.5;color:#FF6601}
.icone-caixa{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
    border-radius:10px;background:rgba(255,102,1,.1);color:#FF6601;font-size:20px}
.bg-black .icone-caixa,.text-white .icone-caixa{background:rgba(255,102,1,.16)}
.chip-ds i{font-size:14px;margin-right:7px;opacity:.75}


/* ── bloco de texto com mosaico de fotos ────────────────────────
   Tradução do cta-section-with-gallery: as quatro células ocupam faixas
   deslocadas de duas colunas, então uma coluna sobe em relação à outra.
   As alturas de linha vêm do original (50/150/50/150/50) e dão células de
   mesma altura em degrau. Abaixo de 1024 o mosaico vira uma faixa 2x2
   simples, que é onde a largura ainda comporta as fotos. */
.bloco-galeria{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media (min-width:1024px){
    /* align-items:start é o que dá espaço para o sticky correr; com center
       a coluna da direita ficaria travada no meio e não teria para onde ir */
    .bloco-galeria{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;
        align-items:start}
    /* o mosaico acompanha a leitura do texto ao lado */
    .galeria-mosaico{position:sticky;top:calc(var(--altura-cab) + 24px)}
}
.bloco-galeria__texto{min-width:0}

.galeria-mosaico{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));gap:16px}
@media (min-width:1024px){
    .galeria-mosaico{grid-template-rows:50px 150px 50px 150px 50px}
    .galeria-mosaico__cel:nth-child(1){grid-column:2/3;grid-row:1/3}
    .galeria-mosaico__cel:nth-child(2){grid-column:1/2;grid-row:2/4}
    .galeria-mosaico__cel:nth-child(3){grid-column:1/2;grid-row:4/6}
    .galeria-mosaico__cel:nth-child(4){grid-column:2/3;grid-row:3/5}
}
.galeria-mosaico__cel{position:relative;display:block;overflow:hidden;
    border-radius:12px;aspect-ratio:4/3;
    box-shadow:0 18px 30px -18px rgba(22,32,42,.45)}
@media (min-width:1024px){ .galeria-mosaico__cel{aspect-ratio:auto} }
.galeria-mosaico__cel img{display:block;width:100%;height:100%;
    object-fit:cover;object-position:center}

/* Entrada escalonada, no lugar do motion do componente original.
   Quem esconde é a classe .anima, aplicada pelo próprio script: assim,
   sem JS, o conteúdo nasce visível em vez de sumir para sempre.
   O estado escondido vem com transition:none de propósito. Como o .anima
   entra depois da pintura, com transição no estado escondido o navegador
   animaria de visível para invisível antes de revelar, e isso aparece como
   um piscar. Só a revelação é animada. */
.revela.anima .revela__item{opacity:0;filter:blur(10px);transform:translateY(12px);
    transition:none}
.revela.anima.entrou .revela__item{opacity:1;filter:blur(0);transform:none;
    transition:opacity .5s ease,filter .5s ease,transform .5s ease}
.revela.anima.entrou .revela__item:nth-child(2){transition-delay:.12s}
.revela.anima.entrou .revela__item:nth-child(3){transition-delay:.24s}
.revela.anima.entrou .revela__item:nth-child(4){transition-delay:.36s}

/* as fotos entram com mais gesto que o texto: sobem mais, saem de uma
   escala menor e ficam mais tempo no ar, uma depois da outra */
.galeria-mosaico.anima .galeria-mosaico__cel{opacity:0;
    transform:translateY(28px) scale(.94);filter:blur(14px);transition:none}
.galeria-mosaico.anima .galeria-mosaico__cel img{transform:scale(1.12);transition:none}

.galeria-mosaico.anima.entrou .galeria-mosaico__cel{opacity:1;
    transform:none;filter:blur(0);
    transition:opacity .7s cubic-bezier(.22,1,.36,1),
               filter .7s cubic-bezier(.22,1,.36,1),
               transform .7s cubic-bezier(.22,1,.36,1)}
/* a foto por dentro ainda desce de um zoom leve, para a entrada ter vida */
.galeria-mosaico.anima.entrou .galeria-mosaico__cel img{transform:none;
    transition:transform 1.1s cubic-bezier(.22,1,.36,1)}

.galeria-mosaico.anima.entrou .galeria-mosaico__cel:nth-child(2),
.galeria-mosaico.anima.entrou .galeria-mosaico__cel:nth-child(2) img{transition-delay:.18s}
.galeria-mosaico.anima.entrou .galeria-mosaico__cel:nth-child(3),
.galeria-mosaico.anima.entrou .galeria-mosaico__cel:nth-child(3) img{transition-delay:.36s}
.galeria-mosaico.anima.entrou .galeria-mosaico__cel:nth-child(4),
.galeria-mosaico.anima.entrou .galeria-mosaico__cel:nth-child(4) img{transition-delay:.54s}

@media (prefers-reduced-motion:reduce){
    .revela.anima .revela__item,
    .galeria-mosaico.anima .galeria-mosaico__cel,
    .galeria-mosaico.anima .galeria-mosaico__cel img{
        opacity:1;filter:none;transform:none;transition:none}
}

/* ── lista de tópicos em duas colunas ───────────────────────────
   Usada nos blocos "onde se aplica" das páginas de programa. Antes era
   uma coluna de 68ch centrada, que deixava metade da faixa vazia. */
.grade-topicos{display:grid;grid-template-columns:1fr;gap:0 56px;
    margin:0;padding:0;list-style:none}
@media (min-width:768px){ .grade-topicos{grid-template-columns:repeat(2,minmax(0,1fr))} }
.grade-topicos li{display:flex;align-items:flex-start;gap:14px;
    padding:18px 0;border-bottom:1px solid rgba(22,32,42,.09);
    font-size:17px;line-height:1.5;color:rgba(22,32,42,.75)}
.grade-topicos__visto{display:inline-flex;align-items:center;justify-content:center;
    width:28px;height:28px;flex-shrink:0;margin-top:-1px;
    border-radius:8px;background:#FF6601;color:#16202A;font-size:15px;line-height:1}
/* na faixa escura o mesmo componente precisa inverter */
.bg-black .grade-topicos li,.text-white .grade-topicos li{
    color:rgba(255,255,255,.78);border-bottom-color:rgba(255,255,255,.14)}
.bg-black .grade-topicos__visto,.text-white .grade-topicos__visto{
    background:rgba(255,102,1,.16);color:#FFA35C}

/* passos para credenciar, na faixa clara */
.passo-credenciar{display:flex;flex-direction:column;height:100%;padding:24px;
    border-radius:12px;border:1px solid rgba(22,32,42,.10);background:#F8FAFB;
    transition:border-color .25s ease,box-shadow .25s ease}
.passo-credenciar:hover{border-color:rgba(255,102,1,.30);
    box-shadow:0 12px 22px -14px rgba(22,32,42,.20)}
/* o número era laranja sobre cartão claro, 2,8:1, reprovava. Vira ficha
   preenchida no laranja oficial com a numeração em tinta escura, 5,61:1. */
.passo-credenciar__num{display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:12px;background:#FF6601;
    font-family:var(--font-heading);font-size:19px;font-weight:600;
    line-height:1;color:#16202A}
.passo-credenciar__texto{margin:12px 0 0;font-size:15px;line-height:1.55;
    color:rgba(22,32,42,.70)}
@media (prefers-reduced-motion:reduce){ .passo-credenciar{transition:none} }

/* cartão de entidade: o mesmo .cartao-norte, mas clicável e com o link
   colado no rodapé, para os seis fecharem na mesma altura */
.cartao-entidade{text-decoration:none;color:inherit}
/* mesma tela equalizada de 280x120 dos credenciados */
.cartao-entidade__logo{position:relative;display:flex;align-items:center;
    justify-content:flex-start;height:64px;margin-bottom:4px}
.cartao-entidade__logo img{width:100%;max-width:178px;height:auto;object-fit:contain}
.cartao-entidade__link{position:relative;margin-top:auto;padding-top:18px;
    display:inline-flex;align-items:center;gap:8px;
    font-size:15px;font-weight:500;color:#16202A;
    transition:color .2s ease,gap .2s ease}
.cartao-entidade:hover .cartao-entidade__link{color:#B84A00;gap:12px}

/* ── credenciados: cartão da listagem ───────────────────────────
   Logo numa faixa branca em cima, dados embaixo. O logo entra com
   object-fit:contain e altura limitada, senão marcas de proporção
   muito diferente ficariam com tamanhos díspares na mesma fileira. */
.cartao-credenciado{display:flex;flex-direction:column;height:100%;
    overflow:hidden;border-radius:12px;background:#fff;
    border:1px solid rgba(22,32,42,.10);text-decoration:none;color:inherit;
    box-shadow:0 1px 2px rgba(22,32,42,.05);
    transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.cartao-credenciado:hover{transform:translateY(-4px);
    border-color:rgba(255,102,1,.38);
    box-shadow:0 18px 30px -14px rgba(22,32,42,.20)}

.cartao-credenciado__logo{display:flex;align-items:center;justify-content:center;
    height:120px;padding:16px 24px;border-bottom:1px solid rgba(22,32,42,.08);
    background:#fff}
/* todos os arquivos vêm na mesma tela de 280x120 já equalizada pela área
   ótica, então aqui é só largura fixa: a proporção entre eles já está certa */
.cartao-credenciado__logo img{width:100%;max-width:196px;height:auto;
    object-fit:contain}

.cartao-credenciado__corpo{display:flex;flex:1;flex-direction:column;
    padding:22px;background:#F8FAFB}
.cartao-credenciado__etiqueta{align-self:flex-start;padding:4px 11px;
    border-radius:999px;background:#FF6601;color:#16202A;
    font-size:12px;font-weight:600;line-height:1.3}
.cartao-credenciado__nome{font-size:17px;font-weight:600;
    line-height:1.3;color:#16202A}
/* benefício ao associado: é o que faz o associado escolher o credenciado,
   então vai logo abaixo do nome, no laranja oficial com tinta (5,61:1) */
.cartao-credenciado__beneficio{align-self:flex-start;display:inline-flex;align-items:flex-start;gap:8px;
    margin-top:12px;padding:8px 12px;border-radius:10px;background:#FF6601;color:#16202A;
    font-size:14px;font-weight:600;line-height:1.35}
.cartao-credenciado__beneficio i{font-size:15px;line-height:1.25;flex-shrink:0}
.cartao-credenciado__beneficio--vazio{background:transparent;padding:0;font-weight:500;
    color:rgba(22,32,42,.62)}
/* descrição curta: no máximo três linhas, para os cartões fecharem iguais */
.cartao-credenciado__desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
    overflow:hidden;margin-top:12px;font-size:14.5px;line-height:1.5;color:rgba(22,32,42,.72)}
.cartao-credenciado__desconto{margin-top:6px;font-family:var(--font-heading);
    font-size:20px;color:#B84A00}
.cartao-credenciado__cidade{display:inline-flex;align-items:center;gap:7px;
    margin-top:12px;font-size:14px;color:rgba(22,32,42,.68)}
.cartao-credenciado__cidade i{color:#B84A00;font-size:15px}
.cartao-credenciado__link{margin-top:auto;padding-top:18px;
    display:inline-flex;align-items:center;gap:8px;
    font-size:15px;font-weight:500;color:#16202A;
    transition:color .2s ease,gap .2s ease}
.cartao-credenciado:hover .cartao-credenciado__link{color:#B84A00;gap:12px}

/* ── credenciados: ficha da página interna ─────────────────────── */
/* mesma tela equalizada de 280x120 da listagem, só maior */
.ficha-logo{width:100%;max-width:220px;height:auto;object-fit:contain}

.ficha-contato{margin:24px 0 0;padding:0;list-style:none;
    border-top:1px solid rgba(22,32,42,.10)}
.ficha-contato li{display:flex;align-items:flex-start;gap:12px;
    padding:13px 0;border-bottom:1px solid rgba(22,32,42,.08);
    font-size:15px;line-height:1.45;color:rgba(22,32,42,.75)}
.ficha-contato i{flex:none;margin-top:2px;color:#FF6601;font-size:16px}
.ficha-contato a{color:inherit;text-decoration:none}
.ficha-contato a:hover{color:#B84A00;text-decoration:underline}

.ficha-redes{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.ficha-redes a{display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;border-radius:10px;
    border:1px solid rgba(22,32,42,.12);background:#fff;
    color:#16202A;font-size:17px;text-decoration:none;
    transition:background-color .25s ease,border-color .25s ease,color .25s ease}
.ficha-redes a:hover{background:#FF6601;border-color:#FF6601;color:#fff}

@media (prefers-reduced-motion:reduce){
    .cartao-credenciado,.cartao-credenciado__link,.ficha-redes a{transition:none}
    .cartao-credenciado:hover{transform:none}
}

/* ── formulários ────────────────────────────────────────────────
   Tradução do padrão Fieldset/Field/Input para as classes que o Grav
   Forms gera. Sem isto os campos ficam invisíveis: o reset do design
   system tira borda, fundo e respiro do input e o tema nunca devolveu. */
.form-grav{display:flex;flex-direction:column;gap:20px}

/* Field: rótulo em cima, campo embaixo, com respiro curto entre os dois */
.form-grav .form-field{display:flex;flex-direction:column;gap:7px;margin:0}
.form-grav .form-label label,
.form-grav > .form-field > .form-label label{display:block;
    font-size:14px;font-weight:500;line-height:1.35;color:#16202A}
/* asterisco de campo obrigatorio: laranja oficial sobre branco da 2,94:1 e
   reprova. Marcador funcional, entao usa o laranja escuro, 5,23:1. */
.form-grav .required{margin-left:2px;color:#B84A00}

/* Input: altura de 44px, borda de 1px, foco com anel laranja */
.form-grav input[type="text"],.form-grav input[type="email"],
.form-grav input[type="tel"],.form-grav input[type="url"],
.form-grav input[type="number"],.form-grav input[type="password"],
.form-grav input[type="date"],.form-grav select,.form-grav textarea{
    display:block;width:100%;min-height:44px;padding:11px 14px;
    border:1px solid rgba(22,32,42,.16);border-radius:10px;background:#fff;
    font-family:var(--font-body);font-size:15px;line-height:1.45;color:#16202A;
    transition:border-color .2s ease,box-shadow .2s ease}
.form-grav textarea{min-height:120px;resize:vertical}
.form-grav select{appearance:none;padding-right:38px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316202A' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;background-size:18px}
.form-grav ::placeholder{color:rgba(22,32,42,.42);opacity:1}
.form-grav input:hover,.form-grav textarea:hover,.form-grav select:hover{
    border-color:rgba(22,32,42,.28)}
.form-grav input:focus,.form-grav textarea:focus,.form-grav select:focus{
    outline:none;border-color:#FF6601;box-shadow:0 0 0 3px rgba(255,102,1,.18)}

/* FieldDescription: o texto de ajuda embaixo do campo */
.form-grav .form-field .form-help,.form-grav .form-field small{
    font-size:13px;line-height:1.45;color:rgba(22,32,42,.55)}

/* aceite: caixa e rótulo lado a lado, e o rótulo vazio de cima some */
.form-grav .form-field:has(input[type="checkbox"]) > .form-label:empty,
.form-grav .form-field:has(input[type="checkbox"]) > .form-label:has(label:empty){display:none}
.form-grav .form-input-wrapper:has(> input[type="checkbox"]){
    display:flex;align-items:flex-start;gap:11px}
.form-grav input[type="checkbox"],.form-grav input[type="radio"]{
    flex:none;width:20px;height:20px;min-height:0;margin:1px 0 0;padding:0;
    border:1px solid rgba(22,32,42,.30);border-radius:5px;background:#fff;
    appearance:none;cursor:pointer;
    transition:background-color .18s ease,border-color .18s ease}
.form-grav input[type="radio"]{border-radius:50%}
.form-grav input[type="checkbox"]:checked{background:#FF6601;border-color:#FF6601;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E");
    background-size:13px;background-position:center;background-repeat:no-repeat}
.form-grav input[type="checkbox"]:focus-visible,
.form-grav input[type="radio"]:focus-visible{outline:none;border-color:#FF6601;
    box-shadow:0 0 0 3px rgba(255,102,1,.18)}
.form-grav .form-input-wrapper > label[for]{font-size:14px;line-height:1.5;
    color:rgba(22,32,42,.72);cursor:pointer}
.form-grav .form-input-wrapper > label[for] a{color:#B84A00;
    text-decoration:underline;text-underline-offset:3px}

.form-grav .linha-botoes{margin-top:4px}
/* O plugin de formulário emite .btn .btn-primario, classes que não existem
   em lugar nenhum do tema: o botão de enviar estava sem estilo, do mesmo
   jeito que os campos. Aqui ele recebe a forma do botão primário do site. */
.form-grav .btn,.form-grav button[type="submit"]{
    display:inline-flex;align-items:center;justify-content:center;
    height:48px;padding:0 34px;border:0;border-radius:100px;cursor:pointer;
    /* branco sobre o laranja da marca da 2,94:1; a tinta escura da 5,61:1 */
    background:#FF6601;color:#16202A;
    font-family:var(--font-body);font-size:15px;font-weight:500;line-height:1;
    transition:background-color .25s ease,transform .25s ease,box-shadow .25s ease}
.form-grav .btn:hover,.form-grav button[type="submit"]:hover{
    background:#E65B00;transform:translateY(-2px);
    box-shadow:0 12px 22px -10px rgba(255,102,1,.55)}
.form-grav .btn:focus-visible,.form-grav button[type="submit"]:focus-visible{
    outline:none;box-shadow:0 0 0 3px rgba(255,102,1,.30)}
@media (prefers-reduced-motion:reduce){
    .form-grav .btn,.form-grav button[type="submit"]{transition:none}
    .form-grav .btn:hover,.form-grav button[type="submit"]:hover{transform:none}
}

/* mensagens do Grav depois do envio */
.form-grav .form-messages,.alert{padding:14px 16px;border-radius:10px;
    font-size:15px;line-height:1.45}
.alert.error,.form-messages .error{background:#FDECEC;color:#8A1B1B}
.alert.success,.form-messages .success{background:#E8F6EE;color:#1B5E38}
/* o partials/form-messages do tema escreve a resposta como .toast, que
   não tinha estilo nenhum: a confirmação saía como texto solto */
.toast{padding:14px 16px;border-radius:10px;font-size:15px;line-height:1.45}
.toast-success{background:#E8F6EE;color:#1B5E38}
.toast-error{background:#FDECEC;color:#8A1B1B}

@media (prefers-reduced-motion:reduce){
    .form-grav input,.form-grav textarea,.form-grav select{transition:none}
}
/* =========================================================
   AJUSTES DE MOBILE E TABLET
   Todas as regras deste bloco vivem em consultas max-width,
   então nada aqui alcança o desktop: de 1024px para cima o
   site continua byte por byte como estava.
   ========================================================= */

/* rodapé no celular: a marca empilha logo, contatos e redes,
   e os grupos de links seguem em duas colunas, porque um embaixo do
   outro davam quase duas telas só de rodapé. */
@media (max-width:639.98px){
    .rodape-ds__grade{gap:40px}
    .rodape-ds__marca{flex-direction:column;gap:22px}
}

/* logos dos patrocinadores: a base de 190px não deixava dois logos
   caberem numa tela de 390px, então cada um ocupava uma linha
   inteira e a seção virava uma torre de treze cartões. */
@media (max-width:639.98px){
    .celula-patrocinador{flex:0 1 calc(50% - 8px);min-height:86px;padding:14px 12px}
    .celula-patrocinador img{max-height:44px}
}

/* conselhos: vinte e seis nomes numa coluna só rendiam 1274px de
   rolagem. Os nomes são curtos e cabem em duas colunas já aqui. */
@media (max-width:639.98px){
    .lista-conselheiros{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
}

/* alvos de toque. O hambúrguer tinha 40px e o mínimo confortável
   é 44px. Nos pontos do carrossel a área clicável cresce por
   pseudo-elemento e ocupa exatamente o passo entre um ponto e o
   seguinte, então os alvos se encostam sem se sobrepor e o ponto
   continua com os mesmos 8px de desenho. */
@media (max-width:1023.98px){
    .menu-botao{width:44px;height:44px}
    .carrossel__pontos{gap:14px}
    .carrossel__ponto{position:relative}
    .carrossel__ponto::after{position:absolute;top:50%;left:50%;
        width:calc(100% + 14px);height:44px;
        transform:translate(-50%,-50%);content:''}
}

/* rótulos miúdos: no celular o cartão da diretoria ocupa a largura
   toda, então o teto de 12px do clamp deixava o cargo pequeno à
   toa. A regra de contêiner da fileira de seis não é tocada, ela
   só acende com o cartão abaixo de 250px. */
@media (max-width:1023.98px){
    .cartao-pessoa .cartao-pessoa__cargo{font-size:13px}
    .cartao-post__data span{font-size:12px}
}

/* medida de leitura no tablet: entre 768 e 1023px o texto corrido
   ocupava os 704px do container e chegava a 84 caracteres por
   linha. O teto de 68ch não segura porque nesta fonte o ch vale
   10,4px, o que dá 757px. Um teto em pixels resolve. */
@media (min-width:768px) and (max-width:1023.98px){
    .prosa-arh,
    .bloco-titulo-texto > *:last-child,
    .bloco-galeria__texto .prosa-arh{max-width:600px}
}

/* ── texto dentro da faixa em cor de marca ────────────────────────
   A seção de Missão, visão e valores passou a ocupar #8A3A00. Os
   utilitários de tinta apagada do DS, feitos para fundo claro,
   caíram para 1,75:1 ali dentro. Aqui eles viram branco rebaixado,
   que sobre a faixa entrega 4,9:1 ou mais. */
.secao.bg-brand-deep .intro-apoio,
.secao.bg-brand-deep .text-black\/65,
.secao.bg-brand-deep .text-black\/60,
.secao.bg-brand-deep .text-black\/70{color:rgba(255,255,255,.80)}
/* as cores de texto do .cartao-norte--escuro moram junto da variante */

/* ── barra utilitária ─────────────────────────────────────────────
   As duas referências que a ARH escolheu abrem com uma faixa fina de
   serviço acima do menu: contato de um lado, acesso do associado do
   outro. Aqui ela resolve duas coisas de uma vez. Dá à Sala do
   Associado o lugar que o associado procura, e tira do menu de
   conteúdo o item que menos pertencia a ele.
   Só no desktop: no celular esses itens já vivem no menu. */
.barra-util{display:none}
@media (min-width:1024px){
    .barra-util{display:block;border-bottom:1px solid rgba(255,255,255,.16)}
    #cabecalho.rolou .barra-util,.cab-solido .barra-util{border-bottom-color:rgba(22,32,42,.10)}
    .barra-util__linha{display:flex;align-items:center;justify-content:space-between;
        gap:24px;height:36px;font-size:13px;line-height:1}
    .barra-util__contato{display:flex;align-items:center;gap:20px}
    .barra-util a{display:inline-flex;align-items:center;gap:7px;
        color:currentColor;opacity:.72;text-decoration:none;
        transition:opacity .2s ease,color .2s ease}
    .barra-util a:hover{opacity:1;color:#FF6601}
    .barra-util a:focus-visible{outline:2px solid #FF6601;outline-offset:3px;border-radius:3px}
    .barra-util i{font-size:14px;line-height:1}
    .barra-util__acao{font-weight:600;opacity:.88}
    .barra-util__externo{font-size:11px;opacity:.7}
}

/* ── coluna que acompanha a rolagem ───────────────────────────────
   Os oito blocos fixos do site usavam lg:top-28, que vale 112px. Isso
   funcionava enquanto o cabeçalho tinha 87px, mas ele passou a 123px
   quando ganhou a barra utilitária, então o bloco deslizava para
   debaixo do menu e encostava nele. Aqui a distância passa a ser
   calculada a partir da altura real do cabeçalho, mais um respiro,
   e acompanha sozinha qualquer mudança futura. */
@media (min-width:1024px){
    .col-fixa{position:sticky;
        /* rolado, o cabeçalho ganha o respiro de baixo e passa de 123 para
           139px, então a conta precisa somar --respiro-nav também. Sem isso
           sobravam 12px de folga e o bloco quase encostava no menu. */
        top:calc(var(--altura-cab) + var(--respiro-nav) + 24px);
        align-self:start}
}

/* ── membros de um Centro de Gestão ───────────────────────────────
   A página trocou o carrossel de sete cartões por uma seção para cada
   centro, com quem conduz lado a lado. Quando não há retrato, o avatar
   é a inicial do nome sobre o pêssego da paleta, que sobre a tinta
   entrega 14,8:1 e evita a silhueta genérica de banco de imagens. */
.grade-membros{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:640px){ .grade-membros{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .grade-membros{grid-template-columns:repeat(3,minmax(0,1fr))} }

.cartao-membro{display:flex;flex-direction:column;align-items:flex-start;
    padding:24px;border-radius:12px;background:#fff;
    border:1px solid rgba(22,32,42,.10);
    transition:border-color .2s ease,box-shadow .2s ease}
.bg-white .cartao-membro{background:var(--color-grey-50,#F6F5F2)}
.cartao-membro:hover{border-color:rgba(255,102,1,.34);
    box-shadow:0 14px 26px -14px rgba(22,32,42,.20)}

/* O retrato da Diretoria mede 193px no desktop e chega a 358px no celular,
   porque a grade dela perde colunas. Um avatar de tamanho fixo dava 32% lá
   e só 18% aqui. Estes três degraus mantêm a proporção acima de 30% da foto
   da Diretoria em qualquer largura, sem chegar perto do tamanho dela. */
.cartao-membro__avatar{display:flex;align-items:center;justify-content:center;
    width:128px;height:128px;border-radius:50%;overflow:hidden;flex:none;
    background:#ECE9E4;color:rgba(22,32,42,.55);
    font-family:var(--font-heading);font-size:40px;line-height:1;letter-spacing:.02em}
@media (min-width:640px){
    .cartao-membro__avatar{width:112px;height:112px;font-size:36px}
}
@media (min-width:1024px){
    .cartao-membro__avatar{width:104px;height:104px;font-size:33px}
}
.cartao-membro__avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.cartao-membro__nome{margin-top:18px;font-size:17px;font-weight:600;line-height:1.3;color:#16202A}
.cartao-membro__area{margin-top:6px;font-size:14px;line-height:1.5;color:rgba(22,32,42,.62)}

/* marcação: enquanto a ARH não envia os nomes daquele centro, o cartão
   fica em latim, que se identifica sozinho, e o avatar perde a inicial */
.cartao-membro--marcacao .cartao-membro__avatar{background:rgba(22,32,42,.06);color:rgba(22,32,42,.28)}
.cartao-membro--marcacao .cartao-membro__nome{color:rgba(22,32,42,.62)}

.centro-cabeca__icone{display:inline-flex;align-items:center;justify-content:center;
    width:52px;height:52px;border-radius:12px;background:#FF6601;color:#16202A;font-size:24px}

/* ---- depoimentos em vídeo (Associe-se) ----
   Cartão no formato story, 9:16. Sem JS é uma fileira que rola no dedo;
   com .depo--pronto vira o leque: o destaque no centro e os vizinhos atrás,
   menores e com véu. --w é a largura do destaque; o resto sai dela. */
.depo{--w:clamp(220px,62vw,300px)}
@media (min-width:768px){.depo{--w:clamp(260px,24vw,340px)}}
.depo__palco{position:relative;margin-top:48px}
.depo__trilho{list-style:none;margin:0;padding:8px 16px 24px;display:flex;gap:16px;
    overflow-x:auto;scroll-snap-type:x mandatory}
.depo__cartao{position:relative;flex:0 0 var(--w);width:var(--w);aspect-ratio:9/16;
    border-radius:18px;overflow:hidden;background:#16202A;scroll-snap-align:center;
    box-shadow:0 24px 48px -20px rgba(22,32,42,.45)}
.depo__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#16202A}
.depo__veu{position:absolute;inset:0;background:#16202A;opacity:0;pointer-events:none;transition:opacity .6s ease}
.depo__info{position:absolute;left:0;right:0;top:0;padding:18px;color:#fff;pointer-events:none;
    background:linear-gradient(to bottom,rgba(10,15,20,.8),rgba(10,15,20,0))}
.depo__selo{display:inline-block;margin-bottom:10px;padding:4px 10px;border-radius:999px;
    background:#FF6601;color:#16202A;font-size:12px;font-weight:600;line-height:1.3}
.depo__nome{margin:0;font-family:var(--font-heading);font-size:20px;font-weight:500;line-height:1.2}
.depo__desc{margin:4px 0 0;font-size:14px;line-height:1.4;color:rgba(255,255,255,.82)}
.depo__som,.depo__topo,.depo__progresso,.depo__foco{display:none}

/* leque */
.depo--pronto .depo__trilho{display:block;position:relative;overflow:visible;padding:0;
    height:calc(var(--w) * 16 / 9)}
.depo--pronto .depo__cartao{position:absolute;top:0;left:50%;margin-left:calc(var(--w) / -2);
    transition:transform .65s cubic-bezier(.22,.8,.24,1),opacity .45s ease,visibility 0s;
    will-change:transform}
.depo--pronto .depo__info{top:auto;bottom:0;padding:64px 18px 18px;
    background:linear-gradient(to top,rgba(10,15,20,.86) 0%,rgba(10,15,20,.55) 55%,rgba(10,15,20,0))}
.depo--pronto [data-pos="0"]{z-index:5}
.depo--pronto [data-pos="1"]{transform:translateX(calc(var(--w) * .8)) scale(.82);z-index:4}
.depo--pronto [data-pos="-1"]{transform:translateX(calc(var(--w) * -.8)) scale(.82);z-index:4}
.depo--pronto [data-pos="2"]{transform:translateX(calc(var(--w) * 1.45)) scale(.66);z-index:3}
.depo--pronto [data-pos="-2"]{transform:translateX(calc(var(--w) * -1.45)) scale(.66);z-index:3}
/* o que passa de dois para cada lado encolhe atrás do destaque, em vez de
   cruzar o palco de uma ponta à outra na volta do carrossel */
.depo--pronto [data-pos="fora"]{transform:scale(.5);opacity:0;visibility:hidden;z-index:1;
    transition:transform .65s cubic-bezier(.22,.8,.24,1),opacity .45s ease,visibility 0s .65s}
.depo--pronto [data-pos="1"] .depo__veu,.depo--pronto [data-pos="-1"] .depo__veu{opacity:.38}
.depo--pronto [data-pos="2"] .depo__veu,.depo--pronto [data-pos="-2"] .depo__veu{opacity:.62}
.depo--pronto .depo__cartao:not([data-pos="0"]) .depo__desc{display:none}
/* a parte à mostra dos cartões da direita é a borda de fora */
.depo--pronto [data-pos="1"] .depo__info,.depo--pronto [data-pos="2"] .depo__info{text-align:right}
/* no celular os vizinhos são só uma fatia, e o nome sairia cortado */
@media (max-width:767px){
    .depo--pronto .depo__cartao:not([data-pos="0"]) .depo__info{visibility:hidden}
}
.depo--pronto .depo__foco{display:block;position:absolute;inset:0;z-index:6;width:100%;height:100%;
    padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer}
.depo--pronto [data-pos="0"] .depo__foco{display:none}
.depo--pronto .depo__foco:focus-visible{outline:3px solid #FF6601;outline-offset:-3px}

/* controles do destaque */
.depo--pronto [data-pos="0"] .depo__som{display:inline-flex}
.depo--pronto [data-pos="0"] .depo__topo{display:flex}
.depo--pronto [data-pos="0"] .depo__progresso{display:block}
.depo__som{align-items:center;gap:8px;margin-top:14px;min-height:44px;padding:0 18px;border:0;
    border-radius:999px;background:#FF6601;color:#16202A;font-size:14px;font-weight:600;
    cursor:pointer;pointer-events:auto;transition:background-color .2s ease}
.depo__som i{font-size:18px}
.depo__som:hover{background:#fff}
.depo__som[aria-pressed="true"]{background:rgba(255,255,255,.16);color:#fff;
    box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.depo__som[aria-pressed="true"]:hover{background:rgba(255,255,255,.28)}
.depo__progresso{position:absolute;top:12px;left:14px;right:14px;height:3px;border-radius:3px;
    background:rgba(255,255,255,.32);overflow:hidden;pointer-events:none}
.depo__progresso span{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.depo__topo{position:absolute;top:26px;right:12px;z-index:2;gap:8px}
.depo__botao{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
    padding:0;border:0;border-radius:50%;background:rgba(22,32,42,.55);color:#fff;font-size:20px;
    cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .2s ease}
.depo__botao:hover{background:rgba(22,32,42,.8)}
.depo__som:focus-visible,.depo__botao:focus-visible{outline:3px solid #FF6601;outline-offset:2px}
.depo__texto{position:absolute;inset:0;z-index:7;padding:26px 20px 20px;overflow:auto;
    background:rgba(22,32,42,.95);color:#fff;font-size:15px;line-height:1.6}
.depo__texto-nome{margin:0 52px 14px 0;font-family:var(--font-heading);font-size:18px;font-weight:500}
.depo__texto-corpo{color:rgba(255,255,255,.88)}
.depo__fechar{position:absolute;top:14px;right:12px}

.depo__nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:36px}
.depo__seta{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
    padding:0;border:0;border-radius:50%;background:#fff;color:#16202A;font-size:20px;cursor:pointer;
    box-shadow:inset 0 0 0 1.5px rgba(22,32,42,.22);transition:background-color .2s ease,color .2s ease}
.depo__seta:hover{background:#16202A;color:#fff}
.depo__seta:focus-visible{outline:2px solid #16202A;outline-offset:2px}
@media (prefers-reduced-motion: reduce){
    .depo--pronto .depo__cartao,.depo--pronto [data-pos="fora"]{transition:none}
}

/* ---- galeria de fotos: página de um álbum ----
   A capa leva ao Flickr; o selo diz isso sem depender do hover. */
.galeria-album{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center}
@media (min-width:1024px){.galeria-album{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:64px}}
.galeria-album__capa{position:relative;display:block;overflow:hidden;border-radius:14px;background:#16202A;
    aspect-ratio:4/3;box-shadow:0 24px 48px -24px rgba(22,32,42,.45)}
.galeria-album__capa img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.8,.24,1)}
a.galeria-album__capa:hover img{transform:scale(1.03)}
a.galeria-album__capa:focus-visible{outline:3px solid #FF6601;outline-offset:3px}
.galeria-album__selo{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;
    min-height:40px;padding:0 16px;border-radius:999px;background:#FF6601;color:#16202A;font-size:14px;font-weight:600}
.galeria-album__selo i{font-size:16px}

/* ---- documento longo (Política de Privacidade) ----
   Sumário à esquerda, preso na tela no desktop; texto numa coluna de
   leitura. As tabelas do documento ganham caixa branca e rolam de lado
   no celular em vez de espremer as três colunas. */
.documento{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
@media (min-width:1024px){ .documento{grid-template-columns:280px minmax(0,1fr);gap:64px;align-items:start} }
.documento__sumario{align-self:start}
@media (min-width:1024px){
  .documento__sumario{position:sticky;top:calc(var(--altura-cab) + var(--respiro-nav) + 24px);
    max-height:calc(100vh - var(--altura-cab) - var(--respiro-nav) - 48px);overflow:auto}
}
.documento__lista{border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px rgba(22,32,42,.1);padding:18px 20px}
.documento__lista summary{cursor:pointer;list-style:none;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    color:rgba(22,32,42,.66);display:flex;align-items:center;justify-content:space-between}
.documento__lista summary::-webkit-details-marker{display:none}
.documento__lista summary::after{content:'';width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:rotate(45deg) translateY(-3px);transition:transform .2s ease}
.documento__lista[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.documento__lista ol{list-style:none;margin:12px 0 0;padding:0;counter-reset:sec}
.documento__lista li{counter-increment:sec}
.documento__lista a{display:grid;grid-template-columns:26px minmax(0,1fr);padding:6px 0;font-size:14px;line-height:1.4;
    color:rgba(22,32,42,.72);text-decoration:none;transition:color .2s ease}
.documento__lista a::before{content:counter(sec, decimal-leading-zero);font-size:12px;line-height:1.7;color:rgba(22,32,42,.45);font-variant-numeric:tabular-nums}
.documento__lista a:hover,.documento__lista a[aria-current="true"]{color:#B84A00}
.documento__lista a[aria-current="true"]::before{color:#B84A00}
.documento__lista a:focus-visible{outline:2px solid #16202A;outline-offset:2px;border-radius:4px}
.documento__texto{max-width:72ch;font-size:17px;line-height:1.7}
.documento__texto strong{color:#16202A;font-weight:600}
.documento__texto a{word-break:break-word}
.documento__texto table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;background:#fff;
    border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(22,32,42,.1)}
.documento__texto th{text-align:left;vertical-align:bottom;padding:12px 14px;background:#E9EDF1;color:#16202A;
    font-size:13px;font-weight:600;line-height:1.35}
.documento__texto td{padding:12px 14px;vertical-align:top;border-top:1px solid rgba(22,32,42,.1)}
@media (max-width:767.98px){
  .documento__texto table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .documento__texto th,.documento__texto td{min-width:160px}
}