/* ============ TOKENS ============ */
:root{
  color-scheme: light;
  --papel:#FFFBF5; --papel-2:#F6F0E6;
  --tinta:#2A2A2E; --tinta-2:#5B5A5E; --tinta-3:#67656B;
  --linha:rgba(42,42,46,.14); --linha-controle:rgba(42,42,46,.52); --ponto:rgba(42,42,46,.14);
  --ambar:#FEA41B; --coral:#FF7262; --verde:#0ACF83; --azul:#1ABCFE; --teal:#21B3A6; --vermelho:#F24E1E;
  --sobre-blob:#2A2A2E; --mes-cor:#CB370C; --selo-marco:#8A5200;
  --tag-aberta:#0B7A4E; --tag-aviso:#9A5B00;
  --acao:#2A2A2E; --acao-texto:#FFFBF5; --acao-hover:#000000;
  --escuro:#2A2A2E; --sobre-escuro:#FFFBF5; --sobre-escuro-2:#C9C6C0;
  --sombra-celio:rgba(120,60,20,.28);
  --f-sans:"Rethink Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-serif:"Spectral",Georgia,"Times New Roman",serif;
  /* Cada seção é a cor da bolha que leva até ela: mesmo matiz, mesma saturação alta,
     só a claridade sobe. Diluir no papel quente até essa claridade mataria o matiz — o
     azul viraria cinza —, então o tom é construído em HSL a partir da bolha. */
  --f-comunidade:#FEF5E7; --f-encontros:#EAF8FE; --f-agenda:#E2FDF3; --f-rede:#FEF1EF; --f-membros:#E9FEFC;
  --wrap:1280px; --prose:60ch; --raio:20px;
  --mola:cubic-bezier(.32,.72,0,1); --saida:cubic-bezier(.23,1,.32,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --papel:#1C1B1F; --papel-2:#26252A;
    --tinta:#F4F1EC; --tinta-2:#C4C0BA; --tinta-3:#A29F98;
    --linha:rgba(244,241,236,.16); --linha-controle:rgba(244,241,236,.38); --ponto:rgba(244,241,236,.14);
    --f-comunidade:#3C2F1B; --f-encontros:#1B323C; --f-agenda:#1B3C2F; --f-rede:#3C1E1B; --f-membros:#1B3C39;
    --acao:#F4F1EC; --acao-texto:#1C1B1F; --acao-hover:#FFFFFF;
    --escuro:#121114; --sombra-celio:rgba(0,0,0,.5);
    --mes-cor:#F3582B; --selo-marco:#CB7900;
  --tag-aberta:#11BA77; --tag-aviso:#EC8B00;
    --tag-aberta:#11BA77; --tag-aviso:#EC8B00;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --papel:#1C1B1F; --papel-2:#26252A;
  --tinta:#F4F1EC; --tinta-2:#C4C0BA; --tinta-3:#A29F98;
  --linha:rgba(244,241,236,.16); --linha-controle:rgba(244,241,236,.38); --ponto:rgba(244,241,236,.14);
  --f-comunidade:#3C2F1B; --f-encontros:#1B323C; --f-agenda:#1B3C2F; --f-rede:#3C1E1B; --f-membros:#1B3C39;
  --acao:#F4F1EC; --acao-texto:#1C1B1F; --acao-hover:#FFFFFF;
  --escuro:#121114; --sombra-celio:rgba(0,0,0,.5);
  --mes-cor:#F3582B; --selo-marco:#CB7900;
}

*,*::before,*::after{box-sizing:border-box}
/* a calha da barra fica reservada desde o início: sem ela, a barra nasce quando as imagens
   carregam, o palco desliza 7,5px e a foto da ponta direita é cortada */
html{-webkit-text-size-adjust:100%; scrollbar-gutter:stable}
body{margin:0; background:var(--papel); color:var(--tinta); font-family:var(--f-sans); font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased; text-align:left; overflow-x:hidden}
:focus-visible{outline:3px solid var(--tinta); outline-offset:4px; border-radius:8px}
img,svg{max-width:100%; height:auto; display:block}
p{margin:0 0 1.25em} p:last-child{margin-bottom:0}
p,li{max-width:var(--prose)}
a{color:inherit}
h1,h2,h3{font-family:var(--f-sans); font-weight:800; margin:0; text-wrap:balance; letter-spacing:-.035em; line-height:1}
h2{font-size:clamp(30px,4.2vw,48px)}
h3{font-size:clamp(20px,2.1vw,25px); letter-spacing:-.025em}
.wrap{width:min(100% - 48px, var(--wrap)); margin-inline:auto; position:relative; z-index:2}
.ico{width:1em; height:1em; display:inline-block; vertical-align:-.12em; fill:currentColor}
.prova-aviso{background:var(--escuro); color:var(--sobre-escuro); font-size:13px; font-weight:600; text-align:center; padding:8px 14px; margin:0; max-width:none}

/* ============ BOTÕES ============ */
.botao{display:inline-flex; align-items:center; gap:.6rem; font-weight:700; font-size:16px; padding:0 24px; min-height:54px; border-radius:999px; text-decoration:none; border:2px solid transparent; cursor:pointer; transition:transform .16s var(--saida), background-color .2s ease, border-color .2s ease}
.botao:active{transform:scale(.98)}
.botao-acao{background:var(--acao); color:var(--acao-texto)}
.botao-acao:hover{background:var(--acao-hover); color:var(--acao-texto)}
.botao-acao .ico{transition:transform .2s var(--saida)}
.botao-contorno{background:transparent; color:var(--tinta); border-color:var(--linha-controle)}
.botao-contorno:hover{border-color:var(--tinta)}

/* ============ TOPO ============ */
.topo{position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--papel) 88%, transparent); backdrop-filter:blur(12px)}
.topo-linha{display:flex; align-items:center; gap:18px; height:72px}
.marca{display:flex; align-items:center; text-decoration:none; flex:none}
.marca img{height:36px; width:auto}
.marca .escuro{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .marca .claro{display:none}
  :root:not([data-theme="light"]) .marca .escuro{display:block}
}
:root[data-theme="dark"] .marca .claro{display:none}
:root[data-theme="dark"] .marca .escuro{display:block}
.topo-nav{margin-left:auto}
.topo-nav ul{display:flex; gap:2px; margin:0; padding:0; list-style:none}
.topo-nav li{max-width:none}
.topo-nav a{font-size:15.5px; font-weight:600; color:var(--tinta-2); text-decoration:none; padding:0 14px; height:44px; display:inline-flex; align-items:center; border-radius:999px; transition:color .3s var(--mola), background-color .3s var(--mola)}
.topo-nav a:hover{color:var(--tinta); background:var(--papel-2)}
.topo .botao{min-height:46px; padding:0 20px; font-size:15px}
/* ============ MENU DO TOPO NO CELULAR ============
   Antes, abaixo de 640px a navegação inteira era `display:none` — no celular o
   site ficava sem menu nenhum. Agora ela colapsa atrás de um botão de verdade.
   O botão só aparece quando há JS para reabrir o menu (`:root[data-js]`): sem
   script ele não existe e a navegação fica visível, empilhada. */
.menu-botao{display:none; align-items:center; gap:9px; min-height:44px; padding:0 16px;
  margin-left:auto; border:1.5px solid var(--linha-controle); border-radius:999px;
  background:transparent; color:var(--tinta); font:700 15px/1 var(--f-sans);
  cursor:pointer; transition:background-color .2s ease, border-color .2s ease}
.menu-botao:hover{background:var(--papel-2)}
/* as três barras: o traço do meio some e os outros dois viram X quando abre */
.menu-risco,.menu-risco::before,.menu-risco::after{display:block; width:18px; height:2px;
  background:currentColor; border-radius:2px; transition:transform .2s var(--saida), opacity .15s ease}
.menu-risco{position:relative}
.menu-risco::before,.menu-risco::after{content:""; position:absolute; left:0}
.menu-risco::before{top:-6px} .menu-risco::after{top:6px}
[aria-expanded="true"] .menu-risco{background:transparent}
[aria-expanded="true"] .menu-risco::before{transform:translateY(6px) rotate(45deg)}
[aria-expanded="true"] .menu-risco::after{transform:translateY(-6px) rotate(-45deg)}

/* ============ FUNDO DAS SEÇÕES: pontilhado + manchas orgânicas ============ */
.bloco,.hero{position:relative; isolation:isolate; overflow:hidden}
.bloco::before,.hero::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background-image:radial-gradient(var(--ponto) 1px, transparent 1px);
  background-size:22px 22px;
}
.manchas{position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.mancha{position:absolute; filter:blur(70px); opacity:var(--op,.30); border-radius:50%}
.mancha.m1{width:34vw; aspect-ratio:1.2; left:-10vw; top:-14vw; background:var(--c1)}
.mancha.m2{width:28vw; aspect-ratio:.9; right:-9vw; top:24%; background:var(--c2)}
.mancha.m3{width:24vw; aspect-ratio:1.4; right:18vw; bottom:-13vw; background:var(--c3)}
/* cada seção tem sua trinca de cor: a linguagem é a mesma, o clima muda */
.t-hero{--c1:var(--ambar); --c2:var(--azul); --c3:var(--verde); --op:.30}
.t-comunidade{--c1:var(--ambar); --c2:var(--vermelho); --c3:var(--ambar); --op:.09; background:var(--f-comunidade)}
.t-encontros{--c1:var(--azul); --c2:var(--teal); --c3:var(--azul); --op:.10; background:var(--f-encontros)}
.t-agenda{--c1:var(--verde); --c2:var(--teal); --c3:var(--verde); --op:.09; background:var(--f-agenda)}
.t-rede{--c1:var(--coral); --c2:var(--ambar); --c3:var(--coral); --op:.07; background:var(--f-rede)}
.t-membros{--c1:var(--teal); --c2:var(--verde); --c3:var(--teal); --op:.09; background:var(--f-membros)}
/* nas seções coloridas, cartões e pílulas voltam ao papel, para não sumirem no fundo */
.t-comunidade .cupom,.t-encontros .capa,.t-agenda .evento,.t-rede .parceiros a,.t-rede .cupom,.t-membros .cupom{background:var(--papel)}

/* ============ HERO ============ */
.hero{min-height:calc(100svh - 72px); display:grid; align-items:center; padding:clamp(10px,2vh,24px) 0 clamp(24px,4vh,44px)}
/* o palco nunca passa da dobra: a terceira parcela do min() é a altura disponível
   convertida em largura pela própria proporção. Célio acompanha, em fração do palco. */
.palco{position:relative; --ratio:1.42; --reserva:210px;
  --larg:min(100vw - 48px, 1180px, (100svh - var(--reserva)) * var(--ratio));
  width:var(--larg); aspect-ratio:var(--ratio); margin-inline:auto; align-self:center}
.anel{position:absolute; left:50%; top:50%; border:1.5px dashed var(--linha); border-radius:50%; translate:-50% -50%; pointer-events:none; z-index:1}
.anel.a1{width:34%; aspect-ratio:1}
.anel.a2{width:52%; aspect-ratio:1; border-style:solid; border-color:color-mix(in srgb, var(--linha) 50%, transparent)}

/* fotos: camada de fundo, atrás de tudo */
.foto{position:absolute; margin:0; border-radius:var(--raio); overflow:hidden; background:var(--papel-2); z-index:2;
  box-shadow:0 18px 36px -18px rgba(42,42,46,.42);
  transform:perspective(900px) rotateX(calc(var(--ry,0) * -1deg)) rotateY(calc(var(--rx,0) * 1deg)) translateZ(0);
  transition:box-shadow .25s var(--saida)}
.foto::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; overflow:hidden}
.foto .luz{position:absolute; inset:-60% -80%; pointer-events:none;
  background:linear-gradient(105deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 58%);
  translate:calc(var(--luz,0) * 1%) 0; opacity:var(--brilho,.22); transition:opacity .35s var(--mola)}
.foto img{width:100%; height:100%; object-fit:cover}
.foto{overflow:hidden}

/* blobs: o menu do hero, em cima de tudo */
.blob{position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; z-index:6;
  text-decoration:none; color:var(--sobre-blob); text-align:center; padding:12px 10px; will-change:transform;
  background:radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.55), rgba(255,255,255,0) 52%), var(--cor);
  box-shadow:0 20px 38px -18px color-mix(in srgb, var(--cor) 70%, #2A2A2E), inset 0 -10px 22px -14px rgba(42,42,46,.35);
  transition:transform .2s var(--saida), box-shadow .2s var(--saida)}
.blob:focus-visible{transform:translate(-50%,-50%) scale(1.06);
  box-shadow:0 28px 46px -18px color-mix(in srgb, var(--cor) 75%, #2A2A2E), inset 0 -10px 22px -14px rgba(42,42,46,.35)}
.blob .ico{font-size:22px; opacity:.9; transition:transform .2s var(--saida)}
.blob b{font-size:clamp(13px,1vw,15.5px); font-weight:800; letter-spacing:-.02em; line-height:1.05}
.blob small{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; line-height:1.25; max-width:14ch}
/* quatro portas em arco simétrico; a quinta pousa acima do chapéu do Célio */
.b1{--cor:var(--coral); width:13.5%; aspect-ratio:1.06; left:22.5%; top:53.3%; border-radius:52% 48% 46% 54% / 58% 44% 56% 42%}
.b2{--cor:var(--azul); width:14.0%; aspect-ratio:1.06; left:24.6%; top:26.3%; border-radius:48% 52% 44% 56% / 50% 46% 54% 50%}
.b4{--cor:var(--teal); width:14.0%; aspect-ratio:1.06; left:75.4%; top:26.3%; border-radius:50% 50% 46% 54% / 56% 56% 44% 44%}
.b5{--cor:var(--verde); width:14.5%; aspect-ratio:1.06; left:77.5%; top:53.3%; border-radius:46% 54% 50% 50% / 52% 48% 52% 48%}
.b3{--cor:var(--ambar); width:13.5%; aspect-ratio:1.06; left:50%; top:11%; border-radius:54% 46% 52% 48% / 46% 56% 44% 54%}

/* bolinhas soltas, sorteadas a cada visita */
.esfera{position:absolute; border-radius:50%; pointer-events:none; z-index:3; transform:translate(-50%,-50%);
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.75), rgba(255,255,255,0) 40%), radial-gradient(circle at 70% 80%, rgba(42,42,46,.22), rgba(42,42,46,0) 50%), var(--cor);
  box-shadow:0 10px 20px -10px color-mix(in srgb, var(--cor) 70%, #2A2A2E)}

/* o Célio e o texto, no centro */
.centro{position:absolute; left:50%; top:54%; translate:-50% -50%; z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:clamp(6px,1.4vh,16px); width:min(92%, 620px)}
.celio-link{display:block; border-radius:40px}
.celio{
  /* .598 no lugar de .53: a célula nova é partilhada por todas as ações, e precisa
     caber a dança de braços abertos — o Célio ocupa menos dela, e o tamanho real
     na tela só se mantém se a célula crescer na mesma proporção. */
  --h:calc(var(--larg) / var(--ratio) * .598); --qx:0; --qy:0;
  --cw:576; --ch:624; --cols:8; --linhas:4;
  --folha:url("/assets/celio/parado.4d1bb1cf.webp");
  height:var(--h); width:calc(var(--h) * var(--cw) / var(--ch)); max-width:none;
  background-image:var(--folha); background-repeat:no-repeat;
  background-size:calc(var(--h) * var(--cols) * var(--cw) / var(--ch)) calc(var(--h) * var(--linhas));
  background-position:calc(var(--qx) * var(--h) * -1 * var(--cw) / var(--ch)) calc(var(--qy) * var(--h) * -1);
  filter:drop-shadow(0 26px 30px var(--sombra-celio)); transition:transform .25s var(--saida);
  position:relative;
}
/* Trocar a folha e o background-size no mesmo quadro obriga o navegador a
   rasterizar de novo 3047px de WebP, e nesse intervalo o Célio pisca — mesmo com a
   imagem em cache. Por isso são duas camadas: a de baixo segura o que está na tela
   enquanto a de cima já pintou a folha nova; só então elas trocam de papel. */
.celio-camada{position:absolute; top:0; bottom:0; left:0; background-repeat:no-repeat;
  background-image:var(--folha-c); background-size:var(--size-c); background-position:var(--pos-c)}
.celio-camada[hidden]{display:none}
.celio[data-camadas] {background-image:none}
/* O Célio não é botão nem link. O que o toque faz é só animação, e animação é
   enriquecimento para quem enxerga — não é funcionalidade. Como botão ele entrava
   na ordem de foco e anunciava um controle que não entrega nada a quem usa leitor
   de tela. Fica como imagem descrita, fora da ordem de foco, e o movimento
   continua acontecendo sozinho de tempos em tempos para todo mundo.
   O controle que precisa existir para teclado é o de pausa, e esse é botão. */
.celio-toque{display:block; cursor:pointer; -webkit-tap-highlight-color:transparent}
/* irritado, ele não aceita mais toque até terminar */
.celio-toque[data-ocupado]{cursor:default}
.centro h1{font-size:clamp(28px, calc(var(--larg) * .0424), 50px); line-height:.96; letter-spacing:-.04em; text-align:center}
.centro h1 .ital{font-family:var(--f-serif); font-style:italic; font-weight:400; letter-spacing:-.02em; display:block; line-height:1.06; padding-bottom:.06em}
.acoes{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.acoes .botao{min-height:clamp(44px, calc(var(--larg) * .0407), 48px); font-size:15px; padding:0 20px}

/* o interruptor de movimento: uma chave só para tudo que se mexe sozinho */
:root[data-movimento="pausado"] .flutua,
:root[data-movimento="pausado"] .foto,
:root[data-movimento="pausado"] .esfera{animation:none !important}
:root[data-movimento="pausado"] .foto{transform:none !important}
.pausa{position:absolute; right:clamp(12px,3vw,28px); bottom:clamp(10px,2vh,20px); z-index:8;
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px;
  font:inherit; font-size:14px; font-weight:600; color:var(--tinta-2); cursor:pointer;
  background:color-mix(in srgb, var(--papel) 86%, transparent); border:1px solid var(--linha-controle);
  border-radius:999px; backdrop-filter:blur(8px)}
.pausa:hover{color:var(--tinta); border-color:var(--tinta-3)}
.pausa:focus-visible{outline:3px solid var(--tinta); outline-offset:3px}
.pausa .sinal{width:12px; height:12px; flex:none; border-radius:2px;
  background:linear-gradient(to right, currentColor 0 4px, transparent 4px 8px, currentColor 8px 12px)}
:root[data-movimento="pausado"] .pausa .sinal{
  background:none; border-left:9px solid currentColor; border-top:6px solid transparent;
  border-bottom:6px solid transparent; width:0; height:0; border-radius:0}

@media (prefers-reduced-motion: no-preference){
  .flutua{animation:flutua 8s ease-in-out infinite}
  .b2{animation-duration:9.4s; animation-delay:-2.2s}
  .b3{animation-duration:8.6s; animation-delay:-4.1s}
  .b4{animation-duration:10s;  animation-delay:-1.4s}
  .b5{animation-duration:9s;   animation-delay:-5.3s}
  .foto{animation:flutua 9s ease-in-out infinite}
  @keyframes flutua{0%,100%{translate:0 0} 50%{translate:0 -12px}}
}

/* ============ BLOCOS ============ */
.bloco{padding:clamp(72px,10vw,124px) 0}
.sobre{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:center}
.sobre h2{margin-bottom:22px}
.sobre p{font-size:clamp(17px,1.5vw,20px); color:var(--tinta-2)}
.sobre .foto-sobre{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--raio); box-shadow:0 24px 50px -28px rgba(42,42,46,.45)}

.series{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,4.5vw,56px)}
.serie{display:flex; flex-direction:column; gap:16px}
.capa{position:relative; display:block; border-radius:var(--raio); overflow:hidden; aspect-ratio:16/9; background:var(--papel-2)}
.capa img{width:100%; height:100%; object-fit:cover; transition:transform .25s var(--saida)}
.capa .play{position:absolute; left:16px; bottom:16px; display:inline-flex; align-items:center; gap:9px; background:var(--papel); color:var(--tinta); font-weight:700; font-size:14.5px; padding:9px 15px 9px 11px; border-radius:999px; box-shadow:0 10px 26px -10px rgba(0,0,0,.4)}
.capa .play i{display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--tinta); color:var(--papel); font-style:normal; font-size:12px}
.serie h2{font-size:clamp(24px,2.6vw,32px)}
.serie .desc{color:var(--tinta-2); font-size:16.5px; margin:0}
.episodios{list-style:none; margin:0; padding:0; border-top:1px solid var(--linha)}
.episodios li{max-width:none; border-bottom:1px solid var(--linha)}
.episodios a{display:flex; gap:14px; align-items:baseline; padding:13px 2px; text-decoration:none; font-size:16px; font-weight:600; min-height:48px; transition:color .3s var(--mola)}
.episodios a:hover{color:var(--tinta-3)}
.episodios small{flex:none; font-weight:500; color:var(--tinta-3); font-variant-numeric:tabular-nums; min-width:5.5ch}
.mais{align-self:flex-start; font-weight:700; font-size:15px; text-decoration:none; border-bottom:2px solid var(--linha); padding-bottom:2px; min-height:24px; transition:border-color .3s var(--mola)}
.mais:hover{border-color:var(--tinta)}

/* agenda */
.agenda-topo{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:28px}
/* um evento: destaque largo. Vários: trilho que desliza, um ao lado do outro. */
.eventos{display:grid; gap:20px; list-style:none; margin:0; padding:0}
.eventos li{max-width:none}
.eventos[data-n="1"]{grid-template-columns:1fr}
.eventos[data-n="2"]{grid-template-columns:repeat(2,1fr)}
.eventos[data-muitos]{grid-auto-flow:column; grid-auto-columns:minmax(300px,34%); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; scrollbar-width:thin}
.eventos[data-muitos] .evento{scroll-snap-align:start}
.evento{display:grid; grid-template-columns:104px minmax(0,1fr); gap:clamp(16px,2.4vw,28px); align-items:center; max-width:none;
  background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio); padding:clamp(16px,2vw,24px); text-decoration:none;
  transition:transform .2s var(--saida), border-color .2s ease, box-shadow .2s var(--saida)}
.evento:hover{border-color:var(--tinta); box-shadow:0 20px 40px -24px rgba(42,42,46,.4)}
.eventos[data-n="1"] .evento{grid-template-columns:104px minmax(0,220px) minmax(0,1fr)}
/* a folhinha */
.dia{display:grid; place-content:center; text-align:center; border-radius:16px; background:var(--papel-2); border:1px solid var(--linha); aspect-ratio:1; padding:8px}
.dia .mes{font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--mes-cor); margin:0}
.dia .num{font-size:38px; font-weight:800; letter-spacing:-.04em; line-height:1; margin:2px 0 0; font-variant-numeric:tabular-nums}
.dia .sem{font-size:12px; font-weight:600; color:var(--tinta-3); margin:4px 0 0}
.evento .capa-ev{width:100%; border-radius:14px; object-fit:cover; aspect-ratio:9/16}
.eventos:not([data-n="1"]) .evento .capa-ev{display:none}
.evento h3{margin-bottom:8px}
.evento .meta{display:flex; flex-wrap:wrap; gap:6px 16px; max-width:none; font-size:14.5px; color:var(--tinta-2); margin:0 0 12px}
.evento .meta b{font-weight:700; color:var(--tinta)}
.evento .quem{color:var(--tinta-2); font-size:15.5px; margin:0 0 14px; max-width:none}
.evento .ir{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px; color:var(--tinta); min-height:24px}
.agenda-nota{font-size:15px; color:var(--tinta-2); margin:22px 0 0}

/* rede */
.parceiros{display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0}
.parceiros li{max-width:none}
.parceiros a{display:inline-flex; align-items:center; gap:8px; font-size:15.5px; font-weight:600; background:var(--papel); border:1px solid var(--linha); border-radius:999px; padding:10px 18px; text-decoration:none; color:var(--tinta-2); min-height:44px; transition:color .3s var(--mola), border-color .3s var(--mola)}
.parceiros a:hover{color:var(--tinta); border-color:var(--tinta)}
.cupons{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:16px; list-style:none; margin:28px 0 0; padding:0}
.cupom{background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio); padding:20px 22px; max-width:none}
.cupom h3{font-size:19px; margin-bottom:6px}
.cupom p{font-size:15px; color:var(--tinta-2); margin:0 0 12px}
.cupom code{font-family:var(--f-sans); font-weight:800; font-size:16px; letter-spacing:.05em; background:var(--papel-2); border:1px dashed var(--linha); border-radius:6px; padding:5px 10px; color:var(--vermelho)}

