/* Louder · Modelo B · telas. Uma tela, uma ideia: uma frase grande e, no máximo, mais uma coisa. */
#palco{position:fixed;inset:0;background:var(--k);transition:background-color 700ms var(--ease);overflow:hidden}
.tela{position:absolute;inset:0;visibility:hidden;transform-origin:50% 50%}
.tela.on{visibility:visible}
.passo{position:absolute;inset:0;visibility:hidden;opacity:0}
.passo.on{visibility:visible;opacity:1}
.p{position:absolute;inset:0;color:var(--fg);--pad-x:6.4vw;--pad-t:12vh;--pad-b:12vh}

/* tipos: corpo mínimo 18 px no desktop, 16 px no celular */
.t-xl{font-family:"Archivo Black",sans-serif;font-weight:400;font-size:clamp(52px,8.6vw,156px);line-height:.9;letter-spacing:-.035em;text-transform:none;max-width:13ch}
.t-xl2{font-family:"Archivo Black",sans-serif;font-weight:400;font-size:clamp(46px,6.6vw,120px);line-height:.9;letter-spacing:-.035em}
.t-l{font-family:"Archivo Black",sans-serif;font-weight:400;font-size:clamp(38px,5.2vw,94px);line-height:.95;letter-spacing:-.03em;max-width:17ch}
.t-l.sc{font-family:"Playfair Display",serif;font-weight:900;letter-spacing:-.01em;line-height:1.02;max-width:20ch}
.t-l2{font-family:"Archivo Black",sans-serif;font-weight:400;font-size:clamp(32px,4vw,70px);line-height:.98;letter-spacing:-.03em;max-width:20ch}
.t-m{font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(24px,2.5vw,44px);line-height:1.12;letter-spacing:-.015em;max-width:26ch}
.t-m.larga{max-width:34ch}
.t-b{font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(19px,1.6vw,27px);line-height:1.38;max-width:30ch}
.rot{font-size:clamp(22px,1.8vw,30px);line-height:1;margin-bottom:.8em;color:var(--fg);opacity:.85}
.linha{font-size:clamp(20px,1.7vw,28px);line-height:1.1;margin-top:1.2em}
.nota{font-size:20px;line-height:1.15;opacity:.8;margin-top:22px;max-width:40ch}
.cor{color:var(--c)}
em{font-style:normal}
.sc.cor,em.sc{color:var(--c)}
.fit{display:inline-block;white-space:nowrap;line-height:.84}

/* texto que acende palavra a palavra (minhpham) */
.acende .w{opacity:.16;transition:opacity 520ms var(--ease)}
.passo.aceso .acende .w{opacity:1}

/* composições */
.p-frase,.p-num,.p-ano,.p-generos,.p-dois,.p-frente{display:flex;flex-direction:column;justify-content:center;padding:var(--pad-t) var(--pad-x) var(--pad-b)}
.p-frase .t-l2{margin-top:.5em;max-width:24ch}
.p-ano .ano{font-size:30vw;letter-spacing:-.04em;line-height:.8;color:var(--fg)}
.p-ano .ano.cor{color:var(--c)}
.p-ano .t-m{margin-top:.6em}
.p-num .num{font-family:"Archivo Black",sans-serif;letter-spacing:-.05em;color:var(--fg)}
.p-num .num.cor{color:var(--c)}
.p-num .t-m{margin-top:.3em}
.barra{margin-top:28px;height:14px;width:min(100%,900px);background:color-mix(in srgb,var(--fg) 22%,transparent)}
.barra i{display:block;height:100%;background:var(--c)}
.barra.meio{background:var(--fg)}
.cinco{display:flex;gap:10px;margin-top:28px}
.cinco i{width:clamp(34px,4vw,64px);aspect-ratio:1;border:3px solid var(--fg);border-radius:50%}
.cinco i.on{background:var(--c);border-color:var(--c)}

