/* Plataforma de cursos, com cara de streaming: a sala escura e a tela acesa.
   O fundo é um cinza quase preto, neutro, para a foto de cada curso ser a cor da página.
   O amarelo é só o que leva a assistir (o botão de tocar, o progresso, o "Grátis"); o resto é branco e cinza.
   Uma letra só, a Nunito: títulos pesados e apertados, texto normal. A letra à mão fica só no certificado.
   Separação por tom, sem fios: fundo, painéis um tom acima e campos um tom abaixo. */
@import url("/fontes/fonts.css");

:root {
  --fundo: #0e0e10;
  --fundo-2: #1a1a1d;
  --fundo-3: #232327;
  --fundo-4: #2e2e33;
  --fundo-5: #3a3a40;
  --escuro: #08080a;
  --sombra: #000000;
  --texto: #f4f4f5;
  --texto-2: #dcdce0;
  --suave: #b4b4bb;
  --apagado: #7c7c85;
  --ambar: #ffcc33;
  --ambar-claro: #ffd760;
  /* a letra sobre o amarelo e sobre o branco */
  --sobre-claro: #111113;
  --ok: #78e2a6;
  --erro: #ff8a8a;
  --branco: #ffffff;
  --vidro: color-mix(in srgb, var(--branco) 14%, transparent);
  --vidro-2: color-mix(in srgb, var(--branco) 22%, transparent);
  --linha: color-mix(in srgb, var(--texto) 8%, transparent);
  --linha-forte: color-mix(in srgb, var(--texto) 20%, transparent);
  /* o certificado: papel claro, tinta escura e a moldura dourada */
  --papel: #fdfcf8;
  --papel-borda: #d8c7a3;
  --marca-escura: #1f1f24;
  --ouro: #d9b64a;
  --moldura: #c9a86a;
  --tinta: #1d1d21;
  --tinta-suave: #5f5f68;
  --palco: #fbf6ec;
  --ui: "Nunito", "Segoe UI", system-ui, sans-serif;
  --mao: "Caveat", "Segoe Print", cursive;
  --mola: cubic-bezier(.23, 1, .32, 1);
  --margem: clamp(20px, 4vw, 56px);
  --largura: 1440px;
  --topo: 72px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topo) + 12px); }
html, body { overflow-x: clip; }
[hidden] { display: none !important; }
body {
  margin: 0; font: 400 16px/1.55 var(--ui); color: var(--texto); background: var(--fundo);
  -webkit-font-smoothing: antialiased; min-height: 100dvh; display: flex; flex-direction: column;
}
::selection { background: var(--ambar); color: var(--sobre-claro); }
main { flex: 1; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 800; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: clamp(40px, 5vw, 64px); line-height: .95; font-weight: 900; letter-spacing: -.045em; min-width: 0; overflow-wrap: anywhere; }
h2 { font-size: clamp(21px, 2vw, 25px); }
h3 { font-size: 18px; }
p { text-wrap: pretty; margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; border-radius: 4px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.conteiner { width: 100%; max-width: var(--largura); margin: 0 auto; padding-inline: var(--margem); }
.estreito { max-width: 820px; }
.suave { color: var(--suave); }
.pequeno { font-size: 14px; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ambar); color: var(--sobre-claro); padding: 10px 18px; border-radius: 6px; font-weight: 800; }
.pular:focus { top: 12px; }

/* ---------------------------------------------------------------- botões */
/* branco por padrão; amarelo só no que leva a assistir (.tocar); os de apoio são de vidro sobre o escuro */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; min-height: 46px;
  border: 0; border-radius: 6px; background: var(--texto); color: var(--sobre-claro);
  font-weight: 800; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, color .2s, transform .14s var(--mola);
}
.botao:hover { background: var(--branco); }
.botao:active:not(:disabled) { transform: scale(.97); }
.botao svg { width: 18px; height: 18px; flex: none; }
.botao:disabled, .botao[aria-disabled="true"] { opacity: .5; cursor: default; }
.botao.tocar { background: var(--ambar); }
.botao.tocar:hover { background: var(--ambar-claro); }
.botao.vidro, .botao.contorno { background: var(--vidro); color: var(--texto); }
.botao.vidro:hover, .botao.contorno:hover { background: var(--vidro-2); }
.botao.leve { background: transparent; color: var(--suave); padding-inline: 12px; }
.botao.leve:hover { color: var(--texto); background: var(--fundo-3); }
.botao.perigo { background: color-mix(in srgb, var(--erro) 14%, transparent); color: var(--erro); }
.botao.perigo:hover { background: color-mix(in srgb, var(--erro) 24%, transparent); }
.botao.grande { padding: 0 26px; font-size: 16px; min-height: 52px; }
.botao.cheio { width: 100%; }
.botao.redondo { width: 44px; padding: 0; }

/* ---------------------------------------------------------------- formulários: campos são poços escuros no painel */
.campo { display: grid; gap: 6px; margin-bottom: 16px; }
.campo label { font-weight: 800; font-size: 14px; }
.campo .dica { font-size: 13px; color: var(--suave); }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], select, textarea {
  width: 100%; padding: 12px 16px; border-radius: 6px; border: 0; background: var(--escuro); color: var(--texto); min-height: 48px;
}
input::placeholder, textarea::placeholder { color: var(--apagado); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ambar); outline-offset: 0; }
textarea { resize: vertical; min-height: 120px; }
.mensagem { min-height: 1.4em; margin: 10px 0 0; font-weight: 700; font-size: 14px; color: var(--erro); }
.mensagem.ok { color: var(--ok); }