/* convite e rodapé */
.convite{background:var(--escuro); color:var(--sobre-escuro); padding:clamp(72px,10vw,124px) 0; position:relative; overflow:hidden; isolation:isolate}
.convite::before{content:""; position:absolute; inset:0; z-index:-2; background-image:radial-gradient(rgba(255,251,245,.10) 1px, transparent 1px); background-size:22px 22px}
.convite .wrap{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px,5vw,64px); align-items:end}
.convite h2{color:var(--sobre-escuro); margin-bottom:16px}
.convite p{color:var(--sobre-escuro-2); font-size:clamp(17px,1.5vw,20px); max-width:44ch}
.convite .botao-acao{background:var(--ambar); color:#2A2A2E}
.convite .botao-acao:hover{background:#FFB74A; color:#2A2A2E}
.convite :focus-visible{outline-color:var(--ambar)}
.rodape{background:var(--escuro); color:var(--sobre-escuro-2); border-top:1px solid rgba(255,251,245,.12); padding:32px 0 40px}
.rodape .wrap{display:flex; flex-wrap:wrap; gap:16px 32px; align-items:center; justify-content:space-between; font-size:15px}
.rodape img{height:30px; width:auto}
.rodape ul{display:flex; gap:20px; list-style:none; margin:0; padding:0; flex-wrap:wrap}
.rodape li{max-width:none}
.rodape a{color:var(--sobre-escuro-2); text-decoration:none; min-height:24px; display:inline-flex; align-items:center}
.rodape a:hover{color:var(--sobre-escuro)}

/* ============ RESPONSIVO ============ */
@media (max-width:1000px){
  .palco{--ratio:1.12; --reserva:190px}
  .blob small{display:none}
  .celio{--h:clamp(215px,30vh,320px)}
}
@media (max-width:760px){
  .sobre,.series,.convite .wrap,.proximo{grid-template-columns:minmax(0,1fr)}
  .palco{--ratio:.9; --reserva:150px}
  .foto{display:none}
  .blob{padding:8px 6px}
  .blob .ico{font-size:20px}
}
@media (max-width:640px){
  body{font-size:17px}
  .hero{min-height:auto}
  .esfera{display:none}
  /* no celular o palco fica alto e estreito: o arco de portas precisa de altura
     para não cair no chapéu, e o slogan com os dois botões pede o resto */
  .palco{--ratio:.56; --reserva:110px}
  .celio{--h:clamp(170px,24vh,230px)}
  .centro{top:52%; width:96%}
  .blob{width:25%; padding:8px 4px}
  .blob b{font-size:12px}
  /* as portas de baixo ficam ao lado do corpo do Célio, não da faixa do slogan */
  .b2{left:16%; top:20%} .b4{left:84%; top:20%}
  .b1{left:13%; top:47%} .b5{left:87%; top:47%}
  .b3{width:24%}
  /* a pausa vai para o pé do palco, centrada, longe das portas e dos botões */
  .pausa{top:auto; bottom:0; right:auto; left:50%; translate:-50% 0; min-height:40px; font-size:13px; padding:0 12px}
  .acoes .botao{width:100%; justify-content:center}
  .proximo img{aspect-ratio:16/9}
  /* o card do próximo encontro tinha três colunas fixas (104 + 220 + resto): em 340px
     de caixa as duas primeiras já estouravam e a data, o "Gratuito" e o "Garantir a
     vaga" saíam pela direita da tela. No celular ele empilha. */
  .eventos[data-n="1"] .evento,
  .evento{grid-template-columns:1fr; gap:14px; align-items:start}
  /* o bloco grande de data é aria-hidden e a mesma data vem escrita logo abaixo,
     em .meta: empilhado ele viraria meia tela de calendário decorativo. */
  .evento .dia{display:none}
  .eventos[data-n="1"] .evento .capa-ev{max-width:min(100%,260px); justify-self:start}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }


/* a frase que já era o <title> passa a assinar o rodapé */
.rodape-marca{display:grid; gap:10px}
.rodape-lema{margin:0; max-width:34ch; font-size:15px; line-height:1.45;
  color:var(--sobre-escuro-2)}

/* Célio de sprite fora do hero: a altura manda, a largura vem da célula */
.celio-sprite{--qx:0; --qy:0; --cw:576; --ch:624; --cols:8; --linhas:4; --h:160px;
  display:block; height:var(--h); width:calc(var(--h) * var(--cw) / var(--ch));
  background-image:var(--folha); background-repeat:no-repeat;
  background-size:calc(var(--h) * var(--cols) * var(--cw) / var(--ch)) calc(var(--h) * var(--linhas));
  background-position:calc(var(--qx) * var(--h) * -1 * var(--cw) / var(--ch)) calc(var(--qy) * var(--h) * -1)}

/* o Célio atravessando o rodapé: preso ao rodapé, fora do fluxo, sem alargar a página */
.rodape{position:relative; overflow:hidden}
.celio-corre{--qx:0; --qy:0; --cw:576; --ch:624; --cols:8; --linhas:1; --h:92px; --x:-18%;
  position:absolute; bottom:6px; left:var(--x); z-index:2; pointer-events:none;
  height:var(--h); width:calc(var(--h) * var(--cw) / var(--ch));
  background-image:var(--folha); background-repeat:no-repeat;
  background-size:calc(var(--h) * var(--cols) * var(--cw) / var(--ch)) calc(var(--h) * var(--linhas));
  background-position:calc(var(--qx) * var(--h) * -1 * var(--cw) / var(--ch)) 0}
.celio-corre[hidden]{display:none}
@media (max-width:640px){ .celio-corre{--h:66px} }
/* durante a travessia do sono o interruptor não atende: o rótulo diz o porquê */
.pausa:disabled{cursor:default; opacity:.72}

/* ============ MOVIMENTO DE HOVER ============
   Só onde existe ponteiro fino de verdade. No toque, `:hover` dispara no dedo e
   fica grudado até o próximo toque em outro lugar — o card sobe e não desce.
   O realce de teclado (`:focus-visible`) fica fora daqui, porque teclado não é
   ponteiro. */
@media (hover:hover) and (pointer:fine){
  .botao-acao:hover{transform:translateY(-2px)}
  .botao-acao:hover .ico{transform:translateX(4px)}
  .botao-contorno:hover{transform:translateY(-2px)}
  .blob:hover{transform:translate(-50%,-50%) scale(1.06);
    box-shadow:0 28px 46px -18px color-mix(in srgb, var(--cor) 75%, #2A2A2E), inset 0 -10px 22px -14px rgba(42,42,46,.35)}
  .blob:hover .ico{transform:translateY(-3px)}
  .celio-toque:hover .celio{transform:translateY(-6px)}
  .celio-toque[data-ocupado]:hover .celio{transform:none}
  .celio-link:hover .celio{transform:translateY(-6px)}
  .capa:hover img{transform:scale(1.03)}
  .evento:hover{transform:translateY(-3px)}
}

/* ============ MENU COLAPSADO ============ */
@media (max-width:860px){
  :root[data-js] .menu-botao{display:inline-flex}
  /* fechado: fora do fluxo e fora da ordem de foco — `display:none` tira da árvore
     de acessibilidade, que é o que "fechado" precisa significar para o leitor de tela */
  /* o painel atravessa o header inteiro: `.wrap` é `position:relative`, então sem
     isto ele se ancorava na coluna de conteúdo e a borda ficava solta no meio da tela */
  :root[data-js] .topo-nav{display:none; position:absolute; left:50%; width:100vw;
    transform:translateX(-50%); top:100%;
    background:var(--papel); border-top:1px solid var(--linha);
    box-shadow:0 22px 40px -28px rgba(42,42,46,.5); padding:10px 0 16px}
  :root[data-js] .topo[data-menu="aberto"] .topo-nav{display:block}
  :root[data-js] .topo-nav ul{flex-direction:column; gap:2px; width:min(100% - 48px, var(--wrap)); margin-inline:auto; padding:0}
  :root[data-js] .topo-nav a{height:52px; width:100%; padding:0 16px; font-size:17px;
    border-radius:12px; color:var(--tinta)}
  :root[data-js] .topo-nav a[aria-current="page"]{background:var(--papel-2)}
  /* sem JS a navegação fica visível e quebra em linhas, em vez de sumir */
  :root:not([data-js]) .topo-nav ul{flex-wrap:wrap; justify-content:flex-end}
}

/* Em tela muito estreita o rótulo sai da vista, mas continua no DOM: o nome
   acessível do botão segue sendo "Menu", então o leitor de tela e o controle por
   voz não perdem nada. É o contrário de trocar o texto por um `aria-label`, que
   acrescentaria ARIA para dizer o que o HTML já dizia. */
@media (max-width:520px){
  :root[data-js] .menu-rotulo{position:absolute; width:1px; height:1px; padding:0;
    margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
  :root[data-js] .menu-botao{padding:0; width:44px; justify-content:center; flex:none}
  .topo-linha{gap:12px}
  /* o rótulo do CTA não quebra em duas linhas: ou cabe inteiro, ou as peças ao
     lado encolhem antes dele */
  .topo .botao{padding:0 16px; white-space:nowrap; flex:none}
}
@media (max-width:400px){
  .topo .marca{width:84px}
  /* com espaçamento de texto aumentado (SC 1.4.12), "Vem pro grupo" em uma linha só
     empurrava a página 7px para o lado a 320px; aqui ele pode quebrar (28/09) */
  .topo .botao{font-size:14px; padding:0 14px; min-height:44px; white-space:normal; flex:0 1 auto; min-width:0; line-height:1.15; text-align:center}
}
/* o foco nunca fica embaixo do cabeçalho fixo (SC 2.4.11) */
html{scroll-padding-top:88px}

/* ============ RITMO VERTICAL ============
   O respiro era fixo em 248px, igual para uma seção de 128px de conteúdo e para
   uma de 2865px — a `.convite` chegava a 66% de vazio. As seções densas mantêm o
   fôlego; as curtas passam a receber respiro proporcional ao que carregam. */
.convite{padding-block:clamp(36px,3.6vw,52px)}
.t-rede,.rede-faixa,.bloco-fala{padding-block:clamp(48px,5vw,76px)}
.t-encontros{padding-block:clamp(56px,6vw,88px)}

/* ============ PÁGINAS INTERNAS ============ */
.pular{position:absolute; left:-9999px}
.pular:focus{position:fixed; left:14px; top:14px; z-index:120; background:var(--tinta); color:var(--papel); padding:12px 18px; border-radius:999px; font:700 15px var(--f-sans); text-decoration:none; outline:3px solid var(--papel); outline-offset:2px}
.topo-nav a[aria-current="page"]{color:var(--tinta); background:var(--papel-2)}
.so-leitor{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

.abertura{padding:clamp(56px,8vw,96px) 0 clamp(40px,6vw,64px)}
.abertura h1{font-size:clamp(38px,6vw,68px); line-height:.98; letter-spacing:-.04em; max-width:16ch}
.linha-fina{font-size:clamp(18px,2.1vw,22px); color:var(--tinta-2); max-width:56ch; margin:18px 0 0; line-height:1.45}
.prosa{max-width:var(--prose)}
.prosa h2{margin-bottom:18px}
.prosa p{margin:0 0 1em}
.prosa p:last-child{margin-bottom:0}
.sub-h3{font-size:clamp(20px,2.4vw,24px); margin:36px 0 14px; letter-spacing:-.02em}
.lista-docs{padding-left:1.2em; margin:16px 0 22px}
.lista-docs li{margin-bottom:8px}

.quatro{list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.quatro li{background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio); padding:22px 24px}
.quatro h3{font-size:19px; margin:0 0 8px; letter-spacing:-.02em}
.quatro p{margin:0; color:var(--tinta-2); font-size:16px}

/* Célio */
.duas{display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:center}
.duas img{width:100%; height:auto; max-width:320px; filter:drop-shadow(0 22px 28px var(--sombra-celio))}
.stickers-topo{display:flex; justify-content:space-between; gap:24px; align-items:flex-end; flex-wrap:wrap; margin-bottom:26px}
.stickers-topo p{color:var(--tinta-2); margin:8px 0 0}
.stickers-acoes{display:flex; gap:10px; flex-wrap:wrap}
.stickers{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px}
.sticker{background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio); padding:14px 12px 12px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center}
.sticker-img{width:120px; height:120px; object-fit:contain}
.sticker .nome{font-size:14px; font-weight:600; color:var(--tinta-2); line-height:1.25}
.sticker .baixar{font-size:14px; font-weight:700; color:var(--tinta); text-decoration:none; border:1px solid var(--linha); border-radius:999px; padding:8px 14px; min-height:44px; display:inline-flex; align-items:center}
.sticker .baixar:hover{background:var(--papel-2)}

/* Encontros */
.video{position:relative; aspect-ratio:16/9; background:var(--papel-2); border-radius:var(--raio); overflow:hidden; border:1px solid var(--linha)}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.video.luma{aspect-ratio:auto; height:min(70vh,560px)}
.serie-pagina .desc{color:var(--tinta-2); margin:6px 0 22px; max-width:60ch}
.episodios-pagina{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.episodio{display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:20px; align-items:start; background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio); padding:14px}
.ep-capa{display:block; border-radius:12px; overflow:hidden; aspect-ratio:16/9; background:var(--papel-2)}
.ep-capa img{width:100%; height:100%; object-fit:cover; display:block}
.episodio h3{font-size:18px; margin:4px 0 6px; letter-spacing:-.02em; line-height:1.25}
.episodio h3 a{color:var(--tinta); text-decoration:none}
.episodio h3 a:hover{text-decoration:underline}
.episodio .meta{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:14px; color:var(--tinta-3); margin:0 0 8px}
.episodio .resumo{margin:0; color:var(--tinta-2); font-size:15px}
.agenda-vazia{color:var(--tinta-2); margin:18px 0}
.video-nota{background:var(--papel-2); border:1px dashed var(--tinta-3); border-radius:var(--raio); padding:22px; color:var(--tinta-2); margin:0 0 18px}

/* Circuito */
.contagem{color:var(--tinta-2); margin:6px 0 20px}
.filtros{display:flex; flex-wrap:wrap; gap:18px 28px; padding:18px 20px; background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio); margin-bottom:28px}
.filtros fieldset{border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center}
.filtros legend{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-3); padding:0; margin-bottom:6px; width:100%}
.filtros label{display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 4px; font-size:15px; cursor:pointer}
.filtros input{width:18px; height:18px; accent-color:var(--tinta)}
.circuito[data-ver="lista"] .visao-calendario{display:none}
.circuito[data-ver="calendario"] .visao-lista{display:none}
.circuito[data-ver=""] .visao-calendario{margin-top:40px}
.mes-titulo{font-size:clamp(20px,2.4vw,24px); margin:34px 0 14px; letter-spacing:-.02em; padding-bottom:8px; border-bottom:1px solid var(--linha)}
.ficha{background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio); padding:20px 22px; margin-bottom:14px}
.ficha[hidden]{display:none}
.ficha h3{font-size:20px; margin:0 0 6px; letter-spacing:-.02em}
.ficha h3 a{color:var(--tinta); text-decoration:none}
.ficha h3 a:hover{text-decoration:underline}
.ficha .quando{margin:0 0 4px; font-weight:600; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.ficha .onde{margin:0 0 10px; color:var(--tinta-2); font-size:15px}
.ficha .circ{font-weight:600; color:var(--tinta)}
.ficha .nota{margin:0 0 10px; color:var(--tinta-2); font-size:15.5px}
.ficha .chamada{margin:0 0 10px; font-size:15px}
.estado{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:6px; border:1px solid currentColor}
.estado-confirmada{color:var(--tag-aberta)}
.estado-a-confirmar{color:var(--tag-aviso)}
.estado-sem-data{color:var(--tinta-3)}
.tags{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.tag{font-size:13.5px; background:var(--papel-2); border-radius:999px; padding:4px 11px; color:var(--tinta-2)}
.tag b{color:var(--tinta); font-weight:700}
.calendario{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px}
.cal-mes{background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio); padding:16px 16px 12px}
.cal-mes h3{font-size:17px; margin:0 0 10px; letter-spacing:-.02em}
.cal-mes h3 small{font-weight:500; color:var(--tinta-3); font-size:13px}
.cal-mes ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.cal-ev{font-size:14.5px; line-height:1.3; padding:8px 10px; border-radius:10px; background:var(--papel-2); border-left:4px solid var(--verde)}
.cal-ev[hidden]{display:none}
.cal-ev.estado-a-confirmar{border-left-color:var(--ambar)}
.cal-ev.estado-sem-data{border-left-color:var(--linha)}
.cal-ev b{font-variant-numeric:tabular-nums; margin-right:4px}
.cal-ev a{color:var(--tinta); font-weight:600; text-decoration:none}
.cal-ev a:hover{text-decoration:underline}
.cal-onde{color:var(--tinta-3); font-size:13px; margin-left:4px}
.ressalvas{margin-top:34px; font-size:14.5px; color:var(--tinta-2); max-width:70ch}
.portas{list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.porta{background:var(--papel); border:1px solid var(--linha); border-top:5px solid var(--cor-porta,var(--tinta)); border-radius:var(--raio); padding:20px 22px}
.porta-verde{--cor-porta:var(--verde)} .porta-azul{--cor-porta:var(--azul)} .porta-ambar{--cor-porta:var(--ambar)} .porta-coral{--cor-porta:var(--coral)} .porta-teal{--cor-porta:var(--teal)}
.porta h3{margin:0 0 8px; font-size:19px; letter-spacing:-.02em}
.porta p{margin:0; color:var(--tinta-2); font-size:15.5px}
.chamadas{list-style:none; margin:0; padding:0; display:grid; gap:8px; max-width:70ch}
.chamadas li{font-size:15px; padding:8px 0; border-bottom:1px solid var(--linha)}
.chamadas b{display:inline-block; min-width:96px}
.chamadas small{color:var(--tinta-3)}

@media (max-width:760px){
  .duas{grid-template-columns:1fr}
  .duas img{max-width:220px; margin-inline:auto}
  .episodio{grid-template-columns:1fr}
  .filtros{gap:14px}
}

/* ============ PÁGINAS INTERNAS, segunda direção (18/09) ============
   Sem cartão-com-borda como padrão: agrupamento por espaço, filete e cor.
   Cada página tem composição própria; o que se repete é a tipografia e as manchas. */
.abre{position:relative; isolation:isolate; overflow:hidden; padding:clamp(40px,7vw,88px) 0 clamp(44px,6vw,72px)}
.abre-comunidade{background:var(--f-comunidade)} .abre-celio{background:var(--f-comunidade)} .abre-circuito{background:var(--f-agenda)}
.abre-grade{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,5vw,72px); align-items:center}
.abre h1{font-size:clamp(42px,6.4vw,84px); line-height:.94; letter-spacing:-.045em; margin:0; text-wrap:balance; max-width:14ch}
.abre h1 .ital{font-family:var(--f-serif); font-style:italic; font-weight:400; letter-spacing:-.02em; line-height:1.06; padding-bottom:.04em; display:inline-block}
.abre-antes{font-size:15px; font-weight:700; color:var(--tinta-2); margin:0 0 10px}
.abre-lead{font-size:clamp(18px,2.1vw,22px); line-height:1.5; color:var(--tinta); max-width:52ch; margin:22px 0 0; text-wrap:pretty}
.abre-frase{font-family:var(--f-serif); font-style:italic; font-size:clamp(18px,2vw,21px); color:var(--tinta-2); max-width:44ch; margin:18px 0 0; line-height:1.4}
.abre-texto .botao{margin-top:26px}
.abre-foto{margin:0; border-radius:var(--raio); overflow:hidden; box-shadow:0 30px 60px -30px rgba(42,42,46,.35); rotate:1.2deg}
.abre-foto img{display:block; width:100%; height:auto}
.abre-celio{margin:0; display:grid; place-items:center}
.abre-celio img{width:min(100%,380px); height:auto; filter:drop-shadow(0 26px 30px var(--sombra-celio))}
.tally{display:flex; flex-wrap:wrap; gap:8px 28px; margin:26px 0 0; font-size:15px; color:var(--tinta-2); font-variant-numeric:tabular-nums}
.tally b{color:var(--tinta); font-weight:800; font-size:18px}
.prosa-larga{max-width:68ch}
.prosa-larga h2{margin-bottom:22px}
.prosa-larga p{font-size:clamp(17px,1.4vw,19px); line-height:1.65; margin:0 0 1.1em; text-wrap:pretty}
.prosa-larga p:last-child{margin-bottom:0}
.secao-lead{color:var(--tinta-2); max-width:60ch; margin:8px 0 26px; text-wrap:pretty}

/* ---- a comunidade ---- */
.censo-faixa{background:var(--f-encontros); position:relative; isolation:isolate; overflow:hidden}
.censo-faixa h2{margin-bottom:8px}
.censo-intro{max-width:58ch; color:var(--tinta-2); margin:0 0 34px}
.numeros{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 40px; margin:0}
.numeros > div{border-top:2px solid var(--tinta); padding-top:14px; display:flex; flex-direction:column}
.numeros dt{font-size:15px; color:var(--tinta-2); line-height:1.35; order:2}
.numeros dd{margin:0 0 6px; display:flex; align-items:baseline; gap:10px}
.numeros .num{font-size:clamp(44px,5.4vw,68px); font-weight:800; letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums}
.numeros small{font-size:14px; color:var(--tinta-3)}
.censo-nota{max-width:66ch; margin:36px 0 0; font-size:16.5px; color:var(--tinta)}
.funciona{list-style:none; counter-reset:f; margin:26px 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:34px clamp(32px,6vw,90px)}
.funciona li{counter-increment:f; position:relative; padding-left:64px; max-width:56ch}
.funciona li::before{content:counter(f,decimal-leading-zero); position:absolute; left:0; top:-4px; font-size:38px; font-weight:800; letter-spacing:-.05em; color:var(--coral); line-height:1; font-variant-numeric:tabular-nums}
.funciona li:nth-child(2)::before{color:var(--azul)} .funciona li:nth-child(3)::before{color:var(--verde)} .funciona li:nth-child(4)::before{color:var(--ambar)}
.funciona li:nth-child(2n){margin-top:56px}
.funciona h3{font-size:22px; letter-spacing:-.025em; margin:0 0 8px; line-height:1.15}
.funciona p{margin:0; color:var(--tinta-2); font-size:16.5px}
.quer-faixa{background:var(--f-rede); position:relative; isolation:isolate; overflow:hidden}
.quer-grade{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px clamp(32px,6vw,80px); align-items:start}
.quer-grade > div > p:first-of-type{color:var(--tinta-2); max-width:44ch}
.sub-h3-topo{margin-top:0}
.barras{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.barras li{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 2.2ch; align-items:center; gap:14px; font-size:15.5px}
.barra-trilho{height:8px; border-radius:999px; background:color-mix(in srgb, var(--tinta) 10%, transparent); overflow:hidden}
.barra-fill{display:block; height:100%; width:var(--w); background:var(--tinta); border-radius:999px}
.barra-n{font-weight:800; font-variant-numeric:tabular-nums; text-align:right}
.quer-nota{margin:28px 0 0; font-size:16px; color:var(--tinta); max-width:52ch; text-wrap:pretty}
.contrib-grade{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:24px clamp(32px,6vw,80px); align-items:start}
.contrib-grade > div > p:first-of-type{color:var(--tinta-2); max-width:44ch; margin-bottom:22px}
.contrib-lado{padding-top:clamp(0px,4vw,64px)}
.contrib-destaque{font-size:clamp(19px,2vw,23px); line-height:1.4; margin:0 0 18px; text-wrap:pretty}
.contrib-destaque .num{font-size:1.4em; font-weight:800; letter-spacing:-.04em; color:var(--coral)}
.rede-faixa{background:var(--f-agenda); position:relative; isolation:isolate; overflow:hidden}
.rede-intro{color:var(--tinta-2); max-width:52ch; margin:8px 0 22px}

/* ---- Célio ---- */
.abre-grade-celio{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.porque{list-style:none; margin:26px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px clamp(24px,4vw,56px)}
.porque-item{border-top:4px solid var(--cor,var(--tinta)); padding-top:16px}
.porque-teal{--cor:var(--teal)} .porque-ambar{--cor:var(--ambar)} .porque-azul{--cor:var(--azul)} .porque-coral{--cor:var(--coral)} .porque-verde{--cor:var(--verde)}
.porque h3{font-size:26px; letter-spacing:-.03em; margin:0 0 8px; line-height:1.05}
.porque p{margin:0; color:var(--tinta-2); font-size:16.5px; text-wrap:pretty}
.micelio-faixa{background:var(--f-agenda); position:relative; isolation:isolate; overflow:hidden}
.puxada{margin:26px 0 30px; padding:0 0 0 22px; border-left:4px solid var(--verde)}
.puxada p{font-family:var(--f-serif); font-style:italic; font-size:clamp(22px,2.6vw,30px); line-height:1.3; letter-spacing:-.01em; color:var(--tinta)}
.assinatura-texto{margin:26px 0 0; font-size:14.5px; font-weight:700; color:var(--tinta-3)}
.valores-intro{font-family:var(--f-serif); font-style:italic; font-size:clamp(19px,2.1vw,24px); color:var(--tinta-2); max-width:44ch; margin:6px 0 30px}
.valores{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; align-items:end}
.valor{text-align:center; padding:10px 6px 0}
.valor img{width:min(100%,180px); height:auto; margin:0 auto 12px; display:block; filter:drop-shadow(0 18px 22px var(--sombra-celio))}
.valor h3{font-size:22px; letter-spacing:-.025em; margin:0 0 4px}
.valor p{margin:0; color:var(--tinta-2); font-size:15.5px}
.valores-fecho{margin:40px 0 0; font-size:clamp(20px,2.4vw,28px); font-weight:800; letter-spacing:-.03em; line-height:1.15; max-width:26ch; text-wrap:balance}
.stickers-faixa{background:var(--f-encontros); position:relative; isolation:isolate; overflow:hidden}
.sticker{background:none; border:0; padding:8px 4px 0}
.sticker .baixar{border-color:var(--tinta-3)}

/* ---- Circuito ---- */
.controles{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px 24px; margin:6px 0 10px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font:600 14.5px/1 var(--f-sans); color:var(--tinta-2); background:transparent; border:1px solid var(--tinta-3); border-radius:999px; padding:0 15px; min-height:40px; cursor:pointer; transition:background-color .2s var(--mola), color .2s var(--mola), border-color .2s var(--mola)}
.chip:hover{border-color:var(--tinta); color:var(--tinta)}
.chip[aria-pressed="true"]{background:var(--tinta); border-color:var(--tinta); color:var(--papel)}
.chip:focus-visible{outline:3px solid var(--tinta); outline-offset:3px}
.ver{display:flex; gap:4px 16px; border:0; padding:0; margin:0}
.ver label{display:inline-flex; align-items:center; gap:8px; min-height:40px; font-weight:600; font-size:15px; cursor:pointer}
.ver input{width:18px; height:18px; accent-color:var(--tinta)}
.circuito .contagem{margin:0 0 28px; font-size:15px; color:var(--tinta-3)}
.circuito[data-ver="lista"] .visao-calendario{display:none}
.circuito[data-ver="calendario"] .visao-lista{display:none}
.circuito[data-ver=""] .visao-calendario{margin-top:56px}
.faixa-mes{display:grid; grid-template-columns:8rem minmax(0,1fr); gap:0 clamp(18px,3vw,36px); border-top:2px solid var(--tinta); padding-top:14px; margin-bottom:26px}
.faixa-mes[hidden]{display:none}
.faixa-mes-rotulo{position:sticky; top:88px; align-self:start; margin:0; font-size:15px; font-weight:600; color:var(--tinta-3); line-height:1.25}
.faixa-mes-rotulo b{display:block; color:var(--tinta); font-size:22px; font-weight:800; letter-spacing:-.03em}
.ev{display:grid; grid-template-columns:6rem minmax(0,1fr); gap:4px 22px; padding:18px 0; border-bottom:1px solid var(--linha)}
.ev[hidden]{display:none}
.ev:last-child{border-bottom:0}
.ev-quando{font-variant-numeric:tabular-nums; line-height:1.3; padding-top:3px}
.ev-quando b{display:block; font-size:19px; font-weight:800; letter-spacing:-.02em}
.ev-quando span{font-size:13.5px; color:var(--tinta-3)}
.ev-cabeca{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin-bottom:4px}
.ev-nome{margin:0; font-size:21px; letter-spacing:-.02em; line-height:1.15}
.ev-nome a{color:var(--tinta); text-decoration:none; border-bottom:2px solid color-mix(in srgb, var(--verde) 40%, transparent)}
.ev-nome a:hover{border-bottom-color:var(--verde)}
.uf{font-size:12px; font-weight:800; letter-spacing:.08em; color:var(--tag-aberta); background:color-mix(in srgb, var(--verde) 18%, transparent); padding:3px 7px; border-radius:5px}
.uf-longe{color:var(--tinta-3); background:var(--papel-2)}
.estado{font-size:12px; font-weight:700; letter-spacing:.04em; padding:2px 8px; border-radius:6px; border:1px solid currentColor; text-transform:none}
.ev-onde{margin:0 0 6px; color:var(--tinta-2); font-size:15px}
.ev-nota{margin:0 0 8px; color:var(--tinta-2); font-size:15.5px; max-width:64ch; text-wrap:pretty}
.ev-chamada{margin:0 0 8px; font-size:14.5px; font-weight:600}
.ev-tags{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.ev-tags .tag{font-size:13px; padding:3px 9px; border:1px solid var(--linha); border-radius:5px; color:var(--tinta-2); background:none}
.ev-tags .tag-price{color:var(--tinta); border-color:var(--tinta-3)}
.ev-tags .tag-door-open{color:var(--tag-aberta); border-color:var(--tag-aberta)}
.ev-tags .tag-door-soon{color:var(--tag-aviso); border-color:var(--tag-aviso); background:color-mix(in srgb, var(--ambar) 14%, transparent)}
.ev-tags .tag-flag{color:var(--tag-aviso); border-color:var(--tag-aviso)}
.cal-legenda{display:flex; gap:10px; margin:0 0 18px; font-size:13.5px}
.cal-mes{margin-bottom:34px}
.cal-mes[hidden]{display:none}
.cal{width:100%; border-collapse:collapse; table-layout:fixed}
.cal caption{text-align:left; padding:0 0 10px; font-size:22px; letter-spacing:-.03em; font-weight:800}
.cal caption span{font-weight:500; color:var(--tinta-3); font-size:16px; margin-left:6px}
.cal caption .cal-no-mes{display:block; margin:6px 0 0; font-size:14.5px; font-weight:500; color:var(--tinta-2); letter-spacing:0}
.cal th{font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--tinta-3); text-align:left; padding:0 6px 6px}
.cal th abbr{text-decoration:none}
.cal td{vertical-align:top; height:84px; padding:6px; border-top:1px solid var(--linha); font-size:13px}
.cal td.cal-dia{background:none; border-radius:0; aspect-ratio:auto; display:table-cell; place-content:initial; text-align:left}
.cal td.fds{background:color-mix(in srgb, var(--tinta) 3%, transparent)}
.cal td.vazio{background:none; border-top-color:transparent}
.cal .dia-n{display:block; font-size:13px; font-weight:600; color:var(--tinta-3); font-variant-numeric:tabular-nums; margin-bottom:4px}
.cal td.tem .dia-n{color:var(--tinta)}
.cal-ev{display:block; font-size:12.5px; font-weight:700; line-height:1.25; color:var(--tinta); text-decoration:none; padding:4px 7px; margin:2px 0; border-radius:6px; background:color-mix(in srgb, var(--verde) 16%, transparent); border-left:3px solid var(--verde); min-height:24px}
.cal-ev.estado-a-confirmar{background:color-mix(in srgb, var(--ambar) 18%, transparent); border-left-color:var(--ambar)}
.cal-ev.estado-sem-data{background:var(--papel-2); border-left-color:var(--tinta-3)}
.cal-ev:not(.cal-inicio){border-radius:0; opacity:.75}
.cal-ev[hidden]{display:none}
.cal-legenda .cal-ev{display:inline-block; margin:0; min-height:0}
.cal-sem h3{font-size:20px; margin:8px 0 12px; letter-spacing:-.02em}
.cal-sem ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:8px}
.cal-sem .cal-ev{font-size:14px}
.cal-onde{font-weight:500; color:var(--tinta-3); margin-left:4px}
.ir-junto{margin:40px 0 0; padding:20px 24px; background:color-mix(in srgb, var(--verde) 8%, transparent); border-radius:0 var(--raio) var(--raio) 0; max-width:66ch; font-size:16.5px}
.chamadas-faixa{background:var(--f-comunidade); position:relative; isolation:isolate; overflow:hidden}
.chamadas{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1px; background:var(--linha); border:1px solid var(--linha); border-radius:var(--raio); overflow:hidden}
.chamada-mes{background:var(--papel); padding:16px 18px}
.chamada-mes > b{display:block; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-3); margin-bottom:10px}
.chamada-mes ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.chamada-mes li{font-size:15px; line-height:1.35}
.chamada-mes em{display:block; font-style:normal; font-size:13.5px; color:var(--tinta-3); font-variant-numeric:tabular-nums}
.portas{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,40px)}
.porta{background:none; border:0; padding:0; border-radius:0; position:relative}
  .porta::before{content:""; display:block; width:26px; height:3px; border-radius:2px;
    background:var(--cor-porta,var(--tinta)); margin:0 0 12px}
.ressalvas{margin-top:44px; max-width:70ch; font-size:15px; color:var(--tinta-2)}

@media (max-width:900px){
  .numeros{grid-template-columns:repeat(2,minmax(0,1fr))}
  .funciona{grid-template-columns:1fr} .funciona li:nth-child(2n){margin-top:0}
  .porque{grid-template-columns:repeat(2,minmax(0,1fr))}
  .valores{grid-template-columns:repeat(3,minmax(0,1fr))}
  .portas{grid-template-columns:1fr}
}
@media (max-width:760px){
  .abre-grade,.abre-grade-celio,.quer-grade,.contrib-grade{grid-template-columns:minmax(0,1fr)}
  .abre-foto{rotate:0deg}
  .abre-celio img{width:min(70%,260px)}
  .numeros{grid-template-columns:1fr 1fr; gap:18px 20px}
  .faixa-mes{grid-template-columns:1fr; gap:10px}
  .faixa-mes-rotulo{position:static; display:flex; gap:8px; align-items:baseline}
  .faixa-mes-rotulo b{display:inline; font-size:20px}
  .ev{grid-template-columns:1fr; gap:6px}
  .ev-quando b{display:inline; margin-right:8px}
  .cal th{padding:0 3px 6px; font-size:12px}
  .cal td{height:64px; padding:4px 3px}
  .cal-ev{font-size:12px; padding:3px 5px}
  .valores{grid-template-columns:repeat(2,minmax(0,1fr))}
  .porque{grid-template-columns:1fr}
  .contrib-lado{padding-top:0}
}
@media (max-width:480px){
  .numeros{grid-template-columns:1fr}
  .barras li{grid-template-columns:minmax(0,1fr) 2.2ch} .barra-trilho{display:none}
}

/* ============ COMUNIDADE, terceira direção (18/09) ============ */
.formatos-faixa{background:var(--f-encontros); position:relative; isolation:isolate; overflow:hidden}
.formatos{list-style:none; margin:26px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,40px)}
/* a cor identifica o formato sem virar barra de coluna inteira: a régua de
   coluna cheia é o traço mais reconhecível de interface gerada em série */
.formato{position:relative}
.formato::before{content:""; display:block; width:26px; height:3px; border-radius:2px;
  background:var(--cor,var(--tinta)); margin-bottom:14px}
.formato-coral{--cor:var(--coral)} .formato-azul{--cor:var(--azul)} .formato-verde{--cor:var(--verde)} .formato-ambar{--cor:var(--ambar)}
.formato h3{font-size:clamp(19px,1.9vw,23px); letter-spacing:-.025em; margin:0 0 8px; line-height:1.1}
.formato p{margin:0; color:var(--tinta-2); font-size:16px; text-wrap:pretty}
.formatos-nota{margin:32px 0 0; color:var(--tinta-2)}
/* ---------- linha do tempo: eixo ao centro, marcos alternando os lados ---------- */
.marcos{list-style:none; margin:40px 0 0; padding:0; position:relative}
/* o eixo: à esquerda no celular, ao centro a partir de 860px */
.marcos::before{content:""; position:absolute; top:6px; bottom:6px; left:7px; width:2px;
  background:linear-gradient(180deg, transparent, var(--linha) 6%, var(--linha) 94%, transparent)}
.marco{position:relative; max-width:none; padding:0 0 38px 34px}
.marco:last-child{padding-bottom:0}
.marco-ponto{position:absolute; left:0; top:6px; width:16px; height:16px; border-radius:50%;
  background:var(--papel); border:2px solid var(--tinta-3); box-sizing:border-box}
.marco[data-tipo="marco"] .marco-ponto{border-color:var(--ambar); background:var(--ambar)}
.marco[data-tipo="parceria"] .marco-ponto{border-color:var(--teal)}
.marco-quando{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 8px}
.marco-quando time{font:600 13.5px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color:var(--tinta-3); letter-spacing:.02em}
.marco-selo{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-3); border:1px solid var(--linha-controle); border-radius:999px; padding:3px 9px}
.marco[data-tipo="marco"] .marco-selo{color:var(--selo-marco); border-color:var(--selo-marco)}
.marco-corpo h3{margin:0 0 6px; font-size:clamp(19px,1.9vw,22px); letter-spacing:-.025em; line-height:1.2}
.marco-texto{margin:0; color:var(--tinta-2); font-size:16.5px; line-height:1.6; text-wrap:pretty}
.marco-corpo em{font-style:italic; color:var(--tinta)}
.marco-destaque .marco-corpo h3{font-size:clamp(21px,2.2vw,25px)}

