/* ============ 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; flex:none}
/* logado, o botão do grupo some (menu.js): o botão do menu é quem vai para a ponta direita (29/09) */
.topo-linha:has(.botao[hidden]) .menu-botao{margin-left:auto}   /* flex:none: numa linha apertada o flex encolhia a largura e distorcia o logo (29/09) */
.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:15.5ch}   /* "29 de ago. de 2026", a mais longa (02/10): os títulos alinham */
.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 img{height:32px}
  /* 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}
  /* o trilho sangra até as bordas da tela, em vez de ser cortado no recuo do .wrap (29/09) */
  .episodios{margin-inline:-24px; padding-inline:24px; scroll-padding-inline:24px}
}

/* ---------- 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}
/* a galáxia (28/09): o anel próximo (R) e o distante (RL); a fase de cada braço e o tamanho do
   planeta (--f, pelos membros da AmigUX) vêm do build ou da área. O planeta não passa de 90% do
   arco que cabe a cada um no seu anel. */
/* os anéis giram em velocidades e sentidos diferentes, então um planeta distante passa pelo
   próximo: a folga entre os anéis é maior que o maior planeta (1,25 da bolha), para nunca encostar */
.orbita.galaxia{--R:min(210px,20vw); --bolha:clamp(112px,9.4vw,130px); --RL:calc(var(--R) + var(--bolha) * 1.32);
  height:calc(2 * var(--RL) + var(--bolha) * 1.3 + 48px)}
.orbita .k3{width:calc(2 * var(--RL)); border:1.5px dashed color-mix(in srgb, var(--linha) 70%, transparent)}
.orbita .parceiros .giro.longe .sat{left:calc(50% + var(--RL))}
.t-rede .orbita .parceiros .bolha{width:min(calc(var(--bolha) * var(--f, 1)), calc(6.2832 * var(--R) / var(--nn, 7) * .9))}
.t-rede .orbita .parceiros .giro.longe .bolha{width:min(calc(var(--bolha) * var(--f, 1)), calc(6.2832 * var(--RL) / var(--nl, 7) * .9))}
.orbita .bolha .bolha-n{font-size:12.5px; font-weight:700; opacity:.85; line-height:1.1}   /* 12,5px: 11,5 ficava miúdo demais no celular (29/09) */
@media (prefers-reduced-motion:no-preference){
  .orbita .giro.longe{animation-duration:190s; animation-direction:reverse}
  .orbita .giro.longe .sat{animation-duration:190s; animation-direction:normal}
}
.parceiros-mais{margin:28px 0 0}
.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}
  :is(.rede-grade, .galaxia-area) .orbita{order:2; height:auto; margin-top:22px}
  .rede-topo .rede-acao{order:3; margin-top:28px}
  :is(.rede-grade, .galaxia-area) .orbita .parceiros .sat{font-size:15.5px; padding:10px 18px; min-height:44px}   /* a pílula da lista: altura de toque (29/09) */
  :is(.rede-grade, .galaxia-area) .orbita-anel,:is(.rede-grade, .galaxia-area) .orbita-centro,:is(.rede-grade, .galaxia-area) .orbita .giro-mini{display:none}
  :is(.rede-grade, .galaxia-area) .orbita .parceiros{position:static; display:flex; flex-wrap:wrap; gap:10px}
  :is(.rede-grade, .galaxia-area) .orbita .giro{position:static; inset:auto; rotate:none; animation:none; pointer-events:auto}
  :is(.rede-grade, .galaxia-area) .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)}
  :is(.rede-grade, .galaxia-area) .orbita .bolha .bolha-ico{font-size:inherit}
  :is(.rede-grade, .galaxia-area) .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 */
/* (29/09) a regra que escondia o ícone do WhatsApp a 400px saiu: no celular o botão é só o ícone */

/* --- 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}

/* ---- a galáxia pára quando o mouse (ou o foco do teclado) está nela (29/09) ---- */
.orbita:hover .giro,.orbita:hover .giro .sat,.orbita:hover .giro-mini,.orbita:hover .giro-mini .sat,
.orbita:focus-within .giro,.orbita:focus-within .giro .sat,.orbita:focus-within .giro-mini,.orbita:focus-within .giro-mini .sat{animation-play-state:paused}
/* o planeta é um botão quando o script abre a janela: o mesmo desenho do link */
.orbita button.bolha{font:inherit;cursor:pointer}
.parceiros-mais button{font:inherit;cursor:pointer;background:var(--papel);border:1px solid var(--linha);border-radius:999px;padding:10px 18px;font-size:15.5px;font-weight:600;color:var(--tinta)}
/* ---- a janela da comunidade: a do Circuito, com o emoji grande em cima ---- */
.com-dialogo .com-d-emoji{font-size:40px;line-height:1.25;margin:0 90px 6px 0;padding-top:2px}
.com-dialogo .com-d-n{margin:14px 0 0;font-weight:700;font-size:15.5px}
.com-dialogo .com-pelo{font-weight:500;opacity:.85}
.com-dialogo .com-d-links{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15.5px}
.com-dialogo .com-d-links li{max-width:none}
.com-dialogo .com-d-pessoas{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px}
.com-dialogo .com-d-pessoas li{max-width:none;display:inline-flex;align-items:center;gap:8px}
.com-dialogo .com-d-pessoas a{display:inline-flex;align-items:center;gap:8px;font-weight:600;min-height:44px}
.com-dialogo .com-lidera{font-size:12.5px}
.com-dialogo .ev-d-acoes{align-items:center}
.com-dialogo .com-participo{margin:0;display:inline-flex}
/* (29/09) texto longo sem espaço (um link colado no lugar errado) quebra, em vez de alargar a
   janela e empurrar o X para fora; e o emoji ganha respiro em cima */