/* foto: grande e sozinha, crédito no canto */
.foto{position:absolute;overflow:hidden;background:#000;margin:0}
.foto img,.foto video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos);display:block}
.cred{position:absolute;right:12px;bottom:12px;font-family:"VT323",monospace;font-size:19px;line-height:1;text-transform:uppercase;letter-spacing:.03em;color:var(--w);background:rgba(11,11,11,.66);padding:4px 7px 3px}

/* meia tela: texto de um lado, foto do outro */
.p-meia{display:grid;grid-template-columns:1fr 1fr}
.p-meia .txt{grid-column:1;display:flex;flex-direction:column;justify-content:center;padding:var(--pad-t) 4vw var(--pad-b) var(--pad-x);min-width:0}
.p-meia .foto{position:relative;grid-column:2;grid-row:1;height:100%}
.p-meia .t-xl{font-size:clamp(48px,6.4vw,120px)}
.p-meia .t-b{margin-top:.9em}
.p-meia .t-m{margin-top:.7em}

/* tela cheia: foto/vídeo por trás, texto embaixo */
.p-cheia .foto{inset:0}
.p-cheia .veu,.p-capa .veu{position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,11,11,.92) 8%,rgba(11,11,11,.35) 60%,rgba(11,11,11,.2))}
.p-cheia .txt{position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:12vh}
.p-cheia .t-l{max-width:22ch}

/* capa */
.p-capa .foto{inset:0}
.p-capa .veu{background:rgba(11,11,11,.62)}
.capa-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12vh 6vw}
.ldr-c.grande{font-size:clamp(34px,4vw,56px);border-width:.075em;color:var(--w);margin-bottom:.9em}
.p-capa .t-l{max-width:22ch;font-size:clamp(36px,4.6vw,84px)}
.p-capa .linha{opacity:.9}
.dica{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-size:22px;color:var(--w);opacity:.8;animation:chama 1.6s var(--ease) infinite}

/* 05 · gêneros e Rádio */
.generos{font-size:clamp(56px,10.4vh,124px);line-height:.98}
.generos li{white-space:nowrap}
.p-radio .radio{display:flex;flex-direction:column;gap:.1em;font-size:clamp(24px,2.2vw,38px);line-height:1}
.p-radio .radio b{font-weight:400;line-height:.86;margin:.08em 0}
.p-radio .t-m{margin-top:1.2em}

/* 06 */
.nomes li{margin:.12em 0}
.nomes small{display:block;font-size:clamp(20px,1.6vw,28px);letter-spacing:.02em;margin-top:.1em;color:var(--c);line-height:1}
.p-cita blockquote{font-size:clamp(52px,7.4vw,136px);line-height:1;max-width:16ch;color:var(--fg)}

/* 09 · dois números */
.dois{display:grid;grid-template-columns:1fr 1fr;gap:4vw}
.dois .num{font-family:"Archivo Black",sans-serif;letter-spacing:-.05em}
.dois .t-m{margin-top:.3em}

/* 10 · linguagem do Artecore: magenta com borda verde-ácido, tipo inclinado */
.tela[data-artecore]::after{content:"";position:absolute;inset:14px;border:12px solid var(--acid);pointer-events:none;z-index:4}
.inclina{transform:skewX(-10deg);transform-origin:0 100%;font-style:normal;line-height:1.02!important}
.parceiros li{margin:.06em 0}
.p-contato .t-contato{font-family:"Archivo Black",sans-serif;letter-spacing:-.04em;text-decoration:none}
.p-contato .t-m{margin-top:.8em;text-decoration:none}

/* 11 · frentes e fim */
.p-frente .t-m{margin-top:.6em}
.p-fim{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12vh 5vw}
.p-fim .ldr-c{font-size:clamp(26px,2.6vw,40px);margin-bottom:.6em}
.fim{display:flex;flex-direction:column;align-items:center;width:100%;font-size:20px}
.fim .sc{font-size:clamp(48px,6vw,110px);line-height:1;color:var(--c)}
.fim .hv{color:var(--fg);letter-spacing:-.05em}

