/* AS27 Exclusive · apresentação para telão (1920x1080).
   Estrutura "Mapa da rede": escudo no centro, sócios no anel 1, frentes no anel 2, lugares no anel 3.
   Mundo do site AS27 ("a sala escura"): fundo preto, foto real como prova, dourado no ponto aceso, nos números e na assinatura.
   Regras da casa: rosto nunca cortado, foto nunca repetida, imagem nunca por cima de título, a foto prova e o texto vende.
   Leitura do fundo da sala: todo texto para a plateia tem 36px ou mais (só crédito de foto e letra miúda legal ficam menores). */
:root{
  --fundo:#050403; --superficie:#100c08;
  --tinta:#f4f2ee; --suave:#c9c1b3; --discreto:#9a9184;
  --ouro:#ffc23d; --ouro-claro:#ffe39a; --ouro-apagado:#6b5526;
  --anel:rgba(255,194,61,.34); --anel-fraco:rgba(255,194,61,.18);
  --display:"Bebas Neue",Impact,sans-serif; --texto:Montserrat,system-ui,sans-serif;
  --margem:96px; --entrada:cubic-bezier(.16,1,.3,1); --saida:cubic-bezier(.55,0,.75,.2);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--fundo);color:var(--tinta);overflow:hidden}
body{font:500 36px/1.35 var(--texto);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--ouro);color:var(--fundo)}
.sem-cursor,.sem-cursor *{cursor:none!important}
img{display:block}
ul{list-style:none}

/* ===== palco: os slides têm 1920x1080 e a tela escala o conjunto ===== */
.palco{position:fixed;left:50%;top:50%;width:1920px;height:1080px;transform:translate(-50%,-50%) scale(var(--k,1));background:var(--fundo)}
.slide{position:absolute;inset:0;z-index:1;overflow:hidden;background:var(--fundo);opacity:0;visibility:hidden;transform-origin:var(--origem,50% 50%)}
.slide.ativo{z-index:2;opacity:1;visibility:visible}
/* a passagem atravessa o mapa: o slide se recolhe no seu ponto, o próximo ponto acende e o novo slide se abre dele */
.slide.recolhe{z-index:3;visibility:visible;opacity:1;animation:recolhe .42s var(--saida) forwards}
.slide.expande{animation:expande .75s var(--entrada) both}
@keyframes recolhe{0%{transform:none;opacity:1}70%{opacity:1}100%{transform:scale(.03);opacity:0}}
@keyframes expande{0%{transform:scale(.03);opacity:0}18%{opacity:1}100%{transform:none;opacity:1}}
.estatico .slide.recolhe,.estatico .slide.expande{animation:none}
@media (prefers-reduced-motion:reduce){
  .slide.recolhe{animation:some .2s ease forwards}.slide.expande{animation:aparece .3s ease both}
  @keyframes some{to{opacity:0}}@keyframes aparece{from{opacity:0}to{opacity:1}}
}

/* o mapa de fundo (só aparece na passagem) */
.mapa-fundo{position:absolute;inset:0;z-index:0}
.mapa-fundo svg{position:absolute;inset:0;width:1920px;height:1080px}
.aneis-fundo circle{fill:none;stroke:var(--anel);stroke-width:2}
.aneis-fundo .fraco{stroke:var(--anel-fraco)}
.nos-fundo circle{fill:var(--ouro-apagado);transition:fill .25s,filter .25s}
.nos-fundo .vaga{fill:none;stroke:var(--ouro);stroke-width:2;opacity:.55}
.nos-fundo .aceso{fill:var(--ouro);filter:drop-shadow(0 0 14px rgba(255,194,61,.95))} /* taste-skill-ignore: brilho dourado só no ponto aceso (refs 11 e 15 do Pedro) */
.nos-fundo .vaga.aceso{fill:none;opacity:1;stroke-width:4}
.escudo-fundo{position:absolute;left:900px;top:466px;width:120px;height:auto}

/* ===== tipografia (até 4 tamanhos por slide) ===== */
.titulo{font-family:var(--display);font-weight:400;font-size:var(--t,112px);line-height:.9;letter-spacing:.005em;text-transform:uppercase;text-wrap:balance;color:var(--tinta)}
.apoio{font:600 var(--a,40px)/1.32 var(--texto);color:var(--tinta);text-wrap:pretty}
.num{font-weight:700;color:var(--ouro)}
.letras-miudas{font:500 36px/1.35 var(--texto);color:var(--suave);text-wrap:pretty}
.credito{position:absolute;font:500 16px/1.3 var(--texto);color:var(--discreto)}
.coluna{position:absolute;display:flex;flex-direction:column;gap:30px}
.coluna .titulo+.apoio{margin-top:6px}
.foto{position:absolute;object-fit:cover}
.etiqueta{position:absolute;padding:10px 24px;background:var(--fundo);font:700 36px/1.2 var(--texto);color:var(--ouro)}