.com-dialogo .ev-dialogo-corpo{padding-top:clamp(30px,4vw,40px)}
/* o X desta janela fica direto no corpo (no Circuito, fica num cabeçalho com recuo): dentro da borda */
.com-dialogo .fechar{right:clamp(14px,2.4vw,20px); top:clamp(14px,2.4vw,20px)}
.com-dialogo h3,.com-dialogo .com-d-emoji{margin-right:56px}
.com-dialogo .ev-dialogo-corpo p,.com-dialogo .ev-dialogo-corpo li{overflow-wrap:anywhere}
.com-dialogo .ev-d-acoes{display:flex;flex-wrap:wrap;gap:10px 16px}
.com-dialogo .com-participo .link-acao{padding:0}
.com-dialogo .com-pedido{flex-basis:100%;margin:0}

/* O menu da conta (29/09): o nome no topo abre Minha área, Configurações e Sair. No
   computador, a lista cai por baixo do botão; no celular, dentro do menu aberto, ela
   segue no fluxo, logo abaixo do nome. */
.conta-menu{position:relative; display:inline-flex}
.topo-nav button.conta{font-family:inherit; cursor:pointer; line-height:1.2}
.conta-seta{width:14px; height:14px; flex:none; transition:transform .2s ease}
.conta[aria-expanded="true"] .conta-seta{transform:rotate(180deg)}
.conta-lista{position:absolute; right:0; top:calc(100% + 8px); z-index:60; min-width:220px; margin:0; padding:8px; list-style:none;
  background:var(--papel); border:1px solid var(--linha-controle); border-radius:16px; box-shadow:0 12px 32px rgba(42,42,46,.14)}
.conta-lista[hidden]{display:none}
.conta-lista li{margin:0}
.conta-lista .conta-sair{display:block}
.topo-nav .conta-lista a, .conta-lista .conta-sair button{display:flex; align-items:center; width:100%; height:auto; min-height:44px; padding:0 14px; margin:0;
  border:0; border-radius:10px; background:none; color:var(--tinta); font:inherit; font-size:15px; font-weight:600; text-align:left; text-decoration:none; cursor:pointer}
.topo-nav .conta-lista a:hover, .conta-lista .conta-sair button:hover{background:var(--papel-2)}
.topo-nav .conta-lista a[aria-current="page"]{background:var(--papel-2); box-shadow:inset 3px 0 0 var(--tinta)}
@media (prefers-reduced-motion:reduce){ .conta-seta{transition:none} }
@media (min-width:861px) and (max-width:1100px){ .topo-nav .conta .conta-seta{display:none} }
@media (max-width:860px){
  :root[data-js] .conta-menu{display:block; margin:12px 24px 4px}
  :root[data-js] .topo-nav .conta-menu .conta{width:100%; margin:0}
  .conta-lista{position:static; margin-top:8px; box-shadow:none}
}
/* a lista de páginas do topo é flex (`.topo-nav ul`); a da conta é uma coluna */
.topo-nav .conta-lista{display:block}
.topo-nav .conta-lista li{display:block}
/* no celular, `:root[data-js] .topo-nav ul` e `... a` (largura, 52px, 17px) valem também aqui: desfeitos */
@media (max-width:860px){
  :root[data-js] .topo-nav .conta-lista{width:auto; margin:8px 0 0; padding:8px}
  :root[data-js] .topo-nav .conta-lista a, :root[data-js] .conta-lista .conta-sair button{height:auto; min-height:48px; font-size:16px; padding:0 14px; border-radius:10px}
}

/* ============================================================
   CELULAR (29/09/2026, revisão do Felipe no iPhone SE)
   ============================================================ */
/* o rótulo de um botão que troca conforme a largura: dois spans, um por vez à vista
   (display:none tira o outro do nome acessível) */
.so-estreito{display:none}
.topo-nav .conta-itens{display:none}   /* `.topo-nav ul{display:flex}` vence uma classe sozinha: por isso o seletor leva a nav */
@media (max-width:959px){ .so-largo{display:none} .so-estreito{display:inline} }

