/* ============================================================
   VENETTO · Ink & Copper Design System
   Editorial · warm dark · serif + mono · NÃO É IA
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..600,30..100,0..1;1,9..144,400..500,50..100,0..1&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Cor — paleta Ink & Copper */
  --color-bg-base:      #171311;
  --color-bg-elev-1:    #1E1916;
  --color-bg-elev-2:    #26201C;
  --color-paper:        #F4EFE6;
  --color-ink:          #14100E;
  --color-text-hi:      #EDE4D3;
  --color-text-md:      #A79889;
  --color-text-lo:      #6B5F55;
  --color-rule:         #2F2823;
  --color-accent:       #C96F3E;
  --color-accent-deep:  #8A4220;
  --color-wine:         #5A2A2E;
  --color-olive:        #5E6240;
  --color-danger:       #A43E28;
  --color-focus:        #E6A77A;

  /* Tipografia */
  --font-display: "Fraunces", "Times New Roman", serif;
  --font-body:    "Inter Tight", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Escala */
  --fs-eyebrow: 0.6875rem;
  --fs-caption: 0.8125rem;
  --fs-body:    0.9375rem;
  --fs-body-l:  1.0625rem;
  --fs-h3:      1.375rem;
  --fs-h2:      1.875rem;
  --fs-h1:      2.75rem;
  --fs-display: 4.5rem;
  --fs-display-xl: 6.75rem;

  /* Espaçamento (alguns quebrados pra fugir do grid perfeito) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 32px;
  --space-7: 44px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 176px;

  /* Radius — quase zero. Cantos vivos */
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;

  /* Sombras de papel */
  --shadow-1: 0 1px 0 0 rgba(0,0,0,.35), 0 0 0 1px var(--color-rule);
  --shadow-2: 0 10px 30px -18px rgba(0,0,0,.7), 0 0 0 1px var(--color-rule);

  --gutter: var(--space-5);
  --max-w: 1240px;
}

/* ── Reset enxuto ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font: 400 var(--fs-body)/1.6 var(--font-body);
  background: var(--color-bg-base);
  color: var(--color-text-hi);
  min-height: 100vh;
  font-feature-settings: "ss01", "cv01";
}

/* Ruído de papel sutil — tira a "lisura CGI" */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 999;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .25 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .04; mix-blend-mode: overlay;
}

::selection { background: var(--color-accent); color: var(--color-bg-base); }

/* ── Container ── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--space-5); }
@media (min-width: 768px) { .container { padding: 0 var(--space-7); } }

/* ── Tipografia ── */
.t-eyebrow {
  font: 500 var(--fs-eyebrow)/1.2 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-text-lo);
}
.t-display-xl {
  font: 300 var(--fs-display-xl)/0.92 var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -.035em; color: var(--color-text-hi);
}
.t-display {
  font: 400 var(--fs-display)/0.98 var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 50;
  letter-spacing: -.028em; color: var(--color-text-hi);
}
.t-h1 {
  font: 500 var(--fs-h1)/1.05 var(--font-display);
  font-variation-settings: "opsz" 96;
  letter-spacing: -.02em; color: var(--color-text-hi);
}
.t-h2 {
  font: 500 var(--fs-h2)/1.15 var(--font-display);
  letter-spacing: -.015em; color: var(--color-text-hi);
}
.t-h3 {
  font: 600 var(--fs-h3)/1.25 var(--font-body);
  letter-spacing: -.01em; color: var(--color-text-hi);
}
.t-body-l { font: 400 var(--fs-body-l)/1.55 var(--font-body); color: var(--color-text-hi); }
.t-body { color: var(--color-text-md); }
.t-caption { font: 400 var(--fs-caption)/1.45 var(--font-body); color: var(--color-text-lo); }
.t-num { font: 500 1em/1 var(--font-mono); font-variant-numeric: tabular-nums; }
em.serif-em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; color: var(--color-accent); }

