/* =====================================================================
   MARCELO LANGSDORFF · PLATAFORMA
   Só o que NÃO existe no marca.css. Todo token vem de lá.

   Se você está prestes a escrever uma cor, um espaço ou um tamanho de
   texto em número aqui, pare: ele já tem nome no marca.css.

   A assinatura desta página é a LÂMINA. Cada material é um cartão de
   canto vivo com um fio na base. Em repouso o fio é cinza; no hover e no
   foco ele vira vermelho e se abre da esquerda para a direita, que é a
   incisão sendo feita. O vermelho continua sendo fio e nunca área, como
   manda a identidade.

   O `--txt-4` (fumaça, #6B7079) NÃO é usado nesta página, e é decisão e não
   descuido. Sobre o onyx ele dá razão de contraste 3,85, medido em
   03/08/2026, e texto pequeno exige 4,5 pela WCAG. Tudo aqui é rótulo em
   caixa alta de 10 e 11px com entreletra aberta, que é o pior caso de
   legibilidade que existe, então o degrau mais escuro que serve é o
   `--txt-3` (prata, 7,27). A hierarquia sai de tamanho, caixa e entreletra,
   nunca de escurecer até sumir.
   ===================================================================== */

/* ---------- O `hidden` PRECISA GANHAR -------------------------------- */
/* `[hidden]{display:none}` mora na folha do NAVEGADOR, e qualquer regra
   nossa que declare `display` ganha dela. Como `.ferramentas` é
   `display:flex`, o atributo `hidden` não escondia nada: a barra de busca
   aparecia vazia, sem filtro e sem contagem, na tela de acervo vazio e num
   piscar em toda carga antes de o JS rodar.

   Este é o único `!important` do arquivo, e ele existe para que esconder
   continue sendo uma decisão de HTML e não uma caçada no CSS. */
[hidden]{display:none !important}

/* ---------- BARRA DO TOPO -------------------------------------------- */
.barra{
  position:sticky; top:0; z-index:var(--z-barra);
  background:color-mix(in srgb, var(--fundo) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:var(--borda);
}
.barra__env{
  display:flex; align-items:center; gap:var(--e5);
  min-height:60px;
}
.barra__marca{display:flex; align-items:center; gap:var(--e3); text-decoration:none}
.barra__marca img{width:26px; height:26px}
.barra__marca span{
  font:600 var(--t-rotulo)/1 var(--f-display);
  letter-spacing:.16em; text-transform:uppercase; color:var(--txt-2);
}
.barra__vao{flex:1}

/* A BUSCA OCUPA O LUGAR DO ANTIGO VÃO, então ela é quem empurra a navegação
   para a direita. `flex:1` com `max-width` para o campo não engolir a barra
   numa tela larga, e `min-width:0` porque item de flex não encolhe abaixo do
   conteúdo sem isso, e é isso que faria a barra estourar no celular. */
.busca{
  flex:1; min-width:0; max-width:22rem;
  display:flex; align-items:center; gap:var(--e2);
  padding:0 var(--e3);
  /* CANTO RETO, como todo o resto: são seis `border-radius:0` neste arquivo e
     nenhum canto arredondado. A primeira versão daqui pediu `var(--r2)`, que
     NÃO EXISTE no sistema, e por isso saiu reto por acidente em vez de por
     decisão. Variável de raio inventada não quebra nada na tela, ela só
     resolve para 0 em silêncio, então o erro só apareceria no dia em que
     alguém criasse um `--r2` de verdade e a barra ficasse redonda sozinha. */
  border:var(--borda); border-radius:0;
  background:color-mix(in srgb, var(--txt) 3%, transparent);
  transition:border-color var(--rapido) var(--curva);
}
.busca:focus-within{border-color:var(--acento)}
.busca__glifo{width:16px; height:16px; flex:none; color:var(--txt-3)}
.busca__campo{
  flex:1; min-width:0;
  border:0; background:none; outline:none;
  padding:var(--e2) 0;
  font:400 var(--t-mini)/1.2 var(--f-texto); color:var(--txt);
}
.busca__campo::placeholder{color:var(--txt-3)}
/* O "x" nativo do WebKit some no tema escuro, então ele é redesenhado por
   filtro em vez de escondido: esconder tiraria o jeito de limpar no celular,
   que é onde esta base vive. */
.busca__campo::-webkit-search-cancel-button{
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; cursor:pointer;
  background:currentColor; opacity:.45;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.busca__atalhos{list-style:none; margin:0 0 var(--e5); padding:0}
.busca__atalhos a{
  display:block; padding:var(--e3) 0;
  text-decoration:none; color:var(--txt-2);
  border-bottom:var(--borda);
}
.busca__atalhos a:hover{color:var(--txt)}
.barra nav{display:flex; align-items:center; gap:var(--e5)}
.barra nav a{
  font:500 var(--t-mini)/1 var(--f-texto);
  text-decoration:none; color:var(--txt-3);
  transition:color var(--rapido) var(--curva);
}
.barra nav a:hover{color:var(--txt)}
/* O link de entrar é o único com fio, porque é a única ação da barra. */
.barra nav a.entrar{
  color:var(--txt); padding-bottom:2px;
  border-bottom:var(--fio) solid var(--acento);
}
@media (max-width:560px){
  .barra__marca span{display:none}
  .barra nav{gap:var(--e4)}
  /* O nome da marca já sumiu aqui, então o campo herda o espaço. O teto cai
     junto porque a navegação da direita continua precisando caber. */
  .busca{max-width:none}
}

/* ---------- CABEÇALHO ------------------------------------------------ */
/* Respiro menor que o do site institucional, de propósito. Lá o herói é o
   argumento e pode ocupar a tela; aqui o trabalho da página é achar um
   arquivo, e título alto demais empurra o primeiro cartão para baixo da
   dobra. A voz da marca continua no corpo do tipo, não no vão. */
.capa{padding-block:clamp(32px,4.5vw,var(--e8)) var(--e6)}
.capa__rotulo{
  display:flex; align-items:center; gap:var(--e3);
  font:500 var(--t-rotulo)/1 var(--f-texto);
  letter-spacing:.18em; text-transform:uppercase; color:var(--txt-3);
  margin-bottom:var(--e4);
}
.capa__rotulo::before{
  content:''; width:28px; height:var(--fio);
  background:var(--acento); flex:none;
}
.capa h1{max-width:16ch}
.capa__lead{
  margin:var(--e5) 0 0; max-width:var(--leitura);
  font-size:var(--t-lead); color:var(--txt-3);
}
.capa__lead em{font-family:var(--f-editorial); font-style:italic; color:var(--txt-2)}

/* ---------- FERRAMENTAS ---------------------------------------------- */
.ferramentas{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--e4);
  padding-block:var(--e5);
  border-top:var(--borda); border-bottom:var(--borda);
}
/* ESTA BUSCA É A DA VITRINE, e ela se chamava `.busca` até 06/08/2026, igual
   à da barra do topo lá em cima. Duas caixas de busca com o MESMO nome de
   bloco no MESMO arquivo, e a de baixo ganhava por vir depois.

   O sintoma não parecia colisão de CSS. Na barra do topo apareciam dois
   retângulos, um dentro do outro, com a lupa colada na linha de dentro: o de
   fora era a borda do bloco da barra, o de dentro era o `border` que ESTA
   regra põe no `input`, e a lupa flutuava por cima dele porque ESTA regra a
   posiciona em `absolute` a 12px da esquerda. As duas metades vinham de
   componentes diferentes e o resultado era uma terceira coisa que ninguém
   desenhou.

   E ela é a leitura errada de duas medições minhas: eu procurei por
   `^\.busca` e por `busca__glifo|busca__campo`, e nenhum dos dois padrões
   alcança `.busca input` nem `.busca svg`. Grep que não acha não é grep que
   prova ausência.

   SELETOR DE ELEMENTO DENTRO DE BLOCO É O QUE VAZA: `.busca input` pega
   qualquer campo que caia dentro de qualquer coisa chamada `.busca`, para
   sempre. O nome novo diz de quem ela é, e o `#busca` do `vitrine.js` é o id
   do campo e não mudou. */
.vitrine__busca{position:relative; flex:1 1 260px; max-width:380px}
.vitrine__busca input{
  width:100%; padding:var(--e3) var(--e4) var(--e3) 38px;
  background:var(--sup-2); color:var(--txt);
  border:var(--borda); border-radius:0;
  font:400 var(--t-mini)/1.4 var(--f-texto);
  transition:border-color var(--rapido) var(--curva);
}
.vitrine__busca input::placeholder{color:var(--txt-3)}
.vitrine__busca input:focus{border-color:var(--acento); outline:none}
.vitrine__busca input:focus-visible{outline:none}
.vitrine__busca svg{
  position:absolute; left:var(--e3); top:50%; translate:0 -50%;
  width:15px; height:15px; color:var(--txt-3); pointer-events:none;
}

.filtros{display:flex; flex-wrap:wrap; gap:var(--e2)}
.filtro{
  padding:var(--e2) var(--e3);
  background:none; color:var(--txt-3);
  border:var(--borda); border-radius:0; cursor:pointer;
  font:500 var(--t-rotulo)/1 var(--f-texto);
  letter-spacing:.1em; text-transform:uppercase;
  transition:color var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.filtro:hover{color:var(--txt); border-color:var(--prata)}
.filtro[aria-pressed="true"]{color:var(--txt); border-color:var(--acento)}

.contagem{
  margin-left:auto;
  font:500 var(--t-rotulo)/1 var(--f-texto);
  letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3);
}
@media (max-width:700px){ .contagem{margin-left:0; width:100%} }

/* ---------- A LÂMINA ------------------------------------------------- */
.acervo{
  display:grid; gap:var(--e4);
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
  /* padding e não padding-block: <ul> nasce com padding-inline-start de 40px,
     e `padding-block` não encosta nele. O sintoma era a grade de cartões
     recuada em relação ao título e à barra de busca, o tipo de desalinho
     que se vê e não se explica. */
  padding:var(--e6) 0 var(--e9);
  list-style:none; margin:0;
}
.acervo > *{min-width:0}

.lamina{
  position:relative; display:flex; flex-direction:column; gap:var(--e3);
  padding:var(--e5) var(--e5) var(--e5);
  background:none; text-decoration:none;
  border:var(--borda);
  transition:background var(--normal) var(--curva),
             transform var(--normal) var(--curva),
             border-color var(--normal) var(--curva);
}
/* o fio da base · em repouso não existe, no hover ele se abre da esquerda */
.lamina::after{
  content:''; position:absolute; inset:auto 0 -1px 0; height:var(--fio);
  background:var(--acento);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--lento) var(--curva);
}
.lamina:hover, .lamina:focus-visible{
  background:var(--sup); border-color:var(--prata); transform:translateY(-2px);
}
.lamina:hover::after, .lamina:focus-visible::after{transform:scaleX(1)}

