/* CHV — paleta pedida pelo Roger: quase-preto, MADEIRA bem escura, BRASA no acento
   e LÃ (off-white quente) pro contraste. Fundo neutro-quente de propósito — a cor
   entra só no acento. Contrastes conferidos e anotados em cada linha. */
:root {
  /* palco: quase-preto e madeira em degraus */
  --fundo:        #0B0A09;   /* quase-preto quente — o palco */
  --superficie:   #17120E;   /* madeira bem escura — cards, blocos */
  --superficie-2: #221A15;   /* hover, input, pílula */
  --superficie-3: #2C221B;   /* realce sutil */
  --linha:        #2A2119;   /* divisória */
  /* tinta: LÃ */
  --texto:        #EDE6D9;   /* lã — o texto (15.9 sobre o fundo) */
  --texto-suave:  #A79B8A;   /* lã acinzentada — apoio (7.2) */
  --texto-fraco:  #8C8071;   /* metadados (5.1 = AA em texto pequeno) */
  /* a ÚNICA cor de ação: OURO e LATÃO (pedido do Roger 09/08 — substituíram a brasa;
     contraste conferido: ouro sobre o fundo 11.9 · tinta sobre o latão 7.9) */
  --acao:         #C9A227;   /* latão — preenchimento de CTA, progresso, aba ativa */
  --acao-viva:    #E8C56A;   /* ouro claro — TEXTO/ícone de ação sobre o escuro (11.9) */
  --acao-fundo:   rgba(201,162,39,.15);
  --sobre-acao:   #140D08;   /* tinta EM CIMA do latão — 7.9 */
  --ouro-fita:    linear-gradient(115deg, #7d6415, #C9A227, #F2DD9A, #C9A227, #8a6f18, #E8C56A, #7d6415);
  /* semáforo (raros de propósito; escolhidos pra não confundir com a brasa) */
  --ok:           #4ADE80;
  --atencao:      #FACC15;
  --alerta:       #F87171;
  /* forma */
  --raio:   16px;
  --raio-g: 20px;
  --raio-p: 12px;
  --sombra: 0 6px 24px rgba(0,0,0,.35);
  --sombra-forte: 0 12px 40px rgba(0,0,0,.5);
  /* tipografia: três papéis, três fontes (o Roger pediu "jovem, moderno, tech") */
  --display: "Source Serif 4", Georgia, "Times New Roman", serif;  /* títulos: serifada clássica */
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; /* NÚMERO */
  --largura: 1180px;         /* o app deixou de ser uma coluna de 620px no desktop */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  font-size: 17px;            /* base 50+ (§7.1) */
  line-height: 1.55;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; /* o clarão cinza do Android sobre card escuro lia como estado quebrado */
}
h1, h2, h3 { font-family: inherit; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
/* .display = a serifada, aplicada com parcimônia: hero, título de tela, título de aula.
   Botão, rótulo, dado e navegação seguem em Inter — a serifada não vira uniforme. */
.display { font-family: var(--display); font-weight: 600; letter-spacing: -.005em; }

.leve { font-weight: 400; color: var(--texto-suave); }
.escondido { display: none !important; }
.centro { text-align: center; }

/* ícones SVG (herdam a cor via currentColor — princípio 4) */
.ic { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -.15em;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* utilitários (evitam style= inline — a CSP bloqueia atributo style sem 'unsafe-inline') */
.mt8 { margin-top: 8px; }
.mt10 { margin-top: 10px; }
.pad-v { padding: 14px 0; }
.pad-l { padding-left: 12px; }
.txt-13 { font-size: 13px; }
.titulo-menor { font-size: 20px; }
.h-deep { color: var(--texto); }
.dica-video { color: var(--texto-suave); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sk-60 { width: 60%; }
.sk-70 { width: 70%; }
.sk-video { aspect-ratio: 16/9; }
.video-el { width: 100%; height: 100%; }
/* barra de progresso sobre superfície escura: trilho fundo, preenchido royal */
.barra-azul { max-width: 320px; margin: 10px auto 0; }

.tela { display: none; position: relative; z-index: 1; background: var(--fundo);
  padding: 18px 16px calc(100px + env(safe-area-inset-bottom)); max-width: var(--largura); margin: 0 auto; }
.tela.ativa { display: block; }
@media (min-width: 720px) { .tela { padding-left: 28px; padding-right: 28px; } }
/* entrada e onboarding: sobre a foto cinematográfica (fundo transparente) */
.tela-cheia { padding: 0 22px 40px; max-width: 460px; background: transparent; min-height: 100dvh; }

/* ---- fundo de entrada (sem foto: a do APO era retrato da Mirian) — brilho teal difuso ---- */
.entrada-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--fundo); }
.entrada-bg::before { content: ""; position: absolute; inset: -24px;
  background:
    radial-gradient(90% 60% at 50% -8%, rgba(201,162,39,.26), transparent 64%),
    radial-gradient(70% 50% at 12% 108%, rgba(232,197,106,.10), transparent 62%),
    var(--fundo); }
.entrada-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,10,9,.15) 0%, rgba(11,10,9,.55) 55%, var(--fundo) 100%); }

/* ---- SPLASH (abre como filme; some sozinha) ---- */
.splash { position: fixed; inset: 0; z-index: 100; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  text-align: center; padding: 24px; background: var(--fundo); transition: opacity .6s ease; }
.splash::before { content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(80% 55% at 50% 32%, rgba(201,162,39,.28), transparent 66%),
    var(--fundo); }
.splash::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(11,10,9,.4) 60%, rgba(11,10,9,.92) 100%); }
.splash > * { position: relative; z-index: 1; }
/* A MOEDA LANÇADA (10/08/2026): palco 3D fixo (o perspective mora no pai, senão cada
   frame do giro recalcula a projeção e a moeda "respira"); as duas faces empilhadas. */
