/* ═══════════════════════════════════════════════════════════════
   ESTRUTURA = a do site atual, seção por seção:
   header duplo → nav azul → hero em banner → sobre → temas →
   depoimentos → podcast → vídeos (faixa escura) → eventos → footer.

   O QUE FOI REFINADO (só letras e cores, como pedido):
   · Cinzel  — mantida nos títulos. Já é a assinatura do site.
   · Open Sans → Karla. Sans humanista: mesma função, mais caráter,
     e casa melhor com a Cinzel do que uma grotesca neutra.
   · #FFFFFF → #FAF9F5. Branco puro vibra contra o azul; um off-white
     quente assenta a página e faz as fotos respirarem.
   · #233658 mantido como âncora, agora com escala (900→400) para
     haver hierarquia real em vez de um azul só.
   · #00F0FF (ciano neon) aposentado do corpo: virou #0E7C86, que
     tem contraste AA sobre claro. Verde #137857 mantido nos selos.
   ═══════════════════════════════════════════════════════════════ */
/* ── DOIS CONJUNTOS DE TOKENS, E ISSO É INTENCIONAL ────────────────────────
   · --blue-* / --paper* / --ink*  → paleta BASE do site (cabeçalho, rodapé,
     corpo, listagens). É o sistema herdado do site atual, refinado.
   · --f1a-*                       → paleta dos handoffs hi-fi (Fundador e
     Mosteiro São Damião), que pedem um par de fundos de alto contraste
     (#FFFFFF / navy #12233F) que a paleta base não tem.
   Os dois estão VIVOS: 193 usos do primeiro, 96 do segundo. Não misture —
   uma faixa desenhada no sistema 1a usa --f1a-* de ponta a ponta.
   ────────────────────────────────────────────────────────────────────────── */
:root{
  --blue-900:#152340;   /* footer, faixa de vídeos     */
  --blue-700:#233658;   /* primary herdado — a âncora  */
  --teal:#0E7C86;       /* acento acessível (era neon) */
  --green:#137857;      /* selos                       */
  --paper:#FAF9F5;      /* fundo quente                */
  --paper-2:#F1EFE9;    /* seções alternadas           */
  --ink:#1A2233;        /* texto                       */
  --ink-2:#55607A;      /* texto secundário            */
  --line:#E2DFD7;
  --disp:var(--fonte-marcellus,'Marcellus SC'),Georgia,serif;
  --body:'Karla',system-ui,sans-serif;
  --max:1440px;
  --f1a-container:1296px;  /* container do corpo — padrão do handoff */
  --gut:clamp(19.8px,5.5vw,79.2px);  /* +10% sobre o original (18/5vw/72) */
  --r:14px;

  /* ── sistema 1a (handoffs Fundador e Mosteiro São Damião) ──────────────
     O par de fundos do site (#FAF9F5/#F1EFE9) tem 3,6 pontos de L* — menos
     que o erro de calibração de um monitor comum, e em tela escura as faixas
     viram uma cor só.
     O par definitivo é #FFFFFF / navy #12233F — 84 pontos de L*, divisa sem
     precisar de fio. (Os READMEs descrevem uma versão anterior, em areia
     #EDE7DC; os arquivos .dc.html, que os próprios READMEs declaram ser "a
     verdade", usam o navy — e é o navy que vale.)
     Sobre o navy o texto vai em #F3F1EC e o teal em #3FB6C1; o #0A656D não
     tem contraste sobre fundo escuro. */
  --f1a-claro:#FFFFFF;      /* faixa ímpar                    */
  --f1a-areia:#12233F;      /* faixa par — NAVY               */
  --f1a-card-n:#1C2F4E;     /* card sobre navy                */
  --f1a-borda-n:rgba(255,255,255,.14);
  --f1a-txt-n:#F3F1EC;      /* texto sobre navy               */
  --f1a-teal-n:#3FB6C1;     /* teal claro sobre navy          */
  --f1a-fio:#DFD7C7;        /* divisa entre faixas            */
  --f1a-borda:#E2DBCD;      /* borda de card sobre areia      */
  --f1a-borda-h:#CFC3AC;    /* idem, hover                    */
  --f1a-hair:#EDE9E0;       /* hairline de lista              */
  --f1a-hair-num:#E4DED2;   /* hairline de números            */
  --f1a-ancora:#233658;     /* fio de cabeçalho / títulos     */
  --f1a-teal:#0A656D;       /* eyebrow, links, CTA            */
  --f1a-teal-h:#084C52;
  --f1a-mudo:#7A7568;       /* legenda                        */
  --f1a-ponto:#C2B79F;      /* ponto ornamental               */
  --f1a-menta:#F1F7F4;      /* placa do aviso sobre o navy    */
  --serif:'Cormorant Garamond',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
/* Sem rolagem horizontal (clip não vira scroll-container → não quebra sticky) +
   barra de rolagem vertical VISÍVEL: fina, discreta e na cor do texto, para o
   leitor saber onde está na página. Os trilhos horizontais (`.rail`, `.chipnav`,
   `.tema-trilha`…) continuam com a barra escondida — lá quem indica a posição
   são as setas e os marcadores. */
html{overflow-x:clip;scrollbar-width:thin;scrollbar-color:rgba(35,54,88,.34) transparent}
html::-webkit-scrollbar{width:11px;height:11px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{background:rgba(35,54,88,.34);border:3px solid transparent;
  background-clip:padding-box;border-radius:999px}
html::-webkit-scrollbar-thumb:hover{background:rgba(35,54,88,.52);border:3px solid transparent;
  background-clip:padding-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
h1,h2,h3{margin:0;font-family:var(--disp);font-weight:400;line-height:1.2}

/* ── topo: logo + duas ações ─────────────────────────── */
.topbar{background:var(--paper);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:52px;width:auto}
.topacts{display:flex;gap:12px;align-items:center}
.pill{
  display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:50px;
  font-size:17px;font-weight:500;letter-spacing:.01em;transition:.25s;line-height:1.2;
}
.pill.fill{background:var(--blue-700);color:#fff}
.pill.fill:hover{background:var(--blue-900)}
.pill.ghost{border:1.5px solid var(--line);color:var(--blue-700)}
.pill.ghost:hover{border-color:var(--blue-700)}
.pill .pill-ico{width:20px;height:20px;flex:none}
@media(max-width:900px){.topacts .pill span{display:none}}

/* ── nav azul ────────────────────────────────────────── */
.nav{background:var(--blue-700);color:#fff}
.nav .wrap{display:flex;align-items:center;gap:18px;padding-top:0;padding-bottom:0}
.social{display:flex;gap:14px;padding:8px 0}
.social img{height:17px;width:17px;opacity:.82;transition:opacity .2s}
.social a:hover img{opacity:1}
.menu{display:flex;gap:4px;margin:0 0 0 auto;padding:0;flex-wrap:wrap}
.menu>li{list-style:none;position:relative}
.menu>li>a{display:block;padding:14px 12px;font-size:16px;font-weight:400;color:#DCE4F2;transition:color .2s}
.menu>li>a:hover,.menu>li.on>a{color:#fff}
.menu>li.on>a{box-shadow:inset 0 -2px 0 var(--teal)}
.menu .has::after{content:'▾';margin-left:6px;opacity:.7;font-size:11px}
.sub{
  position:absolute;top:100%;left:0;min-width:216px;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 18px 42px rgba(21,35,64,.16);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s;z-index:40;
}
.menu>li:hover .sub{opacity:1;visibility:visible;transform:none}
.sub a{display:block;padding:9px 13px;border-radius:7px;font-size:14.5px;color:var(--ink)}
.sub a:hover{background:var(--paper-2);color:var(--blue-700)}
@media(max-width:980px){.menu{display:none}}

/* ── hero ────────────────────────────────────────────── */
/* Hero ocupa a tela toda (abaixo das 2 barras), igual ao acervo. --header-h é
   medido por JS (altura das barras); fallback 110px. */
.hero{position:relative;min-height:calc(100vh - var(--header-h,110px));min-height:calc(100dvh - var(--header-h,110px));display:flex;align-items:center;overflow:hidden}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Escurecimento do herói. Era fixo no .hero; agora é POR SLIDE (data-ov), para
   a Central escolher por destaque em Site institucional › Destaques. Fica acima
   da foto e abaixo do texto (.slide .txt tem z-index 2). Todo herói renderiza
   pelo menos um .slide, então nada fica sem tratamento. */
.slide::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(12,20,38,.90) 4%,rgba(12,20,38,.62) 42%,rgba(12,20,38,.12) 78%);
}
.slide[data-ov="none"]::after{display:none}
/* Vídeo de fundo (o herói original tem um slide em mp4) e slide-arte clicável. */
.slide-link{position:absolute;inset:0;display:block;z-index:1}
/* Alinhamento do bloco de texto: à esquerda (padrão) ou centralizado, como os
   cards "Doe e Receba Energia" e "Continuidade Referencial" do site original. */
.slide[data-align="center"] .txt .wrap{text-align:center;display:flex;flex-direction:column;align-items:center}
.slide[data-align="center"] h2{margin-inline:auto}
.slede{margin:0 0 4px;font-size:clamp(16px,1.5vw,19px);line-height:1.5;color:#dfe5f0;max-width:52ch}
.slide[data-align="center"] .slede{margin-inline:auto}
.sbtns{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.slide[data-align="center"] .sbtns{justify-content:center}
/* Botão secundário sobre foto: contorno claro, sem preencher. */
.slide .pill.ghost-inv{background:transparent;border:1.5px solid rgba(255,255,255,.62);color:#fff}
.slide .pill.ghost-inv:hover{background:rgba(255,255,255,.12);border-color:#fff}
.slide[data-ov="veil"]::after{background:rgba(12,20,38,.55)}
.slide[data-ov="bottom"]::after{background:linear-gradient(180deg,rgba(12,20,38,.05) 30%,rgba(12,20,38,.88) 100%)}
.hero .wrap{position:relative;z-index:2;color:#fff;width:100%;padding-top:56px;padding-bottom:56px}
.badge{
  display:inline-block;background:var(--green);color:#fff;border-radius:6px;
  padding:7px 20px;font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
}
.hero h1{font-size:clamp(38px,6.4vw,78px);margin:20px 0 0;letter-spacing:.005em}
.meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.chip{
  display:inline-flex;align-items:center;gap:8px;border:1.5px solid rgba(255,255,255,.5);
  border-radius:8px;padding:8px 17px;font-size:14.5px;font-weight:500;
}
.hero .pill{margin-top:28px;background:var(--green);color:#fff;font-size:16px;padding:13px 26px}
.hero .pill:hover{background:#0F5F45}
.dots{position:absolute;right:var(--gut);bottom:26px;z-index:3;display:flex;gap:8px}
.dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.42)}
.dots i.on{background:#fff;width:26px;border-radius:5px}

/* ── seções ──────────────────────────────────────────── */
section{padding:clamp(65px,8.4vw,116px) 0}
/* Scroll da home: LINEAR.
   O "encaixe" por seção (scroll-snap-type:y proximity + scroll-snap-align:start
   em .sb-topbar, section e footer) foi retirado em 20/08/2026 porque roubava a
   rolagem do leitor. Medido em 1440x900, com as seções em 764px (= 100dvh menos
   o cabeçalho) e pontos de encaixe a cada 764px:
     de  764, pedindo +120  ->  ficou em  764  (não saiu do lugar)
     de  764, pedindo +250  ->  ficou em  764  (não saiu do lugar)
     de 1528, pedindo +400  ->  foi para    0  (subiu 1528px)
     de 2292, pedindo +400  ->  foi para    0  (subiu 2292px)
   Rolagem menor que meia seção deixava o ponto de encaixe anterior como o mais
   próximo, e o navegador devolvia o leitor para trás — daí a sensação de que a
   página "puxa" e de que o texto anda na direção errada. Nas duas últimas linhas
   ele nem devolvia para a seção anterior: jogava tudo para o topo.
   Não há meio-termo aqui: o puxão É o mecanismo do snap. Se o encaixe voltar a
   ser desejado, o caminho é navegação explícita (âncoras/botão), não snap. */
html.snap{scroll-padding-top:var(--header-h,110px)}
.alt{background:var(--paper-2)}
.stitle{font-size:clamp(26px,3.4vw,42px);text-transform:uppercase;letter-spacing:.02em;color:var(--blue-700)}
.sublead{color:var(--ink-2);margin:12px 0 0;font-size:16.5px}
.center{text-align:center}
.center .sublead{max-width:58ch;margin-inline:auto}
.two{display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(30px,5vw,72px);align-items:center}
@media(max-width:860px){.two{grid-template-columns:1fr}}
.two p{color:var(--ink-2);margin:16px 0 0}
.two b{color:var(--ink);font-weight:600}

/* colagem de fotos (o site usa polaroides sobrepostas) */
.collage{position:relative;min-height:auto;display:flex;justify-content:center}
.collage img{width:100%;max-width:597px;height:auto}

/* "Um pouco sobre o CEC": ocupa a tela toda (igual ao herói), texto maior e mais
   arejado, sem negritos — o 1º parágrafo é o lead. */
.about{min-height:calc(100vh - var(--header-h,110px));min-height:calc(100dvh - var(--header-h,110px));display:flex;flex-direction:column;justify-content:center}
/* A colagem é o elemento elástico da seção: encolhe proporcionalmente até que
   texto + fotos caibam em UMA tela.
   Sem isto ela media 746px e a seção fechava em 954px contra 828px de tela —
   e `justify-content:center` não faz nada quando não há espaço sobrando, então
   o bloco não ficava centralizado, ficava cortado. Como o scroll-snap leva o
   visitante direto para esta seção, o corte aparecia logo na chegada. */
.about{--pad-v:clamp(58px,7.5vw,104px);padding-block:var(--pad-v)}
/* Em telas baixas o respiro de 104px sozinho já estoura a tela: ele é
   dimensionado pela LARGURA (7.5vw), que nada diz sobre a altura disponível.
   Num monitor 1366×768 sobravam 428px para um conteúdo de 660px. */
@media (max-height:960px){ .about{--pad-v:clamp(28px,4.5vh,58px)} }
.about .collage img{
  width:auto;
  max-width:min(597px,100%);
  /* 8px de folga: sem ela o arredondamento de subpixel deixava a seção 3px
     mais alta que a tela — o bastante para nascer uma barra de rolagem. */
  max-height:calc(100dvh - var(--header-h,110px) - 2*var(--pad-v) - 8px);
}
/* Os dois parágrafos com o MESMO estilo. O primeiro era um lead (maior e na cor
   principal) e o segundo caía no cinza secundário do `.two` — a diferença lia
   como se o segundo fosse menos importante. Fica a cor forte do lead com o
   corpo do texto: uniforme sem crescer (igualar por cima estourava a tela em
   71px e desfazia o encaixe da seção). */
.about .two p{color:var(--ink);font-size:clamp(17px,1.35vw,19px);line-height:1.82;margin-top:22px}
/* Abaixo de ~820px de altura a foto já encolheu o quanto podia e quem não cabe
   é o TEXTO (664px contra 563px de espaço). Aperta o entrelinhas em vez de
   deixar a seção transbordar. */
@media (max-height:820px){
  .about .two p{font-size:clamp(15px,1.15vw,17px);line-height:1.6;margin-top:15px}
}

/* temas */
/* Full-bleed: o trilho de temas do original ocupa a largura da janela
   (medido: 1440px começando em 0), não a coluna de conteúdo. */
/* Grade fixa de temas (segue o mockup Ideia 3): 5 cards estáticos. Os dois grids
   (temas e atividades) vivem no MESMO container .temas-inner e preenchem 100% da
   largura → bordas esquerda/direita idênticas (alinhados). */
.temas-inner{width:100%;margin:0 auto}
/* Os 5 cards de tema preenchem a MESMA largura que a grade de atividades (ambos
   ocupam 100% do .temas-inner) → bordas esquerda/direita idênticas. */
/* gap 30 → 14: cinco cards numa faixa de 1280px, e os 120px que os vãos
   comiam voltam para dentro dos cards (232 → 245 de largura cada). */
/* Cada assunto ocupa a largura do PRÓPRIO conteúdo, não 1/5 fixo da faixa: em
   `repeat(5,1fr)` as colunas ficavam com 245px iguais e os nomes, que vão de
   130 ("Clarividência") a 238px ("Comportamento Humano"), sobravam centrados
   com folgas muito diferentes — o primeiro recuava 58px da borda e o último,
   3px. Com `space-between`, o primeiro nasce na borda esquerda da faixa e o
   último termina na direita, como os cards de foto logo abaixo. */
/* 30 → 56px depois do sublead: os 30 vinham de quando a seção tinha altura de
   tela fixa e cada folga era espremida para o conteúdo caber. */
.topics-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 24px;margin-top:56px}
.topics-grid .card{flex:0 0 auto}
@media(max-width:980px){.topics-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.topics-grid{grid-template-columns:repeat(2,1fr)}}

/* Seção Temas + Atividades ocupando a tela toda (uma tela) */
.temas-full{min-height:calc(100vh - var(--header-h,110px));min-height:calc(100dvh - var(--header-h,110px));display:flex;flex-direction:column;justify-content:center;padding-top:clamp(22px,3vh,40px);padding-bottom:clamp(22px,3vh,40px)}
/* Em flex-column o margin:0 auto do .wrap o encolhe pro conteúdo; forçar 100%
   para o .temas-inner poder chegar aos 1144px (largura do mockup). */
.temas-full > .wrap{width:100%}
/* Atividades presenciais — grade 2×2 com foto (Ideia 3) */
/* O vão antes da etiqueta passou por 52 → 84 → 68px. Os 84 vieram de quando os
   assuntos não tinham moldura nenhuma e a separação era só o vazio; com o
   contorno de volta marcando o fim de cada card, sobra menos trabalho para o
   espaço fazer. Segue maior que os 32px de baixo — é em cima que acontece a
   passagem de um bloco para o outro. */
.acts-eyebrow{display:flex;align-items:center;justify-content:center;gap:12px;margin:68px 0 0;font:700 12px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--teal)}
.acts-eyebrow::before,.acts-eyebrow::after{content:"";width:26px;height:1px;background:color-mix(in srgb,var(--teal) 45%,transparent)}
/* Option 1a (handoff participe_1a): 3 cards verticais 4:5, texto sobre a foto. */
.acts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:32px}
/* Faixa de exploração no pé das páginas internas. Reusa o .actcard da home,
   com cards mais baixos (16/10): é um convite de saída, não a atração da
   página. Com 3 destinos a grade de 3 colunas da home já serve. */
/* Sem fundo próprio: a faixa vinha em --paper-2 (#F1EFE9), o creme das
   "seções alternadas", contra os #FAF9F5 da página — e como aqui ela vem logo
   depois do corpo do texto, sem nada que a justifique, o que se via era uma
   emenda horizontal no meio da leitura. Alternância só faz sentido quando há
   ritmo para alternar. */
/* O respiro DEPOIS dos cards dobra (56 → 104px no topo da escala): eles
   encostavam no rodapé, sem a pausa que fecha a página. Mesmo valor do respiro
   padrão de seção do site. */
.explore{padding-top:clamp(6px,0.6vw,9px);padding-bottom:clamp(58px,7.5vw,104px);margin-top:clamp(3px,0.35vw,5px)}
/* mesmo container do corpo (1296): a faixa herdava o .wrap de 1440 e os
   cards começavam 72px antes do texto acima deles. */
.explore > .wrap{max-width:var(--f1a-container)}
.explore .acts-eyebrow{margin:0}
.explore-grid .actcard{aspect-ratio:16/10}
@media(max-width:1100px){.acts-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.acts-grid{grid-template-columns:1fr}}
/* Proporção dos cards de "Participe presencialmente", em duas passadas:
   4/3 (306px de altura) → 3/2 (272) → 16/9 (230). É a mesma proporção das
   miniaturas do Acervo, e a foto continua legível porque o assunto dela é a
   cena inteira, não um detalhe. O texto fica no rodapé do card e não depende
   da altura. */
.acts-grid .actcard{aspect-ratio:16/9}
.actcard{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#0D1317;color:#fff;text-decoration:none;box-shadow:0 26px 50px -30px rgba(13,19,23,.7);transition:transform .3s ease,box-shadow .3s ease}
.actcard:hover{transform:translateY(-4px);box-shadow:0 34px 60px -28px rgba(13,19,23,.78)}
.actcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.actcard::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,14,18,.94) 0%,rgba(8,14,18,.78) 30%,rgba(8,14,18,.28) 62%,rgba(8,14,18,.34) 100%)}
.actcard .actb{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 26px 28px;display:flex;flex-direction:column;gap:10px;text-align:left}
.actcard .actb h3{color:#F4F2EC;font-family:var(--disp);font-weight:400;font-variant:small-caps;font-size:34px;line-height:1.06;letter-spacing:.015em;margin:0;text-wrap:pretty}
.actcard .actb p{color:rgba(238,236,229,.84);font-size:14.5px;line-height:1.55;margin:0;text-wrap:pretty}
.actfq{position:absolute;top:20px;left:20px;z-index:2;background:rgba(80,88,64,.78);color:#EFEFE6;font:600 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;padding:7px 13px;border-radius:999px}
/* Cards de categoria no design do ACERVO (.acv-subject-card): branco, centrado,
   ícone grande, título serif. */
.card{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  background:#fff;border:1px solid rgba(22,32,66,.1);border-radius:16px;padding:22px 16px;
  text-decoration:none;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--blue-700) 50%,transparent);box-shadow:0 26px 50px -28px rgba(22,32,66,.35)}
.card svg{margin:0 auto 6px;display:block;color:var(--blue-700)}
.card h3{font-family:'Source Serif 4',Georgia,'Times New Roman',serif;font-size:18px;font-weight:400;color:var(--ink);line-height:1.2;margin:0}
/* Títulos dos 5 assuntos na MESMA régua dos 3 cards de "Participe
   presencialmente": a display do site em versalete (`font-variant:small-caps`),
   que é o que dá a eles a inicial maiúscula seguida de capitulares menores.
   Antes eram Source Serif 4 em caixa mista — a única tipografia de título da
   seção fora do padrão, lado a lado com os cards que já usavam Cinzel. */
.topics-grid .card h3{
  font-family:var(--disp);font-variant:small-caps;font-weight:400;
  font-size:21px;letter-spacing:.015em;line-height:1.1;
}

/* depoimentos */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px}
@media(max-width:880px){.quotes{grid-template-columns:1fr}}
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px}
.quote p{margin:0;color:var(--ink-2);font-size:15.5px}
.quote .by{margin-top:18px;font-weight:600;font-size:14.5px;color:var(--blue-700);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stars{color:#E0A82E;letter-spacing:3px;font-size:14px;margin-bottom:12px}
/* ===== Avaliações (handoff 2a): grid 3 col · destaque = 1º item · cards são links ===== */
/* Cabe em uma tela (para o scroll-snap encaixar sem cortar o botão). */
.reviews-sec{min-height:calc(100vh - var(--header-h,110px));min-height:calc(100dvh - var(--header-h,110px));display:flex;flex-direction:column;justify-content:center;padding-block:clamp(28px,4.5vh,56px)}
.stitle--one{text-align:center}
@media(min-width:760px){.stitle--one{white-space:nowrap}}
.grev-badge{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.grev-badge .stars{font-size:15px;line-height:1;letter-spacing:3px;color:#E0A82E;margin:0}
.grev-badge strong{font:700 15px/1 Karla,sans-serif;color:var(--ink)}
.grev-count{font:400 15px/1 Karla,sans-serif;color:var(--ink-2)}
.revgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px;text-align:left}
.rev-card{display:flex;flex-direction:column;gap:12px;padding:24px 26px;background:#fff;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.rev-card .stars{font-size:13px;line-height:1;letter-spacing:3px;color:#E0A82E;margin:0}
.rev-card p{margin:0;font:400 15.5px/1.6 Karla,sans-serif;color:var(--ink-2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.rev-card:hover{transform:translateY(-2px);box-shadow:0 16px 32px -24px rgba(22,32,66,.45);border-color:color-mix(in srgb,var(--blue-700) 45%,transparent)}
.rev-card:active{transform:translateY(0)}
.rev-card:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.rev-card--lead{grid-row:span 2;gap:16px;padding:26px 28px;background:linear-gradient(180deg,#FFFDF7,#F7F3EA)}
.rev-card--lead .stars{font-size:14px}
.rev-card--lead p{font:400 20px/1.55 "Source Serif 4",Georgia,serif;color:var(--ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:11;overflow:hidden;text-wrap:pretty}
.by{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:4px}
.grev-av{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--paper-2);flex:none}
.grev-av--ph{display:grid;place-items:center;font:700 13px/1 Karla,sans-serif;color:var(--blue-700);background:color-mix(in srgb,var(--blue-700) 12%,transparent)}
.by-n{font:600 14px/1 Karla,sans-serif;color:var(--ink)}
.by-w{font:400 13px/1 Karla,sans-serif;color:var(--ink-2)}
.by-w::before{content:"·";margin-right:7px}
.by-x{margin-left:auto;font:400 13px/1 Karla,sans-serif;color:var(--ink-2);opacity:.4;transition:opacity .25s ease}
.rev-card--lead:hover .by-x{opacity:1}
.revcta{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 26px;margin-top:36px;border:1px solid rgba(35,54,88,.30);border-radius:30px;font:600 13.5px/1 Karla,sans-serif;color:var(--blue-700);text-decoration:none;transition:background-color .2s ease,border-color .2s ease}
.revcta:hover{background:rgba(35,54,88,.05);border-color:rgba(35,54,88,.55)}
.revcta:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
@media(max-width:980px){.revgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.revgrid{grid-template-columns:1fr}.rev-card--lead{grid-row:auto}.rev-card--lead p{font-size:18px}}
@media(prefers-reduced-motion:reduce){.rev-card:hover{transform:none}}

/* ===== Mídia (handoff 12a): YouTube + Spotify, uma seção, dois trilhos ===== */
/* Tela cheia que encaixa no scroll-snap (sem pular a seção). */
.media{background:var(--paper-2);min-height:calc(100vh - var(--header-h,110px));min-height:calc(100dvh - var(--header-h,110px));display:flex;flex-direction:column;justify-content:center;padding-block:clamp(16px,2vh,40px)}
.mrule{display:block;width:56px;height:1px;margin:20px auto 0;background:linear-gradient(90deg,transparent,var(--teal),transparent)}
.railblock{margin-top:28px}
.railblock + .railblock{margin-top:24px;padding-top:20px;border-top:1px solid #D6D1C4}
.railbar{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.brand{display:inline-flex;align-items:center;gap:10px;font:700 15px/1 Karla,sans-serif;letter-spacing:-.01em;color:var(--ink)}
.bmark{width:26px;height:26px;display:inline-grid;place-items:center;flex:none}
.bmark svg{width:100%;height:100%;display:block}
.railall{padding:8px 0;font:600 13px/1 Karla,sans-serif;color:var(--blue-700);text-decoration:none}
.railall:hover{text-decoration:underline;text-underline-offset:3px}
.railall:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.railnav{display:flex;gap:10px;margin-left:auto}
.rnav{width:44px;height:44px;border-radius:50%;background:transparent;cursor:pointer;border:1px solid rgba(35,54,88,.26);color:var(--blue-700);font:400 19px/1 Karla,sans-serif;transition:background-color .25s ease,border-color .25s ease,opacity .25s ease}
.rnav:hover{background:rgba(35,54,88,.06);border-color:rgba(35,54,88,.5)}
.rnav:active{background:rgba(35,54,88,.10)}
.rnav:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.rnav[disabled]{opacity:.32;pointer-events:none}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:352px;gap:20px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start}
.rail:focus-visible{outline:2px solid var(--teal);outline-offset:6px}
.item{display:block;text-decoration:none;transition:transform .28s ease}
.item:hover{transform:translateY(-3px)}
.item:active{transform:translateY(0)}
.item:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.mbox{position:relative;display:grid;place-items:center;width:352px;height:198px;border-radius:10px;overflow:hidden;background:var(--line);box-shadow:0 14px 30px -20px rgba(22,32,66,.5),0 0 0 1px rgba(22,32,66,.10)}
.vid .mbox img{width:100%;height:100%;object-fit:cover;display:block}
.aud .mbox{background:#DCD7CC}
.aud .mbox .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(24px) saturate(1.2);opacity:.45}
.aud .mbox .art{position:relative;width:198px;height:198px;object-fit:cover;display:block;box-shadow:0 10px 24px -12px rgba(0,0,0,.55)}
.play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:46px;height:46px;border-radius:50%;background:rgba(9,16,30,.5);border:1px solid rgba(255,255,255,.6);display:grid;place-items:center;transition:background-color .25s ease,border-color .25s ease}
.play::after{content:"";width:0;height:0;margin-left:4px;border:7px solid transparent;border-left:12px solid #fff;border-right:0}
.item:hover .play{background:var(--teal);border-color:var(--teal)}
.item h3{margin:14px 0 0;font:600 15.5px/1.42 Karla,sans-serif;color:var(--ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
@media(max-width:980px){.rail{grid-auto-columns:320px}.mbox{width:320px;height:180px}.aud .mbox .art{width:180px;height:180px}}
@media(max-width:760px){.rail{grid-auto-columns:288px}.mbox{width:288px;height:162px}.aud .mbox .art{width:162px;height:162px}.railbar{flex-wrap:wrap}.railall{order:3;margin-left:0}}
@media(max-width:620px){.rail{grid-auto-columns:256px}.mbox{width:256px;height:144px}.aud .mbox .art{width:144px;height:144px}.railnav{display:none}}
@media(prefers-reduced-motion:reduce){.item:hover{transform:none}.rail{scroll-behavior:auto}}

/* cabeçalho de seção com botão (usado por "Próximos eventos") */
.railhead{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ===== Eventos (handoff 1a): séries agrupadas, accordion por mês, sem JS ===== */
/* Tela cheia como as demais seções (com scroll-snap proximity). */
.agenda-sec{min-height:calc(100vh - var(--header-h,110px));min-height:calc(100dvh - var(--header-h,110px));display:flex;flex-direction:column;justify-content:center;padding-block:clamp(28px,4.5vh,56px)}
.agenda-acc{display:flex;flex-direction:column;gap:10px;margin-top:44px}
.agenda-month{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:0 20px}
.agenda-month summary{display:flex;align-items:center;gap:14px;min-height:56px;list-style:none;cursor:pointer;transition:background-color .2s ease}
.agenda-month summary::-webkit-details-marker{display:none}
.agenda-month summary:hover{background:color-mix(in srgb,var(--blue-700) 3%,transparent)}
.agenda-month summary:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.agenda-month summary::after{content:"▾";margin-left:auto;font-size:12px;color:var(--ink-2);transition:transform .2s ease}
.agenda-month[open] summary::after{transform:rotate(180deg);margin-left:0}
.agenda-month[open] summary{border-bottom:1px solid #D6D1C4;margin-bottom:24px}
.agenda-mlabel{font:400 19px/1 var(--disp);color:var(--blue-700)}
.agenda-month[open] .agenda-mlabel{font-size:22px}
.agenda-badge{display:grid;place-items:center;height:24px;padding:0 9px;border-radius:20px;background:color-mix(in srgb,var(--blue-700) 7%,transparent);font:700 11.5px/1 Karla,sans-serif;color:var(--ink-2)}
/* Mês único na home: sem accordion, porque não há outro mês para alternar —
   um `<details>` sozinho só oferece a opção de esconder o conteúdo. O
   cabeçalho repete o visual do `summary` aberto. */
.agenda-month.is-single{padding-bottom:0}
.agenda-head{display:flex;align-items:center;gap:14px;min-height:56px;border-bottom:1px solid #D6D1C4;margin-bottom:24px}
.agenda-month.is-single .agenda-mlabel{font-size:22px}
/* O botão saiu do cabeçalho para o rodapé da seção: ali ele é o passo
   seguinte depois de ler os eventos, não um concorrente do título. */
.agenda-foot{display:flex;justify-content:center;margin-top:28px}
.agenda-cta{margin-left:auto;display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:30px;background:var(--blue-700);color:#fff;font:600 13.5px/1 Karla,sans-serif;text-decoration:none;transition:background-color .2s ease}
.agenda-foot .agenda-cta{margin-left:0}
.agenda-cta:hover{background:var(--blue-900)}
.agenda-cta:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.evs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding-bottom:24px}
.ev{position:relative;display:grid;grid-template-columns:80px 1fr 30px;gap:22px;align-items:start;padding:26px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--r);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.ev-date{display:grid;place-items:center;align-content:center;gap:3px;padding:14px 0;border-radius:10px;background:color-mix(in srgb,var(--blue-700) 5%,transparent)}
.ev-date b{font:400 34px/1 var(--disp);color:var(--blue-700)}
.ev-date i{font:700 10.5px/1 Karla,sans-serif;letter-spacing:.14em;font-style:normal;text-transform:uppercase;color:var(--ink-2)}
.ev-meta{margin:0 0 8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ev-when{font:600 13.5px/1 Karla,sans-serif;color:var(--teal);text-transform:capitalize}
.ev-where{padding:5px 9px;border:1px solid var(--line);border-radius:20px;font:700 10.5px/1 Karla,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.ev-where.is-online{color:var(--teal);border-color:color-mix(in srgb,var(--teal) 35%,transparent)}
.ev h3{margin:0;font:600 18.5px/1.35 Karla,sans-serif;color:var(--ink)}
.ev h3 a{color:inherit;text-decoration:none}
.ev h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.ev-desc{margin:8px 0 0;font:400 15px/1.55 Karla,sans-serif;color:var(--ink-2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.ev-go{align-self:center;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;font-size:14px;color:var(--ink-2);transition:background-color .25s ease,color .25s ease,transform .25s ease}
.ev:hover{transform:translateY(-2px);box-shadow:0 16px 32px -24px rgba(22,32,66,.45);border-color:color-mix(in srgb,var(--blue-700) 45%,transparent)}
.ev:hover .ev-go{background:var(--blue-700);color:#fff;transform:translateX(2px)}
.ev:active{transform:translateY(0)}
.ev:has(a:focus-visible){outline:2px solid var(--teal);outline-offset:3px}
.ev h3 a:focus-visible{outline:none}
.ev-dates{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.ev-dates a{display:inline-block;padding:8px 12px;border-radius:8px;background:var(--paper-2);font:600 13px/1 Karla,sans-serif;color:var(--ink);text-decoration:none;transition:background-color .2s ease}
.ev-dates a:hover{background:color-mix(in srgb,var(--blue-700) 10%,transparent)}
.ev-dates a:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.ev-more{margin:0 0 24px}
.ev-more summary{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:30px;font:600 13px/1 Karla,sans-serif;color:var(--blue-700);transition:background-color .2s ease,border-color .2s ease}
.ev-more summary::-webkit-details-marker{display:none}
.ev-more summary:hover{background:color-mix(in srgb,var(--blue-700) 5%,transparent)}
.ev-more summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.ev-more[open] summary{margin-bottom:20px}
@media(max-width:900px){.evs{grid-template-columns:1fr}}
@media(max-width:760px){.agenda-month summary{flex-wrap:wrap}.agenda-cta{margin-left:0;order:3}}
@media(max-width:600px){.ev{grid-template-columns:1fr 30px}.ev-date{grid-column:1 / -1;grid-auto-flow:column;justify-content:start;gap:8px;padding:0;background:none}.ev-date b{font-size:24px}}
@media(prefers-reduced-motion:reduce){.ev:hover,.ev:hover .ev-go{transform:none}}

/* ===== Páginas do menu Sobre (handoff paginas_sobre): sistema de página ===== */
/* Fundo full-width, mas o conteúdo fica na MESMA coluna do site (máx 1440,
   centralizado) — alinha as margens com header, footer e seções da home. */
.pagehero,.pageband,.pagecta{--page-pad-x:max(var(--gut),calc((100% - var(--max)) / 2 + var(--gut)))}
.pagehero{position:relative;background:var(--blue-900);padding:56px var(--page-pad-x);overflow:hidden}
.pagehero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(900px 320px at 78% 120%,rgba(52,80,127,.55),transparent 70%)}
.pagehero > *{position:relative}
.pagecrumb{margin:0;font:400 13px/1 Karla,sans-serif;color:#8FA2C4}
.pagecrumb a{color:#8FA2C4;text-decoration:none}
.pagecrumb a:hover{color:#DDE6F5}
.pagecrumb .sep{opacity:.5;margin:0 6px}
.pagecrumb .cur{color:#DDE6F5}
.pagehero h1{margin:22px 0 0;font:400 clamp(32px,3.2vw,44px)/1.1 var(--disp);letter-spacing:.03em;text-transform:uppercase;color:#fff}
.pageband{padding:64px var(--page-pad-x)}
.pageband--paper{background:var(--paper)}
.pageband--alt{background:var(--paper-2)}
.pageband--dark{position:relative;background:var(--blue-900);padding:72px var(--page-pad-x);overflow:hidden}
.pageband--dark::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(1000px 400px at 30% -12%,rgba(52,80,127,.45),transparent 72%)}
.pageband--dark > *{position:relative}
.kick{font:700 11px/1 Karla,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--teal)}
.pageband--dark .kick{color:#7FD3DA}
.pageband .prose{max-width:68ch;display:flex;flex-direction:column;gap:22px}
.pageband .prose p{margin:0;font:400 17px/1.8 Karla,sans-serif;color:var(--ink-2)}
.pageband .prose p:first-child{font-size:18px;color:var(--ink)}
.pageband--dark .prose{max-width:60ch}
.pageband--dark .prose p{font-size:16.5px;line-height:1.7;color:#A8B7D2}
.pageband--dark .prose p:first-child{color:#DDE6F5}
.pageband--dark .prose strong,.pageband--dark .prose b{color:#fff;font-weight:600}
.split{display:grid;grid-template-columns:520px 1fr;gap:64px;align-items:stretch}
.split--right{grid-template-columns:1fr 520px}
.shot{display:block;width:520px;height:100%;min-height:300px;border-radius:12px;overflow:hidden;background:var(--line)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.pageband--dark .shot{box-shadow:0 24px 60px -30px rgba(0,0,0,.8)}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 30px;text-decoration:none;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
a.pcard:hover{transform:translateY(-2px);box-shadow:0 16px 32px -24px rgba(22,32,66,.45);border-color:color-mix(in srgb,var(--blue-700) 45%,transparent)}
a.pcard:active{transform:translateY(0)}
a.pcard:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.pcard h2{margin:0 0 18px;font:400 24px/1.1 var(--disp);letter-spacing:.03em;text-transform:uppercase;color:var(--blue-700)}
.facts{display:flex;gap:48px;margin-top:8px;padding-top:24px;border-top:1px solid var(--line)}
.facts b{display:block;font:400 38px/1 var(--disp);color:var(--blue-700);font-weight:400}
.facts span{display:block;margin-top:8px;font:400 14px/1.4 Karla,sans-serif;color:var(--ink-2)}
.pageband--dark .facts b{color:#DDE6F5}
.pageband--dark .facts span{color:#A8B7D2}
.pagecta{background:var(--paper-2);padding:56px var(--page-pad-x);display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.pagecta p{margin:0;font:400 22px/1.4 var(--disp);color:var(--blue-700);white-space:nowrap}
.pagecta .acts{display:flex;gap:12px;margin-left:auto}
.btn{display:inline-flex;align-items:center;height:48px;padding:0 26px;border-radius:30px;font:600 14px/1 Karla,sans-serif;text-decoration:none;transition:background-color .2s ease,border-color .2s ease}
.btn--fill{background:var(--blue-700);color:#fff}
.btn--fill:hover{background:var(--blue-900)}
.btn--ghost{border:1px solid rgba(35,54,88,.30);color:var(--blue-700)}
.btn--ghost:hover{background:rgba(35,54,88,.05);border-color:rgba(35,54,88,.55)}
.btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
/* /quem-somos/ */
.qs-hero-img{width:100%;height:auto;border-radius:12px;display:block}
.qs-label{display:flex;align-items:baseline;gap:18px;margin-top:48px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.pageband .qs-prose{max-width:none;margin-top:26px}
/* /fundador/ */
.books{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.books .pcard{padding:22px 20px;min-height:150px}
.books b{display:block;font:400 18px/1.35 "Source Serif 4",Georgia,serif;color:var(--ink);font-weight:400}
.books span{display:block;margin-top:10px;font:400 13.5px/1.5 Karla,sans-serif;color:var(--ink-2)}
.topics-mesh{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;margin-top:32px}
.topics-mesh span{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.10);font:400 15px/1.4 Karla,sans-serif;color:#DDE6F5}
.topics-mesh span:nth-last-child(-n+3){border-bottom:0}
/* /mosteiro-sao-damiao/ */
.gal{position:relative;display:block;width:628px;height:420px;border-radius:12px;overflow:hidden;background:var(--line)}
.gal img{width:100%;height:100%;object-fit:cover;display:block}
.gal-nav{position:absolute;top:50%;translate:0 -50%;width:44px;height:44px;border-radius:50%;background:rgba(9,16,30,.5);border:1px solid rgba(255,255,255,.5);display:grid;place-items:center;color:#fff;font:400 18px/1 Karla,sans-serif;cursor:pointer;transition:background-color .2s ease}
.gal-nav:hover{background:rgba(9,16,30,.72)}
.gal-nav:focus-visible{outline:2px solid #7FD3DA;outline-offset:3px}
.gal-nav--prev{left:16px}
.gal-nav--next{right:16px}
.gal-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:10px}
.gal-thumbs span{height:62px;border-radius:6px;overflow:hidden}
.gal-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.gal-thumbs .is-on{outline:2px solid var(--teal);outline-offset:1px}
.gal-thumbs .more{display:grid;place-items:center;background:color-mix(in srgb,var(--blue-700) 7%,transparent);font:600 13px/1 Karla,sans-serif;color:var(--blue-700)}
.steps{display:flex;flex-direction:column}
.steps > span{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.steps > span:last-child{border-bottom:0}
.steps b{font:400 20px/1 var(--disp);color:var(--ink-2);font-weight:400}
.steps p{margin:0;font:400 15.5px/1.6 Karla,sans-serif;color:var(--ink-2)}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.donate{display:block;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:20px 22px;text-decoration:none;transition:background-color .25s ease,border-color .25s ease}
.donate + .donate{margin-top:12px}
.donate:hover{background:rgba(255,255,255,.09);border-color:rgba(127,211,218,.5)}
.donate:focus-visible{outline:2px solid #7FD3DA;outline-offset:3px}
.donate b{display:block;font:400 19px/1.3 var(--disp);color:#fff;font-weight:400}
.donate span{display:block;margin-top:8px;font:400 14.5px/1.6 Karla,sans-serif;color:#A8B7D2}
.donate em{color:#7FD3DA;font-weight:600;font-style:normal}
.notice{margin-top:22px;padding:16px 20px;border-left:2px solid var(--teal);background:rgba(14,124,134,.10)}
.notice b{display:block;font:700 10.5px/1 Karla,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#7FD3DA}
.notice span{display:block;margin-top:9px;font:400 14.5px/1.6 Karla,sans-serif;color:#DDE6F5}
/* /faca-parte/ */
.fp{display:grid;grid-template-columns:1fr 420px;gap:64px;align-items:start}
.benefits{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin-top:20px;list-style:none;padding:0}
.benefits li{display:grid;grid-template-columns:6px 1fr;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);font:400 15px/1.55 Karla,sans-serif;color:var(--ink-2)}
.benefits li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);margin-top:8px}
.fp-price b{display:block;margin-top:14px;font:400 40px/1 var(--disp);color:var(--blue-700);font-weight:400}
.fp-form{position:sticky;top:calc(var(--header-h) + 24px);background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:32px}
.fp-form h2{margin:0;font:400 24px/1.25 var(--disp);letter-spacing:.02em;color:var(--blue-700)}
.fp-form .lead{margin:12px 0 24px;font:400 14px/1.6 Karla,sans-serif;color:var(--ink-2)}
.fp-form .fields{display:flex;flex-direction:column;gap:12px}
.fp-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fp-form input{height:48px;border-radius:10px;background:#fff;border:1px solid var(--line);padding:0 16px;font:400 14.5px/1 Karla,sans-serif;color:var(--ink);width:100%;box-sizing:border-box;transition:border-color .2s ease,box-shadow .2s ease}
.fp-form input::placeholder{color:#8B93A6}
.fp-form input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 18%,transparent)}
.fp-form button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;margin-top:20px;border:0;border-radius:30px;background:var(--blue-700);color:#fff;font:600 14.5px/1 Karla,sans-serif;cursor:pointer;transition:background-color .2s ease}
.fp-form button:hover{background:var(--blue-900)}
.fp-form button:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.fp-form .alt{margin:16px 0 0;text-align:center;font:400 13px/1.6 Karla,sans-serif;color:var(--ink-2)}
.fp-form .alt a{color:var(--blue-700)}
@media(max-width:980px){.split,.split--right{grid-template-columns:1fr}.shot{width:100%;height:320px}.gal{width:100%}.books{grid-template-columns:repeat(3,1fr)}.topics-mesh{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.cards3{grid-template-columns:1fr}.benefits{grid-template-columns:1fr}.fp{grid-template-columns:1fr}.fp-form{position:static}}
@media(max-width:760px){.pagecta{flex-direction:column;align-items:flex-start}.pagecta p{white-space:normal}.pagecta .acts{margin-left:0}.facts{flex-wrap:wrap;gap:28px}}
@media(max-width:620px){.books,.topics-mesh{grid-template-columns:1fr}.gal-thumbs{grid-template-columns:repeat(4,1fr)}}
@media(prefers-reduced-motion:reduce){a.pcard:hover{transform:none}}

/* ===== Páginas do menu Atividades (handoff atividades_v2) ===== */
/* --page-pad-x alinha o conteúdo full-bleed à coluna do site (máx 1440 centrado). */
.cover,.chipnav,.formband,.endnote{--page-pad-x:max(var(--gut),calc((100% - var(--max)) / 2 + var(--gut)))}
/* Capas de TODAS as páginas (20/10/2026, pedido do dono): a mesma altura e o
   mesmo título da capa do Acervo. --capa-h 448 → 275px (402px no total, com a
   barra do topo) e título de 62 → 48px. Em tela menor, a mesma proporção. */
.cover{--capa-h:275px;position:relative;width:100%;height:var(--capa-h);overflow:hidden;background:#0F1B31}
.cover > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Quem Somos: a foto do grupo tem as pessoas na metade de baixo e árvores em
   cima. Centralizada (padrão do `cover`), a caixa de 480px descartava 67px de
   cada lado e cortava a primeira fila. Ancorada na base, os 134px de excesso
   saem todos do topo — que é só copa de árvore. */
body[data-page="mosteiro-sao-damiao"] .cover > img{object-position:center bottom}
/* Quem Somos fica um pouco acima da base: 90% em vez de 100% devolve uma
   faixa do topo (o céu/copa acima do grupo) sem perder a primeira fila
   de pessoas, que é o motivo de a âncora estar embaixo. */
body[data-page="quem-somos"] .cover > img{object-position:center 83%}
/* Faça parte: a roda de pessoas está no terço de baixo e a copa da árvore
   ocupa os dois terços de cima. Centralizado, o recorte de 384px ficava só
   com galho e o topo das cabeças. Em 78% o grupo inteiro entra e o título
   cai sobre o tronco, que é a parte mais escura da foto. */
body[data-page="faca-parte"] .cover > img{object-position:center 78%}
/* Projeção Astral/Clarividência/Bioenergia: o grupo em roda está no terço de
   baixo e a copa das árvores ocupava o topo. Em 85% o topo é cortado e a
   atividade (as pessoas) sobe para a metade visível, com o título sobre o
   caminho de pedras. */
body[data-page="projecao-astral-clarividencia-e-bioenergia"] .cover > img{object-position:center 85%}
/* Véu NEUTRO (24/10): as capas novas já vêm com a luz tratada e o azul-marinho
   apagava e tingia a foto. Preto leve no topo (barra), quase nada no meio e
   mais forte só na base, onde fica o título. */
.cover::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.10) 38%,rgba(0,0,0,.58) 100%)}
.cover > *:not(img){z-index:1}
.cover-crumb{position:absolute;left:var(--page-pad-x);top:40px;margin:0;font:400 13px/1 Karla,sans-serif;color:#C3CEE4}
.cover-crumb a{color:#C3CEE4;text-decoration:none}
.cover-crumb a:hover{color:#fff}
.cover-crumb a:focus-visible{outline:2px solid #7FD3DA;outline-offset:3px}
.cover-crumb .sep{opacity:.5;margin:0 7px}
/* Título centralizado em todas as capas. Antes ele seguia --page-pad-x,
   que parte do container de 1440px, enquanto o corpo usa 1296 — dava 7px
   de desalinho nas páginas novas e 79px em Quem Somos. Centralizado, a
   pergunta 'alinha com qual margem?' deixa de existir. */
.cover-title{position:absolute;left:0;right:0;bottom:38px;
  max-width:var(--f1a-container);margin-inline:auto;padding-inline:var(--gut);text-align:center}
.cover-title::before{margin-inline:auto}
.cover-title::before{content:"";display:block;width:64px;height:2px;background:var(--teal);margin-bottom:26px}
/* `margin:0 auto` e não `margin:0`: com max-width de 20ch a caixa do h1 é
   menor que a coluna, e sem a centragem ela encostava à esquerda enquanto o
   rótulo acima ficava no eixo — dois elementos da mesma capa em eixos
   diferentes. Só não aparecia nas páginas `.read-wide`, que zeram o
   max-width. Na base, vale para todas. */
.cover-title h1{margin:0 auto;max-width:20ch;font:400 clamp(34px,3.2vw,48px)/1.06 var(--disp);letter-spacing:.02em;color:#fff}
/* Capa das páginas SEM foto (Faça parte, Doar energia, Receber energia). A
   única diferença para a capa fotográfica é o fundo — gradiente radial no
   lugar da imagem. Tudo o mais (altura de 384px e seus breakpoints, título
   ancorado na base, escala de 4.3vw) vem por herança de `.cover`.

   Antes esta variante redefinia a caixa: `height:auto` e h1 de 5.3vw. Em
   1440px isso dava 266px de capa e título de 76px, contra 384px e 62px de
   todas as outras páginas do menu — as três destoavam do resto do site. */
.cover--type::after{background:radial-gradient(1200px 520px at 22% 120%,rgba(14,124,134,.30),transparent 68%),radial-gradient(900px 420px at 88% -10%,rgba(52,80,127,.55),transparent 70%)}
.cover-lead{margin:30px 0 0;max-width:46ch;font:400 22px/1.55 "Source Serif 4",Georgia,serif;color:#C3CEE4}
/* ── Capa editorial (hoje só em Imposição de Mãos) ───────────────────────────
   Rótulo da seção com filete acima do título; título em caixa mista (Cinzel só
   tem capitulares e virava versalete) alinhado à esquerda; foto mais fechada
   para o texto ganhar contraste. O filete decorativo do .cover-title sai — quem
   faz esse papel agora é o traço do eyebrow. */
.cover--editorial .cover-title::before{display:none}
.cover--editorial .cover-eyebrow{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 20px;font:600 12px/1 Karla,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#C3CEE4}
/* fio dos DOIS lados: com o título centralizado, um fio só à esquerda
   puxava o rótulo para fora do eixo. */
.cover--editorial .cover-eyebrow::before,
.cover--editorial .cover-eyebrow::after{content:"";flex:none;width:38px;height:1px;background:currentColor;opacity:.7}
/* Mesmo véu neutro da `.cover` (24/10). O véu azul-marinho uniforme de 55%
   saiu: escurecia a foto inteira e a deixava azulada. */
.cover--editorial::after{background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.10) 38%,rgba(0,0,0,.58) 100%)}
/* Alinha o texto da capa à COLUNA DE LEITURA. A coluna usa a MESMA largura do
   site (--max, igual ao header/nav e às seções da home), então a capa começa no
   mesmo x que a barra de topo. Mesma conta que --page-pad-x, em qualquer largura. */
.cover--editorial{--cover-text-x:calc(max(0px, (100% - var(--max)) / 2) + var(--gut))}
.cover--editorial .cover-title{left:var(--cover-text-x);right:var(--cover-text-x)}
/* Páginas cujo corpo usa .wrap (e não a coluna .read de 1120px): a capa alinha
   pela goteira da própria .wrap. */
.cover--editorial.cover--wrap{--cover-text-x:var(--page-pad-x)}
/* Anula a centragem que .read-wide impõe às capas (padrão de /quem-somos/). */

.read-wide .cover--editorial .cover-title h1,
/* A lead da capa também: .read-wide a centraliza com margin-inline:auto (era o
   layout centralizado), e na variante à esquerda ela ficava 220px deslocada. */
.read-wide .cover--editorial .cover-title .cover-lead{margin-inline:0}
.chipnav{display:flex;flex-wrap:wrap;gap:10px;padding:26px var(--page-pad-x);border-bottom:1px solid #D6D1C4}
.chipnav a,.chipnav button{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:8px;border:0;background:transparent;color:var(--blue-700);font:400 13.5px/1 Karla,sans-serif;text-decoration:none;cursor:pointer;transition:background-color .2s ease}
.chipnav a:hover,.chipnav button:hover{background:color-mix(in srgb,var(--blue-700) 7%,transparent)}
.chipnav a:focus-visible,.chipnav button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.chipnav a[aria-current="page"]{background:var(--blue-700);color:#fff;font-weight:600}
.chipnav .out{margin-left:auto;color:var(--ink-2)}
.read{max-width:960px;margin:0 auto;padding-inline:var(--gut)}
.read--first{padding-top:90px}
.read + .read{padding-top:63px}
/* 88 → 48px: este é o respiro entre o fim do texto corrido e a faixa "Formas
   de participar" que fecha a página. Os 88 vinham de quando o bloco de leitura
   terminava a página; com a faixa logo abaixo, eles somavam ~102px de vazio até
   a etiqueta e desligavam o texto do que vem em seguida. */
.read--last{padding-bottom:54px}
/* 18/1.85 → 19/1.95 em 06/09/2026, a pedido: "aumente um pouquinho a fonte e um
   pouquinho o espaçamento" nas páginas de Principais Temas, Sobre, Atividades.
   Vale para toda a coluna de leitura, que é a mesma nas três — meio ponto de
   corpo e 0,10 de entrelinha, sem mexer na medida da linha nem na margem. */
.read p{margin:0 0 29px;font:400 19px/1.95 Karla,sans-serif;color:var(--ink-2)}
.read p:last-child{margin-bottom:0}
/* Mesma tipografia de /como-ajudar/, que é a referência do site: Karla no cinza
   secundário. Estas páginas usavam um corpo editorial de 24px em serifada —
   grande demais e destoando do resto. */
.read .lead{font:400 19px/1.6 Karla,sans-serif;color:var(--ink-2)}
.read .lead--cinzel{font:400 32px/1.2 var(--disp);letter-spacing:.02em;color:var(--blue-700);margin-bottom:31px}
.read strong,.read b{color:var(--ink);font-weight:600}
.read a{color:var(--teal);text-decoration:underline;text-underline-offset:4px}
.read a:hover{color:var(--blue-700)}
.read a:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.shead{display:flex;align-items:baseline;gap:18px;padding-bottom:22px;border-bottom:1px solid #D6D1C4}
.snum{font:400 44px/1 var(--disp);color:var(--teal)}
.stit{margin:0;font:400 26px/1.25 var(--disp);color:var(--blue-700)}
.shead + p{margin-top:26px}
.substeps{display:flex;flex-direction:column;margin-top:8px}
.substeps > span{display:grid;grid-template-columns:28px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--line);font:400 17px/1.7 Karla,sans-serif;color:var(--ink-2)}
.substeps > span:last-child{border-bottom:0}
.substeps b{font:400 15px/1.5 var(--disp);color:var(--ink-2);font-weight:400}
.linklist{margin-top:26px;border-top:1px solid #D6D1C4}
.linklist a{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:20px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding-left .25s ease}
.linklist a:hover{padding-left:12px}
.linklist a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.linklist span{font:400 26px/1.25 "Source Serif 4",Georgia,serif;color:var(--ink)}
.linklist em{font-style:normal;font:400 14px/1 Karla,sans-serif;color:var(--teal)}
.formband{margin-top:80px;padding:72px var(--page-pad-x);background:var(--paper-2);border-top:1px solid #D6D1C4}
.formband > form{max-width:960px;margin:0 auto}
.formband h2{margin:0 0 34px;font:400 34px/1.15 var(--disp);letter-spacing:.02em;color:var(--blue-700)}
.formband .fields{display:flex;flex-direction:column}
.formband .row2{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.formband .row21{display:grid;grid-template-columns:2fr 1fr;gap:32px}
.formband input{width:100%;box-sizing:border-box;padding:14px 0;border:0;border-bottom:1px solid #C9C3B4;background:transparent;font:400 16px/1.4 Karla,sans-serif;color:var(--ink);transition:border-color .2s ease,box-shadow .2s ease}
.formband input::placeholder{color:#8B93A6}
.formband input:focus{outline:none;border-color:var(--teal);box-shadow:0 2px 0 0 var(--teal)}
/* Textarea (Objetivo, Relato, Mensagem): mesma pauta dos inputs, com altura
   para um parágrafo. */
.formband textarea{width:100%;box-sizing:border-box;min-height:120px;margin-top:14px;padding:14px 0;border:0;border-bottom:1px solid #C9C3B4;background:transparent;font:400 16px/1.5 Karla,sans-serif;color:var(--ink);resize:vertical;transition:border-color .2s ease,box-shadow .2s ease}
.formband textarea::placeholder{color:#8B93A6}
.formband textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 2px 0 0 var(--teal)}
/* Espaço entre inputs empilhados na coluna .fields (row2 já tem seu gap). */
.formband .fields > input,.formband .fields > .row2,.formband .fields > textarea{margin-top:14px}
.formband .fields > input:first-child,.formband .fields > .row2:first-child{margin-top:0}
.formband .agree{display:grid;grid-template-columns:18px 1fr;gap:14px;margin-top:28px;align-items:start;font:400 14px/1.7 Karla,sans-serif;color:var(--ink-2)}
.formband .agree input{width:18px;height:18px;margin-top:3px;padding:0;border:1px solid #B9B3A5;border-radius:4px;background:#fff}
.formband button{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 34px;margin-top:32px;border:0;border-radius:0;background:var(--blue-700);color:#fff;font:600 15px/1 Karla,sans-serif;cursor:pointer;transition:background-color .2s ease}
.formband button:hover{background:#0F1B31}
.formband button:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.endnote{margin-top:80px;padding:88px var(--page-pad-x);background:var(--paper-2);border-top:1px solid #D6D1C4;text-align:center}
.endnote::before{content:"";display:block;width:64px;height:2px;background:var(--teal);margin:0 auto 30px}
.endnote p{margin:0;font:400 clamp(30px,3.9vw,56px)/1.12 var(--disp);letter-spacing:.02em;color:var(--blue-700)}
.endnote a{color:var(--teal);text-decoration:underline;text-underline-offset:8px}
@media(max-width:980px){.cover{--capa-h:240px}.cover-title{bottom:40px}}
@media(max-width:900px){.chipnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.chipnav::-webkit-scrollbar{display:none}.chipnav a{flex:0 0 auto}.chipnav .out{margin-left:0}.formband .row2,.formband .row21{grid-template-columns:1fr;gap:0}}
@media(max-width:760px){.cover{--capa-h:205px}.shead{flex-direction:column;align-items:flex-start;gap:8px}.snum{font-size:34px}.formband,.endnote{padding-block:56px}}
@media(max-width:620px){.linklist span{font-size:20px}.cover-lead{font-size:18px}}

/* ===== Páginas do menu Sobre v2 (handoff sobre_v2): específico, base = atividades v2 ===== */
.bleed{position:relative;width:100%;height:420px;overflow:hidden;background:#0F1B31;margin-top:72px}
.bleed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* coluna de leitura alinhada à largura do site (--max), igual ao header/nav e às
   seções da home — margens laterais idênticas às da barra de topo. */
/* Container do corpo = 1296px, o mesmo do Mosteiro: assim a margem lateral
   é a mesma no site inteiro e o título da capa alinha com o conteúdo. */
.read-wide .read,.read-wide .read-figure{max-width:var(--f1a-container)}
/* título da capa centralizado — /quem-somos/ */
.read-wide .cover-title{text-align:center}
.read-wide .cover-title::before{margin-left:auto;margin-right:auto}
.read-wide .cover-title h1{max-width:none;margin-inline:auto}
.read-wide .cover-title .cover-lead{margin-inline:auto}
/* Destaque editorial: termos-chave em azul, SEM negrito e SEM sublinhado.
   O sublinhado saiu em 21/08: em "reconstrução individual", "espiritualidade
   saudável", "evolução consciencial" ele prometia um link que não existe.
   Sublinhado no corpo do texto é sinal de destino clicável e nada mais.
   Quem é link continua sublinhado — o traço vem do próprio `.read a`, que
   pinta a decoração ao longo do texto do <strong> filho. */
.read-wide .read strong{font-weight:400;color:var(--blue-700)}
/* imagem alinhada à coluna de leitura (mesma geometria de .read) — /quem-somos/ */
.read-figure{max-width:960px;margin:63px auto;padding-inline:var(--gut)}
.read-figure img{display:block;width:100%;height:420px;object-fit:cover;border-radius:14px;background:#0F1B31}
/* Véu de 30% sobre a foto no meio do texto de Quem Somos, no mesmo azul das
   capas. O `inset` desconta o padding lateral da figure, senão a camada
   avançaria sobre a coluna de texto em vez de parar na imagem. */
body[data-page="quem-somos"] .read-figure{position:relative}
body[data-page="quem-somos"] .read-figure::after{
  content:"";position:absolute;inset:0 var(--gut);
  border-radius:14px;background:rgba(9,16,30,.30);pointer-events:none;
}
/* retrato centralizado (imagem quase quadrada, sem crop) — /fundador/ */
.read-portrait{width:min(440px,calc(100% - 2*var(--gut)));margin:58px auto}
.read-portrait img{display:block;width:100%;height:auto;border-radius:14px}
/* Carrossel de fotos (Mosteiro). O palco tem proporção fixa e as imagens ficam
   empilhadas em absoluto: sem isso a altura pularia a cada troca, porque as
   fotos não têm exatamente as mesmas dimensões. */
.carrossel{position:relative}
.carrossel-palco{position:relative;aspect-ratio:608/654;border-radius:14px;overflow:hidden;background:#0F1B31}
.carrossel-palco img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}
.carrossel-palco img.on{opacity:1}
.carrossel-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);background:rgba(9,16,30,.35);color:#fff;display:grid;place-items:center;
  cursor:pointer;font-size:17px;line-height:1;transition:background-color .2s ease}
.carrossel-nav:hover{background:rgba(9,16,30,.65)}
.carrossel-nav:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.carrossel-nav.prev{left:10px}
.carrossel-nav.next{right:10px}
.carrossel-pontos{display:flex;justify-content:center;gap:7px;margin-top:14px}
.carrossel-pontos button{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:color-mix(in srgb,var(--ink-2) 32%,transparent);transition:background-color .2s ease}
.carrossel-pontos button.on{background:var(--teal)}
.carrossel-pontos button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.carrossel-palco img{transition:none}}
/* Mapa no pé do Mosteiro. Proporção larga (não quadrada): o que importa é
   situar a região, e um mapa alto empurraria o rodapé para longe. */
.mapa-sec{background:var(--paper-2);padding-top:clamp(10px,1vw,16px);padding-bottom:clamp(34px,4vw,56px);margin-top:clamp(28px,3vw,44px)}
.mapa-sec .acts-eyebrow{margin:0}
.mapa{margin-top:24px;border-radius:14px;overflow:hidden;background:#0F1B31}
.mapa iframe{display:block;width:100%;aspect-ratio:21/9;border:0}
@media(max-width:760px){.mapa iframe{aspect-ratio:4/3}}
.mapa-end{margin:14px 0 0;text-align:center;font:400 15px/1.5 Karla,sans-serif}
.mapa-end a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--ink-2) 35%,transparent)}
.mapa-end a:hover{color:var(--teal);border-color:var(--teal)}
@media(max-width:760px){.read-figure{margin:49px auto}.read-figure img{height:300px}.read-portrait{margin:45px auto}}
.stats{display:flex;gap:56px;padding:30px 0;border-top:1px solid #D6D1C4;border-bottom:1px solid #D6D1C4}
.stats > span{display:block}
.stats b{display:block;font:400 42px/1 var(--disp);color:var(--blue-700);font-weight:400}
.stats i{display:block;margin-top:10px;font:400 14px/1.45 Karla,sans-serif;font-style:normal;color:var(--ink-2)}
.price{display:flex;align-items:baseline;gap:20px;margin-top:30px;padding:26px 0;border-top:1px solid #D6D1C4;border-bottom:1px solid #D6D1C4}
.price b{font:400 44px/1 var(--disp);color:var(--blue-700);font-weight:400}
.price span{font:400 15px/1.5 Karla,sans-serif;color:var(--ink-2)}
.mesh{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin-top:14px}
.mesh span{padding:12px 0;border-bottom:1px solid var(--line);font:400 16px/1.5 Karla,sans-serif;color:var(--ink-2)}
.mesh span:nth-last-child(-n+2){border-bottom:0}
.bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bullets li{display:grid;grid-template-columns:6px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);font:400 17px/1.7 Karla,sans-serif;color:var(--ink-2)}
.bullets li:last-child{border-bottom:0}
.bullets li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);margin-top:11px}
.read .subhead{margin:34px 0 11px;font:400 20px/1.6 "Source Serif 4",Georgia,serif;color:var(--ink)}
/* linhas de doação — /mosteiro-sao-damiao/ (não confundir com .donate escuro do handoff antigo) */
.dlinks{margin-top:18px;border-top:1px solid var(--line)}
.dlinks a{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:20px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding-left .25s ease}
.dlinks a:hover{padding-left:12px}
.dlinks a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.dlinks span{font:400 17px/1.7 Karla,sans-serif;color:var(--ink-2)}
.dlinks strong{color:var(--ink);font-weight:600}
.dlinks em{font-style:normal;font:400 14px/1 Karla,sans-serif;color:var(--teal)}
.warn{margin-top:30px;padding:20px 24px;border-left:2px solid var(--teal);background:rgba(14,124,134,.07)}
.warn b{display:block;font:700 10.5px/1 Karla,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.warn span{display:block;margin-top:12px;font:400 17px/1.7 Karla,sans-serif;color:var(--ink)}
.endnote p{max-width:30ch;margin-inline:auto;font-size:clamp(28px,3vw,40px)}
@media(max-width:980px){.bleed{height:320px}.mesh{grid-template-columns:1fr}.mesh span:nth-last-child(-n+2){border-bottom:1px solid var(--line)}.mesh span:last-child{border-bottom:0}}
@media(max-width:900px){.stats{flex-wrap:wrap;gap:28px}}
@media(max-width:760px){.bleed{height:240px;margin-top:56px}.stats b{font-size:34px}.price{flex-direction:column;gap:6px}}

/* ===== Páginas de Principais Temas v2 (handoff temas_v2): base = atividades v2 ===== */
/* breadcrumb de três níveis — Home / Temas / <tema> */
.cover-crumb .sep + a{color:#C3CEE4;text-decoration:none}
.cover-crumb .sep + a:hover{color:#fff}
/* subtítulo (kickline) dentro da coluna de leitura: "O que é a Clarividência?" */
.read .kickline{margin:0;font:400 20px/1.6 "Source Serif 4",Georgia,serif;color:var(--blue-700)}
.read .kickline + .lead{margin-top:29px}
/* listas em duas colunas (número ímpar deixa a última linha com uma coluna livre) */
/* Lista de resultados — índice editorial numerado (handoff 1b). Coluna única:
   as duas colunas anteriores desconectavam a leitura e deixavam alturas
   desiguais entre itens de uma e de duas linhas. Sem caixas, sem barra vertical.
   36px abaixo do parágrafo introdutório (colapsa com os 26px dele) e 48px acima
   do seguinte, como na spec. */
.results-list{display:flex;flex-direction:column;list-style:none;margin:36px 0 48px;padding:0;border-top:1px solid #DFDACB}
/* Filete em TODOS os itens, inclusive o último — é ele que fecha o bloco. */
.results-list__item{display:flex;align-items:baseline;gap:26px;padding:19px 4px;border-bottom:1px solid #DFDACB;break-inside:avoid}
/* Cormorant Garamond, como na spec — carregada só com os 10 dígitos. As figuras
   old-style dela (o "0" em altura de x, o "3"/"5" descendo) são o que dá o tom da
   referência; nenhuma serifada já no site tem isso. Sem tabular-nums: ele desliga
   justamente as old-style. */
.results-list__num{flex:none;width:26px;font:500 20px/1 "Cormorant Garamond","Source Serif 4",Georgia,serif;color:#7FA9A6}
.results-list__text{font:400 18px/1.45 Karla,sans-serif;color:#33405A}

/* ═══ Página de tema — handoff design_handoff_tema_bioenergias ═══════════════
   Três mudanças de fundo em relação à página publicada:
     1. a lista numerada de assuntos virou grade de cartões com ícone;
     2. a seção de conteúdos virou carrossel horizontal, em vez de quebrar em
        duas fileiras;
     3. bordas e rótulos ganharam contraste — o fundo da página é creme, não
        branco, e as bordas claras sumiam em telas de contraste baixo.

   ─── AS CORES SÃO AS DO HANDOFF, EM VARIÁVEIS LOCAIS ───────────────────────
   O handoff dá a tabela de tokens como final (#157A70 de verde-petróleo contra
   o `--teal` #0E7C86 do site, #1E3050 contra `--blue-700` #233658). Ficam presas
   a `.tema` para a página sair 1:1 sem mexer na paleta do resto do site.

   ─── A SANS É KARLA, NÃO POPPINS ───────────────────────────────────────────
   Único desvio deliberado. O handoff pede Poppins; o site não a carrega, e
   `components/site/fontes.ts` documenta que cada peso a mais é um arquivo
   pré-carregado (a troca dos <link> do Google por next/font foi feita para
   cortar 340 KB). Tamanhos, pesos e letter-spacing seguem o handoff ao pé da
   letra; muda a família. Os títulos usam Cormorant Garamond, que o site JÁ
   carrega e é exatamente a do handoff. */
/* A paleta também na própria grade: assim os cartões funcionam em páginas que
   não são de tema (`/cursos/`) sem herdar o resto das regras de `.tema`. */
.tema,.tema-assuntos{
  --tt:#157A70;   /* verde-petróleo: rótulos, ícones, botões, hover */
  --tt-h:#0F635A;
  --tb:#1E3050;   /* azul institucional: títulos e rótulo do cartão */
  --tc:#46586F;   /* texto de corpo */
  --tl:#BFC6C2;   /* borda de cartão e de controle — NÃO clarear */
  --tn:#C3C9C4;   /* número do cartão */
  --tf:#F1F4F1;   /* faixa do Acervo */
}
/* Os PARÁGRAFOS ficam como no resto do site: Karla 18px/1.85 em `--ink-2`.
   O handoff §4 pede 15,5px em #46586F, e chegou a valer aqui — foi revertido a
   pedido. A família nunca mudou: o handoff pede Poppins, que o site não
   carrega, e o corpo sempre foi Karla. Voltar ao valor do handoff é
   descomentar a linha abaixo.
   .tema .read p,.tema .read .lead{font:400 15.5px/1.85 var(--body);color:var(--tc)} */

/* ── O respiro antes de TODO cabeçalho de seção ────────────────────────────
   O `.read` do site já abre com `padding-top:56px`, e a margem de 64px do
   cabeçalho somava em cima: dava 120px quando a seção abria um `.read` novo e
   64px quando o cabeçalho ficava dentro de um `.read` já aberto (o caso da
   seção de conteúdos de Bioenergias). Duas distâncias diferentes para a mesma
   coisa.

   Aqui o `.read` das páginas de tema passa a valer os 64px do handoff, e o
   cabeçalho que ABRE um `.read` zera a própria margem — quem dá o respiro é um
   só dos dois. `read--first` fica de fora: é o respiro sob a capa. */
.tema .read:not(.read--first){padding-top:72px}
.tema .read > .tema-eyebrow:first-child,
.tema .read > .tema-h2:first-child,
.tema .read > .tema-carro-cab:first-child{margin-top:0}

/* ── Cabeçalho de seção: filete de 40px + etiqueta + título ────────────────
   Substitui o título com filete horizontal de largura total, que não separava
   as seções com clareza. */
.tema-eyebrow{display:flex;align-items:center;gap:16px;margin-top:72px}
.tema-eyebrow i{flex:none;width:40px;height:1px;background:var(--tt)}
.tema-eyebrow b{font:500 11px/1 var(--body);letter-spacing:.2em;color:var(--tt)}
/* 64px é o respiro de uma seção nova; 18px é a distância entre a ETIQUETA e o
   título. A regra base precisa ser a de seção — a maioria dos títulos das
   páginas de tema ainda não tem etiqueta, e com 18px fixos eles encostavam no
   parágrafo anterior. */
.tema-h2{margin:72px 0 0;font:400 44px/1.15 var(--serif);letter-spacing:.005em;color:var(--tb)}
.tema-eyebrow + .tema-h2{margin-top:20px}
/* O que vem logo abaixo do título respira; a grade de assuntos tem os 38px do
   handoff e ganha da regra geral por vir depois na folha. */
.tema .tema-h2 + *{margin-top:30px}

/* ── Assuntos em cartões ───────────────────────────────────────────────────
   `auto-fit` em vez de `repeat(3,1fr)` fixo: o handoff aponta a grade como o
   ponto sensível — com 3 colunas, 4 ou 5 assuntos deixam vão na segunda
   fileira, e os temas têm de 4 a 7. Com 6 (o caso de Bioenergias) dá as mesmas
   duas fileiras de três do desenho. */
/* A grade NÃO é escopada em `.tema`: `/cursos/` usa os mesmos cartões e não é
   página de tema. A margem ganha da regra genérica `.tema-h2 + *` por um
   seletor próprio, logo abaixo. */
.tema-assuntos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:42px}
.tema .tema-h2 + .tema-assuntos{margin-top:42px}
.tema-card{display:flex;flex-direction:column;gap:22px;padding:28px 26px 30px;background:#FFFFFF;border:1px solid var(--tl);border-radius:8px;transition:border-color .18s ease}
.tema-card:hover{border-color:var(--tt)}
.tema-card-topo{display:flex;align-items:flex-start;justify-content:space-between}
.tema-card-topo svg{flex:none}
.tema-card-n{font:400 20px/1 var(--serif);color:var(--tn)}
.tema-card-t{font:400 17px/1.4 var(--body);color:var(--tb)}
/* O texto de fechamento vem 56px abaixo da grade (handoff §6→§7). */
/* `.read .tema-assuntos + *` e não `.tema .tema-assuntos + *`: a grade também
   aparece fora das páginas de tema (`/cursos/`). O `.read` dá a especificidade
   necessária para vencer `.read p{margin:0 0 29px}`, que zera a margem
   superior do parágrafo seguinte. */
.read .tema-assuntos + *{margin-top:62px}

/* ── Carrossel de conteúdos ────────────────────────────────────────────────
   Com 1008px de coluna, quatro itens ficam visíveis e o quinto aparece
   insinuado na borda — é o que indica que há mais. */
/* 64px é o respiro de uma seção nova; 18px é a distância entre a ETIQUETA e o
   título. Quem não tem etiqueta (temas ainda não passados para o cabeçalho
   novo) precisa do respiro cheio — sem isto o título encostava no que vinha
   acima, com margem zero. */
.tema-carro-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-top:72px}
.tema-eyebrow + .tema-carro-cab{margin-top:20px}
/* Cabeçalho só com as setas (o título veio da seção que embrulha o bloco): não
   abre seção nova — encosta no trilho, alinhado à direita. */
.tema-carro-cab:not(:has(.tema-h2)){margin-top:27px;justify-content:flex-end}
.tema-carro-cab:not(:has(.tema-h2)) + .tema-trilha{margin-top:16px}
.tema .tema-intro{margin-top:22px}
.tema-carro-cab .tema-h2{margin:0}
.tema-setas{display:flex;gap:10px;padding-bottom:8px}
.tema-seta{width:40px;height:40px;flex:none;border:1px solid var(--tl);border-radius:50%;background:transparent;display:flex;align-items:center;justify-content:center;color:var(--tb);cursor:pointer;transition:border-color .18s ease,color .18s ease}
.tema-seta:hover:not(:disabled){border-color:var(--tt);color:var(--tt)}
.tema-seta:focus-visible{outline:2px solid var(--tt);outline-offset:2px}
.tema-seta:disabled{opacity:.35;cursor:default}
/* A barra nativa some, a rolagem fica. */
.tema-trilha{display:flex;gap:24px;margin-top:38px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
.tema-trilha::-webkit-scrollbar{display:none}
.tema-trilha:focus-visible{outline:2px solid var(--tt);outline-offset:4px}
.tema-item{flex:none;width:266px;scroll-snap-align:start;text-decoration:none}
.tema-capa{position:relative;width:100%;aspect-ratio:1/1;border-radius:6px;overflow:hidden;background:#12203A;display:grid;place-items:center}
.tema-capa--playlist{background:#2A1840}
/* `contain`, não `cover`: as capas da loja são quadradas (450×450) e preenchem
   o quadro, mas as do YouTube são 16/9 (1280×720) e as de livro são 1500×1050
   — com `cover` o quadrado cortava as laterais e comia o título gravado na
   arte. Inteira, com barra em cima e embaixo no fundo do próprio cartão. */
.tema-capa img{width:100%;height:100%;object-fit:contain;display:block}
/* `.read a{color:teal;text-decoration:underline}` alcançaria o card inteiro. */
.read .tema-item,.read .tema-item:hover{color:inherit;text-decoration:none}
/* `display:block`: são <span> dentro do <a>, e em linha o título colava no
   rótulo ("Chacras e SexualidadePALESTRA"). */
.tema-item-t{display:block;margin-top:16px;font:500 13.5px/1.5 var(--body);color:var(--tb)}
.tema-item-k{display:block;margin-top:5px;font:500 10.5px/1 var(--body);letter-spacing:.14em;color:var(--tt)}

/* ── Faixa do Acervo ───────────────────────────────────────────────────────
   Era um link de texto no fim de um parágrafo; virou faixa para que o caminho
   ao Acervo não passe batido. */
/* O convite ao Acervo usa o desenho da faixa "Torne-se um membro" da home
   (`.hb-membro-faixa`, handoff `design_handoff_faixa_associado` 51d), a pedido
   do Rafael (18/09/2026): cartão de papel com fio de 1px e raio de 14, e o
   botão verde sólido de 46px com versalete. Eram um retângulo #F1F4F1 de raio
   8 e uma pílula verde arredondada. Os valores são os mesmos da home — se um
   dia a 51d mudar, os dois têm de andar juntos. */
.tema-faixa{display:grid;grid-template-columns:1fr auto;align-items:center;gap:48px;
  margin-top:62px;padding:30px 36px;border:1px solid var(--hb-linha);border-radius:14px;
  background:var(--hb-papel)}
.read .tema-faixa p{margin:0;max-width:72ch;font:400 15.5px/1.7 var(--body);color:#55607A}
/* `box-sizing:border-box` é obrigatório: sem ele a borda soma e o botão vai a
   48px em vez dos 46 do desenho. */
.read .tema-faixa a{display:inline-flex;align-items:center;box-sizing:border-box;flex:none;
  height:46px;padding:0 26px;border:1px solid var(--hb-verde);border-radius:3px;background:var(--hb-verde);
  font:700 11.5px/1 var(--body);letter-spacing:.15em;text-transform:uppercase;color:#fff;text-decoration:none;
  transition:background .2s ease,border-color .2s ease}
.read .tema-faixa a:hover{background:#0F6047;border-color:#0F6047;color:#fff}
.read .tema-faixa a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ── Faixa navy dos materiais ──────────────────────────────────────────────
   A seção de materiais dividia o creme com todo o resto do texto, e nada a
   separava do que vinha antes. As capas das palestras já são navy estreladas:
   soltas no claro elas eram quatro retângulos escuros; sobre a faixa viram uma
   galeria só.

   O NAVY É O DO SISTEMA 1a (`--f1a-*`), o mesmo das faixas do Fundador e do
   Mosteiro — nenhuma cor nova entra na paleta. Por isso as cores de texto aqui
   repetem as de `.f1a--areia`: #F3F1EC no corpo, o teal CLARO #3FB6C1 nos
   rótulos (o `--tt` #157A70 dá 2,3:1 sobre navy) e cards em #1C2F4E.

   Sangra até as bordas da janela sem wrapper próprio: `margin-inline` puxa o
   elemento para 100vw e `padding-inline:calc(50vw - 50%)` devolve o conteúdo à
   coluna — a porcentagem resolve contra a largura do `.read`, não contra os
   100vw do próprio elemento. `html` e `body` já têm `overflow-x:clip` (linhas
   76 e 78), então não nasce barra horizontal. */
/* ── A FAIXA OCUPA, NO MÍNIMO, A TELA ─────────────────────────────────────
   Mesma regra do sistema 1a (`.f1a`, linha ~1380): "uma faixa mais curta que a
   viewport deixa a próxima espiando por baixo e quebra o ritmo". Aqui o
   cabeçalho é `position:relative` (127px, rola junto), então o alvo é `100dvh`
   cheio — não `100dvh - header`, que é o valor certo só para as faixas que
   nascem coladas no topo da página.

   `align-content:center` em vez de flexbox: ele centra o conteúdo do bloco SEM
   trocar o contexto de formatação, e as margens dos filhos continuam
   colapsando como antes. Com `display:flex` o parágrafo de introdução somaria
   os 29px dele aos 38px do trilho (67px onde o desenho pede 38). Onde o
   navegador não suportar, o conteúdo fica no topo — degrada sem quebrar. */
/* SEM FAIXA NAVY (pedido do Rafael, 18/09/2026): a seção fica no mesmo papel
   das outras do tema. Saíram com o fundo o `min-height:100dvh` e o
   `align-content:center` — sem cor para preencher, a tela inteira virava vão
   em branco, e centrar o conteúdo dentro dele não tinha mais sentido. A
   sangria de largura fica: é ela que dá ao trilho mais espaço que a coluna de
   texto, e isso não dependia da cor.
   Todas as regras de cor que existiam abaixo (título, corpo, rótulo, setas,
   capa, faixa e acordeão em tom de navy) foram removidas: as regras-base já
   são as claras, e mantê-las deixaria texto claro sobre papel claro. */
.tema-mats{
  margin-inline:calc(50% - 50vw);width:100vw;padding-inline:calc(50vw - 50%);
  /* Sem padding próprio: os 110px/118px eram o respiro INTERNO da faixa navy.
     Sem faixa eles viravam vão vazio — 206px antes do título, somados aos 96px
     de fora. O afastamento agora é só o da seção, abaixo. */
}
/* O RESPIRO ACIMA DA SEÇÃO.
   Chegou a ser 0: o respiro de 110px passou todo para dentro da faixa e o
   texto anterior ficava colado na borda — 3px em Clarividência, 0 em
   Comportamento (medido). Ficam os 96px mesmo sem a troca de fundo: é o que
   separa a seção do texto que vem antes dela.
   Precisa dos três seletores para vencer `.tema .read:not(.read--first)`. */
.tema .read.read--mats{padding-top:72px}
/* Quando a faixa divide a `.read` com outro conteúdo (a grade de assuntos de
   Bioenergias), o respiro é margem dela — a coluna já deu o dela lá em cima. */
.tema .read:not(.read--mats) > .tema-mats{margin-top:72px}
.tema-mats > :first-child{margin-top:0}
/* No celular o trilho sozinho já passa da tela; a faixa não precisa do mesmo
   respiro do desktop, e `min-height` continua valendo. */
@media(max-width:599px){.tema .read.read--mats{padding-top:56px}}

/* O respiro antes do rodapé nas páginas de Temas. */
.topic-fim{padding-bottom:90px}

/* ── Responsivo (não desenhado no handoff; segue a sugestão dele) ───────── */
@media(max-width:999px){
  .tema-assuntos{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .tema-h2{font-size:34px}
  .tema-item{width:220px}
}
@media(max-width:599px){
  .tema-assuntos{grid-template-columns:1fr}
  .tema-h2{font-size:28px}
  .tema-faixa{grid-template-columns:1fr;justify-items:start;gap:24px;padding:24px}
}
.mats-acc{margin-top:30px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:0 20px}
.mats-acc summary{display:flex;align-items:center;gap:12px;min-height:56px;list-style:none;cursor:pointer;transition:background-color .2s ease}
.mats-acc summary::-webkit-details-marker{display:none}
.mats-acc summary:hover{background:color-mix(in srgb,var(--blue-700) 3%,transparent)}
.mats-acc summary:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.mats-acc summary::after{content:"▾";font-size:12px;color:var(--ink-2);transition:transform .2s ease}
.mats-acc[open] summary::after{transform:rotate(180deg)}
.mats-acc[open] summary{border-bottom:1px solid #D6D1C4}
.mats-acc-t{font:400 17px/1.3 Karla,sans-serif;color:var(--ink)}
/* Quantos itens o grupo tem: fechado, é o que diz se vale abrir. */
.mats-acc-n{display:grid;place-items:center;height:22px;min-width:22px;margin-left:auto;padding:0 7px;border-radius:20px;background:color-mix(in srgb,var(--blue-700) 7%,transparent);font:700 11.5px/1 Karla,sans-serif;color:var(--blue-700)}
/* Dentro do accordion o trilho encosta mais: já está numa caixa com borda,
   e o respiro de seção viria por cima do padding do cartão. */
.mats-acc .tema-trilha{margin-top:25px;margin-bottom:27px}
.mats-kind{font:700 12px/1 Karla,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
@media(max-width:599px){
  .mats{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:22px 14px}
  .mat-kind{font-size:10.5px;letter-spacing:.12em;padding:0 8px}
}
/* Quando a lista abre a seção — .results-list em Bioenergias, .linklist na
   seção 02 de Projeção Astral — o filete do cabeçalho já faz o papel do
   border-top, e os dois empilhados viravam duas linhas paralelas. */
.shead + .results-list,
.shead + .linklist{border-top:0}
/* materiais: título + complemento na mesma linha */
.linklist .sub{font:400 15px/1.4 Karla,sans-serif;color:var(--ink-2)}
/* chips de palestras — /projecao-astral/ */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.chips a{display:inline-flex;align-items:center;height:40px;padding:0 16px;border:1px solid rgba(35,54,88,.28);border-radius:8px;font:400 14px/1 Karla,sans-serif;color:var(--blue-700);text-decoration:none;transition:background-color .2s ease}
.chips a:hover{background:color-mix(in srgb,var(--blue-700) 6%,transparent)}
.chips a:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
/* citação (pull-quote) — renomeada p/ .pquote para não colidir com os cards .quote da home */
.pquote{max-width:900px;margin:0 auto;padding:72px var(--gut) 0;text-align:center}
.pquote p{margin:0;font:400 clamp(22px,2.2vw,28px)/1.5 "Source Serif 4",Georgia,serif;font-style:italic;color:var(--ink)}
.pquote--long p{font-size:clamp(20px,2vw,26px)}
.pquote cite{display:block;margin-top:22px;font:700 11px/1 Karla,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);font-style:normal}
.pquote--top{padding-top:72px}
/* Nas páginas de Temas a citação fecha a leitura, e fecha sozinha: ganha a tela
   inteira, pelo mesmo motivo da faixa de materiais logo acima — uma frase de
   três linhas espremida entre duas seções não era um fecho, era um intervalo.
   `align-content` centra sem virar flex (ver o comentário da `.tema-mats`). */
.tema .pquote{min-height:100dvh;align-content:center;padding-block:110px}
/* A citação do tema agora abre a página e usa o desenho de /doar-energia
   (`.de-cit`, linha 1918): filete ouro à esquerda e serifada. Só o <p> e o
   <cite> precisam de regra própria — dentro de um `.read` eles herdariam o
   corpo de 19px dos parágrafos e a margem de 29px. */
.tema-cit p{margin:0;font:inherit;color:inherit}
.tema-cit cite{display:block;margin-top:14px;font:700 11px/1 var(--body);letter-spacing:.22em;
  text-transform:uppercase;color:var(--teal);font-style:normal}
/* conteúdos relacionados */
/* Faixa mais enxuta: 56/64px sobravam agora que o conteúdo é um trilho de cards
   (antes eram pills baixas, que pediam mais respiro). */
.related{margin-top:80px;padding:44px var(--gut) 50px;background:var(--paper-2);border-top:1px solid #D6D1C4}
.related-k{margin:0 0 22px;text-align:center;font:700 15px/1 Karla,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.related-list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.related-list a{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 20px;border:1px solid rgba(35,54,88,.28);border-radius:8px;font:400 14px/1 Karla,sans-serif;color:var(--blue-700);text-decoration:none;transition:background-color .2s ease}
.related-list a::after{content:"→";opacity:.5}
.related-list a:hover{background:color-mix(in srgb,var(--blue-700) 6%,transparent)}
.related-list a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
/* Materiais relacionados: mesmo trilho de cards da home ("Assista e ouça"),
   dentro da faixa .related. O rótulo passa a viver na .railbar, então perde a
   centragem e a margem inferior que ele tinha como título solto sobre as pills. */
.related-rail .related-k{margin:0;text-align:left;white-space:nowrap}
.related-rail .rail{padding-bottom:2px}
.related-rail .item h3{margin-top:12px}
.related-meta{margin:5px 0 0;font:400 12.5px/1.35 Karla,sans-serif;color:var(--ink-2);letter-spacing:.01em}
.related-empty{margin:0;font:400 14px/1.5 Karla,sans-serif;color:var(--ink-2)}
/* Enquanto a 1ª página não chega, o trilho segura a altura do card para a
   faixa não “pular” quando os itens entram. */
.related-rail .rail:empty{min-height:266px}
@media(max-width:980px){.related-rail .rail:empty{min-height:248px}}
@media(max-width:760px){.related-rail .rail:empty{min-height:230px}}
@media(max-width:620px){.related-rail .rail:empty{min-height:206px}}
@media(max-width:767px){.results-list__item{gap:18px;padding:16px 2px}.results-list__num{font-size:18px;width:22px}.results-list__text{font-size:17px}}
@media(max-width:760px){.pquote{padding-top:56px}.related{padding-block:44px 52px}}
@media(max-width:620px){.related-list{gap:8px}}

/* footer */
body>footer{background:var(--blue-900);color:#C3CEE4;padding:64px 0 28px}
body>footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:38px}
@media(max-width:860px){body>footer .cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){body>footer .cols{grid-template-columns:1fr}}
body>footer h2{font-family:var(--disp);font-size:13px;letter-spacing:.17em;text-transform:uppercase;color:#fff;margin:0 0 16px;font-weight:500}
body>footer a{display:block;padding:6px 0;font-size:14.5px;color:#C3CEE4}
footer a:hover{color:#fff}
body>footer .logo img{height:38px}
/* Só existe logo negativa em PT; a versão EN é a positiva, invertida para
   branco — o rodapé é azul-escuro. */
body>footer .logo img.flogo-en{filter:brightness(0) invert(1)}
.fdesc{font-size:14.5px;margin:16px 0 0;max-width:40ch}
.fbot{margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13.5px}

/* whatsapp flutuante (existe no site) */
.wa{position:fixed;right:22px;bottom:22px;width:56px;height:56px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 26px rgba(37,211,102,.42);z-index:60}

/* idioma */
.lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin-left:6px}
.lang button,.lang a{background:none;border:0;cursor:pointer;font:600 12.5px/1 var(--body);padding:9px 13px;color:var(--ink-2);text-decoration:none;display:inline-block}
.lang button.on,.lang a.on{background:var(--blue-700);color:#fff}
[data-en]{display:none}
html[lang="en"] [data-pt]{display:none}
html[lang="en"] [data-en]{display:revert}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── ícones (portados do tema original) ───────────────────────── */
.pill img{height:22px;width:22px;flex-shrink:0}
.pill.fill img,.hero .pill img{filter:brightness(0) invert(1)}
.chip img{height:18px;width:18px}
.card figure{margin:0;display:flex;justify-content:center}
.card figure img{height:112px;width:auto;max-width:100%;display:block}
/* Ícone de assunto: 112 → 200px, em duas passadas (148 ainda deixava metade do
   card vazia). Os cinco PNGs são quadrados, então a altura basta como controle;
   `max-width:100%` é o freio se algum dia entrar um símbolo mais largo que a
   coluna. Chegou aqui em três passadas — 148 (pouco), 220 (com a moldura já
   removida, grande demais), 184. Sem a moldura a coluna inteira são 245px
   úteis, então o símbolo de 184 deixa 30px de cada lado; com os 14 do gap, dá
   74px de ar entre um ícone e o vizinho. */
.topics-grid .card figure img{height:184px;width:auto;max-width:100%}
/* SEM CARTÃO: os cinco assuntos são ícone + nome, direto sobre o creme da
   faixa. A moldura branca (fundo, borda, raio de 16 e sombra no hover) vinha do
   `.card` genérico, que é um card de TEXTO — aqui ela só cercava um símbolo que
   já tem silhueta própria, e cobrava ~60px de largura por card em padding e
   borda. Sem ela, essa largura vai para o ícone.

   O hover perde a moldura para reagir, então passa a ser o próprio conteúdo: o
   conjunto sobe 3px e o nome vai para o azul da marca. */
/* Cards PINTADOS de novo, agora em #F1EFE9 — o creme que era o fundo das faixas
   alternadas e que ficou livre quando a home virou toda branca. Em branco sobre
   branco eles sumiriam.

   A largura segue vindo do conteúdo (o `flex` da grade), então o primeiro card
   nasce na borda esquerda da faixa e o último termina na direita, como os cards
   de foto abaixo — é a moldura que torna isso visível de novo. */
/* CONTORNO, sem preenchimento: o que delimita cada assunto é o fio, e o fundo
   segue sendo o branco da seção. O azul do site a 16% — passou por 22% (1,57:1
   contra o branco), que marcava demais para um fio que só precisa insinuar a
   caixa; a 16% fica em 1,38:1. O `.card` genérico usa 10% (1,25:1), que aqui
   sumiria. */
.topics-grid .card{
  padding:22px 20px;gap:10px;background:none;
  border:1px solid rgba(22,32,66,.16);border-radius:16px;box-shadow:none;
}
/* No hover só o fio escurece (e o card sobe) — sem preenchimento, para não
   reintroduzir pela porta dos fundos a superfície que acabou de sair. A
   diferença entre repouso e toque acompanhou a queda: 32% no lugar de 42%. */
.topics-grid .card:hover{
  transform:translateY(-4px);background:none;
  border-color:rgba(22,32,66,.32);box-shadow:none;
}
.topics-grid .card:hover{
  transform:translateY(-3px);border-color:transparent;box-shadow:none;
}
.topics-grid .card:hover h3{color:var(--blue-700)}
.more img,.arrow{height:15px;width:15px;vertical-align:-2px;margin-left:6px}

/* ── carrossel do herói (CSS-only + JS mínimo) ─────────────────── */
.hero{position:relative}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.slide.on{opacity:1}
/* Só a MÍDIA de fundo (filha direta do slide ou do link da arte). Antes era
   `.slide img`, que por especificidade capturava também o ícone dentro dos
   botões e o esticava para a tela inteira. */
.slide>img,.slide>video,.slide>.slide-link>img,.slide>.slide-link>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .wrap{position:relative;z-index:3}
.navarrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.45);
  background:rgba(0,0,0,.22);color:#fff;display:grid;place-items:center;cursor:pointer;
  font-size:19px;transition:background .25s;
}
.navarrow:hover{background:rgba(0,0,0,.45)}
.navarrow.prev{left:18px}
.navarrow.next{right:18px}
@media(max-width:700px){.navarrow{display:none}}

/* ── depoimentos ──────────────────────────────────────────────── */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
@media(max-width:880px){.quotes{grid-template-columns:1fr}}
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;text-align:left}
.quote p{margin:0;color:var(--ink-2);font-size:15.5px}
.quote .by{margin-top:16px;font-weight:600;font-size:14.5px;color:var(--blue-700)}
.stars{color:#E0A82E;letter-spacing:3px;font-size:14px;margin-bottom:10px}

/* conteúdo por slide do herói (o original tem título/CTA em cada um) */
.slide .txt{position:absolute;inset:0;display:flex;align-items:center;z-index:2}
.slide .txt .wrap{width:100%}
.slide h2{font-family:var(--disp);font-size:clamp(30px,4.6vw,52px);font-weight:500;color:#fff;margin:0 0 18px;max-width:18ch}
/* Slide alinhado à esquerda ganha 2ch a mais de medida. O texto começa na
   margem e dispensa o recuo simétrico que o centrado pede — e é o que faz
   "Mosteiro São Damião" (599px) caber inteiro na segunda linha. A frase só
   fica junta porque o título usa espaço não-separável: largura sozinha não
   resolve (medido — "Conheça o Mosteiro" é MAIS ESTREITO que a frase, então
   toda caixa que aceita a frase aceita antes a quebra errada). */
.slide[data-align="left"] h2{max-width:20ch}

/* ═══ Barras de topo — replicadas 1:1 do blog/acervo (.sb-topbar/.sb-nav) ═══
   Mesmas cores/pills/menu do acervo; .sb-wrap usa --max/--gut do site p/ alinhar
   com o corpo. Substitui visualmente o header antigo (.topbar/.nav ficam mortos). */
.sb-wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
/* As duas barras (creme + azul) ficam fixas no topo ao rolar. */
.sb-head{position:sticky;top:0;z-index:50}
.sb-topbar{background:#FAF9F5;border-bottom:1px solid #E2DFD7;font-family:'Karla',system-ui,sans-serif}
/* 11px (era 14px): barra branca ~6px mais baixa. O herói acompanha sozinho —
   --header-h é medido no cliente, não escrito à mão. */
.sb-topbar .sb-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:11px;padding-bottom:11px}
.sb-logo{display:flex;align-items:center}
.sb-logo img{height:52px;width:auto}
/* Handoff 1d: o cluster respira 22px e a ordem é por hierarquia —
   idioma (utilitário) → membro (secundário) → doação (primário, mais à direita). */
.sb-topacts{display:flex;gap:22px;align-items:center}
.sb-pill{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:50px;font-size:16px;font-weight:500;letter-spacing:.01em;line-height:1.2;transition:.25s;text-decoration:none;white-space:nowrap}
.sb-pill img{height:21px;width:21px;flex-shrink:0}
.sb-fill{background:#233658;color:#fff}
.sb-fill:hover{background:#152340}
.sb-fill img{filter:brightness(0) invert(1)}
/* A borda era --line (#E2DFD7), o cinza quente das hairlines: some sobre o creme
   da barra. Agora é o azul da marca a 45% — lê como botão de verdade, e continua
   abaixo do .sb-fill (que é o azul CHEIO) na hierarquia do cluster. */
.sb-ghost{border:1.5px solid rgba(35,54,88,.65);color:#233658}
.sb-ghost:hover{border-color:#233658}
/* ── Toggle de idiomas — handoff 1d ───────────────────────────────────────────
   Texto puro "PT | EN" antes dos botões: sem caixa, sem fundo escuro, sem altura
   própria (centraliza com os pills). Substitui o bloco segmentado .sb-lang. */
.lang-toggle{display:flex;align-items:center;gap:10px;font-size:15px;letter-spacing:.04em;line-height:1}
/* A bandeira substitui a sigla: o link vira só a imagem. Opacidade mais baixa
   para o idioma que NÃO está ativo — o mesmo gesto que a cor do texto fazia
   antes, mas legível numa figura colorida. */
.lang-bandeira{display:block;width:22px;height:auto;border-radius:2px;
  box-shadow:0 0 0 1px rgba(9,16,30,.14)}
.lang-toggle a{opacity:.5;transition:opacity 160ms ease}
.lang-toggle a:hover{opacity:1}
.lang-toggle a[aria-current]{opacity:1;border-bottom:0}
.lang-toggle a{position:relative;display:inline-block;padding:8px 4px 3px;margin:-8px -4px 0;color:#9A9384;font-weight:500;text-decoration:none;transition:color 160ms ease}
.lang-toggle a:hover{color:#1E3465}
/* Alvo de toque ≥40px SEM mexer no visual. Não pode sair do padding-bottom: os
   3px de folga são o que posiciona o sublinhado do ativo (spec). */
.lang-toggle a::after{content:"";position:absolute;left:0;right:0;top:50%;height:40px;transform:translateY(-50%)}
.lang-toggle a[aria-current]{color:#1E3465;font-weight:600;border-bottom:2px solid #1E3465;pointer-events:none}
.lang-toggle a:focus-visible{outline:2px solid #2A4485;outline-offset:3px;border-radius:2px}
.lang-toggle .lang-sep{color:#C9C3B4}
/* <980px o cluster do topo não cabe: o toggle migra para o topo do menu overlay
   (li próprio, para o <ul> continuar válido). Escondido nos dois sentidos. */
.sb-menu-lang{display:none}
.sb-nav{background:#233658;color:#fff;font-family:'Karla',system-ui,sans-serif;position:relative}
.sb-nav .sb-wrap{display:flex;align-items:center;gap:18px}
.sb-social{display:flex;gap:14px;padding:8px 0;align-items:center}
.sb-social a{color:#fff;opacity:.82;transition:opacity .2s;display:inline-flex}
.sb-social a:hover{opacity:1}
.sb-social svg{width:21px;height:21px}
.sb-burger{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:10px 0;margin-left:auto}
.sb-burger svg{width:24px;height:24px}
.sb-menu{display:flex;gap:4px;margin:0 0 0 auto;padding:0;list-style:none;flex-wrap:wrap}
.sb-item{position:relative;list-style:none}
.sb-menu>.sb-item>a{display:block;padding:14px 12px;font-size:16px;font-weight:400;color:#DCE4F2;text-decoration:none;transition:color .2s;white-space:nowrap}
.sb-menu>.sb-item>a:hover,.sb-menu>.sb-item.on>a{color:#fff}
.sb-menu>.sb-item.on>a{box-shadow:inset 0 -2px 0 #0E7C86}
.sb-sub{position:absolute;top:100%;left:0;min-width:220px;background:#fff;border:1px solid #E2DFD7;border-radius:10px;box-shadow:0 18px 42px rgba(21,35,64,.16);padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s;z-index:60}
/* O submenu abre no HOVER e no foco de TECLADO — não no clique do mouse.
   `:focus-within` sozinho travava o painel aberto: clicar no item pai (que é
   href="#") ou num link do submenu deixa o foco ali, e antes só o recarregamento
   da página o limpava. Com navegação client-side (next/link) não há
   recarregamento, então o painel ficava fixo e se sobrepunha ao próximo que o
   mouse abrisse — dois submenus na tela ao mesmo tempo.
   `:focus-visible` é a distinção certa: o navegador o aplica quando o foco veio
   do teclado, e não quando veio do ponteiro. Assim a navegação por Tab continua
   abrindo o submenu, e o clique não prende mais nada. */
.sb-item:hover .sb-sub{opacity:1;visibility:visible;transform:none}
@supports selector(:has(*)){
  .sb-item:has(:focus-visible) .sb-sub{opacity:1;visibility:visible;transform:none}
}
/* Sem :has() (navegador antigo), volta ao comportamento anterior: melhor um
   painel que às vezes prende do que teclado sem acesso ao submenu. */
@supports not selector(:has(*)){
  .sb-item:focus-within .sb-sub{opacity:1;visibility:visible;transform:none}
}
/* nowrap: "Projeção Astral, Clarividência e Bioenergia" e "Cursos, Vivências e
   Workshops" quebravam em 2 linhas nos 220px. Em uma linha, o dropdown cresce
   para caber (no mobile o menu é estático e largo — lá volta a normal). */
.sb-sub a{display:block;padding:9px 13px;border-radius:7px;font-size:14.5px;color:#1A2233;text-decoration:none;white-space:nowrap}
.sb-sub a:hover{background:#F1EFE9;color:#233658}
/* TERCEIRO NÍVEL: abre ao LADO do submenu, no hover ou no foco de teclado.
   O pai é um <span> em volta do link e do painel — assim o mouse pode
   atravessar de um para o outro sem sair do elemento que mantém o menu aberto.

   O painel encosta FORA do de trás, sem sobrepor. A primeira versão o puxava
   14px para dentro, para o mouse não cair numa fresta entre os dois — e o
   resultado foi o terceiro painel cobrindo a borda do segundo, com os rótulos
   por baixo. A fresta agora é coberta por uma ponte transparente (o ::before
   abaixo), que o mouse atravessa sem que nada se sobreponha na tela. */
.sb-sub-pai{position:relative;display:block}
.sb-sub-pai>a{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sb-sub-seta{font-style:normal;font-size:16px;line-height:1;color:#8A93A6}
.sb-sub2{position:absolute;top:-8px;left:calc(100% + 8px);min-width:230px;
  background:#fff;border:1px solid #E2DFD7;border-radius:10px;
  box-shadow:0 18px 42px rgba(21,35,64,.16);padding:8px;
  opacity:0;visibility:hidden;transform:translateX(8px);transition:.18s;z-index:61}
/* A ponte: 10px invisíveis ligando o item ao painel, para o ponteiro não
   passar por cima de "nada" e o menu fechar no meio do caminho. */
.sb-sub2::before{content:"";position:absolute;top:0;bottom:0;left:-10px;width:10px}
.sb-sub-pai:hover>.sb-sub2,
.sb-sub-pai:focus-within>.sb-sub2{opacity:1;visibility:visible;transform:none}
.sb-sub-pai:hover>a{background:#F1EFE9;color:#233658}
/* Na direita da tela o painel viraria para fora da janela: abre para a
   esquerda quando o menu é um dos últimos. */
.sb-menu>.sb-item:nth-last-child(-n+3) .sb-sub2{left:auto;right:calc(100% + 8px)}
.sb-menu>.sb-item:nth-last-child(-n+3) .sb-sub2::before{left:auto;right:-10px}
.skip-link{position:absolute;left:-9999px;top:0}
.skip-link:focus{left:8px;top:8px;z-index:100;background:#fff;color:#233658;padding:8px 14px;border-radius:8px}
/* Faixa intermediária do handoff (lá: 992–1199): o cluster aperta de 22 → 16px.
   O piso é 981 e não 992 porque é em 980 que este site troca o menu por overlay
   — é esse o "menu mobile" a que a spec se refere. */
@media(min-width:981px) and (max-width:1199px){
  .sb-topacts{gap:16px}
}
@media(max-width:980px){
  .sb-topacts .sb-pill span{display:none}
  .sb-pill{padding:14px}
  .sb-burger{display:inline-flex;align-items:center}
  /* Toggle sai do header e reaparece no topo do overlay, acima da navegação. */
  .sb-topacts>.lang-toggle{display:none}
  .sb-menu-lang{display:block;padding:12px clamp(18px,4vw,48px);border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:4px}
  /* Sobre o azul da barra, o navy do design sumiria: aqui o par ativo/inativo
     usa a paleta do próprio overlay (#fff / #B7C2D8, a mesma dos submenus). */
  .lang-toggle-nav{font-size:16px;justify-content:flex-start}
  .lang-toggle-nav a{color:#B7C2D8}
  .lang-toggle-nav a:hover{color:#fff}
  .lang-toggle-nav a[aria-current]{color:#fff;border-bottom-color:#fff}
  .lang-toggle-nav .lang-sep{color:rgba(255,255,255,.32)}
  .sb-menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;margin:0;background:#233658;border-top:1px solid rgba(255,255,255,.12);box-shadow:0 18px 42px rgba(21,35,64,.28);padding:6px 0;z-index:60}
  .sb-menu.open{display:flex}
  .sb-menu>.sb-item{width:100%}
  .sb-menu>.sb-item>a{padding:13px clamp(18px,4vw,48px)}
  .sb-menu>.sb-item.on>a{box-shadow:inset 3px 0 0 #0E7C86}
  .sb-sub{position:static;opacity:1;visibility:visible;transform:none;background:transparent;border:0;box-shadow:none;padding:0 clamp(18px,4vw,48px) 6px;min-width:0}
  .sb-sub a{color:#B7C2D8;font-size:14px;padding:8px 10px;white-space:normal}
  .sb-sub a:hover{background:rgba(255,255,255,.06);color:#fff}
}
@media(max-width:560px){
  .sb-topbar .sb-wrap{gap:12px}
  .sb-logo img{height:40px}
  .sb-social{display:none}
}

/* ═══ sistema 1a — corpo das páginas Fundador e Mosteiro ═══════════════
   Medidas conforme design_handoff_fundador/README.md: comp 1524px, conteúdo
   1296px, faixas 92/96 (loja 80/88), fio de 1px na divisa. */
/* Cada faixa ocupa no mínimo a tela: uma faixa mais curta que a viewport
   deixa a próxima "espiando" por baixo e quebra o ritmo do branco/navy.
   `min-height` (não `height`) — quem tem mais conteúdo cresce à vontade. */
.f1a{padding:92px 0 96px;min-height:calc(100dvh - var(--header-h,110px));
  display:flex;flex-direction:column;justify-content:center}
.f1a--claro{background:var(--f1a-claro)}
.f1a--areia{background:var(--f1a-areia);color:var(--f1a-txt-n)}
.f1a--areia .f1a-eyebrow,.f1a--areia .f1a-livro-cta,
.f1a--areia .f1a-lcard-cta,.f1a--areia .m1a-abc-l,.f1a--areia .f1a-fam-h{color:var(--f1a-teal-n)}
.f1a--areia .f1a-fio{background:rgba(63,182,193,.55)}
.f1a--areia .f1a-h2,.f1a--areia .m1a-h2,.f1a--areia .f1a-livro-t,
.f1a--areia .m1a-doa-t{color:var(--f1a-txt-n)}
/* Todo texto de corpo sobre o navy — inclusive o `.lead` herdado do render
   antigo, que passava batido por seletor e ficava em 2,5:1. */
.f1a--areia .f1a-nota,.f1a--areia .m1a-abc-t,.f1a--areia .m1a-doa-d,
.f1a--areia .m1a-levar p,.f1a--areia .m1a-princ p,
.f1a--areia p,.f1a--areia .lead,.f1a--areia li,
.f1a--areia .m1a-colab > p{color:rgba(243,241,236,.78)}
/* o check era o teal escuro (#0A656D): 2,3:1 sobre navy */
.f1a--areia .m1a-check{color:var(--f1a-teal-n)}
.f1a--areia strong,.f1a--areia b{color:var(--f1a-txt-n)}
.f1a--areia a{color:var(--f1a-teal-n)}
.f1a--areia .m1a-rot{color:var(--f1a-txt-n);border-top-color:rgba(255,255,255,.2)}
.f1a--areia .m1a-princ p{border-top-color:rgba(255,255,255,.2)}
/* cards sobre navy: fundo #1C2F4E e borda de 14% de branco */
.f1a--areia .f1a-livro,.f1a--areia .f1a-lcard,.f1a--areia .m1a-abc-c,
.f1a--areia .m1a-doa-c{background:var(--f1a-card-n);border-color:var(--f1a-borda-n)}
.f1a--areia .f1a-livro:hover,.f1a--areia .f1a-lcard:hover,
.f1a--areia .m1a-doa-c:hover{border-color:rgba(255,255,255,.3);box-shadow:0 8px 20px rgba(0,0,0,.28)}

.f1a--areia .f1a-lcard-t,.f1a--areia .f1a-lcard-d{color:var(--f1a-txt-n)}
/* divisa: com 84 pontos de L* o fio não é mais necessário */
.f1a + .f1a{border-top:0}
.f1a--loja{padding:80px 0 88px}
.f1a + .f1a{border-top:1px solid var(--f1a-fio)}
/* `width:100%` é necessário: a faixa é flex e o `margin:0 auto` do .wrap
   faria o item encolher até o conteúdo — foi o que deixou as faixas do local
   e da frase final mais estreitas que as outras. */
.f1a .wrap{max-width:var(--f1a-container);width:100%}
.f1a-centro{display:flex;flex-direction:column;align-items:center}

/* eyebrow: fio 22×1px + rótulo teal 11px .2em (12px na faixa da loja) */
.f1a-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 24px;
  font:500 11px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--f1a-teal)}
.f1a-eyebrow--c{justify-content:center}
.f1a-eyebrow--12{font-size:12px}
.f1a-fio{display:block;width:22px;height:1px;background:rgba(10,101,109,.55)}
.f1a-fio--28{width:28px;background:rgba(10,101,109,.5)}

.f1a-eyebrow:has(+ .f1a-h2),.f1a-eyebrow:has(+ .m1a-h2){margin-bottom:0}
.f1a-h2{font:400 40px/1.1 var(--serif);letter-spacing:.02em;color:var(--f1a-ancora);
  text-transform:uppercase;text-align:center;margin-top:18px}

/* ── faixa 1: Biografia ── */
/* `stretch` faz as duas colunas terminarem na mesma linha: a lista de
   números empurra o próprio fim até a base do texto ao lado, em vez de
   sobrar 26px por baixo. */
.f1a-bio{display:flex;gap:64px;align-items:stretch}
.f1a-bio-esq{display:flex;flex-direction:column}
.f1a-nums{margin-top:26px;display:flex;flex-direction:column;justify-content:flex-end;flex:1}
/* 420 → 360px: o retrato encolhe e os 60px vão para a coluna de texto, que é
   quem se adapta (`flex:1` abaixo). */
.f1a-bio-esq{width:360px;flex:none}
/* A coluna de texto se adapta ao que sobra. Fixa em 700px (como no handoff)
   ela somava 420+104+700 = 1224 contra 1138 de área útil, e transbordava
   86px à direita — a margem direita sumia. */
.f1a-bio-dir{flex:1;min-width:0}
/* 360×429 mantém o 420/500 do desenho — mudou a escala, não o enquadramento. */
.f1a-retrato{width:360px;height:429px;border-radius:8px;object-fit:cover;object-position:36% 18%;
  box-shadow:0 14px 32px rgba(18,24,38,.16)}
.f1a-legenda{margin:12px 0 0;font:400 13px/1.5 var(--body);color:var(--f1a-mudo)}
.f1a-nums{border-top:1px solid var(--f1a-hair-num)}
.f1a-num{display:flex;align-items:baseline;gap:14px;padding:18px 0;border-bottom:1px solid var(--f1a-hair-num)}
.f1a-num-v{min-width:112px;font:400 40px/1 var(--serif);color:var(--f1a-ancora)}
.f1a-num-l{font:400 14px/1.4 var(--body);color:var(--ink-2)}
/* 18px/1.5 = o mesmo de `.read .lead` (Quem Somos). O handoff especifica
   16px/27px; o cliente pediu paridade com o resto do site e isso ganha. */
.f1a-p{margin:0;font:400 18px/1.5 var(--body);color:var(--ink-2);text-wrap:pretty}
.f1a-p + .f1a-p{margin-top:16px}
.f1a-p a{color:var(--f1a-teal);text-decoration:underline}
.f1a-p a:hover{color:var(--f1a-teal-h)}

/* ── faixa 2: Obras ── */
/* 3 colunas: com 6 livros fecha em duas linhas certas. O handoff usava 2
   colunas de 634px; em 3 o cartão fica mais estreito, então a capa e o
   texto empilham dentro dele em vez de ficar lado a lado. */
/* Aviso de idioma: os livros não têm edição em inglês. Fica logo abaixo do
   título, antes de o leitor clicar num cartão e descobrir depois. */
.f1a-so-pt{margin:10px 0 0;font:400 15px/1.5 var(--body);color:var(--f1a-mudo);text-align:center}
.f1a-livros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 28px;margin-top:44px}
.f1a-livro{display:flex;flex-direction:column;gap:20px;align-items:flex-start;background:var(--f1a-claro);
  border:1px solid var(--f1a-borda);border-radius:10px;padding:26px;cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease}
.f1a-livro:hover{border-color:var(--f1a-borda-h);box-shadow:0 8px 20px rgba(35,54,88,.1)}
/* capa real (extraída da 1ª página do PDF de cada livro) */
/* 514×908 = proporção das capas recortadas (0,57). Com o 2/3 do handoff o
   `cover` comia 18% de cada capa, topo e base. */
.f1a-livro-capa{width:100%;max-width:200px;aspect-ratio:376/664;height:auto;flex:none;align-self:center;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.32))}
.f1a-livro-txt{flex:1;display:flex;flex-direction:column;width:100%}
.f1a-livro-t{margin-top:0;font:400 27px/1.24 var(--serif);color:var(--ink)}
.f1a-livro-cta{margin-top:auto;padding-top:18px;font:500 12px/1 var(--body);letter-spacing:.14em;
  text-transform:uppercase;color:var(--f1a-teal)}
.f1a-nota{margin-top:34px;display:flex;align-items:center;justify-content:center;gap:10px;
  font:400 15px/1.5 var(--body);color:var(--ink-2)}
.f1a-ponto{width:5px;height:5px;border-radius:999px;background:var(--f1a-ponto)}

/* ── faixa 3: Pesquisa ── */
/* colunas flexíveis: 4×300+gaps dava exatamente 1296 e a grade avançava
   sobre o respiro lateral do container. */
.f1a-fams{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:72px;width:100%}
/* 11 → 13px: o nome da família era menor que os itens que ele encabeça e não
   se lia como título. Só o corpo mudou — mono, versalete e o entreletra de
   .12em continuam, senão vira outro elemento.
   As duas linhas de `min-height` são o que mantém os quatro fios na mesma
   altura: em inglês "Consciousness, time and lives" passa a quebrar a 13px, e
   sem a reserva a quarta coluna inteira descia 15px em relação às outras. */
.f1a-fam-h{font:500 13px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  min-height:calc(2 * 1.2em + 14px);  /* + o padding: a caixa é border-box */
  color:var(--f1a-teal);padding-bottom:14px;border-bottom:1px solid var(--f1a-ancora)}
.f1a-fam-i{margin:0;padding:14px 0;border-bottom:1px solid var(--f1a-hair);
  font:400 15px/1.45 var(--body);color:var(--ink);text-wrap:pretty}

/* ── faixa 4: Na loja do CEC ── */
.f1a-loja{margin-top:18px;width:100%}
/* o eyebrow da loja agora abre um bloco dentro da própria Pesquisa */
.f1a-fams + .f1a-eyebrow{margin-top:52px;margin-bottom:14px}
.f1a-lcard{display:flex;flex-direction:column;background:var(--f1a-claro);
  border:1px solid var(--f1a-borda);border-radius:10px;overflow:hidden;
  transition:border-color .18s ease,box-shadow .18s ease}
.f1a-lcard:hover{border-color:var(--f1a-borda-h);box-shadow:0 10px 24px rgba(35,54,88,.12)}
.f1a-lcard img{width:100%;height:176px;object-fit:cover;object-position:center 40%}
.f1a-lcard-b{display:flex;flex-direction:column;gap:9px;padding:22px 26px 24px}
.f1a-lcard-t{font:400 27px/1.1 var(--serif);color:var(--ink)}
.f1a-lcard-d{font:400 14.5px/1.55 var(--body);color:var(--ink-2)}
.f1a-lcard-cta{margin-top:6px;font:500 12px/1 var(--body);letter-spacing:.14em;
  text-transform:uppercase;color:var(--f1a-teal)}

/* ── responsivo (breakpoints do handoff) ── */
@media(max-width:1200px){
  .f1a-bio{flex-direction:column;gap:44px}
  .f1a-bio-esq,.f1a-bio-dir{width:100%}
  .f1a-retrato{width:100%;max-width:420px;height:auto;aspect-ratio:420/500}
  .f1a-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:0 24px}
  .f1a-livros{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f1a-fams{grid-template-columns:repeat(2,1fr)}
  .f1a-loja{grid-template-columns:1fr}
}
@media(max-width:820px){
  .f1a{padding:56px 0 60px}
  .f1a--loja{padding:56px 0 60px}
  .f1a-fams{grid-template-columns:1fr}
  .f1a-livros{grid-template-columns:1fr}
  .f1a-livro-capa{max-width:160px}
  .f1a-h2{font-size:32px}
  .f1a-nums{grid-template-columns:1fr}
}

/* ── Mosteiro São Damião — faixas do handoff 1a ──────────────────────── */
.m1a-h2{font:400 32px/1.15 var(--serif);letter-spacing:.02em;color:var(--f1a-ancora);margin-top:16px}
.m1a-h2--sep{margin-top:64px}
/* largura total: o cliente pediu que este texto de abertura use todo o
   container, em vez da coluna de 760px do handoff. */
.m1a-prosa{width:100%}

/* galeria: era uma foto de 440px (34% do container) com 14 bolinhas — o
   acervo é o argumento visual da página e estava do tamanho de um selo */
.m1a-gal{position:relative;margin-top:56px}
.m1a-strip{display:grid;grid-auto-flow:column;grid-auto-columns:305px;gap:20px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.m1a-strip::-webkit-scrollbar{display:none}
.m1a-strip img{width:100%;height:380px;object-fit:cover;border-radius:8px;scroll-snap-align:start}
.m1a-seta{position:absolute;top:170px;width:40px;height:40px;border-radius:50%;background:var(--f1a-claro);
  border:1px solid #E7EBF2;box-shadow:0 4px 12px rgba(18,24,38,.12);cursor:pointer;
  display:grid;place-items:center;font-size:18px;color:var(--f1a-ancora);z-index:2}
.m1a-seta.prev{left:-20px}
.m1a-seta.next{right:-20px}
.m1a-seta[disabled]{opacity:.35;cursor:default}
.m1a-gal-pe{display:flex;align-items:center;justify-content:space-between;margin-top:22px}
.m1a-pontos{display:flex;align-items:center;gap:6px}
.m1a-pontos button{width:5px;height:5px;padding:0;border:0;border-radius:999px;background:#C6CFDD;cursor:pointer;transition:all .2s ease}
.m1a-pontos button.on{width:20px;height:5px;border-radius:99px;background:var(--f1a-teal)}

/* A/B/C: três cartões, letra em Cormorant 44px teal */
.m1a-abc{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.m1a-abc-c{background:var(--f1a-claro);border:1px solid var(--f1a-borda);border-radius:10px;
  padding:40px 36px 44px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:24px;min-height:340px;text-align:center}
/* Era o numeral em Cormorant 56px; agora é o ícone da proposta. `display:block`
   + tamanho fixo no <svg> porque a <span> herdava a caixa de texto do numeral,
   e a margem embaixo substitui o espaço que a linha de 56px ocupava. */
.m1a-abc-l{display:block;margin-bottom:14px;color:var(--f1a-teal);line-height:0}
.m1a-abc-l svg{width:44px;height:44px;display:block}
.m1a-abc-t{margin:0;font:400 21px/1.55 var(--body);color:var(--ink-2);text-wrap:pretty}

/* Participe: rótulo (260px) + conteúdo (760px), com fio acima de cada bloco */
/* Rótulo ACIMA do conteúdo, em coluna única.
   O handoff pede rótulo de 260px à esquerda e conteúdo à direita; o cliente
   pediu empilhado, e isso ganha. O fio continua marcando o início de cada
   bloco, que era a função da coluna. */
.m1a-colab{margin-top:40px;display:flex;flex-direction:column}
.m1a-rot{font:600 17px/1.4 var(--body);color:var(--ink);margin:36px 0 18px;
  border-top:1px solid var(--f1a-fio);padding-top:32px}
.m1a-rot:first-child{margin-top:0}

/* "O que levar": grade 2×2 com check teal */
.m1a-levar{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 32px}
.m1a-levar p{display:flex;gap:10px;margin:0;font:400 18px/1.5 var(--body);color:var(--ink-2)}
.m1a-check{flex:none;font-size:14px;color:var(--f1a-teal);line-height:1.6}

/* doação: dois cartões */
/* Uma coluna por card, quantos forem. Era `repeat(2,1fr)` cravado, de quando
   havia dois — o terceiro (a loja) caía sozinho na linha de baixo. */
/* ── Mosteiro: página inteira em papel ──────────────────────────────────────
   O ritmo de `.f1a` é "uma seção por tela": `min-height:100dvh` e conteúdo
   centralizado verticalmente. Isso funciona quando as faixas ALTERNAM navy e
   papel — cada troca de cor marca onde uma acaba e a outra começa.
   Com tudo em papel (pedido do Rafael, 19/09/2026) sobrou o pior dos dois
   mundos: seções de uma tela inteira, centralizadas, com 92/96px de respiro
   cada, e um fio entre elas — daí o vão enorme entre as fotos e "Nossa
   proposta", e a linha divisória logo abaixo da galeria.
   Aqui a seção volta a ter a altura do conteúdo, o respiro vira um valor só
   entre seções, e o fio some. Escopo na página para não mexer no Fundador nem
   no Faça Parte, que seguem alternando. */
/* Títulos de seção CENTRADOS (Rafael, 19/09/2026): "Nossa proposta é", "A
   nossa sede", "Como colaborar?". O eyebrow acompanha — título centrado com
   etiqueta à esquerda fica torto. O CORPO segue alinhado à esquerda: texto
   corrido centralizado é difícil de ler. */
.m1a-pagina .m1a-h2{text-align:center}
.m1a-pagina .f1a-eyebrow{justify-content:center}
.m1a-pagina .f1a{min-height:0;display:block;padding:0}
.m1a-pagina .f1a + .f1a{border-top:0}
/* Respiro ENTRE seções. ⚠️ `:first-of-type` NÃO serve aqui: o primeiro
   <section> do <main> é a CAPA, não a primeira faixa — a regra nunca casava com
   quem eu queria. Quem abre a página é a citação, que traz o próprio respiro
   (`.m1a-cit`, abaixo). */
.m1a-pagina .f1a{padding-block:0}
.m1a-pagina .f1a + .f1a{padding-top:72px}
.m1a-pagina .f1a:last-child{padding-bottom:96px}

/* A citação que abre a página, no MESMO ritmo das páginas de tema — medido
   lá em 19/09/2026 e copiado: 118px da borda da capa até a citação, 63px da
   citação até o primeiro parágrafo. São 90px aqui porque a faixa já traz 28px
   antes — 90 é o mesmo número que o `.read--first` usa nas páginas de tema. Eu tinha inventado 28/44 aqui, e ficava
   apertada contra a capa e solta do texto. O desenho em si é o `.de-cit` de
   /doar-energia, igual ao dos temas. */
.m1a-cit{padding-top:90px;margin:0 0 63px}
/* O <p> da citação herda o corpo do `.read` da página se não for zerado —
   mesma regra que `.tema-cit` tem lá. */
.m1a-cit .de-cit p{margin:0;font:inherit;color:inherit}
/* Assinatura, no mesmo desenho do `.tema-cit cite` das páginas de tema. */
.m1a-cit .de-cit cite{display:block;margin-top:14px;font:700 11px/1 var(--body);
  letter-spacing:.22em;text-transform:uppercase;color:var(--teal);font-style:normal}

.m1a-doa{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:20px;margin-top:8px}
.m1a-doa-c{display:flex;flex-direction:column;gap:8px;background:var(--f1a-claro);
  border:1px solid var(--f1a-borda);border-radius:10px;padding:24px;
  transition:border-color .18s ease,box-shadow .18s ease}
/* Hover de card sobre PAPEL. Era `rgba(255,255,255,.3)` de borda e `#213758`
   de fundo — escrito para a faixa navy, onde o branco a 30% clareia a borda e
   o #213758 é um navy um passo acima. Com a faixa em papel (19/09/2026) o card
   ficava branco e virava AZUL no hover. Agora acompanha os outros cartões do
   site: sobe 2px, a borda escurece e entra uma sombra baixa. */
.m1a-doa-c{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.m1a-doa-c:hover{transform:translateY(-2px);border-color:var(--f1a-ancora);
  background:var(--f1a-claro);box-shadow:0 10px 26px rgba(22,32,66,.12)}
.m1a-doa-t{font:400 24px/1.2 var(--serif);color:var(--ink)}
.m1a-doa-d{font:400 15px/1.6 var(--body);color:var(--ink-2)}

/* aviso IMPORTANTE: menta com barra teal — única cor de destaque do corpo */
/* Largura toda: o `max-width:900px` do handoff fazia sentido quando o bloco
   dividia a linha com a coluna de rótulos; empilhado, sobrava um vão à direita. */
.m1a-aviso{margin-top:48px;background:var(--f1a-menta);
  border-left:3px solid var(--f1a-teal);border-radius:0 8px 8px 0;padding:24px 28px;
  display:flex;flex-direction:column;gap:10px}
.m1a-aviso b{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--f1a-teal)}
/* a placa é clara mesmo dentro da faixa navy — o texto NÃO herda o claro */
.f1a--areia .m1a-aviso b{color:var(--f1a-teal)}
.m1a-aviso span,.f1a--areia .m1a-aviso span{font:400 18px/1.5 var(--body);color:var(--ink)}
.m1a-princ{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-top:28px}
.m1a-princ p,.m1a-princ li{border-top:1px solid var(--f1a-fio);padding-top:20px;margin:0;
  font:400 18px/1.5 var(--body);color:var(--ink-2)}
.m1a-princ ul,.m1a-princ ol{display:contents;list-style:none;padding:0;margin:0}

/* Onde a obra está: texto 760 + números à direita */
.m1a-obra{display:flex;gap:96px;align-items:flex-start}
.m1a-obra-esq{width:760px;flex:none}
.m1a-obra-dir{flex:1}
.m1a-obra-txt{margin-top:24px}
.m1a-obra-txt p{margin:0 0 16px;font:400 18px/1.5 var(--body);color:var(--ink-2)}
.m1a-end{margin-top:34px;background:#FBFAF7;border:1px solid var(--f1a-hair-num);border-radius:10px;
  padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.m1a-end-1{margin:0;font:400 15px/1.5 var(--body);color:var(--ink)}
.m1a-end-2{margin:4px 0 0;font:400 14px/1.5 var(--body);color:var(--ink-2)}
.m1a-end-acao{display:flex;align-items:center;gap:16px;font:500 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
.m1a-end-acao a{color:var(--f1a-teal)}
.m1a-end-sep{width:1px;height:26px;background:#E3E8F1}
.m1a-n{padding:22px 0;border-top:1px solid #E3E8F1;display:flex;flex-direction:column;gap:4px}
.m1a-n:last-child{border-bottom:1px solid #E3E8F1}
.m1a-n-v{font:400 46px/1 var(--serif);color:var(--f1a-ancora)}
.m1a-n-l{font:400 14px/1.4 var(--body);color:var(--ink-2)}

/* Participe */
.m1a-colab{margin-top:40px}
.m1a-colab > p{margin:0 0 16px;font:400 18px/1.5 var(--body);color:var(--ink-2)}



/* frase de fechamento */
.m1a-fecho{padding:104px 0 108px}
.m1a-fio{display:block;width:44px;height:1px;background:#A9B8D2}
.m1a-frase{margin:26px 0 0;max-width:920px;text-align:center;text-wrap:balance;text-transform:uppercase;
  font:400 44px/1.28 var(--serif);letter-spacing:.02em;color:var(--f1a-ancora)}
.m1a-ctas{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;justify-content:center}
.m1a-btn{display:inline-flex;align-items:center;height:48px;padding:0 30px;border-radius:999px;
  font:500 15px/1 var(--body);transition:background-color .2s ease,border-color .2s ease}
.m1a-btn--p{background:var(--f1a-ancora);color:#fff}
.m1a-btn--p:hover{background:#1A2A45}
.m1a-btn--s{border:1px solid #B9C4D8;color:var(--f1a-ancora)}
.m1a-btn--s:hover{border-color:var(--f1a-ancora)}

/* mapa com moldura */
.m1a-mapa{width:100%;margin-top:52px;border:1px solid #E3E8F1;border-radius:10px;
  overflow:hidden;background:var(--f1a-claro)}
.m1a-mapa iframe{display:block;width:100%;height:420px;border:0}
.m1a-mapa-pe{display:flex;align-items:center;justify-content:space-between;gap:20px;
  border-top:1px solid #E3E8F1;padding:20px 24px;font:400 15px/1.4 var(--body);color:var(--ink)}
.m1a-mapa-pe a{font:500 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--f1a-teal)}

@media(max-width:1200px){
  .m1a-strip{grid-auto-columns:calc((100% - 20px)/2)}
  .m1a-abc{grid-template-columns:1fr}
  .m1a-obra{flex-direction:column;gap:44px}
  .m1a-obra-esq{width:100%}
  .m1a-obra-dir{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;width:100%}
  .m1a-princ{grid-template-columns:1fr}

}
@media(max-width:820px){
  .m1a-strip{grid-auto-columns:100%}
  .m1a-strip img{height:300px}
  .m1a-frase{font-size:32px}
  .m1a-obra-dir{grid-template-columns:1fr}
  .m1a-mapa iframe{height:320px}
  .m1a-levar,.m1a-doa{grid-template-columns:1fr}
}

/* ── overlay das fotos do Mosteiro ──────────────────────────────────── */
.m1a-verall{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit}
.m1a-lb{width:min(92vw,1100px);max-width:none;max-height:92vh;padding:0;border:0;border-radius:12px;
  background:#0B1422;color:#F3F1EC;overflow:visible}
.m1a-lb::backdrop{background:rgba(8,14,26,.88)}
.m1a-lb img{display:block;width:100%;max-height:82vh;object-fit:contain;border-radius:12px;background:#0B1422}
.m1a-lb-x{position:absolute;top:-14px;right:-14px;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);background:#0B1422;color:#F3F1EC;font-size:20px;line-height:1;
  cursor:pointer;display:grid;place-items:center;z-index:2}
.m1a-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);background:rgba(11,20,34,.72);color:#F3F1EC;font-size:20px;
  cursor:pointer;display:grid;place-items:center;z-index:2}
.m1a-lb-nav:hover,.m1a-lb-x:hover{background:#16223A}
.m1a-lb-nav.prev{left:-22px}
.m1a-lb-nav.next{right:-22px}
.m1a-lb-cont{margin:0;padding:12px 0 14px;text-align:center;font:400 13px/1 var(--body);color:rgba(243,241,236,.66)}
@media(max-width:820px){
  .m1a-lb{width:96vw}
  .m1a-lb-nav.prev{left:6px}
  .m1a-lb-nav.next{right:6px}
  .m1a-lb-x{top:6px;right:6px}
}

/* ═══ Torne-se um Membro (design_handoff_torne_se_membro) ═══════════════ */
.mb-abertura p{margin:0 0 16px;font:400 18px/1.5 var(--body);color:var(--ink-2)}
.mb-bloco{margin-top:64px}
.mb-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:36px}
.mb-card{background:var(--f1a-claro);border:1px solid #E3E8F1;border-radius:10px;
  padding:26px 26px 28px;display:flex;flex-direction:column;gap:14px;
  transition:border-color .18s ease,box-shadow .18s ease}
.mb-card:hover{border-color:#C6D2E6;box-shadow:0 8px 20px rgba(35,54,88,.08)}
/* marca provisória: o handoff pede os ícones de "Principais Temas" em 36px */
/* Ícone do benefício: 36px, traço no teal. Sem o disco em volta — em 36px o
   contorno roubaria metade da caixa do desenho, e onze discos idênticos
   pesavam mais que os próprios ícones. */
.mb-marca{width:36px;height:36px;flex:none;color:var(--f1a-teal)}
.mb-card-t{margin:0;font:400 22px/1.25 var(--serif);color:var(--ink)}
.mb-card-d{margin:0;font:400 15px/1.6 var(--body);color:var(--ink-2)}
/* 12ª célula: fecha a grade (sem ela a última linha teria um buraco) e é onde
   o preço aparece pela primeira vez */
.mb-card--cta{background:var(--f1a-areia);border-color:var(--f1a-areia);text-decoration:none}
.mb-card--cta:hover{background:#172B4C;border-color:#172B4C;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.mb-cta-eb{font:500 11px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--f1a-teal-n)}
.mb-card--cta .mb-card-t{color:var(--f1a-txt-n)}
.mb-card--cta .mb-card-d{color:rgba(243,241,236,.7)}
.mb-cta-link{margin-top:auto;padding-top:10px;font:500 12px/1 var(--body);letter-spacing:.14em;
  text-transform:uppercase;color:var(--f1a-teal-n)}

/* faixa 2 — propósito + formulário */
.mb-prop{display:flex;gap:72px;align-items:flex-start}
.mb-prop-txt{width:540px;flex:none}
.mb-prop-p p{margin:0 0 16px;font:400 18px/1.5 var(--body)}
/* Rótulo ACIMA do texto, não ao lado. Eram duas colunas — 180px de título +
   o resto —, e num bloco de 540px sobravam 320 para o parágrafo: o texto saía
   numa medida estreita, desalinhado do parágrafo de cima, que usa a coluna
   inteira. Empilhando, os três blocos da faixa passam a começar na mesma borda
   e a ter a mesma largura de leitura. (É o mesmo empilhamento que a media query
   abaixo de 980px já fazia.) */
.mb-linha{display:flex;flex-direction:column;gap:12px;border-top:1px solid rgba(255,255,255,.2);padding-top:32px;margin-top:32px}
.mb-rot{width:auto;flex:none;margin:0;font:600 17px/1.4 var(--body);color:var(--f1a-txt-n)}
/* Um dos blocos não tem `title` no CMS — o título dele mora em negrito na
   primeira linha do próprio texto, como no parágrafo de cima. O <h3> sai
   vazio, e com o empilhamento ele passaria a cobrar os 12px de gap sem nada
   dentro. */
.mb-rot:empty{display:none}
.mb-linha-c{flex:1;min-width:0}
.mb-linha-c p{margin:0 0 12px;font:400 18px/1.5 var(--body)}
.mb-doar{display:inline-block;margin-top:6px;font:500 12px/1 var(--body);letter-spacing:.14em;
  text-transform:uppercase;color:var(--f1a-teal-n)}
.mb-form{flex:1;min-width:0;background:var(--f1a-card-n);border:1px solid var(--f1a-borda-n);
  border-radius:10px;padding:32px;scroll-margin-top:40px}
/* Mensagem de sucesso que substitui o formulário após o envio (todos os forms
   da central). No cartão navy do "Faça parte" herda o tom claro; no fundo claro
   das demais páginas cai para o tinta padrão. */
/* Falha de envio, na própria página. Mesma anatomia do painel de sucesso, na
   cor de alerta — quem acabou de ver um não precisa reaprender a ler o outro. */
.form-erro{display:flex;gap:12px;align-items:flex-start;margin:18px 0 0;padding:16px 18px;
  border:1px solid color-mix(in srgb,#B3261E 34%,transparent);border-radius:10px;
  background:color-mix(in srgb,#B3261E 6%,#fff);
  font:400 15.5px/1.5 var(--body);color:#5A1A16;text-wrap:pretty}
.form-erro::before{content:"!";flex:none;display:grid;place-items:center;
  width:22px;height:22px;margin-top:1px;border-radius:50%;
  background:#B3261E;color:#fff;font:700 13px/1 var(--body)}
.mb-form .form-erro,.de-fx--navy .form-erro,.f1a--areia .form-erro{
  border-color:rgba(255,190,185,.4);background:rgba(179,38,30,.18);color:#FFD9D6}

/* CONFIRMAÇÃO DE ENVIO — o cartão que substitui o formulário.
   Uma COLUNA CENTRADA: selo, mensagem e ação, nessa ordem, cada um com o seu
   respiro. A primeira versão era um parágrafo em linha, com o ícone colado à
   esquerda e o "voltar" pendurado no pé, sem alinhamento com nada.
   Mesmo cartão de papel das outras peças da página (fio de 1px, raio 14), para
   o formulário e a confirmação pertencerem à mesma família. */
.form-ok{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:0;margin:26px 0 0;padding:44px 40px 38px;
  border:1px solid var(--hb-linha,#E6E3DB);border-radius:14px;
  background:var(--hb-papel,#FAF9F5)}
.form-ok-selo{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal);
  font:700 23px/1 var(--body)}
.form-ok-msg{margin:22px 0 0;max-width:46ch;
  font:400 17.5px/1.6 var(--body);color:var(--ink,#1A2233);text-wrap:pretty}
/* A ação é secundária: o trabalho já foi feito. Contornada, não cheia. */
.form-ok-volta{margin-top:26px;height:44px;padding:0 24px;cursor:pointer;
  border:1px solid var(--f1a-ancora,#233658);border-radius:99px;background:none;
  font:600 13.5px/1 var(--body);color:var(--f1a-ancora,#233658);
  text-decoration:none;transition:background .2s ease,color .2s ease}
.form-ok-volta:hover{background:var(--f1a-ancora,#233658);color:#fff}
.form-ok-volta:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
/* Superfícies navy (Faça Parte). */
.mb-form .form-ok,.de-fx--navy .form-ok,.f1a--areia .form-ok{
  border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.07)}
.mb-form .form-ok-msg,.de-fx--navy .form-ok-msg,.f1a--areia .form-ok-msg{color:var(--f1a-txt-n)}
.mb-form .form-ok-selo,.de-fx--navy .form-ok-selo,.f1a--areia .form-ok-selo{
  background:rgba(63,182,193,.18);color:var(--f1a-teal-n)}
.mb-form .form-ok-volta,.de-fx--navy .form-ok-volta,.f1a--areia .form-ok-volta{
  border-color:var(--f1a-teal-n);color:var(--f1a-teal-n)}
.mb-form .form-ok-volta:hover,.de-fx--navy .form-ok-volta:hover,.f1a--areia .form-ok-volta:hover{
  background:var(--f1a-teal-n);color:#0E1B33}
@media(max-width:560px){
  .form-ok{padding:34px 22px 30px}
  .form-ok-volta{width:100%}
}
.mb-form .form-ok{margin-top:26px}
/* Superfícies navy: o painel claro brigaria com o fundo. */
.mb-form .form-ok,.de-fx--navy .form-ok,.f1a--areia .form-ok{
  border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:var(--f1a-txt-n)}
.mb-form .form-ok::before,.de-fx--navy .form-ok::before,.f1a--areia .form-ok::before{
  background:var(--f1a-teal-n);color:#0E1B33}
.mb-form-t{margin:16px 0 0;font:400 32px/1.15 var(--serif);letter-spacing:.02em;color:var(--f1a-txt-n)}
.mb-form-s{margin:10px 0 0;font:400 14.5px/1.6 var(--body);color:rgba(243,241,236,.65)}
.mb-campos{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 20px;margin-top:26px}
.mb-campo{display:flex;flex-direction:column;gap:6px}
.mb-campo span{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(243,241,236,.66)}
.mb-campo input{height:40px;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.28);
  color:var(--f1a-txt-n);font:400 15px/1 var(--body);padding:0}
.mb-campo input::placeholder{color:rgba(243,241,236,.56)}
.mb-campo input:focus{outline:0;border-bottom-color:var(--f1a-teal-n)}
/* botão claro: o navy padrão sumiria sobre a faixa escura */
.mb-form-campos button{width:100%;height:48px;margin-top:26px;border:0;border-radius:999px;
  background:#F3F1EC;color:#12233F;font:500 15px/1 var(--body);cursor:pointer;transition:background-color .2s ease}
.mb-form-campos button:hover{background:#fff}
.mb-form-nota{margin:14px 0 0;text-align:center;font:400 13px/1.5 var(--body);color:rgba(243,241,236,.65)}
.mb-form-fio{display:block;height:1px;background:rgba(255,255,255,.16);margin:22px 0}
.mb-form-tel{margin:0;text-align:center;font:400 15px/1.5 var(--body);color:rgba(243,241,236,.8)}
.mb-form-tel a{font:400 20px/1.3 var(--serif);color:var(--f1a-txt-n);display:block;margin-top:4px}

/* faixa 3 — fechamento */
.mb-fecho{padding:100px 0 104px}
.mb-frase{margin:26px 0 0;max-width:920px;text-align:center;text-wrap:balance;text-transform:uppercase;
  font:400 40px/1.28 var(--serif);letter-spacing:.02em;color:var(--f1a-ancora)}

@media(max-width:1200px){
  .mb-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mb-prop{flex-direction:column;gap:48px}
  .mb-prop-txt,.mb-form{width:100%}
}
@media(max-width:820px){
  .mb-grade{grid-template-columns:1fr}
  .mb-campos{grid-template-columns:1fr}
  .mb-linha{flex-direction:column;gap:14px}
  .mb-rot{width:100%}
  .mb-frase{font-size:30px}
}

/* ═══ Doe e Receba Energia — handoff das 5 abas (design_handoff_doe_receba_energia 3)
   Três faixas por painel: branca (prosa a 760px + régua de fatos), navy #12233F
   (as perguntas do site viram rótulo, o texto fica ao lado) e branca de novo
   (formulário centralizado a 660px, sem cartão). Sem fio entre faixas — a troca
   branco/navy é a divisa. A última faixa nunca é #12233F: encostada no rodapé
   #152340 ela desaparece.
   Capa e barra de abas ficam FORA do handoff — são componentes do site. */
:root{
  --de-tabs:#1C2F4E;      /* barra de abas (= --f1a-card-n)  */
  --de-navy:#12233F;      /* faixa das perguntas             */
  --de-ouro:#D9A961;      /* aba ativa, numerais de passo    */
  --de-ouro-b:#B08046;    /* barra da citação sobre branco   */
  --de-txt:#F7F5F0;       /* texto claro sobre navy          */
  --de-cinza:#55607A;     /* corpo e rótulo sobre branco  6,2:1 */
  --de-valor:#666E80;     /* placeholder e parênteses     5,1:1 */
  --de-hair:#E3E8F1;      /* hairline sobre branco           */
  --de-hair-n:rgba(255,255,255,.2);   /* fio entre linhas da faixa navy */
  --de-hair-n2:rgba(255,255,255,.14); /* fio entre os passos numerados  */
  --de-campo-b:#D3DAE6;   /* borda de campo de formulário    */
  /* O handoff foi desenhado num container de 1281px; aqui a medida é a mesma
     das outras páginas do site (margem 193px), como pedido. A prosa segue a
     760px do handoff — é ela que define a medida de leitura. */
  --de-cont:1138px;
}
.de-wrap{width:min(100% - 48px,var(--de-cont));margin-inline:auto}

/* barra de abas #1C2F4E — componente do site, não do handoff */
/* A barra de abas acompanha a MARGEM DA BARRA DO TOPO (pedido do Rafael,
   18/09/2026): mesma conta de largura, `min(100% - 2 × --barra-recuo, --max)`.
   Antes ela usava a `.de-wrap` das seções, limitada a 1.138px — numa tela larga
   as abas ficavam bem mais estreitas que a barra logo acima. O fundo navy
   continua sangrando de ponta a ponta; só o conteúdo recua. */
.de-tabs{background:var(--de-tabs)}
.de-tabs .de-tabs-in{width:min(calc(100% - var(--barra-recuo) * 2),var(--max))}
.de-tabs-in{display:flex;align-items:stretch;justify-content:center;gap:16px}
/* As abas passam a dividir a largura do texto em partes iguais, em vez de se
   agruparem no centro: `flex:1` em cada uma e a fileira ocupando a faixa toda. */
.de-tabs-l{display:flex;align-items:stretch;justify-content:center;width:100%;overflow-x:auto;scrollbar-width:none}
.de-tabs-l::-webkit-scrollbar{display:none}
.de-tab{padding:22px 26px 20px;display:flex;flex-direction:column;align-items:center;gap:5px;border-bottom:3px solid transparent;text-decoration:none;flex:1 1 0;min-width:max-content;text-align:center}
/* 15 → 16px e peso 500 → 600: os rótulos ficaram com a mesma presença do menu
   da barra do topo. O contraste sobe junto (.62 → .72) — em 600 o texto a 62%
   de branco sobre navy fica com a borda suja. A aba ativa segue em branco
   cheio, que é o que a distingue. */
.de-tab-r{font:600 16px/1.2 var(--body);color:rgba(247,245,240,.72)}
.de-tab-d{font:400 11.5px/1.2 var(--body);color:rgba(247,245,240,.6)}
.de-tab.on{border-bottom-color:var(--de-ouro)}
.de-tab.on .de-tab-r{color:var(--de-txt)}
.de-tab.on .de-tab-d{color:rgba(217,169,97,.9)}
.de-tab:hover .de-tab-r{color:var(--de-txt)}
/* Descadastro: mesma altura e ritmo das abas, mas é AÇÃO, não navegação — sem
   sublinhado ativo, e separado do grupo por uma divisória fina. O <button>
   precisa do reset porque só os <a> herdavam o desenho de .de-tab. */
.de-tab--sair{background:none;border:0;border-bottom:3px solid transparent;font:inherit;cursor:pointer;
  margin-left:8px;padding-left:26px;border-left:1px solid rgba(247,245,240,.14)}
.de-tab--sair .de-tab-r{color:rgba(247,245,240,.5)}
.de-tab--sair:hover .de-tab-r{color:var(--de-txt)}
.de-tab--sair:focus-visible{outline:2px solid var(--de-ouro);outline-offset:-2px}

/* Saída do programa, no pé das páginas de energia. Discreto de propósito:
   quem chega aqui já sabe o que procura, e um botão cheio competiria com o
   cadastro logo acima. */
/* ── Diálogo de descadastro ─────────────────────────────────────────────────
   Ele NÃO tinha estilo nestas páginas. As regras que existiam estão presas a
   `.legacy-page`, e as telas de energia são `main.de` — nunca casaram. Medido
   em 19/09/2026: raio 0, sem sombra, padding padrão do navegador e campo de
   21px de altura, tudo cru.
   O desenho abaixo é o da própria página: cartão de papel com fio e raio 14,
   título em Cinzel, campos com filete embaixo (`.de-campo`) e botão navy
   arredondado (`.de-btn`). Escopo no próprio diálogo, sem depender do
   contêiner, para valer em qualquer página que o monte. */
.legacy-unsubscribe-dialog{
  width:min(560px,calc(100vw - 32px));padding:34px 36px 30px;
  border:1px solid var(--hb-linha,#E6E3DB);border-radius:14px;
  background:var(--hb-papel,#FAF9F5);color:var(--ink,#1A2233);
  box-shadow:0 30px 70px rgba(12,23,45,.28)}
.legacy-unsubscribe-dialog::backdrop{background:rgba(12,23,45,.55);backdrop-filter:blur(2px)}
.legacy-unsubscribe-dialog h2{margin:0 0 6px;
  font:400 27px/1.2 var(--serif);letter-spacing:.01em;color:var(--f1a-ancora,#233658);text-transform:none}
/* Campo: filete embaixo, como no formulário de cadastro — o mesmo gesto, para
   o diálogo não parecer de outro site. */
.legacy-unsubscribe-dialog input[type="email"],
.legacy-unsubscribe-dialog textarea{
  display:block;width:100%;box-sizing:border-box;margin:22px 0 0;padding:0 0 10px;
  height:auto;border:0;border-bottom:1px solid var(--de-campo-b,#C9C3B4);border-radius:0;
  background:none;color:var(--ink,#1A2233);font:400 15.5px/1.6 var(--body);
  transition:border-color .2s ease}
.legacy-unsubscribe-dialog textarea{margin-top:20px;height:74px;resize:vertical}
.legacy-unsubscribe-dialog input[type="email"]:focus,
.legacy-unsubscribe-dialog textarea:focus{outline:0;border-bottom-color:var(--f1a-teal)}
.legacy-unsubscribe-dialog input::placeholder,
.legacy-unsubscribe-dialog textarea::placeholder{color:#8B93A6}
.legacy-unsubscribe-dialog .legacy-check{display:flex;align-items:flex-start;gap:11px;
  margin:20px 0 0;font:400 14.5px/1.55 var(--body);color:var(--de-cinza,#5A6478)}
.legacy-unsubscribe-dialog .legacy-check input{margin-top:2px;width:17px;height:17px;flex:none;
  accent-color:var(--f1a-teal)}
.legacy-unsubscribe-dialog .legacy-dialog-actions{display:flex;justify-content:flex-end;
  align-items:center;gap:8px;margin-top:28px;padding-top:22px;
  border-top:1px solid var(--hb-linha,#E6E3DB)}
.legacy-unsubscribe-dialog .cancel{background:none;border:0;padding:12px 16px;cursor:pointer;
  font:600 14px/1 var(--body);color:var(--de-cinza,#5A6478);border-radius:99px}
.legacy-unsubscribe-dialog .cancel:hover{color:var(--ink,#1A2233);background:rgba(18,35,63,.05)}
.legacy-unsubscribe-dialog .confirm{border:0;border-radius:99px;padding:0 26px;height:46px;cursor:pointer;
  background:var(--de-navy,#12233F);color:#fff;font:600 14.5px/1 var(--body)}
.legacy-unsubscribe-dialog .confirm:hover{background:#1B3055}
.legacy-unsubscribe-dialog .cancel:focus-visible,
.legacy-unsubscribe-dialog .confirm:focus-visible{outline:2px solid var(--f1a-teal);outline-offset:3px}
@media(max-width:560px){
  .legacy-unsubscribe-dialog{padding:26px 22px 22px}
  .legacy-unsubscribe-dialog .legacy-dialog-actions{flex-direction:column-reverse;align-items:stretch}
  .legacy-unsubscribe-dialog .confirm{width:100%}
}

/* De qual programa a pessoa está saindo, quando a página já define isso: é
   informação, não escolha — por isso não é uma caixa marcada e travada, que
   pareceria clicável. */
.legacy-unsub-alvo{margin:2px 0 0;padding:10px 14px;border-radius:8px;
  background:var(--hb-papel,#FAF9F5);border:1px solid var(--hb-linha,#E6E3DB);
  font:600 14px/1.4 var(--body);color:var(--f1a-ancora,#233658)}

/* A saída do programa, no pé da faixa de inscrição. Uma LINHA, não um cartão:
   texto à esquerda, ação à direita, separada por um fio do formulário acima.
   Era um cartão de papel solto depois da faixa — um bloco novo no fim da
   página, sem relação visível com nada. Aqui a porta de saída fica encostada
   na porta de entrada, que é onde alguém a procura. */
/* SAÍDA DO PROGRAMA — cartão, no pé da faixa de inscrição.
   Passou por quatro formas hoje até chegar aqui: dentro da barra de abas, um
   link solto, um cartão de papel avulso no fim da página e uma linha com fio.
   A última era texto jogado, sem respiro e sem alinhamento com o formulário
   acima — que é a reclamação do Rafael.
   Agora é o MESMO cartão da confirmação de envio (papel, fio de 1px, raio 14,
   coluna centrada): quem lê o formulário reconhece a peça, e a porta de saída
   tem o mesmo peso visual da porta de entrada, sem competir com ela — o botão
   é contornado, não cheio. */
.de-sair{display:flex;flex-direction:column;align-items:center;text-align:center;
  margin-top:44px;padding:32px 36px 30px;
  border:1px solid var(--hb-linha,#E6E3DB);border-radius:14px;
  background:var(--hb-papel,#FAF9F5)}
.de-sair-t{margin:0;font:400 20px/1.3 var(--serif);color:var(--f1a-ancora,#233658)}
.de-sair-d{margin:10px 0 0;max-width:52ch;
  font:400 14.5px/1.65 var(--body);color:var(--de-cinza,#5A6478);text-wrap:pretty}
.de-sair-bt{margin-top:22px;height:44px;padding:0 24px;cursor:pointer;
  border:1px solid var(--f1a-ancora,#233658);border-radius:99px;background:none;
  font:600 13px/1 var(--body);letter-spacing:.06em;color:var(--f1a-ancora,#233658);
  transition:background .2s ease,color .2s ease}
.de-sair-bt:hover{background:var(--f1a-ancora,#233658);color:#fff}
.de-sair-bt:focus-visible{outline:2px solid var(--f1a-teal);outline-offset:3px}
@media(max-width:560px){
  .de-sair{padding:26px 20px 24px}
  .de-sair-bt{width:100%}
}


/* ── faixas ─────────────────────────────────────────────────────────────── */
.de-fx{padding:92px 0 96px}
.de-fx--claro{background:#fff}
.de-fx--navy{background:var(--de-navy)}
/* ── Página sem faixa navy ──────────────────────────────────────────────────
   A faixa vira papel, e com ela TUDO o que foi escrito para ler sobre navy: o
   eyebrow em teal claro, o fio de 20% de branco entre as linhas, o corpo a 72%
   de branco e os links em teal claro. Sem esta lista o texto sairia quase
   branco sobre papel — o mesmo defeito que a mensagem de envio tinha.
   O arredondamento e a foto sob o véu também saem: não há faixa para recortar. */
.de--claro .de-fx--navy{background:none;background-image:none;border-radius:0;
  box-shadow:none;overflow:visible;color:var(--ink,#1A2233)}
.de--claro .de-fx--navy .de-eb--tealc{color:var(--f1a-teal)}
.de--claro .de-fx--navy .de-eb::before{background:var(--f1a-teal)}
.de--claro .de-fx--navy .de-linha{border-top-color:var(--de-hair,#E3DFD5)}
.de--claro .de-fx--navy .de-linha-r{color:var(--f1a-ancora,#233658)}
.de--claro .de-fx--navy .de-pn{color:var(--de-cinza,#5A6478)}
.de--claro .de-fx--navy .de-pn--forte{color:var(--ink,#1A2233)}
.de--claro .de-fx--navy .de-pn a{color:var(--f1a-teal)}
/* ESPAÇAMENTO, que vai junto com a cor. Cada faixa tem 92px em cima e 96 em
   baixo: entre duas vizinhas são 188px, e isso só se lê como respiro quando a
   COR muda ali. Com a página toda em papel vira um buraco no meio do texto.
   Entre seções fica um valor só, 72px — o mesmo passo do resto do site. A
   primeira mantém o respiro da capa e a última, o do rodapé. */
/* `:last-of-type`, e não `:last-child`: depois da última faixa vêm o <dialog>
   do descadastro e o script, então ela nunca é o último filho — e o respiro
   antes do rodapé sumia. */
.de--claro .de-fx:not(:last-of-type){padding-bottom:0}
.de--claro .de-fx + .de-fx{padding-top:72px}
.de-fx--form{background:#fff;padding:88px 0 100px}

/* ── ficha de 4 campos (só "Trabalho em Hospitais", padrão anterior) ──────── */
/* padding:0 anula a regra global `section{padding:clamp(...104px)}` — a ficha é
   uma faixa compacta; o respiro vem do padding dos próprios campos (30px). */
.de-ficha{background:var(--de-navy);padding:0;border-top:1px solid var(--de-hair-n2)}
.de-ficha-in{display:grid;grid-template-columns:repeat(4,1fr)}
.de-ficha-c{padding:30px 0 30px 32px;display:flex;flex-direction:column;gap:7px;border-right:1px solid var(--de-hair-n2)}
.de-ficha-c:first-child{padding-left:0}
.de-ficha-c:last-child{border-right:0}
.de-ficha-k{font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--de-ouro)}
.de-ficha-v{font:400 16px/1.3 var(--body);color:var(--de-txt)}

/* ── faixa 1: prosa a 760px + régua de fatos ────────────────────────────── */
.de-2col{display:flex;gap:76px;align-items:flex-start}
.de-prosa{width:760px;flex:none;min-width:0;display:flex;flex-direction:column}
.de-regua{flex:1;min-width:0;display:flex;flex-direction:column;border-top:1px solid var(--de-hair)}
.de-regua-i{padding:20px 0;border-bottom:1px solid var(--de-hair);display:flex;flex-direction:column;gap:6px}
.de-regua-v{font:400 34px/1.1 var(--serif);color:var(--f1a-ancora);text-wrap:pretty}
.de-regua-d{font:400 14px/1.5 var(--body);color:var(--de-cinza);text-wrap:pretty}

/* ── tipografia comum ───────────────────────────────────────────────────── */
.de-eb{display:flex;align-items:center;gap:14px;margin-bottom:24px;font:500 11px/1 var(--body);letter-spacing:.2em}
.de-eb::before{content:"";width:22px;height:1px;background:currentColor;opacity:.55;flex:none}
.de-eb--teal{color:var(--f1a-teal)}
.de-eb--tealc{color:var(--f1a-teal-n)}
/* eyebrow centralizado da faixa de formulário: fio dos dois lados */
.de-eb--c{justify-content:center;gap:16px;margin-bottom:0}
.de-eb--c::before,.de-eb--c::after{content:"";width:28px;height:1px;background:currentColor;opacity:.5;flex:none}
.de-h2{margin:0;font:400 40px/1.14 var(--serif);letter-spacing:.02em;color:var(--f1a-ancora);text-wrap:pretty}
.de-h2--c{margin-top:18px;text-align:center}
/* a pergunta de abertura do relato vive numa coluna de 490px */
.de-h2--pergunta{font-size:34px;line-height:1.2}
.de-p{margin:16px 0 0;font:400 18px/1.7 var(--body);color:var(--de-cinza);text-wrap:pretty}
.de-p:first-of-type{margin-top:0}
.de-p--c{margin-top:20px;text-align:center}
.de-p a{color:var(--f1a-teal);text-decoration:underline}
.de-p em{font-style:italic}
.de-cit{margin-top:28px;padding-left:22px;border-left:2px solid var(--de-ouro-b);font:400 25px/1.4 var(--serif);color:var(--f1a-ancora);text-wrap:pretty}
.de-cit--sm{font-size:23px}

/* ── faixa navy: a pergunta do site como rótulo, o texto ao lado ─────────── */
.de-linha{display:flex;gap:58px;margin-top:34px;padding-top:34px;border-top:1px solid var(--de-hair-n)}
.de-linha:first-of-type{margin-top:44px}
.de-linha-r{width:320px;flex:none;font:400 29px/1.24 var(--serif);letter-spacing:.02em;color:var(--de-txt);text-wrap:pretty}
.de-linha-c{flex:1;min-width:0;max-width:760px;display:flex;flex-direction:column;align-items:flex-start}
.de-pn{margin:20px 0 0;font:400 18px/1.7 var(--body);color:rgba(247,245,240,.72);text-wrap:pretty}
.de-pn:first-child{margin-top:0}
/* o pré-requisito é destaque por cor, sem caixa de aviso */
.de-pn--forte{color:var(--de-txt)}
.de-pn a{color:var(--f1a-teal-n);text-decoration:underline}
.de-pn em{font-style:italic}

/* passos numerados: hairlines, sem cartão — a ordem é que importa */
.de-passos{width:100%;display:flex;flex-direction:column}
.de-passo{display:flex;gap:20px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--de-hair-n2)}
.de-passo:first-child{padding-top:0}
.de-passo:last-child{padding-bottom:0;border-bottom:0}
.de-num{font:500 12px/1.7 var(--mono);color:var(--de-ouro);flex:none;padding-top:2px}
.de-passo-p{font:400 18px/1.7 var(--body);color:rgba(247,245,240,.72);text-wrap:pretty}
.de-passo-p a{color:var(--f1a-teal-n);text-decoration:underline}

/* botão fantasma: cumpre o que a frase do site manda fazer */
.de-ghost{height:44px;padding:0 26px;border-radius:99px;border:1px solid rgba(247,245,240,.4);color:var(--de-txt);font:500 14.5px/1 var(--body);display:inline-flex;align-items:center;text-decoration:none;margin-top:22px}
.de-ghost:hover{border-color:var(--de-txt);background:rgba(255,255,255,.06)}

/* ── faixa 3: formulário centralizado a 660px, sem cartão ───────────────── */
.de-formcol{width:min(100% - 48px,660px);margin-inline:auto;display:flex;flex-direction:column;align-items:center}
.de-forma{width:100%;display:flex;flex-direction:column}
.de-form-g{width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:26px 22px;margin-top:44px}
.de-campo{display:flex;flex-direction:column;gap:8px}
.de-campo--full{grid-column:span 2}
/* O VERSALETE é do CSS, não do texto. Os rótulos vinham escritos em caixa
   alta no componente ("NOME DE QUEM VAI RECEBER"); agora vêm da ficha do
   formulário, no painel, onde caixa alta seria ilegível para quem edita — e
   iria junto para o e-mail de alerta. Mesmo desenho, texto legível na fonte. */
.de-campo span{font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--de-cinza);text-transform:uppercase}
.de-campo span i{color:var(--de-valor);font-style:normal}
.de-campo input,.de-campo textarea{background:none;border:0;border-bottom:1px solid var(--de-campo-b);color:#1A2233;font:400 15px/1.6 var(--body);padding:0}
.de-campo input{height:40px}
.de-campo textarea{min-height:64px;padding:8px 0;resize:vertical}
/* a área de várias linhas é o único campo com caixa fechada: sobre branco a
   hairline sozinha não mostra onde se pode escrever */
.de-campo--cx textarea{border:1px solid var(--de-campo-b);border-radius:8px;padding:14px 16px;min-height:112px}
.de-campo input::placeholder,.de-campo textarea::placeholder{color:var(--de-valor)}
.de-campo input:focus,.de-campo textarea:focus{outline:0;border-color:var(--f1a-teal)}
.de-agree{width:100%;display:flex;gap:14px;align-items:flex-start;margin-top:34px;font:400 14.5px/1.6 var(--body);color:var(--de-cinza);text-wrap:pretty}
/* Duas caixas seguidas são o MESMO bloco de aceite: entre elas o respiro é o
   de uma lista, não o de 34px que separa o aceite dos campos acima. */
.de-agree + .de-agree{margin-top:14px}
.de-agree input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--f1a-teal)}
.de-agree a{color:var(--f1a-teal);text-decoration:underline}
.de-agree em{color:var(--de-valor);font-style:normal}
.de-btn{width:100%;height:48px;border:0;border-radius:99px;background:var(--de-navy);color:var(--de-txt);font:600 15.5px/1 var(--body);display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-top:32px;cursor:pointer;text-decoration:none}
.de-btn:hover{background:#1B3055}

/* ── aba 5: relato — faixa única branca, texto à esquerda, formulário à direita
   (não tem perguntas: o navy das outras abas serve justamente para marcá-las) */
.de-relato{display:flex;gap:72px;align-items:flex-start}
.de-relato-txt{width:490px;flex:none;min-width:0;display:flex;flex-direction:column}
.de-relato-form{flex:1;min-width:0}
.de-relato-form .de-form-g{margin-top:28px}
.de-relato-form .de-agree,.de-relato-form .de-btn{margin-top:30px}
.de-forma-h{font:400 27px/1.2 var(--serif);color:var(--f1a-ancora)}

/* ── aba 4: hospitais — padrão anterior (prosa + lista "Quem é atendido") ── */
.de-lista{flex:1;min-width:0;display:flex;flex-direction:column}
.de-lista-k{font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--f1a-teal);padding-bottom:14px;border-bottom:1px solid var(--f1a-ancora)}
.de-lista-i{font:400 15px/1.45 var(--body);color:#1A2233;padding:14px 0;border-bottom:1px solid #EDEFF4}

@media(max-width:1200px){
  /* a régua vira uma linha horizontal de 3 abaixo da prosa */
  .de-2col{flex-direction:column;gap:44px}
  .de-prosa{width:100%}
  .de-regua{flex-direction:row;gap:32px;width:100%}
  .de-regua-i{flex:1;border-bottom:0}
  /* a linha perde a coluna: rótulo acima do conteúdo */
  .de-linha{flex-direction:column;gap:20px}
  .de-linha-r{width:100%}
  .de-linha-c{max-width:none}
  .de-relato{flex-direction:column;gap:48px}
  .de-relato-txt{width:100%}
  /* ficha 4 → 2 colunas */
  .de-ficha-in{grid-template-columns:repeat(2,1fr);gap:0 40px}
  .de-ficha-c{border-right:0;padding-left:0}
  .de-ficha-c:nth-child(n+3){border-top:1px solid var(--de-hair-n2)}
}
@media(max-width:820px){
  .de-fx{padding:56px 0}
  .de-fx--form{padding:56px 0 64px}
  .de-regua{flex-direction:column;gap:0}
  .de-regua-i{border-bottom:1px solid var(--de-hair)}
  .de-h2{font-size:30px}
  .de-h2--pergunta{font-size:28px}
  .de-linha-r{font-size:24px}
  .de-form-g{grid-template-columns:1fr}
  .de-campo--full{grid-column:span 1}
  /* ficha em 1 coluna */
  .de-ficha-in{grid-template-columns:1fr}
  .de-ficha-c:nth-child(2){border-top:1px solid var(--de-hair-n2)}
}

/* ═══ Como Ajudar ═════════════════════════════════════════════════════════
   TRÊS FAIXAS DE PAPEL (19/09/2026). A página passou por dois desenhos neste
   dia: primeiro duas colunas — o porquê em 500px à esquerda e um painel navy à
   direita, que disputavam a mesma altura e deixavam um vão no meio; depois
   duas faixas, com o painel navy ainda envolvendo metade da página. O dono
   olhou e disse para tirar o cabeçalho "Como contribuir" de dentro do quadro
   azul. O que ficou:

   1ª  o porquê — eyebrow centrado e texto corrido de largura inteira.
   2ª  como contribuir — cabeçalho FORA de qualquer caixa e os três caminhos em
       cartões de PAPEL, os mesmos `.m1a-doa-c` da página do Mosteiro.
   3ª  como doar — o navy sobrou só aqui, em volta dos DADOS (tabela do
       depósito e cartão do PayPal), que é o que ele separa bem: números para
       copiar sem errar. Fecha com a frase que antes ficava no meio da tela.

   A régua é a das seções do Mosteiro: 72px entre faixas, 96px no pé. */
/* A RÉGUA DO SITE, e não uma largura só desta página. `--f1a-container` (1296px)
   com `--gut` de recuo é o que as páginas de tema usam — medido em
   /temas/clarividencia/ a 1400px: container de 1296 centrado, 77px de recuo, e
   o texto nascendo a 129px da borda da janela. Esta página tinha
   `min(100% - 48px, 1281px)`, que punha o conteúdo a 60px: mais largo que
   todas as vizinhas, e a diferença aparecia ao trocar de página. */
.ca-wrap{max-width:var(--f1a-container);margin-inline:auto;padding-inline:var(--gut)}
.ca-fx{background:#fff}
.ca-fx--texto{padding:96px 0 0}
.ca-fx--caminhos{padding:72px 0 0}
.ca-fx--doar{padding:72px 0 96px}

/* 1ª faixa — o porquê. Sem eyebrow: os dois da página saíram a pedido
   (19/09/2026), e com eles a regra de respiro que existia só para eles. */
.ca-porque{min-width:0;display:flex;flex-direction:column}

/* Cabeçalho da 2ª faixa: eyebrow e título, sem chamada — ela repetia em prosa
   o que os três cartões dizem um a um, e saiu a pedido. `.ca-lede` foi embora
   com ela. */
.ca-cab{margin-bottom:34px}
/* Texto CORRIDO na largura inteira. Chegou a sair em duas colunas
   tipográficas, para segurar a medida de linha — não era o que foi pedido, e o
   pedido é que manda. */
.ca-prosa{min-width:0}
/* 16/1,72 → 18/1,5: é a mesma régua do `.read .lead` (linha ~701), o parágrafo
   de corpo das páginas institucionais — medido em /quem-somos/: Karla 18px com
   entrelinha de 27px. Este bloco era o único texto corrido do site num corpo
   menor, e ficava visivelmente mais miúdo que o das páginas vizinhas. A cor já
   era a mesma. */
.ca-p{margin:20px 0 0;font:400 18px/1.5 var(--body);color:var(--de-cinza);text-wrap:pretty}
.ca-p:first-of-type{margin-top:0}
/* O FECHO da página. Era o pé da coluna da esquerda, e caía no meio da tela;
   agora fecha a última faixa. Centrada e com `max-width`, porque em 32px uma
   frase esticada por 1281px passaria de 100 caracteres numa linha só. */
.ca-cit{margin:72px auto 0;max-width:900px;text-align:center;font:400 32px/1.34 var(--serif);letter-spacing:.01em;color:var(--f1a-ancora);text-wrap:pretty;text-wrap:balance}

/* coluna direita — painel navy */
/* `.ca-painel`, `.ca-painel-k`, `-h` e `-p` saíram com o quadro azul que
   envolvia meia página: o cabeçalho passou a usar as classes centradas do
   sistema (`de-eb--c`, `de-h2--c`, `de-p--c`), que são as mesmas das páginas
   de energia. Três regras a menos e um jeito a menos de escrever a mesma
   coisa. */

/* dois cartões — o cartão inteiro é o link, CTA ancorado no pé */
/* `auto-fit` e não `repeat(3,1fr)`: são três hoje (membro, apoiador, loja) e o
   editor pode acrescentar ou tirar um no admin sem que isso vire uma mudança
   de código. Mesma grade dos cartões de doação do Mosteiro (`.m1a-doa`). */
.ca-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:26px}
/* Cartões de PAPEL, iguais aos de doação do Mosteiro (`.m1a-doa-c`): mesma
   borda, mesmo raio, mesmo hover de 2px com sombra baixa. Eram navy-sobre-navy
   enquanto viviam dentro do painel; sobre branco, aquele fundo os transformava
   em três caixas escuras no meio da página. */
.ca-card{background:var(--f1a-claro);border:1px solid var(--f1a-borda);border-radius:10px;padding:24px;display:flex;flex-direction:column;text-decoration:none;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.ca-card:hover{transform:translateY(-2px);border-color:var(--f1a-ancora);box-shadow:0 10px 26px rgba(22,32,66,.12)}
.ca-card-h{font:400 24px/1.2 var(--serif);color:var(--ink)}
.ca-card-d{margin-top:10px;font:400 15px/1.6 var(--body);color:var(--ink-2);text-wrap:pretty}
.ca-card-sp{flex:1;min-height:16px}
.ca-card-cta{font:500 11px/1 var(--body);letter-spacing:.14em;color:var(--f1a-teal)}

/* As formas de doar, LADO A LADO: a tabela do depósito e o cartão do PayPal.
   O depósito leva mais espaço porque o que ele carrega é uma tabela de cinco
   números que não podem quebrar; o PayPal é um parágrafo e um botão. */
/* As duas formas de doar são PARES: dois cartões iguais, mesma largura e mesma
   casca. Numa primeira versão o depósito ficava solto sobre o navy e só o
   PayPal era um cartão — um parecia o fundo e o outro, um apêndice colado nele
   (e as larguras saíam 708 contra 457). `1fr 1fr` e `stretch`: iguais também
   em altura, porque a tabela é mais alta que o parágrafo do PayPal. */
.ca-doar{scroll-margin-top:40px;background:var(--de-navy);border-radius:14px;padding:42px;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:24px;align-items:stretch}
/* A casca comum dos dois. */
.ca-dep,.ca-pp{background:var(--de-tabs);border-radius:10px;padding:26px 26px 24px;display:flex;flex-direction:column;min-width:0;box-sizing:border-box}
.ca-dep-head{display:flex;gap:28px;align-items:baseline}
.ca-dep-t{flex:none;font:400 23px/1.22 var(--serif);color:var(--de-txt)}

.ca-pp-d{margin:12px 0 0;font:400 14.5px/1.6 var(--body);color:rgba(247,245,240,.72);text-wrap:pretty}
.ca-pp-sp{flex:1;min-height:20px}
/* Ouro sobre navy, com o texto em navy: o acento do sistema (aba ativa,
   numerais de passo) no único botão de AÇÃO do painel. Medido: #12233F sobre
   #D9A961 dá 7,3:1. Um botão navy como o `.de-btn` sumiria no fundo navy. */
.ca-pp-btn{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 26px;border-radius:99px;background:var(--de-ouro);color:#12233F;font:600 14px/1 var(--body);letter-spacing:.02em;text-decoration:none}
.ca-pp-btn:hover{background:#E4B872}
.ca-dep-p{margin:0;flex:1;font:400 14px/1.6 var(--body);color:rgba(247,245,240,.66);text-wrap:pretty}

/* tabela de números — CNPJ/conta/PIX na linha inteira, valores em nowrap:
   um número que quebra em duas linhas é o pior erro num bloco de transcrição */
/* UMA coluna. Eram duas, e só BANCO e AGÊNCIA (as linhas sem `--full`) caíam
   lado a lado — as outras três já ocupavam a largura inteira. O resultado era
   uma tabela de dados bancários que começava em duas colunas e virava uma no
   meio. Em coluna única os cinco campos leem na mesma ordem em que se preenche
   uma transferência. */
.ca-tab{display:grid;grid-template-columns:1fr;gap:0;margin-top:24px}
.ca-row{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.12)}
/* Sem efeito com a grade em 1 coluna; fica porque o componente ainda marca as
   linhas que eram de largura inteira quando a tabela tinha duas colunas. */
.ca-row--full{grid-column:span 1}
.ca-row--pix{border-bottom:0;padding:15px 0 0}
.ca-row-k{width:76px;flex:none;font:500 10px/1 var(--mono);letter-spacing:.14em;color:rgba(247,245,240,.62)}
.ca-row-k--pix{color:var(--de-ouro)}
.ca-row-v{flex:1;min-width:0;font-size:15.5px;color:var(--de-txt)}
.ca-row-v span{color:rgba(247,245,240,.62)}
.ca-mono{font:400 15.5px/1.35 var(--mono);white-space:nowrap}
/* `min-width` do tamanho de "COPIAR": ao virar o certo de confirmação o
   rótulo encolheria de 6 caracteres para 1, e a coluna de valores pularia para
   a direita a cada clique. */
/* O versalete é do CSS: o rótulo vem do dicionário (chave `copiar`), onde
   "COPIAR" em caixa alta seria ruído para quem edita. */
.ca-copy{flex:none;min-width:52px;text-align:right;background:none;border:0;cursor:pointer;font:500 10px/1 var(--mono);letter-spacing:.12em;color:var(--de-ouro);text-transform:uppercase}
/* Confirmação de cópia: só o CERTO, em verde, por 1,6s — depois volta a dizer
   COPIAR. A palavra "copiado" dizia o mesmo ocupando a linha inteira, e o
   cinza de antes apagava o rótulo em vez de confirmar a ação. #5BC98A mede
   6,5:1 sobre o #1C2F4E do cartão. */
.ca-copy--ok{color:#5BC98A;font-size:14px}

@media(max-width:1000px){
  /* A tabela do depósito perderia os números para a quebra de linha se a
     coluna encolhesse mais: as duas formas de doar viram uma coluna só. */
  .ca-doar{grid-template-columns:1fr;gap:24px}
}
@media(max-width:820px){
  .ca-fx--texto{padding:56px 0 0}
  .ca-fx--painel{padding:48px 0 64px}
  .ca-cards{grid-template-columns:1fr}
  .ca-tab{grid-template-columns:1fr}
  /* linha em coluna: rótulo em cima, valor+COPIAR abaixo; o valor pode quebrar
     (num painel estreito o e-mail PIX com nowrap estouraria a faixa) */
  .ca-row{grid-column:span 1;flex-wrap:wrap;row-gap:4px}
  .ca-row-k{width:100%}
  .ca-mono{white-space:normal;word-break:break-word}
  .ca-dep-head{flex-direction:column;gap:10px}
  .ca-cit{font-size:27px}
}

/* ═══════════════════════════════════════════════════════════════
   REGRAS QUE VIVIAM DENTRO DO render.ts
   Estavam num <style> logo após o conteúdo deste arquivo — ou seja,
   depois na cascata, que é exatamente a posição em que continuam aqui.
   Eram 270 linhas estáticas embutidas em CADA resposta HTML.
   ═══════════════════════════════════════════════════════════════ */
/* conteúdo vindo do banco */
/* Sem coluna estreita: as páginas internas usam a mesma largura da home
   (o original usa a largura cheia do container). Fonte 18px como no site atual. */
.prose{max-width:none;margin:0;font-size:18px;line-height:1.5}
.prose p{color:var(--ink-2);margin:0 0 1.15em;font-size:18px;line-height:1.5}
.prose h2{margin:2em 0 .6em}
.prose h3{font-family:var(--body);font-weight:600;font-size:21px;margin:1.8em 0 .5em}
.prose ul,.prose ol{color:var(--ink-2);padding-left:1.2em;margin:0 0 1.2em;font-size:18px;line-height:1.5}
.prose li{margin:.35em 0}
.prose figure{margin:2em 0}
.prose img{border-radius:var(--r);width:auto;max-width:100%;height:auto}
.prose figure{margin:2em 0}
.prose .pull{border-left:3px solid var(--teal);padding-left:22px;margin:1.8em 0;font-family:var(--disp);font-size:20px;color:var(--ink)}
.embed iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r)}
.destaques{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.destaques{grid-template-columns:1fr}}
.dcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 26px}
.dcard h3{font-family:var(--disp);font-size:21px;margin:0 0 12px;color:var(--blue-700)}
.dcard p{margin:0 0 20px;color:var(--ink-2);font-size:16px}
.dctas{display:flex;gap:10px;flex-wrap:wrap}
.dctas .pill{font-size:14.5px;padding:11px 18px}
.fsocial{display:flex;gap:14px;margin-top:18px}
.fsocial img{height:18px;width:18px;opacity:.8}
.fsocial a:hover img{opacity:1}

/* Arquivo (/categoria, /temas): grade de cards de post — no original a página
   é uma listagem, não texto. 3 por linha, como no site atual. */
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
@media(max-width:900px){.postgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.postgrid{grid-template-columns:1fr}}
.postcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.28s;display:block}
.postcard:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(21,35,64,.12)}
.postcard img{aspect-ratio:16/10;object-fit:cover;width:100%}
.postcard .b{padding:16px 18px}
.postcard h3{font-family:var(--body);font-size:16.5px;font-weight:600;line-height:1.4;margin:0 0 8px}
.postcard p{margin:0;font-size:14.5px;color:var(--ink-2)}
.postcard time{display:block;font-size:12.5px;color:var(--teal);font-weight:600;margin-bottom:6px}

/* Duas colunas — medido no original: 660px + 660px (metade/metade), e
   440 + 880 em Como Ajudar. Imagem numa coluna, texto na outra. */
.duas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;margin:0 0 2.4em}
.duas.img-txt{grid-template-columns:1fr 2fr}
@media(max-width:820px){.duas,.duas.img-txt{grid-template-columns:1fr}}
.duas figure{margin:0}
.duas img{width:100%;border-radius:var(--r)}
/* Faixa de breadcrumb — medida no original: 260px, #233658 + fundo-cosmo2,
   padding 144px/44px, texto 16px branco. O original NÃO exibe título aqui. */
.breadcrumbs{background:var(--blue-700) center/cover no-repeat;color:#fff;padding:144px 0 44px}
.breadcrumbs .crumbs{font-size:16px;color:#fff;display:flex;gap:10px;align-items:center}
.breadcrumbs a{color:#fff;text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}
.breadcrumbs .sep{opacity:.75}
@media(max-width:700px){.breadcrumbs{padding:70px 0 30px}}

/* Reconstrução fiel das páginas institucionais importadas do WordPress.
   Tudo fica sob .legacy-page: estas regras NÃO alcançam a página inicial. */
.legacy-page{background:#fff}
.legacy-page .legacy-section{padding:60px 0;background:#fff}
.legacy-page .legacy-section--soft{background:#f5f5f5}
.legacy-page .legacy-section--events{background:#f3f3f3;padding:100px 0}
.legacy-page .legacy-section--dark{background:#262d3b;color:#fff}
.legacy-page .legacy-prose{max-width:none;margin:0;font-size:18px;line-height:1.5}
.legacy-page .legacy-prose p{margin:0 0 1.25em;color:#646b78;font-size:18px;line-height:1.5}
.legacy-page .legacy-prose p:last-child{margin-bottom:0}
.legacy-page .legacy-prose strong{font-weight:700;color:inherit}
.legacy-page .legacy-prose em{font-style:italic}
.legacy-page .legacy-prose ul,.legacy-page .legacy-prose ol{margin:0 0 1.25em;padding-left:1.35em;color:#646b78;font-size:18px;line-height:1.5}
.legacy-page .legacy-prose li{margin:.32em 0}
.legacy-page .legacy-section--dark .legacy-prose p,
.legacy-page .legacy-section--dark .legacy-prose li,
.legacy-page .legacy-section--dark .legacy-prose ul,
.legacy-page .legacy-section--dark .legacy-prose ol{color:#f5f6f8}
.legacy-page .legacy-title{margin:18px 0 28px;font-size:clamp(30px,3.4vw,42px);line-height:1.18}
.legacy-page .legacy-title:first-child{margin-top:0}
.legacy-page .legacy-eyebrow{display:block;margin:0 0 8px;color:#6b7280;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.legacy-page .legacy-subtitle{font-family:var(--disp);font-size:24px;font-weight:600;line-height:1.25;color:var(--blue-700);margin:0 0 24px;text-transform:uppercase}
.legacy-page .legacy-section--dark .legacy-subtitle{color:#fff}
.legacy-page .legacy-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.legacy-page .legacy-grid--center{align-items:center}
.legacy-page figure{margin:0}
.legacy-page .legacy-image img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
.legacy-page .legacy-hero-image{aspect-ratio:1296/523}
.legacy-page .legacy-about-image{aspect-ratio:636/601}
.legacy-page .legacy-founder-image{aspect-ratio:636/582}
.legacy-page .legacy-gallery-frame{position:relative;min-width:0}
.legacy-page .legacy-gallery-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth}
.legacy-page .legacy-gallery-track figure{aspect-ratio:636/684;scroll-snap-align:start}
.legacy-page .legacy-gallery-track img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
.legacy-page .legacy-gallery-nav{position:absolute;inset:50% 14px auto;display:flex;justify-content:space-between;pointer-events:none;transform:translateY(-50%)}
.legacy-page .legacy-gallery-nav button{pointer-events:auto;width:42px;height:42px;border:1px solid rgba(255,255,255,.72);border-radius:50%;background:rgba(35,54,88,.72);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.legacy-page .legacy-gallery-count{position:absolute;right:16px;bottom:14px;padding:6px 10px;border-radius:18px;background:rgba(23,32,52,.76);color:#fff;font-size:12px}
.legacy-page .legacy-map-card{padding:24px;border-radius:12px;background:#f5f5f5;box-shadow:0 10px 26px rgba(21,35,64,.08)}
.legacy-page .legacy-map-card h2{margin:0 0 16px;font-family:var(--disp);font-size:24px;color:var(--blue-700);text-transform:uppercase}
.legacy-page .legacy-contact-line{display:flex;align-items:center;gap:14px;margin:10px 0;color:#646b78;font-size:18px}
.legacy-page .legacy-contact-line img{width:16px;height:18px;object-fit:contain;border-radius:0}
.legacy-page .legacy-map-card iframe{display:block;width:100%;height:300px;margin-top:24px;border:0;border-radius:10px}
.legacy-page .legacy-important{margin-top:22px;padding:24px;border-radius:12px;background:#fff;color:#646b78}
.legacy-page .legacy-important .legacy-subtitle{padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid #ddd;color:var(--blue-700)}
.legacy-page .legacy-section--dark .legacy-prose .legacy-important p{color:#646b78}
.legacy-page .legacy-section-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:56px}
.legacy-page .legacy-section-head .legacy-title{margin:0}
.legacy-page .legacy-events-rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(570px,82vw);gap:28px;overflow-x:auto;scroll-snap-type:x proximity;padding:0 var(--gut) 8px;scrollbar-width:thin}
.legacy-page .legacy-event{display:grid;grid-template-columns:86px 1fr;min-height:306px;background:#fff;border-radius:22px;overflow:hidden;scroll-snap-align:start}
.legacy-page .legacy-event-date{display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid #d9d9d9;color:var(--blue-700)}
.legacy-page .legacy-event-date span{font-size:12px;text-transform:uppercase;color:#747b87}
.legacy-page .legacy-event-date b{font-family:var(--disp);font-size:36px;font-weight:400}
.legacy-page .legacy-event-body{align-self:center;padding:30px 26px}
.legacy-page .legacy-event-body time{font-size:16px;color:#737a86}
.legacy-page .legacy-event-body h3{margin:8px 0 14px;font-family:var(--disp);font-size:24px;line-height:1.22;color:var(--blue-700);text-transform:uppercase}
.legacy-page .legacy-event-body p{margin:0;color:#737a86;font-size:17px;line-height:1.45}
.legacy-page .legacy-join-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.legacy-page .legacy-join-copy>.legacy-title{font-size:32px;margin:0 0 48px}
.legacy-page .legacy-benefit{margin-bottom:1.55em!important}
.legacy-page .legacy-join-card{position:sticky;top:24px;padding:40px;border-radius:12px;background:#f5f5f5}
.legacy-page .legacy-join-card .legacy-subtitle{margin-bottom:28px}
.legacy-page .legacy-join-card input{display:block;width:100%;height:54px;margin:0 0 22px;padding:0 18px;border:0;border-radius:30px;background:#fff;color:#303746;font:400 16px/1 var(--body);outline:2px solid transparent;outline-offset:1px}
.legacy-page .legacy-join-card input:focus{outline-color:var(--blue-700)}
.legacy-page .legacy-join-submit{display:flex;justify-content:flex-end;margin-top:4px}
.legacy-page .legacy-join-submit button{display:inline-flex;align-items:center;gap:12px;border:0;border-radius:30px;background:#4056a5;color:#fff;padding:14px 24px;font:500 16px/1.2 var(--body);cursor:pointer}
.legacy-page .legacy-topic-section{padding:100px 0;background:#fff}
.legacy-page .legacy-topic-article{max-width:960px;margin:0 auto}
.legacy-page .legacy-topic-title{margin:0 0 48px;font-family:var(--disp);font-size:42px;font-weight:400;line-height:1;text-transform:uppercase;color:var(--blue-700)}
.legacy-page .legacy-topic-image{margin:0 0 48px;aspect-ratio:960/447;border-radius:14px;overflow:hidden}
.legacy-page .legacy-topic-image img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
.legacy-page .legacy-topic-prose{font-size:18px;line-height:1.5;color:#747983}
.legacy-page .legacy-topic-prose p{margin:0 0 1.18em;color:#747983;font-size:18px;line-height:1.5}
.legacy-page .legacy-topic-prose p>strong:first-child{font-weight:700;color:#606670}
.legacy-page .legacy-topic-prose p>strong:first-child:not(:last-child){display:block;margin-bottom:20px}
.legacy-page .legacy-topic-prose a{color:#1f39d5;font-weight:500;text-decoration:none}
.legacy-page .legacy-topic-prose a:hover{text-decoration:underline}
.legacy-page .legacy-topic-materials{margin:60px 0 24px;font-family:var(--disp);font-size:28px;font-weight:600;line-height:1.2;text-transform:uppercase;color:#6a6d73}
.legacy-page .legacy-topic-quote{margin:54px 0 0;padding:0;border:0;color:#777b83;font-size:18px;font-style:italic;line-height:1.5}
.legacy-page .legacy-related{max-width:var(--max);margin:60px auto 0;padding:0 var(--gut);text-align:center}
.legacy-page .legacy-related h2{margin:0 0 22px;font-family:var(--disp);font-size:22px;font-weight:400;line-height:1.2;text-transform:uppercase;color:#5d6471}
.legacy-page .legacy-related-links{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.legacy-page .legacy-related-links a{display:inline-flex;align-items:center;gap:12px;min-height:46px;padding:11px 22px;border-radius:28px;background:#4056a5;color:#fff;font-size:16px;text-decoration:none;white-space:nowrap}
.legacy-page .legacy-related-links a:hover{background:#2f437f}
.legacy-page .legacy-activity-section{padding:60px 0;background:#fff}
.legacy-page .legacy-activity-title{margin:0 0 26px;font-family:var(--disp);font-size:42px;font-weight:400;line-height:1.2;text-transform:uppercase;color:var(--blue-700)}
.legacy-page .legacy-activity-subtitle{margin:0 0 28px;font-family:var(--disp);font-size:28px;font-weight:400;line-height:1.25;color:#818181}
.legacy-page .legacy-activity-prose p{margin:0 0 1.2em;color:#747983;font-size:18px;line-height:1.5}
.legacy-page .legacy-activity-prose strong{font-weight:700;color:inherit}
.legacy-page .legacy-activity-prose em{font-style:italic}
.legacy-page .legacy-activity-prose a{color:#1f39d5;text-decoration:none}
.legacy-page .legacy-activity-prose a:hover{text-decoration:underline}
.legacy-page .legacy-activity-prose ul,.legacy-page .legacy-activity-prose ol{margin:0 0 1.25em;padding-left:1.25em;color:#747983;font-size:18px;line-height:1.5}
.legacy-page .legacy-activity-image img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
.legacy-page .legacy-course-image{aspect-ratio:608/406}
.legacy-page .legacy-practices-image{aspect-ratio:636/425}
.legacy-page .legacy-lives-image{aspect-ratio:636/546}
.legacy-page .legacy-donate-grid{display:grid;grid-template-columns:306px minmax(0,1fr);gap:24px;align-items:start}
.legacy-page .legacy-donate-menu{padding:24px;border-radius:10px;background:#f5f5f5}
.legacy-page .legacy-donate-menu h2{margin:0 0 24px;font-family:var(--disp);font-size:24px;line-height:1.2;text-transform:uppercase;color:var(--blue-700)}
.legacy-page .legacy-donate-menu a,.legacy-page .legacy-donate-menu button{display:flex;width:100%;min-height:47px;align-items:center;justify-content:space-between;margin:0 0 16px;padding:11px 24px;border:0;border-radius:28px;background:var(--blue-700);color:#fff;font:400 16px/1.2 var(--body);text-align:left;text-decoration:none;cursor:pointer}
.legacy-page .legacy-donate-menu a.active{background:#69758d}
.legacy-page .legacy-donate-menu a:last-child,.legacy-page .legacy-donate-menu button:last-child{margin-bottom:0}
.legacy-page .legacy-donate-content h1{font-family:var(--disp);font-size:40px;font-weight:400;line-height:1.2;text-transform:uppercase;color:var(--blue-700);margin:0 0 24px}
.legacy-page .legacy-donate-content h2{font-family:var(--disp);font-size:36px;font-weight:400;line-height:1.2;text-transform:uppercase;color:var(--blue-700);margin:28px 0 24px}
.legacy-page .legacy-donor-card{margin-top:24px;padding:24px;border-radius:12px;background:#f5f5f5}
.legacy-page .legacy-donor-card h2{margin:0 0 24px;padding-bottom:20px;border-bottom:1px solid #d9d9d9;font-size:24px}
.legacy-page .legacy-donor-card input[type="text"],.legacy-page .legacy-donor-card input[type="email"],.legacy-page .legacy-donor-card textarea,
.legacy-page .legacy-unsubscribe-dialog input[type="email"],.legacy-page .legacy-unsubscribe-dialog textarea{display:block;width:100%;height:54px;margin:0 0 20px;padding:0 18px;border:0;border-radius:28px;background:#fff;color:#303746;font:400 16px/1 var(--body);outline:2px solid transparent;outline-offset:1px}
.legacy-page .legacy-donor-card textarea,.legacy-page .legacy-unsubscribe-dialog textarea{height:110px;padding-top:16px;resize:vertical}
.legacy-page .legacy-donor-card input:focus,.legacy-page .legacy-donor-card textarea:focus,.legacy-page .legacy-unsubscribe-dialog input:focus,.legacy-page .legacy-unsubscribe-dialog textarea:focus{outline-color:var(--blue-700)}
.legacy-page .legacy-donor-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.legacy-page .legacy-check{display:flex;align-items:flex-start;gap:12px;margin:4px 0 22px;color:#747983;font-size:15px;line-height:1.45}
.legacy-page .legacy-check input{margin-top:4px;accent-color:var(--blue-700)}
.legacy-page .legacy-check a{color:var(--blue-700);font-weight:600}
.legacy-page .legacy-form-submit{display:flex;justify-content:flex-end}
.legacy-page .legacy-form-submit button{display:inline-flex;align-items:center;gap:12px;border:0;border-radius:28px;background:#4056a5;color:#fff;padding:14px 24px;font:500 16px/1.2 var(--body);cursor:pointer}
.legacy-page .legacy-unsubscribe-dialog{width:min(620px,calc(100vw - 32px));padding:30px;border:0;border-radius:14px;background:#f5f5f5;color:#303746;box-shadow:0 22px 60px rgba(12,23,45,.3)}
.legacy-page .legacy-unsubscribe-dialog::backdrop{background:rgba(12,23,45,.62)}
.legacy-page .legacy-unsubscribe-dialog h2{margin:0 0 22px;font-family:var(--disp);font-size:26px;color:var(--blue-700);text-transform:uppercase}
.legacy-page .legacy-dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:22px}
.legacy-page .legacy-dialog-actions button{border:0;border-radius:24px;padding:12px 20px;font:500 15px/1 var(--body);cursor:pointer}
.legacy-page .legacy-dialog-actions .cancel{background:#e2e5ea;color:#303746}
.legacy-page .legacy-dialog-actions .confirm{background:#4056a5;color:#fff}
.legacy-page.legacy-contact-page .breadcrumbs{padding:56px 0 22px}
.legacy-page .legacy-contact-section{padding:60px 0;background:#fff}
/* `stretch`, e não `start`: os dois cartões (Nossos contatos e Redes sociais)
   com a mesma altura, a do mais alto (pedido do dono em 24/10/2026). */
.legacy-page .legacy-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.legacy-page .legacy-contact-card{padding:40px;border-radius:12px;background:#f5f5f5}
.legacy-page .legacy-contact-card h1,.legacy-page .legacy-contact-card h2{margin:0 0 22px;padding-bottom:22px;border-bottom:1px solid #d8d8d8;font-family:var(--disp);font-size:32px;font-weight:400;line-height:1.15;text-transform:uppercase;color:var(--blue-700)}
.legacy-page .legacy-contact-items{display:grid;gap:17px}
.legacy-page .legacy-contact-item{display:flex;align-items:center;gap:16px;color:#737983;font-size:17px;line-height:1.35;text-decoration:none}
.legacy-page .legacy-contact-item:hover{color:var(--blue-700)}
.legacy-page .legacy-contact-item img{width:18px;height:19px;flex:0 0 18px;object-fit:contain}
.legacy-page .legacy-contact-socials{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.legacy-page .legacy-contact-socials>a:not(.legacy-contact-mural){display:grid;width:26px;height:30px;place-items:center}
.legacy-page .legacy-contact-socials>a:not(.legacy-contact-mural) img{display:block;width:26px;height:26px;object-fit:contain}
.legacy-page .legacy-contact-mural{display:inline-flex;align-items:center;gap:10px;min-height:54px;margin-left:auto;padding:13px 24px;border-radius:30px;background:#4056a5;color:#fff;font-size:17px;text-decoration:none;white-space:nowrap}
.legacy-page .legacy-contact-mural img{width:24px;height:24px;object-fit:contain;filter:brightness(0) invert(1)}
.legacy-page .legacy-contact-map{height:500px;margin-top:48px;border-radius:12px;overflow:hidden;background:#e9ebef}
.legacy-page .legacy-contact-map iframe{display:block;width:100%;height:100%;border:0}
/* A capa editorial é full-bleed e encosta na barra de navegação — como em todas
   as outras páginas do site. O padding de topo aqui vinha de quando a agenda
   NÃO tinha capa, e sobreviveu à chegada dela: virava uma faixa branca de 68px
   entre a nav azul e a capa escura. O respiro passa para o miolo, que é quem
   precisava dele. (Regra anterior a 19/08 — não é regressão da migração.) */
.legacy-page.legacy-agenda-page{padding:0 0 92px;background:#fff}
.legacy-page.legacy-agenda-page > .wrap{padding-top:68px}
.legacy-page .legacy-agenda-toolbar{display:grid;grid-template-columns:minmax(260px,1fr) auto auto;gap:24px;align-items:center;padding:8px 20px 8px 16px;border:1px solid #dedfe3;background:#fff}
.legacy-page .legacy-agenda-searchbox{display:flex;align-items:center;gap:10px;min-width:0;color:#6d7480}
.legacy-page .legacy-agenda-searchbox svg{width:21px;height:21px;flex:0 0 auto}
.legacy-page .legacy-agenda-searchbox input{width:100%;height:46px;border:0;background:transparent;color:#303746;font:400 16px/1.2 var(--body);outline:0}
.legacy-page .legacy-agenda-submit{min-height:48px;padding:12px 25px;border:0;border-radius:28px;background:#293247;color:#fff;font:500 17px/1.2 var(--body);cursor:pointer}
.legacy-page .legacy-agenda-views{display:flex;align-items:stretch;gap:2px;height:54px}
.legacy-page .legacy-agenda-view{position:relative;padding:0 14px;border:0;background:transparent;color:#4d535f;font:600 14px/1 var(--body);cursor:pointer}
.legacy-page .legacy-agenda-view.active::after{content:"";position:absolute;right:10px;bottom:-8px;left:10px;height:2px;background:#293247}
.legacy-page .legacy-agenda-nav{display:flex;align-items:center;gap:14px;margin:30px 0 28px}
.legacy-page .legacy-agenda-arrow{display:grid;width:28px;height:38px;place-items:center;border:0;background:transparent;color:#252b37;font-size:36px;font-weight:300;line-height:1;cursor:pointer}
.legacy-page .legacy-agenda-today{height:38px;padding:0 17px;border:1px solid #d9dbe0;border-radius:4px;background:#fff;color:#555c68;font:500 14px/1 var(--body);cursor:pointer}
.legacy-page .legacy-agenda-picker{position:relative;display:inline-flex;align-items:center;gap:8px;margin-left:2px;color:#202633;font-size:26px;font-weight:400;cursor:pointer}
.legacy-page .legacy-agenda-picker input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.legacy-page .legacy-agenda-picker::after{content:"⌄";font-size:19px;transform:translateY(-2px)}
.legacy-page .legacy-agenda-calendar-scroll{overflow-x:auto;padding-bottom:4px}
.legacy-page .legacy-agenda-calendar{min-width:980px;border:1px solid #e1e2e5;border-right:0;border-bottom:0}
.legacy-page .legacy-agenda-weekdays,.legacy-page .legacy-agenda-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.legacy-page .legacy-agenda-weekdays{border:0;background:#fff}
.legacy-page .legacy-agenda-weekdays span{padding:0 0 20px;border-right:1px solid transparent;color:#737985;font-size:13px;font-weight:600;text-transform:uppercase}
.legacy-page .legacy-agenda-day{min-height:166px;padding:14px 8px;border-right:1px solid #e1e2e5;border-bottom:1px solid #e1e2e5;background:#fff}
.legacy-page .legacy-agenda-day.outside{background:#fbfbfc;color:#6f7580}
.legacy-page .legacy-agenda-day.today{box-shadow:inset 0 0 0 2px #4056a5}
.legacy-page .legacy-agenda-day-number{display:block;margin:0 0 10px 7px;color:#303642;font-size:25px;font-weight:600;line-height:1;text-decoration:none}
.legacy-page .legacy-agenda-day.outside .legacy-agenda-day-number{color:#555b66}
/* ── Alvos de toque no celular ──────────────────────────────────────────────
   Medido em 02/09/2026 no iPhone 13: 62 dos 95 links e botões da agenda
   ficavam abaixo de 32×32 px, e 42 deles eram estes números de dia — o alvo
   principal da tela. A recomendação do Google é 48×48 (ou 24 com folga em
   volta).

   `inline-flex` + `min-*` em vez de `padding`: o número continua ancorado no
   canto superior esquerdo da célula (o `margin` original faz esse trabalho) e a
   área clicável cresce em volta dele, sem empurrar o conteúdo do dia.
   Só no celular — no desktop o cursor não precisa disso e a grade é apertada. */
@media(max-width:760px){
  .legacy-page .legacy-agenda-day-number{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:0 0 4px 0}
  .legacy-page .legacy-agenda-arrow{width:44px;height:44px}
  .legacy-page .legacy-agenda-event-button{min-height:36px}
}
.legacy-page .legacy-agenda-event-button{position:relative;display:block;width:100%;margin:0 0 9px;padding:0 2px 0 10px;border:0;border-left:3px solid #556de3;background:transparent;color:#303746;text-align:left;cursor:pointer}
.legacy-page .legacy-agenda-event-button time{display:block;margin-bottom:2px;color:#7a808a;font-size:11px;line-height:1.25}
.legacy-page .legacy-agenda-event-button span{display:block;font-size:12px;font-weight:500;line-height:1.25}
/* ── Eventos restritos a membros ───────────────────────────────────────────
   `members_only` no banco: encontros da área de membros, práticas de Projeção
   Astral e Clarividência e afins. Eles já apareciam no calendário público (data
   e título, sem descrição), mas só se identificavam como restritos ao abrir o
   diálogo.

   O sépia da marca (--sepia/#B08046) no lugar do azul #556de3 dos eventos
   abertos: as duas cores já existem no sistema, e a diferença é de MATIZ, não
   de intensidade — quem não distingue bem as duas ainda lê o rótulo do
   diálogo. Na visão de mês o fio à esquerda muda de cor; na de lista, o fio
   ganha 3px na borda esquerda do card e o fundo recebe o creme mais claro. */
/* Legenda das duas cores, acima da navegação de mês. Discreta de propósito:
   é uma chave de leitura, não um controle — não filtra nada. */
/* Link do encontro no diálogo do evento: é a AÇÃO da janela, então vem como
   botão cheio, abaixo do texto. Só aparece quando o evento tem link.
   ⚠️ Cores LITERAIS. A primeira versão usava `var(--tt)`, que só existe dentro
   de `.tema` — na agenda a variável não resolve, o fundo fica transparente e o
   `color:#fff` deixa texto branco sobre o diálogo claro: o botão existia,
   media 44px, e era invisível. Mesmo defeito da mensagem de envio. */
.legacy-agenda-dialog-link{display:inline-flex;align-items:center;margin-top:24px;
  height:46px;padding:0 24px;border-radius:999px;background:#157A70;color:#fff;
  font:600 13.5px/1 var(--body);text-decoration:none;transition:background .2s ease}
.legacy-agenda-dialog-link:hover{background:#0F635A;color:#fff}
.legacy-agenda-dialog-link:focus-visible{outline:2px solid #157A70;outline-offset:3px}

.legacy-page .legacy-agenda-legenda{display:flex;flex-wrap:wrap;gap:22px;margin:18px 0 0;
  font:400 13.5px/1.4 var(--body);color:#737985}
.legacy-page .legacy-agenda-legenda span{display:inline-flex;align-items:center;gap:9px}
.legacy-page .legacy-agenda-ponto{width:10px;height:10px;flex:none;border-radius:50%;background:#556de3}
.legacy-page .legacy-agenda-ponto.is-membros{background:#B08046}
.legacy-page .legacy-agenda-event-button.is-membros{border-left-color:#B08046}
.legacy-page .legacy-agenda-event-button.is-membros time{color:#96754a}
.legacy-page .legacy-agenda-list-item.is-membros{
  border-left:3px solid #B08046;background:#FBF8F2;
}
.legacy-page .legacy-agenda-list-item.is-membros strong{color:#8A5F2B}
.legacy-page .legacy-agenda-empty{padding:48px;border:1px solid #e1e2e5;color:#737985;text-align:center}
.legacy-page .legacy-agenda-list{display:grid;gap:14px}
.legacy-page .legacy-agenda-list-item{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:22px;border:1px solid #e1e2e5;background:#fff;text-align:left;cursor:pointer}
.legacy-page .legacy-agenda-list-item time{color:#5f6672;font-size:14px;line-height:1.4}
.legacy-page .legacy-agenda-list-item strong{display:block;margin-bottom:5px;color:var(--blue-700);font:500 20px/1.25 var(--disp);text-transform:uppercase}
.legacy-page .legacy-agenda-list-item span{color:#737985;font-size:15px}
.legacy-page .legacy-agenda-dialog{width:min(620px,calc(100vw - 32px));padding:32px;border:0;border-radius:12px;background:#fff;color:#303746;box-shadow:0 24px 70px rgba(19,29,48,.3)}
.legacy-page .legacy-agenda-dialog::backdrop{background:rgba(17,27,46,.62)}
.legacy-page .legacy-agenda-dialog-close{position:absolute;top:15px;right:17px;width:34px;height:34px;border:0;border-radius:50%;background:#edf0f5;color:#303746;font-size:24px;cursor:pointer}
.legacy-page .legacy-agenda-dialog h2{margin:8px 38px 15px 0;font-family:var(--disp);font-size:28px;font-weight:500;line-height:1.2;text-transform:uppercase;color:var(--blue-700)}
.legacy-page .legacy-agenda-dialog p{margin:8px 0;color:#68707d;font-size:16px;line-height:1.5}
@media(max-width:820px){
  .legacy-page .legacy-grid,.legacy-page .legacy-join-grid{grid-template-columns:1fr;gap:36px}
  .legacy-page .legacy-section,.legacy-page .legacy-section--events{padding:48px 0}
  .legacy-page .legacy-join-card{position:static;padding:28px 22px}
  .legacy-page .legacy-section-head{align-items:flex-start;flex-direction:column;margin-bottom:34px}
  .legacy-page .legacy-events-rail{grid-auto-columns:min(88vw,570px)}
  .legacy-page .legacy-topic-section{padding:56px 0}
  .legacy-page .legacy-topic-title{font-size:34px;margin-bottom:34px}
  .legacy-page .legacy-topic-image{margin-bottom:36px}
  .legacy-page .legacy-related{margin-top:44px}
  .legacy-page .legacy-activity-section{padding:48px 0}
  .legacy-page .legacy-activity-title{font-size:34px}
  .legacy-page .legacy-donate-grid{grid-template-columns:1fr}
  .legacy-page .legacy-donate-menu{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .legacy-page .legacy-donate-menu h2{grid-column:1/-1}
  .legacy-page .legacy-donate-menu a,.legacy-page .legacy-donate-menu button{margin:0}
  .legacy-page .legacy-donor-row{grid-template-columns:1fr;gap:0}
  .legacy-page .legacy-contact-grid{grid-template-columns:1fr}
  .legacy-page.legacy-contact-page .breadcrumbs{padding:44px 0 26px}
  .legacy-page .legacy-contact-card{padding:30px 24px}
  .legacy-page .legacy-contact-map{height:390px;margin-top:32px}
  .legacy-page.legacy-agenda-page{padding:0 0 64px}
  .legacy-page.legacy-agenda-page > .wrap{padding-top:42px}
  .legacy-page .legacy-agenda-toolbar{grid-template-columns:1fr;gap:8px;padding:14px}
  .legacy-page .legacy-agenda-submit{width:100%}
  .legacy-page .legacy-agenda-views{justify-content:center}
  .legacy-page .legacy-agenda-nav{gap:8px;margin:24px 0 20px}
  .legacy-page .legacy-agenda-picker{font-size:21px}
}
@media(max-width:520px){
  .legacy-page .legacy-donate-menu{grid-template-columns:1fr}
  .legacy-page .legacy-contact-socials{gap:18px}
  .legacy-page .legacy-contact-mural{width:100%;justify-content:center;margin:10px 0 0}
  .legacy-page .legacy-agenda-today{padding:0 10px}
  .legacy-page .legacy-agenda-picker{font-size:18px}
  .legacy-page .legacy-agenda-list-item{grid-template-columns:1fr;gap:8px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Home: UMA superfície e UM respiro
   ═══════════════════════════════════════════════════════════════════════════
   Antes, cada faixa tinha cor e altura próprias: o corpo em #FAF9F5, as faixas
   `.alt` e a de mídia em #F1EFE9, e TODAS com `min-height: 100vh − cabeçalho`,
   o que forçava cada seção a ocupar exatamente uma tela — com padding vertical
   diferente em cada uma (104px no "sobre", 30 nos temas, 45 nas avaliações e
   na agenda) para o conteúdo caber nessa altura fixa.

   Agora: fundo branco em todas, e o respiro é o mesmo do resto do site
   (`section{padding: clamp(58px,7.5vw,104px)}`), com a altura saindo do
   conteúdo — uma seção pode passar de uma tela, ou ocupar bem menos.

   Os tokens `--paper`/`--paper-2` continuam existindo: eles pintam chips,
   avatares, datas da agenda e o cabeçalho. O que muda é só o fundo das
   FAIXAS. */
/* Escopado em `html.snap` — a classe que só a HOME recebe (ver
   (site)/layout.tsx). `body{background}` e `.alt{background}` valem para o site
   inteiro, e as páginas internas usam a alternância de faixas de propósito. */
html.snap body{background:#FFFFFF}
html.snap .alt{background:#FFFFFF}
html.snap .media{background:#FFFFFF}

/* Altura pelo conteúdo, respiro igual em todas. */
html.snap .about,
html.snap .temas-full,
html.snap .reviews-sec,
html.snap .media,
html.snap .agenda-sec{
  min-height:0;
  padding-block:clamp(58px,7.5vw,104px);
}

/* Depois da ÚLTIMA seção o respiro dobra (104 → 208px nesta largura). O vão até
   o rodapé era o mesmo que separa duas seções; o fim do conteúdo pede uma pausa
   maior que a de uma virada de assunto.

   Precisa vir DEPOIS do `padding-block` das seções acima — `padding-block`
   define os dois lados, então declarado depois ele anularia este
   `padding-bottom` por ordem de cascata (foi o que aconteceu na primeira
   tentativa). */
html.snap section:last-of-type{padding-bottom:calc(2 * clamp(58px,7.5vw,104px))}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME "IMERSIVA" — handoff design_handoff_home_cec (Home B Imersiva.dc.html)
   ───────────────────────────────────────────────────────────────────────────
   Capa fotográfica de 840px com carrossel de destaques, faixa fina de próximos
   eventos no pé dela, e faixas alternadas claro (branco) / escuro (navy) até o
   rodapé. Prefixo `hb-` para não colidir com o sistema antigo da home (.hero,
   .about, .temas-full…), que segue vivo em outras páginas via .acts-grid.

   O protótipo é uma composição FIXA de 1440px com 48px de margem lateral. Aqui
   isso vira: conteúdo com max-width 1440px centralizado (.hb-in) e as faixas
   escuras sangrando de borda a borda — as duas seções que no protótipo estavam
   em 72px foram padronizadas em 48px, como o handoff pede.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Os tokens ficam no :root, não em `.hb`: o cabeçalho e o rodapé da home são
   irmãos do corpo (Shell → Cabecalho / children / Rodape), então dentro de
   `.hb` eles não enxergariam nenhuma variável — o botão "Doe e Receba Energia"
   ficava sem o fundo teal e o menu saía branco em vez de #E4EAF5. */
:root{
  --hb-navy:#12233F;      /* faixas escuras, cards de destaque */
  --hb-navy-900:#0E1B33;  /* rodapé                            */
  --hb-card:#1C2F4E;      /* card sobre navy                   */
  --hb-card-h:#22385C;
  --hb-ancora:#233658;    /* título sobre fundo claro          */
  --hb-teal:#0E7C86;
  --hb-teal-h:#0A656D;
  --hb-teal-n:#3FB6C1;    /* teal claro sobre navy             */
  --hb-verde:#137857;
  --hb-papel:#FAF9F5;
  --hb-papel-2:#F1EFE9;
  --hb-linha:#E6E3DB;
  --hb-ink:#1A2233;
  --hb-txt:#2A3346;
  --hb-mudo:#55607A;
  --hb-mudo-2:#6C7488;
  --hb-n1:#DCE4F2;        /* corpo sobre navy                  */
  --hb-n2:#A8B7D2;        /* secundário sobre navy             */
  --hb-n3:#8FA2C4;        /* terciário sobre navy              */
  --hb-menu:#E4EAF5;
  --hb-ouro:#D9A961;
  --hb-estrela:#E0A82E;
}
.hb-in{max-width:1440px;margin-inline:auto;padding-inline:48px}

/* ── capa ────────────────────────────────────────────────────────────────── */
/* `padding:0` porque a regra global `section{padding:clamp(65px,8.4vw,116px) 0}`
   também pega estas seções: sem zerar, cada faixa ganhava ~116px a mais em cima
   e embaixo do que o handoff especifica. */
/* A capa ocupa a ALTURA DA TELA (o handoff fixa 840px na composição de 1440;
   em produção ela acompanha a viewport). `dvh` para o mobile, onde a barra do
   navegador entra e sai; `vh` como reserva em quem não tem dvh. O piso evita
   que num monitor muito baixo o texto e a faixa de eventos se encavalem. */
.hb-hero{position:relative;height:100vh;height:100dvh;min-height:640px;padding:0;background:var(--hb-navy);overflow:hidden}
/* A foto começa LOGO ABAIXO do cabeçalho (21/10/2026): com a barra reta e de
   ponta a ponta, a parte que corria por trás dela ficava cortada. O cabeçalho
   continua flutuando sobre a capa (fora do fluxo); quem desce é o destaque. */
.hb-hero .hb-slide{position:absolute;inset:var(--barra-altura) 0 0;opacity:0;pointer-events:none;transition:opacity .9s ease}
.hb-hero .hb-hero-top{display:none}
.hb-hero .hb-slide.on{opacity:1;pointer-events:auto}
/* O destaque com vídeo embrulha a foto num <picture> (o computador recebe o
   quadro do vídeo, o celular a foto), então as duas formas precisam entrar
   aqui — sem isso a imagem do <picture> sai fora de posição. */
.hb-hero .hb-slide>img,.hb-hero .hb-slide>video,.hb-hero .hb-slide>a>img,.hb-hero .hb-slide>a>video,
.hb-hero .hb-slide>picture>img,.hb-hero .hb-slide>a>picture>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover
}
.hb-hero .hb-slide>a{position:absolute;inset:0;display:block}
/* Capa do destaque do Acervo: o mosaico é um mural de centenas de miniaturas e,
   nítido, vira ruído atrás do título.
   Era resolvido com `blur(9px)`; o Rafael pediu (19/09/2026) sem desfoque, e a
   contenção passa a ser ESCURECIMENTO. O brilho a 42% e a saturação a 70%
   derrubam o contraste entre as miniaturas — de longe o mural vira uma textura
   escura, e nenhum quadro salta. O `scale` saiu junto com o borrão: ele existia
   só para esconder a borda que o desfoque revelava.
   O véu de leitura (`.hb-slide::after`) continua por cima, e é ele que garante
   o contraste do título. */
/* COR ORIGINAL DESSATURADA + MÁSCARA AZULADA (pedido de 20/09).
   Terceira tentativa nesta capa, e as duas anteriores ficam registradas porque
   dizem o que NÃO resolve:

     saturate(.7) e véu quase preto  — as capas vêm de fontes e épocas
       diferentes, cada uma com a sua dominante, e o mural lia como colcha de
       retalhos;
     duotone (grayscale+sepia+hue-rotate) — matava a cor por completo, e ele
       não queria preto e branco tingido: queria as capas reconhecíveis.

   O que ficou: a cor das capas CONTINUA, só que a meio caminho
   (`saturate(.5)`), e quem faz a homogeneização é a máscara azul por cima
   (o `::after`, logo abaixo) — não o filtro. Assim cada miniatura ainda é ela
   mesma, e o conjunto tem uma família de cor só. */
/* SUBSTITUÍDO em 23/09/2026: o dono escolheu, entre as prévias, a MESMA
   RECEITA DA CAPA DO ITEM do Acervo (lib/acervo/public_knowledge/site.css,
   `.article-head::before/::after` e `.article-head-cor`). O histórico acima
   fica como registro do que já não serviu.

   Três camadas, todas com a geometria do `object-fit:cover` do atlas:
     1. o <img>: mural em CINZA, com a fresta entre as mini capas alargada
        por uma máscara em grade;
     2. `.hb-mural-cor`: o mesmo atlas SEM filtro, a .9, visível só nas
        bordas (elipse aberta no centro ∩ a mesma grade);
     3. o véu (`::after`, mais abaixo): quase preto #090C14, .82 → .88.

   A GRADE. A máscara tem de andar com o mesmo passo das células do atlas
   (célula 96×54, quadro 88×46; o SVG come mais 2 unidades de cada borda e a
   fresta passa de 8 para 12). No item isso é fácil porque o atlas ocupa 100%
   da largura. Aqui ele está em `cover`, e a escala é a MAIOR entre largura e
   altura: por isso o `.hb-mural` é um container de tamanho, e a célula sai de
   `max(100cqw / colunas, 100cqh · 96/54 / linhas)`. O deslocamento é o
   mesmo do `cover` centrado: (caixa − atlas) / 2. Colunas e linhas vêm do
   manifesto, pelo render (`--mural-cols` / `--mural-rows`). */
.hb-hero .hb-mural{position:absolute;inset:0;container-type:size;pointer-events:none}
.hb-hero .hb-mural>img,.hb-hero .hb-mural-cor{
  --mural-cw:max(100cqw / var(--mural-cols,28), 100cqh * 16 / (var(--mural-rows,24) * 9));
  --mural-ch:calc(var(--mural-cw) * 9 / 16);
  --mural-ox:calc((100cqw - var(--mural-cw) * var(--mural-cols,28)) / 2);
  --mural-oy:calc((100cqh - var(--mural-ch) * var(--mural-rows,24)) / 2);
  --mural-grade:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 54'%3E%3Crect x='6' y='6' width='84' height='42' fill='%23fff'/%3E%3C/svg%3E");
  position:absolute;inset:0;width:100%;height:100%
}
.hb-hero .hb-mural>img{
  object-fit:cover;filter:grayscale(1);
  -webkit-mask-image:var(--mural-grade);mask-image:var(--mural-grade);
  -webkit-mask-size:var(--mural-cw) var(--mural-ch);mask-size:var(--mural-cw) var(--mural-ch);
  -webkit-mask-position:var(--mural-ox) var(--mural-oy);mask-position:var(--mural-ox) var(--mural-oy);
  -webkit-mask-repeat:repeat;mask-repeat:repeat
}
.hb-hero .hb-mural-cor{
  opacity:.9;background:var(--mural) center/cover no-repeat;
  -webkit-mask-image:radial-gradient(ellipse 55% 75% at 50% 52%,transparent 0%,transparent 45%,rgba(0,0,0,.7) 75%,#000 100%),var(--mural-grade);
          mask-image:radial-gradient(ellipse 55% 75% at 50% 52%,transparent 0%,transparent 45%,rgba(0,0,0,.7) 75%,#000 100%),var(--mural-grade);
  -webkit-mask-size:100% 100%,var(--mural-cw) var(--mural-ch);mask-size:100% 100%,var(--mural-cw) var(--mural-ch);
  -webkit-mask-position:0 0,var(--mural-ox) var(--mural-oy);mask-position:0 0,var(--mural-ox) var(--mural-oy);
  -webkit-mask-repeat:no-repeat,repeat;mask-repeat:no-repeat,repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect
}

/* Anel de carregamento do vídeo da capa. Nasce escondido e só aparece se o
   vídeo passar de meio segundo para começar; some quando ele entra. Fica no
   canto, longe do texto e das setas. */
.hb-carregando{position:absolute;right:calc(var(--barra-recuo) + 30px);bottom:86px;z-index:5;
  width:26px;height:26px;border-radius:50%;opacity:0;pointer-events:none;
  border:2px solid rgba(255,255,255,.26);border-top-color:rgba(255,255,255,.92);
  transition:opacity .35s ease}
.hb-hero.carregando .hb-carregando{opacity:1;animation:hbGira .9s linear infinite}
@keyframes hbGira{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hb-hero.carregando .hb-carregando{animation:none}}

/* Vídeo de fundo do destaque: fica POR CIMA da foto e só ganha `src` no
   computador (ver o carrossel em jsDoSite). Nasce invisível e aparece quando o
   navegador avisa que já pode tocar — assim não há salto entre foto e vídeo, e
   quem não recebe o vídeo (celular, reduced-motion, JS desligado) fica com a
   foto, que é o mesmo enquadramento. */
.hb-hero .hb-slide>.hb-video{opacity:0;transition:opacity .8s ease}
.hb-hero .hb-slide>.hb-video.on{opacity:1}
/* Véu sobre a foto + véu do topo, que é o que dá legibilidade ao cabeçalho
   translúcido apoiado na capa. O véu da foto é POR DESTAQUE (data-ov): o
   padrão é o do handoff, e a Central pode trocá-lo em Site institucional ›
   Destaques, como já fazia. */
/* Véu de leitura dos destaques. Aliviado um passo em 19/09/2026 a pedido do
   Rafael: o canto esquerdo estava quase opaco e comia a foto no lado do texto.
   De .95/.82/.44 para .86/.74/.40 — a foto aparece mais e o título continua
   bem acima do mínimo de contraste (medido depois da troca). */
/* SEM A MÁSCARA AZUL nas capas com foto (21/10/2026, pedido do dono). Os três
   véus azul-marinho (o degradê padrão, o "veil" e o "bottom") saíram; a camada
   continua existindo, vazia, para o mosaico do Acervo, que tem véu próprio
   logo abaixo. A opção "Sobreposição" do destaque no admin deixa de ter efeito
   nas fotos.
   No lugar, um escurecimento NEUTRO e uniforme (preto, sem azul), só para
   escurecer um pouco as fotos (21/10/2026, pedido do dono): 35% e, depois,
   "só um pouquinho mais escuro", 42%; em 22/10/2026, "um pouco mais", 50%. */
/* 22/10/2026 (opção B, escolhida pelo dono em capa-texto/, no testagent): o
   texto foi para o pé da foto, e o escurecimento deixa de ser uniforme — preto,
   mais forte embaixo, onde está o texto, e leve em cima. */
.hb-hero .hb-slide::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.62) 32%,rgba(0,0,0,.34) 64%,rgba(0,0,0,.26) 100%)}
@media(max-width:680px){
  .hb-hero .hb-slide::after{background:linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.52) 45%,rgba(0,0,0,.30) 100%)}
}
/* VÉU UNIFORME só neste slide. O véu comum dos destaques é um degradê diagonal
   que vai de 95% de opacidade na esquerda a 44% na direita — desenhado para uma
   FOTO, onde ele escurece o lado do texto e deixa a imagem respirar do outro.
   No mosaico isso virava uma mancha preta no canto esquerdo, com o mural
   aparecendo só de um lado. Aqui a cobertura é a mesma em toda a área: o mural
   é textura, e textura não tem assunto para preservar de um lado só. */
/* A máscara AZULADA. Era `rgba(9,16,30,.5)`, um quase-preto que só escurecia;
   este azul escurece o mesmo tanto e ainda puxa as capas para a mesma família
   de cor. É esta camada, e não o filtro da imagem, que dá a homogeneidade.

   `#223046`: a dose foi calibrada em duas rodadas contra o atlas real. A
   primeira (`#142C54`) ficou azul demais para ele; esta tem 45% menos
   saturação COM A MESMA LUMINOSIDADE — o que muda é só o quanto de azul, não
   o quanto escurece. Mexer no alpha em vez da saturação clarearia a peça
   junto, que é outro assunto e já foi decidido. */
/* Véu da receita da capa do item (23/09): o mesmo #090C14 de .82 a .88,
   de cima para baixo. Substitui a máscara azulada #223046 a .56 — o mural
   agora é cinza e não precisa mais da máscara para ter uma família de cor. */
/* `[data-ov]` no seletor é de propósito: a "Sobreposição" escolhida por
   destaque no admin (`[data-ov="veil"]`, 0,3,1) vencia esta regra (0,2,1) e
   trocava o véu da receita por um mais claro — com o <img> sem `brightness`,
   o mural ficava ~3x mais claro atrás do título (revisão de 23/09). No mural a
   escolha do admin não se aplica: o véu faz parte da receita. */
.hb-hero .hb-slide.hb-slide--mosaico[data-ov]::after{background:linear-gradient(180deg,rgba(9,12,20,.82) 0%,rgba(9,12,20,.88) 100%)}
.hb-hero .hb-slide-link{position:absolute;inset:0;display:block;z-index:1}
/* Véu de leitura da barra translúcida (handoff "barra de topo 2"). Era de
   240px e bem mais escuro, para um cabeçalho sem fundo próprio; com as duas
   faixas ganhando superfície, ele desce para 200px e clareia. Fica acima do véu
   lateral do hero e abaixo do cabeçalho (z-index 3). Obrigatório: sem ele a
   faixa 2, que é translúcida, perde contraste na foto mais clara do carrossel. */
.hb-hero-top{position:absolute;left:0;right:0;top:0;height:200px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,13,26,.31) 0%,rgba(7,13,26,.11) 60%,rgba(7,13,26,0) 100%)}

/* `top`/`bottom` são exatamente a altura do cabeçalho (124px) e a da faixa de
   eventos (72px + 3px da barra de progresso): é isso que centraliza o bloco no
   vão entre as duas faixas. Mudou a altura de uma delas, muda aqui. */
/* 127px = faixa 1 (42 declarados + 1 da borda) + faixa 2 (16 + 52 do CTA + 16).
   O offset segue a altura MEDIDA do cabeçalho, não a soma declarada no README:
   é a regra que o próprio handoff estabelece para o bloco de texto. */
/* 21/10/2026: o destaque agora já começa abaixo do cabeçalho (`top:0`), e o
   pé reserva 110px para as setas e os pontos (`.hb-ctl`). */
/* Opção B (22/10/2026): o bloco desce para o pé da foto, a 124px da borda de
   baixo (acima das setas e dos pontos). */
.hb-hero-txt{position:absolute;left:0;right:0;top:0;bottom:124px;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none}
/* `.hb-in` é item de um flex column: `margin-inline:auto` sozinho o encolhe
   para o conteúdo e o CENTRALIZA — o título saía a 294px da borda em vez dos
   48px do handoff. `width:100%` devolve a largura da faixa. */
/* A capa usa a MESMA coluna do resto da home (`.hb-in`: 1440px centralizados,
   48px por dentro). O handoff pedia página fluida com gutter
   clamp(24px,3.6vw,120px) e o topo limitado a 1680 — mas aí, acima de 1680px, a
   página ganhava três bordas esquerdas diferentes (medido em 1920: título 69px,
   logo 120px, seções de baixo 288px). Uma coluna só. */
.hb-hero-txt .hb-in{width:100%}
.hb-hero-txt .hb-col{max-width:none}
/* Destaque centralizado — opção por slide na Central; o handoff usa o
   alinhamento à esquerda em todos. */
.hb-hero-txt.is-center .hb-col{max-width:900px;margin-inline:auto;text-align:center}
.hb-hero-txt.is-center .hb-lede{margin-inline:auto}
.hb-hero-txt.is-center .hb-hero-btns{justify-content:center}
.hb-hero-txt.is-center .hb-badge{align-self:center}
/* Opção B (22/10/2026): título 60px (era 68) em cor de papel; chamada 18px com
   a mesma largura máxima em todas as capas, para cair sempre em duas linhas. */
.hb-hero-txt .hb-titulo{margin:0;max-width:20ch;font:400 60px/1.1 var(--disp);font-weight:400;letter-spacing:.005em;color:#F4EFE6;text-wrap:balance}
.hb-hero-txt .hb-lede{margin:20px 0 0;max-width:450px;font:400 18px/1.6 var(--body);color:rgba(244,239,230,.88);text-wrap:balance}
.hb-hero-txt .hb-badge{display:inline-block;align-self:flex-start;margin:0 0 18px;padding:7px 16px;border-radius:3px;
  background:var(--hb-verde);font:700 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#fff}
.hb-hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;pointer-events:auto}
.hb-btn{display:inline-flex;align-items:center;gap:9px;height:52px;padding:0 30px;box-sizing:border-box;border-radius:2px;
  font:700 12.5px/1 var(--body);letter-spacing:.13em;text-transform:uppercase;
  transition:background .2s ease,border-color .2s ease,color .2s ease}
.hb-btn--paper{background:var(--hb-papel);color:var(--hb-navy)}
.hb-btn--paper:hover{background:#fff}
.hb-btn--ghost{border:1px solid rgba(255,255,255,.55);color:#fff}
.hb-btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.hb-btn .hb-btn-ico{width:18px;height:18px;flex:none}

/* Uma seta em cada lado, centradas na altura da capa, com 24px de respiro da
   borda.

   A geometria não fecha sozinha: em 1440px a coluna de conteúdo começa em 48px
   — a largura de uma seta —, então não há margem externa onde encaixá-la. A
   seta precisa de faixa própria, e é o TEXTO DA CAPA que abre espaço para ela
   (só a capa; as seções de baixo seguem na coluna de 48px). Acima de 1560px a
   margem da página já é larga o bastante e o texto volta aos 48px, alinhado com
   o resto da home.

   O botão de pausa saiu; o autoplay continua, e `prefers-reduced-motion`
   continua desligando-o. */
/* 21/10/2026 (escolha do dono em agenda-ref/, no testagent): setas finas e
   pontos juntos no pé da capa, à esquerda, na coluna do texto — no lugar dos
   quadrados no meio das laterais. Sem eles nas laterais, o texto da capa volta
   à coluna das seções (o recuo de 96px que abria espaço para as setas saiu,
   e com ele o texto espremido em 198px no celular). À direita fica o WhatsApp. */
.hb-ctl{position:absolute;z-index:4;left:calc(max(0px, (100% - 1440px) / 2) + 48px);bottom:40px;
  display:flex;align-items:center;gap:12px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.hb-seta{width:28px;height:28px;display:grid;place-items:center;padding:0;border:0;background:transparent;
  color:rgba(255,255,255,.88);cursor:pointer;transition:color .2s ease}
.hb-seta svg{width:18px;height:18px;display:block}
.hb-seta:hover{color:#fff}
.hb-seta:focus-visible,.hb-dot:focus-visible{outline:2px solid var(--hb-teal-n);outline-offset:2px}
/* Alvo de toque de 24px (WCAG 2.5.8) com margem negativa: os pontos continuam a
   16px um do outro, como no desenho aprovado. */
.hb-dots{display:flex;gap:0}
.hb-dot{width:24px;height:24px;margin-inline:-4px;display:grid;place-items:center;padding:0;border:0;background:transparent;cursor:pointer}
.hb-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);transition:background .2s ease}
.hb-dot:hover::before{background:rgba(255,255,255,.8)}
.hb-dot.on::before{background:#fff}
@media(max-width:1024px){.hb-ctl{left:clamp(20px,4vw,48px)}}
@media(max-width:680px){.hb-ctl{bottom:26px}}

/* faixa fina de próximos eventos, no pé da capa */
/* faixa de próximos eventos — "espelho do cabeçalho" (handoff 11a) ─────────
   Mesmo navy, mesma sombra (projetada para cima), mesmo fio e mesma tipografia
   utilitária da faixa de topo: a capa passa a ter cabeçalho e rodapé como um
   par. Se a superfície do cabeçalho mudar, esta muda junto — os valores são os
   mesmos, com o offset da sombra invertido e `border-top` no lugar do bottom. */
/* A faixa deixou de tapar a capa (17/09/2026): a imagem CONTINUA por trás dela
   e agora se vê. O desfoque do fundo é o que permite descer para 0.74 sem que
   os rótulos de 12px briguem com a foto — o olho lê a barra como vidro sobre a
   cena, não como um bloco apoiado nela. Onde não houver `backdrop-filter`
   (navegador antigo), o @supports devolve a faixa quase opaca: sem o desfoque,
   0.74 deixaria o texto sobre folhagem. */
/* Mesma cor da barra de topo (`.hbh-r1`), sem a transparência de antes
   (20/10/2026, pedido do dono: "deixe da mesma cor da barra de topo"). */
.hb-evbar{position:absolute;left:0;right:0;bottom:0;z-index:3;
  background:rgba(19,36,68,.98);
  box-shadow:0 -6px 16px -5px rgba(4,10,22,.53)}
/* Sem o contorno claro de 1px no topo (20/10/2026): com o fundo opaco ele lia
   como um brilho artificial acompanhando a curva dos cantos. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hb-evbar{background:rgba(19,36,68,.98)}
}
/* Variação 17a: UM encontro por vez, rodando a cada 5s. A faixa caiu para 43px — a MESMA altura da barra utilitária do topo (medida),
   para as duas faixas da capa lerem como um par, e com ela o `bottom` do bloco de texto do hero e o das barras de
   progresso (nota 6 do handoff). As setas do carrossel não entram nessa conta
   aqui: nesta implementação elas são laterais e centradas verticalmente, não
   ancoradas na base como no protótipo. */
.hb-evbar>.hb-in{display:flex;align-items:center;gap:22px;height:43px}
.hb-evbar-tag{display:flex;align-items:center;gap:11px;flex:none;
  font:600 12px/1 var(--fonte-inter),system-ui,sans-serif;
  letter-spacing:.12em;text-transform:uppercase;color:#B7C5DE}
/* O ponto pulsa para dizer que o conteúdo é vivo. Some em reduced-motion. */
.hb-evbar-ponto{width:6px;height:6px;border-radius:50%;background:#8AB0E0;flex:none;
  animation:evPulso 2.6s ease-in-out infinite}
@keyframes evPulso{0%,100%{opacity:.35}50%{opacity:1}}
/* A janela mostra 52px de uma pilha de itens de 52px; girar é transladar. */
.hb-evrot{position:relative;height:43px;overflow:hidden;flex:1;min-width:0}
.hb-evrot-pilha{display:block;transition:transform .5s ease-in-out}
.hb-evrot-item{display:flex;align-items:center;gap:13px;height:43px;min-width:0}
.hb-evrot-item b{font:600 12px/1 var(--fonte-inter),system-ui,sans-serif;letter-spacing:.1em;
  color:#8AB0E0;flex:none;transition:color .2s ease}
.hb-evrot-item span{font:500 17px/1 var(--body);color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-evrot-item i{font:400 13px/1 var(--body);font-style:normal;color:rgba(255,255,255,.5);flex:none}
.hb-evrot-item:hover b{color:#B6CDEF}
.hb-evrot-ctrl{display:flex;align-items:center;gap:2px;flex:none}
.hb-evrot-b{display:grid;place-items:center;width:30px;height:30px;padding:0;
  background:none;border:0;cursor:pointer;color:rgba(255,255,255,.6);transition:color .2s ease}
.hb-evrot-b:hover{color:#fff}
.hb-evrot-b:focus-visible{outline:2px solid var(--hb-teal-n);outline-offset:-2px}
@media(prefers-reduced-motion:reduce){
  .hb-evbar-ponto{animation:none}
  .hb-evrot-pilha{transition:none}
}
.hb-evbar-all{flex:none;margin-left:auto;font:600 12px/1 var(--fonte-inter),system-ui,sans-serif;
  letter-spacing:.12em;text-transform:uppercase;color:#EAF0FA;transition:color .2s ease}
.hb-evbar-all:hover{color:#fff}

/* ── olho de seção (eyebrow) ─────────────────────────────────────────────── */
.hb-eyebrow{display:flex;align-items:center;gap:12px;font:700 11.5px/1 var(--body);
  letter-spacing:.22em;text-transform:uppercase;color:var(--hb-teal-h)}
.hb-eyebrow::before{content:"";width:26px;height:1px;background:var(--hb-teal-h);opacity:.5}
.hb-eyebrow--center{justify-content:center;gap:14px}
.hb-eyebrow--center::after{content:"";width:28px;height:1px;background:var(--hb-teal-h);opacity:.45}
.hb-eyebrow--center::before{width:28px;opacity:.45}
.hb-eyebrow--n{color:var(--hb-teal-n);letter-spacing:.24em;justify-content:center}
.hb-eyebrow--n::before{display:none}

/* ── 1.4 Sobre o CEC ─────────────────────────────────────────────────────── */
/* Estas duas seções ficavam MENORES que as vizinhas: medido a 1440x900, a de
   avaliações dava 854px contra 1057-1129px das outras, e o "Sobre" ficava
   raspando os 926px. Piso de uma tela e conteúdo centrado no vão, para o
   fundo ocupar a altura inteira sem esticar o texto. */
/* Respiro maior em cima e embaixo (108 → 150px, pedido de 18/09/2026): a seção
   fica mais afastada da capa e da faixa de temas. */
/* RESPIRO ENTRE AS SEÇÕES DA HOME (22/09/2026, pedido do dono: "aumentar um
   pouco o espaço antes e depois"). Desktop apenas — as regras de celular
   (@media max-width:860px, mais abaixo) ficaram como estavam.
     sobre o CEC ........ 150 → 180px   (+20%, "um pouco")
     temas .............. 124 → 150px   (+20%)
     participe .......... 104 → 152px   (+46%, "precisa aumentar mais: está pequenininha")
     avaliações ......... 100 → 124px   (+24%)
     últimos conteúdos .. topo 96 → 124px; o pé NÃO mudou — ele já vem dobrado
                          por `html.snap section:last-of-type` (192px). */
.hb-sobre{background:#fff;padding-block:220px;min-height:100vh;min-height:100dvh;
  display:flex;align-items:center}
.hb-sobre>.hb-in{width:100%}
.hb-sobre .hb-grid{display:grid;grid-template-columns:1fr 620px;gap:88px;align-items:start}
.hb-sobre h2{margin:24px 0 0;font:400 42px/1.14 var(--disp);letter-spacing:.02em;text-transform:uppercase;
  color:var(--hb-ancora);white-space:nowrap}
/* 17,5 → 18px (pedido de 18/09/2026): a coluna de texto fecha 707px contra os
   710px das quatro fotos ao lado — as duas colunas terminam juntas. Medido: em
   18,5px a esquerda passa a direita em 7px. */
.hb-sobre p{margin:32px 0 0;max-width:58ch;font:400 18px/1.85 var(--body);color:var(--hb-txt)}
.hb-sobre p + p{margin-top:22px}
/* As três colunas alinham pelo TOPO com uma calha fixa de 24px para o ícone.
   A calha continua fixa mesmo agora que os três são <img> do mesmo tamanho:
   ela é o que garante que número e texto casem nas três colunas se um dia um
   ícone voltar a ter caixa de linha diferente (já aconteceu — o pino desenhado
   em CSS empurrava a coluna do meio 9px para baixo). */
/* Rodapé da coluna de texto do "Sobre" — handoff `design_handoff_numeros 2`,
   variação 14d. Dois números com rótulo em versalete e, na terceira célula, um
   cartão navy que leva a "Quem somos".

   `align-items:stretch` é OBRIGATÓRIO (nota 3 do handoff): é ele que faz o
   cartão ter a altura das colunas de número. Sem ele o cartão encolhe para o
   próprio conteúdo e o alinhamento da fileira se perde.

   A terceira coluna é fixa em 176px porque é a largura em que a quebra manual
   do título do cartão foi desenhada.

   DIVERGÊNCIA DELIBERADA DO HANDOFF: a spec pede o cartão SEM raio de canto,
   argumentando que o bloco "1998" da coluna direita — de quem ele empresta o
   navy — também não tem. O Rafael pediu, em 30/08/2026, que ele acompanhasse o
   arredondamento das quatro fotos do mosaico ao lado (10px, `.hb-foto-*`). Foi
   escolha dele, com a spec na mão. Não "corrigir" de volta.

   O botão `.hb-linkbtn` ("Saiba Mais", borda de 1px) foi removido junto: não
   pertencia nem ao bloco de números nem ao texto, e o cartão assume a função
   com alvo de clique de 176px por toda a altura da fileira. */
.hb-fatos{display:grid;grid-template-columns:1fr 1fr 176px;gap:28px;align-items:stretch;
  margin-top:46px;padding-top:34px;border-top:1px solid var(--hb-linha)}
.hb-fato-rot{display:block;font:700 11px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:#274A90}
/* Karla 600, não Cinzel. Cinzel é a fonte do <h2> de 42px logo acima; número em
   Cinzel vira um segundo título disputando com o título de verdade. O
   `letter-spacing` negativo devolve o peso que a troca de fonte tira. */
.hb-fatos b{display:block;margin-top:14px;font:600 34px/1 var(--body);letter-spacing:-.015em;color:var(--hb-ancora)}
/* #5A6274, e não o `--hb-mudo-2` (#6C7488) da folha: a spec pede este valor, um
   pouco mais escuro, e num texto de 14px a diferença se nota. */
.hb-fato-leg{display:block;margin-top:10px;font:400 14px/1.55 var(--body);color:#5A6274}
.hb-fato-cartao{display:flex;flex-direction:column;justify-content:space-between;
  padding:22px 22px 20px;border-radius:10px;background:var(--hb-navy);color:#fff;transition:background .2s ease}
.hb-fato-cartao:hover{background:#1A2C4E}
.hb-fato-cartao>span{font:500 17px/1.35 var(--body)}
/* `justify-content:space-between` empurra a seta para a base; o `margin-top` é
   o piso para quando o título ocupar só uma linha. */
.hb-fato-cartao>svg{margin-top:20px;flex:none}
/* O QUADRO MANDA NA FOTO, nunca o contrário: a imagem se ajusta ao quadro com
   `object-fit:cover`, e o que fica visível no corte se escolhe com
   `object-position`. Assim o desenho da seção não depende do arquivo que
   estiver ali.

   O que mudou em relação ao handoff de três fotos: as proporções agora são
   RELATIVAS, não alturas fixas em px. Só assim a regra "os dois quadrados da
   direita somam a altura do retrato da esquerda" continua valendo quando a
   coluna encolhe (620px acima de 1180px, 46% da grade abaixo disso).

   As duas fotos da direita são RETANGULARES (4:3), não quadradas. É isso que
   destrava o desenho: enquanto elas eram quadradas, a altura delas ficava refém
   da largura da coluna, e afinar o retrato só servia para engordá-las e esticar
   a linha inteira. Com a proporção solta, largura e altura do retrato voltam a
   ser escolhas independentes.

   A conta, na coluna de 620px:  1fr + 20 + 1fr = 620  →  1fr = 300
     · paisagem   620 x 270  (2,3:1)
     · retrato    300 x 420  (0,71:1)
     · direita    300 x 200 cada (3:2); empilhadas: 200 + 20 + 200 = 420 = o retrato
   Baixar a altura do retrato é baixar a das duas da direita — é a MESMA medida.
   Quem manda é o `aspect-ratio` delas: 4:3 dava 225 de altura cada e 470 no
   retrato; 3:2 dá 200 e 420.
   O retrato ocupa as DUAS linhas do grid, então essa igualdade é estrutural —
   ela se mantém sozinha em qualquer largura, sem número mágico para manter. */
/* Canto levemente arredondado, no 10px que já é o valor mais usado no site
   (17 ocorrências) — é o `overflow:hidden` do quadro que recorta a foto. */
.hb-sobre-fotos .hb-foto-a,
.hb-sobre-fotos .hb-foto-b,
.hb-sobre-fotos .hb-foto-c,
.hb-sobre-fotos .hb-foto-d{position:relative;min-width:0;overflow:hidden;border-radius:10px}
.hb-sobre-fotos .hb-foto-a img,
.hb-sobre-fotos .hb-foto-b img,
.hb-sobre-fotos .hb-foto-c img,
.hb-sobre-fotos .hb-foto-d img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hb-sobre-fotos .hb-foto-a{aspect-ratio:2.3/1}
.hb-sobre-fotos .hb-foto-c,
.hb-sobre-fotos .hb-foto-d{aspect-ratio:3/2}
/* Filtro leve nas quatro fotos, para a fileira ler como um conjunto em vez de
   quatro fotos de origens diferentes: uma dessaturação discreta e um véu navy
   de 10% — o mesmo navy do cartão ao lado. Contido de propósito; passando disso
   as fotos ficam chapadas e o mosaico perde a luz de fim de tarde que elas têm. */
.hb-sobre-fotos img{filter:saturate(.9) contrast(1.02)}
.hb-sobre-fotos .hb-foto-a::after,
.hb-sobre-fotos .hb-foto-b::after,
.hb-sobre-fotos .hb-foto-c::after,
.hb-sobre-fotos .hb-foto-d::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(18,35,63,.10)}
.hb-sobre-fotos .hb-dupla{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
/* O retrato atravessa as duas linhas; são os quadrados que definem a altura
   delas, e portanto a dele. */
.hb-sobre-fotos .hb-foto-b{grid-row:span 2}

/* ── faixa escura com foto esmaecida (Temas, Avaliações, Conteúdos) ──────── */
/* Reta, de ponta a ponta (23/10/2026): os cantos arredondados saíram a pedido do
   dono ("não fica muito profissional"). A sombra e o véu da página inicial estão
   no bloco "FAIXAS AZUIS DA PÁGINA INICIAL", mais abaixo. */
.hb-band{position:relative;padding:0;background:var(--hb-navy);overflow:hidden}
.hb-band>.hb-bg{position:absolute;inset:0}
.hb-band>.hb-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* O véu navy segura o contraste do texto; a foto aparece por baixo dele. Era
   .95/.97 — quase opaco, a foto sumia. Abrandado para a foto ficar perceptível
   sem disputar com o texto. */
.hb-band>.hb-fade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,35,63,.93) 0%,rgba(14,28,51,.96) 100%)}
.hb-band>.hb-in{position:relative;z-index:2}

/* ── 1.5 Principais Temas + Acervo ───────────────────────────────────────── */
/* 190 → 250px (23/10/2026, pedido do dono: a seção "parece muito pequenininha…
   eu scrollo o mouse e ela acaba muito rápido"). Com os ícones maiores, a
   seção cresceu por dentro e sobrou vazio em cima e embaixo; no mesmo dia,
   250 → 200px ("ficou muito espaço vazio no começo e no final"). Depois,
   em cima e embaixo IGUAIS AO OLHO (pedido do dono em 24/10/2026): com 200px
   dos dois lados, o vazio visível em cima era 231px — a margem do título
   (24px) mais o respiro da própria letra — contra 200px embaixo do botão.
   Agora 184/216px, que dão ~215px visíveis de cada lado, medidos na tela. */
.hb-temas>.hb-in{padding-block:184px 216px}
.hb-temas .hb-cab{text-align:center}
.hb-temas h2{margin:24px auto 0;max-width:24ch;font:400 54px/1.12 var(--disp);letter-spacing:.02em;
  text-transform:uppercase;color:#fff}
.hb-temas .hb-sub{margin:20px auto 0;max-width:56ch;font:400 18px/1.7 var(--body);color:var(--hb-n2)}
.hb-temas-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:56px}
/* Cartão de tema — handoff `design_handoff_temas_cards`, opção 50a.
   O cartão navy com disco creme virou CARTÃO DE PAPEL: o disco existia só para
   as ilustrações (desenhadas em azul, para fundo claro) não sumirem sobre o
   navy; com o cartão branco ele perde a razão de ser, e os cinco cartões claros
   passam a dar à seção o contraste que vinha de cinco círculos. Fundo, borda,
   raio e hover são os do `.card` deste mesmo arquivo — nenhum token novo. */
/* Cartão mais baixo sem encolher a ilustração (pedido de 18/09/2026): o que
   saiu foram os respiros — padding de 30/26 para 18/18 e a margem do título de
   22 para 14. A ilustração continua em 196px. */
.hb-tema{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;
  padding:18px 18px 18px;border:1px solid rgba(22,32,66,.1);border-radius:16px;
  /* Papel em vez de branco puro (pedido de 18/09/2026): `--paper-2` é o
     off-white que o site já usa nas faixas alternadas — tira o estalo do
     branco sobre o navy sem inventar cor. */
  background:var(--paper-2);
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.hb-tema:hover{transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--blue-700) 50%,transparent);
  box-shadow:0 26px 50px -28px rgba(22,32,66,.35)}
/* Sobre branco o foco usa o teal acessível, não o `--hb-teal-n` da faixa escura. */
.hb-tema:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
/* Handoff §Interactions: conferir que o movimento reduzido alcança o cartão. A
   regra geral do arquivo só zera `transition`; o deslocamento do hover sai aqui,
   no mesmo padrão de `.rev-card`, `.item` e `.ev`. */
@media(prefers-reduced-motion:reduce){.hb-tema:hover{transform:none}}
/* 152 → 176px (pedido de 18/09/2026). O cartão cresce junto; a grade mantém as
   cinco colunas. */
.hb-tema>img{width:196px;height:196px;display:block}
/* Comportamento é a única cuja figura ocupa menos do próprio arquivo: na mesma
   caixa das outras, lia menor. Vai a 208px, e a margem negativa devolve os
   32px de altura — a fileira continua com os mesmos 285px. */
.hb-tema--comportamento-humano>img{width:228px;height:228px;margin:-16px 0}
/* 25px, e não os 26px do cartão antigo: com a ilustração em 152px e o cartão em
   ~253px, 26px quebrava "Imposição de Mãos" em duas linhas e desalinhava a
   fileira. Vale conferir de novo se os rótulos mudarem de comprimento. */
.hb-tema h3{margin:14px 0 0;font:400 25px/1.14 var(--disp);font-variant:small-caps;
  letter-spacing:.015em;color:var(--hb-ancora)}
/* Conferido em inglês, como o handoff pede: em 25px "Laying on of Hands" pede
   223px numa linha e a caixa do cartão tem 214 — quebrava em duas e levava a
   fileira inteira de 261 para 289px de altura. Em 23px os cinco cabem. */
html[lang="en"] .hb-tema h3{font-size:23px}
/* Pé da seção Principais Temas. Era um cartão largo com a foto da biblioteca;
   depois, uma faixa atrás de um fio com o subtítulo "Quer se aprofundar?" (bloco
   50a do mock). Em 23/10/2026 o dono escolheu, entre as variações, só a frase e
   o botão: saíram o fio e o subtítulo, que faziam da seção duas seções. */
.hb-acervo{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:52px;
  /* O `body` do site força `antialiased`, que afina texto claro sobre fundo
     escuro: os textos desta faixa saíam mais magros que no mock, que não tem o
     ajuste. `auto` devolve o desenho das letras como está no handoff. */
  -webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
.hb-acervo p{margin:0;max-width:66ch;font:400 16px/1.7 var(--body);color:var(--hb-n2);text-align:center}
/* Papel cheio desde 18/09/2026 ("botão maior e com peso"). Em 23/10/2026 deixou
   de ser uma pílula de 60px, diferente de tudo na página: cantos levemente
   arredondados (6px; os cartões logo acima têm 10px), a pedido do dono — 2px
   ficou "quadrado demais" —, e um pouco mais de corpo que os botões da capa
   (58px, 13.5px). */
.hb-acervo .hb-ir{display:inline-flex;align-items:center;gap:14px;box-sizing:border-box;
  height:58px;padding:0 36px;border:1px solid var(--hb-papel);border-radius:6px;
  background:var(--hb-papel);
  font:700 13.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--hb-navy);
  transition:background-color .25s ease,border-color .25s ease,transform .25s ease}
.hb-acervo .hb-ir:hover{background-color:#fff;border-color:#fff;transform:translateY(-2px)}
.hb-acervo .hb-ir:focus-visible{outline:2px solid var(--hb-teal-n);outline-offset:3px}

/* ── 1.6 Participe presencialmente ───────────────────────────────────────── */
/* Desenho «Foto e cartão» (24/10/2026, escolha do dono entre cinco propostas;
   ver render.ts §1.6). A foto ocupa a coluna inteira — as mesmas margens do
   resto da home — e o cartão branco encosta à direita, centrado na altura, com
   o título e as atividades em lista. Sem raio, como todo o site. */
.hb-participe{background:#fff;padding-block:140px 150px}
.hb-part-palco{position:relative;min-height:700px;display:flex;align-items:center;justify-content:flex-end;
  padding:56px;overflow:hidden;background:var(--hb-papel-2)}
.hb-part-fundo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
/* Véu só do lado do cartão: a foto fica viva à esquerda e o branco do cartão não
   fica solto sobre o claro do gramado. */
.hb-part-palco::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,20,36,.05) 30%,rgba(11,20,36,.35) 100%)}
.hb-part-cartao{position:relative;z-index:2;width:560px;max-width:100%;background:#fff;padding:46px 48px 30px;
  box-shadow:0 30px 60px -30px rgba(10,18,32,.45)}
.hb-part-cartao h2{margin:18px 0 8px;font:400 38px/1.12 var(--disp);letter-spacing:.02em;text-transform:uppercase;
  color:var(--hb-ancora)}
.hb-part-lista{list-style:none;margin:0;padding:0}
.hb-part-lista a{display:grid;grid-template-columns:1fr auto;grid-template-areas:"tag seta" "t seta" "p seta";
  column-gap:18px;padding:22px 0;border-top:1px solid var(--hb-linha);color:inherit;text-decoration:none}
.hb-part-tag{grid-area:tag;font:700 10.5px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--hb-teal-h)}
.hb-part-t{grid-area:t;margin-top:9px;font:400 25px/1.1 var(--disp);font-variant:small-caps;letter-spacing:.015em;
  color:var(--hb-ancora);transition:color .2s ease}
.hb-part-p{grid-area:p;margin-top:6px;font:400 15.5px/1.6 var(--body);letter-spacing:-.01em;color:#3B4458}
.hb-part-seta{grid-area:seta;align-self:center;font:400 20px/1 var(--body);color:var(--hb-teal-h);transition:transform .25s ease}
.hb-part-lista a:hover .hb-part-t{color:var(--hb-teal-h)}
.hb-part-lista a:hover .hb-part-seta{transform:translateX(4px)}
.hb-part-lista a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
/* Faixa do membro: uma linha sob a foto, sem caixa — o cartão já é a caixa da
   seção. Mesmo título, texto e botão verde sólido de antes. */
.hb-membro-faixa{display:grid;grid-template-columns:1fr auto;align-items:center;gap:48px;margin-top:40px;padding:6px 4px 0}
.hb-membro-faixa h3{margin:0;font:400 28px/1.2 var(--disp);letter-spacing:.015em;color:var(--hb-ancora)}
.hb-membro-faixa p{margin:10px 0 0;max-width:72ch;font:400 16.5px/1.68 var(--body);letter-spacing:-.01em;color:#3B4458}
@media(max-width:1100px){
  .hb-part-palco{min-height:620px;padding:40px}
  .hb-part-cartao{width:480px;padding:38px 36px 24px}
}
/* Celular e tablet estreito: a foto vira um bloco 4:3 e o cartão desce para baixo
   dela, avançando um pouco sobre a foto, com o mesmo conteúdo. */
@media(max-width:860px){
  .hb-part-palco{display:block;min-height:0;padding:0;overflow:visible;background:none}
  .hb-part-palco::before{display:none}
  .hb-part-fundo{position:relative;inset:auto;height:auto;aspect-ratio:4/3;display:block}
  .hb-part-cartao{width:auto;margin:-56px 16px 0;padding:30px 24px 16px}
  /* «PRESENCIALMENTE» numa linha só cabe no cartão de 270px do celular a ~23px. */
  .hb-part-cartao h2{font-size:clamp(21px,5.9vw,30px)}
  .hb-part-t{font-size:23px}
  .hb-membro-faixa{margin-top:36px}
}
/* `box-sizing:border-box` é obrigatório: sem ele a borda soma e o botão vai a
   48px em vez dos 46 do desenho. */
/* O botão voltou a ser SÓLIDO a pedido do Rafael (18/09/2026). O handoff 51d
   pedia contornado; ele preferiu o verde cheio, que é o mesmo do CTA que a
   faixa tinha antes. */
.hb-cta-verde{display:inline-flex;align-items:center;box-sizing:border-box;flex:none;
  height:46px;padding:0 26px;border:1px solid var(--hb-verde);border-radius:3px;background:var(--hb-verde);
  font:700 11.5px/1 var(--body);letter-spacing:.15em;text-transform:uppercase;color:#fff;
  transition:background .2s ease,border-color .2s ease}
.hb-cta-verde:hover{background:#0F6047;border-color:#0F6047}
/* Sobre fundo claro, o foco usa o teal acessível (o handoff deixou este ponto
   para a implementação). */
.hb-cta-verde:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ── 1.7 Avaliações ──────────────────────────────────────────────────────── */
.hb-aval{min-height:calc(100vh + 80px);min-height:calc(100dvh + 80px);display:flex;align-items:center}
.hb-aval>.hb-in{display:grid;grid-template-columns:404px 1fr;gap:88px;padding-block:164px;
  align-items:start;width:100%}
/* A coluna da esquerda (título, nota, estrelas, contagem e link do Google) é
   bem mais curta que a pilha de depoimentos à direita, e encostada no topo
   ficava com um vazio grande embaixo. `align-self` só nela: mantém o
   `align-items:start` do container, que é o que os depoimentos precisam. */
.hb-aval>.hb-in>div:first-child{align-self:center}
.hb-aval h2{margin:0;max-width:13ch;font:400 40px/1.26 var(--disp);letter-spacing:.02em;text-transform:uppercase;color:#F3F1EC}
.hb-aval .hb-nota{display:block;margin:30px 0 0;font:400 104px/.86 var(--disp);color:#fff}
.hb-aval .hb-estrelas{display:block;margin-top:24px;font:400 21px/1 var(--body);letter-spacing:6px;color:var(--hb-estrela)}
.hb-aval .hb-qtd{display:block;margin-top:20px;font:400 15px/1 var(--body);color:var(--hb-n2)}
.hb-aval .hb-golink{display:inline-flex;align-items:center;gap:9px;margin-top:46px;padding-bottom:10px;
  border-bottom:1px solid rgba(63,182,193,.5);font:500 15px/1 var(--body);color:var(--hb-teal-n);
  transition:color .2s ease,border-color .2s ease}
.hb-aval .hb-golink:hover{color:#fff;border-bottom-color:#fff}
.hb-aspas{display:block;font:700 52px/.5 var(--body);color:var(--hb-teal-n)}
.hb-depo-lead p{margin:34px 0 0;font:400 18px/1.92 var(--body);color:var(--hb-n1);text-wrap:pretty}
/* O destaque tem entrelinha 1.92; o corte e o vão seguem a dele. */
.hb-depo-lead .hb-depo-txt{max-height:calc(4 * 1.92em)}
.hb-depo-lead .hb-mais-vao{height:calc(3 * 1.92em)}
.hb-depo-lead .hb-mais{line-height:1.92em;font-size:11px}
.hb-por-quem{display:flex;align-items:center;gap:11px;margin-top:30px}
.hb-av{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.13);font:700 13px/1 var(--body);color:var(--hb-n1);object-fit:cover}
.hb-por-quem .hb-nome{font:600 14px/1 var(--body);color:#fff}
.hb-por-quem .hb-quando{font:400 13.5px/1 var(--body);color:var(--hb-n3)}
.hb-aval-fio{height:1px;margin:48px 0;background:rgba(255,255,255,.15)}
.hb-depo-curtos{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.hb-depo-curtos .hb-estrelas-s{display:block;font:400 14px/1 var(--body);letter-spacing:3px;color:var(--hb-estrela)}
.hb-depo-curtos p{margin:18px 0 0;font:400 15.5px/1.78 var(--body);color:#B7C5DE}
.hb-depo-curtos .hb-por-quem{margin-top:24px}
.hb-depo-curtos .hb-av{width:32px;height:32px;font-size:12.5px}
.hb-depo-curtos .hb-nome{font-size:13.5px}
.hb-depo-curtos .hb-quando{font-size:13px}
/* Avaliação cortada em 4 linhas, com o "ver mais" NA PRÓPRIA quarta linha
   (pedido de 18/09/2026: antes ele caía sozinho numa quinta).
   Como funciona: o corte deixou de ser `-webkit-line-clamp` e passou a ser
   altura de 4 linhas com `overflow:hidden`; um vão flutuante de 3 linhas empurra
   o botão — que também flutua — para a direita da QUARTA linha, e o texto se
   acomoda em volta dele. Aberto, o botão volta a ser um bloco embaixo do texto
   inteiro. */
.hb-depo-txt{max-height:calc(4 * 1.78em);overflow:hidden}
.hb-mais-vao{float:right;width:0;height:calc(3 * 1.78em)}
.hb-depo-txt.aberto{max-height:none;overflow:visible}
.hb-depo-txt.aberto .hb-mais-vao{display:none}
.hb-mais{float:right;clear:right;margin:0 0 0 14px;padding:0;background:none;border:0;cursor:pointer;
  line-height:1.78em;font:700 10.5px/1.78em var(--body);letter-spacing:.16em;text-transform:uppercase;
  color:var(--hb-teal-n)}
.hb-depo-txt.aberto .hb-mais{float:none;display:block;margin:10px 0 0}
.hb-mais:hover{color:#fff}
.hb-mais:focus-visible{outline:2px solid var(--hb-teal-n);outline-offset:3px}
/* Paginação do par de baixo: o destaque de cima não se mexe. O contador fica
   logo abaixo do fio e as SETAS ladeiam o par (18/09/2026) — no rodapé da seção
   elas esbarrariam nos botões flutuantes. */
.hb-aval-nav{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:-16px 0 18px}

.hb-aval-cont{margin-right:4px;font:400 13px/1 var(--body);letter-spacing:.06em;color:var(--hb-n3)}
/* Setas discretas (18/09/2026): elas paginam um par de depoimentos, não são a
   ação principal da seção — 32px, sem contorno, no cinza do texto secundário.
   Só o hover as acende. */
.hb-aval-seta{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;
  background:transparent;border:0;color:var(--hb-n3);
  transition:background-color .25s ease,color .25s ease,opacity .25s ease}
.hb-aval-seta:hover{background:rgba(255,255,255,.07);color:#fff}
.hb-aval-seta:focus-visible{outline:2px solid var(--hb-teal-n);outline-offset:3px}
.hb-aval-seta[disabled]{opacity:.3;pointer-events:none}

/* ── 1.8 Próximos eventos ────────────────────────────────────────────────── */
.hb-eventos{background:#fff;padding-block:104px}
.hb-eventos .hb-cab{text-align:center}
.hb-eventos h2{margin:0;font:400 44px/1.14 var(--disp);letter-spacing:.02em;text-transform:uppercase;color:var(--hb-ancora)}
.hb-fio-ouro{display:block;width:60px;height:1px;margin:26px auto 0;
  background:linear-gradient(90deg,transparent,var(--hb-ouro),transparent)}
.hb-mes{display:flex;align-items:baseline;gap:14px;margin-top:44px;padding-bottom:18px;border-bottom:1px solid var(--hb-linha)}
.hb-mes-nome{font:400 22px/1 var(--disp);color:var(--hb-ancora)}
.hb-mes-qtd{padding:5px 11px;border-radius:20px;background:rgba(35,54,88,.07);font:700 11.5px/1 var(--body);color:var(--hb-mudo-2)}
.hb-ev{display:grid;grid-template-columns:104px 1fr auto;gap:34px;align-items:center;padding:32px 0;
  border-bottom:1px solid #EFEDE6;transition:background .2s ease}
.hb-ev:hover{background:var(--hb-papel)}
.hb-ev-data{display:grid;place-items:center;align-content:center;padding:16px 0;border-radius:12px;background:rgba(35,54,88,.05)}
.hb-ev-data b{display:block;font:400 40px/1 var(--disp);color:var(--hb-ancora)}
.hb-ev-data i{display:block;margin-top:4px;font:700 10.5px/1 var(--body);letter-spacing:.14em;font-style:normal;
  text-transform:uppercase;color:var(--hb-mudo-2)}
.hb-ev-meta{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.hb-ev-quando{font:600 13.5px/1 var(--body);color:var(--hb-teal-h)}
.hb-ev-onde{padding:5px 10px;border:1px solid rgba(10,101,109,.35);border-radius:20px;font:700 10.5px/1 var(--body);
  letter-spacing:.1em;text-transform:uppercase;color:var(--hb-teal-h)}
.hb-ev h3{margin:11px 0 0;font:600 20px/1.3 var(--body);color:var(--hb-ink)}
.hb-ev-desc{margin:8px 0 0;max-width:70ch;font:400 15px/1.6 var(--body);color:var(--hb-mudo)}
.hb-ev-datas{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.hb-ev-datas span{padding:8px 12px;border-radius:8px;background:var(--hb-papel-2);font:600 13px/1 var(--body);color:var(--hb-ink)}
.hb-ev-go{font:400 22px/1 var(--body);color:#B4AE9E}
.hb-eventos-foot{display:flex;justify-content:center;margin-top:38px}
.hb-pill-navy{display:inline-flex;align-items:center;padding:15px 30px;border-radius:999px;background:var(--hb-ancora);
  color:#fff;font:600 14.5px/1 var(--body);transition:background .2s ease}
.hb-pill-navy:hover{background:var(--hb-navy)}
.hb-ev-mais{margin:24px 0 0}
.hb-ev-mais summary{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;list-style:none;cursor:pointer;
  border:1px solid var(--hb-linha);border-radius:30px;font:600 13px/1 var(--body);color:var(--hb-ancora)}
.hb-ev-mais summary::-webkit-details-marker{display:none}
.hb-ev-mais summary:hover{background:var(--hb-papel-2)}

/* ── 1.9 Últimos conteúdos ───────────────────────────────────────────────── */
/* Faixa CLARA. Era navy com foto de fundo esmaecida, como as de Temas e
   Avaliações; a pedido, virou branca — então o olho, o título, os títulos dos
   cards e a origem trocam para a paleta de fundo claro. */
.hb-conteudos{background:#fff;padding-block:96px;padding-top:164px}
/* Handoff `design_handoff_ultimos_conteudos`, opção A. Os dois canais recebem o
   MESMO tratamento: grade de capas com o texto dentro da imagem, sob um véu.
   Antes eram três itens por canal com o texto fora da capa (variação 16a).
   Agora são dez vídeos (5×2) e seis episódios, e o olho da seção saiu. */
.hb-cont-cab{display:block}
.hb-conteudos h2{margin:0 0 34px;font:400 40px/1.1 var(--disp);letter-spacing:.02em;
  text-transform:uppercase;color:var(--hb-ancora)}
/* Cabeçalho de canal: marca, nome e o link do canal à direita, sobre um fio
   claro (`#DFD7C7`) — era navy sólido, que competia com o título da seção. */
.hb-canal{display:flex;align-items:center;gap:12px;
  padding-bottom:12px;border-bottom:1px solid #DFD7C7}
.hb-yt-grid+.hb-canal{margin-top:46px}
.hb-canal-nome{display:inline-flex;align-items:center;gap:10px;font:700 11px/1 var(--body);
  letter-spacing:.18em;text-transform:uppercase;color:#7A7568}
/* Marcas dos canais (handoff): vermelho 30×21 com raio 5 no YouTube, disco
   verde de 22 no Spotify. Reconstruções — trocar pelos arquivos oficiais. */
.hb-marca{display:grid;place-items:center;flex:none}
.hb-marca--yt{width:30px;height:21px;border-radius:5px;background:#FF0000}
.hb-marca--sp{width:22px;height:22px;border-radius:50%;background:#1DB954}
.hb-canal-link{display:inline-flex;align-items:center;gap:10px;margin-left:auto;
  font:700 11px/1 var(--body);letter-spacing:.13em;text-transform:uppercase;color:#274A90;
  white-space:nowrap;transition:gap .2s ease}
.hb-canal-link:hover{gap:15px}
/* `minmax(0,1fr)` e `min-width:0` são obrigatórios (nota 2 do handoff): com
   `1fr` puro os títulos empurram as colunas e a grade estoura a página. */
.hb-yt-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 16px;margin-top:20px}
.hb-yt-card{display:block;min-width:0}
.hb-yt-capa,.hb-sp-arte{position:relative;display:block;border-radius:4px;overflow:hidden;background:#E9E6DE}
.hb-yt-capa{aspect-ratio:16/9}
.hb-sp-arte{aspect-ratio:1/1}
.hb-yt-capa img,.hb-sp-arte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease}
/* O protótipo não tem hover; o handoff diz que, se houver, o coerente com o
   resto do site é aproximar a capa — sem cor e sem sombra. */
.hb-yt-card:hover img{transform:scale(1.04)}
/* Véu: sem ele o texto branco some em capa clara. Tudo acima da imagem é
   `pointer-events:none`, senão o hover do <a> não dispara. */
.hb-capa-veu{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,17,30,.94) 0%,rgba(10,17,30,.5) 42%,rgba(10,17,30,0) 72%)}
/* O Short usa a MESMA `maxresdefault` do vídeo comum (ver site_handler.ts): é
   o quadro 16/9 que o YouTube compõe, e é o único que entra nesta célula sem
   corte. `oardefault` é o vertical de 1080×1920 e ficava ampliado 3,16×. */
.hb-selo-short{position:absolute;left:9px;top:9px;padding:4px 8px;border-radius:2px;
  background:rgba(255,255,255,.92);font:700 8.5px/1 var(--body);letter-spacing:.16em;
  text-transform:uppercase;color:var(--hb-navy);pointer-events:none}
/* A duração fica NO ALTO: o pé da capa é do título, e as duas no mesmo canto
   colidiriam. */
.hb-selo-dur{position:absolute;right:9px;top:9px;padding:4px 7px;border-radius:2px;
  background:rgba(10,17,30,.82);font:500 10px/1 var(--mono);color:#fff;pointer-events:none}
.hb-capa-titulo{position:absolute;left:12px;right:12px;bottom:11px;pointer-events:none;
  font:500 13.5px/1.34 var(--body);color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  /* Reserva para navegador sem `line-clamp`: corta na mesma altura. */
  max-height:calc(2 * 1.34em)}
/* Fileira do Spotify — handoff `design_handoff_spotify_c`, bloco `c`: a arte
   do PROGRAMA uma vez à esquerda, os oito episódios numa lista à direita.
   `minmax(0,1fr)` na segunda coluna é obrigatório: com `1fr` puro os títulos
   longos esticam a coluna até caberem e a grade estoura a página. */
/* A capa do Spotify com a MESMA largura de uma capa de vídeo da grade de cima
   (22/09): a conta é a da `.hb-yt-grid` — (100% − 4 × 16px) ÷ 5 —, então as
   duas continuam iguais em qualquer largura de tela. Era 200px fixos. */
.hb-sp-corpo{display:grid;grid-template-columns:calc((100% - 4 * 16px) / 5) minmax(0,1fr);gap:36px;
  align-items:start;margin-top:20px}
.hb-sp-nome{display:block;margin-top:14px;font:500 13px/1.45 var(--body);color:#2A3346}
.hb-sp-qtd{display:block;margin-top:4px;font:400 12.5px/1.4 var(--body);color:#7A7568}
.hb-sp-eps{margin:0;padding:0;list-style:none}
.hb-sp-eps a{display:flex;align-items:baseline;gap:20px;min-width:0;padding:13px 0;
  border-top:1px solid #EDE9E0;transition:background-color .2s ease}
/* A primeira linha não leva fio: o do cabeçalho já está 20px acima dela. */
.hb-sp-eps li:first-child a{padding-top:0;border-top:0}
/* O protótipo não tem hover; numa lista o coerente é o fundo, não a escala. */
.hb-sp-eps a:hover{background:#FBFAF7}
/* Os 118px fixos são o que alinha os títulos numa vertical só — "08 SET · 16
   MIN" e "27 MAI · 18 MIN" não têm a mesma largura. */
.hb-ep-meta{flex:none;width:118px;font:500 10px/1.5 var(--mono);letter-spacing:.08em;color:#7A7568}
.hb-ep-titulo{min-width:0;font:500 15px/1.45 var(--body);color:#233658;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Grade limpa (pedido do Rafael, 18/09): na fileira o que se vê é a CAPA.
   Título, data, duração, o selo SHORT e o próprio véu que os sustenta entram
   no hover. Tudo o que não é o <img> é irmão dele dentro da capa, então uma
   regra só cobre os cinco.
   Fica dentro de `@media (hover:hover)` de propósito: em toque não existe
   hover, e sem a exceção o texto sumiria do celular sem jeito de voltar. */
@media (hover:hover){
  .hb-yt-capa>:not(img){opacity:0;transition:opacity .28s ease}
  .hb-yt-card:hover .hb-yt-capa>:not(img),.hb-yt-card:focus-visible .hb-yt-capa>:not(img){opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .hb-yt-capa>:not(img){transition:none}
}

/* ── 1.10 Torne-se um Membro ─────────────────────────────────────────────── */
.hb-membro{background:#fff;padding-block:104px}
.hb-membro .hb-grid{display:grid;grid-template-columns:452px 1fr;gap:84px;align-items:start}
.hb-membro h2{margin:22px 0 0;font:400 44px/1.14 var(--disp);letter-spacing:.02em;text-transform:uppercase;color:var(--hb-ancora)}
.hb-membro .hb-lead{margin:26px 0 0;font:400 16.5px/1.8 var(--body);color:var(--hb-mudo)}
.hb-preco-card{margin-top:34px;padding:30px 32px;border-radius:14px;background:var(--hb-navy)}
.hb-preco-card .hb-eb{font:700 10.5px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--hb-teal-n)}
.hb-preco-card b{display:block;margin-top:16px;font:400 32px/1 var(--disp);color:#fff}
.hb-preco-card span{display:block;margin-top:12px;font:400 14.5px/1.65 var(--body);color:var(--hb-n2)}
.hb-preco-card a{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font:700 12px/1 var(--body);
  letter-spacing:.14em;text-transform:uppercase;color:var(--hb-teal-n);transition:color .2s ease}
.hb-preco-card a:hover{color:#fff}
.hb-benef{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hb-benef>div{padding:26px 28px;border:1px solid var(--hb-linha);border-radius:14px;transition:border-color .2s ease}
.hb-benef>div:hover{border-color:var(--hb-teal-h)}
.hb-benef .hb-fio{display:block;width:24px;height:1px;background:var(--hb-teal-h)}
.hb-benef h3{margin:20px 0 0;font:400 23px/1.1 var(--disp);font-variant:small-caps;letter-spacing:.015em;color:var(--hb-ink)}
.hb-benef p{margin:10px 0 0;font:400 14.5px/1.65 var(--body);color:var(--hb-mudo)}
.hb-todos{display:inline-flex;align-items:center;gap:9px;margin-top:28px;padding-bottom:8px;
  border-bottom:1.5px solid #C9C3B6;font:600 14.5px/1 var(--body);color:var(--hb-ancora);
  transition:color .2s ease,border-color .2s ease}
.hb-todos:hover{border-bottom-color:var(--hb-teal-h);color:var(--hb-teal-h)}

/* ── barra de topo da home — variação 10b ─────────────────────────────────────
   handoff design_handoff_barra_topo. Duas faixas navy OPACAS sobrepostas ao
   topo da capa: utilitária #18294A (46px) e navegação #233658 (90px), 136px no
   total. A sombra é da faixa de navegação e cai sobre a foto, destacando o
   cabeçalho inteiro — não é uma divisa entre as duas faixas.

   Medidas conferidas no bloco 10b renderizado, não no resumo do README (que
   declara 104px/150px onde o arquivo entrega 90px/136px).

   As classes .sb-menu/.sb-item/.sb-sub/.sb-burger são mantidas: o menu overlay
   do mobile e o JS do burger são os mesmos das outras páginas. */
/* A barra é a mesma em todo o site e NÃO acompanha a rolagem em tela nenhuma:
   ela sai de cena junto com o topo da página. Na HOME flutua sobre a capa
   (absoluta, fora do fluxo, e a foto começa no topo do documento); nas demais
   fica no fluxo, ocupando a própria altura. */
.sb-head.hbh{position:relative;z-index:50;background:transparent;
  font-family:var(--body);color:#fff}
body[data-page="home"] .sb-head.hbh{position:absolute;left:0;right:0;z-index:20}
.hbh .hb-in{display:flex;align-items:center}

/* faixa utilitária ───────────────────────────────────────────────────────── */
/* Superfície "Elevado · 65% · 55%", os valores finais que o cliente fechou no
   painel de ajustes do protótipo (handoff "barra de topo 2", tabela "Valores
   finais da superfície"). O painel em si não é portado — o protótipo ficou
   salvo noutra configuração (.85/.69 sem sombra), e é a tabela que vale.
   `height:42px` já conta a borda: `box-sizing:border-box`. */
/* Reta, de ponta a ponta e sem sombra (21/10/2026, pedido do dono). `relative`
   + z-index acima da faixa do menu: a lista do próximo encontro sai daqui e
   precisa passar por cima dela. */
.hbh-r1{position:relative;z-index:3;background:rgba(19,36,68,.98);border-bottom:1px solid rgba(255,255,255,.1)}
.hbh .hbh-r1>.hb-in{gap:22px;height:42px}
.hbh-social{display:flex;align-items:center;gap:18px}
.hbh-social a{display:flex;align-items:center;color:rgba(255,255,255,.5);transition:color .2s ease}
.hbh-social a:hover{color:#fff}
.hbh-social svg{width:16px;height:16px;display:block}
/* Fio que separa a família "marcas" (redes) da família "interface" (contato). */
.hbh-fio{width:1px;height:12px;flex:none;background:rgba(255,255,255,.18)}
.hbh-fio--alto{height:14px;background:rgba(255,255,255,.16)}
.hbh-contato{display:flex;align-items:center;gap:8px;font:400 13px/1 var(--body);
  color:rgba(255,255,255,.62);transition:color .2s ease}
.hbh-contato:hover{color:#fff}
.hbh-contato svg{width:16px;height:16px;flex:none}
/* ── Próximo encontro na faixa de cima (21/10/2026) ──────────────────────────
   Escolha do dono (agenda-ref/, no testagent). Mesma linguagem do endereço e do
   telefone que ocupavam o lugar: ícone de 16px e texto de 13px, sem rótulo —
   data, hora e nome já dizem o que é. O nome longo corta com reticências.
   Passando o mouse (ou com o foco do teclado) abre a lista dos próximos, no
   desenho dos submenus (`.sb-sub`); a ponte invisível `::before` cobre o vão
   entre o aviso e a lista, senão o mouse fecharia a lista no caminho. No
   celular sobram o aviso e as bandeiras: redes e pino saem, a lista não abre e
   o toque leva à Agenda. */
.hbh-agenda{position:relative;display:flex;align-items:center;min-width:0;flex:0 1 auto}
.hbh-aviso{display:flex;align-items:center;gap:8px;min-width:0;font:400 13px/1 var(--body);
  color:rgba(255,255,255,.62);transition:color .2s ease}
.hbh-aviso:hover{color:#fff}
.hbh-aviso svg{width:16px;height:16px;flex:none}
.hbh-aviso-txt{min-width:0;max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbh-aviso-txt b{font-weight:600;color:rgba(255,255,255,.9)}
.hbh-lista{position:absolute;top:calc(100% + 12px);left:-14px;min-width:420px;padding:8px;
  background:#fff;border:1px solid #E2DFD7;border-radius:10px;box-shadow:0 18px 42px rgba(21,35,64,.16);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s;z-index:60}
.hbh-lista::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.hbh-agenda:hover .hbh-lista,.hbh-agenda:focus-within .hbh-lista{opacity:1;visibility:visible;transform:none}
.hbh-lista a{display:grid;grid-template-columns:110px minmax(0,1fr);column-gap:14px;align-items:baseline;
  padding:10px 12px;border-radius:7px;transition:background .15s ease}
.hbh-lista a:first-child,.hbh-lista a:hover{background:#F4F2EC}
.hbh-lista b{font:700 14px/1.4 var(--body);color:#1B2A4A;white-space:nowrap}
.hbh-lista span{font:400 14px/1.4 var(--body);color:#3F4656}
.hbh-lista i{display:block;font-style:normal;font-size:13px;color:#6B7280}
.hbh-lista .hbh-lista-todos{display:flex;align-items:center;gap:8px;margin-top:4px;padding:12px 12px 6px;
  border-top:1px solid #ECE9E1;border-radius:0;background:none;font:600 14px/1 var(--body);color:#233658}
.hbh-lista .hbh-lista-todos:hover{background:none;color:#1B2A4A}
.hbh-lista-todos svg{width:15px;height:15px}
/* No tablet as redes e o pino saem ANTES de o aviso ser cortado (a Loja já
   sai em ≤860px); no celular a lista também não abre. */
@media(max-width:900px){
  .hbh-r1--agenda .hbh-social,.hbh-r1--agenda .hbh-fio--alto{display:none}
}
@media(max-width:680px){
  .hbh-lista{display:none}
  .hbh-aviso-txt{max-width:none}
}
.hbh-utils{display:flex;align-items:center;gap:26px;margin-left:auto;flex:none}
.hbh-utils>a{display:flex;align-items:center;gap:7px;font:600 12px/1 var(--fonte-inter),system-ui,sans-serif;
  letter-spacing:.12em;text-transform:uppercase;transition:color .2s ease}
/* ÍCONE NA ALTURA DAS MAIÚSCULAS (23/09, "os ícones e textos não estão
   alinhados"). A 16px a tinta do ícone (13px na sacola) passava 2px acima e
   2px abaixo das maiúsculas de 12px (9px de altura), e a sacola e os ombros,
   que pesam embaixo, liam como caídos abaixo da linha do texto. A 14px sobra
   ~1px de cada lado, e o centro da tinta cai no centro das maiúsculas:
   medido em 4x, sacola +0,13px; o boneco ficava 0,4px baixo e sobe meio
   pixel. */
.hbh-utils>a svg{width:14px;height:14px;flex:none}
.hbh-membro svg{transform:translateY(-.5px)}
.hbh-loja{color:#B7C5DE}
.hbh-loja:hover{color:#fff}
.hbh-membro{color:#EAF0FA}
.hbh-membro:hover{color:#8AB0E0}
.hbh .lang-toggle{gap:8px;font:600 12px/1 var(--fonte-inter),system-ui,sans-serif;letter-spacing:.1em}
.hbh .lang-toggle a{color:#98A9C8;font-weight:600;padding:8px 2px 3px;margin:-8px -2px 0}
.hbh .lang-toggle a:hover{color:#fff}
.hbh .lang-toggle a[aria-current]{color:#fff;border-bottom:0}
.hbh .lang-toggle .lang-sep{color:#fff;opacity:.45;font-weight:400}

/* faixa de navegação ─────────────────────────────────────────────────────── */
/* Translúcida: quem garante a legibilidade sobre a foto é o véu de 200px no
   topo da capa (`.hb-hero-top`) — não remover. A sombra é forte de propósito e
   cai sobre a foto, destacando o cabeçalho inteiro; não é divisa entre faixas.
   Os 72px saem do CTA de 52px mais os 10px de padding de cada lado. */
.hbh-r2{background:rgba(40,59,94,.71);position:relative;z-index:2;
  box-shadow:0 23px 46px -10px rgba(4,10,22,.69)}
.hbh .hbh-r2>.hb-in{position:relative;gap:44px;padding-block:16px}
.hbh-logo{flex:none;display:block}
.hbh-logo img{height:48px;width:auto;display:block;filter:brightness(0) invert(1)}
/* Marco de navegação em volta do menu (Cabecalho.tsx). `display:contents`
   para o <ul> seguir sendo item flex do .hb-in — a centralização é
   `margin:0 auto` nele, e no mobile ele é position:absolute. */
.hbh-nav{display:contents}
.hbh .sb-menu{display:flex;gap:32px;margin:0 auto;padding:0;list-style:none;white-space:nowrap;flex-wrap:nowrap}
/* Sem barra de acento no hover nem no item ativo — decisão explícita do
   handoff (nota 2). Só peso e cor. */
.hbh .sb-menu>.sb-item>a{display:flex;align-items:center;padding:16px 0;font:400 16px/1 var(--body);
  color:#C6D2E7;box-shadow:none;transition:color .2s ease}
.hbh .sb-menu>.sb-item>a:hover{color:#fff;box-shadow:none}
.hbh .sb-menu>.sb-item.on>a{color:#fff;font-weight:500;box-shadow:none}
.hbh .sb-sub{left:-14px;min-width:236px;padding:8px;background:#fff;border:0;border-radius:12px;
  box-shadow:0 26px 54px rgba(6,12,26,.36)}
.hbh .sb-sub a{padding:12px 16px;border-radius:8px;font:400 15.5px/1.3 var(--body);color:var(--hb-ink)}
.hbh .sb-sub a:hover{background:var(--hb-papel-2);color:#274A90}
/* O botão em papel sobre o navy é o contraste mais forte da barra: é ele que
   carrega a ação primária, e por isso o menu não tem acento nenhum. */
.hbh-cta{display:inline-flex;align-items:center;gap:8px;flex:none;margin-left:auto;height:52px;
  padding:0 20px;border-radius:2px;background:#FAF9F5;color:#233658;
  font:700 13px/1 var(--body);letter-spacing:.09em;text-transform:uppercase;transition:background .2s ease}
.hbh-cta:hover{background:#fff}
/* 21px — o mesmo tamanho que este ícone tinha no botão do cabeçalho antigo
   (`.sb-pill img`). O handoff pede 17px, desenhado para o coração de traço
   fino; a mão do `icon-paz.svg` tem mais detalhe e pede um pouco mais. */
.hbh-cta-ico{width:21px;height:21px;flex:none;filter:brightness(0)}
.hbh .sb-burger{color:#fff}

/* ── rodapé na home: mesmos blocos, medidas do handoff ───────────────────── */
body[data-page="home"]>footer{background:var(--hb-navy-900,#0E1B33);color:#93A3C2;padding:76px 0 34px}
/* A largura do miolo do rodapé (1440 − 48px de cada lado) nasceu aqui, só na
   home; desde 23/09 vale para o site todo — ver "RODAPÉ E BARRA NA LARGURA
   DA HOME", no fim do arquivo. */
body[data-page="home"]>footer .cols{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:56px}
body[data-page="home"]>footer h2{font-size:12px;line-height:1;letter-spacing:.17em;margin:0 0 18px}
body[data-page="home"]>footer a{font-size:14.5px;line-height:1.5;color:#93A3C2;padding:5.5px 0}
body[data-page="home"]>footer a:hover{color:#fff}
body[data-page="home"]>footer .logo img{height:44px}
body[data-page="home"] .fdesc{margin:22px 0 0;font-size:14.5px;line-height:1.7;color:#93A3C2;max-width:44ch}
body[data-page="home"] .fsocial{gap:18px;margin-top:24px}
body[data-page="home"] .fbot{margin-top:52px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);
  font-size:13px;line-height:1.5;color:#7E8FB0}
body[data-page="home"] .fbot a{color:#7E8FB0;font-size:13px}

/* ── responsivo ──────────────────────────────────────────────────────────────
   O protótipo é composição fixa de 1440px e não cobre outras larguras; o
   handoff ("Interactions & Behavior › Responsivo") define o alvo: menu em
   drawer abaixo de 1024px, capa em min(84vh,840px), grades de 5 → 2 colunas e
   faixa de eventos reduzida. É isso que está abaixo. */
@media(max-width:1360px){
  .hb-sobre .hb-grid{grid-template-columns:1fr 46%;gap:56px}
  .hb-sobre h2{white-space:normal}
  .hb-aval>.hb-in{grid-template-columns:340px 1fr;gap:56px}
  .hb-membro .hb-grid{grid-template-columns:400px 1fr;gap:56px}
  .hbh .sb-menu{gap:20px}
  .hbh .sb-menu>.sb-item>a{font-size:13.5px}
  /* Endereço e telefone saem primeiro: são o par de contato, e o handoff diz
     que na estreita a faixa fica com redes + idioma. Os fios que os separavam
     saem junto, senão sobram divisores sem nada entre eles. */
  .hbh-contato,.hbh .hbh-r1 .hbh-fio--alto,.hbh-contato + .hbh-fio{display:none}
}
@media(max-width:1180px){
  .hb-temas-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hb-temas h2{font-size:44px}
  .hb-hero-txt .hb-titulo{font-size:48px}
}
/* A spec deixou o mobile como "a resolver": as grades de 3 colunas viram 1
   abaixo de ~800px. Os cards do YouTube funcionam empilhados e as linhas do
   Spotify já são horizontais, então sobrevivem melhor. */
@media(max-width:800px){
  /* Mobile não desenhado no handoff: duas colunas nos dois canais. Com uma só,
     a capa fica larga demais e o título ocupa metade da imagem. */
  .hb-yt-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  /* A fileira do Spotify empilha: arte e nome no topo, lista abaixo, e a
     coluna de data vira uma linha acima do título (o handoff marca o mobile
     como "a resolver"). Com 118px fixos aqui, o título sobraria ~150px. */
  .hb-sp-corpo{grid-template-columns:1fr;gap:22px}
  .hb-sp-arte{max-width:148px}
  .hb-sp-eps a{display:block;padding:12px 0}
  .hb-sp-eps li:first-child a{padding-top:0}
  .hb-ep-meta{display:block;width:auto;margin-bottom:5px}
  .hb-ep-titulo{display:block;white-space:normal;text-overflow:clip}
}
@media(max-width:1024px){
  .hb-in{padding-inline:clamp(20px,4vw,48px)}
  .hb-sobre .hb-grid,.hb-membro .hb-grid,.hb-aval>.hb-in{grid-template-columns:1fr}
  /* Em uma coluna só, o mosaico pararia de ter largura de coluna e passaria a
     ter largura de PÁGINA, inchando as quatro fotos. O teto mantém o desenho.
     Cuidado: `margin-inline:auto` aqui NÃO serve — margem automática em item
     de grid desliga o `stretch`, e o mosaico encolhe para a largura mínima do
     conteúdo (20px, o próprio gap da linha de baixo). `justify-self` centra
     sem desligar a largura. */
  .hb-sobre-fotos{width:100%;max-width:620px;justify-self:center}
  .hb-depo-curtos{grid-template-columns:1fr;gap:34px}
  .hb-aval .hb-nota{font-size:76px}
  .hb-part-grid{grid-template-columns:repeat(2,1fr)}
  /* O handoff deixou o mobile em aberto: a grade `1fr auto` empilha e o botão
     fica alinhado à esquerda, no eixo do texto. */
  .hb-membro-faixa{grid-column:span 2;grid-template-columns:1fr;gap:24px;justify-items:start}
  /* faixa de eventos: só o rótulo + o próximo encontro + a agenda */
  /* A faixa de uma linha não sobrevive abaixo de ~1100px (o handoff já avisa).
     Colapsa para o próximo encontro + o link da agenda: saem os outros dois
     eventos, o rótulo e os fios, e o título que sobra passa a poder encolher. */
  .hb-evbar-tag,.hb-evbar .hbh-fio{display:none}
  .hb-evbar-item:nth-of-type(n+2){display:none}
  .hb-evbar-item{flex:1 1 auto;min-width:0}
}
/* O menu vira drawer em 1279px, e não em 980: a barra 10b tem 8 itens a 16px,
   logo de 48px e um CTA de 263px — medido, o conjunto precisa de ~1440px. Entre
   981 e 1279 ele transbordava. O handoff também diz que o desenho desktop
   começa em 1360. */
@media(max-width:1279px){
  /* O burger é global e só aparece em 980px; na home ele precisa acompanhar o
     drawer, senão entre 981 e 1279 o menu fica escondido e sem como abrir. */
  .hbh .sb-burger{display:inline-flex;align-items:center}
  .hbh .sb-menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;margin:0;
    background:var(--hb-navy);border-top:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 42px rgba(6,12,26,.4);padding:6px 0;z-index:60}
  .hbh .sb-menu.open{display:flex}
  .hbh .sb-menu>.sb-item>a{padding:13px clamp(18px,4vw,48px)}
  .hbh .hbh-r2>.hb-in{gap:16px}
  /* Com o menu virado drawer, o espaco livre da linha fica ENTRE o logo e o
     par CTA + burger, e nao entre o CTA e o burger: os dois controles andam
     juntos na direita, a um `gap` um do outro, em vez de o botao ficar colado
     no logo e o burger sozinho na outra ponta. Quem recebe o `auto` e o CTA,
     porque ele vem antes; o burger perde o dele (que e global) senao empurra
     a sobra de novo para o meio do par. */
  .hbh-cta{padding:12px 16px;font-size:10px;letter-spacing:.12em;margin-left:auto}
  .hbh .sb-burger{margin-left:0;order:9}
  .hbh-utils{gap:20px}
}
@media(max-width:860px){
  .hb-sobre{padding-block:104px}
  .hb-participe,.hb-eventos,.hb-membro{padding-block:72px}
  .hb-conteudos>.hb-in{padding-block:80px}
  .hb-temas>.hb-in{padding-block:72px 102px}
  .hb-aval>.hb-in{padding-block:72px}
  .hb-hero-txt .hb-titulo{font-size:40px}
  .hb-hero-txt .hb-lede{font-size:16.5px}
  .hb-btn{height:46px;padding:0 24px;font-size:11.5px}
  .hb-temas h2{font-size:34px}
  .hb-eventos h2,.hb-membro h2{font-size:34px}
  .hb-sobre h2{font-size:32px}
  .hb-fatos{grid-template-columns:1fr;gap:20px}
  .hb-benef{grid-template-columns:1fr}
  .hb-ev{grid-template-columns:76px 1fr;gap:20px}
  .hb-ev-go{display:none}
  .hb-ev-data b{font-size:30px}
  .hbh-utils>.hbh-loja{display:none}
}
@media(max-width:680px){
  /* (24/10/2026) os cantos de 44px do celular saíram junto com os de 72px — faixas retas */
  /* `minmax(0,1fr)` e não `1fr`: com o título mais longo, a coluna `auto` do
     `1fr` crescia e as duas ficavam desiguais (178 × 158px medidos). */
  .hb-temas-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  /* Em duas colunas o cartão cai para ~170px: a ilustração de 152px encostaria
     nas bordas, então encolhe junto (handoff: "mobile não desenhado"). */
  .hb-tema{padding:22px 12px 20px}
  .hb-tema>img{width:136px;height:136px}
  .hb-tema h3{margin-top:16px;font-size:21px}
  .hb-part-grid{grid-template-columns:1fr}
  .hb-membro-faixa{grid-column:span 1}
  .hb-evbar>.hb-in{gap:14px}
  .hb-evbar-item span{font-size:14.5px}
  .hb-evbar-all{font-size:11px;letter-spacing:.1em}
  .hb-hero-nav{bottom:96px}
}
@media(max-width:700px){
  /* A grade 1fr 1fr 176px não sobrevive aqui — o handoff deixou o mobile como
     "a resolver na implementação", pedindo que os dois números empilhem e o
     cartão vire faixa de largura total. Coluna única resolve os dois de uma
     vez; no cartão a seta passa para o lado do título. */
  .hb-fatos{grid-template-columns:1fr;gap:26px}
  .hb-fato-cartao{flex-direction:row;align-items:center;justify-content:space-between}
  .hb-fato-cartao>svg{margin-top:0}
  /* Em 390px a linha 2 não comporta logo + CTA + burger (mede 380 em 350 de
     faixa). O CTA sai do cabeçalho: "Doe e Receba Energia" continua no menu
     (Atividades) e nos botões da própria capa. */
  .hbh-cta{display:none}
  /* Sem o CTA, o `auto` que o empurrava para a direita some junto e o burger
     colaria no logo — ele reassume o empurrao aqui. */
  .hbh .sb-burger{margin-left:auto}
  /* Sem o CTA a faixa de navegação encolhe de 72 para 68px; o destaque, que
     começa abaixo do cabeçalho (`--barra-altura`, 123px aqui), acompanha. */
}
@media(max-width:560px){
  /* O que sobra da faixa utilitária: redes + idioma, como o handoff prescreve
     para a versão estreita. */
  .hbh-utils>.hbh-membro,.hbh .hbh-r1 .hbh-fio{display:none}
  .hbh .hbh-r1>.hb-in{gap:14px}
  body[data-page="home"]>footer .cols{grid-template-columns:1fr;gap:34px}
  .hb-aval h2{font-size:30px;max-width:none}
}
/* Capa no CELULAR, opção B (22/10/2026). O bloco começa no mesmo ponto em todas
   as capas (40% da altura da foto) e a chamada reserva três linhas, para os
   botões ficarem no mesmo lugar mesmo quando a chamada tem duas. O título vai de
   26 a 30px conforme a largura: "São Damião" e "Mosteiro" não podem quebrar no
   meio e cabem até num aparelho de 360px. */
@media(max-width:680px){
  .hb-hero-txt{justify-content:flex-start;top:40%;bottom:0}
  .hb-hero-txt .hb-titulo{font-size:clamp(26px,7.2vw,30px);max-width:none}
  .hb-hero-txt .hb-lede{font-size:16px;max-width:none;min-height:calc(3 * 1.6em);margin-top:14px}
  .hb-hero-btns{margin-top:24px;gap:10px;flex-wrap:nowrap}
  .hb-btn{height:46px;padding:0 14px;font-size:11.5px;letter-spacing:.1em;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
  .hb-hero .hb-slide,.hb-hero-txt{transition:none}
  .hb-tema:hover{transform:none}
}

/* ═══ TESTE — segunda faixa do topo invertida (branca, texto azul) ═══════════
   Pedido como experimento: "deixe a segunda barra branca com texto em azul,
   incluindo a logo e o botão". Bloco isolado de propósito — apagar daqui até o
   fim do arquivo devolve a barra ao desenho do handoff, sem tocar em mais nada.

   O azul dos itens é o `#2E57A8` que os próprios handoffs nomeiam como acento
   do site; o ativo vai no navy `#233658`, e o CTA inverte junto (navy com texto
   branco), senão o botão em papel sumiria sobre a faixa branca. */
/* Um degrau abaixo do papel: `--paper-2` (#F1EFE9) é o off-white que o site já
   usa nas faixas alternadas e nos hovers claros. Some o estalo do branco sem
   inventar cor nova — é o tom seguinte da mesma escala. */
/* Um fio de 1px fecha a faixa (como sombra de 1px, e não borda, para a altura
   do cabeçalho continuar 127px — `--barra-altura`) e, desde 22/10/2026 (pedido
   do dono), uma sombra suave embaixo, sobre a capa. */
.hbh-r2{background:var(--paper-2);box-shadow:0 1px 0 #E2DED5,0 10px 22px -8px rgba(4,10,22,.38)}
/* A logo volta à versão colorida: `brightness(0) invert(1)` a deixaria branca
   sobre branco. */
.hbh-logo img{filter:none}
/* Menu em NEUTRO, não em azul. Sobre a faixa clara já há dois azuis com papel
   definido — o da logo (#324E98) e o navy do botão —, e um terceiro no menu
   fazia os três competirem. Com o texto em ardósia a hierarquia fica óbvia:
   o olho vai para a logo e para o botão, e o menu se lê sem disputar.
   As cores são as que o site já usa em texto sobre fundo claro: `--ink-2` no
   inativo e `--ink` no ativo e no hover.

   Um degrau de peso em cada estado: o handoff usa 400/500 sobre o navy, e
   sobre a faixa clara o texto pede um pouco mais de corpo. Tudo dentro do
   bloco de teste — removendo-o, voltam as cores e os pesos do handoff. */
.hbh .sb-menu>.sb-item>a{color:var(--ink-2);font-weight:500}
.hbh .sb-menu>.sb-item>a:hover{color:var(--ink)}
.hbh .sb-menu>.sb-item.on>a{color:var(--ink);font-weight:600}
.hbh-cta{background:#233658;color:#fff}
.hbh-cta:hover{background:#12233F}
.hbh-cta-ico{filter:brightness(0) invert(1)}
.hbh .sb-burger{color:#233658}
/* O burger não tinha anel de foco nenhum — quem navega por teclado não via
   onde estava. Teal e 3px de respiro, como todo foco do site. */
.hbh .sb-burger:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}

/* ── A GAVETA CONTINUA O CARTÃO DA FAIXA, EM PAPEL ──────────────────────────
   O painel do menu seguia em navy enquanto os itens já eram de texto escuro
   (a faixa clara é deste mesmo bloco de teste): "Como Ajudar", o item ATIVO,
   saía em `--ink` sobre o navy e simplesmente não aparecia — era aquele vão
   em branco no meio da lista, não um item faltando. Medido, o inativo ficava
   em 2,2:1 de contraste e o ativo em 1,2:1.

   Em papel, cada cor volta ao fundo para o qual foi escolhida, e a gaveta
   deixa de ser um retângulo pendurado: mesmo recuo lateral do cartão, os
   mesmos 18px de raio embaixo, e a faixa fica reta enquanto a gaveta está
   aberta — senão sobrava um canto arredondado no meio da pilha. As linhas
   seguem o desenho do submenu de desktop (cartão com 8px de recuo, item com
   raio próprio, papel-2 no hover), para a gaveta e o submenu serem a mesma
   família. O acento do item ativo é o fio teal que a OUTRA gaveta do site já
   usa — o handoff dispensa a barra no menu horizontal, onde o peso basta;
   numa lista vertical ela é o que diz onde você está. */
@media(max-width:1279px){
  .hbh .sb-menu{
    background:var(--paper);
    border-top:1px solid rgba(26,34,51,.10);
    border-radius:0 0 18px 18px;
    box-shadow:0 24px 40px -18px rgba(4,10,22,.34);
    padding:8px;
  }
  .hbh-r2:has(.sb-menu.open){border-radius:0}
  .hbh .sb-menu>.sb-item>a{padding:13px 16px;border-radius:10px}
  .hbh .sb-menu>.sb-item>a:hover{background:var(--paper-2);color:var(--ink)}
  .hbh .sb-menu>.sb-item.on>a{background:var(--paper-2);box-shadow:inset 3px 0 0 var(--teal)}
}


/* ── Foto de capa sob as seções navy ────────────────────────────────────────
   Mesmo contrato de `.hb-band`, mas sem tocar na marcação: a foto e o véu
   entram na MESMA pilha de `background-image`, com o gradiente por cima. Assim
   não é preciso inserir <img> nem lidar com z-index em seções que já têm
   pseudo-elementos ocupados.

   `--capa` é publicada por página no <body> (ver conteudo.tsx). Onde ela não
   existe, `var(--capa, none)` deixa só o véu sobre o navy — exatamente o que
   havia antes, sem regressão. */
/* O RODAPÉ FICA DE FORA: pedido do Rafael em 01/09/2026. Não reintroduzir.

   PADRÃO ÚNICO COM A HOME (pedido de 18/09/2026): toda seção navy do site é a
   mesma placa — cantos de cima arredondados em 72px e a foto da página sob o
   véu. Antes só a home tinha os cantos, e as faixas de energia não tinham nem a
   foto. O véu usa os MESMOS valores de `.hb-band` (.93/.96); aqui ele era um
   pouco mais fechado (.955/.972) e a foto aparecia menos que na home.

   `overflow:hidden` acompanha o raio: sem ele o conteúdo interno vaza pelos
   cantos recortados.

   23/10/2026: na página inicial as faixas ficaram retas, com sombra; o pedido
   foi só da home, então os cantos daqui continuam como estavam.

   O CÉU DAS FAIXAS (23/10/2026, escolha do dono: "Via Láctea sobre a mata" em
   todas as seções de fundo azul, menos o rodapé): no lugar da foto de capa da
   página, o `--ceu` (publicado em conteudo.tsx), sob o mesmo véu leve da home.
   Ancorado embaixo, para a mata aparecer também nas faixas baixas e largas.
   Sem `--ceu`, fica só o véu sobre o navy. O `--capa` continua publicado.

   RETAS E COM SOMBRA, COMO NA HOME (24/10/2026, pedido do dono: «arrumar todas
   as sessões que têm esse background azul para que todas tenham a divisória
   reta e com sombra, igual na página de início»). Saem os cantos de 72px (e os
   44px do celular, mais abaixo); entra a MESMA sombra das faixas da home, em
   cima e embaixo. `position`/`z-index` para a sombra passar por cima das
   seções claras vizinhas — as faixas eram `static`. Inventário de 24/10 nas 49
   páginas do sitemap: só estas duas classes (Fundador, Faça Parte, Doar e
   Receber Energia, PT e EN); as capas de página não entram. */
.f1a--areia,
.de-fx--navy{
  position:relative;z-index:2;overflow:hidden;
  box-shadow:0 14px 26px -10px rgba(4,10,22,.42),0 4px 10px -6px rgba(4,10,22,.28),
    0 -14px 26px -10px rgba(4,10,22,.42),0 -4px 10px -6px rgba(4,10,22,.28);
  background-image:linear-gradient(180deg,rgba(18,35,63,.55) 0%,rgba(14,28,51,.72) 100%),var(--ceu, none);
  background-size:cover;background-position:center bottom;background-repeat:no-repeat;
}

/* ── Barras da moldura LIMITADAS À COLUNA DO CONTEÚDO ───────────────────────
   Pedido do Rafael (17/09/2026): as barras continuam COLADAS na borda — isso
   não muda —, mas o retângulo colorido para onde o conteúdo para. Antes ia de
   ponta a ponta da tela enquanto a linha (logo … botão) parava na coluna de
   1440px: num monitor largo sobravam centenas de pixels de barra vazia de cada
   lado. Agora a faixa pintada acompanha a coluna — na home aparece a foto da
   capa pelas laterais; nas páginas internas, o papel do fundo.

   Vale para as DUAS faixas da moldura, que o CSS acima já trata como par: o
   cabeçalho (todas as páginas) e a barra de próximos eventos no pé da capa.
   O recuo é a mesma variável nas duas, para nunca saírem desalinhadas.

   `width:min(100% - 2×recuo, --max)`: em tela estreita recua só o bastante para
   não encostar na borda; a partir de 1440px para de crescer junto com a coluna.

   Sem `overflow:hidden`: os submenus (`.sb-sub`) e o menu do celular
   (`.sb-menu.open`) saem para fora do cabeçalho e seriam cortados. O recorte
   vem do border-radius das próprias faixas, e cada uma arredonda só o lado
   OPOSTO à borda em que encosta: o cabeçalho embaixo, a barra de eventos em
   cima. */
/* `--barra-altura` é a altura REAL do cabeçalho (43 da faixa utilitária + 84 da
   barra do menu), medida nos dois breakpoints. Existe porque `--header-h`, que
   o script do site publica, vale 0 nas páginas do Acervo — elas não rodam esse
   script, e quem dependesse dela ficava sem o empurrão. */
body{--barra-recuo:24px;--barra-raio:18px;--barra-altura:127px}
/* 700px, e não 680: é em ≤700px que o botão "Doe e receba energia" sai e a
   faixa do menu encolhe — com 680, entre 681 e 700px sobravam 4px do fundo da
   capa entre o cabeçalho e a foto do destaque, que começa em `--barra-altura`. */
@media(max-width:700px){body{--barra-altura:123px}}
/* O CABEÇALHO VOLTOU A SER RETO E DE PONTA A PONTA (21/10/2026, pedido do dono
   e dos três revisores, em agenda-ref/ no testagent): sem recuo, sem cantos e
   com o miolo na MESMA coluna das seções da home (`.hb-in`: 1440 de teto, 48px
   por dentro) — logo, texto da capa e seções começam na mesma linha. As duas
   faixas antigas do pé da capa (`.hb-evbar`, `.hb-agenda`) seguem a medida de
   antes, mas não são mais renderizadas. */
.hb-evbar,
.hb-agenda{
  width:min(calc(100% - var(--barra-recuo) * 2),var(--max));
  margin-inline:auto}
.hb-evbar{border-radius:var(--barra-raio) var(--barra-raio) 0 0}
.hb-evbar>.hb-in{padding-inline:28px}
@media(max-width:680px){
  body{--barra-recuo:10px;--barra-raio:14px}
  .hb-evbar>.hb-in{padding-inline:18px}
}

/* ── Capa das páginas internas: LOGO ABAIXO da barra de topo ─────────────────
   De 23/09 a 21/10/2026 o cabeçalho, então uma ilha de cantos redondos, saía do
   fluxo nas páginas com capa e a foto corria por trás dele, aparecendo nas
   laterais. DESFEITO em 21/10/2026: com o cabeçalho reto e de ponta a ponta, a foto que
   corria por trás dele ficava cortada em cima — o dono pediu a imagem inteira,
   começando logo abaixo da barra. O cabeçalho voltou ao fluxo nessas páginas
   e a capa DESCEU INTEIRA: mantém a altura de antes (`--capa-h` + a altura do
   cabeçalho, por onde ela corria), só que agora começa abaixo dele — a foto
   não encolhe nem perde a parte de cima. A migalha volta à medida normal. */
body:has(main > .cover) .cover,
body:has(main > span > .cover) .cover,
body:has(main > div > .cover) .cover{height:calc(var(--capa-h) + var(--barra-altura))}



/* ── RODAPÉ E BARRA NA LARGURA DA HOME (23/09/2026) ───────────────────────
   O dono pediu a barra de topo com a largura do rodapé e, em seguida, o
   rodapé com a MESMA largura em todas as páginas: "a página de início manda".

   Até então o miolo do rodapé recuava 48px fixos na home e --gut (5,5vw, até
   79,2px) nas páginas internas — em 1440, 1344px contra 1282px, e a barra,
   que seguia o rodapé de cada página, mudava de largura ao sair da home.
   Agora o rodapé usa a medida da home em todo lugar (1440 de teto, 48px de
   cada lado) e a barra, a partir de 1280px, a mesma — as bordas batem em
   qualquer página.

   O menu (Início · Sobre · Principais Temas · Atividades · Agenda · Como
   Ajudar · Acervo; "Contato" no submenu de "Sobre") é conteúdo, no Payload
   (Site › Menu). Aqui só o desenho: sem o `margin-left:auto` o botão deixa de
   empurrar a sobra toda para um lado e o menu fica no meio entre logo e botão.
   Abaixo de 1280px o menu vira gaveta e a barra fica como era. */
body>footer .wrap{max-width:1440px;padding-inline:48px}
@media (min-width:1280px){
  .hb-evbar,.hb-agenda{
    width:calc(min(100%, var(--max)) - 96px);
    margin-inline:auto;
  }
  .hbh-cta{margin-left:0}
}
/* NOTEBOOK (1280–1439px). Quando a barra das páginas internas ainda seguia o
   rodapé delas (5,5vw), o botão passava da borda: medido em 23/09, até 34px
   em 1280 (inglês) e 29px em 1366. Com a barra na largura da home e
   "Principais Temas" de volta, sobram 53px ou mais de cada lado do menu em
   1280 — as folgas ficam como margem. Três folgas, só nesta faixa de largura:
     · o vão entre logo, menu e botão cai de 44 para 32px;
     · o vão entre itens fica em 20px até 1439 (antes só até 1360);
     · até 1360px a fonte do menu vai a 15px (a regra antiga ia a 13,5).
   Acima de 1440 nada disso vale: sobram 62px ou mais de cada lado do menu. */
@media (min-width:1280px) and (max-width:1439px){
  .hbh .hbh-r2>.hb-in{gap:32px}
  .hbh .sb-menu{gap:20px}
}
@media (min-width:1280px) and (max-width:1360px){
  .hbh .sb-menu>.sb-item>a{font-size:15px}
}

/* FAIXAS AZUIS DA PÁGINA INICIAL (23/10/2026, escolha do dono entre as opções
   de passagem): retas, de ponta a ponta, com sombra em cima e embaixo, no tom da
   sombra da barra branca do topo. Substitui o "cartão" de cantos arredondados
   de 20/10. `z-index` para a sombra ficar por cima das seções brancas vizinhas. */
main.hb>.hb-band{z-index:2;
  box-shadow:0 14px 26px -10px rgba(4,10,22,.42),0 4px 10px -6px rgba(4,10,22,.28),
    0 -14px 26px -10px rgba(4,10,22,.42),0 -4px 10px -6px rgba(4,10,22,.28)}
/* Véu bem mais leve que o padrão (.93/.96) para o céu das faixas aparecer — a
   "Via Láctea sobre a mata", escolhida pelo dono em 23/10/2026. A foto
   anterior (o cosmos da página de Contato) pedia .89/.94: ampliada, ela
   borrava e manchava. Esta já é escura por natureza. */
main.hb>.hb-band>.hb-fade{background:linear-gradient(180deg,rgba(18,35,63,.55) 0%,rgba(14,28,51,.72) 100%)}

/* FILEIRA DE TEMAS GIRANDO SEM FIM (23/10/2026, pedido do dono), para os dois
   lados (o laço está no jsDoSite, em `data-roda-temas`). Parada, mostra SÓ
   cartões inteiros e nunca o mesmo tema duas vezes ("eu só quero poder ver
   cinco cards"): cada cartão ocupa 1/5 da coluna e a rolagem encaixa cartão a
   cartão. Onde cinco não cabem (o cartão precisa de ~200px; ~140px com a
   ilustração menor do celular), cabem quatro, três, dois.
   NA COLUNA DO SITE: a fileira chegou a ir de ponta a ponta da tela, e o dono
   voltou atrás no mesmo dia ("ficou um pouco diferente do resto da página"):
   os cartões seguem as margens das outras seções. A janela da rolagem passa
   meio vão (10px) de cada lado da coluna, para as bordas dos cartões caírem
   exatamente nas margens; nada aparece cortado além disso.
   O respiro de 16px em cima e 56px embaixo é para a subida e a sombra do hover
   não serem cortadas pela rolagem; as margens dão a distância ao subtítulo
   (80px; era 56, o dono pediu mais) e ao pé da seção (52px).

   PAPEL COM CANTOS RETOS (23/10/2026, escolha do dono entre sete variações de
   cartão; o painel único com divisórias foi aplicado antes e ele não gostou):
   o mesmo papel, sem contorno. Os cantos começaram em 4px e ganharam um leve
   arredondamento (10px) a pedido dele: "não deixa tão quadrado assim". O
   desenho tinha ficado em 164px e o dono achou o
   cartão grande para o ícone: subiu para 204px (até 100% da largura útil, para
   não vazar nos cartões mais estreitos), com menos respiro em cima e embaixo. */
.hb-temas-roda{--vis:5;--vao:20px;position:relative;display:flex;
  margin:64px calc(var(--vao) / -2) -56px;padding:16px 0 56px;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;
  scroll-snap-type:x mandatory}
.hb-temas-roda::-webkit-scrollbar{display:none}
.hb-temas-roda>.hb-tema{flex:0 0 calc(100% / var(--vis) - var(--vao));min-width:0;
  margin-inline:calc(var(--vao) / 2);scroll-snap-align:start;scroll-margin-inline:calc(var(--vao) / 2);
  padding:22px 18px 24px;border:0;border-radius:10px;background:var(--hb-papel)}
.hb-temas-roda>.hb-tema>img{width:min(204px,100%);height:auto}
/* Comportamento ocupa menos do próprio arquivo e lia menor: cresce 16% só no
   desenho (`scale`), com a caixa igual à dos outros — com largura própria e
   margem negativa, o nome dele subia até 19px nos cartões mais estreitos. */
.hb-temas-roda>.hb-tema--comportamento-humano>img{width:min(204px,100%);height:auto;margin:0;transform:scale(1.16)}
/* Nome do tema sempre numa linha: a fonte acompanha a largura do PRÓPRIO
   cartão (`cqi`), que muda com a tela e com quantos cartões cabem. Em 25px fixos
   "Imposição de Mãos" quebrava nos cartões de 1280px e o vizinho não. O
   seletor em inglês vence o `html[lang="en"] .hb-tema h3` de 23px. */
.hb-temas-roda>.hb-tema{container-type:inline-size}
.hb-temas-roda>.hb-tema h3{margin-top:16px;font-size:clamp(14px,10.8cqi,25px)}
html[lang="en"] .hb-temas-roda>.hb-tema h3{font-size:clamp(14px,10.8cqi,23px)}
/* Arrastando com o mouse, o encaixe desliga; ao soltar, o script desliza até o
   cartão mais próximo e religa. */
.hb-temas-roda.is-arrastando{scroll-snap-type:none;cursor:grabbing;user-select:none}
@media(max-width:1279px){.hb-temas-roda{--vis:4}}
@media(max-width:1023px){.hb-temas-roda{--vis:3}}
@media(max-width:767px){.hb-temas-roda{--vis:2}}
@media(max-width:680px){
  .hb-temas-roda{--vao:14px;margin-top:48px}
  .hb-temas-roda>.hb-tema{padding:18px 8px 20px}
  .hb-temas-roda>.hb-tema>img{width:min(140px,100%)}
  .hb-temas-roda>.hb-tema--comportamento-humano>img{width:min(140px,100%)}
  .hb-temas-roda>.hb-tema h3{margin-top:14px}
}
@media(max-width:359px){.hb-temas-roda{--vis:1}}

/* "Agenda completa" com o ícone de calendário antes, sem a seta (20/10/2026). */
.hb-evbar-all{display:inline-flex;align-items:center;gap:9px}
.hb-evbar-all svg{flex:none;margin-top:-1px}

/* MAIS RESPIRO NAS SEÇÕES DA PÁGINA INICIAL (20/10/2026, pedido do dono: "está
   tudo muito colado, a densidade está muito grande"): +40px em cima e embaixo
   de cada seção — Sobre 180→220, Temas 150→190, Participe 152→192, Últimos
   conteúdos 124→164 em cima. Avaliações enche a tela e centraliza o conteúdo,
   então o acréscimo entra na altura mínima (+80px) e no padding (124→164).
   A última seção (Últimos conteúdos) tem o respiro de baixo dobrado pela regra
   `html.snap section:last-of-type`; aqui ele ganha os mesmos +40px. */
html.snap main.hb>section.hb-conteudos:last-of-type{padding-bottom:calc(2 * clamp(58px,7.5vw,104px) + 40px)}

/* ═══════════════════════════════════════════════════════════════════════════
   AGENDA NO PÉ DA CAPA, COMO CARTÃO ESPELHADO (21/10/2026) — no lugar da faixa
   azul antiga. Cartão claro no tom do cabeçalho (#F1EFE9), com a MESMA largura
   (`--barra-recuo`/`--max`) e a MESMA curva (`--barra-raio`) do cabeçalho,
   invertida, apoiado na borda de baixo da foto. 96px, numa linha só.
   ═══════════════════════════════════════════════════════════════════════════ */
/* A LARGURA vem das mesmas regras do cabeçalho (`.hbh-r1,.hbh-r2,…` acima),
   para as bordas dos dois baterem em qualquer tela. */
.hb-agenda{position:absolute;left:0;right:0;bottom:0;z-index:4;
  background:#F1EFE9;border-radius:var(--barra-raio) var(--barra-raio) 0 0;
  box-shadow:0 -14px 30px -16px rgba(4,10,22,.40)}
.hb-agenda-in{height:96px;display:grid;grid-template-columns:auto repeat(var(--hb-agenda-n,3),minmax(0,1fr)) auto;
  align-items:center;padding:0 28px}
.hb-agenda .hb-agenda-tit{margin:0;padding-right:28px;font:400 22px/1 'Source Serif 4',Georgia,serif;color:#233658;letter-spacing:0;text-transform:none}
.hb-agenda-ev{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:center;
  height:52px;padding:0 24px;border-left:1px solid #DDD7CA;text-decoration:none}
.hb-agenda-data{display:block;text-align:center;line-height:1}
.hb-agenda-data b{display:block;font:400 28px/1 'Source Serif 4',Georgia,serif;color:#233658}
.hb-agenda-data span{display:block;margin-top:3px;font:500 12.5px/1 Karla,system-ui,sans-serif;color:#7A7568}
.hb-agenda-txt{min-width:0}
.hb-agenda-nome{display:block;font:400 16.5px/1.25 'Source Serif 4',Georgia,serif;color:#1F2737;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-agenda-quando{display:block;margin-top:3px;font:400 13.5px/1.3 Karla,system-ui,sans-serif;color:#6F6A5C}
.hb-agenda-ev:hover .hb-agenda-nome{color:#9C7C43}
.hb-agenda-todos{display:inline-flex;align-items:center;gap:8px;height:52px;padding-left:24px;border-left:1px solid #DDD7CA;
  font:500 15px/1 Karla,system-ui,sans-serif;color:#233658;text-decoration:none;white-space:nowrap}
.hb-agenda-todos:hover span{text-decoration:underline;text-underline-offset:3px}
/* O texto da capa centraliza ACIMA do cartão; o anel de carregamento do vídeo
   sobe junto para não ficar por baixo dele. */
.hb-hero:has(.hb-agenda) .hb-hero-txt{bottom:96px}
.hb-hero:has(.hb-agenda) .hb-carregando{bottom:116px}
/* O botão flutuante do WhatsApp ocupa os últimos ~78px da tela, no canto de
   baixo. Abaixo de 1500px ele cai em cima do fim do cartão, onde fica o link
   da agenda: o miolo do cartão recua à direita para o link ficar livre. */
@media(max-width:1499px){
  .hb-agenda-in{padding-right:64px}
  /* Notebook: menos respiro entre as colunas, para o título caber inteiro. */
  .hb-agenda .hb-agenda-tit{padding-right:22px}
  .hb-agenda-ev{padding:0 18px}
  .hb-agenda-todos{padding-left:18px}
}
/* Abaixo de 1366px, dois encontros: com três, os títulos seriam cortados. */
@media(max-width:1365px){
  .hb-agenda-in{grid-template-columns:auto repeat(2,minmax(0,1fr)) auto}
  .hb-agenda-ev:nth-of-type(n+3){display:none}
}
/* Tela estreita: só o próximo encontro. */
@media(max-width:980px){
  .hb-agenda-in{grid-template-columns:auto minmax(0,1fr) auto;padding:0 84px 0 18px}
  .hb-agenda-ev:nth-of-type(n+2){display:none}
}
@media(max-width:680px){
  .hb-agenda .hb-agenda-tit{display:none}
  .hb-agenda-ev{padding-left:0;border-left:0}
  /* No celular o título pode ocupar duas linhas, em vez de ser cortado. */
  .hb-agenda-nome{white-space:normal;font-size:15.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
@media(max-width:560px){
  .hb-agenda-in{padding-right:96px}
  .hb-agenda-todos span{display:none}
  .hb-agenda-todos{padding-left:16px}
}

/* ═══ BARRA DE TOPO — «MENU FIRME» (23/10/2026, escolha do dono) ══════════════
   Refinamento das duas faixas do cabeçalho, mantendo a estrutura (faixa azul
   com redes, aviso, Loja, Área de Membros e idioma; faixa clara com logo, menu
   e botão) e as MARGENS (o miolo segue a coluna `.hb-in`: 1440px, 48px de cada
   lado). Referência: o cabeçalho da Smithsonian (si.edu) — firmeza e espaço em
   vez de fios e caixa alta. Mockups e comparações em
   testagent/barra-topo-propostas/ (menu-firme.html, sombra.html).

   Decisões do dono nesta rodada:
     · faixa clara BRANCA, menu em Karla 600 na tinta, setinha nos itens com
       submenu, botão em caixa normal;
     · SEM barra no item selecionado do menu (nem hover, nem submenu aberto,
       nem gaveta) — a página atual não leva marca;
     · as duas faixas finas: 38 + 84px (antes 43 + 84; a proposta tinha 44 + 96
       e um meio-termo de 41 + 90 também ficou alto);
     · Loja e Área de Membros em Karla, caixa normal;
     · a mesma sombra de antes embaixo da faixa clara.

   Fica POR ÚLTIMO no arquivo de propósito: sobrescreve os blocos anteriores do
   cabeçalho (`.hbh`, a faixa clara "TESTE", o notebook) sem mexer neles.
   Apagar daqui até o fim devolve a barra ao desenho anterior. */

/* ── alturas: 38 + 84 = 122 (celular 38 + 74 = 112) — `--barra-altura` é onde
   a foto da capa começa, nas duas larguras ──────────────────────────────── */
body{--barra-altura:122px}
@media(max-width:700px){body{--barra-altura:112px}}

/* ── faixa escura ───────────────────────────────────────────────────────── */
/* Cor única e sólida, sem fio embaixo: a divisa é a troca de cor. */
.hbh-r1{background:#132444;border-bottom:0}
.hbh .hbh-r1>.hb-in{height:38px;gap:22px}
.hbh-social{gap:20px}
.hbh-social a{color:rgba(255,255,255,.52)}
.hbh-social svg{width:15px;height:15px}
.hbh-fio,.hbh-fio--alto{height:16px;background:rgba(255,255,255,.16)}
.hbh-aviso{gap:9px;font:400 13.5px/1 var(--body);color:rgba(255,255,255,.66)}
.hbh-aviso svg{width:15px;height:15px;opacity:.75}
.hbh-aviso-txt b{font-weight:600;color:#fff}
.hbh-aviso:hover,.hbh-aviso:hover b{color:#fff}

/* Loja · Área de Membros: Karla (a mesma letra do aviso, do menu e do botão —
   a Inter só existe em 600 no site e pesava), caixa normal, sem tracking; o
   ícone vem antes do texto e mais apagado que ele, para a faixa não competir
   com a capa. */
.hbh-utils{gap:28px}
.hbh-utils>a{gap:8px;font:500 14px/1 var(--body);letter-spacing:0;
  text-transform:none;color:#fff}
.hbh-utils>a svg{width:14px;height:14px;opacity:.6;transition:opacity .2s ease}
.hbh-loja,.hbh-membro{color:#fff}
.hbh-loja:hover,.hbh-membro:hover{color:#fff;text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px}
.hbh-utils>a:hover svg{opacity:1}
.hbh .lang-toggle{gap:10px}
.hbh .lang-toggle .lang-bandeira{width:20px;height:14px;display:block}
.hbh .lang-toggle a{opacity:.42}
.hbh .lang-toggle a[aria-current]{opacity:1}
.hbh .lang-toggle a:hover{opacity:1}

/* lista da agenda: a mesma família dos submenus — branca, reta, encostada na
   borda de baixo da faixa escura, linhas separadas por fio fino */
.hbh-lista{top:calc(100% + 14px);left:-16px;min-width:440px;padding:0;background:#fff;
  border:0;border-radius:0;box-shadow:0 1px 0 #E2DED5,0 22px 40px -16px rgba(4,10,22,.34);
  transform:translateY(4px)}
.hbh-lista::before{top:-16px;height:16px}
.hbh-lista a{padding:16px 22px;border-radius:0;column-gap:18px;border-top:1px solid #EEEBE4}
.hbh-lista a:first-child{border-top:0;background:none}
.hbh-lista a:hover{background:#F6F4EF}
.hbh-lista b{font:600 15px/1.4 var(--body);color:#1A2233}
.hbh-lista span{font:400 15px/1.4 var(--body);color:#1A2233}
.hbh-lista i{font-size:13.5px;color:#55607A;margin-top:2px}
.hbh-lista .hbh-lista-todos{margin:0;padding:16px 22px;border-top:1px solid #E2DED5;background:#FAF9F5;
  font:600 15px/1 var(--body);color:#132444}
.hbh-lista .hbh-lista-todos:hover{background:#F1EFE9;color:#132444}
.hbh-lista-todos svg{width:15px;height:15px}

/* ── faixa clara: branca ─────────────────────────────────────────────────── */
/* Branco puro (antes o papel-2 #F1EFE9). A sombra é a mesma de antes (fio de
   1px + sombra suave, pedida pelo dono em 22/10): separa a faixa das capas
   claras e médias; nas escuras não aparece. */
.hbh-r2{background:#fff;box-shadow:0 1px 0 #E2DED5,0 10px 22px -8px rgba(4,10,22,.38)}
.hbh .hbh-r2>.hb-in{height:84px;padding-block:0;gap:36px}
.hbh-logo img{height:50px}

/* botão: reto, caixa normal, na cor da faixa escura — amarra as duas faixas */
.hbh-cta{height:46px;padding:0 24px;gap:10px;border-radius:0;background:#132444;color:#fff;
  font:600 16px/1 var(--body);letter-spacing:0;text-transform:none}
.hbh-cta:hover{background:#233658}
.hbh-cta-ico{width:21px;height:21px}

/* ── menu (desktop) ─────────────────────────────────────────────────────── */
@media(min-width:1280px){
  .hbh .sb-menu{gap:30px;align-self:stretch}
  .hbh .sb-item{display:flex}
  /* Todos os itens no mesmo peso firme, na tinta: caixa normal, 600. O item
     ocupa a altura da faixa — o submenu nasce na borda de baixo dela. */
  .hbh .sb-menu>.sb-item>a{position:relative;height:100%;padding:0;font:600 16px/1 var(--body);
    color:#1A2233;letter-spacing:0}
  .hbh .sb-menu>.sb-item>a{transition:color .2s ease}
  .hbh .sb-menu>.sb-item.on>a{color:#1A2233;font-weight:600}
  /* SEM RÉGUA (pedido do dono: «tire aquela barra azul do menu selecionado»).
     Nenhuma barra em estado nenhum — nem no ativo, nem no hover, nem com o
     submenu aberto. O hover é só cor, no azul que o site já usa no hover dos
     submenus (#274A90). O item da página atual não leva marca. */
  .hbh .sb-menu>.sb-item>a:hover,.hbh .sb-menu>.sb-item:hover>a{color:#274A90}
  /* Divisa de submenu: chevron do mesmo traço do texto, 9px depois do rótulo;
     vira para cima com o submenu aberto. */
  .hbh .sb-menu>.sb-item>a.sb-has::after{content:"";width:6.5px;height:6.5px;margin:-4px 0 0 9px;flex:none;
    border:solid currentColor;border-width:0 1.8px 1.8px 0;transform:rotate(45deg);
    transition:transform .2s ease}
  .hbh .sb-menu>.sb-item:hover>a.sb-has::after{transform:translateY(3px) rotate(225deg)}

  /* submenus: brancos, retos, encostados na borda da faixa, sem raio */
  .hbh .sb-sub{top:100%;left:-22px;min-width:264px;padding:8px 0;background:#fff;border:0;border-radius:0;
    box-shadow:0 1px 0 #E2DED5,0 22px 40px -16px rgba(4,10,22,.34);transform:translateY(4px)}
  .hbh .sb-sub a{padding:13px 22px;border-radius:0;font:400 16px/1.3 var(--body);color:#1A2233}
  .hbh .sb-sub a:hover,.hbh .sb-sub-pai:hover>a{background:#F6F4EF;color:#132444}
  .hbh .sb-sub2{border:0;border-radius:0;padding:8px 0;background:#fff;
    box-shadow:0 1px 0 #E2DED5,0 22px 40px -16px rgba(4,10,22,.34)}
}
/* notebook: mesmo desenho, folgas menores */
@media (min-width:1280px) and (max-width:1439px){
  .hbh .hbh-r2>.hb-in{gap:28px}
  .hbh .sb-menu{gap:24px}
  .hbh .sb-menu>.sb-item>a{font-size:15.5px}
  .hbh-logo img{height:48px}
  .hbh-cta{padding:0 22px;font-size:15.5px}
}
@media (min-width:1280px) and (max-width:1360px){
  .hbh .sb-menu{gap:20px}
  .hbh .sb-menu>.sb-item>a{font-size:15px}
  .hbh .sb-menu>.sb-item>a.sb-has::after{margin-left:8px;width:6px;height:6px}
  .hbh-logo img{height:46px}
  .hbh-cta{padding:0 20px;font-size:15px}
}

/* ── gaveta (≤1279): branca, reta, rótulos firmes, sub-itens soltos ─────── */
@media(max-width:1279px){
  .hbh .hbh-r2>.hb-in{gap:20px}
  .hbh-logo img{height:46px}
  .hbh-cta{height:42px;padding:0 20px;font:600 15px/1 var(--body);letter-spacing:0;text-transform:none}
  .hbh .sb-burger{color:#132444}
  .hbh .sb-menu{background:#fff;border-top:1px solid #E2DED5;border-radius:0;
    box-shadow:0 24px 40px -18px rgba(4,10,22,.36);padding:4px 0 16px}
  .hbh-r2:has(.sb-menu.open){border-radius:0}
  .hbh .sb-menu-lang{border-bottom:1px solid #EEEBE4;padding:14px clamp(20px,4vw,48px);margin:0}
  .hbh .sb-menu>.sb-item{border-bottom:1px solid #EEEBE4}
  .hbh .sb-menu>.sb-item:last-child{border-bottom:0}
  .hbh .sb-menu>.sb-item>a{display:flex;align-items:center;padding:16px clamp(20px,4vw,48px);border-radius:0;
    font:600 17px/1.2 var(--body);color:#1A2233}
  .hbh .sb-menu>.sb-item>a:hover{background:#F6F4EF;color:#1A2233}
  .hbh .sb-menu>.sb-item.on>a{background:#F6F4EF;box-shadow:none}
  /* quem tem submenu mostra a divisa já aberta (para baixo), e os filhos
     aparecem logo abaixo, soltos, sem cartão */
  .hbh .sb-menu>.sb-item>a.sb-has{padding-bottom:6px}
  .hbh .sb-menu>.sb-item>a.sb-has::after{content:"";width:6.5px;height:6.5px;margin:-4px 0 0 10px;flex:none;
    border:solid currentColor;border-width:0 1.8px 1.8px 0;transform:rotate(45deg);opacity:.55}
  .hbh .sb-sub{position:static;opacity:1;visibility:visible;transform:none;background:transparent;border:0;
    box-shadow:none;border-radius:0;padding:0 0 10px;min-width:0}
  .hbh .sb-sub a{padding:10px clamp(20px,4vw,48px);border-radius:0;font:400 16px/1.3 var(--body);
    color:#3A4459;white-space:normal}
  .hbh .sb-sub a:hover{background:#F6F4EF;color:#1A2233}
  .hbh .sb-sub2{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;
    padding:0;background:transparent;min-width:0}
  .hbh .sb-sub2 a{padding-left:calc(clamp(20px,4vw,48px) + 16px);font-size:15px;color:#55607A}
  .hbh .sb-sub-seta{display:none}
}
@media(max-width:700px){
  .hbh .hbh-r2>.hb-in{height:74px}
  .hbh-logo img{height:44px}
  .hbh-aviso{font-size:14px}
}

/* ═══ CAPAS DA HOME — TÍTULO, SUBTÍTULO E BOTÕES (23/10/2026, escolha do dono) ═══
   «Título nítido, botões da barra» (referência: a capa da Six Senses), com o
   título em Marcellus SC (a fonte nova dos títulos — ver `marcellus` em
   components/site/fontes.ts). Mockups e comparações em
   testagent/capas-texto-propostas/ (escolhida.html, fontes.html, fonte-site.html).

     · título em branco puro com sombra quase invisível (segura a leitura na
       foto clara do Sítio), entrelinha que lê as duas linhas como um bloco;
     · subtítulo um pouco mais claro e mais perto do título;
     · botões no desenho do botão da barra de topo: Karla 600 16px em caixa
       normal, retos — antes eram CAIXA ALTA miúda e espaçada, e destoavam.

   Medidas do título com o `size-adjust` de 116,5% da Marcellus: 52px aqui
   desenham como 60,6px, a medida aprovada. Por isso a entrelinha vai a 1.22
   (= 1.05 × 1,165) e a largura máxima é 12,5em (= os 650px dos 20ch do Cinzel)
   — com ela as cinco capas quebram o título nos mesmos lugares de antes. */
.hb .hb-hero-txt .hb-titulo{
  font:400 52px/1.22 var(--disp);letter-spacing:.023em;color:#fff;max-width:12.5em;
  text-shadow:0 1px 12px rgba(0,0,0,.25)}
.hb .hb-hero-txt .hb-lede{
  margin-top:18px;font:400 18px/1.55 var(--body);color:rgba(255,255,255,.9);
  text-shadow:0 1px 10px rgba(0,0,0,.25)}
.hb .hb-hero-btns{margin-top:34px;gap:12px}
.hb .hb-hero-txt .hb-btn{
  height:50px;padding:0 28px;border-radius:0;
  font:600 16px/1 var(--body);letter-spacing:0;text-transform:none}
.hb .hb-hero-txt .hb-btn--paper{background:#FAF9F5;color:#132444}
.hb .hb-hero-txt .hb-btn--paper:hover{background:#fff}
.hb .hb-hero-txt .hb-btn--ghost{border:1px solid rgba(255,255,255,.7);color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.2)}
.hb .hb-hero-txt .hb-btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
@media(max-width:1180px){
  .hb .hb-hero-txt .hb-titulo{font-size:44px}
}
@media(max-width:860px){
  .hb .hb-hero-txt .hb-titulo{font-size:37px}
  .hb .hb-hero-txt .hb-lede{font-size:16.5px}
  .hb .hb-hero-txt .hb-btn{height:46px;padding:0 22px;font-size:15px}
}
@media(max-width:680px){
  .hb .hb-hero-txt .hb-titulo{font-size:clamp(24px,6.4vw,27px);line-height:1.235;max-width:none}
  .hb .hb-hero-txt .hb-lede{font-size:16px;line-height:1.55;min-height:calc(3 * 1.55em);margin-top:12px}
  .hb .hb-hero-btns{margin-top:22px;gap:10px}
  .hb .hb-hero-txt .hb-btn{height:46px;padding:0 18px;font-size:15px;letter-spacing:0}
}
/* Ajuste fino da troca para a Marcellus: a largura máxima do título da faixa de
   temas é em `ch`, e o `ch` da Marcellus é outro — a quebra passou a sobrar uma
   linha curta («…encontra / por aqui»). `balance` divide as duas linhas por igual. */
.hb-temas h2{text-wrap:balance}

/* ═══ PÁGINA INICIAL — «UM POUCO SOBRE O CEC», REFINO (24/10/2026) ═══════════════
   Escolha do dono: «Retrato em destaque». Refino, não redesenho («eu quero só um
   refinamento… não vem com uma estrutura completamente nova»): mesma grade,
   mesmas quatro fotos, mesmos textos. Mockups em
   testagent/inicio-sobre-propostas/ (index.html: diagnóstico e as três variações).

   O espaço antes e depois da seção (220px) e a regra «a coluna de texto termina
   junto com as fotos» (18/09) continuam — agora garantidos por construção, em
   qualquer largura, e não pela conta do tamanho da letra. */

/* Texto e fotos com as MESMAS bordas: a tinta do título encosta no topo das
   fotos (o −5px desconta o respiro de cima da Marcellus — medido pela tinta:
   antes o título começava 29px abaixo) e a fileira de números termina rente à
   base delas (a coluna de texto vira coluna flexível e os números descem até o
   pé; no notebook, onde o texto é mais alto, são as fotos que esticam — antes
   sobravam 128px em 1280). */
.hb-sobre .hb-grid{align-items:stretch}
.hb-sobre .hb-grid>div:first-child{display:flex;flex-direction:column}
.hb-sobre h2{margin-top:-5px;color:#132444}
.hb-sobre .hb-grid>div:first-child>p:last-of-type{margin-bottom:44px}
.hb-sobre .hb-fatos{margin-top:auto}
/* Corpo «maior e confortável» (escolha do dono, 24/10): Karla 18 → 19px, letras
   um pouco mais juntas (−.01em: a Karla é larga e o parágrafo espalhava) e
   entrelinha 1.85 → 1.68; um tom um pouco mais suave que o título, para a
   hierarquia ficar também na cor (o título vai ao navy da barra de topo).
   Comparação em testagent/inicio-sobre-propostas/texto.html. */
.hb-sobre p{margin-top:30px;font-size:19px;line-height:1.68;letter-spacing:-.01em;color:#3B4458}
.hb-sobre p + p{margin-top:20px}
.hb-sobre .hb-fato-leg{font-size:14.5px}
/* Rótulos dos números no teal dos demais rótulos do site; números no navy da barra. */
.hb-sobre .hb-fato-rot{color:#0E7C86}
.hb-sobre .hb-fatos b{color:#132444}

/* Cantos RETOS nas fotos e no cartão, como todo o resto da página (ver
   «CANTOS DA PÁGINA INICIAL», logo abaixo). O cartão acompanhava o raio das
   fotos por escolha do dono (30/08) — continua acompanhando, agora no reto.
   Vãos 20 → 14px. */
.hb-sobre-fotos .hb-foto-a,.hb-sobre-fotos .hb-foto-b,
.hb-sobre-fotos .hb-foto-c,.hb-sobre-fotos .hb-foto-d{border-radius:0}
.hb-sobre .hb-fato-cartao{border-radius:0;background:#132444}
.hb-sobre .hb-fato-cartao:hover{background:#233658}
/* O mosaico deixa de ser simétrico: o retrato do Moisés fica mais largo (o
   ponto focal) e as duas fotos do jardim, mais estreitas e em alturas
   diferentes (uma alta, uma baixa). */
.hb-sobre-fotos .hb-dupla{gap:14px;margin-top:14px;grid-template-columns:1.25fr .75fr}
/* Fotos MAIS VIVAS (24/10/2026, escolha do dono): os arquivos agora são as versões
   «-viva» (tratamento de luz e cor — ver render.ts), e saem o filtro de −10% de
   saturação e o véu navy de 10% que as apagavam («para a fileira ler como um
   conjunto»): o tratamento novo já deixa as quatro com o mesmo acabamento. */
.hb-sobre-fotos img{filter:none}
.hb-sobre-fotos .hb-foto-a::after,.hb-sobre-fotos .hb-foto-b::after,
.hb-sobre-fotos .hb-foto-c::after,.hb-sobre-fotos .hb-foto-d::after{background:none}
/* No computador as alturas vêm das linhas da grade (e o bloco estica até a
   altura da linha); no celular, de uma coluna só, vêm da proporção. */
@media(min-width:1025px){
  .hb-sobre-fotos{display:flex;flex-direction:column}
  .hb-sobre-fotos .hb-dupla{flex:1 1 auto;min-height:371px;grid-template-rows:1.75fr 1fr}
  .hb-sobre-fotos .hb-foto-c,.hb-sobre-fotos .hb-foto-d{aspect-ratio:auto}
}
@media(max-width:1024px){
  .hb-sobre-fotos .hb-foto-c{aspect-ratio:1/1}
  .hb-sobre-fotos .hb-foto-d{aspect-ratio:1.75/1}
}

/* ═══ CANTOS DA PÁGINA INICIAL — TUDO RETO (24/10/2026, escolha do dono) ═══════
   Havia de tudo, de 2 a 16px. O dono comparou «como estava × 4px × tudo reto»
   (testagent/inicio-sobre-propostas/cantos.html) e, depois de ver as duas no
   site, ficou com o reto: fotos, cartões e etiquetas («Semanal»,
   «Programação»…) sem raio, como a barra de topo, as faixas azuis e os botões.
   Só os avatares continuam redondos. Mesmos seletores das regras originais,
   para empatar a especificidade e o bloco ganhar por vir depois. */
.hb-tema,
.hb-temas-roda>.hb-tema,
.hb-part-card,
.hb-membro-faixa,
.hb-benef>div,
.hb-preco-card,
.hb-ev-data,
.hb-acervo .hb-ir,
.hb-yt-capa,.hb-sp-arte,
.hb-part-card .hb-tag,
.hb-pill-navy{border-radius:0}

/* ═══ TEXTO CORRIDO DA PÁGINA INICIAL — a receita do «Um pouco sobre o CEC» ════
   (24/10/2026, pedido do dono: «pode adicionar nas outras seções também da página
   inicial»). A Karla continua; o que vale para todo texto corrido da home:
   letras um pouco mais juntas (−.01em — a Karla é larga e o parágrafo espalhava)
   e entrelinha 1.68. Parágrafos principais vão a 19px (como o «Sobre»); textos de
   apoio sobem meio degrau (16,5px); legendas curtas sobre foto e linhas únicas
   mantêm o tamanho e ganham só o espaçamento. Sobre fundo claro, o tom do
   «Sobre» (#3B4458); sobre as faixas azuis, as cores claras de antes. Rótulos em
   caixa alta, nomes, datas e números ficam como estão. */
.hb-temas .hb-sub{font-size:19px;line-height:1.68;letter-spacing:-.01em}
.hb-acervo p{letter-spacing:-.01em}
.hb-part-card p{letter-spacing:-.01em}
.hb-membro-faixa p{font-size:16.5px;line-height:1.68;letter-spacing:-.01em;color:#3B4458}
/* Depoimentos: o corte em 4 linhas com o «ver mais» na quarta depende da
   entrelinha — as três medidas (altura, vão e botão) acompanham a nova. */
.hb-depo-lead p{font-size:19px;line-height:1.68;letter-spacing:-.01em}
.hb-depo-lead .hb-depo-txt{max-height:calc(4 * 1.68em)}
.hb-depo-lead .hb-mais-vao{height:calc(3 * 1.68em)}
.hb-depo-lead .hb-mais{line-height:1.68em}
.hb-depo-curtos p{font-size:16.5px;line-height:1.68;letter-spacing:-.01em}
.hb-depo-txt{max-height:calc(4 * 1.68em)}
.hb-mais-vao{height:calc(3 * 1.68em)}
.hb-mais{line-height:1.68em}

/* ═══ QUEM SOMOS — «TEXTO E FOTO REFINADOS» (24/10/2026, escolha do dono) ═══════
   Refino, mesma estrutura e mesmos textos (pt-BR e en: as duas páginas saem com
   `data-page="quem-somos"`). Mockups em testagent/quem-somos-propostas/.
     · texto com a receita da página inicial: Karla 19px, letras um pouco mais
       juntas, entrelinha 1.7 e um tom mais firme; termos em destaque no navy
       da barra de topo;
     · a foto do meio do texto: o ORIGINAL em alta da mesma cena (tratamento
       «médio» do Codex — ver scripts/site/foto_quem_somos.mjs), sem o véu
       escuro de 30%, cantos retos, 420 → 480px de altura;
     · cartões «Formas de participar» com cantos retos, como a página inicial.
   Primeira página do padrão que vai seguir para as demais; por isso escopo só
   nela por enquanto. Apagar o bloco devolve o desenho anterior. */
body[data-page="quem-somos"] .read-wide .read p,
body[data-page="quem-somos"] .read-wide .read .lead{font-size:19px;line-height:1.7;letter-spacing:-.01em;color:#3B4458}
body[data-page="quem-somos"] .read-wide .read strong{color:#132444}
body[data-page="quem-somos"] .read-figure::after{display:none}
body[data-page="quem-somos"] .read-figure img{border-radius:0;height:480px;object-position:50% 46%}
body[data-page="quem-somos"] .actcard{border-radius:0}
@media(max-width:760px){body[data-page="quem-somos"] .read-figure img{height:300px}}

/* ═══ AVALIAÇÕES — «CARTÕES DE PAPEL, NOTA NO RODAPÉ» (24/10/2026, escolha do dono) ═══
   Variação c1 das propostas em testagent/avaliacoes-propostas/. Título centrado
   na régua da faixa «Temas» (a outra faixa azul da página), as avaliações em
   cartões claros iguais aos dos Temas, setas nas laterais, e a nota do Google
   embaixo, ao lado do botão claro do «Ir para o Acervo». Escopo em
   `.hb-aval--cartoes`: o formato antigo (depoimentos manuais) segue igual. */
.hb-aval.hb-aval--cartoes{min-height:0;display:block}
/* Respiro da faixa «Temas», a outra faixa azul (pedido de 24/10: «aumentar um pouco o espaçamento no topo e no fundo»). */
.hb-aval--cartoes>.hb-in{display:block;padding-block:184px 216px}
.hb-aval--cartoes h2{margin:0 auto;max-width:24ch;font:400 54px/1.12 var(--disp);letter-spacing:.02em;
  text-transform:uppercase;color:#fff;text-align:center;text-wrap:balance}
.hb-aval-faixa{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:22px;margin-top:56px}
.hb-aval-cartoes{--aval-por:3;display:grid;grid-template-columns:repeat(var(--aval-por),minmax(0,1fr));gap:20px;align-items:stretch}
.hb-aval-cartao{display:flex;flex-direction:column;gap:18px;padding:34px 32px 30px;background:#F4F2EC;color:var(--hb-ancora)}
.hb-aval-cartao .hb-estrelas-s{display:block;font:400 15px/1 var(--body);letter-spacing:4px;color:var(--hb-estrela)}
/* Corte em 7 linhas com o «ver mais» na sétima (a mesma mecânica de antes, que
   era de 4): altura de 7 linhas e o vão flutuante de 6. */
.hb-aval-cartao .hb-depo-txt{flex:1;margin:0;max-height:calc(7 * 1.68em);
  font:400 16.5px/1.68 var(--body);letter-spacing:-.01em;color:#3B4458}
.hb-aval-cartao .hb-depo-txt.aberto{max-height:none}
.hb-aval-cartao .hb-mais-vao{height:calc(6 * 1.68em)}
.hb-aval-cartao .hb-mais{line-height:1.68em;color:var(--hb-teal-h)}
.hb-aval-cartao .hb-mais:hover{color:var(--hb-ancora)}
.hb-aval-cartao .hb-mais:focus-visible{outline-color:var(--teal)}
.hb-aval-cartao .hb-por-quem{display:flex;align-items:center;gap:12px;margin:0}
.hb-aval-cartao .hb-av{width:44px;height:44px;font-size:15px;background:var(--hb-papel-2);color:var(--hb-ancora)}
.hb-aval-cartao .hb-quem{display:flex;flex-direction:column;gap:4px;min-width:0}
.hb-aval-cartao .hb-nome{font:600 15px/1.2 var(--body);color:var(--hb-ancora)}
.hb-aval-cartao .hb-quando{font:400 13.5px/1 var(--body);color:var(--hb-mudo-2)}
.hb-aval-faixa .hb-aval-seta{width:46px;height:46px;border-radius:0;border:1px solid rgba(255,255,255,.35);
  background:transparent;color:#fff}
.hb-aval-faixa .hb-aval-seta:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6)}
.hb-aval-rodape{display:flex;align-items:center;justify-content:center;gap:40px;margin-top:56px}
.hb-aval-nota{display:flex;align-items:center;gap:16px}
.hb-aval--cartoes .hb-nota{display:block;margin:0;font:400 52px/.9 var(--disp);color:#fff}
.hb-aval-nota>span{display:flex;flex-direction:column;gap:8px}
.hb-aval--cartoes .hb-estrelas{display:block;margin:0;font:400 18px/1 var(--body);letter-spacing:5px;color:var(--hb-estrela)}
.hb-aval--cartoes .hb-qtd{display:block;margin:0;font:400 14.5px/1 var(--body);color:var(--hb-n2)}
.hb-aval-div{width:1px;height:52px;background:rgba(255,255,255,.25)}
/* O mesmo botão claro do «Ir para o Acervo» (faixa «Temas»). */
.hb-aval-ir{display:inline-flex;align-items:center;gap:14px;box-sizing:border-box;height:58px;padding:0 36px;
  border:1px solid var(--hb-papel);border-radius:0;background:var(--hb-papel);text-decoration:none;
  font:700 13.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--hb-navy);
  transition:background-color .25s ease,border-color .25s ease,transform .25s ease}
.hb-aval-ir:hover{background-color:#fff;border-color:#fff;transform:translateY(-2px)}
.hb-aval-ir:focus-visible{outline:2px solid var(--hb-teal-n);outline-offset:3px}
@media(max-width:1180px){
  .hb-aval-cartoes{--aval-por:2}
  .hb-aval--cartoes h2{font-size:44px}
}
/* Celular: um cartão por vez, as setas descem para baixo dele e o rodapé empilha. */
@media(max-width:860px){
  .hb-aval--cartoes>.hb-in{padding-block:72px 80px}
  .hb-aval--cartoes h2{font-size:34px}
  .hb-aval-faixa{grid-template-columns:1fr 1fr;grid-template-areas:"c c" "a b";gap:16px;margin-top:36px}
  .hb-aval-cartoes{grid-area:c;--aval-por:1}
  .hb-aval-faixa .hb-aval-seta[data-aval-dir="-1"]{grid-area:a;justify-self:end}
  .hb-aval-faixa .hb-aval-seta[data-aval-dir="1"]{grid-area:b;justify-self:start}
  .hb-aval-rodape{flex-direction:column;gap:24px;margin-top:40px}
  .hb-aval-div{display:none}
}
@media(max-width:560px){
  .hb-aval--cartoes h2{font-size:30px}
  .hb-aval-cartao{padding:28px 24px 24px}
  .hb-aval-ir{width:100%;justify-content:center;padding:0 18px;font-size:12px}
}
/* Aberto, o botão (que vem antes do texto no código) desce para o fim. */
.hb-aval-cartao .hb-depo-txt.aberto{display:flex;flex-direction:column}
.hb-aval-cartao .hb-depo-txt.aberto .hb-mais{order:2;align-self:flex-start}
/* `display:flex` do cartão venceria o [hidden] do navegador: a paginação some
   com os cartões fora da vez só com esta regra. */
.hb-aval-cartao[hidden]{display:none}

/* ═══════════════════════════════════════════════════════════════════════════
   COMO AJUDAR — ESTRUTURA DE 24/10/2026 (aprovada pelo dono sobre mockups na
   página real; ver o cabeçalho de ComoAjudar.tsx). Títulos em Cinzel e texto
   em Karla, como na página de início. As regras `.ca-*` antigas (faixas de
   papel, quadro navy) ficaram sem uso; as da tabela são reaproveitadas aqui,
   no cartão claro.
   ═══════════════════════════════════════════════════════════════════════════ */
/* 1ª · por que doar + onde a doação chega
   As duas colunas terminam juntas (pedido do dono, 24/10/2026): o texto ganhou
   largura (800px na coluna de 1344) e o título cabe numa linha — encolhe com a
   coluna (`cqi`) até 32px antes de quebrar. A lista termina na última foto, sem
   o respiro de baixo, e as duas se esticam até a mais alta: o botão desce até o
   fim (no inglês, mais curto, o texto acabaria antes da lista) e, quando o
   texto é que sobra (janelas de 1201–1439px), a lista reparte a diferença
   entre os itens. */
.ca-pagina .ca-intro{background:#fff;padding-block:150px}
.ca-intro-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(400px,35.7%,480px);gap:64px;align-items:stretch}
.ca-intro-txt{container-type:inline-size;display:flex;flex-direction:column;align-items:flex-start}
.ca-intro-txt p:last-of-type{margin-bottom:auto}
.ca-intro-txt h2{margin:0;font:400 42px/1.14 var(--disp);font-size:clamp(32px,5.25cqi,42px);letter-spacing:.02em;text-transform:uppercase;color:var(--hb-ancora)}
/* Parágrafo principal no padrão do site (o do «Um pouco sobre o CEC»). */
.ca-intro-txt p{margin:28px 0 0;font:400 19px/1.68 var(--body);letter-spacing:-.01em;color:#3B4458}
.ca-intro-txt p + p{margin-top:20px}
.ca-pagina .ca-btn{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 28px;border-radius:0;background:var(--hb-navy);
  color:#fff;font:700 12.5px/1 var(--body);letter-spacing:.13em;text-transform:uppercase;text-decoration:none;transition:background .2s ease}
.ca-pagina .ca-btn:hover{background:#1A2C4E}
.ca-pagina .ca-btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.ca-intro-txt .ca-btn{margin-top:36px}
.ca-chega{display:flex;flex-direction:column;justify-content:space-between;border-left:1px solid #E2DED5;padding-left:48px}
.ca-chega .hb-eyebrow{margin-bottom:28px}
.ca-chega-item{display:grid;grid-template-columns:140px 1fr;gap:24px;align-items:center;padding:22px 0;border-top:1px solid #ECE8DF}
.ca-chega-item:last-child{padding-bottom:0}
.ca-chega-item img{width:140px;height:104px;object-fit:cover;border-radius:0;display:block}
.ca-chega-item h3{margin:0;font:400 25px/1.15 var(--disp);font-variant:small-caps;letter-spacing:.015em;color:var(--hb-ancora)}
.ca-chega-item p{margin:8px 0 0;font:400 15.5px/1.6 var(--body);color:#5A6274}
/* 2ª · formas de contribuir: o palco `hb-part-*` vem pronto da página de início.
   O vão antes dela é o mesmo de depois (150 + 40 = 190px): eram 290px sob o
   "Doe agora", e o dono achou branco demais. */
.ca-pagina .ca-formas{padding-top:40px}
/* 3ª · faça sua doação, em fundo claro (o rodapé é azul). Os dois cartões do
   mesmo tamanho e sem o "Copiar" nas linhas (pedido do dono, 24/10/2026). */
.ca-doar-sec{background:#fff;padding-block:40px 150px;text-align:center}
.ca-doar-sec h2{margin:22px auto 0;font:400 40px/1.14 var(--disp);letter-spacing:.02em;text-transform:uppercase;color:var(--hb-ancora)}
.ca-doar-sub{margin:18px auto 0;font:400 18px/1.7 var(--body);color:var(--hb-txt)}
.ca-dados{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:56px;text-align:left}
.ca-cartao{display:flex;flex-direction:column;padding:36px 36px 34px;border-radius:0;background:var(--paper-2)}
.ca-cartao h3{margin:0 0 18px;padding-bottom:18px;border-bottom:1px solid #E2DED5;font:400 24px/1.2 var(--disp);font-variant:small-caps;
  letter-spacing:.015em;color:var(--hb-ancora)}
.ca-cartao .ca-tab{display:block;margin-top:0}
.ca-cartao .ca-row{display:grid;grid-template-columns:90px minmax(0,1fr);align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid #E4E0D7}
.ca-cartao .ca-row:last-child{border-bottom:0}
.ca-cartao .ca-row-k{width:auto;font:700 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#7A7568}
.ca-cartao .ca-row-v{font:500 17px/1.3 var(--body);color:var(--hb-ancora);overflow-wrap:anywhere}
.ca-cartao .ca-row-v span{color:#7A7568}
.ca-pp p{margin:0;font:400 16px/1.7 var(--body);color:#4A5468}
.ca-pp .ca-btn{margin-top:auto;align-self:flex-start}
/* Abaixo de 1200px as colunas da 1ª seção não cabem lado a lado com o título
   numa linha: a lista desce para baixo do texto. */
@media(max-width:1200px){
  .ca-intro-grid{grid-template-columns:1fr;gap:56px}
  .ca-intro-txt p{max-width:68ch}
  .ca-chega{border-left:0;padding-left:0;border-top:1px solid #E2DED5;padding-top:36px}
}
@media(max-width:860px){
  .ca-pagina .ca-intro{padding-block:88px 72px}
  .ca-pagina .ca-formas{padding-top:24px}
  .ca-intro-txt h2{font-size:32px}
  .ca-intro-txt p{font-size:17px}
  .ca-dados{grid-template-columns:1fr}
  .ca-pp .ca-btn{margin-top:28px}
  .ca-doar-sec{padding-block:24px 96px}
  .ca-doar-sec h2{font-size:28px}
}
@media(max-width:560px){
  .ca-chega-item{grid-template-columns:96px 1fr;gap:16px}
  .ca-chega-item img{width:96px;height:72px}
  .ca-cartao{padding:26px 22px}
  .ca-cartao .ca-row{grid-template-columns:64px minmax(0,1fr);gap:10px}
  .ca-cartao .ca-row-v{font-size:15.5px}
}

/* ═══ REFINO DO SITE INTEIRO (24/10/2026, pedido do dono: «pode aplicar os refinamentos em todas as páginas») ═══
   Os mesmos refinamentos já aprovados na página inicial e na Quem Somos, levados às demais páginas institucionais
   pelas classes que elas compartilham. Fora: o Acervo (`html[data-theme]`, tipografia de leitura própria).
     · TEXTO — a receita do «Um pouco sobre o CEC»: parágrafos principais em Karla 19px, entrelinha 1.7, letras um
       pouco mais juntas (−.01em: a Karla é larga e o parágrafo espalhava); sobre fundo claro, o tom mais firme
       (#3B4458) e os termos em destaque no navy da barra (#132444); sobre as faixas azuis, as cores claras de antes.
     · CANTOS — «tudo reto», como a barra, as faixas azuis e a página inicial: fotos, cartões, painéis, etiquetas,
       botões e campos sem raio. Pontos de carrossel, bandeiras e avatares seguem redondos.
   Fotos do conteúdo (Fundador, Mosteiro): versões tratadas «-viva», ver scripts/site/fotos_paginas_vivas.mjs.
   Apagar o bloco devolve o desenho anterior. */

/* ── texto: parágrafos principais sobre fundo claro ───────────────────────── */
/* Só o parágrafo corrido: citações (`.de-cit`), subtítulos (`.subhead`, `.kickline`, `.stitle`), destaques
   (`.lead--cinzel`, `.pull`) e a faixa de chamada dos temas mantêm o próprio desenho. */
html:not([data-theme]) .read p:not(.subhead):not(.kickline):not(.lead--cinzel):not(.de-cit *):not(.tema-faixa *),
html:not([data-theme]) .read .lead:not(.lead--cinzel):not(.de-cit *),
html:not([data-theme]) .de-prosa .de-p,
html:not([data-theme]) .de-relato-txt .de-p,
html:not([data-theme]) .de-formcol .de-p,
html:not([data-theme]) .de--claro .de-fx--navy .de-pn,
html:not([data-theme]) .f1a:not(.f1a--areia) .f1a-p,
html:not([data-theme]) .f1a:not(.f1a--areia) .m1a-obra-txt p,
html:not([data-theme]) .f1a:not(.f1a--areia) .m1a-colab .lead,
html:not([data-theme]) .prose p:not(.pull):not(.stitle),
html:not([data-theme]) .f1a:not(.f1a--areia) .mb-abertura p,
html:not([data-theme]) .ca-prosa .ca-p,
html:not([data-theme]) .center .sublead{
  font-size:19px;line-height:1.7;letter-spacing:-.01em;color:#3B4458}
html:not([data-theme]) .read strong,
html:not([data-theme]) .read b,
html:not([data-theme]) .f1a:not(.f1a--areia) .f1a-p strong,
html:not([data-theme]) .prose strong{color:#132444}

/* ── texto: parágrafos principais sobre as faixas azuis (cores de antes) ───── */
html:not([data-theme]) .de-fx--navy .de-linha-c .de-pn,
html:not([data-theme]) .de-passo .de-passo-p,
html:not([data-theme]) .mb-prop-p p,
html:not([data-theme]) .mb-linha-c p{
  font-size:19px;line-height:1.7;letter-spacing:-.01em}

/* ── texto de apoio: só o espaçamento (a faixa de chamada dos temas = a do «Torne-se um membro» da home) ── */
html:not([data-theme]) .read .tema-faixa p{font-size:16.5px;line-height:1.68;letter-spacing:-.01em;color:#3B4458}
html:not([data-theme]) .actb p,
html:not([data-theme]) .mb-card-d,
html:not([data-theme]) .ca-card-d,
html:not([data-theme]) .m1a-doa-d,
html:not([data-theme]) .de-sair-d,
html:not([data-theme]) .de-regua-d,
html:not([data-theme]) .f1a-fam-i,
html:not([data-theme]) .de-lista-i{letter-spacing:-.01em}

/* ── cantos: tudo reto ────────────────────────────────────────────────────── */
html:not([data-theme]) body{--r:0px}
html:not([data-theme]) .actcard,
html:not([data-theme]) .card,
html:not([data-theme]) .topics-grid .card,
html:not([data-theme]) .mbox,
html:not([data-theme]) .ev-date,
html:not([data-theme]) .ev-where,
html:not([data-theme]) .agenda-badge,
html:not([data-theme]) .badge,
html:not([data-theme]) .chip,
html:not([data-theme]) .pill,
html:not([data-theme]) .btn,
html:not([data-theme]) .revcta,
html:not([data-theme]) .agenda-cta,
html:not([data-theme]) .ev-more summary,
html:not([data-theme]) .ev-dates a,
html:not([data-theme]) .shot,
html:not([data-theme]) .qs-hero-img,
html:not([data-theme]) .gal,
html:not([data-theme]) .gal-thumbs span,
html:not([data-theme]) .donate,
html:not([data-theme]) .fp-form,
html:not([data-theme]) .fp-form input,
html:not([data-theme]) .fp-form button,
html:not([data-theme]) .chipnav a,
html:not([data-theme]) .chipnav button,
html:not([data-theme]) .read-figure img,
html:not([data-theme]) .read-portrait img,
html:not([data-theme]) .carrossel-palco,
html:not([data-theme]) .mapa,
html:not([data-theme]) .tema-card,
html:not([data-theme]) .tema-capa,
html:not([data-theme]) .tema-faixa,
html:not([data-theme]) .read .tema-faixa a,
html:not([data-theme]) .mats-acc-n,
html:not([data-theme]) .chips a,
html:not([data-theme]) .related-list a,
html:not([data-theme]) .hb-tema img,
html:not([data-theme]) .f1a-retrato,
html:not([data-theme]) .f1a-livro,
html:not([data-theme]) .f1a-lcard,
html:not([data-theme]) .m1a-strip img,
html:not([data-theme]) .m1a-abc-c,
html:not([data-theme]) .m1a-doa-c,
html:not([data-theme]) .m1a-aviso,
html:not([data-theme]) .m1a-end,
html:not([data-theme]) .m1a-mapa,
html:not([data-theme]) .m1a-lb,
html:not([data-theme]) .m1a-lb img,
html:not([data-theme]) .mb-card,
html:not([data-theme]) .mb-form,
html:not([data-theme]) .form-erro,
html:not([data-theme]) .form-ok,
html:not([data-theme]) .form-ok-volta,
html:not([data-theme]) .de-sair,
html:not([data-theme]) .de-sair-bt,
html:not([data-theme]) .de-ghost,
html:not([data-theme]) .de-btn,
html:not([data-theme]) .de-campo--cx textarea,
html:not([data-theme]) .ca-card,
html:not([data-theme]) .ca-doar,
html:not([data-theme]) .ca-dep,
html:not([data-theme]) .ca-pp,
html:not([data-theme]) .ca-pp-btn,
html:not([data-theme]) .legacy-page .legacy-gallery-count,
html:not([data-theme]) .legacy-page .legacy-map-card,
html:not([data-theme]) .legacy-page .legacy-map-card iframe,
html:not([data-theme]) .legacy-page .legacy-important,
html:not([data-theme]) .legacy-page .legacy-event,
html:not([data-theme]) .legacy-page .legacy-join-card,
html:not([data-theme]) .legacy-page .legacy-join-card input,
html:not([data-theme]) .legacy-page .legacy-join-submit button,
html:not([data-theme]) .legacy-page .legacy-topic-image,
html:not([data-theme]) .legacy-page .legacy-related-links a,
html:not([data-theme]) .legacy-page .legacy-donate-menu,
html:not([data-theme]) .legacy-page .legacy-donate-menu a,
html:not([data-theme]) .legacy-page .legacy-donate-menu button,
html:not([data-theme]) .legacy-page .legacy-donor-card,
html:not([data-theme]) .legacy-page .legacy-donor-card input,
html:not([data-theme]) .legacy-page .legacy-form-submit button,
html:not([data-theme]) .legacy-page .legacy-unsubscribe-dialog,
html:not([data-theme]) .legacy-page .legacy-dialog-actions button,
html:not([data-theme]) .legacy-page .legacy-contact-card,
html:not([data-theme]) .legacy-page .legacy-contact-mural,
html:not([data-theme]) .legacy-page .legacy-contact-map,
html:not([data-theme]) .legacy-page .legacy-agenda-submit,
html:not([data-theme]) .legacy-page .legacy-agenda-dialog,
html:not([data-theme]) .legacy-unsubscribe-dialog,
html:not([data-theme]) .legacy-unsubscribe-dialog .cancel,
html:not([data-theme]) .legacy-unsubscribe-dialog .confirm,
html:not([data-theme]) .legacy-unsub-alvo{border-radius:0}
/* Fundador: com o texto da biografia a 19px a coluna da direita cresceu, e a
   lista de números (que desce até a base do texto) abria um vão vazio sob a
   legenda. Agora quem cresce é o RETRATO (cover, mesmo enquadramento): os
   números ficam logo abaixo da legenda e as duas colunas seguem terminando
   juntas. Só no computador (≥1201px, onde as colunas ficam lado a lado). */
@media(min-width:1201px){
  html:not([data-theme]) .f1a-bio-esq .f1a-retrato{flex:1 1 auto;height:auto;min-height:429px}
  html:not([data-theme]) .f1a-bio-esq .f1a-nums{flex:none}
}

/* ═══ ÚLTIMOS CONTEÚDOS — «REFINADO» (24/10/2026, escolha do dono) ═══════════════
   Proposta k1 de testagent/conteudos-propostas/. A estrutura continua (cabeçalho
   do canal, grade de vídeos, programa + episódios); o que muda: o nome de cada
   vídeo fica sempre à vista embaixo da capa (com um quadrado de play na capa),
   quatro vídeos por linha (capas maiores, oito no total) e o podcast com os
   cinco episódios mais novos, numerados. Regras aqui no fim vencem as antigas. */
@media(min-width:861px){
  .hb-conteudos{padding-block:164px 150px}
  /* 64px: o mesmo vão que separa o YouTube do Spotify (pedido de 24/10: o título estava «bem colado»). */
  .hb-conteudos h2{margin:0 0 64px;font-size:42px}
}
.hb-yt-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 22px;margin-top:26px}
.hb-yt-card{display:flex;flex-direction:column;gap:14px;text-decoration:none}
.hb-yt-play{position:absolute;left:12px;bottom:12px;width:38px;height:38px;display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--hb-navy);pointer-events:none}
/* O play fica sempre à vista; duração e selo Short continuam só no hover. */
@media (hover:hover){ .hb-yt-capa>.hb-yt-play{opacity:1} }
.hb-yt-titulo{font:500 16px/1.45 var(--body);letter-spacing:-.01em;color:var(--hb-ancora);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:calc(2 * 1.45em);
  transition:color .2s ease}
.hb-yt-card:hover .hb-yt-titulo{color:var(--hb-teal-h)}
.hb-yt-grid+.hb-canal{margin-top:64px}
.hb-sp-corpo{grid-template-columns:260px minmax(0,1fr);gap:48px;margin-top:26px}
.hb-sp-nome{margin-top:14px;font:600 15px/1.4 var(--body);color:var(--hb-ancora)}
.hb-sp-qtd{margin-top:6px;font:400 13.5px/1.2 var(--body);color:var(--hb-mudo-2)}
.hb-sp-eps a{display:flex;align-items:center;gap:18px;padding:16px 0;border-top:1px solid var(--hb-linha)}
.hb-sp-eps li:first-child a{padding-top:0;border-top:0}
.hb-ep-num{flex:none;width:44px;font:400 26px/1 var(--disp);color:var(--hb-teal-h)}
.hb-ep-txt{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.hb-ep-titulo{display:block;font:500 16px/1.45 var(--body);letter-spacing:-.01em;color:var(--hb-ancora);
  white-space:normal;overflow:visible;text-overflow:clip;transition:color .2s ease}
.hb-ep-meta{display:block;width:auto;margin:0;font:500 11px/1 var(--mono);letter-spacing:.08em;color:#7A7568;text-transform:uppercase}
.hb-ep-play{flex:none;width:40px;height:40px;display:grid;place-items:center;background:var(--hb-papel-2);color:var(--hb-ancora)}
.hb-sp-eps a:hover .hb-ep-titulo{color:var(--hb-teal-h)}
@media(max-width:860px){
  .hb-yt-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
  .hb-yt-titulo{font-size:14.5px}
  .hb-yt-play{width:32px;height:32px;left:8px;bottom:8px}
  .hb-yt-grid+.hb-canal{margin-top:48px}
  .hb-conteudos h2{margin-bottom:48px}
  .hb-sp-corpo{grid-template-columns:1fr;gap:22px}
  .hb-sp-arte{max-width:148px}
  .hb-ep-num{width:36px;font-size:22px}
  .hb-ep-titulo{font-size:15px}
  .hb-ep-play{width:34px;height:34px}
}
/* «6 vídeos, título em 1 linha» (24/10/2026, escolha do dono entre os ajustes do
   Refinado): três vídeos por linha, o título numa linha só com «…» (o texto inteiro
   fica no title, à vista ao passar o mouse) e a data embaixo, como a dos episódios. */
.hb-yt-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}
.hb-yt-titulo{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:none;font-size:17px}
.hb-yt-data{margin-top:-6px;font:500 11px/1 var(--mono);letter-spacing:.08em;color:#7A7568;text-transform:uppercase}
/* No celular a coluna tem ~170px: uma linha cortaria quase todo título — lá ele
   volta a ter até duas linhas. */
@media(max-width:860px){
  .hb-yt-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
  .hb-yt-titulo{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;max-height:calc(2 * 1.45em);font-size:14.5px}
  .hb-yt-data{margin-top:-4px;font-size:10px}
}

/* ═══ RESPIRO IGUAL EM TODAS AS SEÇÕES DA HOME (24/10/2026) ═══════════════════════
   Pedido do dono: «a ideia é que todas as seções tenham o mesmo espaçamento superior e
   inferior». O respiro vertical das seções da home passa a ser definido AQUI; os
   paddings anteriores dessas seções ficam vencidos.
   Medido na tela (varredura de pixels a 1512px e a 390px): o branco VISTO entre a borda
   de cada seção e a primeira/última coisa dela é `--hb-respiro` em todas — o valor da
   faixa de temas, que o dono já tinha acertado (215px no computador, 100px no
   celular). Cada padding é esse respiro mais o que a seção compensa:
     · a sombra das faixas azuis escurece 25px do branco vizinho (Sobre embaixo,
       Participe nos dois lados, Últimos conteúdos em cima) — era por isso que o Sobre
       parecia ter mais espaço em cima que embaixo, com 220px nos dois;
     · a primeira/última linha de cada seção tem folga própria (entrelinha do título,
       margem da paginação…), descontada nos números abaixo.
   Exceção: o topo de Últimos conteúdos NÃO compensa a sombra. Lá a primeira coisa é só
   o título, à esquerda, com branco à direita até a linha do YouTube — com os 25px a
   mais o dono viu o espaço de cima maior que o das outras seções (24/10). Fica a mesma
   distância da borda ao título das faixas de temas e de avaliações.
   Saem a altura mínima de uma tela do Sobre e das Avaliações (em monitor alto ela
   somava espaço só nessas duas) e o pé dobrado de Últimos conteúdos
   (`html.snap section:last-of-type`): agora ele tem o mesmo respiro das outras. */
main.hb{--hb-respiro:215px}
main.hb>.hb-sobre{min-height:0;padding-block:var(--hb-respiro) calc(var(--hb-respiro) + 25px)}
main.hb>.hb-temas>.hb-in{padding-block:calc(var(--hb-respiro) - 30px) var(--hb-respiro)}
main.hb>.hb-participe{padding-block:calc(var(--hb-respiro) + 25px) calc(var(--hb-respiro) + 18px)}
main.hb>.hb-aval{min-height:0}
main.hb>.hb-aval--cartoes>.hb-in{padding-block:calc(var(--hb-respiro) - 6px) calc(var(--hb-respiro) + 1px)}
main.hb>section.hb-conteudos,
html.snap main.hb>section.hb-conteudos:last-of-type{padding-block:calc(var(--hb-respiro) - 5px) calc(var(--hb-respiro) - 11px)}
@media(max-width:860px){
  main.hb{--hb-respiro:100px}
  main.hb>.hb-sobre{padding-block:calc(var(--hb-respiro) + 1px) calc(var(--hb-respiro) + 25px)}
  main.hb>.hb-temas>.hb-in{padding-block:calc(var(--hb-respiro) - 28px) var(--hb-respiro)}
  main.hb>.hb-participe{padding-block:calc(var(--hb-respiro) + 25px)}
  main.hb>.hb-aval--cartoes>.hb-in{padding-block:calc(var(--hb-respiro) - 3px) calc(var(--hb-respiro) - 24px)}
  main.hb>section.hb-conteudos,
  html.snap main.hb>section.hb-conteudos:last-of-type{padding-block:calc(var(--hb-respiro) - 4px) calc(var(--hb-respiro) - 18px)}
  main.hb>.hb-conteudos>.hb-in{padding-block:0}
}

/* ═══ SUBTÍTULOS, CITAÇÕES E NÚMEROS EM MARCELLUS SC (24/10/2026, pedido do dono) ═══════════════════════════════
   «você precisa alterar a família da fonte para o Marcellus». Os títulos de seção, as citações, os títulos de cartão
   e os números de dentro das páginas vinham em Cormorant Garamond (dos handoffs); passam à Marcellus SC, a fonte dos
   títulos do site. Quase todos usam `var(--serif)`: redefinir a variável troca a família de uma vez (fora o Acervo,
   `html[data-theme]`, que tem tipografia própria).

   TAMANHO: no mesmo corpo a Marcellus ocupa ~40% mais largura que a Cormorant (medido: 0,72 de razão nas linhas
   únicas). Em vez de reescrever o corpo de 25 regras e de cada ponto de quebra, `font-size-adjust` iguala a altura
   das versaletes da Marcellus à altura-x da Cormorant (0,45 do corpo) — cada título fica com a mesma largura de antes e
   quebra a linha nos mesmos lugares; a entrelinha (proporcional ao corpo) não muda. Os títulos em CAIXA ALTA medem
   outra razão (0,87): pedem 0,53. */
html:not([data-theme]){--serif:var(--disp)}
html:not([data-theme]) .results-list__num{font-family:var(--disp)}
/* Só classes simples dentro do :is() — ele assume a especificidade do item MAIS forte da lista, e um `.x a` ali dentro
   fazia esta regra vencer as exceções abaixo (a régua e a caixa alta ficavam em .45). */
html:not([data-theme]) :is(.results-list__num,.tema-h2,.tema-card-n,.f1a-h2,.f1a-num-v,.f1a-livro-t,.f1a-lcard-t,
  .m1a-h2,.m1a-doa-t,.m1a-n-v,.m1a-frase,.mb-card-t,.mb-form-t,.mb-frase,
  .de-sair-t,.de-regua-v,.de-h2,.de-cit,.de-linha-r,.de-forma-h,.ca-cit,.ca-card-h,.ca-dep-t){font-size-adjust:.45}
html:not([data-theme]) .mb-form-tel a,html:not([data-theme]) .legacy-unsubscribe-dialog h2{font-size-adjust:.45}
html:not([data-theme]) :is(.f1a-h2,.mb-frase){font-size-adjust:.53}
/* Régua de "Doar/Receber energia" (três valores lado a lado): a coluna é estreita (302px) e «Você ou um conhecido»
   pedia 307px na Marcellus — um degrau abaixo mantém cada valor numa linha só, como antes. */
html:not([data-theme]) .de-regua-v{font-size-adjust:.42}
/* Citações: as versaletes da Marcellus fazem algumas ganharem uma linha (a do Mosteiro passou a 2, com «nessa
   história!» sozinho embaixo). Linhas equilibradas em vez de sobra curta na última. */
html:not([data-theme]) .de-cit{text-wrap:balance}

/* ═══ AGENDA «EDITORIAL» (24/10/2026, escolha do dono entre três propostas; testagent/agenda-propostas) ═══════════
   Referências: MoMA (a data como título, com a navegação ao lado) e Plum Village (o mês em letra de título).
   O mês por extenso vira o título da grade — clicável: o seletor de mês continua por cima dele —, com a legenda das
   cores e as setas com "Hoje" à direita. A busca é uma linha fina; as vistas Lista, Mês e Dia, três botões juntos.
   Na grade: dias da semana por extenso, as cores do site no lugar do azul #556de3 (verde-azulado = aberto ao
   público, sépia = só membros), cada encontro num bloco leve com horário e até duas linhas de título, hoje em
   azul-marinho, cantos retos. Marcação em render.ts (`renderAgendaInstitutionalPage`). Regras aqui no fim vencem
   as antigas `.legacy-agenda-*`. */
main.legacy-agenda-page{--ag-linha:#E4E0D6;--ag-tinta:#26304A;--ag-aberto:#1D6B62;--ag-membros:#93652F;
  --ag-aberto-f:#EDF4F1;--ag-membros-f:#F6EFE4}
main.legacy-agenda-page>.wrap{padding-top:76px}
/* busca */
main.legacy-agenda-page .legacy-agenda-toolbar{grid-template-columns:minmax(0,1fr) auto auto;gap:24px;padding:0 0 12px;
  border:0;border-bottom:1px solid var(--ag-tinta);background:transparent}
main.legacy-agenda-page .legacy-agenda-searchbox{gap:14px;color:var(--ag-tinta)}
main.legacy-agenda-page .legacy-agenda-searchbox svg{width:20px;height:20px}
main.legacy-agenda-page .legacy-agenda-searchbox input{height:46px;font:400 18px/1.2 var(--body);color:var(--ag-tinta)}
main.legacy-agenda-page .legacy-agenda-searchbox input::placeholder{color:#7D8390}
main.legacy-agenda-page .legacy-agenda-submit{width:auto;min-height:44px;padding:0 24px;border-radius:0;background:var(--hb-navy);color:#fff;
  font:700 11.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
main.legacy-agenda-page .legacy-agenda-submit:hover{background:#1A2C4E}
main.legacy-agenda-page .legacy-agenda-views{height:44px;gap:0;border:1px solid var(--ag-linha)}
main.legacy-agenda-page .legacy-agenda-view{padding:0 18px;font:700 11.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#5A6274}
main.legacy-agenda-page .legacy-agenda-view.active{background:var(--hb-navy);color:#fff}
main.legacy-agenda-page .legacy-agenda-view.active::after{display:none}
main.legacy-agenda-page .legacy-agenda-submit:focus-visible,
main.legacy-agenda-page .legacy-agenda-view:focus-visible,
main.legacy-agenda-page .legacy-agenda-arrow:focus-visible,
main.legacy-agenda-page .legacy-agenda-today:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
/* cabeçalho do mês */
main.legacy-agenda-page .legacy-agenda-cab{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:52px 0 26px}
main.legacy-agenda-page .legacy-agenda-mes{margin:0;font:400 40px/1.1 var(--disp);letter-spacing:.02em;text-transform:uppercase;color:var(--hb-ancora)}
main.legacy-agenda-page .legacy-agenda-mes .legacy-agenda-picker{margin:0;font:inherit;color:inherit}
main.legacy-agenda-page .legacy-agenda-mes .legacy-agenda-picker::after{display:none}
main.legacy-agenda-page .legacy-agenda-cab-dir{display:flex;align-items:center;gap:28px}
main.legacy-agenda-page .legacy-agenda-legenda{gap:20px;margin:0;font:500 13px/1 var(--body);color:#555C69}
main.legacy-agenda-page .legacy-agenda-ponto{width:9px;height:9px;border-radius:0;background:var(--ag-aberto)}
main.legacy-agenda-page .legacy-agenda-ponto.is-membros{background:var(--ag-membros)}
main.legacy-agenda-page .legacy-agenda-nav{gap:6px;margin:0}
main.legacy-agenda-page .legacy-agenda-arrow,
main.legacy-agenda-page .legacy-agenda-today{display:inline-grid;place-items:center;height:44px;border:1px solid var(--ag-linha);
  border-radius:0;background:#fff;color:var(--ag-tinta);cursor:pointer}
main.legacy-agenda-page .legacy-agenda-arrow{width:44px;padding:0;font:400 20px/1 var(--body)}
main.legacy-agenda-page .legacy-agenda-today{padding:0 18px;font:700 11.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
main.legacy-agenda-page .legacy-agenda-arrow:hover,
main.legacy-agenda-page .legacy-agenda-today:hover{border-color:var(--ag-tinta)}
/* grade do mês */
main.legacy-agenda-page .legacy-agenda-calendar{border:0;border-top:1px solid var(--ag-linha);border-left:1px solid var(--ag-linha)}
main.legacy-agenda-page .legacy-agenda-weekdays span{padding:14px 12px;border-right:1px solid var(--ag-linha);border-bottom:1px solid var(--ag-linha);
  font:700 11px/1 var(--body);letter-spacing:.16em;color:#666C78;text-transform:uppercase}
main.legacy-agenda-page .legacy-agenda-day{min-height:146px;padding:10px 10px 8px;border-color:var(--ag-linha)}
main.legacy-agenda-page .legacy-agenda-day.outside{background:#FAF9F6}
main.legacy-agenda-page .legacy-agenda-day.outside .legacy-agenda-day-number{color:#B3AFA5}
main.legacy-agenda-page .legacy-agenda-day-number{display:inline-grid;place-items:center;min-width:30px;height:30px;margin:0 0 8px;
  font:600 15px/1 var(--body);color:var(--ag-tinta)}
main.legacy-agenda-page .legacy-agenda-day.today{box-shadow:none}
main.legacy-agenda-page .legacy-agenda-day.today .legacy-agenda-day-number{background:var(--hb-navy);color:#fff}
main.legacy-agenda-page .legacy-agenda-event-button{margin:0 0 6px;padding:6px 8px 7px;border-left:2px solid var(--ag-aberto);background:var(--ag-aberto-f)}
main.legacy-agenda-page .legacy-agenda-event-button.is-membros{border-left-color:var(--ag-membros);background:var(--ag-membros-f)}
main.legacy-agenda-page .legacy-agenda-event-button time{margin:0;font:700 10.5px/1.2 var(--body);letter-spacing:.05em;color:var(--ag-aberto)}
main.legacy-agenda-page .legacy-agenda-event-button.is-membros time{color:var(--ag-membros)}
main.legacy-agenda-page .legacy-agenda-event-button span{margin-top:3px;font:600 12.5px/1.3 var(--body);color:#1E2A40;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* No computador a grade cabe na coluna; no celular segue a rolagem lateral de antes (980px). */
@media(min-width:1025px){main.legacy-agenda-page .legacy-agenda-calendar{min-width:0}}
/* vistas Lista e Dia: o mesmo fio de cor dos blocos da grade */
main.legacy-agenda-page .legacy-agenda-list{gap:0;border-top:1px solid var(--ag-linha)}
main.legacy-agenda-page .legacy-agenda-list-item{grid-template-columns:220px 1fr;gap:28px;padding:20px 16px;border:0;
  border-bottom:1px solid var(--ag-linha);border-left:2px solid var(--ag-aberto);background:#fff}
main.legacy-agenda-page .legacy-agenda-list-item.is-membros{border-left:2px solid var(--ag-membros);background:#fff}
main.legacy-agenda-page .legacy-agenda-list-item time{font:700 11.5px/1.5 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ag-aberto)}
main.legacy-agenda-page .legacy-agenda-list-item.is-membros time{color:var(--ag-membros)}
main.legacy-agenda-page .legacy-agenda-list-item strong,
main.legacy-agenda-page .legacy-agenda-list-item.is-membros strong{color:var(--hb-ancora)}
main.legacy-agenda-page .legacy-agenda-list-item:hover strong{color:var(--hb-teal-h)}
main.legacy-agenda-page .legacy-agenda-empty{border-color:var(--ag-linha)}
/* janela do encontro */
main.legacy-agenda-page .legacy-agenda-dialog h2{color:var(--hb-ancora)}
main.legacy-agenda-page .legacy-agenda-dialog-link{border-radius:0;font:700 11.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
@media(max-width:760px){
  main.legacy-agenda-page>.wrap{padding-top:44px}
  main.legacy-agenda-page .legacy-agenda-toolbar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"busca busca" "botao vistas";gap:12px 10px}
  main.legacy-agenda-page .legacy-agenda-searchbox{grid-area:busca}
  main.legacy-agenda-page .legacy-agenda-submit{grid-area:botao}
  main.legacy-agenda-page .legacy-agenda-views{grid-area:vistas;justify-content:flex-end}
  main.legacy-agenda-page .legacy-agenda-view{padding:0 13px}
  main.legacy-agenda-page .legacy-agenda-cab{flex-direction:column;align-items:flex-start;gap:16px;margin:36px 0 20px}
  main.legacy-agenda-page .legacy-agenda-mes{font-size:28px}
  main.legacy-agenda-page .legacy-agenda-cab-dir{width:100%;justify-content:space-between;flex-wrap:wrap;gap:14px}
  /* alvo de toque de 44px nos números dos dias (medição de 02/09/2026, ver as regras antigas) */
  main.legacy-agenda-page .legacy-agenda-day-number{min-width:44px;height:44px;margin:0 0 4px}
  main.legacy-agenda-page .legacy-agenda-list-item{grid-template-columns:1fr;gap:6px}
}

/* ═══ TEMAS — REFINO APROVADO ITEM A ITEM (24/10/2026; testagent/temas-propostas/itens) ═══════════════════════════
   O dono votou cada mudança sozinha, sobre a página de hoje (Imposição de Mãos e Projeção Astral): aprovou a citação
   maior, mais espaço antes dos títulos e os cartões em azul-marinho; reprovou a foto da prática. São regras do MOLDE:
   valem para as cinco páginas, seja qual for o texto de cada uma. As prévias eram de computador — no celular a
   citação e os títulos seguem como antes. Regras aqui no fim vencem as antigas (`.tema*`). */
@media(min-width:861px){
  /* Citação maior, em duas linhas equilibradas: o <p> herda do bloco (`.tema-cit p{font:inherit}`) e o
     `text-wrap:balance` já vem de `.de-cit`. */
  main.tema .tema-cit{padding-left:34px;font-size:31px;line-height:1.36}
  main.tema .tema-cit cite{margin-top:18px}
  /* Mais espaço entre uma seção e o título da seguinte (era 72px). Aprovado com 104px; reduzido para 80px no mesmo
     dia, a pedido: com os parágrafos mais juntos (18px), 104px virou branco demais. As setas do carrossel de materiais
     ficam de fora: a margem nelas abria um vão acima do título "Materiais para se aprofundar". */
  main.tema .read:not(.read--first){padding-top:80px}
  main.tema .tema-h2 + :not(.tema-setas){margin-top:34px}
}
/* Título como na prévia aprovada: 40px (o de antes tinha 44px; com o espaço maior em volta, o menor equilibra). */
@media(min-width:1000px){
  main.tema .tema-h2{font-size:40px;letter-spacing:.01em}
}
/* Cartões só com o contorno, sem fundo (escolha do dono em 24/10/2026, entre quatro versões mais leves): o
   azul-marinho aprovado antes ficou "muito forte". Borda fina azulada, ícone e nome no azul dos títulos — o traço
   verde vem cravado no próprio <svg>, por isso a cor é trocada nele —, número discreto e o nome na letra dos
   títulos. Cursos (bloco de Atividades, abaixo) tem a mesma regra. */
main.tema .tema-assuntos{gap:20px}
html:not([data-theme]) main.tema .tema-card{gap:30px;padding:30px 28px 28px;border:1px solid rgba(35,54,88,.38);border-radius:10px;background:transparent}
main.tema .tema-card-topo svg{width:36px;height:36px;stroke:var(--hb-ancora)}
main.tema .tema-card-n{font:400 18px/1 var(--disp);color:#A9B1C0}
main.tema .tema-card-t{font:400 21px/1.28 var(--disp);color:var(--hb-ancora)}
/* Convite do Acervo em azul-marinho, como os cartões (aprovado em 24/10/2026, votado contra o de antes): a frase na
   letra dos títulos, maior e em branco, e o botão branco no lugar do verde. Era o desenho antigo da faixa "Torne-se um
   membro" da home (papel, fio de 1px, botão verde) — a home já mudou e o convite tinha ficado para trás. */
html:not([data-theme]) main.tema .tema-faixa{gap:56px;padding:40px 44px;border:0;border-radius:10px;background-color:var(--hb-navy)}
html:not([data-theme]) main.tema .read .tema-faixa p{max-width:none;font:400 22px/1.45 var(--disp);letter-spacing:.01em;color:#fff}
html:not([data-theme]) main.tema .read .tema-faixa a{border-color:#fff;background:#fff;color:var(--hb-navy)}
html:not([data-theme]) main.tema .read .tema-faixa a:hover{border-color:#DCE4EF;background:#DCE4EF;color:var(--hb-navy)}
html:not([data-theme]) main.tema .read .tema-faixa a:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:599px){
  html:not([data-theme]) main.tema .tema-faixa{gap:22px;padding:28px 24px}
  html:not([data-theme]) main.tema .read .tema-faixa p{font-size:19px}
}
/* Parágrafos: 18px entre um e outro (aprovado em 24/10/2026). Eram 29px com a linha de 32px — quase uma linha em
   branco inteira. Só os parágrafos do texto (filhos diretos do `.read`): citação, convite e materiais têm os seus. */
html:not([data-theme]) main.tema .read > p:not(:last-child){margin-bottom:18px}

/* ═══ ATIVIDADES — O MESMO REFINO DOS TEMAS (24/10/2026, pedido do dono: «aplicasse essas mesmas modificações…
   dentro do menu Atividades… em todas») ════════════════════════════════════════════════════════════════════════
   As oito páginas do menu usam dois moldes; cada mudança aprovada nos temas entra onde o molde tem a peça:
     · leitura (Cursos; Projeção Astral, Clarividência e Bioenergia; Lives): 18px entre parágrafos; em Cursos, os
       cartões iguais aos dos temas (só o contorno, desde 24/10). Não têm citação, títulos de seção nem convite.
     · energia (Doar energia, Receber energia, Receber energia online, Trabalho em Hospitais, Fazer um relato):
       citação maior e 18px entre parágrafos (eram 16px na prosa e 20px na faixa azul). Os títulos já têm 40px e as
       seções já são faixas — não há espaço antes dos títulos para mexer.
   `body[data-page]` traz o slug em português nos dois idiomas. Citação só no computador, como nos temas. */
html:not([data-theme]) body:is([data-page="cursos"],[data-page="lives"],[data-page="projecao-astral-clarividencia-e-bioenergia"]) .read > p:not(:last-child){margin-bottom:18px}
body[data-page="cursos"] .tema-assuntos{gap:20px}
html:not([data-theme]) body[data-page="cursos"] .tema-card{gap:30px;padding:30px 28px 28px;border:1px solid rgba(35,54,88,.38);border-radius:10px;background:transparent}
body[data-page="cursos"] .tema-card-topo svg{width:36px;height:36px;stroke:var(--hb-ancora)}
body[data-page="cursos"] .tema-card-n{font:400 18px/1 var(--disp);color:#A9B1C0}
body[data-page="cursos"] .tema-card-t{font:400 21px/1.28 var(--disp);color:var(--hb-ancora)}
html:not([data-theme]) main.de :is(.de-p,.de-pn):not(:first-of-type){margin-top:18px}
@media(min-width:861px){
  main.de .de-cit{padding-left:34px;font-size:31px;line-height:1.36}
  main.de .de-cit--sm{font-size:28px}
}

/* Grão de papel nos cartões só com contorno (escolha do dono em 24/10/2026, entre grão, linhas, pontilhado e marca-
   d'água): "alguma textura no cartão, só para não ficar um contorno muito simples". Um ladrilho de 180px de pontos
   esparsos no azul dos títulos, com alfa de 0 a 20/255 — mais forte que isso o cartão fica cinza e chuviscado.
   Embutido (data URI, PNG de paleta de 12,5 KB): não depende de pasta de assets no deploy, e a CSP aceita `data:`
   em img-src. Vale para os temas e para Cursos; vem depois das regras dos cartões, que zeram o fundo. */
html:not([data-theme]) :is(main.tema,body[data-page="cursos"]) .tema-card,html:not([data-theme]) main.de .de-regua-i{background-image:url("data:image/png;base64,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");background-size:180px 180px;background-repeat:repeat}

/* ═══ ENERGIA — REFINO APROVADO ITEM A ITEM (24/10/2026; testagent/doar-propostas) ═════════════════════════════════
   Votado sobre "Doar energia à distância", vale para o molde de energia (`main.de`: doar, receber, receber online,
   hospitais, relato). Aprovados: faixa azul com mais respiro, campos do formulário em caixas e o "Quer encerrar sua
   participação?" numa linha discreta. Os destaques do topo (`.de-regua`) ainda estão em proposta. */
/* Faixa azul: mais respiro entre as perguntas, número dos passos legível (era 12px em letra de máquina, dourado) e
   o texto um pouco mais claro. Só nas faixas azuis de fato — no `de--claro` a "faixa azul" é clara. */
main.de:not(.de--claro) .de-fx--navy .de-linha{margin-top:52px;padding-top:52px;border-top-color:rgba(255,255,255,.12)}
main.de:not(.de--claro) .de-fx--navy .de-linha-c .de-pn{color:rgba(247,245,240,.86)}
main.de:not(.de--claro) .de-fx--navy .de-passo{padding-bottom:24px;border-bottom-color:rgba(255,255,255,.1)}
main.de:not(.de--claro) .de-fx--navy .de-passo + .de-passo{padding-top:22px}
main.de:not(.de--claro) .de-fx--navy .de-num{font:400 24px/1 var(--disp);color:#8FD0C6;letter-spacing:0}
main.de:not(.de--claro) .de-fx--navy .de-passo-p{color:rgba(247,245,240,.86)}
/* Formulário: campos em caixas e o nome do campo na letra do site (era IBM Plex Mono). Com a borda inteira, o foco
   ganha a moldura verde-petróleo — a regra antiga só trocava a cor do fio de baixo. */
main.de .de-campo>span{font:700 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#55607A}
main.de .de-campo input,main.de .de-campo textarea,main.de .de-campo select{margin-top:8px;padding:13px 16px;border:1px solid rgba(35,54,88,.32);border-radius:0;background:#fff}
main.de .de-campo input:focus,main.de .de-campo textarea:focus,main.de .de-campo select:focus{border-color:var(--f1a-teal);box-shadow:0 0 0 1px var(--f1a-teal)}
main.de .de-form-g{row-gap:22px}
/* "Quer encerrar sua participação?": uma linha discreta, sem a caixa creme — texto à esquerda, botão à direita. */
main.de .de-sair{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:28px;padding:22px 0;border:0;
  border-top:1px solid var(--hb-linha);border-radius:0;background:none;text-align:left}
main.de .de-sair-t{margin:0;font-size:20px}
main.de .de-sair-d{grid-column:1;margin:4px 0 0;font-size:14.5px;line-height:1.55;max-width:none}
main.de .de-sair-bt{grid-column:2;grid-row:1 / span 2;margin:0}
@media(max-width:600px){
  main.de .de-sair{grid-template-columns:1fr}
  main.de .de-sair-bt{grid-column:1;grid-row:auto;justify-self:start;margin-top:16px}
}

/* ═══ FAÇA PARTE — «CONVITE ABERTO» (24/10/2026, escolha do dono: «aprovada. Pode implementar.») ══════════════
   Mockup aprovado: o mockup aprovado (pasta de propostas apagada depois de implementado). Componente FacaParte.tsx; conteúdo nos blocos
   "fp-*" da página (ver pecasDaFacaParte no render.ts). Tudo escopado em `.cv-pagina` (o <main> da página); a capa
   fica fora do `.cv`, igual às outras páginas. Cantos retos; Marcellus SC nos títulos, Karla no texto, Plex Mono nas
   etiquetas. Nada aparece ao rolar (o dono não quer conteúdo «carregando» na rolagem): o que se move é a faixa de
   fotos, o céu, o Ken Burns do fecho, o parallax leve e as respostas ao mouse — tudo desligado sob
   prefers-reduced-motion. Apagar este bloco deixa a página sem estilo próprio (o desenho antigo era o .mb-*). */
.cv-pagina .cv{--cv-navy:#132444;--cv-navy2:#233658;--cv-teal:#0E7C86;--cv-teal2:#3FB6C1;--cv-areia:#F3F1EC;--cv-linha:#E2DED5;
  --cv-txt:#3B4458;--cv-ease:cubic-bezier(.22,.61,.36,1);--cv-gut:48px;color:var(--cv-txt);font-family:var(--body)}
.cv-pagina .cv *,.cv-pagina .cv *::before,.cv-pagina .cv *::after{box-sizing:border-box;border-radius:0}
.cv-pagina .cv [id]{scroll-margin-top:140px}
.cv-pagina .cv-wrap{max-width:1440px;margin-inline:auto;padding-inline:var(--cv-gut)}
.cv-pagina .cv h2{margin:0;font:400 44px/1.12 var(--disp);letter-spacing:.02em;text-transform:uppercase;color:var(--cv-navy2);text-wrap:balance}
.cv-pagina .cv h3{margin:0;font:400 26px/1.15 var(--disp);font-variant:small-caps;letter-spacing:.015em;color:var(--cv-navy2);text-wrap:balance}
.cv-pagina .cv p{margin:0}
/* `.cv .cv-eyebrow`: a etiqueta é um <p>, e o `.cv p{margin:0}` acima a colava no título. */
.cv-pagina .cv .cv-eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 22px;font:500 11.5px/1 var(--mono);letter-spacing:.22em;
  text-transform:uppercase;color:var(--cv-teal)}
.cv-pagina .cv-fio{display:block;width:26px;height:1px;background:currentColor;opacity:.7}
.cv-pagina .cv .cv-eyebrow--claro{color:var(--cv-teal2)}

/* botões retos, com resposta ao mouse */
.cv-pagina .cv-btn{position:relative;display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 30px;background:var(--cv-navy);color:#fff;
  font:700 12.5px/1 var(--body);letter-spacing:.13em;text-transform:uppercase;text-decoration:none;overflow:hidden;isolation:isolate;
  transition:color .35s var(--cv-ease),transform .35s var(--cv-ease),box-shadow .35s var(--cv-ease)}
.cv-pagina .cv-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cv-teal);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--cv-ease)}
.cv-pagina .cv-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(19,36,68,.55)}
.cv-pagina .cv-btn:hover::before{transform:scaleX(1)}
.cv-pagina .cv-btn span{transition:transform .35s var(--cv-ease)}
.cv-pagina .cv-btn:hover span{transform:translateY(2px)}
.cv-pagina .cv-btn:focus-visible{outline:2px solid var(--cv-teal);outline-offset:3px}
.cv-pagina .cv-btn--linha{background:transparent;color:var(--cv-navy);box-shadow:inset 0 0 0 1px var(--cv-navy)}
.cv-pagina .cv-btn--linha:hover{color:#fff;box-shadow:inset 0 0 0 1px var(--cv-teal)}
.cv-pagina .cv-btn--claro{background:#fff;color:var(--cv-navy)}
.cv-pagina .cv-btn--claro:hover{color:#fff}

/* 1 · abertura */
.cv-pagina .cv-abre{background:#fff;padding-block:130px 140px;overflow:hidden}
.cv-pagina .cv-abre-grid{display:grid;grid-template-columns:minmax(0,1fr) 620px;gap:72px;align-items:center}
.cv-pagina .cv-abre-txt h2{font-size:54px;line-height:1.08}
.cv-pagina .cv-abre-ps{margin-top:30px}
.cv-pagina .cv-abre-ps p{font:400 19px/1.68 var(--body);letter-spacing:-.01em;color:var(--cv-txt)}
.cv-pagina .cv-abre-ps p+p{margin-top:18px}
.cv-pagina .cv-botoes{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
.cv-pagina .cv-colagem{position:relative;height:580px}
.cv-pagina .cv-foto{position:absolute;margin:0;overflow:hidden;box-shadow:0 30px 60px -30px rgba(19,36,68,.45);will-change:transform}
.cv-pagina .cv-foto img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.2s var(--cv-ease)}
.cv-pagina .cv-foto:hover img{transform:scale(1.12)}
.cv-pagina .cv-foto--a{left:0;top:56px;width:400px;height:300px;z-index:1}
.cv-pagina .cv-foto--b{right:0;top:0;width:270px;height:370px;z-index:2;outline:10px solid #fff}
.cv-pagina .cv-foto--c{left:150px;top:300px;width:400px;height:260px;z-index:3;outline:10px solid #fff}

/* 2 · números (calculados/lidos do site: anos, Acervo, nota do Google) */
.cv-pagina .cv-numeros{background:var(--cv-navy);color:#fff;padding-block:64px}
.cv-pagina .cv-num-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
/* Centralizados na coluna (pedido do dono, 24/10/2026: «o 28 à esquerda não fica coerente»). */
.cv-pagina .cv-num{display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 32px;text-align:center;
  border-left:1px solid rgba(255,255,255,.16)}
.cv-pagina .cv-num:first-child{border-left:0}
.cv-pagina .cv-num-v{font:400 64px/1 var(--disp);letter-spacing:.01em;color:#fff;font-variant-numeric:tabular-nums}
.cv-pagina .cv-estrela{color:#E0A82E;font-size:.62em;vertical-align:.22em}
/* Legendas numa linha só, as três iguais (o dono: «dá para manter esse subtítulo em uma linha só» — a dos anos
   perdeu o «sem fins lucrativos»). */
.cv-pagina .cv-num-r{font:400 15.5px/1.5 var(--body);color:rgba(255,255,255,.72);text-wrap:balance}

/* 3 · faixa de fotos em rolagem contínua (a 2ª volta já vem no HTML) */
.cv-pagina .cv-faixa{background:var(--cv-areia);padding-block:88px 0;overflow:hidden}
.cv-pagina .cv-faixa-cab{margin-bottom:6px}
.cv-pagina .cv-trilho{overflow:hidden;padding-block:12px 88px}
.cv-pagina .cv-trilho-in{display:flex;gap:16px;width:max-content;animation:cv-rola 70s linear infinite}
.cv-pagina .cv-trilho:hover .cv-trilho-in{animation-play-state:paused}
.cv-pagina .cv-quadro{position:relative;margin:0;height:300px;width:280px;flex:none;overflow:hidden;transition:transform .6s var(--cv-ease)}
.cv-pagina .cv-quadro.cv-larga{width:480px}
.cv-pagina .cv-quadro img{display:block;width:100%;height:100%;object-fit:cover}
.cv-pagina .cv-quadro figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 13px;
  background:linear-gradient(180deg,rgba(19,36,68,0),rgba(19,36,68,.72));
  font:500 10.5px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.cv-pagina .cv-quadro:hover{transform:translateY(-6px)}
@keyframes cv-rola{to{transform:translateX(calc(-50% - 8px))}}

/* 4 · os benefícios em quatro frentes */
.cv-pagina .cv-recebe{background:#fff;padding-block:140px}
.cv-pagina .cv-cab{margin-bottom:56px}
.cv-pagina .cv-frentes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.cv-pagina .cv-frente{position:relative;display:grid;grid-template-columns:260px minmax(0,1fr);background:var(--cv-areia);overflow:hidden;min-height:330px;
  transition:background .5s var(--cv-ease),box-shadow .5s var(--cv-ease)}
.cv-pagina .cv-frente::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--cv-teal);transform:scaleX(0);
  transform-origin:left;transition:transform .7s var(--cv-ease)}
.cv-pagina .cv-frente:hover{background:#fff;box-shadow:0 26px 50px -30px rgba(19,36,68,.4)}
.cv-pagina .cv-frente:hover::after{transform:scaleX(1)}
.cv-pagina .cv-frente-foto{position:relative;overflow:hidden}
.cv-pagina .cv-frente-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--cv-op,50% 50%);transform:scale(1.02);
  transition:transform 1.4s var(--cv-ease)}
.cv-pagina .cv-frente-foto img.cv-foto-pessoas{top:auto;bottom:0;height:140%}
.cv-pagina .cv-frente:hover .cv-frente-foto img{transform:scale(1.08)}
.cv-pagina .cv-frente-txt{padding:38px 40px 36px}
.cv-pagina .cv-frente-n{display:block;font:500 12px/1 var(--mono);letter-spacing:.2em;color:var(--cv-teal);margin-bottom:12px}
.cv-pagina .cv-frente h3{font-size:30px;margin-bottom:18px}
.cv-pagina .cv-frente ul{list-style:none;margin:0;padding:0}
.cv-pagina .cv-frente li{display:flex;flex-direction:column;gap:4px;padding:13px 0;border-top:1px solid var(--cv-linha)}
.cv-pagina .cv-frente li strong{font:700 16px/1.35 var(--body);color:var(--cv-navy2)}
.cv-pagina .cv-frente li span{font:400 15.5px/1.55 var(--body);color:#5A6274}

/* 5 · cartão de adesão */
.cv-pagina .cv-adesao{background:var(--cv-areia);padding-block:140px}
.cv-pagina .cv-adesao-grid{display:grid;grid-template-columns:minmax(0,1fr) 620px;align-items:stretch}
.cv-pagina .cv-adesao-foto{margin:0;position:relative;overflow:hidden;min-height:640px}
.cv-pagina .cv-adesao-par{position:absolute;left:0;top:-8%;width:100%;height:116%;display:block;will-change:transform}
.cv-pagina .cv-adesao-par img{display:block;width:100%;height:100%;object-fit:cover}
.cv-pagina .cv-cartao{position:relative;background:#fff;padding:56px 60px;box-shadow:0 40px 80px -50px rgba(19,36,68,.45)}
.cv-pagina .cv-filete{position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,var(--cv-teal),var(--cv-teal2))}
.cv-pagina .cv-cartao h2{font-size:40px}
.cv-pagina .cv-preco{display:flex;align-items:baseline;gap:14px;margin-top:26px;padding-bottom:22px;border-bottom:1px solid var(--cv-linha)}
.cv-pagina .cv-preco-v{font:400 60px/1 var(--disp);color:var(--cv-navy);letter-spacing:.01em}
.cv-pagina .cv-preco-p{font:500 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cv-teal)}
.cv-pagina .cv-cartao-s{margin-top:20px}
.cv-pagina .cv-cartao-s p{font:400 17px/1.65 var(--body);color:var(--cv-txt)}
.cv-pagina .cv-inclui{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.cv-pagina .cv-inclui li{position:relative;padding-left:26px;font:400 16px/1.5 var(--body);color:var(--cv-navy2)}
.cv-pagina .cv-inclui li::before{content:"";position:absolute;left:0;top:.42em;width:12px;height:7px;border-left:1.5px solid var(--cv-teal);
  border-bottom:1.5px solid var(--cv-teal);transform:rotate(-45deg)}
.cv-pagina .cv-condicao{margin:30px 0 34px;padding:22px 24px;background:var(--cv-areia);border-left:3px solid var(--cv-navy2)}
.cv-pagina .cv-condicao h3{font-size:22px;margin-bottom:8px}
.cv-pagina .cv-condicao p{font:400 16px/1.62 var(--body);color:var(--cv-txt)}

/* 7 · faixa azul do céu: propósito, passos e formulário */
.cv-pagina .cv-convite{position:relative;background:var(--cv-navy);padding-block:140px;overflow:hidden;color:#fff}
.cv-pagina .cv-ceu{position:absolute;inset:-6%;background:linear-gradient(180deg,rgba(19,36,68,.55),rgba(19,36,68,.88)),var(--ceu,none) center/cover no-repeat;
  animation:cv-ceu 48s ease-in-out infinite alternate}
@keyframes cv-ceu{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.08) translate3d(-1.5%,-1%,0)}}
.cv-pagina .cv-convite-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 600px;gap:96px;align-items:start}
.cv-pagina .cv-convite h2{color:#fff}
.cv-pagina .cv-convite-txt h2{max-width:14ch}
.cv-pagina .cv-convite-ps{margin-top:28px}
.cv-pagina .cv-convite-ps p{font:400 19px/1.68 var(--body);color:rgba(255,255,255,.84)}
.cv-pagina .cv-passos{list-style:none;margin:44px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.16)}
.cv-pagina .cv-passos li{display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:center;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.cv-pagina .cv-passo-n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--cv-teal2);color:var(--cv-teal2);
  font:400 20px/1 var(--disp)}
.cv-pagina .cv-passos strong{display:block;font:700 16.5px/1.35 var(--body);color:#fff}
.cv-pagina .cv-passos div span{display:block;margin-top:4px;font:400 15.5px/1.5 var(--body);color:rgba(255,255,255,.7)}
.cv-pagina .cv-apoiar{margin-top:44px}
.cv-pagina .cv-apoiar h3{color:#fff;font-size:24px}
.cv-pagina .cv-apoiar p{margin-top:8px;font:400 16.5px/1.6 var(--body);color:rgba(255,255,255,.78)}
.cv-pagina .cv-apoiar a{display:inline-flex;gap:10px;margin-top:14px;font:700 12.5px/1 var(--body);letter-spacing:.13em;text-transform:uppercase;
  color:var(--cv-teal2);text-decoration:none;padding-bottom:6px;
  background:linear-gradient(var(--cv-teal2),var(--cv-teal2)) left bottom/0 1px no-repeat;transition:background-size .45s var(--cv-ease)}
.cv-pagina .cv-apoiar a:hover{background-size:100% 1px}
/* Área de toque maior que o texto (link pequeno no celular), sem mudar o desenho. */
.cv-pagina .cv-apoiar a,.cv-pagina .cv-form-notas a{position:relative}
.cv-pagina .cv-apoiar a::after,.cv-pagina .cv-form-notas a::after{content:"";position:absolute;inset:-12px -6px}
.cv-pagina .cv-form{background:#fff;color:var(--cv-txt);padding:52px 52px 44px;box-shadow:0 50px 90px -50px rgba(0,0,0,.6)}
.cv-pagina .cv-form h2{font-size:36px;color:var(--cv-navy2)}
.cv-pagina .cv-campos{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;margin-top:30px}
.cv-pagina .cv-campo{display:flex;flex-direction:column;gap:7px}
.cv-pagina .cv-campo--largo{grid-column:1/-1}
.cv-pagina .cv-campo span{font:500 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#5A6274}
.cv-pagina .cv-campo input{height:50px;padding:0 16px;border:1px solid #D9D4C9;background:var(--cv-areia);font:400 16px/1 var(--body);
  color:var(--cv-navy2);outline:none;transition:border-color .3s,background .3s,box-shadow .3s}
.cv-pagina .cv-campo input:focus{border-color:var(--cv-teal);background:#fff;box-shadow:0 0 0 3px rgba(14,124,134,.14)}
.cv-pagina .cv-btn--cheio{width:100%;justify-content:center;margin-top:26px;border:0;cursor:pointer;height:58px}
.cv-pagina .cv-form-notas{margin-top:22px;padding-top:18px;border-top:1px solid var(--cv-linha)}
.cv-pagina .cv-form-notas p{font:400 15px/1.6 var(--body);color:#5A6274}
.cv-pagina .cv-form-notas p+p{margin-top:6px}
.cv-pagina .cv-form-notas a{color:var(--cv-navy2);font-weight:700;text-decoration:none;border-bottom:1px solid var(--cv-teal)}

/* 8 · fecho */
.cv-pagina .cv-fecho{background:#fff;padding-block:140px}
.cv-pagina .cv-fecho-grid{display:grid;grid-template-columns:minmax(0,1fr) 700px;gap:72px;align-items:center}
.cv-pagina .cv-fecho-txt h2{font-size:50px;line-height:1.08}
.cv-pagina .cv-fecho-txt p{margin-top:22px;font:400 19px/1.68 var(--body);color:var(--cv-txt)}
.cv-pagina .cv-fecho-txt .cv-btn{margin-top:36px}
.cv-pagina .cv-fecho-foto{margin:0;overflow:hidden;height:420px}
.cv-pagina .cv-fecho-foto img{display:block;width:100%;height:100%;object-fit:cover;animation:cv-ken 26s ease-in-out infinite alternate}
@keyframes cv-ken{from{transform:scale(1.02) translateX(0)}to{transform:scale(1.14) translateX(-3%)}}

/* barra fixa de chamada (o botão fica antes do ícone do WhatsApp) */
.cv-pagina .cv-barra{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(19,36,68,.97);color:#fff;transform:translateY(110%);
  transition:transform .6s var(--cv-ease);box-shadow:0 -14px 30px -18px rgba(0,0,0,.5)}
.cv-pagina .cv-barra.is-on{transform:none}
.cv-pagina .cv-barra-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px;padding-right:150px}
.cv-pagina .cv-barra-t{font:400 17px/1 var(--body);color:rgba(255,255,255,.82)}
.cv-pagina .cv-barra-t strong{font:400 22px/1 var(--disp);font-variant:small-caps;letter-spacing:.02em;color:#fff;margin-right:4px}
.cv-pagina .cv-barra .cv-btn{height:46px}

/* telas médias: colunas mais estreitas */
@media (max-width:1240px){
  .cv-pagina .cv-abre-grid{grid-template-columns:minmax(0,1fr) 500px;gap:48px}
  .cv-pagina .cv-colagem{height:500px}
  .cv-pagina .cv-foto--a{width:330px;height:250px;top:48px}
  .cv-pagina .cv-foto--b{width:220px;height:310px}
  .cv-pagina .cv-foto--c{left:120px;top:262px;width:340px;height:225px}
  .cv-pagina .cv-frentes{grid-template-columns:1fr}
  .cv-pagina .cv-adesao-grid{grid-template-columns:minmax(0,1fr) 560px}
  .cv-pagina .cv-convite-grid{grid-template-columns:minmax(0,1fr) 520px;gap:56px}
  .cv-pagina .cv-fecho-grid{grid-template-columns:minmax(0,1fr) 560px;gap:48px}
  /* Colunas de texto mais estreitas: títulos menores (o inglês, mais longo, quebrava em escada). */
  .cv-pagina .cv-abre-txt h2{font-size:44px}
  .cv-pagina .cv-convite-txt h2{font-size:36px}
}
/* Cartão do valor: abaixo de 1100px a coluna da foto ficava estreita e alta e cortava as pessoas — empilha. */
@media (max-width:1100px){
  /* As três legendas dos números continuam numa linha no tablet. */
  .cv-pagina .cv-num{padding-inline:14px}
  .cv-pagina .cv-num-r{font-size:14.5px}
  .cv-pagina .cv-adesao-grid{grid-template-columns:minmax(0,1fr)}
  .cv-pagina .cv-adesao-foto{min-height:460px}
}
/* tablet: uma coluna */
@media (max-width:980px){
  .cv-pagina .cv{--cv-gut:32px}
  .cv-pagina .cv-abre-grid,.cv-pagina .cv-adesao-grid,.cv-pagina .cv-convite-grid,.cv-pagina .cv-fecho-grid{grid-template-columns:minmax(0,1fr)}
  .cv-pagina .cv-abre{padding-block:96px}
  .cv-pagina .cv-colagem{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .cv-pagina .cv-foto{position:relative;inset:auto;width:auto;height:auto;outline:0;box-shadow:none;transform:none!important}
  .cv-pagina .cv-foto--a{grid-column:1/-1;aspect-ratio:16/9}
  /* Em 4:3 e da mesma altura: em 4/5 (e até quadrada) a da horta perdia as duas pessoas, e sobrava um vão embaixo. */
  .cv-pagina .cv-foto--b,.cv-pagina .cv-foto--c{aspect-ratio:4/3}
  .cv-pagina .cv-convite-txt h2{max-width:none}
  .cv-pagina .cv-fecho-foto{height:340px}
}
/* celular */
@media (max-width:760px){
  .cv-pagina .cv{--cv-gut:20px}
  .cv-pagina .cv [id]{scroll-margin-top:112px}
  .cv-pagina .cv h2{font-size:30px}
  .cv-pagina .cv-abre-txt h2{font-size:34px}
  .cv-pagina .cv-abre{padding-block:64px 72px}
  .cv-pagina .cv-abre-ps p,.cv-pagina .cv-convite-ps p,.cv-pagina .cv-fecho-txt p{font-size:17.5px}
  .cv-pagina .cv-botoes .cv-btn{width:100%;justify-content:center}
  .cv-pagina .cv-recebe,.cv-pagina .cv-adesao,.cv-pagina .cv-convite,.cv-pagina .cv-fecho{padding-block:72px}
  .cv-pagina .cv-numeros{padding-block:40px}
  .cv-pagina .cv-num-grid{grid-template-columns:minmax(0,1fr)}
  .cv-pagina .cv-num{padding:18px 0;border-left:0;border-top:1px solid rgba(255,255,255,.16)}
  .cv-pagina .cv-num:first-child{padding-top:0;border-top:0}
  .cv-pagina .cv-num-v{font-size:50px}
  .cv-pagina .cv-num-r{max-width:none}
  .cv-pagina .cv-faixa{padding-top:56px}
  .cv-pagina .cv-trilho{padding-bottom:56px}
  .cv-pagina .cv-quadro{height:210px;width:180px}
  .cv-pagina .cv-quadro.cv-larga{width:320px}
  .cv-pagina .cv-cab{margin-bottom:32px}
  .cv-pagina .cv-frente{grid-template-columns:minmax(0,1fr);min-height:0}
  .cv-pagina .cv-frente-foto{height:220px}
  .cv-pagina .cv-frente-txt{padding:28px 22px 24px}
  .cv-pagina .cv-frente h3{font-size:26px}
  .cv-pagina .cv-adesao-foto{min-height:280px}
  .cv-pagina .cv-cartao{padding:40px 22px 32px}
  .cv-pagina .cv-cartao h2{font-size:30px}
  /* O valor numa linha só («R$» e «150,00» se separavam); «por mês» desce se faltar espaço. */
  .cv-pagina .cv-preco{flex-wrap:wrap;row-gap:6px}
  .cv-pagina .cv-preco-v{font-size:42px;white-space:nowrap}
  .cv-pagina .cv-inclui{grid-template-columns:minmax(0,1fr)}
  .cv-pagina .cv-cartao .cv-btn{width:100%;justify-content:center}
  .cv-pagina .cv-form{padding:32px 22px 28px}
  .cv-pagina .cv-form h2{font-size:28px}
  .cv-pagina .cv-campos{grid-template-columns:minmax(0,1fr)}
  .cv-pagina .cv-fecho-txt h2{font-size:34px}
  .cv-pagina .cv-fecho-txt .cv-btn{width:100%;justify-content:center}
  .cv-pagina .cv-fecho-foto{height:240px}
  .cv-pagina .cv-barra-in{height:64px;padding-right:84px;gap:12px}
  .cv-pagina .cv-barra-t{display:none}
  .cv-pagina .cv-barra .cv-btn{flex:1;justify-content:center;height:44px;padding:0 14px;font-size:11.5px}
}
@media (prefers-reduced-motion: reduce){
  .cv-pagina .cv *,.cv-pagina .cv *::before,.cv-pagina .cv *::after{animation:none!important;transition:none!important}
  .cv-pagina [data-cv-par]{transform:none!important}
}

/* Destaques do topo das páginas de energia (Doar, Receber, Receber online) em cartões com contorno e grão — o mesmo
   desenho dos cartões dos temas — e, no computador, na MESMA ALTURA do texto ao lado (aprovado em 24/10/2026). O
   texto da esquerda muda muito de uma página para outra (285 a 430px), então os cartões acompanham a coluna do
   texto (`stretch` + `flex:1`) com o conteúdo centrado; compactos (14px de respiro, valor a 30px) para caberem até
   no texto mais curto. O grão vem da regra dos cartões dos temas, acima.
   Correção do mesmo dia: o piso dos três cartões (288px, com 14px de respiro) passava do texto mais curto do INGLÊS
   (Doar 274px, Online 253px) e eles sobravam 14 e 35px abaixo do texto. No computador o respiro de cima e de baixo
   vira só piso (6px): esticados, o conteúdo continua centrado e nada muda onde o texto é maior; o piso cai a ~240px.
   TRABALHO EM HOSPITAIS (pedido do dono, 24/10/2026): a lista «Quem é atendido» também acompanha a altura do texto —
   as linhas crescem por igual e o último fio cai no fim da citação. */
html:not([data-theme]) main.de .de-regua{gap:12px;border-top:0}
html:not([data-theme]) main.de .de-regua-i{justify-content:center;gap:4px;padding:14px 24px;border:1px solid rgba(35,54,88,.38);border-radius:10px}
main.de .de-regua-d{color:#55607A}
@media(min-width:1201px){
  main.de .de-2col:has(.de-regua),
  main.de .de-2col:has(.de-lista){align-items:stretch}
  main.de .de-regua-i{flex:1 1 0}
  html:not([data-theme]) main.de .de-regua-i{padding-block:6px}
  main.de .de-regua-v{font-size:30px}
  main.de .de-lista-i{flex:1 1 auto;display:flex;align-items:center}
}
/* Abaixo de 1201px a lista desce para baixo do texto e encolhia até a largura das palavras (os fios paravam em 304px
   mesmo num tablet de 1024): ocupa a coluna inteira, nas mesmas margens do texto. */
@media(max-width:1200px){
  main.de .de-lista{align-self:stretch}
}

/* ── RECEBER ENERGIA ONLINE AO VIVO: faixa creme COM respiro (24/10/2026, pedido do dono) ──
   Nesta página a faixa «navy» é clara (`de--claro`): sem fundo próprio, mostra o creme do site entre duas faixas
   brancas. O `de--claro` foi desenhado para a página numa cor só (72px entre as seções e 0 embaixo de cada uma), então
   os cartões do topo encostavam no creme e o botão «Receber Energia» encostava no branco de baixo. O dono quer a faixa
   creme («só dar um certo espacinho… antes estava colado»): fica creme, e as três faixas ganham o respiro das páginas
   irmãs (Doar/Receber energia) — 92 em cima e 96 embaixo, 88 antes do formulário; 56 no celular. O botão tinha texto
   e borda claros, feitos para o azul, e sumia no fundo claro. */
html:not([data-theme]) main.de.de--claro .de-fx--navy{background-color:var(--paper,#FAF9F5)}
html:not([data-theme]) main.de.de--claro .de-fx:not(:last-of-type){padding-bottom:96px}
html:not([data-theme]) main.de.de--claro .de-fx + .de-fx{padding-top:92px}
html:not([data-theme]) main.de.de--claro .de-fx + .de-fx--form{padding-top:88px}
@media(max-width:820px){
  html:not([data-theme]) main.de.de--claro .de-fx:not(:last-of-type){padding-bottom:56px}
  html:not([data-theme]) main.de.de--claro .de-fx + .de-fx{padding-top:56px}
}
html:not([data-theme]) main.de.de--claro .de-ghost{border-color:rgba(35,54,88,.38);color:var(--f1a-ancora,#233658)}
html:not([data-theme]) main.de.de--claro .de-ghost:hover{border-color:var(--f1a-ancora,#233658);background:rgba(35,54,88,.04)}

/* ── FORMULÁRIOS DE ENERGIA no desenho do Faça Parte (24/10/2026, pedido do dono) ──
   Fazer um relato: «melhore o formulário… mais legível, igual… o formulário do Faça Parte… os placeholders são um
   cinza». Doar e Receber energia logo depois: «também devem… seguir aquele mesmo padrão… do jeito que está muito bom,
   só… uns ajustes no design para ele ficar um pouco mais visível». A disposição dos campos não muda; os campos copiam
   os do Faça Parte (`.cv-campo`): fundo areia #F3F1EC, borda #D9D4C9, 50px, texto 16px, placeholder cinza #757575 (o
   que o Chrome mostra lá; aqui fica explícito para o Safari não clarear), rótulo em mono 10.5px, foco com borda teal
   e anel; o botão copia o `.cv-btn--cheio` (58px, caixa-alta, varredura teal no hover). Vale para os três `.de-forma`
   (o descadastro e o botão da página online ficam fora: não são estes formulários). */
html:not([data-theme]) main.de .de-forma .de-form-g{gap:16px 18px}
html:not([data-theme]) main.de .de-forma .de-campo{gap:7px}
html:not([data-theme]) main.de .de-forma .de-campo>span{font:500 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#5A6274}
html:not([data-theme]) main.de .de-forma .de-campo :is(input,textarea){margin-top:0;border:1px solid #D9D4C9;border-radius:0;background:#F3F1EC;
  font:400 16px/1.6 var(--body);color:#233658;outline:none;box-shadow:none;transition:border-color .3s,background .3s,box-shadow .3s}
html:not([data-theme]) main.de .de-forma .de-campo input{height:50px;padding:0 16px;line-height:1}
html:not([data-theme]) main.de .de-forma .de-campo textarea{padding:14px 16px;min-height:100px}
html:not([data-theme]) main.de .de-forma .de-campo :is(input,textarea)::placeholder{color:#757575;opacity:1}
html:not([data-theme]) main.de .de-forma .de-campo :is(input,textarea):focus{border-color:#0E7C86;background:#fff;box-shadow:0 0 0 3px rgba(14,124,134,.14)}
html:not([data-theme]) main.de .de-forma .de-btn{height:58px;margin-top:26px;gap:12px;background:#132444;font:700 12.5px/1 var(--body);
  letter-spacing:.13em;text-transform:uppercase;position:relative;overflow:hidden;isolation:isolate;transition:transform .35s ease,box-shadow .35s ease}
html:not([data-theme]) main.de .de-forma .de-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:#0E7C86;
  transform:scaleX(0);transform-origin:left;transition:transform .5s ease}
html:not([data-theme]) main.de .de-forma .de-btn:hover{background:#132444;transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(19,36,68,.55)}
html:not([data-theme]) main.de .de-forma .de-btn:hover::before{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  html:not([data-theme]) main.de .de-forma .de-btn,html:not([data-theme]) main.de .de-forma .de-btn::before{transition:none}
  html:not([data-theme]) main.de .de-forma .de-btn:hover{transform:none}
}

/* ── FAZER UM RELATO: colunas na mesma altura (24/10/2026, pedido do dono) ──
   As duas autorizações voltam a ser um bloco só (12px entre elas — o `.de-relato-form .de-agree` dava 30 às duas), e
   o formulário fica mais compacto (26 depois do título, caixa «Conte-nos» a partir de 100px). No computador as colunas
   têm a mesma altura com qualquer texto: a mais baixa estica — se for o formulário, a caixa «Conte-nos» cresce; se for
   o texto, a sobra fica entre o último parágrafo e a citação (sobra medida hoje: 15px). Abaixo de 1201px o formulário
   desce para baixo do texto e encolhia até a largura dos campos (parava em 588px num tablet de 1024): ocupa a coluna. */
html:not([data-theme]) main.de .de-relato-form .de-form-g{margin-top:26px}
html:not([data-theme]) main.de .de-relato-form .de-agree{margin-top:24px}
html:not([data-theme]) main.de .de-relato-form .de-agree + .de-agree{margin-top:12px}
@media(max-width:1200px){
  main.de .de-relato-form{align-self:stretch}
}
@media(min-width:1201px){
  main.de .de-relato{align-items:stretch}
  main.de .de-relato-txt .de-p:last-of-type{margin-bottom:auto}
  main.de .de-relato-form{display:flex;flex-direction:column}
  main.de .de-relato-form .de-forma{flex:1}
  main.de .de-relato-form .de-form-g{flex:1;grid-template-rows:auto auto auto 1fr}
  main.de .de-relato-form .de-campo--cx textarea{flex:1}
}

/* ── DOE E RECEBA ENERGIA: ABAS SOB A CAPA (24/10/2026, aprovado pelo dono) ──
   As cinco páginas da seção numa linha logo abaixo da capa, para trocar sem abrir o menu do topo (ver
   `abasDaEnergia` em render.ts — rótulos e ordem vêm do menu). Escolha dele entre quatro arranjos: «centralizadas na
   faixa creme» — o papel do site separa a navegação do texto, que continua no branco. A aberta em negrito, com o
   sublinhado navy sobre o fio de baixo. Centradas pelas margens automáticas da primeira e da última aba, e não por
   `justify-content:center`: quando não cabem (abaixo de 1061px), a linha rola de lado sem cortar o começo, e enquanto
   cabe continua no meio. A aberta é trazida para o meio da faixa pelo script da página. */
main.de .de-abas{background:var(--paper,#FAF9F5);border-bottom:1px solid #E3DFD5}
main.de .de-abas-in{position:relative;width:min(100% - 48px,var(--de-cont,1138px));margin-inline:auto;display:flex;gap:48px}
main.de .de-abas a:first-child{margin-left:auto}
main.de .de-abas a:last-child{margin-right:auto}
main.de .de-abas a{position:relative;display:block;flex:none;padding:25px 0 23px;font:500 15.5px/1 var(--body);color:#5A6478;
  text-decoration:none;white-space:nowrap;transition:color .2s ease}
main.de .de-abas a:hover{color:#233658}
main.de .de-abas a[aria-current="page"]{color:#233658;font-weight:700}
main.de .de-abas a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:#233658}
main.de .de-abas a:focus-visible{outline:2px solid var(--f1a-teal);outline-offset:-2px}
@media(max-width:1180px){
  main.de .de-abas-in{gap:32px}
  main.de .de-abas a{font-size:14.5px}
}
@media(max-width:1060px){
  /* Os dois ::before/::after de largura zero são as pontas da linha: com o `gap`, deixam 28px antes da primeira aba
     e depois da última, inclusive quando a linha rola (padding no fim de um flex rolável nem sempre vale). */
  main.de .de-abas-in{width:100%;gap:28px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  main.de .de-abas-in::before,main.de .de-abas-in::after{content:"";flex:0 0 0}
  main.de .de-abas-in::-webkit-scrollbar{display:none}
  main.de .de-abas a{padding:20px 0 18px}
  main.de .de-abas a[aria-current="page"]::after{bottom:0}
}
@media(prefers-reduced-motion:reduce){main.de .de-abas a{transition:none}}

/* ═══ HOME: CADA SEÇÃO CABE NA TELA (24/10/2026, pedido do dono) ═══════════════════════════════════════════════
   «esses espaços em branco que ficam acima e abaixo de cada sessão ficaram muito grandes… ajustasse para que cada
   sessão coubesse na tela… quando couber». No computador, o respiro de cada seção deixa de ser os 215px fixos do
   bloco «respiro» e passa a ser o que sobra da altura da tela depois do conteúdo, metade em cima e metade embaixo —
   nunca mais que os 215px de antes, nunca menos que o mínimo de cada uma. As compensações daquele bloco (sombra das
   faixas azuis, folga da primeira/última linha) ficam iguais. Conteúdo medido de 1512 a 1920px de largura: Sobre 657,
   Temas 729, Participe 845, Avaliações 644 — numa tela de 970px de altura isso dá respiro de ~144, ~135, ~41 e ~165.
   Últimos conteúdos (1285) não cabe: fica com respiro fixo menor. Celular não muda. */
@media(min-width:861px){
  main.hb>.hb-sobre{--hb-r:clamp(72px,calc((100svh - 682px)/2),215px);padding-block:var(--hb-r) calc(var(--hb-r) + 25px)}
  main.hb>.hb-temas>.hb-in{--hb-r:clamp(72px,calc((100svh - 699px)/2),215px);padding-block:calc(var(--hb-r) - 30px) var(--hb-r)}
  main.hb>.hb-participe{--hb-r:clamp(24px,calc((100svh - 803px)/2),215px);padding-block:calc(var(--hb-r) + 25px) calc(var(--hb-r) + 18px)}
  main.hb>.hb-aval--cartoes>.hb-in{--hb-r:clamp(72px,calc((100svh - 639px)/2),215px);padding-block:calc(var(--hb-r) - 6px) calc(var(--hb-r) + 1px)}
  main.hb>section.hb-conteudos,
  html.snap main.hb>section.hb-conteudos:last-of-type{--hb-r:150px;padding-block:calc(var(--hb-r) - 5px) calc(var(--hb-r) - 11px)}
}

/* ═══ «QUERO FAZER PARTE» MAIOR (24/10/2026, pedido do dono) ═══════════════════════════════════════════════════
   «esse botão fique maior… muito escondidinho, muito pequeno». Sai do tamanho miúdo (46px de altura, letra de 11,5px)
   e fica acima dos outros botões da home (Ir para o Acervo / Ver mais avaliações: 58px, 13,5px), por ser a chamada
   principal da faixa do associado. A faixa não cresce (o texto ao lado já é mais alto que o botão). */
.hb-membro-faixa .hb-cta-verde{height:62px;padding:0 46px;border-radius:4px;font-size:14.5px;letter-spacing:.14em}
@media(max-width:860px){.hb-membro-faixa .hb-cta-verde{height:56px;padding:0 34px;font-size:13.5px}}

/* ═══ APARIÇÃO NA ROLAGEM (24/10/2026, «Subir suave» escolhido pelo dono) ══════════════════════════════════════
   As classes vêm do jsDoSite (render.ts, «APARIÇÃO NA ROLAGEM»): .rv esconde e desce 36px; .rv-on revela. O atraso de
   60ms entre os cartões de uma fileira vem em --rv-atraso. Usa a propriedade `translate` (independente de `transform`)
   para não brigar com as transformações dos cartões e das trilhas. */
.rv{opacity:0;translate:0 36px;transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--rv-atraso,0ms),translate .9s cubic-bezier(.2,.7,.2,1) var(--rv-atraso,0ms)}
.rv.rv-on{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;translate:none;transition:none}}

/* ═══ PARTICIPE COM MAIS RESPIRO, AINDA CABENDO NA TELA (24/10/2026, pedido do dono) ═══════════════════════════════
   «a sessão de participe presencialmente ficou muito colada… essa imagem grande… o conteúdo cobre praticamente toda a
   tela». Com o respiro pela altura da tela, ela ficava com 66/59px enquanto as vizinhas têm 130–165px. A foto encurta
   (700 → ~623px: o cartão fica do mesmo tamanho, com 28px de margem na foto em vez de 66) e a faixa do associado chega
   8px mais perto; os ~85px que sobram viram respiro (conta da Participe no bloco «cabe na tela»: 888 → 803). */
@media(min-width:1101px){
  main.hb>.hb-participe .hb-part-palco{min-height:620px;padding-block:28px}
  main.hb>.hb-participe .hb-membro-faixa{margin-top:32px}
}

/* ═══ AVISO DE TRADUÇÃO DAS AVALIAÇÕES (25/10/2026) ═══════════════════════════
   Só aparece em inglês (texto no Payload, vazio em português): as avaliações
   do Google são escritas em português e traduzidas. Discreto, no pé da faixa. */
.hb-aval-traducao{margin:18px 0 0;text-align:center;font-size:13px;letter-spacing:.01em;opacity:.7}

/* Aviso "(available in Portuguese only)" dos Materiais nos Temas, em inglês:
   o estilo do Fundador, alinhado à esquerda como o resto da faixa. */
.tema-so-pt{text-align:left;margin:4px 0 14px}