.lamina__categoria{
  font:500 var(--t-micro)/1 var(--f-texto);
  letter-spacing:.18em; text-transform:uppercase; color:var(--txt-3);
}
.lamina__titulo{
  margin:0; font:600 var(--t-h4)/1.22 var(--f-display);
  letter-spacing:-.02em; color:var(--txt);
  text-wrap:balance;
}
.lamina__resumo{
  margin:0; font-size:var(--t-mini); line-height:1.55; color:var(--txt-3);
  flex:1;
}
.lamina__ficha{
  display:flex; align-items:center; gap:var(--e2);
  margin-top:var(--e2); padding-top:var(--e3);
  border-top:var(--borda);
  font:500 var(--t-micro)/1 var(--f-texto);
  letter-spacing:.12em; text-transform:uppercase; color:var(--txt-3);
}
/* a ficha é o dado que a pessoa usa para decidir se baixa agora ou no wifi,
   então ela ganha o degrau mais claro dos três */
.lamina__ficha b{color:var(--txt-2); font-weight:500}
.lamina__baixar{
  margin-left:auto; display:flex; align-items:center; gap:6px;
  color:var(--txt-3);
  transition:color var(--rapido) var(--curva);
}
/* :focus-visible junto com :hover, e não só o hover. Quem chega por teclado
   tem que ver a MESMA coisa que quem chega pelo mouse, senão o estado de
   foco fica pela metade e ninguém percebe, porque quem testa usa mouse. */
.lamina:hover .lamina__baixar,
.lamina:focus-visible .lamina__baixar{color:var(--acento-hover)}
.lamina__baixar svg{width:13px; height:13px}

/* ---------- VAZIO ---------------------------------------------------- */
.vazio{
  padding-block:var(--e9); text-align:center;
  border:1px dashed var(--linha);
  margin-block:var(--e6) var(--e9);
}
.vazio p{margin:0 auto; max-width:46ch; padding-inline:var(--e5)}
.vazio__frase{
  font-family:var(--f-editorial); font-style:italic;
  font-size:var(--t-h3); color:var(--txt-2); line-height:1.3;
}
.vazio__dica{margin-top:var(--e4) !important; font-size:var(--t-mini); color:var(--txt-3)}

/* ---------- RODAPÉ --------------------------------------------------- */
.pe{
  border-top:var(--borda); padding-block:var(--e5);
  display:flex; flex-wrap:wrap; gap:var(--e4); align-items:center;
  font-size:var(--t-mini); color:var(--txt-3);
}
.pe a{color:var(--txt-3); text-decoration:none}
.pe a:hover{color:var(--txt)}
.pe__vao{flex:1}

/* ---------- SÓ PARA LEITOR DE TELA ----------------------------------- */
.oculto{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* =====================================================================
   PAINEL DO ALUNO
   Mesma gramática da vitrine: canto vivo, vermelho em fio, hierarquia por
   tamanho e caixa. Nenhum token novo, nenhuma cor crua.
   ===================================================================== */

/* ---------- BARRA, LADO DE DENTRO ------------------------------------ */
.barra__quem{
  font:500 var(--t-mini)/1 var(--f-texto); color:var(--txt-3);
  max-width:22ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.barra__sair{margin:0}
.barra__sair button{
  background:none; border:0; padding:0; cursor:pointer;
  font:500 var(--t-mini)/1 var(--f-texto); color:var(--txt-3);
  transition:color var(--rapido) var(--curva);
}
.barra__sair button:hover{color:var(--txt)}
@media (max-width:560px){ .barra__quem{display:none} }

/* ---------- CAPAS DE DENTRO ------------------------------------------ */
.capa--estreita{max-width:46ch}
.capa--painel, .capa--aula{padding-block:clamp(28px,3.5vw,var(--e7)) var(--e5)}
.capa__rotulo a{color:inherit; text-decoration:none}
.capa__rotulo a:hover{color:var(--txt-2)}

/* ---------- ALERTA ---------------------------------------------------- */
.alerta{
  margin:var(--e4) 0 0; padding:var(--e3) var(--e4);
  border:var(--borda); border-left:var(--fio) solid var(--prata);
  font-size:var(--t-mini); color:var(--txt-2); background:var(--sup);
}
/* o fio vermelho é o que muda, e não o fundo: alerta com área vermelha
   gritaria mais alto que o conteúdo da página inteira */
.alerta--erro{border-left-color:var(--acento)}
.alerta a{color:var(--txt); text-underline-offset:3px}

/* ---------- PORTÃO DE ENTRADA ---------------------------------------- */
.portao{margin-top:var(--e5); display:flex; flex-direction:column; gap:var(--e3)}
.portao label{
  font:500 var(--t-rotulo)/1 var(--f-texto);
  letter-spacing:.16em; text-transform:uppercase; color:var(--txt-3);
}
.portao__dica{margin:0; font-size:var(--t-mini); color:var(--txt-3); max-width:52ch}
.portao__dica b{color:var(--txt-2); font-weight:500}
.portao input{
  padding:var(--e3) var(--e4);
  background:var(--sup-2); color:var(--txt);
  border:var(--borda); border-radius:0;
  font:400 var(--t-corpo)/1.4 var(--f-texto);
  transition:border-color var(--rapido) var(--curva);
}
.portao input:focus{border-color:var(--acento); outline:none}
.portao__pe{margin:var(--e2) 0 0; font-size:var(--t-mini); color:var(--txt-3)}
.portao__pe a{color:var(--txt); text-underline-offset:3px}

/* O campo do código é o objeto principal desta tela, então ele tem porte de
   objeto principal: dígito largo, entreletra aberta, fonte de display. */
.codigo{
  font:800 clamp(28px,5vw,40px)/1.1 var(--f-display) !important;
  letter-spacing:.32em; text-align:center; padding-block:var(--e4) !important;
}

.botao{
  align-self:flex-start; margin-top:var(--e2);
  padding:var(--e3) var(--e5);
  background:none; color:var(--txt);
  border:var(--fio) solid var(--acento); border-radius:0; cursor:pointer;
  font:600 var(--t-mini)/1 var(--f-display);
  letter-spacing:.1em; text-transform:uppercase;
  transition:background var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.botao:hover{background:var(--acento); color:#fff}
.botao--desfazer{border-color:var(--linha); color:var(--txt-3)}
.botao--desfazer:hover{background:none; border-color:var(--prata); color:var(--txt)}

/* ---------- CARTÃO DE CURSO ------------------------------------------ */
/* O fio da base deixa de ser gesto de hover e vira MEDIDOR: ele fica na
   fração já concluída, sempre. O hover levanta o fundo e não encosta no
   fio, senão o gesto mentiria sobre o quanto falta. A especificidade é
   maior que a de `.lamina:hover::after` de propósito. */
.lamina--curso::after{transform:scaleX(var(--progresso,0))}
.lamina--curso:hover::after,
.lamina--curso:focus-visible::after{transform:scaleX(var(--progresso,0))}
/* a trilha, para o fio ter contra o que ser lido quando está quase vazio */
.lamina--curso{border-bottom-color:var(--linha)}

/* ---------- MEDIDOR DA PÁGINA DO CURSO ------------------------------- */
.medidor{
  margin-top:var(--e5); display:flex; align-items:center; gap:var(--e3);
  max-width:420px;
}
.medidor__fio{position:relative; flex:1; height:var(--fio); background:var(--linha)}
.medidor__fio::after{
  content:''; position:absolute; inset:0; background:var(--acento);
  transform:scaleX(var(--progresso,0)); transform-origin:left;
}
.medidor__rotulo{
  font:500 var(--t-micro)/1 var(--f-texto);
  letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3); flex:none;
}

/* ---------- LISTA DE AULAS ------------------------------------------- */
/* Aqui a numeração é informação de verdade, ao contrário da vitrine: aula é
   sequência, e a ordem diz o que vem antes do quê. */
.aulas{list-style:none; margin:0; padding:0 0 var(--e9); border-top:var(--borda)}
.aula{border-bottom:var(--borda)}
.aula__link{
  position:relative; display:flex; align-items:center; gap:var(--e4);
  padding:var(--e4) var(--e2); text-decoration:none;
  transition:background var(--rapido) var(--curva);
}
.aula__link::after{
  content:''; position:absolute; inset:0 auto 0 0; width:var(--fio);
  background:var(--acento); transform:scaleY(0); transform-origin:top;
  transition:transform var(--normal) var(--curva);
}
.aula__link:hover, .aula__link:focus-visible{background:var(--sup)}
.aula__link:hover::after, .aula__link:focus-visible::after{transform:scaleY(1)}

.aula__n{
  font:600 var(--t-mini)/1 var(--f-display);
  letter-spacing:.06em; color:var(--txt-3); flex:none; width:2.2ch;
}
.aula__marca{
  flex:none; width:18px; height:18px; display:grid; place-items:center;
  border:var(--borda); color:var(--acento);
}
.aula--feita .aula__marca{border-color:var(--acento)}
.aula__marca svg{width:11px; height:11px}
.aula__texto{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.aula__titulo{font-size:var(--t-corpo); color:var(--txt)}
.aula--feita .aula__titulo{color:var(--txt-3)}
.aula__resumo{font-size:var(--t-mini); color:var(--txt-3)}
.aula__dur{
  flex:none; font:500 var(--t-micro)/1 var(--f-texto);
  letter-spacing:.12em; text-transform:uppercase; color:var(--txt-3);
}
@media (max-width:560px){
  .aula__resumo{display:none}
  .aula__link{gap:var(--e3)}
}

/* ---------- PÁGINA DA AULA ------------------------------------------- */
.palco{position:relative; aspect-ratio:16/9; background:var(--sup); border:var(--borda)}
.palco iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.aula__prosa{max-width:var(--leitura); margin:var(--e5) 0 0; color:var(--txt-2)}
.feito{margin:var(--e6) 0}

.passos{
  display:flex; gap:var(--e4); flex-wrap:wrap;
  padding-block:var(--e5) var(--e9); border-top:var(--borda);
}
.passo{
  flex:1 1 220px; display:flex; flex-direction:column; gap:4px;
  padding:var(--e4); border:var(--borda); text-decoration:none;
  transition:background var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.passo:hover{background:var(--sup); border-color:var(--prata)}
.passo--prox{text-align:right}
.passo__rotulo{
  font:500 var(--t-micro)/1 var(--f-texto);
  letter-spacing:.16em; text-transform:uppercase; color:var(--txt-3);
}
.passo__titulo{font-size:var(--t-mini); color:var(--txt)}

/* ---------- ATALHOS DE MATERIAL -------------------------------------- */
.secao--curta{padding-block:var(--e6) var(--e9); border-top:var(--borda)}
.secao__nota{margin:var(--e2) 0 var(--e5); font-size:var(--t-mini); color:var(--txt-3)}
.secao__nota a{color:var(--txt); text-underline-offset:3px}
.atalhos{
  list-style:none; margin:0; padding:0; display:grid; gap:var(--e2);
  grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));
}
.atalho{
  display:flex; align-items:center; gap:var(--e3);
  padding:var(--e3) var(--e4); border:var(--borda); text-decoration:none;
  font-size:var(--t-mini); color:var(--txt);
  transition:background var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.atalho:hover{background:var(--sup); border-color:var(--prata)}
.atalho > span:first-child{flex:1; min-width:0}
.atalho__ficha{
  flex:none; font:500 var(--t-micro)/1 var(--f-texto);
  letter-spacing:.12em; text-transform:uppercase; color:var(--txt-3);
}
.atalho--solo{max-width:420px; margin-top:var(--e5)}

/* ---------- AULA TRAVADA E OFERTA ------------------------------------ */
/* Travada não é link, então ela não reage ao cursor: promessa de clique que
   não leva a lugar nenhum é pior que o cadeado sozinho. */
.aula--travada .aula__link{cursor:default}
.aula--travada .aula__titulo{color:var(--txt-3)}
.aula--travada .aula__link:hover{background:none}
.aula--travada .aula__link::after{display:none}
.aula__cadeado{flex:none; color:var(--txt-3); display:flex}
.aula__cadeado svg{width:15px; height:15px}
/* o selo da amostra é o único lugar da lista que ganha o fio vermelho,
   porque ele é o convite e precisa ser o que o olho acha primeiro */
.aula__selo{
  flex:none; padding:3px var(--e2);
  border:1px solid var(--acento); color:var(--acento-hover);
  font:500 var(--t-micro)/1 var(--f-texto);
  letter-spacing:.14em; text-transform:uppercase;
}

.oferta{margin-top:var(--e5); display:flex; flex-direction:column; gap:var(--e3); align-items:flex-start}
.oferta__nota{margin:0; font-size:var(--t-mini); color:var(--txt-3); max-width:54ch}
.oferta__nota a{color:var(--txt); text-underline-offset:3px}
.oferta .botao{margin-top:0; text-decoration:none}
/* O PREÇO. Ele vem depois da frase e antes do botão, que é a ordem em que a
   pessoa pergunta: o que abre, quanto custa, onde clico. Maior que o texto em
   volta porque é o número que decide, e em osso e não em vermelho: o vermelho
   desta marca é bisturi, e preço não é alarme. */
.oferta__preco{
  margin:0; font:600 var(--t-h4)/1.2 var(--f-display);
  letter-spacing:-.01em; color:var(--txt-2);
}
.oferta__preco b{color:var(--txt)}
.portal--oferta .oferta__preco{margin:0 0 var(--e3)}
.passo--travado{opacity:.55; cursor:default}

/* ---------- ADMINISTRAÇÃO -------------------------------------------- */
/* Ferramenta interna: densa, sem herói e sem respiro de página de venda.
   Aqui a métrica é quantas linhas cabem na tela, não quanto ar tem. */
.admin{padding-block:var(--e5) var(--e9)}
.admin h1{margin:var(--e4) 0 var(--e5)}
.admin h2{margin:var(--e8) 0 var(--e4); color:var(--txt-2)}
/* `wrap` porque sao 7 abas e elas somam 566px de largura: em 375px a fila
   sem quebra empurrava o CORPO da pagina para o lado, medido em 04/08/2026,
   e essa era a origem dos 590px de rolagem em TODAS as seis telas de admin,
   inclusive nas que tem tabela estreita. Rolagem lateral aqui seria pior que
   a quebra: aba que sai da tela nao avisa que existe, e ele navega o admin
   pelo navegador do WhatsApp. */
.admin__abas{
  display:flex; flex-wrap:wrap; gap:var(--e3) var(--e5); padding-bottom:var(--e3);
  border-bottom:var(--borda);
}
.admin__abas a{
  font:500 var(--t-rotulo)/1 var(--f-texto);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt-3); text-decoration:none;
}
.admin__abas a:hover{color:var(--txt)}
.admin__vazio{font-size:var(--t-mini); color:var(--txt-3); max-width:60ch}
.admin__slug{margin-left:var(--e2); font-size:var(--t-micro); color:var(--txt-3)}

/* O embrulho de toda tabela, escrito pelo `rolavel()` do admin.js. Quem rola
   e ELE, e nao a pagina: em 375px a de assinaturas pede 644px, e sem isto o
   `body` inteiro andava para o lado.

   `display:block; overflow-x:auto` na propria tabela resolveria sem mexer no
   markup e estragaria o desktop: a tabela viraria caixa comum, o `width:100%`
   passaria a valer para a caixa e a tabela anonima de dentro encolheria ate o
   conteudo, entao a linha de baixo de cada celula pararia no fim do texto em
   vez de atravessar a largura toda.

   Nao ha `overflow-y` declarado de proposito. Fixar `hidden` cortaria o
   `<details>` que abre dentro da celula, e `auto` sozinho ja e o que o
   navegador calcula aqui. */
.admin__rolagem{overflow-x:auto; overscroll-behavior-x:contain}
.admin__tabela{width:100%; border-collapse:collapse; font-size:var(--t-mini)}
/* `color` explícito em toda regra de tabela: sem doctype a página cai em
   quirks mode e a tabela NÃO herda cor dos ancestrais, some no fundo. */
.admin__tabela th, .admin__tabela td{
  padding:var(--e3) var(--e3) var(--e3) 0;
  border-bottom:var(--borda); text-align:left; vertical-align:top;
  color:var(--txt-2);
}
.admin__tabela th{
  font:500 var(--t-micro)/1 var(--f-texto);
  letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3);
}
.admin__tabela a{color:var(--txt)}
.admin__tabela summary{cursor:pointer; color:var(--txt-3)}
.admin__tabela summary:hover{color:var(--txt)}

.admin__form{
  display:grid; gap:var(--e3); max-width:640px;
  padding:var(--e4) 0 0;
}
.admin__form--linha{
  max-width:none;
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  align-items:end;
}
/* A capa que JÁ está no ar, mostrada acima dos dois campos que a trocam.
   Sem ela, o admin edita a imagem às cegas: "tem capa" e "não tem" eram
   indistinguíveis num campo de texto que às vezes traz um endereço do
   YouTube com 90 caracteres. Teto baixo de propósito, é conferência e não
   vitrine. */
.admin__capa{margin:0; max-width:260px}
.admin__capa img{
  display:block; width:100%; height:auto; aspect-ratio:16/9;
  object-fit:cover; border:var(--borda); background:var(--sup-2);
}
.admin__dica{
  margin:calc(-1 * var(--e2)) 0 0;
  font-size:var(--t-mini); line-height:1.5; color:var(--txt-3);
}
/* O grupo de caixas de categoria. Colunas que se acomodam, porque a lista
   cresce: com oito categorias uma coluna só viraria uma tira de rolagem no
   meio do formulário, e no celular o Marcelo perderia o botão de salvar de
   vista. O `min(190px,100%)` é o mesmo padrão da grade do acervo. */
.admin__grupo{
  border:var(--borda); border-radius:0; margin:0; padding:var(--e3) var(--e4) var(--e4);
}
.admin__grupo legend{
  padding:0 var(--e2);
  font:500 var(--t-micro)/1 var(--f-texto);
  letter-spacing:.12em; text-transform:uppercase; color:var(--txt-3);
}
.admin__caixas{
  display:grid; gap:var(--e2);
  grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));
}
/* ALVO DE TOQUE DE 44px, e aqui isso não é conforto. O `<label>` envolve a
   caixa, então ele inteiro é clicável; sem altura ele fica com 22px, e no
   celular, com uma coluna e uma lista que cresce, o dedo erra. E errar aqui
   não é um clique perdido: cada caixa é uma ligação, e desmarcar por engano
   TIRA a peça da categoria no próximo Salvar, sem confirmação nenhuma. */