/* celular */
@media (max-width:700px){
 .p{--pad-x:20px;--pad-t:76px;--pad-b:64px}
 .t-xl{font-size:clamp(46px,13.6vw,62px)}
 .t-xl2{font-size:clamp(40px,11vw,52px)}
 .t-l{font-size:clamp(32px,9.4vw,42px)}
 .t-l2{font-size:clamp(27px,7.6vw,34px)}
 .t-m{font-size:clamp(21px,6vw,26px)}
 .t-b{font-size:17px;line-height:1.4}
 .rot,.linha{font-size:20px}
 .nota{font-size:17px}
 .cred{font-size:16px}
 .p-meia{grid-template-columns:1fr;grid-template-rows:47% 1fr}
 .p-meia .foto{grid-column:1;grid-row:1}
 .p-meia .foto img,.p-meia .foto video{object-position:var(--posm)}
 .p-meia .txt{grid-column:1;grid-row:2;padding:22px var(--pad-x) var(--pad-b);justify-content:flex-start}
 .p-meia .t-xl{font-size:clamp(40px,11vw,50px)}
 .p-cheia .txt{bottom:76px}
 .p-capa .t-l{font-size:clamp(30px,8.4vw,38px)}
 .generos{font-size:clamp(46px,13.4vw,60px)}
 .p-cita blockquote{font-size:clamp(44px,12vw,56px)}
 .dois{grid-template-columns:1fr;gap:26px}
 .barra{height:10px}
 .tela[data-artecore]::after{inset:8px;border-width:7px}
 .fim .sc{font-size:44px}
 .dica{bottom:44px;font-size:20px}
}
@media (prefers-reduced-motion:reduce){.acende .w{transition:none}.dica{animation:none}}

/* prints */
.print *,.print *::before,.print *::after{transition:none!important;animation:none!important}

/* rodada 1 (feedback dos sócios) */
.logo-capa{font-family:"Archivo Black",sans-serif;font-size:clamp(72px,12vw,196px);line-height:.84;letter-spacing:-.05em;color:var(--w);margin-bottom:.16em}
.logo-capa .ponto{color:var(--c)}
.generos.muitos{columns:3;column-gap:5vw;font-size:clamp(34px,6.6vh,76px);line-height:1.05}
.generos.muitos li{break-inside:avoid}
.nomes.seis li{font-size:clamp(26px,2.8vw,48px)}
.nomes.seis small{font-size:clamp(17px,1.3vw,22px)}
.ponte{margin-top:.8em}
@media (max-width:700px){.logo-capa{font-size:clamp(56px,17vw,82px)}.generos.muitos{columns:2;font-size:clamp(26px,8vw,36px)}.nomes.seis li{font-size:24px}}
.nomes.seis small{font-size:clamp(18px,1.4vw,24px);margin-top:.15em}
/* rodada 1: as últimas edições esgotaram · selos na linguagem dos adesivos da abertura */
.p-esgotou .selos{display:flex;flex-wrap:wrap;align-items:center;gap:.35em .45em;margin-top:.55em;font-size:clamp(28px,3.8vw,66px);max-width:22em}
.p-esgotou .selos>span{display:inline-block;transform:rotate(var(--r,0deg))}
.passo.aceso .p-esgotou .selos>span{animation:cola 420ms var(--ease) backwards}
.passo.aceso .p-esgotou .selos>span:nth-child(2){animation-delay:140ms}
.passo.aceso .p-esgotou .selos>span:nth-child(3){animation-delay:280ms}
.passo.aceso .p-esgotou .selos>span:nth-child(4){animation-delay:420ms}
@keyframes cola{0%{transform:rotate(var(--r,0deg)) scale(1.5);opacity:0}60%{opacity:1}80%{transform:rotate(var(--r,0deg)) scale(.96,1.04)}100%{transform:rotate(var(--r,0deg))}}
@media (max-width:700px){.p-esgotou .selos{font-size:clamp(20px,6.4vw,30px)}}
@media (prefers-reduced-motion:reduce){.passo.aceso .p-esgotou .selos>span{animation:none}}