/* ============================================================================
   TEACHER UP · ENHANCEMENTS
   Camada de refinamento visual — SOBRESCREVE main.css em pontos específicos.
   Ordem @layer: reset < tokens < base < layout < components < utilities <
   responsive < enhancements (última = ganha).
   ============================================================================ */

@layer enhancements;

@layer enhancements {

/* ============================================================================
   0.  TOKENS EXTRAS — nova paleta de destaque, gradientes, glows, timing
   ============================================================================ */
:root {
  --accent-hi:      #a5b4fc;
  --accent-lo:      #4338ca;
  --accent-glow:    rgba(99, 102, 241, 0.35);
  --gold-500:       #eab308;
  --gold-100:       #fef3c7;
  --gold-glow:      rgba(234, 179, 8, 0.35);
  --sky-100:        #e0f2fe;
  --sky-500:        #0ea5e9;
  --violet-100:     #ede9fe;
  --violet-500:     #8b5cf6;
  --violet-700:     #6d28d9;
  --emerald-100:    #d1fae5;
  --emerald-500:    #10b981;
  --emerald-700:    #047857;

  --grad-brand:     linear-gradient(135deg, var(--indigo-600) 0%, var(--violet-500) 55%, var(--indigo-700) 100%);
  --grad-brand-lo:  linear-gradient(135deg, #f5f3ff 0%, #eef2ff 60%, #ede9fe 100%);
  --grad-warm:      linear-gradient(135deg, #fef3c7 0%, #fecaca 55%, #fde68a 100%);
  --grad-cool:      linear-gradient(135deg, #dbeafe 0%, #e0e7ff 55%, #cffafe 100%);
  --grad-hero:      radial-gradient(60% 55% at 50% 0%, var(--brand-soft) 0%, transparent 70%),
                    radial-gradient(45% 40% at 100% 100%, var(--violet-100) 0%, transparent 65%),
                    radial-gradient(45% 40% at 0% 100%, var(--sky-100) 0%, transparent 65%);
  --grad-shine:     linear-gradient(120deg, transparent 30%, rgba(255,255,255,.65) 50%, transparent 70%);
  --grad-cta:       linear-gradient(135deg, var(--indigo-700) 0%, var(--indigo-600) 50%, var(--violet-500) 100%);
  --grad-glass:     linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.35) 100%);

  --glow-brand:     0 12px 32px -8px var(--accent-glow), 0 4px 10px -4px rgba(79, 70, 229, 0.25);
  --glow-brand-lg:  0 24px 60px -12px var(--accent-glow), 0 8px 20px -8px rgba(79, 70, 229, 0.35);
  --glow-gold:      0 10px 28px -8px var(--gold-glow), 0 3px 8px -3px rgba(234, 179, 8, 0.25);
  --glow-success:   0 10px 28px -8px rgba(16, 185, 129, 0.35), 0 3px 8px -3px rgba(16, 185, 129, 0.25);

  --ring-brand:     0 0 0 var(--fib-3) var(--brand-soft), 0 0 0 var(--fib-5) rgba(99, 102, 241, 0.15);
  --ring-focus:     0 0 0 var(--fib-3) rgba(99, 102, 241, 0.4);

  --shine-mask:     linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 70%);

  --t-elastic:      380ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-emphatic:     560ms cubic-bezier(0.22, 1, 0.36, 1);
  --t-smoothout:    280ms cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-glow:    0 0 var(--fib-34) rgba(99, 102, 241, 0.16);
  --shadow-crisp:   0 0 0 var(--fib-1) rgba(15, 23, 42, 0.05), 0 var(--fib-13) var(--fib-34) rgba(15, 23, 42, 0.10);
  --shadow-inset:   inset 0 var(--fib-1) 0 rgba(255, 255, 255, 0.6);

  --radius-blob-a:  38% 62% 63% 37% / 41% 44% 56% 59%;
  --radius-blob-b:  63% 37% 54% 46% / 55% 48% 52% 45%;
}
[data-theme="dark"] {
  --accent-glow:    rgba(129, 140, 248, 0.30);
  --grad-brand-lo:  linear-gradient(135deg, #1e1b4b 0%, #312e81 60%, #4c1d95 100%);
  --grad-hero:      radial-gradient(60% 55% at 50% 0%, rgba(99,102,241,.20) 0%, transparent 70%),
                    radial-gradient(45% 40% at 100% 100%, rgba(139,92,246,.14) 0%, transparent 65%),
                    radial-gradient(45% 40% at 0% 100%, rgba(14,165,233,.14) 0%, transparent 65%);
  --shadow-crisp:   0 0 0 var(--fib-1) rgba(255, 255, 255, 0.05), 0 var(--fib-13) var(--fib-34) rgba(0, 0, 0, 0.5);
  --shadow-inset:   inset 0 var(--fib-1) 0 rgba(255, 255, 255, 0.08);
}

/* ============================================================================
   1.  TRUST LIST — chip pills com glow, ícone circular
   ============================================================================ */
.trust-list {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--fib-8) var(--fib-13);
  padding: 0; margin: var(--fib-21) auto 0;
  max-width: 640px;
}
.trust-list li {
  display: inline-flex; align-items: center; gap: var(--fib-8);
  padding: var(--fib-5) var(--fib-13) var(--fib-5) var(--fib-8);
  background: var(--surface); color: var(--ink);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--text-sm); font-weight: 600;
  box-shadow: var(--shadow-xs), var(--shadow-inset);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-fast) var(--ease);
}
.trust-list li::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--emerald-100); color: var(--emerald-700);
  font-size: 0.7em;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--emerald-100);
}
.trust-list li:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 30%, transparent);
  box-shadow: var(--shadow-sm), 0 6px 16px -6px var(--accent-glow);
}
.hero-split .trust-list { justify-content: flex-start; margin-inline: 0; }
.hero-split .trust-list li { animation: chipRise .5s var(--t-smoothout) both; }
.hero-split .trust-list li:nth-child(1) { animation-delay: 60ms; }
.hero-split .trust-list li:nth-child(2) { animation-delay: 120ms; }
.hero-split .trust-list li:nth-child(3) { animation-delay: 180ms; }
.hero-split .trust-list li:nth-child(4) { animation-delay: 240ms; }
@keyframes chipRise {
  from { opacity: 0; transform: translateY(8px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
[data-theme="dark"] .trust-list li::before {
  background: rgba(16, 185, 129, 0.20); color: #6ee7b7;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px rgba(16, 185, 129, 0.30);
}

/* ============================================================================
   2.  ANNOUNCE BAR — gradient sutil, ícone com pulse, hover expansive
   ============================================================================ */
.announce {
  display: block;
  background: var(--grad-brand);
  color: #fff;
  text-align: center;
  padding: var(--fib-8) var(--fib-13);
  font-size: var(--text-sm); font-weight: 500;
  position: relative; overflow: hidden;
  transition: filter var(--t-base) var(--ease);
}
.announce::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--grad-shine);
  transform: translateX(-100%);
  animation: announceShine 6s ease-in-out infinite;
  pointer-events: none;
}
.announce > i { margin-inline-end: var(--fib-5); animation: pop 1.6s ease-in-out infinite; display: inline-block; }
.announce strong { color: #fff; letter-spacing: 0.01em; }
.announce:hover { filter: brightness(1.06); }
@keyframes announceShine {
  0%   { transform: translateX(-100%); }
  35%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
@keyframes pop {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18) rotate(-6deg); }
}
a.announce:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* ============================================================================
   3.  HERO — gradientes suaves, badge pulsante, decorações blob
   ============================================================================ */
.hero { background: var(--grad-hero); position: relative; }
.hero::before { display: none; }
.hero::after {
  content: '';
  position: absolute; inset-inline: 0; inset-block-end: 0;
  height: 120px;
  background: linear-gradient(180deg, transparent 0%, var(--bg) 100%);
  pointer-events: none;
}
.hero__eyebrow {
  background: var(--surface);
  border: var(--fib-1) solid color-mix(in srgb, var(--brand) 20%, var(--line));
  box-shadow: var(--shadow-sm), var(--shadow-inset);
  animation: eyebrowFloat 6s ease-in-out infinite;
}
.hero__eyebrow > i { color: var(--brand); }
@keyframes eyebrowFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-3px); }
}
.hero__title {
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, var(--ink) 0%, color-mix(in srgb, var(--ink) 88%, transparent) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: titleReveal .8s var(--t-emphatic) both;
}
.hero__title .accent {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  position: relative; display: inline-block;
}
.hero__title .accent::after {
  content: '';
  position: absolute; inset-inline: 0; inset-block-end: -6%;
  height: 8%;
  background: linear-gradient(90deg, transparent, var(--accent-hi), transparent);
  border-radius: var(--r-pill);
  opacity: 0.6;
}
@keyframes titleReveal {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.hero__lead {
  animation: titleReveal 1s var(--t-emphatic) .12s both;
  max-width: 54ch;
}
.hero__actions { animation: titleReveal 1s var(--t-emphatic) .22s both; }
.hero__actions .btn--primary {
  background: var(--grad-cta);
  border: none;
  box-shadow: var(--glow-brand);
  position: relative; overflow: hidden;
}
.hero__actions .btn--primary::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--shine-mask);
  transform: translateX(-100%);
  transition: transform var(--t-emphatic) var(--ease);
}
.hero__actions .btn--primary:hover::after { transform: translateX(100%); }
.hero__actions .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-brand-lg);
}
.hero-split { gap: var(--fib-89); }
.hero-media img {
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg), 0 24px 60px -20px var(--accent-glow);
  border: var(--fib-1) solid color-mix(in srgb, var(--brand) 15%, var(--line));
  transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);
  transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.hero-media:hover img {
  transform: perspective(1200px) rotateY(0) rotateX(0) translateY(-4px);
  box-shadow: var(--shadow-lg), 0 40px 80px -20px var(--accent-glow);
}
.hero-media { position: relative; padding: var(--fib-13); }
.hero-media::before, .hero-media::after {
  content: '';
  position: absolute; z-index: -1;
  width: 55%; height: 55%;
  filter: blur(50px); opacity: 0.55;
}
.hero-media::before {
  inset-inline-start: -8%; inset-block-start: -8%;
  background: var(--violet-500);
  border-radius: var(--radius-blob-a);
  animation: blobFloat 12s ease-in-out infinite;
}
.hero-media::after {
  inset-inline-end: -12%; inset-block-end: -12%;
  background: var(--sky-500);
  border-radius: var(--radius-blob-b);
  animation: blobFloat 15s ease-in-out infinite reverse;
}
@keyframes blobFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(3%, 5%) scale(1.05); }
  66%     { transform: translate(-4%, -3%) scale(0.95); }
}
.hero-media__badge {
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--fib-13) var(--fib-21);
  box-shadow: var(--shadow-md);
  animation: badgeFloat 4s ease-in-out infinite;
}
.hero-media__badge .num {
  display: inline-grid; place-items: center;
  width: var(--fib-34); height: var(--fib-34);
  background: var(--grad-brand); color: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--glow-brand);
}
@keyframes badgeFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}