.admin__caixas .campo--caixa{
  margin:0; min-height:44px; align-items:center;
  padding:var(--e1) var(--e2); border:1px solid transparent;
}
.admin__caixas .campo--caixa:hover{border-color:var(--linha)}
.admin__caixas .campo--caixa:focus-within{border-color:var(--prata)}
/* Rascunho aparece na lista de propósito, para dar para preparar a categoria
   antes de publicá-la, e o itálico é o que separa uma da outra sem uma
   segunda coluna de estado. */
.admin__caixas i{font-style:italic; color:var(--txt-4)}

/* A LISTA ARRASTÁVEL da ordem da home. Cada linha tem 56px, acima dos 44 do
   alvo de toque, porque aqui o dedo precisa PEGAR e não só tocar. */
.admin__ordenar{
  list-style:none; margin:var(--e3) 0 var(--e4); padding:0;
  display:grid; gap:var(--e2); max-width:640px;
}
.admin__linha{
  display:flex; align-items:center; gap:var(--e3);
  min-height:56px; padding:var(--e2) var(--e3);
  border:var(--borda); background:var(--sup); cursor:grab;
}
.admin__linha:active{cursor:grabbing}
.admin__linha--pegando{opacity:.45; border-color:var(--acento)}
.admin__pega{color:var(--txt-4); font-size:18px; line-height:1; letter-spacing:-2px}
.admin__linha__nome{display:grid; gap:2px; flex:1; min-width:0}
.admin__linha__nome a{color:var(--txt); text-decoration:none}
.admin__linha__nome a:hover{color:var(--txt-2)}
.admin__pos{margin:0}
.admin__pos input{width:64px; text-align:center}

/* O bloco de excluir. Fio vermelho à esquerda, e é o único lugar da
   administração que o usa: aqui o vermelho é bisturi de verdade. */
.admin__form--perigo{
  border-left:2px solid var(--acento); padding-left:var(--e4);
  max-width:520px;
}

/* O botão que alterna Premium e Aberto. Ele diz o ESTADO ATUAL, e não o que
   vai acontecer: numa tabela de 65 linhas o que se lê de relance é a coluna,
   e uma coluna que dissesse "Tornar aberto" em tudo que é premium faria a
   varredura visual devolver o oposto da verdade. */
.admin__alterna, .admin__acao{
  font:500 var(--t-micro)/1 var(--f-texto); letter-spacing:.12em;
  text-transform:uppercase; padding:6px 10px; min-height:32px;
  border:1px solid var(--linha); background:none; color:var(--txt-3);
  cursor:pointer;
}
.admin__alterna--liga{border-color:var(--incisao); color:var(--incisao-suave)}
.admin__alterna:hover{border-color:var(--prata); color:var(--txt)}

/* ---------- AS DUAS AÇÕES DO AVISO ----------------------------------- */
/* VERDE E VERMELHO, pedidos pelo Og em 06/08/2026, e são a ÚNICA cor
   semântica do projeto. Vale a pena escrever por que elas existem só aqui.

   A identidade do Marcelo NÃO TEM VERDE, e este não entra no `marca.css`: ele
   é ferramenta e não marca. A área do aluno continua com onyx, osso e o fio
   vermelho, e a administração pode gastar cor porque o trabalho dela é impedir
   um clique errado na caixa de entrada de gente de verdade.

   E o vermelho daqui NÃO é a incisão. Lá ele é o gesto da marca, sempre fio e
   nunca área; aqui ele quer dizer "pare". São dois significados na mesma cor,
   e o que os separa é o lugar: dentro de `/admin`, num botão, é semântica.

   CONTORNO EM REPOUSO E PREENCHIDO NO HOVER, e isto é decisão contra o pedido
   literal. Quarenta linhas com dois botões chapados de verde e vermelho viram
   um semáforo, e a tabela deixa de ser legível justamente na varredura de
   relance que ela existe para servir. Em repouso a cor é o contorno, que já
   separa os dois de longe; sob o ponteiro ela enche, que é o sinal mais forte
   possível contra o clique errado, porque aparece ANTES do clique.

   Os tons não são verde e vermelho puros. `#4FC98B` e `--incisao-suave` são os
   degraus que passam de 4,5 sobre o onyx em texto de 10px em caixa alta, que é
   o pior caso de legibilidade que existe, e os fundos do hover são escuros o
   bastante para o branco por cima também passar. */