/* --- o cabeçalho: logo, WhatsApp e o botão do menu na ponta direita --- */
@media (max-width:860px){
  :root[data-js] .menu-botao{order:2; margin-left:0}
  .topo .botao{margin-left:auto}
  /* aberto, o menu ocupa o viewport abaixo do cabeçalho, com rolagem própria; o interruptor de
     animações é o último item (o menu.js o move para lá) */
  :root[data-js] .topo-nav{top:100%; height:calc(100dvh - 72px); overflow-y:auto; overscroll-behavior:contain; padding:10px 0 max(20px, env(safe-area-inset-bottom)); box-shadow:none; border-top:1px solid var(--linha)}
  :root[data-js] .topo[data-menu="aberto"] .topo-nav{display:flex; flex-direction:column}
  :root[data-js] .topo-nav .pausa-topo{margin-top:auto; align-self:flex-start}
  :root[data-js] .topo-nav .conta-menu{display:none}
  :root[data-js] .topo-nav .conta-itens{display:block; list-style:none; width:min(100% - 48px, var(--wrap)); margin:8px auto 0; padding:10px 0 0; border-top:1px solid var(--linha)}
  :root[data-js] .topo-nav .conta-itens li{max-width:none}
  :root[data-js] .topo-nav .conta-itens .conta-sair{display:block; margin:0}
  :root[data-js] .topo-nav .conta-itens .conta-sair button{display:flex; align-items:center; width:100%; height:52px; padding:0 16px; margin:0; font:inherit; font-size:17px; font-weight:600; color:var(--tinta); background:none; border:0; border-radius:12px; text-decoration:none; text-align:left; cursor:pointer}
  :root[data-js] .topo-nav .conta-itens .conta-sair button:hover{background:var(--papel-2)}
  html[data-menu-aberto]{overflow:hidden}
  html[data-menu-aberto] body{overflow:visible}   /* com o html fechado, o body não pode virar contêiner de rolagem: o cabeçalho sticky sumia (29/09) */
}
/* com a Biblioteca no menu (30/10), entre o menu colapsado e 960px os cinco links não cabem ao lado
   do botão do grupo: ele fica só com o ícone, como no celular, e o nome continua no DOM */
