/* Funnel Labs identity over the original member-area layout.
   Geometry, menu order, grids, spacing and responsive breakpoints remain in
   base.css and the original page styles. This file changes only visual skin. */
body { background:var(--surface-0);color:var(--ink-1); }
body::before { background:none; }
h1,h2,h3,.display,.section-title,.brand-word,.art-headline,.art-stats strong { font-weight:600; }
.brand-word small { color:var(--accent-text); }  /* 8,5px exige o laranja de texto: o --accent puro dá 3,68:1 no claro */
.site-header { background:var(--topbar-solid);border-color:var(--hair-2); }
@media (min-width:1024px) { .site-header { background:var(--topbar-bg); } }
.main-nav a { color:var(--ink-2); }.main-nav a:hover,.main-nav a.active { color:var(--accent-text); }
.avatar { background:var(--accent-soft);border-color:var(--hair-accent);color:var(--ink-1); }
.avatar.yellow { background:var(--btn-primary-gradient);color:var(--accent-ink); }
.btn { font-family:var(--font-body);font-weight:600;border-radius:var(--radius-control); }
.btn-primary { background:var(--btn-primary-gradient);color:var(--accent-ink);box-shadow:var(--shadow-btn-primary); }
.btn-primary:hover { box-shadow:var(--shadow-btn-primary-hover); }
.btn-ghost { background:var(--surface-3);border-color:var(--hair-3);color:var(--ink-1); }
.btn-ghost:hover { background:var(--surface-4);border-color:var(--hair-4); }
.card { background:var(--card-gradient);border-color:var(--hair-2);box-shadow:var(--elev-1); }
.field input,.field textarea,.field select,.search-box { background:var(--surface-3);border-color:var(--hair-3);color:var(--ink-1); }
.field input:focus,.field textarea:focus,.field select:focus { border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-quiet); }
.field input::placeholder,.field textarea::placeholder,.search-box input::placeholder { color:var(--ink-3); }
.empty-state { color:var(--ink-3);border-color:var(--hair-2); }
.empty-state strong { color:var(--ink-1); }
.toast,.modal,.modal-box,.dialog { background:var(--surface-2);border-color:var(--hair-3);color:var(--ink-1); }
.mobile-nav { background:var(--bottom-nav-solid);border-color:var(--hair-3); }
.mobile-nav a.active { color:var(--accent-text); }  /* rótulo de 10px sobre superfície clara pede o laranja de texto */
.hero-slide::before { background:radial-gradient(ellipse at 85% 25%,var(--accent-soft),transparent 65%),var(--card-gradient); }
.cover:not(.has-img),.card-lesson .thumb { background:radial-gradient(ellipse at 100% 0%,var(--accent-soft),transparent 80%),var(--card-gradient); }
.course-hero { background:radial-gradient(ellipse at 90% 10%,var(--accent-quiet),transparent 60%),var(--card-gradient); }
.s-item { color:var(--ink-2); }.s-item:hover { background:var(--surface-3);color:var(--ink-1); }
/* Ativo não perde identidade no hover: a cor de estado vem depois. */
.s-item.active,.s-item.active:hover { background:var(--accent-soft);color:var(--accent-text);box-shadow:inset 0 0 0 1px var(--hair-accent); }
.b-theme.ink,.b-theme.navy { background:radial-gradient(circle at 72% 18%,rgba(255,90,0,.26),transparent 58%),linear-gradient(160deg,#151210,#080707); }
.b-theme.yellow { background:var(--btn-primary-gradient); }
.b-theme.green,.b-theme.texture { background:repeating-linear-gradient(-45deg,transparent 0 8px,rgba(255,90,0,.22) 8px 12px),linear-gradient(160deg,#151210,#080707); }
/* Os nomes internos de tema continuam compatíveis com os banners existentes. */
.b-theme.navy { background: #080808 url("../img/premium/launch/hero-mentoria-small.webp") 80% center / cover; }
.b-theme.yellow { background: #080808 url("../img/premium/launch/hero-laboratorio-small.webp") 80% center / cover; }
.b-theme.green { background: #080808 url("../img/premium/launch/hero-copywriting-small.webp") 80% center / cover; }
#nb-themes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
#nb-themes .b-theme { width: 100%; height: 88px; position: relative; overflow: hidden; }
#nb-themes .b-theme span { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 4px 8px; background: linear-gradient(transparent, #000); color: var(--on-art); font: 500 10px var(--font-body); }
.abar i { background:var(--accent);opacity:.88; }.abar:last-child i { background:var(--accent);opacity:1; }
.fl-assistant-fab { background:var(--surface-2);border:1px solid var(--hair-accent-strong);box-shadow:var(--elev-3); }
.fl-assistant-fab img { object-fit:contain; }
.fl-assistant-panel { background:var(--surface-2);border-color:var(--hair-3);box-shadow:var(--elev-3); }
.fl-assistant-head { background:var(--card-gradient);border-color:var(--hair-2); }.fl-assistant-head img { background:var(--surface-3);border-color:var(--accent);object-fit:contain; }
.fl-assistant-head .who span { color:var(--ink-3); }
.fl-assistant-msg { white-space:pre-wrap;overflow-wrap:anywhere; }
.fl-assistant-msg.bot { background:var(--surface-3);color:var(--ink-1); }.fl-assistant-msg.me { background:var(--accent-soft);color:var(--ink-1);border-color:var(--hair-accent); }
.fl-assistant-sugs button { background:var(--surface-3);border-color:var(--hair-3);color:var(--ink-2); }
.fl-assistant-sugs button:hover { background:var(--accent);color:var(--accent-ink); }
.fl-assistant-input { background:var(--surface-1);border-color:var(--hair-2); }.fl-assistant-input button { background:var(--accent);color:var(--accent-ink); }
.login-form-col { background:linear-gradient(180deg,var(--surface-1),var(--surface-0)); }
/* A arte do login nao inverte: fundo de forja nos dois temas. */
.login-art { background:radial-gradient(ellipse at 85% 0%,rgba(255,90,0,.16),transparent 60%),#050505; color:var(--on-art); }
.login-art .art-sub,.login-art .art-mark,.login-art .art-stats span { color:var(--on-art-dim); }
.login-art .art-stats { border-color:rgba(253,253,253,.16); }
.login-art .art-headline em { color:#FF7A2E; }
.login-art::before { background-image:radial-gradient(rgba(253,253,253,.07) 1px,transparent 1px); }
.art-tape { background:linear-gradient(90deg,var(--accent-deep),var(--accent),var(--accent-hover)); }
.support-link { color:var(--accent-text);font-weight:600; }.support-link:hover { text-decoration:underline; }
#support-message { color:var(--ink-2); }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }*,*::before,*::after { animation:none!important;transition:none!important; }.reveal { opacity:1!important;transform:none!important; } }
/* A arte de cada destaque é um picture no home.js, carregado sob demanda.
   O véu mantém o contraste da tipografia nos dois temas. */
.hero-slide::before {
  background-image: var(--art-scrim);
  background-position: center right;
  background-size: cover;
  background-repeat: no-repeat;
}
/* No retrato a parte clara da arte ficava atrás do H1: o véu vira vertical. */
@media (max-width: 900px) {
  .hero-slide::before { background-image: var(--art-scrim-v); }
}
/* QF-V-15 — a miniatura espera a capa real (aplicada inline pelo lazy do
   app.js) sobre a matéria da marca, sem baixar imagem nenhuma: a arte do hero
   como fundo padrão custava ~19 KB e LCP no curso pelo celular. */
.card-lesson .thumb {
  background-image: radial-gradient(circle at 78% 12%, rgba(255, 90, 0, .22), transparent 55%),
                    linear-gradient(165deg, #151210 0%, #0A0908 60%, #060505 100%);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.card-lesson .thumb::before { background: none; }
.cover.has-img::before { background: none; }

/* Tema claro: a arte não inverte — vira objeto sobre papel. */
:root[data-theme="light"] .hero,
:root[data-theme="light"] .course-hero.has-banner,
:root[data-theme="light"] .v-banner {
  border-radius: var(--radius-surface);
  box-shadow: var(--elev-2), var(--art-inset);
  border-color: transparent;
}
:root[data-theme="light"] .hero { margin-inline: var(--s-7); overflow: hidden; }
:root[data-theme="light"] .v-banner { margin-inline: var(--s-7); }
:root[data-theme="light"] .course-hero.has-banner { margin: var(--s-4) var(--s-7); overflow: hidden; }
@media (max-width: 900px) {
  :root[data-theme="light"] .hero,
  :root[data-theme="light"] .v-banner { margin-inline: var(--s-4); }
  :root[data-theme="light"] .course-hero.has-banner { margin: var(--s-3) var(--s-4); }
}
/* Texto sobre arte permanece claro nos dois temas. */
.hero-slide, .hero-slide h2, .hero-slide .tag-mono,
.course-hero.has-banner, .course-hero.has-banner h1,
.cover-hover, .cover-caption, .cover-lock { color: var(--on-art); }
.hero-slide p,
.course-hero.has-banner .tagline, .course-hero.has-banner .crumbs,
.course-hero.has-banner .course-stats span,
.course-hero.has-banner .course-stats strong { color: var(--on-art-dim); }
.course-hero.has-banner .course-stats strong { color: var(--on-art); }
.course-hero.has-banner .course-stats { border-color: rgba(253,253,253,.16); }
.course-hero.has-banner .cpl-bar { background: rgba(253,253,253,.18); box-shadow: none; }
.course-hero.has-banner .crumbs a:hover { color: var(--accent-hover); }
.course-hero.has-banner .tag-status { background: rgba(255,90,0,.18); border-color: rgba(255,90,0,.42); color: #FFB183; }
.course-hero.has-banner .btn-ghost {
  background: rgba(253,253,253,.10);
  border-color: rgba(253,253,253,.28);
  color: var(--on-art);
}
.course-hero.has-banner .btn-ghost:hover { background: rgba(253,253,253,.18); }

/* Resultados no mesmo miolo da vitrine, sem deslocar o menu. */
.search-results-list{display:grid;gap:12px;margin:20px 0}
.search-result{display:flex;flex-direction:column;gap:6px;padding:20px;text-decoration:none;color:inherit}
.search-result:hover{border-color:var(--hair-accent)}
.search-result>span:last-child{font-size:13px;opacity:.7}
.quiz-editor{margin:20px 0;padding-top:18px;border-top:1px solid var(--hair-2)}
.quiz-question{padding:14px;margin:12px 0;border:1px solid var(--hair-2);border-radius:var(--radius-control)}
.quiz-question textarea{width:100%;box-sizing:border-box}
.community-replies{margin-top:14px;border-top:1px solid var(--hair-2);padding-top:12px}
.community-replies p{white-space:pre-wrap;overflow-wrap:anywhere}
.community-reply{margin:12px 0;padding:12px;border-radius:var(--radius-control);background:var(--surface-3)}
.community-replies textarea,.post-edit-text{width:100%;box-sizing:border-box;min-height:70px;background:var(--surface-3);color:inherit;border:1px solid var(--hair-3);border-radius:var(--radius-control);padding:10px}
.p-actions{flex-wrap:wrap}.post>p{white-space:pre-wrap;overflow-wrap:anywhere}
.p-act[aria-pressed=true]{color:var(--accent-text)}
.channel-manager{margin-bottom:18px;padding:18px}.channel-manager form{display:grid;gap:12px}
.channel-manager label{display:grid;gap:6px}.channel-manager input{background:var(--surface-3);color:inherit;border:1px solid var(--hair-3);border-radius:var(--radius-control);padding:8px;max-width:100%}

/* ---------------------------------------------------------------
   Tipografia por papel, independente da tag.
   Os agentes de HTML estão ajustando os níveis de heading para a
   hierarquia de acessibilidade; o estilo segue o PAPEL do texto, não o
   número do <h>. Regra-mãe: Playfair Display só a partir de 28px —
   abaixo disso a didone perde traço e parece frágil.
   --------------------------------------------------------------- */
.card-lesson .body :is(h2, h3, h4, h5) {
  font-family: var(--font-body);
  font-size: var(--t-card);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.005em;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(var(--t-card) * 1.35 * 2);
  text-wrap: initial;
}
.playlist-head :is(h2, h3, h4),
.notebook-head :is(h2, h3, h4),
.dl-head :is(h3, h4, h5),
.rail-card :is(h2, h3, h4),
.channel-manager :is(h2, h3),
.b-item .b-info strong {
  font-family: var(--font-body);
  font-size: var(--t-card);
  font-weight: 600;
  letter-spacing: -.005em;
}
.about-lesson > :is(h2, h3),
.comments > :is(h2, h3),
.quiz-head :is(h2, h3),
.alerts > :is(h2, h3),
.chart-card :is(h2, h3),
.chart-box :is(h2, h3),
.badges > :is(h2, h3),
.rank-card > :is(h2, h3),
.first-week-card > :is(h2, h3),
.inactive-list :is(h2, h3),
.form-card :is(h2, h3),
.live-session-card > :is(h2, h3),
.onboarding-answers > :is(h2, h3),
.about :is(h2, h3),
.module-head :is(h2, h3),
.post > :is(h2, h3) {
  font-family: var(--font-body);
  font-size: var(--t-section);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}
/* Nome do mentorado no cartão de status: grotesca firme, não serifa de 24px. */
.status-top h1, .status-top h2, .status-top h3 {
  font-family: var(--font-body); font-size: 22px; font-weight: 600; letter-spacing: -.015em;
}
/* Corpo de aula em leitura: hierarquia interna em grotesca. */
.lesson-article h1, .lesson-article h2, .lesson-article h3, .lesson-article h4 {
  font-family: var(--font-body); font-weight: 700; letter-spacing: -.01em;
}
.lesson-article h1 { font-size: 21px; }
.lesson-article h2 { font-size: 18.5px; }
.lesson-article h3 { font-size: 16.5px; }
.lesson-article h4 { font-size: 15px; }
/* Título de modal abaixo de 28px também é grotesca. */
.modal h2, .modal h3 { font-family: var(--font-body); font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
/* Destaque do título da aula dentro do h2 do hero: cor, não itálico — a
   Playfair itálica baixaria um peso a mais no elemento de LCP. */
.hero-focus { font-style: normal; font-weight: inherit; color: var(--accent-hover); }
.popup.is-welcome h3 { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 700; }