/* ===========================================================
   Estilo Vercel — nota do vault "Padrão de vídeo animado (estilo Vercel)"
   Camada final: redefine a paleta e a tipografia por cima do design original,
   para o site ficar com a mesma cara do vídeo de boas-vindas.
   Escuro é o padrão (js/theme.js põe data-theme="dark" no <html>);
   sem o atributo, vale a versão clara do mesmo estilo.
   =========================================================== */

/* ---------- Paleta ---------- */
:root {
  /* Modo claro: mesmo estilo, fundo branco */
  --cream-050: #FAFAFA;   /* fundo da página */
  --cream-100: #FFFFFF;   /* cabeçalho de card, campos */
  --line-200: #EAEAEA;
  --line-100: #F2F2F2;
  --line-100b: #EAEAEA;
  --ink-600: #171717;
  --ink-500: #666666;
  --ink-400: #707070;   /* #8F8F8F não passa de 3,2:1 em texto pequeno */

  /* Faixas escuras valem nos dois modos: preto, nunca azul-marinho */
  --navy-900: #000000;
  --navy-800: #000000;
  --navy-700: #0A0A0A;
  --navy-600: #111111;

  /* Azul só em 1 ou 2 detalhes por tela */
  --blue-700: #0F6CB5;    /* preenchimento de botão (branco sobre ele: 5,5:1) */
  --blue-500: #0F6CB5;    /* acento em texto sobre fundo claro (5,5:1) */
  --blue-200: #7CB8E6;    /* acento sobre preto */
  --blue-100: #BEE4FF;
  --blue-050: #EEF5FB;    /* selo claro (modo claro) */
  --blue-075: #D7E7F5;
}

:root[data-theme="dark"] {
  --d-bg: #000000;
  --d-tint: #0A0A0A;
  --d-card: #0A0A0A;
  --d-card-2: #111111;
  --d-line: #1C1C1C;
  --d-line-soft: #141414;
  --d-text: #EDEDED;
  --d-muted: #A1A1A1;
  --d-faint: #878787;   /* a nota usa #666 no vídeo; em texto pequeno de site ele não chega a 4,5:1 */

  --cream-050: #EDEDED;   /* vira cor de texto sobre as faixas pretas */
  --cream-100: #0F0F0F;
  --line-200: #1C1C1C;
  --line-100: #141414;
  --line-100b: #1C1C1C;
  --ink-600: #D4D4D4;
  --ink-500: #A1A1A1;
  --ink-400: #878787;
  --blue-050: #0D1B24;
  --blue-075: #1C2B36;
}