@media (min-width:861px) and (max-width:959px){
  .topo .botao{width:46px; min-width:46px; padding:0; justify-content:center; border-radius:50%; flex:none; white-space:nowrap}
  .topo .botao .botao-rotulo{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
  .topo .botao .ico{width:22px; height:22px; margin:0}
}
@media (max-width:600px){
  /* só o ícone do WhatsApp; o nome continua no DOM, para o leitor de tela e o controle por voz */
  .topo .botao{width:46px; min-width:46px; padding:0; justify-content:center; border-radius:50%; flex:none; white-space:nowrap}
  .topo .botao .botao-rotulo{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
  .topo .botao .ico{width:22px; height:22px; margin:0}
}

/* --- as comunidades parceiras no celular: uma lista, uma por linha (as pílulas quebravam) --- */
@media (max-width:959px){
  :is(.rede-grade, .galaxia-area) .orbita,:is(.rede-grade, .galaxia-area) .orbita.galaxia{height:auto}   /* a altura da galáxia é fixa no computador; aqui a lista manda (29/09) */
  :is(.rede-grade, .galaxia-area) .orbita .parceiros{display:block; border-top:1px solid var(--linha)}
  :is(.rede-grade, .galaxia-area) .orbita .giro{display:block; border-bottom:1px solid var(--linha)}
  :is(.rede-grade, .galaxia-area) .orbita .parceiros .bolha{display:flex; width:100%; align-items:center; gap:12px; min-height:56px; padding:10px 4px; border:0; border-radius:12px; background:none; color:var(--tinta); text-align:left; font:inherit; box-shadow:none}
  :is(.rede-grade, .galaxia-area) .orbita .parceiros .bolha:hover{border:0; background:var(--papel-2); color:var(--tinta)}
  /* o anel distante tem largura própria no desktop (regra mais específica): aqui é linha igual às outras */
  :is(.rede-grade, .galaxia-area) .orbita .parceiros .giro.longe .bolha{width:100%}
  :is(.rede-grade, .galaxia-area) .orbita .bolha .bolha-ico{font-size:22px; width:32px; text-align:center; flex:none}
  :is(.rede-grade, .galaxia-area) .orbita .bolha b{flex:1 1 auto; font-size:16px; font-weight:700; letter-spacing:-.01em; line-height:1.25; white-space:normal; max-width:none; text-wrap:auto}
  :is(.rede-grade, .galaxia-area) .orbita .bolha .bolha-n{margin-left:auto; flex:none; font-size:13px; font-weight:600; color:var(--tinta-2); opacity:1; white-space:nowrap}
  .parceiros-mais{margin:0}
  .parceiros-mais li{border-bottom:1px solid var(--linha)}
  .parceiros-mais li a{display:flex; align-items:center; gap:12px; min-height:56px; padding:10px 4px}
  .rede-topo .rede-acao{margin-top:24px}
  .rede-topo .rede-acao .botao{width:100%; justify-content:center; text-align:center}
}

/* --- A comunidade: o convite respira depois da faixa "Dá para participar" --- */
@media (max-width:860px){
  .participa-faixa + .convite{padding-top:clamp(96px,14vw,120px)}
}

/* --- Circuito no celular --- */
/* a etiqueta "N pessoas da AmigUX vão" mora na fileira de etiquetas, com as outras (29/09); a
   fileira só aparece quando tem alguma etiqueta à vista */
.ev-tags .tag-vao{background:var(--f-membros); color:var(--tinta); font-weight:700}
.ev-tags li[hidden]{display:none}
.ev-tags:not(:has(li:not([hidden]))){display:none}
@media (max-width:760px){
  /* "Linha do tempo | Calendário" com a largura do botão Filtros */
  .segmentado .seg-trilho{display:flex; width:100%}
  .segmentado .seg{flex:1 1 0; justify-content:center; min-height:44px; padding:0 10px}
  /* o dia da semana centrado sob o círculo do dia (a margem do `b` deslocava 4px) */
  .ev-quando b.ev-dia{margin-right:0}
  /* o Célio da grade não cabe: fica só a etiqueta "AmigUX na grade" */
  .ev-celio{display:none}
  .ev.tem-amigux .ev-corpo{padding-top:0}
  /* o mês grande, o ano embaixo */
  .faixa-mes-rotulo{display:flex; flex-direction:column-reverse; align-items:flex-start; gap:2px; margin-bottom:8px}
  .faixa-mes-rotulo b{display:block; font-size:24px; line-height:1}
  .faixa-mes-rotulo span{font-size:14px; color:var(--tinta-3)}
  /* respiro entre o título, a linha colorida e o resto da ficha */
  .ev{gap:8px 14px; padding:20px 12px}
  .ev-cabeca{margin-bottom:10px}
  .ev-abrir{line-height:1.25; padding-bottom:3px}
  .ev-onde{margin-bottom:10px; line-height:1.5}
  .ev-nota{margin-bottom:12px}
}

/* --- A comunidade, "os jeitos": respiro entre os itens, e o link com a linha colorida da casa
   (a mesma dos nomes de evento), sem o sublinhado (29/09, preferência do Felipe) --- */
.jeitos a{color:var(--tinta); text-decoration:none; border-bottom:2px solid color-mix(in srgb, var(--verde) 45%, transparent); padding-bottom:1px}
.jeitos a:hover{border-bottom-color:var(--verde)}
@media (max-width:860px){ .jeitos{gap:26px} }

/* --- sem encontro marcado: o convite para sugerir pauta (01/10) --- */
.agenda-vazia{max-width:52ch}
.agenda-vazia p{margin:0 0 14px; color:var(--tinta-2)}
.agenda-vazia b{color:var(--tinta)}
.agenda-vazia-acoes{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px}
.agenda-vazia-acoes a:not(.botao){font-weight:700; color:var(--tinta); min-height:44px; display:inline-flex; align-items:center}
/* (01/10) o convite para seguir o calendário no Luma, logo abaixo do título */
.agenda-seguir{margin:10px 0 0; max-width:52ch; color:var(--tinta-2)}
.agenda-seguir ~ .agenda-viva{margin-top:32px}
.anteriores-lista{display:contents}   /* o invólucro que o videos.js troca (02/10) não muda o layout da seção */
/* quem vai, na página do evento, para quem entrou (02/10): o avatar e o nome de cada pessoa */
.ev-quem-lista{flex-basis:100%}
.ev-quem{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.ev-quem a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:inherit;font-weight:600;text-underline-offset:3px}
.ev-quem .avatar{position:relative;width:32px;height:32px;border-radius:50%;background:var(--cor,#21B3A6);color:#2A2A2E;display:inline-grid;place-items:center;font-weight:800;font-size:13px;overflow:hidden;flex:none}
.ev-quem .avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.agenda-vazia-yt{margin:12px 0 0}

/* ---- a página de um evento (03/10, pedido do Felipe): uma página do site, não a janela da lista ----
   (o corpo começa mais abaixo: a mancha da abertura desce sobre ele, como em todo o site, e escondia o título)
   a abertura de sempre e, embaixo, o que se sabe do evento à esquerda e as ações à direita */
.ev-pg-abertura .abertura-texto{max-width:68ch}
.ev-pg-abertura .ev-migalha{margin:0 0 18px}
.ev-pg-abertura .ev-d-rotulos{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.ev-pg-org{margin:0 0 6px;font-weight:600;color:var(--tinta-2);font-size:clamp(16px,1.6vw,18px)}
.ev-pg-abertura h1{margin:0}
.ev-pg-corpo{padding-block:clamp(72px,9vw,112px) clamp(40px,6vw,80px)}
.ev-pg-grade{display:grid;gap:28px}
.ev-pg-principal h2{margin:0 0 4px;font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em}
.ev-pg-principal .ev-d-fatos{margin-top:12px}
.ev-pg-principal .ev-d-destaques{display:grid;gap:12px;margin-top:22px}
.ev-pg-principal .ev-d-bloco h3,.ev-pg-principal .ev-d-apoio h3{margin:0 0 6px;font-size:16px;letter-spacing:-.01em}
.ev-pg-principal .ev-ver-circuito{margin:26px 0 0}
.ev-pg-lado{padding:clamp(18px,2.4vw,26px);border:1px solid var(--linha);border-radius:24px 20px 26px 22px / 20px 26px 22px 24px;background:var(--papel)}
.ev-pg-lado .ev-presenca{margin:0 0 16px}
.ev-pg-lado .ev-d-acoes{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;border:0}
.ev-pg-lado .ev-d-verificado{margin:16px 0 0;font-size:13.5px;color:var(--tinta-3)}
@media (min-width:900px){
  .ev-pg-grade{grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:0 clamp(32px,5vw,72px);align-items:start}
  .ev-pg-lado{position:sticky;top:96px}
}

/* ---- o crachá do encontro presencial (13/10, pedido do Felipe) ----
   à esquerda os dados e o salvar, à direita a prévia no formato escolhido (o que se vê é o
   que se salva). No celular, uma coluna: dados, prévia, salvar. Os campos são os do
   formulário de contato; o campo de arquivo e o "Tirar a foto" são os da área de membros. */
:root{--erro:#B3261E}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--erro:#FF8A80}}
:root[data-theme="dark"]{--erro:#FF8A80}
.campo .erro{color:var(--erro); font-weight:600; margin:0; font-size:15px}
.campo .erro::before{content:"⚠ "}
/* o aviso existe vazio desde o carregamento (a região viva já está lá): vazio, não ocupa lugar */
.campo .erro:empty{margin-top:-6px}
.campo .erro:empty::before{content:none}
.campo[data-erro] input{border-color:var(--erro); border-width:2px}
.link-acao{font:inherit; font-weight:600; font-size:16px; color:var(--tinta); background:none; border:0; padding:0 10px; min-height:44px; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.link-acao:hover{text-decoration-thickness:2px}
.campo-foto input[type=file]{font:inherit; font-size:15px; max-width:100%; border:0; padding:0; min-height:0; background:transparent}
.campo-foto input[type=file]::file-selector-button{font:inherit; font-weight:700; font-size:15px; min-height:44px; padding:0 18px; margin-right:12px; border-radius:999px; border:2px solid var(--linha-controle); background:transparent; color:var(--tinta); cursor:pointer}
.campo-foto input[type=file]::file-selector-button:hover{border-color:var(--tinta)}

.cracha{--alt-quadro:min(80vh, 860px); --larg-quadro:calc(var(--alt-quadro) * 9 / 16); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  grid-template-areas:"dados palco" "salvar palco"; grid-template-rows:auto 1fr; gap:clamp(28px,4vw,48px) clamp(28px,5vw,72px); align-items:start}
.cracha-dados{grid-area:dados} .cracha-palco{grid-area:palco} .cracha-salvar{grid-area:salvar}
.cracha h2{font-size:clamp(26px,3vw,34px); margin:0 0 22px}
.cracha fieldset{border:0; padding:0; margin:0 0 18px; min-width:0}
.cracha legend{font-weight:700; font-size:15px; padding:0; margin-bottom:10px}
.cracha .campo-foto .dica{max-width:46ch}
.cracha-ajuste p{margin:0}
.cracha-ajuste .link-acao{padding:0}
.campo-faixa{margin-bottom:4px; gap:2px}
.campo-faixa label{font-weight:600; font-size:15px}
.faixa-linha{display:flex; align-items:center; gap:14px}
.campo-faixa input[type=range]{flex:1; min-width:0; min-height:44px; padding:0; border:0; background:transparent; accent-color:var(--tinta); cursor:pointer}
.campo-faixa output{flex:none; min-width:12ch; font-size:14.5px; color:var(--tinta-2); font-variant-numeric:tabular-nums}

.cracha-palco{display:flex; flex-direction:column; align-items:center; gap:18px}
.cracha[data-formato="post"]{--larg-quadro:calc(var(--alt-quadro) * 4 / 5)}
/* um fio em volta da prévia: sem foto, o fundo dela é o mesmo papel da página, e as manchas pareciam cortadas no nada */
.cracha-quadro::after{content:""; position:absolute; inset:0; border:1px solid var(--linha); border-radius:inherit; pointer-events:none}
.cracha-quadro{position:relative; width:min(100%, var(--larg-quadro)); aspect-ratio:9 / 16;
  border-radius:var(--raio); overflow:hidden;
  /* o mesmo fundo que o crachá desenha sem foto: o papel do site com o pontilhado (fixo, nos dois temas,
     porque é o fundo da imagem que vai ser salva) */
  background:#FFFBF5 radial-gradient(rgba(42,42,46,.14) 1px, transparent 1px) 0 0 / 22px 22px}
.cracha[data-formato="post"] .cracha-quadro{aspect-ratio:4 / 5}
.cracha-tela{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:pan-y; cursor:grab; visibility:hidden}
.cracha-tela[data-arrastando]{cursor:grabbing}
.cracha[data-pronto] .cracha-tela{visibility:visible}
.cracha-espera{position:absolute; inset:0; display:grid; place-items:center; margin:0; padding:24px; text-align:center; font-size:15px; color:#2A2A2E; max-width:none}
.cracha[data-pronto] .cracha-espera{display:none}
.cracha:not([data-pronto]) .so-com-cracha{display:none}
/* os controles de posição começam na mesma borda da prévia, em qualquer formato */
.cracha-pose{width:min(100%, var(--larg-quadro)); margin:0 !important}
.cracha-pose-acoes{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:4px 0 0}
.cracha-pose-acoes .dica{font-size:14px; color:var(--tinta-2)}

.cracha-botoes{display:flex; flex-wrap:wrap; gap:12px; margin:22px 0 0}
.cracha-botoes .botao[aria-disabled="true"]{opacity:.55; cursor:progress}
.cracha-salvar .dica{display:block; margin:12px 0 0; font-size:14px; color:var(--tinta-2)}
.cracha-salvar progress{display:block; width:100%; max-width:460px; height:10px; margin:18px 0 0; accent-color:var(--tinta)}
.cracha-salvar progress[hidden]{display:none}
.cracha-status{min-height:1.6em; margin:12px 0 0; font-size:15px; color:var(--tinta-2)}

@media (max-width:860px){
  .cracha{grid-template-columns:minmax(0,1fr); grid-template-areas:"dados" "palco" "salvar"; grid-template-rows:auto}
  .cracha-botoes .botao{width:100%; justify-content:center}
}

/* ---- o convite do crachá (13/10): a janela que abre depois do "Eu vou!" no Jovens AmigUX ----
   o mesmo <dialog> das fichas; o convite à esquerda e o crachá do Célio à direita */
.cracha-convite{width:min(92vw,720px)}
.cracha-convite .ev-dialogo-corpo{padding:clamp(24px,4vw,40px)}
/* nas fichas, o fechar fica 8px para fora porque mora no cabeçalho, que tem folga; aqui não há cabeçalho */
.cracha-convite .fechar{right:12px; top:12px}
.cracha-convite-grade{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,240px); gap:clamp(20px,3vw,32px); align-items:center}
.cracha-convite-texto h2{font-size:clamp(24px,3vw,32px); margin:0 0 14px; padding-right:48px}
.cracha-convite-texto p{color:var(--tinta-2); margin:0 0 20px}
.cracha-convite-texto p:last-child{margin:0}
.cracha-convite-video{display:block; width:100%; height:auto; border-radius:14px; background:#E9E6E0}
.ev-cracha{flex-basis:100%; margin:0; font-size:15px; color:var(--tinta-2)}
.ev-cracha a{font-weight:700; color:var(--tinta)}
@media (max-width:560px){
  .cracha-convite-grade{grid-template-columns:minmax(0,1fr)}
  .cracha-convite-video{max-width:200px; margin-inline:auto}
}

/* ---------- as abas (30/10/2026): o componente da área, agora do site inteiro ----------
   Vieram do php/conta.css junto com o script (src/abas.js), com o desenho final de lá: o
   sublinhado como o indicador dos passos, sem caixa no painel, a linha da lista como sombra
   interna (o sublinhado da aba ativa não desce nem cria rolagem). No celular, uma linha só que
   rola de lado, com sombra nas pontas quando há aba escondida (29/09, pedido do Felipe). */
.abas-lista{display:flex;flex-wrap:nowrap;gap:4px;margin:0;padding:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;box-shadow:inset 0 -1px 0 var(--linha)}
.abas-lista [role=tab]{flex:none;position:relative;font:inherit;font-size:16px;font-weight:600;color:var(--tinta-2);background:none;border:0;border-bottom:3px solid transparent;border-radius:0;min-height:48px;padding:0 12px;margin:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.abas-lista [role=tab]:hover{color:var(--tinta);border-bottom-color:var(--linha-controle)}
.abas-lista [role=tab][aria-selected=true]{color:var(--tinta);font-weight:800;border-bottom-color:var(--tinta)}
.abas-lista [role=tab]:focus-visible{outline-offset:-4px}
.aba-n{font-weight:500;font-size:14px;opacity:.85}
.aba-n:empty{display:none}
.abas-ativas > .aba{padding:24px 0 0}
.abas-ativas .aba:focus-visible{outline:3px solid var(--tinta);outline-offset:6px;border-radius:12px}
@media (max-width:760px){
  .abas-lista{gap:0 6px;scrollbar-width:none;scroll-snap-type:x proximity;
    background:linear-gradient(to right,var(--papel) 40%,transparent) left/48px 100% no-repeat local,linear-gradient(to left,var(--papel) 40%,transparent) right/48px 100% no-repeat local,
      linear-gradient(to right,rgba(42,42,46,.14),transparent) left/14px 100% no-repeat scroll,linear-gradient(to left,rgba(42,42,46,.14),transparent) right/14px 100% no-repeat scroll}
  .abas-lista::-webkit-scrollbar{display:none}
  .abas-lista [role=tab]{white-space:nowrap;scroll-snap-align:start}
}

/* ---------- a biblioteca (30/10/2026; segunda rodada, revisão do Felipe) ----------
   O mesmo HTML na área (php/_biblioteca.php) e no site aberto (src/paginas/biblioteca.mjs).
   - O topo é o do Circuito: a constelação, com o Célio lendo no centro e as capas nas esferas.
   - Os cartões: a capa em cima, o título, o autor, as etiquetas e os rostos de quem indica.
     Livro tem a capa em pé, com a lombada sombreada e a leve inclinação das fotos da casa
     (alternando o lado), e é o lugar onde a página ousa: a estante. Vídeo, curso e artigo têm
     a imagem larga, com o canto irregular das fotos do site.
   - Sem imagem, a capa tipográfica: o título na cor do item, com a luz das esferas.
   - A janela é a ficha do Circuito (o tema escuro sobre o site), com a capa ao lado. */
.abre-biblioteca{background:var(--f-encontros); --faixa:var(--f-encontros)}
.constelacao-bib .celio-lendo{position:absolute; left:50%; top:52%; translate:-50% -50%; z-index:2; width:clamp(150px,17vw,230px); height:auto;
  filter:drop-shadow(0 22px 26px var(--sombra-celio))}
.constelacao .orbe-capa{background:var(--papel); overflow:hidden; box-shadow:0 10px 20px -10px rgba(42,42,46,.45)}
.constelacao-bib .orbe{scale:1.3}   /* uma capa precisa de mais esfera que um logotipo */
.constelacao .orbe-capa img{width:100%; height:100%; object-fit:cover; display:block}
@media (max-width:760px){
  .abre-biblioteca .constelacao{aspect-ratio:1; min-height:0; width:min(100%,340px); margin:4px auto 0}
}

/* o avatar e os rostos empilhados, os mesmos da área (php/conta.css), para o site aberto */
.avatar{position:relative; flex:none; width:56px; height:56px; border-radius:50%; color:#2A2A2E; display:inline-grid; place-items:center; font-weight:800; font-size:20px; letter-spacing:-.02em; overflow:hidden;
  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,#21B3A6)}
.avatar img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.avatar:has(img){background:var(--papel-2)}
.avatar-p{width:32px; height:32px; font-size:13px}
.rostos{display:inline-flex; flex:none}
.rostos .avatar{border:2px solid var(--papel)}
.rostos .avatar + .avatar{margin-left:-10px}

/* o painel: a busca, os temas, a contagem */
.bib-secao{padding-top:clamp(40px,6vw,72px)}
.area .bib-area{padding-top:clamp(28px,4vw,44px)}
.bib-controles .bib-temas .chips{display:flex; flex-wrap:wrap; gap:8px 10px}
.bib-contagem{margin:0; font-size:15px; color:var(--tinta-2); font-weight:600}
.bib-controles .bib-limpar{justify-self:start}
.bib-abas{margin-top:clamp(28px,4vw,44px)}
.bib-vazio{margin:8px 0 0; color:var(--tinta-2); font-size:16px}

/* a grade: livros em estante, o resto em cartões largos */
.bib-grade{list-style:none; margin:0; padding:0; display:grid; gap:clamp(36px,4vw,52px) clamp(22px,3vw,36px)}
.bib-grade-livro{grid-template-columns:repeat(auto-fill, minmax(176px, 1fr))}
.bib-grade-curso,.bib-grade-video,.bib-grade-artigo,.bib-grade-site{grid-template-columns:repeat(auto-fill, minmax(min(100%, 290px), 1fr))}
.bib-grade-podcast{grid-template-columns:repeat(auto-fill, minmax(min(100%, 220px), 1fr))}
.bib-card{position:relative; display:flex; flex-direction:column; gap:16px; min-width:0}
.bib-card[hidden]{display:none}
.bib-card-txt{display:flex; flex-direction:column; gap:6px; flex:1}
.bib-card-nome{margin:0; font-size:19px; line-height:1.2; letter-spacing:-.015em; text-wrap:balance}
.bib-abrir{all:unset; cursor:pointer; color:var(--tinta); font:inherit; overflow-wrap:anywhere;
  text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--verde) 55%, transparent); text-decoration-thickness:2px; text-underline-offset:4px}
/* o cartão inteiro abre a janela: o título se estende sobre ele */
.bib-abrir::after{content:""; position:absolute; inset:0; z-index:1}
.bib-card:hover .bib-abrir{text-decoration-color:var(--verde)}
.bib-abrir:focus-visible{outline:none}
.bib-card:has(.bib-abrir:focus-visible){outline:3px solid var(--tinta); outline-offset:8px; border-radius:16px}
.bib-card-autor{margin:0; font-size:14.5px; color:var(--tinta-2); line-height:1.35}
.bib-card .ev-tags{margin:4px 0 0}
.bib-card-quem{display:flex; align-items:center; gap:10px; margin:auto 0 0; padding-top:8px; font-size:14px; color:var(--tinta-2)}

/* a capa */
.bib-capa{position:relative; container-type:inline-size; overflow:hidden; background:var(--papel-2);
  border-radius:18px 14px 20px 16px / 14px 20px 16px 18px; box-shadow:0 18px 30px -20px rgba(42,42,46,.55)}
.bib-capa img{display:block; width:100%; height:100%; object-fit:cover}
.bib-curso .bib-capa,.bib-video .bib-capa,.bib-artigo .bib-capa,.bib-site .bib-capa{aspect-ratio:16 / 9}
/* podcast tem a capa quadrada, a das plataformas de áudio */
.bib-podcast .bib-capa{aspect-ratio:1}
.bib-livro .bib-capa{aspect-ratio:2 / 3; border-radius:4px 10px 10px 4px; rotate:-1.4deg;
  box-shadow:0 22px 34px -18px rgba(42,42,46,.6), 0 2px 6px -2px rgba(42,42,46,.25)}
.bib-livro:nth-child(even) .bib-capa{rotate:1.2deg}
.bib-livro:nth-child(3n) .bib-capa{rotate:-.6deg}
/* a lombada: a dobra do papel à esquerda, por cima da imagem */
.bib-livro .bib-capa::after{content:""; position:absolute; inset:0 auto 0 0; width:10%;
  background:linear-gradient(to right, rgba(42,42,46,.28), rgba(255,255,255,.12) 45%, rgba(42,42,46,0)); pointer-events:none}
@media (prefers-reduced-motion: no-preference){
  .bib-capa{transition:rotate .35s var(--mola), translate .35s var(--mola), box-shadow .35s var(--mola)}
  .bib-card:hover .bib-capa,.bib-card:has(.bib-abrir:focus-visible) .bib-capa{rotate:0deg; translate:0 -4px; box-shadow:0 26px 40px -20px rgba(42,42,46,.6)}
}
/* a capa tipográfica: o título na cor do item, com a luz das esferas */
/* o padding em %, não em cqi: cqi no próprio contêiner mede o contêiner de fora (o da página) */
.bib-capa-tipo{display:flex; flex-direction:column; justify-content:space-between; gap:8px; padding:10% 9% 9%; color:#2A2A2E;
  background:radial-gradient(circle at 26% 18%, rgba(255,255,255,.6), rgba(255,255,255,0) 42%), radial-gradient(circle at 82% 92%, rgba(42,42,46,.18), rgba(42,42,46,0) 46%), var(--cor)}
.bib-capa-titulo{font-weight:800; font-size:clamp(16px, 11.5cqi, 36px); line-height:1.04; letter-spacing:-.03em; text-wrap:balance; overflow:hidden}
.bib-curso .bib-capa-titulo,.bib-video .bib-capa-titulo,.bib-artigo .bib-capa-titulo,.bib-site .bib-capa-titulo{font-size:clamp(15px, 6.4cqi, 30px)}
.bib-capa-autor{font-size:clamp(11px, 5cqi, 15px); font-weight:700; opacity:.82}
.bib-livro .bib-capa-tipo{padding-left:15%}

/* a janela do conteúdo: a capa ao lado do texto */
.bib-dialogo{width:min(94vw,900px)}
.bib-d{padding-top:clamp(24px,3.4vw,36px)}
/* (05/11) o X desta janela fica direto no corpo, como na das comunidades: dentro da borda. Com o
   right:-8px do Circuito, ele passava 8px da janela e abria uma rolagem horizontal */
.bib-dialogo .fechar{right:clamp(14px,2.4vw,20px); top:clamp(14px,2.4vw,20px)}
.bib-d-grade{display:grid; grid-template-columns:minmax(0,250px) minmax(0,1fr); gap:clamp(20px,3.4vw,40px); align-items:start}
.bib-d-capa{position:sticky; top:0}
.bib-d .ev-d-acoes{margin-top:18px}
.bib-d .ev-tags{margin:6px 0 0}
.bib-d-afiliado{margin:12px 0 0; font-size:14px; color:var(--tinta-2); max-width:56ch}
.bib-d .bib-data{margin-top:18px}
.bib-d-quem{margin-top:24px; padding-top:18px; border-top:1px solid var(--linha)}
.bib-d-quem :is(h2, h4){margin:0 0 10px; font-size:17px; letter-spacing:-.01em}
.bib-d-quem .ev-presenca{margin:0 0 8px}
.bib-d-ninguem{margin:0; color:var(--tinta-2)}
.bib-d .ev-quem{margin:0}

/* a página de cada conteúdo */
.bib-pagina{padding-top:clamp(36px,6vw,72px)}
.bib-volta{margin:0 0 clamp(20px,3vw,32px)}
.bib-volta a{font-weight:700; color:var(--tinta); text-underline-offset:4px}
.bib-pagina .bib-d-grade{grid-template-columns:minmax(0,320px) minmax(0,1fr)}
.bib-pagina h1{font-size:clamp(34px,5vw,60px); line-height:1; letter-spacing:-.04em; margin:0 0 12px; text-wrap:balance}
.bib-pagina h1 .ev-org{display:block; font-size:clamp(15px,1.6vw,18px); letter-spacing:0; line-height:1.3; font-weight:600; color:var(--tinta-2); margin-bottom:10px}

/* as capas na lista da organização e na edição */
.bib-gestao-linha{display:grid; grid-template-columns:96px minmax(0,1fr); gap:18px; align-items:start}
.bib-capa-mini{width:96px; aspect-ratio:3 / 4}
.bib-capa-mini .bib-capa-titulo{font-size:12px}
.bib-capa-mini .bib-capa-autor{display:none}
.bib-gestao-capa{display:flex; gap:16px; align-items:center; margin:0 0 20px}
.bib-gestao-capa .ajuda{margin:0; max-width:40ch}

.bib-data{margin:0; color:var(--tinta-2); font-size:14.5px}
.bib-data a{color:inherit; font-weight:600; text-underline-offset:3px}
.bib-copia{display:block; margin-top:4px}   /* a cópia numa linha própria: depois da data, o nome quebrava no meio */
.bib-dito{display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--tinta-2)}

@media (max-width:760px){
  /* no celular, a poda: os temas numa linha que rola de lado, como as abas; nos livros em duas
     colunas, o cartão fica com capa, título, autor e quem indica (o tema está na janela e no filtro) */
  .bib-controles .bib-temas .chips{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; padding:2px 2px 6px; margin:0 -2px}
  .bib-controles .bib-temas .chips::-webkit-scrollbar{display:none}
  .bib-controles .bib-temas .chip{flex:none; white-space:nowrap; scroll-snap-align:start}
  .bib-grade-livro .ev-tags{display:none}
  .bib-grade-livro{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:32px 18px}
  .bib-card-nome{font-size:17px}
  .bib-d-grade,.bib-pagina .bib-d-grade{grid-template-columns:minmax(0,1fr)}
  .bib-d-capa{position:static; max-width:180px}
  .bib-curso .bib-d-capa,.bib-video .bib-d-capa,.bib-artigo .bib-d-capa,.bib-site .bib-d-capa{max-width:none}
}