/* ---------------------------------------------------------------- topo */
.topo { position: sticky; top: 0; z-index: 40; height: var(--topo); background: var(--fundo); }
.topo .conteiner { height: 100%; display: flex; align-items: center; gap: 36px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; font-size: 20px; font-weight: 800; line-height: 1; letter-spacing: -.015em; }
.marca span { white-space: nowrap; }
.marca svg { width: 28px; height: 28px; flex: none; color: var(--ambar); }
.topo-nav { display: flex; gap: 26px; }
.topo-nav a, .topo-conta > a.ligacao { text-decoration: none; color: var(--suave); font-weight: 700; font-size: 15px; padding: 6px 0; white-space: nowrap; transition: color .2s; }
.topo-nav a:hover, .topo-conta > a.ligacao:hover { color: var(--texto); }
.topo-nav a[aria-current="page"], .topo-conta > a.ligacao[aria-current="page"] { color: var(--texto); }
.topo-conta { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.topo-conta .botao { padding: 0 16px; min-height: 38px; font-size: 14px; }
.busca { position: relative; display: flex; align-items: center; }
.busca svg { position: absolute; left: 12px; width: 17px; height: 17px; color: var(--apagado); pointer-events: none; }
.topo .busca input { width: 210px; min-height: 38px; padding: 0 14px 0 38px; border-radius: 999px; background: var(--fundo-2); font-size: 14px; transition: width .3s var(--mola), background-color .2s; }
.topo .busca input:focus { width: 260px; background: var(--fundo-3); }
.busca-lupa { display: none; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--suave); }
.busca-lupa svg { width: 20px; height: 20px; }
.busca-lupa:hover { color: var(--texto); }
/* sobre a foto (início e página do curso): a barra fica em cima da foto, só com um véu; ao rolar, ganha o fundo (app.js) */
.sobre-foto .topo {
  position: fixed; inset: 0 0 auto;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fundo) 88%, transparent), transparent); /* taste-skill-ignore: véu para ler o menu sobre a foto */
  transition: background-color .3s;
}
.sobre-foto.rolou .topo { background-color: var(--fundo); }
.sobre-foto:not(.rolou) .topo-nav a, .sobre-foto:not(.rolou) .topo-conta > a.ligacao { color: var(--texto-2); }
.sobre-foto:not(.rolou) .topo-nav a[aria-current="page"] { color: var(--texto); }
.sobre-foto:not(.rolou) .topo .busca input { background: var(--vidro); }
.sobre-foto:not(.rolou) .busca-lupa { color: var(--texto-2); }
.conta { position: relative; }
.conta summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; border-radius: 999px; }
.conta summary::-webkit-details-marker { display: none; }
.conta summary::after { content: ""; width: 0; height: 0; border: 5px solid transparent; border-top-color: var(--suave); margin-top: 5px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; flex: none; background: var(--fundo-5); color: var(--texto); font-weight: 900; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.conta .menu {
  position: absolute; right: 0; top: calc(100% + 14px); width: 250px; padding: 8px; z-index: 50;
  background: var(--fundo-3); border-radius: 8px; box-shadow: 0 18px 40px color-mix(in srgb, var(--sombra) 55%, transparent); /* taste-skill-ignore: menu da conta é sobreposto */
}
.conta .menu .quem { padding: 8px 10px 12px; margin-bottom: 6px; display: grid; }
.conta .menu .quem b { font-weight: 800; }
.conta .menu .quem span { font-size: 13px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; }
.conta .menu a, .conta .menu button {
  display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: 6px; border: 0; background: none;
  text-decoration: none; font-weight: 700; font-size: 15px; cursor: pointer; color: var(--texto);
}
.conta .menu a:hover, .conta .menu button:hover { background: var(--fundo-4); }
.conta .menu form { margin: 6px 0 0; padding-top: 6px; }

/* ---------------------------------------------------------------- rodapé: uma linha só, quieta */
.rodape { margin-top: 110px; box-shadow: 0 -1px 0 var(--linha); font-size: 14px; color: var(--apagado); } /* taste-skill-ignore: o fio que fecha a página, escolhido pelo usuário no rodapé de uma linha */
.rodape .conteiner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; padding-block: 28px 36px; }
.rodape .marca { font-size: 16px; color: var(--suave); }
.rodape .marca svg { width: 22px; height: 22px; color: var(--suave); }
.rodape nav { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 15px; font-weight: 600; color: var(--suave); }
.rodape nav a { text-decoration: none; white-space: nowrap; transition: color .2s; }
.rodape nav a:hover { color: var(--texto); }
.rodape small { margin-left: auto; font-size: 13px; }

/* ---------------------------------------------------------------- pedaços comuns */
.pagina-titulo { padding-block: 56px 8px; }
.pagina-titulo p { color: var(--suave); margin-top: 14px; max-width: 64ch; }
.secao { padding-top: 56px; }
.secao-cabeca { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.secao-cabeca h2 { font-size: 28px; font-weight: 900; letter-spacing: -.03em; }
.secao-cabeca p { color: var(--suave); margin: 6px 0 0; max-width: 64ch; }
.painel { background: var(--fundo-2); border-radius: 8px; padding: 24px; }
.painel + .painel { margin-top: 14px; }
.painel h2 { font-size: 20px; margin-bottom: 14px; }
.selo {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 4px; font-size: 12px; font-weight: 800;
  background: var(--vidro); color: var(--texto); white-space: nowrap;
}
.selo.ambar { background: var(--ambar); color: var(--sobre-claro); }
.selo.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.tag-nivel {
  display: inline-grid; place-items: center; min-width: 38px; height: 26px; padding: 0 8px; border-radius: 4px;
  background: var(--cor, var(--fundo-4)); color: var(--sobre-claro); font-weight: 900; font-size: 14px;
}
.barra { height: 4px; border-radius: 999px; background: var(--vidro); overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--ambar); border-radius: inherit; }
.vazio { padding: 40px; text-align: center; color: var(--suave); background: var(--fundo-2); border-radius: 8px; }
.aviso { padding: 12px 16px; border-radius: 6px; background: var(--fundo-3); font-size: 15px; }
.aviso a, .ligacao-forte { color: var(--texto); font-weight: 800; text-underline-offset: 3px; }
.lista-ok { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lista-ok li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.lista-ok svg { width: 20px; height: 20px; color: var(--suave); margin-top: 2px; }

/* ---------------------------------------------------------------- capa: a foto do curso */
/* Feita em capa() (lib/paginas/layout.js): a foto em publico/capas (feita no Antigravity), o mosaico de quatro fotos
   ou, enquanto o curso não tem foto, o nome dele em cinza. Medidas em cqi (porcentagem da largura da capa). */
.capa { container-type: inline-size; position: relative; isolation: isolate; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--fundo-2); }
.capa > img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--mola); }
.capa-nome {
  position: absolute; inset: 0; display: grid; place-items: end start; padding: 6cqi 7cqi; border-radius: inherit;
  outline: 1px solid var(--linha); outline-offset: -1px; color: var(--apagado);
  font-size: 11cqi; font-weight: 900; line-height: .95; letter-spacing: -.04em; text-wrap: balance;
}
.capa-mosaico { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.capa-mosaico img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.capa-fatias, .heroi-fatias { display: flex; gap: 2px; }
.capa-fatias { position: absolute; inset: 0; }
.fatia { flex: 1; min-width: 0; overflow: hidden; }
.fatia img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--mola); }
.capa-selo {
  position: absolute; z-index: 2; left: 4cqi; top: 4cqi; padding: 3px 9px; border-radius: 4px;
  background: color-mix(in srgb, var(--sombra) 62%, transparent); color: var(--texto); font: 800 12px/1.3 var(--ui);
}