.splash-moeda { width: 132px; height: 132px; perspective: 900px; }
.splash-moeda-giro { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.splash-face { position: absolute; inset: 0; width: 100%; height: 100%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.6)); }
.splash-face.verso { transform: rotateY(180deg); }
.splash-marca { font-size: 42px; font-weight: 800; letter-spacing: 10px; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.splash-mote { font-size: 17px; font-weight: 600; letter-spacing: .4px; color: #D9CFC0; text-shadow: 0 1px 12px rgba(0,0,0,.7); }
.splash.sumindo { opacity: 0; pointer-events: none; }

/* topo de entrada (logo da marca + mote sobre a foto) */
.topo { text-align: center; padding: 46px 0 12px; }
.topo .entrada-logo { width: 78px; height: auto; margin: 0 auto 8px; display: block;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.55)); }
.logo-marca { font-weight: 800; font-size: 40px; letter-spacing: 8px; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.5); }
.topo .mote { color: #D9CFC0; font-size: 16px; font-weight: 600; margin-top: 4px; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.topo .sub { color: var(--texto-suave); font-size: 14px; margin-top: 6px; }
.filete { width: 60px; height: 4px; border-radius: 2px; margin: 14px auto 0; background: var(--acao); }

/* entrada/onboarding: sem "cartão", campos de LINHA direto sobre a foto (§2.2 do LC) */
.tela-cheia .cartao { background: transparent; border: none; padding: 12px 2px; margin-top: 18px; }
.tela-cheia .cartao h2 { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.tela-cheia .cartao .dica { color: #A79B8A; }
.tela-cheia label { color: #D9CFC0; }
.tela-cheia input[type="email"], .tela-cheia input[type="password"], .tela-cheia input[type="text"] {
  background: rgba(255,255,255,.06); border: none; border-bottom: 1.6px solid rgba(255,255,255,.28);
  border-radius: 10px 10px 0 0; color: #fff; }
.tela-cheia input::placeholder { color: rgba(255,255,255,.4); }
.tela-cheia input:focus { background: rgba(255,255,255,.1); border-bottom-color: var(--acao-viva); box-shadow: none; }

/* topo dentro do app */
.topo-app { padding: 8px 2px 4px; }
.topo-app h1 { font-family: var(--display); font-weight: 600; font-size: 32px;
  letter-spacing: -.015em; color: var(--texto); }

/* cartões e formulários — sem borda, separação por tom (princípio 6) */
.cartao {
  background: var(--superficie); border: none;
  border-radius: var(--raio); padding: 22px 18px; margin-top: 16px;
}
.cartao h2 { font-size: 23px; color: var(--texto); margin-bottom: 6px; }
.cartao .dica { color: var(--texto-suave); font-size: 15px; margin-bottom: 16px; }

label { display: block; font-size: 15px; font-weight: 600; margin: 16px 0 7px; color: var(--texto); }
input[type="email"], input[type="password"], input[type="text"], input[type="number"], select, textarea {
  width: 100%; padding: 15px 14px; font-size: 17px; font-family: inherit;
  border: 1.5px solid var(--linha); border-radius: 12px;
  background: var(--superficie-2); color: var(--texto);
}
input::placeholder, textarea::placeholder { color: var(--texto-fraco); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acao);
  box-shadow: 0 0 0 3px var(--acao-fundo); }

/* SISTEMA DE BOTÕES (3 níveis, e acabou — direção Liturgia 09/08):
   primário = brasa SÓLIDA com tinta quase-preta (nada de gradiente, nada de pílula);
   secundário = fantasma hairline; terciário = .ver-tudo (texto + chevron, sem caixa). */
.botao {
  display: block; width: 100%; min-height: 52px; padding: 15px; margin-top: 16px;
  font-size: 17px; font-weight: 700; font-family: inherit;
  color: var(--sobre-acao); background: var(--acao); border: none; border-radius: 12px;
  cursor: pointer; transition: filter .15s, transform .1s;
}
.botao .ic { vertical-align: -.18em; }
.botao:active { filter: brightness(1.08); transform: translateY(1px); }
.botao.fantasma { background: none; color: var(--texto); border: 1.5px solid rgba(237,230,217,.22); font-weight: 600; }
.botao.fantasma:hover { border-color: var(--acao); }
.botao.fantasma:active { background: var(--superficie-2); }
.botao.grande { min-height: 58px; font-size: 18px; }
.botao.mini { width: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  padding: 10px 16px; margin: 8px 6px 0 0; font-size: 15px; }
.botao:disabled { opacity: .5; cursor: default; }
/* ação em texto (hierarquia sem 3º estilo de botão — §2.2 do LC) */
.link-acao { display: block; width: 100%; background: none; border: none; color: var(--texto);
  font-family: inherit; font-size: 16px; font-weight: 700; padding: 14px; margin-top: 6px;
  cursor: pointer; text-align: center; min-height: 48px; }
.link-acao.suave { color: var(--texto-suave); font-weight: 500; font-size: 15px; }

.msg { margin-top: 12px; font-size: 15px; padding: 12px 14px; border-radius: 12px; display: none; }
.msg.erro { display: block; background: rgba(226,88,88,.14); color: #ff9b9b; }
.msg.ok { display: block; background: var(--acao-fundo); color: var(--acao-viva); }

/* botão voltar (sub-telas) */
.voltar { background: none; border: none; color: var(--texto); font-family: inherit;
  font-size: 16px; font-weight: 600; padding: 10px 0; cursor: pointer; min-height: 48px;
  display: inline-flex; align-items: center; gap: 4px; }
.voltar .ic { width: 1.2em; height: 1.2em; }

/* feedback de toque nos cards clicáveis (transições 150–200ms — §R6) */
.curso-card, .acao-ic, .poster, .medalha, .teaser-card { transition: background .15s, transform .12s; }
.curso-card:active, .acao-ic:active { background: var(--superficie-2); }
.poster:active { transform: scale(.97); }

/* avatar */
.avatar-area { text-align: center; margin-bottom: 6px; }
.avatar {
  width: 100px; height: 100px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--linha); background: var(--superficie-2);
  display: inline-flex; align-items: center; justify-content: center; color: var(--texto-suave);
}
.avatar .ic { width: 44px; height: 44px; }
.avatar-troca { font-size: 15px; color: var(--acao-viva); font-weight: 600; display: inline-block; margin-top: 8px; cursor: pointer; min-height: 44px; padding-top: 8px; }

/* monograma tipográfico (placeholder de foto/capa — princípio 1: nunca emoji) */
.monograma { display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--texto); background: linear-gradient(150deg, var(--superficie-2), var(--superficie));
  letter-spacing: .02em; }

/* ---- INÍCIO: HERO DO DIA (o card "continuar assistindo" cresceu e virou o palco —
   direção Liturgia 09/08: a jornada de 135 dias abre no dia de hoje, não num catálogo) ---- */
.hero-dia { position: relative; border-radius: var(--raio-g); overflow: hidden;
  background: var(--superficie); margin: 8px 0 10px; min-height: 400px;
  display: flex; align-items: flex-end; isolation: isolate; }
.hero-dia .hd-arte { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scale(1.09); /* corta a moldura desenhada na arte das thumbs */ }
.hero-dia .hd-fundo { background: var(--superficie-2); }
/* scrim duplo: coluna de leitura à esquerda + base escurecida — texto NUNCA depende da capa */
.hero-dia .hd-scrim { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(11,10,9,.94) 0%, rgba(11,10,9,.78) 34%, rgba(11,10,9,.28) 62%, rgba(11,10,9,.12) 100%),
  linear-gradient(180deg, transparent 40%, rgba(11,10,9,.82) 100%); }
.hero-dia .hd-txt { position: relative; z-index: 1; padding: 34px 28px 40px; max-width: 640px; }
.hero-dia .hd-eyebrow { font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--acao-viva); }
.hero-dia .hd-eyebrow b { font-weight: 700; }
/* o numeral do dia: a exceção monumental da serifada — o signature element do app */
.hero-dia .hd-numeral { font-size: clamp(52px, 7vw, 92px); font-weight: 700; line-height: .95;
  letter-spacing: -.02em; color: var(--texto); margin-top: 10px; }
.hero-dia .hd-titulo { font-size: clamp(22px, 2.6vw, 32px); font-weight: 600; line-height: 1.15;
  letter-spacing: -.01em; color: var(--texto); margin-top: 6px; }
.hero-dia .hd-meta { font-family: var(--mono); font-size: 13px; color: var(--texto-suave); margin-top: 10px; }
.hero-dia .hd-acoes { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.hero-dia .hd-acoes .botao { width: auto; margin-top: 0; padding: 13px 26px; min-height: 48px;
  display: inline-flex; align-items: center; gap: 8px; }
.hero-dia .hd-acoes .fantasma { background: rgba(11,10,9,.35); backdrop-filter: blur(6px); }
/* o botão de comentar não é outdoor: largura do conteúdo, alinhado ao fim do campo */
.coment-box .botao { width: auto; margin-left: auto; padding: 12px 26px; min-height: 46px; }
/* a jornada como objeto físico: linha-brasa correndo na base do hero */
.hero-dia .hd-jornada { position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: rgba(237,230,217,.14); z-index: 2; }
.hero-dia .hd-jornada > i { display: block; height: 100%; background: var(--acao-viva); }
.hero-dia .hd-jornada-rot { position: absolute; right: 14px; bottom: 10px;
  font-family: var(--mono); font-size: 12px; color: var(--texto-suave); }
@media (max-width: 719px) {
  .hero-dia { min-height: 0; margin-top: 2px; }
  .hero-dia .hd-arte { position: absolute; }
  .hero-dia .hd-txt { padding: 150px 18px 30px; max-width: none; }
  .hero-dia .hd-scrim { background:
    linear-gradient(180deg, rgba(11,10,9,.18) 0%, rgba(11,10,9,.5) 42%, rgba(11,10,9,.93) 72%, rgba(11,10,9,.98) 100%); }
  .hero-dia .hd-numeral { font-size: 56px; }
  .hero-dia .hd-titulo { font-size: 24px; }
  .hero-dia .hd-acoes .botao { flex: 1 1 auto; justify-content: center; }
}
.barra-mini { height: 5px; background: var(--superficie-2); border-radius: 6px; overflow: hidden; }
.barra-mini > i { display: block; height: 100%; background: var(--acao); border-radius: 6px; }

.secao-titulo { font-size: 15px; font-weight: 700; color: var(--texto); margin: 26px 2px 10px;
  letter-spacing: .2px; }

/* ---- cabeçalho de seção: filete de acento + nome + contagem (a contagem é dado, não enfeite) ---- */
.secao-cab { display: flex; align-items: baseline; gap: 10px; margin: 30px 0 12px; }
.secao-cab::before { content: ""; flex: 0 0 3px; align-self: stretch; min-height: 22px;
  background: var(--acao); border-radius: 2px; }
.secao-cab h2 { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -.01em; }
.secao-cab .conta { font-size: 13px; color: var(--texto-fraco); font-weight: 500; white-space: nowrap; }
/* terciário: ação em texto + chevron, sem caixa — a pílula branca de sistema morreu (09/08) */
.ver-tudo { display: inline-flex; align-items: center; gap: 2px; background: none; border: none;
  padding: 10px 2px; min-height: 44px; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 600; color: var(--acao-viva); transition: color .15s ease; }
.ver-tudo .ic { width: 1.05em; height: 1.05em; transition: transform .2s ease; }
.ver-tudo:hover { color: var(--texto); }
.ver-tudo:hover .ic { transform: translateX(2px); }
.ver-tudo:focus-visible { outline: 2px solid var(--acao-viva); outline-offset: 2px; border-radius: 6px; }

/* ---- grade de aulas com capa 16:9 (o padrão que o Roger trouxe de referência) ---- */
/* align-items: start ancora todo card no topo da linha. Sem isso, um card com título
   de 1 linha (mais curto que os vizinhos de 2) fica centralizado na linha e a capa
   dele desce uns 10px — as imagens saem desalinhadas. */
.grade-aulas { display: grid; gap: 14px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
@media (max-width: 460px) { .grade-aulas { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } }

.aula-card { background: var(--superficie); border-radius: var(--raio-p); overflow: hidden;
  cursor: pointer; text-align: left; border: 1px solid transparent; padding: 0;
  font-family: inherit; color: inherit; width: 100%; display: block;
  transition: border-color .15s ease, transform .15s ease; }
.aula-card:hover { border-color: var(--linha); transform: translateY(-2px); }
.aula-card:focus-visible { outline: 2px solid var(--acao-viva); outline-offset: 2px; }
.aula-card .capa { position: relative; aspect-ratio: 16/9; background: var(--superficie-2);
  display: flex; align-items: center; justify-content: center; color: var(--texto-fraco); }
.aula-card .capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aula-card .capa .ic { width: 28px; height: 28px; }
/* selo do dia: aqui o número É o nome da aula ("Dia 74"), então ele tem posto de destaque */
.aula-card .selo { position: absolute; left: 8px; top: 8px; font-family: var(--display);
  font-size: 15px; font-weight: 700; line-height: 1; color: var(--texto);
  background: rgba(11,10,9,.82); padding: 5px 9px; border-radius: 8px; }
.aula-card .feito { position: absolute; right: 8px; top: 8px; width: 26px; height: 26px;
  border-radius: 999px; background: var(--acao); color: var(--sobre-acao);
  display: flex; align-items: center; justify-content: center; }
.aula-card .feito .ic { width: 16px; height: 16px; }
.aula-card .retomar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0,0,0,.5); }
.aula-card .retomar > i { display: block; height: 100%; background: var(--acao-viva); }
.aula-card .txt { padding: 10px 12px 13px; }
/* o título reserva SEMPRE as 2 linhas que pode ocupar: assim todo card na linha tem a
   mesma altura e as capas ficam parelhas, mesmo com títulos de tamanhos diferentes */
.aula-card .nm { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--texto);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(2 * 1.35em); }
.aula-card .meta { font-size: 12px; font-family: var(--mono); font-weight: 500;
  color: var(--texto-fraco); margin-top: 5px; }
.aula-card.atual { border-color: var(--acao); }
.aula-card.atual .meta { color: var(--acao-viva); }

/* ---- mapa dos módulos: cada módulo é uma barra do tamanho real dele ----
   No acordeão, Rute (1 aula) e Gênesis (10) ocupam a mesma altura e parecem iguais.
   Aqui a largura é proporcional ao número de aulas, então dá pra ver de relance
   onde o curso é longo, onde é curto, e quanto já foi feito de cada parte.
   Refeito 09/08: os blocos de 26px liam como skeleton travado — virou código de
   barras fino, com trilho visível, preenchimento brasa e o "você está aqui". */
.mapa-modulos { display: flex; gap: 2px; margin: 16px 0 6px; height: 12px; max-width: 620px; }
.mapa-modulos .parte { position: relative; border-radius: 3px; overflow: hidden;
  background: #33281F; flex-basis: 0; min-width: 5px; cursor: pointer;
  border: none; padding: 0; transition: transform .15s ease; }
.mapa-modulos .parte > i { position: absolute; inset: 0 auto 0 0; background: var(--acao); }
.mapa-modulos .parte:hover { transform: scaleY(1.35); }
.mapa-modulos .parte:hover, .mapa-modulos .parte:focus-visible { outline: 1.5px solid var(--acao-viva); outline-offset: 1px; }
.mapa-modulos .parte.aqui { outline: 1.5px solid var(--acao-viva); outline-offset: 1px; }
.mapa-legenda { display: flex; justify-content: space-between; gap: 10px; font-size: 12px;
  color: var(--texto-fraco); max-width: 620px; margin-top: 6px; }
.mapa-aqui { font-family: var(--mono); color: var(--acao-viva); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }

/* ---- "A seguir": vira coluna ao lado do player quando a tela permite ---- */
.aula-layout { display: grid; gap: 22px; align-items: start; }
@media (min-width: 1000px) { .aula-layout { grid-template-columns: minmax(0, 1fr) 330px; } }
.a-seguir { background: var(--superficie); border-radius: var(--raio); padding: 14px; }
/* no desktop a coluna acompanha a rolagem — o deserto embaixo dela acaba */
@media (min-width: 1000px) { .a-seguir { position: sticky; top: 86px; } }
.a-seguir .secao-cab { margin: 2px 0 10px; }
.a-seguir .secao-cab h2 { font-size: 18px; }
.a-seguir .item { display: flex; gap: 10px; align-items: center; width: 100%; padding: 7px;
  border-radius: 10px; background: none; border: none; cursor: pointer; text-align: left;
  font-family: inherit; color: inherit; }
.a-seguir .item:hover { background: var(--superficie-2); }
.a-seguir .item:focus-visible { outline: 2px solid var(--acao-viva); outline-offset: 1px; }
.a-seguir .mini { flex: 0 0 88px; aspect-ratio: 16/9; border-radius: 7px; overflow: hidden;
  background: var(--superficie-2); display: flex; align-items: center; justify-content: center; }