/* ── Top bar ── */
.topbar {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--space-7);
  padding: var(--space-5) var(--space-7);
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-bg-base);
  position: sticky; top: 0; z-index: 50;
}
.topbar__mark {
  font: 500 1.25rem/1 var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 50;
  letter-spacing: -.02em;
  color: var(--color-text-hi); text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 4px;
}
.topbar__mark span { color: var(--color-accent); }
.topbar__nav { display: flex; gap: var(--space-6); }
.topbar__nav a {
  font: 500 var(--fs-caption)/1 var(--font-body);
  color: var(--color-text-md); text-decoration: none;
  padding-bottom: 4px; border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.topbar__nav a:hover, .topbar__nav a.active {
  color: var(--color-text-hi); border-color: var(--color-accent);
}
.topbar__right { display: flex; align-items: center; gap: var(--space-4); }
.topbar__avatar {
  width: 32px; height: 32px;
  background: var(--color-bg-elev-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-1);
  font: 500 var(--fs-caption)/1 var(--font-mono);
  color: var(--color-text-hi); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; transition: border-color .2s;
}
.topbar__avatar:hover { border-color: var(--color-accent); }
.topbar__icon-btn {
  background: none; border: none; color: var(--color-text-lo);
  font-size: 16px; cursor: pointer; padding: 6px;
  border-radius: var(--radius-1); transition: color .2s;
}
.topbar__icon-btn:hover { color: var(--color-accent); }
@media (max-width: 640px) {
  .topbar { gap: var(--space-4); padding: var(--space-4); }
  .topbar__nav { display: none; }
}

/* ── Eyebrow strip (Nº — DATA) ── */
.eyebrow-strip {
  display: flex; align-items: center; gap: var(--space-4);
  margin: var(--space-9) 0 var(--space-7);
}
.eyebrow-strip__rule { flex: 1; height: 1px; background: var(--color-rule); }
.eyebrow-strip span:not(.eyebrow-strip__rule) { color: var(--color-accent); }

/* ── Botões ── */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 14px 22px;
  font: 500 var(--fs-body)/1 var(--font-body);
  letter-spacing: -.005em;
  border-radius: var(--radius-1);
  border: 1px solid transparent; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
  text-decoration: none; font-family: var(--font-body);
}
.btn--primary { background: var(--color-accent); color: var(--color-bg-base); }
.btn--primary:hover { background: var(--color-accent-deep); color: var(--color-text-hi); }
.btn--primary:active { transform: translateY(1px); }
.btn--secondary {
  background: transparent; color: var(--color-text-hi);
  border-color: var(--color-text-md);
}
.btn--secondary:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn--ghost { background: transparent; color: var(--color-text-md); padding: 8px 0; }
.btn--ghost:hover { color: var(--color-accent); }
.btn--paper { background: var(--color-ink); color: var(--color-paper); }
.btn--paper:hover { background: var(--color-wine); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn--sm { padding: 8px 14px; font-size: var(--fs-caption); }

/* ── Inputs ── */
.input {
  width: 100%;
  background: var(--color-bg-elev-1);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-1);
  padding: 12px 14px;
  font: 400 var(--fs-body)/1.4 var(--font-body);
  color: var(--color-text-hi);
  outline: none; transition: border-color .2s;
}
.input:focus { border-color: var(--color-accent); }
.input::placeholder { color: var(--color-text-lo); }
.label {
  display: block;
  font: 500 var(--fs-eyebrow)/1.2 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-text-lo); margin-bottom: var(--space-2);
}

/* ── Course HERO card ── */
.course-hero {
  padding: var(--space-8) var(--space-7) var(--space-7);
  background: var(--color-bg-elev-2);
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-accent);
  position: relative; overflow: hidden;
  text-decoration: none; color: inherit;
  display: block; transition: background .25s;
}
.course-hero:hover { background: #2A241F; }
.course-hero__meta {
  display: flex; align-items: center; gap: var(--space-4);
  margin-bottom: var(--space-7);
}
.course-hero__rule { flex: 1; height: 1px; background: var(--color-rule); }
.course-hero__title {
  font: 400 var(--fs-display)/0.98 var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 50;
  letter-spacing: -.028em; color: var(--color-text-hi);
  margin-bottom: var(--space-5);
}
.course-hero__title em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; color: var(--color-accent); }
.course-hero__lede {
  font: 400 var(--fs-body-l)/1.55 var(--font-body);
  color: var(--color-text-hi); max-width: 56ch;
  margin-bottom: var(--space-7);
}
.course-hero__cta {
  display: flex; align-items: center; gap: var(--space-5);
  flex-wrap: wrap;
}
.course-hero__progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--color-rule);
}
.course-hero__progress span {
  display: block; height: 100%; width: var(--p, 0%);
  background: var(--color-accent);
  transition: width .9s cubic-bezier(.2,.8,.2,1);
}
@media (max-width: 768px) {
  .course-hero { padding: var(--space-6) var(--space-5); }
  .course-hero__title { font-size: 2.5rem; }
}