/* ---------------------------------------------------------------- fileiras: rolam de lado, como no streaming */
/* Arrasta com o mouse ou desliza com o dedo; em cada lateral, uma seta grande da altura da capa passa uma tela (app.js). */
.fileira { position: relative; padding-top: 44px; }
.fileira-cabeca { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.fileira-cabeca h2 { font-size: 21px; font-weight: 800; letter-spacing: -.015em; }
.fileira-cabeca .ver { margin-left: 4px; font-size: 14px; font-weight: 800; color: var(--suave); text-decoration: none; }
.fileira-cabeca .ver:hover { color: var(--texto); }
.fileira-corpo { --cartao: clamp(240px, 22vw, 320px); position: relative; }
.fileira-lado {
  position: absolute; z-index: 5; top: 4px; height: calc(var(--cartao) * 9 / 16); width: clamp(48px, 4.4vw, 72px);
  display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; color: var(--texto);
  background: color-mix(in srgb, var(--fundo) 62%, transparent); transition: background-color .2s, opacity .2s;
}
.fileira-lado.voltar { left: 0; border-radius: 0 6px 6px 0; }
.fileira-lado.mais { right: 0; border-radius: 6px 0 0 6px; }
.fileira-lado svg { width: 30px; height: 30px; transition: scale .2s var(--mola); }
.fileira-lado.voltar svg { transform: scaleX(-1); }
.fileira-lado:hover, .fileira-lado:focus-visible { background: color-mix(in srgb, var(--fundo) 85%, transparent); }
.fileira-lado:hover svg, .fileira-lado:focus-visible svg { scale: 1.3; }
.fileira-lado:focus-visible { outline-offset: -3px; }
.trilho {
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--cartao); gap: 12px; list-style: none; margin: 0; position: relative;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 4px max(var(--margem), calc((100% - var(--largura)) / 2 + var(--margem))) 18px;
  scroll-padding-inline: max(var(--margem), calc((100% - var(--largura)) / 2 + var(--margem)));
}
.trilho::-webkit-scrollbar { display: none; }
.trilho > * { scroll-snap-align: start; }
.trilho > li { display: flex; }
.trilho.arrastando { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.trilho.arrastando a { cursor: grabbing; }
@media (hover: none) { .fileira-lado { display: none; } }
.trilho > li > * { flex: 1; min-width: 0; }

/* um episódio (aula) */
.episodio { display: block; text-decoration: none; min-width: 0; border-radius: 4px; }
.ep-imagem { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--fundo-2); }
.ep-imagem img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--mola), filter .35s; }
.episodio:hover .ep-imagem img, .episodio:focus-visible .ep-imagem img { transform: scale(1.04); }
.episodio.travada .ep-imagem img { filter: brightness(.72) saturate(.8); } /* a capa diz do que é a aula: escurece pouco, para continuar legível */
.ep-sem-video {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 4px; padding: 12px;
  background: var(--fundo-2); color: var(--apagado); font-weight: 700; font-size: 13px;
}
.ep-sem-video b { font-size: 40px; font-weight: 900; line-height: 1; letter-spacing: -.04em; color: var(--suave); }
.ep-selo { position: absolute; top: 8px; left: 8px; }
.ep-selo.selo:not(.ambar) { background: color-mix(in srgb, var(--sombra) 72%, transparent); }
.ep-estado { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--sombra) 70%, transparent); color: var(--texto); }
.ep-estado svg { width: 16px; height: 16px; }
.ep-estado.feita { background: var(--ok); color: var(--sobre-claro); }
.ep-tocar {
  position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ambar); color: var(--sobre-claro); opacity: 0; transform: scale(.85); transition: opacity .2s, transform .2s var(--mola);
}
.ep-tocar svg { width: 22px; height: 22px; margin-left: 3px; }
.episodio:hover .ep-tocar, .episodio:focus-visible .ep-tocar { opacity: 1; transform: none; }
.ep-texto { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; padding: 10px 2px 0; }
.ep-num { grid-row: span 2; font-size: 30px; font-weight: 900; line-height: .95; letter-spacing: -.05em; color: var(--apagado); min-width: 1.1em; }
.ep-titulo { font-weight: 800; font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ep-info { font-size: 13px; color: var(--apagado); font-weight: 600; margin-top: 2px; }

/* ---------------------------------------------------------------- início: o curso em destaque e as fileiras */
/* o curso em destaque ocupa a tela com a foto dele, como a abertura de uma série; as fileiras sobem por cima do pé da foto */
.destaque, .curso-heroi { position: relative; isolation: isolate; display: flex; align-items: flex-end; }
.destaque > img, .curso-heroi > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.destaque::after, .curso-heroi::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* o véu sobre a foto, para o texto ler bem: escuro à esquerda (onde fica o texto), embaixo (onde sobem as fileiras) e em cima (o menu) */
  background: linear-gradient(90deg, color-mix(in srgb, var(--fundo) 94%, transparent), color-mix(in srgb, var(--fundo) 60%, transparent) 38%, transparent 68%), linear-gradient(0deg, var(--fundo), transparent 32%), linear-gradient(180deg, color-mix(in srgb, var(--fundo) 70%, transparent), transparent 22%); /* taste-skill-ignore: véu neutro sobre a foto */
}
.destaque { min-height: min(88vh, 780px); padding: calc(var(--topo) + 40px) 0 170px; }
.destaque .conteiner > div { max-width: 560px; }
.antes { margin: 0; font-size: 15px; font-weight: 700; color: var(--suave); }
.destaque h1 { margin: 4px 0 14px; font-size: clamp(64px, 9vw, 116px); line-height: .9; letter-spacing: -.05em; }
.destaque .sub { margin: 0 0 28px; font-size: 19px; line-height: 1.45; color: var(--texto-2); }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.fatos { margin: 22px 0 0; font-size: 14px; color: var(--suave); }
.fatos b { color: var(--texto); }
.destaque + .fileira { margin-top: -120px; padding-top: 0; }
.catalogo-cabeca { padding-top: 56px; }
.catalogo-cabeca p { color: var(--suave); margin: 16px 0 0; max-width: 70ch; text-wrap: balance; }
.catalogo-cabeca + .fileira { padding-top: 32px; }
/* um curso: ao apontar, a foto chega um pouco mais perto */
.curso-cartao { display: flex; flex-direction: column; gap: 10px; text-decoration: none; border-radius: 6px; outline-offset: 4px; }
.curso-cartao:hover .capa > img, .curso-cartao:focus-visible .capa > img,
.curso-cartao:hover .fatia img, .curso-cartao:focus-visible .fatia img { transform: scale(1.04); }
.curso-cartao:active .capa { transform: scale(.985); }
.cartao-texto { display: grid; gap: 1px; padding-inline: 2px; font-size: 14px; line-height: 1.45; }
.cartao-texto h3 { font-size: 16px; line-height: 1.3; }
.cartao-dados { color: var(--apagado); }
.cartao-preco { font-weight: 700; color: var(--suave); font-variant-numeric: tabular-nums; }
.cartao-texto .barra { margin-top: 6px; }
.cartao-cursos { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* ---------------------------------------------------------------- trilhas */
/* a página de trilhas e os resultados da busca: os cartões em grade, na mesma medida das fileiras */
.grade-cartoes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 30px 14px; }
.trilhas-busca { margin-top: 48px; color: var(--suave); }
.trilhas-busca a { color: var(--texto); font-weight: 800; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- planos */
/* uma tabela de preços por produto; "todos os cursos" fica um tom acima */
.planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; max-width: 1240px; }
/* com um plano só (um curso à venda), o cartão não estica pela página toda */
.planos:has(> .plano:only-child) { max-width: 520px; }
.plano { padding: 28px; border-radius: 8px; background: var(--fundo-2); display: flex; flex-direction: column; gap: 18px; }
.plano h2, .plano h3 { font-size: 28px; font-weight: 900; letter-spacing: -.03em; }
.plano > p { color: var(--suave); margin: -8px 0 0; }
.plano .botao { margin-top: auto; }
.plano.tudo { background: var(--fundo-3); }
.precos { list-style: none; margin: 0 -12px; padding: 0; }
.precos li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; align-items: center; padding: 12px; border-radius: 4px; }
.precos li:nth-child(odd) { background: color-mix(in srgb, var(--texto) 4%, transparent); }
.precos .nome { font-weight: 800; display: flex; align-items: center; gap: 8px; }
.precos .cobranca { grid-row: 2; font-size: 13px; color: var(--suave); }
.precos .mes { grid-row: 1 / 3; grid-column: 2; font-size: 23px; font-weight: 900; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.precos .mes small { font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--suave); }
@media (max-width: 520px) {
  .precos .nome { flex-wrap: wrap; row-gap: 4px; }
  .precos .mes { grid-row: 1; font-size: 19px; }
  .precos .cobranca { grid-column: 1 / 3; margin-top: 2px; }
}

/* a escolha do plano no pagamento */
.escolha-plano { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.escolha-plano legend { padding: 0; margin-bottom: 12px; font-weight: 800; font-size: 17px; }
.opcao-plano { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 0 12px; align-items: center; padding: 13px 16px; border-radius: 6px; background: var(--fundo-3); cursor: pointer; }
.opcao-plano:hover { background: var(--fundo-4); }
.opcao-plano:has(input:checked) { background: var(--fundo-4); box-shadow: inset 0 0 0 2px var(--texto); } /* taste-skill-ignore: anel do plano escolhido, não é sombra */
.opcao-plano:has(input:focus-visible) { outline: 2px solid var(--ambar); outline-offset: 2px; }
.opcao-plano input { grid-row: 1 / 3; width: 18px; height: 18px; margin: 0; accent-color: var(--texto); }
.opcao-plano input:focus { outline: none; }
.opcao-plano .nome { font-weight: 800; display: flex; align-items: center; gap: 8px; }
.opcao-plano .cobranca { grid-column: 2; font-size: 13px; color: var(--suave); }
.opcao-plano .mes { grid-row: 1 / 3; grid-column: 3; font-weight: 900; font-size: 19px; white-space: nowrap; }
.opcao-plano .mes small { font-size: 12px; font-weight: 700; color: var(--suave); }
@media (max-width: 520px) {
  .opcao-plano .nome { flex-wrap: wrap; row-gap: 4px; }
  .opcao-plano .mes { grid-row: 1; font-size: 17px; }
  .opcao-plano .cobranca { grid-column: 2 / 4; margin-top: 2px; }
}

/* perguntas (sanfona): faixas que alternam o tom */
.perguntas { display: grid; max-width: 860px; }
/* nos planos: o título de um lado, as perguntas do outro, na largura dos planos */
.duvidas { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px 40px; max-width: 1040px; align-items: start; }
.duvidas h2 { font-size: 28px; font-weight: 900; letter-spacing: -.03em; padding-top: 14px; }
.pergunta { border-radius: 4px; }
.pergunta:nth-child(odd) { background: var(--fundo-2); }
.pergunta summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-weight: 800; font-size: 17px; }
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after { content: "+"; font-size: 28px; font-weight: 400; line-height: 1; color: var(--suave); transition: transform .2s var(--mola); }
.pergunta[open] summary::after { transform: rotate(45deg); }
.pergunta p { padding: 0 22px 20px; margin: 0; color: var(--suave); max-width: 70ch; }

/* ---------------------------------------------------------------- página do curso */
/* O topo é a foto do curso na tela inteira, como a página de uma série, com o nome grande embaixo à esquerda.
   Curso sem foto e sem aula gravada: só o nome, no fundo da página. */
.curso-heroi { min-height: min(80vh, 720px); padding: 48px 0 56px; }
.sobre-foto .curso-heroi { padding-top: calc(var(--topo) + 48px); }
.curso-heroi.sem-foto { min-height: 0; }
.curso-heroi.sem-foto::after { content: none; }
.curso-heroi .conteiner > div { max-width: 720px; }
.migalhas { display: flex; gap: 8px; font-size: 14px; font-weight: 700; color: var(--suave); margin-bottom: 18px; }
.migalhas a { text-decoration: none; }
.migalhas a:hover { color: var(--texto); }
.curso-heroi h1 { margin: 4px 0 16px -.02em; font-size: clamp(60px, 9vw, 120px); line-height: .9; letter-spacing: -.05em; }
.curso-heroi .sub { font-size: clamp(17px, 1.4vw, 19px); max-width: 54ch; margin: 0; color: var(--texto-2); }
.dados { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; padding: 0; margin: 16px 0 0; font-size: 15px; font-weight: 700; color: var(--suave); }
.dados li { display: inline-flex; align-items: center; gap: 8px; }
.dados svg { width: 18px; height: 18px; color: var(--apagado); }
.curso-heroi .acoes { margin-top: 26px; }
.curso-heroi > .heroi-fatias { position: absolute; inset: 0; z-index: -2; }
.trilha-heroi h1 { font-size: clamp(52px, 7vw, 100px); }
.anuncio-trilhas { margin: 12px 0 0; max-width: 52ch; color: var(--suave); }
.anuncio-trilhas a { color: var(--texto); font-weight: 800; text-underline-offset: 3px; }

/* os cursos da trilha, nesta ordem: o número é a ordem de verdade */
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.passo { display: grid; grid-template-columns: 44px 220px minmax(0, 1fr); gap: 22px; align-items: center; padding: 12px 18px 12px 12px; border-radius: 8px; background: var(--fundo-2); }
.passo-n { font-size: 34px; font-weight: 900; letter-spacing: -.04em; text-align: center; color: var(--apagado); font-variant-numeric: tabular-nums; }
.passo-capa { display: block; border-radius: 6px; }
.passo-capa .capa > img { transition: transform .45s var(--mola); }
.passo-capa:hover .capa > img { transform: scale(1.04); }
.passo-texto { display: grid; gap: 4px; }
.passo-texto h3 { font-size: 19px; }
.passo-texto h3 a { text-decoration: none; }
.passo-texto h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.passo-texto p { margin: 0; color: var(--suave); font-size: 15px; max-width: 60ch; }
.passo-estado { margin-top: 4px; font-size: 13px; font-weight: 800; color: var(--suave); }
.passo.em-breve .capa { opacity: .55; }
.passo.em-breve .passo-estado { color: var(--apagado); }

/* ---------------------------------------------------------------- busca */
.busca-pagina { padding-block: 56px 0; }
.busca-grande { max-width: 760px; }
.busca-grande h1 { margin-bottom: 22px; }
.busca-campo { position: relative; display: flex; gap: 10px; }
.busca-campo > svg { position: absolute; left: 18px; top: 50%; translate: 0 -50%; width: 22px; height: 22px; color: var(--apagado); pointer-events: none; }
.busca-campo input[type="search"] { flex: 1; min-width: 0; min-height: 58px; padding-left: 52px; font-size: 18px; border-radius: 8px; }
.busca-campo .botao { min-height: 58px; }
.busca-exemplos { margin: 16px 0 0; color: var(--suave); font-size: 15px; }
.busca-exemplos a { color: var(--texto-2); font-weight: 700; text-underline-offset: 3px; }
.busca-exemplos a:hover { color: var(--texto); }
.busca-total { margin: 40px 0 0; font-weight: 800; color: var(--suave); }
.busca-total[hidden] { display: none; }
.busca-nada { color: var(--texto); font-size: 19px; }
.busca-bloco { margin-top: 36px; }
.busca-bloco h2 { margin-bottom: 16px; font-size: 21px; }
.anuncio-nota { margin: 16px 0 0; max-width: 52ch; color: var(--suave); }
.curso-corpo.anuncio-corpo { grid-template-columns: minmax(0, 1fr); }
.anuncio-corpo > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 72px; }
.curso-corpo.anuncio-corpo > div > section + section { margin-top: 0; }

.curso-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; align-items: start; padding-top: 40px; }
.curso-corpo > div > section + section { margin-top: 64px; }
.curso-corpo h2 { margin-bottom: 20px; font-size: clamp(26px, 2.4vw, 30px); font-weight: 900; letter-spacing: -.03em; }

/* abas dos níveis (como as temporadas de uma série): o escolhido acende, com um traço na cor do nível */
.abas-nivel { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 26px; padding: 2px 2px 6px; }
.abas-nivel::-webkit-scrollbar { display: none; }
.abas-nivel a { position: relative; flex: none; display: grid; justify-items: start; padding: 10px 18px 14px; border-radius: 6px; text-decoration: none; color: var(--apagado); }
.abas-nivel a b { font-size: 30px; font-weight: 900; line-height: 1; letter-spacing: -.03em; }
.abas-nivel a span { font-size: 13px; font-weight: 700; }
.abas-nivel a:hover { color: var(--suave); background: var(--fundo-2); }
.abas-nivel a[aria-selected="true"] { color: var(--texto); background: var(--fundo-2); }
.abas-nivel a[aria-selected="true"]::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 6px; height: 3px; border-radius: 2px; background: var(--cor, var(--texto)); }
.nivel-cabeca { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px 28px; align-items: start; margin-bottom: 22px; }
.nivel-cabeca h3 { margin: 0; font-size: clamp(26px, 2.4vw, 32px); font-weight: 900; letter-spacing: -.03em; }
.nivel-cabeca h3 small { display: block; font-size: 15px; color: var(--suave); margin-top: 4px; font-weight: 700; letter-spacing: 0; }
.nivel-cabeca p { color: var(--suave); margin: 10px 0 0; max-width: 62ch; }
.nivel-cabeca .dados { margin-top: 12px; font-size: 14px; }
.nivel-estado { padding: 16px 18px; border-radius: 8px; background: var(--fundo-2); display: grid; gap: 8px; font-size: 14px; font-weight: 700; }
.nivel-estado b { font-weight: 900; font-size: 16px; }
.nivel-estado .botao { min-height: 38px; padding: 0 16px; font-size: 14px; }
.aprende-nivel { background: var(--fundo-2); border-radius: 8px; padding: 22px 24px; margin-bottom: 26px; }
.aprende-nivel h4 { margin-bottom: 14px; font-size: 17px; }
.aprende-nivel .lista-ok { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; font-size: 15px; }

/* unidades: faixas; a aberta sobe um tom */
.unidades-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--suave); }
.unidades-topo button { background: none; border: 0; color: var(--texto); font-weight: 800; cursor: pointer; padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; }
.unidades { display: grid; gap: 4px; }
.unidade { background: var(--fundo-2); border-radius: 6px; overflow: hidden; }
.unidade[open] { background: var(--fundo-3); }
.unidade summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 18px; gap: 4px 16px; align-items: center; padding: 12px 20px 12px 10px; }
.unidade summary::-webkit-details-marker { display: none; }
.unidade summary:hover { background: color-mix(in srgb, var(--texto) 4%, transparent); }
.unidade summary .num { display: grid; justify-items: center; font-size: 30px; font-weight: 900; line-height: .95; letter-spacing: -.04em; color: var(--texto); }
.unidade summary .num small { font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--apagado); }
.unidade summary .nome { font-weight: 800; font-size: 17px; }
.unidade summary .nome small { display: block; font-size: 13px; color: var(--suave); font-weight: 700; margin-bottom: 2px; }
.unidade summary .info { font-size: 13px; color: var(--suave); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.unidade summary .seta { width: 18px; height: 18px; color: var(--suave); transform: rotate(90deg); transition: transform .2s var(--mola); }
.unidade[open] summary .seta { transform: rotate(-90deg); }
.unidade .resumo-unidade { margin: -2px 20px 12px 90px; color: var(--suave); font-size: 15px; }
.unidade ol { list-style: none; margin: 0; padding: 0 8px 8px; }

/* uma aula na lista do curso */
.ep-linha { display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 10px 12px; border-radius: 6px; text-decoration: none; }
a.ep-linha:hover { background: color-mix(in srgb, var(--texto) 6%, transparent); }
.ep-linha .ep-imagem { border-radius: 4px; }
.ep-linha .ep-imagem img { transition: none; }
a.ep-linha:hover .ep-imagem img { transform: none; }
.ep-linha .ep-sem-video b { font-size: 28px; }
.ep-linha .ep-sem-video { font-size: 11px; }
.ep-linha .titulo { display: block; font-weight: 800; font-size: 16px; line-height: 1.3; }
.ep-linha .titulo .n { color: var(--apagado); margin-right: 4px; }
.ep-linha .resumo { font-size: 15px; color: var(--suave); margin: 4px 0 0; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ep-linha .lado { display: grid; justify-items: end; gap: 6px; font-size: 13px; font-weight: 700; color: var(--suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ep-linha .lado svg { width: 20px; height: 20px; }
.ep-linha.feita .lado svg { color: var(--ok); }
.ep-linha.falta { opacity: .6; }

/* cartão de compra (fica parado ao rolar) */
.compra { position: sticky; top: calc(var(--topo) + 20px); background: var(--fundo-2); border-radius: 8px; overflow: hidden; }
.compra .capa, .compra .ep-imagem, .compra > .episodio { border-radius: 0; }
.compra .dentro { padding: 22px; display: grid; gap: 12px; }
.compra .valor { font-size: 40px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.compra .valor small { font-size: 14px; font-weight: 700; color: var(--suave); letter-spacing: 0; }
.compra .ou { font-size: 14px; color: var(--suave); text-align: center; margin: 0; }
.compra .ou a { color: var(--texto); font-weight: 800; text-underline-offset: 3px; }
.compra h3 { font-size: 15px; margin-top: 8px; }
.compra ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: 14px; }
.compra li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: var(--suave); }
.compra li svg { width: 18px; height: 18px; color: var(--apagado); margin-top: 1px; }
.compra .progresso-texto { display: flex; justify-content: space-between; font-weight: 800; font-size: 14px; }

.texto-longo p { color: var(--texto-2); max-width: 70ch; }
.lista-simples { padding-left: 20px; margin: 0; color: var(--texto-2); }
.lista-simples li + li { margin-top: 8px; }
.amostra-certificado { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: center; }
/* o certificado em miniatura: a folha de papel, com o nome à mão como no de verdade */
.mini-certificado {
  aspect-ratio: 297 / 210; background: var(--papel); color: var(--tinta); border-radius: 2px; padding: 7%; display: grid; place-content: center; text-align: center; gap: 4px;
  outline: 1px solid var(--papel-borda); outline-offset: -10px;
}
.mini-certificado b { font-size: 15px; font-weight: 800; }
.mini-certificado span { font-size: 12px; color: var(--tinta-suave); }
.mini-certificado i { font-family: var(--mao); font-style: normal; font-weight: 700; font-size: 28px; color: var(--marca-escura); line-height: 1.1; margin-top: 4px; }

/* ---------------------------------------------------------------- meus cursos */
.continuar-cartao { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 24px; border-radius: 8px; background: var(--fundo-2); }
.continuar-cartao + .continuar-cartao { margin-top: 14px; }
.continuar-cartao .episodio .ep-tocar { opacity: 1; transform: none; width: 64px; height: 64px; }
.continuar-cartao h2 { font-size: clamp(32px, 3.4vw, 44px); font-weight: 900; line-height: 1; letter-spacing: -.04em; }
.continuar-cartao .proxima { margin: 10px 0 0; color: var(--suave); }
.continuar-cartao .proxima b { color: var(--texto); }
.continuar-cartao .acoes { gap: 10px; margin-top: 20px; }
.niveis-mini { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.niveis-mini li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13px; font-weight: 700; color: var(--suave); }
.niveis-mini b { color: var(--texto); font-size: 15px; font-weight: 900; }
.niveis-mini a { color: var(--texto); text-underline-offset: 3px; }
.certs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.cert-cartao { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding: 16px; border-radius: 8px; background: var(--fundo-2); text-decoration: none; }
.cert-cartao:hover { background: var(--fundo-3); }
.cert-cartao .mini-certificado { padding: 6px; outline-offset: -5px; }
.cert-cartao .mini-certificado b { font-size: 8px; }
.cert-cartao h3 { font-size: 16px; }
.cert-cartao p { margin: 4px 0 0; font-size: 13px; color: var(--suave); }

/* ---------------------------------------------------------------- caixas centrais (entrar, conferir, pedido) */
.caixa-central { max-width: 440px; margin: 56px auto 0; padding: 36px; background: var(--fundo-2); border-radius: 8px; }
.caixa-central h1 { font-size: 36px; margin-bottom: 10px; }
.pagina-entrar { position: relative; isolation: isolate; }
/* atrás da caixa de entrar, a parede de aulas da plataforma, apagada */
.mosaico { position: fixed; inset: 0; z-index: -1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 10px; transform: rotate(-6deg) scale(1.25); opacity: .3; pointer-events: none; }
.mosaico img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }
.pagina-entrar::before { content: ""; position: fixed; inset: 0; z-index: -1; background: color-mix(in srgb, var(--fundo) 82%, transparent); pointer-events: none; }
.abas { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 8px; background: var(--escuro); margin: 22px 0; }
.abas button { border: 0; border-radius: 6px; padding: 10px; font-weight: 800; cursor: pointer; background: transparent; color: var(--suave); }
.abas button[aria-selected="true"] { background: var(--fundo-4); color: var(--texto); }
.provedores { display: grid; gap: 10px; }
.separador { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--suave); font-size: 13px; font-weight: 700; }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--fundo-4); } /* taste-skill-ignore: o "ou" entre os jeitos de entrar, dentro do formulário */
.ligacao-texto { background: none; border: 0; padding: 4px; color: var(--suave); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ligacao-texto:hover { color: var(--texto); }

/* ---------------------------------------------------------------- compra */
.resumo-pedido { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; margin-top: 20px; }
.linha-item { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: center; }
.linha-item h3 { font-size: 20px; }
.total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: 6px; background: var(--escuro); font-weight: 900; font-size: 26px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* o período ("a cada 12 meses") fica inteiro, numa linha embaixo do valor */
.total > span:last-child { text-align: right; }
.total small { display: block; white-space: nowrap; }

/* ---------------------------------------------------------------- tabelas e números */
.tabela-rolagem { overflow-x: auto; }

/* minha conta: as assinaturas que ainda valem, cada uma com o seu botão */
.assinaturas { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.assinaturas li { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 14px 16px; border-radius: 6px; background: var(--fundo-3); }
.assinaturas h3 { font-size: 17px; }
.assinaturas p { margin: 4px 0 0; color: var(--suave); font-size: 15px; }
.assinaturas + .mensagem:empty { min-height: 0; margin: 0; }
/* cancelar e pedir reembolso: o campo da chave Pix e o botão ao lado do pagamento */
.assinaturas .reembolso { flex: 1 1 300px; justify-content: flex-end; }
.assinaturas .reembolso .mensagem { flex-basis: 100%; margin: 0; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.tabela th { text-align: left; font-size: 12px; color: var(--suave); font-weight: 800; padding: 10px 12px; background: var(--escuro); white-space: nowrap; }
.tabela td { padding: 12px; vertical-align: top; }
.tabela tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--texto) 4%, transparent); }
.tabela a { color: var(--texto); font-weight: 800; text-underline-offset: 3px; }
.estado { display: inline-block; padding: 2px 9px; border-radius: 4px; font-size: 12px; font-weight: 800; background: var(--vidro); text-decoration: none; }
.estado.pago { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.estado.recusado, .estado.cancelado, .estado.estornado { background: color-mix(in srgb, var(--erro) 15%, transparent); color: var(--erro); }
.estado.pendente { background: var(--fundo-4); color: var(--texto); }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-top: 24px; }
.numeros .painel + .painel { margin-top: 0; }
.numeros .painel b { display: block; font-size: 40px; font-weight: 900; line-height: 1.05; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.numeros .painel span { color: var(--suave); font-size: 14px; font-weight: 700; }
.linha-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; }
.linha-form .campo { margin: 0; flex: 1 1 220px; }
.linha-form > .mensagem:empty { display: none; }

