/* =========================================================================
   Modivita Landing v2 — tema claro "Papel Studio"
   Alinhado ao app-light (linho/café). Sem modo escuro.
   Escopo total em .landing-v2
   ========================================================================= */

.landing-v2 {
  color-scheme: light;

  /* Paleta Hospital Espiritual da Caridade (brand/cores.md) */
  --lv2-bg: #e8f3f0;
  --lv2-bg-2: #d3e4ec;
  --lv2-bg-elevated: #f7fbfa;
  --lv2-panel: #ffffff;
  --lv2-panel-2: #f2f7f5;
  --lv2-panel-hover: #e7f1ee;
  --lv2-border: #c5d9e1;
  --lv2-border-soft: #d3e4ec;
  --lv2-border-strong: #8fb0bc;

  /* texto */
  --lv2-heading: #0f3f52;
  --lv2-white: var(--lv2-heading);
  --lv2-fg: #1b4a5c;
  --lv2-muted: #2f5c6c;
  --lv2-faint: #5d7e8b;

  /* dourado da auréola */
  --lv2-accent: #d4b955;
  --lv2-accent-strong: #a88b2e;
  --lv2-accent-soft: #f8f1d4;
  --lv2-on-accent: #0f3f52;
  --lv2-success: #1f7a4d;

  --lv2-cyan-100: var(--lv2-on-accent);
  --lv2-cyan-200: var(--lv2-accent);
  --lv2-cyan-300: var(--lv2-accent-strong);
  --lv2-cyan-400: var(--lv2-accent);
  --lv2-blue-300: var(--lv2-accent);
  --lv2-blue-400: var(--lv2-accent-strong);
  --lv2-blue-500: oklch(0.42 0.095 52);
  --lv2-emerald: var(--lv2-success);

  --lv2-shadow: 0 1px 2px oklch(0.32 0.02 85 / 0.06), 0 8px 24px oklch(0.32 0.02 85 / 0.06);
  --lv2-shadow-lg: 0 12px 40px oklch(0.32 0.02 85 / 0.1), 0 2px 8px oklch(0.32 0.02 85 / 0.04);
  --lv2-overlay: oklch(0.32 0.028 65 / 0.32);

  --lv2-radius: 2rem;
  --lv2-radius-sm: 1rem;
  --lv2-max-w: 1280px;
  --lv2-frame-w: 1360px;
  --lv2-nav-h: 4.25rem;

  --lv2-font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --lv2-font-body: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;

  position: relative;
  font-family: var(--lv2-font-body);
  color: var(--lv2-fg);
  background: var(--lv2-bg);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: visible;
  scrollbar-gutter: stable;
  scroll-padding-top: var(--lv2-nav-h);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-rendering: auto;
}

.landing-v2 *,
.landing-v2 *::before,
.landing-v2 *::after {
  box-sizing: border-box;
}

.landing-v2 ::selection {
  background: oklch(0.78 0.11 95 / 0.18);
  color: var(--lv2-heading);
}

/* ---------- camadas de fundo (glows + noise + grid) ---------- */
.lv2-bg-layers {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.lv2-bg-base {
  position: absolute;
  inset: 0;
  background-color: #e8f3f0;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(211, 228, 236, 0.95) 0%, transparent 46%),
    radial-gradient(circle at 82% 8%, rgba(212, 185, 85, 0.18) 0%, transparent 34%);
  background-size: auto, auto;
  background-position: 18% 12%, 82% 8%;
  background-repeat: no-repeat;
}

.lv2-fluid-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.1);
  transform-origin: center top;
  pointer-events: none;
  opacity: 0.6;
  mix-blend-mode: multiply;
}

/* Modal aberto: congela o canvas visualmente (RAF também pausa no JS). */
html[data-lv2-auth-open="1"] .lv2-fluid-canvas {
  visibility: hidden;
}

.lv2-bg-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    oklch(0.97 0.012 92 / 0.01) 0%,
    oklch(0.96 0.012 92 / 0.03) 55%,
    oklch(0.955 0.013 90 / 0.05) 100%
  );
}

.lv2-bg-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% -10%, oklch(0.78 0.11 95 / 0.1), transparent 36%),
    radial-gradient(circle at 82% 18%, oklch(0.62 0.055 68 / 0.08), transparent 28%);
}

.lv2-bg-noise {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.lv2-bg-grid {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  width: 100%;
  max-width: var(--lv2-frame-w);
  transform: translateX(-50%);
  background-image:
    linear-gradient(to right, oklch(0.82 0.018 88 / 0.35) 1px, transparent 1px);
  background-size: 25% 100%;
}

/* moldura central */
.lv2-shell {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  width: 100%;
  max-width: var(--lv2-frame-w);
  padding-top: var(--lv2-nav-h);
}

.lv2-container {
  width: 100%;
  max-width: var(--lv2-max-w);
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (min-width: 640px) {
  .lv2-container { padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 1024px) {
  .lv2-container { padding-left: 2.5rem; padding-right: 2.5rem; }
}

/* ---------- tipografia ---------- */
.landing-v2 h1,
.landing-v2 h2,
.landing-v2 h3,
.landing-v2 h4 {
  font-family: var(--lv2-font-display);
  font-weight: 600;
  color: var(--lv2-white);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.landing-v2 p { margin: 0; }

/* ---------- botões ---------- */
.lv2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--lv2-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 9999px;
  padding: 0.7rem 1.25rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
  text-decoration: none;
  white-space: nowrap;
}

.lv2-btn-lg { padding: 0.85rem 1.5rem; font-size: 0.95rem; }

.lv2-btn-primary {
  background: var(--lv2-accent);
  color: var(--lv2-on-accent);
  box-shadow: var(--lv2-shadow);
}
.lv2-btn-primary:hover {
  background: var(--lv2-accent-strong);
  transform: scale(1.03);
  box-shadow: var(--lv2-shadow-lg);
}

.lv2-btn-outline {
  background: var(--lv2-panel);
  color: var(--lv2-fg);
  border-color: var(--lv2-border);
  box-shadow: var(--lv2-shadow);
}
.lv2-btn-outline:hover {
  background: var(--lv2-panel-hover);
  border-color: var(--lv2-border-strong);
  transform: scale(1.02);
  color: var(--lv2-heading);
}

.lv2-btn-ghost {
  background: transparent;
  color: var(--lv2-muted);
}
.lv2-btn-ghost:hover { color: var(--lv2-heading); }

/* ---------- header / nav ---------- */
.landing-v2 nav.lv2-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: oklch(0.985 0.01 90 / 0.52);
  border-bottom: none;
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  transition:
    background 0.35s ease,
    box-shadow 0.35s ease;
}

.landing-v2 nav.lv2-nav::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(calc(100% - 2rem), var(--lv2-frame-w));
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    oklch(0.78 0.11 95 / 0.12) 15%,
    oklch(0.58 0.09 58 / 0.28) 50%,
    oklch(0.78 0.11 95 / 0.12) 85%,
    transparent 100%
  );
  pointer-events: none;
}

.landing-v2 nav.lv2-nav.is-scrolled {
  background: oklch(0.98 0.012 88 / 0.9);
  box-shadow: 0 8px 28px oklch(0.32 0.03 62 / 0.07);
}

.lv2-nav-inner {
  height: var(--lv2-nav-h);
  max-width: var(--lv2-frame-w);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 640px) { .lv2-nav-inner { padding: 0 2rem; } }
@media (min-width: 1024px) { .lv2-nav-inner { padding: 0 2.5rem; } }

.lv2-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--lv2-font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--lv2-white);
  text-decoration: none;
  letter-spacing: -0.035em;
}
.lv2-nav-brand .lv2-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.7rem;
  border: 1px solid oklch(0.78 0.11 95 / 0.2);
  background: var(--lv2-accent-soft);
  color: var(--lv2-accent-strong);
}

.lv2-brand-emblem {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  flex-shrink: 0;
}

.lv2-nav-brand-text {
  font-family: var(--lv2-font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lv2-brand-full {
  display: block;
  width: min(100%, 15.5rem);
  height: auto;
}

.lv2-footer-brand-link {
  display: inline-block;
  text-decoration: none;
}

.lv2-footer-brandcol .lv2-brand-full {
  width: min(100%, 14.5rem);
}

.lv2-brand-stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.lv2-brand-stacked-emblem {
  width: 7.25rem;
  height: 7.25rem;
  object-fit: contain;
}

.lv2-brand-stacked-wordmark {
  display: block;
  width: min(100%, 16.5rem);
  height: auto;
}

.lv2-footer-brandcol .lv2-brand-stacked-emblem {
  width: 6.75rem;
  height: 6.75rem;
}

.lv2-footer-brandcol .lv2-brand-stacked-wordmark {
  width: min(100%, 15.5rem);
}

.lv2-nav-links {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 2rem;
}
@media (min-width: 900px) { .lv2-nav-links { display: flex; } }

.lv2-nav-links a {
  position: relative;
  font-size: 0.875rem;
  color: var(--lv2-muted);
  text-decoration: none;
  transition: color 0.3s ease;
}
.lv2-nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.5rem;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, oklch(0.78 0.11 95), oklch(0.62 0.08 68));
  transition: width 0.3s ease;
}
.lv2-nav-links a:hover { color: var(--lv2-heading); }
.lv2-nav-links a:hover::after { width: 100%; }

.lv2-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.lv2-nav-actions .lv2-btn-nav {
  padding: 0.55rem 1rem;
  font-size: 0.8125rem;
}
.lv2-nav-actions .lv2-btn-outline { display: none; }
@media (min-width: 900px) { .lv2-nav-actions .lv2-btn-outline { display: inline-flex; } }

