/* ===========================================================================
   INTERFACE CLARA, como o dono pediu desde o inicio: "preto, vermelho, mas
   uma interface clara, profissional de dashboard". Fundo cinza claro, cartoes
   brancos, preto e vermelho como acento. Nada de tela preta.
   DESENHADO NO CELULAR PRIMEIRO: 90% do trafego vem de 390px de largura, entao
   as medidas base sao as do telefone e o computador so recebe mais espaco.
   Da USDO: cartao branco, cantos grandes, selo verde no escolhido, botao
   pilula. Do SILVA GYM: cartao escuro com vermelho no meio dos brancos.
   Do Clipgen: o selo de nota flutuando sobre o corte.
   =========================================================================== */
/* ===========================================================================
   FUNDO PRETO, A ESTETICA DO /en/.
   O socio preferiu a casca escura que ja estava no ar nas outras linguas e
   pediu ela no site inteiro. A troca e toda por token: `--tinta` deixa de
   ser a cor do TEXTO escuro e passa a ser a cor da SUPERFICIE escura, e o
   texto vira quase branco. Os nomes continuam os mesmos de proposito, senao
   seriam ~400 pontos de CSS para reescrever a mao, cada um uma chance de
   esquecer um.
   Palheta lida da propria pagina /en/: fundo #000, texto #fafafa, linha em
   branco a 7,5%, mesmo degrade laranja->vermelho, verde #34d399.
   =========================================================================== */