/* painel: cursos */
.admin-cursos { display: grid; gap: 8px; margin-top: 16px; }
.admin-curso { display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px 110px 110px 84px auto; gap: 8px 16px; align-items: end; padding: 16px; background: var(--fundo-2); border-radius: 8px; }
.admin-curso .capa { align-self: center; }
.admin-curso-info { align-self: center; }
.admin-curso-info h3 a { text-decoration: none; }
.admin-curso-info h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.admin-curso-info p { margin: 4px 0 0; }
.admin-curso .campo { margin: 0; }
.admin-curso > .mensagem { grid-column: 1 / -1; margin: 0; }
.admin-curso > .mensagem:empty { display: none; }

/* ---------------------------------------------------------------- erro: o número grande, apagado no fundo */
.erro-pagina { text-align: center; padding-top: 64px; }
.erro-pagina .erro-numero { margin: 0 0 6px; font-size: clamp(120px, 20vw, 220px); font-weight: 900; line-height: .85; letter-spacing: -.06em; color: var(--fundo-4); }
.erro-pagina h1 { font-size: clamp(32px, 4vw, 48px); }
.erro-pagina p { color: var(--suave); }
.erro-pagina .erro-marca { margin: 0 0 22px; color: var(--ambar); }
.erro-pagina .erro-marca svg { display: block; width: 88px; height: 88px; margin: 0 auto; }

