/* Corte Exclusivo. Sistema visual "cartaz de luta": papel, tinta e vermelho de impressão.
   Fundo de papel aquecido, títulos em Anton, texto em Archivo, vermelho só em ação e destaque. */
:root{
  --papel:#F3EEE4; --papel-2:#E9E2D3; --papel-3:#DDD4C2;
  --tinta:#16120E; --tinta-2:#4A4238;        /* 4A4238 sobre F3EEE4 = 8,5:1 */
  --vermelho:#C8201A; --vermelho-2:#A81812; --sobre-vermelho:#FFF8F0;
  --linha:rgba(22,18,14,.16); --linha-2:rgba(22,18,14,.32);
  --palco:#0E0C0A; --ok:#1F6B3A; --alerta:#8A5A00;
  --raio:10px; --d:"Anton","Arial Narrow",Impact,sans-serif; --t:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;overflow-x:clip}
html{-webkit-text-size-adjust:100%}
body{background:var(--papel);color:var(--tinta);font:400 17px/1.55 var(--t);min-height:100vh}
h1,h2,h3{font-family:var(--d);font-weight:400;letter-spacing:.005em;line-height:1.02;margin:0;text-transform:uppercase}
h1{font-size:clamp(44px,8.4vw,112px)}
h2{font-size:clamp(30px,4.6vw,56px)}
h3{font-size:clamp(20px,2.2vw,26px);line-height:1.1}
p{margin:0 0 1em} a{color:inherit}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.label{font:600 13px/1.2 var(--t);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}
.sec{color:var(--tinta-2)}
.ic{width:1em;height:1em;flex:none;display:inline-block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter;--ac:var(--vermelho);overflow:visible;vertical-align:-.12em}
.btn .ic{--ac:currentColor}