.admin__acao--ir{border-color:#1B7A50; color:#4FC98B}
.admin__acao--ir:hover{background:#1B7A50; color:#fff}
.admin__acao--parar{border-color:var(--incisao); color:var(--incisao-suave)}
.admin__acao--parar:hover{background:var(--incisao); color:#fff}
.admin__acao:disabled{
  border-color:var(--linha); color:var(--txt-4);
  cursor:not-allowed; background:none;
}

/* O ESPAÇO ENTRE OS DOIS É A GUARDA, e não estilo: os dois botões estavam
   colados em duas linhas, e "Mandar" manda e-mail para todo mundo, sem
   desfazer. `flex-wrap` para o par cair inteiro numa segunda linha se a coluna
   apertar no celular, em vez de o segundo botão sumir para fora da tabela. */
.admin__acoes{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e3)}
.admin__acoes form{margin:0}

/* O desfazer de uma linha JÁ RESOLVIDA. Ele não é botão porque a linha não
   está pedindo nada: 64 peças dispensadas com um botão de verdade cada uma
   é uma tela inteira gritando por atenção que ninguém precisa dar. */
.admin__desfazer{
  border:0; background:none; padding:0; cursor:pointer;
  font:400 var(--t-micro)/1 var(--f-texto); color:var(--txt-3);
  text-decoration:underline; text-underline-offset:3px;
}
.admin__desfazer:hover{color:var(--txt)}
.campo{display:flex; flex-direction:column; gap:6px}
.campo > span{
  font:500 var(--t-micro)/1 var(--f-texto);
  letter-spacing:.12em; text-transform:uppercase; color:var(--txt-3);
}
.campo input, .campo select, .campo textarea{
  padding:var(--e2) var(--e3);
  background:var(--sup-2); color:var(--txt);
  border:var(--borda); border-radius:0;
  font:400 var(--t-mini)/1.4 var(--f-texto);
}
.campo input:focus, .campo select:focus, .campo textarea:focus{
  border-color:var(--acento); outline:none;
}
.campo--caixa{flex-direction:row; align-items:center; gap:var(--e2)}
.campo--caixa input{width:16px; height:16px; accent-color:var(--acento); padding:0}
.campo--caixa > span{text-transform:none; letter-spacing:0; font-size:var(--t-mini); color:var(--txt-2)}
.admin details .admin__form{padding:var(--e3) 0 var(--e4); max-width:420px}

/* ---------- CARTÃO DE CONTEÚDO --------------------------------------- */
/* A peça central do modelo novo. Ela mostra TUDO, inclusive o que é pago:
   o que muda é o véu e o cadeado sobre a capa. Esconder o premium da lista
   tiraria da plataforma a única vitrine que ela tem para se pagar. */
.secao{padding-block:var(--e6) 0}
.secao > .d4{margin:0}
.capa__prosa{
  margin:var(--e4) 0 0; max-width:var(--leitura);
  font-size:var(--t-corpo); line-height:1.62; color:var(--txt-2);
}

.cartao{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:none; text-decoration:none; border:var(--borda);
  transition:background var(--normal) var(--curva),
             transform var(--normal) var(--curva),
             border-color var(--normal) var(--curva);
}
/* o fio da base · em repouso não existe, no hover ele se abre da esquerda.
   Mesmo gesto da lâmina, porque são a mesma família de superfície. */
.cartao::after{
  content:''; position:absolute; inset:auto 0 -1px 0; height:var(--fio);
  background:var(--acento); transform:scaleX(0); transform-origin:left;
  transition:transform var(--lento) var(--curva);
}
.cartao:hover, .cartao:focus-visible{
  background:var(--sup); border-color:var(--prata); transform:translateY(-2px);
}
.cartao:hover::after, .cartao:focus-visible::after{transform:scaleX(1)}

.cartao__capa{
  position:relative; display:block; aspect-ratio:16/9; overflow:hidden;
  background:var(--sup-2); border-bottom:var(--borda);
}
.cartao__capa img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--lento) var(--curva);
}
.cartao:hover .cartao__capa img{transform:scale(1.03)}

/* Sem capa cadastrada, um glifo do tipo em vez de um retângulo vazio.
   Retângulo vazio lê como imagem que não carregou, e são dois problemas
   com conserto diferente. */
.cartao__capa--vazia{display:grid; place-items:center}
.cartao__glifo{display:block; width:44px; height:44px; color:var(--linha)}
.cartao__glifo svg{width:100%; height:100%}

/* O VÉU · leve de propósito. Ele existe para dizer "isto é pago", não para
   esconder o que está embaixo: capa ilegível deixa de convencer alguém a
   assinar, que é a única coisa que este cartão precisa fazer. */
.cartao__veu{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(14,15,18,.34) 0%, rgba(14,15,18,.62) 100%);
}
.cartao--travado .cartao__capa img{filter:saturate(.55)}

.cartao__cadeado{
  position:absolute; inset:auto var(--e3) var(--e3) auto;
  display:grid; place-items:center; width:30px; height:30px;
  color:var(--osso); background:rgba(14,15,18,.72);
  border:1px solid rgba(244,241,236,.28);
}
.cartao__cadeado svg{width:15px; height:15px}

.cartao__texto{
  display:flex; flex-direction:column; gap:var(--e2);
  padding:var(--e4) var(--e4) var(--e5); flex:1;
}
/* DUAS LINHAS RESERVADAS, e o titulo pode passar disso. O piso existe para
   que titulo de uma linha nao suba a descricao do cartao ao lado: com 65
   pecas na grade, a maioria cabe em uma linha e um punhado precisa de duas,
   entao sem o piso a coluna vira um serrote.
   NAO ha teto aqui, de proposito. "Os 11 Suplementos para Ganhos,
   Recuperacao e Potencia" ocupa TRES linhas em 375px, medido, e cortar o
   nome de uma peca para alinhar uma regua e pagar no lugar errado. Quem
   absorve a sobra e o `margin-top:auto` da ficha. */
.cartao__titulo{
  font:600 var(--t-h4)/1.22 var(--f-display); letter-spacing:-.02em;
  color:var(--txt); text-wrap:balance;
  min-height:calc(var(--t-h4) * 1.22 * 2);
}
/* O `max-height` NAO e redundante com o `-webkit-line-clamp`, e a prova
   estava na tela em 04/08/2026: em vários cartões aparecia uma TERCEIRA
   linha pela metade, cortada na horizontal. A causa é o `flex:1`, que manda
   o elemento crescer para preencher o cartão e ganha da altura implícita do
   clamp. O clamp continua ali porque é ele que põe as reticências no fim da
   segunda linha; o teto é que garante que nada vaze.

   Isto é rede de segurança e não a solução: quem escreve texto que cabe é o
   campo `resumo`. O teto existe para o dia em que alguém digitar um resumo
   comprido no admin. */
/* O `min-height` e o par do `max-height`: juntos eles fixam a descricao em
   DUAS linhas sempre, tenha ela uma ou duas. Sem o piso, cartao de resumo
   curto encolhia e o divisor subia junto, que e o desalinhamento que o Og
   apontou em 05/08/2026. */
.cartao__resumo{
  font-size:var(--t-mini); line-height:1.55; color:var(--txt-3);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(var(--t-mini) * 1.55 * 2);
  max-height:calc(var(--t-mini) * 1.55 * 2);
}
/* `margin-top:auto` E O QUE ALINHA O DIVISOR, e ele nao e redundante com o
   `flex:1` que o resumo tinha: o resumo esta preso entre piso e teto de duas
   linhas, entao ele NAO consegue crescer, e a sobra do cartao ficava embaixo
   da ficha em vez de acima dela. Cada cartao terminava na altura do proprio
   texto, e a regua de "PDF · X paginas" subia e descia pela grade.
   Como o `<li>` da grade estica todos os cartoes da fileira para a mesma
   altura, empurrar a ficha para o pe poe o divisor no MESMO y em todos.
   Isto tambem e o que absorve o titulo de tres linhas sem cortar nada. */
.cartao__ficha{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--e2); margin-top:auto; padding-top:var(--e3);
  border-top:var(--borda);
  font:500 var(--t-micro)/1 var(--f-texto);
  letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3);
}
.cartao__feito{display:grid; place-items:center; width:14px; height:14px; color:var(--acento)}
.cartao__feito svg{width:100%; height:100%}

/* medidor fino no pé do cartão de série */
.cartao__fio{
  position:relative; display:block; height:var(--fio);
  background:var(--linha); margin-top:var(--e3);
}
.cartao__fio::after{
  content:''; position:absolute; inset:0; background:var(--acento);
  transform:scaleX(var(--progresso,0)); transform-origin:left;
}

/* O CARTÃO DE CATEGORIA. Ele é o mesmo cartão, com o título maior: na home
   ele é a unidade de navegação, e ao lado dos cartões de material precisa
   ler primeiro. Fio à esquerda, nunca área preenchida, mesma regra da marca.

   A ficha dele soma material e série, então uma categoria que guarda um
   curso de doze aulas não sai como "3 itens": o número está ali para
   convencer a clicar, e para menos ele mente contra a própria peça. */
.cartao--categoria .cartao__titulo{font-size:var(--t-h3)}
.cartao--categoria{border-left:2px solid var(--osso-2)}
.cartao--categoria:hover, .cartao--categoria:focus-visible{border-left-color:var(--acento)}

/* ---------- SELOS ----------------------------------------------------- */
/* O vermelho é bisturi e não tinta: NOVO sai em fio e texto, nunca em área
   preenchida. PREMIUM é mais contido de propósito, porque quem faz o
   trabalho de dizer "é pago" é o cadeado sobre a capa, e dois gritos no
   mesmo cartão não deixam nenhum ser ouvido.

   CHAMA-SE `etiqueta` E NÃO `selo` de propósito. O `marca.css` já tem um
   `.selo`, e ele é uma área vermelha preenchida com texto branco, que é
   uma peça legítima do site. Reaproveitar o nome fez as etiquetas nascerem
   preenchidas em 04/08/2026, porque este bloco trocava só a cor do texto e
   herdava o `background` de lá. Corrigir sobrescrevendo daria a mesma
   classe dois sentidos em dois deploys que compartilham o `marca.css`. */