.lv2-hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid oklch(0.78 0.11 95 / 0.14);
  background: oklch(0.99 0.008 92 / 0.75);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.lv2-hamburger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--lv2-heading);
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.lv2-hamburger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.lv2-hamburger.open span:nth-child(2) { opacity: 0; }
.lv2-hamburger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
@media (min-width: 900px) { .lv2-hamburger { display: none; } }

/* menu mobile aberto */
.lv2-nav-links.open {
  display: flex;
  position: fixed;
  top: var(--lv2-nav-h);
  left: 0;
  right: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem 1.5rem;
  background: oklch(0.985 0.01 90 / 0.96);
  border-bottom: 1px solid oklch(0.78 0.11 95 / 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 12px 32px oklch(0.32 0.03 62 / 0.08);
  z-index: 49;
}

/* ---------- estrutura de seção ---------- */
.landing-v2 section {
  position: relative;
  border-top: 0;
  padding: 6rem 0;
}
.landing-v2 section.lv2-hero { border-top: 0; overflow: hidden; }

/* divisor anel + ECG entre blocos (inspirado no emblema) */
.lv2-ring-divider {
  position: relative;
  z-index: 1;
  padding: 2.5rem 0;
  pointer-events: none;
  overflow: hidden;
}

.lv2-ring-divider__inner {
  width: 100%;
  max-width: var(--lv2-max-w);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.lv2-ring-divider__track {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.35rem;
  min-height: 4rem;
}

.lv2-ring-divider__ecg {
  display: block;
  width: 100%;
  min-width: 0;
  height: 2.25rem;
  overflow: hidden;
  pointer-events: none;
}

@media (max-width: 767px) {
  .lv2-ring-divider {
    padding: 1.75rem 0;
  }

  .lv2-ring-divider__inner {
    padding: 0 0.5rem;
  }

  .lv2-ring-divider__track {
    gap: 0.15rem;
    min-height: 2.85rem;
  }

  .lv2-ring-divider__ecg {
    height: 1.5rem;
  }

  .lv2-ring-divider__ecg .ecg-base-line {
    stroke-width: 1.5;
  }

  .lv2-ring-divider__emblem {
    width: 2.5rem;
    height: 2.5rem;
  }
}

.lv2-ring-divider__ecg .ecg-base-line {
  fill: none;
  stroke: oklch(0.46 0.095 55 / 0.72);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lv2-ring-divider__emblem {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  box-shadow: 0 4px 14px oklch(0.32 0.03 62 / 0.08);
}

.lv2-ring-divider__emblem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (min-width: 768px) {
  .lv2-ring-divider {
    padding: 3rem 0;
  }

  .lv2-ring-divider__track {
    gap: 0.5rem;
    min-height: 4.25rem;
  }

  .lv2-ring-divider__emblem {
    width: 3.75rem;
    height: 3.75rem;
  }

  .lv2-ring-divider__ecg {
    height: 2.5rem;
  }

  .lv2-ring-divider__ecg .ecg-base-line {
    stroke-width: 1.65;
    stroke: oklch(0.42 0.1 52 / 0.78);
  }
}

.lv2-section-head {
  display: grid;
  gap: 2rem;
  align-items: end;
}
@media (min-width: 1024px) {
  .lv2-section-head { grid-template-columns: 1fr 0.72fr; }
}

.lv2-eyebrow {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--lv2-accent);
  font-family: var(--lv2-font-body);
}
.lv2-eyebrow-muted { color: var(--lv2-muted); }

.lv2-section-title {
  margin-top: 1rem;
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.lv2-section-sub {
  color: var(--lv2-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}
.lv2-section-head .lv2-section-sub { max-width: 28rem; margin-left: auto; }

/* ---------- reveal ---------- */
.landing-v2 .lv2-reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.landing-v2 .lv2-reveal.lv2-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.landing-v2 .lv2-reveal.lv2-revealed {
  transform: none;
  transition: none;
}
/* Throttled using requestAnimationFrame */
.landing-v2 .lv2-reveal-scroll {
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, 20px, 0);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, filter, transform;
}
.landing-v2 .lv2-reveal-scroll.lv2-visible {
  opacity: 1;
  filter: blur(0px);
  transform: translate3d(0, 0, 0);
}
.landing-v2 .lv2-reveal-scroll.lv2-revealed {
  transition: none;
  opacity: calc(1 - var(--scroll-progress, 0));
  filter: blur(calc(var(--scroll-progress, 0) * 12px));
  transform: translate3d(0, calc(var(--scroll-progress, 0) * 140px), 0);
}
@media (prefers-reduced-motion: reduce) {
  .landing-v2 .lv2-reveal { opacity: 1; transform: none; transition: none; }
  .landing-v2 .lv2-reveal-scroll {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
  .landing-v2 .lv2-reveal-scroll.lv2-revealed {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* =========================================================================
   HERO
   ========================================================================= */
.lv2-hero {
  padding-top: 2.5rem;
  padding-bottom: 6rem;
}
@media (min-width: 1024px) {
  .lv2-hero { padding-top: 3rem; padding-bottom: 6rem; }
}

.lv2-hero-grid {
  display: grid;
  gap: 3.5rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .lv2-hero-grid { grid-template-columns: 0.95fr 1.05fr; gap: 3rem; }
}

.lv2-hero-glow {
  position: absolute;
  left: 50%;
  top: 6rem;
  width: 18rem;
  height: 18rem;
  transform: translateX(-50%);
  border-radius: 9999px;
  background: oklch(0.78 0.11 95 /  0.1);
  filter: blur(80px);
  pointer-events: none;
}

.lv2-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-radius: 9999px;
  border: 1px solid var(--lv2-border);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.4rem 0.8rem;
  font-size: 0.78rem;
  color: var(--lv2-fg);
  backdrop-filter: blur(16px);
}
.lv2-badge .lv2-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--lv2-cyan-200);
  box-shadow: 0 0 10px oklch(0.78 0.11 95 /  0.6);
}

.lv2-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  max-width: 20ch;
}
.lv2-hero-sub {
  margin-top: 1.75rem;
  max-width: 42ch;
  font-size: 1.075rem;
  line-height: 1.75;
  color: var(--lv2-muted);
}
.lv2-hero-actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (max-width: 767px) {
  .lv2-hero {
    padding-bottom: 3.5rem;
  }

  .lv2-hero-grid {
    gap: 2rem;
  }

  .lv2-hero-sub {
    max-width: 100%;
  }

  .lv2-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .lv2-hero-actions .lv2-btn {
    width: 100%;
    justify-content: center;
  }

  .lv2-hero-visual {
    min-height: 0;
    overflow: visible;
    margin-top: 0.25rem;
  }

  .lv2-mock {
    max-width: 18.5rem;
    margin-inline: auto;
    padding: 0.5rem;
    border-radius: 1.35rem;
  }

  .lv2-mock-inner {
    border-radius: 1rem;
  }

  .lv2-mock-top {
    padding: 0.6rem 0.75rem;
  }

  .lv2-mock-top .lv2-eyelabel {
    font-size: 0.62rem;
  }

  .lv2-mock-top .lv2-toptitle {
    font-size: 0.78rem;
  }

  .lv2-live {
    font-size: 0.62rem;
    padding: 0.25rem 0.5rem;
  }

  .lv2-mock-main {
    padding: 0.75rem;
  }

  .lv2-mock-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .lv2-stat {
    min-width: 0;
    padding: 0.55rem 0.35rem;
  }

  .lv2-stat .lv2-stat-label {
    font-size: 0.5rem;
    letter-spacing: 0.08em;
  }

  .lv2-stat .lv2-stat-value {
    font-size: 0.95rem;
    margin-top: 0.35rem;
  }

  .lv2-stat .lv2-stat-hint {
    font-size: 0.58rem;
    margin-top: 0.15rem;
  }

  .lv2-mock-list {
    padding: 0.75rem;
    margin-top: 0.75rem;
  }

  .lv2-mock-list-head .t {
    font-size: 0.68rem;
  }

  .lv2-mock-list-head .s {
    font-size: 0.6rem;
  }

  .lv2-row {
    padding: 0.55rem 0.6rem;
    margin-bottom: 0.45rem;
  }

  .lv2-row .rt {
    font-size: 0.65rem;
  }

  .lv2-row .rs {
    font-size: 0.58rem;
  }

  .lv2-tag {
    font-size: 0.58rem;
    padding: 0.15rem 0.4rem;
  }
}

/* mockup do dashboard flutuante */
.lv2-hero-visual {
  position: relative;
  width: 100%;
  min-height: 30rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lv2-hero-visual .lv2-glow-a {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34rem;
  height: 34rem;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  background: oklch(0.78 0.11 95 /  0.08);
  filter: blur(100px);
}
.lv2-hero-visual .lv2-glow-b {
  position: absolute;
  left: 62%;
  top: 22%;
  width: 11rem;
  height: 11rem;
  transform: translateX(-50%);
  border-radius: 9999px;
  background: oklch(0.78 0.11 95 /  0.06);
  filter: blur(80px);
}

.lv2-mock {
  position: relative;
  width: 100%;
  max-width: 42rem;
  border-radius: var(--lv2-radius);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(2, 6, 23, 0.7);
  padding: 0.75rem;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(24px);
  animation: lv2-float 8s ease-in-out infinite;
}
.lv2-mock-inner {
  overflow: hidden;
  border-radius: 1.55rem;
  border: 1px solid var(--lv2-border);
  background: rgba(11, 18, 32, 0.95);
}
.lv2-mock-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
  padding: 0.9rem 1.25rem;
}
.lv2-mock-top .lv2-eyelabel { font-size: 0.72rem; color: var(--lv2-muted); }
.lv2-mock-top .lv2-toptitle { margin-top: 0.15rem; font-size: 0.85rem; font-weight: 500; color: var(--lv2-heading); font-family: var(--lv2-font-body); }
.lv2-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.35rem 0.75rem;
  font-size: 0.72rem;
  color: var(--lv2-fg);
}
.lv2-live .lv2-live-dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--lv2-emerald); animation: lv2-pulse 2s infinite; }

.lv2-mock-body { display: grid; grid-template-columns: 0.28fr 1fr; }
.lv2-mock-aside {
  display: none;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.01);
  padding: 1rem;
}
@media (min-width: 640px) { .lv2-mock-aside { display: block; } }
.lv2-mock-navitem {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.72rem;
  color: var(--lv2-muted);
  margin-bottom: 0.25rem;
}
.lv2-mock-navitem .lv2-nav-bullet { width: 6px; height: 6px; border-radius: 9999px; background: rgba(255, 255, 255, 0.2); }
.lv2-mock-navitem.active { background: oklch(0.78 0.11 95 /  0.1); color: var(--lv2-cyan-200); font-weight: 500; }
.lv2-mock-navitem.active .lv2-nav-bullet { background: var(--lv2-cyan-300); box-shadow: 0 0 8px oklch(0.78 0.11 95 /  0.8); }

.lv2-mock-main { padding: 1.25rem; }
.lv2-mock-stats { display: grid; gap: 0.75rem; grid-template-columns: repeat(3, 1fr); }
.lv2-stat {
  border-radius: 1rem;
  border: 1px solid var(--lv2-border-soft);
  background: rgba(255, 255, 255, 0.02);
  padding: 0.9rem;
}
.lv2-stat.accent { border-color: oklch(0.78 0.11 95 /  0.2); background: oklch(0.78 0.11 95 /  0.05); }
.lv2-stat .lv2-stat-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--lv2-faint); font-weight: 600; }
.lv2-stat.accent .lv2-stat-label { color: oklch(0.78 0.11 95 /  0.8); }
.lv2-stat .lv2-stat-value { margin-top: 0.5rem; font-family: var(--lv2-font-display); font-weight: 500; font-size: 1.5rem; color: var(--lv2-white); letter-spacing: -0.03em; }
.lv2-stat .lv2-stat-hint { margin-top: 0.25rem; font-size: 0.72rem; color: var(--lv2-muted); }
.lv2-stat .lv2-stat-hint.good { color: oklch(0.78 0.11 95 /  0.85); }
.lv2-stat .lv2-stat-hint.accent { color: oklch(0.78 0.11 95 /  0.8); }

.lv2-mock-list {
  margin-top: 1rem;
  border-radius: 1rem;
  border: 1px solid var(--lv2-border-soft);
  background: rgba(255, 255, 255, 0.02);
  padding: 1rem;
}
.lv2-mock-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.lv2-mock-list-head .t { font-size: 0.75rem; font-weight: 500; color: var(--lv2-white); font-family: var(--lv2-font-body); }
.lv2-mock-list-head .s { margin-top: 0.15rem; font-size: 0.68rem; color: var(--lv2-muted); }
.lv2-chip { border-radius: 9999px; background: rgba(255, 255, 255, 0.08); padding: 0.25rem 0.6rem; font-size: 0.62rem; color: var(--lv2-fg); }
.lv2-row {
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  padding: 0.7rem 0.75rem;
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.lv2-row.accent { border-color: oklch(0.78 0.11 95 /  0.15); background: oklch(0.78 0.11 95 /  0.05); }
.lv2-row .rt { font-size: 0.72rem; font-weight: 500; color: var(--lv2-heading); font-family: var(--lv2-font-body); }
.lv2-row .rs { margin-top: 0.2rem; font-size: 0.62rem; color: var(--lv2-faint); }
.lv2-tag { border-radius: 9999px; padding: 0.2rem 0.5rem; font-size: 0.62rem; font-weight: 600; }
.lv2-tag.high { background: oklch(0.78 0.11 95 /  0.15); color: var(--lv2-cyan-200); }
.lv2-tag.normal { background: rgba(255, 255, 255, 0.08); color: var(--lv2-fg); }
.lv2-tag.done { background: oklch(0.78 0.11 95 /  0.14); color: var(--lv2-accent); }

/* cards flutuantes soltos */
.lv2-float-card {
  position: absolute;
  border-radius: 1rem;
  border: 1px solid oklch(0.78 0.11 95 /  0.2);
  background: rgba(11, 18, 32, 0.85);
  padding: 1rem;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(16px);
  animation: lv2-float 9s ease-in-out infinite;
  display: none;
}
@media (min-width: 640px) { .lv2-float-card.a { display: block; } }
@media (min-width: 768px) { .lv2-float-card.b { display: block; } }
.lv2-float-card.a { right: 0; top: 6%; width: 11rem; animation-delay: -1s; }
.lv2-float-card.b { left: -1%; bottom: 8%; width: 13rem; border-color: oklch(0.78 0.11 95 /  0.2); animation-delay: -3s; }
.lv2-float-card .fc-label { font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: oklch(0.78 0.11 95 /  0.8); }
.lv2-float-card .fc-value { margin-top: 0.5rem; font-family: var(--lv2-font-display); font-weight: 500; font-size: 1.5rem; color: var(--lv2-white); letter-spacing: -0.03em; }
.lv2-float-card .fc-bar { margin-top: 0.75rem; height: 6px; border-radius: 9999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.lv2-float-card .fc-bar > span { display: block; height: 100%; width: 90%; border-radius: 9999px; background: oklch(0.78 0.11 95 /  0.8); box-shadow: 0 0 10px oklch(0.78 0.11 95 /  0.5); }
.lv2-float-card .fc-row { display: flex; align-items: center; gap: 0.7rem; }
.lv2-float-card .fc-ico { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; border: 1px solid oklch(0.78 0.11 95 /  0.2); background: oklch(0.78 0.11 95 /  0.1); color: var(--lv2-emerald); }
.lv2-float-card .fc-t { font-size: 0.72rem; font-weight: 500; color: var(--lv2-white); font-family: var(--lv2-font-body); }
.lv2-float-card .fc-s { margin-top: 0.15rem; font-size: 0.62rem; color: var(--lv2-muted); }

/* =========================================================================
   CAROUSEL HERO LAYOUT & STYLING (Replaces the 3 sequential banners)
   ========================================================================= */
.lv2-carousel-hero {
  position: relative;
  padding: 6rem 0 4rem;
  overflow: hidden;
}

.lv2-carousel-visual-wrapper {
  position: relative;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto 3rem;
  min-height: 400px;
  display: grid;
  grid-template-columns: 1fr;
}

.lv2-carousel-slide {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  width: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out, filter 0.8s ease-in-out;
  pointer-events: none;
  transform: scale(0.97) translateY(10px);
  filter: blur(8px);
  visibility: hidden;
}

.lv2-carousel-slide.active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(0);
  filter: blur(0);
  visibility: visible;
}

.lv2-carousel-text-wrapper {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto;
  animation: fadeIn 0.8s ease forwards;
  min-height: 220px;
}

.lv2-carousel-text-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.lv2-carousel-text-inner .lv2-badge {
  margin-bottom: 1rem;
}

.lv2-carousel-text-inner h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--lv2-heading);
  margin-bottom: 1rem;
}

.lv2-carousel-text-inner .lv2-hero-sub {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  color: var(--lv2-text);
  line-height: 1.6;
  margin-bottom: 2.5rem;
  max-width: 40rem;
}

/* --- TEXT MASK REVEAL ANIMATION --- */
.reveal-mask-line {
  overflow: hidden;
  /* Adds a slight padding so letters like 'p' and 'q' are not cut off at the bottom */
  padding-bottom: 0.25rem;
  margin-bottom: -0.25rem;
  width: 100%;
}

.reveal-item {
  transform: translateY(120%);
  opacity: 0;
  animation: reveal-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes reveal-up {
  0% {
    transform: translateY(120%);
    opacity: 0;
  }
  20% {
    opacity: 1; /* Fade in quickly at the start, then mostly just slide */
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.lv2-carousel-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 3rem;
  box-sizing: border-box;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lv2-border-strong);
  border: none;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
  padding: 0;
}

.carousel-dot.active {
  background: var(--lv2-accent);
  transform: scale(1.3);
}

.lv2-banner-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.lv2-banner-card {
  width: 100%;
  max-width: 44rem;
  background: #fdfbf7;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--lv2-radius);
  padding: 1.5rem;
  box-shadow: 0 12px 36px -12px rgba(0,0,0,0.08);
  position: relative;
}

/* --- BANNER 1: Live Agenda (Real UI Replica) --- */
.real-ui-card {
  background: #FCFAF8; /* Light cream to match real system */
  color: var(--lv2-text);
  font-family: var(--font-sans);
}

.real-agenda-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding-bottom: 0.75rem;
}

.real-agenda-header h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #382D20;
  margin: 0;
}

.icon-calendar {
  width: 20px;
  height: 20px;
  display: block;
  background-color: #6F6659;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain;
}

.real-agenda-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.real-agenda-item {
  display: flex;
  align-items: flex-start;
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  border: 1px solid transparent;
  border-left-width: 4px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  transition: transform 0.3s ease;
}

.real-agenda-item.status-green {
  background: rgba(19, 122, 71, 0.04);
  border-left-color: #137A47;
}

.real-agenda-item.status-orange {
  background: rgba(179, 85, 0, 0.04);
  border-left-color: #D8843C;
}

.real-agenda-item.active-pulse {
  transform: translateX(4px);
  border-right: 1px solid rgba(0,0,0,0.05);
  border-top: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.real-appt-time {
  font-size: 0.75rem;
  font-weight: 600;
  width: 4.8rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.status-green .real-appt-time { color: #137A47; }
.status-orange .real-appt-time { color: #D8843C; }

.real-appt-main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.real-appt-name {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #382D20;
}

.real-appt-tags {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.real-tag {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0.1rem 0.3rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
}

.real-appt-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  margin-top: 0.1rem;
}

.real-status-pill {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  text-transform: uppercase;
}

.pill-green {
  background: #E6F3EB;
  color: #137A47;
  border: 1px solid rgba(19, 122, 71, 0.15);
}

.pill-orange {
  background: #FFF1E5;
  color: #B35500;
  border: 1px solid rgba(179, 85, 0, 0.15);
}

.real-appt-icon {
  color: rgba(0, 0, 0, 0.3);
  margin-top: 0.25rem;
}

/* --- BANNER 2: Dashboard (Real UI Replica) --- */
.real-dash-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.real-dash-kpi {
  background: #FDFDFD;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 6px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.real-kpi-lbl {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6B7280;
  margin: 0 0 0.5rem 0;
}

.real-kpi-val {
  font-size: 1.8rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
  font-family: var(--lv2-font-display);
}

.real-kpi-trend {
  font-size: 0.7rem;
  font-weight: 700;
  margin: 0.5rem 0 0 0;
}

.real-kpi-trend span {
  font-weight: 500;
  color: #6B7280;
}

.trend-up { color: #DC2626; } /* Red for up (e.g. no-shows) */
.trend-down { color: #16A34A; } /* Green for down */

.real-dash-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1rem;
}

.real-dash-block {
  background: #FDFDFD;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 6px;
  padding: 1rem;
}

.real-dash-block h4 {
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 1rem 0;
}

.real-dash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.real-chart-legend {
  display: flex;
  gap: 0.75rem;
  font-size: 0.7rem;
  color: #6B7280;
}

.real-chart-legend span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.real-chart-legend i {
  width: 12px;
  height: 4px;
  border-radius: 2px;
  display: inline-block;
}

.legend-past i { background: #137A47; }
.legend-future i { background: #2563EB; }

.real-chart-wrapper {
  width: 100%;
}

.real-svg-chart {
  width: 100%;
  height: 120px;
  overflow: visible;
}

.real-heatmap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.real-heatmap-head {
  display: grid;
  grid-template-columns: 2rem repeat(5, 1fr);
  gap: 2px;
  font-size: 0.65rem;
  color: #6B7280;
  text-align: center;
  font-weight: 600;
  margin-bottom: 4px;
}

.real-heatmap-row {
  display: grid;
  grid-template-columns: 2rem repeat(5, 1fr);
  gap: 2px;
  align-items: center;
}

.real-heatmap-time {
  font-size: 0.6rem;
  color: #6B7280;
  text-align: right;
  padding-right: 4px;
}

.real-heatmap-cell {
  background: #E5E7EB;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0;
  border-radius: 2px;
}

.val-high { background: #137A47; }
.val-mid { background: #34D399; }
.val-low { background: #A7F3D0; color: #065F46; }

/* --- BANNER 3: Waitlist & Click Simulation (Real UI Replica) --- */
.lv2-waitlist-card {
  background: #FCFAF8;
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
}

.real-waitlist-cols {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 1.5rem;
}

/* TAREFAS COL */
.real-tarefas-col {
  background: #FDFDFD;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.real-tarefas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding-bottom: 0.75rem;
  margin-bottom: 0.5rem;
}

.real-tarefas-header h4 {
  font-size: 0.9rem;
  font-weight: 600;
  color: #382D20;
  margin: 0;
}

.real-tarefas-list {
  display: flex;
  flex-direction: column;
}

.real-tarefas-date {
  font-size: 0.65rem;
  font-weight: 600;
  color: #6B7280;
  margin: 0.75rem 0 0.4rem 0;
}

.real-tarefa-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.real-tarefa-check {
  width: 14px;
  height: 14px;
  border: 1.5px solid #D1D5DB;
  border-radius: 3px;
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.real-tarefa-content {
  flex-grow: 1;
}

.real-tarefa-title {
  font-size: 0.75rem;
  color: #382D20;
  margin: 0 0 0.2rem 0;
  line-height: 1.3;
}

.real-tarefa-title.bold {
  font-weight: 600;
}

.real-tarefa-tag {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
}

.real-tarefa-tag.normal {
  background: #F3F4F6;
  color: #4B5563;
}

.real-tarefa-tag.alta {
  background: #FEE2E2;
  color: #DC2626;
}

/* ENCAIXES COL */
.real-encaixes-col {
  background: #FDFDFD;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.real-encaixes-header {
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
}

.real-encaixes-header h4 {
  font-size: 0.9rem;
  font-weight: 600;
  color: #382D20;
  margin: 0 0 0.3rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.real-badge {
  background: #EEDEC1;
  color: #6F6659;
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
}

.real-encaixes-header p {
  font-size: 0.65rem;
  color: #6B7280;
  margin: 0;
}

.real-encaixes-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.real-encaixe-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.8rem;
  background: #FCFAF8;
  border-left: 3px solid #897E71;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.real-encaixe-item.suggested {
  border-left-color: #D8843C;
  background: #FFF1E5;
  box-shadow: 0 2px 8px rgba(216, 132, 60, 0.15);
}

.real-encaixe-item.leaving {
  opacity: 0;
  transform: translateY(-5px);
}

.real-encaixe-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.real-encaixe-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #382D20;
  margin: 0;
}

.real-encaixe-wait {
  font-size: 0.65rem;
  color: #6B7280;
}

.real-encaixe-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.real-encaixe-time {
  font-size: 0.7rem;
  font-weight: 600;
  color: #382D20;
  margin-right: 0.5rem;
}

.real-btn-brown, .real-btn-brown-light {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.real-btn-brown {
  background: #897E71;
  color: #fff;
}

.real-btn-brown.outline {
  background: transparent;
  border: 1px solid #897E71;
  color: #897E71;
}

.real-btn-brown-light {
  background: #EEDEC1;
  color: #897E71;
}

.real-btn-brown-light.outline {
  background: transparent;
  border: 1px solid #EEDEC1;
}

.icon-calendar-small, .icon-close-small {
  width: 14px;
  height: 14px;
  display: block;
  background-color: currentColor;
}

.icon-calendar-small {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain;
}

.icon-close-small {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain;
}

/* Hand Simulator Pointer */
.hand-cursor-pointer {
  position: absolute;
  top: 180px;
  left: 200px;
  opacity: 0;
  z-index: 100;
  transition: all 0.75s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}

.hand-cursor-pointer.step-2 {
  top: 108px;
  left: 172px;
  opacity: 1;
}

.hand-cursor-pointer.step-3 {
  top: 108px;
  left: 172px;
  opacity: 1;
  transform: scale(0.8);
}

.hand-cursor-pointer.step-3 svg {
  stroke: #c7742c;
  filter: drop-shadow(0 0 4px rgba(216, 132, 60, 0.4));
}

/* --- Responsive Layout Custom Order & Sizing --- */
@media (max-width: 1023px) {
  .lv2-banners-wrapper {
    gap: 4rem;
  }
  .lv2-banner-2 .lv2-banner-text {
    order: -1;
  }
  .lv2-banner-text h2 {
    font-size: 1.85rem;
    margin-bottom: 0.5rem;
  }
  .lv2-dash-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 580px) {
  .waitlist-cols {
    grid-template-columns: 1fr;
  }
  .hand-cursor-pointer.step-2,
  .hand-cursor-pointer.step-3 {
    display: none; /* Hide hand pointer on small mobile viewports for clean UI */
  }
}

/* =========================================================================
   SOBRE (público-alvo)
   ========================================================================= */
.lv2-sobre-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .lv2-sobre-grid { grid-template-columns: 1fr 0.9fr; }
}
.lv2-audience-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .lv2-audience-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.lv2-audience-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  border-radius: var(--lv2-radius-sm);
  border: 1px solid var(--lv2-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
  padding: 1rem 1.5rem;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.lv2-audience-card::before {
  content: "";
  position: absolute;
  left: 1rem; right: 1rem; top: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, oklch(0.78 0.11 95 /  0.4), transparent);
}
.lv2-audience-card:hover { transform: translateY(-4px); border-color: oklch(0.78 0.11 95 /  0.3); }
.lv2-audience-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 0.95rem;
  border: 1px solid oklch(0.78 0.11 95 /  0.18);
  background: oklch(0.78 0.11 95 /  0.08);
  color: var(--lv2-cyan-200);
}
.lv2-audience-logo {
  width: 2.35rem;
  height: 2.35rem;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.lv2-audience-card h3 { font-size: 1.05rem; font-weight: 600; font-family: var(--lv2-font-body); }

/* =========================================================================
   EFEITO LÍQUIDO (tilt 3D + brilho radial que segue o mouse)
   ========================================================================= */
.lv2-liquid {
  transform-style: preserve-3d;
}
.lv2-liquid > :not(.lv2-liquid-fx) {
  position: relative;
  z-index: 1;
}
/* camada de efeito: recortada ao card, guarda brilho + ondulação */
.lv2-liquid-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
/* brilho especular que segue o cursor */
.lv2-liquid-glow {
  position: absolute;
  inset: -25%;
  opacity: var(--lv2-glow, 0);
  transition: opacity 0.3s ease;
  background:
    radial-gradient(
      34% 34% at var(--lv2-mx, 50%) var(--lv2-my, 50%),
      oklch(0.935 0.032 78 / 0.55),
      oklch(0.78 0.11 95 /  0.22) 42%,
      transparent 68%
    );
}
/* ondulação líquida: brilho cyan distorcido por ruído SVG animado */
.lv2-liquid-ripple {
  position: absolute;
  inset: -35%;
  opacity: var(--lv2-glow, 0);
  transition: opacity 0.3s ease;
  mix-blend-mode: screen;
  background:
    radial-gradient(
      45% 45% at var(--lv2-mx, 50%) var(--lv2-my, 50%),
      oklch(0.78 0.11 95 /  0.5),
      oklch(0.78 0.11 95 /  0.12) 55%,
      transparent 72%
    );
  filter: url(#lv2-liquid-filter);
}
@media (prefers-reduced-motion: reduce) {
  .lv2-liquid-ripple { filter: none; }
}
/* sem mouse/hover (mobile/touch): não renderiza a camada de efeito */
@media not all and (hover: hover) and (pointer: fine) {
  .lv2-liquid-fx { display: none; }
}
.lv2-svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.lv2-audience-pills { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.lv2-audience-pill {
  border-radius: 9999px;
  border: 1px solid var(--lv2-border);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem;
  color: var(--lv2-muted);
}

/* =========================================================================
   RECURSOS
   ========================================================================= */
.lv2-recursos-grid {
  margin-top: 3.5rem;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .lv2-recursos-grid { grid-template-columns: repeat(2, 1fr); } }

.lv2-recurso-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid var(--lv2-border);
  background: var(--lv2-panel-2);
  padding: 2rem;
  box-shadow: 0 18px 55px rgba(15, 23, 42, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.lv2-recurso-card::before {
  content: "";
  position: absolute;
  left: 1.25rem; right: 1.25rem; top: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, oklch(0.78 0.11 95 /  0.6), transparent);
}
.lv2-recurso-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, oklch(0.78 0.11 95 /  0.1), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.lv2-recurso-card:hover {
  transform: translateY(-4px);
  border-color: oklch(0.78 0.11 95 /  0.35);
  background: var(--lv2-panel-hover);
  box-shadow: 0 0 46px oklch(0.78 0.11 95 /  0.16), 0 22px 70px rgba(0, 0, 0, 0.32);
}
.lv2-recurso-card:hover::after { opacity: 1; }
.lv2-recurso-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.lv2-recurso-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  border: 1px solid oklch(0.47 0.09 55 / 0.28);
  background: oklch(0.935 0.032 78);
  color: var(--lv2-heading);
  flex-shrink: 0;
}
.lv2-recurso-logo {
  width: 1.8rem;
  height: 1.8rem;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.lv2-recurso-card h3 { position: relative; z-index: 1; margin: 0; font-size: 1.15rem; font-weight: 600; font-family: var(--lv2-font-body); }
.lv2-recurso-card p { position: relative; z-index: 1; margin-top: 1rem; color: var(--lv2-muted); font-size: 0.95rem; line-height: 1.65; }

/* =========================================================================
   CATÁLOGO
   ========================================================================= */
.lv2-catalog-header { max-width: 46rem; }
.lv2-catalog-grid {
  margin-top: 3rem;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .lv2-catalog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lv2-catalog-grid { grid-template-columns: repeat(3, 1fr); } }

.lv2-catalog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-radius: 1.5rem;
  border: 1px solid var(--lv2-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
  padding: 1.75rem;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.lv2-catalog-card::before {
  content: "";
  position: absolute;
  left: 1rem; right: 1rem; top: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, oklch(0.78 0.11 95 /  0.4), transparent);
}
.lv2-catalog-card:hover { transform: translateY(-4px); border-color: oklch(0.78 0.11 95 /  0.3); }
.lv2-catalog-card h3 { font-size: 1.15rem; font-weight: 500; }
.lv2-catalog-card p { color: var(--lv2-muted); font-size: 0.92rem; line-height: 1.6; flex: 1; }
.lv2-catalog-price {
  margin-top: 0.5rem;
  align-self: flex-start;
  border-radius: 9999px;
  border: 1px solid oklch(0.78 0.11 95 /  0.2);
  background: oklch(0.78 0.11 95 /  0.08);
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--lv2-cyan-200);
}

/* =========================================================================
   PLANOS / CTA panel
   ========================================================================= */
.lv2-cta-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--lv2-radius);
  border: 1px solid var(--lv2-border);
  background: rgba(13, 20, 34, 0.7);
  padding: 3rem 2rem;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .lv2-cta-panel { flex-direction: row; align-items: center; justify-content: space-between; padding: 3.5rem; }
}
.lv2-cta-panel .glow-a {
  position: absolute; right: -6rem; top: -6rem; width: 18rem; height: 18rem;
  border-radius: 9999px; background: oklch(0.78 0.11 95 /  0.1); filter: blur(80px); pointer-events: none;
}
.lv2-cta-panel .glow-b {
  position: absolute; left: 5rem; bottom: -7rem; width: 16rem; height: 16rem;
  border-radius: 9999px; background: oklch(0.78 0.11 95 /  0.1); filter: blur(80px); pointer-events: none;
}
.lv2-cta-copy { position: relative; z-index: 1; max-width: 42rem; }
.lv2-cta-copy .lv2-badge { margin-bottom: 1.25rem; }
.lv2-cta-copy h2 { font-size: clamp(1.75rem, 3.5vw, 3rem); letter-spacing: -0.03em; }
.lv2-cta-copy p { margin-top: 1.25rem; color: var(--lv2-muted); font-size: 1rem; line-height: 1.7; }
.lv2-cta-actions { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .lv2-cta-actions { flex-direction: row; } }
@media (min-width: 1024px) { .lv2-cta-actions { flex-direction: column; } }

/* =========================================================================
   FOOTER
   ========================================================================= */
.landing-v2 footer {
  position: relative;
  border-top: 0;
  padding: 5rem 0 2.5rem;
}

.lv2-footer-hero {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.5rem;
  align-items: end;
}
@media (min-width: 1024px) { .lv2-footer-hero { grid-template-columns: 1.1fr 0.9fr; } }
.lv2-footer-hero h2 { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -0.04em; line-height: 0.98; }
.lv2-footer-hero .lv2-footer-sub { font-family: var(--lv2-font-display); font-weight: 500; font-size: clamp(1.25rem, 2.5vw, 1.75rem); color: var(--lv2-muted); letter-spacing: -0.02em; line-height: 1.2; }
.lv2-footer-hero .lv2-footer-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

.lv2-footer-cols {
  position: relative;
  z-index: 1;
  margin-top: 4rem;
  padding-top: 0;
  border-top: 0;
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 640px) { .lv2-footer-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lv2-footer-cols { grid-template-columns: 1.4fr 1fr; } }
.lv2-footer-brandcol { max-width: 18rem; }
.lv2-footer-brandcol .lv2-nav-brand { font-size: 1.25rem; }
.lv2-footer-brandcol p { margin-top: 1.25rem; color: var(--lv2-faint); font-size: 0.9rem; line-height: 1.6; }
.lv2-footer-linkscol p { font-size: 0.85rem; font-weight: 500; color: var(--lv2-faint); }
.lv2-footer-links { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.lv2-footer-links a { font-size: 0.9rem; color: var(--lv2-fg); text-decoration: none; transition: color 0.3s ease; }
.lv2-footer-links a:hover { color: var(--lv2-cyan-100); }

.lv2-footer-bottom {
  position: relative;
  z-index: 1;
  margin-top: 3rem;
  padding-top: 0;
  border-top: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: var(--lv2-faint);
  font-size: 0.85rem;
}
@media (min-width: 640px) { .lv2-footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; } }

/* =========================================================================
   MODAIS DE AUTENTICAÇÃO
   ========================================================================= */
/* Portal do auth: só escopo de tokens CSS; o overlay cuida do layout. */
.lv2-auth-portal {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  min-height: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
.lv2-auth-portal .lv2-modal-overlay {
  pointer-events: auto;
}

.lv2-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  /* Sem backdrop-filter: blur + WebGL atrás = tremor/flicker contínuo. */
  background: rgba(28, 18, 12, 0.72);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  isolation: isolate;
}
.lv2-modal-overlay.open { display: flex; }
.lv2-modal {
  width: 100%;
  max-width: 26rem;
  border-radius: 1.5rem;
  border: 1px solid var(--lv2-border);
  background: rgba(13, 20, 34, 0.95);
  padding: 2rem;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.85);
  position: relative;
  /* Sem transform/filter no ancestral — iframe/compositor tremiam ao digitar. */
  contain: layout paint;
}
.lv2-modal::before {
  content: "";
  position: absolute;
  left: 1.5rem; right: 1.5rem; top: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, oklch(0.78 0.11 95 /  0.5), transparent);
}
.lv2-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.lv2-modal h2 { font-size: 1.4rem; }
.lv2-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 9999px;
  border: 1px solid var(--lv2-border); background: rgba(255, 255, 255, 0.04);
  color: var(--lv2-muted); cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.lv2-modal > h2 { margin-bottom: 1.25rem; padding-right: 2.5rem; }
.lv2-modal-close:hover { color: var(--lv2-white); background: rgba(255, 255, 255, 0.08); }

.lv2-modal-access { max-width: 28rem; }
.lv2-access-lead {
  margin: -0.35rem 0 1.35rem;
  color: var(--lv2-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}
.lv2-access-options {
  display: grid;
  gap: 0.75rem;
}
.lv2-access-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  width: 100%;
  text-align: left;
  padding: 1rem 1.1rem;
  border-radius: 1rem;
  border: 1px solid var(--lv2-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--lv2-white);
  cursor: pointer;
  font-family: var(--lv2-font-body);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.lv2-access-option:hover {
  border-color: oklch(0.78 0.11 95 / 0.45);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}
.lv2-access-option:focus-visible {
  outline: 2px solid oklch(0.78 0.11 95 / 0.7);
  outline-offset: 2px;
}
.lv2-access-option-label {
  font-family: var(--lv2-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.lv2-access-option-desc {
  color: var(--lv2-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}
.lv2-access-option-link {
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}
.lv2-access-option-link:hover {
  border-color: oklch(0.78 0.11 95 / 0.45);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}


.lv2-field, .lv2-form-group { margin-bottom: 1rem; }
.lv2-field label, .lv2-form-group label { display: block; font-size: 0.8rem; color: var(--lv2-muted); margin-bottom: 0.4rem; }
.lv2-field input,
.lv2-form-group input {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid var(--lv2-border);
  background: rgba(255, 255, 255, 0.03);
  padding: 0.7rem 0.9rem;
  color: var(--lv2-white);
  font-family: var(--lv2-font-body);
  font-size: 0.9rem;
  transition: border-color 0.15s ease;
}
.lv2-field input::placeholder,
.lv2-form-group input::placeholder { color: var(--lv2-faint); }
.lv2-field input:focus,
.lv2-form-group input:focus {
  outline: none;
  border-color: oklch(0.78 0.11 95 /  0.5);
  background: rgba(255, 255, 255, 0.05);
}
.lv2-modal .lv2-btn { width: 100%; margin-top: 0.5rem; }
.lv2-modal-divider,
.lv2-oauth-separator {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--lv2-faint); font-size: 0.75rem;
}
.lv2-modal-divider::before, .lv2-modal-divider::after,
.lv2-oauth-separator::before, .lv2-oauth-separator::after {
  content: ""; flex: 1; height: 1px; background: var(--lv2-border-soft);
}

/* estado de sucesso e 2FA */
.lv2-form-success {
  margin-top: 0.5rem;
  color: var(--lv2-accent);
  font-size: 0.82rem;
}
.lv2-2fa-subtitle {
  color: var(--lv2-muted);
  font-size: 0.85rem;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}
.lv2-2fa-input {
  width: 100%;
  max-width: 12rem;
  text-align: center;
  letter-spacing: 0.5em;
  font-size: 1.5rem;
  font-family: var(--lv2-font-display);
  border-radius: 0.75rem;
  border: 1px solid var(--lv2-border);
  background: rgba(255, 255, 255, 0.03);
  padding: 0.7rem 0.9rem;
  color: var(--lv2-white);
}
.lv2-2fa-input:focus { outline: none; border-color: oklch(0.78 0.11 95 /  0.5); }
.lv2-google-btn-slot,
.lv2-google-btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 44px;
  min-height: 44px;
  overflow: hidden;
  color-scheme: light;
  contain: layout paint size;
}
.lv2-google-btn-container--singleton iframe {
  max-width: 100%;
}
.landing-v2 .lv2-form-group input,
.landing-v2 .lv2-2fa-input {
  transition: border-color 0.15s ease;
}
.lv2-auth-terms {
  margin-top: 1rem;
  font-size: 0.72rem;
  color: var(--lv2-faint);
  line-height: 1.5;
  text-align: center;
}
.lv2-auth-terms a { color: var(--lv2-cyan-200); text-decoration: none; }
.lv2-auth-terms a:hover { text-decoration: underline; }
.lv2-google-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
}
.lv2-modal-toggle {
  margin-top: 1.25rem;
  text-align: center;
}
.lv2-modal-toggle button {
  background: none; border: none; cursor: pointer;
  color: var(--lv2-cyan-200); font-size: 0.85rem; font-family: var(--lv2-font-body);
}
.lv2-modal-toggle button:hover { color: var(--lv2-cyan-100); }
.lv2-form-status {
  min-height: 1.35rem;
  margin: 0.25rem 0 0.5rem;
}
.lv2-form-error {
  margin: 0;
  color: #fca5a5;
  font-size: 0.82rem;
}
.lv2-terms { margin-top: 1rem; font-size: 0.72rem; color: var(--lv2-faint); line-height: 1.5; }
.lv2-terms a { color: var(--lv2-cyan-200); text-decoration: none; }
.lv2-terms a:hover { text-decoration: underline; }

/* estados de página */
.lv2-loading, .lv2-error {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lv2-muted);
  font-size: 1rem;
}

/* =========================================================================
   PLANOS — grade de cards
   ========================================================================= */
.lv2-planos-grid {
  margin-top: 3rem;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .lv2-planos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .lv2-planos-grid { grid-template-columns: repeat(4, 1fr); } }

.lv2-plan-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border-radius: 1.5rem;
  border: 1px solid var(--lv2-border);
  background: var(--lv2-panel-2);
  padding: 1.75rem;
  box-shadow: 0 18px 55px rgba(15, 23, 42, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.lv2-plan-card:hover { border-color: oklch(0.78 0.11 95 /  0.3); }
.lv2-plan-card.highlight {
  border-color: oklch(0.78 0.11 95 /  0.5);
  background: linear-gradient(180deg, oklch(0.78 0.11 95 /  0.08), oklch(0.78 0.11 95 /  0.03));
  box-shadow: 0 0 0 1px oklch(0.78 0.11 95 /  0.22), 0 26px 70px rgba(8, 47, 73, 0.4);
}
.lv2-plan-card .lv2-plan-badge {
  position: absolute;
  z-index: 2;
  top: 1.1rem;
  right: 1.1rem;
  border-radius: 9999px;
  background: var(--lv2-cyan-100);
  color: #08111c;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.28rem 0.7rem;
  box-shadow: 0 6px 18px oklch(0.78 0.11 95 /  0.3);
}
.lv2-plan-name { font-family: var(--lv2-font-body); font-size: 1.15rem; font-weight: 600; color: var(--lv2-white); }
.lv2-plan-card.highlight .lv2-plan-name { padding-right: 6rem; }
.lv2-plan-audience { margin-top: 0.5rem; color: var(--lv2-muted); font-size: 0.82rem; line-height: 1.5; }
.lv2-plan-price { display: flex; align-items: baseline; gap: 0.25rem; color: var(--lv2-white); }
.lv2-plan-currency { font-family: var(--lv2-font-display); font-size: 1.05rem; font-weight: 600; color: var(--lv2-muted); }
.lv2-plan-value { font-family: var(--lv2-font-display); font-weight: 700; font-size: 2.75rem; letter-spacing: -0.03em; line-height: 1; }
.lv2-plan-period { color: var(--lv2-muted); font-size: 0.9rem; }
.lv2-plan-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.lv2-plan-features li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; color: var(--lv2-fg); line-height: 1.5; }
.lv2-plan-check {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  border-radius: 9999px;
  background: oklch(0.78 0.11 95 /  0.16);
  color: var(--lv2-emerald);
}
.lv2-plan-cta { width: 100%; margin-top: 0.5rem; }

.lv2-plan-footnotes {
  margin-top: 2.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: center;
}

.lv2-plan-reassure {
  margin: 0;
  width: min(100%, 36rem);
  text-align: center;
  text-wrap: balance;
  color: var(--lv2-fg);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.55;
}

.lv2-plan-addons {
  margin: 0;
  width: min(100%, 40rem);
  text-align: center;
  text-wrap: balance;
  color: var(--lv2-muted);
  font-size: 0.82rem;
  line-height: 1.65;
}

/* =========================================================================
   PROPÓSITO / POSICIONAMENTO
   ========================================================================= */
.lv2-proposito-head { max-width: 54rem; }
.lv2-proposito-lead { margin-top: 1.25rem; max-width: 48rem; }
.lv2-proposito-grid {
  margin-top: 3rem;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .lv2-proposito-grid { grid-template-columns: repeat(3, 1fr); } }
.lv2-proposito-block {
  border-radius: 1.5rem;
  border: 1px solid var(--lv2-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
  padding: 1.75rem;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.lv2-proposito-block:hover { transform: translateY(-4px); border-color: oklch(0.78 0.11 95 /  0.3); }
.lv2-proposito-block-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.lv2-proposito-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  border: 1px solid oklch(0.47 0.09 55 / 0.28);
  background: oklch(0.935 0.032 78);
  color: var(--lv2-heading);
  flex-shrink: 0;
}
.lv2-proposito-logo {
  width: 1.8rem;
  height: 1.8rem;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.lv2-proposito-logo--spark {
  width: 1.7rem;
  height: 1.7rem;
}
.lv2-proposito-block h3 { font-size: 1.15rem; font-weight: 600; font-family: var(--lv2-font-body); margin: 0; }
.lv2-proposito-block p { margin-top: 0.75rem; color: var(--lv2-muted); font-size: 0.95rem; line-height: 1.65; }
.lv2-proposito-cta {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
}

/* =========================================================================
   SEGURANÇA / CONFORMIDADE
   ========================================================================= */
.lv2-seg-grid {
  margin-top: 3rem;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .lv2-seg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lv2-seg-grid { grid-template-columns: repeat(4, 1fr); } }
.lv2-seg-card {
  position: relative;
  border-radius: 1.5rem;
  border: 1px solid var(--lv2-border);
  background: var(--lv2-panel-2);
  padding: 1.75rem;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.lv2-seg-card:hover { transform: translateY(-4px); border-color: oklch(0.78 0.11 95 /  0.35); }
.lv2-seg-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.lv2-seg-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  border: 1px solid oklch(0.47 0.09 55 / 0.28);
  background: oklch(0.935 0.032 78);
  color: var(--lv2-heading);
  flex-shrink: 0;
}
.lv2-seg-logo {
  width: 1.8rem;
  height: 1.8rem;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.lv2-seg-card h3 { margin: 0; font-size: 1.15rem; font-weight: 600; font-family: var(--lv2-font-body); }
.lv2-seg-card p { margin-top: 1rem; color: var(--lv2-muted); font-size: 0.95rem; line-height: 1.6; }

/* =========================================================================
   FAQ (accordion)
   ========================================================================= */
.lv2-faq-list {
  margin-top: 3rem;
  max-width: 52rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.lv2-faq-item {
  border-radius: 1rem;
  border: 1px solid var(--lv2-border);
  background: var(--lv2-panel-2);
  overflow: hidden;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.lv2-faq-item.open {
  border-color: var(--lv2-border-strong);
  background: var(--lv2-panel-hover);
  box-shadow: inset 0 0 0 1px oklch(0.47 0.09 55 / 0.14);
}
.lv2-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 1.15rem 1.35rem;
  color: var(--lv2-white);
  font-family: var(--lv2-font-body);
  font-size: 1rem;
  font-weight: 500;
}
.lv2-faq-q:focus { outline: none; }
.lv2-faq-q:focus-visible {
  outline: 2px solid oklch(0.78 0.11 95 / 0.35);
  outline-offset: 2px;
  border-radius: 0.75rem;
}
.lv2-faq-chevron { flex: none; display: inline-flex; color: var(--lv2-muted); transition: transform 0.3s ease, color 0.3s ease; }
.lv2-faq-item.open .lv2-faq-chevron { transform: rotate(180deg); color: var(--lv2-accent-strong); }
.lv2-faq-a { padding: 0 1.35rem 1.25rem; }
.lv2-faq-a p { color: var(--lv2-muted); font-size: 0.92rem; line-height: 1.65; }
@media (prefers-reduced-motion: reduce) {
  .lv2-faq-chevron { transition: none; }
}

/* =========================================================================
   ANIMAÇÕES
   ========================================================================= */
@keyframes lv2-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes lv2-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .lv2-mock, .lv2-float-card { animation: none; }
  .lv2-live .lv2-live-dot { animation: none; }
}

/* =========================================================================
   TEMA CLARO — ajustes finais (sobrescrevem literais do layout dark legado)
   ========================================================================= */
.landing-v2 .lv2-hero-glow,
.landing-v2 .lv2-hero-visual .lv2-glow-a,
.landing-v2 .lv2-hero-visual .lv2-glow-b,
.landing-v2 .lv2-cta-panel .glow-a,
.landing-v2 .lv2-cta-panel .glow-b {
  background: oklch(0.78 0.11 95 / 0.08);
}

.landing-v2 .lv2-badge,
.landing-v2 .lv2-audience-pill {
  background: var(--lv2-panel);
  border-color: var(--lv2-border);
  color: var(--lv2-fg);
}

.landing-v2 .lv2-badge .lv2-dot {
  background: var(--lv2-accent);
  box-shadow: 0 0 8px oklch(0.78 0.11 95 / 0.35);
}

.landing-v2 .lv2-mock {
  border: 1px solid var(--lv2-border);
  background: var(--lv2-panel);
  padding: 0.75rem;
  box-shadow: var(--lv2-shadow-lg);
  backdrop-filter: none;
}

.landing-v2 .lv2-mock-inner {
  border: 1px solid var(--lv2-border-soft);
  background: var(--lv2-bg-elevated);
}

.landing-v2 .lv2-mock-top,
.landing-v2 .lv2-mock-aside,
.landing-v2 .lv2-stat,
.landing-v2 .lv2-mock-list,
.landing-v2 .lv2-row,
.landing-v2 .lv2-chip,
.landing-v2 .lv2-live {
  background: var(--lv2-panel-2);
  border-color: var(--lv2-border-soft);
}

.landing-v2 .lv2-mock-top .lv2-toptitle,
.landing-v2 .lv2-mock-list-head .t,
.landing-v2 .lv2-row .rt,
.landing-v2 .lv2-float-card .fc-t {
  color: var(--lv2-heading);
}

.landing-v2 .lv2-mock-navitem.active,
.landing-v2 .lv2-stat.accent,
.landing-v2 .lv2-row.accent {
  background: var(--lv2-accent-soft);
  border-color: oklch(0.78 0.11 95 / 0.22);
  color: var(--lv2-accent-strong);
}

.landing-v2 .lv2-float-card {
  border-color: oklch(0.78 0.11 95 / 0.22);
  background: var(--lv2-bg-elevated);
  box-shadow: var(--lv2-shadow-lg);
  backdrop-filter: none;
}

.landing-v2 .lv2-audience-card,
.landing-v2 .lv2-catalog-card,
.landing-v2 .lv2-proposito-block {
  background: var(--lv2-panel);
  border-color: var(--lv2-border);
}

.landing-v2 .lv2-audience-card::before,
.landing-v2 .lv2-catalog-card::before,
.landing-v2 .lv2-recurso-card::before {
  background: linear-gradient(to right, transparent, oklch(0.78 0.11 95 / 0.35), transparent);
}

.landing-v2 .lv2-audience-card-icon,
.landing-v2 .lv2-recurso-icon,
.landing-v2 .lv2-proposito-icon,
.landing-v2 .lv2-seg-icon {
  border-color: oklch(0.47 0.09 55 / 0.28);
  background: oklch(0.935 0.032 78);
  color: var(--lv2-heading);
}

.landing-v2 .lv2-recurso-card,
.landing-v2 .lv2-plan-card {
  box-shadow: var(--lv2-shadow);
}

.landing-v2 .lv2-recurso-card:hover,
.landing-v2 .lv2-audience-card:hover,
.landing-v2 .lv2-catalog-card:hover,
.landing-v2 .lv2-proposito-block:hover,
.landing-v2 .lv2-seg-card:hover,
.landing-v2 .lv2-plan-card:hover {
  border-color: oklch(0.78 0.11 95 / 0.28);
  box-shadow: var(--lv2-shadow-lg);
}

.landing-v2 .lv2-recurso-card::after {
  background: linear-gradient(135deg, oklch(0.78 0.11 95 / 0.08), transparent 60%);
}

.landing-v2 .lv2-catalog-price,
.landing-v2 .lv2-tag.high,
.landing-v2 .lv2-tag.done,
.landing-v2 .lv2-plan-check {
  background: var(--lv2-accent-soft);
  border-color: oklch(0.78 0.11 95 / 0.2);
  color: var(--lv2-accent-strong);
}

.landing-v2 .lv2-cta-panel {
  background: var(--lv2-panel);
  box-shadow: var(--lv2-shadow-lg);
  backdrop-filter: none;
}

.landing-v2 .lv2-plan-card.highlight {
  border-color: oklch(0.78 0.11 95 / 0.35);
  background: linear-gradient(180deg, var(--lv2-accent-soft), var(--lv2-panel));
  box-shadow: 0 0 0 1px oklch(0.78 0.11 95 / 0.15), var(--lv2-shadow-lg);
}

.landing-v2 .lv2-plan-card .lv2-plan-badge {
  background: var(--lv2-accent);
  color: var(--lv2-on-accent);
  box-shadow: var(--lv2-shadow);
}

.landing-v2 .lv2-modal-overlay {
  /* Opaco o bastante para esconder animações do fundo sem blur (que tremia). */
  background: oklch(0.28 0.03 65 / 0.78);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.landing-v2 .lv2-modal {
  background: var(--lv2-bg-elevated);
  box-shadow: var(--lv2-shadow-lg);
}

.landing-v2 .lv2-modal::before {
  background: linear-gradient(to right, transparent, oklch(0.78 0.11 95 / 0.35), transparent);
}

.landing-v2 .lv2-modal-close {
  background: var(--lv2-panel);
  border-color: var(--lv2-border);
}

.landing-v2 .lv2-modal-close:hover {
  color: var(--lv2-heading);
  background: var(--lv2-panel-hover);
}

.landing-v2 .lv2-field input,
.landing-v2 .lv2-form-group input,
.landing-v2 .lv2-2fa-input {
  background: var(--lv2-panel);
  color: var(--lv2-heading);
}

.landing-v2 .lv2-field input:focus,
.landing-v2 .lv2-form-group input:focus,
.landing-v2 .lv2-2fa-input:focus {
  border-color: oklch(0.78 0.11 95 / 0.45);
  background: var(--lv2-bg-elevated);
}

.landing-v2 .lv2-form-success {
  color: var(--lv2-success);
}

.landing-v2 .lv2-faq-q:focus-visible {
  outline-color: oklch(0.78 0.11 95 / 0.45);
}

.landing-v2 .lv2-liquid-glow {
  background:
    radial-gradient(
      34% 34% at var(--lv2-mx, 50%) var(--lv2-my, 50%),
      oklch(0.935 0.032 78 / 0.75),
      oklch(0.78 0.11 95 / 0.18) 42%,
      transparent 68%
    );
}

.landing-v2 .lv2-liquid-ripple {
  mix-blend-mode: soft-light;
  background:
    radial-gradient(
      45% 45% at var(--lv2-mx, 50%) var(--lv2-my, 50%),
      oklch(0.78 0.11 95 / 0.28),
      oklch(0.78 0.11 95 / 0.08) 55%,
      transparent 72%
    );
}


.landing-v2 .lv2-footer-links a:hover {
  color: var(--lv2-accent-strong);
}

.landing-v2 .lv2-stat .lv2-stat-hint.good,
.landing-v2 .lv2-stat .lv2-stat-hint.accent,
.landing-v2 .lv2-stat.accent .lv2-stat-label {
  color: var(--lv2-accent);
}

.landing-v2 .lv2-mock-navitem.active .lv2-nav-bullet {
  background: var(--lv2-accent);
  box-shadow: 0 0 8px oklch(0.78 0.11 95 / 0.45);
}

.landing-v2 .lv2-float-card .fc-label {
  color: var(--lv2-accent);
}

.landing-v2 .lv2-float-card .fc-ico {
  border-color: oklch(0.78 0.11 95 / 0.22);
  background: var(--lv2-accent-soft);
  color: var(--lv2-success);
}

.landing-v2 .lv2-float-card .fc-bar > span {
  background: var(--lv2-accent);
  box-shadow: 0 0 10px oklch(0.78 0.11 95 / 0.35);
}

.landing-v2 .lv2-proposito-icon,
.landing-v2 .lv2-seg-icon {
  color: var(--lv2-heading);
}
.landing-v2 .lv2-faq-item {
  border-color: var(--lv2-border);
}

.landing-v2 .lv2-faq-item.open {
  border-color: var(--lv2-border-strong);
  box-shadow: inset 0 0 0 1px oklch(0.47 0.09 55 / 0.14);
}

.landing-v2 .lv2-faq-item.open .lv2-faq-chevron {
  color: var(--lv2-accent-strong);
}

/* nitidez tipográfica — evita camadas GPU desnecessárias no conteúdo */
.landing-v2 .lv2-shell,
.landing-v2 .lv2-container,
.landing-v2 .lv2-hero h1,
.landing-v2 .lv2-hero-sub,
.landing-v2 .lv2-section-title {
  -webkit-font-smoothing: auto;
  text-rendering: auto;
}

/* performance — alivia notebooks e máquinas modestas */
.landing-v2.lv2-perf-lite nav.lv2-nav,
.landing-v2.lv2-perf-mobile nav.lv2-nav,
.landing-v2.lv2-perf-minimal nav.lv2-nav {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: oklch(0.985 0.01 90 / 0.94);
}

.landing-v2.lv2-perf-lite nav.lv2-nav.is-scrolled,
.landing-v2.lv2-perf-mobile nav.lv2-nav.is-scrolled,
.landing-v2.lv2-perf-minimal nav.lv2-nav.is-scrolled {
  box-shadow: 0 4px 16px oklch(0.32 0.03 62 / 0.06);
}

.landing-v2.lv2-perf-lite .lv2-mock,
.landing-v2.lv2-perf-lite .lv2-float-card,
.landing-v2.lv2-perf-mobile .lv2-mock,
.landing-v2.lv2-perf-mobile .lv2-float-card,
.landing-v2.lv2-perf-minimal .lv2-mock,
.landing-v2.lv2-perf-minimal .lv2-float-card {
  animation: none;
}

.landing-v2.lv2-perf-lite .lv2-hero-glow,
.landing-v2.lv2-perf-lite .lv2-hero-visual .lv2-glow-a,
.landing-v2.lv2-perf-lite .lv2-hero-visual .lv2-glow-b,
.landing-v2.lv2-perf-mobile .lv2-hero-glow,
.landing-v2.lv2-perf-mobile .lv2-hero-visual .lv2-glow-a,
.landing-v2.lv2-perf-mobile .lv2-hero-visual .lv2-glow-b {
  filter: blur(48px);
}

.landing-v2.lv2-perf-lite .lv2-fluid-canvas,
.landing-v2.lv2-perf-mobile .lv2-fluid-canvas {
  opacity: 0.52;
}

/* Refactor to side-by-side layout for desktop */
.lv2-carousel-hero .lv2-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .lv2-carousel-hero .lv2-container {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  .lv2-carousel-text-wrapper {
    order: -1; /* Move text to the left */
    text-align: left;
    margin: 0;
  }
  
  .lv2-carousel-visual-wrapper {
    margin: 0;
  }

  .lv2-carousel-text-inner {
    align-items: flex-start;
  }

  .lv2-carousel-dots {
    justify-content: flex-start;
  }
}

/* =========================================================================
   BRAND HERO (SECTION 1)
   ========================================================================= */
.lv2-brand-hero {
  position: relative;
  padding: 8rem 0 4rem;
}

.lv2-brand-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .lv2-brand-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

.lv2-brand-title {
  font-family: var(--lv2-font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  color: var(--lv2-heading);
  line-height: 1.05;
  margin-bottom: 1.5rem;
}

.lv2-brand-subtitle {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  color: var(--lv2-fg, var(--lv2-text)); /* Use existing token */
  line-height: 1.6;
  max-width: 40rem;
  margin-bottom: 2.5rem;
}

.lv2-brand-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Logo Visual & Halo */
.lv2-brand-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lv2-brand-logo-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lv2-brand-halo {
  position: absolute;
  width: 180%;
  height: 180%;
  background: radial-gradient(circle, rgba(216, 195, 168, 0.45) 0%, transparent 65%);
  z-index: 0;
  border-radius: 50%;
}

.lv2-brand-logo {
  position: relative;
  z-index: 1;
  max-width: 320px;
  width: 100%;
  height: auto;
}

/* =========================================================================
   BANNERS 4 E 5: TAREFAS E LISTA DE ESPERA (REPLICAS)
   ========================================================================= */

/* Comum */
.real-tarefas-dash-header h3 {
  font-size: 1.05rem;
  font-weight: 500;
  color: #373A3C;
  margin: 0 0 0.15rem 0;
}
.real-tarefas-dash-header p {
  font-size: 0.8rem;
  color: #897E71;
  margin: 0 0 1.5rem 0;
}

/* Banner 4: Tarefas */
.real-tarefas-dash-top {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.r-dash-taxa {
  display: flex;
  flex-direction: column;
}
.r-taxa-label { font-size: 0.75rem; color: #897E71; text-transform: uppercase; letter-spacing: 0.05em; }
.r-taxa-value { font-size: 2.25rem; font-weight: 300; color: #373A3C; line-height: 1.1; margin-top: 0.25rem; }
.r-taxa-desc { font-size: 0.75rem; color: #897E71; margin-top: 0.25rem; }
.r-taxa-trend { font-size: 0.8rem; font-weight: 500; margin-top: 0.35rem; }
.trend-down { color: #CB4545; }
.trend-up { color: #137A47; }
.r-taxa-trend span { font-weight: 400; color: #897E71; }

.r-dash-boxes {
  display: flex;
  gap: 0.5rem;
}
.r-dash-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  width: 145px;
}
.r-dash-box.green { background: #E7F3ED; }
.r-dash-box.brown { background: #F6EEE2; }
.r-box-label { font-size: 0.65rem; color: #897E71; line-height: 1.35; margin-right: 0.5rem; }
.r-box-val { font-size: 1.8rem; font-weight: 300; color: #373A3C; line-height: 1; }

.r-dash-bars-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}
.r-dash-bars-col h4, .r-linechart-header h4, .r-espera-bars h4 {
  font-size: 0.85rem;
  font-weight: 500;
  color: #373A3C;
  margin: 0;
}
.r-linechart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.r-dash-bars-col h4, .r-espera-bars h4 { margin-bottom: 0.75rem; }
.r-bar-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.r-bar-lbl { width: 50px; font-size: 0.8rem; color: #373A3C; }
.r-bar-track { flex: 1; height: 10px; background: #F2EFEA; border-radius: 20px; overflow: hidden; }
.r-bar-fill.green { background: #137A47; height: 100%; border-radius: 20px; }
.r-bar-fill.green-light { background: #68C298; height: 100%; border-radius: 20px; }
.r-bar-fill.brown { background: #A07346; height: 100%; border-radius: 20px; }
.r-bar-val { font-size: 0.75rem; color: #373A3C; width: 15px; text-align: right; }

.r-bar-track-stacked { display: flex; height: 18px; border-radius: 4px; overflow: hidden; width: 100%; }
.r-bar-fill-stacked { height: 100%; display: flex; align-items: center; padding-left: 0.5rem; font-size: 0.7rem; color: #fff; }
.r-bar-fill-stacked.green { background: #137A47; }
.r-bar-fill-stacked.green-light { background: #68C298; }

.r-dash-linechart { border-top: 1px solid #EBE9E4; padding-top: 1.25rem; }
.r-svg-linechart { width: 100%; height: 60px; overflow: visible; }

/* Banner 5: Lista de Espera */
.r-espera-top { display: flex; justify-content: space-between; margin-bottom: 1.5rem; }
.r-espera-kpi, .r-espera-kpi-small { display: flex; flex-direction: column; }
.r-kpi-lbl { font-size: 0.75rem; color: #897E71; }
.r-kpi-val { font-size: 1.5rem; color: #373A3C; line-height: 1.2; }
.r-kpi-desc { font-size: 0.7rem; color: #897E71; }
.r-espera-box { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-radius: 6px; background: #F6EEE2; width: 200px; }

.r-espera-mid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; border-top: 1px solid #EBE9E4; border-bottom: 1px solid #EBE9E4; padding: 1rem 0; margin-bottom: 1rem; }

.r-espera-boxes-row { display: flex; gap: 1.5rem; align-items: center; margin-bottom: 1.5rem; }
.r-espera-box-small { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-radius: 6px; width: 160px; }
.r-espera-box-small.green { background: #E7F3ED; }
.r-espera-box-small .r-lbl { font-size: 0.75rem; color: #137A47; font-weight: 500; line-height: 1.2; }
.r-espera-box-small .r-val { font-size: 1.25rem; color: #137A47; }

.r-espera-kpi-small .r-lbl { font-size: 0.75rem; color: #373A3C; }
.r-espera-kpi-small .r-val { font-size: 1.25rem; color: #373A3C; }

.r-espera-bars { padding-top: 0.5rem; }
.r-espera-bars .r-bar-lbl { width: 70px; }