/* Botões e campos */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:0 22px;border:1.5px solid var(--tinta);border-radius:var(--raio);background:transparent;color:var(--tinta);font:700 16px/1 var(--t);cursor:pointer;text-decoration:none;transition:background .15s,color .15s,transform .1s}
.btn:hover{background:var(--tinta);color:var(--papel)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--vermelho);outline-offset:2px}
.btn-acao{background:var(--vermelho);border-color:var(--vermelho);color:var(--sobre-vermelho)}
.btn-acao:hover{background:var(--vermelho-2);border-color:var(--vermelho-2);color:var(--sobre-vermelho)}
.btn-tinta{background:var(--tinta);color:var(--papel)}
.btn-tinta:hover{background:#2A231B}
.btn-p{min-height:38px;padding:0 14px;font-size:14px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-fio{border:0;min-height:0;padding:0;background:none;text-decoration:underline;text-underline-offset:3px;font-weight:600}
.btn-fio:hover{background:none;color:var(--vermelho)}
label.campo{display:block;font:600 14px/1.3 var(--t);margin-bottom:14px}
label.campo span{display:block;margin-bottom:6px}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=date],input[type=url],select,textarea{width:100%;min-height:48px;padding:10px 14px;border:1.5px solid var(--linha-2);border-radius:var(--raio);background:#FFFDF8;color:var(--tinta);font:500 16px/1.3 var(--t)}
textarea{min-height:96px;resize:vertical}
input[type=range]{width:100%;accent-color:var(--vermelho)}
.linha2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.linha2>*{min-width:0}
.aviso{padding:12px 14px;border-left:4px solid var(--vermelho);background:var(--papel-2);font-size:15px;border-radius:0 var(--raio) var(--raio) 0}
.aviso.ok{border-color:var(--ok)} .aviso.at{border-color:var(--alerta)}
.erro{color:var(--vermelho-2);font-weight:600;font-size:15px;min-height:1.4em}

/* ---------- Página de espera ---------- */
.topo{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1.5px solid var(--tinta)}
.marca{font:400 24px/1 var(--d);text-transform:uppercase;letter-spacing:.02em;text-decoration:none;display:inline-flex;align-items:baseline;gap:.35em}
.marca b{font-weight:400;color:var(--vermelho)}
.heroi{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:clamp(24px,5vw,64px);padding:clamp(32px,6vw,72px) 0;align-items:start}
.heroi h1 em{font-style:normal;color:var(--vermelho)}
.heroi .sub{font-size:clamp(18px,1.7vw,21px);max-width:34em;margin:22px 0 0}
.ficha{border:1.5px solid var(--tinta);border-radius:var(--raio);padding:clamp(20px,3vw,30px);background:#FFFDF8;position:relative}
.ficha h2{font-size:clamp(26px,3vw,34px);margin-bottom:6px}
.ficha .ok-msg{display:none}
.ficha.feito form{display:none}.ficha.feito .ok-msg{display:block}
.ficha .pos{font:400 clamp(64px,9vw,104px)/.95 var(--d);color:var(--vermelho)}
.troca{display:flex;border:1.5px solid var(--tinta);border-radius:var(--raio);overflow:hidden;margin-bottom:16px}
.troca label{flex:1;text-align:center;padding:11px 8px;font:700 14px/1.2 var(--t);cursor:pointer}
.troca input{position:absolute;opacity:0;pointer-events:none}
.troca input:checked+label{background:var(--tinta);color:var(--papel)}
.troca input:focus-visible+label{outline:3px solid var(--vermelho);outline-offset:-3px}
.faixa{border-block:1.5px solid var(--tinta);padding:clamp(36px,6vw,80px) 0}
.faixa+.faixa{border-top:0}
.faixa>.wrap>h2{max-width:16em;margin-bottom:clamp(22px,3vw,40px)}
ol.fluxo{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
ol.fluxo li{position:relative;padding:0 18px 0 0}
ol.fluxo li::before{content:"";position:absolute;top:21px;left:44px;right:0;height:1.5px;background:var(--linha-2)}
ol.fluxo li:last-child::before{display:none}
.no{width:44px;height:44px;border:1.5px solid var(--tinta);border-radius:12px;display:grid;place-items:center;font-size:22px;background:var(--papel);position:relative}
ol.fluxo h3{margin:16px 0 6px;font-size:21px}
ol.fluxo p{font-size:15.5px;color:var(--tinta-2);margin:0}
.duas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px)}
.regras{list-style:none;margin:0;padding:0}
.regras li{padding:16px 0;border-top:1px solid var(--linha);display:grid;grid-template-columns:28px 1fr;gap:12px;font-size:17px}
.regras li:last-child{border-bottom:1px solid var(--linha)}
.regras .ic{font-size:22px;margin-top:2px}
.tinta{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.tinta .sec,.tinta .label{color:#CFC6B6}
.tinta .btn{border-color:var(--papel);color:var(--papel)}
.tinta .btn:hover{background:var(--papel);color:var(--tinta)}
.rodape{padding:28px 0 40px;font-size:14px;color:var(--tinta-2);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}

/* ---------- Entrar ---------- */
.porta{min-height:100vh;display:grid;place-items:center;padding:24px}
.porta .ficha{width:min(440px,100%)}

/* ---------- App ---------- */
.barra{position:sticky;top:0;z-index:20;background:var(--papel);border-bottom:1.5px solid var(--tinta)}
.barra .wrap{display:flex;align-items:center;gap:18px;min-height:60px;width:min(1320px,100% - 32px)}
.barra nav{display:flex;gap:2px;overflow-x:auto;flex:1;scrollbar-width:none}
.barra nav::-webkit-scrollbar{display:none}
.barra nav button{border:0;background:none;font:700 15px/1 var(--t);padding:10px 12px;border-radius:8px;cursor:pointer;color:var(--tinta-2);white-space:nowrap}
.barra nav button[aria-current=page]{color:var(--tinta);box-shadow:inset 0 -3px 0 var(--vermelho);border-radius:8px 8px 0 0}
.barra nav button:hover{color:var(--tinta)}
.cred{font:700 13px/1.2 var(--t);white-space:nowrap;text-align:right}
.cred small{display:block;font-weight:500;color:var(--tinta-2)}
main.app{width:min(1320px,100% - 32px);margin:0 auto;padding:22px 0 80px}
.cab{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 24px;margin-bottom:20px}
.cab h1{font-size:clamp(30px,4vw,48px)}
.cab p{margin:6px 0 0;color:var(--tinta-2);max-width:46em}
.cartao{border:1.5px solid var(--tinta);border-radius:var(--raio);background:#FFFDF8;padding:18px}
.cartao+.cartao{margin-top:14px}
.cartao h3{margin-bottom:10px}
.grade{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.grade>*{min-width:0}
.grade .cartao+.cartao{margin-top:0}
table.t{width:100%;border-collapse:collapse;font-size:15px}
table.t th{font:600 12.5px/1.2 var(--t);letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-2);text-align:left;padding:8px 10px;border-bottom:1.5px solid var(--tinta)}
table.t td{padding:10px;border-bottom:1px solid var(--linha);vertical-align:top;overflow-wrap:anywhere}
table.t td.n,table.t th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rolagem{overflow-x:auto}
.estado{font:700 12.5px/1 var(--t);letter-spacing:.05em;text-transform:uppercase}
.estado.valido,.estado.pago,.estado.liberado,.estado.ativa{color:var(--ok)} .estado.pendente,.estado.retido,.estado.pedido,.estado.rascunho{color:var(--alerta)} .estado.recusado,.estado.cancelado,.estado.bloqueado{color:var(--vermelho-2)}
.vazio{padding:28px 0;color:var(--tinta-2)}
.fatos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-block:1.5px solid var(--tinta);margin-bottom:18px}
.fatos div{padding:14px 16px 14px 0}
.fatos b{display:block;font:400 clamp(30px,4vw,44px)/1 var(--d)}
.fatos span{font-size:14px;color:var(--tinta-2)}
.barra-uso{height:10px;border:1.5px solid var(--tinta);border-radius:6px;overflow:hidden;background:var(--papel-2)}
.barra-uso i{display:block;height:100%;background:var(--vermelho)}

/* Estúdio */
.estudio{display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr);gap:20px;align-items:start}
.palco{background:var(--palco);border-radius:var(--raio);padding:12px;position:sticky;top:76px}
.palco canvas{display:block;width:100%;aspect-ratio:9/16;border-radius:6px;background:#000}
.palco .ctl{display:flex;align-items:center;gap:10px;margin-top:10px;color:#EDE6D8;font:600 13px/1 var(--t);font-variant-numeric:tabular-nums}
.palco .ctl button{width:42px;height:42px;border-radius:50%;border:1.5px solid #EDE6D8;background:none;color:#EDE6D8;font-size:18px;cursor:pointer;display:grid;place-items:center}
.palco .ctl button:hover{background:#EDE6D8;color:var(--palco)}
.so-fonte{position:absolute;width:2px;height:2px;opacity:0;pointer-events:none;left:-10px;top:-10px}
.passos{display:flex;gap:0;border-bottom:1.5px solid var(--tinta);margin-bottom:18px;overflow-x:auto}
.passos button{border:0;background:none;padding:12px 16px;font:400 20px/1 var(--d);text-transform:uppercase;letter-spacing:.02em;color:var(--tinta-2);cursor:pointer;white-space:nowrap}
.passos button[aria-selected=true]{color:var(--tinta);box-shadow:inset 0 -4px 0 var(--vermelho)}
.passos button[disabled]{opacity:.35;cursor:not-allowed}
.solta{border:2px dashed var(--linha-2);border-radius:var(--raio);padding:clamp(28px,6vw,64px) 20px;text-align:center;background:#FFFDF8;cursor:pointer}
.solta.sobre{border-color:var(--vermelho);background:var(--papel-2)}
.solta .ic{font-size:44px}
.solta h3{margin:12px 0 6px}
.onda{position:relative;height:96px;background:var(--palco);border-radius:8px;overflow:hidden;cursor:pointer;touch-action:none;user-select:none}
.onda canvas{position:absolute;inset:0;width:100%;height:100%}
.onda .janela{position:absolute;top:0;bottom:0;border:2px solid var(--vermelho);background:rgba(200,32,26,.22);border-radius:4px;pointer-events:none}
.onda .agulha{position:absolute;top:0;bottom:0;width:2px;background:#FFF8F0;pointer-events:none}
.momentos{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.momentos button{border:1.5px solid var(--tinta);background:#FFFDF8;border-radius:8px;padding:8px 12px;font:700 14px/1.2 var(--t);cursor:pointer;text-align:left}
.momentos button small{display:block;font-weight:500;color:var(--tinta-2)}
.momentos button[aria-pressed=true]{background:var(--tinta);color:var(--papel)}
.momentos button[aria-pressed=true] small{color:#CFC6B6}
.opcoes{display:flex;flex-wrap:wrap;gap:8px}
.opcoes{align-items:center}
.opcoes button:not(.btn){border:1.5px solid var(--linha-2);background:#FFFDF8;border-radius:8px;padding:10px 14px;font:700 14px/1 var(--t);cursor:pointer;color:var(--tinta)}
.opcoes button:not(.btn)[aria-pressed=true]{border-color:var(--tinta);background:var(--tinta);color:var(--papel)}
.bloco{padding:16px 0;border-top:1px solid var(--linha)}
.bloco:first-child{border-top:0;padding-top:0}
.bloco>h3{margin-bottom:10px}
.palavras{display:flex;flex-wrap:wrap;gap:6px;max-height:210px;overflow:auto;padding:10px;border:1.5px solid var(--linha-2);border-radius:var(--raio);background:#FFFDF8}
.palavras input{width:auto;min-height:34px;padding:4px 8px;font-size:15px;border-width:1px;field-sizing:content;min-width:3ch;max-width:16ch}
.titulos button{display:block;width:100%;text-align:left;border:1.5px solid var(--linha-2);background:#FFFDF8;border-radius:8px;padding:11px 14px;font:600 16px/1.3 var(--t);cursor:pointer;margin-bottom:8px}
.titulos button[aria-pressed=true]{border-color:var(--vermelho);box-shadow:inset 4px 0 0 var(--vermelho)}
.progresso{height:14px;border:1.5px solid var(--tinta);border-radius:8px;overflow:hidden;background:var(--papel-2)}
.progresso i{display:block;height:100%;width:0;background:var(--vermelho);transition:width .2s}
pre.post{white-space:pre-wrap;font:500 15px/1.5 var(--t);background:var(--papel-2);padding:14px;border-radius:var(--raio);margin:0 0 12px;overflow-wrap:anywhere}
video.pronto{width:min(300px,100%);aspect-ratio:9/16;border-radius:var(--raio);background:#000;display:block}
.lado{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:20px}
.podio{display:grid;gap:0}
.podio .l{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--linha)}
.podio .l .p{font:400 30px/1 var(--d)}
.podio .l:nth-child(-n+3) .p{color:var(--vermelho)}
.podio .l.eu{background:var(--papel-2);margin-inline:-10px;padding-inline:10px;border-radius:8px}
.podio .l b{display:block}.podio .l small{color:var(--tinta-2)}
.podio .l .v{font:400 24px/1 var(--d);text-align:right}
.podio .l .v small{display:block;font:500 12px/1.3 var(--t)}
.planos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1.5px solid var(--tinta);border-radius:var(--raio);overflow:hidden;background:#FFFDF8}
.planos>div{padding:20px;border-left:1.5px solid var(--tinta)}
.planos>div:first-child{border-left:0}
.planos>div.meu{background:var(--tinta);color:var(--papel)}
.planos>div.meu .sec{color:#CFC6B6}
.planos ul{margin:12px 0 0;padding-left:18px;font-size:15px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--tinta);color:var(--papel);padding:12px 18px;border-radius:var(--raio);font:600 15px/1.3 var(--t);z-index:50;max-width:calc(100% - 32px)}
.abas{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
dialog{border:1.5px solid var(--tinta);border-radius:var(--raio);background:var(--papel);color:var(--tinta);padding:22px;width:min(620px,calc(100% - 24px));max-height:calc(100vh - 40px)}
dialog::backdrop{background:rgba(14,12,10,.6)}

@media (max-width:900px){
  .heroi,.duas,.estudio,.lado{grid-template-columns:minmax(0,1fr)}
  ol.fluxo{grid-template-columns:minmax(0,1fr);gap:22px}
  ol.fluxo li{display:grid;grid-template-columns:44px 1fr;gap:0 14px;padding:0}
  ol.fluxo li::before{top:44px;bottom:-22px;left:21px;right:auto;width:1.5px;height:auto}
  ol.fluxo h3{margin:8px 0 4px;grid-column:2}ol.fluxo p{grid-column:2}
  .palco{position:static;max-width:300px;margin-inline:auto}
  .planos{grid-template-columns:minmax(0,1fr)}.planos>div{border-left:0;border-top:1.5px solid var(--tinta)}.planos>div:first-child{border-top:0}
  .linha2{grid-template-columns:minmax(0,1fr)}
  .cred small{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}