/* Gerado a partir dos `<style>` que viviam dentro do HTML (29/09/2026).
   Arquivo .css em /styles E SERVIDO pela plataforma, e ao contrario do CSS inline ele
   tem ETag, entao a segunda visita revalida com 304 em vez de baixar tudo de novo.
   NAO passa pela compiladora: sem `@apply`, e `rgb(a b c / d)` aqui funciona.
   A ORDEM DOS BLOCOS ABAIXO E A ORDEM QUE ELES TINHAM NO DOCUMENTO. Nao reordenar. */

.how-tm{
  --tm-violeta:rgb(var(--how-violeta));
  --tm-linha:rgb(var(--foreground) / .09);
  --tm-superficie:rgb(var(--how-noite) / .6);
  --tm-superficie2:rgb(var(--how-grafite) / .55);
  --tm-mola:cubic-bezier(.34,1.5,.64,1);
  padding-bottom:16px;
}

/* ===================== migalha ===================== */
.how-tm-mig{display:flex;align-items:center;gap:8px;margin:0 0 16px;color:rgb(var(--muted-foreground));font-size:13px}
.how-tm-mig a{color:rgb(var(--muted-foreground));text-decoration:none;transition:color .2s ease}
.how-tm-mig a:hover{color:rgb(var(--foreground))}
.how-tm-mig svg{width:13px;height:13px;flex:none}
.how-tm-mig b{color:rgb(var(--foreground));font-weight:600}

/* ===================== grade ===================== */
.how-tm-grade{display:grid;grid-template-columns:302px minmax(0,1fr);gap:18px;align-items:start}

/* ===================== lateral ===================== */
/* sticky de proposito: um indice que sobe junto com o texto nao serve para navegar
   um documento de 13 mil caracteres. E o unico sticky da loja. */
/* **A coluna INTEIRA e que gruda, nao so o indice.** Com o `sticky` no indice, o bloco de
   ajuda ficava estatico logo abaixo e o indice passava por cima dele ao rolar.
   `align-self:start` e obrigatorio, senao a coluna estica ate a altura do documento e nao
   tem onde grudar. */
/* Sem scroll dentro do indice. Isso obriga o grudado a ser CONDICIONAL, e essa parte nao
   pode ser desfeita sem pensar: conteudo de um `sticky` mais alto que a janela fica
   INALCANCAVEL enquanto o trecho esta grudado, ou seja a pessoa rolaria a pagina inteira
   sem ver as ultimas secoes nem o botao de ajuda. Dai o `max-height:940px` na media
   query: 940 = 820 da coluna + 96 do topo + folga.
   **Se o documento crescer, esse 940 envelhece.** */
.how-tm-lateral{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:14px}
@media(max-height:940px){
  .how-tm-lateral{position:static;top:auto}
}
.how-tm-caixa{display:flex;flex-direction:column;padding:18px;border:1px solid var(--tm-linha);border-radius:16px;background:var(--tm-superficie)}
.how-tm-caixa > h2{margin:0 0 14px;padding:0 6px;font-size:17px;font-weight:700;letter-spacing:-.015em}

.how-tm-topo-indice{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:default}
.how-tm-topo-indice h2{margin:0;padding:0 6px;font-size:17px;font-weight:700;letter-spacing:-.015em}
.how-tm-abrir{display:none;width:18px;height:18px;flex:none;color:rgb(var(--muted-foreground));transition:transform .3s var(--tm-mola)}

.how-tm-lista{display:flex;flex-direction:column;gap:2px;margin-top:14px}
/* `display:flex` do autor ganha do `[hidden]` do navegador; sem esta linha o indice
   nao fecha no celular. Mesma armadilha ja documentada no /faq e no /account/affiliate. */
.how-tm-lista[hidden]{display:none}