/* ===== minimapa: o ponto do mapa de que o slide fala ===== */
.mini{position:absolute;right:56px;top:44px;width:200px;height:200px}

/* ===== mapa (capa e fim) ===== */
.aneis{position:absolute;inset:0;width:1920px;height:1080px;fill:none;stroke:var(--anel);stroke-width:2}
.aneis .fraco{stroke:var(--anel-fraco)}
.escudo{position:absolute;height:auto}
.socio{position:absolute;left:calc(var(--x) - 90px);top:calc(var(--y) - 90px);width:180px;height:180px}
.socio img{width:180px;height:180px;border-radius:50%;object-fit:cover;outline:3px solid var(--ouro);outline-offset:6px}
/* o nome fica numa plaqueta sobre a parte de baixo da foto (sem encostar no rosto), preso à pessoa e não ao vizinho do mapa */
.socio figcaption{position:absolute;left:50%;top:146px;transform:translateX(-50%);white-space:nowrap;padding:2px 16px;background:var(--fundo);font:700 36px/1.2 var(--texto)}
.no{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.no::before{content:"";position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--ouro)}
.no.lugar::before{background:none;border:3px solid var(--ouro)}
.no span{position:absolute;white-space:nowrap;font:600 36px/44px var(--texto);color:var(--tinta)}
.no.rot-dir span{left:22px;top:-22px}
.no.rot-esq span{right:22px;top:-22px}
.no.rot-cima span{left:50%;bottom:20px;transform:translateX(-50%)}
.no.rot-baixo span{left:50%;top:18px;transform:translateX(-50%)}
.no.rot-baixo-dir span{left:16px;top:14px}
.no.rot-baixo-esq span{right:10px;top:14px}
.no.rot-cima-esq span{right:-10px;bottom:16px}
.no.rot-cima-dir span{left:18px;bottom:16px}
.capa-titulo{position:absolute;left:var(--margem);top:84px;--t:124px}
.capa-assinatura{position:absolute;left:var(--margem);bottom:64px;font:700 44px/1.2 var(--texto);color:var(--ouro)}
.capa-nomes{position:absolute;right:var(--margem);bottom:64px;text-align:right;font:600 36px/1.25 var(--texto);color:var(--suave)}

/* ===== 2 · centro ===== */
.s-centro .foto{left:0;top:0;width:880px;height:1080px;object-position:50% 40%}
.s-centro .coluna{left:976px;top:0;bottom:0;width:780px;justify-content:center}

/* ===== 3 · carreira do André ===== */
.s-carreira .titulo{position:absolute;left:var(--margem);top:176px;--t:116px;white-space:nowrap}
.faixa{position:absolute;left:var(--margem);top:344px;display:grid;grid-template-columns:repeat(6,1fr);gap:20px;width:1728px}
.faixa img{width:100%;aspect-ratio:4/5;object-fit:cover}
.faixa figcaption{margin-top:14px;font:600 36px/1.2 var(--texto);color:var(--suave)}
.s-carreira .apoio{position:absolute;left:var(--margem);top:822px;width:1728px}

/* ===== 4 · o passe ===== */
.s-passe .foto{left:0;top:0;width:1040px;height:1080px;object-position:46% 50%}
.s-passe .coluna{left:1120px;top:0;bottom:0;width:704px;justify-content:center;--t:120px;--a:38px}

/* ===== 5 · Rafael ===== */
.s-rafael .foto{right:0;top:264px;width:800px;height:816px}
.s-rafael .etiqueta{left:1120px;bottom:72px}
.s-rafael .coluna{left:var(--margem);top:0;bottom:0;width:960px;justify-content:center;--t:108px;--a:38px}

/* ===== 6 · Ju (o nó aproximado) ===== */
.s-ju .lente{position:absolute;left:640px;top:220px;width:640px;height:640px;border-radius:50%;object-fit:cover;outline:3px solid var(--ouro);outline-offset:10px}
.s-ju .esquerda{left:var(--margem);top:0;bottom:0;width:504px;justify-content:center;--t:94px}
.s-ju .direita{left:1320px;top:0;bottom:0;width:504px;justify-content:center;--a:38px}