/* A FILEIRA DE SELOS E RESERVADA MESMO VAZIA, e isto e prevencao de um
   defeito com data marcada. Hoje as 65 pecas estao dentro dos 7 dias de NOVO,
   entao todas tem selo e a grade parece alinhada. Passada a semana, as
   abertas ficam SEM selo nenhum e o titulo delas sobe 18px em relacao as
   premium ao lado, na mesma fileira. O sintoma apareceria sozinho, dias
   depois, sem ninguem ter mexido em nada.
   A altura sai do proprio selo (fonte micro em linha 1, mais 3px de folga em
   cima e embaixo, mais o fio de contorno), e nao de um numero copiado: se a
   escala tipografica mudar, a reserva acompanha. */
.cartao__selos{
  display:flex; flex-wrap:wrap; gap:var(--e2); margin-bottom:var(--e1);
  min-height:calc(var(--t-micro) + 6px + 2px);
}
.etiqueta{
  display:inline-block; padding:3px 7px; background:none;
  font:600 var(--t-micro)/1 var(--f-texto);
  letter-spacing:.16em; text-transform:uppercase;
}
.etiqueta--novo{color:var(--incisao-suave); border:1px solid var(--incisao)}
.etiqueta--premium{color:var(--txt-2); border:1px solid var(--linha)}
.capa--aula .cartao__selos{margin-top:var(--e4)}

/* ---------- PALCO TRAVADO -------------------------------------------- */
.palco--travado{position:relative; display:grid; place-items:center; background:var(--sup-2)}
.palco--travado img{width:100%; height:100%; object-fit:cover; filter:saturate(.5)}
.palco__veu{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,15,18,.42) 0%, rgba(14,15,18,.7) 100%);
}
.palco__glifo{
  display:block; width:clamp(64px,9vw,104px); aspect-ratio:1; color:var(--linha);
}
.palco__glifo svg{width:100%; height:100%}
.palco__cadeado{
  position:absolute; display:grid; place-items:center; width:52px; height:52px;
  color:var(--osso); border:1px solid rgba(244,241,236,.34);
  background:rgba(14,15,18,.6);
}
.palco__cadeado svg{width:24px; height:24px}

.oferta__nota--pe{margin-top:var(--e2)}
.barra__selo{color:var(--acento); margin-left:4px; font-weight:700}

/* ---------- ADMIN · peças do esquema v2 ------------------------------- */
/* O bloco de acrescentar vem antes da lista e é destacado com um fio, porque
   a tarefa mais frequente aqui é cadastrar e não revisar. Fio à esquerda e
   não caixa preenchida: mesma regra do resto, o vermelho é bisturi. */
.admin__novo{
  position:relative; padding:var(--e5) 0 var(--e6) var(--e5);
  border-left:var(--fio) solid var(--acento);
  margin-bottom:var(--e6);
}
.admin__novo .d4{margin:0 0 var(--e2)}
.admin__novo .secao__nota{margin-top:0}

/* "sim" em vez de um símbolo: numa tabela densa, ✓ e ✗ se confundem de
   relance, e o que está em jogo é se o material está no ar. */
.admin__sim{
  font:600 var(--t-micro)/1 var(--f-texto);
  letter-spacing:.14em; text-transform:uppercase; color:var(--acento);
}
.admin__tabela b{color:var(--txt-2); font-weight:600}
.admin__tabela code{
  font-size:var(--t-mini); color:var(--txt-3);
  background:var(--sup-2); padding:1px 5px;
}
.admin__tabela form{margin:0}
.admin__tabela input[type=text], .admin__tabela input:not([type]), .admin__tabela select{
  background:var(--sup-2); border:var(--borda); color:var(--txt);
  padding:5px 7px; font:400 var(--t-mini)/1.2 var(--f-texto); min-width:0;
}
.admin__form--linha{display:flex; flex-wrap:wrap; gap:var(--e2); align-items:center}
.admin__form--linha .campo{margin:0}

/* ---------- BARRA LATERAL --------------------------------------------- */
/* Pedida pelo Og em 04/08/2026: "expandível e comprimível com um botão
   intuitivo, ou só de passar o mouse em cima". São as duas coisas, e não
   uma escolha entre elas, porque cada uma cobre o que a outra não cobre:
   o hover é instantâneo e não pede clique, o botão fixa e sobrevive à
   navegação. Se o JavaScript não subir, o hover continua funcionando. */
.palco-geral{display:flex; align-items:flex-start}
main.com-lado{flex:1; min-width:0}

.lado{
  position:sticky; top:0; align-self:stretch; flex:0 0 auto;
  width:var(--lado-fechada,64px);
  border-right:var(--borda); background:var(--fundo);
  padding:var(--e4) 0;
  transition:width var(--normal) var(--curva);
  z-index:var(--z-barra);
}
.lado:hover, .lado:focus-within, .lado--fixada{width:216px}

.lado__botao{
  display:grid; place-items:center; width:100%; height:38px;
  background:none; border:0; color:var(--txt-3); cursor:pointer;
  margin-bottom:var(--e3);
}
.lado__botao svg{width:19px; height:19px}
.lado__botao:hover, .lado__botao:focus-visible{color:var(--txt)}
.lado--fixada .lado__botao{color:var(--acento)}

.lado nav ul{list-style:none; margin:0; padding:0; display:grid; gap:2px}

.lado__item{
  position:relative; display:grid; align-items:center;
  grid-template-columns:64px 1fr;
  height:44px; color:var(--txt-3); text-decoration:none;
  white-space:nowrap; overflow:hidden;
  transition:color var(--rapido) var(--curva), background var(--rapido) var(--curva);
}
.lado__item:hover, .lado__item:focus-visible{color:var(--txt); background:var(--sup)}
.lado__glifo{display:grid; place-items:center}
.lado__glifo svg{width:19px; height:19px}
.lado__rotulo{
  font:500 var(--t-mini)/1 var(--f-texto);
  opacity:0; transition:opacity var(--rapido) var(--curva);
}
.lado:hover .lado__rotulo, .lado:focus-within .lado__rotulo,
.lado--fixada .lado__rotulo{opacity:1}

/* Onde a pessoa está sai em FIO vermelho na borda, e não em fundo colorido:
   é a mesma regra do resto, o vermelho aparece em traço e nunca em área. */
.lado__item--aqui{color:var(--txt)}
.lado__item--aqui::before{
  content:''; position:absolute; inset:0 auto 0 0;
  width:var(--fio); background:var(--acento);
}

/* No toque não existe hover, e uma gaveta que só abre com JS seria uma
   navegação que some quando o script falha. Então em tela estreita a barra
   vira uma fileira que rola, sempre com os rótulos à mostra. */
@media (max-width:820px){
  .palco-geral{display:block}
  .lado{
    position:static; width:auto; display:flex; gap:var(--e2);
    overflow-x:auto; padding:var(--e2) var(--margem);
    border-right:0; border-bottom:var(--borda);
  }
  .lado__botao{display:none}
  .lado nav{width:100%}
  .lado nav ul{display:flex; gap:var(--e2)}
  .lado__item{
    grid-template-columns:auto auto; gap:var(--e2);
    height:36px; padding-inline:var(--e3); border:var(--borda);
  }
  .lado__rotulo{opacity:1}
  .lado__item--aqui::before{inset:auto 0 0 0; width:auto; height:var(--fio)}
}

/* ---------- AVATAR ----------------------------------------------------- */
.avatar{
  display:grid; place-items:center; flex:0 0 auto; overflow:hidden;
  background:var(--sup-2); border:var(--borda);
  font:600 var(--t-mini)/1 var(--f-display); letter-spacing:.04em; color:var(--txt-2);
}
.avatar img{width:100%; height:100%; object-fit:cover}
.avatar--p{width:30px; height:30px}
.avatar--g{width:104px; height:104px; font-size:var(--t-h3)}

/* ---------- MENU DE QUEM ENTROU ---------------------------------------- */
/* `<details>` puro. Ele abre no clique, fecha no Escape e é alcançável pelo
   teclado sem uma linha de JavaScript minha. */