.a-seguir .mini img { width: 100%; height: 100%; object-fit: cover; }
.a-seguir .mini .ic { width: 18px; height: 18px; color: var(--texto-fraco); }
.a-seguir .nm { font-size: 13px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.a-seguir .est { font-size: 11px; color: var(--acao-viva); margin-top: 3px; }

/* bloco de módulo na tela do curso */
.modulo-bloco { scroll-margin-top: 16px; }

/* progresso da semana / medalha */
.faixa-progresso { display: flex; gap: 10px; margin-top: 12px; }
.pilula { flex: 1; background: var(--superficie); border: none; border-radius: 14px;
  padding: 14px; text-align: center; }
.pilula .num { font-weight: 800; font-size: 28px; color: var(--texto); line-height: 1; }
.pilula .rot { font-size: 13px; color: var(--texto-suave); margin-top: 4px; }

/* ---- AS MOEDAS DO MÉRITO (10/08/2026) ----
   O metal tem que aparecer: contar "7 bronze" sem mostrar bronze é planilha, não honra.
   Mesma peça do medalhão em 3 metais — a imagem é a recompensa, o número é só a conta. */
.pilula .moeda { width: 56px; height: 56px; display: block; margin: 0 auto 8px;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)); }
.moeda.mini { width: 22px; height: 22px; flex: 0 0 22px; vertical-align: -5px; }
#toast .ganho { display: inline-flex; align-items: center; gap: 6px; margin: 0 8px; }
#toast .ganho b { font-weight: 800; }

/* explicação do Mérito (dentro de "ver detalhes") */
.merito-linha { display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-top: 1px solid var(--linha); }
.merito-linha:first-of-type { border-top: none; }
.merito-qtd { font-family: "JetBrains Mono", monospace; font-weight: 700; color: var(--acao-viva);
  flex: 0 0 auto; }
.merito-txt { color: var(--texto-suave); font-size: 14px; }
.merito-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--linha); }
.merito-titulo:first-of-type { border-top: none; }
.merito-titulo .nm { font-family: "Source Serif 4", Georgia, serif; font-size: 17px; color: var(--texto); }
.merito-titulo .req { display: inline-flex; align-items: center; gap: 6px;
  font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--texto-suave); }
.merito-titulo.atual .nm { color: var(--acao-viva); font-weight: 700; }

