/* =========================================================
   SISEMPPA — folha de estilo única
   1. Tokens        4. Layout        7. Componentes
   2. Reset         5. Header/Footer 8. Formulários
   3. Tipografia    6. Blocos        9. Chat / Cookies
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
    --brand:        #253A96;
    --brand-strong: #1A2A6E;
    --brand-soft:   #EAEEF9;
    --brand-ink:    #2A26B1;

    --accent:       #E70101;
    --accent-soft:  #FDECEC;
    --accent-ink:   #B10000;

    /* O vermelho DOS BOTOES, escolhido pelo cliente em 05/09: #FF0000.
       Par proprio, e nao `--accent`, porque `--accent` tambem pinta selo e
       etiqueta, que sao texto pequeno — e este vermelho da 4,0:1 com branco,
       abaixo do minimo de 4,5:1 para texto normal. Fica valendo onde o texto e
       grande e negrito, onde o minimo e 3:1: e por isso que `.btn--lg` cresceu.
       Fixo nos DOIS temas, de proposito: o cliente escolheu vendo as duas
       versoes lado a lado, e um vermelho que clareia no escuro nao seria o
       vermelho que ele aprovou. */
    --btn-red:       #FF0000;
    --btn-red-hover: #CC0000;   /* 5,9:1 — o hover passa AA com folga */

    /* O MESMO vermelho, para botao de texto NORMAL — pedido da diretoria em
       20/09 para os botoes do assistente e os de baixar PDF. Nenhum deles e
       texto grande, entao o #FF0000 acima reprovaria (4,0:1 contra os 4,5:1
       exigidos). Este da 5,9:1 e e o tom que o site ja usa no hover do
       vermelho grande: na tela le-se como o mesmo vermelho, e a regra de
       contraste continua de pe. Tambem fixo nos dois temas, pela mesma razao
       escrita acima. */
    --btn-red-sm:       #CC0000;
    --btn-red-sm-hover: #A30000;   /* ~8,4:1 — hover precisa ser mais escuro que o repouso */

    --on-brand:     #FFFFFF;
    --on-accent:    #FFFFFF;

    --ink:      #14181D;
    --ink-2:    #3C4550;
    --muted:    #6B7684;
    --line:     #E3E6EA;
    --surface:  #FFFFFF;
    --surface-2:#F6F7F9;
    --surface-3:#EDEFF3;

    --ok:   #17663C;
    --ok-bg:#E7F4EC;
    --err:  #B3261E;
    --err-bg:#FCEDEC;

    --radius:    12px;
    --radius-sm: 8px;
    --radius-lg: 20px;

    --shadow-1: 0 1px 2px rgb(20 24 29 / .06), 0 1px 3px rgb(20 24 29 / .04);
    --shadow-2: 0 4px 12px rgb(20 24 29 / .08), 0 2px 4px rgb(20 24 29 / .04);
    --shadow-3: 0 16px 40px rgb(20 24 29 / .16);

    --container: 1180px;
    --gutter:    clamp(1rem, 4vw, 2rem);

    --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: Georgia, "Times New Roman", serif;

    --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --brand:        #8FA6F2;
        --brand-strong: #AEC0F7;
        --brand-soft:   #1A2142;
        --brand-ink:    #DEE5FB;

        --accent:       #FF6B6B;
        --accent-soft:  #3A1618;
        --accent-ink:   #FF9C9C;

        --on-brand:     #12161B;
        --on-accent:    #12161B;

        --ink:      #ECEFF3;
        --ink-2:    #C2C9D2;
        --muted:    #94A0AE;
        --line:     #2A313A;
        --surface:  #12161B;
        --surface-2:#1A2142;
        --surface-3:#1F262E;

        --ok:   #6FD79C;
        --ok-bg:#12281D;
        --err:  #FF8A80;
        --err-bg:#2A1413;

        --shadow-1: 0 1px 2px rgb(0 0 0 / .4);
        --shadow-2: 0 4px 14px rgb(0 0 0 / .45);
        --shadow-3: 0 18px 44px rgb(0 0 0 / .6);
    }
}

:root[data-theme="dark"] {
    --brand: #8FA6F2; --brand-strong: #AEC0F7; --brand-soft: #1A2142; --brand-ink: #DEE5FB;
    --accent: #FF6B6B; --accent-soft: #3A1618; --accent-ink: #FF9C9C;
    --on-brand: #12161B; --on-accent: #12161B;
    --ink: #ECEFF3; --ink-2: #C2C9D2; --muted: #94A0AE; --line: #2A313A;
    --surface: #12161B; --surface-2: #1A2142; --surface-3: #1F262E;
    --ok: #6FD79C; --ok-bg: #12281D; --err: #FF8A80; --err-bg: #2A1413;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    /* A contagem de 1 é o que para as animações `infinite` (o medalhão do
       assistente, os riscos da faixa de filiação, o "digitando" do chat). Só
       encurtar a duração as fazia recomeçar sem parar — pior que movimento
       lento, virava cintilação para justamente quem pediu menos movimento. */
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-strong); }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { padding: 0; list-style: none; }

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

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Seta de "abre em nova aba" (ver `nova_aba()` em `app/helpers.php`). Herda a
   cor do link e vem menor: é sinalização, não conteúdo. */
.nova-aba {
    display: inline-block;
    margin-left: .3em;
    font-size: .85em;
    line-height: 1;
    vertical-align: baseline;
}

.skip-link {
    position: absolute; left: 8px; top: -60px; z-index: 999;
    padding: .6rem 1rem; background: var(--brand); color: var(--on-brand);
    border-radius: var(--radius-sm); text-decoration: none;
    transition: top .2s var(--ease);
}
/* Sem `color` aqui: a regra de cima já usa `--on-brand`, que vira com o tema.
   O `#fff` que havia aqui dava ~2,3:1 no escuro, onde a marca clareia. */
.skip-link:focus { top: 8px; }

/* Honeypot antispam: fora da tela, invisível a leitores de tela via aria-hidden. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Faixa de homologação — só aparece quando APP_ENV != production. */
.staging-flag {
    padding: .45rem 1rem; text-align: center;
    background: #7A4A00; color: #FFEBC7;
    font-size: .8rem; font-weight: 600; letter-spacing: .02em;
}

/* Faixa da equipe quando o site está fechado ao público. Cores cravadas, como
   a do ambiente de teste: fundo de aviso não pode clarear com o tema. */
.site-fechado-flag {
    margin: 0; padding: .5rem 1rem; text-align: center;
    background: #101733; color: #FFFFFF;
    font-size: .85rem; border-bottom: 3px solid #E70101;
}
.site-fechado-flag a { color: #9FE8FF; font-weight: 700; text-decoration: underline; margin-left: .5rem; }

/* ---------- 3. Tipografia ---------- */
h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); }

.eyebrow {
    font-size: .8rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--brand);
}

/* `overflow-wrap`: o conteúdo migrado do WordPress traz URLs e palavras longas
   que, sem quebra, empurravam a página para o lado no celular. */