/* ============================================================================
   4.  SECTION HEAD — eyebrow com dot, títulos com kicker
   ============================================================================ */
.section-eyebrow {
  display: inline-flex; align-items: center; gap: var(--fib-8);
  padding: var(--fib-3) var(--fib-13);
  background: var(--brand-soft); color: var(--brand);
  border-radius: var(--r-pill);
  font-size: var(--text-caption); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-block-end: var(--fib-13);
  border: var(--fib-1) solid color-mix(in srgb, var(--brand) 25%, transparent);
}
.section-eyebrow::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 8px var(--accent-glow);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 0.4; transform: scale(0.8); }
  50%     { opacity: 1;   transform: scale(1.2); }
}
.section-head h2 { letter-spacing: -0.02em; }
.section-head p { color: var(--ink-soft); }

/* ============================================================================
   5.  STEPS — timeline com número tipográfico, hover reveal
   ============================================================================ */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fib-34);
  margin-block-start: var(--fib-55); counter-reset: step;
}
.step {
  position: relative;
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--fib-34) var(--fib-21) var(--fib-21);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
  counter-increment: step;
}
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.step__num {
  position: absolute;
  inset-block-start: calc(-1 * var(--fib-21));
  inset-inline-start: var(--fib-21);
  display: grid; place-items: center;
  width: var(--fib-55); height: var(--fib-55);
  background: var(--grad-brand); color: #fff;
  border-radius: var(--r-lg);
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-h3);
  box-shadow: var(--glow-brand);
}
.step__num::before { content: counter(step); }
.step h3 { margin-block-start: var(--fib-13); margin-block-end: var(--fib-8); font-size: var(--text-lg); }
.step p { color: var(--ink-soft); font-size: var(--text-sm); }
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-end: calc(-1 * var(--fib-21));
  inset-block-start: 50%;
  width: var(--fib-21); height: 2px;
  background: linear-gradient(90deg, var(--line) 0%, transparent 100%);
}

/* ============================================================================
   6.  FEATURE CARDS — hover reveal com borda animada + ícone com fundo
   ============================================================================ */
.grid-auto { gap: var(--fib-21); }
.feature {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  padding: var(--fib-34) var(--fib-21);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.feature::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--grad-brand-lo);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
  pointer-events: none; z-index: 0;
}
.feature::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: var(--fib-1);
  background: var(--grad-brand);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--t-base) var(--ease);
  pointer-events: none;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.feature:hover::before { opacity: 0.7; }
.feature:hover::after  { opacity: 1; }
.feature > * { position: relative; z-index: 1; }
.feature__icon {
  width: 56px; height: 56px;
  border-radius: var(--r-lg);
  background: var(--brand-soft); color: var(--brand);
  box-shadow: var(--shadow-xs), var(--shadow-inset);
  transition: transform var(--t-elastic) var(--ease), background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.feature:hover .feature__icon {
  transform: scale(1.08) rotate(-4deg);
  background: var(--grad-brand); color: #fff;
  box-shadow: var(--glow-brand);
}
.feature__title { font-size: var(--text-lg); margin-block-end: var(--fib-5); }
.feature p { color: var(--ink-soft); }

/* ============================================================================
   7.  CURRICULUM — cada aula com duração, marca de progresso, hover
   ============================================================================ */
.curriculum {
  gap: var(--fib-8);
  max-width: 760px;
  padding: var(--fib-8);
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.curriculum__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--fib-13);
  padding: var(--fib-13) var(--fib-21);
  border-radius: var(--r-md);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  cursor: default;
}
.curriculum__item:hover { background: var(--surface-2); transform: translateX(4px); }
.curriculum__num {
  display: grid; place-items: center;
  width: var(--fib-34); height: var(--fib-34);
  background: var(--brand-soft); color: var(--brand);
  border-radius: var(--r-md);
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-inset);
}
.curriculum__title { color: var(--ink); font-weight: 600; font-size: var(--text-base); }
.curriculum__meta {
  display: inline-flex; align-items: center; gap: var(--fib-5);
  padding: var(--fib-3) var(--fib-8);
  background: var(--surface-2); color: var(--ink-soft);
  border-radius: var(--r-pill);
  font-size: var(--text-caption); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.curriculum__meta::before {
  content: '\f017';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  color: var(--brand); font-size: 0.85em;
}

/* ============================================================================
   8.  COMPARE — before/after com ícones no lugar de bullets
   ============================================================================ */
.compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--fib-21);
  margin-block-start: var(--fib-34);
}
.compare__col {
  border-radius: var(--r-lg);
  padding: var(--fib-34) var(--fib-21);
  box-shadow: var(--shadow-sm);
}
.compare__col--before {
  background: linear-gradient(180deg, var(--red-50) 0%, var(--surface) 100%);
  border: var(--fib-1) solid color-mix(in srgb, var(--red-500) 22%, var(--line));
}
.compare__col--after {
  background: linear-gradient(180deg, var(--brand-soft) 0%, var(--surface) 100%);
  border: var(--fib-1) solid color-mix(in srgb, var(--brand) 30%, var(--line));
  box-shadow: var(--shadow-md), 0 20px 40px -20px var(--accent-glow);
}
.compare__col h3 { font-size: var(--text-lg); margin-block-end: var(--fib-21); }
.compare__col ul { display: flex; flex-direction: column; gap: var(--fib-13); }
.compare__col li {
  display: flex; align-items: flex-start; gap: var(--fib-8);
  font-size: var(--text-sm); color: var(--ink-soft);
  padding: var(--fib-8); border-radius: var(--r-md);
  transition: background var(--t-fast) var(--ease);
}
.compare__col li:hover { background: var(--surface); }
.compare__col--before li::before,
.compare__col--after li::before {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%; font-size: 0.7em;
}
.compare__col--before li::before {
  content: '\f00d'; background: var(--red-50); color: var(--red-600);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--red-500) 22%, transparent);
}
.compare__col--after li::before {
  content: '\f00c'; background: var(--emerald-100); color: var(--emerald-700);
  box-shadow: 0 0 0 1px var(--emerald-500);
}

/* ============================================================================
   9.  ABOUT — grid com moldura decorativa da foto, credenciais em cards
   ============================================================================ */
.about {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--fib-55);
  align-items: center;
}
.about-media { position: relative; }
.about-media__frame {
  position: absolute; inset: -14px;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--brand-soft), var(--sky-100));
  border: var(--fib-1) solid color-mix(in srgb, var(--brand) 25%, transparent);
  transform: rotate(-2deg);
  z-index: 0;
  box-shadow: var(--shadow-md);
}
.about-media picture, .about-media img {
  position: relative; z-index: 1;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  border: var(--fib-1) solid var(--line);
}
.about-tag {
  display: inline-flex; align-items: center; gap: var(--fib-5);
  padding: var(--fib-5) var(--fib-13);
  background: var(--brand-soft); color: var(--brand-strong);
  border-radius: var(--r-pill);
  font-size: var(--text-caption); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-block-end: var(--fib-13);
}
.about h2, .about h1 { letter-spacing: -0.02em; margin-block-end: var(--fib-13); }
.about p + p { margin-block-start: var(--fib-13); }
.about__credentials {
  display: flex; flex-direction: column; gap: var(--fib-13);
  margin-block-start: var(--fib-21);
}
.credential {
  display: flex; align-items: center; gap: var(--fib-13);
  padding: var(--fib-13);
  background: var(--surface); border: var(--fib-1) solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.credential:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
}
.credential__icon {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: var(--fib-55); height: var(--fib-55);
  background: var(--grad-brand); color: #fff;
  border-radius: var(--r-md);
  font-size: var(--text-h3);
  box-shadow: var(--shadow-inset);
}
.credential > div { display: flex; flex-direction: column; gap: 2px; }
.credential strong { color: var(--ink); font-weight: 700; }
.credential span { color: var(--ink-soft); font-size: var(--text-sm); }

/* ============================================================================
   10.  PRICING — card premium com badge dourado, glow, checklist
   ============================================================================ */