/* ---- VITRINE / FILEIRAS: cards de curso ---- */
.grade-cursos { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.curso-card {
  display: flex; gap: 14px; align-items: center; cursor: pointer;
  background: var(--superficie); border: none; border-radius: var(--raio); padding: 12px;
}
.curso-card .capa { flex: 0 0 56px; height: 56px; border-radius: 12px; overflow: hidden; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; }
.curso-card .capa img { width: 100%; height: 100%; object-fit: cover; }
.curso-card .info { flex: 1 1 auto; min-width: 0; }
.curso-card .nome { font-size: 17px; font-weight: 700; color: var(--texto); }
.curso-card .meta { font-size: 14px; color: var(--texto-suave); margin-top: 3px; }
.curso-card .cadeado { flex: 0 0 auto; color: var(--texto-suave); }
.curso-card .barra-mini { margin-top: 8px; }
.preco-tag { font-weight: 700; color: var(--acao-viva); }

/* ---- HERÓI (carrossel de campanha do Início — controlado pela Mirian no admin) ---- */
.heroi { position: relative; border-radius: var(--raio-g); overflow: hidden; margin: 4px 0 6px;
  aspect-ratio: 16/10; background: var(--superficie); cursor: pointer; }
.heroi-arte { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.heroi-fundo { background: linear-gradient(140deg, var(--acao) 0%, #0B0A09 120%); }
.heroi-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,10,9,.05) 30%, rgba(11,10,9,.86) 100%); }
.heroi-txt { position: absolute; left: 18px; right: 18px; bottom: 16px; }
.heroi-titulo { font-size: 23px; font-weight: 800; color: #fff; line-height: 1.15; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.heroi-sub { font-size: 14px; color: #D9CFC0; margin-top: 4px; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.heroi-cta { display: inline-block; margin-top: 12px; background: var(--acao); color: var(--sobre-acao);
  font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 10px; }

/* ---- FILEIRA de pôsteres 2:3 (padrão Netflix; sangra na borda direita, indica que tem mais) ---- */
.fileira { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity;
  margin: 0 -16px 4px; padding: 4px 16px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.fileira::-webkit-scrollbar { display: none; }
.poster { flex: 0 0 146px; scroll-snap-align: start; cursor: pointer; }
.poster .arte { position: relative; width: 146px; height: 219px; border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; color: #fff; }
.poster .arte img { width: 100%; height: 100%; object-fit: cover; }
.poster .arte .mono { font-size: 46px; font-weight: 800; letter-spacing: .02em; }
.poster .cadeado-badge { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 999px;
  background: rgba(11,10,9,.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; color: #fff; }
.poster .cadeado-badge .ic { width: 17px; height: 17px; }
.poster .poster-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(11,10,9,.5); }
.poster .poster-barra > i { display: block; height: 100%; background: var(--acao); }
.poster .nome { font-size: 14px; font-weight: 600; color: var(--texto); margin-top: 8px; line-height: 1.28;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.poster .preco { font-size: 13px; font-weight: 700; color: var(--acao-viva); margin-top: 2px; }

/* ---- DENTRO DO CURSO / VENDA: banner-herói sangrando no topo (§2.4) ---- */
.tela-hero { padding: 0 0 calc(100px + env(safe-area-inset-bottom)); }
@media (min-width: 720px) { .curso-hero { height: 320px; } }
.voltar-flutua { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 14px; z-index: 6;
  width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 999px; justify-content: center;
  background: rgba(11,10,9,.5); backdrop-filter: blur(8px); color: #fff; }
.voltar-flutua span { display: none; }
.voltar-flutua .ic { width: 1.4em; height: 1.4em; }

.curso-hero { position: relative; width: 100%; height: 260px; overflow: hidden; border-radius: 0 0 var(--raio) var(--raio);
  display: flex; align-items: center; justify-content: center; color: #fff; background: var(--superficie); }
.hero-arte { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-mono { font-size: 72px; font-weight: 800; opacity: .92; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,10,9,.12) 0%, rgba(11,10,9,.5) 58%, var(--fundo) 100%); }
.hero-titulo { position: absolute; left: 18px; right: 18px; bottom: 16px; font-size: 30px;
  font-family: var(--display); font-weight: 600; letter-spacing: -.015em;
  color: #fff; line-height: 1.15; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
@media (min-width: 720px) {
  .hero-titulo { font-size: 46px; left: 28px; right: 28px; bottom: 22px;
    max-width: var(--largura); margin: 0 auto; }
}
.hero-sk { height: 260px; border-radius: 0; margin-top: 0; }

.curso-corpo { padding: 6px 16px 0; max-width: var(--largura); margin: 0 auto; }
@media (min-width: 720px) { .curso-corpo { padding-left: 28px; padding-right: 28px; } }
/* Os blocos de ação seguem numa coluna legível de 620px, mas ANCORADOS À ESQUERDA:
   centralizados eles ficariam num eixo e a grade de capas em outro, e a tela sairia
   com dois alinhamentos concorrentes. No celular a coluna já ocupa tudo. */
.curso-corpo > .botao, .curso-corpo > .acoes-curso, .curso-corpo > .proxima-aula,
.curso-corpo > .curso-sobre, .curso-corpo > .prog-linha,
.curso-corpo > .barra-mini, .curso-corpo > .mapa-modulos, .curso-corpo > .mapa-legenda
  { max-width: 620px; margin-left: 0; margin-right: 0; }
/* o CTA do curso é botão, não outdoor: largura do conteúdo, ícone junto (09/08) */
.curso-corpo > .botao { width: auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; min-height: 48px; }
@media (max-width: 560px) { .curso-corpo > .botao { width: 100%; justify-content: center; } }
/* a barra fina do progresso acompanha a mesma coluna (o 320px centrado do APO
   ficava solto no meio da tela larga) */
.curso-corpo > .barra-mini.barra-azul { max-width: 620px; margin: 10px 0 0; }
.proxima-aula { margin-top: 8px; }
.proxima-aula .rot { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--texto-suave); }
.proxima-aula .nm { font-size: 17px; font-weight: 700; color: var(--texto); margin-top: 2px; }
.acoes-curso { display: flex; gap: 10px; margin-top: 12px; }
.acoes-curso:empty { display: none; }
.acao-ic { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: var(--superficie); border: none; border-radius: 14px; padding: 12px 8px; min-height: 64px;
  color: var(--texto); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.acao-ic .ic { width: 22px; height: 22px; color: var(--acao-viva); }
.curso-sobre { margin-top: 12px; color: var(--texto-suave); font-size: 15px; }
.prog-linha { margin-top: 18px; font-size: 14px; color: var(--texto-suave); }
.prog-linha + .barra-mini { margin-top: 8px; max-width: none; }

/* O acordeão de linhas do APO (.modulo/.aula-item) saiu daqui: a tela do curso
   passou a usar a grade de capas (.modulo-bloco + .grade-aulas). */

/* ---- PÁGINA DE VENDA (bloqueado = desejo, princípio 8) ---- */
.venda-capa { width: 100px; height: 100px; border-radius: 24px; color: #fff; margin: 4px auto 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 800; }
.venda-capa img { width: 100%; height: 100%; object-fit: cover; }
.venda-promessa { font-size: 22px; font-weight: 700; color: var(--texto);
  text-align: center; margin-bottom: 8px; }
.venda-preco { text-align: center; font-size: 22px; font-weight: 800; color: var(--acao-viva); margin: 10px 0; }
.dentro-lista { list-style: none; }
.dentro-lista li { padding: 12px 0 12px 30px; position: relative; border-bottom: 1px solid var(--linha); color: var(--texto); }
.dentro-lista li:last-child { border-bottom: none; }
.dentro-lista li .ic { position: absolute; left: 2px; top: 12px; width: 20px; height: 20px; color: var(--acao); }

/* ---- PLAYER ---- */
.tela-aula { padding-top: 8px; }
/* migalha de pão: situa a aula (Início › curso › Dia N) — referência FDZ */
.migalha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--texto-fraco); margin: 2px 0 12px; }
.migalha button { background: none; border: none; padding: 6px 0; cursor: pointer;
  font-family: inherit; font-size: inherit; color: var(--texto-suave); min-height: 32px; }
.migalha button:hover { color: var(--acao-viva); }
.migalha b { color: var(--texto); font-weight: 600; }
.video-area { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 14px;
  overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--texto-suave); text-align: center; }
.video-area .placeholder { padding: 20px; }
.video-area .placeholder .ico { display: block; margin: 0 auto 10px; color: var(--texto-fraco); }
.video-area .placeholder .ico .ic { width: 40px; height: 40px; }
/* o embed do YouTube é um iframe: sem borda, e ele mesmo desenha os controles */
iframe.video-el { border: 0; display: block; }
/* marca d'água: no embed ela fica ACIMA do iframe, mas sem roubar o clique do play */
.video-marca { position: absolute; bottom: 8px; right: 10px; font-size: 11px;
  color: rgba(255,255,255,.4); pointer-events: none; z-index: 2; }
/* marca d'água do embed do YouTube: fora do vídeo, discreta, alinhada à direita */
.marca-fora { text-align: right; font-size: 11px; color: var(--texto-fraco); margin-top: 6px; }
/* o "Dia N" sai do título e vira selo mono — na página o dia é dado, não nome */
.aula-selo { font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--acao-viva); margin-top: 12px; }
.aula-titulo { font-size: 25px; color: var(--texto); margin: 12px 0 2px; }
.aula-selo + .aula-titulo { margin-top: 4px; }
.aula-modulo { font-size: 14px; color: var(--texto-suave); }
.velocidades { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.vel { min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--linha);
  background: var(--superficie); color: var(--texto); font-family: inherit; font-size: 15px; cursor: pointer; }
.vel.ativa { background: var(--acao); color: var(--sobre-acao); border-color: var(--acao); }
.materiais a { display: flex; align-items: center; gap: 10px; padding: 13px 14px; margin-top: 8px;
  border: none; background: var(--superficie); border-radius: 12px; color: var(--texto); text-decoration: none; font-weight: 600; }
.materiais a .ic { color: var(--acao); }

/* comentários */
.coment-box textarea { min-height: 80px; resize: vertical; }
.coment { display: flex; gap: 10px; padding: 14px 0; border-top: 1px solid var(--linha); }
.coment .av { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: var(--superficie-2);
  display: flex; align-items: center; justify-content: center; color: var(--texto-suave); object-fit: cover; font-weight: 700; }
.coment .av .ic { width: 20px; height: 20px; }
.coment .corpo { flex: 1 1 auto; min-width: 0; }
.coment .autora { font-weight: 700; font-size: 15px; color: var(--texto); }
.coment .txt { font-size: 16px; white-space: pre-wrap; margin-top: 2px; color: var(--texto); }

/* ---- PERFIL: Mérito (10/08/2026) — título de honra, moedas, streak silencioso ---- */
.perfil-topo { position: relative; text-align: center; padding: 26px 0 8px; margin: -18px -16px 6px;
  background: radial-gradient(130% 90% at 50% -10%, rgba(201,162,39,.20), transparent 62%); }
.perfil-topo .avatar { width: 110px; height: 110px; border-color: var(--acao); }
.perfil-topo .nome { font-weight: 800; font-size: 26px; color: var(--texto); margin-top: 10px; }
/* o título de honra é o que fica GRANDE no topo — pedido do Roger: só ele, sem barra embaixo */
.titulo-honra { font-family: var(--display); font-weight: 600; font-size: 22px;
  color: var(--acao-viva); margin-top: 4px; }
.streak-linha { padding: 0 16px 16px; }
.streak-linha .barra-mini { max-width: 320px; margin: 0 auto; }
.streak-linha .dica { text-align: center; margin-top: 6px; }
.cert-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 0; border-top: 1px solid var(--linha); }
.cert-item:first-child { border-top: none; }
.cert-item .nm { font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.cert-item .nm .ic { color: var(--acao); }

/* ---- EM BREVE (comunidade/ferramentas) ---- */
.em-breve { text-align: center; padding: 40px 20px; }
.em-breve-icone { color: var(--texto-fraco); }
.em-breve-icone .ic { width: 52px; height: 52px; }
.em-breve h2 { font-size: 24px; color: var(--texto); margin: 14px 0 8px; }
.em-breve p { color: var(--texto-suave); font-size: 16px; max-width: 420px; margin: 0 auto; }
.selo-preparo { display: inline-block; margin-top: 18px; padding: 6px 16px; border-radius: 999px;
  background: var(--acao-fundo); color: var(--acao-viva); font-weight: 700; font-size: 14px; }
.grade-teaser { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }
.teaser-card { background: var(--superficie); border: none; border-radius: 14px; padding: 16px 14px;
  font-size: 14px; color: var(--texto-suave); min-width: 120px; }
.teaser-card .ic { display: block; margin: 0 auto 8px; width: 26px; height: 26px; color: var(--acao); }

/* ---- ESTADOS: vazio, skeleton ---- */
.vazio { text-align: center; padding: 40px 20px; color: var(--texto-suave); }
.vazio .ico { color: var(--texto-fraco); margin-bottom: 6px; }
.vazio .ico .ic { width: 40px; height: 40px; }
.skeleton { background: linear-gradient(90deg, var(--superficie) 25%, var(--superficie-2) 37%, var(--superficie) 63%);
  background-size: 400% 100%; animation: sk 1.3s ease infinite; border-radius: 12px; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.sk-card { height: 84px; margin-top: 14px; }
.sk-linha { height: 18px; margin-top: 10px; }

/* faixa offline + aviso liberando */
.faixa-offline { position: fixed; top: 0; left: 0; right: 0; z-index: 30; text-align: center;
  background: var(--atencao); color: #2a1f04; font-size: 14px; font-weight: 600; padding: 8px; }
.aviso-liberando { text-align: center; padding: 36px 20px; }
.aviso-liberando .ico { color: var(--acao); margin-bottom: 8px; }
.aviso-liberando .ico .ic { width: 46px; height: 46px; }
.aviso-liberando h2 { color: var(--texto); margin: 10px 0 6px; }

/* aviso de status (assinatura vencendo etc.) */
.aviso { border-radius: 12px; padding: 12px 14px; font-size: 15px; margin-top: 12px; }
.aviso.atencao { background: rgba(232,180,72,.12); color: #f0cd7e; border: 1px solid rgba(232,180,72,.28); }
.aviso.alerta { background: rgba(226,88,88,.12); color: #ff9b9b; border: 1px solid rgba(226,88,88,.28); }

/* ---- barra de abas (4 fixas — REDESIGN §4: Início · Ferramentas · Comunidade · Perfil) ---- */
.abas { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex; background: rgba(9,15,28,.92); backdrop-filter: blur(12px);
  border-top: 1px solid var(--linha); padding-bottom: env(safe-area-inset-bottom); }
.aba { flex: 1; padding: 9px 0 7px; text-align: center; border: none; background: none;
  font-family: inherit; font-size: 12px; color: var(--texto-suave); cursor: pointer; min-height: 58px;
  display: flex; flex-direction: column; align-items: center; gap: 3px; }
.aba .ic { width: 24px; height: 24px; stroke-width: 1.9; }
.aba.ativa { color: var(--acao-viva); font-weight: 700; }

/* ---- toast + medalha ---- */
.toast { position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--superficie-3); color: #fff; padding: 12px 20px; border-radius: 999px; z-index: 40;
  font-weight: 700; font-size: 16px; box-shadow: var(--sombra); animation: sobe .3s ease; }
@keyframes sobe { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.medalha-modal { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center;
  background: rgba(3,7,15,.72); padding: 24px; }
.medalha-modal .caixa { background: var(--superficie); border-radius: 20px; padding: 30px 24px; text-align: center; max-width: 340px;
  box-shadow: var(--sombra-forte); animation: sobe .3s ease; }
.medalha-modal .em { font-size: 66px; animation: pulo .6s ease; }
@keyframes pulo { 0% { transform: scale(.4); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.medalha-modal h2 { color: var(--texto); margin: 8px 0 4px; }
.medalha-modal p { color: var(--texto-suave); }

/* ---- admin (sóbrio-funcional) ---- */
.sub-abas { display: flex; gap: 6px; margin: 12px 0; overflow-x: auto; }
.sub-aba { min-height: 44px; padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--linha);
  background: var(--superficie); font-family: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; color: var(--texto); }
.sub-aba.ativa { background: var(--acao); color: var(--sobre-acao); border-color: var(--acao); }
.tabela { width: 100%; font-size: 14px; border-collapse: collapse; margin-top: 8px; }
.tabela td, .tabela th { padding: 9px 8px; border-bottom: 1px solid var(--linha); text-align: left; word-break: break-word; color: var(--texto); }
.tabela th { color: var(--texto-suave); font-weight: 600; }
.metricas-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.metrica-card { background: var(--superficie); border: none; border-radius: 14px; padding: 14px; text-align: center; }
.metrica-card .numero { font-weight: 800; font-size: 28px; color: var(--texto); line-height: 1; }
.metrica-card .rotulo { font-size: 13px; color: var(--texto-suave); margin-top: 4px; }
.barra-drop { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; }
.barra-drop .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); }
.barra-drop .trilho { flex: 0 0 40%; height: 8px; background: var(--superficie-2); border-radius: 6px; overflow: hidden; }
.barra-drop .fill { height: 100%; background: var(--acao); }
.admin-item { border: none; background: var(--superficie); border-radius: 12px; padding: 12px; margin-top: 10px; }
/* acesso automático: nome do produto à esquerda, o liga/desliga à direita (12/08/2026) */
.linha-livre { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.linha-livre .botao.mini { margin: 0; flex: 0 0 auto; }
/* lista de membros em CARTÃO: tabela de 5 colunas não cabe em 390px sem picar as palavras */
.membro { background: var(--superficie); border-radius: 12px; padding: 12px 14px; margin-top: 10px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.membro-quem { flex: 1 1 180px; min-width: 0; }
.membro-quem b { color: var(--texto); }
.membro-email { color: var(--texto-suave); font-size: 13px; word-break: break-all; }
.membro-dados { flex: 1 1 100%; display: flex; gap: 14px; color: var(--texto-suave); font-size: 13px; }
.membro .botao.mini { margin: 0; flex: 0 0 auto; }
/* a última linha não pode morrer embaixo da barra de abas */
.painel-admin { padding-bottom: 96px; }
/* linha de aula no admin: nome + estado do vídeo à esquerda, botão de colar link à direita */
.admin-aula { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; padding: 6px 0 6px 12px; }
.admin-aula .botao.mini { margin: 0; }
.admin-aula .tem-video { color: var(--acao-viva); font-weight: 600; font-size: 13px; }
.admin-aula .sem-video { color: var(--texto-fraco); font-weight: 400; font-size: 13px; }
.admin-capa { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.admin-capa-img { width: 60px; height: 90px; object-fit: cover; border-radius: 8px; background: var(--superficie-2); }
.admin-capa-img.larga { width: 108px; height: 68px; }
label.lin { display: flex; flex-direction: row; align-items: center; gap: 8px; color: var(--texto); }
label.lin input { width: auto; }

@media (min-width: 700px) {
  .estante { grid-template-columns: repeat(4, 1fr); }
  .metricas-cards { grid-template-columns: repeat(3, 1fr); }
}

/* ============ impressão / salvar PDF do certificado (§13.1) — Belleza vive AQUI, cerimonial ============ */
#area-impressao { display: none; }
@media print {
  body > *:not(#area-impressao) { display: none !important; }
  body { background: #fff; }
  #area-impressao { display: block; }
  .cert {
    border: 6px double #C9A227; border-radius: 8px; padding: 48px 40px; text-align: center;
    font-family: "Inter", system-ui, sans-serif; color: #1C1410; max-width: 900px; margin: 0 auto;
  }
  .cert .marca { font-family: "Belleza", "Inter", sans-serif; font-size: 30px; letter-spacing: 4px; color: #8a6f18; }
  .cert .sub-marca { font-size: 13px; color: #6B5D4F; margin-bottom: 30px; }
  .cert .titulo { font-family: "Belleza", "Inter", sans-serif; font-size: 40px; color: #B08D2A; margin: 10px 0 24px; }
  .cert .texto { font-size: 17px; line-height: 1.7; }
  .cert .nome { font-family: "Belleza", "Inter", sans-serif; font-size: 34px; color: #1C1410; margin: 18px 0; }
  .cert .curso { font-size: 20px; font-weight: 700; }
  .cert .rodape { margin-top: 40px; font-size: 13px; color: #6B5D4F; }
  .cert .filete-cert { width: 120px; height: 3px; background: linear-gradient(90deg,#C9A227,#F2DD9A); margin: 24px auto; }
}

/* respeitar quem pediu menos animação */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==================================================================
   TECH — o ajuste que o Roger pediu ("jovem, moderno, tech")
   Sora nos títulos; JetBrains Mono em NÚMERO (dia, contagem, duração).
   Número em mono é a assinatura: dado com cara de dado, não de texto.
   ================================================================== */
.display, .secao-cab h2, .topo-app h1, .hero-titulo { font-family: var(--display); }
.secao-cab h2 { font-weight: 600; letter-spacing: -.01em; }
.topo-app h1 { font-weight: 600; letter-spacing: -.02em; }
.hero-titulo { font-weight: 600; letter-spacing: -.015em; }
.aula-titulo { font-family: var(--display); font-weight: 600; letter-spacing: -.015em; }
.aula-card .selo { font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: -.02em; }
.secao-cab .conta { font-family: var(--mono); }
.prog-linha { font-family: var(--mono); font-size: 13px; }

/* ---- ENTRADA: parede de capas + cartão de acesso ---- */
/* A parede de capas saiu (09/08): o Roger pediu FUNDO NEUTRO no login — o palco agora
   é carvão com um halo de ouro difuso, e quem carrega a tela é o cartão com a fita. */
.parede { display: none; }
.parede img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 10px;
  filter: blur(2px) saturate(.75) brightness(.55); }
/* scrim por cima da parede: o cartão precisa vencer o fundo, sempre */
#tela-entrada::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(60% 45% at 50% 38%, rgba(201,162,39,.10), transparent 70%),
    var(--fundo); }

/* ⚠️ `.tela-cheia` tem a MESMA especificidade de `.tela` e vem depois no arquivo:
   escrever `display: flex` solto aqui vence o `display: none` de `.tela` e a entrada
   fica visível por cima de todas as telas. Por isso o `.ativa` é obrigatório. */
.tela-cheia.ativa { max-width: none; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px 40px; }
.tela-cheia { max-width: none; }
.acesso { position: relative; z-index: 2; width: 100%; max-width: 430px; }
.acesso-topo { text-align: center; margin-bottom: 22px; }
.acesso-topo .entrada-logo { width: 66px; height: auto; margin: 0 auto 10px; display: block; }
.acesso-topo .logo-marca { font-family: var(--display); font-weight: 700; font-size: 36px;
  letter-spacing: 12px; text-indent: 12px; color: var(--texto); text-shadow: none; }
.acesso-topo .mote { font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--acao-viva); margin-top: 8px; text-shadow: none; }

/* o cartão de acesso: filete de acento no topo, como na referência que ele trouxe */
.tela-cheia .cartao { position: relative; background: rgba(23,18,14,.86); backdrop-filter: blur(14px);
  border: 1px solid var(--linha); border-radius: 18px; padding: 26px 22px 22px; margin-top: 0;
  box-shadow: var(--sombra-forte); overflow: hidden; }
.tela-cheia .cartao::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--acao), var(--acao-viva), var(--acao)); }
.tela-cheia .cartao h2 { font-family: var(--display); font-weight: 600; font-size: 28px;
  letter-spacing: -.02em; text-align: center; color: var(--texto); text-shadow: none; }
.tela-cheia .cartao .dica { text-align: center; color: var(--texto-suave); margin-bottom: 20px; }
.tela-cheia label { display: flex; align-items: center; gap: 7px; color: var(--texto-suave);
  font-size: 13px; font-weight: 600; }
.tela-cheia label .ic { width: 15px; height: 15px; color: var(--acao-viva); }
.tela-cheia input[type="email"], .tela-cheia input[type="password"], .tela-cheia input[type="text"] {
  background: var(--fundo); border: 1.5px solid var(--linha); border-radius: 12px; color: var(--texto); }
.tela-cheia input:focus { background: var(--fundo); border-color: var(--acao);
  box-shadow: 0 0 0 3px var(--acao-fundo); }

.campo-senha { position: relative; }
.campo-senha input { padding-right: 50px; }
.ver-senha { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--texto-suave); cursor: pointer; border-radius: 10px; }
.ver-senha:hover { color: var(--texto); background: var(--superficie-2); }
.ver-senha .ic { width: 20px; height: 20px; }

.linha-apoio { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.link-inline { background: none; border: none; padding: 4px 0; min-height: 32px; cursor: pointer;
  font-family: inherit; font-size: 14px; color: var(--acao-viva); font-weight: 600; }
.link-inline:hover { text-decoration: underline; }
.acesso-rodape { text-align: center; font-size: 12px; color: var(--texto-fraco); margin-top: 22px; }

/* ---- BUSCA GRANDE (topo da aba Progresso) ---- */
.busca-grande { position: relative; margin: 14px 0 6px; }
.busca-grande .lupa { position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; color: var(--acao-viva); pointer-events: none; }
.busca-grande input { width: 100%; min-height: 64px; padding: 16px 54px 16px 58px;
  font-size: 18px; font-family: inherit; color: var(--texto);
  background: var(--superficie); border: 1.5px solid var(--linha); border-radius: 18px; }
.busca-grande input::placeholder { color: var(--texto-fraco); }
.busca-grande input:focus { outline: none; border-color: var(--acao); box-shadow: 0 0 0 4px var(--acao-fundo); }
.busca-grande input::-webkit-search-cancel-button { display: none; }
.limpa-busca { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--superficie-2); color: var(--texto-suave); font-size: 22px; line-height: 1; }
.limpa-busca:hover { color: var(--texto); }
@media (min-width: 720px) { .busca-grande input { min-height: 72px; font-size: 20px; } }

/* ---- PROGRESSO ---- */
.prog-curso { margin-bottom: 28px; }
.prog-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.prog-numeros .n { background: var(--superficie); border-radius: 14px; padding: 14px 10px; text-align: center; }
.prog-numeros .n b { display: block; font-family: var(--mono); font-size: 26px; font-weight: 700;
  color: var(--texto); letter-spacing: -.03em; }
.prog-numeros .n span { display: block; font-size: 12px; color: var(--texto-fraco); margin-top: 2px; }

.bloco { background: var(--superficie); border-radius: 14px; margin-top: 10px; overflow: hidden; }
.bloco-cab { display: flex; align-items: center; gap: 10px; width: 100%; padding: 15px 16px;
  background: none; border: none; cursor: pointer; font-family: inherit; color: inherit;
  text-align: left; min-height: 56px; }
.bloco-cab:hover { background: var(--superficie-2); }
.bloco-nome { flex: 1 1 auto; font-weight: 600; font-size: 16px; color: var(--texto); min-width: 0; }
.bloco-conta { font-family: var(--mono); font-size: 13px; color: var(--texto-fraco); }
.bloco-seta { flex: 0 0 12px; width: 12px; height: 12px; border-right: 2px solid var(--texto-fraco);
  border-bottom: 2px solid var(--texto-fraco); transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease; }
.bloco.aberto .bloco-seta { transform: rotate(-135deg) translate(-4px, -4px); }
.bloco-corpo { display: none; }
.bloco.aberto .bloco-corpo { display: block; }
/* "+ Mais dados" do Perfil: dobra de 2º nível, com estado PRÓPRIO. Nome diferente de
   `.bloco-corpo` de propósito — como ela mora dentro de um `.bloco`, herdava o `aberto`
   do pai e nascia escancarada (corrigido 10/08/2026). */
.dobra { display: none; }
.dobra.aberto { display: block; }

.prog-linha-aula { display: flex; align-items: center; gap: 12px; padding: 6px 14px 6px 12px;
  border-top: 1px solid var(--linha); }
.prog-linha-aula .check { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px;
  border: 2px solid var(--linha); background: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; color: var(--sobre-acao);
  transition: background .15s, border-color .15s; }
.prog-linha-aula .check .ic { width: 16px; height: 16px; stroke-width: 3; }
.prog-linha-aula .check:hover { border-color: var(--acao-viva); }
.prog-linha-aula.feita .check { background: var(--acao); border-color: var(--acao); }
.prog-txt { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px;
  flex-wrap: wrap; background: none; border: none; cursor: pointer; text-align: left;
  font-family: inherit; color: inherit; padding: 10px 0; min-height: 44px; }
.prog-dia { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--acao-viva);
  background: var(--acao-fundo); padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.prog-nome { flex: 1 1 auto; font-size: 15px; color: var(--texto); min-width: 0; }
.prog-dur { font-family: var(--mono); font-size: 12px; color: var(--texto-fraco); white-space: nowrap; }
.prog-linha-aula.feita .prog-nome { color: var(--texto-suave); text-decoration: line-through;
  text-decoration-color: var(--texto-fraco); }

/* ---- COMUNIDADE (feed de verdade desde 12/08/2026) ---- */
.compor { display: flex; align-items: flex-start; gap: 12px; background: var(--superficie);
  border-radius: 16px; padding: 12px 14px; margin-top: 12px; }
.compor-campo { flex: 1 1 auto; color: var(--texto-fraco); font-size: 15px; }
/* o campo real de escrever: cresce com o texto e não parece um input de formulário */
.compor-caixa { background: var(--superficie); border-radius: 16px; margin-top: 12px; padding-bottom: 4px; }
.compor-caixa .compor { margin-top: 0; padding-bottom: 4px; }
.compor-campo-real { flex: 1 1 auto; min-width: 0; background: none; border: none; resize: vertical;
  color: var(--texto); font-family: inherit; font-size: 15px; line-height: 1.5; padding: 9px 0; }
.compor-campo-real:focus { outline: none; }
.compor-campo-real::placeholder { color: var(--texto-fraco); }
.compor-baixo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 14px 10px; }
.compor-marcas { display: flex; gap: 6px; flex: 1 1 auto; flex-wrap: wrap; }
.filtro.pequeno { padding: 6px 12px; font-size: 13px; }
.compor-foto { display: flex; align-items: center; gap: 6px; color: var(--texto-suave);
  font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 8px; min-height: 44px; }
.compor-foto .ic { width: 19px; height: 19px; }
.compor-baixo .botao.mini { margin: 0; }
.compor-dica { padding: 0 14px 10px; font-size: 12.5px; }
.compor-caixa .msg { padding: 0 14px 8px; }
.compor-previa { padding: 0 14px 10px; display: flex; align-items: flex-start; gap: 10px; }
.compor-previa img { max-width: 160px; max-height: 120px; border-radius: 10px; object-fit: cover; }
/* selo de estado: publicação fora do ar NUNCA some sem explicação */
.post-selo { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  border-radius: 10px; padding: 7px 10px; margin-bottom: 10px; }
.post-selo .ic { width: 15px; height: 15px; }
.post-selo.espera { background: var(--superficie-2); color: var(--atencao); }
.post-selo.recusado { background: var(--superficie-2); color: var(--texto-fraco); }
.post.fora-do-ar { border-color: var(--linha); }
.post-marca.util { color: var(--acao-viva); background: var(--acao-fundo); display: inline-flex;
  align-items: center; gap: 4px; }
.post-marca.util .ic { width: 13px; height: 13px; }
.post-acao { background: none; border: none; font-family: inherit; cursor: pointer; min-height: 44px; }
.post-acao.ativa { color: var(--acao-viva); }
.post-acao.ativa .ic { fill: var(--acao-fundo); }
.post-acoes { flex-wrap: wrap; gap: 4px 18px; }
.post-imagem-real { width: 100%; border-radius: 12px; margin-top: 12px; display: block; }
.botao.largo { width: 100%; margin-top: 14px; }
/* respostas: recuadas, com avatar menor — a conversa fica visivelmente abaixo do post */
.resposta { display: flex; gap: 10px; background: var(--superficie); border-radius: 14px;
  padding: 12px 14px; margin-top: 10px; }
.resposta.util { border: 1px solid var(--acao-fundo); }
.resposta-corpo { flex: 1 1 auto; min-width: 0; }
.resposta-acoes { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.avatar-letra.mini, .avatar-foto.mini { flex: 0 0 32px; width: 32px; height: 32px; font-size: 14px; }
/* painel de moderação: cada item com as ações à mão, pra resolver no celular */
.mod-item { background: var(--superficie); border-radius: 14px; padding: 14px; margin-top: 10px; }
.mod-quem { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; color: var(--texto); }
.mod-acoes { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.mod-acoes .botao.mini { margin: 0; }
.mod-item .post-imagem-real { max-height: 320px; object-fit: contain; background: var(--fundo); }
.avatar-letra { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 999px;
  background: linear-gradient(140deg, var(--acao), var(--acao-viva)); color: var(--sobre-acao);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 17px; }
.filtros-com { display: flex; gap: 8px; overflow-x: auto; margin: 16px 0 4px;
  padding-bottom: 4px; scrollbar-width: none; }
.filtros-com::-webkit-scrollbar { display: none; }
.filtro { flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: var(--superficie); color: var(--texto-suave); white-space: nowrap; }
.filtro.ativo { background: var(--acao); color: var(--sobre-acao); }

.post { background: var(--superficie); border-radius: 16px; padding: 16px; margin-top: 12px;
  border: 1px solid transparent; }
.post.fixado { border-color: var(--acao-fundo); }
.post-fixado { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--acao-viva); margin-bottom: 10px; }
.post-fixado .ic { width: 14px; height: 14px; }
.post-topo { display: flex; align-items: center; gap: 12px; }
.post-quem { flex: 1 1 auto; min-width: 0; }
.post-nome { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--texto); }
.post-papel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--acao-viva); background: var(--acao-fundo); padding: 2px 8px; border-radius: 999px; }
.post-quando { font-family: var(--mono); font-size: 12px; color: var(--texto-fraco); margin-top: 1px; }
.post-marca { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--texto-suave);
  background: var(--superficie-2); padding: 4px 10px; border-radius: 999px; }
.post-texto { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--texto); }
.post-acoes { display: flex; gap: 20px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linha); }
.post-acao { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 13px;
  color: var(--texto-fraco); }
.post-acao .ic { width: 17px; height: 17px; }

/* ---- barra de abas: carvão, não o azul herdado do APO ---- */
.abas { background: rgba(11,10,9,.94); }

/* ---- divisória entre blocos de módulo, como nas telas que o Roger mandou ---- */
.modulo-bloco + .modulo-bloco { border-top: 1px solid var(--linha); padding-top: 4px; }

/* ==================================================================
   NAVEGAÇÃO DESKTOP (≥900px): a MESMA #barra-abas vira top nav de 64px.
   Tab bar de celular pregada num desktop de 1440 lia como protótipo — e os
   cards passavam por baixo dela. O elemento e os IDs não mudam (o app.js lê
   `data-tela`); só a posição e a forma. Chassi da referência FDZ (09/08).
   ================================================================== */
@media (min-width: 900px) {
  .abas { top: 0; bottom: auto; height: 64px; align-items: stretch;
    justify-content: flex-end; gap: 4px; padding: 0 32px;
    border-top: none; border-bottom: 1px solid var(--linha);
    background: rgba(11,10,9,.88); backdrop-filter: blur(14px); }
  /* wordmark à esquerda — o mesmo espacejado do login */
  .abas::before { content: "C H V"; margin-right: auto; align-self: center;
    font-family: var(--display); font-weight: 700; font-size: 21px;
    letter-spacing: 8px; text-indent: 8px; color: var(--texto); }
  .aba { flex: 0 0 auto; flex-direction: row; gap: 8px; padding: 0 16px;
    min-height: 0; font-size: 14.5px; font-weight: 600; }
  .aba .ic { width: 20px; height: 20px; }
  .aba.ativa .ic { transform: none; }
  .aba::after { top: auto; bottom: 0; }
  /* o conteúdo desce pra não nascer embaixo da nav; o rodapé respira sem tab bar */
  .tela { padding-top: 86px; padding-bottom: 60px; }
  .tela-hero { padding-top: 0; }         /* o hero do curso passa por baixo da nav translúcida */
  .tela-aula { padding-top: 86px; }
  .tela-cheia, .tela-cheia.ativa { padding-top: 24px; }  /* entrada não tem nav */
  .voltar-flutua { top: 80px; }
  .toast { bottom: 40px; }
}

/* ==================================================================
   LIQUID GLASS — só no cartão de acesso (skill liquid-glass)
   Lei da skill: acento, não tema. UMA zona de vidro no app inteiro, e ela fica
   sobre a parede de capas, que é onde há detalhe pra refratar. O tint é o teal
   da marca: o vidro refrata a cor, não a substitui.
   ================================================================== */
:root {
  --lg-tint: 201,162,39;         /* a brasa da marca através do vidro */
  --lg-tint-op: .07;
  --lg-blur: 14px;
  --lg-sat: 1.45;
  --lg-border: rgba(255,255,255,.16);
  --lg-highlight: rgba(255,255,255,.42);
}

.tela-cheia .cartao {
  position: relative;
  background: rgba(var(--lg-tint), var(--lg-tint-op));
  border: 1px solid var(--lg-border);
  box-shadow:
    inset 0 1px 1px var(--lg-highlight),
    inset 0 -1px 1px rgba(255,255,255,.10),
    inset 0 0 26px rgba(255,255,255,.06),
    0 24px 60px rgba(0,0,0,.55);
  isolation: isolate;
}
/* blur: praticamente todo browser moderno */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tela-cheia .cartao {
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) url(#lg-lente);
  }
}
/* aberração cromática: o fio vermelho/azul da borda que dá o ar de lente */
.tela-cheia .cartao::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 1.5px 0 2px rgba(255,0,80,.35), inset -1.5px 0 2px rgba(0,180,255,.35);
  mix-blend-mode: screen; opacity: .5;
}
/* o filete de acento no topo continua por cima de tudo */
.tela-cheia .cartao::before { z-index: 2; }

/* ==================================================================
   VITRINE em 16:9 — o formato das telas de referência do Roger.
   O pôster 2:3 herdado do APO virava monograma gigante sobre cor chapada;
   com a capa real do vídeo, 16:9 é o enquadramento certo.
   ================================================================== */
.poster { flex: 0 0 268px; }
.poster .arte { width: 268px; height: auto; aspect-ratio: 16/9; border-radius: 12px; }
.poster .arte .mono { font-size: 40px; }
.poster .nome { font-size: 15px; font-weight: 600; margin-top: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.poster .preco { font-family: var(--mono); }
/* bloqueado: capa DESFOCADA + cadeado no meio — o tratamento da referência mobile
   do FDZ: comunica "existe e é pago" sem berrar o preço */
.poster.trancado .arte img { filter: blur(3px) brightness(.42) saturate(.6); }
.poster.trancado .cadeado-badge { top: 50%; left: 50%; right: auto;
  transform: translate(-50%, -50%); width: 46px; height: 46px;
  background: rgba(11,10,9,.72); backdrop-filter: blur(3px); }
.poster.trancado .cadeado-badge .ic { width: 22px; height: 22px; }
@media (max-width: 460px) {
  .poster { flex: 0 0 76%; max-width: 300px; }
  .poster .arte { width: 100%; }
}

/* ==================================================================
   TELA DE AULA — título e ação na MESMA linha (referência do Roger)
   ================================================================== */
.aula-cabeca { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  margin: 12px 0 4px; }
.aula-cabeca .lado-txt { flex: 1 1 260px; min-width: 0; }
.aula-cabeca .botao { flex: 0 0 auto; width: auto; margin-top: 0; padding: 14px 22px; }
@media (max-width: 560px) { .aula-cabeca .botao { width: 100%; } }
/* pill do módulo, como na referência */
.pill-modulo { display: inline-block; font-size: 12px; font-weight: 600; color: var(--acao-viva);
  background: var(--acao-fundo); padding: 5px 12px; border-radius: 999px; margin-top: 10px; }

/* ==================================================================
   SEÇÕES EMPILHADAS + FILEIRA QUE PASSA PRO LADO
   O padrão da referência (Netflix / Filosofia do Zero) e o que o Roger pediu:
   cada curso (na home) e cada módulo (dentro do curso) é uma SEÇÃO empilhada;
   o conteúdo dela ROLA DE LADO. Nada de itens em grade lado a lado.
   ================================================================== */
.secao-curso { margin-bottom: 26px; }
.secao-curso + .secao-curso { border-top: 1px solid var(--linha); padding-top: 4px; }

/* a fileira sangra até a borda da tela: o card seguinte "espia" e conta que rola */
.fileira { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity;
  margin: 0 -16px; padding: 4px 16px 10px; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; }
.fileira::-webkit-scrollbar { height: 0; }
.fileira > * { scroll-snap-align: start; }
@media (min-width: 720px) {
  .fileira { margin: 0 -28px; padding: 4px 28px 12px; }
  /* no desktop a barra aparece ao passar o mouse: sem ela, ninguém descobre que rola */
  .fileira { scrollbar-width: thin; scrollbar-color: var(--superficie-3) transparent; }
  .fileira::-webkit-scrollbar { height: 8px; }
  .fileira::-webkit-scrollbar-thumb { background: var(--superficie-3); border-radius: 4px; }
  .fileira::-webkit-scrollbar-track { background: transparent; }
}

/* card de aula dentro da fileira: largura fixa, nunca esticado */
.fileira .aula-card { flex: 0 0 232px; }
@media (max-width: 460px) { .fileira .aula-card { flex: 0 0 76%; max-width: 280px; } }

/* card de módulo (na home) — mesma família do card de aula */
.modulo-card { flex: 0 0 232px; background: var(--superficie); border-radius: var(--raio-p);
  overflow: hidden; border: 1px solid transparent; padding: 0; cursor: pointer;
  display: block; text-align: left; font-family: inherit; color: inherit; }
.modulo-card:hover { border-color: var(--linha); }
.modulo-card:focus-visible { outline: 2px solid var(--acao-viva); outline-offset: 2px; }
.modulo-card .capa { position: relative; display: block; aspect-ratio: 16/9;
  background: var(--superficie-2); color: var(--texto-fraco); }
.modulo-card .capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modulo-card .feito { position: absolute; right: 8px; top: 8px; width: 26px; height: 26px;
  border-radius: 999px; background: var(--acao); color: var(--sobre-acao);
  display: flex; align-items: center; justify-content: center; }
.modulo-card .feito .ic { width: 16px; height: 16px; }
.modulo-card .retomar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(0,0,0,.5); }
.modulo-card .retomar > i { display: block; height: 100%; background: var(--acao-viva); }
.modulo-card .txt { display: block; padding: 10px 12px 13px; }
/* título de card em Inter: a serifada só funciona de 20px pra cima — em miniatura
   ela perde o desenho (regra de legibilidade 50+, 09/08) */
.modulo-card .nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-family: inherit; font-weight: 700; font-size: 15px;
  line-height: 1.3; color: var(--texto); }
.modulo-card .meta { display: block; font-family: var(--mono); font-size: 12px;
  color: var(--texto-fraco); margin-top: 5px; }
.modulo-card.completo .meta { color: var(--acao-viva); }
@media (max-width: 460px) { .modulo-card { flex: 0 0 76%; max-width: 280px; } }

/* o "Ver tudo ›" fica no fim do cabeçalho da seção */
.secao-cab { flex-wrap: wrap; }
.secao-cab .ver-tudo { margin-left: auto; }

/* ==================================================================
   COMUNIDADE — clean, com foto de perfil, imagem no post e busca
   ================================================================== */
.busca-com { margin: 12px 0 4px; }
.busca-com input { min-height: 54px; font-size: 16px; padding: 12px 18px 12px 54px; }
.busca-com .lupa { left: 18px; width: 22px; height: 22px; }

.avatar-foto { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 999px;
  object-fit: cover; display: block; }
.compor { gap: 12px; }
.compor-foto { flex: 0 0 auto; display: flex; align-items: center; color: var(--acao-viva); }
.compor-foto .ic { width: 22px; height: 22px; }

/* área de imagem da publicação — na maquete é um lugar marcado, não uma foto falsa */
.post-imagem { margin-top: 12px; aspect-ratio: 16/9; border-radius: 12px;
  background: var(--superficie-2); border: 1px dashed var(--linha);
  display: flex; align-items: center; justify-content: center; }
.post-imagem span { font-size: 13px; color: var(--texto-fraco); }

/* ações no rodapé do post: botão largo, do jeito que se espera num feed */
.post-acoes { justify-content: space-around; gap: 8px; }
.post-acao { flex: 1 1 0; justify-content: center; padding: 9px 8px; border-radius: 10px;
  background: none; border: none; cursor: pointer; font-family: inherit; font-size: 14px;
  color: var(--texto-suave); min-height: 44px; }
.post-acao:hover { background: var(--superficie-2); color: var(--texto); }
.post-acao b { font-family: var(--mono); font-weight: 500; color: var(--texto-fraco); }
.post-acao span { font-family: inherit; }
@media (max-width: 380px) { .post-acao span { display: none; } }

/* No desktop o feed é uma coluna de leitura — mas CENTRALIZADA. Só `max-width`
   deixava a coluna colada à esquerda dentro do container de 1180px, e a tela
   parecia partida ao meio com metade vazia à direita. */
@media (min-width: 900px) {
  #comunidade-conteudo { max-width: 640px; margin-left: auto; margin-right: auto; }
}

/* estante de medalhas dentro do bloco expansível */
#bloco-medalhas .estante { padding: 4px 14px 16px; }

/* ==================================================================
   MOVIMENTO — de verdade desta vez.
   O que eu tinha era um fade de entrada e nada mais: sem hover, sem troca de
   aba, sem abertura. Aqui vai o conjunto, com nomes de keyframe próprios
   (`chv-*`) porque `sobe` já existia no toast e um nome repetido sobrescreve
   o outro em silêncio — o toast tinha parado de centralizar por isso.
   ================================================================== */
@keyframes chv-sobe   { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
@keyframes chv-entra  { from { opacity: 0; transform: translateY(10px) scale(.995) } to { opacity: 1; transform: none } }
@keyframes chv-gira   { to { transform: rotate(360deg) } }
@keyframes chv-pulso  { 0%,100% { transform: scale(1) } 50% { transform: scale(1.12) } }
@keyframes chv-brilho { from { background-position: 0% 50% } to { background-position: 200% 50% } }
@keyframes chv-varre  { from { transform: translateX(-120%) } to { transform: translateX(220%) } }
@keyframes chv-cintila{ 0%,100% { opacity: .55 } 50% { opacity: 1 } }

/* ---- ABERTURA: a moeda é lançada, gira e para DE FRENTE — e é isso que abre o app ----
   4 voltas (1440deg = múltiplo de 360) para que o repouso seja a face da frente, não um
   ângulo qualquer. O easing desacelera até parar; o `both` segura o estado final, senão
   o último frame volta ao 0 e a moeda "pisca". Quem fecha a splash é o animationend
   do chv-flip no app.js — o relógio ali é só rede de segurança. */
@keyframes chv-flip {
  from { transform: rotateY(0deg) scale(.82); }
  to   { transform: rotateY(1440deg) scale(1); }
}
@keyframes chv-lance {   /* o arco do lançamento: sobe e assenta */
  0%   { transform: translateY(26px); }
  38%  { transform: translateY(-14px); }
  100% { transform: translateY(0); }
}
.splash-moeda-giro { animation: chv-flip 1.9s cubic-bezier(.16,.72,.2,1) both; }
.splash-moeda { animation: chv-lance 1.9s cubic-bezier(.16,.72,.2,1) both; }
.splash-marca { animation: chv-sobe .7s cubic-bezier(.22,.61,.36,1) .15s both; }
.splash-mote  { animation: chv-sobe .7s cubic-bezier(.22,.61,.36,1) .3s both; }
.splash::before { animation: chv-cintila 4s ease-in-out infinite; }

/* ---- TROCA DE TELA: cada tela que vira ativa entra, não pisca ---- */
.tela.ativa { animation: chv-entra .32s cubic-bezier(.22,.61,.36,1) backwards; }
.tela-cheia.ativa { animation: none; }   /* a entrada tem coreografia própria */

/* ---- ABAS: indicador que corre por baixo + ícone que responde ao toque ---- */
.aba { position: relative; transition: color .2s ease; }
.aba .ic { transition: transform .28s cubic-bezier(.34,1.56,.64,1); }
.aba.ativa .ic { transform: translateY(-2px) scale(1.12); }
.aba::after { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--acao-viva), transparent);
  transform: translateX(-50%); transition: width .3s cubic-bezier(.22,.61,.36,1); }
.aba.ativa::after { width: 62%; }
.aba:active .ic { transform: scale(.9); }

/* ---- CARDS: hover com borda que acende, play que surge e título que vira brasa ---- */
.aula-card, .modulo-card, .poster {
  transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease, border-color .22s ease;
}
.aula-card:hover, .modulo-card:hover, .poster:hover {
  transform: translateY(-4px);
  border-color: var(--acao);
  box-shadow: 0 12px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(201,162,39,.32);
}
.aula-card:hover .nm, .modulo-card:hover .nm, .poster:hover .nome { color: var(--acao-viva); }
.aula-card .nm, .modulo-card .nm, .poster .nome { transition: color .2s ease; }
/* a capa vive com 7% de zoom: (a) corta a moldura verde desenhada na arte das
   thumbs do canal — cor de fora da paleta — e (b) dá de onde crescer no hover */
.aula-card .capa img, .modulo-card .capa img, .poster .arte img, .a-seguir .mini img {
  transform: scale(1.14); transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.aula-card:hover .capa img, .modulo-card:hover .capa img, .poster:hover .arte img { transform: scale(1.2); }

/* botão de play que aparece no centro da capa (só no hover, só onde há vídeo) */
.aula-card .capa::after, .modulo-card .capa::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 52px; height: 52px;
  margin: -26px 0 0 -26px; border-radius: 999px; pointer-events: none;
  background: var(--acao) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23140D08'%3E%3Cpath d='M8 5.2v13.6a.7.7 0 0 0 1.05.6l11-6.8a.7.7 0 0 0 0-1.2l-11-6.8A.7.7 0 0 0 8 5.2z'/%3E%3C/svg%3E") center/22px no-repeat;
  opacity: 0; transform: scale(.6);
  transition: opacity .22s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
.aula-card:hover .capa::after, .modulo-card:hover .capa::after { opacity: 1; transform: scale(1); }
/* card sem capa não ganha play: prometer vídeo onde não tem é mentira de interface */
.aula-card .capa:not(:has(img))::after, .modulo-card .capa:not(:has(img))::after { content: none; }

/* em tela de toque não existe hover: o estado "aceso" grudava no card depois do
   toque (visto em produção 09/08 — card inteiro laranja) e virava ruído */
@media (hover: none) {
  .aula-card:hover, .modulo-card:hover, .poster:hover {
    transform: none; border-color: transparent; box-shadow: none; }
  .aula-card:hover .nm, .modulo-card:hover .nm, .poster:hover .nome { color: var(--texto); }
  .aula-card:hover .capa img, .modulo-card:hover .capa img, .poster:hover .arte img { transform: scale(1.14); }
  .aula-card:hover .capa::after, .modulo-card:hover .capa::after { opacity: 0; }
}

/* ---- FILETE DA SEÇÃO: a brasa corre devagar dentro dele ---- */
.secao-cab::before {
  background: linear-gradient(180deg, var(--acao-viva), var(--acao), var(--acao-viva));
  background-size: 100% 200%;
  animation: chv-brilho 5s linear infinite alternate;
}

/* ---- BOTÃO: resposta simples, sem reflexo. O "brilho que atravessa" saiu:
   o ::after sem `left` ficava na posição estática (depois do texto) e o
   translateX(-120%) não o tirava da tela — o botão abria com uma mancha de
   gradiente dentro (visto em produção 09/08). Gradiente em botão morre. ---- */
.botao:not(.fantasma):hover { filter: brightness(1.08); }
.botao { transition: filter .18s ease, transform .12s ease; }

/* ---- CHECK do progresso: a marca "estala" ao ser ligada ---- */
.prog-linha-aula .check { transition: background .18s ease, border-color .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1); }
.prog-linha-aula.feita .check { animation: chv-pulso .34s cubic-bezier(.34,1.56,.64,1); }
.prog-linha-aula { transition: opacity .2s ease; }

/* ---- ACORDEÃO: a seta gira e o corpo abre ---- */
.bloco-seta { transition: transform .26s cubic-bezier(.22,.61,.36,1); }
.bloco.aberto .bloco-corpo { animation: chv-entra .28s ease backwards; }

/* ---- ESQUELETO: o brilho anda enquanto carrega ---- */
.skeleton {
  background: linear-gradient(90deg, var(--superficie) 25%, var(--superficie-2) 37%, var(--superficie) 63%);
  background-size: 400% 100%;
  animation: chv-brilho 1.4s linear infinite;
}

/* ---- PARADE de capas do login: respira devagar ---- */
.parede.pronta { animation: chv-cintila 9s ease-in-out infinite; }

/* ---- FILTROS da comunidade e pílulas: resposta ao toque ---- */
.filtro, .post-acao { transition: background .18s ease, color .18s ease, transform .12s ease; }
.filtro:active, .post-acao:active { transform: scale(.95); }

/* ⛔ quem pede menos movimento não recebe nenhum.
   Repete os seletores e vem depois: vence por ordem de cascata, sem marreta. */
@media (prefers-reduced-motion: reduce) {
  .splash-moeda, .splash-moeda-giro, .splash-marca, .splash-mote, .splash::before,
  .tela.ativa, .bloco.aberto .bloco-corpo, .prog-linha-aula.feita .check,
  .skeleton, .parede.pronta, .secao-cab::before, .botao:hover::after { animation: none; }
  .aula-card, .modulo-card, .poster, .aba, .aba .ic, .bloco-seta,
  .aula-card .capa img, .modulo-card .capa img, .poster .arte img,
  .filtro, .post-acao, .botao { transition: none; }
  .aula-card:hover, .modulo-card:hover, .poster:hover { transform: none; }
  /* o zoom de 7% fica (é corte da moldura, não movimento) — só o crescer do hover sai */
  .aula-card:hover .capa img, .modulo-card:hover .capa img, .poster:hover .arte img { transform: scale(1.14); }
  .aula-card .capa::after, .modulo-card .capa::after { transition: none; }
}

/* ---- CASCATA: os itens da fileira entram em sequência curta ----
   6 passos e para. Numa lista de 135 aulas, escalonar tudo faria o fim esperar
   segundos pra aparecer — a cascata é tempero, não fila. */
.fileira > *, .grade-aulas > * { animation: chv-sobe .38s cubic-bezier(.22,.61,.36,1) backwards; }
.fileira > :nth-child(1), .grade-aulas > :nth-child(1) { animation-delay: .02s }
.fileira > :nth-child(2), .grade-aulas > :nth-child(2) { animation-delay: .06s }
.fileira > :nth-child(3), .grade-aulas > :nth-child(3) { animation-delay: .10s }
.fileira > :nth-child(4), .grade-aulas > :nth-child(4) { animation-delay: .14s }
.fileira > :nth-child(5), .grade-aulas > :nth-child(5) { animation-delay: .18s }
.fileira > :nth-child(n+6), .grade-aulas > :nth-child(n+6) { animation-delay: .20s }
/* a seção inteira também entra, um pouco antes dos cards de dentro */
.secao-curso { animation: chv-entra .4s cubic-bezier(.22,.61,.36,1) backwards; }
.secao-curso:nth-of-type(2) { animation-delay: .05s }
.secao-curso:nth-of-type(3) { animation-delay: .10s }
.secao-curso:nth-of-type(n+4) { animation-delay: .14s }
.post { animation: chv-sobe .4s cubic-bezier(.22,.61,.36,1) backwards; }
.post:nth-child(n+2) { animation-delay: .06s }
.post:nth-child(n+4) { animation-delay: .12s }
/* linhas do checklist entram de leve quando a lista troca */
.bloco.aberto .prog-linha-aula { animation: chv-entra .26s ease backwards; }

@media (prefers-reduced-motion: reduce) {
  .fileira > *, .grade-aulas > *, .secao-curso, .post,
  .bloco.aberto .prog-linha-aula { animation: none; }
  .fileira > :nth-child(1), .fileira > :nth-child(2), .fileira > :nth-child(3),
  .fileira > :nth-child(4), .fileira > :nth-child(5), .fileira > :nth-child(n+6),
  .grade-aulas > :nth-child(1), .grade-aulas > :nth-child(2), .grade-aulas > :nth-child(3),
  .grade-aulas > :nth-child(4), .grade-aulas > :nth-child(5), .grade-aulas > :nth-child(n+6),
  .secao-curso:nth-of-type(2), .secao-curso:nth-of-type(3), .secao-curso:nth-of-type(n+4),
  .post:nth-child(n+2), .post:nth-child(n+4) { animation-delay: 0s; }
}

/* ══════════════════════════════════════════════════════════════════
   A FITA — o pedido do Roger (09/08): uma fita de degradê que dança ao redor do
   cartão de acesso e do campo selecionado. É um `conic-gradient` girando por trás,
   recortado em moldura pelo `mask` (a borda vira a única parte visível).
   Sem @property (Safari/Firefox antigos ignoram): giro pelo `transform` de um
   pseudo-elemento gigante, que roda em qualquer browser.
   ══════════════════════════════════════════════════════════════════ */
@keyframes chv-fita { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ⚠️ overflow + pointer-events são OBRIGATÓRIOS: o círculo da fita tem 180-260% da
   largura e, sem isso, ele vaza da caixa e ROUBA O CLIQUE do que estiver embaixo
   (o botão Entrar ficou inclicável até isto entrar — gotcha 5 do doc de front). */
.fita-viva { position: relative; isolation: isolate; overflow: hidden; }
.fita-viva::before, .fita-viva::after, .campo-fita::before, .campo-fita::after { pointer-events: none; }
.fita-viva::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 180%; aspect-ratio: 1; z-index: -1; border-radius: 50%;
  background: conic-gradient(from 0deg, #7d6415, #C9A227, #F2DD9A, #E8C56A, #8a6f18, #C9A227, #F2DD9A, #7d6415);
  transform: translate(-50%, -50%);
  animation: chv-fita 7s linear infinite;
}
/* o miolo cobre o centro: sobra só o fio de 2px na borda */
.fita-viva::after {
  content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: inherit;
  background: var(--fita-miolo, rgba(23,18,14,.94));
}
.tela-cheia .cartao.fita-viva { border: none; padding: 26px 22px 22px; }
.tela-cheia .cartao.fita-viva::after { background: rgba(20,16,12,.93); }

/* campo em foco ganha a mesma fita (mais fina e mais rápida) */
.campo-fita { position: relative; border-radius: 12px; isolation: isolate; overflow: hidden; }
.campo-fita::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 260%; aspect-ratio: 1;
  z-index: -1; border-radius: 50%; opacity: 0; transition: opacity .25s ease;
  background: conic-gradient(from 0deg, #6b5512, #C9A227, #F7E7B0, #C9A227, #6b5512);
  transform: translate(-50%, -50%);
  animation: chv-fita 4s linear infinite;
}
.campo-fita::after {
  content: ""; position: absolute; inset: 1.5px; z-index: -1; border-radius: 10px;
  background: var(--fundo);
}
.campo-fita:focus-within::before { opacity: 1; }
.campo-fita input { position: relative; z-index: 1; background: transparent; border-color: transparent; }
.campo-fita:focus-within input { box-shadow: none; border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .fita-viva::before, .campo-fita::before { animation: none; }
}

/* ══════════ BOAS-VINDAS em fundo neutro (o banner com lettering saiu — 09/08) ══════════ */
.hero-dia { min-height: 0; background: var(--superficie); border: 1px solid var(--linha); }
.hero-dia .hd-scrim { background:
  radial-gradient(70% 120% at 12% 0%, rgba(201,162,39,.13), transparent 62%); }
.hero-dia .hd-txt { padding: 30px 30px 34px; }
@media (max-width: 719px) {
  .hero-dia .hd-txt { padding: 24px 18px 26px; }
  .hero-dia .hd-scrim { background: radial-gradient(90% 120% at 50% 0%, rgba(201,162,39,.12), transparent 66%); }
}
.hero-dia .hd-jornada { background: rgba(237,230,217,.10); }

/* alternador de disposição: Módulos | Aulas */
.seg-disp { display: inline-flex; gap: 4px; margin: 22px 0 2px; padding: 4px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; }
.seg-disp button { display: inline-flex; align-items: center; gap: 7px; border: none;
  background: none; color: var(--texto-suave); font-family: inherit; font-size: 14.5px;
  font-weight: 600; padding: 9px 18px; min-height: 44px; border-radius: 9px; cursor: pointer;
  transition: background .15s ease, color .15s ease; }
.seg-disp button .ic { width: 1.05em; height: 1.05em; }
.seg-disp button:hover { color: var(--texto); background: var(--superficie-2); }
.seg-disp button.sel { background: var(--acao); color: var(--sobre-acao); }

/* mais respiro entre as aulas (pedido 09/08) */
.fileira { gap: 20px; padding-bottom: 14px; }
.grade-aulas { gap: 22px; }
.secao-curso { margin-bottom: 34px; }
@media (max-width: 460px) { .fileira { gap: 14px; } .grade-aulas { gap: 14px; } }

/* ══════════ NAV: busca e chip do usuário (só no desktop) ══════════ */
.nav-busca, .chip-usuario { display: none; }
@media (min-width: 900px) {
  .nav-busca { display: flex; align-items: center; gap: 8px; margin-left: 28px;
    background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px;
    padding: 0 12px; height: 38px; align-self: center; width: 260px; }
  .nav-busca .ic { width: 17px; height: 17px; color: var(--texto-fraco); flex: 0 0 auto; }
  .nav-busca input { border: none; background: none; padding: 0; font-size: 14px;
    color: var(--texto); min-height: 0; height: 36px; }
  .nav-busca input:focus { outline: none; box-shadow: none; }
  .nav-busca:focus-within { border-color: var(--acao); }
  .chip-usuario { display: inline-flex; align-items: center; gap: 8px; align-self: center;
    margin-left: 10px; background: var(--superficie); border: 1px solid var(--linha);
    border-radius: 999px; padding: 7px 16px; color: var(--texto); font-family: inherit;
    font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .15s ease; }
  .chip-usuario:hover { border-color: var(--acao); }
  /* a busca empurra as abas pro centro, como na referência */
  .abas::before { margin-right: 0; }
  .abas { justify-content: flex-start; }
  .aba[data-tela="inicio"] { margin-left: auto; }
  .aba[data-tela="perfil"] { margin-right: 0; }
}

/* marca HORIZONTAL: medalhão + wordmark ao lado (arranjo da referência, 09/08) */
.acesso-topo { display: flex; align-items: center; justify-content: center; gap: 14px;
  text-align: left; margin-bottom: 20px; }
.acesso-topo .entrada-logo { width: 54px; margin: 0; flex: 0 0 auto; }
.acesso-topo .marca-txt .logo-marca { font-size: 30px; letter-spacing: 9px; text-indent: 9px; line-height: 1; }
.acesso-topo .marca-txt .mote { font-size: 11px; letter-spacing: .14em; margin-top: 5px; }

/* o miolo do cartão: carvão neutro (o degradê da fita por baixo puxava pro oliva) */
.tela-cheia .cartao.fita-viva::after { background: #100E0C; }
.tela-cheia .cartao.fita-viva { background: transparent; box-shadow: 0 24px 60px rgba(0,0,0,.6); }

/* "Lembrar de mim": caixa em ouro, não no azul do sistema */
.lembrar { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--texto-suave); margin: 0; min-height: 32px; }
.lembrar input { accent-color: var(--acao); width: 17px; height: 17px; cursor: pointer; }
.lembrar span { user-select: none; }
.link-inline.centro { display: block; margin: 12px auto 0; }

/* ══════════ TELA DO CURSO sem banner (09/08): cabeçalho em fundo neutro ══════════ */
.curso-cab { padding: 26px 16px 4px; max-width: var(--largura); margin: 0 auto; }
@media (min-width: 720px) { .curso-cab { padding: 34px 28px 6px; } }
.curso-titulo { font-size: clamp(30px, 4vw, 46px); font-weight: 600; line-height: 1.1;
  letter-spacing: -.015em; color: var(--texto); }
.curso-meta { font-family: var(--mono); font-size: 13px; color: var(--texto-suave); margin-top: 8px; }
/* sem imagem por baixo, o "voltar" deixa de flutuar: vira botão normal no topo.
   (só na tela do CURSO — a de VENDA mantém o banner, que ali é vitrine) */
#tela-curso { padding-top: 12px; }
#tela-curso .voltar-flutua { position: static; width: auto; height: auto; min-height: 44px;
  padding: 10px 14px; margin: 0 16px; border-radius: 10px; background: var(--superficie);
  backdrop-filter: none; justify-content: flex-start; gap: 6px; }
#tela-curso .voltar-flutua span { display: inline; font-size: 15px; }
@media (min-width: 720px) { #tela-curso .voltar-flutua { margin: 0 28px; } }
@media (min-width: 900px) { #tela-curso { padding-top: 78px; } }

/* "Meus dados": foto à esquerda, campos à direita */
@media (min-width: 720px) {
  .dados-2col { display: grid; grid-template-columns: 190px 1fr; gap: 24px; align-items: start; }
  .dados-2col h2 { grid-column: 1 / -1; }
  .dados-2col .avatar-area { margin: 0; text-align: center; }
  /* o "Trocar foto" é inline-block e cabia ao lado da foto na coluna estreita:
     forçar bloco pra ele ficar EMBAIXO e centralizado */
  .dados-2col .avatar-area .avatar-troca { display: block; width: 100%; margin-top: 10px; }
  .dados-2col .dados-campos label:first-child { margin-top: 0; }
}