@media (min-width:860px){
  .marcos::before{left:50%; transform:translateX(-50%)}
  .marco{display:grid; grid-template-columns:1fr 1fr; gap:0 56px; padding:0 0 46px}
  .marco-ponto{left:50%; transform:translateX(-50%)}
  .marco[data-lado="esq"] .marco-corpo{grid-column:1; padding-right:10px; text-align:right}
  .marco[data-lado="esq"] .marco-texto{text-align:left}
  .marco[data-lado="dir"] .marco-corpo{grid-column:2; padding-left:8px}
  .marco[data-lado="esq"] .marco-quando{justify-content:flex-end}
  .marco-texto{max-width:52ch}
  .marco[data-lado="esq"] .marco-texto{margin-left:auto}
}
.participa-faixa{background:var(--f-rede); position:relative; isolation:isolate; overflow:hidden}
.participa-grade{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr); gap:24px clamp(32px,6vw,80px); align-items:start}
.participa-grade > div > p:first-of-type{color:var(--tinta-2); max-width:52ch}
.jeitos{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:16px}
.jeitos li{padding-left:22px; position:relative; font-size:16.5px; color:var(--tinta-2); max-width:56ch}
.jeitos li::before{content:""; position:absolute; left:0; top:11px; width:9px; height:9px; border-radius:50%; background:var(--coral)}
.jeitos li:nth-child(2)::before{background:var(--azul)} .jeitos li:nth-child(3)::before{background:var(--verde)} .jeitos li:nth-child(4)::before{background:var(--ambar)}
.jeitos b{color:var(--tinta)}
.participa-lado{padding-top:clamp(0px,4vw,56px)}
.participa-destaque{font-family:var(--f-serif); font-style:italic; font-size:clamp(20px,2.2vw,26px); line-height:1.35; margin:0 0 10px; text-wrap:pretty}
.participa-quem{margin:0 0 22px; font-size:14px; font-weight:700; color:var(--tinta-3)}
.escopo{padding:16px 20px; background:color-mix(in srgb, var(--tinta) 5%, transparent);
  border-radius:22px 18px 24px 20px / 18px 24px 20px 22px; font-size:15.5px; color:var(--tinta-2); margin:0 0 26px}
.valores-faixa{background:var(--f-comunidade); position:relative; isolation:isolate; overflow:hidden}
.valores{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(18px,3vw,36px); align-items:start}
.valor{border-top:3px solid var(--verde); padding-top:14px; text-align:left}
.valor:nth-child(2){border-top-color:var(--azul)} .valor:nth-child(3){border-top-color:var(--ambar)}
.valor:nth-child(4){border-top-color:var(--coral)} .valor:nth-child(5){border-top-color:var(--teal)}
.valor h3{font-size:20px; letter-spacing:-.025em; margin:0 0 4px}
.valor p{margin:0; color:var(--tinta-2); font-size:15.5px}

/* ============ CALENDÁRIO NAVEGÁVEL ============ */
.controles{display:grid; grid-template-columns:minmax(0,1.1fr) auto; gap:16px 28px; align-items:end; padding:0 0 18px; border-bottom:1px solid var(--linha); margin-bottom:6px}
.busca{display:flex; flex-direction:column; gap:6px; min-width:0}
.busca label{font-size:14px; font-weight:700}
.busca input{font:inherit; font-size:16px; padding:11px 15px; border:1px solid var(--tinta-3); border-radius:999px; background:var(--papel); color:var(--tinta); min-height:46px; width:100%; max-width:38ch}
.busca input:focus-visible{outline:3px solid var(--tinta); outline-offset:2px}
.controles fieldset{border:0; margin:0; padding:0; min-width:0}
.controles legend{font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-3); padding:0; margin-bottom:8px}
.ver{display:flex; gap:4px 16px; flex-wrap:wrap}
.ver label{display:inline-flex; align-items:center; gap:8px; min-height:44px; font-weight:600; font-size:15px; cursor:pointer}
.ver input{width:18px; height:18px; accent-color:var(--tinta)}
.filtros-circ{grid-column:1 / -1}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font:600 14.5px/1 var(--f-sans); color:var(--tinta-2); background:transparent; border:1px solid var(--tinta-3); border-radius:999px; padding:0 15px; min-height:40px; cursor:pointer; transition:background-color .2s var(--mola), color .2s var(--mola), border-color .2s var(--mola)}
.chip:hover{border-color:var(--tinta); color:var(--tinta)}
.chip[aria-pressed="true"]{background:var(--tinta); border-color:var(--tinta); color:var(--papel)}
.chip:focus-visible{outline:3px solid var(--tinta); outline-offset:3px}
.circuito .contagem{margin:14px 0 22px; font-size:15px; color:var(--tinta-3); font-variant-numeric:tabular-nums}
.circuito[data-ver="calendario"] .visao-lista{display:none}
.circuito[data-ver="lista"] .visao-calendario{display:none}
.circuito[data-ver=""] .visao-lista{margin-top:48px}
.cal-topo{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px}
.nav-mes{font:700 15px var(--f-sans); color:var(--tinta); background:var(--papel); border:1px solid var(--tinta-3); border-radius:999px; min-height:46px; padding:0 18px; cursor:pointer; display:inline-flex; align-items:center; gap:8px}
.nav-mes:hover:not(:disabled){background:var(--papel-2)}
.nav-mes:disabled{opacity:.4; cursor:not-allowed}
.nav-mes:focus-visible{outline:3px solid var(--tinta); outline-offset:3px}
.cal-atual select{font:800 clamp(18px,2.2vw,24px) var(--f-sans); letter-spacing:-.025em; color:var(--tinta); background:none; border:0; border-bottom:2px solid var(--tinta); padding:4px 6px; cursor:pointer; max-width:100%}
.cal-atual select:focus-visible{outline:3px solid var(--tinta); outline-offset:3px}
.cal-legenda{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px}
.cal-legenda .ocorre{position:static; cursor:default}
.mes-cal{margin-bottom:34px}
.cal{width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed}
.cal caption{text-align:left; padding:0 0 10px; font-size:20px; letter-spacing:-.03em; font-weight:800}
.circuito[data-ver="calendario"] .cal caption{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap}
.cal th{font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--tinta-3); text-align:left; padding:0 8px 8px}
.cal th abbr{text-decoration:none}
.cal td{vertical-align:top; height:98px; padding:6px 6px 8px; border-top:1px solid var(--linha); border-right:1px solid var(--linha)}
.cal td:last-child{border-right:0}
.cal td.fds{background:color-mix(in srgb, var(--tinta) 3%, transparent)}
.cal td.fora{border-top-color:transparent; background:none}
.cal-n, .cel-n{display:block; font-size:13px; font-weight:600; color:var(--tinta-3); font-variant-numeric:tabular-nums; margin-bottom:5px}
.cal td.ocupado .cel-n{color:var(--tinta)}
.ocorre{display:block; font-size:12.5px; font-weight:700; line-height:1.25; color:var(--tinta); text-decoration:none; padding:5px 8px; margin:0 -6px 3px; min-height:26px;
  background:color-mix(in srgb, var(--verde) 20%, transparent); border-left:3px solid var(--verde)}
.ocorre[hidden]{display:none}
.ocorre-inicio{margin-left:0; border-radius:6px 0 0 6px}
.ocorre-fim{margin-right:0; border-radius:0 6px 6px 0}
.ocorre-inicio.ocorre-fim{border-radius:6px}
.ocorre-a-confirmar{background:color-mix(in srgb, var(--ambar) 22%, transparent);
  border-left:3px dashed var(--ambar)}
/* o traço tracejado é o que diferencia sem depender da cor; o texto entre parênteses
   diz o mesmo para quem lê, e some quando a célula é estreita demais para ele. */