/* ===== 7 · anel 2: as frentes ===== */
.s-frentes .titulo{position:absolute;left:0;right:0;top:600px;text-align:center;--t:120px}
.s-frentes .apoio{position:absolute;left:0;right:0;top:952px;text-align:center}

/* ===== 8 · consórcio ===== */
.s-consorcio .foto{right:0;top:264px;width:1040px;height:816px}
.s-consorcio .coluna{left:var(--margem);top:0;bottom:0;width:704px;justify-content:center;--t:104px;--a:38px}

/* ===== 9 · agro: o mapa das lavouras com título em cima e legenda embaixo ===== */
.s-agro .titulo{position:absolute;left:var(--margem);top:66px;--t:150px;white-space:nowrap}
.s-agro .foto{left:0;top:264px;width:1920px;height:816px}
.legenda{position:absolute;left:0;bottom:0;width:1080px;padding:40px var(--margem) 34px;background:var(--fundo);display:flex;flex-direction:column;gap:18px}
.legenda .apoio{text-wrap:balance}
.legenda .credito{position:static}

/* ===== 10 · palco ===== */
.s-palco .foto{right:0;bottom:0;width:917px;height:1080px}
.s-palco .coluna{left:var(--margem);top:0;bottom:0;width:804px;justify-content:center;--t:104px;--a:38px}

/* ===== 11 · eventos e clube ===== */
.s-rede .foto{left:var(--margem);top:63px;width:720px;height:954px}
.s-rede .coluna{left:900px;top:0;bottom:0;width:924px;justify-content:center;--t:104px;--a:38px}

/* ===== 12 · para quem ===== */
.s-quem .coluna{left:var(--margem);right:var(--margem);top:0;bottom:0;align-items:center;justify-content:center;text-align:center;gap:40px}
.s-quem .titulo{--t:200px}
.s-quem .apoio{--a:44px;max-width:1160px}

/* ===== 13 · anel 3: os lugares ===== */
.s-lugares .foto{left:960px;top:264px;width:960px;height:816px}
.s-lugares .coluna{left:var(--margem);top:0;bottom:0;width:780px;justify-content:center;--t:112px;--a:38px}
.ponto{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.ponto::before{content:"";position:absolute;left:-16px;top:-16px;width:32px;height:32px;border-radius:50%;border:3px solid var(--ouro);box-shadow:0 0 18px rgba(255,194,61,.7)} /* taste-skill-ignore: o ponto aceso do mapa brilha */
.ponto span{position:absolute;left:32px;top:-24px;white-space:nowrap;font:700 36px/44px var(--texto);color:var(--tinta);background:var(--fundo);padding:2px 14px}
.ponto small{display:block;font:500 36px/44px var(--texto);color:var(--suave)}
.s-lugares .credito{left:960px;top:1030px;padding:4px 24px;background:var(--fundo)}

/* ===== 14 · o convite ===== */
.s-convite .foto{left:0;top:0;width:940px;height:1080px}
.s-convite .coluna{left:1036px;top:0;bottom:0;width:788px;justify-content:center;--t:110px}

/* ===== 15 · fim: o mapa com o lugar de quem assiste ===== */
.vaga{position:absolute;left:calc(var(--x) - 80px);top:calc(var(--y) - 80px);width:160px;height:160px;border-radius:50%;border:4px solid var(--ouro);box-shadow:0 0 28px rgba(255,194,61,.55),inset 0 0 18px rgba(255,194,61,.25);display:grid;place-items:center} /* taste-skill-ignore: o lugar aceso de quem assiste */
.vaga span{font:700 36px/1.1 var(--texto);color:var(--ouro);text-align:center;outline:none}
.vaga.longo span{position:absolute;top:176px;left:50%;transform:translateX(-50%);white-space:nowrap}
/* contatos no canto de cima, onde o anel de fora deixa mais espaço; o mais longo fica no alto */
.s-fim .contatos{position:absolute;left:var(--margem);top:64px;display:grid;gap:22px}
.contatos dt{font:500 36px/1.2 var(--texto);color:var(--suave)}
.contatos dd{font:700 40px/1.15 var(--texto);color:var(--tinta);font-variant-numeric:tabular-nums}

/* ===== impressão e PDF: um slide por página ===== */
@page{size:1920px 1080px;margin:0}
@media print{
  html,body{overflow:visible;height:auto}
  .palco{position:static;transform:none;width:1920px;height:auto}
  .mapa-fundo{display:none}
  .slide{position:relative;width:1920px;height:1080px;opacity:1;visibility:visible;animation:none;transform:none;break-after:page}
  .slide:last-child{break-after:auto}
}