/* ── Course COMPACT (lista lateral) ── */
.compact-list { display: flex; flex-direction: column; }
.course-compact {
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: var(--space-5); align-items: center;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-rule);
  color: var(--color-text-hi); text-decoration: none;
  transition: padding-left .25s;
}
.course-compact:last-child { border-bottom: 1px solid var(--color-rule); }
.course-compact:hover { padding-left: 8px; }
.course-compact__n {
  font: 500 1.5rem/1 var(--font-mono);
  color: var(--color-text-lo); transition: color .2s;
}
.course-compact:hover .course-compact__n { color: var(--color-accent); }
.course-compact__title { font: 600 var(--fs-h3)/1.25 var(--font-body); letter-spacing: -.01em; }
.course-compact__meta { font: 400 var(--fs-caption)/1.4 var(--font-body); color: var(--color-text-lo); margin-top: 2px; }
.course-compact__arrow { color: var(--color-text-lo); font-family: var(--font-mono); transition: transform .25s, color .2s; }
.course-compact:hover .course-compact__arrow { transform: translateX(6px); color: var(--color-accent); }

/* ── Upsell card (paper-on-ink) ── */
.upsell {
  background: var(--color-paper);
  color: var(--color-ink);
  padding: var(--space-7);
  border: 1px solid var(--color-ink);
  position: relative;
  text-decoration: none;
  display: block;
  transition: transform .2s;
  box-shadow: 12px 12px 0 var(--color-accent);
}
.upsell:hover { transform: translate(-3px, -3px); box-shadow: 16px 16px 0 var(--color-accent); }
.upsell__seal {
  position: absolute; top: var(--space-4); right: var(--space-4);
  font: 500 var(--fs-eyebrow)/1 var(--font-mono);
  letter-spacing: .14em; color: var(--color-wine);
}
.upsell__eyebrow {
  font: 500 var(--fs-eyebrow)/1.2 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-wine); margin-bottom: var(--space-4);
}
.upsell__title {
  font: 500 var(--fs-h2)/1.15 var(--font-display);
  letter-spacing: -.015em; color: var(--color-ink);
  margin-bottom: var(--space-4);
}
.upsell__title em { font-style: italic; color: var(--color-wine); font-variation-settings: "opsz" 144, "SOFT" 100; }
.upsell__lede {
  font: 400 var(--fs-body)/1.6 var(--font-body);
  color: rgba(20,16,14,.7); margin-bottom: var(--space-5);
}
.upsell .btn { background: var(--color-ink); color: var(--color-paper); }
.upsell .btn:hover { background: var(--color-wine); }

/* ── Section divider com label ("CONTINUE ASSISTINDO" sobre rule) ── */
.section-divider {
  display: flex; align-items: center; gap: var(--space-5);
  margin: var(--space-9) 0 var(--space-6);
}
.section-divider__rule { flex: 1; height: 1px; background: var(--color-rule); }
.section-divider__label {
  font: 500 var(--fs-eyebrow)/1.2 var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-accent);
}

/* ── Lista de aulas ── */
.lessons { list-style: none; }
.lesson-row {
  display: grid;
  grid-template-columns: 48px 1fr auto 12px;
  align-items: center; gap: var(--space-5);
  padding: var(--space-4) var(--space-3);
  border-top: 1px solid var(--color-rule);
  text-decoration: none; color: inherit;
  position: relative; transition: background .2s, padding-left .2s;
}
.lessons .lesson-row:last-child { border-bottom: 1px solid var(--color-rule); }
.lesson-row:hover { background: var(--color-bg-elev-1); padding-left: var(--space-5); }
.lesson-row__n {
  font: 500 1rem/1 var(--font-mono);
  color: var(--color-text-lo);
}
.lesson-row__title {
  font: 500 var(--fs-body-l)/1.35 var(--font-body);
  letter-spacing: -.01em; color: var(--color-text-hi);
}
.lesson-row__subtitle {
  font: 400 var(--fs-caption)/1.4 var(--font-body);
  color: var(--color-text-lo); margin-top: 2px;
}
.lesson-row__time { font: 500 var(--fs-caption)/1 var(--font-mono); color: var(--color-text-lo); }
.lesson-row__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: transparent; border: 1px solid var(--color-rule);
}
.lesson-row--done .lesson-row__dot { background: var(--color-olive); border-color: var(--color-olive); }
.lesson-row--done .lesson-row__title { color: var(--color-text-md); }
.lesson-row--current { background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 60%); }
.lesson-row--current .lesson-row__n { color: var(--color-accent); }