:root{
  --fundo:#000; --branco:#0e0e10; --cinza:#141416;
  --tinta:#fafafa; --t2:rgba(250,250,250,.66); --t3:rgba(250,250,250,.44); --t4:rgba(250,250,250,.2);
  --ln:rgba(255,255,255,.075); --ln2:rgba(255,255,255,.14);
  /* superficie que e escura por natureza (miniatura de video, player,
     tarja da nota): nao segue o tema, segue o conteudo */
  --escuro:#0a0a0b;
  --verm:#ff0033; --lar:#ff6a2b;
  --grad:linear-gradient(126deg,#ff6a2b,#ff0033 58%,#d4001f);
  --ok:#34d399;
  /* no escuro a sombra nao separa nada: quem separa e a borda clara. */
  --s1:0 1px 1px rgba(0,0,0,.4);
  --s2:0 1px 2px rgba(0,0,0,.45);
  --s3:0 10px 34px rgba(0,0,0,.6);
  --e:cubic-bezier(.22,1,.36,1);
  --mola:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* TRAVA CONTRA O ZOOM DO IOS.
   Vale para todo campo de texto da pagina, inclusive os que eu escrever
   depois sem lembrar desta regra. Abaixo de 16px o Safari do iPhone amplia
   a pagina no toque e nao desfaz. */
input,textarea,select{font-size:max(16px,1em)}
html{-webkit-text-size-adjust:100%}
/* OVERFLOW-X:HIDDEN QUEBRAVA O CABECALHO FIXO.
   `hidden` faz do body um container de rolagem, e `position:sticky` passa a
   se prender a ELE, nao a janela: o topo preto subia junto com a pagina e
   sumia. `clip` corta o que vaza na horizontal do mesmo jeito e NAO cria
   container, entao o sticky volta a valer. */
body{background:var(--fundo);color:var(--tinta);line-height:1.5;overflow-x:clip;min-height:100svh;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;font-feature-settings:'cv11' 1,'ss01' 1;
  font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}
::selection{background:rgba(255,0,51,.16)}

/* ====================================================== casca do painel
   "n ta parecendo dashboard": entao a casca existe desde o primeiro segundo.
   Computador: lateral preta + area clara. Celular: topo preto com avatar e
   barra de abas embaixo, que e o que faz parecer aplicativo e nao pagina. */
.app{display:grid;grid-template-columns:262px 1fr;min-height:100svh}
@media(max-width:1000px){ .app{grid-template-columns:1fr} }

.lat{background:#09090a;color:#fff;padding:18px 12px;display:flex;flex-direction:column;gap:16px;
  position:sticky;top:0;height:100svh;overflow-y:auto;scrollbar-width:none;border-right:1px solid rgba(255,255,255,.06)}
.lat::-webkit-scrollbar{display:none}
/* O FLEX ESPREMIA OS BLOCOS EM VEZ DE DEIXAR A GAVETA ROLAR.
   `.lat` e uma coluna flex. Quando o conteudo passa da altura da tela, o
   padrao do flex e ENCOLHER os filhos (`flex-shrink:1`), nao estourar: o
   cartao de nivel vinha cortado na metade, o "Programar com IA" achatado e
   o rodape com o avatar sumia. Como ninguem estoura, o `overflow-y:auto`
   nunca entra em acao e nao ha o que rolar.
   Com `flex:none` cada bloco mantem a altura natural, a coluna passa a ser
   mais alta que a gaveta e AI sim ela rola. */
.lat > *{flex:0 0 auto}
/* NO CELULAR A LATERAL E A GAVETA DO HAMBURGUER.
   Antes havia uma capsula de icones flutuando embaixo: o dono disse que
   estava "mega confuso" e pediu hamburguer padrao. Agora o celular usa O
   MESMO menu do computador, deslizando pela esquerda, entao nao existe uma
   segunda lista de atalhos com outra ordem para a pessoa decifrar. */
@media(max-width:1000px){
  /* ALTURA PELO TOP+BOTTOM, NUNCA POR `height`.
     No Safari do iPhone o `height:100%` de um elemento fixo resolve contra
     a janela INICIAL, que inclui a area das barras do navegador: a gaveta
     ficava mais alta que o visivel e o rodape dela (avatar, e-mail, sair)
     era cortado. Com top e bottom ancorados, a altura e sempre a que se ve.
     E `overscroll-behavior:contain` impede o toque de rolar a pagina atras. */
  /* `bottom:0` NUM ELEMENTO FIXO USA A JANELA GRANDE DO SAFARI.
     No iPhone o Safari tem duas alturas: a "grande" (barras escondidas) e a
     "pequena" (barras a vista). Elemento fixo ancorado em top+bottom usa a
     GRANDE, entao o pe da gaveta (avatar, e-mail, sair) ficava embaixo da
     barra do navegador: existia, mas nao dava para ver nem tocar. `100svh`
     e exatamente a altura pequena, a que sempre esta visivel. */
  .lat{position:fixed;top:0;left:0;bottom:auto;width:min(84vw,300px);
    height:100svh;max-height:100svh;z-index:70;
    border-right:0;padding:calc(14px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    transform:translateX(-103%);transition:transform .32s var(--e);visibility:hidden}
  body.gaveta .lat{transform:none;visibility:visible;box-shadow:24px 0 60px rgba(0,0,0,.5)}
  body.gaveta{overflow:hidden}
  /* O X, O LOGO E O CARTAO DE NIVEL ESTAVAM UM EM CIMA DO OUTRO.
     O dono: "assim q abre o menu no mobile o logo upar io e o x estao mt
     colados no card nivel 1" e "o card nivel 1 ta mt colado no visao geral".
     A conta explica: a gaveta comeca em 14px, o logo tem ~25px de altura e
     termina em 39, mas o X e um circulo de 34px que vai ate 48. Com o `gap`
     de 5px (apertado la embaixo para o menu caber sem rolar), o cartao de
     nivel comecava em 44 — QUATRO PIXELS DENTRO do botao de fechar.
     Conserto: a faixa do cabecalho passa a ter a altura do X, entao os dois
     ficam no mesmo andar, e o cartao ganha respiro em cima e embaixo. Custa
     ~23px, que saem do espaco vazio que o `margin-top:auto` do rodape ja
     empurrava para o fim da gaveta. Nada precisa encolher. */
  .lat .logo{min-height:34px;align-items:center;margin-bottom:6px}
  .lat .nivel{margin-bottom:9px}
}
/* O IPHONE 15 TEM 852px DE ALTURA, MAS O SAFARI MOSTRA ~740.
   Com o ritmo do desktop a gaveta nao cabia e o fim dela sumia. Aqui tudo
   encolhe o suficiente para caber inteira, sem mudar nada no computador. */
/* A GAVETA TEM QUE CABER SEM ROLAR.
   Medida no iPhone 15 com as barras do Safari a vista: sobram ~660px, e o
   conteudo no ritmo do computador dava 811px. Rolar um menu de oito itens e
   sinal de que o menu esta grande demais, nao de que falta rolagem. Cada
   valor abaixo foi cortado ate a lista fechar dentro da tela, sem encostar
   nos 44px de area de toque que cada item precisa ter. */
/* A GAVETA PRECISAVA DE 795px E A TELA DO IPHONE DA 660.
   Os 4 rotulos de grupo ("Principal", "Ferramentas", "Distribuicao",
   "Conta") custavam ~150px num menu de OITO itens: mais altura do que
   informacao. Viram um filete entre os grupos, que separa igual e custa
   1px. Assim nao preciso espremer os itens, que precisam de 44px de area
   de toque para o dedo acertar. */
@media(max-width:1000px) and (max-height:820px){
  .lat .gpt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;padding:0}
  .lat #menu > div + div{border-top:1px solid rgba(255,255,255,.09);margin-top:7px;padding-top:7px}
  .lat .mi{padding:7px 9px;margin-bottom:0}
  .lat .nivel{padding:7px 10px}
  .lat .cta-ia{margin-top:8px}
}
@media(max-width:1000px) and (max-height:900px){
  .lat{gap:5px;padding-left:11px;padding-right:11px}
  .lat .logo{font-size:15px;padding:0 6px}
  .lat .logo .mk{width:22px;height:22px}
  .nivel{padding:7px 9px}
  .nivel .nt{margin-bottom:5px}
  .nivel .nt b{font-size:11.5px}
  .nivel .nb{height:5px}
  .gpt{margin:7px 0 2px;font-size:10px;padding:0 9px}
  .mi{padding:5px 9px;font-size:12.5px;margin-bottom:0;gap:9px}
  .mi .pt{width:26px;height:26px;border-radius:8px}
  .mi .pt svg{width:14px;height:14px}
  .cta-ia{margin-top:7px;padding:8px 10px;gap:9px}
  .cta-ia .ic{width:25px;height:25px}
  .cta-ia .ic svg{width:13px;height:13px}
  .cta-ia b{font-size:12.5px} .cta-ia small{font-size:10px}
  .lat .rod{padding:8px 2px 0}
  .av{width:27px;height:27px;font-size:11px}
  .lat .rod b{font-size:12px} .lat .rod small{font-size:10.5px}
  .lat .sair{width:27px;height:27px}
}
.veu{position:fixed;inset:0;z-index:69;background:rgba(10,10,11,.55);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .28s var(--e)}
body.gaveta .veu{opacity:1;pointer-events:auto}
@media(min-width:1001px){ .veu{display:none} }
/* SAIR DA CONTA.
   Nao existia caminho nenhum: quem entrava com uma conta ficava preso nela,
   e o dono tentou deslogar e nao conseguiu. Fica no rodape da lateral, ao
   lado do nome e do e-mail, que e onde todo painel poe isso. */
.lat .sair{margin-left:auto;flex:none;width:30px;height:30px;border-radius:9px;
  background:rgba(255,255,255,.09);color:rgba(255,255,255,.72);display:flex;
  align-items:center;justify-content:center;transition:.16s}
.lat .sair:hover{background:rgba(255,0,51,.22);color:#fff}
.lat .sair svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* o X fecha a gaveta; no computador nao existe gaveta para fechar */
.fecha-gav{position:absolute;top:calc(14px + env(safe-area-inset-top));right:12px;width:34px;height:34px;
  border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:none;
  align-items:center;justify-content:center;font-size:17px;line-height:1}
@media(max-width:1000px){ .fecha-gav{display:flex} .lat .logo{padding-right:44px} }
/* HAMBURGUER, so no celular */
.hamb{display:none}
@media(max-width:1000px){
  .hamb{display:flex;order:0;flex:none;width:34px;height:34px;border-radius:10px;
    background:rgba(255,255,255,.14);color:#fff;align-items:center;justify-content:center}
  .hamb svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;stroke-linecap:round;fill:none}
}
.lat .logo{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;letter-spacing:-.04em;padding:2px 8px 0}
.lat .logo .mk{width:25px;height:25px;border-radius:8px;background:var(--grad);display:flex;
  align-items:center;justify-content:center;font-size:10px}
.nivel{border-radius:9px;padding:10px 11px;background:var(--grad);box-shadow:0 6px 18px rgba(255,0,51,.22);
  position:relative;overflow:hidden}
.nivel::after{content:'';position:absolute;inset:0;background:radial-gradient(70% 90% at 92% 0%,rgba(255,255,255,.3),transparent 62%)}
.nivel>*{position:relative;z-index:1}
/* em 262px "Nivel 1" e "10 / 100 XP" nao cabiam na mesma linha e o texto
   saia cortado pela borda do cartao. Agora quebra em duas linhas quando
   precisa, e nada e cortado. */
.nivel .nt{display:flex;align-items:baseline;justify-content:space-between;gap:6px;font-size:10.5px;
  color:rgba(255,255,255,.82);margin-bottom:8px;flex-wrap:wrap}
.nivel .nt b{color:#fff;font-size:12px;white-space:nowrap}
.nivel .nt span{white-space:nowrap;font-variant-numeric:tabular-nums}
.nivel .nb{height:6px;border-radius:999px;background:rgba(255,255,255,.3);overflow:hidden}
.nivel .nb i{display:block;height:100%;width:0;background:#fff;border-radius:999px;transition:width .9s var(--e)}
/* BARRA CHEIA NAO PODE SER UM RETANGULO BRANCO.
   Em 100/100 a barra inteira virava branca sobre o cartao vermelho e parecia
   defeito, nao conquista. Cheia ela troca para o verde-limao da marca e
   ganha brilho: ai o olho le "terminei", nao "quebrou". */
.nivel.cheio .nb{background:rgba(10,10,11,.28)}
.nivel.cheio .nb i{background:linear-gradient(90deg,#c6f24e,#2ee88a);
  box-shadow:0 0 10px rgba(198,242,78,.75)}
.nivel.cheio .nt b::after{content:'completo';margin-left:6px;font-size:9.5px;font-weight:700;
  letter-spacing:.02em;background:#c6f24e;color:#0a0a0b;border-radius:999px;padding:2px 6px;
  vertical-align:1px}
/* A LATERAL ESTAVA ILEGIVEL E SEM GRACA.
   Os itens bloqueados ficavam em 26% de opacidade com um selo "em breve" em
   cima: nao dava para ler nem o nome nem o selo. Agora o item bloqueado tem
   contraste de leitura e o que marca o bloqueio e um cadeado pequeno, nao um
   rotulo competindo com o texto. */
/* BOTAO EM DESTAQUE DA LATERAL.
   Fica ABAIXO do menu, nao colado no cartao de nivel, e em azul-verde: se
   usasse o mesmo vermelho do nivel os dois brigariam e nenhum se destacaria.
   Cor diferente e o que faz ele saltar. */
.cta-ia{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:11px 12px;
  border-radius:12px;color:#fff;transition:.2s var(--e);position:relative;overflow:hidden;
  margin-top:14px;
  background:linear-gradient(126deg,#00c2a8 0%,#1b9bf0 58%,#5b5bf0 100%);
  box-shadow:0 8px 22px rgba(27,155,240,.3)}
.cta-ia::after{content:'';position:absolute;inset:0;background:radial-gradient(70% 100% at 88% 0%,rgba(255,255,255,.32),transparent 60%)}
.cta-ia:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(27,155,240,.42)}
.cta-ia .ic{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.2);flex:none;
  display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.cta-ia .ic svg{width:15px;height:15px;fill:#fff}
.cta-ia .tx{min-width:0;position:relative;z-index:1}
.cta-ia b{display:block;font-size:13.5px;font-weight:620;letter-spacing:-.012em}
.cta-ia small{display:block;font-size:11px;color:rgba(255,255,255,.8);margin-top:1px}

.gpt{font-size:11px;letter-spacing:0;color:rgba(255,255,255,.5);
  padding:0 11px;margin:13px 0 6px;font-weight:500}
/* texto quase branco: o cinza de antes nao lia sobre o preto */
.mi{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;font-size:13.5px;
  color:rgba(255,255,255,.92);width:100%;text-align:left;transition:.15s;margin-bottom:2px;
  white-space:nowrap;overflow:hidden;font-weight:500;letter-spacing:-.008em}
/* icone com peso: caixa maior, fundo mais presente e traco mais grosso */
.mi .pt{width:31px;height:31px;flex:none;display:flex;align-items:center;justify-content:center;
  color:#fff;background:rgba(255,255,255,.12);border-radius:9px;transition:.18s var(--e)}
.mi .pt svg{width:16.5px;height:16.5px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mi:hover{background:rgba(255,255,255,.06);color:#fff}
.mi:hover .pt{background:rgba(255,255,255,.2)}
.mi.on{background:rgba(255,255,255,.1);color:#fff;font-weight:600}
.mi.on .pt{background:var(--grad);color:#fff}
.mi.on::before{content:'';position:absolute;left:-14px;width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--verm)}
.mi{position:relative}
.mi.preso{color:rgba(255,255,255,.62)}
.mi.preso .pt{color:rgba(255,255,255,.5);background:rgba(255,255,255,.07)}
.mi .tg{margin-left:auto;flex:none;display:flex;align-items:center;color:rgba(255,255,255,.3)}
.mi .tg svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.9}
.lat .rod{margin-top:auto;border-top:1px solid rgba(255,255,255,.07);padding:12px 4px 2px;display:flex;align-items:center;gap:10px}
.av{border-radius:10px;background:var(--grad);flex:none;display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#fff;width:32px;height:32px;font-size:12.5px}
/* a foto e o nome no pe do menu nao abriam nada: so o avatar do topo
   levava a Minha conta, e ninguem adivinha isso */
.lat .rod-eu{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-align:left;
  border-radius:10px;padding:4px;margin:-4px;transition:.15s}
.lat .rod-eu:hover{background:rgba(255,255,255,.07)}
.lat .rod-tx{min-width:0}
.lat .rod b{font-size:12.5px;display:block;line-height:1.3;color:#fff}
.lat .rod small{font-size:11.5px;color:rgba(255,255,255,.5);display:block;
  overflow:hidden;text-overflow:ellipsis;max-width:180px}


/* --------------------------------------------------------- topo fixo */
.topo{position:sticky;top:0;z-index:40;padding:11px 16px;
  background:rgba(0,0,0,.82);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--ln);display:flex;align-items:center;gap:11px}
/* O TOPO DO CELULAR EM DUAS LINHAS.
   Logo, barra de progresso, ficha de XP e avatar nao cabem lado a lado em
   390px: tudo ficava espremido e a barra sumia. Agora a primeira linha e
   marca e conta, e a barra de etapas ocupa a largura inteira embaixo. */
@media(max-width:1000px){
  .topo{background:#000;border-bottom:1px solid var(--ln);color:#fff;
    flex-wrap:wrap;row-gap:11px;padding:12px 16px 13px;
    /* ERA `position:relative` AQUI. Entrou junto com a logo centralizada (a
       marca sai do fluxo e precisa de um pai posicionado) e, sem querer,
       sobrescreveu o `position:sticky` da regra base: o cabecalho preto ia
       embora ao rolar no celular. `sticky` tambem serve de pai posicionado,
       entao a logo continua centrada e o topo volta a grudar. */
    position:sticky;top:0}
  /* A MARCA SAI DO FLUXO PARA FICAR NO MEIO DE VERDADE.
     Como item do flex ela nunca centraliza: a esquerda tem so o hamburguer e
     a direita tem XP mais avatar, entao o meio do flex nao e o meio da tela.
     Fora do fluxo, o 50% e o 50% da barra. */
  .topo .marca{order:1;font-size:16px;position:absolute;left:50%;top:12px;height:34px;
    margin:0;transform:translateX(-50%);align-items:center;pointer-events:none}
  .topo .xp{order:2;margin-left:auto}
  .topo .av{order:3}
  .topo .barra{order:4;flex-basis:100%;max-width:none}
}
.topo .mig{font-size:12px;color:var(--t3);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:1000px){ .topo .mig{display:none} }
.topo .marca{display:none}
@media(max-width:1000px){
  .topo .marca{display:flex;color:#fff}
  .topo .barra{max-width:none;background:rgba(255,255,255,.18)}
  .topo .xp{color:#fff}
  .topo .xp .dot{background:#fff}
}
.marca{display:flex;align-items:center;gap:7px;font-size:15.5px;font-weight:700;letter-spacing:-.04em;flex:none}
.marca .mk{width:24px;height:24px;border-radius:7px;background:var(--grad);display:flex;
  align-items:center;justify-content:center;font-size:10px;color:#fff}
/* BARRA SEGMENTADA, uma peca por etapa.
   A barra continua nao dizia nada: nao dava para saber em que etapa a pessoa
   estava nem quanto faltava. Agora sao nove pecinhas, a atual pulsando. E o
   XP virou uma ficha que da um pulo quando sobe, em vez de um numero solto. */
.barra{flex:1;display:flex;gap:3px;max-width:320px;align-items:center}
.barra span{flex:1;height:5px;border-radius:999px;background:var(--ln2);transition:.45s var(--e)}
.barra span.ok{background:var(--grad)}
.barra span.agora{background:var(--grad);box-shadow:0 0 0 0 rgba(255,0,51,.5);animation:bate 1.8s infinite}
@keyframes bate{0%,100%{box-shadow:0 0 0 0 rgba(255,0,51,.45)}55%{box-shadow:0 0 0 5px rgba(255,0,51,0)}}
@media(max-width:1000px){ .barra span{background:rgba(255,255,255,.22)} }

.xp{display:flex;align-items:center;gap:6px;flex:none;background:rgba(255,255,255,.1);color:#fff;
  border-radius:999px;padding:5px 11px 5px 7px;transition:transform .4s var(--mola)}
@media(max-width:1000px){ .xp{background:rgba(255,255,255,.14)} }
.xp.subiu{transform:scale(1.14)}
.xp .raio{width:17px;height:17px;border-radius:50%;background:var(--grad);flex:none;
  display:flex;align-items:center;justify-content:center}
.xp .raio svg{width:10px;height:10px;fill:#fff}
.xp b{font-size:12.5px;font-weight:650;letter-spacing:-.01em;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- fluxo */
/* AR ENTRE OS BLOCOS.
   O dono: "to achando tudo mt grudado e grande como um todo". Eram 8px de
   respiro entre cartoes de assunto diferente, menos do que o espaco dentro
   de cada um: por isso a tela lia como uma parede unica. O ar entre blocos
   agora e MAIOR que o ar interno, que e o que separa assunto de assunto.
   18px ainda estava perto demais ("cada bloco de info tinha q ta mais
   afastado do outro"): o respiro entre assuntos e o DOBRO do respiro de
   dentro do cartao, e so assim o olho entende onde um acaba. */
.fluxo{padding:16px 18px calc(150px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:30px;max-width:560px;margin:0 auto;width:100%}
@media(min-width:1001px){ .fluxo{padding:26px 24px 140px;gap:34px} }

/* ANCORA DA ROLAGEM.
   Bloco alto centralizado esconde a propria primeira linha atras do topo
   fixo. Com scroll-margin ele pousa logo abaixo do topo, e o `block:'start'`
   da funcao `ancorar` passa a ser confiavel em qualquer altura de bloco. */
.bl{animation:nasce .55s var(--e) both;scroll-margin-top:104px}
@media(min-width:1001px){ .bl{scroll-margin-top:76px} }
@keyframes nasce{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* a pergunta */
/* A BORDA VERMELHA EM VOLTA DO CARTAO PESAVA DEMAIS.
   Cartao ativo nao precisa de anel: ele sobe por elevacao e por um tracinho
   vermelho curto no topo, que e marca de foco sem virar moldura. */
.perg{background:var(--branco);border:1px solid var(--ln);border-radius:15px;padding:16px;
  box-shadow:var(--s2);position:relative}
/* no claro o cartao ativo subia por sombra; no preto sombra nao aparece,
   entao quem marca o ativo e a borda mais clara e um halo curto */
.perg.ativa{border-color:rgba(255,255,255,.16);box-shadow:0 0 0 1px rgba(255,255,255,.05),0 18px 40px rgba(0,0,0,.55)}
.perg.ativa::before{content:'';position:absolute;top:0;left:16px;width:34px;height:3px;
  background:var(--grad);border-radius:0 0 3px 3px}
.perg h2{font-size:18px;line-height:1.3;letter-spacing:-.015em;font-weight:620}
.perg p{color:var(--t2);font-size:13.5px;margin-top:7px;line-height:1.55}
/* o titulo grande da etapa ja diz o assunto; dentro do cartao fica so a
   instrucao, para a tela nao dizer a mesma coisa duas vezes */
.perg .rot{margin-top:0;font-size:13.5px;color:var(--t2);line-height:1.5}
.perg .rot + .campo,.perg .rot + .ops{margin-top:12px}
.campo{width:100%;border:1.5px solid var(--ln2);border-radius:11px;background:var(--branco);
  /* 16px NAO E ESCOLHA DE ESTILO, E O QUE IMPEDE O IPHONE DE DAR ZOOM.
     O Safari do iOS amplia a pagina sozinho quando a pessoa toca num campo
     com fonte MENOR que 16px, e nao volta: tudo fica gigante e cortado, e o
     menu lateral passa a ser desenhado contra a janela ampliada. Era
     15,5px aqui e 14,5px no celular estreito, entao qualquer toque num
     campo quebrava a tela inteira. Nenhum campo pode descer de 16px. */
  padding:12px 13px;font-size:16px;color:var(--tinta);margin-top:10px;transition:.2s}
/* o placeholder era cinza claro dentro de um campo cinza: nao lia. Agora tem
   contraste de texto de verdade. */
 /* A FONTE DO CAMPO NAO PODE DESCER DE 16px (o iPhone amplia a pagina),
    mas a do TEXTO DE EXEMPLO pode: o iOS decide o zoom pelo font-size do
    input, nao pelo do ::placeholder. Entao o exemplo fica menor sem trazer
    o bug de volta. */
.campo::placeholder{color:rgba(250,250,250,.38);font-size:14px}
.campo:focus{outline:0;border-color:var(--verm);background:var(--branco);box-shadow:0 0 0 4px rgba(255,0,51,.09)}
.dica{font-size:12.5px;color:var(--t3);margin-top:10px;line-height:1.5}
.erro{font-size:13px;color:var(--verm);margin-top:9px}
/* ERA UM LINK SUBLINHADO e ninguem via que dava para clicar. Agora e botao
   secundario de verdade: borda, altura de toque e seta. */
/* acao secundaria: nao e caixa, nao compete com o botao principal nem com o
   campo. Fica embaixo do rodape, discreta, mas com alvo de toque de verdade. */
.elo{display:inline-flex;align-items:center;gap:6px;padding:8px 4px;font-size:13.5px;font-weight:550;
  color:var(--t2);background:none;border:0;transition:.16s var(--e)}
.elo u{text-decoration-color:var(--ln2);text-underline-offset:4px}
.elo:hover{color:var(--tinta)}
.elo:hover u{text-decoration-color:var(--tinta)}

/* a resposta vira selo */
.selo{display:flex;align-items:center;gap:10px;background:var(--branco);border:1px solid var(--ln);
  border-radius:12px;padding:8px 11px;box-shadow:var(--s1)}
.selo .ck{width:24px;height:24px;border-radius:50%;background:var(--ok);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;
  animation:pop .4s var(--mola)}
@keyframes pop{from{transform:scale(0) rotate(-40deg)}to{transform:scale(1) rotate(0)}}
.selo .tt{min-width:0;flex:1}
.selo .tt b{display:block;font-size:12px;color:var(--t3);font-weight:500}
.selo .tt span{display:block;font-size:13.5px;font-weight:620;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selo .mais{font-size:11.5px;font-weight:700;color:var(--ok);flex:none}

/* cartoes */
.cart{background:var(--branco);border:1px solid var(--ln);border-radius:15px;padding:15px;box-shadow:var(--s2)}
.cart.fogo{background:#121214;color:#fff;position:relative;overflow:hidden;box-shadow:var(--s3);border:1px solid rgba(255,255,255,.1)}
.cart.fogo::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(76% 120% at 104% -10%,rgba(255,0,51,.78),transparent 58%)}
.cart.fogo>*{position:relative;z-index:1}
.cart.fogo{border-color:transparent}
/* cinza em cima de preto nao le */
.cart.fogo .ch h3{color:#fff}
.cart.fogo .ch span{color:rgba(255,255,255,.66)}
.cart.fogo .r{color:rgba(255,255,255,.92);font-size:13.5px}
.cart .ch{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
/* CAIXA ALTA SAIU de tudo: rotulo em maiuscula com espacamento entre letras
   deixa a tela dura e custa leitura. */
.cart .ch h3{font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:var(--tinta);text-transform:none}
.cart .ch span{font-size:12px;color:var(--t3);letter-spacing:0}
.cart .v{font-size:clamp(23px,6vw,28px);font-weight:680;letter-spacing:-.02em;line-height:1.05;display:block}
.cart .v small{font-size:13px;font-weight:600;color:var(--t3)}
.cart .r{font-size:12.5px;color:var(--t2);margin-top:5px;display:block;line-height:1.45}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:440px){ .dupla{grid-template-columns:1fr} }

/* opcoes, alvo grande para o dedo */
.ops{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
@media(min-width:620px){ .ops{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))} }
/* OS TRES FORMATOS FICAM NA MESMA LINHA.
   Com duas colunas, o terceiro caía sozinho embaixo e quebrava a comparação,
   que é justamente o que a pessoa precisa fazer ali: ver os três lado a lado. */
.ops.formatos{grid-template-columns:repeat(3,1fr);gap:8px}
/* A LINHA DE BAIXO ENCOSTAVA NA BORDA E PARECIA CORTADA.
   "Reels, Shorts e TikTok" quebrava em duas linhas dentro de 104px e a
   segunda ficava colada no traco do cartao. Texto de uma linha so, e uma
   folga a mais embaixo para nada beijar a borda. */
.ops.formatos .op{padding:9px 7px 12px}
.ops.formatos .op small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ops.formatos .op b{font-size:12.5px}
.ops.formatos .op b .prop{display:block;margin-left:0;margin-top:1px}
.ops.formatos .op small{font-size:10.5px;line-height:1.3}
.ops.formatos .op .mini{height:52px;margin-bottom:8px}
@media(max-width:360px){
  .ops.formatos .op b{font-size:11.5px}
  .ops.formatos .op small{font-size:9.5px}
}
.op{border:1.5px solid var(--ln2);border-radius:14px;background:var(--cinza);padding:10px;text-align:left;
  transition:.2s var(--e);position:relative;overflow:hidden;animation:nasce .45s var(--e) both}
.op:nth-child(2){animation-delay:.06s}.op:nth-child(3){animation-delay:.12s}.op:nth-child(4){animation-delay:.18s}
.op:active{transform:scale(.98)}
.op.on{border-color:var(--ok);background:rgba(22,163,74,.06);box-shadow:0 0 0 1.5px var(--ok) inset}
.op b{display:block;font-size:13.5px;font-weight:600}
.op small{display:block;font-size:11.5px;color:var(--t2);margin-top:2px;line-height:1.35}
.op .mini{height:46px;border-radius:10px;margin-bottom:8px;background:var(--escuro);position:relative;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.op .mini .q{background:linear-gradient(160deg,#50505c,#1a1a1e);border:1px solid rgba(255,255,255,.14);border-radius:5px}
.op .mini .q.v{width:20px;height:38px}.op .mini .q.q1{width:33px;height:33px}.op .mini .q.h{width:50px;height:28px}
.op .mini .lg{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);font-size:7.5px;font-weight:800;
  padding:2px 5px;border-radius:3px;white-space:nowrap}
.op .tick{position:absolute;top:9px;right:9px;width:21px;height:21px;border-radius:50%;background:var(--ok);
  color:#06231a;display:none;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.op.on .tick{display:flex;animation:pop .34s var(--mola)}

/* busca */
.res{display:grid;gap:8px;margin-top:12px;max-height:46vh;overflow-y:auto}
.rl{display:flex;gap:11px;align-items:center;border:1.5px solid var(--ln);border-radius:16px;
  background:var(--cinza);padding:9px;text-align:left;width:100%;transition:.2s var(--e);
  animation:nasce .4s var(--e) both}
.rl:nth-child(2){animation-delay:.05s}.rl:nth-child(3){animation-delay:.1s}
.rl:nth-child(4){animation-delay:.15s}.rl:nth-child(5){animation-delay:.2s}
.rl:active{transform:scale(.99)}
.rl.on{border-color:var(--ok);background:rgba(22,163,74,.06);box-shadow:0 0 0 1.5px var(--ok) inset}
.rl .mi{width:84px;height:48px;border-radius:11px;flex:none;background:var(--escuro);position:relative;overflow:hidden}
.rl .mi img{width:100%;height:100%;object-fit:cover;display:block}
.rl .mi span{position:absolute;right:4px;bottom:4px;font-size:9.5px;background:rgba(0,0,0,.8);color:#fff;
  padding:1px 5px;border-radius:5px}
.rl .tt{min-width:0}
.rl .tt b{display:block;font-size:13px;font-weight:620;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rl .tt small{font-size:11px;color:var(--t3)}
.vazio{font-size:13px;color:var(--t3);padding:14px 2px;text-align:center}

.aviso-leg{margin:9px 0 0;font-size:12px;line-height:1.4;color:#f5c45e;
  background:rgba(245,196,94,.08);border:1px solid rgba(245,196,94,.22);
  border-radius:11px;padding:9px 11px;animation:nasce .3s var(--e) both}
.aviso-leg b{color:#f7d389}

/* ============================================= biblioteca de vídeos */
.bib{display:grid;gap:8px}
.bibv{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:12px 13px;border:1.5px solid var(--ln);border-radius:13px;
  background:var(--cinza);transition:.16s var(--e)}
.bibv:active{transform:scale(.99)}
.bibv:hover{border-color:var(--ln2)}
.bibv-tx{min-width:0;flex:1}
.bibv-tx b{display:block;font-size:13.2px;font-weight:620;letter-spacing:-.012em;
  line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bibv-tx small{display:block;font-size:11.5px;color:var(--t3);margin-top:3px}
.bibv-ir{flex:none;color:var(--t3);font-size:19px;line-height:1}
.bibv.carregando-v{opacity:.5;pointer-events:none}
.bib-busca{margin-bottom:12px}
.volta-lista{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  background:none;border:0;padding:0 2px 11px;color:var(--t2);font-size:12.5px}
.volta-lista span{font-weight:600;color:var(--tinta);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:min(52vw,250px)}
.volta-lista small{color:var(--t3);font-size:11.5px;flex:none;margin-left:auto}

/* ===================================== ajuste fino: abre e fecha, não pesa */
.av-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;text-align:left;background:none;border:0;padding:0}
.av-cab b{display:block;font-size:13.5px;font-weight:620;letter-spacing:-.012em}
.av-cab small{display:block;font-size:11.5px;color:var(--t3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(62vw,290px)}
.av-seta{font-style:normal;color:var(--t3);font-size:14px;transition:transform .25s var(--e);flex:none}
#cxAvancado.aberto .av-seta{transform:rotate(180deg)}
.av-corpo{display:grid;gap:11px;margin-top:13px;padding-top:13px;border-top:1px solid var(--ln)}
.av-lin{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.av-lin input[type=checkbox]{width:19px;height:19px;flex:none;margin-top:1px;accent-color:#16a34a}
.av-lin b{display:block;font-size:13px;font-weight:600;letter-spacing:-.01em}
.av-lin small{display:block;font-size:11.5px;color:var(--t3);margin-top:2px;line-height:1.4}
.av-campo{flex-direction:column;align-items:stretch;gap:7px}
.av-campo .campo{margin-top:0}

/* O PUSH DO PREÇO PROMOCIONAL USA A MESMA CAIXA DOS OUTROS.
   Ele era uma faixa vermelha fixa que empurrava a página. O dono pediu menor,
   liquid glass, aparecendo e sumindo como o aviso de conquista, e intercalado
   para nunca se sobrepor: então virou um item da fila, com a casca do `.conq`
   e só dois detalhes próprios. */
.conq .ic-promo{background:linear-gradient(145deg,#ff5a2b,#ff0033);font-size:15px}
/* "no primeiro mês" sem destaque nenhum, como o dono pediu: fica, porque sem
   ele o aviso diria que R$ 5,99 é o preço, mas perde o peso. */
.conq small i{font-style:normal;opacity:.66;font-size:10.5px}
.conq .mais.rel{font-variant-numeric:tabular-nums;letter-spacing:.02em;
  background:rgba(255,255,255,.14);color:#fff;font-size:12px;font-weight:700;
  border-radius:8px;padding:4px 8px;white-space:nowrap}

/* CAMADA INDEXAVEL: so aparece enquanto o JS nao assumiu. Estilo curto de
   proposito, o bastante para ler bem caso o script falhe. */
#semJs .semjs-links{display:flex;flex-wrap:wrap;gap:7px 14px;margin-top:18px}
#semJs a{color:var(--t3);font-size:12px;text-decoration:none}

/* vitrine: os tres videos de exemplo, para quem nao tem link na mao */
.vitr{margin-top:14px;border-top:1px solid var(--ln);padding-top:12px}
.vitr-t{font-size:12.5px;color:var(--t2);margin:0 0 9px;line-height:1.35}
.vitr-g{display:grid;gap:7px}
.vx{display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:7px;
  border:1.5px solid var(--ln);border-radius:14px;background:var(--cinza);transition:.18s var(--e)}
.vx:active{transform:scale(.99)}
.vx.on{border-color:var(--ok);background:rgba(22,163,74,.06);box-shadow:0 0 0 1.5px var(--ok) inset}
.vx-th{width:66px;height:38px;border-radius:9px;flex:none;background:var(--escuro);position:relative;overflow:hidden}
.vx-th img{width:100%;height:100%;object-fit:cover;display:block}
.vx-d{position:absolute;right:3px;bottom:3px;font-size:9px;background:rgba(0,0,0,.8);color:#fff;
  padding:1px 4px;border-radius:4px}
.vx-tx{min-width:0}
.vx-tx b{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  font-size:12.5px;font-weight:600;line-height:1.3}
.vx-tx small{font-size:10.5px;color:var(--t3)}

/* cortes */
.cortes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
@media(min-width:620px){ .cortes{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))} }
.cq{position:relative;aspect-ratio:9/16;border-radius:16px;background:var(--escuro);width:100%;
  margin:0 auto;animation:nasce .5s var(--e) both;box-shadow:var(--s2)}
.cq:nth-child(2){animation-delay:.08s}.cq:nth-child(3){animation-delay:.16s}
.cq:nth-child(4){animation-delay:.24s}.cq:nth-child(5){animation-delay:.32s}.cq:nth-child(6){animation-delay:.4s}
.cq .capa{position:absolute;inset:0;border-radius:16px;overflow:hidden}
.cq img,.cq video{width:100%;height:100%;object-fit:cover;display:block}
/* A NOTA VIRA ESTRELAS.
   "96" ao lado de uma bolinha vermelha nao dizia que era qualidade: numero
   solto pode ser duracao, ordem, qualquer coisa. Cinco estrelas todo mundo
   le sem legenda, e some o "de quanto?" que o numero obrigava a perguntar. */
/* a tarja era um retangulo branco chapado em cima do video; agora e vidro,
   igual aos avisos: o corte continua aparecendo atras das estrelas */
.cq .n{position:absolute;top:-9px;left:50%;transform:translateX(-50%);z-index:3;
  background:rgba(26,26,30,.44);backdrop-filter:blur(12px) saturate(170%);
  -webkit-backdrop-filter:blur(12px) saturate(170%);
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;padding:3px 8px;white-space:nowrap;
  box-shadow:0 8px 20px rgba(0,0,0,.4);display:flex;align-items:center;gap:1px}
.cq .n i{font-style:normal;font-size:10px;line-height:1;color:#ffc53d}
.cq .n i.vazia{color:rgba(255,255,255,.26)}
.cq .g{position:absolute;left:5px;right:5px;bottom:6px;z-index:2;font-size:9px;text-align:center;color:#fff;
  font-weight:700;background:rgba(0,0,0,.6);border-radius:7px;padding:4px 3px;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* BOTAO DE PLAY NOS CORTES DE BAIXO.
   Eles ja abriam no toque, mas nada na miniatura dizia isso: a fileira era
   lida como ilustracao e ninguem clicava. Um play redondo no meio e o unico
   sinal que todo mundo reconhece sem ler nada. Some no que esta tocando e no
   que esta travado, que ja tem cadeado. */
.cq .pl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:34px;height:34px;border-radius:50%;background:rgba(10,10,11,.5);backdrop-filter:blur(6px);
  border:1.5px solid rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:11.5px;padding-left:2px;transition:.18s var(--e);
  box-shadow:0 4px 14px rgba(10,10,11,.3)}
.cq:hover .pl{background:var(--grad);border-color:transparent;transform:translate(-50%,-50%) scale(1.08)}
.cq.tocando .pl{display:none}
.cq.trava .capa img,.cq.trava .capa video{filter:blur(7px) saturate(.35) brightness(.8)}
.cq .cad{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  background:rgba(10,10,11,.25);border-radius:16px}
.cq .cad svg{opacity:.85}
.cq .cad svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.8}

/* player */
.player{position:relative;border-radius:18px;overflow:hidden;background:var(--escuro);aspect-ratio:9/16;
  max-width:196px;margin:0 auto;box-shadow:var(--s3)}
.player video{width:100%;height:100%;object-fit:cover;display:block}
.player .tempo{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.25)}
.player .tempo i{display:block;height:100%;width:0;background:var(--grad);transition:width .25s linear}
.player .cham{position:absolute;inset:0;background:rgba(10,10,11,.9);backdrop-filter:blur(10px);color:#fff;
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:20px;text-align:center}
.player .cham.on{display:flex;animation:nasce .4s var(--e)}
.player .cham b{font-size:16.5px;letter-spacing:-.03em}
.player .cham small{font-size:12.5px;color:rgba(255,255,255,.62);line-height:1.5}

/* anel */
/* o SVG tinha 132 fixo dentro de uma caixa de 104: estourava e jogava o
   numero para fora do centro */
/* ARO FINO E EM DEGRADE.
   Vermelho chapado de 10px parecia um carimbo em volta do numero. Fino, em
   degrade laranja-vermelho como o resto da marca, ele vira uma linha que
   corre e o 38% no meio ganha o palco. E o aro de tras estava em branco a
   10% dentro de um cartao BRANCO: era invisivel, nao dava para ver o quanto
   faltava. */
.anel{width:108px;height:108px;margin:2px auto 8px;position:relative}
.anel svg{width:100%;height:100%;display:block;transform:rotate(-90deg)}
.anel .pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;letter-spacing:-.03em}
.ger{display:grid;gap:9px;margin-top:6px}
.gl{display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--t3);transition:.35s}
.gl .bo{width:20px;height:20px;border-radius:50%;border:2px solid var(--ln2);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:9px}
.gl.ok{color:var(--tinta)}.gl.ok .bo{background:var(--ok);border-color:var(--ok);color:#fff}
.gl.agora{color:var(--tinta);font-weight:620}
.gl.agora .bo{border-color:var(--verm);border-right-color:transparent;animation:gira .7s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* listas */
.lista{display:grid;gap:9px}
.lin{display:flex;gap:12px;align-items:center;border-radius:16px;background:var(--cinza);
  padding:12px 13px;animation:nasce .45s var(--e) both}
.lin:nth-child(2){animation-delay:.08s}.lin:nth-child(3){animation-delay:.16s}
.lin .ic{width:34px;height:34px;border-radius:11px;flex:none;display:flex;align-items:center;
  justify-content:center;background:var(--branco);color:var(--t2);box-shadow:var(--s1)}
.lin .ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lin .tt{min-width:0;flex:1}
.lin b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em}
.lin small{display:block;font-size:12.5px;color:var(--t2);line-height:1.45;margin-top:2px}
.lin.verde .ic{background:rgba(22,163,74,.1);color:var(--ok);box-shadow:none}
/* logo de marca ocupa a caixa inteira, sem fundo branco em volta */
.lin .ic.marca-ic{background:none;box-shadow:none;padding:0}
.lin .ic.marca-ic svg{width:30px;height:30px;stroke:none}
.lin .st{font-size:11px;color:var(--t3);
  border:1px solid var(--ln2);border-radius:999px;padding:3px 8px;flex:none;white-space:nowrap}
.lin .st.ja{color:var(--ok);border-color:rgba(22,163,74,.3)}

.preco{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.preco .pv{font-size:34px;font-weight:700;letter-spacing:-.03em}
.preco .ps{font-size:13.5px;color:var(--t3)}

/* acao fixa, polegar */
.rodape{position:fixed;left:0;right:0;bottom:0;z-index:45;padding:13px 16px calc(15px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,#000 58%,rgba(0,0,0,0));display:flex;justify-content:center}
/* O DONO: "'Já é cliente?' esse botao n pode ficar longe do botao de cima".
   Eram tres coisas somadas: o `gap` de 7px, um `#sobpe` VAZIO que mesmo com
   zero de altura consumia mais um `gap` de 7px por ser item do flex, e o
   brilho vermelho do botao, que desce 26px e empurra a leitura. Agora o
   vazio sai da conta, o respiro cai para 3px e o brilho e mais curto: os
   dois leem como um par, que e o que eles sao. */
.rodape .dentro{width:100%;max-width:560px;display:flex;flex-direction:column;gap:3px;align-items:stretch}
.rodape .dentro #sobpe:empty{display:none}
/* `align-items:stretch` igualou a largura dos dois BOTOES, mas jogou o elo
   de texto para a esquerda. O elo volta a ser centrado por conta propria. */
.rodape .dentro #secundario{width:100%;margin-top:-1px;display:flex;justify-content:center}
.rodape .dentro #secundario .elo{text-align:center}
@media(min-width:1001px){ .rodape{left:262px} .rodape .dentro{max-width:572px;align-items:center} }
.b{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border-radius:13px;
  padding:13px 20px;font-size:14.5px;font-weight:600;background:var(--grad);color:#fff;
  transition:.22s var(--e);box-shadow:0 6px 18px rgba(255,0,51,.26);letter-spacing:-.015em}
.b .seta{transition:transform .25s var(--e)}
.b:hover .seta{transform:translateX(4px)}
.b:active{transform:scale(.985)}
.b[disabled]{background:var(--ln2);color:var(--t3);box-shadow:none}
/* o botao nunca apaga: quando falta coisa ele so fica mais discreto */
/* O BOTAO FICAVA BRANCO COM LETRA BRANCA.
   O estado "ainda falta preencher" pintava o botao de `--tinta`, que era o
   preto do tema claro e virou o branco do tema escuro. Mas a decisao do dono
   e anterior a isso: o botao principal e VERMELHO sempre, e o que marca o
   pendente e ele ficar mais apagado, nunca trocar de cor. */
/* 55% de opacidade no preto virou um botao apagado, com a letra cinza: lia
   como desabilitado, que e o contrario da ordem ("tem q manter botao
   vermelho"). O vermelho fica cheio; o que muda no pendente e so a sombra
   sumir, um sinal discreto que nao custa leitura. */
.b.esperando{background:var(--grad);opacity:1;box-shadow:none}
.aviso-falta{margin-top:11px;font-size:13px;color:var(--verm);font-weight:500}
/* o campo em falta ficava com fundo BRANCO e o texto digitado, que segue o
   tema, saia branco por cima: ninguem lia o proprio e-mail. O que marca a
   falta e a borda e um halo vermelho, nao trocar a cor do papel. */
.campo.falta{border-color:var(--verm);background:var(--branco);box-shadow:0 0 0 3px rgba(255,0,51,.16)}
.treme{animation:treme .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes treme{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}
  30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
.sobpe{font-size:11.5px;color:var(--t3);text-align:center;line-height:1.45}

/* conquista */
/* A FAIXA DE CONQUISTA APARECIA UM PEDACO QUANDO ESTAVA ESCONDIDA.
   Ela so subia com translate, entao a borda de baixo arredondada sobrava no
   topo da tela, como um risco preto cortado no centro. Agora, fora de uso,
   ela e invisivel de verdade e nao recebe toque. */
/* VIDRO, NAO BLOCO PRETO.
   Preto cheio em cima do conteudo pesa e esconde o que esta atras bem na
   hora em que a pessoa esta lendo. Translucido com desfoque deixa o fundo
   aparecer, entao o aviso flutua em vez de tapar. A borda clara e a sombra
   sao o que mantem a leitura sobre fundo claro ou escuro. */
.conq{position:fixed;left:50%;top:58px;transform:translate(-50%,-260%);z-index:70;
  background:rgba(26,26,30,.44);backdrop-filter:blur(12px) saturate(170%);
  -webkit-backdrop-filter:blur(12px) saturate(170%);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;border-radius:15px;padding:10px 15px 10px 11px;display:flex;
  align-items:center;gap:11px;box-shadow:var(--s3);width:max-content;max-width:calc(100vw - 28px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .6s var(--mola),opacity .3s ease,visibility 0s linear .6s}
.conq.on{transform:translate(-50%,0);opacity:1;visibility:visible;
  transition:transform .6s var(--mola),opacity .25s ease,visibility 0s}
/* o aviso era uma pilula 100% redonda e ficava estranho; segue a mesma escala
   de raio do resto, e o selo dentro dele tambem */
.conq .ic{width:30px;height:30px;border-radius:9px;background:var(--grad);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:13px}
/* O AVISO QUEBRAVA EM QUATRO LINHAS E CAIA EM CIMA DO TOPO.
   O meio da pilula nao tinha min-width:0, entao encolhia ate a largura da
   maior palavra e a frase virava uma coluna. E o `top:58px` era a altura do
   topo do computador: no celular o topo tem duas fileiras e o aviso pousava
   por cima dele. */
.conq>div{min-width:0}
.conq b{display:block;font-size:13.5px;letter-spacing:-.015em;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conq small{display:block;font-size:11.5px;color:rgba(255,255,255,.72);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conq .mais{flex:none;font-size:13px;font-weight:700;color:#fff;background:rgba(255,255,255,.14);
  border-radius:7px;padding:3px 8px;margin-left:4px}
@media(max-width:1000px){ .conq{top:calc(var(--topo,92px) + 8px)} }
#confete{position:fixed;inset:0;pointer-events:none;z-index:65}
.carregando{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;border-radius:50%;animation:gira .7s linear infinite}

/* ============================================ DISCIPLINA DE FORMA
   Tres coisas que o dono apontou e que eram verdade:
   1. a marca aparecia tres vezes, em tres tamanhos (24, 26 e 30px), e era um
      caractere de texto esticado dentro da caixa, por isso deformava;
   2. raio grande demais em tudo, ficava "bolhudo";
   3. tamanhos sem escala, cada bloco com um valor diferente.
   Aqui mora a escala unica. Nada abaixo dela inventa medida nova. */
/* nem bolha nem caixa: meio termo. O 10/8/6 ficou duro demais. */
:root{
  --r-g:16px;   /* cartao             */
  --r-m:12px;   /* campo, opcao, item */
  --r-p:9px;    /* selo, marca        */
}
.mk{width:26px;height:26px;border-radius:var(--r-p);display:flex;align-items:center;justify-content:center;
  background:var(--grad);color:#fff;flex:none}
.mk svg{width:17px;height:17px;display:block}
/* o bonequinho que o dono escolheu, com um pouco de zoom para o rosto
   preencher a caixa em vez de ficar perdido no fundo */
.av{border-radius:9px;overflow:hidden;background:#cfd8e3;padding:0}
.av .boneco{width:100%;height:100%;display:block;object-fit:cover;
  transform:scale(1.32);transform-origin:50% 28%}

/* raios: uma escala, sem exceção */
.cart,.perg{border-radius:var(--r-g)}
.campo,.op,.rl,.lin,.cq,.cq .capa,.cq .cad,.op .mini,.rl .mi,.lin .ic{border-radius:var(--r-m)}
.selo,.fala .tx{border-radius:var(--r-p)}
.fala .tx{border-top-left-radius:3px}
.player{border-radius:var(--r-g)}

/* a bolha da fala deixa de ser a terceira marca e vira um ponto */
.fala .bolha{width:8px;height:8px;border-radius:50%;margin-top:13px;box-shadow:none}


/* TITULO GRANDE QUE SE ESCREVE SOZINHO, assim que a pessoa entra.
   Substitui o "1 -> 10", que o dono detestou e que, relendo, era um grafico
   de powerpoint. Aqui a promessa e uma frase so, grande, que aparece sendo
   digitada e prende a atencao nos dois primeiros segundos. */
/* SEPARAR UMA ETAPA DA OUTRA.
   Os blocos empilhavam com 10px de distancia e o fim de uma etapa encostava
   no comeco da seguinte. Agora o titulo de cada etapa abre uma secao: linha
   fina e respiro grande em cima, menos na primeira, que ja esta no topo. */
.gancho{padding:6px 2px 2px}
.bl:has(.gancho){margin-top:4px;padding-top:22px;border-top:1px solid var(--ln2);position:relative}
/* `:first-child` NUNCA CASAVA, e `:first-of-type` tambem nao: o primeiro
   filho do .fluxo e a div .pilulas (escondida) e ela TAMBEM e uma div, que e
   o que `of-type` olha. O primeiro bloco de verdade desenhava um filete e um
   tracinho vermelho soltos no alto da tela, como se faltasse algo acima.
   Quem casa e o irmao imediato de .pilulas. */
.fluxo > .bl:first-of-type,
.fluxo > .pilulas + .bl{margin-top:0;padding-top:0;border-top:0}
.bl:has(.gancho)::before{content:'';position:absolute;top:-1px;left:0;width:36px;height:2px;
  background:var(--grad);border-radius:2px}
.fluxo > .bl:first-of-type::before,
.fluxo > .pilulas + .bl::before{display:none}
.gancho h1{font-size:clamp(21px,5.6vw,28px);line-height:1.2;letter-spacing:-.022em;font-weight:650;
  /* NUNCA com hifen: "cor-tes" no meio do titulo e feio e atrapalha a leitura.
     A palavra inteira desce para a linha de baixo. */
  overflow-wrap:break-word;word-break:normal;hyphens:none;-webkit-hyphens:none}
.gancho + .gancho{margin-top:14px}
.gancho h1 em{font-style:normal;background:linear-gradient(100deg,#ff6a2b,#ff0033 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* numero e unidade andam juntos: "2.547.432" nunca fica numa linha e "views"
   noutra, que e o que quebrava a leitura */
.gancho h1 em.junto{white-space:nowrap}
/* entrelinha mais curta, corpo um tico maior, e sempre um pedaco em negrito
   para o olho ter onde pousar */
.gancho p{font-size:13.8px;color:var(--t2);margin-top:11px;line-height:1.5;max-width:50ch;
  letter-spacing:-.006em}
.gancho p b{color:var(--tinta);font-weight:620}
.gancho .passo{display:block;font-size:11.5px;color:var(--t3);margin-bottom:7px;font-weight:500}
.gancho .cur{display:inline-block;width:3px;height:.9em;background:var(--verm);vertical-align:-3px;
  animation:pisca .9s steps(2) infinite;margin-left:3px;border-radius:2px}

/* "por mes" era texto cinza colado na borda e sumia. Virou etiqueta, que e o
   que faz a pessoa ler o periodo junto com o valor. */
.cart.dinheiro .v{font-size:clamp(26px,7vw,34px);letter-spacing:-.028em}
.tag-mes{flex:none;background:rgba(255,255,255,.18);color:#fff!important;border-radius:999px;
  padding:4px 10px;font-size:11px;font-weight:650;letter-spacing:.01em;white-space:nowrap}
.cart.dinheiro .ch{align-items:center}
/* A CONTA NA TELA, NAO SO O RESULTADO.
   "4 horas por video" nao dizia nada: ninguem edita um video por mes, entao o
   numero nao tinha tamanho na cabeca de ninguem. Agora o cartao mostra o
   total do MES e a conta inteira que chega nele. Numero com a conta do lado
   a pessoa aceita; numero solto ela desconfia. */
.tag-per{flex:none;background:var(--ln);color:var(--t2);border-radius:999px;
  padding:3px 9px;font-size:10.5px;font-weight:650;white-space:nowrap}
.cart .v i{font-style:normal}
.cart .v u{text-decoration:none;font-size:.5em;font-weight:650;color:var(--t3);margin-left:1px}
.conta-viva{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:11px;padding-top:10px;
  border-top:1px solid var(--ln);font-size:11.5px;color:var(--t2);line-height:1.3}
.conta-viva b{color:var(--tinta);font-weight:650}
.conta-viva .sin{color:var(--t3);font-weight:600}
.conta-viva .tot{margin-left:auto;background:var(--grad);color:#fff;border-radius:999px;
  padding:3px 10px;font-weight:700;white-space:nowrap}
.cart.dinheiro .ch h3{font-size:14px}
/* letra pequena com contraste de leitura: 60% de branco sobre preto nao le */
.conta-premissa{display:block;margin-top:12px;padding-top:11px;border-top:1px solid rgba(255,255,255,.16);
  font-size:12px;line-height:1.5;color:rgba(255,255,255,.82)}

/* cartao de progresso recolhe quando termina, para a tela nao ficar com
   "100%" parado competindo com o resultado */
.cart.terminou .anel,.cart.terminou .ger{display:none}
.cart.terminou{opacity:.55;padding:11px 13px}
.cart.terminou .ch{margin-bottom:0}

/* TRES CAMINHOS PARA O VIDEO, CADA UM COM CARA DO QUE E.
   Antes era um campo solto escrito "Buscar no YouTube" que nao parecia busca,
   os resultados vinham apertados e nao havia como enviar arquivo. */
/* link discreto dentro do cartao, para acoes secundarias */
.elo-linha{display:block;margin-top:12px;font-size:13.5px;color:var(--t2);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--ln2);padding:4px 0}
.elo-linha:hover{color:var(--tinta);text-decoration-color:var(--tinta)}

/* aviso de item travado */
.modal{position:fixed;inset:0;z-index:80;background:rgba(10,10,11,.5);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:.26s var(--e)}
.modal.on{opacity:1}
.modal-cx{background:var(--branco);border-radius:16px;padding:22px 20px;max-width:340px;width:100%;
  text-align:center;box-shadow:var(--s3);position:relative;transform:translateY(12px);transition:.3s var(--mola)}
.modal.on .modal-cx{transform:none}
.modal-cad{width:40px;height:40px;border-radius:12px;background:var(--cinza);margin:0 auto 12px;
  position:relative;border:1px solid var(--ln)}
.modal-cad::before{content:'';position:absolute;left:50%;top:9px;transform:translateX(-50%);
  width:13px;height:9px;border:2px solid var(--t2);border-bottom:0;border-radius:7px 7px 0 0}
.modal-cad::after{content:'';position:absolute;left:50%;top:17px;transform:translateX(-50%);
  width:19px;height:14px;border-radius:4px;background:var(--t2)}
.modal-cx h3{font-size:17px;font-weight:650;letter-spacing:-.02em}
.modal-cx p{font-size:14px;color:var(--t2);margin-top:7px;line-height:1.5}
.modal-cx .b{margin-top:16px}
.modal-x{position:absolute;top:9px;right:11px;font-size:22px;color:var(--t3);line-height:1;padding:4px}

/* AS AMOSTRAS DE LEGENDA SE MEXEM.
   Cada uma repete o efeito que o motor aplica no video: a palavra acende, o
   bloco salta, o texto treme, desliza de lado ou sobe de baixo. Tudo em CSS,
   sem peso nenhum para a pagina. */
.leg-am i{font-style:normal;display:inline-block}
.an-acende .p2{animation:legAcende 2.4s infinite}
@keyframes legAcende{0%,22%{filter:brightness(.45)}30%,70%{filter:brightness(1.25)}80%,100%{filter:brightness(.45)}}
.an-salta .p1{animation:legSalta 2.4s infinite}
.an-salta .p2{animation:legSalta 2.4s infinite .3s}
.an-salta .p3{animation:legSalta 2.4s infinite .6s}
@keyframes legSalta{0%,18%,46%,100%{transform:none}28%{transform:translateY(-3px) scale(1.14)}}
.an-treme{animation:legTreme 2.4s infinite}
@keyframes legTreme{0%,60%,100%{transform:none}64%{transform:translate(-1.5px,1px) rotate(-1.5deg)}
  68%{transform:translate(1.5px,-1px) rotate(1.5deg)}72%{transform:translate(-1px,0) rotate(-1deg)}76%{transform:none}}
.an-brilha .p2{animation:legBrilha 2.4s infinite}
@keyframes legBrilha{0%,30%{text-shadow:none}50%{text-shadow:0 0 9px currentColor}70%,100%{text-shadow:none}}
.an-desliza i{animation:legDesliza 2.4s infinite}
.an-desliza .p2{animation-delay:.18s} .an-desliza .p3{animation-delay:.36s}
@keyframes legDesliza{0%,10%{opacity:0;transform:translateX(-9px)}22%,78%{opacity:1;transform:none}
  92%,100%{opacity:0;transform:translateX(-9px)}}
.an-sobe{animation:legSobe 2.4s infinite}
@keyframes legSobe{0%,8%{opacity:0;transform:translateY(7px)}20%,80%{opacity:1;transform:none}
  94%,100%{opacity:0;transform:translateY(7px)}}
.an-troca .p1{animation:legTroca 2.7s infinite}
.an-troca .p2{animation:legTroca 2.7s infinite .9s}
.an-troca .p3{animation:legTroca 2.7s infinite 1.8s}
@keyframes legTroca{0%,2%{opacity:0;transform:scale(.7)}6%,30%{opacity:1;transform:none}34%,100%{opacity:0;transform:scale(.7)}}
.an-troca{position:relative}
.an-troca i{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
.op.leg .an-troca{display:block;height:1.2em;width:100%}

/* o botao da oferta leva o preco dentro, com o cheio riscado ao lado */
/* O BOTAO TINHA QUATRO TAMANHOS DE LETRA NUMA LINHA SO.
   "Libere por" num corpo, "R$ 197" noutro, "R$ 5,99" noutro e "no 1o mes"
   noutro: o olho nao achava onde pousar e, quando faltava largura, aquilo
   quebrava em qualquer lugar. Agora sao DOIS tamanhos e DUAS linhas: a frase
   inteira em cima, o periodo embaixo. A ancora continua: o que separa o
   R$ 197 do R$ 5,99 e o risco e o peso, nao um corpo diferente. */
.bt-oferta{padding:14px 16px;line-height:1.15}
.bt-oferta .bo-l1{font-size:clamp(13.5px,4.1vw,16.5px);font-weight:600;letter-spacing:-.018em;white-space:nowrap}
.bt-oferta .bo-l1 s{opacity:.6;font-weight:500;text-decoration-thickness:1.5px;margin:0 2px}
.bt-oferta .bo-l1 b{font-weight:750}
.bt-oferta .bo-l1 sup{font-size:.55em;vertical-align:super}

/* player com controles: tocar, som e repetir */
.player-cx{display:flex;flex-direction:column;align-items:center;gap:8px}
.player{cursor:pointer}
.player .som{position:absolute;top:9px;right:9px;z-index:3;background:rgba(10,10,11,.6);
  backdrop-filter:blur(6px);color:#fff;border-radius:999px;padding:5px 10px;font-size:10.5px;
  font-weight:600;letter-spacing:.01em}
.player .som .som-on{display:none}
.player .som.ligado .som-off{display:none}
.player .som.ligado .som-on{display:inline}
.player .playzao{position:absolute;inset:0;z-index:2;display:none;align-items:center;justify-content:center;
  font-size:34px;color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.6);background:rgba(10,10,11,.2)}
.player .playzao.on{display:flex}
 /* era `background:#fff;color:var(--tinta)`: com o tema escuro o `--tinta`
    virou quase branco e o botao ficou branco com letra branca. Botao de
    acao e vermelho, como todos os outros. */
.player .cham .bb{background:var(--grad);color:#fff;border-radius:9px;padding:9px 15px;
  font-size:13px;font-weight:650;margin-top:6px}
.dica-player{font-size:11.5px;color:var(--t3);text-align:center}
.cq.tocando{outline:2px solid var(--verm);outline-offset:2px}

/* a oferta acende quando a previa termina */
.cart.oferta.acende{box-shadow:0 0 0 2px rgba(255,0,51,.5),0 18px 44px rgba(255,0,51,.26)}
.cart.oferta .preco{align-items:baseline}

/* avisa que ainda ha conteudo abaixo da dobra */
.seta-baixo{position:fixed;left:50%;transform:translateX(-50%) translateY(10px);z-index:46;
  bottom:calc(86px + env(safe-area-inset-bottom));width:34px;height:34px;border-radius:50%;
  background:var(--branco);color:var(--tinta);border:1px solid var(--ln2);box-shadow:var(--s3);
  display:flex;align-items:center;justify-content:center;font-size:15px;
  opacity:0;pointer-events:none;transition:.3s var(--e)}
.seta-baixo.on{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);
  animation:bale 2.2s ease-in-out infinite}
@keyframes bale{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(5px)}}
@media(min-width:1001px){ .seta-baixo{bottom:84px} }

/* botao de destaque com cadeado enquanto nao ha assinatura */
.cta-ia.travado{filter:saturate(.72)}
.cta-ia .cad-cta{position:relative;z-index:1;margin-left:auto;width:14px;height:14px;flex:none;display:none;
  border-radius:3px;border:2px solid rgba(255,255,255,.85);border-top-width:7px;border-top-left-radius:7px;
  border-top-right-radius:7px}
.cta-ia.travado .cad-cta{display:block}

/* quando a escolha e feita, o botao do rodape chama atencao uma vez */
.b.pulsa{animation:pulsaBt 1.3s var(--e)}
@keyframes pulsaBt{0%,100%{transform:none;box-shadow:0 4px 14px rgba(255,0,51,.22)}
  40%{transform:scale(1.025);box-shadow:0 10px 30px rgba(255,0,51,.5)}}

/* ABAS DO VIDEO, sem pilula.
   Eram tres capsulas 100% redondas soltas no topo do cartao. Agora e um
   seletor segmentado: uma caixa unica, dividida em tres, com a aba escolhida
   em branco por cima. Ocupa a largura toda e fica alinhada com o resto. */
.abas-v{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-bottom:14px;
  background:var(--cinza);border:1px solid var(--ln);border-radius:10px;padding:3px}
.abas-v .ab{font-size:12.5px;font-weight:550;color:var(--t2);border:0;border-radius:7px;
  padding:9px 6px;white-space:nowrap;transition:.18s var(--e);text-align:center;
  overflow:hidden;text-overflow:ellipsis}
.abas-v .ab.on{background:rgba(255,255,255,.11);color:var(--tinta);font-weight:620;
  box-shadow:0 1px 2px rgba(10,10,11,.09)}
@media(max-width:360px){ .abas-v .ab{font-size:11.5px;padding:8px 4px} }

/* AS TRES VIAS APARECIAM JUNTAS.
   `display:flex` numa classe vence o atributo `hidden`, que so vale enquanto
   nada define display. Sem esta linha as tres abas mostravam o conteudo ao
   mesmo tempo e a tela virava uma pilha sem sentido. */
.via{display:flex;flex-direction:column}
.via[hidden]{display:none}
.via .rot{margin-bottom:10px}
.via .res{margin-top:11px}

.busca-cx{display:flex;align-items:center;gap:9px;border:1.5px solid var(--ln2);border-radius:11px;
  background:var(--branco);padding:4px 4px 4px 12px;transition:.2s}
.busca-cx:focus-within{border-color:var(--verm);background:var(--branco);box-shadow:0 0 0 3px rgba(255,0,51,.09)}
.busca-cx .lupa{flex:none;display:flex;color:var(--t3)}
.busca-cx .lupa svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}
.campo.busca-in{flex:1;border:0;background:none;margin:0;padding:10px 0;box-shadow:none!important}
.campo.busca-in:focus{box-shadow:none}
.busca-bt{flex:none;background:var(--grad);color:#fff;border-radius:8px;padding:10px 17px;
  font-size:13.5px;font-weight:600;transition:.16s var(--e);box-shadow:0 3px 10px rgba(255,0,51,.26)}
.busca-bt:active{transform:scale(.97)}
.vazio{padding:18px 8px}

/* resultado da busca: miniatura grande, titulo em duas linhas, canal e duracao */
.rl{padding:9px;gap:12px}
.rl .mi{width:104px;height:59px}
.rl .tt b{font-size:13.5px;line-height:1.3}
.rl .tt small{font-size:11.5px;color:var(--t3);margin-top:3px;display:block}
/* A LINHA ESCOLHIDA SE EXPLICA SOZINHA PELA BORDA VERDE.
   Antes tinha um falso botao "Usar", depois uma bolinha de radio: os dois
   competiam com a miniatura sem dizer nada que a borda ja nao diga. */
.rl .marca-esc{display:none}
.rl{cursor:pointer}
.rl.on{border-color:var(--ok);background:rgba(22,163,74,.07);box-shadow:0 0 0 1.5px var(--ok) inset}

/* enviar arquivo */
.solta{display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px 16px;cursor:pointer;
  border:2px dashed var(--ln2);border-radius:12px;background:var(--cinza);transition:.18s var(--e);text-align:center}
.solta:hover{border-color:var(--ln2);background:rgba(255,255,255,.04)}
 /* `--tinta` era o PRETO do tema claro e virou o quase-branco do escuro:
    o quadrado do icone ficou branco com o desenho branco em cima. Aqui o
    fundo tem que ser o degrade da marca, que le nos dois temas. */
.solta-ic{width:38px;height:38px;border-radius:11px;background:var(--grad);color:#fff;display:flex;
  align-items:center;justify-content:center;margin-bottom:6px}
.solta-ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}
.solta b{font-size:14.5px;font-weight:600}
.solta small{font-size:12px;color:var(--t3)}
.solta-barra{display:block;width:100%;height:6px;border-radius:999px;background:var(--ln2);margin-top:12px;overflow:hidden}
.solta-barra i{display:block;height:100%;width:0;background:var(--grad);transition:width .25s linear}

/* amostra de legenda: imita o que sai no video, com a mesma fonte, caixa
   alta e cor de destaque */
.op.leg .mini.leg-mini{height:62px;background:#17171b;display:flex;align-items:flex-end;
  justify-content:center;padding:0 6px 8px;position:relative;overflow:hidden}
.op.leg .mini.leg-mini::before{content:'';position:absolute;inset:0;
  background:radial-gradient(60% 50% at 50% 30%,rgba(255,255,255,.1),transparent 70%)}
/* DUAS LINHAS, NUNCA TRES.
   "você precisa ver" quebrava palavra por palavra e cada amostra virava uma
   coluna de tres linhas. Agora "precisa ver" anda junto e a frase ocupa duas
   linhas no maximo, como sai no video. */
.leg-am{position:relative;z-index:1;color:#fff;font-size:10.5px;font-weight:700;text-align:center;
  line-height:1.15;letter-spacing:-.01em;text-shadow:0 1px 3px rgba(0,0,0,.9);
  max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.leg-am .p2,.leg-am .p3{white-space:nowrap}
.leg-am.alto{text-transform:uppercase;letter-spacing:.01em}
.leg-am.impacto{font-family:Impact,'Haettenschweiler','Arial Narrow Bold',sans-serif;font-weight:400;font-size:11.5px}
.leg-am.estreita{font-stretch:condensed;letter-spacing:-.03em}
.leg-am.grandona{font-size:15px}
.leg-am.noTopo{align-self:flex-start;margin-top:8px;margin-bottom:auto}
.op.leg .mini.leg-mini:has(.noTopo){align-items:flex-start;padding:8px 6px 0}
.sem-leg{position:relative;z-index:1;font-size:10px;color:rgba(255,255,255,.3)}
/* LEGENDAS EM GRADE COMPACTA.
   Eram 16 quadros grandes empilhados em muitas linhas, e a pessoa rolava sem
   fim para comparar. Agora o quadro e menor, cabem quatro por linha no
   telefone e oito no computador, e a lista inteira ocupa duas linhas. */
.op.leg{min-height:0;padding:5px}
/* SEMPRE 5 EM CIMA E 5 EMBAIXO, em qualquer largura.
   Com 10 numa linha so no computador as miniaturas viravam tiras finas, e com
   4 no celular sobrava uma orfa na terceira linha. Dez estilos em duas
   fileiras iguais se comparam de relance, que e para isso que eles existem. */
.ops.legendas{grid-template-columns:repeat(5,1fr);gap:6px}
@media(max-width:360px){ .ops.legendas{gap:5px} }
 /* a amostra CRESCE na animacao (salta, pop, tremor): com 50px de caixa o
    topo e o pe da letra batiam na borda escura a cada ciclo */
.op.leg .mini.leg-mini{height:58px;border-radius:7px;padding:4px 4px 8px}
 /* "Uma palavra" e "Sem legenda" viravam "Uma pa..." e "Sem le...": nome
    cortado nao e nome. Duas linhas cabem, tres nao. */
.op.leg b{font-size:10.5px;font-weight:600;line-height:1.18;margin-top:5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.36em}
.op.leg small{display:none}
/* nas legendas a selecao ja aparece pela borda verde do quadro: o seloinho
   no canto so suja a miniatura */
.op.leg .tick{display:none!important}
 /* a amostra tem que caber numa linha so: " ver" caia para a segunda e
    ficava metade escondida atras da borda da caixa */
.op.leg .leg-am{font-size:8px;white-space:nowrap}
.op.leg .leg-am.impacto{font-size:9px}
.op.leg .leg-am.grandona{font-size:11px}

/* desenho do formato: celular em pe, quadro e tela larga, com a mancha da
   imagem dentro para dar a ideia do enquadramento */
.op .mini .fig{position:relative;display:block;border:2px solid rgba(255,255,255,.75);border-radius:5px;
  background:rgba(255,255,255,.07)}
.op .mini .fig i{position:absolute;left:3px;right:3px;top:3px;bottom:3px;border-radius:2px;
  background:linear-gradient(160deg,rgba(255,255,255,.5),rgba(255,255,255,.14))}
.op .mini .fig-v{width:22px;height:38px}
.op .mini .fig-q{width:34px;height:34px}
.op .mini .fig-h{width:50px;height:28px}
.op.on .mini .fig{border-color:var(--ok)}
.op.on .mini .fig i{background:linear-gradient(160deg,rgba(46,232,138,.85),rgba(46,232,138,.3))}
.op b .prop{font-style:normal;font-size:10.5px;font-weight:500;color:var(--t3);margin-left:4px}

/* escolha de cortes para agendar, e a linha de data e hora */
.cq.esc{cursor:pointer;border:2px solid transparent;transition:.18s var(--e);padding:0;background:var(--escuro)}
.cq.esc .marcou{position:absolute;top:6px;right:6px;z-index:4;width:21px;height:21px;border-radius:50%;
  background:rgba(255,255,255,.22);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;opacity:0;transform:scale(.6);transition:.2s var(--mola)}
.cq.esc.on{border-color:var(--ok)}
.cq.esc.on .marcou{background:var(--ok);opacity:1;transform:scale(1)}
.agenda-linha{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}
.agenda-linha label{flex:1;min-width:112px;font-size:11.5px;color:var(--t3);display:flex;flex-direction:column;gap:4px}
.campo.mini{margin-top:0;padding:9px 10px;font-size:16px}
.mini-b.fraco{background:transparent;border:1px solid var(--ln2);color:var(--t2)}
.mini-b.fraco:hover{border-color:var(--verm);color:var(--tinta)}
.mini-b{flex:none;font-size:12px;font-weight:550;color:var(--tinta);border:1px solid var(--ln2);
  border-radius:9px;padding:7px 11px;background:var(--branco);transition:.16s var(--e);white-space:nowrap}
.mini-b:hover{border-color:var(--tinta);background:var(--cinza)}

/* ================================================= acabamento final
   O que separa as referencias do meu: tipografia, densidade e consistencia.
   Aqui ficam os ajustes finos que precisam ganhar de tudo que veio antes. */

/* abas em pilula, como a fileira Overview / Subscriptions do Eclipse */
.pilulas{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0 2px}
.pilulas::-webkit-scrollbar{display:none}
.pilulas button{flex:none;font-size:12px;font-weight:550;color:var(--t3);border-radius:999px;
  padding:7px 13px;white-space:nowrap;transition:.18s var(--e)}
/* mesmo caso: fundo claro com letra branca no tema escuro */
.pilulas button.on{background:rgba(255,255,255,.12);color:#fff}
.pilulas button.preso{opacity:.35}

/* o menu da lateral com o peso certo */
.mi{font-weight:500}
.mi.on{font-weight:600}
.gpt{font-weight:600}

/* titulos sem repuxo: o -.04em antigo amassava as letras */
.perg h2{letter-spacing:-.018em}
.cart .v{letter-spacing:-.022em;font-weight:650}
.preco .pv{letter-spacing:-.025em;font-weight:650}
.marca,.lat .logo{letter-spacing:-.025em}

/* linha de meta embaixo do corte, que e o que da densidade nas referencias */
.cq-meta{margin-top:7px;text-align:center}
.cq-meta b{display:block;font-size:11px;font-weight:600;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cq-meta small{display:block;font-size:10px;color:var(--t3);margin-top:1px}
.cq-cx{display:flex;flex-direction:column}

/* o botao principal nao precisa de sombra vermelha forte */
.b{box-shadow:0 4px 14px rgba(255,0,51,.22)}
/* o segundo caminho: branco com letra preta, sem sombra vermelha */
/* MESMA LARGURA E COLADOS: sao duas saidas do mesmo passo, nao um botao e
   um apendice. Larguras diferentes fariam um parecer menos valido. */
.b-claro{background:#fff!important;color:#0a0a0b!important;box-shadow:0 4px 14px rgba(0,0,0,.4)!important;
  width:100%;font-weight:650;font-size:14px}
.b-claro:hover{background:#f0f0f1!important}

/* campo com foco discreto */
.campo:focus{box-shadow:0 0 0 3px rgba(255,0,51,.1)}

/* ÚLTIMA PALAVRA. No celular a barra de abas fica embaixo de tudo, então a
   ação precisa subir acima dela. Esta regra mora no fim da folha de propósito:
   escrita antes da definição base do .rodape, ela perdia a disputa e o botão
   ficava escondido atrás das abas. */
/* A ESCADA EM LINHA, SEM QUEBRA.
   Antes "250 mil views" e "R$ 500" empilhavam em telas estreitas e a leitura
   virava uma lista confusa. Agora cada degrau e uma linha so: views a
   esquerda, pontilhado no meio, valor a direita, e nada quebra. */
.escada{display:grid;gap:4px;margin-top:14px}
.deg{display:flex;align-items:baseline;gap:8px;padding:8px 11px;border-radius:8px;
  background:rgba(255,255,255,.08);animation:nasce .5s var(--e) both;white-space:nowrap}
.deg .dv{font-size:12.5px;color:rgba(255,255,255,.82);flex:none}
.deg .tracos{flex:1;border-bottom:1px dotted rgba(255,255,255,.28);transform:translateY(-3px);min-width:12px}
.deg .dr{font-size:14.5px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;flex:none;
  min-width:86px;text-align:right}
/* o degrau do topo e o que a pessoa tem que levar na memoria: ganha fundo
   branco, texto escuro e um selo. O tamanho da fonte continua igual aos
   outros, senao a coluna da direita desalinha. */
.deg.topo{background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.3)}
 /* o chip do topo tem fundo BRANCO: o texto dele nao segue o tema, senao
    no escuro ficava branco sobre branco e sumia */
.deg.topo .dv{color:var(--escuro);font-weight:600}
.deg.topo .dr{color:var(--escuro)}
.deg.topo .tracos{border-bottom-color:rgba(10,10,11,.22)}
.deg.topo::after{content:'topo';position:absolute;top:-7px;right:10px;font-size:9px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;background:var(--grad);color:#fff;
  border-radius:999px;padding:2px 7px}
.deg{position:relative}

/* ancora de preco: o valor cheio riscado ao lado do que ela paga hoje. Sem
   a ancora, "R$ 5,99" e so um numero; com ela, vira desconto. */
.preco .risco{font-size:17px;color:var(--t3);text-decoration:line-through;
  text-decoration-thickness:1.5px;align-self:center}

/* ------------------------------------------------ cartao da oferta */
.cart.oferta{padding:16px 15px 14px}
.selo-of{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:650;
  letter-spacing:.01em;border-radius:999px;padding:4px 10px 4px 8px;
  background:rgba(255,255,255,.13);color:#fff}
.selo-of i{width:6px;height:6px;border-radius:50%;background:#c6f24e;flex:none}
.of-t{font-size:15px;font-weight:650;letter-spacing:-.02em;color:#fff;margin:11px 0 2px}
.pq{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-top:4px}
.pq .pv{font-size:clamp(34px,10vw,44px);font-weight:760;letter-spacing:-.04em;line-height:1;color:#fff}
.pq .risco{font-size:16px;color:rgba(255,255,255,.55);text-decoration:line-through;
  text-decoration-thickness:1.5px}
.pq .off{align-self:center;background:#c6f24e;color:#15230a;border-radius:999px;
  padding:3px 9px;font-size:11.5px;font-weight:750;letter-spacing:-.01em;white-space:nowrap}
/* vantagem em LINHA FINA, nao em cartao cinza: cinco cartoes grandes
   empurravam o preco e o botao para fora da tela na hora de decidir */
.vant{display:grid;gap:8px;margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.14)}
.vant>div{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.35;
  color:rgba(255,255,255,.88)}
.vant .c{flex:none;width:17px;height:17px;border-radius:50%;background:rgba(198,242,78,.18);
  color:#c6f24e;display:flex;align-items:center;justify-content:center;font-size:9px;margin-top:1px}
.vant b{color:#fff;font-weight:680}
.cart.oferta .dica{margin-top:11px;font-size:11.5px;color:rgba(255,255,255,.6)}

/* lista de regras da senha: acende uma a uma enquanto digita */
.regras{list-style:none;margin-top:9px;display:grid;gap:4px}
.regras li{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--t3);transition:.2s}
.regras li span{width:15px;height:15px;border-radius:50%;flex:none;border:1.5px solid var(--ln2);
  display:flex;align-items:center;justify-content:center;font-size:8px;transition:.2s}
.regras li.feito{color:var(--ok)}
.regras li.feito span{background:var(--ok);border-color:var(--ok);color:#06231a}

.perfil-foto{display:flex;align-items:center;gap:14px;margin-top:12px}
.perfil-acoes{flex:1;display:grid;gap:6px;min-width:0}
.av.grande{width:72px;height:72px;border-radius:18px;flex:none;font-size:24px;overflow:hidden}
.av.grande .boneco{width:100%;height:100%;object-fit:cover}
#abasConta{margin-bottom:14px}
button.av{padding:0;overflow:hidden}

.saidas{display:grid;gap:6px;margin-top:14px}
.saidas .ac{padding:10px 12px}
.modal-pe{font-size:12.5px;color:var(--t3);margin-top:10px}
.elo-linha{display:block;width:100%;margin-top:10px;font-size:12.5px;color:var(--t3);
  text-decoration:underline;text-underline-offset:3px}

/* janela de um corte so: video grande, titulo e os dois downloads */
.modal-cx.cx-corte{max-width:400px;padding:14px}
.vid-um{width:100%;border-radius:12px;background:var(--escuro);aspect-ratio:9/16;
  object-fit:cover;display:block}
.corte-tit{display:block;font-size:13.5px;font-weight:620;margin-top:11px;line-height:1.3}

/* cartao de aviso: o resultado saiu, mas nao do jeito prometido */
.cart.alerta{border-color:rgba(255,159,10,.45);background:rgba(255,159,10,.07)}
.cart.alerta .ch h3{color:#ffb545}

/* ------------------------------------------------ campo de senha */
.senha-cx{position:relative;display:block}
.senha-cx .campo{padding-right:46px}
/* O ESPACAMENTO E A MONOESPACADA SO VALEM COM SENHA DIGITADA.
   Aplicados sempre, eles pegavam tambem o texto de exemplo ("Pelo menos 6
   caracteres"), que ficava grande e esparramado. `:not(:placeholder-shown)`
   e o seletor que distingue campo vazio de campo preenchido. */
.senha-cx .campo[type=password]:not(:placeholder-shown){
  font-family:'SF Mono','Courier New',monospace;letter-spacing:.1em}
.olho{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;border-radius:9px;color:var(--t3);transition:.15s}
.olho:hover{color:var(--tinta);background:rgba(255,255,255,.07)}
.olho svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* trilho + preenchimento: a barra anda e troca de cor conforme a senha
   deixa de ser adivinhavel. Verde so quando realmente vale verde. */
.forca{position:relative;display:flex;align-items:center;gap:10px;margin-top:9px}
.forca::before{content:'';flex:1;height:5px;border-radius:999px;background:var(--ln)}
.forca i{position:absolute;left:0;top:50%;margin-top:-2.5px;height:5px;width:0;border-radius:999px;
  max-width:calc(100% - 104px);transition:width .3s var(--e),background .3s}
.forca span{font-size:11.5px;font-weight:600;flex:none;width:94px;text-align:right}
.forca.f0 i{background:#ff3b30} .forca.f0 span{color:#ff6b61}
.forca.f1 i{background:#ff9f0a} .forca.f1 span{color:#ffb545}
.forca.f2 i{background:#c6f24e} .forca.f2 span{color:#c6f24e}
.forca.f3 i{background:var(--ok)} .forca.f3 span{color:var(--ok)}

/* GATILHOS, EM UMA LINHA CADA.
   .fin e a conta do preco por dia, que e aritmetica da nossa propria tabela e
   nao promessa. .urg e a escassez de verdade: o disco apaga job de cliente
   com mais de 7 dias (limpeza.sh, GUARDA_CLIENTE=7), entao o prazo existe e
   e honesto dizer. Inventar contador de vagas seria mentira. */
.fin{margin-top:7px;font-size:12.5px;color:rgba(255,255,255,.88)}
.fin b{font-weight:700;color:#fff}
.cart:not(.fogo) .fin{color:var(--t2)} .cart:not(.fogo) .fin b{color:var(--tinta)}
.urg{display:flex;align-items:flex-start;gap:7px;margin-top:11px;font-size:11.5px;line-height:1.4;
  border-radius:9px;padding:8px 10px;background:rgba(255,106,43,.14);color:#ffd9c7}
.urg>span{min-width:0}
.urg b{color:#fff;font-weight:700}
.urg i{flex:none;width:7px;height:7px;border-radius:50%;background:#ff6a2b;margin-top:4px;
  box-shadow:0 0 0 0 rgba(255,106,43,.6);animation:bate 1.9s infinite}
.cart:not(.fogo) .urg{background:rgba(255,106,43,.1);color:#8a4a22}
.cart:not(.fogo) .urg b{color:var(--tinta)}

/* OS ARGUMENTOS QUE NAO PRECISAM DE LINHA INTEIRA.
   "cancela em 1 clique", "sem fidelidade" e "sem multa" vendem, mas cada um
   ocupando uma linha com icone empurrava o preco para fora da tela. Em
   selos eles cabem numa faixa so e ainda se leem de relance. */
.selos{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px}
.selos span{font-size:11px;font-weight:600;letter-spacing:-.005em;border-radius:999px;
  padding:4px 9px;background:rgba(22,163,74,.1);color:var(--ok);white-space:nowrap}
.cart.fogo .selos span{background:rgba(255,255,255,.14);color:#fff}

/* dois campos seguidos sem rotulo viravam uma pilha sem leitura: agora cada
   um diz o que e, acima da caixa */
.campo-cx{display:block;margin-top:12px}
.campo-cx .campo-rot{display:block;font-size:12px;font-weight:550;color:var(--t2);margin-bottom:5px}
.campo-cx .campo{margin-top:0}

/* ===================================================== ESCALA POR TELA
   No Chrome do MacBook em 100% o menu cortava e tudo parecia grande; em 80%
   ficava certo. Em vez de pedir zoom, a escala do computador foi reduzida de
   verdade, e o texto do menu passou a encolher em vez de ser cortado.
   Tres faixas: telefone pequeno, telefone grande e computador. */
@media(min-width:1001px){
  .app{grid-template-columns:234px 1fr}
  .rodape{left:234px}
  /* CENTRADOS NO BOTAO, NAO NA JANELA.
     O dono: "o push do reloginho tem q ta centralizado com o botao começar
     agora. atualmente nem ele e nem a setinha ficam centralizados".
     Era isso mesmo: o rodape comeca depois do menu lateral (`left:234px`),
     entao o botao fica no meio do que SOBRA; o aviso e a seta usavam
     `left:50%` da janela inteira e pousavam 117px a esquerda dele. Agora os
     tres dividem a mesma referencia. */
  .conq{left:calc(50% + 117px)}
  .seta-baixo{left:calc(50% + 117px)}
  .lat{padding:15px 10px;gap:12px}
  .lat .logo{font-size:16px}
  .nivel{padding:9px 10px}
  .nivel .nt b{font-size:11.5px}
  .gpt{font-size:10px;margin:11px 0 5px;padding:0 9px}
  .mi{font-size:12.5px;padding:7px 9px;gap:9px;border-radius:8px}
  .mi .pt{width:27px;height:27px;border-radius:8px}
  .mi .pt svg{width:15px;height:15px}
  .cta-ia{padding:9px 10px;gap:9px;margin-top:11px}
  .cta-ia .ic{width:26px;height:26px}
  .cta-ia b{font-size:12.5px}
  .cta-ia small{font-size:10px}
  .av{width:28px;height:28px;font-size:11.5px}
  .lat .rod b{font-size:11.5px} .lat .rod small{font-size:10.5px}

  .fluxo{max-width:512px;padding:24px 20px 128px;gap:34px}
  .gancho h1{font-size:25px}
  .gancho p{font-size:13.2px;margin-top:10px}
  .gancho .passo{font-size:11px}
  .perg{padding:15px;border-radius:14px}
  .perg .rot{font-size:12.5px}
  .cart{padding:14px;border-radius:14px}
  .cart .v{font-size:23px}
  .cart .ch h3{font-size:11.5px}
  .cart .r{font-size:11.5px}
  .campo{font-size:16px;padding:11px 12px}   /* nunca abaixo de 16px: ver acima */
  .b{font-size:13.8px;padding:11px 20px;min-width:200px}
  .topo{padding:9px 20px}
  .bl:has(.gancho){margin-top:4px;padding-top:20px}
}

/* o nome do item encolhe em vez de ser cortado pela borda */
.mi{min-width:0}
.mi > :not(.pt):not(.tg){overflow:hidden;text-overflow:ellipsis;min-width:0}

/* telefone pequeno: nada pode vazar em 320px */
@media(max-width:360px){
  .fluxo{padding-left:14px;padding-right:14px;gap:26px}
  .gancho h1{font-size:21.5px}
  .cortes{gap:8px}
  .ops{gap:8px}
  .op{padding:9px}
  .b{font-size:14px;padding:12px 18px}
  .topo{padding:10px 12px}
}

@media(max-width:1000px){
  .rodape{bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));z-index:49}
  .fluxo{padding-bottom:150px}
}
/* as abas em pilula repetiam o menu da esquerda e ainda cortavam o texto */
.pilulas{display:none}
.pilulas button{border-radius:var(--r-p);font-size:11.5px;padding:6px 11px;font-weight:550}
.pilulas button.on{font-weight:600}

/* ================================================= painel do assinante */
/* ACAO EM LINHA, NAO EM BOTAO GRANDE.
   Quatro atalhos como botoes cheios empilhados viravam uma parede vermelha.
   Em linha com titulo e explicacao, a pessoa escolhe lendo, nao adivinhando. */
.acoes{display:grid;gap:9px}
.ac{display:block;width:100%;text-align:left;border:1.5px solid var(--ln);border-radius:12px;
  padding:12px 14px;background:var(--branco);transition:.16s var(--e);position:relative}
.ac:hover{border-color:var(--ln2);transform:translateY(-1px);box-shadow:var(--s2)}
.ac b{display:block;font-size:13px;font-weight:650;letter-spacing:-.012em;color:var(--tinta)}
.ac small{display:block;font-size:11.5px;color:var(--t3);margin-top:2px;line-height:1.35}
.ac.ac-forte{border-color:transparent;background:var(--grad);box-shadow:0 6px 18px rgba(255,0,51,.22)}
.ac.ac-forte b{color:#fff} .ac.ac-forte small{color:rgba(255,255,255,.85)}
.ac.ac-fraco b{color:var(--t2);font-weight:600}
.cart.fogo .ac{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.cart.fogo .ac b{color:#fff} .cart.fogo .ac small{color:rgba(255,255,255,.66)}

/* tres opcoes lado a lado, sempre na mesma linha */
.ops.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.ops.quantos{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.op.num{padding:11px 4px;text-align:center}
.op.num b{display:block;font-size:19px;font-weight:720;letter-spacing:-.03em;color:var(--tinta)}
.op.num small{display:block;font-size:10.5px;color:var(--t3);margin-top:0}
.op.num.preso{opacity:.62}
.op.num .so-ass{display:block;margin-top:5px;font-size:9px;font-weight:700;letter-spacing:.02em;
  color:#8a6d00;background:#ffe9a8;border-radius:999px;padding:2px 5px}

/* desenho de onde a legenda cai: um retangulo com a barrinha no lugar certo */
/* O DESENHO ERA MAIS ALTO QUE A CAIXA QUE O GUARDA.
   `.op .mini` tem 46px e `overflow:hidden`; a telinha tinha 48px, entao o
   topo e o pe dela eram cortados pela propria caixa. Agora a caixa dessas
   tres opcoes e mais alta e o desenho cabe inteiro dentro dela. */
.op.pos .mini,.op.tam .mini{height:58px}
.telinha{display:block;width:27px;height:44px;border-radius:5px;border:2px solid rgba(255,255,255,.75);
  background:rgba(255,255,255,.07);position:relative;margin:0 auto}
.telinha i{position:absolute;left:4px;right:4px;height:5px;border-radius:2px;background:#fff}
.telinha.pos-baixo i{bottom:6px} .telinha.pos-meio i{top:50%;margin-top:-2px} .telinha.pos-alto i{top:7px}
.op.on .telinha{border-color:var(--ok)} .op.on .telinha i{background:var(--ok)}
.letra-am{display:block;font-weight:750;color:#fff;letter-spacing:-.02em}
.letra-am.pequena{font-size:12px} .letra-am.media{font-size:17px} .letra-am.grande{font-size:24px}

/* escolher qual corte editar: a borda verde manda, como no resultado da busca */
.cortes.escolher .cq{cursor:pointer;border:2px solid transparent}
.cortes.escolher .cq.on{border-color:var(--ok);box-shadow:0 0 0 3px rgba(22,163,74,.16)}

.dupla.trocar{gap:8px}
.sob-campo{display:block;font-size:11.5px;color:var(--t3);margin-top:8px;line-height:1.4}
.sob-campo b{color:var(--tinta);font-weight:620}

.barra-comp{height:6px;border-radius:999px;background:var(--ln);overflow:hidden;margin-top:12px}
.barra-comp i{display:block;height:100%;width:40%;border-radius:999px;background:var(--grad);
  animation:vaivem 1.3s var(--e) infinite}
@keyframes vaivem{0%{margin-left:-40%}100%{margin-left:100%}}

.tag-ok{flex:none;background:rgba(22,163,74,.12);color:var(--ok);border-radius:999px;
  padding:3px 9px;font-size:10.5px;font-weight:700}
.tag-off{flex:none;background:var(--ln);color:var(--t3);border-radius:999px;
  padding:3px 9px;font-size:10.5px;font-weight:700}

.uso{margin-top:13px;padding-top:12px;border-top:1px solid var(--ln)}
.uso-t{font-size:12.5px;color:var(--t2)} .uso-t b{color:var(--tinta);font-weight:680}
.uso-b{height:7px;border-radius:999px;background:var(--ln);overflow:hidden;margin:7px 0 6px}
.uso-b i{display:block;height:100%;border-radius:999px;background:var(--grad);transition:width .9s var(--e)}
.uso small{font-size:11.5px;color:var(--t3)}
.cart .v u{text-decoration:none;font-size:.46em;font-weight:620;color:var(--t3);margin-left:2px}

/* ================================================= aviso de recurso */
/* O DONO: "durante o onboarding ir aparecendo notificacoes q falem todos os
   recursos q tem, com uma tag exclusivo assinante".
   Nasce no canto, some sozinho, nao cobre o campo que a pessoa esta
   preenchendo e nao pede clique nenhum: e informacao, nao interrupcao. */
/* NUNCA EM CIMA DO BOTAO.
   96px era um palpite: o rodape muda de altura conforme a cena (botao
   sozinho, botao + linha de apoio, botao + link secundario), entao as vezes
   o aviso pousava em cima da acao. Agora a altura do rodape e MEDIDA e vira
   a variavel --pe; o aviso sempre fica acima dela. */
 /* DOIS LUGARES, DOIS ASSUNTOS: o aviso de XP nasce em cima, colado no
    cabecalho; o de recurso nasce embaixo, acima do botao. Misturar os dois
    no mesmo canto fazia um parecer continuacao do outro. */
.aviso-rec{position:fixed;right:14px;bottom:calc(var(--pe,96px) + 12px);z-index:44;
  width:min(272px,calc(100vw - 28px));color:#fff;border-radius:15px;
  /* desfoque CURTO: com 24px o fundo virava uma mancha e o aviso parecia
     uma pedra fosca. Com 12px ainda se enxerga o que esta atras, que e o
     ponto do vidro. E menos preto: 42% deixa a cor do fundo passar. */
  background:rgba(26,26,30,.42);backdrop-filter:blur(12px) saturate(170%);
  -webkit-backdrop-filter:blur(12px) saturate(170%);
  border:1px solid rgba(255,255,255,.2);
  padding:8px 11px 10px;box-shadow:0 14px 36px rgba(10,10,11,.22);
  transform:translateY(16px) scale(.97);opacity:0;pointer-events:none;
  transition:transform .5s var(--mola),opacity .3s ease}
.aviso-rec.on{transform:none;opacity:1}
.aviso-rec::before{content:'';position:absolute;left:14px;right:14px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);pointer-events:none}
.aviso-rec{position:fixed;overflow:hidden}
@media(min-width:1001px){ .aviso-rec{right:24px} }
/* NA ETAPA DO VIDEO O CANTO DE BAIXO E A AREA DE TOQUE.
   A vitrine de exemplos vive exatamente onde o aviso pousa, e ele tapava o
   segundo e o terceiro cartao justo na tela onde mais se perde gente. So
   nesta etapa o aviso sobe para baixo do cabecalho, onde nao ha nada para
   cobrir. Nas outras cenas continua embaixo, como o dono pediu. */
body.etapa-video .aviso-rec{bottom:auto;top:calc(var(--topo,64px) + 10px);
  transform:translateY(-16px) scale(.97)}
body.etapa-video .aviso-rec.on{transform:none}
.aviso-rec .sel{display:inline-flex;align-items:center;gap:5px;font-size:8.5px;font-weight:750;
  letter-spacing:.03em;border-radius:999px;padding:2px 7px;margin-bottom:5px;
  background:linear-gradient(100deg,#ffd76a,#ffb020);color:#2a1c00}
.aviso-rec .sel i{width:5px;height:5px;border-radius:50%;background:#2a1c00;flex:none}
.aviso-rec b{display:block;font-size:12.5px;font-weight:650;letter-spacing:-.015em;line-height:1.25}
.aviso-rec small{display:block;font-size:11px;color:rgba(255,255,255,.78);margin-top:2px;line-height:1.38}