.ocorre-a-confirmar .sit::before{content:" (a confirmar)"; font-weight:600; opacity:.85}
.ocorre-chamada{background:color-mix(in srgb, var(--azul) 18%, transparent); border-left-color:var(--azul); font-weight:600; font-style:italic}
a.ocorre:hover{background:color-mix(in srgb, var(--verde) 34%, transparent)}
a.ocorre:focus-visible{outline:3px solid var(--tinta); outline-offset:1px}
.cal-semdia{margin:10px 0 0; font-size:15px; color:var(--tinta-2)}
.cal-sem{margin-top:24px; padding-top:18px; border-top:2px solid var(--tinta)}
.cal-sem h3{font-size:20px; margin:0 0 12px; letter-spacing:-.025em}
.vazio{margin:20px 0; font-size:16.5px}
.link-botao{font:inherit; font-weight:700; color:var(--tinta); background:none; border:0; border-bottom:2px solid var(--tinta); padding:0; cursor:pointer}
.sem-janela{margin:26px 0 0; padding:18px 22px; background:color-mix(in srgb, var(--azul) 10%, transparent);
  border-radius:24px 20px 26px 22px / 20px 26px 22px 24px; max-width:70ch; font-size:16px;
  box-shadow:0 14px 30px -22px color-mix(in srgb, var(--azul) 60%, #2A2A2E)}

@media (max-width:900px){
  .formatos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .valores{grid-template-columns:repeat(3,minmax(0,1fr))}
  .participa-grade{grid-template-columns:1fr} .participa-lado{padding-top:0}
}
@media (max-width:760px){
  .controles{grid-template-columns:1fr; gap:14px}
  .cal th{padding:0 3px 6px; font-size:12px}
  .cal td{height:72px; padding:4px 3px 6px}
  .ocorre{font-size:12px; padding:3px 5px; margin:0 -3px 2px; min-height:22px}
  .cal-topo{flex-wrap:wrap}
  .nav-mes .rot{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0)}
  .formatos{grid-template-columns:1fr}
  .valores{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.janelas{margin:0 0 14px; padding:16px 20px; background:color-mix(in srgb, var(--azul) 10%, transparent);
  border-radius:22px 18px 24px 20px / 18px 24px 20px 22px;
  box-shadow:0 12px 26px -20px color-mix(in srgb, var(--azul) 60%, #2A2A2E)}
.janelas[hidden]{display:none}
.janelas h3{margin:0 0 8px; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-3)}
.janelas ul{list-style:none; margin:0; padding:0; display:grid; gap:5px}
.janelas li{font-size:15px; line-height:1.35}
.janelas li[hidden]{display:none}
.janelas li b{font-weight:700}
.janelas li span{color:var(--tinta-2); font-variant-numeric:tabular-nums}
#cal-topo{scroll-margin-top:90px}

/* ---------- páginas em construção: o Célio esperando ---------- */
.construcao-grade{display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:clamp(24px,5vw,72px); align-items:center}
.construcao-celio{position:relative; display:flex; flex-direction:column; align-items:center; gap:14px}
/* mesma folha de sprite do hero, célula de 576×624 numa grade de 8 colunas */
.celio-espera{--qx:0; --qy:0; --cw:576; --ch:624; --cols:8; --linhas:4;
  --h:clamp(200px, 26vw, 300px);
  height:var(--h); width:calc(var(--h) * var(--cw) / var(--ch));
  background-image:url("/assets/celio/esperar.661276d1.webp"); background-repeat:no-repeat;
  background-size:calc(var(--h) * var(--cols) * var(--cw) / var(--ch)) calc(var(--h) * var(--linhas));
  background-position:calc(var(--qx) * var(--h) * -1 * var(--cw) / var(--ch)) calc(var(--qy) * var(--h) * -1);
  filter:drop-shadow(0 18px 24px var(--sombra-celio))}
.selo-breve{display:inline-block; margin:0 0 14px; padding:5px 14px; border-radius:999px;
  background:var(--acao); color:var(--acao-texto); font-size:13px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase}
.construcao-texto h2{margin:0 0 14px}
.construcao-texto .promessa{font-size:clamp(17px,1.5vw,19px); color:var(--tinta-2); max-width:54ch; margin:0 0 22px}
.vai-ter{list-style:none; margin:0 0 24px; padding:0; display:grid; gap:12px; max-width:56ch}
.vai-ter li{padding-left:22px; position:relative; color:var(--tinta-2); line-height:1.55}
.vai-ter li::before{content:""; position:absolute; left:0; top:.62em; width:9px; height:9px;
  border-radius:50%; background:var(--cor-tema, var(--verde))}
.vai-ter b{color:var(--tinta)}
.construcao-texto .enquanto{margin:0 0 20px; max-width:54ch}
.avisar{margin:16px 0 0; font-size:15px; color:var(--tinta-2)}
@media (max-width:760px){
  .construcao-grade{grid-template-columns:1fr; justify-items:center; text-align:left}
  .construcao-texto{width:100%}
  .celio-espera{--h:clamp(180px,42vw,240px)}
}

/* ---------- contato ---------- */
.contato-grade{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(28px,5vw,72px); align-items:start}
.contato-canais .promessa{color:var(--tinta-2); margin:0 0 22px; max-width:42ch}
.canais{list-style:none; margin:0 0 20px; padding:0; display:grid; gap:2px}
.canais li{display:grid; gap:2px; padding:14px 0; border-top:1px solid var(--linha)}
.canais li:last-child{border-bottom:1px solid var(--linha)}
.canais b{font-size:16px}
.canais span{color:var(--tinta-2); font-size:14.5px}
.canais a{font-weight:600; font-size:15px; justify-self:start}
.resposta{color:var(--tinta-2); font-size:14.5px; margin:0}

.forma{margin:0}
.campo{display:grid; gap:6px; margin:0 0 18px}
.campo label{font-weight:700; font-size:15px}
.campo .opcional{font-weight:400; color:var(--tinta-3)}
.campo .dica{color:var(--tinta-2); font-size:14px}
.campo input,.campo select,.campo textarea{
  font:inherit; font-size:16px; color:var(--tinta); background:var(--papel);
  border:1px solid var(--linha-controle); border-radius:12px; padding:12px 14px;
  min-height:48px; width:100%; max-width:none}
.campo textarea{min-height:150px; resize:vertical; line-height:1.55}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{
  outline:3px solid var(--tinta); outline-offset:2px; border-color:var(--tinta)}
/* a armadilha de robô sai da tela sem display:none — leitor de tela ignora pelo
   aria-hidden, e quem preenche por engano é script, não gente */
.ninho{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.acoes-forma{margin:22px 0 0}
.rodape-forma{margin:16px 0 0; color:var(--tinta-2); font-size:14px; max-width:52ch}
.erros{margin:0 0 20px; padding:16px 18px; border-radius:14px;
  background:color-mix(in srgb, var(--vermelho) 12%, var(--papel));
  border:2px solid var(--vermelho)}
.erros h3{margin:0 0 8px; font-size:17px}
.erros ul{margin:0; padding-left:20px; display:grid; gap:4px}
.erros:focus{outline:3px solid var(--tinta); outline-offset:3px}
.aviso-ok{margin:0 0 22px; padding:18px 20px; border-radius:14px;
  background:color-mix(in srgb, var(--verde) 14%, var(--papel));
  border-left:4px solid var(--verde)}
.aviso-ok h3{margin:0 0 6px; font-size:18px}
.aviso-ok p{margin:0; color:var(--tinta-2)}
.aviso-ok:focus{outline:3px solid var(--tinta); outline-offset:3px}
.link-simples{font-weight:700; color:var(--tinta)}
@media (max-width:860px){
  .contato-grade{grid-template-columns:1fr; gap:36px}
}

.lista-404{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:12px}
.lista-404 li{padding-left:20px; position:relative; color:var(--tinta-2)}
.lista-404 li::before{content:""; position:absolute; left:0; top:.62em; width:8px; height:8px;
  border-radius:50%; background:var(--coral)}
.lista-404 a{font-weight:700}

/* o aviso de janela vazia e a lista de eventos sem data, junto do resto do Circuito */
/* aviso de janela sem nada previsto, no lugar de grades em branco */
.cal-nada{margin:0;padding:1rem 1.15rem;border-radius:12px;background:var(--papel-2);
  color:var(--tinta-2);font-size:.94rem;line-height:1.5}
.cal-sem ul{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.4rem}
.cal-sem li{display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline}
.cal-sem li span{color:var(--tinta-3);font-size:.86rem}
.cal-sem-nota{margin:.9rem 0 0;color:var(--tinta-2);font-size:.9rem}

/* link de cada formato para onde ele acontece */
.formato-ir{display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  font-weight:700; font-size:14.5px; color:var(--tinta);
  border-bottom:2px solid color-mix(in srgb, var(--tinta) 30%, transparent); padding-bottom:2px}
.formato-ir:hover{border-bottom-color:var(--tinta)}
/* convite para quem organiza evento, no Circuito */
.divulgue{display:grid; gap:10px; justify-items:start; margin:34px 0 0; padding:22px 24px;
  border-radius:var(--raio); background:var(--papel); border:1px solid var(--linha);
  font-size:clamp(16px,1.5vw,18px); font-weight:700; max-width:none}
.divulgue span{font-weight:400; font-size:14.5px; color:var(--tinta-2)}

/* fala de membro: citação com procedência por contexto, sem nome. O consentimento
   do censo foi dado para o relatório da comunidade, não para o site. */
.fala{margin:26px 0 0; padding:0 0 0 20px; border-left:3px solid var(--ambar); max-width:52ch}
.fala blockquote{margin:0}
.fala blockquote p{margin:0; font-size:clamp(16px,1.6vw,18px); line-height:1.6; color:var(--tinta)}
.fala figcaption{margin-top:10px; font-size:14px; color:var(--tinta-3)}

/* ---------- encontros anteriores: trilho de cartões, não mais uma pilha ---------- */
.antes{list-style:none; margin:24px 0 0; padding:0 0 12px;
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,268px);
  gap:20px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:thin;
  overscroll-behavior-x:contain}
.antes li{max-width:none; scroll-snap-align:start}
.antes a{display:grid; gap:10px; text-decoration:none; color:var(--tinta);
  transition:transform .2s var(--saida)}
.antes a:focus-visible{outline:3px solid var(--tinta); outline-offset:4px; border-radius:14px}
.antes img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:14px;
  border:1px solid var(--linha); background:var(--papel-2)}
.antes-corpo{display:grid; gap:4px}
.antes time{font:600 12.5px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace; color:var(--tinta-3)}
.antes b{font-size:16px; line-height:1.3; letter-spacing:-.01em}
.antes-serie{font-size:13px; color:var(--tinta-2)}
@media (max-width:640px){
  .antes{grid-auto-columns:minmax(210px,78vw)}
}

/* ---------- séries do YouTube na home: trilho, para a página não virar tripa ---------- */
@media (max-width:860px){
  /* `1fr` sozinho é `minmax(auto,1fr)`, e esse `auto` é o min-content do item:
     como cada série contém um trilho de episódios, o min-content estourava a
     coluna para 888px dentro de um contêiner de 375px, e o `overflow-x:hidden`
     do body cortava o resto em vez de rolar. */
  .series{grid-template-columns:minmax(0,1fr); gap:38px}
  .serie{min-width:0}
  /* em vez de duas listas empilhadas, cada série vira um trilho que desliza */
  .episodios{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(210px,74vw);
    gap:16px; overflow-x:auto; scroll-snap-type:x proximity; border-top:0;
    padding-bottom:10px; scrollbar-width:thin; overscroll-behavior-x:contain}
  .episodios li{border-bottom:0; scroll-snap-align:start;
    border:1px solid var(--linha); border-radius:14px; background:var(--papel)}
  .episodios a{flex-direction:column; align-items:flex-start; gap:6px; padding:14px 16px}
}

/* ---------- as duas séries, lado a lado: cartão em vez de seção inteira ---------- */
.serie-grade{list-style:none; margin:26px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(20px,3vw,36px)}
.serie-cartao{max-width:none; display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr);
  align-items:center; gap:18px; padding:18px;
  background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio)}
.serie-capa img{width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:12px}
.serie-corpo{display:grid; gap:8px}
.serie-corpo h3{margin:0; font-size:clamp(20px,2.1vw,24px); letter-spacing:-.02em}
.serie-corpo h3 a{color:var(--tinta); text-decoration:none;
  border-bottom:2px solid color-mix(in srgb, var(--tinta) 28%, transparent)}
.serie-corpo h3 a:hover{border-bottom-color:var(--tinta)}
.serie-corpo .desc{margin:0; color:var(--tinta-2); font-size:16px; max-width:none}
.serie-conta{margin:0; font:600 13px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace; color:var(--tinta-3)}
@media (max-width:520px){
  .serie-cartao{grid-template-columns:1fr}
  .serie-capa img{aspect-ratio:16/9}
}
.assinar{display:grid; gap:10px; justify-items:start; margin:34px 0 0; padding:22px 24px;
  border-radius:var(--raio); background:var(--papel); border:1px solid var(--linha);
  font-size:clamp(16px,1.5vw,18px); font-weight:700; max-width:none}
.assinar span{font-weight:400; font-size:14.5px; color:var(--tinta-2); line-height:1.6}
.assinar code{font-size:13.5px; background:var(--papel-2); padding:2px 6px; border-radius:5px}

/* ---------- fotos dentro das seções ---------- */
.foto-secao{margin:30px 0 0; max-width:none}
.foto-secao img{width:100%; height:auto; border-radius:var(--raio); border:1px solid var(--linha);
  object-fit:cover}
.foto-larga img{max-height:440px; object-position:center 42%}
.foto-secao figcaption{margin-top:10px; font-size:14px; color:var(--tinta-3)}
.foto-piada{margin:34px 0 0; max-width:none; display:grid; gap:10px; justify-items:start}
.foto-piada img{width:min(100%,300px); height:auto; border-radius:var(--raio); border:1px solid var(--linha)}
.foto-piada figcaption{font-size:15px; color:var(--tinta-2); max-width:36ch}

/* o Célio aparecendo de canto, para desanuviar. É decoração: alt vazio. */
.celio-canto{display:flex; align-items:center; gap:14px; margin:26px 0 0; max-width:none}
.celio-canto img{width:84px; height:84px; flex:none}
.celio-canto span{font-size:15px; color:var(--tinta-2)}
.celio-canto-dir{justify-content:flex-end; text-align:right}
@media (max-width:640px){ .celio-canto-dir{justify-content:flex-start; text-align:left} }

/* foto em faixa, largura do conteúdo: a retrato dentro de uma caixa baixa cortava demais */
.foto-faixa{margin:32px 0 0; max-width:none}
.foto-faixa img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  border-radius:var(--raio); border:1px solid var(--linha)}
.foto-faixa figcaption{margin-top:10px; font-size:14px; color:var(--tinta-3)}
/* faixa de abertura de página: sangra até a borda, sem moldura */
.faixa-topo{padding:0 !important; line-height:0}
.faixa-topo img{width:100%; height:clamp(180px,26vw,320px); object-fit:cover; object-position:center 42%}

/* ---------- galeria de grupos na seção "O que é a AmigUX" ---------- */
.galeria{list-style:none; margin:0; padding:0; display:grid; gap:12px;
  grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:"a a" "b c" "d d"}
.galeria li{max-width:none; margin:0}
.galeria .g1{grid-area:a} .galeria .g2{grid-area:b}
.galeria .g3{grid-area:c} .galeria .g4{grid-area:d}
.galeria img{width:100%; height:100%; object-fit:cover; border-radius:16px;
  border:1px solid var(--linha); display:block}
