/* ============ 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;
  --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);
}
@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:#9A968F;
    --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);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --papel:#1C1B1F; --papel-2:#26252A;
  --tinta:#F4F1EC; --tinta-2:#C4C0BA; --tinta-3:#9A968F;
  --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);
}

*,*::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 .5s var(--mola), background-color .3s var(--mola), border-color .3s var(--mola)}
.botao:active{transform:scale(.98)}
.botao-acao{background:var(--acao); color:var(--acao-texto)}
.botao-acao:hover{background:var(--acao-hover); transform:translateY(-2px); color:var(--acao-texto)}
.botao-acao .ico{transition:transform .5s var(--mola)}
.botao-acao:hover .ico{transform:translateX(4px)}
.botao-contorno{background:transparent; color:var(--tinta); border-color:var(--linha-controle)}
.botao-contorno:hover{border-color:var(--tinta); transform:translateY(-2px)}

/* ============ TOPO ============ */
.topo{position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--papel) 88%, transparent); backdrop-filter:blur(12px)}
.topo-linha{display:flex; align-items:center; gap:18px; height:72px}
.marca{display:flex; align-items:center; text-decoration:none; flex:none}
.marca img{height:36px; width:auto}
.marca .escuro{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .marca .claro{display:none}
  :root:not([data-theme="light"]) .marca .escuro{display:block}
}
:root[data-theme="dark"] .marca .claro{display:none}
:root[data-theme="dark"] .marca .escuro{display:block}
.topo-nav{display:flex; gap:2px; margin-left:auto}
.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}

/* ============ 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 .4s var(--mola)}
.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 .6s var(--mola), box-shadow .6s var(--mola)}
.blob:hover,.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 .5s var(--mola)}
.blob:hover .ico{transform:translateY(-3px)}
.blob b{font-size:clamp(13px,1vw,15.5px); font-weight:800; letter-spacing:-.02em; line-height:1.05}
.blob small{font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; line-height:1.25; opacity:.8; max-width:13ch}
/* 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.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 .7s var(--mola);
  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; inset: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}
.celio-toque:hover .celio{transform:translateY(-6px)}
/* irritado, ele não aceita mais toque até terminar */
.celio-toque[data-ocupado]{cursor:default}
.celio-toque[data-ocupado]:hover .celio{transform:none}
.celio-link:hover .celio{transform:translateY(-6px)}
.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 .8s var(--mola)}
.capa:hover img{transform:scale(1.03)}
.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:10px}
.serie h2{font-size:clamp(24px,2.6vw,32px)}
.serie .desc{color:var(--tinta-2); font-size:16.5px; margin:0}
.episodios{list-style:none; margin:0; padding:0; border-top:1px solid var(--linha)}
.episodios li{max-width:none; border-bottom:1px solid var(--linha)}
.episodios a{display:flex; gap:14px; align-items:baseline; padding:13px 2px; text-decoration:none; font-size:16px; font-weight:600; min-height:48px; transition:color .3s var(--mola)}
.episodios a:hover{color:var(--tinta-3)}
.episodios small{flex:none; font-weight:500; color:var(--tinta-3); font-variant-numeric:tabular-nums; min-width:5.5ch}
.mais{align-self:flex-start; font-weight:700; font-size:15px; text-decoration:none; border-bottom:2px solid var(--linha); padding-bottom:2px; min-height:24px; transition:border-color .3s var(--mola)}
.mais:hover{border-color:var(--tinta)}

/* agenda */
.agenda-topo{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:28px}
/* um evento: destaque largo. Vários: trilho que desliza, um ao lado do outro. */
.eventos{display:grid; gap:20px; list-style:none; margin:0; padding:0}
.eventos li{max-width:none}
.eventos[data-n="1"]{grid-template-columns:1fr}
.eventos[data-n="2"]{grid-template-columns:repeat(2,1fr)}
.eventos[data-muitos]{grid-auto-flow:column; grid-auto-columns:minmax(300px,34%); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; scrollbar-width:thin}
.eventos[data-muitos] .evento{scroll-snap-align:start}
.evento{display:grid; grid-template-columns:104px minmax(0,1fr); gap:clamp(16px,2.4vw,28px); align-items:center; max-width:none;
  background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio); padding:clamp(16px,2vw,24px); text-decoration:none;
  transition:transform .5s var(--mola), border-color .3s var(--mola), box-shadow .5s var(--mola)}
.evento:hover{transform:translateY(-3px); 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(--vermelho); 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: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}
  .topo-nav{display:none}
  .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)}

/* ============ 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:#0B7A4E}
.estado-a-confirmar{color:#9A5B00}
.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:16px; 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:11.5px; font-weight:800; letter-spacing:.08em; color:#0B7A4E; 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:#0B7A4E; border-color:#0B7A4E}
.ev-tags .tag-door-soon{color:#9A5B00; border-color:#9A5B00; background:color-mix(in srgb, var(--ambar) 14%, transparent)}
.ev-tags .tag-flag{color:#9A5B00; border-color:#9A5B00}
.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; border-left:4px solid var(--verde); 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; border-left:4px solid var(--cor-porta,var(--tinta)); padding:4px 0 0 18px; border-radius:0}
.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: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:11px}
  .cal td{height:64px; padding:4px 3px}
  .cal-ev{font-size:11px; 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(4,minmax(0,1fr)); gap:clamp(20px,3vw,40px)}
.formato{border-top:4px solid var(--cor,var(--tinta)); padding-top:16px}
.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:11px; 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:#8A5200; border-color:#8A5200}
.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:14px 18px; border-left:4px solid var(--tinta-3); background:color-mix(in srgb, var(--tinta) 4%, transparent); border-radius:0 12px 12px 0; 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:16px 20px; border-left:4px solid var(--azul); background:color-mix(in srgb, var(--azul) 8%, transparent); border-radius:0 12px 12px 0; max-width:70ch; font-size:16px}

@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:11px}
  .cal td{height:72px; padding:4px 3px 6px}
  .ocorre{font-size:11px; 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:14px 18px; background:color-mix(in srgb, var(--azul) 9%, transparent); border-left:4px solid var(--azul); border-radius:0 12px 12px 0}
.janelas[hidden]{display:none}
.janelas h4{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.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))}
/* o interruptor do hero é absoluto sobre o palco; aqui ele fica na linha do conteúdo */
.pausa-solta{position:static; right:auto; bottom:auto; translate:none}
.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 .4s var(--mola)}
.antes a:hover{transform:translateY(-3px)}
.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){
  .series{grid-template-columns:1fr; gap:38px}
  /* em vez de duas listas empilhadas, cada série vira um trilho que desliza */
  .episodios{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(210px,74vw);
    gap:16px; overflow-x:auto; scroll-snap-type:x proximity; border-top:0;
    padding-bottom:10px; scrollbar-width:thin; overscroll-behavior-x:contain}
  .episodios li{border-bottom:0; scroll-snap-align:start;
    border:1px solid var(--linha); border-radius:14px; background:var(--papel)}
  .episodios a{flex-direction:column; align-items:flex-start; gap:6px; padding:14px 16px}
}

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