.pricing {
  display: flex; justify-content: center;
  margin-block-start: var(--fib-34);
}
.price-card {
  position: relative;
  width: 100%; max-width: 480px;
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--fib-55) var(--fib-34) var(--fib-34);
  box-shadow: var(--shadow-lg), 0 30px 60px -20px var(--accent-glow);
  text-align: center;
  overflow: hidden;
}
.price-card::before {
  content: '';
  position: absolute; inset: 0;
  padding: var(--fib-2);
  background: var(--grad-brand);
  border-radius: inherit;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.price-card__flag {
  position: absolute;
  inset-block-start: -1px; inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: var(--fib-5) var(--fib-21);
  background: var(--grad-brand); color: #fff;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: var(--text-caption); font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  box-shadow: var(--glow-brand);
}
.price-card__old {
  color: var(--muted); font-size: var(--text-sm);
  text-decoration: line-through;
  margin-block-end: var(--fib-5);
}
.price-card__value {
  font-family: var(--font-display);
  font-weight: 800; font-size: 4.5rem; line-height: 1;
  color: var(--ink); letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: baseline; gap: var(--fib-3);
}
.price-card__value small {
  font-size: 1.25rem; color: var(--ink-soft);
  font-weight: 700; letter-spacing: 0;
}
.price-card__cents { font-size: 1.5rem; color: var(--ink-soft); font-weight: 700; }
.price-card__note {
  color: var(--ink-soft); font-size: var(--text-sm);
  margin-block: var(--fib-8) var(--fib-21);
}
.price-card__list {
  text-align: start;
  display: flex; flex-direction: column; gap: var(--fib-8);
  margin-block-end: var(--fib-21);
  padding: var(--fib-13);
  background: var(--brand-soft);
  border-radius: var(--r-md);
}
.price-card__list li {
  display: flex; align-items: flex-start; gap: var(--fib-8);
  font-size: var(--text-sm); color: var(--ink);
  padding-block: var(--fib-3);
}
.price-card__list li::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--emerald-500); color: #fff;
  font-size: 0.65em;
  box-shadow: 0 0 0 2px var(--brand-soft);
}
.price-card .btn--primary {
  width: 100%; min-height: 60px;
  font-size: var(--text-lg); font-weight: 700;
  background: var(--grad-cta);
  border: none;
  box-shadow: var(--glow-brand);
  position: relative; overflow: hidden;
}
.price-card .btn--primary::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--shine-mask);
  transform: translateX(-100%);
  transition: transform var(--t-emphatic) var(--ease);
}
.price-card .btn--primary:hover::after { transform: translateX(100%); }
.price-card .btn--primary:hover { transform: translateY(-2px); box-shadow: var(--glow-brand-lg); }
.price-card__guarantee {
  margin-block-start: var(--fib-13);
  font-size: var(--text-caption); color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: var(--fib-5);
  flex-wrap: wrap; justify-content: center;
}

/* ============================================================================
   11.  GUARANTEE BAND — badge dourado + copy
   ============================================================================ */
.guarantee {
  display: flex; align-items: center; gap: var(--fib-21);
  padding: var(--fib-21) var(--fib-34);
  background: linear-gradient(135deg, var(--gold-100) 0%, #fef9c3 100%);
  border: var(--fib-1) solid color-mix(in srgb, var(--gold-500) 40%, transparent);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm), var(--glow-gold);
  max-width: 720px; margin-inline: auto;
}
.guarantee__icon {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: var(--fib-89); height: var(--fib-89);
  background: var(--gold-500); color: #fff;
  border-radius: var(--r-lg);
  font-size: 2rem;
  box-shadow: var(--glow-gold);
  animation: shieldPulse 3s ease-in-out infinite;
}
@keyframes shieldPulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.05); }
}
.guarantee strong { color: #713f12; font-size: var(--text-lg); }
.guarantee p { color: #854d0e; margin-block-start: var(--fib-5); font-size: var(--text-sm); }

/* ============================================================================
   12.  FAQ — details premium, chevron rotate, expand smooth
   ============================================================================ */
.faq { display: flex; flex-direction: column; gap: var(--fib-13); }
.faq details {
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.faq details[open] {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
  box-shadow: var(--shadow-sm);
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: var(--fib-21);
  font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: var(--fib-13);
  position: relative;
  transition: background var(--t-fast) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: '\f078';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  color: var(--brand); font-size: 0.8em;
  display: grid; place-items: center;
  width: var(--fib-34); height: var(--fib-34);
  background: var(--brand-soft); border-radius: var(--r-md);
  transition: transform var(--t-base) var(--ease);
  flex-shrink: 0;
}
.faq details[open] summary::before { transform: rotate(180deg); }
.faq summary:hover { background: var(--surface-2); }
.faq details > div {
  padding: 0 var(--fib-21) var(--fib-21) calc(var(--fib-34) + var(--fib-34));
  color: var(--ink-soft);
  animation: faqReveal 0.35s var(--t-smoothout) both;
}
@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   13.  CTA BAND — gradient premium, decorações
   ============================================================================ */
.cta-band {
  background: var(--grad-cta);
  border-radius: var(--r-xl);
  padding: var(--fib-89) var(--fib-34);
  text-align: center;
  color: #fff;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-lg), var(--glow-brand-lg);
}
.cta-band::before,
.cta-band::after {
  content: '';
  position: absolute; z-index: 0;
  width: 400px; height: 400px;
  border-radius: 50%;
  filter: blur(80px); opacity: 0.35;
  pointer-events: none;
}
.cta-band::before {
  inset-inline-start: -100px; inset-block-start: -100px;
  background: var(--violet-500);
  animation: blobFloat 12s ease-in-out infinite;
}
.cta-band::after {
  inset-inline-end: -100px; inset-block-end: -100px;
  background: var(--sky-500);
  animation: blobFloat 14s ease-in-out infinite reverse;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); }
.cta-band p { color: rgba(255,255,255,0.9); margin-block-start: var(--fib-13); font-size: var(--text-lg); }
.cta-band .btn--primary {
  background: #fff; color: var(--brand); border: none;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.3);
}
.cta-band .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.35);
}
.cta-band .btn--outline {
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.cta-band .btn--outline:hover { background: rgba(255, 255, 255, 0.2); border-color: #fff; }

/* ============================================================================
   14.  FOOTER — premium com colunas, socials com glow
   ============================================================================ */
.site-footer {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border-block-start: var(--fib-1) solid var(--line);
  padding-block: var(--fib-34);
}
.site-footer__inner {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fib-21);
  align-items: center;
}
.site-footer a {
  display: inline-flex; align-items: center; gap: var(--fib-5);
  padding: var(--fib-5) var(--fib-8);
  border-radius: var(--r-md);
  color: var(--ink) !important;
  font-weight: 600;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.site-footer a:hover {
  background: var(--brand-soft); color: var(--brand) !important;
  transform: translateY(-1px);
}
.site-footer a i {
  color: var(--brand);
  font-size: var(--text-lg);
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.site-footer a:hover i { transform: scale(1.15) rotate(-6deg); }

/* ============================================================================
   15.  LOGIN PAGE — card com pattern lateral, floating labels
   ============================================================================ */
.section:has(#login-card),
.section:has(#signup-card) {
  min-height: calc(100dvh - var(--header-h));
  display: grid; place-items: center;
  background:
    radial-gradient(60% 55% at 100% 0%, var(--brand-soft) 0%, transparent 60%),
    radial-gradient(50% 45% at 0% 100%, var(--violet-100) 0%, transparent 60%),
    var(--bg);
}
#login-card, #signup-card {
  position: relative;
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--fib-55) var(--fib-34);
  box-shadow: var(--shadow-lg), 0 30px 60px -20px var(--accent-glow);
  overflow: hidden;
  animation: cardIn .5s var(--t-elastic) both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
#login-card::before, #signup-card::before {
  content: '';
  position: absolute;
  inset-block-start: -80px; inset-inline-end: -80px;
  width: 220px; height: 220px;
  background: var(--grad-brand);
  border-radius: var(--radius-blob-a);
  opacity: 0.10;
  filter: blur(30px);
  animation: blobFloat 14s ease-in-out infinite;
  pointer-events: none;
}
#login-card h1, #signup-card h1 {
  text-align: center;
  font-size: var(--text-h2);
  letter-spacing: -0.02em;
  margin-block-end: var(--fib-8);
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#login-card > p, #signup-card > p {
  text-align: center; color: var(--ink-soft);
  margin-block-end: var(--fib-34);
}
.field { position: relative; }
.field > label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  display: block; margin-block-end: var(--fib-5);
}
.field > input,
.field > .input,
.field > textarea,
.field > select {
  transition:
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}
.field > input:focus,
.field > .input:focus,
.field > textarea:focus,
.field > select:focus {
  border-color: var(--brand);
  box-shadow: var(--ring-focus);
  background: color-mix(in srgb, var(--brand-soft) 25%, var(--surface));
}
.field > input::placeholder,
.field > textarea::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }

.field-hint {
  display: inline-flex; align-items: center; gap: var(--fib-5);
  color: var(--ink-soft); font-size: var(--text-caption);
  margin-block-start: var(--fib-5);
}
.field-hint::before {
  content: '\f05a';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  color: var(--brand); font-size: 0.85em;
}
#login-form .btn--primary,
#signup-form .btn--primary {
  background: var(--grad-cta);
  border: none;
  box-shadow: var(--glow-brand);
  position: relative; overflow: hidden;
}
#login-form .btn--primary::after,
#signup-form .btn--primary::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--shine-mask);
  transform: translateX(-100%);
  transition: transform var(--t-emphatic) var(--ease);
}
#login-form .btn--primary:hover::after,
#signup-form .btn--primary:hover::after { transform: translateX(100%); }
.pw-strength {
  gap: var(--fib-3);
  margin-block-start: var(--fib-5);
  padding: var(--fib-3);
  background: var(--surface-2);
  border-radius: var(--r-pill);
}
.pw-strength span {
  border-radius: var(--r-pill);
  height: var(--fib-3);
  transition: background var(--t-base) var(--ease);
}
.hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--line) 20%, var(--line) 80%, transparent 100%);
  margin-block: var(--fib-21);
}

/* ============================================================================
   16.  APP SHELL (dashboard, aula) — sidebar refinada, avatar
   ============================================================================ */