.galeria .g1 img{aspect-ratio:16/9}
.galeria .g2 img,.galeria .g3 img{aspect-ratio:1}
.galeria .g4 img{aspect-ratio:2.4}
@media (max-width:640px){
  .galeria{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .galeria .g4 img{aspect-ratio:16/9}
}

/* as três referências que deram origem ao Célio, no fim do texto do micélio */
.refs-celio{list-style:none; margin:36px 0 0; padding:0; display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.refs-celio li{max-width:none; display:grid; gap:10px}
.refs-celio img{width:100%; height:auto; border-radius:16px; background:var(--papel);
  border:1px solid var(--linha)}
.refs-celio span{font-size:14px; color:var(--tinta-2); line-height:1.5}

/* movimento de hover só com ponteiro fino — ver estilo.css */
@media (hover:hover) and (pointer:fine){
  .antes a:hover{transform:translateY(-3px)}
}

/* O endereço do .ics é uma palavra só de 34 caracteres e não cabe em 320px, que é
   a largura do reflow (SC 1.4.10). Quebrar em qualquer ponto é preferível à rolagem
   horizontal — o endereço é para copiar, não para ler linha a linha. */
.assinatura code, .circuito code{overflow-wrap:anywhere; word-break:break-all}
.circuito .assinatura span, .circuito p > span{overflow-wrap:anywhere}

/* ============ A GRAMÁTICA DO HERO, FORA DO HERO ============
   O hero tem uma linguagem que o resto do site não usava: formas orgânicas em vez
   de retângulos, anéis tracejados, esferas com luz e sombra da própria cor, e
   camadas com profundidade. Aqui ela sai do hero e entra nas páginas internas. */

/* --- constelação: o topo do Circuito, que era o único sem elemento visual --- */
.constelacao{position:relative; aspect-ratio:1.05; min-height:260px; min-width:0; max-width:100%}
.constelacao .anel{position:absolute; left:50%; top:50%; translate:-50% -50%;
  border-radius:50%; pointer-events:none}
.constelacao .k1{width:56%; aspect-ratio:1; border:1.5px dashed var(--linha)}
.constelacao .k2{width:84%; aspect-ratio:1; border:1.5px solid color-mix(in srgb, var(--linha) 50%, transparent)}
/* mesma receita de luz das esferas do hero: brilho no alto à esquerda, sombra
   embaixo à direita, e a sombra projetada tingida com a própria cor */
.constelacao .orbe{position:absolute; aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.75), rgba(255,255,255,0) 40%),
             radial-gradient(circle at 70% 80%, rgba(42,42,46,.22), rgba(42,42,46,0) 50%), var(--cor);
  box-shadow:0 10px 20px -10px color-mix(in srgb, var(--cor) 70%, #2A2A2E)}
/* as posições acompanham a densidade real do ano: aglomera onde há evento */
.constelacao .o1{--cor:var(--coral);    width:19%; left:50%; top:16%}
.constelacao .o2{--cor:var(--azul);     width:13%; left:78%; top:33%}
.constelacao .o3{--cor:var(--verde);    width:15%; left:75%; top:68%}
.constelacao .o4{--cor:var(--ambar);    width:11%; left:47%; top:86%}
.constelacao .o5{--cor:var(--teal);     width:14%; left:20%; top:70%}
.constelacao .o6{--cor:var(--vermelho); width:10%; left:20%; top:31%}
.constelacao .o7{--cor:var(--ambar);    width:7%;  left:62%; top:50%}
@media (prefers-reduced-motion: no-preference){
  .constelacao .orbe{animation:flutua 9s ease-in-out infinite}
  .constelacao .o2{animation-duration:10.4s; animation-delay:-2.1s}
  .constelacao .o3{animation-duration:8.8s;  animation-delay:-4.3s}
  .constelacao .o4{animation-duration:11s;   animation-delay:-1.2s}
  .constelacao .o5{animation-duration:9.6s;  animation-delay:-5.1s}
  .constelacao .o6{animation-duration:10s;   animation-delay:-3.4s}
  .constelacao .o7{animation-duration:8.4s;  animation-delay:-6.2s}
}
:root[data-movimento="pausado"] .constelacao .orbe{animation:none !important}
@media (max-width:760px){ .constelacao{aspect-ratio:1.6; min-height:190px} }

/* --- os três avisos soltos viram uma grade com pesos diferentes --- */
.acoes-circuito{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(16px,2.4vw,26px); margin:34px 0 0; align-items:start}
.acoes-circuito .assinar,.acoes-circuito .divulgue{margin:0; height:100%}
/* forma orgânica, como as bolhas do hero: o canto irregular é a assinatura da casa */
.acoes-circuito > *{border-radius:26px 22px 28px 20px / 22px 28px 20px 26px}
@media (max-width:760px){ .acoes-circuito{grid-template-columns:1fr} }

/* --- o aviso da caravana perde a régua de coluna e ganha a forma da casa --- */
.ir-junto{border-left:0; border-radius:24px 20px 26px 22px / 20px 26px 22px 24px;
  padding:20px 24px; box-shadow:0 14px 30px -22px color-mix(in srgb, var(--verde) 60%, #2A2A2E)}

/* ============ HOME: A ÓRBITA CONTINUA (22/09/2026) ============
   O hero é um sistema de órbita com objetos em camadas. Abaixo dele a home era cinco
   faixas de cor com o mesmo contêiner, o mesmo título no mesmo x e o mesmo padding;
   `.bloco{overflow:hidden}` selava cada seção como caixa, e nenhum objeto atravessava
   uma costura. Aqui a página vira folha contínua: cada seção pinta a sua cor numa
   massa orgânica maior que a tela (`.faixa`), ancorada ora à esquerda, ora à direita;
   quem vem antes pinta por cima de quem vem depois, e fotos, anéis e esferas cruzam
   as fronteiras. Só a home (`body.inicio`) — as internas seguem como estão até a
   direção ser aprovada. O hero não muda. */

/* --- a folha contínua --- */
/* `overflow-x:clip` corta o que sangra para fora da tela sem virar contêiner de
   rolagem (o que `hidden` faria), e deixa o eixo vertical livre para as travessias */
main{overflow-x:clip}
.bloco.solta{overflow:visible; background:transparent}
.bloco.solta::before{inset:0 0 var(--pende) 0}
/* ordem de pintura: quem vem antes fica por cima, para o que pende de uma seção
   aparecer sobre a seguinte. O convite fica acima da fala só para as esferas dele
   subirem pela costura. */
main > :nth-child(1){z-index:16} main > :nth-child(2){z-index:15} main > :nth-child(3){z-index:14}
main > :nth-child(4){z-index:13} main > :nth-child(5){z-index:12} main > :nth-child(6){z-index:11}
main > :nth-child(7){z-index:10} main > :nth-child(8){z-index:9}  main > :nth-child(9){z-index:8}
main > :nth-child(10){z-index:7} main > :nth-child(11){z-index:6} main > :nth-child(12){z-index:5}
main > :nth-child(13){z-index:4} main > :nth-child(14){z-index:3} main > :nth-child(15){z-index:2}
main > :nth-child(16){z-index:1}

/* o quanto a massa pende é herdado da seção (`.bloco.solta{--pende}`): a faixa não
   declara o próprio valor, senão a última seção e o celular nunca conseguiriam mudá-lo */
.faixa{position:absolute; z-index:-3; pointer-events:none; background:var(--faixa);
  inset:0 -12% var(--pende,-72px) -12%}
.bloco.solta{--pende:-72px}
.t-comunidade{--faixa:var(--f-comunidade)} .t-encontros{--faixa:var(--f-encontros)}
.t-agenda{--faixa:var(--f-agenda)} .t-rede{--faixa:var(--f-rede)} .t-membros{--faixa:var(--f-membros)}
/* a massa fica de um lado e sai da tela; as curvas ficam do outro */
.anc-esq .faixa{border-radius:0 42% 56% 0 / 0 28% 72% 0}
.anc-dir .faixa{border-radius:38% 0 0 46% / 30% 0 0 46%}

/* --- as peças da gramática do hero, fora do hero --- */
.anel-p{position:absolute; border-radius:50%; pointer-events:none; aspect-ratio:1;
  transform:translate(-50%,-50%); border:1.5px dashed var(--linha)}
.orbe-p{position:absolute; aspect-ratio:1; border-radius:50%; pointer-events:none;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.75), rgba(255,255,255,0) 40%),
             radial-gradient(circle at 70% 80%, rgba(42,42,46,.22), rgba(42,42,46,0) 50%), var(--cor);
  box-shadow:0 10px 20px -10px color-mix(in srgb, var(--cor) 70%, #2A2A2E)}
/* superfície de foto: canto irregular (a assinatura da casa), luz e sombra tingida,
   nenhuma borda — o hero não tem uma borda sequer */
.inicio .pf,.inicio .capa,.fala-foto,.fim-foto,
.eventos[data-n="1"] .capa-ev{border:0; border-radius:26px 22px 30px 20px / 22px 30px 20px 26px}
.luz{position:absolute; inset:-60% -80%; pointer-events:none; opacity:.18;
  background:linear-gradient(105deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 58%)}

/* --- 1. O que é a AmigUX: prosa à esquerda, palco de fotos à direita --- */
.inicio #comunidade{padding-block:clamp(72px,8vw,112px) clamp(20px,3vw,40px)}
.inicio .sobre{grid-template-columns:minmax(0,52ch) minmax(0,1fr); align-items:start;
  gap:clamp(32px,6vw,96px)}
.sobre-texto h2{margin-bottom:22px}
.sobre-acao{margin-top:8px}
.palco-fotos{position:relative; aspect-ratio:1.02; min-height:300px}
.palco-fotos .p1{left:56%; top:50%; width:72%}
.palco-fotos .p2{left:56%; top:50%; width:104%; border-style:solid;
  border-color:color-mix(in srgb, var(--linha) 50%, transparent)}
.palco-fotos .e1{--cor:var(--ambar); width:8%; left:94%; top:10%}
.palco-fotos .e2{--cor:var(--coral); width:4.5%; left:6%; top:34%}
.palco-fotos .e3{--cor:var(--verde); width:5.5%; left:82%; top:98%}
.pfotos{list-style:none; margin:0; padding:0; position:absolute; inset:0}
.pf{position:absolute; max-width:none; margin:0; overflow:hidden; background:var(--papel-2);
  box-shadow:0 28px 52px -26px color-mix(in srgb, var(--ambar) 55%, #2A2A2E)}
.pf img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.pf .luz{z-index:2}
/* a foto nova entra por cima e funde; a antiga sai depois (palco.js) */
.pf img.entra{opacity:0; transition:opacity .8s ease}
.pf img.entra.visivel{opacity:1}
.pf.f1{width:60%; aspect-ratio:16/10; left:6%; top:4%; rotate:-3deg; z-index:3}
.pf.f2{width:44%; aspect-ratio:1; left:0; top:60%; rotate:2.5deg; z-index:4}
.pf.f3{width:42%; aspect-ratio:16/10; left:52%; top:66%; rotate:-2deg; z-index:2}
.pf.f4{width:46%; aspect-ratio:1; left:64%; top:14%; rotate:3.5deg; z-index:1}

/* --- 2. Encontros gravados: órbita assimétrica, o Papo como carro-chefe --- */
.inicio #encontros{padding-block:clamp(80px,8vw,112px) clamp(56px,6vw,88px)}
.inicio .series{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(32px,5vw,80px); align-items:start}
.inicio .anel-s{left:63%; top:46%; width:min(46vw,560px); z-index:0}
.inicio .serie{position:relative; z-index:1}
.inicio .capa{box-shadow:0 30px 56px -28px color-mix(in srgb, var(--azul) 60%, #2A2A2E); background:var(--papel-2)}
.inicio .serie-menor .capa{rotate:2deg; box-shadow:0 26px 48px -26px color-mix(in srgb, var(--teal) 60%, #2A2A2E)}
.inicio .serie-menor{margin-top:clamp(24px,4vw,56px)}
/* `--sobre-blob`, não `--tinta`: no escuro a tinta é clara e daria 1,9:1 sobre o azul */
.inicio .capa .play i{background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.6), rgba(255,255,255,0) 45%), var(--azul); color:var(--sobre-blob)}
.inicio .serie-menor .capa .play i{background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.6), rgba(255,255,255,0) 45%), var(--teal)}
@media (min-width:861px){
  /* a lista perde as réguas de 1px; o marcador é uma esfera pequena na cor da série */
  .inicio .episodios{border-top:0}
  .inicio .episodios li{border-bottom:0}
  .inicio .episodios a{padding:9px 0 9px 24px; position:relative}
  .inicio .episodios a::before{content:""; position:absolute; left:2px; top:.95em; width:10px; height:10px; border-radius:50%;
    background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.75), rgba(255,255,255,0) 40%), var(--cor,var(--azul));
    box-shadow:0 4px 8px -4px color-mix(in srgb, var(--cor,var(--azul)) 70%, #2A2A2E)}
  .inicio .serie-menor .episodios a::before{--cor:var(--teal)}
}

/* --- 3. Próximos encontros: o pôster é a foto do palco, a data é uma esfera --- */
.inicio #agenda{padding-block:clamp(88px,9vw,124px) clamp(56px,6vw,80px)}
.eventos[data-n="1"] .evento{grid-template-columns:minmax(0,272px) minmax(0,46ch);
  gap:clamp(24px,3.5vw,48px); background:transparent; border:0; padding:24px 0 0; align-items:start}
/* o texto nasce na altura da esfera de data, não no meio do vazio: título maior e
   colado ao pôster, para os dois lerem como um objeto só */
.eventos[data-n="1"] .evento > span:last-child{padding-top:clamp(28px,4.5vw,64px)}
.eventos[data-n="1"] .evento h3{font-size:clamp(24px,2.5vw,34px); letter-spacing:-.03em; line-height:1.02; margin-bottom:12px}
.eventos[data-n="1"] .evento .meta{font-size:15.5px}
.eventos[data-n="1"] .evento:hover{border:0; box-shadow:none}
.eventos[data-n="1"] .cartaz{position:relative; display:block; margin-left:clamp(-56px,-4vw,-16px)}
.eventos[data-n="1"] .capa-ev{rotate:-3deg; display:block;
  box-shadow:0 34px 60px -30px color-mix(in srgb, var(--verde) 60%, #2A2A2E)}
.eventos[data-n="1"] .dia{position:absolute; right:-28px; top:-22px; width:118px; aspect-ratio:1;
  border-radius:50%; border:0; padding:0; rotate:4deg; z-index:2; color:var(--sobre-blob);
  background:radial-gradient(circle at 30% 24%, rgba(255,255,255,.55), rgba(255,255,255,0) 42%),
             radial-gradient(circle at 72% 84%, rgba(42,42,46,.18), rgba(42,42,46,0) 50%), var(--verde);
  box-shadow:0 18px 30px -14px color-mix(in srgb, var(--verde) 70%, #2A2A2E)}
.eventos[data-n="1"] .dia .mes,.eventos[data-n="1"] .dia .sem{color:var(--sobre-blob)}
.eventos[data-n="1"] .dia .num{font-size:34px}
/* com dois ou mais eventos o cartaz some como caixa e a data volta a ser coluna */
.eventos:not([data-n="1"]) .cartaz{display:contents}
/* o anel e as esferas ocupam o lado direito, que ficava vazio com um evento só */
.bloco .eventos,.bloco .agenda-topo,.bloco .agenda-nota{position:relative; z-index:1}
.anel-ag{left:34%; top:50%; width:min(44vw,560px); z-index:0}
.ag1{--cor:var(--verde); width:3.4%; left:97%; top:22%}
.ag2{--cor:var(--teal); width:2.2%; left:68%; top:94%}

/* --- 4. Comunidades parceiras: prosa à esquerda, constelação à direita --- */
.inicio #rede{padding-block:clamp(72px,8vw,104px) clamp(56px,6vw,80px)}

/* --- 5. A fala do membro: balão orgânico ancorado numa foto, deslocado à direita --- */
.fala-solta{padding-block:clamp(40px,6vw,72px) clamp(32px,5vw,64px); overflow:visible; background:transparent}
.fala-grade{display:grid; grid-template-columns:minmax(0,.5fr) minmax(0,1fr); align-items:center;
  max-width:1040px; margin-left:auto}
.fala-foto{margin:0; width:min(100%,300px); justify-self:end; rotate:-3deg; position:relative; z-index:1;
  overflow:hidden; box-shadow:0 30px 56px -28px color-mix(in srgb, var(--coral) 55%, #2A2A2E)}
.fala-foto img{width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; display:block}
.balao{position:relative; z-index:2; margin:0 0 0 -44px;
  padding:clamp(28px,4vw,52px) clamp(32px,5vw,64px);
  background:var(--f-comunidade);
  border-radius:64px 96px 72px 88px / 88px 64px 96px 72px}
.balao blockquote{margin:0}
.balao blockquote p{margin:0; max-width:none; font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:clamp(20px,2.2vw,28px); line-height:1.4; letter-spacing:-.012em; color:var(--tinta); text-wrap:pretty}
.balao figcaption{margin-top:18px; font-size:14.5px; letter-spacing:.02em; color:var(--tinta-2)}
.balao .rabo{--cor:var(--coral); width:30px; left:14px; bottom:26px; top:auto; transform:none}

/* --- 6. O convite: o segundo palco. O Célio volta para se despedir --- */
.convite{overflow:visible; padding-block:clamp(56px,7vw,96px) clamp(36px,5vw,64px)}
.convite .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; gap:clamp(24px,5vw,72px)}
.convite-texto .botao{margin-top:22px}
.palco-fim{position:relative; aspect-ratio:1.1; min-height:280px}
.palco-fim .p1{left:58%; top:52%; width:64%; border-color:rgba(255,251,245,.26)}
.palco-fim .p2{left:58%; top:52%; width:96%; border-style:solid; border-color:rgba(255,251,245,.12)}
.palco-fim{--h-fim:clamp(180px,21vw,300px)}
.palco-fim .fim-celio{position:absolute; left:58%; top:56%; transform:translate(-50%,-50%); z-index:3;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.55))}
.fim-foto{position:absolute; width:36%; height:auto; aspect-ratio:4/3; object-fit:cover;
  box-shadow:0 26px 48px -24px rgba(0,0,0,.65); z-index:2}
.fim-foto.ff1{left:0; top:8%; rotate:-4deg}
.fim-foto.ff2{left:66%; top:72%; rotate:3deg; z-index:2}
.palco-fim .e1{--cor:var(--ambar); width:9%; left:22%; top:-14%}
.palco-fim .e2{--cor:var(--verde); width:5%; left:92%; top:6%}
.palco-fim .e3{--cor:var(--azul); width:6.5%; left:8%; top:92%}

/* --- movimento: só onde a preferência permite, e obedecendo ao interruptor --- */
@media (prefers-reduced-motion:no-preference){
  .inicio .pf,.palco-fotos .orbe-p,.palco-fim .orbe-p,.ag1,.ag2{animation:flutua 9s ease-in-out infinite}
  .inicio .pf.f2{animation-duration:10.5s; animation-delay:-3.1s}
  .inicio .pf.f3{animation-duration:8.6s; animation-delay:-5.2s}
  .inicio .pf.f4{animation-duration:9.8s; animation-delay:-1.6s}
  .palco-fotos .e2{animation-duration:11s; animation-delay:-2.4s}
  .palco-fotos .e3{animation-duration:8.2s; animation-delay:-6.1s}
  .palco-fim .e2{animation-duration:10.2s; animation-delay:-4s}
  .palco-fim .e3{animation-duration:9.4s; animation-delay:-1.1s}
}
:root[data-movimento="pausado"] .inicio .pf,
:root[data-movimento="pausado"] .palco-fotos .orbe-p,
:root[data-movimento="pausado"] .palco-fim .orbe-p,
:root[data-movimento="pausado"] .ag1,:root[data-movimento="pausado"] .ag2{animation:none !important}

/* --- adaptação --- */
@media (max-width:860px){
  .inicio .series{grid-template-columns:minmax(0,1fr); gap:38px}
  .inicio .serie-menor{margin-top:0}
  .inicio .serie-menor .capa{rotate:0deg}
  .inicio .anel-s{display:none}
  .anel-ag,.ag1,.ag2{display:none}
}
@media (max-width:760px){
  /* no celular a curva da faixa fica quase toda fora da tela: só a ponta aparece,
     para o texto nunca cavalgar a borda da cor */
  .faixa{inset:0 -30% var(--pende) -30%}
  .bloco.solta{--pende:-48px}
  .inicio .sobre{grid-template-columns:minmax(0,1fr); gap:28px}
  .palco-fotos{aspect-ratio:1.12; min-height:0; margin-top:8px}
  .fala-grade{grid-template-columns:minmax(0,1fr); max-width:none}
  .fala-foto{width:min(52%,200px); justify-self:start; margin:0 0 -34px 8px; z-index:2}
  .balao{margin:0; padding:52px 28px 32px; border-radius:48px 64px 52px 60px / 60px 48px 64px 52px}
  /* a esfera-rabo do balão, que no desktop cabe na margem esquerda, no celular caía
     em cima da segunda linha da legenda ("no censo de 2026" virava "●26"); passa a
     montar na borda de baixo, fora da coluna de texto */
  .balao .rabo{left:24px; bottom:-12px}
  .convite .wrap{grid-template-columns:minmax(0,1fr); gap:20px}
  .palco-fim{aspect-ratio:2; min-height:170px}
  .fim-foto{display:none}
  .palco-fim{--h-fim:clamp(120px,34vw,170px)}
  .palco-fim .fim-celio{left:50%; top:50%}
  .palco-fim .p1{left:50%; top:50%; width:52%} .palco-fim .p2{left:50%; top:50%; width:78%}
  /* a esfera âmbar saía do palco por cima e encostava no botão do grupo, agora centrado;
     desce para dentro do palco, ao lado da cabeça do Célio */
  .palco-fim .e1{left:10%; top:8%} .palco-fim .e2{left:86%; top:12%} .palco-fim .e3{left:12%; top:86%}
}
@media (max-width:640px){
  /* a esfera de data volta no celular: pousada no canto do pôster, ela não vira
     meia tela de calendário — o que motivou escondê-la quando era um quadrado */
  .eventos[data-n="1"] .evento .dia{display:grid; width:92px; right:-18px; top:-16px}
  .eventos[data-n="1"] .dia .num{font-size:28px}
  .eventos[data-n="1"] .cartaz{margin-left:-8px; width:min(100%,260px)}
  /* empilha de novo: a regra da grade de duas colunas acima vence a genérica de 640px */
  .eventos[data-n="1"] .evento{grid-template-columns:minmax(0,1fr); gap:22px; align-items:start}
}


/* --- 3b. Próximos encontros com dois eventos, e com três ou mais --- */
/* a esfera de data é uma só em todos os estados; muda o tamanho e onde pousa */
.eventos .dia{border-radius:50%; border:0; padding:0; color:var(--sobre-blob); aspect-ratio:1;
  background:radial-gradient(circle at 30% 24%, rgba(255,255,255,.55), rgba(255,255,255,0) 42%),
             radial-gradient(circle at 72% 84%, rgba(42,42,46,.18), rgba(42,42,46,0) 50%), var(--verde);
  box-shadow:0 18px 30px -14px color-mix(in srgb, var(--verde) 70%, #2A2A2E)}
.eventos .dia .mes,.eventos .dia .sem{color:var(--sobre-blob)}
/* dois: pôster pequeno com a esfera no canto, texto ao lado, sem caixa */
.eventos[data-n="2"]{gap:clamp(28px,4vw,64px) clamp(24px,4vw,56px)}
.eventos[data-n="2"] .evento{grid-template-columns:minmax(0,150px) minmax(0,1fr); gap:clamp(20px,3vw,36px);
  background:transparent; border:0; padding:16px 0 0; align-items:start}
.eventos[data-n="2"] .evento:hover{border:0; box-shadow:none}
.eventos[data-n="2"] .cartaz{display:block; position:relative}
.eventos[data-n="2"] .capa-ev{display:block; rotate:-3deg; width:100%; aspect-ratio:9/16; object-fit:cover;
  border-radius:22px 18px 24px 20px / 18px 24px 20px 22px;
  box-shadow:0 26px 48px -26px color-mix(in srgb, var(--verde) 60%, #2A2A2E)}
.eventos[data-n="2"] .dia{position:absolute; right:-18px; top:-16px; width:92px; rotate:4deg; z-index:2}
.eventos[data-n="2"] .dia .num{font-size:28px}
/* sem pôster, a esfera fica sozinha no lugar dele */
.eventos[data-n="2"] .cartaz:not(:has(.capa-ev)) .dia{position:static; width:112px; margin:6px auto 0; rotate:0deg}
.eventos[data-n="2"] .cartaz:not(:has(.capa-ev)) .dia .num{font-size:34px}
.eventos[data-n="2"] .evento > span:last-child{padding-top:22px}
.eventos[data-n="2"] .evento h3{font-size:clamp(21px,2vw,26px); letter-spacing:-.025em}
/* três ou mais: o trilho continua, mas o cartão tem a superfície da casa */
.eventos[data-muitos] .evento{grid-template-columns:84px minmax(0,1fr); gap:18px; align-items:start;
  border:0; background:var(--papel); border-radius:26px 22px 30px 20px / 22px 30px 20px 26px;
  box-shadow:0 24px 44px -26px color-mix(in srgb, var(--verde) 55%, #2A2A2E); padding:clamp(18px,2vw,24px)}
.eventos[data-muitos] .evento:hover{border:0; box-shadow:0 30px 52px -26px color-mix(in srgb, var(--verde) 70%, #2A2A2E)}
.eventos[data-muitos] .cartaz{display:contents}
.eventos[data-muitos] .dia{width:84px; display:grid}
.eventos[data-muitos] .dia .num{font-size:26px}
.eventos[data-muitos] .evento h3{font-size:clamp(19px,1.7vw,22px)}
@media (max-width:640px){
  /* dois eventos empilham (a regra geral só tratava o cartão, não a lista) */
  .eventos[data-n="2"]{grid-template-columns:minmax(0,1fr)}
  .eventos[data-n="2"] .evento{grid-template-columns:minmax(0,1fr); gap:18px}
  .eventos[data-n="2"] .evento .dia{display:grid}
  .eventos[data-n="2"] .cartaz{width:min(100%,180px)}
  .eventos[data-n="2"] .cartaz:not(:has(.capa-ev)){width:auto}
  .eventos[data-n="2"] .cartaz:not(:has(.capa-ev)) .dia{margin:0}
  /* no trilho o cartão empilha: esfera pequena em cima, texto embaixo */
  .eventos[data-muitos] .evento{grid-template-columns:minmax(0,1fr); gap:12px}
  .eventos[data-muitos] .evento .dia{display:grid; width:72px}
  .eventos[data-muitos] .dia .num{font-size:22px}
}
/* o anel e as esferas soltas preenchiam o lado direito vazio do estado de um evento;
   com dois ou mais, os cartões ocupam a largura e eles saem */
.bloco:has(.eventos:not([data-n="1"])) .anel-ag,
.bloco:has(.eventos:not([data-n="1"])) .ag1,
.bloco:has(.eventos:not([data-n="1"])) .ag2{display:none}

/* --- 4. Comunidades parceiras: as comunidades orbitam a AmigUX --- */
.rede-topo{display:flex; align-items:flex-end; justify-content:space-between; gap:16px 24px; flex-wrap:wrap}
.rede-topo h2{margin:0}
.rede-topo .rede-acao{margin:0}
/* R é o raio da órbita das pílulas; r, o do anel interno das esferas. Sete pílulas a
   51,4° uma da outra: com R=290 a corda entre vizinhas é 252px, mais que a soma das
   meias-larguras da pílula mais longa e de uma média (~240px). */
.orbita{--R:min(262px,26vw); --r:calc(var(--R) * .5); --bolha:clamp(136px,11.6vw,164px); position:relative;
  height:calc(2 * var(--R) + var(--bolha) + 48px); margin-top:clamp(12px,2vw,28px)}
.orbita-anel{position:absolute; left:50%; top:50%; aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,-50%); pointer-events:none}
.orbita .k1{width:calc(2 * var(--r)); border:1.5px dashed var(--linha)}
.orbita .k2{width:calc(2 * var(--R)); border:1.5px solid color-mix(in srgb, var(--linha) 50%, transparent)}
/* o logotipo inteiro, solto no papel, como o Célio fica solto no hero: sem caixa */
.orbita-centro{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1; display:grid; place-items:center}
.orbita-centro img{width:clamp(170px,17vw,224px); height:auto}
.orbita-centro .escuro{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .orbita-centro .claro{display:none}
  :root:not([data-theme="light"]) .orbita-centro .escuro{display:block}
}
:root[data-theme="dark"] .orbita-centro .claro{display:none}
:root[data-theme="dark"] .orbita-centro .escuro{display:block}
/* o braço gira em volta do centro; o satélite gira ao contrário, para a pílula (e a
   luz da esfera) ficar sempre de pé */
.orbita .parceiros{position:absolute; inset:0; display:block; margin:0; padding:0}
.orbita .giro,.orbita .giro-mini{position:absolute; inset:0; max-width:none; rotate:var(--fase); pointer-events:none}
.orbita .parceiros .sat{position:absolute; left:calc(50% + var(--R)); top:50%; translate:-50% -50%;
  rotate:calc(-1 * var(--fase)); pointer-events:auto}
/* a bolha: a receita das portas do hero (estilo.css, .blob), sem o transform de centrar,
   que aqui é feito por translate porque o transform é da animação. O seletor leva
   `.t-rede` porque `.t-rede .parceiros a{background:var(--papel)}` (estilo.css) tem
   especificidade maior que `.orbita .bolha` e engolia a cor. */
.t-rede .orbita .parceiros .bolha{width:var(--bolha); aspect-ratio:1.06; padding:12px 12px; border:0; gap:4px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  color:var(--sobre-blob); text-decoration:none; white-space:normal;
  background:radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.55), rgba(255,255,255,0) 52%), var(--cor);
  box-shadow:0 20px 38px -18px color-mix(in srgb, var(--cor) 70%, #2A2A2E), inset 0 -10px 22px -14px rgba(42,42,46,.35);
  transition:box-shadow .2s var(--saida)}
.t-rede .orbita .parceiros .bolha:hover{color:var(--sobre-blob); border:0;
  box-shadow:0 28px 46px -18px color-mix(in srgb, var(--cor) 75%, #2A2A2E), inset 0 -10px 22px -14px rgba(42,42,46,.35)}
.orbita .bolha:focus-visible{outline-offset:6px}
.orbita .bolha .bolha-ico{font-size:22px; line-height:1}
.orbita .bolha b{font-size:13px; font-weight:800; letter-spacing:-.02em; line-height:1.1; max-width:12ch; text-wrap:balance}
/* as cinco cores e as cinco formas das portas do hero, revezando */
.orbita .c1{--cor:var(--coral); border-radius:52% 48% 46% 54% / 58% 44% 56% 42%}
.orbita .c2{--cor:var(--azul);  border-radius:48% 52% 44% 56% / 50% 46% 54% 50%}
.orbita .c3{--cor:var(--ambar); border-radius:54% 46% 52% 48% / 46% 56% 44% 54%}
.orbita .c4{--cor:var(--teal);  border-radius:50% 50% 46% 54% / 56% 56% 44% 44%}
.orbita .c5{--cor:var(--verde); border-radius:46% 54% 50% 50% / 52% 48% 52% 48%}
.orbita .giro-mini .sat{position:absolute; left:calc(50% + var(--r)); top:50%; width:var(--tam); aspect-ratio:1;
  translate:-50% -50%; rotate:calc(-1 * var(--fase))}
.orbita .giro-mini .orbe-p{position:static; width:100%; height:100%; transform:none; display:block}
.g1{--fase:0deg} .g2{--fase:51.4deg} .g3{--fase:102.9deg} .g4{--fase:154.3deg}
.g5{--fase:205.7deg} .g6{--fase:257.1deg} .g7{--fase:308.6deg}
.m1{--fase:70deg; --tam:22px} .m1 .orbe-p{--cor:var(--coral)}
.m2{--fase:190deg; --tam:16px} .m2 .orbe-p{--cor:var(--verde)}
.m3{--fase:300deg; --tam:26px} .m3 .orbe-p{--cor:var(--azul)}
@media (prefers-reduced-motion:no-preference){
  .orbita .giro{animation:girar 120s linear infinite}
  .orbita .giro .sat{animation:girar 120s linear infinite reverse}
  .orbita .giro-mini{animation:girar 64s linear infinite}
  .orbita .giro-mini .sat{animation:girar 64s linear infinite reverse}
  @keyframes girar{to{transform:rotate(360deg)}}
}
:root[data-movimento="pausado"] .orbita .giro,:root[data-movimento="pausado"] .orbita .giro .sat,
:root[data-movimento="pausado"] .orbita .giro-mini,:root[data-movimento="pausado"] .orbita .giro-mini .sat{animation:none !important}
/* estreito: a mesma lista, sem giro, em pílulas que quebram linha; o botão de
   "quer ser parceira" desce para depois da lista, que é onde a pergunta faz sentido */
@media (max-width:959px){
  .rede-grade{display:grid; gap:0}
  .rede-topo{display:contents}
  .rede-topo h2{order:1}
  .orbita{order:2; height:auto; margin-top:22px}
  .rede-topo .rede-acao{order:3; margin-top:28px}
  .orbita .parceiros .sat{font-size:15.5px; padding:10px 18px}
  .orbita-anel,.orbita-centro,.orbita .giro-mini{display:none}
  .orbita .parceiros{position:static; display:flex; flex-wrap:wrap; gap:10px}
  .orbita .giro{position:static; inset:auto; rotate:none; animation:none; pointer-events:auto}
  .orbita .parceiros .sat{position:static; translate:none; rotate:none; animation:none; white-space:normal}
  /* na lista, o link volta a ser pílula: a receita da bolha fica só na órbita */
  .t-rede .orbita .parceiros .bolha{width:auto; aspect-ratio:auto; display:inline-flex; flex-direction:row; gap:8px; padding:10px 18px;
    border:1px solid var(--linha); border-radius:999px; background:var(--papel); color:var(--tinta-2); box-shadow:none}
  .t-rede .orbita .parceiros .bolha:hover{color:var(--tinta); border:1px solid var(--tinta)}
  .orbita .bolha .bolha-ico{font-size:inherit}
  .orbita .bolha b{font-size:inherit; font-weight:600; letter-spacing:0; line-height:inherit; max-width:none}
}


/* ============ AS INTERNAS NA MESMA FOLHA (22/09/2026, fim da tarde) ============
   A direção aprovada na home vale para o site: a cor da seção é massa orgânica, os
   objetos atravessam as costuras, o que orbita é bolha, a foto é inclinada com luz e
   sombra tingida, e nada mora dentro de caixa com borda. */

/* --- o topo de cada página: texto à esquerda, palco à direita --- */
.abertura{padding:clamp(48px,6.5vw,88px) 0 clamp(24px,3vw,40px)}
.abertura h1{font-size:clamp(42px,6.4vw,84px); line-height:.94; letter-spacing:-.045em; max-width:14ch}
.abertura .linha-fina{margin-top:22px; max-width:48ch}
.abertura-grade{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,5vw,72px); align-items:center}
/* o palco pende sobre a seção seguinte, como o palco de fotos da home; o que vem
   abaixo tem pelo menos 72px de respiro no topo, então nada é coberto */
.abertura-palco,.abre .abertura-palco{margin-bottom:calc(-1 * clamp(32px,4.5vw,64px))}
.abertura-texto .pausa-geral{margin-top:22px}
.abre-acoes{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin:26px 0 0}
.abre-acoes .botao,.abre-acoes .pausa-geral{margin-top:0}
.abertura-palco{position:relative; aspect-ratio:1.08; min-height:280px}
.abertura-so-aneis .abertura-palco{aspect-ratio:1.6; min-height:180px}
.abertura-palco .p1{left:52%; top:50%; width:66%}
.abertura-palco .p2{left:52%; top:50%; width:98%; border-style:solid; border-color:color-mix(in srgb, var(--linha) 50%, transparent)}
.abertura-palco .e1{--cor:var(--c1); width:8%; left:96%; top:14%}
.abertura-palco .e2{--cor:var(--c2); width:5%; left:6%; top:38%}
.abertura-palco .e3{--cor:var(--c3); width:6%; left:80%; top:96%}
/* a foto do topo: inclinada, com luz e sombra tingida com a primeira cor da seção */
.abertura-foto{position:absolute; left:52%; top:50%; width:80%; margin:0; translate:-50% -50%; rotate:-3deg; z-index:2;
  overflow:hidden; border-radius:26px 22px 30px 20px / 22px 30px 20px 26px;
  box-shadow:0 34px 60px -30px color-mix(in srgb, var(--c1) 60%, #2A2A2E)}
.abertura-foto img{display:block; width:100%; height:auto; aspect-ratio:16/11; object-fit:cover}
/* o Célio solto nos anéis, como no hero: sem caixa, só a sombra */
.abertura-celio{position:absolute; left:52%; top:54%; width:min(58%,300px); height:auto; translate:-50% -50%; z-index:2;
  filter:drop-shadow(0 26px 30px var(--sombra-celio))}
.abertura-palco-celio{aspect-ratio:1; width:min(100%,460px); margin-inline:auto}
.abertura-palco-celio .celio-sprite{position:absolute; left:50%; top:52%; translate:-50% -50%; z-index:2;
  filter:drop-shadow(0 26px 30px var(--sombra-celio))}
/* os `.abre` (comunidade, Célio, Circuito) entram na mesma folha */
.abre.solta{overflow:visible; background:transparent; padding-bottom:clamp(24px,3vw,40px)}
.abre-comunidade{--faixa:var(--f-comunidade)} .abre-celio{--faixa:var(--f-comunidade)} .abre-circuito{--faixa:var(--f-agenda)}
.abre .abertura-palco{aspect-ratio:1.02}
.abre-celio .abre-celio-fig,.abre-celio figure.abre-celio{margin:0; display:grid; justify-items:center; gap:14px}
@media (max-width:760px){
  .abertura-grade{grid-template-columns:1fr; gap:22px}
  .abertura-palco,.abre .abertura-palco{margin-bottom:0}
  .abertura-palco{aspect-ratio:1.25; min-height:0; max-width:420px}
  .abertura-so-aneis .abertura-palco{display:none}
  .abertura-foto{width:78%; rotate:-2deg}
  .abertura-celio{width:min(52%,220px)}
  .abertura-palco-celio{width:min(100%,340px)}
}

/* --- superfícies da casa: foto e cartão sem borda, canto irregular, sombra tingida --- */
.foto-secao img,.foto-faixa img,.foto-piada img,.antes img,.refs-celio img,.serie-capa img,.video,
.foto-lado-img,.serie-cartao,.assinar,.divulgue,.cupom,.chamada-mes,.filtros,.cal-mes,.episodio,.escopo,.sem-janela,.janelas{
  border:0; border-radius:26px 22px 30px 20px / 22px 30px 20px 26px}
.foto-secao,.foto-faixa,.foto-piada{position:relative}
.foto-secao img,.foto-faixa img,.foto-piada img,.refs-celio img{box-shadow:0 30px 56px -28px color-mix(in srgb, var(--c1, var(--tinta)) 55%, #2A2A2E)}
.foto-secao .luz,.foto-faixa .luz{border-radius:inherit}
.foto-secao{rotate:-1.5deg; margin-top:36px} .foto-larga{rotate:-1deg}
.foto-secao > .luz{position:absolute; inset:0; overflow:hidden; border-radius:26px 22px 30px 20px / 22px 30px 20px 26px; opacity:.14}
.antes img{border-radius:20px 16px 22px 18px / 16px 22px 18px 20px; box-shadow:0 22px 40px -24px color-mix(in srgb, var(--azul) 55%, #2A2A2E)}
.antes a:focus-visible{border-radius:20px}
.serie-cartao,.assinar,.divulgue,.cupom,.chamada-mes,.filtros,.cal-mes,.episodio{box-shadow:0 24px 44px -28px color-mix(in srgb, var(--c1, var(--tinta)) 50%, #2A2A2E)}
.chamadas{gap:14px; background:none; border:0; border-radius:0; overflow:visible}
.chamada-mes{padding:18px 20px}
/* a régua lateral colorida sai de onde ainda estava */
.puxada{border-left:0; padding:0; margin:30px 0 34px; max-width:40ch}
.puxada p{position:relative; padding-left:0}
.aviso-ok{border-left:0; border:2px solid var(--verde); border-radius:22px 18px 24px 20px / 18px 24px 20px 22px}

/* --- marcadores: a esfera do hero no lugar do tracinho e da borda de cor --- */
.formato::before,.porque-item::before,.porta::before,.valor::before{
  content:""; display:block; width:22px; height:22px; border-radius:50%; margin:0 0 14px;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.75), rgba(255,255,255,0) 40%),
             radial-gradient(circle at 70% 80%, rgba(42,42,46,.22), rgba(42,42,46,0) 50%), var(--cor,var(--tinta));
  box-shadow:0 8px 14px -7px color-mix(in srgb, var(--cor,var(--tinta)) 70%, #2A2A2E)}
.porque-item{border-top:0; padding-top:0}
.porta::before{background-color:var(--cor-porta,var(--tinta)); --cor:var(--cor-porta,var(--tinta))}
.valor{border-top:0; padding-top:0; --cor:var(--verde)}
.valor:nth-child(2){--cor:var(--azul)} .valor:nth-child(3){--cor:var(--ambar)} .valor:nth-child(4){--cor:var(--coral)} .valor:nth-child(5){--cor:var(--teal)}
/* a linha do tempo: os pontos viram esferas com a cor do tipo */
.marco-ponto{width:18px; height:18px; border:0; background:
  radial-gradient(circle at 32% 28%, rgba(255,255,255,.75), rgba(255,255,255,0) 40%),
  radial-gradient(circle at 70% 80%, rgba(42,42,46,.22), rgba(42,42,46,0) 50%), var(--cor,var(--tinta-3));
  box-shadow:0 8px 14px -7px color-mix(in srgb, var(--cor,var(--tinta-3)) 70%, #2A2A2E)}
.marco[data-tipo="marco"] .marco-ponto{--cor:var(--ambar); background-color:var(--ambar); border:0}
.marco[data-tipo="parceria"] .marco-ponto{--cor:var(--teal); border:0}
.marco[data-tipo="encontro"] .marco-ponto{--cor:var(--azul)}
.marco-destaque .marco-ponto{width:26px; height:26px; top:2px}
@media (min-width:860px){ .marco-destaque .marco-ponto{left:50%} }

/* --- "Isso aqui é conversa": prosa à esquerda, foto ao lado pendendo sobre a costura --- */
.sobre-lado{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.78fr); gap:clamp(32px,6vw,96px); align-items:start}
.foto-lado{position:relative; margin:clamp(24px,5vw,72px) 0 -40px; max-width:none}
.foto-lado-img{position:relative; display:block; overflow:hidden; rotate:2.5deg;
  box-shadow:0 34px 60px -30px color-mix(in srgb, var(--ambar) 55%, #2A2A2E)}
.foto-lado-img img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover}
.foto-lado figcaption{margin-top:22px; font-size:14px; color:var(--tinta-3); max-width:36ch}
.foto-lado .e1{--cor:var(--ambar); width:34px; left:-6%; top:12%}
.foto-lado .e2{--cor:var(--coral); width:20px; left:98%; top:88%}
@media (max-width:860px){ .sobre-lado{grid-template-columns:1fr; gap:28px} .foto-lado{margin:0} }

/* --- o balão solto (a fala do Felipe em "Dá para participar") --- */
.balao-solto{margin:0 0 22px}
.participa-acao{margin:0}
.participa-lado .balao{margin-left:0}

/* --- a rede, fora da home: o topo com intro --- */
.rede-topo > div{max-width:60ch}
.rede-topo .rede-intro{margin:10px 0 0}

/* --- séries na página de encontros: a mesma órbita assimétrica da home --- */
.serie-grade{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); align-items:start}
.serie-grade li:nth-child(2){margin-top:clamp(20px,4vw,56px); rotate:1.5deg}
.serie-cartao{background:var(--papel)}
.serie-capa img{border-radius:18px 14px 20px 16px / 14px 20px 16px 18px}
@media (max-width:860px){ .serie-grade{grid-template-columns:1fr} .serie-grade li:nth-child(2){margin-top:0; rotate:0deg} }

/* --- páginas em construção: o Célio esperando dentro do palco --- */
.construcao-palco{position:relative; display:grid; place-items:center}
.construcao-palco .p1{left:50%; top:50%; width:66%}
.construcao-palco .p2{left:50%; top:50%; width:98%; border-style:solid; border-color:color-mix(in srgb, var(--linha) 50%, transparent)}
.construcao-palco .e1{--cor:var(--c1); width:8%; left:94%; top:16%}
.construcao-palco .e2{--cor:var(--c2); width:5%; left:8%; top:40%}
.construcao-palco .e3{--cor:var(--c3); width:6%; left:78%; top:96%}
.construcao-palco .celio-espera{position:relative; z-index:2}
.construcao .celio-espera{--h:clamp(200px,24vw,280px)}
@media (max-width:760px){ .construcao-palco{width:min(100%,320px)} .construcao .celio-espera{--h:clamp(170px,40vw,220px)} }

/* --- o palco do topo flutua como o hero, e para com o interruptor --- */
@media (prefers-reduced-motion:no-preference){
  .abertura-palco .orbe-p,.construcao-palco .orbe-p,.foto-lado .orbe-p{animation:flutua 9s ease-in-out infinite}
  .abertura-palco .e2,.construcao-palco .e2{animation-duration:10.6s; animation-delay:-2.8s}
  .abertura-palco .e3,.construcao-palco .e3{animation-duration:8.4s; animation-delay:-5.6s}
}
:root[data-movimento="pausado"] .abertura-palco .orbe-p,:root[data-movimento="pausado"] .construcao-palco .orbe-p,
:root[data-movimento="pausado"] .foto-lado .orbe-p{animation:none !important}


/* --- prosa ancorada à esquerda: o bloco de texto não flutua no meio da página --- */
.wrap.prosa,.wrap.prosa-larga{max-width:none}
.wrap.prosa > *{max-width:var(--prose)}
.wrap.prosa-larga > *{max-width:68ch}
.wrap.prosa-larga > .refs-celio{max-width:none}

/* --- "O que o Célio faz": os cinco valores no arco das cinco portas do hero --- */
.valores-palco{position:relative; width:min(100%,1040px); aspect-ratio:1.5; margin:clamp(20px,3vw,40px) auto 0}
.valores-palco .p1{left:50%; top:56%; width:36%}
.valores-palco .p2{left:50%; top:56%; width:56%; border-style:solid; border-color:color-mix(in srgb, var(--linha) 50%, transparent)}
.valores-palco .e1{--cor:var(--ambar); width:3.4%; left:8%; top:20%}
.valores-palco .e2{--cor:var(--verde); width:2.4%; left:93%; top:78%}
.valores-palco .e3{--cor:var(--azul);  width:2.8%; left:62%; top:96%}
.valores-celio{position:absolute; left:50%; top:60%; translate:-50% -50%; z-index:2;
  filter:drop-shadow(0 26px 30px var(--sombra-celio))}
.valores-palco .valores{position:absolute; inset:0; display:block; margin:0; padding:0; grid-template-columns:none}
.bolha-valor{position:absolute; width:17%; aspect-ratio:1.06; max-width:none; margin:0; padding:12px 12px 14px; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; text-align:center;
  transform:translate(-50%,-50%); color:var(--sobre-blob);
  background:radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.55), rgba(255,255,255,0) 52%), var(--cor);
  box-shadow:0 20px 38px -18px color-mix(in srgb, var(--cor) 70%, #2A2A2E), inset 0 -10px 22px -14px rgba(42,42,46,.35)}
.bolha-valor::before{display:none}
.bolha-valor h3{font-size:clamp(14px,1.25vw,17px); letter-spacing:-.02em; line-height:1.05; margin:0; color:var(--sobre-blob)}
.bolha-valor p{font-size:12px; font-weight:600; line-height:1.3; margin:0; color:var(--sobre-blob); max-width:15ch; text-wrap:balance}
/* as posições e as formas são as das portas .b1–.b5 do hero (estilo.css) */
.v1{--cor:var(--verde); left:22.5%; top:56%; border-radius:52% 48% 46% 54% / 58% 44% 56% 42%}
.v2{--cor:var(--azul);  left:26%;   top:22%; border-radius:48% 52% 44% 56% / 50% 46% 54% 50%}
.v3{--cor:var(--ambar); left:50%;   top:6%;  border-radius:54% 46% 52% 48% / 46% 56% 44% 54%}
.v4{--cor:var(--coral); left:74%;   top:22%; border-radius:50% 50% 46% 54% / 56% 56% 44% 44%}
.v5{--cor:var(--teal);  left:77.5%; top:56%; border-radius:46% 54% 50% 50% / 52% 48% 52% 48%}
@media (prefers-reduced-motion:no-preference){
  .bolha-valor{animation:flutua 8s ease-in-out infinite}
  .v2{animation-duration:9.4s; animation-delay:-2.2s} .v3{animation-duration:8.6s; animation-delay:-4.1s}
  .v4{animation-duration:10s; animation-delay:-1.4s}  .v5{animation-duration:9s; animation-delay:-5.3s}
  .valores-palco .orbe-p{animation:flutua 9s ease-in-out infinite}
}
:root[data-movimento="pausado"] .bolha-valor,:root[data-movimento="pausado"] .valores-palco .orbe-p{animation:none !important}
/* (o bloco que virava grade no estreito saiu em 22/09: no celular a órbita continua
   órbita, como no hero — ver .orbita-valores mais abaixo) */

/* o título da prosa não estica até a borda do wrap */
.wrap.prosa > h2,.wrap.prosa-larga > h2{max-width:22ch}


/* --- o que a revisão independente ainda achou de caixa, pílula e disco --- */
.marco-selo{border:0; padding:0; border-radius:0; letter-spacing:.1em}
.selo-breve{background:none; color:var(--tinta-2); padding:0; border-radius:0; display:inline-flex; align-items:center; gap:8px}
.selo-breve::before{content:""; width:10px; height:10px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.75), rgba(255,255,255,0) 40%), var(--ambar);
  box-shadow:0 4px 8px -4px color-mix(in srgb, var(--ambar) 70%, #2A2A2E)}
.jeitos li::before,.vai-ter li::before,.lista-404 li::before,.canais li::before{
  background-image:radial-gradient(circle at 32% 28%, rgba(255,255,255,.75), rgba(255,255,255,0) 40%);
  box-shadow:0 4px 8px -4px rgba(42,42,46,.5); width:10px; height:10px}
.canais li{border:0; position:relative; padding:12px 0 12px 26px}
.canais li:last-child{border:0}
.canais li::before{content:""; position:absolute; left:0; top:19px; border-radius:50%; background-color:var(--verde)}
.canais li:nth-child(2)::before{background-color:var(--teal)} .canais li:nth-child(3)::before{background-color:var(--coral)}
.canais li:nth-child(4)::before{background-color:var(--ambar)} .canais li:nth-child(5)::before{background-color:var(--azul)}
.canais li:nth-child(6)::before{background-color:var(--verde)}
.escopo{background:none; padding:0; border-radius:0; max-width:52ch; box-shadow:none}
.bolha-valor{cursor:default}
.lista-docs{list-style:none; padding-left:0}
.lista-docs li{position:relative; padding-left:22px}
.lista-docs li::before{content:""; position:absolute; left:0; top:.6em; width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.75), rgba(255,255,255,0) 40%), var(--verde);
  box-shadow:0 4px 8px -4px color-mix(in srgb, var(--verde) 70%, #2A2A2E)}


/* --- o rodapé fica acima de qualquer massa que penda; a última seção não pende --- */
.rodape{position:relative; z-index:17}
main > .solta:last-child{--pende:0px}
/* o ícone do WhatsApp dentro do botão */
.botao .ico-whats{width:1.15em; height:1.15em}


/* --- Circuito: a ficha completa num modal; o botão de divulgar no topo; "como entrar" recolhido --- */
.circuito-topo{display:flex; justify-content:flex-end; align-items:center; gap:16px 24px; flex-wrap:wrap; margin:0 0 22px}
.divulgue-topo{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0; font-weight:600; color:var(--tinta-2); max-width:none}
.ev-abrir{font:inherit; font-weight:800; letter-spacing:-.02em; color:var(--tinta); background:none; border:0; padding:0; cursor:pointer; text-align:left;
  border-bottom:2px solid color-mix(in srgb, var(--verde) 40%, transparent); line-height:1.15}
.ev-abrir:hover{border-bottom-color:var(--verde)}
.ev-abrir:focus-visible{outline:3px solid var(--tinta); outline-offset:3px; border-radius:6px}
.ev-site{font-size:14px; font-weight:600; color:var(--tinta-2)}
.ev-dialogo{border:0; padding:0; background:transparent; width:min(92vw,660px); max-width:none; margin:auto}
.ev-dialogo::backdrop{background:rgba(28,27,31,.58); backdrop-filter:blur(4px)}
.ev-dialogo-corpo{position:relative; background:var(--papel); color:var(--tinta); padding:clamp(24px,4vw,40px);
  border-radius:30px 24px 32px 26px / 24px 32px 26px 30px; box-shadow:0 40px 80px -30px rgba(0,0,0,.55); max-height:88vh; overflow:auto}
.ev-dialogo .fechar{position:absolute; right:16px; top:16px; font:700 14px var(--f-sans); color:var(--tinta);
  background:var(--papel-2); border:1px solid var(--linha-controle); border-radius:999px; padding:0 14px; min-height:40px; cursor:pointer}
.ev-dialogo .fechar:hover{border-color:var(--tinta)}
.ev-dialogo .fechar:focus-visible{outline:3px solid var(--tinta); outline-offset:3px}
.ev-d-quando{margin:0 90px 4px 0; font-weight:700; color:var(--tinta-2); font-size:15px}
.ev-dialogo h3{font-size:clamp(24px,3vw,34px); letter-spacing:-.03em; line-height:1.05; margin:0 90px 10px 0}
.ev-dialogo h3:focus-visible{outline:3px solid var(--tinta); outline-offset:4px; border-radius:6px}
.ev-d-onde{margin:0 0 14px; color:var(--tinta-2); font-size:15.5px}
.ev-d-nota{margin:0 0 12px; max-width:none}
.ev-dialogo .ev-tags{margin:0 0 6px}
.ev-d-bloco{margin:18px 0 0; padding:16px 20px; border-radius:22px 18px 24px 20px / 18px 24px 20px 22px;
  background:color-mix(in srgb, var(--verde) 10%, transparent)}
.ev-d-bloco h4{margin:0 0 6px; font-size:15px; letter-spacing:-.01em}
.ev-d-bloco p{margin:0 0 6px; font-size:15.5px; max-width:none} .ev-d-bloco p:last-child{margin-bottom:0}
.ev-d-porta{background:color-mix(in srgb, var(--cor-porta,var(--tinta)) 10%, transparent)}
.ev-d-porta.porta-verde{--cor-porta:var(--verde)} .ev-d-porta.porta-ambar{--cor-porta:var(--ambar)} .ev-d-porta.porta-azul{--cor-porta:var(--azul)}
.ev-d-acoes{display:flex; gap:10px; flex-wrap:wrap; margin:22px 0 0; max-width:none}
body:has(dialog[open]){overflow:hidden}
.como-entrar{margin:44px 0 0; max-width:72ch}
.como-entrar summary{font-weight:800; font-size:clamp(19px,2vw,23px); letter-spacing:-.02em; cursor:pointer; padding:8px 0; list-style-position:inside}
.como-entrar summary:focus-visible{outline:3px solid var(--tinta); outline-offset:3px; border-radius:6px}
.como-entrar .portas{grid-template-columns:1fr; gap:18px; margin:12px 0 0}
.como-entrar .sem-janela,.como-entrar .ressalvas{margin-top:18px}
.acoes-circuito{grid-template-columns:minmax(0,1fr)}
/* logotipos na constelação: a esfera vira disco de papel com o logotipo dentro */
.constelacao .orbe-logo{background:var(--papel); display:grid; place-items:center; overflow:hidden;
  box-shadow:0 10px 20px -10px rgba(42,42,46,.45)}
.constelacao .orbe-logo img{width:64%; height:64%; object-fit:contain}
@media (max-width:760px){
  .circuito-topo{justify-content:flex-start}
  .ev-d-quando,.ev-dialogo h3{margin-right:0} .ev-dialogo .fechar{position:static; margin:0 0 12px}
}


/* no topo estreito o botão do grupo fica só com o texto: com o ícone ele estourava 320px */
@media (max-width:400px){ .topo .botao .ico-whats{display:none} }

/* --- Encontros: as duas séries como portas no alto da lista de gravações --- */
.series-portas{list-style:none; margin:0 0 28px; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 24px; max-width:960px}
.series-portas li{max-width:none}
.series-portas a{position:relative; display:grid; gap:4px; text-decoration:none; color:var(--tinta);
  padding:18px 20px 18px 44px; background:var(--papel);
  border-radius:24px 20px 26px 22px / 20px 26px 22px 24px;
  box-shadow:0 22px 40px -26px color-mix(in srgb, var(--azul) 55%, #2A2A2E);
  transition:box-shadow .2s var(--saida)}
.series-portas a:hover{box-shadow:0 26px 48px -26px color-mix(in srgb, var(--azul) 75%, #2A2A2E)}
.series-portas a:focus-visible{outline:3px solid var(--tinta); outline-offset:3px}
.series-portas a::before{content:""; position:absolute; left:18px; top:24px; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.75), rgba(255,255,255,0) 40%), var(--cor,var(--azul));
  box-shadow:0 6px 10px -5px color-mix(in srgb, var(--cor,var(--azul)) 70%, #2A2A2E)}
.series-portas .c1{--cor:var(--azul)} .series-portas .c2{--cor:var(--teal)}
.series-portas .c2 a{box-shadow:0 22px 40px -26px color-mix(in srgb, var(--teal) 55%, #2A2A2E)}
.series-portas b{font-size:18px; letter-spacing:-.02em; line-height:1.15}
.series-portas span{color:var(--tinta-2); font-size:15px; line-height:1.45}
.series-portas small{font:600 13px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace; color:var(--tinta-3); margin-top:4px}
@media (max-width:640px){ .series-portas{grid-template-columns:1fr} }


/* ============ CIRCUITO COMO FERRAMENTA (22/09/2026, noite) ============
   A cor diz o circuito, sempre com o nome ao lado: a mesma cor está no chip, na esfera
   de data da lista e na marca do calendário. Nenhuma régua de coluna, nenhuma caixa
   com borda: superfícies da casa, esferas e linhas tracejadas. */
.circ-comunidade{--cc:var(--coral)} .circ-mercado{--cc:var(--azul)} .circ-corporativo{--cc:var(--ambar)}
.circ-academico{--cc:var(--teal)} .circ-fora{--cc:var(--verde)} .circ-chamada{--cc:var(--tinta-3)}

/* --- o topo: as ações da página --- */
.abre-circuito .abre-acoes{gap:10px 12px}

/* --- o painel de ferramentas --- */
.controles.painel{display:grid; gap:18px 24px; grid-template-columns:1fr; align-items:start; padding:clamp(18px,2.4vw,28px) clamp(18px,2.6vw,32px);
  background:var(--papel); border:0; border-radius:28px 22px 30px 24px / 22px 30px 24px 28px;
  box-shadow:0 26px 50px -30px color-mix(in srgb, var(--verde) 55%, #2A2A2E); margin:0 0 14px}
.painel-linha{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px 28px; align-items:end}
.controles.painel .busca label{font-size:14px; font-weight:700; margin-bottom:6px}
.controles.painel .busca input{max-width:46ch; border-color:var(--linha-controle)}
.controles.painel legend{font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-3); padding:0; margin-bottom:8px}
/* ver como: um controle segmentado de dois estados; os rádios continuam rádios */
.segmentado .seg-trilho{display:inline-flex; padding:4px; background:var(--papel-2); border-radius:999px; gap:2px}
.segmentado .seg{position:relative; display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:999px; font-weight:700; font-size:15px; color:var(--tinta-2); cursor:pointer}
.segmentado .seg input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer}
.segmentado .seg:has(input:checked){background:var(--tinta); color:var(--papel)}
.segmentado .seg:has(input:focus-visible){outline:3px solid var(--tinta); outline-offset:3px}
.segmentado .seg span{position:relative; pointer-events:none}
/* os circuitos: um chip com a esfera da cor; pressionado, a superfície escurece */
.controles.painel .chips{gap:8px 10px}
.controles.painel .chip{display:inline-flex; align-items:center; gap:9px; font:600 14.5px/1 var(--f-sans); color:var(--tinta-2);
  background:transparent; border:1px solid var(--linha-controle); border-radius:999px; padding:0 14px 0 10px; min-height:40px}
.controles.painel .chip[aria-pressed="true"]{background:var(--tinta); border-color:var(--tinta); color:var(--papel)}
.chip-esfera{width:12px; height:12px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.75), rgba(255,255,255,0) 40%), var(--cc,var(--tinta-3));
  box-shadow:0 4px 8px -4px color-mix(in srgb, var(--cc,var(--tinta-3)) 70%, #2A2A2E)}
.circuito .contagem{margin:0 0 30px; padding-left:6px}

/* --- a linha do tempo: mês com esfera, eventos com a data em esfera, eixo tracejado --- */
.faixa-mes{grid-template-columns:9rem minmax(0,1fr); border-top:0; padding-top:0; margin-bottom:clamp(28px,4vw,44px); position:relative}
.faixa-mes-rotulo{top:96px; padding-top:22px}
.faixa-mes-rotulo b{font-size:clamp(24px,2.4vw,30px); letter-spacing:-.035em}
.mes-eventos{position:relative; padding-left:8px}
/* o eixo tracejado passa pelo centro das esferas de data */
.mes-eventos::before{content:""; position:absolute; left:calc(8px + 42px); top:28px; bottom:28px; border-left:1.5px dashed var(--linha)}
.ev{grid-template-columns:84px minmax(0,1fr); gap:6px 26px; padding:22px 0; border-bottom:0; align-items:start; position:relative}
.ev-quando{display:grid; justify-items:center; gap:8px; padding-top:0; position:relative; z-index:1}
.ev-quando b.ev-dia{display:grid; place-content:center; width:84px; height:84px; border-radius:50%; text-align:center;
  font-size:22px; font-weight:800; letter-spacing:-.03em; line-height:.95; color:var(--sobre-blob);
  background:radial-gradient(circle at 30% 24%, rgba(255,255,255,.55), rgba(255,255,255,0) 42%),
             radial-gradient(circle at 72% 84%, rgba(42,42,46,.18), rgba(42,42,46,0) 50%), var(--cc,var(--tinta-3));
  box-shadow:0 16px 28px -14px color-mix(in srgb, var(--cc,var(--tinta-3)) 70%, #2A2A2E)}
.ev[data-estado="sem-data"] .ev-quando b.ev-dia{font-size:13px; letter-spacing:0; line-height:1.1}
.ev-quando span{font-size:13px; color:var(--tinta-3); text-align:center}
.ev-cabeca{gap:8px 12px}
.ev-nome{font-size:clamp(20px,1.9vw,24px)}
.ev-abrir{border-bottom-color:color-mix(in srgb, var(--cc,var(--verde)) 45%, transparent)}
.ev-abrir:hover{border-bottom-color:var(--cc,var(--verde))}
.uf{color:var(--tinta-2); background:var(--papel-2)}
.uf-longe{background:var(--papel-2)}
/* estado: texto com esfera, sem borda */
.estado{border:0; padding:0; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; letter-spacing:.02em}
.estado::before{content:""; width:9px; height:9px; border-radius:50%; background:currentColor; opacity:.9}
.estado-a-confirmar::before{background:none; border:2px dashed currentColor; width:7px; height:7px}
.estado-sem-data::before{background:none; border:1.5px solid currentColor; width:7px; height:7px}
.ev-tags .tag{border:0; background:var(--papel-2); color:var(--tinta-2); border-radius:999px; padding:4px 11px}
.ev-tags .tag-price{color:var(--tinta)} .ev-tags .tag-door-open{color:var(--tag-aberta); background:color-mix(in srgb, var(--verde) 14%, transparent)}
.ev-tags .tag-door-soon,.ev-tags .tag-flag{color:var(--tag-aviso); background:color-mix(in srgb, var(--ambar) 16%, transparent)}
.ev-site{margin-left:0}

/* --- o calendário: sem grade de bordas; a marca é uma pílula com a esfera do circuito --- */
.cal th{color:var(--tinta-3); padding:0 8px 10px; letter-spacing:.08em}
.cal td{border-top:1.5px dashed var(--linha); border-right:0; height:92px; padding:8px 6px 10px}
.cal td.fds{background:color-mix(in srgb, var(--tinta) 3%, transparent); border-radius:0}
.cal td.fora{border-top-color:transparent}
.ocorre{display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; line-height:1.2; color:var(--tinta);
  padding:5px 9px 5px 8px; margin:0 -6px 4px; min-height:28px; border:0; border-left:0; background:var(--papel);
  box-shadow:0 8px 16px -10px color-mix(in srgb, var(--cc,var(--verde)) 70%, #2A2A2E); text-align:left; cursor:pointer; width:calc(100% + 12px); font-family:inherit}
.ocorre::before{content:""; width:10px; height:10px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.75), rgba(255,255,255,0) 40%), var(--cc,var(--verde))}
.ocorre:not(.ocorre-inicio){background:color-mix(in srgb, var(--cc,var(--verde)) 22%, transparent); box-shadow:none; opacity:1; min-height:12px; padding:0; margin:8px -6px 12px}
.ocorre:not(.ocorre-inicio)::before{display:none}
.ocorre-inicio{border-radius:999px 0 0 999px} .ocorre-fim{border-radius:0 999px 999px 0} .ocorre-inicio.ocorre-fim{border-radius:999px}
.ocorre:not(.ocorre-inicio).ocorre-fim{border-radius:0 999px 999px 0}
.ocorre-a-confirmar::before{background:none; border:2px dashed var(--cc,var(--ambar)); box-sizing:border-box}
.ocorre-chamada{background:color-mix(in srgb, var(--azul) 14%, transparent); box-shadow:none; font-weight:600; font-style:italic}
.ocorre-chamada::before{background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.75), rgba(255,255,255,0) 40%), var(--azul)}
a.ocorre:hover,button.ocorre:hover{background:var(--papel-2)}
a.ocorre:focus-visible,button.ocorre:focus-visible{outline:3px solid var(--tinta); outline-offset:2px}
.cal-legenda{gap:8px 12px; margin:0 0 18px; align-items:center}
.cal-legenda .ocorre{width:auto; margin:0; min-height:28px; padding:5px 10px 5px 8px; cursor:default; border-radius:999px; background:var(--papel)}
.cal-sem{border-top:1.5px dashed var(--linha)}
.cal-sem li a,.cal-sem li button{font:inherit; font-weight:700; color:var(--tinta); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.cal-sem li button:focus-visible{outline:3px solid var(--tinta); outline-offset:3px; border-radius:6px}
.cal-atual select{border-bottom-style:dashed}

/* --- o modal: uma camada escura sobre o site, nos dois temas --- */
.ev-dialogo{--papel:#2A2A2E; --papel-2:#3A393E; --tinta:#F4F1EC; --tinta-2:#C4C0BA; --tinta-3:#A29F98;
  --linha:rgba(244,241,236,.18); --linha-controle:rgba(244,241,236,.4); --tag-aberta:#11BA77; --tag-aviso:#EC8B00;
  --acao:#FEA41B; --acao-texto:#2A2A2E; --acao-hover:#FFB74A; color-scheme:dark}
.ev-dialogo-corpo{background:var(--papel); color:var(--tinta); box-shadow:0 50px 100px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(244,241,236,.06)}
.ev-dialogo .fechar{background:var(--papel-2); color:var(--tinta); border-color:var(--linha-controle)}
.ev-dialogo .fechar:hover{border-color:var(--tinta)}
.ev-dialogo .botao-contorno{color:var(--tinta); border-color:var(--linha-controle)}
.ev-dialogo .botao-contorno:hover{border-color:var(--tinta)}
.ev-dialogo :focus-visible{outline-color:var(--ambar)}
.ev-dialogo .ev-tags .tag{background:var(--papel-2); color:var(--tinta-2)}
.ev-d-bloco{background:color-mix(in srgb, var(--verde) 14%, transparent)}
.ev-d-porta{background:color-mix(in srgb, var(--cor-porta,var(--tinta)) 16%, transparent)}
.ev-dialogo::backdrop{background:rgba(28,27,31,.62); backdrop-filter:blur(5px)}

/* --- "Como entrar na grade": as três portas como bolhas do hero --- */
.portas-faixa .portas{grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,56px); margin:34px 0 0; align-items:start}
.portas-faixa .porta::before{display:none}
.porta-bolha{display:flex; align-items:center; justify-content:center; text-align:center; width:min(100%,168px); aspect-ratio:1.06; margin:0 0 18px;
  font-size:clamp(20px,1.9vw,24px); letter-spacing:-.025em; line-height:1.05; color:var(--sobre-blob); padding:14px;
  background:radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.55), rgba(255,255,255,0) 52%), var(--cor-porta,var(--tinta));
  box-shadow:0 20px 38px -18px color-mix(in srgb, var(--cor-porta,var(--tinta)) 70%, #2A2A2E), inset 0 -10px 22px -14px rgba(42,42,46,.35)}
.porta-verde .porta-bolha{border-radius:52% 48% 46% 54% / 58% 44% 56% 42%}
.porta-ambar .porta-bolha{border-radius:54% 46% 52% 48% / 46% 56% 44% 54%}
.porta-azul .porta-bolha{border-radius:48% 52% 44% 56% / 50% 46% 54% 50%}
.portas-faixa .porta p{font-size:16.5px}
.portas-faixa .sem-janela{margin-top:36px}
@media (prefers-reduced-motion:no-preference){
  .porta-bolha{animation:flutua 8.6s ease-in-out infinite}
  .porta-ambar .porta-bolha{animation-delay:-2.7s} .porta-azul .porta-bolha{animation-delay:-5.1s}
}
:root[data-movimento="pausado"] .porta-bolha{animation:none !important}
@media (max-width:900px){ .portas-faixa .portas{grid-template-columns:1fr} .porta-bolha{width:min(100%,140px)} }
@media (max-width:760px){
  .painel-linha{grid-template-columns:1fr}
  .faixa-mes{grid-template-columns:1fr; margin-bottom:28px}
  .faixa-mes-rotulo{padding-top:0}
  .mes-eventos::before{left:calc(8px + 30px); top:20px; bottom:20px}
  .ev{grid-template-columns:60px minmax(0,1fr); gap:4px 16px; padding:16px 0}
  .ev-quando b.ev-dia{width:60px; height:60px; font-size:17px}
  .ev[data-estado="sem-data"] .ev-quando b.ev-dia{font-size:12px}
  .ocorre{font-size:12px; padding:3px 6px 3px 6px; min-height:24px; gap:5px}
}

/* ============ CÉLIO: referências ao lado, valores em órbita com o 360 ============ */
.micelio-grade{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.7fr); gap:clamp(32px,6vw,96px); align-items:start}
.micelio-grade .refs-celio{margin:clamp(24px,5vw,80px) 0 0; grid-template-columns:1fr; gap:28px; position:sticky; top:96px}
.micelio-grade .refs-celio li:nth-child(1) img{rotate:-2.5deg} .micelio-grade .refs-celio li:nth-child(2) img{rotate:2deg} .micelio-grade .refs-celio li:nth-child(3) img{rotate:-1.5deg}
.micelio-grade .refs-celio img{box-shadow:0 30px 56px -28px color-mix(in srgb, var(--verde) 55%, #2A2A2E)}
@media (max-width:900px){ .micelio-grade{grid-template-columns:1fr} .micelio-grade .refs-celio{position:static; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} }
/* a órbita dos valores: cinco braços a 72°, o Célio girando no centro */
/* --h-valores é a altura do Célio (folha `olhar`, a largura vem da célula) */
.orbita-valores{--R:min(300px,29vw); --r:calc(var(--R) * .5); --bolha:clamp(140px,12vw,172px); --h-valores:min(290px,28vw); aspect-ratio:auto;
  height:calc(2 * var(--R) + var(--bolha) + 40px); width:min(100%,1040px); margin:clamp(20px,3vw,40px) auto 0}
.orbita-valores .orbita-anel{border-color:var(--linha)}
.orbita-valores .valores{position:absolute; inset:0; display:block; margin:0; padding:0}
.orbita-valores .giro{position:absolute; inset:0; max-width:none; rotate:var(--fase); pointer-events:none}
.orbita-valores .sat.bolha-valor{position:absolute; left:calc(50% + var(--R)); top:50%; translate:-50% -50%; transform:none;
  rotate:calc(-1 * var(--fase)); width:var(--bolha); pointer-events:auto}
.orbita-valores .g1{--fase:270deg} .orbita-valores .g2{--fase:342deg} .orbita-valores .g3{--fase:54deg} .orbita-valores .g4{--fase:126deg} .orbita-valores .g5{--fase:198deg}
.orbita-valores .valores-celio{position:absolute; left:50%; top:50%; translate:-50% -50%; transform:none; z-index:2;
  filter:drop-shadow(0 26px 30px var(--sombra-celio))}
@media (prefers-reduced-motion:no-preference){
  .orbita-valores .giro{animation:girar 110s linear infinite}
  .orbita-valores .giro .sat{animation:girar 110s linear infinite reverse}
  .orbita-valores .giro-mini{animation:girar 58s linear infinite}
  .orbita-valores .giro-mini .sat{animation:girar 58s linear infinite reverse}
  .bolha-valor{animation:none}
}
:root[data-movimento="pausado"] .orbita-valores .giro,:root[data-movimento="pausado"] .orbita-valores .giro .sat,
:root[data-movimento="pausado"] .orbita-valores .giro-mini,:root[data-movimento="pausado"] .orbita-valores .giro-mini .sat{animation:none !important}
/* no estreito a órbita continua órbita, como no hero (pedido do Felipe, 22/09): raio,
   bolhas e Célio encolhem juntos. As contas: a bolha nunca encosta no Célio
   (R ≥ bolha/2 + Célio/2 + 12px) e a órbita inteira cabe na janela (2R + bolha < 100vw)
   de 320px para cima. O bloco genérico da `.orbita` (≤959px) esconde anéis e esferas
   e desliga o giro para a lista de parceiras; aqui isso é reafirmado ao contrário. */
@media (max-width:900px){
  .orbita-valores{--R:min(200px,31vw); --bolha:clamp(88px,26vw,150px); --h-valores:min(200px,26vw); width:100%;
    height:calc(2 * var(--R) + var(--bolha) + 40px); margin-top:8px}
  .orbita-valores .orbita-anel,.orbita-valores .giro-mini{display:block}
  .orbita-valores .giro{position:absolute; inset:0; rotate:var(--fase); pointer-events:none}
  .bolha-valor h3{font-size:clamp(13px,3.6vw,16px)}
  .bolha-valor p{font-size:12px; line-height:1.25}
}
@media (max-width:640px){
  /* a bolha deixa de ser quadrada para o texto mais longo não estourar em 320px */
  .orbita-valores .sat.bolha-valor{padding:10px 8px 12px; gap:3px; aspect-ratio:auto; min-height:var(--bolha)}
}


/* ============ AJUSTES DA NOITE: cabeçalho com pausa, faixa contínua, eixo contínuo, linha clicável ============ */
/* --- o interruptor no cabeçalho, ao lado do botão do grupo --- */
.topo-nav{display:flex; align-items:center; gap:6px}
.pausa-topo{position:static; right:auto; bottom:auto; translate:none; z-index:auto;
  min-height:40px; padding:0 12px; font-size:14px; margin-left:4px; backdrop-filter:none; background:transparent}
.pausa-topo:hover{background:var(--papel-2)}
@media (max-width:860px){
  :root[data-js] .topo-nav{display:none}
  :root[data-js] .topo[data-menu="aberto"] .topo-nav{display:block}
  :root[data-js] .pausa-topo{margin:10px 24px 2px; min-height:44px; font-size:15px}
}
@media (max-width:520px){ :root[data-js] .pausa-topo{margin-inline:24px} }
/* os botões de pausa do meio das páginas saíram do HTML; a regra fica para o hero */

/* --- calendário: a faixa de um evento tem a mesma cor e a mesma altura em todos os dias --- */
.ocorre,.ocorre:not(.ocorre-inicio){min-height:28px; margin:0 -6px 4px; box-shadow:none; opacity:1;
  background:color-mix(in srgb, var(--cc,var(--verde)) 26%, var(--papel))}
.ocorre:not(.ocorre-inicio){padding:5px 9px 5px 8px}
.ocorre-chamada,.ocorre-chamada:not(.ocorre-inicio){background:color-mix(in srgb, var(--azul) 18%, var(--papel))}
a.ocorre:hover,button.ocorre:hover{background:color-mix(in srgb, var(--cc,var(--verde)) 42%, var(--papel))}
.cal-legenda .ocorre{margin:0; width:auto}
@media (max-width:760px){ .ocorre,.ocorre:not(.ocorre-inicio){min-height:24px; margin:0 -3px 2px} .ocorre:not(.ocorre-inicio){padding:3px 6px} }

/* --- linha do tempo: o eixo tracejado atravessa o vão entre os meses --- */
.mes-eventos::before{top:-64px; bottom:-64px}
.visao-lista .faixa-mes:first-of-type .mes-eventos::before{top:28px}
.visao-lista .faixa-mes:last-of-type .mes-eventos::before{bottom:28px}
@media (max-width:760px){ .mes-eventos::before{top:-44px; bottom:-44px} }

/* --- a linha inteira do evento abre a ficha; o botão do nome se estende à linha --- */
.ev{border-radius:26px 22px 30px 24px / 22px 30px 24px 26px; padding:22px 18px 22px 12px; margin:0 -18px 0 -12px; cursor:pointer;
  transition:background-color .2s ease, box-shadow .2s var(--saida)}
.ev-abrir::after{content:""; position:absolute; inset:0; z-index:1; border-radius:inherit}
.ev .ev-site,.ev .ev-tags{position:relative; z-index:2}
.ev:hover{background:var(--papel); box-shadow:0 26px 48px -28px color-mix(in srgb, var(--cc,var(--verde)) 60%, #2A2A2E)}
.ev:hover .ev-abrir{border-bottom-color:var(--cc,var(--verde))}
.ev:has(.ev-abrir:focus-visible){outline:3px solid var(--tinta); outline-offset:2px; background:var(--papel)}
.ev .ev-abrir:focus-visible{outline:none}
@media (max-width:760px){ .ev{padding:16px 12px; margin:0 -12px} }

/* entre o menu colapsado e a largura folgada, o cabeçalho não tem lugar para o rótulo:
   o botão fica só com o sinal, e o texto continua no DOM como nome acessível */
@media (min-width:861px) and (max-width:1100px){
  .pausa-topo{padding:0; width:40px; justify-content:center}
  .pausa-topo .rotulo{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
}


/* --- calendário: faixa de altura fixa, nome com reticências, pista vazia com espaço igual --- */
.ocorre,.ocorre:not(.ocorre-inicio){height:28px; min-height:28px; overflow:hidden}
.ocorre-nome{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; display:block}
.ocorre-vaga{display:block; height:28px; margin:0 0 4px}
.ocorre-chamada{font-style:normal}
.ocorre-chamada .ocorre-nome{font-weight:600}
@media (max-width:760px){ .ocorre,.ocorre:not(.ocorre-inicio),.ocorre-vaga{height:24px; min-height:24px} .ocorre-vaga{margin-bottom:2px} }
/* o Célio operário é mais largo que as outras poses */
.abertura-celio[src*="operario"]{width:min(66%,340px)}

/* ============================================================
   AUDITORIA GERAL (22/09, madrugada)
   ============================================================ */
/* Alvo de toque (SC 2.5.8): link no meio do texto ganha 3px de padding vertical.
   Em elemento inline isso não mexe na linha; só cresce a área clicável e o
   retângulo medido (18–22px viram 24–28px). O "Site do evento" da lista do Circuito
   precisa disso porque o botão esticado da linha o cerca por todos os lados, e a
   exceção de espaçamento da regra não vale ali. */
:where(.prosa, .prosa-larga, .agenda-nota, .avisar, .jeitos, .formatos-nota, .ir-junto, .lista-docs, .lista-404, .cal-semdia, .cal-sem, .rodape-forma, .canais, .vai-ter, .construcao-texto, .ev-dialogo p) a:where(:not([class])), .link-simples, .ev-site{padding-block:3px}

/* ============================================================
   ÁREA DE MEMBROS NO CABEÇALHO (22/09, noite)
   ============================================================
   Saiu do menu de páginas e virou uma entrada própria, colada no botão do grupo:
   contorno, ícone de crachá e o nome do lugar. Lê-se como "onde eu entro", não como
   mais uma página. Continua dentro da <nav>, então no celular colapsa junto com o
   menu e aparece como a última linha dele. */
/* três pesos no cabeçalho: o CTA do grupo é cheio e escuro, a área de membros é um
   preenchimento suave (um lugar), e a pausa é só contorno (um controle) */
/* `.topo-nav .conta`, e não `.conta`: a regra genérica `.topo-nav a` (padding, altura,
   peso, cor) é mais específica que uma classe sozinha e vencia estas */
.topo-nav .conta{display:inline-flex; align-items:center; gap:8px; height:auto; min-height:40px; padding:0 16px 0 12px; margin-left:6px;
  border:1.5px solid transparent; border-radius:999px; background:var(--papel-2); color:var(--tinta); text-decoration:none;
  font-size:14.5px; font-weight:700; white-space:nowrap; transition:background-color .2s ease, border-color .2s ease}
.topo-nav .conta .ico{width:1.2em; height:1.2em; flex:none}
.topo-nav .conta:hover{background:var(--papel-2); border-color:var(--tinta)}
.topo-nav .conta[aria-current="page"]{background:var(--papel-2); border-color:var(--linha-controle)}
/* entre o menu colapsado e a largura folgada não há lugar para o rótulo: fica o
   crachá, e o texto continua no DOM como nome acessível (o mesmo que a pausa faz) */
@media (min-width:861px) and (max-width:1100px){
  .topo-nav .conta{padding:0; width:40px; justify-content:center; margin-left:2px}
  .topo-nav .conta .ico{width:20px; height:20px}
  .topo-nav .conta .conta-rotulo{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
}
@media (max-width:860px){
  /* a regra genérica do menu (`.topo-nav a{width:100%; height:52px; border-radius:12px}`)
     é mais específica que `.conta`; aqui ela é desfeita para o link ter largura própria */
  :root[data-js] .topo-nav .conta{display:flex; justify-content:center; width:auto; height:auto; min-height:48px;
    margin:12px 24px 4px; padding:0 16px; border-radius:999px; font-size:16px}
  /* o painel do menu media 100vw, que num navegador com barra de rolagem clássica é
     mais largo que a janela: abria rolagem horizontal com o menu aberto. O `.wrap`
     tem 24px de cada lado abaixo de 1328px, então o painel se estica até as bordas
     por esses 24px, sem depender de vw. */
  :root[data-js] .topo-nav{left:-24px; right:-24px; width:auto; transform:none}
}

/* ============================================================
   CELULAR: topo do Circuito sem ilustração, botão do grupo centrado (22/09, noite)
   ============================================================ */
/* abaixo de 760px o topo do Circuito vira uma coluna e a constelação descia para
   baixo do texto como enchimento; o Felipe pediu para tirar */
/* no celular a ilustração volta (26/09): com o Célio palestrando no centro ela deixou de
   ser enchimento. Fica quadrada, centralizada embaixo do texto, com o Célio menor */
@media (max-width:760px){
  .abre-circuito .constelacao{aspect-ratio:1; min-height:0; width:min(100%,360px); margin:4px auto 0}
  .constelacao .celio-discurso{--h:min(230px,58vw) !important}
}
/* "Entrar no grupo do WhatsApp" centrado no celular, onde o texto acima dele já
   ocupa a largura toda e o botão à esquerda ficava pendurado */
@media (max-width:640px){
  .convite-texto > .botao,.construcao-texto > .botao{display:flex; width:fit-content; margin-inline:auto}
  .abre-comunidade .abre-acoes{justify-content:center}
}

/* ============================================================
   CIRCUITO: ASSINAR E IR JUNTO, LADO A LADO (22/09, noite)
   ============================================================ */
.circ-fim{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(16px,2.4vw,28px); margin:44px 0 0; scroll-margin-top:96px}
.circ-cartao{margin:0; padding:clamp(22px,3vw,32px) clamp(22px,3vw,34px);
  border-radius:30px 24px 32px 26px / 24px 32px 26px 30px;
  box-shadow:0 18px 40px -26px color-mix(in srgb, var(--cor-cartao,var(--verde)) 60%, #2A2A2E)}
.cartao-assinar{--cor-cartao:var(--verde); background:color-mix(in srgb, var(--verde) 9%, var(--papel))}
.cartao-caravana{--cor-cartao:var(--ambar); background:color-mix(in srgb, var(--ambar) 12%, var(--papel)); display:flex; flex-direction:column; align-items:flex-start}
.circ-cartao h3{font-size:clamp(20px,2.2vw,26px); letter-spacing:-.025em; line-height:1.1; margin:0 0 10px}
.circ-cartao p{margin:0; max-width:46ch}
.cartao-caravana p{font-size:clamp(17px,1.7vw,20px); font-weight:600; color:var(--tinta)}
.cartao-caravana .botao{margin-top:22px}
.assinar-opcoes{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px !important; max-width:none !important}
.assinar-opcoes .botao{min-height:44px; padding:0 18px; font-size:15px}
.assinar-nota{font-size:14px; color:var(--tinta-2); margin-top:16px !important}
.assinar-nota code{font-size:13px}
.assinar-nota a{padding-block:3px}
@media (max-width:760px){
  .circ-fim{grid-template-columns:minmax(0,1fr); gap:16px}
}
@media (max-width:640px){
  .cartao-caravana{align-items:center; text-align:center}
  .cartao-caravana .botao{display:flex; width:fit-content; margin-inline:auto}
}

/* ============================================================
   CIRCUITO: O QUE JÁ ACONTECEU (23/09)
   ============================================================
   Arquivo discreto: sem faixa de cor nem cartão, uma tabela em três colunas (quando,
   o quê, onde) que empilha no celular. A data em números tabulares, para alinhar. */
.circ-arquivo{padding-block:clamp(40px,5vw,72px) clamp(24px,3vw,40px)}
.circ-arquivo .secao-lead{max-width:60ch; color:var(--tinta-2)}
.arq-ano{margin-top:clamp(24px,3vw,36px)}
.arq-ano h3{font-size:clamp(20px,2vw,24px); letter-spacing:-.02em; margin:0 0 6px; color:var(--tinta-2)}
.arq-lista{list-style:none; margin:0; padding:0; max-width:860px}
.arq-lista li{display:grid; grid-template-columns:11em minmax(0,1.1fr) minmax(0,1fr); gap:4px 20px; align-items:baseline;
  padding:10px 0; border-bottom:1px solid var(--linha); font-size:15.5px; max-width:none; grid-template-columns:10.5em minmax(0,.8fr) minmax(0,1fr)}
.arq-lista li[hidden]{display:none}
.arq-quando{color:var(--tinta-2); font-variant-numeric:tabular-nums; white-space:nowrap}
.arq-nome a{font-weight:700; color:var(--tinta); padding-block:3px}
.arq-onde{color:var(--tinta-2)}
@media (max-width:640px){
  .arq-lista li{grid-template-columns:minmax(0,1fr); gap:2px}
  .arq-quando{font-size:14px}
}
.ev-d-verificado{font-size:13px; color:var(--tinta-2); margin:18px 0 0}

/* ---- Friends of Figma no Brasil: a mesma tabela discreta do arquivo ---- */
.fof-dir{padding-block:clamp(40px,5vw,72px) 0}
.fof-dir .secao-lead{max-width:62ch; color:var(--tinta-2)}
.fof-lista{list-style:none; margin:22px 0 0; padding:0; max-width:860px}
.fof-lista li{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1fr); gap:4px 20px; align-items:baseline;
  padding:10px 0; border-bottom:1px solid var(--linha); font-size:15.5px; max-width:none}
.fof-cidade a{font-weight:700; color:var(--tinta); padding-block:3px}
.fof-cidade .uf{margin-left:6px}
.fof-ritmo,.fof-quando{color:var(--tinta-2)}
.fof-nota{font-size:14px; color:var(--tinta-2); margin-top:14px}
.fof-nota a{padding-block:3px}
@media (max-width:640px){ .fof-lista li{grid-template-columns:minmax(0,1fr); gap:2px} }

/* ============================================================
   [hidden] SEMPRE ESCONDE (23/09)
   ============================================================
   Qualquer regra de display do autor vence o display:none do navegador para [hidden].
   `.cal-sem li{display:flex}` fazia 27 marcadores "a confirmar", que deviam esperar o
   fim da edição atual, aparecerem em "Ainda sem data". Uma regra só, no fim da folha. */
[hidden]{display:none !important}

/* ---- "Ainda sem data": lista alinhada, como o arquivo ---- */
.cal-sem ul{grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:0 32px; margin-top:6px}
.cal-sem li{display:flex; flex-wrap:nowrap; justify-content:space-between; gap:12px; align-items:baseline;
  padding:9px 0; border-bottom:1px solid var(--linha)}
.cal-sem li a,.cal-sem li button{text-align:left; line-height:1.3}
.cal-sem li span{flex:none}

/* ---- chamada de voluntários (23/09): mesma família das etiquetas de chamada aberta ---- */
.ev-tags .tag.tag-vol{background:color-mix(in srgb, var(--ambar) 22%, var(--papel)); color:var(--tinta); font-weight:700}
.ev-d-vol{background:color-mix(in srgb, var(--ambar) 14%, var(--papel))}
.ev-d-vol a{font-weight:700; padding-block:3px}

/* ---- quem organiza (25/09): acima do nome, menor, na cor secundária ---- */
.ev-org{display:block; font-size:14px; font-weight:600; letter-spacing:0; line-height:1.3; color:var(--tinta-2); margin-bottom:2px}
.ev-dialogo h3 .ev-org{font-size:15px; margin-bottom:4px}
/* com a organização em cima, os selos (UF, estado) se alinham à última linha do título, a do nome */
.ev-cabeca{align-items:last baseline}

/* ============================================================
   CIRCUITO: ETIQUETAS PADRONIZADAS, PIN E CATEGORIA NA FICHA (25/09)
   ============================================================ */
/* o local com pin: o ícone abre a linha e diz o que ela é */
.ev-onde .ico-pin,.ev-d-onde .ico-pin{width:1.05em; height:1.05em; vertical-align:-.16em; margin-right:4px; color:var(--tinta-2); flex:none}
/* "a confirmar", embaixo da data, só quando a data é incerta */
.ev-quando .ev-a-confirmar{font-size:12.5px; font-weight:700; color:var(--tag-aviso); background:color-mix(in srgb, var(--ambar) 16%, transparent);
  padding:2px 8px; border-radius:999px; white-space:nowrap}
/* três famílias, sempre nesta ordem: formato, ingresso, janela */
.ev-tags .tag.tag-formato{color:var(--tinta-2); background:none; border:1px solid var(--linha-controle)}
.ev-tags .tag.tag-preco{color:var(--tinta); background:var(--papel-2)}
.ev-tags .tag.tag-janela{color:var(--tag-aviso); background:color-mix(in srgb, var(--ambar) 16%, transparent); font-weight:600}
.ev-tags .tag.tag-janela.tag-aberta{color:var(--tag-aberta); background:color-mix(in srgb, var(--verde) 16%, transparent); font-weight:700}
/* ficha: a categoria em cima, como rótulo, com a cor da esfera */
.ev-d-cat{display:inline-flex; align-items:center; gap:8px; margin:0 0 10px; padding:4px 12px 4px 8px; border-radius:999px;
  background:var(--papel-2); font-size:13.5px; font-weight:700; color:var(--tinta)}
.ev-d-cat .chip-esfera{background:radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.55), rgba(255,255,255,0) 52%), var(--cc)}
/* formato, ingresso, observações */
.ev-d-info{margin:16px 0 0; display:grid; gap:10px}
.ev-d-info div{display:grid; grid-template-columns:8.5em minmax(0,1fr); gap:12px; align-items:baseline}
.ev-d-info dt{font-size:13.5px; font-weight:700; color:var(--tinta-2)}
.ev-d-info dd{margin:0; font-size:15.5px; color:var(--tinta)}
@media (max-width:520px){ .ev-d-info div{grid-template-columns:minmax(0,1fr); gap:2px} }
/* a faceta "Fora do Brasil" usa uma esfera neutra, contornada */
.chip-longe .chip-esfera{background:none; border:2px solid var(--tinta-2)}
/* a UF agora mora na linha do local, ao lado do pin: menor e alinhada ao texto */
.ev-onde .uf{font-size:12px; padding:2px 6px; margin-left:4px; vertical-align:1px}
/* preço ainda não público: mesma posição da etiqueta de ingresso, em tom neutro, contornada */
.ev-tags .tag.tag-preco.tag-preco-aberto{color:var(--tinta-2); background:none; border:1px dashed var(--linha-controle)}

/* ============================================================
   AMIGUX NA GRADE E "ADICIONAR À MINHA AGENDA" (25/09)
   ============================================================ */
/* a etiqueta mais quente da ficha: é a comunidade no palco */
.ev-tags .tag.tag-amigux{color:var(--tinta); background:color-mix(in srgb, var(--coral) 22%, var(--papel)); font-weight:800}
/* o Célio orador espia pela direita, olhando para o evento; decoração, fora do fluxo */
/* colado à coluna de texto, do lado direito, voltado para o evento */
.ev.tem-amigux .ev-corpo{position:relative; padding-right:clamp(104px,11vw,150px); max-width:790px}
.ev-celio{position:absolute; right:0; top:50%; translate:0 -50%; width:clamp(92px,10vw,136px); height:auto; z-index:2; pointer-events:none;
  filter:drop-shadow(0 14px 18px var(--sombra-celio))}
@media (max-width:640px){
  .ev.tem-amigux .ev-corpo{padding-right:0; padding-top:58px; max-width:none}
  .ev-celio{top:-4px; translate:none; width:76px; right:0}
}
@media (prefers-reduced-motion:no-preference){
  .ev-celio{transition:rotate .25s var(--saida)}
  .ev.tem-amigux:hover .ev-celio{rotate:-4deg}
}
.ev-d-amigux{display:flex; gap:16px; align-items:center; background:color-mix(in srgb, var(--coral) 14%, var(--papel))}
.ev-d-amigux .ev-celio{position:static; translate:none; width:96px; flex:none; filter:drop-shadow(0 10px 14px var(--sombra-celio))}
.ev-d-amigux h4{margin:0 0 4px}
.ev-d-amigux p{margin:0}
/* adicionar à agenda: os mesmos botões da assinatura, menores */
.ev-d-agenda{margin:22px 0 0; padding-top:16px; border-top:1px solid var(--linha)}
.ev-d-agenda h4{margin:0 0 4px; font-size:15px}
.ev-d-agenda .assinar-opcoes{margin-top:8px !important}
.ev-d-agenda-nota{font-size:13.5px; color:var(--tinta-2); margin:10px 0 0}
.ev-d-agenda-nota a{padding-block:3px}
.chip-amigux .chip-esfera{--cc:var(--coral)}

/* ============================================================
   CIRCUITO: FILTROS EM TRÊS GRUPOS (25/09)
   ============================================================ */
/* Tipo e Onde na primeira linha, Destaques inteiro na segunda: nenhum grupo quebra no meio */
.filtros-grupos{display:grid; grid-template-columns:max-content minmax(220px,280px); grid-template-areas:"tipo onde" "dest dest"; gap:18px 36px; align-items:start; justify-content:start}
.filtros-grupos > .grupo:nth-child(1){grid-area:tipo} .filtros-grupos > .grupo-onde{grid-area:onde} .filtros-grupos > .grupo:nth-child(3){grid-area:dest}
.controles.painel .grupo{border:0; margin:0; padding:0; min-width:0}
/* rótulos em texto normal, sem caixa-alta espaçada */
.controles.painel .grupo legend,.grupo-onde label{font-size:14px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--tinta); margin-bottom:10px; padding:0; display:block}
.grupo-onde select{width:100%; min-height:44px; padding:0 40px 0 14px; border-radius:999px; border:1.5px solid var(--linha-controle);
  background:var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23888'%3E%3Cpath d='M216.49 104.49l-80 80a12 12 0 0 1-17 0l-80-80a12 12 0 0 1 17-17L128 159l71.51-71.52a12 12 0 0 1 17 17Z'/%3E%3C/svg%3E") no-repeat right 14px center / 14px;
  color:var(--tinta); font:600 14.5px/1 var(--f-sans); appearance:none}
.grupo-onde select:focus-visible{outline:3px solid var(--tinta); outline-offset:2px}
.filtros-limpar{margin:-6px 0 0}
.filtros-limpar .link-botao{font-weight:700; padding-block:6px}
.chip-gratis .chip-esfera{--cc:var(--verde)}
@media (max-width:860px){ .filtros-grupos{grid-template-columns:minmax(0,1fr); grid-template-areas:"tipo" "onde" "dest"} .grupo-onde select{max-width:360px} }
/* "Ver como" com o mesmo rótulo dos grupos */
.controles.painel .ver legend{font-size:14px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--tinta)}

/* ============================================================
   FICHA DO EVENTO, NOVA ORDEM (25/09)
   ============================================================ */
.ev-dialogo-corpo{padding:0 clamp(22px,3.6vw,36px) clamp(22px,3.6vw,34px)}
/* 1. cabeçalho: preso no topo enquanto a ficha rola */
.ev-d-cabeca{position:sticky; top:0; z-index:3; background:var(--papel); padding:clamp(20px,3vw,28px) 56px 14px 0;
  margin-bottom:4px; border-bottom:1px solid transparent}
.ev-d-rotulos{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; max-width:none}
.ev-d-cat,.ev-d-rot{display:inline-flex; align-items:center; gap:8px; margin:0; padding:4px 12px 4px 8px; border-radius:999px;
  background:var(--papel-2); font-size:13.5px; font-weight:700; color:var(--tinta)}
.ev-d-rot{padding-left:12px; color:var(--tinta-2)}
.ev-dialogo .ev-d-cabeca h3{margin:0; font-size:clamp(24px,3vw,32px)}
.ev-dialogo .fechar{position:absolute; right:-8px; top:clamp(14px,2.4vw,20px); width:44px; height:44px; min-height:0; padding:0;
  display:grid; place-items:center; border-radius:50%}
.ev-dialogo .fechar .ico{width:18px; height:18px}
/* 2. fatos: um por linha, com ícone */
.ev-d-fatos{list-style:none; margin:10px 0 0; padding:14px 0; display:grid; gap:10px; border-block:1px solid var(--linha)}
.ev-d-fatos li{display:grid; grid-template-columns:22px minmax(0,1fr); gap:10px; align-items:start; font-size:16px; color:var(--tinta); max-width:none}
.ev-d-fatos .ico{width:20px; height:20px; margin-top:2px; color:var(--tinta-2)}
.ev-d-detalhe{display:block; font-size:14px; color:var(--tinta-2); margin-top:2px}
.ev-d-selo{font-size:12.5px; font-weight:700; color:var(--tag-aviso); background:color-mix(in srgb, var(--ambar) 18%, transparent); padding:2px 8px; border-radius:999px; margin-left:4px; white-space:nowrap}
/* 3. ações */
.ev-dialogo .ev-d-acoes{margin:18px 0 0; gap:10px; align-items:center}
.agenda-botao{display:inline-flex; align-items:center; gap:8px}
.agenda-botao .ico{width:18px; height:18px}
.agenda-seta{width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; rotate:45deg; translate:0 -2px; margin-left:2px;
  transition:rotate .2s var(--saida)}
.agenda-botao[aria-expanded="true"] .agenda-seta{rotate:225deg; translate:0 2px}
.agenda-painel{margin:10px 0 0; padding:14px 16px; border-radius:18px; background:var(--papel-2)}
.agenda-opcoes{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 18px}
.agenda-opcoes a{display:inline-block; font-weight:700; color:var(--tinta); padding-block:6px}
.agenda-nota{margin:8px 0 0; font-size:13.5px; color:var(--tinta-2); max-width:none}
.agenda-nota a{padding-block:3px}
/* 4. sobre */
.ev-dialogo .ev-d-nota{margin:20px 0 0; font-size:16.5px; line-height:1.6}
/* 5. destaques */
.ev-d-destaques{display:grid; gap:12px; margin-top:18px}
.ev-d-destaques .ev-d-bloco{margin:0}
.ev-d-chamada{background:color-mix(in srgb, var(--verde) 16%, transparent)}
.ev-d-ressalva{background:color-mix(in srgb, var(--ambar) 12%, transparent)}
/* 6. apoio: texto corrido, sem fundo */
.ev-d-apoio{margin-top:22px; padding-top:16px; border-top:1px solid var(--linha); display:grid; gap:14px}
.ev-d-apoio h4{margin:0 0 4px; font-size:14.5px; color:var(--tinta)}
.ev-d-apoio p,.ev-d-apoio li{font-size:15px; color:var(--tinta-2); max-width:none}
.ev-d-apoio p{margin:0}
.ev-d-apoio ul{margin:0; padding-left:18px; display:grid; gap:4px}
/* 7. procedência */
.ev-dialogo .ev-d-verificado{margin-top:20px}
@media (max-width:520px){ .ev-dialogo .ev-d-acoes .botao{flex:1 1 100%; justify-content:center} }
/* descrição colada ao título; ações no fim, separadas do apoio por uma linha */
.ev-dialogo .ev-d-nota{margin:6px 0 0}
.ev-dialogo .ev-d-fatos{margin-top:18px}
.ev-dialogo .ev-d-acoes{margin-top:22px; padding-top:18px; border-top:1px solid var(--linha)}
/* uma linha só entre seções: cada seção traz a sua linha de cima; os fatos não têm
   linha de baixo, senão ela encostava na de cima do apoio ou das ações (67 fichas) */
.ev-dialogo .ev-d-fatos{border-bottom:0; padding-bottom:4px}
.ev-dialogo .ev-d-destaques{margin-top:14px}

/* ============================================================
   FILTROS RECOLHIDOS ATRÁS DO BOTÃO "FILTROS" (25/09)
   ============================================================ */
.busca-linha{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.busca-linha input{flex:1 1 260px; min-width:0}
.filtros-botao{display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 18px; white-space:nowrap}
.filtros-botao .ico{width:18px; height:18px}
.filtros-botao[aria-expanded="true"]{background:var(--tinta); color:var(--papel); border-color:var(--tinta)}
.filtros-n{font-weight:800}
.filtros-painel{padding-top:4px}
.filtros-painel[hidden]{display:none}
.filtros-ativos{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.filtro-ativo{display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 10px 0 14px; border-radius:999px; cursor:pointer;
  border:1.5px solid var(--linha-controle); background:var(--papel-2); color:var(--tinta); font:600 14px/1 var(--f-sans)}
.filtro-ativo:hover{border-color:var(--tinta)}
.filtro-x{position:relative; width:14px; height:14px}
.filtro-x::before,.filtro-x::after{content:""; position:absolute; left:6px; top:1px; width:2px; height:12px; border-radius:1px; background:currentColor; rotate:45deg}
.filtro-x::after{rotate:-45deg}
@media (max-width:520px){ .filtros-botao{flex:1 1 100%; justify-content:center} }

.painel-linha{align-items:start}

/* ---- o Célio palestrando no centro da órbita do Circuito (25/09) ---- */
/* a mesma escala do Célio no topo da página do Célio (até 360px); as esferas se afastam
   para a borda da órbita, e ele fica na frente do anel, como no hero */
.constelacao{min-height:clamp(300px,34vw,440px)}
.constelacao .celio-discurso{position:absolute; left:50%; top:52%; translate:-50% -50%; z-index:2;
  filter:drop-shadow(0 22px 26px var(--sombra-celio))}
.constelacao .o1{width:14%; left:50%; top:6%}
.constelacao .o2{left:90%; top:24%} .constelacao .o3{left:88%; top:76%}
.constelacao .o4{left:50%; top:96%} .constelacao .o5{left:11%; top:76%} .constelacao .o6{left:10%; top:26%}
.constelacao .o7{left:97%; top:50%}

/* ============================================================
   PÁGINA DE CADA EVENTO E COMPARTILHAR (26/09)
   ============================================================ */
/* a página usa a mesma ficha da janela, como um cartão no meio da página */
.evento-pagina{padding-block:clamp(28px,5vw,64px) clamp(40px,6vw,80px)}
.ev-migalha{margin:0 0 14px; font-size:15px}
.ev-migalha a{font-weight:700; color:var(--tinta); padding-block:3px}
.ev-migalha a::before{content:"← "; }
.ev-dialogo.ev-pagina{width:min(100%,720px); margin:0}
.ev-pagina .ev-dialogo-corpo{max-height:none; overflow:visible}
.ev-pagina .ev-d-cabeca{position:static; padding-right:0}
.ev-pagina h1{font-size:clamp(28px,4vw,40px); letter-spacing:-.03em; line-height:1.05; margin:0}
.ev-ver-circuito{margin:18px 0 0}
.ev-ver-circuito a{font-weight:700; color:var(--tinta); padding-block:3px}
/* compartilhar: o mesmo desenho do botão da agenda */
.compartilhar-botao{display:inline-flex; align-items:center; gap:8px}
.compartilhar-botao .ico{width:18px; height:18px}
.compartilhar-botao[aria-expanded="true"] .agenda-seta{rotate:225deg; translate:0 2px}
.copiar-link{font:700 16px/1.3 var(--f-sans); color:var(--tinta); padding-block:6px}
.compartilhar-status:empty{display:none}
/* na página do evento os títulos dos blocos são <h2>, com o mesmo desenho dos <h4> da janela */
.ev-pagina .ev-d-bloco h2{margin:0 0 6px; font-size:15px; letter-spacing:-.01em}
.ev-pagina .ev-d-apoio h2{margin:0 0 4px; font-size:14.5px; color:var(--tinta)}
.ev-pagina .ev-d-amigux h2{margin:0 0 4px}
/* o site do evento como linha dos fatos */
.ev-d-site{font-weight:700; color:var(--tinta); padding-block:3px; word-break:break-word}
.ev-dialogo .agenda-botao.botao-acao{color:var(--acao-texto)}


/* 27/09: fim do evento que atravessa o mês, embaixo do dia de início */
.ev-quando .ev-ate{display:block; font-size:13.5px; font-weight:600; color:var(--tinta-2); line-height:1.25}

/* 27/09: presença nos eventos e o topo de quem entrou na área de membros */
.ev-vao{display:inline-block; font-size:13px; font-weight:700; padding:2px 10px; border-radius:999px; background:var(--f-membros); margin:0 0 4px}
.ev-presenca{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin:4px 0 14px}
.ev-presenca p{margin:0}
.ev-presenca-n{font-weight:600}
.topo .conta-logada{gap:8px}
.conta-rosto{position:relative; display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; overflow:hidden; color:#2A2A2E; font-weight:800; font-size:12px; flex:none}
.conta-rosto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.conta-sair{display:inline-flex; margin:0}
.conta-sair button{font:inherit; font-size:15px; font-weight:600; color:var(--tinta); background:none; border:0; cursor:pointer; min-height:44px; padding:0 8px; text-decoration:underline; text-underline-offset:3px}
/* "Vou a esse evento": o mesmo rótulo nos dois estados; marcado, fica preenchido e com o ✓ */
.botao-vou{background:transparent; color:var(--tinta); border-color:var(--linha-controle)}
.botao-vou[aria-pressed="true"]{background:var(--acao); color:var(--acao-texto); border-color:var(--acao)}
.botao-vou .vou-marca{display:none}
.botao-vou[aria-pressed="true"] .vou-marca{display:inline}
.botao-vou[aria-pressed="true"] .vou-marca::before{content:"✓"; font-weight:800}
.botao-vou[aria-disabled="true"]{opacity:.7; cursor:progress}

/* ================= 28/09: ficha do evento ================= */
/* botão pequeno, o mesmo da área de membros (antes só existia lá, e o "Vou" saía gigante na ficha) */
.botao-p{min-height:44px; font-size:15px; padding:0 18px}
/* o "Vou" na janela: uma linha compacta, botão e quantos vão lado a lado */
.ev-presenca{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin:2px 0 18px}
.ev-presenca .ev-presenca-n{font-size:14.5px; color:var(--tinta-2); font-weight:600}
/* caminho de volta sem sublinhado; o sublinhado aparece no foco e no hover */
.ev-migalha a{text-decoration:none}
.ev-migalha a:hover,.ev-migalha a:focus-visible{text-decoration:underline; text-underline-offset:3px}
/* a página do evento usa a largura: detalhes à esquerda, ações e destaques à direita */
.ev-dialogo.ev-pagina{width:min(100%,1120px)}
@media (min-width:900px){
  .ev-pag-grade{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr); gap:0 clamp(28px,4vw,56px); align-items:start}
  .ev-pag-lado{position:sticky; top:96px}
  .ev-pag-lado .ev-d-acoes{border-top:0; padding-top:0; margin-top:0}
  .ev-pag-lado .ev-presenca{margin:0 0 16px}
}
.ev-pag-lado .ev-d-destaques{margin-top:18px}