.eu{position:relative}
.eu__gatilho{
  display:flex; align-items:center; gap:var(--e2);
  cursor:pointer; list-style:none; padding:4px 6px;
  color:var(--txt-2); font-size:var(--t-mini);
}
.eu__gatilho::-webkit-details-marker{display:none}
.eu__gatilho:hover, .eu[open] .eu__gatilho{color:var(--txt)}
.eu__nome{max-width:22ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.eu__seta{width:12px; height:12px; transition:transform var(--rapido) var(--curva)}
.eu[open] .eu__seta{transform:rotate(180deg)}

.eu__menu{
  position:absolute; right:0; top:calc(100% + 8px); min-width:230px;
  background:var(--sup); border:var(--borda);
  display:grid; padding:var(--e2) 0; z-index:var(--z-modal);
}
.eu__ficha{
  display:grid; gap:2px; margin:0;
  padding:var(--e2) var(--e4) var(--e3);
  border-bottom:var(--borda);
}
.eu__ficha b{font:600 var(--t-corpo)/1.2 var(--f-display); color:var(--txt)}
.eu__ficha span{font-size:var(--t-mini); color:var(--txt-3)}
.eu__estado{color:var(--acento) !important; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em; font-size:var(--t-micro) !important}
.eu__menu a, .eu__menu button{
  display:block; width:100%; text-align:left;
  padding:9px var(--e4); background:none; border:0; cursor:pointer;
  color:var(--txt-2); font:400 var(--t-mini)/1 var(--f-texto); text-decoration:none;
}
.eu__menu a:hover, .eu__menu button:hover,
.eu__menu a:focus-visible, .eu__menu button:focus-visible{
  background:var(--sup-2); color:var(--txt);
}
.eu__menu form{margin:0; border-top:var(--borda); margin-top:var(--e2); padding-top:var(--e2)}

/* ---------- PERFIL ------------------------------------------------------ */
.perfil{padding-bottom:var(--e10)}
.perfil__bloco{padding-block:var(--e6); border-top:var(--borda)}
.perfil__bloco .d4{margin:0 0 var(--e4)}
.perfil__form{max-width:560px}
.perfil__retrato{
  display:flex; gap:var(--e5); align-items:flex-start;
  margin-bottom:var(--e4); flex-wrap:wrap;
}
.perfil__retrato > div{flex:1; min-width:220px}
.perfil__retrato .secao__nota{margin:var(--e2) 0 0}

/* O estado da assinatura em fio, e a cor DIZ o que a frase diz: vermelho
   quando não dá acesso. Sem isso, "ativa" e "ativa mas vencida" sairiam com
   a mesma aparência, e são coisas opostas para quem lê. */
.ficha{border-left:var(--fio) solid var(--linha); padding:var(--e2) 0 var(--e2) var(--e4)}
.ficha--viva{border-left-color:var(--acento)}
.ficha--morta{border-left-color:var(--incisao-funda)}
/* A carência é um terceiro estado e precisa de uma terceira cor: com a do
   ativo ela não pediria ação, com a do encerrado diria que o acesso já caiu,
   e as duas leituras erradas custam a renovação. Osso é o "olhe para isto"
   desta paleta, e é o mesmo fio do convite. */
.ficha--carencia{border-left-color:var(--osso)}
.ficha__titulo{
  margin:0; font:600 var(--t-h4)/1.2 var(--f-display); color:var(--txt);
}
.ficha__frase{margin:var(--e2) 0 0; font-size:var(--t-mini); color:var(--txt-3)}
.perfil__bloco .botao{margin-top:var(--e4); display:inline-block; text-decoration:none}

.pendente{
  border:var(--borda); border-left:var(--fio) solid var(--acento);
  padding:var(--e4); display:grid; gap:var(--e3); max-width:560px;
}
.pendente p{margin:0; font-size:var(--t-mini); color:var(--txt-3)}
.pendente b{color:var(--txt-2)}
.pendente input{
  background:var(--sup-2); border:var(--borda); color:var(--txt);
  padding:8px 10px; font:400 var(--t-corpo)/1 var(--f-texto);
}
.ligacao{
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--txt-3); font-size:var(--t-mini); text-decoration:underline;
  text-underline-offset:3px;
}
.ligacao:hover, .ligacao:focus-visible{color:var(--txt)}
.campo input:disabled, .campo select:disabled{opacity:.55; cursor:not-allowed}

/* ---------- O CONVITE E O MODAL --------------------------------------- */
/* O convite é o oposto visual da oferta: fio em osso e não em vermelho, e a
   palavra "Grátis" antes de qualquer outra. Se ele parecesse com o bloco de
   assinatura, quem chega de um grupo de WhatsApp concluiria que tudo é pago
   e sairia antes de clicar. */
.convite{
  border-left:var(--fio) solid var(--osso);
  padding:var(--e3) 0 var(--e3) var(--e5);
  margin-top:var(--e5); display:grid; gap:var(--e3); justify-items:start;
  max-width:60ch;
}
.convite__selo{
  margin:0; padding:3px 7px; border:1px solid var(--osso);
  font:600 var(--t-micro)/1 var(--f-texto);
  letter-spacing:.16em; text-transform:uppercase; color:var(--txt);
}
.convite__frase{
  margin:0; font:600 var(--t-h4)/1.25 var(--f-display);
  letter-spacing:-.01em; color:var(--txt); text-wrap:balance;
}
.convite__pe{margin:0; font-size:var(--t-mini); line-height:1.55; color:var(--txt-3)}
.convite__pe b{color:var(--txt-2)}
.convite__pe a{color:var(--txt); text-underline-offset:3px}
.convite .botao{margin:0; text-decoration:none}

/* O palco do conteúdo que só pede conta usa véu MAIS LEVE e o glifo do tipo
   no lugar do cadeado. Cadeado lê como "pago" para qualquer pessoa, e aqui
   não é isso que está sendo dito. */
.palco--convite .palco__veu{
  background:linear-gradient(180deg, rgba(14,15,18,.28) 0%, rgba(14,15,18,.5) 100%);
}
.palco--convite .palco__cadeado{border-color:rgba(244,241,236,.5)}
.palco--convite .palco__cadeado svg{width:28px; height:28px}

/* ---------- MODAL ------------------------------------------------------ */
.portal{
  border:var(--borda); background:var(--sup); color:var(--txt);
  padding:0; max-width:min(440px, calc(100vw - 2 * var(--margem)));
  width:100%;
}
.portal::backdrop{background:rgba(6,7,9,.78)}
.portal__caixa{position:relative; padding:var(--e6) var(--e6) var(--e5)}
.portal__fechar{position:absolute; inset:var(--e2) var(--e2) auto auto; margin:0}
.portal__fechar button{
  background:none; border:0; color:var(--txt-3); cursor:pointer;
  font-size:22px; line-height:1; padding:6px 10px;
}
.portal__fechar button:hover, .portal__fechar button:focus-visible{color:var(--txt)}
.portal__lado .d4{margin:var(--e2) 0 var(--e3)}
.portal__nota{margin:0 0 var(--e4); font-size:var(--t-mini); line-height:1.55; color:var(--txt-3)}
.portal__nota b{color:var(--txt-2)}
.portal__nota--miuda{margin:calc(-1 * var(--e2)) 0 var(--e3); font-size:var(--t-micro)}
.portal__pe{margin:var(--e4) 0 0; font-size:var(--t-mini); color:var(--txt-3)}
.portal__pe a{color:var(--txt); text-underline-offset:3px}
.portal .portao{gap:var(--e3)}
.portal .convite__selo{justify-self:start; display:inline-block}
/* Premium usa o fio vermelho; o convite grátis usa osso. */
.convite--premium{border-left-color:var(--acento)}

/* O MODAL DA OFERTA. Ele reusa a caixa do `.portal` inteira, e o que muda é
   só o que precisa mudar: o selo é Premium e não "Grátis", e entra o nome do
   material que a pessoa tocou. Uma caixa própria daria duas caixas para
   manter, e a que ninguém estivesse olhando envelheceria. */
.portal--oferta .botao{margin-top:var(--e2); text-decoration:none; display:inline-block}
.portal--oferta .portal__nota{margin-bottom:var(--e2)}
/* O nome da peça é o único trecho da caixa que muda a cada abertura, então
   ele é o que precisa se destacar do texto fixo em volta. */
.oferta__peca{
  margin:0 0 var(--e3); padding-left:var(--e3);
  border-left:var(--fio) solid var(--acento);
  font:600 var(--t-corpo)/1.35 var(--f-display); color:var(--txt);
  text-wrap:balance;
}
.oferta__peca[hidden]{display:none}
.convite__selo--premium{border-color:var(--acento); color:var(--incisao-suave)}

/* ---------- A LIVE NO CENTRO ------------------------------------------ */
/* O destaque do topo. Fio à esquerda, nunca área preenchida: é a mesma
   regra do `.convite--premium` e do bloco de acrescentar do admin. O
   vermelho aqui é bisturi, e ele só acende quando a live está NO AR.
   Enquanto ela é futura o fio é osso, porque uma tarja vermelha
   permanente no topo de toda visita vira mobília em dois dias. */