.prose { font-size: 1.06rem; color: var(--ink-2); overflow-wrap: break-word; }
.prose > * + * { margin-top: 1.15em; }
.prose h2, .prose h3 { color: var(--ink); margin-top: 2em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose img { border-radius: var(--radius); margin-inline: auto; }
.prose blockquote {
    padding: .2rem 0 .2rem 1.2rem;
    border-left: 3px solid var(--brand);
    color: var(--ink); font-style: italic;
}
/* Tabela larga rola dentro dela mesma, e não a página inteira. */
.prose table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.prose th, .prose td { padding: .6rem .8rem; border: 1px solid var(--line); text-align: left; }

/* ---------- 4. Layout ---------- */
.container {
    width: 100%; max-width: var(--container);
    margin-inline: auto; padding-inline: var(--gutter);
}
.container--narrow { max-width: 760px; }

.section { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section--muted { background: var(--surface-2); }

.section__head {
    display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
    align-items: baseline; justify-content: space-between;
    margin-bottom: 1.75rem;
}
.section__title { color: var(--ink); }
.section__more { font-weight: 600; font-size: .95rem; text-decoration: none; }
.section__more:hover { text-decoration: underline; }

.subsection__title {
    font-size: 1.15rem; color: var(--ink);
    margin: 2rem 0 1rem;
}
.subsection__title:first-child { margin-top: 0; }

.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }

/* ---------- 5. Topbar / Header / Footer ---------- */
.topbar {
    background: var(--brand-ink);
    color: #E3E7FA;
    font-size: .85rem;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .topbar { background: #161A45; }
}
.topbar__inner {
    display: flex; flex-wrap: wrap; gap: .35rem 1.25rem;
    align-items: center; justify-content: space-between;
    padding-block: .5rem;
}
.topbar a { color: inherit; text-decoration: none; opacity: .9; }
.topbar a:hover { opacity: 1; text-decoration: underline; }
.topbar__contact, .topbar__social { display: flex; gap: .6rem; align-items: center; }

.header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: blur(10px); /* Safari até a 17 só lê o prefixado */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; min-height: 76px;
}

/* flex-shrink: 0 na marca e o que impede o cabecalho de "resolver" a falta de
   espaco espremendo o logotipo. O nowrap no subtitulo e o que impede
   "Sindicato dos Servidores do MPPA" de virar tres linhas e empurrar o
   cabecalho de 76px para 121px — era assim que a quebra aparecia. */
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); flex: 0 0 auto; }
.brand img { width: 64px; height: 64px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text strong { font-size: 1.25rem; letter-spacing: -.02em; white-space: nowrap; }
.brand__text small { font-size: .72rem; color: var(--muted); white-space: nowrap; }

.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav__list { display: flex; align-items: center; gap: .25rem; }
.nav__item { position: relative; }
.nav__link {
    display: block; padding: .55rem .8rem; border-radius: var(--radius-sm);
    font-size: .95rem; font-weight: 600; color: var(--ink-2); text-decoration: none;
    white-space: nowrap;
    transition: background .18s var(--ease), color .18s var(--ease);
}
/* "O Sindicato" e "Filie-se" quebravam ao meio antes desta linha. */
.nav__cta { white-space: nowrap; }
.nav__link:hover { background: var(--surface-2); color: var(--ink); }
.nav__link.is-active { color: var(--brand); background: var(--brand-soft); }

.nav__sub {
    position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px;
    padding: .4rem; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-2);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav__item--has-sub:hover .nav__sub,
.nav__item--has-sub:focus-within .nav__sub {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__sub a {
    display: block; padding: .5rem .7rem; border-radius: var(--radius-sm);
    font-size: .92rem; color: var(--ink-2); text-decoration: none;
}
.nav__sub a:hover { background: var(--surface-2); color: var(--brand); }

.nav-toggle {
    display: none; flex-direction: column; gap: 5px;
    padding: .6rem; background: none; border: 1px solid var(--line);
    border-radius: var(--radius-sm); cursor: pointer;
}
.nav-toggle span {
    display: block; width: 22px; height: 2px; background: var(--ink);
    transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* O aperto do cabecalho NAO acaba numa tela larga, e essa foi a leitura errada
   que deixou a faixa antiga (1001-1120px) sem efeito no caso real.
   A conta e fixa: `.container` trava em `--container` (1180px) e desconta o
   gutter, entao a largura util do cabecalho e 1116px em QUALQUER janela a
   partir de ~1244px — 1440px, 1920px, o monitor que for. Alargar a tela nao da
   nem um pixel a mais ao menu, e por isso a faixa com teto nunca resolveu: ela
   so cuidava do trecho estreito, e o cabecalho seguia estourando em 1440px.
   Medido com os 8 itens + os dois botoes, com as fontes ja carregadas: a
   demanda era 1199px contra 1116px. Faltavam 83px em TODA tela larga — era
   assim que "O Sindicato" e "Filie-se" quebravam ao meio no monitor do cliente
   e o cabecalho ia de 76px para 121px de altura.
   Com o aperto abaixo mais o subtitulo escondido, a demanda cai para 1058px e
   sobram 58px de folga. */
@media (min-width: 1151px) {
    .nav { gap: .75rem; }
    .nav__list { gap: .15rem; }
    .nav__link { padding-inline: .45rem; font-size: .9rem; }

    /* O subtitulo da marca custava 174px — o item mais caro do cabecalho, e o
       unico decorativo. Some so onde o menu horizontal disputa espaco com ele:
       no celular a barra vira hamburguer, sobra largura, e ele volta. Continua
       no rodape e na aba do navegador. Foi o que comprou os 83px que faltavam
       sem encurtar "Area do associado", que e rotulo de navegacao e nao enfeite. */
    .brand__text small { display: none; }
}

/* 1000px era otimista: entre 1001px e ~1140px o menu horizontal nao cabia, e o
   que sobrava vazava para fora da tela — a PAGINA INTEIRA rolava na horizontal,
   nao so o menu. O menu precisa de 1058px uteis; contando o gutter e a barra de
   rolagem, isso so acontece a partir de ~1140px. Abaixo disso, hamburguer. */
@media (max-width: 1150px) {
    .nav-toggle { display: flex; }
    .nav {
        position: fixed; inset: 76px 0 auto; z-index: 40;
        flex-direction: column; align-items: stretch; gap: .5rem;
        max-height: calc(100dvh - 76px); overflow-y: auto;
        padding: 1rem var(--gutter) 2rem;
        background: var(--surface); border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-2);
        transform: translateY(-12px); opacity: 0; visibility: hidden;
        transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
    }
    .nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
    .nav__list { flex-direction: column; align-items: stretch; }
    .nav__link { padding: .8rem .7rem; font-size: 1.02rem; }
    .nav__sub {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: 0; border-left: 2px solid var(--line);
        border-radius: 0; margin-left: .7rem; padding-block: 0;
    }
    .nav__cta { text-align: center; }
}

.footer { background: var(--brand-ink); color: #DDE3F7; margin-top: auto; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .footer { background: #14181D; border-top: 1px solid var(--line); }
}
.footer a { color: #EEF1FD; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__grid {
    display: grid; gap: 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.footer__brand p { margin-top: 1rem; font-size: .92rem; opacity: .82; max-width: 42ch; }
.footer__title { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-bottom: .9rem; }
.footer__nav li + li { margin-top: .45rem; }
.footer__nav a, .footer__contact a { font-size: .94rem; }
.footer__contact address { font-style: normal; font-size: .94rem; line-height: 1.8; opacity: .9; }
.footer__contact .btn { margin-top: 1.2rem; }
.footer__bottom { border-top: 1px solid rgb(255 255 255 / .12); }
.footer__bottom-inner {
    display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
    justify-content: space-between; padding-block: 1.1rem;
    font-size: .85rem; opacity: .75;
}

/* ---------- 6. Blocos de página ---------- */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem); background: var(--surface-2); }
.hero__inner {
    display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}
.hero__title { margin-block: .7rem 1rem; font-family: var(--font-display); }
.hero__text { font-size: 1.08rem; color: var(--ink-2); max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

.hero__feature {
    position: relative; display: block; overflow: hidden;
    border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
    text-decoration: none; color: #fff;
}
.hero__feature img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s var(--ease); }
.hero__feature:hover img { transform: scale(1.04); }
.hero__feature-body {
    position: absolute; inset: auto 0 0; padding: 1.5rem;
    background: linear-gradient(to top, rgb(10 8 8 / .92), rgb(10 8 8 / .1));
}
.hero__feature-body h2 { font-size: 1.3rem; margin-block: .5rem .3rem; }
.hero__feature-body time { font-size: .85rem; opacity: .82; }

/* Carrossel da home, no lugar do .hero__feature. Mesma proporção 3/2 e mesma
   moldura: a caixa não muda de tamanho quando o cliente publica o primeiro
   slide ou despublica o último, e a home nunca "pula". */
.hero-carousel {
    position: relative; overflow: hidden;
    border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
}

/* A faixa é o que faz o carrossel funcionar SEM JavaScript: sem script ela
   continua rolando com o dedo, e o snap para em cada imagem. As setas e as
   bolinhas são acréscimo do app.js. */
.hero-carousel__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
    overflow-x: auto; scroll-snap-type: x mandatory;
    /* A barra de rolagem apareceria por cima da imagem, dentro da moldura. */
    scrollbar-width: none; -ms-overflow-style: none;
}
.hero-carousel__track::-webkit-scrollbar { display: none; }

.hero-carousel__slide { scroll-snap-align: center; overflow: hidden; }

.hero-carousel__link {
    position: relative; display: block; color: #fff; text-decoration: none;
}
.hero-carousel__link img {
    width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
    transition: transform .5s var(--ease);
}
a.hero-carousel__link:hover img { transform: scale(1.04); }

/* padding-right abre espaco para as bolinhas, que ficam no mesmo canto.
   O degrade termina em transparente de verdade, e nao em .1: as artes que o
   cliente publica costumam ter texto embutido na propria imagem, e um veu
   cinza por cima dela inteira sujava a arte sem ajudar a legenda. Em troca, a
   base ficou opaca e o degrade passou a subir em duas paradas — a legenda
   ganha contraste onde ela esta, e a arte fica limpa onde ela nao esta. */
.hero-carousel__body {
    position: absolute; inset: auto 0 0; padding: 1.5rem 6rem 1.5rem 1.5rem;
    background: linear-gradient(to top,
        rgb(10 8 8 / .95) 0%,
        rgb(10 8 8 / .85) 45%,
        rgb(10 8 8 / .45) 75%,
        rgb(10 8 8 / 0) 100%);
}
.hero-carousel__body h2 { font-size: 1.3rem; margin-block: .5rem .3rem; }
.hero-carousel__body p { font-size: .92rem; opacity: .85; }

.hero-carousel__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center;
    width: 40px; height: 40px; padding: 0;
    border: 0; border-radius: 999px; cursor: pointer;
    background: rgb(10 8 8 / .55); color: #fff;
    font-size: 1.6rem; line-height: 1;
    transition: background .2s var(--ease);
}
.hero-carousel__arrow:hover { background: rgb(10 8 8 / .8); }
.hero-carousel__arrow--prev { left: .6rem; }
.hero-carousel__arrow--next { right: .6rem; }

/* Botao de pausa da passagem automatica. Mesma linguagem visual das setas:
   circulo escuro translucido, para funcionar sobre qualquer arte. */
.hero-carousel__toggle {
    position: absolute; top: .6rem; right: .6rem; z-index: 2;
    display: grid; place-items: center;
    width: 34px; height: 34px; padding: 0;
    border: 0; border-radius: 999px; cursor: pointer;
    background: rgb(10 8 8 / .55); color: #fff;
    transition: background .2s var(--ease);
}
.hero-carousel__toggle:hover { background: rgb(10 8 8 / .8); }
.hero-carousel__toggle svg { fill: currentColor; }

/* Pausado, o botao passa a oferecer "tocar" — e o icone acompanha. */
.hero-carousel__toggle .hero-carousel__ico-toca { display: none; }
.hero-carousel__toggle.is-paused .hero-carousel__ico-pausa { display: none; }
.hero-carousel__toggle.is-paused .hero-carousel__ico-toca { display: block; }