.how-tm-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:rgb(var(--muted-foreground));font-size:13.5px;font-weight:600;line-height:1.28;text-decoration:none;transition:background-color .22s ease,color .22s ease}
.how-tm-item span{flex:none;width:20px;color:rgb(var(--muted-foreground));font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.how-tm-item:hover{background:rgb(var(--foreground) / .05);color:rgb(var(--foreground))}
.how-tm-item[aria-current=true]{background:var(--tm-violeta);color:#fff}
.how-tm-item[aria-current=true] span{color:rgb(255 255 255 / .75)}
.how-tm-item:focus-visible{outline:2px solid var(--tm-violeta);outline-offset:2px}

/* cartao de suporte */
.how-tm-ajuda{flex:none;display:flex;flex-direction:column;gap:14px;padding:18px;border:1px solid var(--tm-linha);border-radius:16px;background:var(--tm-superficie)}
.how-tm-ajuda-linha{display:flex;align-items:flex-start;gap:13px}
.how-tm-ajuda-linha > svg{width:34px;height:34px;flex:none;color:var(--tm-violeta)}
.how-tm-ajuda-linha p{margin:0;color:rgb(var(--muted-foreground));font-size:13.5px;line-height:1.5}
.how-tm-botao{display:flex;align-items:center;justify-content:center;gap:9px;padding:12px;border:1px solid var(--tm-linha);border-radius:12px;background:var(--tm-superficie2);color:rgb(var(--foreground));font-size:14px;font-weight:600;text-decoration:none;transition:border-color .25s ease,background-color .25s ease,transform .4s var(--tm-mola)}
.how-tm-botao:hover{border-color:rgb(var(--how-violeta) / .6);background:rgb(var(--how-grafite));transform:translateY(-2px)}
.how-tm-botao svg{width:15px;height:15px}

/* ===================== conteudo ===================== */
.how-tm-conteudo{padding:30px 34px 34px;border:1px solid var(--tm-linha);border-radius:16px;background:var(--tm-superficie)}
/* A faixa e roxa nos DOIS temas, entao o que vive dentro dela usa cor fixa e nao token. */
.how-tm-topo{position:relative;margin-bottom:24px;padding:26px 30px;border:0;border-radius:20px;background:#33299e;overflow:hidden}
.how-tm-arco{position:absolute;right:-110px;top:-150px;width:340px;height:340px;opacity:.5}
.how-tm-topo h1{position:relative;margin:0 0 7px;font-size:clamp(24px,3vw,32px);font-weight:800;line-height:1.08;letter-spacing:-.03em;color:#fff}
.how-tm-versao{position:relative;display:flex;flex-wrap:wrap;gap:4px 10px;margin:0;color:#dad7ff;font-size:14px;line-height:1.5}
/* O separador so aparece quando o script achou a linha de versao; sem ela o CNPJ fica
   sozinho, sem um travessao orfao na frente. */
#tm-versao[hidden]{display:none}
#tm-versao + .how-tm-empresa::before{content:"· "}

/* o documento traz o proprio titulo; a pagina ja tem o dela */
.how-tm-doc > h1{display:none}

/* numero da clausula, extraido do proprio titulo pelo script. NAO e uma renumeracao:
   o documento se referencia por numero ("clausula 4.3"), entao o que aparece aqui
   e sempre o numero que o lojista escreveu. */
.how-tm-doc h2{position:relative;margin:34px 0 10px;padding-top:26px;border-top:1px solid var(--tm-linha);font-size:clamp(19px,2.2vw,24px);font-weight:700;letter-spacing:-.025em;scroll-margin-top:112px}
.how-tm-doc h2:first-of-type{margin-top:26px}
.how-tm-doc h2[data-num]::before{content:attr(data-num);display:block;margin-bottom:5px;color:var(--tm-violeta);font-size:14px;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.how-tm-doc h3{margin:22px 0 8px;color:rgb(var(--foreground));font-size:15.5px;font-weight:650;letter-spacing:-.01em;scroll-margin-top:112px}
.how-tm-doc p{margin:0 0 11px;max-width:74ch;color:rgb(var(--muted-foreground));font-size:14.5px;line-height:1.65}
.how-tm-doc strong{color:rgb(var(--foreground));font-weight:600}
.how-tm-doc a{color:rgb(var(--foreground));text-decoration:underline;text-decoration-color:rgb(var(--how-violeta) / .6);text-underline-offset:3px;transition:text-decoration-color .2s ease}
.how-tm-doc a:hover{text-decoration-color:var(--tm-violeta)}
.how-tm-doc ul{margin:0 0 13px;padding:0;max-width:74ch;list-style:none;display:flex;flex-direction:column;gap:7px}
.how-tm-doc li{position:relative;padding-left:19px;color:rgb(var(--muted-foreground));font-size:14.5px;line-height:1.55}
.how-tm-doc li::before{content:"";position:absolute;left:3px;top:.68em;width:6px;height:6px;border-radius:999px;background:rgb(var(--how-violeta) / .75)}
.how-tm-doc > p:first-of-type{color:rgb(var(--muted-foreground));font-size:13.5px}

.how-tm-semtexto{color:rgb(var(--muted-foreground));font-size:14.5px}

/* ===================== telas menores ===================== */
@media(max-width:1000px){
  .how-tm-grade{grid-template-columns:minmax(0,1fr)}
  /* o indice deixa de ser trilho e vira bloco que abre e fecha, senao 14 itens
     empurrariam o documento inteiro para fora da primeira tela */
  .how-tm-lateral{position:static;top:auto}
  .how-tm-caixa{display:block}
  .how-tm-topo{padding:20px 20px;border-radius:16px}
  .how-tm-arco{right:-140px;top:-120px;width:280px;height:280px}
  .how-tm-topo-indice{cursor:pointer}
  .how-tm-abrir{display:block}
  .how-tm-topo-indice[aria-expanded=true] .how-tm-abrir{transform:rotate(180deg)}
  .how-tm-conteudo{padding:24px 20px 28px}
}
@media(max-width:620px){
  .how-tm-conteudo{padding:20px 16px 24px}
  .how-tm-doc h2{margin-top:26px;padding-top:20px}
}
@media(prefers-reduced-motion:reduce){
  .how-tm-botao,.how-tm-abrir{transition:none}
}