/* ── Modal ── */
.modal-scrim {
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--color-bg-base) 92%, transparent);
  z-index: 9998; display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
}
.modal {
  max-width: 480px; width: 100%;
  background: var(--color-paper); color: var(--color-ink);
  padding: var(--space-7);
  border: 1px solid var(--color-ink);
  box-shadow: 16px 16px 0 var(--color-accent);
  max-height: 90vh; overflow-y: auto;
}
.modal h3 {
  font: 500 var(--fs-h3)/1.2 var(--font-display);
  letter-spacing: -.015em; color: var(--color-ink);
  margin-bottom: var(--space-2);
}
.modal h3 em { font-style: italic; color: var(--color-wine); }
.modal p { color: rgba(20,16,14,.7); font-size: var(--fs-caption); margin-bottom: var(--space-5); }
.modal .label { color: rgba(20,16,14,.5); }
.modal .input {
  background: rgba(20,16,14,.04);
  border-color: rgba(20,16,14,.15);
  color: var(--color-ink);
}
.modal .input:focus { border-color: var(--color-accent); }
.modal .btn--primary { background: var(--color-ink); color: var(--color-paper); }
.modal .btn--primary:hover { background: var(--color-wine); }
.modal .btn--secondary { color: var(--color-ink); border-color: var(--color-ink); }
.modal .btn--secondary:hover { border-color: var(--color-wine); color: var(--color-wine); }

/* ── Toast ── */
.toast {
  position: fixed; bottom: var(--space-6); left: var(--space-6);
  display: flex; gap: var(--space-3); align-items: center;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-elev-2); color: var(--color-text-hi);
  border-left: 3px solid var(--color-olive);
  font: 500 var(--fs-caption)/1.4 var(--font-body);
  box-shadow: var(--shadow-2);
  z-index: 9999; max-width: 380px;
  animation: toastIn .25s ease;
}
.toast--err { border-left-color: var(--color-danger); }
.toast--info { border-left-color: var(--color-accent); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Footer ── */
.foot {
  margin-top: var(--space-11);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-rule);
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  font: 500 var(--fs-eyebrow)/1.2 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-text-lo);
}
.foot > :nth-child(2) { text-align: center; }
.foot > :nth-child(3) { text-align: right; }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { color: var(--color-accent); }
@media (max-width: 640px) {
  .foot { grid-template-columns: 1fr; gap: var(--space-3); text-align: center; }
  .foot > :nth-child(3), .foot > :nth-child(2) { text-align: center; }
}

/* ── Empty/error state ── */
.state-block {
  text-align: center; padding: var(--space-9) var(--space-5);
  border: 1px solid var(--color-rule);
}
.state-block__num {
  font: 300 var(--fs-display-xl)/1 var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 30;
  color: var(--color-accent); margin-bottom: var(--space-4);
}

/* ── Player ── */
.player-wrap {
  position: relative; aspect-ratio: 16/9;
  background: #0B0908;
  border: 1px solid var(--color-rule);
}
.player-wrap iframe, .player-wrap video { width: 100%; height: 100%; border: none; display: block; }
.player-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); color: var(--color-text-lo);
}
.player-placeholder__num {
  font: 300 4rem/1 var(--font-display);
  color: var(--color-accent);
}
.player-spinner {
  width: 32px; height: 32px;
  border: 2px solid var(--color-rule); border-top-color: var(--color-accent);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Utilitários ── */
.hide-mobile { @media (max-width: 768px) { display: none !important; } }
.show-mobile { @media (min-width: 768px) { display: none !important; } }
.flex { display: flex; }
.flex-1 { flex: 1; }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }