/* input(670,1): run-time error CSS1019: Unexpected token, found '}'
input(2456,1): run-time error CSS1019: Unexpected token, found '}' */
/* ============================================================
   LessonAI — SHARED.CSS (v6 unificado)
   Identidade: EDITORIAL TECH BLUE
   ------------------------------------------------------------
   Fusão revista institucional editorial com tech moderna.
   Azul institucional dominante. Branco puro nas seções.
   Amarelo de destaque. Preto nos CTAs.
   Esta é a fonte única da verdade dos tokens.
   ============================================================ */

:root {
  /* Paleta — Tech blue (mais saturado, vibe Stripe/Linear/Vercel) */
  --blue-900: #0B2C7A;  /* deeper navy */
  --blue-800: #1E40AF;  /* mantido — brand-blue principal */
  --blue-700: #1D4ED8;
  --blue-600: #2563EB;
  --blue-500: #3B82F6;
  --blue-400: #60A5FA;
  --blue-300: #93C5FD;
  --blue-200: #BFDBFE;
  --blue-100: #E0EAFE;  /* leve lift de saturação */
  --blue-50:  #F0F5FF;  /* leve lift de saturação */

  /* Tech accent — eletric/cyan (substitui amarelo no contexto tech) */
  --accent-tech:        #0EA5E9;  /* sky-500 */
  --accent-tech-soft:   #BAE6FD;  /* sky-200 */

  --bg:           #FFFFFF;
  --bg-alt:       #F8FAFC;
  --bg-soft:      #EFF6FF;
  --bg-deep:      #0F172A;
  --bg-blue:      #1E40AF;

  --ink:          #0B1220;
  --ink-soft:     #1F2937;
  --ink-muted:    #475569;
  --ink-faint:    #94A3B8;

  --rule:         #E2E8F0;
  --rule-soft:    #F1F5F9;
  --rule-blue:    #BFDBFE;

  --accent-yellow:      #FCD34D;
  --accent-yellow-soft: #FEF3C7;

  /* Aliases retrocompat */
  --brand-blue:       var(--blue-800);
  --brand-blue-2:     var(--blue-500);
  --brand-blue-3:     var(--blue-300);
  --brand-blue-hover: var(--blue-700);
  --brand-grad:       linear-gradient(135deg, var(--blue-800) 0%, var(--blue-500) 100%);
  --brand-grad-hover: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-700) 100%);
  --surface:          var(--bg);
  --surface-2:        var(--bg-alt);
  --text:             var(--ink-soft);
  --muted:            var(--ink-muted);
  --faint:            var(--ink-faint);
  --line:             var(--rule);
  --line-soft:        var(--rule-soft);
  --line-faint:       var(--rule-soft);

  /* Pills coloridas (todas alinhadas ao azul institucional) */
  --pill-public:        var(--blue-800);
  --pill-public-bg:     var(--blue-100);
  --pill-private:       var(--blue-700);
  --pill-private-bg:    var(--blue-100);
  --pill-teacher:       var(--blue-600);
  --pill-teacher-bg:    var(--blue-100);
  --pill-manifesto:     var(--blue-900);
  --pill-manifesto-bg:  var(--blue-100);
  --pill-home:          var(--ink);
  --pill-home-bg:       var(--bg-alt);

  /* Gradientes hero — Aurora mesh (Framer/Arc/Stripe enterprise feel)
     Múltiplas camadas radiais empilhadas + base linear */
  --gradient-hero:
    radial-gradient(ellipse 60% 80% at 88% 8%,  rgba(99, 102, 241, 0.42) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 8% 92%,  rgba(14, 165, 233, 0.32) 0%, transparent 55%),
    radial-gradient(ellipse 50% 70% at 50% 50%, rgba(59, 130, 246, 0.22) 0%, transparent 70%),
    linear-gradient(135deg, #0B2C7A 0%, #1E3A8A 45%, #1E40AF 100%);
  --gradient-overlay-light:
    radial-gradient(ellipse 80% 60% at 80% 20%, rgba(96,165,250,0.55) 0%, transparent 60%);
  --gradient-overlay-yellow:
    radial-gradient(ellipse 60% 50% at 20% 90%, rgba(252,211,77,0.18) 0%, transparent 70%);

  /* Tipografia — TECH STACK (Stripe/Linear/Vercel-feel)
     - Sans (Inter) é a fonte default em h1-h4 e body
     - Mono (JetBrains Mono) p/ kickers, tags, labels técnicas
     - Serif (Source Serif 4 italic) RESERVADA somente p/ citações (testimonials) */
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', 'Courier New', monospace;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --sans:  var(--font-sans);
  --mono:  var(--font-mono);
  --serif: var(--font-serif);

  /* Legacy (mantido p/ retrocompat — não usar em código novo) */
  --font-ui:    var(--font-sans);
  --font-quote: var(--font-serif);

  /* Spacing */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;
  --radius-sm: var(--r-sm); --radius-md: var(--r-md);
  --radius-lg: var(--r-lg); --radius-pill: var(--r-pill);

  /* Sombras */
  --sh-soft: 0 1px 2px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.06);
  --sh-card: 0 8px 24px -8px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.04);
  --sh-elev: 0 24px 48px -16px rgba(15,23,42,0.18), 0 6px 20px -8px rgba(15,23,42,0.08);
  --sh-blue: 0 16px 40px -16px rgba(30,64,175,0.45);

  /* Easing */
  --ease-out: cubic-bezier(0.2, 0.85, 0.3, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.4, 1);
  --t-fast: 160ms; --t-base: 240ms; --t-slow: 480ms;
  --d-base: var(--t-base);
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 450;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }
button { font: inherit; cursor: pointer; }

/* TIPOGRAFIA — sans-serif tech (Inter) */
h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
}
/* Italic em removido — agora <strong> ou <em> só destaca em azul, sem italic */
h1 em, h2 em, h3 em,
h1 strong, h2 strong, h3 strong {
  font-style: normal;
  font-weight: 700;
  color: var(--brand-blue);
}
h1 { font-size: clamp(40px, 5.6vw, 78px); letter-spacing: -0.035em; line-height: 1.02; }
h2 { font-size: clamp(30px, 3.8vw, 52px); letter-spacing: -0.03em;  line-height: 1.05; }
h3 { font-size: clamp(20px, 1.9vw, 28px); font-weight: 650;          letter-spacing: -0.022em; }
h4 { font-size: 17px;                     font-weight: 600;          letter-spacing: -0.015em; }
p { margin: 0; }

.lede, .deck {
  font-family: var(--sans);
  font-weight: 450;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ink-muted);
}

.kicker, .section-kicker, .eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-blue);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--blue-100);
  color: var(--blue-800);
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tag::before {
  content: ""; width: 6px; height: 6px;
  background: currentColor; border-radius: 50%;
}

/* CONTAINER */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
}
@media (max-width: 600px) { .container { padding: 0 20px; } }

/* NAV */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              backdrop-filter 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Glassmorphism reforçado quando rola — premium feel à la Framer */
.nav.is-scrolled {
  background: rgba(255,255,255,0.78);
  backdrop-filter: saturate(200%) blur(22px);
  -webkit-backdrop-filter: saturate(200%) blur(22px);
  border-bottom-color: rgba(226, 232, 240, 0.7);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 10px 30px -16px rgba(15, 23, 42, 0.18);
}
.nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  height: 34px;
  /* largura inicial = logo cheia (origami + texto). 
     Reduzida quando .nav.is-scrolled ativa */
  width: auto;
  min-width: 34px;
  transition: opacity var(--t-fast) ease;
}
.nav-logo:hover { opacity: 0.78; }
.nav-logo img {
  height: 34px;
  width: auto;
  display: block;
  transition:
    opacity 380ms cubic-bezier(0.2, 0.85, 0.3, 1),
    transform 480ms cubic-bezier(0.2, 0.85, 0.3, 1);
}

/* Estado inicial — logo cheia visível, mark escondida */
.nav-logo .nav-logo-full {
  opacity: 1;
  transform: scale(1);
  transform-origin: left center;
}
.nav-logo .nav-logo-mark-img {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scale(0.7);
  opacity: 0;
  pointer-events: none;
  transform-origin: left center;
}

/* Estado scrolled — só o origami visível, com bounce sutil */
.nav.is-scrolled .nav-logo .nav-logo-full {
  opacity: 0;
  transform: scale(0.6);
}
.nav.is-scrolled .nav-logo .nav-logo-mark-img {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .nav-logo img {
    transition: opacity 200ms linear;
  }
  .nav.is-scrolled .nav-logo .nav-logo-full,
  .nav-logo .nav-logo-mark-img {
    transform: translateY(-50%) scale(1);
  }
  .nav-logo .nav-logo-full {
    transform: scale(1);
  }
}

/* Nav links — flat tech (sem container pill, sem bordas circulares) */
.nav-pills {
  display: flex;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 0;
}
.nav-pills li { margin: 0; }
.nav-pills a {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted);
  border-radius: 0;
  position: relative;
  transition: color var(--t-fast) ease;
}
.nav-pills a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  bottom: 4px;
  height: 2px;
  background: var(--brand-blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-base) var(--ease-out);
}
.nav-pills a:hover {
  color: var(--ink);
}
.nav-pills a:hover::after {
  transform: scaleX(0.6);
}
.nav-pills a.is-active {
  color: var(--brand-blue);
  font-weight: 600;
}
.nav-pills a.is-active::after {
  transform: scaleX(1);
}

.nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Botões NAV */
.btn-nav {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  font-family: var(--sans);
  font-size: 13.5px; font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
}
.btn-nav:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}
.btn-nav--ghost {
  background: transparent;
  color: var(--brand-blue);
  border-color: var(--brand-blue);
}
.btn-nav--ghost:hover {
  background: var(--brand-blue);
  color: white;
  transform: translateY(-1px);
}
.btn-nav--primary {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
  font-weight: 600;
}
.btn-nav--primary:hover {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  transform: translateY(-1px);
  box-shadow: var(--sh-blue);
}
.btn-nav--primary svg {
  transition: transform var(--t-base) var(--ease-out);
}
.btn-nav--primary:hover svg { transform: translateX(3px); }

/* === HAMBURGER TOGGLE (mobile only) === */
.nav-toggle {
  display: none; /* só aparece em mobile via media query */
  position: relative;
  width: 40px; height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
  flex-shrink: 0;
}
.nav-toggle:hover { background: var(--bg-alt); border-color: var(--ink-faint); }
.nav-toggle-line {
  position: absolute;
  left: 50%;
  width: 18px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform 0.3s var(--ease-out), opacity 0.2s ease, top 0.3s var(--ease-out);
}
.nav-toggle-line:nth-child(1) { top: 13px; }
.nav-toggle-line:nth-child(2) { top: 19px; }
.nav-toggle-line:nth-child(3) { top: 25px; }
.nav-toggle.is-open .nav-toggle-line:nth-child(1) {
  top: 19px;
  transform: translateX(-50%) rotate(45deg);
}
.nav-toggle.is-open .nav-toggle-line:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-line:nth-child(3) {
  top: 19px;
  transform: translateX(-50%) rotate(-45deg);
}

/* === MOBILE DRAWER === */
.nav-mobile {
  position: fixed;
  top: 64px;       /* abre abaixo do nav (~64px de altura) */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  display: flex;
  flex-direction: column;
  padding: 32px 24px 24px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition:
    opacity 0.28s var(--ease-out),
    transform 0.32s var(--ease-out),
    visibility 0s linear 0.32s;
}
.nav-mobile[hidden] { display: flex; } /* override hidden attr */
.nav-mobile.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.28s var(--ease-out),
    transform 0.32s var(--ease-out),
    visibility 0s;
}

.nav-mobile-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
}
.nav-mobile-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 4px;
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.018em;
  text-decoration: none;
  border-bottom: 1px solid var(--rule-soft);
  transition: color var(--t-fast) ease, transform var(--t-fast) ease;
}
.nav-mobile-link::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--ink-faint);
  border-radius: 50%;
  flex-shrink: 0;
  transition: background var(--t-fast) ease, transform var(--t-fast) ease;
}
.nav-mobile-link[data-section="public"]::before    { background: var(--pill-public); }
.nav-mobile-link[data-section="private"]::before   { background: var(--pill-private); }
.nav-mobile-link[data-section="teacher"]::before   { background: var(--pill-teacher); }
.nav-mobile-link[data-section="manifesto"]::before { background: var(--pill-manifesto); }
.nav-mobile-link.is-active {
  color: var(--brand-blue);
}
.nav-mobile-link.is-active::before {
  transform: scale(1.4);
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
}
.nav-mobile-link:active { transform: translateX(4px); }

.nav-mobile-actions {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.btn-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-fast) ease;
  border: 1.5px solid transparent;
}
.btn-mobile--ghost {
  color: var(--ink);
  border-color: var(--rule);
  background: var(--bg);
}
.btn-mobile--ghost:active { background: var(--bg-alt); }
.btn-mobile--primary {
  background: var(--ink);
  color: white;
}
.btn-mobile--primary:active { transform: scale(0.98); }

.nav-mobile-foot {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  text-transform: uppercase;
}

/* === MOBILE BREAKPOINT === */
@media (max-width: 880px) {
  .nav-pills { display: none; }
  .nav-actions { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .btn-nav { padding: 9px 16px; font-size: 13px; }
}

/* Quando menu mobile está aberto, body não scrolla */
body.is-nav-open { overflow: hidden; }

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  font-family: var(--sans);
  font-size: 14.5px; font-weight: 500;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  transform: translateY(-1px);
  box-shadow: var(--sh-blue);
}
.btn-ghost {
  background: transparent;
  color: var(--brand-blue);
  border-color: var(--brand-blue);
}
.btn-ghost:hover {
  background: var(--brand-blue);
  color: white;
  transform: translateY(-1px);
}
.btn-link {
  background: transparent;
  color: var(--brand-blue);
  border: none;
  padding: 12px 0;
  font-weight: 500;
  position: relative;
}
.btn-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}
.btn-link:hover::after { transform: scaleX(1); }
.btn-lg { padding: 16px 28px; font-size: 15px; }
.btn-sm { padding: 8px 14px; font-size: 13px; }

/* SCROLL PROGRESS */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--brand-grad);
  z-index: 200;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 80ms linear;
}

/* REVEAL */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal], .reveal {
    opacity: 0; transform: translateY(24px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  }
  [data-reveal].in, [data-reveal].is-in,
  .reveal.in, .reveal.is-in {
    opacity: 1; transform: translateY(0);
  }
  [data-reveal][data-stagger] > *, .reveal[data-stagger] > * {
    opacity: 0; transform: translateY(16px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  }
  [data-reveal][data-stagger].in > *:nth-child(1),
  .reveal[data-stagger].in > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: none; }
  [data-reveal][data-stagger].in > *:nth-child(2),
  .reveal[data-stagger].in > *:nth-child(2) { transition-delay: 90ms; opacity: 1; transform: none; }
  [data-reveal][data-stagger].in > *:nth-child(3),
  .reveal[data-stagger].in > *:nth-child(3) { transition-delay: 180ms; opacity: 1; transform: none; }
  [data-reveal][data-stagger].in > *:nth-child(4),
  .reveal[data-stagger].in > *:nth-child(4) { transition-delay: 270ms; opacity: 1; transform: none; }
  [data-reveal][data-stagger].in > *:nth-child(5),
  .reveal[data-stagger].in > *:nth-child(5) { transition-delay: 360ms; opacity: 1; transform: none; }
  [data-reveal][data-stagger].in > *:nth-child(6),
  .reveal[data-stagger].in > *:nth-child(6) { transition-delay: 450ms; opacity: 1; transform: none; }

  @keyframes reveal-fallback { to { opacity: 1; transform: translateY(0); } }
  .reveal { animation: reveal-fallback 0.01s ease 2s forwards; }
}

/* FOOTER */
.footer {
  background: var(--bg-deep);
  color: rgba(255,255,255,0.65);
  padding: 80px 0 32px;
  margin-top: 96px;
}
.footer .container {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.footer-brand { max-width: 340px; }
.footer-logo-mark { height: 28px; margin-bottom: 18px; display: block; }
.footer-brand img { height: 28px; margin-bottom: 18px; }
.footer-brand p {
  font-family: var(--sans);
  font-style: normal;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
  margin: 0 0 24px 0;
}
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--sans);
  font-size: 14px;
  color: rgba(255,255,255,0.7);
}
.footer-contact a {
  color: rgba(255,255,255,0.85);
  transition: color var(--t-fast) ease;
}
.footer-contact a:hover { color: var(--accent-yellow); }
.footer-contact span { color: rgba(255,255,255,0.55); }

/* Era .footer-col h5. O nível do heading passou a ser estrutural (h2) e o
   tamanho, responsabilidade da classe — que é o que ele sempre foi de fato. */
.footer-col-title {
  font-family: var(--mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-blue, #4a9eff);
  margin: 0 0 18px 0;
}
.footer-col ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-col li {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255,255,255,0.78);
}
.footer-col a {
  color: rgba(255,255,255,0.78);
  font-size: 14px;
  text-decoration: none;
  transition: color var(--t-fast) ease;
}
.footer-col a:hover { color: var(--accent-yellow); }

.footer-bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.footer-bottom span { white-space: nowrap; }
.footer-bottom a {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 200ms ease;
}
.footer-bottom a:hover { color: #fff; }

@media (max-width: 980px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
  }
  .footer-brand { grid-column: 1 / -1; max-width: 520px; }
}
@media (max-width: 640px) {
  .footer { padding: 64px 0 28px; margin-top: 72px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
  }
  /* O nowrap mantém cada item do rodapé em uma linha no desktop, mas o
     copyright mede 381px e estourava a viewport do celular em 15px — a
     página inteira ganhava rolagem horizontal. Empilhado, não há motivo
     para segurar a linha. */
  .footer-bottom span { white-space: normal; }
}
@media (max-width: 420px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* UTILS */
.hide-mobile {}
@media (max-width: 880px) { .hide-mobile { display: none !important; } }

/* ============================================
   SPOTLIGHT CURSOR EFFECT
   Adicione classe .spotlight-card em qualquer card
   JS em spotlight.js atualiza --mouse-x/--mouse-y
   ============================================ */
.spotlight-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --mouse-x: -9999px;
  --mouse-y: -9999px;
  --spotlight-size: 460px;
  --spotlight-color: rgba(96, 165, 250, 0.18);
  --spotlight-border: rgba(96, 165, 250, 0.45);
}

/* Camada 1: glow interno seguindo o cursor */
.spotlight-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    var(--spotlight-size) circle at var(--mouse-x) var(--mouse-y),
    var(--spotlight-color),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

/* Camada 2: borda iluminada (efeito do vídeo do usuário) */
.spotlight-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(
    300px circle at var(--mouse-x) var(--mouse-y),
    var(--spotlight-border),
    transparent 40%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

.spotlight-card:hover::before,
.spotlight-card:hover::after {
  opacity: 1;
}

/* Garante que o conteúdo do card fica acima das camadas de luz */
.spotlight-card > * {
  position: relative;
  z-index: 3;
}

/* Variantes — ajuste de cor e tamanho por tipo de card */
.spotlight-card--lg {
  --spotlight-size: 600px;
}
.spotlight-card--sm {
  --spotlight-size: 320px;
}

/* Em fundo escuro (hero-blue) — luz mais quente */
.hero-blue .spotlight-card,
.spotlight-card.is-dark {
  --spotlight-color: rgba(252, 211, 77, 0.18);
  --spotlight-border: rgba(252, 211, 77, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .spotlight-card::before,
  .spotlight-card::after { display: none; }
}

/* ============================================
   HERO BLUE — sistema unificado para hero institucional
   Aplica em qualquer .hero-blue, .cover, .page-cover
   ============================================ */
.hero-blue,
.cover.hero-blue,
.page-cover.hero-blue {
  position: relative;
  background:
    var(--gradient-overlay-yellow),
    var(--gradient-overlay-light),
    var(--gradient-hero);
  color: white;
  overflow: hidden;
  isolation: isolate;
}
.hero-blue::before {
  content: "";
  position: absolute;
  top: -25%; right: -10%;
  width: 60%; height: 120%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.10) 0%, transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(252,211,77,0.18) 0%, transparent 50%);
  filter: blur(60px);
  animation: hero-glow 18s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: -1;
}
.hero-blue::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 320px at 18% 22%, rgba(96,165,250,0.22), transparent 60%),
    radial-gradient(ellipse 520px 300px at 82% 75%, rgba(59,130,246,0.18), transparent 60%),
    radial-gradient(ellipse 420px 240px at 50% 100%, rgba(30,64,175,0.20), transparent 60%);
  filter: blur(40px);
  opacity: 0.9;
  animation: hero-aurora 24s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: -1;
}
@keyframes hero-aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -3%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-blue::after { animation: none; }
}
@keyframes hero-glow {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.85; }
  50%  { transform: translate(-30px, 20px) scale(1.08); opacity: 1; }
  100% { transform: translate(20px, -10px) scale(0.95); opacity: 0.75; }
}

/* Tipografia branca dentro do hero-blue */
.hero-blue h1, .hero-blue h2, .hero-blue h3, .hero-blue h4 { color: white; }
.hero-blue h1 em, .hero-blue h2 em, .hero-blue h3 em {
  color: var(--accent-yellow);
}
.hero-blue p, .hero-blue .lede, .hero-blue .deck {
  color: rgba(255,255,255,0.88);
}
.hero-blue .kicker,
.hero-blue .section-kicker,
.hero-blue .eyebrow {
  color: rgba(255,255,255,0.7);
}
.hero-blue .tag {
  background: rgba(255,255,255,0.12);
  color: white;
  border: 1px solid rgba(255,255,255,0.22);
}

/* Botões dentro de hero-blue (inversão) */
.hero-blue .btn-primary,
.hero-blue .btn.btn-primary {
  background: white; color: var(--brand-blue);
  border-color: white; font-weight: 700;
}
.hero-blue .btn-primary:hover,
.hero-blue .btn.btn-primary:hover {
  background: var(--accent-yellow);
  color: var(--ink);
  border-color: var(--accent-yellow);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -10px rgba(252,211,77,0.55);
}
.hero-blue .btn-ghost {
  background: rgba(255,255,255,0.08);
  color: white;
  border-color: rgba(255,255,255,0.32);
  backdrop-filter: blur(8px);
}
.hero-blue .btn-ghost:hover {
  background: rgba(255,255,255,0.18);
  border-color: white;
  color: white;
}
.hero-blue .btn-link {
  color: white;
}

/* Cards/painéis dentro do hero-blue */
.hero-blue .card,
.hero-blue .panel,
.hero-blue .live-panel,
.hero-blue .cover-panel-card,
.hero-blue .page-cover-aside {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  backdrop-filter: blur(20px);
  color: white;
}
/* Cards translúcidos sobre hero-blue: ainda querem texto branco */
.hero-blue .card *,
.hero-blue .panel *,
.hero-blue .live-panel *,
.hero-blue .cover-panel-card * { color: white; }
/* Page-cover-aside: tem fundo branco no rebrand C — texto NÃO deve ser branco
   (regras específicas em editorial.css cuidam das cores corretas) */
.hero-blue .card em,
.hero-blue .panel em,
.hero-blue .live-panel em,
.hero-blue .cover-panel-card em {
  color: var(--accent-tech);
}

/* Numeral editorial branco no hero-blue */
.hero-blue .editorial-numeral-bg,
.hero-blue .hero-editorial-numeral,
.hero-blue .cover-numeral {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.20);
  opacity: 1;
}

/* Linhas/divisores no hero-blue */
.hero-blue hr,
.hero-blue .cover-issue-rule,
.hero-blue .marginalia-rule {
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.18) !important;
}

/* ============================================
   SHAPE DECORATIVOS para hero-blue
   ============================================ */
.shape-decorative {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.shape-circle-blur {
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(252,211,77,0.30), transparent 65%);
  filter: blur(40px);
  animation: shape-float 14s ease-in-out infinite alternate;
}
.shape-ring {
  width: 280px; height: 280px;
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  animation: shape-rotate 60s linear infinite;
}
.shape-ring::before {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 50%;
}
.shape-grid-dots {
  width: 200px; height: 200px;
  background-image: radial-gradient(rgba(255,255,255,0.22) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  opacity: 0.6;
  -webkit-mask: radial-gradient(circle, black 30%, transparent 75%);
          mask: radial-gradient(circle, black 30%, transparent 75%);
}
@keyframes shape-float {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(20px, -15px); }
  100% { transform: translate(-10px, 10px); }
}
@keyframes shape-rotate { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .hero-blue::before, .hero-blue::after,
  .shape-circle-blur, .shape-ring {
    animation: none !important;
  }
}

@media (max-width: 880px) {
  .shape-decorative { display: none; }
}

/* ============================================================
   STICKY CTA — flutuante, aparece após sair do hero
   Compartilhado por todas as páginas
   ============================================================ */
@keyframes sticky-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.55); }
  70% { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}
.sticky-cta {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px 12px 16px;
  background: linear-gradient(135deg, var(--blue-800, #1E40AF) 0%, var(--blue-500, #3B82F6) 100%);
  color: white;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  border-radius: 999px;
  /* Glow ambient à la Framer/Linear — halo difuso premium */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18) inset,
    0 24px 48px -12px rgba(30,64,175,0.55),
    0 12px 24px -6px rgba(30,64,175,0.35),
    0 4px 10px -2px rgba(0,0,0,0.22);
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Halo externo difuso (glow ambient) */
.sticky-cta::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(59,130,246,0.35), transparent 70%);
  filter: blur(14px);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.sticky-cta.is-visible::before { opacity: 0.9; }
.sticky-cta.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.sticky-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.22) inset,
    0 30px 56px -10px rgba(30,64,175,0.65),
    0 14px 28px -6px rgba(30,64,175,0.42),
    0 4px 12px -2px rgba(0,0,0,0.24);
}
.sticky-cta-icon {
  display: inline-flex;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sticky-cta-icon svg { width: 14px; height: 14px; }
.sticky-cta .live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #10B981;
  margin-right: 2px;
  display: inline-block;
  animation: sticky-pulse-dot 2s ease-in-out infinite;
}
@media (max-width: 600px) {
  .sticky-cta {
    bottom: 16px; right: 16px; left: 16px;
    justify-content: center;
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: opacity 0.2s linear; transform: none !important; }
  .sticky-cta.is-visible { transform: none !important; }
  .sticky-cta .live-dot { animation: none; }
}

/* ============================================================
   DASHBOARD MOCKUP — Show, don't tell para B2G e B2B
   Inspirado em Linear / Framer / Vercel
   ============================================================ */
.lai-dashboard {
  position: relative;
  background: var(--ink, #0B1220);
  border-radius: 18px;
  padding: 22px;
  color: white;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 40px 80px -28px rgba(15,23,42,0.45),
    0 12px 32px -10px rgba(15,23,42,0.32);
  overflow: hidden;
  isolation: isolate;
}
.lai-dashboard::before {
  /* aurora interno sutil */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 280px at 15% 0%, rgba(59,130,246,0.18), transparent 60%),
    radial-gradient(ellipse 500px 240px at 85% 100%, rgba(96,165,250,0.12), transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: dashboard-aurora 18s ease-in-out infinite alternate;
}
@keyframes dashboard-aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(2%, -2%, 0) scale(1.06); }
}
.lai-dashboard > * { position: relative; z-index: 1; }

.lai-dashboard-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  gap: 12px;
}
.lai-dashboard-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
}
.lai-dashboard-title strong { color: white; font-weight: 700; }
.lai-dashboard-icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--blue-700, #1D4ED8), var(--blue-500, #3B82F6));
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(30,64,175,0.4);
}
.lai-dashboard-icon svg { width: 12px; height: 12px; color: white; }
.lai-dashboard-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #34D399;
  font-weight: 700;
}
.lai-dashboard-live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 0 rgba(16,185,129,0.6);
  animation: dashboard-live-pulse 2s ease-out infinite;
}
@keyframes dashboard-live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.55); }
  70% { box-shadow: 0 0 0 7px rgba(16,185,129,0); }
}

/* KPI grid */
.lai-dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.lai-kpi {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 14px 14px 12px;
  position: relative;
  overflow: hidden;
}
.lai-kpi::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(96,165,250,0.6), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.lai-kpi:hover::before { opacity: 1; }
.lai-kpi-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 8px;
  font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.lai-kpi-label svg { width: 11px; height: 11px; opacity: 0.7; }
.lai-kpi-value {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  color: white;
  letter-spacing: -0.025em;
  display: flex; align-items: baseline; gap: 3px;
}
.lai-kpi-value sub, .lai-kpi-value small {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  font-style: normal;
  font-weight: 400;
  margin-left: 2px;
}
.lai-kpi-trend {
  margin-top: 8px;
  display: flex; align-items: center; gap: 5px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.lai-kpi-trend.up { color: #34D399; }
.lai-kpi-trend.flat { color: rgba(255,255,255,0.5); }
.lai-kpi-trend svg { width: 10px; height: 10px; }

/* Body do dashboard — split chart + list */
.lai-dashboard-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.lai-dashboard-panel {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 16px;
  display: flex; flex-direction: column;
  gap: 12px;
  min-height: 180px;
}
.lai-dashboard-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  font-weight: 600;
}
.lai-dashboard-panel-head strong { color: white; font-weight: 700; }
.lai-dashboard-panel-meta {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.4);
}

/* Bar chart */
.lai-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  align-items: end;
  flex: 1;
  min-height: 110px;
}
.lai-bar {
  position: relative;
  background: linear-gradient(180deg, var(--blue-400, #60A5FA), var(--blue-700, #1D4ED8));
  border-radius: 4px 4px 2px 2px;
  height: 0;
  transition: height 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  min-height: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.lai-bar::after {
  content: attr(data-label);
  position: absolute;
  bottom: -16px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 8.5px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.lai-bar:nth-child(7) {
  background: linear-gradient(180deg, #34D399, #10B981);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 14px rgba(16,185,129,0.35);
}

/* List panel */
.lai-list {
  display: flex; flex-direction: column;
  gap: 8px;
  flex: 1;
}
.lai-list-item {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 7px;
  font-size: 12px;
  transition: background 0.25s ease;
}
.lai-list-item:hover { background: rgba(96,165,250,0.07); }
.lai-list-rank {
  font-family: var(--mono);
  font-size: 9.5px;
  color: rgba(255,255,255,0.4);
  font-weight: 700;
  text-align: center;
}
.lai-list-name {
  color: white;
  font-family: var(--sans);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lai-list-value {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(96,165,250,1);
  font-weight: 700;
  letter-spacing: 0.03em;
}
.lai-list-bar {
  grid-column: 1 / -1;
  height: 3px;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}
.lai-list-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-500, #3B82F6), var(--blue-300, #93C5FD));
  border-radius: 2px;
  width: 0;
  transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Footer badges */
.lai-dashboard-foot {
  display: flex; gap: 8px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.lai-dashboard-badge {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(96,165,250,0.13);
  color: rgba(147,197,253,1);
  border: 1px solid rgba(96,165,250,0.22);
  display: inline-flex; align-items: center; gap: 5px;
}
.lai-dashboard-badge::before {
  content: "✓";
  font-family: var(--sans);
  font-weight: 700;
  font-size: 10px;
}

/* Variação claro — para usar fora de hero/section escuras se quiser */
.lai-dashboard.is-light {
  background: white;
  color: var(--ink);
  box-shadow:
    0 0 0 1px var(--rule) inset,
    0 30px 70px -28px rgba(17,24,39,0.22),
    0 10px 24px -10px rgba(17,24,39,0.12);
}

@media (max-width: 880px) {
  .lai-dashboard-kpis { grid-template-columns: repeat(2, 1fr); }
  .lai-dashboard-body { grid-template-columns: 1fr; }
  .lai-dashboard { padding: 18px; }
  .lai-bars { min-height: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  .lai-dashboard::before { animation: none; }
  .lai-dashboard-live::before { animation: none; }
  .lai-bar, .lai-list-bar-fill { transition: none; }
}

/* =========================================================
   Wrapper de seção dashboard — header + dashboard + lateral
   ========================================================= */
.dash-section {
  padding: 110px 0;
  background: linear-gradient(180deg, var(--bg, #FFFFFF) 0%, var(--bg-soft, #EFF6FF) 100%);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.dash-section-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 56px;
  align-items: start;
}
.dash-section-aside {
  position: sticky;
  top: 96px;
}
.dash-section-aside h2 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-top: 18px;
  margin-bottom: 18px;
  text-wrap: balance;
}
.dash-section-aside h2 em { color: var(--blue-800, #1E40AF); font-style: normal; }
.dash-section-aside p {
  font-family: var(--sans);
  font-style: normal;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-muted, #475569);
  margin-bottom: 22px;
  text-wrap: pretty;
}
.dash-section-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blue-800, #1E40AF);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid currentColor;
  transition: gap 0.25s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.dash-section-cta:hover { gap: 12px; }
.dash-section-cta svg { width: 14px; height: 14px; }
@media (max-width: 980px) {
  .dash-section { padding: 80px 0; }
  .dash-section-grid { grid-template-columns: 1fr; gap: 32px; }
  .dash-section-aside { position: static; }
}

/* ============================================================
   TESTIMONIALS — depoimentos com prova social humana
   Estrutura pronta · placeholders honestos até material chegar
   ============================================================ */
.testimonials {
  padding: 110px 0;
  background: linear-gradient(180deg, var(--bg-soft, #EFF6FF) 0%, var(--bg, #FFFFFF) 100%);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.testimonials::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 700px 360px at 100% 0%, rgba(30,64,175,0.05), transparent 60%),
    radial-gradient(ellipse 600px 320px at 0% 100%, rgba(96,165,250,0.04), transparent 60%);
  pointer-events: none;
}
.testimonials .container { position: relative; z-index: 1; }

.testimonials-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 36px;
}
.testimonials-head h2 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.testimonials-head h2 em { color: var(--blue-800, #1E40AF); font-style: normal; }
.testimonials-head-aside {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 420;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-muted, #475569);
  border-left: 2px solid var(--blue-800, #1E40AF);
  padding-left: 22px;
  max-width: 420px;
}

/* Banner "em construção" honesto */
.testimonials-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  background: linear-gradient(135deg, rgba(252,211,77,0.10), rgba(252,211,77,0.04));
  border: 1px solid rgba(252,211,77,0.35);
  border-radius: 12px;
  margin-bottom: 36px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  font-style: normal;
}
.testimonials-banner-icon {
  display: inline-flex;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(252,211,77,0.25);
  color: #B45309;
  flex-shrink: 0;
}
.testimonials-banner-icon svg { width: 18px; height: 18px; }
.testimonials-banner strong {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #B45309;
  font-weight: 700;
  font-style: normal;
  display: block;
  margin-bottom: 2px;
}

/* Grid de cards */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.testimonial-card {
  position: relative;
  padding: 32px 32px 26px;
  background: var(--surface, white);
  border: 1px solid var(--rule);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  isolation: isolate;
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.testimonial-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(30,64,175,0.04), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  pointer-events: none;
  z-index: -1;
}
.testimonial-card:hover {
  border-color: rgba(30,64,175,0.4);
  transform: translateY(-3px);
  box-shadow: 0 24px 50px -22px rgba(30,64,175,0.18);
}
.testimonial-card:hover::before { opacity: 1; }

/* Estado pendente — placeholder elegante */
.testimonial-card.is-pending {
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 22px,
      rgba(30,64,175,0.025) 22px,
      rgba(30,64,175,0.025) 23px
    ),
    var(--surface, white);
  border-style: dashed;
  border-color: rgba(30,64,175,0.22);
}

/* Aspas decorativas (única exceção serif italic — sinaliza "isto é uma citação") */
.testimonial-card::after {
  content: "“";
  position: absolute;
  top: 14px; right: 22px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 80px;
  line-height: 0.7;
  color: rgba(30,64,175,0.16);
  pointer-events: none;
  user-select: none;
}

.testimonial-quote {
  font-family: var(--serif);
  font-weight: 450;
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
  flex: 1;
  min-height: 100px;
}
.testimonial-card.is-pending .testimonial-quote {
  color: var(--ink-muted, #475569);
}
.testimonial-quote em {
  color: var(--blue-800, #1E40AF);
  font-style: italic;
  font-weight: 500;
}

.testimonial-author {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: center;
  padding-top: 18px;
  border-top: 1px dotted var(--rule);
}
.testimonial-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--blue-100, #DBEAFE), var(--blue-200, #BFDBFE));
  border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.testimonial-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.testimonial-avatar.is-pending {
  background:
    linear-gradient(135deg, rgba(30,64,175,0.12), rgba(96,165,250,0.06));
  color: var(--blue-800);
}
.testimonial-avatar.is-pending svg {
  width: 22px; height: 22px;
  opacity: 0.6;
}
.testimonial-author-meta {
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.testimonial-author-name {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.testimonial-card.is-pending .testimonial-author-name {
  color: var(--ink-muted, #475569);
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}
.testimonial-author-meta small {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted, #475569);
  font-weight: 600;
  font-style: normal;
}

/* Badge de progresso (estado pendente) */
.testimonial-progress {
  position: absolute;
  top: 16px; left: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  background: white;
  border: 1px solid rgba(30,64,175,0.25);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-800, #1E40AF);
  font-weight: 700;
  z-index: 1;
}
.testimonial-progress::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue-500, #3B82F6);
  animation: testimonial-pulse 2s ease-in-out infinite;
}
@keyframes testimonial-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}
.testimonial-progress.is-aprovacao {
  border-color: rgba(245,158,11,0.4);
  color: #B45309;
}
.testimonial-progress.is-aprovacao::before { background: #F59E0B; }
.testimonial-progress.is-pronto {
  border-color: rgba(16,185,129,0.4);
  color: #047857;
}
.testimonial-progress.is-pronto::before { background: #10B981; animation: none; }

/* Footer com selo de origem (BNCC + habilidade) */
.testimonial-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px dotted var(--rule);
}
.testimonial-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-800, #1E40AF);
  background: rgba(30,64,175,0.07);
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid rgba(30,64,175,0.16);
}
.testimonial-tag.is-mute {
  color: var(--ink-muted, #475569);
  background: rgba(15,23,42,0.04);
  border-color: rgba(15,23,42,0.10);
}

/* Rodapé da seção — chamada para parceria */
.testimonials-foot {
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px;
  background: var(--surface, white);
  border: 1px solid var(--rule);
  border-radius: 12px;
  flex-wrap: wrap;
}
.testimonials-foot p {
  font-family: var(--sans);
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-muted, #475569);
  margin: 0;
  max-width: 540px;
}
.testimonials-foot p strong {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-800, #1E40AF);
  font-style: normal;
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}
.testimonials-foot .btn-link {
  white-space: nowrap;
}

@media (max-width: 980px) {
  .testimonials { padding: 80px 0; }
  .testimonials-head { grid-template-columns: 1fr; gap: 22px; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .testimonials-foot { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   ICONS — LessonAI editorial pictogram set
   ------------------------------------------------------------
   Estilo: pictogramas editoriais com traço + fill azul translúcido.
   Não é Lucide/Feather — é desenhado pra contexto pedagógico.
   Regras: stroke 1.5, viewBox 24x24, fill duplo (linha + soft).
   ============================================================ */

.lai-icon {
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  color: var(--brand-blue);
}

.lai-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue-50) 0%, var(--blue-100) 100%);
  position: relative;
  margin-bottom: 24px;
  isolation: isolate;
}
.lai-icon-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(30, 64, 175, 0.12);
  pointer-events: none;
}
.lai-icon-wrap--sm { width: 44px; height: 44px; border-radius: 10px; margin-bottom: 16px; }
.lai-icon-wrap--lg { width: 64px; height: 64px; border-radius: 14px; margin-bottom: 28px; }

.lai-icon-wrap .lai-icon { width: 28px; height: 28px; }
.lai-icon-wrap--sm .lai-icon { width: 22px; height: 22px; }
.lai-icon-wrap--lg .lai-icon { width: 32px; height: 32px; }

/* Hover: leve elevação no ícone quando o card faz hover */
.spotlight-card:hover .lai-icon-wrap,
.diff-card:hover .lai-icon-wrap,
.benefit:hover .lai-icon-wrap,
.pillar:hover .lai-icon-wrap,
.feature-item:hover .lai-icon-wrap,
.step:hover .lai-icon-wrap,
.rational-card-item:hover .lai-icon-wrap,
.work-step:hover .lai-icon-wrap {
  background: linear-gradient(135deg, var(--blue-100) 0%, var(--blue-200) 100%);
  transform: translateY(-2px);
}
.lai-icon-wrap {
  transition: background 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

/* Em fundos azuis (hero) */
.hero-blue .lai-icon-wrap {
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(12px);
}
.hero-blue .lai-icon-wrap::before {
  border-color: rgba(255, 255, 255, 0.18);
}
.hero-blue .lai-icon { color: white; }

/* ============================================
   LessonAI — Editorial extension to shared.css
   Compartilhado entre páginas internas
   ============================================ */

/* Marginalia */
.marginalia {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex; align-items: baseline; gap: 14px;
}
.marginalia-num { color: var(--brand-blue); font-weight: 600; }
.marginalia-rule { flex: 1; height: 1px; background: var(--line); align-self: center; }

/* PAGE COVER */
.page-cover {
  position: relative;
  padding: 64px 0 96px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.page-cover::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(17,24,39,0.04) 1px, transparent 0);
  background-size: 24px 24px;
  opacity: 0.7;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}
/* page-cover-numeral e page-cover-issue removidos (rebrand C — sem padrão revista) */
.page-cover .container { position: relative; z-index: 1; }

/* === Eyebrow tech — pill mono uppercase (compartilhado entre home/B2G/B2B/Professores) === */
.cover-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  margin-bottom: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}
.cover-eyebrow::before {
  content: ""; width: 6px; height: 6px;
  background: var(--brand-blue);
  border-radius: 50%;
  flex-shrink: 0;
}
.hero-blue .cover-eyebrow {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-blue .cover-eyebrow::before {
  background: var(--accent-tech);
  box-shadow: 0 0 12px var(--accent-tech);
}

/* === Page-cover-headline em fundo azul — alto contraste === */
.hero-blue .page-cover-headline { color: white; }
.hero-blue .page-cover-headline em,
.hero-blue .page-cover-headline strong { color: var(--accent-tech); font-style: normal; font-weight: 800; }
.hero-blue .page-cover-deck { color: rgba(255,255,255,0.78); }
.hero-blue .page-cover-deck strong { color: white; }

/* (regras antigas .page-cover-aside removidas — substituídas por .cover-panel abaixo) */

.page-cover-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 80px;
  align-items: start;
  padding-top: 24px;
}
/* Headline tech — Inter 800, sem italic */
.page-cover-headline {
  font-family: var(--sans);
  font-weight: 900;
  font-size: clamp(44px, 5.8vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.045em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
.page-cover-headline em,
.page-cover-headline strong {
  font-style: normal;
  color: var(--brand-blue);
  font-weight: 800;
}
.page-cover-deck {
  margin-top: 28px;
  font-family: var(--sans);
  font-weight: 450;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 560px;
  text-wrap: pretty;
}
.page-cover-deck strong {
  font-weight: 600;
  color: var(--ink);
}
.page-cover-cta {
  margin-top: 32px;
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
}

/* .cover-panel CSS movido para wwwroot/css/cover-panel.css */


@media (max-width: 980px) {
  .page-cover-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* Section base — padding-y consistente */
.section {
  padding: 96px 0;
  position: relative;
}
@media (max-width: 880px) {
  .section { padding: 64px 0; }
}

/* Section heads (compartilhado) */
.section-head {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 64px;
  align-items: end;
  margin-bottom: 56px;
}
.section-head h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.section-head h2 em,
.section-head h2 strong { font-style: normal; color: var(--brand-blue); font-weight: 700; }
.section-head-aside {
  font-family: var(--sans);
  font-weight: 450;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 380px;
  border-left: 2px solid var(--brand-blue);
  padding-left: 22px;
}
@media (max-width: 880px) {
  .section-head {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Pillars grid (4 columns) */
.pillars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.pillar {
  padding: 36px 28px 32px;
  border-right: 1px solid var(--line);
  position: relative;
  background: var(--bg);
  transition: background 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  min-height: 280px;
  display: flex; flex-direction: column;
}
.pillar:last-child { border-right: 0; }
.pillar::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--brand-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.pillar:hover {
  background: var(--bg-soft);
  transform: translateY(-3px);
}
.pillar:hover::after { transform: scaleX(1); }
.pillar:hover .pillar-num { letter-spacing: 0.22em; }
.pillar-num {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--brand-blue);
  font-weight: 600;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 12px;
  transition: letter-spacing 0.4s var(--ease-out);
}
.pillar-num::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pillar h3 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.018em;
  margin-bottom: 14px;
  color: var(--ink);
}
.pillar p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}
@media (max-width: 980px) {
  .pillars-grid { grid-template-columns: 1fr 1fr; }
  .pillar:nth-child(2) { border-right: 0; }
  .pillar { border-bottom: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .pillars-grid { grid-template-columns: 1fr; }
  .pillar { border-right: 0; }
}

/* Compliance dark band */
.compliance-band {
  padding: 120px 0;
  background: var(--ink);
  color: var(--bg);
  position: relative;
  overflow: hidden;
}
.compliance-band::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(247,244,237,0.04) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
  mask-image: radial-gradient(circle at 70% 30%, black 0%, transparent 70%);
}
.compliance-band .container { position: relative; z-index: 1; }
.compliance-band h2 { color: var(--bg); font-family: var(--sans); font-weight: 450; }
.compliance-band h2 em { color: var(--brand-blue-3); }
.compliance-band .marginalia { color: rgba(247,244,237,0.6); margin-bottom: 24px; }
.compliance-band .marginalia .marginalia-num { color: var(--brand-blue-3); }
.compliance-band .marginalia .marginalia-rule { background: rgba(247,244,237,0.2); }
.compliance-band-lede {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 450;
  font-size: 19px;
  line-height: 1.5;
  color: rgba(247,244,237,0.78);
  max-width: 620px;
  margin-top: 20px;
}

.compliance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid rgba(247,244,237,0.15);
  border-bottom: 1px solid rgba(247,244,237,0.15);
}
.compliance-item {
  padding: 36px 28px 32px;
  border-right: 1px solid rgba(247,244,237,0.08);
  position: relative;
}
.compliance-item:last-child { border-right: 0; }
.compliance-check {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-blue-3);
  font-weight: 600;
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 8px;
}
.compliance-check::before {
  content: "✓";
  width: 22px; height: 22px;
  border: 1px solid var(--brand-blue-3);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
}
.compliance-item h3 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--bg);
  margin-bottom: 12px;
}
.compliance-item p {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(247,244,237,0.7);
}
@media (max-width: 880px) {
  .compliance-grid { grid-template-columns: 1fr; }
  .compliance-item { border-right: 0; border-bottom: 1px solid rgba(247,244,237,0.08); }
}

/* CTA-final reuse */
.cta-final {
  padding: 140px 0 160px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.cta-final::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 800px 500px at 50% 100%, rgba(30,64,175,0.08), transparent 70%);
  pointer-events: none;
}
.cta-final-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 80px;
  align-items: end;
  position: relative;
}
.cta-final h2 {
  font-family: var(--sans);
  font-weight: 450;
  font-size: clamp(44px, 6vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-bottom: 28px;
}
.cta-final h2 em { color: var(--brand-blue); }
.cta-final-lede {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 450;
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 580px;
  margin-bottom: 32px;
}
.cta-final-actions { display: flex; gap: 18px; flex-wrap: wrap; }
.cta-final-side {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 12px;
  display: flex; flex-direction: column; gap: 18px;
}
.cta-final-side-item {
  padding-bottom: 18px;
  border-bottom: 1px dotted var(--line);
}
.cta-final-side-item:last-child { border-bottom: 0; }
.cta-final-side-item strong {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  margin-top: 6px;
}
@media (max-width: 880px) {
  .cta-final-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* FOOTER */
.footer {
  background: var(--ink);
  color: rgba(247,244,237,0.7);
  padding: 80px 0 36px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 56px;
  margin-bottom: 56px;
}
.footer-brand img { height: 28px; margin-bottom: 18px; }
.footer-brand p {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 450;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 24px;
  max-width: 340px;
}
.footer-contact { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.footer-contact a { color: rgba(247,244,237,0.7); text-decoration: none; transition: color 0.3s; }
.footer-contact a:hover { color: var(--bg); }
.footer-col h5 {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-blue-3);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a, .footer-col ul li {
  font-size: 13.5px;
  color: rgba(247,244,237,0.7);
  text-decoration: none;
  transition: color 0.3s;
}
.footer-col ul a:hover { color: var(--bg); }
.footer-bottom {
  padding-top: 28px;
  border-top: 1px solid rgba(247,244,237,0.12);
  display: flex; justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: rgba(247,244,237,0.5);
  text-transform: uppercase;
}
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}

/* Reveal */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0; transform: translateY(24px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  }
  .reveal.is-in { opacity: 1; transform: translateY(0); }
  /* Fallback: se JS não rodar, o conteúdo aparece após 2s */
  @keyframes reveal-fallback { to { opacity: 1; transform: translateY(0); } }
  .reveal { animation: reveal-fallback 0.01s ease 2s forwards; }
  [data-pageload] {
    opacity: 0; transform: translateY(14px);
    animation: pageload 0.9s var(--ease-out) forwards;
  }
  [data-pageload="1"] { animation-delay: 0.05s; }
  [data-pageload="2"] { animation-delay: 0.18s; }
  [data-pageload="3"] { animation-delay: 0.36s; }
  [data-pageload="4"] { animation-delay: 0.52s; }
  [data-pageload="5"] { animation-delay: 0.68s; }
  @keyframes pageload { to { opacity: 1; transform: translateY(0); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Scroll progress */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 0;
  background: var(--brand-grad);
  z-index: 200;
  transition: width 0.05s linear;
}

/* Process steps (numbered) */
.process-list { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.process-step {
  display: grid;
  grid-template-columns: 80px 1fr 200px;
  gap: 36px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: start;
  transition: background 0.4s;
}
.process-step:hover { background: rgba(30,64,175,0.02); }
.process-step:hover .process-num { color: var(--brand-blue); }
.process-num {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 450;
  font-size: 56px;
  line-height: 0.85;
  color: var(--line);
  letter-spacing: -0.03em;
  transition: color 0.4s;
}
.process-body h3 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: -0.018em;
  margin-bottom: 10px;
  color: var(--ink);
}
.process-body p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
}
.process-time {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  padding-top: 12px;
}
.process-time strong { color: var(--brand-blue); display: block; margin-top: 4px; font-family: var(--sans); font-style: normal; font-weight: 400; font-size: 16px; letter-spacing: -0.01em; text-transform: none; }
@media (max-width: 880px) {
  .process-step { grid-template-columns: 60px 1fr; gap: 20px; }
  .process-time { grid-column: 1 / -1; padding-left: 80px; text-align: left; padding-top: 8px; }
}

/* Compare table */
.compare-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 30px 60px -28px rgba(17,24,39,0.10);
}
.compare-col {
  padding: 40px 36px;
}
.compare-col.before { background: var(--surface-2); border-right: 1px solid var(--line); }
.compare-col.after {
  background: linear-gradient(180deg, rgba(30,64,175,0.04), rgba(30,64,175,0));
  position: relative;
}
.compare-col.after::before {
  content: ""; position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px; background: var(--brand-grad);
}
.compare-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block; margin-bottom: 14px;
}
.compare-col.before .compare-tag { color: #B84444; }
.compare-col.after .compare-tag { color: var(--brand-blue); }
.compare-col h3 {
  font-family: var(--sans); font-weight: 400;
  font-size: 26px; line-height: 1.1;
  letter-spacing: -0.018em;
  margin-bottom: 24px;
}
.compare-col h3 em { color: var(--brand-blue); }
.compare-col ul { list-style: none; }
.compare-col li {
  padding: 14px 0;
  font-size: 15px;
  line-height: 1.45;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  border-bottom: 1px dotted var(--line-soft);
}
.compare-col li:last-child { border-bottom: 0; }
.compare-col li::before {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 2px;
}
.compare-col.before li::before { content: '−'; color: #B84444; }
.compare-col.after li::before { content: '+'; color: var(--brand-blue); }
@media (max-width: 880px) {
  .compare-table { grid-template-columns: 1fr; }
  .compare-col.before { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* Features list (2 cols, left-rule) */
.features-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.feature-item {
  padding: 32px 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: relative;
  transition: background 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.feature-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--brand-grad);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s var(--ease-out);
}
.feature-item:hover {
  background: var(--bg-soft);
  transform: translateY(-2px);
}
.feature-item:hover::before { transform: scaleY(1); }
.feature-item:hover .feature-num { letter-spacing: 0.22em; }
.feature-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-blue);
  font-weight: 600;
  margin-bottom: 12px;
  transition: letter-spacing 0.4s var(--ease-out);
}
.feature-item h4 {
  font-family: var(--sans); font-weight: 400;
  font-size: 20px; line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
  color: var(--ink);
}
.feature-item p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
}

/* === "Em breve" badge for upcoming features === */
.upcoming-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #B45309;
  background: rgba(180, 83, 9, 0.10);
  border: 1px solid rgba(180, 83, 9, 0.25);
  padding: 3px 8px;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 8px;
  position: relative;
  top: -2px;
}
.feature-item.is-upcoming {
  position: relative;
  background: linear-gradient(180deg, transparent 0%, rgba(180, 83, 9, 0.025) 100%);
}
.feature-item.is-upcoming h4 {
  color: var(--ink-soft);
}
.feature-item.is-upcoming p {
  opacity: 0.75;
}

@media (max-width: 880px) {
  .features-grid { grid-template-columns: 1fr; }
  .feature-item { border-right: 0; }
}

/* Pull quote (manifesto) */
.pull-quote {
  font-family: var(--sans);
  font-weight: 450;
  font-style: normal;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.18;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
  border-left: 3px solid var(--brand-blue);
  padding-left: 28px;
  margin: 56px 0;
}
.pull-quote em { color: var(--brand-blue); font-style: normal; }
.pull-quote-byline {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-style: normal;
}

/* ============================================ */
/* RESTAURADO DO V4 — drop-cap, numerais, cursor */
/* ============================================ */
/* ============================================================
   EDITORIAL LAYER — LessonAI
   Camada visual editorial premium: papel + grão + numerais gigantes
   marquee infinito, page-load orchestrated, cursor editorial.
   Mantém: Fraunces, paleta papel #FBFAF7, azul #1E40AF, motion atual.
   ============================================================ */


/* ============================================
   1. PAPEL COM GRÃO — textura sutil em SVG noise
   Aplica grão de 1.5% opacidade no body
   Cria sensação tátil "papel real, não pixel"
   ============================================ */
body {
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.08;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(#n)'/></svg>");
}

/* Linhas guia editoriais sutis (rules atravessando seções) */
.editorial-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink, #0B1220) 20%, var(--ink, #0B1220) 80%, transparent);
  opacity: 0.08;
  margin: 0;
}


/* ============================================
   2. NUMERAL EDITORIAL GIGANTE
   Grandes numerais em outline italic, ancoram seções
   Inspiração: capa de revista, capítulos de livro
   ============================================ */
.editorial-numeral {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 450;
  font-size: clamp(120px, 16vw, 240px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--ink, #0B1220);
  text-stroke: 1px var(--ink, #0B1220);
  opacity: 0.10;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  user-select: none;
  pointer-events: none;
  display: block;
}

.editorial-numeral--solid {
  -webkit-text-stroke: 0;
  color: var(--ink, #0B1220);
  opacity: 0.06;
}

.editorial-numeral--accent {
  -webkit-text-stroke: 1px var(--accent, #1E40AF);
  color: transparent;
  opacity: 0.18;
}

/* Numeral posicionado como background de seção */
.editorial-numeral-bg {
  position: absolute;
  font-size: clamp(180px, 22vw, 320px);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 450;
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 2px var(--ink, #0B1220);
  opacity: 0.15;
  font-variation-settings: "opsz" 144, "SOFT" 80;
}
.editorial-numeral-bg--top-right {
  top: 32px;
  right: 32px;
}
.editorial-numeral-bg--bottom-left {
  bottom: 32px;
  left: 32px;
}


/* ============================================
   3. KICKER EDITORIAL com asterisco/símbolo
   ============================================ */
.kicker-asterisk::before {
  content: "✦ ";
  color: var(--accent, #1E40AF);
  font-size: 0.85em;
  margin-right: 4px;
}


/* ============================================
   4. MARQUEE EDITORIAL — selos institucionais em loop
   Aprimora o marquee existente com style premium
   ============================================ */
.editorial-marquee {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--rule, #E4E8EF);
  border-bottom: 1px solid var(--rule, #E4E8EF);
  background: var(--bg, #FBFAF7);
  padding: 20px 0;
  margin: 96px 0;
}

.editorial-marquee::before,
.editorial-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.editorial-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg, #FBFAF7), transparent);
}
.editorial-marquee::after {
  right: 0;
  background: linear-gradient(-90deg, var(--bg, #FBFAF7), transparent);
}

.editorial-marquee-track {
  display: flex;
  width: max-content;
  animation: editorial-marquee 50s linear infinite;
  will-change: transform;
}

.editorial-marquee-track:hover {
  animation-play-state: paused;
}

@keyframes editorial-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.editorial-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0 36px;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  font-style: normal;
  color: var(--ink, #0B1220);
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-variation-settings: "opsz" 48, "SOFT" 60;
}

.editorial-marquee-item::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent, #1E40AF);
  border-radius: 50%;
  margin-left: 24px;
  opacity: 0.4;
}

.editorial-marquee-item strong {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent, #1E40AF);
  background: rgba(30, 64, 175, 0.07);
  padding: 4px 10px;
  border-radius: 3px;
}


/* ============================================
   5. PAGE-LOAD ORCHESTRATED REVEAL
   Sinfonia coreografada de entrada do hero
   kicker → headline → lede → CTA → dashboard
   ============================================ */
.hero [data-pageload] {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(2px);
  animation: pageload-reveal 1100ms cubic-bezier(0.2, 0.85, 0.3, 1) forwards;
}

@keyframes pageload-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Delays escalonados por elemento */
.hero [data-pageload="1"] { animation-delay: 100ms; }
.hero [data-pageload="2"] { animation-delay: 250ms; }
.hero [data-pageload="3"] { animation-delay: 450ms; }
.hero [data-pageload="4"] { animation-delay: 650ms; }
.hero [data-pageload="5"] { animation-delay: 850ms; }
.hero [data-pageload="6"] { animation-delay: 1050ms; }


/* ============================================
   6. CURSOR EDITORIAL
   Asterisco azul que segue o cursor em links
   editoriais (h1 em, h2 em, blockquote, links)
   ============================================ */
.editorial-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  pointer-events: none;
  z-index: 9998;
  font-family: var(--sans);
  font-size: 22px;
  color: var(--accent, #1E40AF);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 200ms ease, transform 200ms ease;
  mix-blend-mode: multiply;
  font-style: normal;
  font-variation-settings: "opsz" 48, "SOFT" 80;
}

.editorial-cursor.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}


/* ============================================
   7. ASYMMETRIC HERO LAYOUT
   Hero com numeral gigante + headline rasgando o grid
   ============================================ */
.hero-editorial {
  position: relative;
  padding: clamp(80px, 12vh, 160px) 0 clamp(80px, 14vh, 180px);
}

.hero-editorial-numeral {
  position: absolute;
  top: 8%;
  right: -2%;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 450;
  font-size: clamp(180px, 28vw, 460px);
  line-height: 0.78;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 2px var(--ink, #0B1220);
  opacity: 0.18;
  user-select: none;
  pointer-events: none;
  z-index: 0;
  font-variation-settings: "opsz" 144, "SOFT" 80;
}

.hero-editorial-content {
  position: relative;
  z-index: 1;
}


/* ============================================
   8. SECTION HEADERS WITH NUMERAL
   Cada seção principal tem numeral pequeno editorial
   ============================================ */
.section-numeral {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 450;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--accent, #1E40AF);
  margin-bottom: 8px;
  font-variation-settings: "opsz" 14, "SOFT" 60;
}
.section-numeral::before {
  content: "—";
  margin-right: 8px;
  opacity: 0.6;
}


/* ============================================
   9. EDITORIAL DROP CAP — primeira letra de manifesto
   Letra capitular em blocos editoriais longos
   ============================================ */
.drop-cap::first-letter {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 450;
  font-size: 5em;
  line-height: 0.85;
  float: left;
  margin-right: 14px;
  margin-top: 8px;
  margin-bottom: -6px;
  color: var(--accent, #1E40AF);
  font-variation-settings: "opsz" 144, "SOFT" 80;
}


/* ============================================
   10. RULE WITH LABEL — divisor editorial com texto centralizado
   ============================================ */
.editorial-divider {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 80px 0;
  color: var(--ink-muted, #6B7894);
}
.editorial-divider::before,
.editorial-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule, #E4E8EF);
}
.editorial-divider-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted, #6B7894);
  flex-shrink: 0;
}


/* ============================================
   11. HOVER STATES IN EDITORIAL CARDS
   Underline animado em links e títulos
   ============================================ */
.editorial-link {
  position: relative;
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 400ms cubic-bezier(0.2, 0.85, 0.3, 1);
}
.editorial-link:hover {
  background-size: 100% 1px;
}


/* ============================================
   12. RESPECT REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .editorial-marquee-track,
  .hero [data-pageload] {
    animation: none !important;
  }
  .hero [data-pageload] {
    opacity: 1;
    transform: none;
    filter: none;
  }
  .editorial-cursor {
    display: none;
  }
}


/* ============================================
   13. RESPONSIVE
   ============================================ */
@media (max-width: 880px) {
  .editorial-numeral { font-size: clamp(80px, 24vw, 140px); }
  .editorial-numeral-bg { font-size: clamp(120px, 30vw, 200px); }
  .hero-editorial-numeral { font-size: clamp(140px, 36vw, 240px); right: -8%; }
  .editorial-marquee-item { font-size: 14px; padding: 0 24px; }
  .editorial-cursor { display: none; }
  .editorial-divider { margin: 56px 0; }
  body::before { opacity: 0.025; }
}

@media (max-width: 600px) {
  .drop-cap::first-letter { font-size: 4em; }
}

/* ============================================
   LessonAI — Motion System
   Sutil, institucional (Stripe / McKinsey)
   ============================================ */

:root {
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 700ms;
}

/* ===== Reveal on scroll (IO-driven) ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out-smooth),
              transform var(--dur-slow) var(--ease-out-smooth);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="fade"] { transform: none; }
[data-reveal="right"] { transform: translateX(-24px); }
[data-reveal="right"].is-in { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(0.97); }
[data-reveal="scale"].is-in { transform: scale(1); }

/* Stagger: child delay via CSS var --i */
[data-stagger] > * {
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* ===== Page entry (loading feel) ===== */
body {
  animation: pageIn 500ms var(--ease-out-smooth) both;
}
@keyframes pageIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.nav {
  animation: navDown 600ms var(--ease-out-smooth) both;
  animation-delay: 80ms;
}
@keyframes navDown {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hero first-paint stagger */
.hero-entry > * {
  opacity: 0;
  animation: heroIn 700ms var(--ease-out-smooth) both;
}
.hero-entry > *:nth-child(1) { animation-delay: 160ms; }
.hero-entry > *:nth-child(2) { animation-delay: 260ms; }
.hero-entry > *:nth-child(3) { animation-delay: 360ms; }
.hero-entry > *:nth-child(4) { animation-delay: 460ms; }
.hero-entry > *:nth-child(5) { animation-delay: 560ms; }
.hero-entry > *:nth-child(6) { animation-delay: 640ms; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Nav scroll shadow ===== */
.nav {
  transition: box-shadow 300ms var(--ease-out-soft),
              background 300ms var(--ease-out-soft);
}
.nav.is-scrolled {
  box-shadow: 0 1px 0 rgba(17,24,39,0.04), 0 6px 20px rgba(17,24,39,0.04);
}

/* ===== Link underline draw (supplement to existing nav) ===== */
.nav-links a::after {
  transition: transform 400ms var(--ease-out-smooth) !important;
}

/* ===== Hero mesh gradient (very slow, sutil) ===== */
.hero-mesh {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  opacity: 0.55;
}
.hero-mesh::before,
.hero-mesh::after {
  content: ''; position: absolute;
  width: 70vw; height: 70vw; border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}
.hero-mesh::before {
  top: -20%; left: -10%;
  background: radial-gradient(circle, rgba(59,130,246,0.35), transparent 60%);
  animation: mesh1 24s var(--ease-in-out-soft) infinite alternate;
}
.hero-mesh::after {
  bottom: -30%; right: -15%;
  background: radial-gradient(circle, rgba(139,92,246,0.22), transparent 60%);
  animation: mesh2 28s var(--ease-in-out-soft) infinite alternate;
}
@keyframes mesh1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(8vw, 6vw) scale(1.15); }
}
@keyframes mesh2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-6vw, -4vw) scale(1.1); }
}

/* ===== Button shimmer (sutil, institucional) ===== */
.btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255,255,255,0.22) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 800ms var(--ease-out-smooth);
  pointer-events: none;
  z-index: 1;
}
.btn-primary:hover::after {
  transform: translateX(120%);
}
.btn-primary > * { position: relative; z-index: 2; }

/* ===== Card cursor glow ===== */
[data-glow] {
  position: relative;
  isolation: isolate;
}
[data-glow]::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    600px circle at var(--mx, 50%) var(--my, 50%),
    rgba(59,130,246,0.10),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 400ms var(--ease-out-soft);
  pointer-events: none;
  z-index: 0;
}
[data-glow]:hover::before { opacity: 1; }
[data-glow] > * { position: relative; z-index: 1; }

/* ===== Count-up number styling hook ===== */
[data-count] {
  font-variant-numeric: tabular-nums;
}

/* ===== Scroll progress bar ===== */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #1E40AF, #3B82F6, #60A5FA);
  z-index: 1000;
  transition: width 80ms linear;
  pointer-events: none;
}

/* ===== Section separator shimmer on enter ===== */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line, #E5E7EB), transparent);
  margin: 0;
}

/* ============================================
   PROFESSIONAL MOTION LAYER — Stripe/Linear/Vercel grade
   ============================================ */

/* ===== 1. STAGGER REVEAL — cards aparecem em cascata ===== */
[data-stagger-reveal] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out-smooth),
              transform 700ms var(--ease-out-smooth);
  will-change: opacity, transform;
}
[data-stagger-reveal].is-in > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
[data-stagger-reveal].is-in > *:nth-child(2) { transition-delay: 100ms; opacity: 1; transform: translateY(0); }
[data-stagger-reveal].is-in > *:nth-child(3) { transition-delay: 200ms; opacity: 1; transform: translateY(0); }
[data-stagger-reveal].is-in > *:nth-child(4) { transition-delay: 300ms; opacity: 1; transform: translateY(0); }
[data-stagger-reveal].is-in > *:nth-child(5) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }
[data-stagger-reveal].is-in > *:nth-child(6) { transition-delay: 500ms; opacity: 1; transform: translateY(0); }

/* ===== 2. MAGNETIC HOVER — botões "puxam" o cursor (CSS-only setup, JS aplica vars) ===== */
[data-magnetic] {
  --magnet-x: 0px;
  --magnet-y: 0px;
  transform: translate(var(--magnet-x), var(--magnet-y));
  transition: transform 300ms var(--ease-out-smooth);
  will-change: transform;
}
[data-magnetic]:active {
  transition-duration: 100ms;
}

/* ===== 3. CARD CURSOR GLOW — "spotlight" segue cursor (Linear/Vercel) ===== */
.case, .racional-card, .pillar, .feature-item, .value-card, .benefit, .compliance-item {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.case::after, .racional-card::after, .pillar::after,
.feature-item::after, .value-card::after,
.benefit::after, .compliance-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    320px circle at var(--mx, -200px) var(--my, -200px),
    rgba(59, 130, 246, 0.10),
    transparent 50%
  );
  opacity: 0;
  transition: opacity 400ms var(--ease-out-soft);
  pointer-events: none;
  z-index: 0;
}
.case:hover::after, .racional-card:hover::after, .pillar:hover::after,
.feature-item:hover::after, .value-card:hover::after,
.benefit:hover::after, .compliance-item:hover::after {
  opacity: 1;
}
.case > *, .racional-card > *, .pillar > *,
.feature-item > *, .value-card > *,
.benefit > *, .compliance-item > * {
  position: relative;
  z-index: 1;
}

/* ===== 4. NUMBER COUNT-UP visual hint — already JS-driven, css helper ===== */
[data-counter] {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
[data-counter].is-counting {
  color: var(--brand-blue, #1E40AF);
  transition: color 300ms var(--ease-out-soft);
}

/* ===== 5. PARALLAX HERO — fundo se move mais devagar ===== */
.hero-parallax-bg {
  position: absolute;
  inset: -10% 0 0 0;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  transition: transform 100ms linear;
}
.hero-parallax-bg::before {
  content: "";
  position: absolute;
  top: 5%; left: -10%;
  width: 50vw; height: 50vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.08), transparent 65%);
  filter: blur(60px);
}
.hero-parallax-bg::after {
  content: "";
  position: absolute;
  bottom: 10%; right: -10%;
  width: 45vw; height: 45vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.06), transparent 65%);
  filter: blur(60px);
}

/* ===== 6. SECTION HEAD — eyebrow appears with rule animation ===== */
.section-kicker {
  position: relative;
  display: inline-block;
}
.section-kicker::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 1px;
  background: var(--brand-blue, #1E40AF);
  vertical-align: middle;
  margin-right: 0;
  transition: width 600ms var(--ease-out-smooth) 200ms,
              margin-right 600ms var(--ease-out-smooth) 200ms;
}
.is-in .section-kicker::before,
[data-reveal].is-in .section-kicker::before {
  width: 28px;
  margin-right: 12px;
}

/* ===== 7. ENHANCED HOVER LIFTS on cards ===== */
.case, .racional-card, .pillar, .feature-item, .value-card, .benefit {
  transition: transform 400ms var(--ease-out-smooth),
              border-color 400ms var(--ease-out-soft),
              box-shadow 400ms var(--ease-out-soft),
              background 400ms var(--ease-out-soft);
}
.case:hover, .pillar:hover, .feature-item:hover, .benefit:hover, .value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px -25px rgba(11, 18, 32, 0.18);
}
.racional-card:hover {
  transform: translateY(-3px);
}

/* ===== 8. Smooth gradient text shimmer on em ===== */
@keyframes em-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}
.hero h1 em, h2 em {
  display: inline-block;
}

/* ===== 9. SCROLL VELOCITY — adapts when scrolling fast ===== */
html.is-scrolling-fast .case::after,
html.is-scrolling-fast .racional-card::after {
  opacity: 0;
}

/* ===== Respect reduced motion =====
   O que incomoda quem ativa essa preferência é MOVIMENTO (deslocamento,
   parallax, loop infinito), não variação de opacidade. Por isso o corte
   geral abaixo continua matando toda animação — inclusive marquees e
   floats infinitos — mas os reveals ganham de volta um fade sem deslocar.

   Sem essa exceção o site fica completamente estático no Windows com
   "Efeitos de animação" desligado, que é o padrão em muita máquina de
   secretaria e escola. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Exceção: fade sem movimento. Especificidade de classe/atributo vence
     o seletor universal acima, mesmo ambos com !important.
     Depende de html.js para nunca esconder conteúdo se o JS falhar.

     Vale para .reveal e [data-reveal]: os dois só têm estilo dentro de
     blocos no-preference (editorial.css, shared.css, pages/home.css),
     então sob reduced-motion não havia nada para revelar. */
  .js .reveal,
  .js [data-reveal],
  .js [data-stagger-reveal] > * {
    opacity: 0;
    transform: none !important;
    transition: opacity 0.6s ease !important;
  }
  .js .reveal.is-in,
  .js [data-reveal].is-in,
  .js [data-stagger-reveal].is-in > * { opacity: 1; }

  /* Sem JS o conteúdo aparece direto, como antes */
  [data-reveal] { opacity: 1; transform: none; }
  [data-stagger-reveal] > * { opacity: 1; transform: none; }
  .hero-mesh, .hero-parallax-bg { display: none; }
  .btn-primary::after { display: none; }
  [data-glow]::before { display: none; }
  .case::after, .racional-card::after, .pillar::after,
  .feature-item::after, .value-card::after,
  .benefit::after, .compliance-item::after { display: none; }
}