.hero-carousel__dots {
    position: absolute; right: 1.2rem; bottom: 1.5rem;
    display: flex; gap: .45rem;
}
.hero-carousel__dot {
    width: 11px; height: 11px; padding: 0; cursor: pointer;
    border: 1px solid rgb(255 255 255 / .8); border-radius: 999px;
    background: transparent;
    transition: background .2s var(--ease);
}
.hero-carousel__dot.is-active { background: #fff; }

/* Alvo de toque de 40px no celular sem engordar a bolinha desenhada: o
   ::before invisível estende a área clicável para fora dela. */
@media (pointer: coarse) {
    .hero-carousel__dot { position: relative; }
    .hero-carousel__dot::before { content: ""; position: absolute; inset: -14px; }
}

.tag {
    display: inline-block; padding: .2rem .6rem; border-radius: 999px;
    background: var(--accent); color: var(--on-accent); font-size: .72rem;
    font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

.page-hero { padding-block: clamp(2rem, 4vw, 3.25rem); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.page-hero__title { margin-top: .5rem; }
.page-hero__sub { margin-top: .6rem; color: var(--muted); max-width: 62ch; }

.breadcrumb { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .85rem; color: var(--muted); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); text-decoration: underline; }

.shortcuts {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.shortcuts a,
.shortcuts button {
    display: flex; flex-direction: column; gap: .35rem; height: 100%; width: 100%;
    padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); text-decoration: none; color: var(--ink);
    font: inherit; text-align: left; cursor: pointer;
    transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.shortcuts a:hover,
.shortcuts button:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.shortcuts strong { font-size: 1.05rem; }
.shortcuts span { font-size: .9rem; color: var(--muted); }

/* ---------- Vitrine do assistente virtual ----------
   Logo abaixo do topo, na largura toda. A FAIXA e clara (degrade do tom suave
   da marca para a superficie), e o CARTAO branco flutua sobre ela: o topo ja e
   escuro e a faixa de filiacao la embaixo tambem — uma terceira faixa escura
   se fundiria com o topo e brigaria com a de filiacao, que pede filiacao
   enquanto esta pede pergunta. */
.assistente-faixa {
    padding-block: clamp(2rem, 4.5vw, 3.5rem);
    background: linear-gradient(180deg, var(--brand-soft), var(--surface));
}
.assistente {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
    gap: clamp(1.5rem, 4vw, 3.25rem);
    padding: clamp(1.5rem, 4vw, 3rem);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
    animation: assistente-entra .6s var(--ease) backwards;
}
@keyframes assistente-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* O medalhao da imagem. Degrade CRAVADO nos dois temas, e nao
   var(--brand-ink)/var(--brand): e uma marca, como a logo, nao uma superficie
   que acompanha o tema — com as variaveis, o azul CLAREIA no escuro e a arte
   clara some dentro dele. Ele aparece por tras de imagem com transparencia e
   enquanto a imagem carrega. Mesma regra do `.btn--light` e da faixa de
   filiacao. */
.assistente__marca {
    position: relative; flex: none;
    width: clamp(150px, 19vw, 230px); aspect-ratio: 1; border-radius: 50%;
    background: linear-gradient(135deg, #2A26B1, #253A96);
    box-shadow: 0 18px 40px rgb(37 58 150 / .28);
    animation: assistente-flutua 5s ease-in-out infinite;
}
.assistente__marca img {
    display: block; width: 100%; height: 100%;
    border-radius: 50%; object-fit: cover;
}
/* Um anel que se expande e some, como sinal de "estou aqui". Em
   movimento reduzido, a regra global roda uma vez so e ele para. */
.assistente__marca::after {
    content: ""; position: absolute; inset: -10px; border-radius: 50%;
    border: 2px solid var(--brand); opacity: 0;
    animation: assistente-pulso 2.8s ease-out infinite;
    pointer-events: none;
}
@keyframes assistente-flutua {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}
@keyframes assistente-pulso {
    0%   { opacity: .45; transform: scale(.94); }
    100% { opacity: 0;   transform: scale(1.1); }
}

.assistente__texto { min-width: 0; }
.assistente__selo {
    display: flex; align-items: center; gap: .5rem;
    margin: 0 0 .5rem; font-size: .78rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--brand);
}
/* O ponto verde de "disponivel", o sinal que todo mundo le em aplicativo de
   conversa. So decorativo: a palavra "24 horas" ja diz isso por escrito. */
.assistente__online {
    flex: none; width: .6rem; height: .6rem; border-radius: 50%;
    background: #1FBE5A; box-shadow: 0 0 0 3px rgb(31 190 90 / .22);
}
.assistente__titulo {
    margin: 0; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.45rem);
    line-height: 1.15; color: var(--ink);
}
.assistente__nome { color: var(--brand); }
.assistente__linha { margin: .7rem 0 0; font-size: 1.05rem; color: var(--ink-2); max-width: 56ch; }

.assistente__perguntas {
    display: flex; flex-wrap: wrap; gap: .6rem;
    margin: 1.3rem 0 0; padding: 0; list-style: none;
}
/* Vermelho pedido pela diretoria em 20/09. `#fff` cravado, e nao
   `var(--on-brand)`: aquele vira PRETO no tema escuro, e o fundo aqui e fixo
   nos dois temas — texto preto sobre vermelho seria o botao ilegivel. */
.assistente__perguntas button {
    font: inherit; font-size: .95rem; font-weight: 600;
    padding: .6rem 1.05rem; border-radius: 999px; cursor: pointer;
    border: 1px solid transparent; background: var(--btn-red-sm); color: #fff;
    transition: transform .2s var(--ease), background .2s var(--ease);
}
/* O anel de foco continua sendo o `:focus-visible` global, que desenha FORA do
   botao, sobre o fundo da pagina — por isso a borda azul do hover saiu daqui:
   contorno azul em pilula vermelha nao e destaque, e ruido. */
.assistente__perguntas button:hover,
.assistente__perguntas button:focus-visible { transform: translateY(-2px); background: var(--btn-red-sm-hover); }

.assistente__acao  { margin-top: 1.4rem; }
.assistente__aviso { margin: .9rem 0 0; font-size: .86rem; color: var(--muted); max-width: 60ch; }

@media (max-width: 640px) {
    .assistente { grid-template-columns: minmax(0, 1fr); justify-items: start; }
    .assistente__marca { width: 132px; }
    .assistente__acao, .assistente__acao .btn { width: 100%; }
}

/* ---------- Faixa de filiacao ----------
   Marinho com corte vermelho, escolhido pelo cliente em 05/09 sobre outros dois
   desenhos. O fundo e FIXO nos dois temas, como o do rodape: e uma faixa
   escura de propriedade propria, nao uma superficie que acompanha o tema.
   Antes era var(--accent), o coral, que no tema escuro clareava e brigava com
   tudo em volta. */
.cta-band { position: relative; overflow: hidden; background: #101733; color: #fff; }

/* Os riscos vermelhos que deslizam devagar atras do texto. Ficam so a esquerda
   e sob 20% de opacidade: passar disso vira fundo listrado e o texto sofre. */
.cta-band__corte {
    position: absolute; z-index: 0; inset: 0 auto 0 0; width: 46%;
    background: linear-gradient(105deg, transparent 0 38%, rgb(255 0 0 / .16) 38% 42%, transparent 42%),
                linear-gradient(105deg, transparent 0 52%, rgb(255 0 0 / .10) 52% 60%, transparent 60%);
    animation: cta-band-desliza 12s ease-in-out infinite alternate;
}
@keyframes cta-band-desliza { from { transform: translateX(-6%); } to { transform: translateX(10%); } }

.cta-band__inner {
    position: relative; z-index: 1;
    display: flex; flex-wrap: wrap; gap: 1.5rem;
    align-items: center; justify-content: space-between;
    padding-block: clamp(2rem, 4vw, 3rem);
}
.cta-band h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }
.cta-band p { margin-top: .4rem; opacity: .9; max-width: 52ch; }

/* A regua que se estica na entrada. `backwards`, nunca `forwards`: prender a
   largura no fim mataria qualquer regra de autor que mexesse nela depois —
   mesma armadilha que desligou o hover dos cartoes da diretoria. */
.cta-band__regua {
    display: block; width: 64px; height: 5px; border-radius: 3px;
    background: var(--btn-red); margin-bottom: .9rem;
    animation: cta-band-estica .8s var(--ease) .3s backwards;
}
@keyframes cta-band-estica { from { width: 0; opacity: 0; } to { width: 64px; opacity: 1; } }

.error-page { padding-block: clamp(3.5rem, 8vw, 6rem); text-align: center; }
.error-page__code { font-size: clamp(3.5rem, 10vw, 6rem); font-weight: 800; color: var(--brand); line-height: 1; }
.error-page__title { margin-block: .5rem .75rem; }
.error-page__text { color: var(--muted); }
.error-page__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 2rem; }

/* ---------- 7. Componentes ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .7rem 1.25rem; border: 1px solid transparent; border-radius: var(--radius-sm);
    font-size: .95rem; font-weight: 600; text-decoration: none; cursor: pointer;
    transition: background .18s var(--ease), color .18s var(--ease),
                border-color .18s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--sm { padding: .45rem .9rem; font-size: .87rem; }

/* 1.18rem e peso 700 nao sao capricho: sao o que faz o botao contar como TEXTO
   GRANDE na WCAG (>= 18,66px e negrito), onde o minimo de contraste cai de
   4,5:1 para 3:1. E o que legitima o #FF0000, que da 4,0:1 com branco. Todo
   `.btn--lg` do site e chamada principal — filiacao, login, envio de
   formulario —, entao crescer combina com a funcao. */
.btn--lg { padding: .9rem 1.7rem; font-size: 1.18rem; font-weight: 700; }

/* O vermelho do cliente, por token proprio. Ver `--btn-red` nos tokens: nao usa
   `--accent` porque aquele tambem pinta selo e etiqueta, que sao texto pequeno
   e precisariam de 4,5:1. */
.btn--primary { background: var(--btn-red); color: #fff; }
.btn--primary:hover { background: var(--btn-red-hover); color: #fff; }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn--outline { background: transparent; border-color: var(--brand); color: var(--brand); }
.btn--outline:hover { background: var(--brand); color: var(--on-brand); }

/* Baixar/abrir PDF, vermelho por pedido da diretoria em 20/09. Modificador
   proprio, e nao `.btn--outline` repintado: aquela classe veste outros doze
   botoes — carregar o mapa, entrar na area restrita, site do convenio — e
   todos virariam vermelhos junto.

   Fundo solido em vez de contorno vermelho: contorno seria texto vermelho
   sobre `--surface`, que no tema escuro cai para 2,5:1. Fundo com `#fff`
   resolve nos dois temas com um valor so. */
.btn--pdf { background: var(--btn-red-sm); border-color: transparent; color: #fff; }
.btn--pdf:hover { background: var(--btn-red-sm-hover); color: #fff; }
/* Fundo branco fixo pede cor fixa: var(--brand-ink) clareia no escuro e sumia. */
.btn--light { background: #fff; color: #2A26B1; }
.btn--light:hover { background: #F3F3F4; color: #1A2A6E; }
.btn--outline-light { background: transparent; border-color: rgb(255 255 255 / .4); color: #fff; }
.btn--outline-light:hover { background: rgb(255 255 255 / .12); color: #fff; text-decoration: none; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

.card {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: transparent; }
.card__media { display: block; overflow: hidden; background: var(--surface-3); }
.card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { display: flex; flex-direction: column; flex: 1; gap: .55rem; padding: 1.25rem; }
.card__date { font-size: .8rem; font-weight: 600; color: var(--brand); }
.card__title { font-size: 1.08rem; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a:hover { color: var(--brand); }
.card__excerpt { font-size: .92rem; color: var(--muted); flex: 1; }
.card__link { font-size: .88rem; font-weight: 600; color: var(--brand); }

.media-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1rem; overflow: hidden;
}
.media-card__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: #000; }
.media-card__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media-card h2, .media-card h4 { font-size: 1rem; margin-top: .85rem; }
.media-card p { font-size: .9rem; color: var(--muted); margin-top: .3rem; }
.media-card time { display: block; font-size: .82rem; color: var(--brand); margin-top: .4rem; }


/* Card de álbum: o mesmo media-card, mas o card inteiro é o link e a capa
   ocupa o lugar que o vídeo ocupa no card de vídeo. */
.media-card--album { display: block; color: inherit; text-decoration: none; }
.media-card--album:hover { border-color: var(--brand); }
.media-card--album:hover h2 { color: var(--brand); }
.media-card__cover {
    display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--radius-sm); background: var(--surface-3);
}
.media-card__meta { font-size: .85rem; color: var(--muted); margin-top: .5rem; }
.media-card__meta time { display: inline; color: inherit; margin: 0; }

/* Separa "Outras fotos" dos álbuns acima, sem abrir uma seção nova. */
.section__head--spaced { margin-top: 2.5rem; }
.gallery { columns: 3 260px; column-gap: 1.25rem; }
.gallery__item { break-inside: avoid; margin-bottom: 1.25rem; }
.gallery__item img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-1); }
.gallery__item figcaption { padding-top: .6rem; font-size: .88rem; color: var(--muted); }
.gallery__item strong { display: block; color: var(--ink); font-weight: 600; }

.photo-card { display: block; text-decoration: none; color: var(--ink); }
.photo-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.photo-card span { display: block; margin-top: .55rem; font-size: .9rem; }

/* Logo sozinha nao diz o que e: cada convenio ganha o nome embaixo e um palco
   branco FIXO para a logo, que e feita para fundo claro e sumia no tema escuro. */
.partner-strip {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.partner-strip a {
    display: flex; flex-direction: column; height: 100%; overflow: hidden; text-decoration: none;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.partner-strip a:hover { transform: translateY(-3px); border-color: var(--brand); }
.partner-strip__logo {
    display: grid; place-items: center; height: 110px; padding: 1rem;
    background: #fff; border-bottom: 1px solid var(--line);
}
.partner-strip img { max-height: 78px; max-width: 100%; width: auto; object-fit: contain; }
.partner-strip__name { padding: .8rem 1rem; font-weight: 700; font-size: .95rem; color: var(--ink); text-align: center; }
@media (prefers-reduced-motion: reduce) { .partner-strip a { transition: none; } .partner-strip a:hover { transform: none; } }

/* A logo ganha um palco proprio: fundo branco FIXO nos dois temas, porque logo de
   parceiro e feita para fundo claro — num cartao escuro o texto escuro dela
   some. A logo cresce de 64px para 110px de altura maxima. */
.partner-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.partner-card:hover { transform: translateY(-3px); border-color: var(--brand); }
.partner-card__logo {
    display: grid; place-items: center; width: 100%; height: 170px; padding: 1.4rem;
    background: #fff; border-bottom: 1px solid var(--line);
}
.partner-card__logo img { max-height: 110px; max-width: 100%; width: auto; object-fit: contain; }
.partner-card__body { display: flex; flex-direction: column; gap: .7rem; flex: 1; padding: 1.3rem 1.4rem 1.5rem; }
/* Categoria colada no nome: o gap do corpo (.7rem) a afastava demais. */
.partner-card__cat { margin-bottom: -.4rem; }
.partner-card h3 { font-size: 1.15rem; }
.partner-card__benefit { font-size: .95rem; color: var(--muted); flex: 1; }
/* Mesmo vermelho dos botoes de texto normal do site (assistente, baixar PDF):
   --btn-red-sm, que passa o contraste de 4,5:1. */
.partner-card__site { margin-top: .4rem; background: var(--btn-red-sm); color: #fff; }
.partner-card__site:hover { background: var(--btn-red-sm-hover); color: #fff; }
@media (prefers-reduced-motion: reduce) { .partner-card { transition: none; } .partner-card:hover { transform: none; } }

.doc-list__item + .doc-list__item { margin-top: .6rem; }
.doc-list a {
    display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center;
    padding: 1rem 1.15rem; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius);
    text-decoration: none; color: var(--ink);
    transition: border-color .2s var(--ease), background .2s var(--ease);
}
.doc-list a:hover { border-color: var(--brand); background: var(--brand-soft); }
.doc-list__badge {
    padding: .18rem .6rem; border-radius: 999px; background: var(--surface-3);
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2);
}
.doc-list__title { flex: 1; font-weight: 600; }
.doc-list__meta { font-size: .82rem; color: var(--muted); }

.doc-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.doc-item {
    display: flex; flex-direction: column; gap: .55rem; align-items: flex-start;
    padding: 1.4rem; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius);
}
.doc-item__badge {
    padding: .18rem .6rem; border-radius: 999px; background: var(--brand-soft);
    color: var(--brand); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.doc-item__title { font-size: 1.02rem; }
.doc-item__desc { font-size: .9rem; color: var(--muted); flex: 1; }
.doc-item__meta { font-size: .82rem; color: var(--muted); }
.doc-item__cta { margin-top: .4rem; }

/* Documento restrito: só aparece na lista com sessão de associado ativa. */
.doc-item__badge--restricted {
    background: transparent;
    color: var(--ink-2);
    border: 1px solid var(--line);
}
.doc-item__badges { display: flex; gap: .4rem; flex-wrap: wrap; }

/* Chamada para quem NÃO está logado: explica que há mais documentos. */
.doc-restricted-note {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    padding: 1rem 1.2rem; margin-bottom: 1.75rem;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--radius); font-size: .93rem; color: var(--ink-2);
}

/* ---------- Entrada do associado (login, cadastro, senha) ----------
   Páginas públicas, servidas pelo layout `main`. A área logada em si
   tem folha própria, member.css. */

.member-auth { padding: 3rem 0 4rem; }

.member-auth__card {
    max-width: 32rem; margin: 0 auto; padding: 2rem;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-1);
}

/* O cadastro pede matrícula, lotação e CPF: cabe mais largo. */
.member-auth__card--wide { max-width: 46rem; }

.member-auth__title { font-size: 1.4rem; margin-bottom: .2rem; }
.member-auth__sub { color: var(--muted); font-size: .92rem; margin-bottom: 1.6rem; }

.member-auth__foot {
    margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
    font-size: .9rem; color: var(--muted); display: grid; gap: .4rem;
}

.tabs { display: inline-flex; gap: .25rem; padding: .25rem; background: var(--surface-3); border-radius: 999px; margin-bottom: 2rem; }
.tabs__item {
    padding: .5rem 1.2rem; border-radius: 999px; font-size: .92rem;
    font-weight: 600; text-decoration: none; color: var(--ink-2);
}
.tabs__item.is-active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-1); }

.pagination { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: 2.5rem; }
.pagination__item {
    display: grid; place-items: center; min-width: 42px; padding: .5rem .8rem;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    font-size: .92rem; font-weight: 600; text-decoration: none; color: var(--ink-2);
}
.pagination__item:hover { border-color: var(--brand); color: var(--brand); }
.pagination__item.is-current { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.pagination__gap { display: grid; place-items: center; padding-inline: .3rem; color: var(--muted); }

.results-count { margin-bottom: 1.5rem; font-size: .9rem; color: var(--muted); }

.empty {
    padding: 3rem 1.5rem; text-align: center;
    background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--radius);
}
.empty p { color: var(--muted); margin-bottom: 1rem; }

.alert { padding: 1rem 1.2rem; border-radius: var(--radius); margin-bottom: 1.75rem; font-size: .95rem; }
.alert--success { background: var(--ok-bg); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); }
.alert--error { background: var(--err-bg); color: var(--err); border: 1px solid color-mix(in srgb, var(--err) 30%, transparent); }

.article__header { padding-block: clamp(2rem, 4vw, 3rem) 1.5rem; }
.article__title { margin-top: .8rem; font-family: var(--font-display); }
.article__meta { margin-top: .9rem; font-size: .9rem; color: var(--muted); }
.article__cover { margin-bottom: 2rem; }
.article__cover img { width: 100%; border-radius: var(--radius-lg); }
.article__cover figcaption { padding-top: .6rem; font-size: .85rem; color: var(--muted); }
.article__lead {
    font-size: 1.2rem; line-height: 1.55; color: var(--ink);
    padding-left: 1.1rem; border-left: 3px solid var(--brand); margin-bottom: 2rem;
}

.article__video { margin-top: 2rem; }

.share {
    display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center;
    margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
    font-size: .9rem; color: var(--muted);
}
.share a { font-weight: 600; text-decoration: none; }
.share a:hover { text-decoration: underline; }

.benefits li { position: relative; padding-left: 1.6rem; font-size: .95rem; color: var(--ink-2); }
.benefits li + li { margin-top: .7rem; }
.benefits li::before {
    content: ""; position: absolute; left: 0; top: .55rem;
    width: 8px; height: 8px; border-radius: 50%; background: var(--brand);
}
.benefits strong { color: var(--ink); }

.note {
    margin-top: 2rem; padding: 1.4rem;
    background: var(--surface-2); border-radius: var(--radius); border: 1px solid var(--line);
}
.note h2,
.note h3 { font-size: 1rem; margin-bottom: .7rem; }
.note ol { padding-left: 1.2rem; list-style: decimal; font-size: .93rem; color: var(--ink-2); }
.note li + li { margin-top: .4rem; }
.note p { font-size: .93rem; color: var(--ink-2); margin-bottom: .8rem; }

/* A ressalva de cada passo da filiação: quem não tem conta gov.br, o endereço
   escrito por extenso para quem não usa programa de e-mail. É informação de
   apoio — menor, mas não apagada (o `--muted` reprovaria em texto pequeno). */
.note__aside { font-size: .86rem; color: var(--ink-2); margin: .6rem 0 0; }

/* Os passos da filiação. O primeiro é onde a pessoa está agora — sem essa
   marca, o cliente leu a lista inteira sem perceber que o passo 1 era o
   formulário ao lado (achado dele, 21/09, com a tela já no ar). */
.passos__aqui {
    color: var(--ink);
    /* `list-style` continua decimal: o destaque é a marca à esquerda e o
       peso do texto, não trocar o número por um símbolo. */
}
.passos__aqui::marker { color: var(--accent-ink); font-weight: 700; }
.passos__aqui strong { color: var(--accent-ink); }

/* A escolha do jeito de assinar: os dois com o mesmo peso, porque nenhum é
   "o certo" — o gov.br poupa a impressora, a caneta não pede conta nenhuma. */
.passos__escolha {
    list-style: none;
    margin: .45rem 0 .5rem;
    padding-left: 0;
    display: grid;
    gap: .35rem;
}
.passos__escolha li {
    padding: .45rem .6rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

/* A mesma escolha, na tela do protocolo: dois cartões de peso igual. Em tela
   estreita um cai embaixo do outro, e a ordem (gov.br primeiro) segue a do
   PDF e a do e-mail. */
.escolha {
    display: grid;
    gap: 1rem;
    margin: 1rem 0 .4rem;
}
@media (min-width: 720px) {
    .escolha { grid-template-columns: 1fr 1fr; }
}
.escolha__opcao {
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.escolha__opcao h3 {
    font-size: .98rem;
    margin-bottom: .5rem;
    color: var(--ink);
}
.escolha__opcao p { font-size: .9rem; color: var(--ink-2); margin-bottom: .7rem; }
.escolha__opcao .note__aside { margin-bottom: 0; }

/* Os dois caminhos de devolver a ficha assinada, lado a lado — e um embaixo do
   outro no celular, sem apertar o alvo de toque. */
.acoes-lado-a-lado { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0 0 .4rem; }

.faq__item {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: .9rem 1.1rem; background: var(--surface);
}
.faq__item + .faq__item { margin-top: .6rem; }
.faq__item summary { font-weight: 600; cursor: pointer; font-size: .95rem; }
.faq__item summary::marker { color: var(--brand); }
.faq__item p { margin-top: .7rem; font-size: .92rem; color: var(--muted); }

.contact-info { font-style: normal; font-size: .95rem; line-height: 1.9; color: var(--ink-2); }
.map { margin-block: 1.5rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.map iframe { width: 100%; height: 260px; border: 0; }

/* O mapa adormecido ocupa a mesma altura do iframe que vai substitui-lo: sem
   isso a pagina saltaria no clique, empurrando o FAQ logo abaixo. */
.map--adormecido {
    min-height: 260px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: .75rem;
    padding: 1.25rem; text-align: center; background: var(--surface-2);
}
.map__aviso { margin: 0; color: var(--muted); font-size: .92rem; max-width: 34ch; }
.map__acoes { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }

/* ---------- Agenda de assembleias ----------
   O cartao e horizontal e ancorado no bloco de data: numa agenda a pessoa
   procura "quando" antes de "o que", ao contrario da lista de noticias.
   Abaixo de 560px o bloco de data vira uma faixa em cima, senao o titulo
   ficaria espremido em duas palavras por linha. */
.event-list { display: grid; gap: 1rem; }
.event-list--single { max-width: 720px; }

.event-card {
    display: flex; gap: 1.25rem; align-items: stretch;
    padding: 1.1rem 1.3rem;
    background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}
.event-card:hover { border-color: var(--brand); }

/* Realizado fica visivelmente mais discreto, mas continua legivel: e material
   de consulta, nao lixo. */
.event-card--past { box-shadow: none; background: transparent; }
.event-card--past .event-card__date { background: var(--surface-3); color: var(--ink-2); }

.event-card__date {
    flex: 0 0 auto; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    min-width: 4.6rem; padding: .6rem .5rem;
    background: var(--brand-soft); color: var(--brand);
    border-radius: var(--radius-sm); line-height: 1.15;
}
.event-card__date strong { font-size: 1.7rem; font-weight: 700; }
.event-card__date span { font-size: .74rem; font-weight: 700; letter-spacing: .08em; }
.event-card__date small { font-size: .72rem; color: var(--muted); }

.event-card__body { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.event-card__badges { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0; }
.event-card__badge {
    padding: .18rem .6rem; border-radius: 999px; background: var(--surface-3);
    color: var(--ink-2); font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
}
.event-card__badge--doc { background: var(--accent-soft); color: var(--accent-ink); }
.event-card__badge--past { background: transparent; border: 1px solid var(--line); }

.event-card__title { font-size: 1.05rem; line-height: 1.35; }
.event-card__title a { text-decoration: none; color: var(--ink); }
.event-card__title a:hover { text-decoration: underline; }
.event-card__meta { font-size: .85rem; color: var(--muted); }
.event-card__desc { font-size: .92rem; color: var(--ink-2); }
.event-card__cta { font-size: .9rem; font-weight: 600; text-decoration: none; }
.event-card__cta:hover { text-decoration: underline; }

/* Capa do evento. Largura fixa e `object-fit: cover` porque as imagens vem do
   cliente em proporcoes quaisquer: sem isso, uma foto em retrato esticaria o
   cartao inteiro e a lista perderia o ritmo. */
.event-card__cover {
    flex: 0 0 auto; width: 200px; align-self: stretch;
    border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-3);
}
.event-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-card--past .event-card__cover { opacity: .75; }

@media (max-width: 860px) {
    .event-card__cover { width: 140px; }
}

@media (max-width: 560px) {
    .event-card { flex-direction: column; gap: .9rem; }
    .event-card__date { flex-direction: row; gap: .4rem; align-items: baseline; min-width: 0; }
    .event-card__date strong { font-size: 1.25rem; }
    /* Em coluna a capa vira faixa no topo, com altura fixa: `stretch` numa
       coluna a deixaria do tamanho do texto. */
    .event-card__cover { width: 100%; height: 170px; align-self: auto; order: -1; }
}

/* Quando e onde, antes do texto: e o que a pessoa abriu a pagina para saber. */
.event-facts {
    display: grid; gap: 1rem 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    padding: 1.1rem 1.3rem; margin-block: 1.5rem;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--radius);
}
.event-facts dt {
    font-size: .74rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--muted); margin-bottom: .25rem;
}
.event-facts dd { font-size: 1rem; color: var(--ink); }
.event-facts__sub { font-size: .88rem; color: var(--ink-2); }

.event-doc {
    display: flex; flex-direction: column; align-items: flex-start; gap: .6rem;
    padding: 1.2rem 1.3rem; margin-block: 2rem;
    background: var(--surface); border: 1px solid var(--line);
    border-left: 3px solid var(--brand); border-radius: var(--radius);
}
.event-doc__title { font-size: 1rem; }
.event-doc__name { font-weight: 600; color: var(--ink); }
.event-doc__size { font-weight: 400; font-size: .85rem; color: var(--muted); margin-left: .4rem; }
.event-doc__note { font-size: .9rem; color: var(--ink-2); }

/* O botao de guardar na agenda. A nota fica ao lado no desktop e embaixo no
   telefone: e ela que explica o que o arquivo faz, e quem nunca baixou um .ics
   nao adivinha pelo rotulo do botao. */
.article__agendar {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    margin-block: 2rem 1rem;
}
.article__agendar-nota { color: var(--muted); font-size: .88rem; max-width: 46ch; }

.article__back { margin-block: 2rem; }


/* ---------- Diretoria e gestões anteriores ---------- */

/* A faixa que abre a página com o nome próprio da gestão. Sem ela a página
   dizia só "Gestão atual", e o nome que o sindicato escolheu para a própria
   gestão não aparecia em lugar nenhum. */
.gestao-faixa {
    padding: 1.5rem 1.6rem; margin-bottom: 2rem;
    background: var(--brand-soft); border-radius: var(--radius-lg);
    border-left: 4px solid var(--brand);
}
.gestao-faixa__rotulo {
    font-size: .75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--brand);
}
.gestao-faixa__nome {
    font-family: var(--font-display); font-size: clamp(1.35rem, 3vw, 1.9rem);
    line-height: 1.2; color: var(--ink); margin-top: .15rem;
}
.gestao-faixa__meta {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin-top: .4rem; font-size: .9rem; color: var(--ink-2);
}

.board-grid {
    display: grid; gap: 1.25rem; margin-bottom: 2rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
}
/* A fila de destaque: no máximo dois, e largos. `auto-fill` aqui encheria a
   linha de colunas vazias quando só há duas pessoas. */
.board-grid--destaque {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 340px));
    justify-content: start;
}

.board-card {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden;
    transition: box-shadow .2s var(--ease), transform .2s var(--ease);
    animation: board-card-in .5s var(--ease) backwards;
    animation-delay: min(calc(var(--i, 0) * 70ms), .6s);
}
.board-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }

/* A dupla à frente da gestão entra com mais presença: nasce um pouco menor
   e cresce até o tamanho final, não só sobe e aparece como as demais. */
.board-card--destaque { animation-name: board-card-in-destaque; animation-duration: .6s; }
.board-card--destaque:hover { transform: translateY(-4px); }

@keyframes board-card-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes board-card-in-destaque {
    from { opacity: 0; transform: translateY(20px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Retrato 4:5, não círculo: círculo corta cabelo e ombro, e o que chega é
   quase sempre recorte de foto de rosto. */
.board-card__retrato {
    position: relative; aspect-ratio: 4 / 5;
    background: var(--surface-3); overflow: hidden;
}
.board-card__foto {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .5s var(--ease);
}
.board-card:hover .board-card__foto { transform: scale(1.05); }

/* O estado SEM foto é o normal, não a exceção: a gestão nova estreia com
   ninguém fotografado. Então ele é desenhado como um retrato institucional
   em falta — iniciais grandes e a estrela da marca ao fundo —, e não como
   uma imagem que não carregou. */
.board-card__iniciais {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 6.9L18.29 13.34L25.13 13.53L19.71 17.71L21.64 24.27L16 20.4L10.36 24.27L12.29 17.71L6.87 13.53L13.71 13.34Z' fill='%23253A96' fill-opacity='.09'/%3E%3C/svg%3E")
        no-repeat 118% 116% / 62%,
        linear-gradient(160deg, var(--brand-soft), var(--surface-3));
    color: var(--brand);
    font-size: clamp(1.9rem, 6vw, 2.6rem); font-weight: 700; letter-spacing: .03em;
}
.board-card--destaque .board-card__iniciais { font-size: clamp(2.4rem, 7vw, 3.4rem); }

/* A estrela e um data URI, e data URI nao le variavel de CSS: o azul dela
   fica cravado e sumiria no escuro. Trocada pelo azul claro do tema. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .board-card__iniciais {
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 6.9L18.29 13.34L25.13 13.53L19.71 17.71L21.64 24.27L16 20.4L10.36 24.27L12.29 17.71L6.87 13.53L13.71 13.34Z' fill='%238FA6F2' fill-opacity='.12'/%3E%3C/svg%3E")
            no-repeat 118% 116% / 62%,
            linear-gradient(160deg, var(--brand-soft), var(--surface-3));
    }
}
:root[data-theme="dark"] .board-card__iniciais {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 6.9L18.29 13.34L25.13 13.53L19.71 17.71L21.64 24.27L16 20.4L10.36 24.27L12.29 17.71L6.87 13.53L13.71 13.34Z' fill='%238FA6F2' fill-opacity='.12'/%3E%3C/svg%3E")
        no-repeat 118% 116% / 62%,
        linear-gradient(160deg, var(--brand-soft), var(--surface-3));
}

.board-card__texto {
    display: flex; flex-direction: column; gap: .2rem;
    padding: .9rem 1rem 1.1rem;
}
.board-card__name { font-size: 1rem; line-height: 1.3; color: var(--ink); }
.board-card--destaque .board-card__name { font-size: 1.15rem; }
.board-card__role { font-size: .85rem; font-weight: 600; color: var(--brand); }
.board-card__bio { font-size: .85rem; color: var(--muted); margin-top: .25rem; }

/* Cada gestao fecha num <details>: sete abertas de uma vez dariam uma pagina
   de rolagem interminavel, e quem entra procura uma gestao especifica. */
.term {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); margin-bottom: .75rem;
}
.term__summary {
    display: flex; gap: 1rem; align-items: baseline; justify-content: space-between;
    padding: 1rem 1.2rem; cursor: pointer; font-weight: 700; color: var(--ink);
}
.term__summary::marker { color: var(--brand); }
.term__label { font-size: 1.05rem; }
.term__count { font-size: .85rem; font-weight: 400; color: var(--muted); }
.term__body { padding: 0 1.2rem 1.2rem; }
.term__section {
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); margin: 1.1rem 0 .5rem;
}
.term__list { display: grid; gap: .35rem; font-size: .95rem; color: var(--ink-2); }
.term__list strong { color: var(--ink); }
.term__note-inline { font-size: .82rem; color: var(--muted); }

/* Nota nao e pessoa: recuo e borda deixam claro que ali se conta um fato do
   mandato, nao se lista mais um nome. */
.term__notes {
    display: grid; gap: .5rem; font-size: .9rem; color: var(--muted);
    padding-left: 1rem; border-left: 2px solid var(--line);
}

/* ---------- 8. Formulários ---------- */
.contact-layout, .filiacao-layout {
    display: grid; gap: clamp(2rem, 4vw, 3.5rem);
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
}
@media (max-width: 900px) {
    .contact-layout, .filiacao-layout { grid-template-columns: 1fr; }
}

.field { margin-bottom: 1.15rem; }
.field label { display: block; margin-bottom: .35rem; font-size: .9rem; font-weight: 600; color: var(--ink); }
.field label span { color: var(--brand); }

.field-row { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.input {
    width: 100%; padding: .75rem .9rem;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.input:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.input.has-error { border-color: var(--err); }
textarea.input { resize: vertical; min-height: 120px; }
select.input { appearance: none; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
    padding-right: 2.4rem;
}

.field__error { margin-top: .35rem; font-size: .84rem; color: var(--err); }
.field__hint { margin-top: -.5rem; margin-bottom: 1.15rem; font-size: .84rem; color: var(--muted); }

.field--check label {
    display: flex; gap: .6rem; align-items: flex-start;
    font-weight: 400; font-size: .9rem; color: var(--ink-2); cursor: pointer;
}
.field--check input { margin-top: .25rem; accent-color: var(--brand); flex-shrink: 0; }

.fieldset { border: 0; padding: 0; margin: 0 0 1.75rem; }
.fieldset legend {
    padding: 0 0 .9rem; font-size: .8rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; color: var(--brand);
}

.filters {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    align-items: end; padding: 1.4rem;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--radius); margin-bottom: 1.75rem;
}
.filters--inline { grid-template-columns: 1fr auto auto; }
@media (max-width: 640px) { .filters--inline { grid-template-columns: 1fr; } }
.filters__field label { display: block; margin-bottom: .35rem; font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.filters__field--grow { grid-column: span 2; }
@media (max-width: 720px) { .filters__field--grow { grid-column: auto; } }
.filters__actions { display: flex; gap: .5rem; }

/* ---------- 9. Chat / Cookies ---------- */
.chat { position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem); z-index: 60; }

/* ---------- WhatsApp flutuante ----------
   O verde é a cor da marca do WhatsApp, e o texto sobre ele é escuro, não
   branco: branco ali dá 1,98:1 e some. Escuro dá 8,68:1. O botão traz o
   próprio fundo, então não muda com o tema. */
.zap {
    position: fixed;
    right: clamp(1rem, 3vw, 1.75rem);
    bottom: var(--zap-base);
    z-index: 59; /* logo abaixo do chat */
    /* Uma variavel so, para o aviso de cookies deslocar os dois estados. */
    --zap-base: clamp(1rem, 3vw, 1.75rem);
    display: flex; align-items: center; gap: .55rem;
    padding: .8rem 1.25rem; border-radius: 999px;
    background: #25D366; color: #0B1F14;
    font-weight: 600; font-size: .95rem; text-decoration: none;
    box-shadow: var(--shadow-3);
    transition: transform .2s var(--ease), background .2s var(--ease);
}
.zap:hover,
.zap:focus-visible { transform: translateY(-2px); background: #1FBE5A; color: #0B1F14; text-decoration: none; }
.zap__icone { flex: none; }

/* Com o assistente ligado, sobe uma casa para não cobrir o launcher dele. */
.zap--acima { bottom: calc(var(--zap-base) + 3.9rem); }

/* O aviso de cookies ergue o chat (regra la embaixo); o botao tem de subir
   junto, senao ele fica em cima do aviso. A folga e a altura REAL do aviso,
   medida pelo app.js: a fixa de 110px cabia no computador, mas no celular o
   aviso tem perto do dobro e os dois botoes ficavam por cima dele. Os 110px
   seguem como reserva para quando o JavaScript nao rodar. */
body.has-cookie-banner .zap { --zap-base: calc(clamp(1rem, 3vw, 1.75rem) + var(--cookie-altura, 110px)); }

/* O painel do chat aberto ocupa este canto inteiro. */
.chat.is-open ~ .zap { display: none; }

@media (max-width: 480px) {
    .zap__texto { display: none; }
    .zap { padding: .95rem; }
}

.chat__launcher {
    display: flex; align-items: center; gap: .65rem;
    padding: .35rem 1.25rem .35rem .35rem; border: 0; border-radius: 999px;
    background: var(--btn-red-sm); color: #fff; font-weight: 600; font-size: .95rem;
    box-shadow: var(--shadow-3); cursor: pointer;
    transition: transform .2s var(--ease), background .2s var(--ease);
}
.chat__launcher:hover { transform: translateY(-2px); background: var(--btn-red-sm-hover); }
.chat.is-open .chat__launcher { display: none; }
/* O rosto do assistente, o mesmo da vitrine da home. O anel claro separa a
   imagem do fundo do botao nos dois temas. */
.chat__launcher-avatar {
    flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
    background: linear-gradient(135deg, #2A26B1, #253A96);
    box-shadow: 0 0 0 2px rgb(255 255 255 / .85);
}
.chat__launcher-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 480px) { .chat__launcher-text { display: none; } .chat__launcher { padding: .35rem; } }

.chat__panel {
    display: flex; flex-direction: column;
    width: min(390px, calc(100vw - 2rem)); height: min(560px, calc(100dvh - 6rem));
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-3); overflow: hidden;
}
.chat__panel[hidden] { display: none; }

/* O cabecalho continua azul: o vermelho e da ACAO (botoes), o azul e da
   IDENTIDADE — a mesma gramatica da faixa de filiacao, marinho com regua
   vermelha. Mas passa a usar o azul FIXO, como `.chat__avatar` ao lado: no
   tema escuro `var(--brand)` clareia para lavanda, e um cabecalho lavanda
   entre um launcher vermelho e um botao de enviar vermelho fica pior do que o
   marinho. Fundo fixo pede cor fixa, dai o `#fff`. */
.chat__header {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.15rem; background: #253A96; color: #fff;
}
.chat__ident { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.chat__avatar {
    flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
    background: linear-gradient(135deg, #2A26B1, #253A96);
    box-shadow: 0 0 0 2px rgb(255 255 255 / .85);
}
.chat__title { font-weight: 700; font-size: 1rem; }
.chat__subtitle { font-size: .78rem; opacity: .85; }
/* Acompanha o cabecalho de fundo fixo: `var(--on-brand)` viraria preto no
   tema escuro, sobre o marinho. */
.chat__close {
    background: none; border: 0; color: #fff; font-size: 1.6rem;
    line-height: 1; cursor: pointer; padding: 0 .2rem; opacity: .85;
}
.chat__close:hover { opacity: 1; }

.chat__log { flex: 1; overflow-y: auto; padding: 1.15rem; display: flex; flex-direction: column; gap: .75rem; }

.chat__msg { max-width: 86%; padding: .7rem .95rem; border-radius: var(--radius); font-size: .92rem; line-height: 1.55; }
.chat__msg--bot { align-self: flex-start; background: var(--surface-2); color: var(--ink-2); border-bottom-left-radius: 4px; }
.chat__msg--user { align-self: flex-end; background: var(--brand); color: var(--on-brand); border-bottom-right-radius: 4px; }
.chat__msg--error { align-self: flex-start; background: var(--err-bg); color: var(--err); }
.chat__msg p + p { margin-top: .5rem; }
.chat__msg a { color: inherit; text-decoration: underline; }

.chat__suggestions { display: flex; flex-wrap: wrap; gap: .4rem; }
.chat__suggestions button {
    padding: .38rem .8rem; border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--ink-2); font-size: .82rem; cursor: pointer;
    transition: border-color .18s var(--ease), color .18s var(--ease);
}
/* Em repouso ficam claras, de proposito (escolha do cliente em 20/09): quatro
   pastilhas vermelhas solidas dentro da conversa competiriam com a leitura da
   resposta. O vermelho entra no toque, que e quando viram acao.

   Aqui o vermelho e de TEXTO sobre o fundo do painel, e por isso usa
   `--accent-ink`, que vira com o tema (#B10000 no claro, #FF9C9C no escuro).
   O `--btn-red-sm` e fixo e serve para FUNDO: como texto, sumiria no tema
   escuro — 2,5:1 sobre o fundo do chat. */
.chat__suggestions button:hover,
.chat__suggestions button:focus-visible { border-color: var(--accent-ink); color: var(--accent-ink); }

.chat__typing { display: flex; gap: 4px; align-self: flex-start; padding: .85rem 1rem; background: var(--surface-2); border-radius: var(--radius); }
.chat__typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: chat-bounce 1.2s infinite; }
.chat__typing span:nth-child(2) { animation-delay: .18s; }
.chat__typing span:nth-child(3) { animation-delay: .36s; }
@keyframes chat-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

.chat__form { display: flex; gap: .5rem; padding: .85rem; border-top: 1px solid var(--line); }
.chat__input {
    flex: 1; padding: .65rem .9rem; background: var(--surface-2);
    border: 1px solid var(--line); border-radius: 999px;
}
.chat__input:focus { outline: none; border-color: var(--brand); }
/* Vermelho de acao, como o launcher — e `#fff` cravado pela mesma razao. O
   icone e `currentColor` e acompanha sozinho. */
.chat__send {
    display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0;
    border: 0; border-radius: 50%; background: var(--btn-red-sm); color: #fff; cursor: pointer;
}
.chat__send:hover { background: var(--btn-red-sm-hover); }
.chat__send[disabled] { opacity: .5; cursor: not-allowed; }

.chat__disclaimer { padding: 0 1.15rem 1rem; font-size: .72rem; line-height: 1.5; color: var(--muted); }

.cookie-banner {
    position: fixed; inset: auto 0 0; z-index: 70;
    background: var(--surface); border-top: 1px solid var(--line);
    box-shadow: 0 -8px 30px rgb(20 24 29 / .12);
    animation: cookie-in .3s var(--ease);
}
.cookie-banner[hidden] { display: none; }
@keyframes cookie-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
.cookie-banner__inner {
    display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
    width: 100%; max-width: var(--container); margin-inline: auto;
    padding: 1.1rem var(--gutter);
}
.cookie-banner__text p { font-size: .88rem; color: var(--ink-2); max-width: 78ch; }
.cookie-banner__actions { display: flex; gap: .6rem; flex-shrink: 0; }
@media (max-width: 640px) { .cookie-banner__actions { width: 100%; } .cookie-banner__actions .btn { flex: 1; } }

/* O widget de chat sobe enquanto o aviso de cookies estiver visível. */
body.has-cookie-banner .chat { bottom: calc(clamp(1rem, 3vw, 1.75rem) + var(--cookie-altura, 110px)); }

/* ---------- Foto ampliada (galerias) ----------
   Fundo escuro FIXO nos dois temas, como a faixa de filiação e o rodapé: é
   moldura de foto, não superfície que acompanha o tema. Branco sobre #0B0E13
   dá 19:1, e a legenda #D9DEE6 dá 14:1. Os botões têm 48px, o alvo de toque
   confortável no celular. */
html.lightbox-aberta { overflow: hidden; }

.lightbox {
    width: 100vw; height: 100dvh; max-width: none; max-height: none;
    margin: 0; padding: 4.5rem clamp(.75rem, 5vw, 5rem) 3.25rem;
    border: 0; background: rgb(11 14 19 / .95); color: #fff;
}
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgb(11 14 19 / .6); }

.lightbox__figura {
    display: flex; flex-direction: column; align-items: center; gap: .75rem;
    max-width: 100%; max-height: 100%; margin: 0;
}
.lightbox__img {
    width: auto; max-width: 100%; max-height: calc(100dvh - 10rem);
    object-fit: contain; border-radius: var(--radius-sm);
    box-shadow: 0 12px 40px rgb(0 0 0 / .5);
}
.lightbox__legenda { max-width: 60ch; font-size: .92rem; color: #D9DEE6; text-align: center; }
.lightbox__contador {
    position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
    margin: 0; font-size: .85rem; color: #D9DEE6; white-space: nowrap;
}

.lightbox__fechar,
.lightbox__nav {
    position: absolute; display: grid; place-items: center;
    width: 48px; height: 48px; padding: 0 0 .15rem;
    border: 0; border-radius: 50%;
    background: rgb(255 255 255 / .14); color: #fff;
    font-size: 2rem; line-height: 1; cursor: pointer;
    transition: background .2s var(--ease);
}
.lightbox__fechar:hover,
.lightbox__nav:hover { background: rgb(255 255 255 / .28); }
.lightbox__fechar:focus-visible,
.lightbox__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lightbox__fechar { top: 1rem; right: 1rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--ant { left: clamp(.5rem, 2vw, 1.25rem); }
.lightbox__nav--prox { right: clamp(.5rem, 2vw, 1.25rem); }
.lightbox__nav[hidden] { display: none; }

/* ---------- Impressão ---------- */
@media print {
    .topbar, .header, .footer, .chat, .zap, .cookie-banner, .share, .pagination, .filters { display: none !important; }
    body { color: #000; background: #fff; }
    .container { max-width: none; }
    a::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}