.drawing-section { border-top: 1px solid var(--line-200); scroll-margin-top:96px; }
.drawing-heading { display:flex; justify-content:space-between; align-items:center; gap:32px; margin-bottom:36px; }
.drawing-lead { max-width:610px; color:var(--ink-500); line-height:1.7; margin:20px 0 0; }
.drawing-badge { display:flex; align-items:center; gap:18px; padding:22px 26px; border:1px solid var(--line-200); border-radius:14px; flex-shrink:0; color:var(--ink-500); font-size:13px; line-height:1.6; }
.drawing-badge strong { font-size:56px; line-height:1; font-weight:500; color:var(--ink-600); letter-spacing:-3px; }
.drawing-controls { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.drawing-controls span { font-size:12px; color:var(--ink-400); margin-right:8px; font-variant-numeric:tabular-nums; }
.drawing-carousel { position:relative; max-width:940px; margin:0 auto; padding:0 60px; }
.drawing-arrow { position:absolute; top:calc((100% - 120px)/2); transform:translateY(-50%); z-index:2; width:46px; height:46px; border:1px solid var(--line-200); border-radius:50%; background:var(--cream-100); color:var(--ink-600); font-size:22px; cursor:pointer; }
.drawing-arrow-prev { left:0; }
.drawing-arrow-next { right:0; }
.drawing-arrow:disabled { opacity:.3; cursor:default; }
.drawing-arrow:focus-visible,.drawing-grid:focus-visible { outline:2px solid var(--blue-500); outline-offset:3px; }
.drawing-grid { display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
.drawing-grid::-webkit-scrollbar { display:none; }
.drawing-grid .drawing-card { flex:0 0 100%; scroll-snap-align:start; min-width:0; }
.drawing-card { margin:0; border:1px solid var(--line-200); border-radius:12px; overflow:hidden; background:var(--cream-100); }
.drawing-preview { display:block; position:relative; width:100%; padding:14px; border:0; border-bottom:1px solid var(--line-200); background:#f2f3f4; cursor:zoom-in; aspect-ratio:16/9; overflow:hidden; }
.drawing-preview img { display:block; width:100%; height:100%; object-fit:contain; transition:transform .25s ease; }
.drawing-preview:hover img { transform:scale(1.035); }
.drawing-preview:focus-visible { outline:3px solid var(--blue-500); outline-offset:-3px; }
.drawing-preview span { position:absolute; right:12px; bottom:12px; background:#171717; color:white; border-radius:6px; font-size:11px; padding:7px 10px; }
.drawing-card figcaption { padding:22px; }
.drawing-number { color:var(--ink-400); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.drawing-card h3 { color:var(--ink-600); font-size:19px; margin:9px 0; font-weight:500; }
.drawing-card p { margin:0; font-size:13px; line-height:1.65; color:var(--ink-500); }
.drawing-footer { display:flex; justify-content:space-between; align-items:center; gap:40px; margin-top:36px; }
.drawing-footer .btn { flex:0 0 auto; min-width:240px; padding:18px 30px; white-space:nowrap; justify-content:center; }
.drawing-footer p { color:var(--ink-400); font-size:13px; line-height:1.7; }
@media(max-width:600px) { .drawing-heading,.drawing-footer { flex-direction:column; align-items:flex-start; gap:20px; } .drawing-carousel { padding:0 36px; } .drawing-arrow { width:30px; height:38px; font-size:20px; top:74px; } .drawing-grid { gap:14px; } .drawing-preview { padding:5px; } .drawing-card figcaption { padding:18px; } .drawing-footer .btn { width:100%; min-width:0; text-align:center; } }
@media(prefers-reduced-motion:reduce) { .drawing-preview img { transition:none; } }

/* ---------- Tipografia ----------
   O CSS original fixa 'Sora' e 'IBM Plex Sans' em dezenas de regras de classe.
   Trocar a fonte numa camada por cima só é possível com !important. */
body, h1, h2, h3, h4, p, span, div, a, button, input, textarea, select,
li, ul, summary, details, figcaption, label, strong, b, em, small, th, td {
  font-family: 'Geist', system-ui, -apple-system, sans-serif !important;
}

/* Rótulos, números e "código" em mono */
.eyebrow, .terminal-body, .terminal-label, .prompt-box, .prompt-box *, .furn-prompt, .furn-prompt *,
.player-meta, .player-meta *, .ba-tag, .proj-badge, .bonus-tag, .promo-badge, .price-single,
.price-badge, .faq-group, .flow-step .n, .sidebar-module-num, .file-ext, .hero-video-tag,
.mod-num, .retomar-tag, .mod-vault b, .lesson-num, .furn-col-head, .furn-chips .chip {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace !important;
}

/* Títulos: peso normal e letras mais juntas — nunca negrito */
h1, .hero h1, .login-side-copy h1 { font-weight: 480; letter-spacing: -0.05em; }
h2, .section-title, .price-card h2, .login-card h2 { font-weight: 480; letter-spacing: -0.045em; }
h3, .lesson-h1, .painel-hello, .retomar-title, .mod-title, .sub-gallery-head h3,
.bonus-card h3, .support-card h3, .ba-cap .title, .proj-figcap .title {
  font-weight: 500; letter-spacing: -0.03em;
}
.hero-stats .num, .proof-stats .num, .price-new, .lightbox-cap {
  font-weight: 500; letter-spacing: -0.045em;
}
.btn, .btn-primary, .nav .btn-cta, .nav .btn-portal, .action-btn, .chip, .tab,
.retomar-cta, .publish-btn, .file-download, .login-submit {
  font-weight: 500; letter-spacing: -0.01em;
}
.eyebrow, .faq-group, .furn-col-head, .hero-video-tag, .proj-badge, .ba-tag, .bonus-tag,
.promo-badge, .price-badge, .price-single, .sidebar-module-num, .retomar-tag, .mod-num {
  font-weight: 500; letter-spacing: 0.08em;
}
.brand-word, .app-brand span { font-weight: 500; letter-spacing: -0.02em; }

/* ---------- Superfícies ---------- */
body { background: var(--cream-050); }
:root[data-theme="dark"] body, :root[data-theme="dark"] body.app-body { background: #000; }

/* Cards fixados em #fff no CSS original */
.benefit-card, .mod-card, .bonus-card, .faq-item, .file-row, .comment-box,
.login-card, .painel-bar .chip, .painel-busca input, .course-sidebar {
  background: var(--cream-100);
}
:root[data-theme="dark"] .benefit-card,
:root[data-theme="dark"] .mod-card,
:root[data-theme="dark"] .bonus-card,
:root[data-theme="dark"] .faq-item,
:root[data-theme="dark"] .file-row,
:root[data-theme="dark"] .comment-box,
:root[data-theme="dark"] .login-card,
:root[data-theme="dark"] .painel-bar .chip,
:root[data-theme="dark"] .painel-busca input { background: var(--d-card); }
:root[data-theme="dark"] .course-sidebar { background: #050505; }

/* Topo preto nos dois modos, como no vídeo */
.site-header { background: rgba(0,0,0,0.78); border-bottom: 1px solid var(--line-200); }
:root[data-theme="dark"] .site-header { border-bottom-color: var(--d-line); }
.app-header { border-bottom: 1px solid var(--line-200); }
:root[data-theme="dark"] .app-header { border-bottom-color: var(--d-line); }

/* ---------- Acabamento: menos sombra, menos raio, borda de 1px ---------- */
.benefit-card, .mod-card, .bonus-card, .faq-item, .login-card, .proj-figure,
.hero-video, .terminal, .ba-frame, .proj-frame, .mini .proj-frame, .retomar {
  border-radius: 10px;
}
.price-card, .support-card, .furn-col { border-radius: 12px; }
.terminal, .hero-video, .login-card, .price-card, .support-card, .retomar { box-shadow: none; }
.benefit-card:hover { box-shadow: none; border-color: #D4D4D4; transform: translateY(-2px); }
:root[data-theme="dark"] .benefit-card:hover { border-color: #333; }
.mod-card:hover { box-shadow: none; }
.play-btn { box-shadow: none; }

/* Placeholders de imagem: preto chapado em vez de degradê azul */
.img-slot { background: #0A0A0A; color: #666; }
.proj-frame, .mini .proj-frame, .hero-video-frame, .ba-frame { background: #0A0A0A; }

/* Capas dos módulos no painel: tons de preto, azul só na primeira */
.mod-cover.tema-blue   { background: linear-gradient(135deg, #0B2F4C, #0F6CB5); }
.mod-cover.tema-teal   { background: linear-gradient(135deg, #0C0C0C, #1F2F38); }
.mod-cover.tema-sand   { background: linear-gradient(135deg, #0C0C0C, #2B2B2B); }
.mod-cover.tema-rose   { background: linear-gradient(135deg, #0C0C0C, #232733); }
.mod-cover.tema-violet { background: linear-gradient(135deg, #0C0C0C, #1A2430); }
.mod-cover::after { background-image: none; }

/* Lightbox preto */
.lightbox { background: rgba(0,0,0,0.94); }

/* ---------- Detalhes que ficavam em azul-marinho ou cinza quente ---------- */
.action-btn.next-btn, .file-download { border-color: var(--line-200); color: var(--ink-600); }
.action-btn.next-btn:hover, .file-download:hover { border-color: var(--ink-500); }
.lesson-dot { border-color: var(--line-200); }
.tab { color: var(--ink-500); }
.tab.is-active { color: var(--ink-600); }
.breadcrumb, .sidebar-head .s, .painel-sub, .file-size, .comment-when,
.comment-actions, .mod-resumo, .mod-meta, .mod-lock, .mod-foot-label, .painel-vazio, .painel-nota {
  color: var(--ink-500);
}
.mod-meta span.dot { background: var(--ink-400); }
.painel-bar .chip { color: var(--ink-500); border-color: var(--line-200); }
.painel-bar .chip.is-active { background: #0A0A0A; border-color: #0A0A0A; color: #EDEDED; }
:root[data-theme="dark"] .painel-bar .chip.is-active { background: #EDEDED; border-color: #EDEDED; color: #000; }

/* ---------- Grades decorativas mais discretas ---------- */
.hero-grid-bg, .login-side-grid {
  background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
}


/* A lista de aulas agora é branca: o hover precisa de um tom próprio */
.lesson-item:hover { background: var(--line-100); }

/* Rodapé preto nos dois modos */
.site-footer, :root[data-theme="dark"] .site-footer { background: #000; border-top: 1px solid #1C1C1C; }

/* Cinzas do design original que não chegavam a 4,5:1 no modo claro (#9AA7AD, #7A888E) */
.sidebar-module-count, .lesson-item-duration, .lesson-item-title, .tab .count, .mod-vault b { color: var(--ink-400); }
.lesson-item.is-done .lesson-item-title { color: var(--ink-500); }
.lesson-item.is-current .lesson-item-title { color: var(--ink-600); }
:root[data-theme="dark"] .lesson-item.is-done .lesson-item-title { color: var(--d-muted); }
:root[data-theme="dark"] .lesson-item.is-current .lesson-item-title { color: var(--d-text); }
:root[data-theme="dark"] .lesson-item.is-current .lesson-item-duration { color: var(--d-muted); }

/* ===========================================================
   Mais perto da Vercel: botões em pílula, topo centralizado,
   linhas de 1px entre as seções e sem brilho neon.
   O azul fica só em detalhes (links, marcadores, barras de progresso).
   =========================================================== */
:root { --btn-bg: #0A0A0A; --btn-fg: #FFFFFF; --btn-bg-hover: #333333; --rule: rgba(128,128,128,0.2); }
:root[data-theme="dark"] { --btn-bg: #EDEDED; --btn-fg: #0A0A0A; --btn-bg-hover: #FFFFFF; }

/* ---------- Botões ---------- */
.btn, .nav .btn-cta, .nav .btn-portal, .support-mail, .retomar-cta, .publish-btn,
.action-btn, .file-download, .login-submit, .support-strip a { border-radius: 999px; }
.btn-primary, .nav .btn-cta, .support-mail, .retomar-cta, .publish-btn, .action-btn.done-btn {
  background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg);
}
.btn-primary:hover, .nav .btn-cta:hover, .support-mail:hover, .retomar-cta:hover,
.publish-btn:hover, .action-btn.done-btn:hover {
  background: var(--btn-bg-hover); color: var(--btn-fg); transform: none; filter: none;
}
/* Sobre as faixas pretas (iguais nos dois modos) o botão é sempre claro */
.hero .btn-primary, .site-header .btn-cta, .price-card .btn-primary, .support-card .support-mail,
.cta-band .btn-primary, .sticky-buy .btn-primary, .retomar .retomar-cta {
  background: #EDEDED; color: #0A0A0A; border-color: #EDEDED;
}
.hero .btn-primary:hover, .site-header .btn-cta:hover, .price-card .btn-primary:hover,
.support-card .support-mail:hover, .cta-band .btn-primary:hover, .sticky-buy .btn-primary:hover,
.retomar .retomar-cta:hover { background: #FFFFFF; color: #0A0A0A; }

/* Aula concluída: contorno, para se diferenciar do botão cheio */
.action-btn.done-btn.is-done, .action-btn.done-btn.is-done:hover {
  background: transparent; color: var(--ink-600); border-color: var(--line-200);
}
:root[data-theme="dark"] .action-btn.done-btn.is-done { color: var(--d-text); border-color: #333; }

.btn-ghost { background: transparent; color: #EDEDED; border: 1px solid rgba(255,255,255,0.22); }
.btn-ghost:hover { color: #FFFFFF; border-color: rgba(255,255,255,0.6); }
.nav .btn-cta { padding: 8px 16px; }
.nav .btn-portal { padding: 7px 14px; border-color: #333; }
.nav .btn-portal:hover { border-color: #666; background: transparent; }
.nav a.navlink { color: #A1A1A1; }
.nav a.navlink:hover { color: #EDEDED; }

/* ---------- Topo centralizado ---------- */
.hero-inner { display: flex; flex-direction: column; align-items: center; gap: 48px; padding: 96px 28px 80px; }
.hero-copy { max-width: 860px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero h1 { font-size: clamp(36px, 5.6vw, 64px); line-height: 1.04; margin: 24px 0 0; text-wrap: balance; }
.hero h1 span { color: #8F8F8F; }
.hero-lead { max-width: 41em; font-size: 18px; color: #A1A1A1; margin-top: 24px; }
.hero-lead strong { color: #EDEDED; font-weight: 500; }
.hero-ctas { justify-content: center; gap: 12px; margin-top: 32px; }
.hero-ctas .btn { font-size: 15px; padding: 13px 24px; }
.hero-trust { font-size: 13px; color: #878787; margin-top: 16px; }
.badge-pill {
  background: #0A0A0A; border: 1px solid #2A2A2A; color: #A1A1A1; padding: 6px 14px;
  font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; transition: border-color 0.2s ease, color 0.2s ease;
}
.badge-pill:hover { border-color: #555; color: #EDEDED; }
.badge-pill span { color: #7CB8E6; }
.hero-video { width: 100%; max-width: 980px; }
.hero-stats {
  width: 100%; max-width: 980px; margin: 0; padding: 0; gap: 1px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  background: #1C1C1C; border: 1px solid #1C1C1C; border-radius: 12px; overflow: hidden;
}
.hero-stats > div { background: #0A0A0A; padding: 22px 24px; }
.hero-stats .lbl { color: #878787; }

/* ---------- Linhas: divisória entre seções + moldura lateral ---------- */
section, .cta-band { border-top: 1px solid var(--rule); }
.hero { border-top: none; }
body:not(.app-body):not(.login-body) { position: relative; }
body:not(.app-body):not(.login-body)::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; z-index: 1;
  width: min(1200px, calc(100% - 32px)); transform: translateX(-50%);
  border-inline: 1px solid var(--rule); pointer-events: none;
}
@media (max-width: 1280px) { body:not(.app-body):not(.login-body)::before { display: none; } }

/* ---------- Sem neon ---------- */
.proj-figure { animation: none; box-shadow: none; border-color: #1C1C1C; transition: border-color 0.2s ease; }
.proj-figure:hover { border-color: #333; }
.proj-figure::before { display: none; }
.neon-bar {
  animation: none; box-shadow: none; opacity: 1; height: 1px;
  background: linear-gradient(90deg, transparent, #333 20%, #7CB8E6 50%, #333 80%, transparent);
}
.hl-neon { text-shadow: none; color: var(--blue-200); background-size: 100% 2px; padding-bottom: 6px; }
.benefit-card, .mod-card, .bonus-card, .faq-item, .login-card, .proj-figure, .hero-video { border-radius: 12px; }

/* ---------- Faixa de chamada ---------- */
.cta-band { background: #0A0A0A; padding: 40px 28px; }
.cta-band-inner { max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.cta-band-text { font-size: clamp(20px, 2.4vw, 26px); font-weight: 480; letter-spacing: -0.035em; color: #EDEDED; }
.cta-band .btn { font-size: 15px; padding: 13px 24px; }

/* ---------- Para quem é / o que precisa ter ---------- */
.fit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; margin-top: 36px; align-items: start; }
.fit-card { background: var(--cream-100); border: 1px solid var(--line-200); border-radius: 12px; padding: 26px; min-width: 0; }
.fit-card h3 { font-size: 17px; }
.fit-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fit-list li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.55; color: var(--ink-500); }
.fit-list li strong { color: var(--ink-600); font-weight: 500; }
.fit-list li::before { position: absolute; left: 0; top: 0; color: var(--ink-400); }
.fit-list.is-yes li::before { content: "\2713"; color: var(--blue-500); }
:root[data-theme="dark"] .fit-list.is-yes li::before { color: var(--blue-200); }
.fit-list.is-no li::before { content: "\2715"; }
.fit-list.is-req li::before { content: "\2192"; }
.fit-note { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-200); font-size: 13px; line-height: 1.5; color: var(--ink-500); }

/* ---------- Garantia ao lado do botão de compra ---------- */
.guarantee {
  display: flex; gap: 12px; text-align: left; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.12); font-size: 13px; line-height: 1.5; color: #A1A1A1;
}
.guarantee svg { flex: none; color: #7CB8E6; margin-top: 1px; }
.guarantee strong { display: block; color: #EDEDED; font-weight: 500; font-size: 14px; }

/* ---------- Barra de compra fixa (só no celular) ---------- */
.sticky-buy { display: none; }
@media (max-width: 760px) {
  .sticky-buy:not([hidden]) {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(0,0,0,0.92); backdrop-filter: blur(10px); border-top: 1px solid #1C1C1C;
  }
  .sticky-buy-price span { display: block; font-size: 12.5px; color: #878787; text-decoration: line-through; }
  .sticky-buy-price strong { font-size: 17px; font-weight: 500; color: #EDEDED; letter-spacing: -0.02em; }
  .sticky-buy .btn { font-size: 14.5px; padding: 11px 18px; }
  .site-footer { padding-bottom: 88px; }
  .hero-inner { padding: 64px 20px 56px; gap: 36px; }
  .hero-lead { font-size: 16.5px; }
}

/* ===========================================================
   Movimento — regras da nota do vault: o elemento sobe 26px saindo do desfoque
   em 0,8s (começa rápido, termina devagar); itens de lista entram 0,1s um depois
   do outro; sem quique, giro ou piscar. Com "reduzir movimento" ligado no sistema,
   a regra global de style.css desliga tudo e o conteúdo aparece direto.
   =========================================================== */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(26px); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.badge-pill, .hero h1, .hero-lead, .hero-prompt, .hero-ctas, .hero-trust, .hero-video, .hero-stats {
  animation: riseIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.badge-pill  { animation-delay: 0.05s; }
.hero h1     { animation-delay: 0.15s; animation-duration: 0.95s; }
.hero-lead   { animation-delay: 0.30s; }
.hero-prompt { animation-delay: 0.42s; }
.hero-ctas   { animation-delay: 0.54s; }
.hero-trust  { animation-delay: 0.64s; }
.hero-video  { animation-delay: 0.72s; }
.hero-stats  { animation-delay: 0.90s; }

/* Linha de comando sendo digitada */
.hero-prompt {
  display: flex; align-items: center; gap: 10px; width: min(100%, 440px); margin-top: 24px;
  padding: 11px 16px; border: 1px solid #1C1C1C; border-radius: 10px; background: #0A0A0A;
  font-family: 'Geist Mono', ui-monospace, monospace !important; font-size: 14px; color: #EDEDED;
  min-height: 44px; text-align: left;
}
.hero-prompt span { font-family: inherit !important; }
.hero-prompt-sign { color: #7CB8E6; }
.hero-prompt-cursor { width: 8px; height: 17px; background: #7CB8E6; flex: none; animation: caret 1s step-end infinite; }
#heroPrompt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 520px) { .hero-prompt { font-size: 12px; padding: 10px 12px; gap: 8px; } }

/* Entrada ao rolar: mesma subida com desfoque, em cascata dentro de cada grupo */
.js .reveal {
  opacity: 0; transform: translateY(26px); filter: blur(10px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.8s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
  transition-delay: calc(var(--i, 0) * 0.1s);
}
.js .reveal.is-visible { opacity: 1; transform: none; filter: blur(0); }
@media (prefers-reduced-motion: reduce) { .js .reveal { filter: none !important; } }

/* Números que contam não devem "dançar" de largura */
.hero-stats .num, .proof-stats .num { font-variant-numeric: tabular-nums; }

/* Leve resposta ao passar o mouse */
.fit-card, .bonus-card, .faq-item, .mod-card { transition: border-color 0.2s ease; }
.fit-card:hover, .bonus-card:hover, .faq-item:hover { border-color: #D4D4D4; }
:root[data-theme="dark"] .fit-card:hover,
:root[data-theme="dark"] .bonus-card:hover,
:root[data-theme="dark"] .faq-item:hover { border-color: #333; }

/* ---------- Cursos de brinde ---------- */
.hero-bonus { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin-top: 22px; animation: riseIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both; }
.hero-bonus-label { font-size: 13px; color: #878787; }
.hero-bonus-chip {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #EDEDED;
  border: 1px solid #2A2A2A; border-radius: 999px; padding: 6px 12px; transition: border-color 0.2s ease;
}
.hero-bonus-chip:hover { color: #EDEDED; border-color: #555; }
.hero-bonus-chip s { color: #878787; }
.hero-bonus-chip::before { content: "+"; color: #7CB8E6; }

.bonus-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bonus-value { display: inline-flex; align-items: baseline; gap: 8px; font-size: 14px; }
.bonus-value s { color: var(--ink-400); }
.bonus-value strong { font-weight: 500; color: var(--blue-500); }
:root[data-theme="dark"] .bonus-value strong { color: var(--blue-200); }
.bonus-thumb-wide { margin-top: 18px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-200); aspect-ratio: 16 / 9; }
.bonus-thumb-wide img { width: 100%; height: 100%; object-fit: cover; }

.price-stack { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; flex-direction: column; gap: 8px; text-align: left; font-size: 13.5px; }
.price-stack > div { display: flex; justify-content: space-between; gap: 12px; color: #EDEDED; }
.price-stack > div span:last-child { color: #7CB8E6; white-space: nowrap; }
.price-stack s { color: #878787; }
.price-checks strong { font-weight: 500; color: #EDEDED; }

/* ===========================================================
   "Reduzir movimento" ligado no sistema (no Windows: Efeitos de animação desligados).
   Em vez de desligar tudo, fica uma versão suave: os elementos só aparecem,
   sem subir e sem desfoque. A regra global de style.css zera animações com
   !important, por isso as exceções abaixo também precisam dele.
   =========================================================== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .badge-pill, .hero h1, .hero-lead, .hero-prompt, .hero-ctas, .hero-bonus, .hero-trust, .hero-video, .hero-stats {
    animation-name: fadeIn !important; animation-duration: 0.7s !important;
    animation-timing-function: ease !important; animation-fill-mode: both !important;
  }
  .badge-pill  { animation-delay: 0.05s !important; }
  .hero h1     { animation-delay: 0.15s !important; }
  .hero-lead   { animation-delay: 0.30s !important; }
  .hero-prompt { animation-delay: 0.42s !important; }
  .hero-ctas   { animation-delay: 0.54s !important; }
  .hero-bonus  { animation-delay: 0.60s !important; }
  .hero-trust  { animation-delay: 0.64s !important; }
  .hero-video  { animation-delay: 0.72s !important; }
  .hero-stats  { animation-delay: 0.90s !important; }

  .js .reveal:not(.is-visible) { opacity: 0 !important; }
  .js .reveal {
    transition-property: opacity !important; transition-duration: 0.7s !important;
    transition-timing-function: ease !important; transition-delay: calc(var(--i, 0) * 0.08s) !important;
  }
  .hero-prompt-cursor { animation: caret 1s step-end infinite !important; }
}

/* ---------- Vídeo de introdução: play grande no meio do player do topo ---------- */
.intro-cover {
  position: absolute; inset: 0; z-index: 3; width: 100%; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.1) 100%);
  color: #FFFFFF; transition: background 0.25s ease;
}
.intro-cover[hidden] { display: none; }
.intro-cover:hover { background: radial-gradient(ellipse at center, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.15) 100%); }
.intro-cover:focus-visible { outline: 2px solid #7CB8E6; outline-offset: -4px; }
.intro-play {
  position: relative; width: 84px; height: 84px; flex: none; border-radius: 50%; background: #FFFFFF; color: #0A0A0A;
  display: grid; place-items: center; padding-left: 4px; box-shadow: 0 10px 40px rgba(0,0,0,0.45);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.intro-play::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.55);
  animation: introPulse 2.2s ease-out infinite;
}
.intro-cover:hover .intro-play { transform: scale(1.07); }
@keyframes introPulse { 0% { transform: scale(0.9); opacity: 0.9; } 100% { transform: scale(1.35); opacity: 0; } }
.intro-cover-label {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 17px; font-weight: 600; text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
.intro-extra { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.8); }
.hero-video-tag { top: 14px; left: 14px; z-index: 4; }
.hero-video-frame.is-playing-intro .hero-video-tag { display: none; }
@media (max-width: 520px) {
  .intro-play { width: 64px; height: 64px; }
  .intro-play svg { width: 24px; height: 24px; }
  .intro-cover-label { font-size: 15px; }
  .hero-video-tag { display: none; }
}
@media (prefers-reduced-motion: reduce) { .intro-play::after { animation: none; opacity: 0; } }

/* Botão "Assistir à apresentação" no topo */
.btn-intro { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: inherit; }
.hero-ctas .btn-intro { font-size: 15px; padding: 13px 22px 13px 14px; }
.btn-intro-play {
  width: 24px; height: 24px; border-radius: 50%; background: #EDEDED; color: #0A0A0A;
  display: grid; place-items: center; padding-left: 2px; flex: none;
}
.btn-intro-time { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: #8F8F8F; }

/* ---------- Dúvidas dentro do painel do aluno ---------- */
.painel-faq { margin-top: 44px; max-width: 760px; display: flex; flex-direction: column; gap: 10px; }
.painel-faq-title { font-size: 20px; margin-bottom: 6px; }

/* ===========================================================
   Celular em primeiro lugar: menos espaço vazio, botões que o dedo acerta,
   galeria deslizável e o tour 360° num quadro mais alto.
   =========================================================== */
.proj-cards { display: contents; }
.swipe-hint { display: none; }

@media (max-width: 760px) {
  /* Respiro: 80-96px por seção é demais numa tela de 800px de altura */
  .section, .section.tight-top, .projects-section, .section-dark-furniture, .price-section, #ambientes { padding: 56px 20px; }
  .cta-band { padding: 32px 20px; }
  .cta-band .btn { width: 100%; }
  .site-header .wrap { padding: 10px 16px; }

  /* Alvos de toque de pelo menos 44px */
  .nav-toggle, .theme-toggle { width: 44px; height: 44px; }
  .theme-toggle svg { width: 18px; height: 18px; }
  .badge-pill { min-height: 40px; padding: 8px 16px; }
  .hero-bonus-chip { min-height: 40px; padding: 8px 14px; }
  .hero-ctas .btn { flex: 1 1 100%; padding: 15px 24px; }
  .nav a.navlink { padding: 14px 20px; font-size: 16px; }
  .nav .btn-portal, .nav .btn-cta { margin: 10px 20px 0; padding: 12px 18px; font-size: 15px; }
  .nav .btn-cta { margin-bottom: 12px; }
  .mod-card summary, .faq-item summary { padding: 18px 18px; }
  .lesson-row { padding: 14px 18px; gap: 12px; }
  .faq-item p { padding: 0 18px 20px; }

  /* Etiquetas pequenas ficam legíveis */
  .hero-video-tag, .proj-badge, .ba-tag, .bonus-tag, .promo-badge, .flow-step .n { font-size: 12px; }
  .brand { padding: 7px 0; }

  /* Topo mais compacto */
  .hero-stats > div { padding: 14px 18px; }
  .hero-stats .num { font-size: 21px; }

  /* Galeria deslizável: um cartão por vez, com o próximo aparecendo na borda */
  .projects-grid { gap: 16px; }
  .proj-cards {
    display: flex; gap: 12px; min-width: 0; margin: 0 -20px; padding: 2px 20px 8px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .proj-cards::-webkit-scrollbar { display: none; }
  .proj-cards > .proj-figure { flex: 0 0 84%; scroll-snap-align: start; }
  .swipe-hint { display: block; margin-top: 2px; font-size: 13px; color: #878787; text-align: center; }

  /* Tour 360°: quadro mais alto, senão a visão fica uma fresta */
  #tour360-frame { aspect-ratio: 4 / 3; }
  #tour360-frame[data-open] { aspect-ratio: 3 / 4; }

  /* Cartões com menos enchimento, para sobrar largura para o texto */
  .fit-card, .bonus-card { padding: 22px 20px; }
  .furn-col { padding: 18px; }
  .price-card { padding: 28px 20px; gap: 28px; }
  .price-box { padding: 24px 18px; }
  .guarantee { font-size: 13.5px; }
  .section-title { font-size: 26px; }
  .hl-neon { display: inline; }
}

/* ===========================================================
   Uma coisa por tela no topo: a primeira tela é só título, comando e botões;
   o vídeo 3D fica inteiro na tela seguinte, dimensionado pela altura da janela
   para nunca aparecer cortado.
   =========================================================== */
:root { --header-h: 68px; --hero-w: min(980px, max(520px, calc((100vh - var(--header-h) - 230px) * 16 / 9))); }
@supports (height: 100svh) {
  :root { --hero-w: min(980px, max(520px, calc((100svh - var(--header-h) - 230px) * 16 / 9))); }
}
.hero-inner { padding: 0 28px 80px; gap: 56px; }
.hero-copy {
  position: relative; justify-content: center; padding: 32px 0 76px;
  min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h));
}
.scroll-cue {
  position: absolute; left: calc(50% - 20px); bottom: 20px;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid #2A2A2A; color: #A1A1A1;
  display: grid; place-items: center; transition: border-color 0.2s ease, color 0.2s ease;
  animation: riseIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
}
.scroll-cue:hover { border-color: #555; color: #EDEDED; }
.hero-video { max-width: var(--hero-w); scroll-margin-top: calc(var(--header-h) + 20px); }
.hero-stats { max-width: var(--hero-w); }

@media (max-width: 760px) {
  :root { --header-h: 65px; --hero-w: 100%; }
  .hero-inner { padding: 0 20px 56px; gap: 40px; }
  .hero-copy { padding: 24px 0 68px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation-name: fadeIn !important; animation-duration: 0.7s !important; animation-delay: 0.9s !important; animation-fill-mode: both !important; }
}

/* ===========================================================
   Celular, 2ª passada: galeria da Casa Ubatuba deslizável e
   alvos de toque / letras miúdas nas páginas do aluno.
   =========================================================== */
@media (max-width: 760px) {
  /* 6 a 16 imagens empilhadas viravam até 4.600px de rolagem; agora deslizam de lado.
     O seletor leva #casa porque a regra original está num <style> dentro da página. */
  #casa .casa-grid {
    display: flex; gap: 12px; margin: 16px -20px 0; padding: 2px 20px 8px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  #casa .casa-grid::-webkit-scrollbar { display: none; }
  #casa .casa-grid > .proj-figure { flex: 0 0 84%; scroll-snap-align: start; }
  #casa .casa-mais > summary { min-height: 44px; display: flex; align-items: center; }

  /* Login */
  .password-toggle { min-height: 40px; padding: 10px 12px; }
  .check { min-height: 44px; }
  .link-btn, .login-back { display: inline-block; padding: 12px 4px; }
  .login-foot a { display: inline-block; padding: 10px 2px; }

  /* Painel e aulas */
  .app-brand { padding: 8px 0; }
  .painel-bar .chip { min-height: 44px; }
  .tabs { gap: 18px; }
  .tab { min-height: 46px; padding: 12px 4px 13px; }
  .breadcrumb a { display: inline-block; padding: 11px 0; }
  .retomar-tag, .mod-num, .mod-badge, .mod-vault b, .sidebar-module-num { font-size: 12px; }
}

/* ---------- Quem ensina ---------- */
.about-card {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 48px; align-items: start;
  background: var(--cream-100); border: 1px solid var(--line-200); border-radius: 12px; padding: 40px;
}
.about-who { display: flex; gap: 20px; align-items: center; }
.about-avatar {
  width: 88px; height: 88px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: #0A0A0A; border: 1px solid #2A2A2A; color: #EDEDED;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 26px; letter-spacing: 0.04em;
  box-shadow: 0 0 0 4px rgba(124,184,230,0.12);
}
.about-name { font-size: clamp(24px, 3vw, 32px); line-height: 1.1; margin: 8px 0 0; }
.about-role { font-size: 14px; color: var(--ink-500); margin-top: 8px; line-height: 1.5; }
.about-text p { font-size: 16px; line-height: 1.65; color: var(--ink-500); margin: 0 0 14px; }
.about-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.about-facts > div { border-top: 1px solid var(--line-200); padding-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.about-facts strong { font-size: 20px; font-weight: 600; }
.about-facts span { font-size: 13px; color: var(--ink-500); }
@media (max-width: 760px) {
  .about-card { grid-template-columns: 1fr; gap: 24px; padding: 26px 20px; }
  .about-avatar { width: 68px; height: 68px; font-size: 21px; }
  .about-facts strong { font-size: 17px; }
}

/* ---------- Rodapé com dados legais ---------- */
.site-footer .wrap { align-items: center; }
.footer-brand, .footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.footer-brand { flex-direction: column; align-items: flex-start; }
.footer-legal-id { font-size: 12.5px; color: #6F6F6F; }
.site-footer a { color: #A1A1A1; text-decoration: none; }
.site-footer a:hover { color: #EDEDED; text-decoration: underline; }

/* ---------- Páginas legais (termos / privacidade) ---------- */
.legal-page { max-width: 760px; margin: 0 auto; padding: 56px 24px 96px; }
.legal-page h1 { font-size: clamp(30px, 4vw, 42px); line-height: 1.1; margin: 10px 0 8px; }
.legal-page .legal-updated { font-size: 13px; color: var(--ink-500); margin-bottom: 36px; }
.legal-page h2 { font-size: 19px; margin: 34px 0 10px; }
.legal-page p, .legal-page li { font-size: 15.5px; line-height: 1.7; color: var(--ink-500); }
.legal-page ul { padding-left: 20px; margin: 8px 0; }
.legal-page a { color: #7CB8E6; }
.legal-back { display: inline-block; font-size: 14px; color: var(--ink-500); text-decoration: none; margin-bottom: 24px; }
.legal-back:hover { color: inherit; }

/* ---------- Currículo com descrição e etapas (06/10/2026) ----------
   Cada aula mostra o título real do vídeo, a duração medida, uma descrição curta
   e as etapas (as partes do vídeo) com a duração de cada uma. */
.lesson-row-full { align-items: flex-start; }
.lesson-row-full .lesson-num { padding-top: 2px; flex: none; }
.lesson-body { flex: 1; min-width: 0; }
.lesson-head { display: flex; align-items: baseline; gap: 16px; }
.lesson-head .lesson-title { font-weight: 500; }
.lesson-head .lesson-duration { flex: none; font-variant-numeric: tabular-nums; }
.lesson-desc { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-500); max-width: 62em; }
.lesson-etapas { list-style: none; margin: 12px 0 2px; padding: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line-200); }
.lesson-etapas li { display: flex; align-items: baseline; gap: 12px; padding: 5px 0 5px 14px; font-size: 13.5px; color: var(--ink-600); }
.etapa-num { flex: none; width: 4.8em; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.02em; color: var(--ink-400); text-transform: uppercase; }
.etapa-title { flex: 1; min-width: 0; }
.etapa-duration { flex: none; font-variant-numeric: tabular-nums; color: var(--ink-400); }
@media (max-width: 760px) {
  .lesson-head { gap: 10px; }
  .lesson-desc { font-size: 13.5px; }
  .lesson-etapas li { gap: 8px; padding-left: 10px; }
  .etapa-num { width: auto; }
  #aulas .mod-num, #aulas .mod-duration { white-space: nowrap; }
  #aulas .mod-card summary { flex-wrap: wrap; row-gap: 6px; align-items: center; }
  #aulas .mod-card summary h3 { order: 3; flex-basis: 100%; }
}
/* Área de aula: lista de etapas no lugar dos tópicos genéricos */
.points-list .pt .pt-dur { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; color: var(--ink-400); font-size: 14px; white-space: nowrap; }
:root[data-theme="dark"] .points-list .pt .pt-dur { color: var(--d-faint); }