.live{
  margin:var(--e5) 0 var(--e6);
  padding:var(--e5) var(--e5) var(--e5) var(--e4);
  border-left:2px solid var(--osso-2);
  background:var(--sup);
}
.live--agora{border-left-color:var(--acento)}
/* COM CAPA A LIVE VIRA DUAS COLUNAS, e sem capa ela continua sendo uma. O
   grid so aparece no modificador, então a semana em que ninguém preparou a
   arte não deixa uma coluna vazia no topo da tela.
   A imagem tem largura de teto e não fração: numa tela larga, metade da
   faixa para a arte empurraria a hora e o botão para fora do olhar, e o que
   faz a pessoa aparecer na sexta é a hora, não a ilustração. */
.live--com-capa{
  display:grid; gap:var(--e5); align-items:center;
  grid-template-columns:minmax(0, 340px) minmax(0, 1fr);
}
.live__capa{display:block; overflow:hidden; background:var(--sup-2)}
.live__capa img{
  display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
}
/* No celular a arte vai para cima e o texto embaixo, que é a ordem do HTML.
   O ponto de corte é o mesmo da barra lateral, para as duas mudanças de
   forma acontecerem juntas em vez de uma no meio da outra. */
@media (max-width:820px){
  .live--com-capa{grid-template-columns:1fr; gap:var(--e4)}
}
.live__rotulo{
  display:flex; align-items:center; gap:var(--e2); margin:0 0 var(--e2);
  font:600 var(--t-rotulo)/1 var(--f-texto);
  letter-spacing:.18em; text-transform:uppercase; color:var(--txt-4);
}
.live--agora .live__rotulo{color:var(--incisao-suave)}
.live__pulso{display:inline-grid; place-items:center; width:14px; height:14px}
.live__pulso svg{width:100%; height:100%}
/* A pulsação é enfeite e some para quem pediu menos movimento. O selo
   continua legível sem ela, porque quem informa é a palavra. */
@media (prefers-reduced-motion:no-preference){
  .live--agora .live__pulso{animation:live-pulso 2s ease-in-out infinite}
}
@keyframes live-pulso{0%,100%{opacity:1}50%{opacity:.35}}
.live h2{margin:0 0 var(--e2); max-width:22ch}
.live h2 a{color:inherit; text-decoration:none}
.live h2 a:hover{color:var(--txt-2)}
.live__quando{
  margin:0; font-family:var(--f-editorial); font-size:var(--t-corpo);
  color:var(--txt-2);
}
.live__resumo{margin:var(--e3) 0 0; max-width:60ch; color:var(--txt-3); font-size:var(--t-mini)}
.live__fila{margin:var(--e3) 0 0; font-size:var(--t-micro); letter-spacing:.1em;
  text-transform:uppercase; color:var(--txt-4)}
.live__acao{margin-top:var(--e4); display:flex; flex-direction:column;
  align-items:flex-start; gap:var(--e2)}
.live__acao .botao{margin-top:0; text-decoration:none}
.live__pe{margin:0; font-size:var(--t-mini); color:var(--txt-3); max-width:56ch}
.live__pe a{color:var(--txt); text-underline-offset:3px}
.live__minha{margin:0; font-size:var(--t-mini); color:var(--txt-3); max-width:60ch}
.live__minha b{display:block; color:var(--txt-2); margin-bottom:var(--e1)}
.live__minha span{font-family:var(--f-editorial); color:var(--txt-2)}

.etiqueta--vivo{color:var(--incisao-suave); border:1px solid var(--incisao)}
.capa__quando{
  margin:var(--e3) 0 0; font-family:var(--f-editorial);
  font-size:var(--t-corpo); color:var(--txt-2);
}

/* A SALA QUE AINDA NÃO ABRIU. Mesmo enquadramento do player e do palco
   travado, porque a página tem que ter a mesma forma antes e depois: o que
   muda é o conteúdo, não o esqueleto. A frase fica SOBRE o véu, e é ela
   que separa este estado de "o vídeo não carregou". */
.palco--marcado .palco__frase{
  position:absolute; margin:0; padding:0 var(--e5); max-width:34ch;
  text-align:center; color:var(--osso); font-size:var(--t-mini); line-height:1.6;
}

/* ---------- FILA DE PERGUNTAS, no admin ------------------------------- */
.fila{list-style:none; margin:0; padding:0; display:grid; gap:var(--e3)}
.fila__item{
  padding:var(--e4); background:var(--sup); border-left:2px solid var(--acento);
}
/* Respondida sai do caminho sem sumir: fio apagado e texto recuado. Some
   de vez seria pior, porque o Marcelo perde a conta do que já cobriu. */
.fila__item--feita{border-left-color:var(--linha); opacity:.55}
.fila__texto{margin:0 0 var(--e2); font-family:var(--f-editorial);
  font-size:var(--t-corpo); color:var(--txt); max-width:70ch}
.fila__quem{margin:0 0 var(--e3); font-size:var(--t-micro); color:var(--txt-3)}
.fila__item form{margin:0}
.fila__item button{
  padding:6px 10px; background:none; color:var(--txt-3);
  border:1px solid var(--linha); font:600 var(--t-micro)/1 var(--f-texto);
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
}
.fila__item button:hover{color:var(--txt); border-color:var(--txt-3)}
/* A linha escolhida, com o fio na primeira celula. Fundo sozinho nao
   apareceu na conferencia de tela: a tabela ja tem contraste proprio. */
.admin__aqui td{background:var(--sup)}
.admin__aqui td:first-child{box-shadow:inset 2px 0 0 var(--acento)}
.admin__falta{color:var(--incisao-suave)}

/* Avatar e nome na mesma linha, no topo da ficha de um inscrito. Ele PRECISA
   de um contêiner próprio: `.avatar` é `display:grid`, então posto direto
   dentro do `<h2>` ele vira bloco e joga o nome para a linha de baixo. Isso
   não levanta erro nenhum e não aparece em teste de HTML, só na tela. */
.admin__quem{display:flex; gap:var(--e3); align-items:center; margin:var(--e8) 0 var(--e4)}
.admin__quem h2{margin:0}
.admin__novo .admin__quem{margin-top:0}

/* ---------- O LEITOR ---------------------------------------------------- */
/* A página do PDF na tela. O palco é estreito de propósito: página de A4
   esticada até 1200px vira uma parede de texto que ninguém lê no celular
   nem no desktop. 820px é a largura de uma folha confortável. */
.leitor{padding-bottom:var(--e9)}
.leitor__palco{max-width:820px; margin:0 auto; display:grid; gap:var(--e4)}

/* A moldura nasce com a PROPORÇÃO da página antes de a página ser
   desenhada. Sem isso a barra de rolagem cresce a cada canvas que aparece e
   o conteúdo pula embaixo do dedo, que no celular é a diferença entre ler e
   desistir. */
.leitor__pagina{
  width:100%; background:var(--sup-2); border:var(--borda);
  display:grid; place-items:center;
  color:var(--txt-3); font-size:var(--t-mini);
}
.leitor__pagina canvas{width:100%; height:auto; display:block}
.leitor__pagina--falhou{padding:var(--e5); text-align:center}

.leitor__barra{
  max-width:820px; margin:0 auto var(--e4);
  display:flex; flex-wrap:wrap; gap:var(--e4);
  align-items:center; justify-content:space-between;
  padding-bottom:var(--e3); border-bottom:var(--borda);
}
.leitor__contador{
  font:500 var(--t-rotulo)/1 var(--f-texto);
  letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3);
}
.leitor__aviso{
  max-width:820px; margin:0 auto var(--e4);
  font-size:var(--t-mini); color:var(--txt-3);
}
.leitor__aviso--erro{color:var(--incisao-suave)}

/* Ler e baixar lado a lado, e o baixar em fio mais discreto: os dois são
   caminhos legítimos, e o primário é ler. */
.acoes{display:flex; flex-wrap:wrap; gap:var(--e3); align-items:center}
.atalho--discreto{opacity:.72}
.atalho--discreto:hover{opacity:1}

/* ---------- PRIVACIDADE ------------------------------------------------ */
/* O aviso no registro é fio à esquerda e não caixa: ele informa, não alerta.
   Caixa vermelha ali faria criar conta parecer perigoso, que é o oposto do
   que o texto diz. */
.privacidade__aviso{
  margin-top:var(--e3); padding-left:var(--e3);
  border-left:1px solid var(--linha); font-size:var(--t-micro); line-height:1.6;
}
.privacidade__aviso b{color:var(--txt-2)}
.privacidade__aviso a{color:var(--txt); text-underline-offset:3px}
.privacidade__lista{
  margin:0; padding-left:1.1em; display:grid; gap:var(--e2);
  font-size:var(--t-mini); line-height:1.6; color:var(--txt-3); max-width:66ch;
}
.privacidade__lista b{color:var(--txt-2)}