/* ---------------------------------------------------------------- certificado: a folha clara, numa moldura escura */
.cert-barra { background: var(--fundo-2); padding: 16px 0; }
.cert-barra .conteiner { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; }
.cert-barra p { margin: 0; }
.cert-barra .acoes { gap: 10px; }
.cert-barra.valido { background: color-mix(in srgb, var(--ok) 12%, var(--fundo-2)); }
.cert-barra.valido p { display: flex; gap: 10px; align-items: center; }
.cert-barra.valido svg { width: 22px; height: 22px; color: var(--ok); flex: none; }
.cert-mesa { padding-top: 40px; }
.certificado {
  container-type: inline-size; position: relative; aspect-ratio: 297 / 210; max-width: 1000px; margin: 0 auto; color: var(--tinta);
  background: var(--papel); border: 14px solid var(--marca-escura);
}
.cert-dentro {
  position: absolute; inset: 2.2cqw; border: 1px solid var(--moldura); padding: 4.2cqw 6cqw 3.4cqw; /* taste-skill-ignore: moldura do certificado */
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.cert-marca { display: flex; align-items: center; gap: 1cqw; font-size: 2.2cqw; font-weight: 800; line-height: 1; letter-spacing: -.015em; }
.cert-marca svg { width: 2.8cqw; height: 2.8cqw; color: var(--marca-escura); }
.cert-marca .marca-miolo { fill: var(--papel); }
.certificado h1 { font: 800 4.4cqw/1.15 var(--ui); letter-spacing: -0.02em; margin-top: 3.2cqw; overflow-wrap: normal; }
.cert-texto { font-size: 1.85cqw; color: var(--tinta-suave); max-width: 70cqw; margin: 1.8cqw 0 0; line-height: 1.5; }
.cert-texto b { color: var(--tinta); }
.cert-nota { font-size: 1.15cqw; color: var(--tinta-suave); margin: 1.2cqw 0 0; }
.cert-nome {
  font-family: var(--mao); font-weight: 700; font-size: 7.4cqw; line-height: 1; color: var(--marca-escura); margin: 1.4cqw 0 0;
  padding: 0 3cqw .5cqw; border-bottom: .35cqw solid var(--ouro); max-width: 100%; overflow-wrap: anywhere;
}
.cert-pe { margin-top: auto; width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 4cqw; }
.cert-assina { display: flex; flex-direction: column; align-items: center; min-width: 26cqw; }
.cert-assina .rubrica { font-family: var(--mao); font-weight: 700; font-size: 3.4cqw; line-height: 1.1; }
.cert-assina .linha-assina { border-top: 1px solid var(--tinta); padding-top: .6cqw; margin-top: .3cqw; font-size: 1.25cqw; color: var(--tinta-suave); width: 100%; } /* taste-skill-ignore: linha de assinatura do certificado */
.cert-codigo { display: grid; text-align: right; font-size: 1.2cqw; color: var(--tinta-suave); line-height: 1.45; }
.cert-codigo b { font-size: 2.1cqw; letter-spacing: .08em; color: var(--tinta); }

@media print {
  @page { size: A4 landscape; margin: 0; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.pagina-certificado { background: var(--branco); display: block; min-height: 0; }
  .pagina-certificado .topo, .pagina-certificado .rodape, .cert-barra { display: none !important; }
  .cert-mesa { padding: 0; max-width: none; }
  .certificado { width: 297mm; height: 210mm; max-width: none; aspect-ratio: auto; margin: 0; border-color: var(--marca-escura); break-inside: avoid; }
}

/* ---------------------------------------------------------------- telas menores */
@media (max-width: 1100px) {
  .curso-corpo { grid-template-columns: minmax(0, 1fr); }
  .compra { position: static; max-width: 560px; }
  .resumo-pedido { grid-template-columns: 1fr; }
  .admin-curso { grid-template-columns: 120px minmax(0, 1fr) 1fr 1fr; }
  .admin-curso .capa { grid-row: span 2; }
}
@media (max-width: 820px) {
  .anuncio-corpo > div { grid-template-columns: minmax(0, 1fr); gap: 52px; }
  .duvidas { grid-template-columns: minmax(0, 1fr); }
  .topo .conteiner { gap: 20px; }
  .topo-nav { gap: 16px; }
  .topo-nav a { font-size: 14px; }
  /* no celular, como no aplicativo de streaming: a foto em cima, sumindo no fundo, e o texto logo abaixo dela */
  .destaque, .curso-heroi, .sobre-foto .curso-heroi { display: block; min-height: 0; padding: 0 0 8px; }
  .curso-heroi.sem-foto { padding-top: 40px; }
  .destaque::after, .curso-heroi::after { content: none; }
  .destaque > img, .curso-heroi > img {
    position: relative; inset: auto; height: auto; aspect-ratio: 4 / 3;
    -webkit-mask-image: linear-gradient(180deg, var(--sombra) 30%, transparent 88%); mask-image: linear-gradient(180deg, var(--sombra) 30%, transparent 88%); /* taste-skill-ignore: a foto some no fundo, sem véu de cor */
  }
  .destaque > .conteiner, .curso-heroi > img + .conteiner { margin-top: -96px; position: relative; }
  .destaque + .fileira { margin-top: 0; padding-top: 40px; }
  .curso-heroi h1 { font-size: clamp(56px, 16vw, 100px); }
  .nivel-cabeca { grid-template-columns: 1fr; }
  .aprende-nivel .lista-ok { grid-template-columns: 1fr; }
  .ep-linha { grid-template-columns: 120px minmax(0, 1fr); }
  .ep-linha .lado { grid-column: 2; justify-items: start; grid-auto-flow: column; justify-content: start; }
  .ep-linha .resumo { display: none; }
  .unidade .resumo-unidade { margin-left: 20px; }
  .planos { grid-template-columns: minmax(0, 1fr); }
  .busca { display: none; }
  .busca-lupa { display: grid; }
  .curso-heroi > .heroi-fatias {
    position: relative; inset: auto; aspect-ratio: 4 / 3;
    -webkit-mask-image: linear-gradient(180deg, var(--sombra) 30%, transparent 88%); mask-image: linear-gradient(180deg, var(--sombra) 30%, transparent 88%); /* taste-skill-ignore: as fotos somem no fundo, como a do curso */
  }
  .curso-heroi > .heroi-fatias + .conteiner { margin-top: -96px; position: relative; }
  .trilha-heroi h1 { font-size: clamp(44px, 12vw, 76px); }
  .passo { grid-template-columns: 30px 150px minmax(0, 1fr); gap: 14px; }
  .passo-n { font-size: 26px; }
  .continuar-cartao { grid-template-columns: 1fr; padding: 16px; }
  .amostra-certificado { grid-template-columns: 1fr; }
  .mini-certificado { max-width: 280px; }
  .linha-item { grid-template-columns: 1fr; }
  .caixa-central { padding: 26px 20px; margin-top: 28px; }
  .mosaico { grid-template-columns: repeat(3, 1fr); }
  .rodape .conteiner { flex-direction: column; align-items: flex-start; }
  .rodape small { margin-left: 0; }
}
@media (max-width: 560px) {
  .topo .conteiner { gap: 14px; }
  .topo .marca span { display: none; }
  .topo-conta { gap: 14px; }
  .esconde-celular { display: none; }
  .fileira-corpo { --cartao: 76%; }
  .fileira-lado { display: none; }
  .trilho { gap: 10px; }
  .destaque h1 { font-size: clamp(56px, 18vw, 80px); }
  .destaque .sub { font-size: 17px; }
  .tabela { font-size: 13px; }
  .tabela th, .tabela td { padding-inline: 6px; }
  .unidade summary { grid-template-columns: 50px minmax(0, 1fr) 18px; padding-right: 14px; }
  .unidade summary .info { grid-column: 2; grid-row: 2; }
  .unidade summary .seta { grid-column: 3; grid-row: 1 / 3; }
  .unidade summary .num { grid-row: 1 / 3; font-size: 26px; }
  .admin-curso { grid-template-columns: 1fr 1fr; }
  .admin-curso .capa, .admin-curso-info { grid-column: 1 / -1; }
  .botao.grande { padding: 0 18px; font-size: 15px; }
  .passo { grid-template-columns: 28px minmax(0, 1fr); padding: 12px; }
  .passo-capa { grid-column: 2; }
  .passo-texto { grid-column: 2; }
  .passo-n { grid-row: 1 / 3; align-self: start; padding-top: 4px; }
  .busca-campo .botao { display: none; }
}
@media (max-width: 480px) {
  /* no celular pequeno, criar conta fica na página de entrar (tem a aba) */
  .topo-conta .botao { display: none; }
}
@media (max-width: 400px) {
  /* Cursos, Trilhas, Planos, a lupa e Entrar cabem em 320 */
  .topo .conteiner { gap: 10px; }
  .topo-nav { gap: 12px; }
  .topo-conta { gap: 6px; }
  .busca-lupa { width: 34px; }
}
/* Termos de Uso e Política de Privacidade: texto corrido, fácil de ler */
.legal section { margin-top: 36px; }
.legal h2 { font-size: 21px; margin-bottom: 10px; }
.legal p, .legal li { color: var(--texto-2); line-height: 1.65; max-width: 70ch; }
.legal p + p, .legal ul + p, .legal p + ul { margin-top: 12px; }
.legal ul { padding-left: 20px; display: grid; gap: 8px; }
.legal a { color: var(--texto); text-underline-offset: 3px; }
.tabela-rolar { overflow-x: auto; margin-block: 8px 14px; }
.tabela-rolar table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.tabela-rolar th, .tabela-rolar td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linha); color: var(--texto-2); line-height: 1.5; }
.tabela-rolar th { color: var(--texto); font-size: 14px; }

/* aceite no cadastro */
.aceite { display: flex; gap: 10px; align-items: flex-start; margin: -4px 0 18px; font-size: 14px; line-height: 1.5; color: var(--suave); }
.aceite input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--texto); }
.aceite a, .aceite-nota a { color: var(--texto); text-underline-offset: 3px; }
.aceite-nota { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--apagado); }

/* Termos novos desde o aceite da conta */
.aviso-termos { background: var(--fundo-3); }
.aviso-termos .conteiner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-block: 12px; }
.aviso-termos p:first-child { flex: 1 1 320px; margin: 0; font-size: 15px; }
.aviso-termos a { color: var(--texto); font-weight: 800; text-underline-offset: 3px; }
.aviso-termos .mensagem:empty { display: none; }

/* aviso de cookies: uma faixa presa embaixo, só com algum ID de medição no .env */
.aviso-cookies { position: fixed; inset: auto 0 0; z-index: 60; background: var(--fundo-3); border-top: 1px solid var(--linha-forte); }
.aviso-cookies[hidden] { display: none; }
.aviso-cookies .conteiner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding-block: 12px; }
.aviso-cookies p { flex: 1 1 320px; margin: 0; font-size: 15px; }
.aviso-cookies a { color: var(--texto); font-weight: 800; text-underline-offset: 3px; }
.aviso-cookies .escolha { display: flex; gap: 8px; flex: none; }
.aviso-cookies .botao { min-height: 40px; padding-inline: 18px; }
@media (max-width: 520px) { .aviso-cookies .escolha { flex: 1 1 100%; } .aviso-cookies .escolha .botao { flex: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}