/* Legenda Studio · KNDA
   Branco dominante, preto no texto, vermelho só na ação principal.
   Alvo: quem chega do Google e decide em 3 segundos. */
:root{
  --branco:#fff; --papel:#FAFAF9; --papel2:#F4F3F1;
  --tinta:#0F0F11; --tinta2:#57565C; --tinta3:#8E8D95;
  --linha:#EAE8E5; --linha2:#DAD7D3;
  --marca:#751450; --marca2:#4C0D34; --verde:#0E9F6E; --ambar:#B45309;
  --r:16px; --r2:12px; --r3:9px;
  --f:"Inter",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  --m:"JetBrains Mono","SF Mono",Consolas,monospace;
  --s1:0 1px 2px rgba(15,15,17,.04);
  --s2:0 2px 6px rgba(15,15,17,.06),0 1px 2px rgba(15,15,17,.04);
  --s3:0 16px 40px rgba(15,15,17,.10),0 4px 10px rgba(15,15,17,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* A PÁGINA NÃO PODE BALANÇAR ENQUANTO SE ARRASTA A LEGENDA.
   overflow-x:hidden mata a rolagem lateral que surgia quando o botão "Baixar"
   aparecia e esticava o cabeçalho; overscroll-behavior impede o efeito elástico
   do celular, que competia com o gesto de mover a legenda. */
html{overflow-x:hidden;max-width:100%;overscroll-behavior:none;
  -webkit-overflow-scrolling:auto}
body{max-width:100%}
/* enquanto o dedo move a legenda, a página fica imóvel */
body.arrastando-legenda{overflow:hidden;position:fixed;width:100%;touch-action:none}
body{background:var(--branco);color:var(--tinta);font-family:var(--f);font-size:16px;
  line-height:1.6;-webkit-font-smoothing:antialiased}
.oculto{display:none!important}
svg{display:block}
a{color:var(--marca);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

/* ───────── topo */
/* GLASSMORPHISM — aplicado só onde há algo passando por trás.
   Em fundo liso o efeito não aparece e só custa desempenho. Aqui vale:
   a barra fica sobre o conteúdo que rola, então o desfoque tem o que desfocar. */
.topo{height:64px;display:flex;align-items:center;justify-content:space-between;
  gap:10px;min-width:0;
  padding:0 24px;border-bottom:1px solid rgba(117,20,80,.09);
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(16px) saturate(170%);
  backdrop-filter:blur(16px) saturate(170%);
  position:sticky;top:0;z-index:40}
@supports not (backdrop-filter:blur(1px)){.topo{background:var(--branco)}}
.marca{display:flex;align-items:center;gap:11px;color:var(--tinta);text-decoration:none}
.marca:hover{text-decoration:none}
.selo{width:28px;height:28px;background:var(--tinta);border-radius:8px;display:grid;
  place-items:center;color:#fff;font-size:12px;font-weight:700;letter-spacing:-.04em}
.marca-txt{font-size:15px;font-weight:600;letter-spacing:-.025em}
.marca-txt em{font-style:normal;color:var(--tinta3);font-weight:400}
.nav{display:flex;align-items:center;gap:22px}
.nav a{color:var(--tinta2);font-size:14px;font-weight:500}
.nav a:hover{color:var(--tinta);text-decoration:none}
@media(max-width:640px){.nav a.some{display:none}}

/* ───────── botões */
.btn{background:var(--branco);color:var(--tinta);border:1px solid var(--linha2);
  border-radius:var(--r3);padding:10px 18px;font-size:14.5px;font-family:var(--f);
  font-weight:500;cursor:pointer;transition:.14s;box-shadow:var(--s1);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.btn:hover:not(:disabled){border-color:var(--tinta3);box-shadow:var(--s2);text-decoration:none}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.btn.primario{background:var(--marca);border-color:var(--marca);color:#fff;
  box-shadow:0 2px 8px rgba(117,20,80,.24)}
.btn.primario:hover:not(:disabled){background:var(--marca2);border-color:var(--marca2)}
.btn.escuro{background:var(--tinta);border-color:var(--tinta);color:#fff}
.btn.escuro:hover:not(:disabled){background:#000}
.btn.fantasma{background:transparent;border-color:transparent;box-shadow:none;color:var(--tinta2)}
.btn.fantasma:hover{background:var(--papel2);color:var(--tinta)}
.btn.pequeno{padding:7px 13px;font-size:13px}
.btn.largo{width:100%}
.btn.grande{padding:15px 32px;font-size:16px;font-weight:600;border-radius:var(--r2)}
.btn svg{width:17px;height:17px;flex-shrink:0}

/* ───────── landing */
.hero{max-width:680px;margin:0 auto;padding:60px 24px 30px;text-align:center;
  position:relative}
.hero::before{content:"";position:absolute;top:-120px;left:50%;transform:translateX(-50%);
  width:820px;height:440px;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(117,20,80,.10),transparent 66%)}
.hero>*{position:relative}
.pilula{display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(117,20,80,.13);border-radius:99px;padding:7px 15px;font-size:13px;
  color:var(--tinta2);margin-bottom:24px;box-shadow:0 2px 10px rgba(117,20,80,.05)}
.pilula b{color:var(--tinta);font-weight:600}
.ponto{width:6px;height:6px;border-radius:50%;background:var(--verde)}
h1{font-size:48px;font-weight:700;letter-spacing:-.042em;line-height:1.07;margin-bottom:18px}
h1 span{color:var(--marca)}
.sub{font-size:18px;color:var(--tinta2);line-height:1.55;margin-bottom:38px;
  max-width:500px;margin-left:auto;margin-right:auto}
@media(max-width:640px){h1{font-size:33px}.sub{font-size:16px}.hero{padding-top:38px}}

.dropzone{background:linear-gradient(150deg,rgba(255,255,255,.75),rgba(251,244,248,.55));
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:2px dashed rgba(117,20,80,.22);border-radius:var(--r);
  padding:52px 30px;transition:.22s;cursor:pointer;
  box-shadow:0 4px 24px rgba(117,20,80,.05)}
.dropzone:hover{border-color:rgba(117,20,80,.45);
  box-shadow:0 10px 34px rgba(117,20,80,.11);transform:translateY(-1px)}
.dropzone.sobre{border-color:var(--marca);background:#FBF4F8}
.dz-icone{width:44px;height:44px;margin:0 auto 18px;color:var(--tinta3)}
.dz-titulo{font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.dz-sub{font-size:14px;color:var(--tinta2);margin-bottom:26px}

.selos{display:flex;justify-content:center;gap:24px;margin-top:30px;flex-wrap:wrap}
.selo-item{font-size:13.5px;color:var(--tinta2);display:flex;align-items:center;gap:8px}
.selo-item svg{width:16px;height:16px;color:var(--verde);flex-shrink:0}

.secao{max-width:880px;margin:0 auto;padding:56px 24px}
.secao h2{font-size:31px;font-weight:700;letter-spacing:-.032em;margin-bottom:14px;text-align:center}
.secao .intro{text-align:center;color:var(--tinta2);max-width:560px;margin:0 auto 38px;font-size:16.5px}
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:720px){.passos{grid-template-columns:1fr;gap:22px}}
.passo-n{width:30px;height:30px;border-radius:50%;background:var(--tinta);color:#fff;
  font-size:14px;font-weight:600;display:grid;place-items:center;margin-bottom:13px}
.passo h3{font-size:17px;font-weight:600;margin-bottom:6px;letter-spacing:-.015em}
.passo p{font-size:14.5px;color:var(--tinta2);line-height:1.6}

.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.cartao{background:linear-gradient(155deg,rgba(255,255,255,.9),rgba(251,244,248,.72));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(117,20,80,.1);border-radius:var(--r2);padding:24px;
  transition:.18s;box-shadow:0 1px 2px rgba(117,20,80,.04)}
.cartao:hover{transform:translateY(-2px);border-color:rgba(117,20,80,.22);
  box-shadow:0 12px 30px rgba(117,20,80,.09)}
.cartao h3{font-size:16.5px;font-weight:600;margin-bottom:7px;letter-spacing:-.015em}
.cartao p{font-size:14.5px;color:var(--tinta2);line-height:1.6}

.faq{max-width:700px;margin:0 auto}
.faq details{border-bottom:1px solid var(--linha);padding:18px 0}
.faq summary{font-size:16.5px;font-weight:600;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:16px;letter-spacing:-.015em}
.faq summary::after{content:"+";color:var(--tinta3);font-weight:400;font-size:21px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq p{margin-top:11px;color:var(--tinta2);font-size:15px;line-height:1.65}

.rodape{border-top:1px solid var(--linha);background:var(--papel);margin-top:50px;
  padding:36px 24px;text-align:center}
.rodape-links{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-bottom:16px}
.rodape-links a{color:var(--tinta2);font-size:14px}
.rodape p{color:var(--tinta3);font-size:13px}

/* ───────── artigos */
.artigo{max-width:720px;margin:0 auto;padding:46px 24px 60px}
.artigo h1{font-size:37px;text-align:left;margin-bottom:12px}
.artigo .meta{color:var(--tinta3);font-size:13.5px;margin-bottom:32px}
.artigo h2{font-size:24px;font-weight:650;letter-spacing:-.025em;margin:36px 0 12px}
.artigo h3{font-size:18.5px;font-weight:600;margin:26px 0 9px}
.artigo p{margin-bottom:16px;color:#2C2B31;font-size:16.5px;line-height:1.72}
.artigo ul,.artigo ol{margin:0 0 18px 22px;color:#2C2B31}
.artigo li{margin-bottom:9px;line-height:1.68}
.artigo table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15px}
.artigo th,.artigo td{border:1px solid var(--linha);padding:11px 13px;text-align:left}
.artigo th{background:var(--papel);font-weight:600}
.artigo blockquote{border-left:3px solid var(--marca);padding:4px 0 4px 18px;
  margin:22px 0;color:var(--tinta2);font-size:16.5px}
.cta-artigo{background:var(--papel);border:1px solid var(--linha);border-radius:var(--r2);
  padding:26px;text-align:center;margin:36px 0}
.cta-artigo h3{margin-top:0}


/* ───────── app (ferramenta) */
.app{display:grid;grid-template-columns:1fr 352px;height:calc(100vh - 64px)}
@media(max-width:900px){.app{grid-template-columns:1fr;grid-template-rows:1fr auto;height:auto}}
.palco{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:26px;gap:18px;background:var(--papel);overflow:hidden;position:relative}
.player{position:relative;max-height:calc(100vh - 260px);border-radius:var(--r2);
  overflow:hidden;background:#000;box-shadow:var(--s3)}
.player video{display:block;max-height:calc(100vh - 260px);max-width:100%;height:auto}
.camada{position:absolute;inset:0;pointer-events:none;overflow:hidden}
/* touch-action:none é o que faz o arraste funcionar no celular.
   Sem ele, o navegador entende o toque como rolagem de página, assume o gesto
   e o pointermove nunca chega até nós — o dedo arrasta a tela em vez da legenda. */
.bloco{position:absolute;pointer-events:auto;cursor:grab;user-select:none;text-align:center;
  line-height:1.24;transform:translate(-50%,-50%);padding:5px;
  touch-action:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* alvo maior no celular: dedo não tem a precisão do ponteiro */
@media(pointer:coarse){.bloco{padding:14px}}
.bloco:hover{outline:1.5px dashed rgba(255,255,255,.45);outline-offset:6px;border-radius:5px}
.bloco.arrastando{cursor:grabbing;outline:1.5px solid var(--marca);outline-offset:6px}
.bloco .pal{display:inline-block;padding:0 .07em}
.dica{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.78);
  color:#fff;font-size:12px;padding:6px 14px;border-radius:99px;opacity:0;transition:.25s;
  pointer-events:none}
.player:hover .dica{opacity:1}
.controles{display:flex;align-items:center;gap:14px;width:100%;max-width:600px}
.play{width:42px;height:42px;border-radius:50%;border:1px solid var(--linha2);background:#fff;
  color:var(--tinta);cursor:pointer;display:grid;place-items:center;flex-shrink:0;box-shadow:var(--s1)}
.play:hover{border-color:var(--tinta)}
.play svg{width:16px;height:16px}
.tempo{font-family:var(--m);font-size:12px;color:var(--tinta2);min-width:88px;flex-shrink:0}
#linha-tempo{flex:1;accent-color:var(--marca)}
.aviso-pos{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;
  align-items:center;gap:8px;background:#fff;border:1px solid var(--linha2);border-radius:99px;
  padding:8px 10px 8px 18px;font-size:13px;box-shadow:var(--s3);z-index:10}
.aviso-pos span{color:var(--tinta2)}
.dica-inicial{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--tinta);color:#fff;font-size:12.5px;padding:10px 16px;border-radius:99px;
  box-shadow:var(--s3);z-index:12;display:flex;align-items:center;gap:10px}
.dica-inicial button{background:rgba(255,255,255,.16);border:none;color:#fff;width:20px;height:20px;
  border-radius:50%;cursor:pointer;font-size:12px;line-height:1;padding:0}

.lateral{background:#fff;border-left:1px solid var(--linha);display:flex;flex-direction:column;
  overflow:hidden}
.abas{display:flex;padding:0 14px;border-bottom:1px solid var(--linha);flex-shrink:0}
.aba{background:none;border:none;color:var(--tinta3);font-family:var(--f);font-size:13.5px;
  font-weight:500;padding:16px 13px;cursor:pointer;border-bottom:2px solid transparent;
  margin-bottom:-1px;transition:.13s}
.aba:hover{color:var(--tinta)}
.aba.ativa{color:var(--tinta);border-bottom-color:var(--marca)}
.conteudo-aba{display:none;overflow-y:auto;padding:20px;flex:1}
.conteudo-aba.ativa{display:block}
.grupo{margin-top:24px;padding-top:22px;border-top:1px solid var(--linha)}
.grupo:first-child{margin-top:0;padding-top:0;border-top:none}
.grupo-tit{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--tinta3);
  font-weight:600;margin-bottom:13px}
.grupo .btn{margin-top:10px}
.explica{font-size:12px;color:var(--tinta3);line-height:1.5;margin-top:6px}
.explica.alerta{color:var(--ambar)}
.ajuda{background:var(--papel);border:1px solid var(--linha);border-radius:var(--r3);
  padding:13px 15px;font-size:12.5px;color:var(--tinta2);line-height:1.55;margin-bottom:14px}
.ajuda b{color:var(--tinta);font-weight:600}
.ajuda .titulo{display:block;font-size:13px;margin-bottom:5px}
.ajuda.destaque{background:#FBF5F9;border-color:#E9D2DF}
.ajuda .caso{display:block;margin-top:8px;padding-top:8px;border-top:1px solid var(--linha);
  color:var(--tinta3);font-size:11.5px}
label.campo{display:block;font-size:12.5px;color:var(--tinta2);margin-top:16px;font-weight:500}
label.campo b{float:right;font-family:var(--m);color:var(--tinta);font-weight:500;font-size:11.5px}
input[type=range]{width:100%;accent-color:var(--marca);margin-top:7px}
input[type=color]{width:100%;height:34px;background:none;border:1px solid var(--linha2);
  border-radius:7px;padding:3px;cursor:pointer}
select{width:100%;background:#fff;color:var(--tinta);border:1px solid var(--linha2);
  border-radius:var(--r3);padding:10px 13px;font-family:var(--f);font-size:14px}
select:focus{outline:none;border-color:var(--tinta)}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.check{display:flex;align-items:center;gap:9px;margin-top:15px;font-size:13.5px;color:var(--tinta2);cursor:pointer}
.check input{accent-color:var(--marca);width:15px;height:15px}
.blocos-lista{display:flex;flex-direction:column;gap:2px}
.cue{border:1px solid transparent;border-radius:var(--r3);padding:10px 12px;display:flex;gap:12px;
  cursor:pointer;transition:.11s}
.cue:hover{background:var(--papel)}
.cue.tocando{background:#fff;border-color:var(--linha2);box-shadow:var(--s1)}
.cue.movida .cue-tempo::after{content:"⇱";color:var(--marca);margin-left:3px;font-size:11px}
.cue-tempo{font-family:var(--m);font-size:11px;color:var(--tinta3);min-width:38px;padding-top:2px}
.cue.tocando .cue-tempo{color:var(--marca)}
.cue-texto{flex:1;background:none;border:none;color:var(--tinta);font-family:var(--f);font-size:14px;
  resize:none;line-height:1.45;overflow:hidden;padding:0;min-height:20px}
.cue-texto:focus{outline:none}
.vazio{color:var(--tinta3);font-size:13.5px;text-align:center;padding:44px 18px;line-height:1.75}
.galeria{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.estilo{background:#111;border:2px solid transparent;border-radius:var(--r3);height:76px;
  cursor:pointer;position:relative;overflow:hidden;transition:.14s;display:grid;place-items:center;
  box-shadow:var(--s1)}
.estilo:hover{transform:translateY(-1px);box-shadow:var(--s2)}
.estilo.ativo{border-color:var(--marca)}
.estilo canvas{width:100%;height:100%;object-fit:cover}
.estilo .nome{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.74);font-size:9.5px;
  padding:3px;color:#fff;text-align:center;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.estado{font-size:12.5px;color:var(--tinta3);display:flex;align-items:center;gap:7px;
  max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.estado::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--linha2);flex-shrink:0}
.estado.ativo{color:var(--ambar)}.estado.ativo::before{background:#D97706;animation:pulsa 1.1s infinite}
.estado.ok{color:var(--verde)}.estado.ok::before{background:var(--verde)}
.estado.erro{color:var(--marca)}.estado.erro::before{background:var(--marca)}
@keyframes pulsa{50%{opacity:.2}}
.fundo-modal{position:fixed;inset:0;background:rgba(15,15,17,.42);backdrop-filter:blur(4px);
  z-index:60;display:grid;place-items:center;padding:24px}
.modal{background:#fff;border-radius:var(--r);max-width:470px;width:100%;max-height:86vh;
  overflow-y:auto;box-shadow:var(--s3)}
.modal-topo{padding:24px 26px 18px;border-bottom:1px solid var(--linha);display:flex;
  justify-content:space-between;align-items:flex-start;gap:14px}
.modal-topo h3{font-size:20px;font-weight:650;letter-spacing:-.025em;margin-bottom:5px}
.modal-topo p{font-size:13.5px;color:var(--tinta2)}
.modal-corpo{padding:20px 26px 26px}
.opcao{background:#fff;border:1px solid var(--linha2);border-radius:var(--r3);padding:15px 17px;
  cursor:pointer;transition:.13s;margin-bottom:9px}
.opcao:hover{border-color:var(--tinta);box-shadow:var(--s2)}
.opcao.destaque{border-color:var(--marca);background:#FBF5F9}
.opcao-topo{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.opcao-nome{font-size:14.5px;font-weight:600}
.opcao-nota{font-size:12.5px;color:var(--tinta2);margin-top:5px;line-height:1.5}
.etiqueta{display:inline-block;background:var(--marca);color:#fff;font-size:9.5px;padding:2px 8px;
  border-radius:99px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;margin-left:8px}
.barra{height:8px;background:var(--papel2);border-radius:99px;overflow:hidden;margin:16px 0 10px}
.barra i{display:block;height:100%;background:var(--marca);width:0;transition:width .2s;border-radius:99px}
.progresso-txt{font-size:13px;color:var(--tinta2);text-align:center;font-family:var(--m)}
.anuncio{max-width:880px;margin:0 auto;padding:0 24px;min-height:1px}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--linha2);border-radius:6px;border:3px solid #fff}

/* botão flutuante que reencontra o bloco em reprodução */
#btn-seguir{position:sticky;top:4px;z-index:5;width:100%;margin-bottom:8px;
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-color:rgba(117,20,80,.25);color:var(--marca);font-weight:600;
  box-shadow:0 4px 14px rgba(117,20,80,.12)}

/* destaque mais forte do bloco em reprodução — substitui a rolagem automática */
.cue.tocando{background:#fff;border-color:rgba(117,20,80,.3);
  box-shadow:0 2px 12px rgba(117,20,80,.1);position:relative}
.cue.tocando::before{content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:3px;
  background:var(--marca);border-radius:0 3px 3px 0}
.cue.tocando .cue-texto{font-weight:600}


/* cabeçalho da ferramenta em telas estreitas: nada pode empurrar a largura */
@media(max-width:640px){
  .topo{padding:0 14px}
  .topo #topo-arquivo{display:none}
  .marca-txt{font-size:14px}
  .btn.pequeno{padding:7px 12px;font-size:13px}
}
/* área do vídeo com folga para o dedo e sem rolagem própria */
@media(pointer:coarse){
  .palco{padding:16px 12px;overflow:hidden;touch-action:pan-y}
  .player{touch-action:none}
  .bloco{padding:18px 12px}
}


/* ═══ cabeçalho da ferramenta em tela estreita ═══
   O botão "Baixar" aparecia depois da transcrição e empurrava o cabeçalho além
   da largura da tela, criando rolagem lateral — a página "sambava" e o dedo
   disputava entre mover a legenda e arrastar a página. Aqui nada pode crescer
   além do disponível. */
.topo{flex-wrap:nowrap}
.topo>*{min-width:0}
.topo .marca{flex:0 0 auto}
.topo #topo-arquivo{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topo>div:last-child{flex:0 0 auto;display:flex;align-items:center;gap:10px;min-width:0}
.estado{max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:760px){
  .topo{height:58px;padding:0 12px;gap:8px}
  .topo #topo-arquivo{display:none}
  .marca-txt em{display:none}
  .estado{max-width:26vw;font-size:11.5px}
  #btn-baixar{padding:8px 14px;font-size:13.5px}
}
@media(max-width:420px){
  .marca-txt{display:none}
  .topo{gap:6px}
  .estado{max-width:38vw;font-size:11px}
}

/* ═══ faixa de progresso no celular ═══
   No computador o texto de estado cabe no cabeçalho. Em tela estreita ele não
   cabe, e escondê-lo deixou a pessoa sem saber se algo estava acontecendo.
   Esta faixa aparece só enquanto há trabalho em andamento. */
.faixa-progresso{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-top:1px solid rgba(117,20,80,.14);padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 24px rgba(21,4,14,.1)}
.faixa-progresso.ativa{display:block}
.faixa-progresso .barra{height:6px;margin:0 0 8px}
.faixa-progresso .txt{font-size:12.5px;color:var(--tinta2);text-align:center;
  font-family:var(--m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(min-width:761px){.faixa-progresso{display:none !important}}


/* ═══ sugestões da próxima ferramenta ═══ */
.proxima{max-width:900px;margin:44px auto 0;padding:0 20px}
.proxima h3{font-size:19px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px;text-align:center}
.proxima p.sub{text-align:center;color:var(--tinta2);font-size:14.5px;margin-bottom:20px}
.proxima-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.proxima-card{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);border:1px solid rgba(117,20,80,.12);border-radius:13px;
  padding:17px 19px;text-decoration:none;color:inherit;transition:.16s;display:block}
.proxima-card:hover{transform:translateY(-2px);border-color:rgba(117,20,80,.3);
  box-shadow:0 10px 26px rgba(117,20,80,.1);text-decoration:none}
.proxima-card b{display:block;font-size:15px;margin-bottom:5px;letter-spacing:-.015em}
.proxima-card span{font-size:13.5px;color:var(--tinta2);line-height:1.5}


.aviso-erro{display:none;background:#FEF2F2;border:1px solid #F0A8A4;color:#8C1D18;
  border-radius:11px;padding:13px 16px;margin:0 auto 18px;max-width:900px;font-size:14px;
  line-height:1.55}


/* escolhas de destaque combináveis */
.destaques{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin-top:8px}
.destaques .check{margin-top:0;font-size:13px}


/* canvas do preview: ocupa o vídeo inteiro e mostra exatamente o que será gravado */
.camada-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.bloco{background:transparent}
.bloco:hover{outline:1.5px dashed rgba(255,255,255,.5);outline-offset:2px;border-radius:6px}


/* ═══ navegação única, idêntica em toda página ═══ */
.nav{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;min-width:0}
.nav a{font-size:14px;color:var(--tinta2);text-decoration:none;padding:8px 12px;
  border-radius:8px;white-space:nowrap;transition:.13s}
.nav a:hover{background:var(--papel2);color:var(--tinta);text-decoration:none}
.nav a.atual{color:var(--marca);font-weight:600;background:rgba(117,20,80,.08)}
.btn-apoiar{background:var(--marca);color:#fff !important;font-weight:600;margin-left:6px}
.btn-apoiar:hover{background:var(--marca2) !important;color:#fff !important}
@media(max-width:720px){
  .nav a{padding:7px 9px;font-size:13px}
  .nav a:nth-child(4){display:none}
}
@media(max-width:480px){.nav a:nth-child(3){display:none}}