.app-shell { background: var(--bg); }
.app-sidebar {
  background: var(--surface);
  border-inline-end: var(--fib-1) solid var(--line);
  box-shadow: 0 0 0 rgba(0,0,0,0), var(--shadow-sm);
}
.app-sidebar .brand {
  font-size: var(--text-h3);
  padding-block-end: var(--fib-21);
  border-block-end: var(--fib-1) solid var(--line-soft);
  margin-block-end: var(--fib-21);
}
.app-sidebar__greet {
  display: flex; align-items: center; gap: var(--fib-13);
  padding: var(--fib-13);
  background: var(--brand-soft);
  border-radius: var(--r-md);
  margin-block-end: var(--fib-21);
  color: var(--ink);
  font-size: var(--text-sm);
}
.app-sidebar__greet::before {
  content: '';
  flex-shrink: 0;
  width: var(--fib-34); height: var(--fib-34);
  border-radius: 50%;
  background: var(--grad-brand);
  box-shadow: var(--shadow-inset);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,0)),
    var(--grad-brand);
}
.app-sidebar__greet > i { display: none; }
.app-sidebar__greet strong { color: var(--ink); font-weight: 700; }
.side-nav {
  display: flex; flex-direction: column; gap: var(--fib-3);
}
.side-nav__link {
  display: flex; align-items: center; gap: var(--fib-13);
  padding: var(--fib-13);
  border-radius: var(--r-md);
  color: var(--ink-soft);
  font-size: var(--text-sm); font-weight: 500;
  text-align: start; width: 100%;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.side-nav__link > i {
  width: 20px; text-align: center; color: var(--muted);
  transition: color var(--t-fast) var(--ease);
}
.side-nav__link:hover {
  background: var(--surface-2); color: var(--ink);
  transform: translateX(2px);
}
.side-nav__link:hover > i { color: var(--brand); }
.side-nav__link.is-active {
  background: var(--brand-soft); color: var(--brand);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand);
}
.side-nav__link.is-active > i { color: var(--brand); }
.side-nav__link--danger:hover { background: var(--danger-soft); color: var(--danger); }
.side-nav__link--danger:hover > i { color: var(--danger); }
.side-nav__sep {
  border: none; height: 1px; background: var(--line-soft);
  margin-block: var(--fib-8);
}

/* ============================================================================
   17.  PROGRESS HERO no dashboard
   ============================================================================ */
.progress-hero {
  display: flex; align-items: center; gap: var(--fib-34);
  padding: var(--fib-34);
  background: linear-gradient(135deg, var(--brand-soft) 0%, var(--surface) 60%);
  border: var(--fib-1) solid color-mix(in srgb, var(--brand) 20%, var(--line));
  box-shadow: var(--shadow-md);
}
.progress-hero .grow { flex: 1; min-width: 0; }
.progress-hero h3 {
  color: var(--ink);
  font-size: var(--text-h3);
  margin-block-end: var(--fib-5);
}
.progress-hero__ring {
  width: 140px; height: 140px;
  flex-shrink: 0;
  background:
    radial-gradient(closest-side, var(--surface) 78%, transparent 79%),
    conic-gradient(from -90deg, var(--brand) calc(var(--value, 0) * 1%), var(--surface-2) 0);
  filter: drop-shadow(0 8px 20px var(--accent-glow));
  animation: ringSpinIn 1s var(--t-emphatic) both;
}
@keyframes ringSpinIn {
  from { transform: rotate(-10deg) scale(0.9); opacity: 0; }
  to   { transform: rotate(0)      scale(1);   opacity: 1; }
}
.progress {
  height: 10px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border-radius: var(--r-pill);
  overflow: hidden;
  position: relative;
}
.progress__bar {
  height: 100%;
  background: var(--grad-brand);
  border-radius: var(--r-pill);
  transition: width .8s var(--t-emphatic);
  position: relative; overflow: hidden;
}
.progress__bar::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--shine-mask);
  animation: progressShine 2.5s ease-in-out infinite;
}
@keyframes progressShine {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* ============================================================================
   18.  LESSON ITEM — cada aula com thumbnail, meta, progress inline
   ============================================================================ */
.lesson-item {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--fib-13);
  padding: var(--fib-13) var(--fib-21);
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  transition:
    transform var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
}
.lesson-item:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
}
.lesson-item__num {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: var(--fib-55); height: var(--fib-55);
  background: var(--brand-soft); color: var(--brand);
  border-radius: var(--r-md);
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg);
  box-shadow: var(--shadow-inset);
  position: relative;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.lesson-item.is-complete .lesson-item__num {
  background: var(--grad-brand); color: #fff;
  box-shadow: var(--glow-brand);
}
.lesson-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lesson-item__body strong { color: var(--ink); font-size: var(--text-base); font-weight: 600; }
.lesson-item__body span {
  color: var(--ink-soft);
  font-size: var(--text-caption);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lesson-item .badge {
  flex-shrink: 0;
  padding: var(--fib-3) var(--fib-13);
  font-size: var(--text-caption);
  min-height: 26px;
}
.lesson-item.is-complete { background: linear-gradient(90deg, var(--emerald-100) 0%, var(--surface) 25%); }
.lesson-item.is-locked { opacity: 0.6; pointer-events: none; }

/* ============================================================================
   19.  AULA PAGE — player wrapper premium
   ============================================================================ */
.video-wrap {
  aspect-ratio: 16/9;
  border-radius: var(--r-lg);
  background: #000;
  box-shadow: var(--shadow-lg), 0 30px 60px -20px rgba(0,0,0,0.3);
  overflow: hidden;
  position: relative;
}
.video-wrap video {
  width: 100%; height: 100%;
  display: block;
}
.video-wrap::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: var(--fib-1);
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.prose { max-width: 68ch; }
.prose > h2 {
  margin-block-start: var(--fib-34);
  padding-block-start: var(--fib-13);
  border-block-start: var(--fib-1) solid var(--line-soft);
}
.prose > h2:first-child { margin-block-start: 0; padding-block-start: 0; border: none; }
.prose > p { margin-block-end: var(--fib-13); font-size: var(--text-base); line-height: 1.75; }
.prose > table {
  width: 100%; margin-block: var(--fib-21);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  border-collapse: separate; border-spacing: 0;
}
.prose > table thead { background: var(--brand-soft); }
.prose > table thead th {
  color: var(--brand-strong);
  text-transform: uppercase; letter-spacing: 0.05em;
  font-size: var(--text-caption); font-weight: 700;
  padding: var(--fib-13);
  text-align: start;
  border-block-end: var(--fib-1) solid color-mix(in srgb, var(--brand) 30%, transparent);
}
.prose > table tbody tr:nth-child(even) { background: var(--surface-2); }
.prose > table tbody td {
  padding: var(--fib-8) var(--fib-13);
  border-block-end: var(--fib-1) solid var(--line-soft);
  font-size: var(--text-sm);
  vertical-align: top;
}
.prose > table tbody tr:hover { background: var(--brand-soft); }
.prose > table tbody tr:last-child td { border-block-end: none; }

.flex-between {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--fib-13);
  margin-block-start: var(--fib-21);
}
.flex-between .btn { min-height: var(--fib-55); }

/* ============================================================================
   20.  QUIZ MODAL — bloco premium
   ============================================================================ */
.modal__panel {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg), 0 30px 80px -20px rgba(0,0,0,0.4);
  max-width: 640px; width: 100%;
  max-height: 92vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  animation: modalIn .35s var(--t-elastic) both;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.modal__head {
  display: flex; align-items: center; gap: var(--fib-13);
  padding: var(--fib-21) var(--fib-34);
  border-block-end: var(--fib-1) solid var(--line);
  background: var(--surface);
}
.modal__title { margin: 0; font-size: var(--text-h3); flex: 1; }
.modal__close {
  display: grid; place-items: center;
  width: var(--fib-34); height: var(--fib-34);
  background: var(--surface-2); border: none;
  border-radius: var(--r-md);
  cursor: pointer; font-size: 1.4rem; line-height: 1;
  color: var(--ink-soft);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.modal__close:hover { background: var(--danger-soft); color: var(--danger); }
.modal__body {
  padding: var(--fib-34);
  overflow-y: auto; flex: 1;
}
.modal__foot {
  display: flex; justify-content: flex-end; gap: var(--fib-13);
  padding: var(--fib-21) var(--fib-34);
  border-block-start: var(--fib-1) solid var(--line);
  background: var(--surface-2);
}
.quiz-track {
  height: 6px; background: var(--surface-2);
  border-radius: var(--r-pill); overflow: hidden;
  margin-block-end: var(--fib-21);
}
.quiz-track__fill {
  height: 100%; background: var(--grad-brand);
  border-radius: var(--r-pill); width: 0%;
  transition: width var(--t-slow) var(--ease);
}
.quiz-q { border: none; padding: 0; margin-block-end: var(--fib-21); }
.quiz-q legend {
  font-weight: 600; color: var(--ink); font-size: var(--text-base);
  margin-block-end: var(--fib-13);
}
.quiz-opts { display: flex; flex-direction: column; gap: var(--fib-8); }
.quiz-opt {
  display: flex; align-items: center; gap: var(--fib-13);
  padding: var(--fib-13);
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  min-height: 52px;
}
.quiz-opt input { accent-color: var(--brand); flex-shrink: 0; }
.quiz-opt:hover { border-color: var(--brand); background: var(--brand-soft); }
.quiz-opt:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: var(--ring-focus);
}
.quiz-opt span { color: var(--ink); font-weight: 500; }

/* ============================================================================
   21.  BUTTONS ENHANCED — ripple, shimmer no primary, glow no focus
   ============================================================================ */
.btn {
  min-height: var(--fib-55);
  border-radius: var(--r-md);
  font-weight: 600;
  letter-spacing: 0;
  position: relative;
  isolation: isolate;
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-base) var(--ease),
    background var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease);
}
.btn:focus-visible { box-shadow: var(--ring-focus); outline: none; }
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--grad-cta);
  color: #fff; border: none;
  box-shadow: var(--glow-brand);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-brand-lg);
  filter: brightness(1.06);
}
.btn--outline {
  background: transparent; color: var(--brand);
  border: 2px solid var(--brand);
}
.btn--outline:hover {
  background: var(--brand); color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn--ghost {
  background: transparent; color: var(--ink);
  border: 1px solid transparent;
}
.btn--ghost:hover {
  background: var(--surface-2); color: var(--brand);
}
.btn--success {
  background: linear-gradient(135deg, var(--emerald-500) 0%, var(--emerald-700) 100%);
  color: #fff; border: none;
  box-shadow: var(--glow-success);
}
.btn--success:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -8px rgba(16, 185, 129, 0.45); }
.btn--danger {
  background: linear-gradient(135deg, var(--red-500) 0%, var(--red-600) 100%);
  color: #fff; border: none;
  box-shadow: 0 10px 24px -8px rgba(220, 38, 38, 0.35);
}
.btn--lg { min-height: 60px; padding-inline: var(--fib-34); font-size: var(--text-base); font-weight: 700; }
.btn--sm { min-height: 44px; padding-inline: var(--fib-13); font-size: var(--text-caption); }
.btn i {
  display: inline-block;
  transition: transform var(--t-fast) var(--ease);
}
.btn:hover i.fa-arrow-right { transform: translateX(3px); }
.btn:hover i.fa-arrow-left { transform: translateX(-3px); }
.btn:hover i.fa-play { transform: scale(1.15); }
.btn:hover i.fa-download { transform: translateY(2px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ============================================================================
   22.  TOAST NOTIFICATIONS
   ============================================================================ */
.toast-stack {
  position: fixed;
  inset-block-end: var(--fib-21);
  inset-inline-end: var(--fib-21);
  display: flex; flex-direction: column; gap: var(--fib-8);
  z-index: var(--z-toast);
  max-width: 380px;
  pointer-events: none;
}
.toast {
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-md);
  padding: var(--fib-13) var(--fib-21);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
  font-size: var(--text-sm);
  display: flex; align-items: center; gap: var(--fib-13);
  pointer-events: auto;
  animation: toastIn .3s var(--t-elastic) both;
  border-inline-start: 4px solid var(--brand);
}
.toast--success { border-inline-start-color: var(--ok); }
.toast--warn    { border-inline-start-color: var(--amber-500); }
.toast--danger  { border-inline-start-color: var(--danger); }
.toast::before {
  content: '\f05a';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  display: grid; place-items: center;
  width: 32px; height: 32px; flex-shrink: 0;
  background: var(--brand-soft); color: var(--brand);
  border-radius: 50%;
}
.toast--success::before { content: '\f00c'; background: var(--emerald-100); color: var(--emerald-700); }
.toast--warn::before    { content: '\f071'; background: var(--amber-50); color: #b45309; }
.toast--danger::before  { content: '\f00d'; background: var(--danger-soft); color: var(--danger); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0)    scale(1); }
}

/* ============================================================================
   23.  BADGES — refino, animações
   ============================================================================ */
.badge {
  display: inline-flex; align-items: center; gap: var(--fib-3);
  padding: var(--fib-3) var(--fib-8);
  border-radius: var(--r-pill);
  font-size: var(--text-caption); font-weight: 600;
  background: var(--surface-2); color: var(--ink-soft);
  border: var(--fib-1) solid transparent;
}
.badge--brand   { background: var(--brand-soft); color: var(--brand-strong); border-color: color-mix(in srgb, var(--brand) 20%, transparent); }
.badge--success { background: var(--emerald-100); color: var(--emerald-700); border-color: color-mix(in srgb, var(--emerald-500) 30%, transparent); }
.badge--warn    { background: var(--amber-50); color: #b45309; border-color: color-mix(in srgb, var(--amber-500) 30%, transparent); }
.badge--danger  { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.badge--dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  animation: pulse 2s ease-in-out infinite;
}

/* ============================================================================
   24.  ALERTS
   ============================================================================ */
.alert {
  display: flex; align-items: flex-start; gap: var(--fib-13);
  padding: var(--fib-13) var(--fib-21);
  border-radius: var(--r-md);
  border-inline-start: 4px solid var(--brand);
  background: var(--surface-2);
  color: var(--ink);
  font-size: var(--text-sm);
}
.alert > i {
  color: var(--brand);
  font-size: var(--text-lg);
  flex-shrink: 0;
}
.alert--success { background: var(--emerald-100); border-color: var(--emerald-500); color: var(--emerald-700); }
.alert--success > i { color: var(--emerald-500); }
.alert--warn { background: var(--amber-50); border-color: var(--amber-500); color: #92400e; }
.alert--warn > i { color: var(--amber-500); }
.alert--danger { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.alert--danger > i { color: var(--danger); }
.alert strong { color: inherit; font-weight: 700; }
.alert a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* ============================================================================
   25.  KPI (admin)
   ============================================================================ */
.kpi {
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--fib-21);
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.kpi::before {
  content: '';
  position: absolute;
  inset-block-start: 0; inset-inline-end: 0;
  width: 80px; height: 80px;
  background: radial-gradient(circle at top right, var(--brand-soft), transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}
.kpi__icon {
  display: grid; place-items: center;
  width: var(--fib-55); height: var(--fib-55);
  background: var(--grad-brand); color: #fff;
  border-radius: var(--r-md);
  font-size: var(--text-h3);
  margin-block-end: var(--fib-13);
  box-shadow: var(--glow-brand);
}
.kpi__value {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.kpi__label {
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-weight: 500;
  margin-block-start: var(--fib-3);
}

/* ============================================================================
   26.  ROW LIST (admin)
   ============================================================================ */
.row-list__item {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--fib-13);
  padding: var(--fib-13);
  border-radius: var(--r-md);
  transition: background var(--t-fast) var(--ease);
}
.row-list__item:hover { background: var(--surface-2); }
.row-list__item + .row-list__item { border-block-start: var(--fib-1) solid var(--line-soft); }
.row-list__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row-list__main strong { color: var(--ink); font-weight: 600; }
.row-list__main .muted {
  color: var(--ink-soft); font-size: var(--text-caption);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-list__meta { display: flex; align-items: center; gap: var(--fib-8); flex-shrink: 0; }

/* ============================================================================
   27.  SKELETON LOADERS
   ============================================================================ */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, color-mix(in srgb, var(--surface-2) 60%, var(--surface)) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--r-md);
  color: transparent !important;
}
.skeleton--text { height: 1em; border-radius: var(--r-sm); margin-block: var(--fib-3); }
.skeleton--title { height: 1.5em; width: 60%; }
.skeleton--card { min-height: 120px; }
.skeleton--avatar { width: 48px; height: 48px; border-radius: 50%; }
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================================
   28.  UTILITY CLASSES NOVAS
   ============================================================================ */
.text-brand      { color: var(--brand) !important; }
.text-ok         { color: var(--ok) !important; }
.text-danger     { color: var(--danger) !important; }
.text-muted      { color: var(--ink-soft) !important; }
.text-center     { text-align: center; }
.text-start      { text-align: start; }
.text-end        { text-align: end; }
.center          { text-align: center; }
.grow            { flex: 1; min-width: 0; }
.shrink-0        { flex-shrink: 0; }
.gap-3           { gap: var(--fib-3); }
.gap-5           { gap: var(--fib-5); }
.gap-8           { gap: var(--fib-8); }
.gap-13          { gap: var(--fib-13); }
.gap-21          { gap: var(--fib-21); }
.gap-34          { gap: var(--fib-34); }
.pad-8           { padding: var(--fib-8); }
.pad-13          { padding: var(--fib-13); }
.pad-21          { padding: var(--fib-21); }
.pad-34          { padding: var(--fib-34); }
.mt-3            { margin-block-start: var(--fib-3); }
.mt-5            { margin-block-start: var(--fib-5); }
.mt-8            { margin-block-start: var(--fib-8); }
.mt-13           { margin-block-start: var(--fib-13); }
.mt-21           { margin-block-start: var(--fib-21); }
.mt-34           { margin-block-start: var(--fib-34); }
.mt-55           { margin-block-start: var(--fib-55); }
.mb-3            { margin-block-end: var(--fib-3); }
.mb-5            { margin-block-end: var(--fib-5); }
.mb-8            { margin-block-end: var(--fib-8); }
.mb-13           { margin-block-end: var(--fib-13); }
.mb-21           { margin-block-end: var(--fib-21); }
.mb-34           { margin-block-end: var(--fib-34); }
.mb-55           { margin-block-end: var(--fib-55); }
.round-md        { border-radius: var(--r-md); }
.round-lg        { border-radius: var(--r-lg); }
.round-xl        { border-radius: var(--r-xl); }
.round-full      { border-radius: 999px; }
.shadow-sm       { box-shadow: var(--shadow-sm); }
.shadow-md       { box-shadow: var(--shadow-md); }
.shadow-lg       { box-shadow: var(--shadow-lg); }
.shadow-glow     { box-shadow: var(--glow-brand); }
.uppercase       { text-transform: uppercase; letter-spacing: 0.06em; }
.tabular         { font-variant-numeric: tabular-nums; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar    { scrollbar-width: none; }
.tight           { letter-spacing: -0.02em; }
.tighter         { letter-spacing: -0.04em; }
.blur-sm         { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.blur-md         { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.reveal          { animation: revealUp .6s var(--t-smoothout) both; }
.reveal-d1       { animation-delay: 60ms; }
.reveal-d2       { animation-delay: 120ms; }
.reveal-d3       { animation-delay: 180ms; }
.reveal-d4       { animation-delay: 240ms; }
@keyframes revealUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in         { animation: fadeIn .5s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.float-1         { animation: floatY 5s ease-in-out infinite; }
.float-2         { animation: floatY 7s ease-in-out infinite reverse; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.spin            { animation: spinCW 1.2s linear infinite; }
@keyframes spinCW { to { transform: rotate(360deg); } }

/* ============================================================================
   29.  DIVIDERS DECORATIVOS
   ============================================================================ */
.divider {
  display: flex; align-items: center; gap: var(--fib-13);
  color: var(--muted); font-size: var(--text-caption);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-block: var(--fib-21);
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--line) 100%);
}
.divider::after { background: linear-gradient(90deg, var(--line) 0%, transparent 100%); }

.diamond-sep {
  display: flex; justify-content: center; align-items: center;
  gap: var(--fib-8);
  margin-block: var(--fib-34);
  color: var(--brand);
}
.diamond-sep::before, .diamond-sep::after {
  content: ''; width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
}
.diamond-sep i { font-size: var(--text-lg); }

/* ============================================================================
   30.  BREADCRUMB (novo — usar em sobre/validar/comprar/dashboard)
   ============================================================================ */
.breadcrumb {
  display: inline-flex; align-items: center; gap: var(--fib-5);
  padding: var(--fib-5) var(--fib-13);
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--text-caption); color: var(--ink-soft);
  margin-block-end: var(--fib-21);
  box-shadow: var(--shadow-xs);
}
.breadcrumb a { color: var(--ink-soft); font-weight: 500; }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb__sep {
  color: var(--muted);
  font-size: 0.7em;
}
.breadcrumb__current { color: var(--ink); font-weight: 600; }

/* ============================================================================
   31.  PATTERN OVERLAY — background sutil de dots pra hero/login
   ============================================================================ */
.dots-bg {
  position: relative;
}
.dots-bg::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, var(--line) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.dots-bg > * { position: relative; z-index: 1; }

/* ============================================================================
   32.  SCROLLBAR REFINADA
   ============================================================================ */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 45%, transparent);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--brand); background-clip: content-box; }

/* ============================================================================
   33.  SELECTION
   ============================================================================ */
::selection { background: var(--brand); color: #fff; text-shadow: none; }
::-moz-selection { background: var(--brand); color: #fff; }

/* ============================================================================
   34.  ANIMAÇÕES ADICIONAIS
   ============================================================================ */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  25%      { transform: translateY(-8px); }
  50%      { transform: translateY(0); }
  75%      { transform: translateY(-4px); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-3deg); }
  75%      { transform: rotate(3deg); }
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ringGlow {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50%      { box-shadow: 0 0 24px 4px var(--accent-glow); }
}
.animate-bounce { animation: bounce 1.2s ease-in-out infinite; }
.animate-wiggle { animation: wiggle .5s ease-in-out; }
.animate-zoom   { animation: zoomIn .35s var(--t-elastic) both; }
.animate-slide-r{ animation: slideInRight .45s var(--t-smoothout) both; }
.animate-slide-l{ animation: slideInLeft .45s var(--t-smoothout) both; }
.animate-glow   { animation: ringGlow 2.5s ease-in-out infinite; }

/* ============================================================================
   35.  MODAL BACKDROP
   ============================================================================ */
.modal {
  position: fixed; inset: 0;
  display: none;
  place-items: center;
  padding: var(--fib-21);
  z-index: var(--z-modal);
  background: color-mix(in srgb, var(--slate-950) 55%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.modal.is-open, .modal.active {
  display: grid;
  animation: fadeIn .25s ease both;
}

/* ============================================================================
   36.  SLOTS (calendário mentoria — reforço)
   ============================================================================ */
.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--fib-3);
  margin-block: var(--fib-13);
}
.cal-day {
  aspect-ratio: 1;
  display: grid; place-items: center;
  background: var(--surface);
  border: var(--fib-1) solid var(--line-soft);
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--ink);
  font-weight: 600;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  min-height: 44px;
}
.cal-day:hover { background: var(--surface-2); transform: translateY(-2px); border-color: var(--brand); }
.cal-day.is-selected {
  background: var(--grad-brand); color: #fff; border-color: transparent;
  box-shadow: var(--glow-brand);
}
.cal-day.is-disabled { opacity: 0.4; pointer-events: none; }
.slot {
  display: flex; align-items: center; gap: var(--fib-8);
  padding: var(--fib-13) var(--fib-21);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  min-height: 52px;
}
.slot:hover { background: var(--brand-soft); border-color: var(--brand); transform: translateX(3px); }
.slot.is-taken { opacity: 0.55; pointer-events: none; text-decoration: line-through; }

/* ============================================================================
   37.  ADMIN CHART BARS (matrículas por mês)
   ============================================================================ */
.chart-bars {
  display: flex; align-items: flex-end; gap: var(--fib-8);
  height: 160px;
  padding: var(--fib-13);
  background: var(--surface-2);
  border-radius: var(--r-md);
}
.chart-bars > div {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: var(--fib-5);
}
.chart-bars .bar {
  width: 100%;
  background: var(--grad-brand);
  border-radius: var(--r-md) var(--r-md) 0 0;
  box-shadow: var(--shadow-inset);
  min-height: 4px;
  transition: filter var(--t-fast) var(--ease);
}
.chart-bars .bar:hover { filter: brightness(1.15); }

/* ============================================================================
   38.  IMAGENS RESPONSIVAS — fallback consistente
   ============================================================================ */
img, picture, video {
  display: block;
  max-width: 100%;
  height: auto;
}
img[width][height] { aspect-ratio: attr(width) / attr(height); }
img[loading="lazy"] { background: var(--surface-2); }
picture > source[type*="webp"] { display: block; }

/* ============================================================================
   39.  PROSE ENRICHMENT (aula.php)
   ============================================================================ */
.prose ul, .prose ol { padding-inline-start: var(--fib-21); margin-block: var(--fib-13); }
.prose li { margin-block: var(--fib-5); color: var(--ink-soft); line-height: 1.7; }
.prose blockquote {
  padding: var(--fib-13) var(--fib-21);
  border-inline-start: 4px solid var(--brand);
  background: var(--brand-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--ink); font-style: italic;
  margin-block: var(--fib-21);
}
.prose code {
  padding: 2px 8px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  font-family: ui-monospace, monospace;
  font-size: 0.9em;
  color: var(--brand-strong);
  border: var(--fib-1) solid var(--line-soft);
}
.prose kbd {
  padding: 2px 8px;
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-block-end: 2px solid var(--line);
  border-radius: var(--r-sm);
  font-family: ui-monospace, monospace;
  font-size: 0.85em;
  box-shadow: inset 0 -1px 0 var(--surface-2);
}
.prose > i { color: var(--brand); }

/* ============================================================================
   40.  BRAND ENHANCEMENTS — mark com glow, hover
   ============================================================================ */
.brand {
  display: inline-flex; align-items: center; gap: var(--fib-8);
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg);
  color: var(--ink);
  transition: color var(--t-fast) var(--ease);
}
.brand:hover { color: var(--brand); }
.brand__mark {
  display: grid; place-items: center;
  width: var(--fib-34); height: var(--fib-34);
  background: var(--grad-brand);
  color: #fff;
  border-radius: var(--r-md);
  font-weight: 800; font-size: var(--text-lg);
  box-shadow: var(--glow-brand), var(--shadow-inset);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.brand:hover .brand__mark {
  transform: scale(1.06) rotate(-4deg);
  box-shadow: var(--glow-brand-lg), var(--shadow-inset);
}

/* ============================================================================
   41.  HEADER ENHANCEMENTS
   ============================================================================ */
.site-header {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border-block-end: var(--fib-1) solid color-mix(in srgb, var(--line) 60%, transparent);
}
.site-nav a {
  padding: var(--fib-8) var(--fib-13);
  border-radius: var(--r-md);
  color: var(--ink-soft); font-weight: 500; font-size: var(--text-sm);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  position: relative;
}
.site-nav a::after {
  content: '';
  position: absolute;
  inset-inline: var(--fib-13);
  inset-block-end: 4px;
  height: 2px;
  background: var(--brand);
  border-radius: var(--r-pill);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.site-nav a:hover { color: var(--ink); background: var(--surface-2); }
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] {
  color: var(--brand);
  background: var(--brand-soft);
}
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.theme-toggle {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: transparent; color: var(--ink);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.theme-toggle:hover { background: var(--surface-2); transform: rotate(-15deg); }
.theme-toggle:active { transform: rotate(0); }

/* ============================================================================
   42.  DARK MODE TUNING
   ============================================================================ */
[data-theme="dark"] .hero-media img {
  border-color: color-mix(in srgb, var(--brand) 30%, transparent);
}
[data-theme="dark"] .feature { background: var(--surface); }
[data-theme="dark"] .feature::before { background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(139,92,246,0.10)); }
[data-theme="dark"] .price-card {
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 85%, var(--brand-soft)) 100%);
}
[data-theme="dark"] .price-card__list { background: color-mix(in srgb, var(--brand-soft) 40%, var(--surface)); }
[data-theme="dark"] .compare__col--before { background: linear-gradient(180deg, rgba(239, 68, 68, 0.15), var(--surface)); }
[data-theme="dark"] .compare__col--after { background: linear-gradient(180deg, var(--brand-soft), var(--surface)); }
[data-theme="dark"] .guarantee {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.15), rgba(234, 179, 8, 0.05));
  border-color: color-mix(in srgb, var(--gold-500) 30%, transparent);
}
[data-theme="dark"] .guarantee strong { color: #fde047; }
[data-theme="dark"] .guarantee p { color: #fcd34d; }
[data-theme="dark"] .trust-list li { background: var(--surface); border-color: var(--line); }
[data-theme="dark"] .site-footer {
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 85%, var(--slate-800)) 100%);
}
[data-theme="dark"] .cta-band { box-shadow: var(--shadow-lg), 0 30px 60px -20px rgba(99, 102, 241, 0.45); }
[data-theme="dark"] .app-sidebar__greet { background: color-mix(in srgb, var(--brand-soft) 60%, transparent); }
[data-theme="dark"] .side-nav__link.is-active { background: color-mix(in srgb, var(--brand-soft) 80%, transparent); color: #a5b4fc; }
[data-theme="dark"] .side-nav__link.is-active > i { color: #a5b4fc; }
[data-theme="dark"] .prose > table thead { background: color-mix(in srgb, var(--brand-soft) 60%, var(--surface)); }
[data-theme="dark"] .prose > table thead th { color: #c7d2fe; }
[data-theme="dark"] .prose code { background: var(--surface-2); color: #c7d2fe; }
[data-theme="dark"] .badge--warn { background: rgba(234, 179, 8, 0.15); color: #fcd34d; }
[data-theme="dark"] .kpi::before { background: radial-gradient(circle at top right, color-mix(in srgb, var(--brand-soft) 60%, transparent), transparent 70%); }
[data-theme="dark"] .curriculum { background: var(--surface); }
[data-theme="dark"] .curriculum__item:hover { background: color-mix(in srgb, var(--brand-soft) 40%, transparent); }
[data-theme="dark"] .lesson-item.is-complete { background: linear-gradient(90deg, rgba(16, 185, 129, 0.15) 0%, var(--surface) 30%); }
[data-theme="dark"] .lesson-item.is-complete .lesson-item__num { background: var(--grad-brand); }
[data-theme="dark"] ::selection { background: var(--brand); color: #fff; }
[data-theme="dark"] .toast { border-color: color-mix(in srgb, var(--line) 80%, transparent); }
[data-theme="dark"] .site-header {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border-color: color-mix(in srgb, var(--line) 70%, transparent);
}
[data-theme="dark"] .progress-hero {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 55%, var(--surface)) 0%, var(--surface) 60%);
}
[data-theme="dark"] .quiz-opt:has(input:checked) {
  background: color-mix(in srgb, var(--brand-soft) 65%, var(--surface));
  border-color: var(--brand);
}
[data-theme="dark"] .step { background: var(--surface); }
[data-theme="dark"] .step__num { box-shadow: 0 0 24px rgba(99,102,241,.4); }
[data-theme="dark"] .modal { background: color-mix(in srgb, #000 55%, transparent); }
[data-theme="dark"] .modal__panel { background: var(--surface); border: var(--fib-1) solid var(--line); }
[data-theme="dark"] .modal__foot { background: color-mix(in srgb, var(--surface) 90%, var(--surface-2)); }
[data-theme="dark"] .video-wrap { box-shadow: var(--shadow-lg), 0 30px 60px -20px rgba(0,0,0,0.6); }

/* ============================================================================
   43.  RESPONSIVE — refino final por breakpoint
   ============================================================================ */
@media (max-width: 1200px) {
  .hero-split { gap: var(--fib-55); }
  .about { gap: var(--fib-34); }
}
@media (max-width: 900px) {
  .hero { padding-block: var(--fib-55); }
  .hero__title { text-align: center; }
  .hero-split .hero__title { max-width: none; text-align: center; }
  .hero-split .trust-list { justify-content: center; }
  .about { grid-template-columns: 1fr; }
  .about-media { max-width: 400px; margin-inline: auto; }
  .about-media__frame { inset: -8px; }
  .steps { grid-template-columns: 1fr; gap: var(--fib-55); }
  .step:not(:last-child)::after { display: none; }
  .compare { grid-template-columns: 1fr; }
  .grid-auto { grid-template-columns: repeat(2, 1fr); }
  .price-card { padding: var(--fib-34) var(--fib-21) var(--fib-21); }
  .price-card__value { font-size: 3.75rem; }
  .site-footer__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .cta-band { padding: var(--fib-55) var(--fib-21); }
  .cta-band h2 { font-size: 1.75rem; }
  .app-shell { grid-template-columns: 1fr; }
  .app-sidebar {
    position: sticky; top: 0;
    height: auto;
    border-inline-end: none;
    border-block-end: var(--fib-1) solid var(--line);
  }
  .app-main { padding: var(--fib-21); }
  .progress-hero { flex-direction: column; text-align: center; }
  .progress-hero__ring { width: 120px; height: 120px; }
  .kpi__value { font-size: 1.75rem; }
  .toast-stack { inset-inline: var(--fib-13); inset-block-end: var(--fib-13); max-width: none; }
}
@media (max-width: 640px) {
  .hero { padding-block: var(--fib-34); }
  .hero__title { font-size: clamp(1.75rem, 1.2rem + 3.5vw, 2.25rem); }
  .hero__eyebrow { font-size: var(--text-caption); padding: 4px 10px; }
  .hero-media__badge { position: static; margin-block-start: var(--fib-13); width: fit-content; margin-inline: auto; }
  .price-card { padding: var(--fib-34) var(--fib-13) var(--fib-21); }
  .price-card__value { font-size: 3rem; }
  .price-card__list { padding: var(--fib-8); }
  .guarantee { flex-direction: column; text-align: center; padding: var(--fib-21); }
  .guarantee__icon { width: var(--fib-55); height: var(--fib-55); font-size: 1.4rem; }
  .cta-band { padding: var(--fib-34) var(--fib-13); border-radius: var(--r-lg); }
  .cta-band h2 { font-size: 1.4rem; }
  .cta-band p { font-size: var(--text-base); }
  .grid-auto { grid-template-columns: 1fr; }
  .feature { padding: var(--fib-21); }
  .compare__col { padding: var(--fib-21); }
  .step { padding-block-start: var(--fib-34); }
  .step__num { width: var(--fib-34); height: var(--fib-34); font-size: var(--text-base); }
  .faq summary { padding: var(--fib-13); }
  .faq details > div { padding: 0 var(--fib-13) var(--fib-13) calc(var(--fib-13) + var(--fib-34)); }
  #login-card, #signup-card { padding: var(--fib-34) var(--fib-21); }
  #login-card h1, #signup-card h1 { font-size: 1.5rem; }
  .site-header__inner { padding-inline: var(--fib-13); }
  .announce { font-size: var(--text-caption); padding: var(--fib-5) var(--fib-13); }
  .brand { font-size: var(--text-base); }
  .brand__mark { width: 32px; height: 32px; font-size: var(--text-base); }
  .btn--lg { min-height: 52px; padding-inline: var(--fib-21); font-size: var(--text-sm); }
  .curriculum__item { padding: var(--fib-8) var(--fib-13); }
  .curriculum__num { width: 30px; height: 30px; font-size: var(--text-sm); }
  .curriculum__meta { font-size: 0.75rem; }
  .lesson-item { padding: var(--fib-8) var(--fib-13); }
  .lesson-item__num { width: 44px; height: 44px; font-size: var(--text-base); }
  .video-wrap { border-radius: var(--r-md); }
  .modal__panel { max-height: 96vh; }
  .modal__head, .modal__foot, .modal__body { padding-inline: var(--fib-21); }
  .modal__body { padding-block: var(--fib-21); }
  .app-main { padding: var(--fib-13); }
  .kpi { padding: var(--fib-13); }
  .progress-hero { padding: var(--fib-21); }
  .progress-hero__ring { width: 100px; height: 100px; font-size: var(--text-lg); }
  .trust-list { gap: var(--fib-5); }
  .trust-list li { font-size: var(--text-caption); padding: 4px 10px 4px 6px; }
  .trust-list li::before { width: 18px; height: 18px; font-size: 0.6em; }
}
@media (max-width: 380px) {
  .container { padding-inline: var(--fib-8); }
  .card { padding: var(--fib-13); }
  .hero { padding-block: var(--fib-21); }
  .hero__title { font-size: 1.6rem; }
  .hero__lead { font-size: var(--text-base); }
  .hero__actions .btn { min-height: 48px; font-size: var(--text-sm); }
  .price-card__value { font-size: 2.5rem; }
  .price-card__value small { font-size: 1rem; }
  .site-header__inner { gap: var(--fib-5); }
  .kpi { padding: var(--fib-8) var(--fib-13); }
  .kpi__value { font-size: 1.4rem; }
  .kpi__icon { width: var(--fib-34); height: var(--fib-34); }
  .lesson-item { gap: var(--fib-8); }
  .lesson-item__num { width: 36px; height: 36px; font-size: var(--text-sm); }
  .lesson-item__body strong { font-size: var(--text-sm); }
  .lesson-item .badge { font-size: 0.7rem; padding: 2px 8px; }
  .app-sidebar__greet { padding: var(--fib-8); font-size: var(--text-caption); }
  .app-sidebar__greet::before { width: 28px; height: 28px; }
  .side-nav__link { padding: var(--fib-8) var(--fib-13); font-size: var(--text-caption); }
  .btn--lg { min-height: 48px; font-size: var(--text-caption); }
  .curriculum__title { font-size: var(--text-sm); }
  .about-media { max-width: 260px; }
  .credential { padding: var(--fib-8); gap: var(--fib-8); }
  .credential__icon { width: 40px; height: 40px; font-size: var(--text-base); }
  .credential strong { font-size: var(--text-sm); }
  .credential span { font-size: 0.75rem; }
  .prose > table thead th, .prose > table tbody td { padding: var(--fib-5) var(--fib-8); font-size: 0.75rem; }
  .modal__body { padding: var(--fib-13); }
}

/* ============================================================================
   44.  REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero-media img { transform: none; }
  .announce::before, .progress__bar::after, .btn--primary::after { display: none; }
}

/* ============================================================================
   45.  PRINT — versão certificada
   ============================================================================ */
@media print {
  .site-header, .site-footer, .app-sidebar, .modal, .toast-stack, .btn,
  .announce, .theme-toggle, .nav-toggle { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .card, .feature, .kpi { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
  a { color: #000 !important; text-decoration: underline; }
  .app-main { padding: 0 !important; }
  .lesson-item { border: 1px solid #ccc !important; }
}

/* ============================================================================
   46.  HOVER FALLBACKS EM TOUCH
   ============================================================================ */
@media (hover: none) {
  .feature:hover, .card--interactive:hover, .step:hover,
  .credential:hover, .kpi:hover, .lesson-item:hover, .curriculum__item:hover {
    transform: none;
  }
  .hero-media:hover img { transform: none; }
}

/* ============================================================================
   47.  ACESSIBILIDADE — foco reforçado em qualquer elemento clicável
   ============================================================================ */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline-offset: 4px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
}

/* ============================================================================
   48.  ANNOTATIONS — highlights de texto (utility)
   ============================================================================ */
.hl {
  padding: 0 6px;
  background: linear-gradient(180deg, transparent 55%, var(--brand-soft) 55%, var(--brand-soft) 90%, transparent 90%);
  font-weight: 700;
  color: inherit;
}
.hl--warm {
  background: linear-gradient(180deg, transparent 55%, var(--gold-100) 55%, var(--gold-100) 90%, transparent 90%);
}
.hl--danger {
  background: linear-gradient(180deg, transparent 55%, var(--danger-soft) 55%, var(--danger-soft) 90%, transparent 90%);
}

/* ============================================================================
   49.  PROMO SIDE PANEL (login desktop opcional)
   ============================================================================ */
.promo-side {
  display: none;
  padding: var(--fib-34);
  background: var(--grad-brand);
  color: #fff;
  border-radius: var(--r-xl);
  box-shadow: var(--glow-brand-lg);
  min-height: 480px;
  position: relative; overflow: hidden;
}
.promo-side::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(60% 55% at 100% 100%, rgba(255,255,255,0.15) 0%, transparent 60%),
    radial-gradient(50% 45% at 0% 0%, rgba(255,255,255,0.10) 0%, transparent 65%);
  pointer-events: none;
}
.promo-side h3 {
  color: #fff; font-size: var(--text-h2);
  letter-spacing: -0.02em;
  margin-block-end: var(--fib-13);
  position: relative;
}
.promo-side ul {
  display: flex; flex-direction: column; gap: var(--fib-13);
  position: relative;
}
.promo-side li {
  display: flex; align-items: center; gap: var(--fib-13);
  color: rgba(255,255,255,0.94);
  font-size: var(--text-base);
}
.promo-side li::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.20); color: #fff;
  font-size: 0.7em;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
@media (min-width: 900px) {
  .login-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--fib-34);
    max-width: 960px;
    margin-inline: auto;
    align-items: stretch;
  }
  .promo-side { display: flex; flex-direction: column; justify-content: center; }
}

/* ============================================================================
   50.  DECORATIVE BLOB — utilitário reutilizável
   ============================================================================ */
.blob {
  position: absolute;
  border-radius: var(--radius-blob-a);
  filter: blur(60px);
  opacity: 0.45;
  pointer-events: none;
  z-index: -1;
}
.blob--brand   { background: var(--brand); }
.blob--violet  { background: var(--violet-500); }
.blob--sky     { background: var(--sky-500); }
.blob--gold    { background: var(--gold-500); }
.blob--sm  { width: 180px; height: 180px; }
.blob--md  { width: 300px; height: 300px; }
.blob--lg  { width: 480px; height: 480px; }
.blob-tl { inset-block-start: -8%; inset-inline-start: -8%; }
.blob-tr { inset-block-start: -8%; inset-inline-end: -8%; }
.blob-bl { inset-block-end: -8%; inset-inline-start: -8%; }
.blob-br { inset-block-end: -8%; inset-inline-end: -8%; }
.blob--float { animation: blobFloat 14s ease-in-out infinite; }

/* ============================================================================
   51.  ANIMATED GRADIENT TEXT (utility)
   ============================================================================ */
.grad-text {
  background: linear-gradient(90deg, var(--brand), var(--violet-500), var(--brand));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: gradShift 6s linear infinite;
}
@keyframes gradShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ============================================================================
   52.  CARD PATTERNS
   ============================================================================ */
.card--brand {
  background: var(--grad-brand);
  color: #fff;
  border: none;
  box-shadow: var(--glow-brand);
}
.card--brand h3, .card--brand strong { color: #fff; }
.card--brand p { color: rgba(255, 255, 255, 0.94); }
.card--brand .btn--primary { background: #fff; color: var(--brand); }
.card--outlined {
  background: transparent;
  border: 2px dashed var(--brand);
  box-shadow: none;
}
.card--elevated {
  background: var(--surface);
  border: none;
  box-shadow: var(--shadow-lg), var(--glow-brand);
}

/* ============================================================================
   53.  HORIZONTAL RULE VARIANTS
   ============================================================================ */
.hr {
  border: none; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  margin-block: var(--fib-21);
}
.hr--brand {
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  height: 2px;
}
.hr--dashed {
  background: none;
  border-block-start: 1px dashed var(--line);
}

/* ============================================================================
   54.  BUTTON GROUP
   ============================================================================ */
.btn-group {
  display: inline-flex;
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.btn-group > .btn {
  border-radius: 0;
  border: none;
  min-height: 44px;
  padding-inline: var(--fib-21);
  background: transparent;
  color: var(--ink);
}
.btn-group > .btn + .btn { border-inline-start: var(--fib-1) solid var(--line); }
.btn-group > .btn:hover { background: var(--surface-2); }
.btn-group > .btn.is-active {
  background: var(--brand); color: #fff;
}

/* ============================================================================
   55.  TAB LIST
   ============================================================================ */
.tabs {
  display: flex;
  border-block-end: var(--fib-1) solid var(--line);
  margin-block-end: var(--fib-21);
  gap: var(--fib-3);
}
.tabs button, .tabs a {
  padding: var(--fib-13) var(--fib-21);
  border: none; background: transparent;
  color: var(--ink-soft);
  font-weight: 600; cursor: pointer;
  border-block-end: 2px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  min-height: 48px;
}
.tabs button:hover, .tabs a:hover { color: var(--brand); }
.tabs button.is-active, .tabs a.is-active {
  color: var(--brand);
  border-block-end-color: var(--brand);
}

/* ============================================================================
   56.  PILL COMPONENT
   ============================================================================ */
.pill {
  display: inline-flex; align-items: center; gap: var(--fib-5);
  padding: var(--fib-5) var(--fib-13);
  background: var(--surface-2);
  border-radius: var(--r-pill);
  font-size: var(--text-caption); font-weight: 600;
  color: var(--ink-soft);
}
.pill--brand   { background: var(--brand-soft); color: var(--brand-strong); }
.pill--success { background: var(--emerald-100); color: var(--emerald-700); }
.pill--warn    { background: var(--amber-50); color: #b45309; }
.pill--gold    { background: var(--gold-100); color: #854d0e; }
.pill--outline {
  background: transparent;
  border: var(--fib-1) solid var(--line);
  color: var(--ink);
}

/* ============================================================================
   57.  STAT LIVE — número grande com legenda
   ============================================================================ */
.stat-live {
  display: flex; flex-direction: column; align-items: center; gap: var(--fib-3);
  padding: var(--fib-21);
  background: var(--surface);
  border: var(--fib-1) solid var(--line);
  border-radius: var(--r-lg);
  text-align: center;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.stat-live:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-live .num {
  font-family: var(--font-display);
  font-weight: 800; font-size: 2.5rem;
  color: var(--brand);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat-live .label {
  color: var(--ink-soft); font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}

/* ============================================================================
   58.  TIMELINE (para dashboard admin — próximas mentorias)
   ============================================================================ */
.timeline {
  position: relative;
  padding-inline-start: var(--fib-34);
}
.timeline::before {
  content: '';
  position: absolute;
  inset-inline-start: var(--fib-13);
  inset-block: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--brand), var(--line));
  border-radius: var(--r-pill);
}
.timeline__item {
  position: relative;
  padding: var(--fib-13) 0 var(--fib-13) var(--fib-21);
}
.timeline__item::before {
  content: '';
  position: absolute;
  inset-inline-start: calc(-1 * var(--fib-21));
  inset-block-start: var(--fib-21);
  width: 12px; height: 12px;
  background: var(--brand);
  border: 3px solid var(--surface);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow-xs);
}
.timeline__item h4 { margin: 0; font-size: var(--text-base); color: var(--ink); }
.timeline__item p { margin-block-start: var(--fib-3); color: var(--ink-soft); font-size: var(--text-sm); }
.timeline__item time {
  display: inline-flex; align-items: center; gap: var(--fib-3);
  color: var(--brand); font-weight: 700; font-size: var(--text-caption);
  margin-block-start: var(--fib-5);
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   59.  MICRO-TRANSITIONS PARA LINKS DE CTA
   ============================================================================ */
a.link-cta {
  display: inline-flex; align-items: center; gap: var(--fib-5);
  color: var(--brand); font-weight: 600;
  padding: var(--fib-5) 0;
  position: relative;
}
a.link-cta::after {
  content: '\f061';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  transition: transform var(--t-fast) var(--ease);
}
a.link-cta:hover::after { transform: translateX(4px); }
a.link-cta::before {
  content: '';
  position: absolute; inset-block-end: 0; inset-inline: 0;
  height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-base) var(--ease);
}
a.link-cta:hover::before { transform: scaleX(1); transform-origin: left; }

/* ============================================================================
   60.  EMPTY STATE
   ============================================================================ */
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: var(--fib-13);
  padding: var(--fib-55) var(--fib-21);
  text-align: center;
  color: var(--ink-soft);
}
.empty-state__icon {
  display: grid; place-items: center;
  width: 96px; height: 96px;
  background: var(--brand-soft); color: var(--brand);
  border-radius: 50%;
  font-size: 2rem;
  box-shadow: var(--shadow-inset);
  animation: floatY 4s ease-in-out infinite;
}
.empty-state h3 { color: var(--ink); font-size: var(--text-h3); }
.empty-state p { color: var(--ink-soft); max-width: 40ch; }

/* ============================================================================
   FIM
   ============================================================================ */
} /* end @layer enhancements */