/* Bundle gerado por scripts/build-leadlovers-css-bundles.mjs a partir de 4 folha(s); não edite à mão. */
/* ── /assets/geo-design.css ── */
/* ══════════════════════════════════════════════════════════════
   Brasil GEO — Design System v2.0 (Salesforce / Lucida Style)
   Clean, professional, no emojis, no gradients, Lucide Icons
   ══════════════════════════════════════════════════════════════ */

/* ── Tokens ── */
:root {
  --color-brand: #0176d3;
  --color-brand-dark: #014486;
  --color-brand-light: #e8f4fd;
  --color-brand-lighter: #f0f8ff;
  --color-success: #2e844a;
  --color-success-light: #ecf5ee;
  --color-warning: #dd7a01;
  --color-warning-light: #fdf4e8;
  --color-error: #ba0517;
  --color-text: #181818;
  --color-text-secondary: #444746;
  --color-text-muted: #706e6b;
  --color-text-weak: #939393;
  --color-text-inverse: #ffffff;
  --color-bg: #ffffff;
  --color-bg-alt: #f3f3f3;
  --color-bg-section: #fafaf9;
  --color-border: #d8d8d8;
  --color-border-light: #e5e5e5;
  --color-border-focus: var(--color-brand);
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.04);
  --max-width: 780px;
  --max-width-wide: 1120px;
  --spacing-page: 2.5rem;
  --transition: 0.2s ease;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-family);
  color: var(--color-text-secondary);
  background: var(--color-bg);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}

/* ── Typography ── */
h1, h2, h3, h4 { color: var(--color-text); font-weight: 700; line-height: 1.3; }

h1 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  letter-spacing: -0.5px;
  margin-bottom: 0.75rem;
}
h2 {
  font-size: 1.35rem;
  margin-top: 2.75rem;
  margin-bottom: 0.875rem;
  padding-bottom: 0.625rem;
  border-bottom: 2px solid var(--color-brand-light);
  position: relative;
}
h2::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 3rem;
  height: 2px;
  background: var(--color-brand);
}
h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.625rem;
  color: var(--color-text);
}

p { margin-bottom: 1.125rem; }
strong, b { color: var(--color-text); font-weight: 600; }
em { font-style: italic; }

a {
  color: var(--color-brand);
  text-decoration: none;
  transition: color var(--transition);
  border-bottom: 1px solid transparent;
}
a:hover {
  color: var(--color-brand-dark);
  border-bottom-color: var(--color-brand);
}

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-bg-alt);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

/* ── Layout ── */
.geo-page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--spacing-page);
}
.geo-page-wide {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: var(--spacing-page);
}

/* ── Navigation ── */
.geo-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: 0.875rem var(--spacing-page);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: 100;
}
.geo-nav-brand {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-brand);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  border-bottom: none;
}
.geo-nav-brand:hover { color: var(--color-brand-dark); border-bottom: none; }
.geo-nav-links {
  display: flex;
  gap: 1.75rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.geo-nav-links a {
  color: var(--color-text-muted);
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  transition: all var(--transition);
}
.geo-nav-links a:hover {
  color: var(--color-brand);
  border-bottom-color: var(--color-brand);
}

/* ── Article meta ── */
.meta, .geo-meta {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border-light);
}
.meta a, .geo-meta a { font-weight: 500; }

/* ── Answer Capsule (citação direta para LLMs — pós Google I/O 2026) ──
   Parágrafo auto-contido de 1-2 frases logo após o H1/meta. Formato preferido
   por LLMs para extração (Search Engine Land 2026: 72,4% das páginas citadas
   pelo ChatGPT contêm capsule curto). Sem links internos no capsule. */
.answer-capsule {
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-brand-lighter);
  border-left: 4px solid var(--color-brand);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  margin: 0 0 2rem;
}
.answer-capsule strong { font-weight: 700; }

/* ── Blockquote ── */
blockquote {
  border-left: 3px solid var(--color-brand);
  padding: 1rem 1.5rem;
  margin: 1.75rem 0;
  background: var(--color-brand-lighter);
  color: var(--color-text-secondary);
  font-style: normal;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 0.95rem;
}
blockquote p:last-child { margin-bottom: 0; }

/* ── Tables ── */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.5rem 0;
  font-size: 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
th {
  background: var(--color-bg-alt);
  font-weight: 600;
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid var(--color-border);
  color: var(--color-text);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.75px;
}
td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-secondary);
  vertical-align: top;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--color-bg-section); }

/* ── Lists ── */
ul, ol {
  padding-left: 1.5rem;
  margin-bottom: 1.125rem;
}
li {
  margin-bottom: 0.5rem;
  color: var(--color-text-secondary);
}
li::marker { color: var(--color-brand); }

/* ── Cards ── */
.geo-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition);
}
.geo-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-brand);
  transform: translateY(-1px);
}

/* ── Buttons ── */
.geo-btn, .cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  text-decoration: none;
  line-height: 1.4;
  border-bottom: none;
}
.geo-btn:hover, .cta:hover { text-decoration: none; border-bottom: none; }
.geo-btn-primary, .cta {
  background: var(--color-brand);
  color: var(--color-text-inverse);
}
.geo-btn-primary:hover, .cta:hover {
  background: var(--color-brand-dark);
  color: var(--color-text-inverse);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.geo-btn-outline {
  background: transparent;
  color: var(--color-brand);
  border: 1px solid var(--color-brand);
}
.geo-btn-outline:hover {
  background: var(--color-brand-light);
  color: var(--color-brand-dark);
}
.geo-btn-success {
  background: var(--color-success);
  color: var(--color-text-inverse);
}
.geo-btn-success:hover {
  background: #256b3b;
  color: var(--color-text-inverse);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ── Badge / Tag ── */
.geo-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  border-bottom: none;
}
.geo-badge-brand { background: var(--color-brand-light); color: var(--color-brand); }
.geo-badge-success { background: var(--color-success-light); color: var(--color-success); }
.geo-badge-warning { background: var(--color-warning-light); color: var(--color-warning); }
.geo-badge-muted { background: var(--color-bg-alt); color: var(--color-text-muted); }

/* ── Divider ── */
.geo-divider, hr {
  border: none;
  border-top: 1px solid var(--color-border-light);
  margin: 2.5rem 0;
}

/* ── Footer ── */
footer, .geo-footer {
  max-width: var(--max-width);
  margin: 3rem auto 0;
  padding: 1.5rem var(--spacing-page);
  border-top: 1px solid var(--color-border-light);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
footer a, .geo-footer a {
  color: var(--color-text-muted);
  border-bottom: none;
}
footer a:hover, .geo-footer a:hover { color: var(--color-brand); }

/* ── Icons ── */
.geo-icon { width: 1.25rem; height: 1.25rem; stroke-width: 2; vertical-align: middle; }
.geo-icon-lg { width: 1.5rem; height: 1.5rem; }
.geo-icon-brand { color: var(--color-brand); }
.geo-icon-success { color: var(--color-success); }
.geo-icon-muted { color: var(--color-text-muted); }

/* ── About / Author section ── */
.author-section {
  background: var(--color-bg-section);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-top: 2.5rem;
}
.author-section h2 { margin-top: 0; border-bottom: none; }
.author-section h2::after { display: none; }

/* ── CTA Section ── */
.cta-section {
  background: var(--color-bg-section);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  text-align: center;
  margin: 3rem 0;
}
.cta-section h2 {
  margin-top: 0;
  border-bottom: none;
  padding-bottom: 0;
}
.cta-section h2::after { display: none; }
.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* ── Hero section (used in roadmap, sobre) ── */
.hero-section {
  background: var(--color-bg-section);
  padding: 4rem var(--spacing-page) 3rem;
  text-align: center;
  border-bottom: 1px solid var(--color-border-light);
}
.hero-section h1 {
  max-width: 680px;
  margin: 0 auto 1rem;
}
.hero-section p {
  max-width: 580px;
  margin: 0 auto 2rem;
  font-size: 1.1rem;
}

/* ── Stats grid ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin: 2rem 0 3rem;
}
.stat-card { text-align: center; padding: 1.5rem 1rem; }
.stat-card .stat-num {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-brand);
  letter-spacing: -1px;
}
.stat-card .stat-label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  margin-top: 0.25rem;
}

/* ── Phase cards (roadmap) ── */
.phase { margin-bottom: 2rem; }
.phase-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.phase-num {
  width: 2rem; height: 2rem;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.pn-live { background: var(--color-success); }
.pn-build { background: var(--color-brand); }
.pn-plan { background: var(--color-text-muted); }
.phase-title { font-size: 1.2rem; font-weight: 700; color: var(--color-text); }

/* ── Feature grids ── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}
.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.feature-icon {
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fi-live { background: var(--color-success-light); color: var(--color-success); }
.fi-build { background: var(--color-brand-light); color: var(--color-brand); }
.fi-plan { background: var(--color-bg-alt); color: var(--color-text-muted); }
.feature-name { font-size: 0.875rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.15rem; }
.feature-desc { font-size: 0.78rem; color: var(--color-text-muted); line-height: 1.5; }

/* ── Print ── */
@media print {
  .geo-nav, .geo-footer, .cta-section { display: none; }
  body { font-size: 12pt; color: #000; }
  a { color: #000; border-bottom: none; }
  h2::after { display: none; }
}

/* ── Alerts ── */
.geo-alert {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.geo-alert [data-lucide] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.geo-alert-info { background: var(--color-brand-light); color: var(--color-brand-dark); border-left: 3px solid var(--color-brand); }
.geo-alert-success { background: var(--color-success-light); color: #1a5c2e; border-left: 3px solid var(--color-success); }
.geo-alert-warning { background: var(--color-warning-light); color: #8a5000; border-left: 3px solid var(--color-warning); }
.geo-alert-error { background: #fde8e8; color: #8c0311; border-left: 3px solid var(--color-error); }

/* ── Form inputs ── */
.geo-input, .geo-textarea, .geo-select {
  display: block;
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.geo-input:focus, .geo-textarea:focus, .geo-select:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(1, 118, 211, 0.12);
}
.geo-input::placeholder { color: var(--color-text-weak); }
.geo-textarea { min-height: 100px; resize: vertical; }
.geo-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 0.375rem; }
.geo-field { margin-bottom: 1.25rem; }
.geo-input-error { border-color: var(--color-error); }
.geo-field-error { font-size: 0.75rem; color: var(--color-error); margin-top: 0.25rem; }

/* ── Progress bar ── */
.geo-progress { height: 8px; background: var(--color-bg-alt); border-radius: 100px; overflow: hidden; }
.geo-progress-fill { height: 100%; border-radius: 100px; transition: width 0.6s ease; }
.geo-progress-fill--brand { background: var(--color-brand); }
.geo-progress-fill--success { background: var(--color-success); }
.geo-progress-fill--warning { background: var(--color-warning); }
.geo-progress-fill--error { background: var(--color-error); }

/* ── Skeleton loader ── */
@keyframes geo-shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
.geo-skeleton {
  background: linear-gradient(90deg, var(--color-bg-alt) 25%, #eaeaea 50%, var(--color-bg-alt) 75%);
  background-size: 400px 100%;
  animation: geo-shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}
.geo-skeleton-text { height: 1em; width: 80%; margin-bottom: 0.5rem; }
.geo-skeleton-heading { height: 1.5em; width: 60%; margin-bottom: 1rem; }
.geo-skeleton-card { height: 120px; }

/* ── Tabs ── */
.geo-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--color-border-light); margin-bottom: 1.5rem; }
.geo-tab {
  padding: 0.625rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
  background: none;
  border-top: none; border-left: none; border-right: none;
}
.geo-tab:hover { color: var(--color-text); }
.geo-tab--active { color: var(--color-brand); border-bottom-color: var(--color-brand); }

/* ── Tooltip ── */
.geo-tooltip { position: relative; cursor: help; }
.geo-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.375rem 0.75rem;
  background: var(--color-text);
  color: var(--color-text-inverse);
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.geo-tooltip:hover::after { opacity: 1; }

/* ── Divider ── */
.geo-divider { border: none; border-top: 1px solid var(--color-border-light); margin: 2rem 0; }

/* ── Responsive ── */
@media (max-width: 768px) {
  :root { --spacing-page: 1.25rem; }
  .geo-nav { position: relative; }
  .geo-nav-links { gap: 1rem; font-size: 0.8rem; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.2rem; }
  table { font-size: 0.78rem; }
  th, td { padding: 0.5rem 0.625rem; }
  .features-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .geo-footer, footer { flex-direction: column; text-align: center; }
  .cta-section { padding: 2rem 1.25rem; }
}

/* ══════════════════════════════════════════════════════════════
   DX1+DX3+DX4+DX5 — Taxonomia & Design System v3.0 (Abr 2026)
   Classes utilitárias para páginas de autoridade + acessibilidade
   ══════════════════════════════════════════════════════════════ */

/* ── Skip-link (WCAG 2.4.1 + screen-reader) ── */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 10000;
}
.skip-to-content:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  padding: 10px 16px;
  background: var(--color-brand);
  color: #fff;
  font-weight: 700;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* ── Focus-visible universal (WCAG 2.4.7) ── */
*:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
  border-radius: 4px;
}
button:focus-visible, a:focus-visible {
  outline-offset: 3px;
}

/* ── Breadcrumb padrão ── */
.geo-breadcrumb {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.geo-breadcrumb a {
  color: var(--color-brand);
  text-decoration: none;
  border-bottom: none;
}
.geo-breadcrumb a:hover { text-decoration: underline; }
.geo-breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: 600; }

/* ── Section label chip (badges "PUBLICAÇÕES ACADÊMICAS", etc) ── */
.geo-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--color-brand-lighter);
  border: 1px solid var(--color-brand-light);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--color-brand);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.geo-section-label--amber { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.geo-section-label--green { background: #dcfce7; border-color: #bbf7d0; color: #065f46; }
.geo-section-label--red { background: #fee2e2; border-color: #fecaca; color: #991b1b; }
.geo-section-label--purple { background: #f5f3ff; border-color: #ddd6fe; color: #6d28d9; }

/* ── Authority callout box (amber stripe com ORCID/DOI) ── */
.geo-authority-callout {
  margin: 16px 0 28px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
  border: 1px solid #fde68a;
  border-left: 5px solid #f59e0b;
  border-radius: var(--radius-lg);
  font-size: 14px;
  line-height: 1.6;
}
.geo-authority-callout .tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #92400e;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.geo-authority-callout p { color: #713f12; margin: 0 0 6px; }
.geo-authority-callout a {
  color: #92400e;
  font-weight: 700;
  border-bottom: none;
}
.geo-authority-callout a:hover { text-decoration: underline; }

/* ── Related pages box (aside crosslinks contextuais) ── */
.geo-related-pages {
  margin: 32px 0 0;
  padding: 20px 22px;
  background: var(--color-bg-section);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
}
.geo-related-pages h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin: 0 0 12px;
}
.geo-related-pages ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.geo-related-pages li { margin: 0; }
.geo-related-pages a {
  display: block;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.4;
  border-left: 3px solid var(--color-brand);
  transition: all .15s;
}
.geo-related-pages a:hover {
  background: var(--color-brand-lighter);
  border-color: var(--color-brand);
  transform: translateY(-1px);
}
.geo-related-pages a strong {
  display: block;
  font-size: 14px;
  color: var(--color-text);
  margin-bottom: 2px;
}
.geo-related-pages a span {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ── Tier badges (asset cards) ── */
.geo-tier {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.geo-tier--academic { color: #6d28d9; }
.geo-tier--social { color: var(--color-brand); }
.geo-tier--press { color: #dc2626; }
.geo-tier--pub { color: #15803d; }

/* ── Prose container (para páginas tipo entenda/conceitos com leitura longa) ── */
.geo-prose {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
  font-size: 17px;
  line-height: 1.75;
  color: #1f2937;
}
.geo-prose h2 {
  font-size: clamp(22px, 3vw, 30px);
  margin: 40px 0 14px;
  padding: 0;
  border: 0;
}
.geo-prose h2::after { display: none; }
.geo-prose h3 {
  font-size: 19px;
  margin: 24px 0 8px;
}
.geo-prose p { margin: 0 0 16px; }
.geo-prose ul, .geo-prose ol { padding-left: 24px; margin: 8px 0 20px; }
.geo-prose li { margin-bottom: 6px; }

/* ── Dark mode (prefers-color-scheme) ── */
@media (prefers-color-scheme: dark) {
  :root[data-theme-mode="auto"] {
    --color-bg: #0b1220;
    --color-bg-alt: #111827;
    --color-bg-section: #1f2937;
    --color-text: #f9fafb;
    --color-text-secondary: #d1d5db;
    --color-text-muted: #9ca3af;
    --color-text-weak: #6b7280;
    --color-border: #374151;
    --color-border-light: #1f2937;
    --color-brand-light: #1e3a5f;
    --color-brand-lighter: #0f2439;
  }
  :root[data-theme-mode="auto"] .geo-card,
  :root[data-theme-mode="auto"] .geo-btn-outline {
    background: #1f2937;
    color: #f9fafb;
  }
}

/* ── Print optimization ── */
@media print {
  .skip-to-content, .geo-nav, .bg-wa-fab, .brgeo-author-pill, .brgeo-auth-foot,
  footer, .geo-related-pages button, [role="banner"] { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .geo-authority-callout { break-inside: avoid; }
}

/* ── Reduced motion (WCAG 2.3.3) ── */
@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;
  }
}

/* ══════════════════════════════════════════════════════════════
   WAVE 1 — Fundacao de leitura, foco e tema escuro opt-in (jun/2026)
   Aprimoramentos aditivos guiados pelo curso frontends-com-vibecoding.
   So adicionam camada por cima; nao alteram regras existentes.
   ══════════════════════════════════════════════════════════════ */

/* Leitura: paragrafos justificados (preferencia editorial) + quebra
   tipografica moderna (text-wrap pretty/balance, baseline 2026). */
p {
  text-align: justify;
  text-wrap: pretty;
  -webkit-hyphens: auto;
  hyphens: auto;
}
h1, h2, h3, h4 { text-wrap: balance; }

/* Contextos centrados/curtos nao herdam o justify nem a hifenizacao. */
.hero-section p,
.cta-section p,
.stat-card p,
.answer-capsule,
.geo-badge,
footer p, .geo-footer p,
[align="center"] p {
  text-align: inherit;
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* Ancoras: compensa a nav sticky para o titulo nao ficar sob o header. */
[id] { scroll-margin-top: 84px; }

/* Selecao e controles de formulario na cor de marca. */
::selection { background: var(--color-brand); color: #fff; }
input, textarea, select { accent-color: var(--color-brand); }

/* Imagens nunca estouram o container (responsivo, sem scroll horizontal). */
img { max-width: 100%; height: auto; }

/* ── Tema escuro EXPLICITO (opt-in via [data-theme="dark"] no <html>) ──
   Convive com o @media (prefers-color-scheme) ja existente: a pagina so
   escurece se optar pelo atributo (destrava o toggle real do curso). */
:root[data-theme="dark"] {
  --color-bg: #0b1220;
  --color-bg-alt: #111827;
  --color-bg-section: #1f2937;
  --color-text: #f9fafb;
  --color-text-secondary: #d1d5db;
  --color-text-muted: #9ca3af;
  --color-text-weak: #6b7280;
  --color-border: #374151;
  --color-border-light: #1f2937;
  --color-brand-light: #1e3a5f;
  --color-brand-lighter: #0f2439;
}
:root[data-theme="dark"] body {
  background: var(--color-bg) !important;
  color: var(--color-text-secondary) !important;
}
/* Rede de seguranca: paginas com <style> proprio cravam fundo claro no body/
   wrappers e quebram o dark. Forca os containers de pagina a herdar o tema. */
:root[data-theme="dark"] .geo-page,
:root[data-theme="dark"] .geo-main,
:root[data-theme="dark"] main { background: transparent !important; }
:root[data-theme="dark"] .geo-card,
:root[data-theme="dark"] .geo-btn-outline {
  background: #1f2937;
  color: #f9fafb;
}
:root[data-theme="dark"] code { background: #1f2937; color: #f9fafb; }
:root[data-theme="dark"] th { background: #1f2937; }
:root[data-theme="dark"] tr:hover td { background: #172033; }

/* ── Reforco de contraste AA no tema escuro (jun/2026) ──
   O token --color-brand (#0176d3) e otimo como FUNDO de botao (texto branco),
   mas como COR DE TEXTO sobre o fundo escuro fica em ~4:1 (abaixo de AA). Aqui
   clareamos a marca SO no uso como texto/links/rotulos e corrigimos componentes
   que cravavam fundo branco (related-pages, section-label) e ficavam ilegiveis.
   Tudo escopo [data-theme="dark"] — nao afeta o tema claro. */
:root[data-theme="dark"] a:not(.geo-btn):not(.cta) { color: #5aa9ff; }
:root[data-theme="dark"] a:not(.geo-btn):not(.cta):hover { color: #7bbcff; }
/* Botoes solidos mantem texto branco (o override de link acima nao deve atingi-los) */
:root[data-theme="dark"] .geo-btn-primary,
:root[data-theme="dark"] .geo-btn-success,
:root[data-theme="dark"] .cta { color: #fff; }
:root[data-theme="dark"] li::marker { color: #5aa9ff; }
:root[data-theme="dark"] .geo-nav-brand,
:root[data-theme="dark"] .geo-nav-links a:hover,
:root[data-theme="dark"] .geo-nav-links a[aria-current="page"],
:root[data-theme="dark"] .geo-breadcrumb a,
:root[data-theme="dark"] .geo-breadcrumb [aria-current="page"],
:root[data-theme="dark"] .geo-tier--social { color: #5aa9ff; }
:root[data-theme="dark"] .geo-btn-outline { border-color: #5aa9ff; color: #5aa9ff; }
:root[data-theme="dark"] .geo-section-label {
  background: #0f2439; border-color: #1e3a5f; color: #7bbcff;
}
/* Cards de "paginas relacionadas": fundo branco fixo -> texto claro invisivel no dark */
:root[data-theme="dark"] .geo-related-pages { background: #111827; border-color: #1f2937; }
:root[data-theme="dark"] .geo-related-pages h3 { color: #9ca3af; }
:root[data-theme="dark"] .geo-related-pages a {
  background: #1f2937; border-color: #374151; color: #e5e7eb;
}
:root[data-theme="dark"] .geo-related-pages a:hover { background: #0f2439; border-color: #3b82f6; }
:root[data-theme="dark"] .geo-related-pages a strong { color: #f9fafb; }
:root[data-theme="dark"] .geo-related-pages a span { color: #cbd5e1; }
/* Realces sobre fundos translucidos que escurecem no dark */
:root[data-theme="dark"] .answer-capsule { color: #f9fafb; }
:root[data-theme="dark"] blockquote { color: #d1d5db; }
/* Catch-all p/ TEXTO com cor inline (escura) em paginas auto-tematicas: clareia
   no dark via !important, mas NUNCA toca elementos com fundo inline proprio
   (:not([style*="background"])) — botoes/chips brancos ficam intactos. */
:root[data-theme="dark"] [style*="color:#0176d3"]:not([style*="background"]) { color: #5aa9ff !important; }
:root[data-theme="dark"] [style*="color:#92400e"]:not([style*="background"]) { color: #fcd34d !important; }
:root[data-theme="dark"] [style*="color:#15803d"]:not([style*="background"]) { color: #4ade80 !important; }
:root[data-theme="dark"] [style*="color:#065f46"]:not([style*="background"]) { color: #34d399 !important; }
:root[data-theme="dark"] [style*="color:#0b1220"]:not([style*="background"]) { color: #f3f4f6 !important; }
:root[data-theme="dark"] [style*="color:#713f12"]:not([style*="background"]) { color: #fde68a !important; }
:root[data-theme="dark"] [style*="color:#6b7280"]:not([style*="background"]) { color: #9ca3af !important; }
:root[data-theme="dark"] [style*="color:#4b5563"]:not([style*="background"]) { color: #cbd5e1 !important; }
:root[data-theme="dark"] [style*="color:#374151"]:not([style*="background"]) { color: #cbd5e1 !important; }

/* ── Toggle de tema (botao no header, estilo Lucida) ── */
.geo-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}
.geo-theme-toggle:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}
.geo-theme-toggle svg { width: 18px; height: 18px; }
.geo-theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .geo-theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .geo-theme-toggle .icon-moon { display: inline; }

/* ══════════════════════════════════════════════════════════════
   ONDA 1 — Fundacao do Design System (jun/2026)
   Camada ADITIVA guiada pelo curso frontends-com-vibecoding
   (Modulo 3 CSS moderno, Modulo 7 movimento, Modulo 8 acessibilidade).
   Nada aqui regride regras anteriores: usa @supports/@media com
   fallback e estado base sempre visivel. Idempotente (bloco unico).
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Foco: remover o anel padrao SO no foco por mouse/toque ──
   O anel de alto contraste de :focus-visible ja existe acima e vale
   para os dois temas; aqui apenas suprimimos o outline quando o foco
   NAO e por teclado, sem nunca deixar o usuario de teclado sem pista. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
}

/* ── 2. Tipografia fluida em h2/h3 (h1 ja usa clamp) ──
   Escala suave preservando a hierarquia (h1 > h2 > h3). Os contextos
   com font-size proprio (.geo-prose h2, .cta-section h2) tem maior
   especificidade e continuam mandando; so o h2/h3 "cru" e afetado. */
h2 { font-size: clamp(1.2rem, 1.02rem + 0.9vw, 1.5rem); }
h3 { font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.2rem); }
body { font-size: clamp(15.5px, 15px + 0.15vw, 16.5px); }

/* ── 3. Revelacao na rolagem (CSS puro, scroll-driven) ──
   ESTADO BASE VISIVEL: quem nao suporta animation-timeline ve tudo.
   So anima transform+opacity (compositor), so quando ha suporte E o
   usuario nao pediu menos movimento. As paginas adicionam a classe
   .reveal-on-scroll em secoes/cards. */
.reveal-on-scroll { opacity: 1; }
@keyframes geo-reveal-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal-on-scroll {
      animation: geo-reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
      will-change: opacity, transform;
    }
  }
}

/* ── 4. Hardening de movimento reduzido (reforco ao bloco global) ──
   Desliga explicitamente a revelacao e o scroll suave; o bloco
   *,*::before,*::after acima ja zera duracoes, isto cobre as bordas. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .reveal-on-scroll { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ── 5. Container queries em grades de cards ──
   O container-type permite reempilhar pela largura REAL do bloco
   (nao da viewport). Fallback: o grid auto-fit/auto-fill ja existente
   segue valendo onde @container nao e suportado. Aditivo. */
.geo-related-pages,
.geo-card-grid { container-type: inline-size; }
.geo-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
@container (max-width: 420px) {
  .geo-related-pages ul { grid-template-columns: 1fr; }
  .geo-card-grid { grid-template-columns: 1fr; }
}

/* ── 6. Estados com color-mix (com fallback solido ja definido) ──
   As cores solidas de hover acima permanecem como fallback. Onde
   color-mix(in oklch) e suportado, refinamos o tom de forma perceptiva
   e uniforme nos dois temas, sem novos tokens. */
@supports (background: color-mix(in oklch, red, blue)) {
  a:hover {
    color: color-mix(in oklch, var(--color-brand) 78%, var(--color-text));
  }
  .geo-btn-primary:hover, .cta:hover {
    background: color-mix(in oklch, var(--color-brand) 86%, black);
  }
  .geo-btn-outline:hover {
    background: color-mix(in oklch, var(--color-brand) 14%, transparent);
  }
}

/* ── 7. Impressao enxuta (complementa os @media print acima) ──
   Esconde cromos interativos injetados pelo runtime e zera sombras
   para economizar tinta e manter legibilidade. */
@media print {
  .geo-theme-toggle, .geo-totop, .geo-readbar,
  .skip-to-content, .back-to-top, .bg-wa-fab { display: none !important; }
  * { box-shadow: none !important; }
  .geo-card, .answer-capsule, blockquote, table { break-inside: avoid; }
  body { background: #fff; color: #000; }
}

/* ── 8. Estabilidade de layout (CLS) ──
   scrollbar-gutter evita o "pulo" horizontal quando a barra aparece;
   a regra de img (max-width/height:auto) ja existe e casa com os
   atributos width/height das tags para reservar espaco. */
html { scrollbar-gutter: stable; }
img { height: auto; }

/* ── 9. FAQ acessivel (<details>/<summary>) ──
   Marcador proprio (+/-), foco visivel, cursor e abertura suave que
   respeita prefers-reduced-motion. As paginas envolvem os blocos de
   FAQ em .geo-faq. Usa tokens, entao funciona no tema escuro. */
.geo-faq details {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.geo-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}
.geo-faq summary::-webkit-details-marker { display: none; }
.geo-faq summary::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-brand);
  flex-shrink: 0;
}
.geo-faq details[open] summary::after { content: '\2212'; }
.geo-faq summary:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}
.geo-faq details > *:not(summary) {
  padding: 0 1.125rem 1rem;
  margin: 0;
}
.geo-faq details > *:not(summary):first-of-type { padding-top: 0.25rem; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes geo-faq-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  .geo-faq details[open] > *:not(summary) { animation: geo-faq-open 0.2s ease both; }
}

/* ── 10. Reforco de contraste no tema escuro para a camada nova ──
   Garante que os blocos acima fiquem >= 4.5:1 quando dark esta ativo. */
:root[data-theme="dark"] .geo-faq details { background: #1f2937; }
:root[data-theme="dark"] .geo-faq summary { color: #f9fafb; }

/* ══════════════════════════════════════════════════════════════
   ONDA 2 — View Transitions cross-document (MPA) — jun/2026
   Modulo 6 (View Transitions) + Modulo 8 (acessibilidade) do curso
   frontends-com-vibecoding. Camada 100% ADITIVA e progressive
   enhancement: navegadores sem suporte (a maioria fora de Chrome/Edge)
   simplesmente ignoram @view-transition e os pseudo-elementos, mantendo
   a navegacao normal. Nada aqui regride regras anteriores. Idempotente.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Transicao suave entre paginas (navegacao MPA same-origin) ──
   Faz o navegador animar a troca de documento com um cross-fade nativo.
   So vale onde @view-transition e suportado (Chrome/Edge atuais). */
@view-transition { navigation: auto; }

/* ── 2. Cross-fade sobrio e curto (so quando ha apetite por movimento) ──
   Encurta a transicao default do root para ~200ms, mantendo o tom
   discreto da identidade Lucida. Fica fora do reduced-motion de proposito. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 200ms;
    animation-timing-function: ease;
  }
}

/* ── 3. Guarda de movimento (WCAG 2.3.3) ──
   Quem pediu menos movimento nao recebe NENHUMA animacao de transicao
   de pagina; a troca acontece de forma instantanea e estavel. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ── /leadlovers2026/portal-nav.css ── */
/* Navegação exclusiva do Portal Leadlovers 2026.
   A taxonomia parte das missões do plano e oferece as trilhas de competência
   como segundo caminho. Nenhum link deste componente sai do portal. */
.leadlovers-portal-nav {
  position: sticky;
  top: 0;
  z-index: 1200;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  padding-block: .55rem .4rem;
}

html.leadlovers-isolated {
  --llx-nav-offset: 112px;
  /* Altura da barra de abas inferior (mobile). Fica 0 fora do celular; a
     Wave 3 posiciona o dock da playlist acima dela lendo esta variável. */
  --llx-bottombar-h: 0px;
}

/* Trava de scroll enquanto a gaveta mobile está aberta (reforma mobile 04/08). */
html.llx-scroll-lock {
  overflow: hidden;
}

/* Toda região rolável do portal rola de verdade, mesmo sem o style inline:
   as páginas de materiais dependem disto para não empurrar a página inteira. */
.leadlovers-scroll-region {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Cromos injetados em runtime pelo portal-nav.js: nascem invisíveis e só as
   media queries mobile os exibem — desktop permanece intacto. */
.leadlovers-theme-toggle,
.leadlovers-nav-scrim,
.leadlovers-nav-track-toggle,
.leadlovers-nav-drawer-context,
.leadlovers-bottombar {
  display: none;
}

.leadlovers-portal-nav .leadlovers-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border, #d8dde6);
  border-radius: 10px;
  background: var(--color-bg, #fff);
  color: var(--color-text, #181818);
  cursor: pointer;
}

.leadlovers-nav-toggle-label {
  display: none;
}

.leadlovers-nav-toggle-lines,
.leadlovers-nav-toggle-lines::before,
.leadlovers-nav-toggle-lines::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}

.leadlovers-nav-toggle-lines {
  position: relative;
}

.leadlovers-nav-toggle-lines::before,
.leadlovers-nav-toggle-lines::after {
  content: "";
  position: absolute;
  left: 0;
}

.leadlovers-nav-toggle-lines::before { top: -6px; }
.leadlovers-nav-toggle-lines::after { top: 6px; }

.leadlovers-portal-nav.is-open .leadlovers-nav-toggle-lines {
  background: transparent;
}

.leadlovers-portal-nav.is-open .leadlovers-nav-toggle-lines::before {
  transform: translateY(6px) rotate(45deg);
}

.leadlovers-portal-nav.is-open .leadlovers-nav-toggle-lines::after {
  transform: translateY(-6px) rotate(-45deg);
}

.leadlovers-portal-nav .geo-nav-links {
  align-items: center;
  gap: .35rem;
}

.leadlovers-portal-nav .geo-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.leadlovers-portal-nav .geo-nav-brand > span {
  display: grid;
  gap: .05rem;
  line-height: 1.05;
}

.leadlovers-portal-nav .geo-nav-brand small {
  color: var(--color-text-muted, #5f6368);
  font-size: .62rem;
  font-weight: 650;
  letter-spacing: .02em;
}

.leadlovers-nav-primary-tabs > .leadlovers-nav-tab,
.leadlovers-nav-primary-tabs > .leadlovers-nav-tab-link {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 10px;
}

.leadlovers-nav-primary-tabs > .leadlovers-nav-tab-link,
.leadlovers-nav-primary-tabs > .leadlovers-nav-tab > summary {
  padding: .48rem .62rem;
}

.leadlovers-nav-primary-tabs > .leadlovers-nav-tab:hover,
.leadlovers-nav-primary-tabs > .leadlovers-nav-tab:focus-within,
.leadlovers-nav-primary-tabs > .leadlovers-nav-tab.is-active,
.leadlovers-nav-primary-tabs > .leadlovers-nav-tab-link[aria-current="page"] {
  border-color: var(--color-brand, #b01a47);
  background: var(--color-brand-lighter, #fff5f8);
}

.leadlovers-isolated .brgeo-ecom-banner,
.leadlovers-isolated [data-brgeo-ecom-banner],
.leadlovers-isolated .brgeo-auth-strip,
.leadlovers-isolated .brgeo-hnv-section,
.leadlovers-isolated nav.geo-nav:not(.leadlovers-portal-nav) {
  display: none !important;
}

.leadlovers-nav-search {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: .38rem;
  padding: .48rem .62rem;
  border: 1px solid var(--color-border, #d8dde6);
  border-radius: 9px;
  background: var(--color-bg, #fff);
  color: var(--color-text-secondary, #444746);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}

.leadlovers-nav-search:hover {
  border-color: var(--color-brand, #b01a47);
  color: var(--color-brand-dark, #8a1338);
}

.leadlovers-nav-search kbd {
  padding: .12rem .3rem;
  border: 1px solid var(--color-border-light, #e5e7eb);
  border-radius: 4px;
  background: var(--color-bg-subtle, #f7f7f8);
  color: var(--color-text-muted, #5f6368);
  font: inherit;
  font-size: .66rem;
}

.leadlovers-nav-group {
  position: relative;
}

.leadlovers-nav-group > summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: .3rem;
  list-style: none;
  color: var(--color-text-muted, #5f6368);
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.leadlovers-nav-label {
  min-width: 0;
}

.leadlovers-nav-count {
  display: inline-grid;
  min-width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  padding-inline: .34rem;
  border: 1px solid var(--color-border, #d8dde6);
  border-radius: 999px;
  background: var(--color-bg-subtle, #f7f7f8);
  color: var(--color-text-secondary, #444746);
  font-size: .68rem;
  font-weight: 850;
  line-height: 1;
}

.leadlovers-nav-group[open] .leadlovers-nav-count,
.leadlovers-nav-group.is-active .leadlovers-nav-count,
.leadlovers-nav-group > summary[aria-current] .leadlovers-nav-count {
  border-color: var(--color-brand, #b01a47);
  background: var(--color-brand-lighter, #fff5f8);
  color: var(--color-brand-dark, #8a1338);
}

.leadlovers-nav-step-number {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid var(--color-border, #d8dde6);
  border-radius: 50%;
  background: var(--color-bg-subtle, #f7f7f8);
  color: var(--color-text-secondary, #444746);
  font-size: .68rem;
  font-weight: 850;
}

.leadlovers-nav-group.is-active .leadlovers-nav-step-number,
.leadlovers-nav-group[open] .leadlovers-nav-step-number {
  border-color: var(--color-brand, #b01a47);
  background: var(--color-brand, #b01a47);
  color: #fff;
}

.leadlovers-nav-group > summary::-webkit-details-marker {
  display: none;
}

.leadlovers-nav-group > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}

.leadlovers-nav-group[open] > summary::after {
  transform: translateY(2px) rotate(225deg);
}

.leadlovers-nav-group > summary:hover,
.leadlovers-nav-group.is-active > summary {
  color: var(--color-brand, #b01a47);
  border-bottom-color: var(--color-brand, #b01a47);
}

.leadlovers-nav-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(760px, 92vw);
  padding: 1rem;
  border: 1px solid var(--color-border-light, #e5e7eb);
  border-radius: 14px;
  background: var(--color-bg, #fff);
  box-shadow: 0 20px 50px -20px rgba(15, 23, 42, .35);
}

.leadlovers-nav-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem 1rem;
  margin: -.2rem -.2rem 1rem;
  padding: .75rem;
  border: 1px solid var(--color-border-light, #e5e7eb);
  border-radius: 11px;
  background: linear-gradient(135deg, var(--color-brand-lighter, #fff5f8), var(--color-bg, #fff) 72%);
}

.leadlovers-nav-panel-head > span {
  display: grid;
  min-width: 0;
  gap: .18rem;
}

.leadlovers-nav-panel-head strong {
  color: var(--color-text, #181818);
  font-size: .92rem;
}

.leadlovers-nav-panel-head small {
  color: var(--color-text-muted, #5f6368);
  font-size: .74rem;
  line-height: 1.45;
}

.leadlovers-nav-panel-head > a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: .5rem .7rem;
  border: 1px solid var(--color-brand, #b01a47);
  border-radius: 9px;
  color: var(--color-brand-dark, #8a1338);
  font-size: .75rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.leadlovers-nav-panel-head > a:hover {
  background: var(--color-brand, #b01a47);
  color: #fff;
}

@keyframes leadlovers-nav-enter {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  :root:not([data-llx-motion="reduce"]) .leadlovers-nav-group[open] > .leadlovers-nav-panel {
    animation: leadlovers-nav-enter var(--llx-motion-state, 220ms) var(--llx-motion-ease-out, ease-out) both;
  }
}

.leadlovers-nav-panel--missions {
  width: min(540px, 92vw);
}

/* Painel de trilha única: a grade de .leadlovers-nav-tracks é de duas colunas
   e deixava metade do painel vazia, com os destinos empilhados numa coluna só.
   A trilha passa a ocupar a largura inteira e os destinos correm em duas
   colunas, o que derruba a altura do painel pela metade. O rótulo da trilha
   atravessa as duas colunas para continuar sendo cabeçalho do conjunto. */
.leadlovers-nav-panel--mensagens .leadlovers-nav-tracks {
  grid-template-columns: minmax(0, 1fr);
}

/* As duas regras existem porque a trilha tem DUAS formas em tempo de execução.
   Sem JavaScript, os destinos são filhos diretos de .leadlovers-nav-track.
   Com JavaScript, o portal-nav.js embrulha tudo o que vem depois do <strong>
   num .leadlovers-nav-track-body e insere um botão de acordeão antes dele, e
   aí uma grade aplicada só na trilha não alcança destino nenhum. Foi
   exatamente esse o engano da primeira tentativa: a folha dizia duas colunas,
   o computado confirmava duas colunas, e os onze links continuavam empilhados
   porque estavam um nível abaixo. */
.leadlovers-nav-panel--mensagens .leadlovers-nav-track,
.leadlovers-nav-panel--mensagens .leadlovers-nav-track-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 .5rem;
  align-content: start;
}

.leadlovers-nav-panel--mensagens .leadlovers-nav-track > strong,
.leadlovers-nav-panel--mensagens .leadlovers-nav-track > .leadlovers-nav-track-toggle,
.leadlovers-nav-panel--mensagens .leadlovers-nav-track > .leadlovers-nav-track-body {
  grid-column: 1 / -1;
}

/* Abaixo de 640px duas colunas espremem o rótulo mais longo em três linhas e
   o alvo de toque perde a folga lateral. Volta a ser uma coluna. */
@media (max-width: 640px) {
  .leadlovers-nav-panel--mensagens .leadlovers-nav-track,
  .leadlovers-nav-panel--mensagens .leadlovers-nav-track-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.leadlovers-nav-panel--apply {
  display: grid;
  width: min(330px, 92vw);
  gap: .25rem;
}

.leadlovers-nav-panel--consult {
  display: grid;
  width: min(360px, 92vw);
  gap: .45rem;
}

.leadlovers-nav-panel--consult .leadlovers-nav-search {
  width: 100%;
  justify-content: flex-start;
}

.leadlovers-nav-panel--consult .leadlovers-nav-search kbd {
  margin-left: auto;
}

.leadlovers-nav-panel-intro {
  display: block;
  margin-bottom: .75rem;
  padding: .65rem .75rem;
  border-radius: 9px;
  background: var(--color-brand-lighter, #fff5f8);
  color: var(--color-brand-dark, #8a1338);
  font-weight: 700;
  text-decoration: none;
}

.leadlovers-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .35rem .75rem;
}

.leadlovers-nav-grid a,
.leadlovers-nav-track a,
.leadlovers-nav-panel--apply a {
  display: block;
  min-height: 40px;
  padding: .5rem .65rem;
  border-radius: 8px;
  color: var(--color-text-secondary, #444746);
  font-size: .84rem;
  line-height: 1.35;
  text-decoration: none;
}

.leadlovers-nav-grid a:hover,
.leadlovers-nav-track a:hover,
.leadlovers-nav-panel--apply a:hover {
  background: var(--color-brand-lighter, #fff5f8);
  color: var(--color-brand-dark, #8a1338);
}

.leadlovers-nav-grid .leadlovers-nav-subtab {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: .45rem;
}

.leadlovers-nav-grid .leadlovers-nav-subtab > span {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-brand-lighter, #fff5f8);
  color: var(--color-brand-dark, #8a1338);
  font-size: .7rem;
  font-weight: 800;
}

.leadlovers-nav-subtab[aria-current="page"] {
  background: var(--color-brand-lighter, #fff5f8);
}

.leadlovers-nav-current-pill {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  margin-left: .42rem;
  padding: .15rem .42rem;
  border-radius: 999px;
  background: var(--color-brand, #b01a47);
  color: #fff;
  font-size: .62rem;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
}

.leadlovers-nav-tracks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.leadlovers-nav-track {
  min-width: 0;
  padding: .65rem;
  border: 1px solid var(--color-border-light, #e5e7eb);
  border-radius: 10px;
}

.leadlovers-nav-track strong {
  display: block;
  margin: 0 .65rem .3rem;
  color: var(--color-text, #181818);
  font-size: .82rem;
}

/* MEDIDO em 11/08/2026: 36px de alvo em todos os links de painel, contra os
   44px que esta casa adotou como mínimo e que já valem para o <summary> logo
   acima e para os atalhos do sumário das páginas de Mensagens. Com onze
   destinos no painel de Mensagens e vinte e oito no de Pilares, o alvo curto
   deixou de ser detalhe: no celular a lista inteira fica a menos de um dedo de
   distância entre uma linha e a seguinte. */
.leadlovers-nav-track a {
  min-height: 44px;
  padding-block: .38rem;
  font-size: .78rem;
}

.leadlovers-nav-subtab--overview {
  border-left: 3px solid var(--color-brand, #b01a47);
  padding-left: .75rem !important;
}

.leadlovers-nav-sequence {
  display: grid;
  width: 100%;
  flex: 1 0 100%;
  grid-template-columns: minmax(0, 1fr) minmax(190px, auto) minmax(0, 1fr);
  align-items: stretch;
  gap: .45rem;
  padding-top: .35rem;
  border-top: 1px solid var(--color-border-light, #e5e7eb);
}

.leadlovers-nav-sequence-link,
.leadlovers-nav-sequence-current {
  display: grid;
  min-width: 0;
  min-height: 40px;
  align-content: center;
  border-radius: 9px;
  line-height: 1.1;
  text-decoration: none;
}

.leadlovers-nav-sequence-link {
  grid-template-columns: auto minmax(0, auto);
  column-gap: .45rem;
  color: var(--color-text-secondary, #444746);
}

.leadlovers-nav-sequence-link--previous {
  justify-content: start;
  text-align: left;
}

.leadlovers-nav-sequence-link--previous > span {
  grid-row: 1 / 3;
  align-self: center;
}

.leadlovers-nav-sequence-link--next {
  grid-template-columns: minmax(0, auto) auto;
  justify-content: end;
  text-align: right;
}

.leadlovers-nav-sequence-link--next > span {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
}

.leadlovers-nav-sequence-link small,
.leadlovers-nav-sequence-link strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leadlovers-nav-sequence-link small,
.leadlovers-nav-sequence-current small,
.leadlovers-nav-sequence-current > span {
  color: var(--color-text-muted, #5f6368);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.leadlovers-nav-sequence-link strong {
  font-size: .76rem;
}

.leadlovers-nav-sequence-link:not(.leadlovers-nav-sequence-link--disabled):hover {
  background: var(--color-brand-lighter, #fff5f8);
  color: var(--color-brand-dark, #8a1338);
}

.leadlovers-nav-sequence-link--disabled {
  opacity: .7;
}

.leadlovers-nav-sequence-current {
  position: relative;
  justify-items: center;
  padding: .25rem .85rem;
  border-inline: 1px solid var(--color-border-light, #e5e7eb);
  text-align: center;
}

.leadlovers-nav-sequence-current strong {
  max-width: 28ch;
  overflow: hidden;
  color: var(--color-text, #181818);
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leadlovers-nav-sequence-current > span {
  position: absolute;
  right: .35rem;
  bottom: .2rem;
}

.leadlovers-nav-cta {
  display: inline-flex !important;
  min-height: 42px;
  align-items: center;
  padding: .55rem .85rem !important;
  border: 1px solid var(--color-brand, #b01a47) !important;
  border-radius: 999px;
  background: var(--color-brand, #b01a47);
  color: #fff !important;
  font-weight: 700 !important;
  text-decoration: none;
}

.leadlovers-nav-cta:hover {
  background: var(--color-brand-dark, #8a1338);
  border-color: var(--color-brand-dark, #8a1338) !important;
  color: #fff !important;
}

.leadlovers-nav-journey {
  display: grid;
  width: 100%;
  flex: 1 0 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .4rem;
  padding-top: .4rem;
  border-top: 1px solid var(--color-border-light, #e5e7eb);
}

.leadlovers-nav-journey-step {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 44px;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  gap: .05rem .45rem;
  padding: .35rem .55rem;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--color-text-secondary, #444746);
  text-decoration: none;
}

.leadlovers-nav-journey-step > span {
  display: inline-grid;
  width: 28px;
  height: 28px;
  grid-row: 1 / 3;
  place-items: center;
  align-self: center;
  border: 1px solid var(--color-border, #d8dde6);
  border-radius: 50%;
  background: var(--color-bg, #fff);
  font-size: .72rem;
  font-weight: 900;
}

.leadlovers-nav-journey-step small,
.leadlovers-nav-journey-step strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leadlovers-nav-journey-step small {
  color: var(--color-text-muted, #5f6368);
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.leadlovers-nav-journey-step strong {
  font-size: .75rem;
}

.leadlovers-nav-journey-step:hover {
  border-color: var(--color-brand, #b01a47);
  background: var(--color-brand-lighter, #fff5f8);
  color: var(--color-brand-dark, #8a1338);
}

.leadlovers-nav-journey-step.is-active {
  border-color: var(--color-brand, #b01a47);
  background: var(--color-brand-lighter, #fff5f8);
  color: var(--color-brand-dark, #8a1338);
}

.leadlovers-nav-journey-step.is-active > span {
  border-color: var(--color-brand, #b01a47);
  background: var(--color-brand, #b01a47);
  color: #fff;
}

.leadlovers-nav-journey-step.is-done > span {
  border-color: var(--color-success, #2e844a);
  background: var(--color-success-light, #eaf7ef);
  color: var(--color-success, #2e844a);
}

.leadlovers-portal-nav a[aria-current="page"],
.leadlovers-nav-panel a[aria-current="page"] {
  color: var(--color-brand, #b01a47);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.leadlovers-portal-nav a:focus-visible,
.leadlovers-portal-nav summary:focus-visible,
.leadlovers-portal-nav button:focus-visible {
  outline: 3px solid var(--color-brand, #b01a47);
  outline-offset: 3px;
  border-radius: 6px;
}

.leadlovers-scroll-region:focus-visible {
  outline: 3px solid var(--color-brand, #b01a47);
  outline-offset: 3px;
  border-radius: 8px;
}

@media (min-width: 1141px) {
  .leadlovers-nav-panel {
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .leadlovers-nav-panel-head {
    position: sticky;
    top: -1rem;
    z-index: 2;
  }

  /* MEDIDO em 11/08/2026, com o painel aberto e a régua no viewport: o painel
     tem 760px e se ancora pela direita no PRÓPRIO <details>, que fica no meio
     da barra. O resultado é que a borda esquerda do painel cai FORA da tela em
     toda largura de desktop comum:

       viewport   Pilares    Mensagens   Biblioteca
       1000px     -366px     -184px      -83px
       1100px     -220px      -38px       ok
       1280px     -158px       ok         ok
       1440px      -78px       ok         ok

     Ou seja, num monitor de 1440px, que é o mais comum, o menu de Pilares
     nascia com 78px da primeira coluna cortados pela esquerda, e ninguém
     percebeu porque o documento não ganha rolagem horizontal: o estouro fica
     contido e some da única verificação que costuma ser feita.

     O conserto tira o <details> da conta como bloco de contenção no desktop.
     Sem ele, o painel passa a se ancorar na própria barra, que é sticky e
     portanto posicionada, e a borda direita do painel encosta na borda direita
     da barra. No celular a regra não vale: lá o painel já é estático e nasce
     dentro da gaveta. */
  .leadlovers-nav-group {
    position: static;
  }
}

@media (max-width: 1140px) {
  html.leadlovers-isolated {
    --llx-nav-offset: 116px;
  }

  .leadlovers-portal-nav .leadlovers-nav-toggle {
    display: inline-flex;
  }

  .leadlovers-portal-nav .geo-nav-links {
    position: absolute;
    inset: 100% 0 auto;
    display: none;
    /* Fallback vh antes do dvh: navegador antigo limita a gaveta do mesmo
       jeito; nos atuais o dvh acompanha a barra de URL retrátil. */
    max-height: calc(100vh - var(--llx-nav-offset));
    max-height: calc(100dvh - var(--llx-nav-offset));
    overflow-y: auto;
    padding: .75rem 1rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--color-border-light, #e5e7eb);
    border-bottom: 1px solid var(--color-border-light, #e5e7eb);
    background: var(--color-bg, #fff);
    box-shadow: 0 18px 35px -24px rgba(15, 23, 42, .45);
  }

  .leadlovers-portal-nav.is-open .geo-nav-links {
    /* Gaveta vertical: sem a coluna, os itens viram uma fileira espremida e o
       CTA final sai cortado na borda direita (vistoria mobile 28/07). */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .leadlovers-nav-drawer-context {
    display: grid;
    gap: .16rem;
    margin-bottom: .35rem;
    padding: .75rem;
    border: 1px solid var(--color-border-light, #e5e7eb);
    border-radius: 11px;
    background: var(--color-bg-subtle, #f7f7f8);
  }

  .leadlovers-nav-drawer-context > span {
    color: var(--color-brand-dark, #8a1338);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .leadlovers-nav-drawer-context > strong {
    color: var(--color-text, #181818);
    font-size: .92rem;
  }

  .leadlovers-nav-drawer-context > small {
    color: var(--color-text-muted, #5f6368);
    font-size: .75rem;
    line-height: 1.4;
  }

  /* CRÍTICO (auditoria mobile 04/08): a coluna flex com max-height encolhia o
     <details> aberto (painel de 1617px espremido em 446px), que pintava por
     cima dos itens seguintes e tornava os links inalcançáveis ao toque. Cada
     filho mantém a altura natural e é a GAVETA que rola. */
  .leadlovers-portal-nav .geo-nav-links > * {
    flex: 0 0 auto;
  }

  /* Piso tipográfico do chrome na gaveta (o geo-design.css derruba para
     12,8px abaixo de 768px). */
  .leadlovers-portal-nav .geo-nav-links {
    font-size: .875rem;
  }

  .leadlovers-nav-track a {
    font-size: .8125rem;
  }

  /* Scrim atrás da gaveta: toque fora fecha o menu e o conteúdo escurece.
     Filho da nav com z-index negativo: pinta sob a gaveta, mas acima da
     página, dentro do stacking context da própria nav. */
  .leadlovers-portal-nav.is-open .leadlovers-nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    border: 0;
    padding: 0;
    background: rgba(15, 23, 42, .45);
  }

  /* Header recolhe ao rolar para baixo e volta ao rolar para cima (padrão
     YouTube). A classe é gerida pelo portal-nav.js, que nunca a aplica com a
     gaveta aberta nem com foco dentro da nav. */
  .leadlovers-portal-nav.llx-nav-hidden {
    transform: translateY(-100%);
  }

  /* Toggle de tema na barra do header: espelho do botão que o geo-theme.js
     injeta dentro da gaveta (invisível fechada). */
  .leadlovers-portal-nav .leadlovers-theme-toggle {
    display: inline-flex;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    margin-left: auto;
    flex: 0 0 auto;
  }

  /* O geo-theme.js acrescenta outro botão no fim de .geo-nav-links. No
     celular o espelho do header já fica sempre alcançável; esconder o segundo
     evita duas ações idênticas dentro da mesma gaveta. */
  .leadlovers-portal-nav .geo-nav-links > .geo-theme-toggle {
    display: none !important;
  }

  /* Subgrupos colapsáveis por pilar (padrão biblioteca do Spotify): o título
     vira botão e os links de cada pilar só abrem sob demanda. */
  .leadlovers-nav-track > strong {
    display: none;
  }

  .leadlovers-nav-track .leadlovers-nav-track-toggle {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .65rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--color-text, #181818);
    font: inherit;
    font-size: .84rem;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
  }

  .leadlovers-nav-track-toggle > svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    transition: transform .2s ease;
  }

  .leadlovers-nav-track.is-expanded > .leadlovers-nav-track-toggle > svg {
    transform: rotate(180deg);
  }

  .leadlovers-nav-track:not(.is-expanded) > .leadlovers-nav-track-body {
    display: none;
  }

  .leadlovers-portal-nav .geo-nav-links > a,
  .leadlovers-portal-nav .leadlovers-nav-search,
  .leadlovers-nav-group > summary {
    width: 100%;
    min-height: 46px;
    justify-content: space-between;
    padding: .6rem .25rem;
  }

  .leadlovers-nav-search {
    justify-content: flex-start;
  }

  .leadlovers-nav-search kbd {
    margin-left: auto;
  }

  .leadlovers-nav-panel {
    position: static;
    width: auto;
    margin: 0 0 .75rem;
    padding: .75rem;
    border-radius: 10px;
    box-shadow: none;
  }

  .leadlovers-nav-panel-head {
    grid-template-columns: minmax(0, 1fr);
    margin: 0 0 .75rem;
  }

  .leadlovers-nav-panel-head > a {
    width: 100%;
    white-space: normal;
  }

  .leadlovers-nav-primary-tabs > .leadlovers-nav-tab,
  .leadlovers-nav-primary-tabs > .leadlovers-nav-tab-link {
    border-color: transparent;
  }

  .leadlovers-nav-journey {
    order: 4;
  }
}

@media (max-width: 640px) {
  html.leadlovers-isolated {
    --llx-nav-offset: 60px;
  }

  .leadlovers-portal-nav {
    min-height: 60px;
    flex-wrap: nowrap;
    padding: .45rem max(.75rem, env(safe-area-inset-right)) .45rem max(.75rem, env(safe-area-inset-left));
  }

  .leadlovers-portal-nav .geo-nav-brand {
    min-width: 0;
  }

  .leadlovers-portal-nav .geo-nav-brand > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .leadlovers-portal-nav .geo-nav-brand small {
    display: none;
  }

  .leadlovers-portal-nav .leadlovers-nav-toggle {
    width: auto;
    flex: 0 0 auto;
    gap: .45rem;
    padding: 0 .7rem;
    font: inherit;
    font-size: .8125rem;
    font-weight: 800;
  }

  .leadlovers-nav-toggle-label {
    display: inline;
  }

  .leadlovers-nav-grid,
  .leadlovers-nav-tracks {
    grid-template-columns: 1fr;
  }

  .leadlovers-nav-panel {
    max-width: 100%;
  }

  .leadlovers-nav-journey {
    display: none;
  }

  .leadlovers-nav-journey-step {
    min-height: 48px;
    grid-template-columns: 26px minmax(0, 1fr);
    padding: .25rem .3rem;
  }

  .leadlovers-nav-journey-step > span {
    width: 26px;
    height: 26px;
  }

  .leadlovers-nav-journey-step small {
    display: none;
  }

  .leadlovers-nav-journey-step strong {
    grid-row: 1 / 3;
    align-self: center;
    font-size: .66rem;
    white-space: normal;
  }

  .leadlovers-nav-sequence {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }

  .leadlovers-nav-sequence-link {
    display: grid;
    min-height: 44px;
    place-items: center;
  }

  .leadlovers-nav-sequence-link small,
  .leadlovers-nav-sequence-link strong {
    display: none;
  }

  .leadlovers-nav-sequence-link--previous > span,
  .leadlovers-nav-sequence-link--next > span {
    grid-area: auto;
    font-size: 1.15rem;
  }

  .leadlovers-nav-sequence-current {
    border-inline: 0;
  }

  .leadlovers-nav-sequence-current strong {
    max-width: 25ch;
  }

  /* A dica só aparece quando a região REALMENTE rola (o portal-nav.js estampa
     data-scrollable medindo scrollWidth × clientWidth, re-checando em resize).
     position:absolute tira a dica do fluxo: dentro de grids com
     grid-auto-flow:column ela virava uma célula vazia de 220px. */
  .leadlovers-scroll-region[data-scrollable="true"] {
    position: relative;
    padding-top: 2.1rem;
  }

  .leadlovers-scroll-region[data-scrollable="true"]::before {
    content: "Deslize para ver todas as colunas";
    position: absolute;
    top: .6rem;
    left: 1rem;
    margin: 0;
    color: var(--color-text-muted, #5f6368);
    font-size: .74rem;
    font-weight: 600;
    pointer-events: none;
  }

  /* Breadcrumb: alvos de 44px, uma linha só, elipse no crumb corrente. */
  .leadlovers-isolated .geo-breadcrumb {
    flex-wrap: nowrap;
  }

  .leadlovers-isolated .geo-breadcrumb a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .leadlovers-isolated .geo-breadcrumb [aria-current="page"] {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Rodapé empilhado em uma coluna; o font-size:0 no contêiner suprime os
     separadores "·" (nós de texto soltos) sem tocar no HTML. */
  .leadlovers-isolated .geo-footer > div:has(a) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    font-size: 0;
  }

  .leadlovers-isolated .geo-footer > div:has(a) > * {
    font-size: .8rem;
  }

  .leadlovers-isolated .geo-footer a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding: .35rem .2rem;
  }

  /* ── Barra de abas inferior (padrão Spotify/YouTube) ──
     Injetada em runtime pelo portal-nav.js; html.llx-has-bottombar liga a
     variável de altura e o respiro do rodapé. */
  html.leadlovers-isolated.llx-has-bottombar {
    --llx-bottombar-h: 60px;
  }

  html.llx-has-bottombar body {
    padding-bottom: calc(var(--llx-bottombar-h, 0px) + env(safe-area-inset-bottom, 0px));
  }

  html.llx-has-bottombar .geo-totop {
    bottom: calc(var(--llx-bottombar-h, 0px) + env(safe-area-inset-bottom, 0px) + 14px);
  }

  /* Âncoras locais de "voltar ao topo" das aulas (wrappers sticky por página)
     ficavam parcialmente atrás da bottombar. Mesmo cálculo do .geo-totop:
     sobem a folga da barra + safe-area quando a bottombar está presente. */
  html.llx-has-bottombar .topo-sticky,
  html.llx-has-bottombar .totop-anchor,
  html.llx-has-bottombar .voltar-topo,
  html.llx-has-bottombar .back-to-top-rail,
  html.llx-has-bottombar .back-to-top-wrap,
  html.llx-has-bottombar .topo-wrap {
    bottom: calc(var(--llx-bottombar-h, 0px) + env(safe-area-inset-bottom, 0px) + 14px);
  }

  .leadlovers-bottombar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(var(--llx-bottombar-h, 60px) + env(safe-area-inset-bottom, 0px));
    padding: 0 max(.25rem, env(safe-area-inset-right)) env(safe-area-inset-bottom, 0px) max(.25rem, env(safe-area-inset-left));
    border-top: 1px solid var(--color-border-light, #e5e7eb);
    background: var(--color-bg, #fff);
  }

  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .leadlovers-bottombar {
      background: color-mix(in srgb, var(--color-bg, #fff) 86%, transparent);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
    }
  }

  .leadlovers-bottombar .leadlovers-bottombar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    border-bottom: none;
    border-radius: 10px;
    color: var(--color-text-muted, #5f6368);
    min-width: 0;
    padding-inline: .1rem;
    font-size: clamp(.58rem, 2.8vw, .7rem);
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
  }

  .leadlovers-bottombar .leadlovers-bottombar-item > svg {
    width: 22px;
    height: 22px;
  }

  .leadlovers-bottombar .leadlovers-bottombar-item > span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .leadlovers-bottombar .leadlovers-bottombar-item[aria-current] {
    color: var(--color-brand, #b01a47);
    font-weight: 800;
  }

  html.llx-drawer-open .leadlovers-bottombar {
    visibility: hidden;
    pointer-events: none;
  }
}

/* Transição curta do header retrátil, só para quem aceita movimento. */
@media (max-width: 1140px) and (prefers-reduced-motion: no-preference) {
  :root:not([data-llx-motion="reduce"]) .leadlovers-portal-nav {
    transition: transform .18s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .leadlovers-nav-toggle-lines,
  .leadlovers-nav-toggle-lines::before,
  .leadlovers-nav-toggle-lines::after,
  .leadlovers-nav-group > summary::after,
  .leadlovers-nav-group[open] > .leadlovers-nav-panel,
  .leadlovers-portal-nav,
  .leadlovers-nav-track-toggle > svg {
    animation: none;
    transition: none;
  }
}

:root[data-llx-motion="reduce"] .leadlovers-nav-toggle-lines,
:root[data-llx-motion="reduce"] .leadlovers-nav-toggle-lines::before,
:root[data-llx-motion="reduce"] .leadlovers-nav-toggle-lines::after,
:root[data-llx-motion="reduce"] .leadlovers-nav-group > summary::after,
:root[data-llx-motion="reduce"] .leadlovers-nav-group[open] > .leadlovers-nav-panel,
:root[data-llx-motion="reduce"] .leadlovers-portal-nav,
:root[data-llx-motion="reduce"] .leadlovers-nav-track-toggle > svg {
  animation: none;
  transition: none;
}

/* ══ Correção de contraste — auditoria frontend em 5 waves (28/07/2026) ══
   No tema escuro --color-brand resolve para #F2799C: branco sobre esse rosa
   claro rende 2,63:1. O CTA passa a usar texto navy escuro sobre o rosa claro
   (≈6,4:1); no hover, o rosa mais claro mantém o mesmo texto. */
:root[data-theme="dark"] .leadlovers-nav-cta {
  color: #141d3a !important;
}
:root[data-theme="dark"] .leadlovers-nav-cta:hover {
  color: #141d3a !important;
}

/* ══ Reforma mobile (04/08/2026) — tema escuro ══
   O geo-design.css pinta todo link do dark com
   `:root[data-theme="dark"] a:not(.geo-btn):not(.cta)` (0,4,1): os overrides
   abaixo precisam do prefixo e do seletor de mesma força para vencer. */
/* !important como no fix do CTA acima: a home tem um override inline de link
   dark ainda mais específico (0,7,1) que pintaria a barra inteira de rosa. */
:root[data-theme="dark"] .leadlovers-bottombar a.leadlovers-bottombar-item {
  color: var(--color-text-muted, #9ca3af) !important;
}
:root[data-theme="dark"] .leadlovers-bottombar a.leadlovers-bottombar-item[aria-current] {
  color: var(--color-brand, #f2799c) !important;
}
:root[data-theme="dark"] .leadlovers-nav-panel-head {
  background: linear-gradient(135deg, rgba(242, 121, 156, .13), var(--color-bg, #141927) 72%);
}
:root[data-theme="dark"] .leadlovers-nav-drawer-context {
  border-color: rgba(255, 255, 255, .14);
  background: var(--color-bg, #0b1220);
}
:root[data-theme="dark"] .leadlovers-nav-count {
  border-color: rgba(255, 255, 255, .2);
  background: #111827;
  color: #d1d5db;
}
:root[data-theme="dark"] .leadlovers-nav-group[open] .leadlovers-nav-count,
:root[data-theme="dark"] .leadlovers-nav-group.is-active .leadlovers-nav-count,
:root[data-theme="dark"] .leadlovers-nav-group > summary[aria-current] .leadlovers-nav-count {
  border-color: var(--color-brand, #f2799c);
  background: rgba(242, 121, 156, .12);
  color: var(--color-brand, #f2799c);
}
:root[data-theme="dark"] .leadlovers-nav-panel-head > a:hover {
  color: #141d3a;
}
:root[data-theme="dark"] .leadlovers-nav-current-pill {
  background: var(--color-brand, #f2799c);
  color: #141d3a;
}
:root[data-theme="dark"] .leadlovers-portal-nav .leadlovers-nav-scrim {
  background: rgba(2, 6, 16, .6);
}

/* ══ Alvos de toque — checklist frontends-com-vibecoding (03/08/2026) ══
   Em ponteiro grosso, os controles da navegação sobem para ≥48 px de área
   útil. Só min-height/min-width: nada muda no desktop com mouse. */
@media (pointer: coarse) {
  .leadlovers-portal-nav .leadlovers-nav-toggle {
    min-width: 48px;
    min-height: 48px;
  }

  .leadlovers-portal-nav .geo-nav-brand {
    min-height: 48px;
  }

  .leadlovers-nav-primary-tabs > .leadlovers-nav-tab,
  .leadlovers-nav-primary-tabs > .leadlovers-nav-tab-link,
  .leadlovers-nav-search,
  .leadlovers-nav-group > summary,
  .leadlovers-nav-sequence-link,
  .leadlovers-nav-sequence-current,
  .leadlovers-nav-journey-step,
  .leadlovers-nav-cta {
    min-height: 48px;
  }

  .leadlovers-nav-grid a,
  .leadlovers-nav-track a,
  .leadlovers-nav-panel--apply a {
    min-height: 48px;
    align-content: center;
  }

  .leadlovers-isolated .geo-footer a {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    padding: .35rem .2rem;
  }
}

/* ══ Aba Playlist destacada e submenu de coleções (23/08/2026) ══
   A playlist saiu de dentro de "Aplicar", onde vivia dois níveis abaixo, e
   virou aba própria do topo com as cinco coleções do catálogo.

   O destaque é contorno da marca, e não preenchimento: preencher a aba a
   deixaria com a aparência de estado ativo permanente, e a barra já usa fundo
   cheio para marcar a seção em que o leitor está.

   Alvo de toque de 44px vem da régua de acessibilidade da doutrina de
   navegação do portal, e vale para cada coleção, que é o item que o dedo
   procura no celular. */
.leadlovers-nav-tab--playlist > summary {
  box-shadow: inset 0 0 0 1.5px var(--color-brand, #b01a47);
  border-radius: .55rem;
}
.leadlovers-nav-tab--playlist > summary:hover {
  background: var(--color-brand-lighter, #fff5f8);
}

.leadlovers-nav-subtab--colecao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  min-height: 44px;
}

/* A contagem é pastilha, não texto solto: o número precisa ler como metadado
   do item, e não como parte do nome da coleção. O texto acessível equivalente
   viaja no .sr-only ao lado, porque a pastilha é aria-hidden. */
.leadlovers-nav-colecao-count {
  flex: none;
  min-width: 2.1rem;
  padding: .1rem .4rem;
  border-radius: 999px;
  background: var(--color-brand-lighter, #fff5f8);
  color: var(--color-brand-dark, #8a1338);
  font-size: .72rem;
  font-weight: 800;
  text-align: center;
}

:root[data-theme="dark"] .leadlovers-nav-colecao-count {
  background: rgba(255, 255, 255, .12);
  color: #f4f6fb;
}

/* ══ Marca do portal na navegação (auditoria de 24/08/2026) ══
   O `--color-brand` do geo-design.css é o azul #0176d3 do GEO. O
   portal-artigos.css o troca pelo rosa da casa, mas só as páginas de artigo
   carregam aquele arquivo: nas outras sessenta a barra do Portal Leadlovers
   aparecia azul, e no tema escuro o azul sobre o fundo da barra rendia
   3,40:1, abaixo dos 4,5:1 de texto normal.

   O token fica preso ao componente de navegação, e não ao :root, porque
   trocá-lo na raiz repintaria link, botão e foco de sessenta páginas de
   conteúdo. Aqui o efeito para na barra, que é o que tem dono. */
.leadlovers-portal-nav,
.leadlovers-portal-banner,
.leadlovers-bottombar {
  --color-brand: #B01A47;        /* 6,81:1 sobre o branco */
  --color-brand-dark: #8A1338;
  --color-brand-light: #FCE4EC;
}
:root[data-theme="dark"] .leadlovers-portal-nav,
:root[data-theme="dark"] .leadlovers-portal-banner,
:root[data-theme="dark"] .leadlovers-bottombar {
  /* 7,36:1 sobre o fundo da barra; e a tinta #141d3a que o bloco de 28/07
     já põe no CTA passa a render 7,74:1 sobre este rosa. */
  --color-brand: #FF8FB0;
  --color-brand-dark: #FFB3C8;
  --color-brand-light: rgba(255, 143, 176, .16);
  --color-brand-lighter: #251925;
}

/* A barra carrega a própria paleta no escuro.
   Uma página do portal não carrega o geo-design.css, e ali todo
   `var(--color-text-muted, #5f6368)` caía no valor CLARO da alternativa: cinza
   de tema claro sobre fundo escuro rende 2,61:1. A alternativa escrita no
   componente não resolve, porque ela é a mesma para os dois temas. Declarar os
   tokens aqui faz a barra funcionar sozinha, sem depender de arquivo externo,
   e não altera nada onde o geo-design já os define. */
:root[data-theme="dark"] .leadlovers-portal-nav,
:root[data-theme="dark"] .leadlovers-portal-banner,
:root[data-theme="dark"] .leadlovers-bottombar {
  --color-text: #F4F6FB;             /* 17,3:1 sobre a barra */
  --color-text-secondary: #E5E7EB;   /* 15,1:1 */
  --color-text-muted: #D1D5DB;       /* 12,7:1 na barra, 10,7:1 no painel */
  --color-border: rgba(255, 255, 255, .2);
  --color-border-light: rgba(255, 255, 255, .12);
}

/* 30/08/2026: com a aba Segmentos o topo passou a nove itens. MEDIDO em 1440px:
   a barra ia de 95px para 117px porque o pedido "Mapa do portal" quebrava em
   duas linhas, e a barra tem largura máxima própria, então viewport maior não
   resolve. No desktop inteiro o respiro lateral das abas encolhe e o pedido
   não quebra. */
@media (min-width: 1141px) {
  .leadlovers-nav-primary-tabs > .leadlovers-nav-tab-link,
  .leadlovers-nav-primary-tabs > .leadlovers-nav-tab > summary {
    padding-inline: .42rem;
  }
  .leadlovers-portal-nav .geo-nav-links {
    gap: .2rem;
  }
  .leadlovers-nav-cta {
    white-space: nowrap;
  }
}


/* ─── Navegação v2 (03/09/2026): abas dentro dos painéis ───
   Regra do guia de navegação: subgrupos paralelos viram abas (role=tablist)
   no desktop, com setas circulando; no celular o mesmo HTML segue como
   acordeão de subgrupos. Sem JavaScript a lista de abas fica escondida e os
   subgrupos aparecem empilhados. */
.leadlovers-nav-tablist {
  display: none;
}

.leadlovers-nav-tracks.is-tabbed {
  display: block;
}

.leadlovers-nav-tracks.is-tabbed .leadlovers-nav-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0 0 .7rem;
  padding: 0 0 .6rem;
  border-bottom: 1px solid var(--color-border-light, #e5e7eb);
}

.leadlovers-nav-tabbtn {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: .4rem;
  padding: .4rem .8rem;
  border: 1px solid var(--color-border, #d8dde6);
  border-radius: 999px;
  background: var(--color-bg-subtle, #f7f7f8);
  color: var(--color-text-secondary, #444746);
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.leadlovers-nav-tabbtn:hover {
  border-color: var(--color-brand, #b01a47);
  color: var(--color-brand-dark, #8a1338);
}

.leadlovers-nav-tabbtn:focus-visible {
  outline: 2px solid var(--color-brand, #b01a47);
  outline-offset: 2px;
}

.leadlovers-nav-tabbtn[aria-selected="true"] {
  border-color: var(--color-brand, #b01a47);
  background: var(--color-brand, #b01a47);
  color: #fff;
}

.leadlovers-nav-tabbtn.has-current::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-brand, #b01a47);
}

.leadlovers-nav-tabbtn[aria-selected="true"].has-current::before {
  background: #fff;
}

.leadlovers-nav-tab-count {
  display: inline-grid;
  min-width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  padding-inline: .3rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .06);
  font-size: .66rem;
  font-weight: 850;
}

.leadlovers-nav-tabbtn[aria-selected="true"] .leadlovers-nav-tab-count {
  background: rgba(255, 255, 255, .22);
}

.leadlovers-nav-tracks.is-tabbed .leadlovers-nav-track[hidden] {
  display: none;
}

.leadlovers-nav-tracks.is-tabbed .leadlovers-nav-track {
  padding: 0;
  border: 0;
}

.leadlovers-nav-tracks.is-tabbed .leadlovers-nav-track > strong,
.leadlovers-nav-tracks.is-tabbed .leadlovers-nav-track > .leadlovers-nav-track-toggle {
  display: none;
}

.leadlovers-nav-tracks.is-tabbed .leadlovers-nav-track > .leadlovers-nav-track-body,
.leadlovers-nav-tracks.is-tabbed .leadlovers-nav-track:not(:has(> .leadlovers-nav-track-body)) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: .1rem .6rem;
}

.leadlovers-nav-tracks.is-tabbed .leadlovers-nav-subtab--overview {
  grid-column: 1 / -1;
}

:root[data-theme="dark"] .leadlovers-nav-tabbtn {
  background: rgba(255, 255, 255, .06);
}

:root[data-theme="dark"] .leadlovers-nav-tab-count {
  background: rgba(255, 255, 255, .12);
}

/* ─── Abas dentro de páginas (data-llx-tabs) ───
   Visões paralelas do mesmo recurso, com o estado na URL (?aba=). Todo o
   conteúdo continua no HTML; o painel fora de foco recebe hidden. */
.llx-tabs-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 1.2rem 0 1.4rem;
  padding: 0 0 .8rem;
  border-bottom: 1px solid var(--color-border-light, #e5e7eb);
  position: sticky;
  top: var(--llx-nav-offset, 60px);
  z-index: 3;
  background: var(--color-bg, #fff);
}

.llx-tabs-list [role="tab"] {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: .4rem;
  padding: .5rem .95rem;
  border: 1px solid var(--color-border, #d8dde6);
  border-radius: 999px;
  background: var(--color-bg-subtle, #f7f7f8);
  color: var(--color-text-secondary, #444746);
  font: inherit;
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
}

.llx-tabs-list [role="tab"]:hover {
  border-color: var(--color-brand, #b01a47);
  color: var(--color-brand-dark, #8a1338);
}

.llx-tabs-list [role="tab"]:focus-visible {
  outline: 2px solid var(--color-brand, #b01a47);
  outline-offset: 2px;
}

.llx-tabs-list [role="tab"][aria-selected="true"] {
  border-color: var(--color-brand, #b01a47);
  background: var(--color-brand, #b01a47);
  color: #fff;
}

.llx-tabs-list .llx-tabs-count {
  display: inline-grid;
  min-width: 1.4rem;
  height: 1.4rem;
  place-items: center;
  padding-inline: .3rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .07);
  font-size: .7rem;
  font-weight: 850;
}

.llx-tabs-list [role="tab"][aria-selected="true"] .llx-tabs-count {
  background: rgba(255, 255, 255, .22);
}

.llx-tabs-panel[hidden] {
  display: none;
}

:root[data-theme="dark"] .llx-tabs-list {
  background: var(--color-bg, #0b1220);
}

:root[data-theme="dark"] .llx-tabs-list [role="tab"] {
  background: rgba(255, 255, 255, .06);
}

/* ─── Rodapé: série numerada e relacionados em outros menus ───
   Paginação numerada para "consulta com volta ao ponto" (guia de navegação):
   endereço estável, posição visível, anterior e próxima com título. */
.leadlovers-related {
  display: grid;
  gap: 1rem;
  margin: 0 0 1.4rem;
  padding: 1rem 1.1rem 1.2rem;
  border: 1px solid var(--color-border-light, #e5e7eb);
  border-radius: 14px;
  background: var(--color-bg-subtle, #f7f7f8);
  font-size: .9rem;
  text-align: left;
}

.leadlovers-related-seq {
  display: grid;
  gap: .6rem;
}

.leadlovers-related-seq-label,
.leadlovers-related-links-label {
  display: block;
  color: var(--color-text-muted, #5f6368);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.leadlovers-related-seq-label b {
  color: var(--color-brand-dark, #8a1338);
}

.leadlovers-related-seq-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.leadlovers-related-seq-list a {
  display: inline-grid;
  min-width: 40px;
  height: 40px;
  place-items: center;
  padding-inline: .5rem;
  border: 1px solid var(--color-border, #d8dde6);
  border-radius: 10px;
  background: var(--color-bg, #fff);
  color: var(--color-text-secondary, #444746);
  font-size: .82rem;
  font-weight: 800;
  text-decoration: none;
}

.leadlovers-related-seq-list a:hover {
  border-color: var(--color-brand, #b01a47);
  color: var(--color-brand-dark, #8a1338);
}

.leadlovers-related-seq-list a[aria-current="page"] {
  border-color: var(--color-brand, #b01a47);
  background: var(--color-brand, #b01a47);
  color: #fff;
}

.leadlovers-related-seq-arrows {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .6rem;
}

.leadlovers-related-prev,
.leadlovers-related-next {
  display: grid;
  min-height: 56px;
  align-content: center;
  gap: .1rem;
  padding: .55rem .8rem;
  border: 1px solid var(--color-border, #d8dde6);
  border-radius: 10px;
  background: var(--color-bg, #fff);
  color: var(--color-text, #181818);
  text-decoration: none;
}

.leadlovers-related-next {
  text-align: right;
}

.leadlovers-related-prev:hover,
.leadlovers-related-next:hover {
  border-color: var(--color-brand, #b01a47);
}

.leadlovers-related-prev small,
.leadlovers-related-next small {
  color: var(--color-text-muted, #5f6368);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.leadlovers-related-prev strong,
.leadlovers-related-next strong {
  font-size: .86rem;
  line-height: 1.3;
}

.leadlovers-related-prev.is-empty,
.leadlovers-related-next.is-empty {
  border-color: transparent;
  background: transparent;
}

.leadlovers-related-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .6rem;
}

.leadlovers-related-links-label {
  grid-column: 1 / -1;
}

.leadlovers-related-link {
  display: grid;
  min-height: 56px;
  align-content: center;
  gap: .12rem;
  padding: .55rem .8rem;
  border: 1px solid var(--color-border, #d8dde6);
  border-left: 3px solid var(--color-brand, #b01a47);
  border-radius: 10px;
  background: var(--color-bg, #fff);
  color: var(--color-text, #181818);
  text-decoration: none;
}

.leadlovers-related-link:hover {
  border-color: var(--color-brand, #b01a47);
}

.leadlovers-related-link small {
  color: var(--color-brand-dark, #8a1338);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.leadlovers-related-link strong {
  font-size: .85rem;
  line-height: 1.3;
}

.leadlovers-isolated .geo-footer .leadlovers-related a {
  font-size: inherit;
}

:root[data-theme="dark"] .leadlovers-related {
  background: rgba(255, 255, 255, .04);
}

:root[data-theme="dark"] .leadlovers-related-seq-list a,
:root[data-theme="dark"] .leadlovers-related-prev,
:root[data-theme="dark"] .leadlovers-related-next,
:root[data-theme="dark"] .leadlovers-related-link {
  background: rgba(255, 255, 255, .05);
  color: var(--color-text, #F4F6FB);
}

:root[data-theme="dark"] .leadlovers-related-link small,
:root[data-theme="dark"] .leadlovers-related-seq-label b {
  color: #F2799C;
}

@media (max-width: 640px) {
  .leadlovers-related-seq-arrows {
    grid-template-columns: 1fr;
  }

  .leadlovers-related-next {
    text-align: left;
  }
}

/* O rodapé móvel força os links a inline (regra do separador "·"); os cartões
   de série e de relacionados precisam de grade própria com especificidade maior. */
.leadlovers-isolated .geo-footer .leadlovers-related-prev,
.leadlovers-isolated .geo-footer .leadlovers-related-next,
.leadlovers-isolated .geo-footer .leadlovers-related-link,
.geo-footer .leadlovers-related-prev,
.geo-footer .leadlovers-related-next,
.geo-footer .leadlovers-related-link {
  display: grid;
  font-size: .9rem;
}

.leadlovers-isolated .geo-footer .leadlovers-related-seq-list a,
.geo-footer .leadlovers-related-seq-list a {
  display: inline-grid;
}

.geo-footer .leadlovers-related small,
.geo-footer .leadlovers-related strong {
  display: block;
}

/* O glossário precisa ser reconhecível sem depender apenas da cor. */
html.leadlovers-isolated body main a.ll-verbete { text-decoration-line: underline; text-decoration-style: dotted; text-underline-offset: .18em; }

html.leadlovers-isolated body main :is(p, li, dd, figcaption, .ll-apoio) a:not([class]):not([role='button']) { text-decoration: underline; text-underline-offset: .18em; }

/* Jornada 2026: uma linha no desktop e categorias progressivas na gaveta. */
.leadlovers-nav-browser { display: none; }
.leadlovers-portal-nav [data-llx-drawer-hidden],
.leadlovers-portal-nav .leadlovers-nav-browser[hidden] { display: none !important; }
.leadlovers-portal-nav .leadlovers-nav-study { font-weight: 750; }
@media (min-width: 1141px) {
  html.leadlovers-isolated { --llx-nav-offset: 72px; }
  body .leadlovers-portal-nav {
    min-height: 72px;
    max-width: 1480px;
    padding: .55rem clamp(.75rem, 2vw, 2rem);
    gap: .65rem;
    flex-wrap: nowrap;
    align-items: center;
  }
  body .leadlovers-portal-nav .geo-nav-brand { flex: 0 0 auto; font-size: .9rem; }
  body .leadlovers-portal-nav .geo-nav-brand small { font-size: .6rem; }
  body .leadlovers-portal-nav .geo-nav-links { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; justify-content: flex-end; gap: .1rem; }
  body .leadlovers-nav-primary-tabs > .leadlovers-nav-tab-link,
  body .leadlovers-nav-primary-tabs > .leadlovers-nav-tab > summary { min-height: 44px; padding: .45rem .4rem; white-space: nowrap; font-size: .79rem; }
  body .leadlovers-nav-primary-tabs > .leadlovers-nav-tab { min-height: 44px; }
  body .leadlovers-nav-primary-tabs > .leadlovers-nav-tab > summary .leadlovers-nav-count { display: none; }
  body .leadlovers-portal-nav .leadlovers-nav-cta { padding: .5rem .65rem; min-height: 44px; font-size: .76rem; }
  body .leadlovers-portal-nav .ll-discover-nav { margin: 0; width: 44px; min-width: 44px; height: 44px; padding: .65rem; justify-content: center; flex: 0 0 auto; }
  body .leadlovers-portal-nav .ll-discover-nav span { display: none; }
  body .leadlovers-portal-nav .geo-nav-links > .geo-theme-toggle { width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: 0 0 0 .2rem; }
  body .leadlovers-nav-panel { top: calc(100% + 4px); right: 1rem; width: min(760px, calc(100vw - 2rem)); max-height: calc(100dvh - var(--llx-nav-offset, 72px) - 1.5rem); }
  body .leadlovers-nav-panel-head { top: -1rem; }
}
@media (max-width: 1140px) {
  html.leadlovers-isolated { --llx-nav-offset: 64px; }
  body .leadlovers-portal-nav {
    min-height: 64px;
    padding: .45rem max(.7rem, env(safe-area-inset-right)) .45rem max(.7rem, env(safe-area-inset-left));
    flex-wrap: nowrap;
    gap: .4rem;
  }
  body .leadlovers-portal-nav .geo-nav-brand { flex: 1 1 auto; min-width: 0; font-size: .9rem; }
  body .leadlovers-portal-nav .geo-nav-brand > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body .leadlovers-portal-nav .geo-nav-brand small { display: none; }
  body .leadlovers-portal-nav .ll-discover-nav { margin: 0; width: 44px; min-width: 44px; height: 44px; padding: .6rem; justify-content: center; flex: 0 0 auto; }
  body .leadlovers-portal-nav .ll-discover-nav span { display: none; }
  body .leadlovers-portal-nav .leadlovers-theme-toggle { margin: 0; width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  body .leadlovers-portal-nav .leadlovers-nav-toggle { min-width: 44px; min-height: 44px; width: 44px; height: 44px; padding: .5rem; justify-content: center; flex: 0 0 auto; }
  body .leadlovers-portal-nav .leadlovers-nav-toggle-label { display: none; }
  body .leadlovers-portal-nav .geo-nav-links { padding: .65rem .85rem calc(1rem + env(safe-area-inset-bottom, 0px)); gap: .35rem; }
  body .leadlovers-portal-nav .leadlovers-nav-browser {
    display: flex;
    align-items: center;
    gap: .75rem;
    position: sticky;
    top: -.65rem;
    z-index: 3;
    padding: .5rem 0;
    background: var(--color-bg, #fff);
    border-bottom: 1px solid var(--color-border, #d8dde6);
  }
  body .leadlovers-nav-back { display: inline-flex; align-items: center; gap: .4rem; min-width: 44px; min-height: 44px; padding: .6rem .75rem; border: 1px solid var(--color-brand, #b01a47); border-radius: 9px; color: var(--color-brand-dark, #8a1338); background: var(--color-bg, #fff); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; flex: 0 0 auto; }
  body .leadlovers-nav-back::before { content: "‹"; font-size: 1.4rem; line-height: 1; }
  body .leadlovers-nav-browser-title { min-width: 0; color: var(--color-text, #24252f); font-size: .87rem; font-weight: 750; overflow-wrap: anywhere; line-height: 1.4; }
  body .leadlovers-portal-nav[data-llx-drawer-level] .leadlovers-nav-panel { border: 0; padding: .35rem 0; margin: 0; }
  body .leadlovers-portal-nav[data-llx-drawer-level] .leadlovers-nav-tracks { display: block; }
  body .leadlovers-portal-nav[data-llx-drawer-level] .leadlovers-nav-track { margin: .3rem 0; padding: 0; }
  body .leadlovers-portal-nav[data-llx-drawer-level="categorias"] .leadlovers-nav-track-toggle { min-height: 52px; padding: .8rem; border: 1px solid var(--color-border, #d8dde6); border-radius: 10px; background: var(--color-bg, #fff); }
  body .leadlovers-portal-nav[data-llx-drawer-level="destinos"] .leadlovers-nav-track-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  body .leadlovers-portal-nav[data-llx-drawer-level="destinos"] .leadlovers-nav-track-body > a { min-height: 48px; padding: .75rem; border: 1px solid var(--color-border-light, #e5e7eb); border-radius: 9px; font-size: .87rem; line-height: 1.5; overflow-wrap: anywhere; }
  body .leadlovers-portal-nav[data-llx-drawer-level="destinos"] .leadlovers-nav-track-body > a:hover { border-color: var(--color-brand); background: var(--color-brand-lighter, #fff5f8); }
  /* Sem script, os details e destinos continuam navegáveis no fluxo da página. */
  body .leadlovers-portal-nav:not([data-leadlovers-nav-ready="true"]) { position: static; flex-wrap: wrap; }
  body .leadlovers-portal-nav:not([data-leadlovers-nav-ready="true"]) .leadlovers-nav-toggle { display: none; }
  body .leadlovers-portal-nav:not([data-leadlovers-nav-ready="true"]) .geo-nav-links { position: static; display: flex; flex: 1 0 100%; flex-direction: column; align-items: stretch; max-height: none; overflow: visible; box-shadow: none; }
  body .leadlovers-portal-nav:not([data-leadlovers-nav-ready="true"]) .leadlovers-nav-track > strong { display: block; }
}
@media (max-width: 380px) {
  body .leadlovers-portal-nav .geo-nav-brand { gap: .35rem; font-size: .82rem; }
  body .leadlovers-portal-nav .geo-nav-brand > .geo-icon { width: 18px; height: 18px; flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .leadlovers-portal-nav, .leadlovers-portal-nav *, .leadlovers-portal-nav *::before, .leadlovers-portal-nav *::after { animation: none !important; transition: none !important; }
}

/* As páginas independentes também recebem as tintas da navegação e do rodapé. */
:root.leadlovers-isolated .leadlovers-portal-nav .geo-nav-links > a.leadlovers-nav-tab-link {
  color: var(--color-text-secondary, #444746);
}
:root.leadlovers-isolated .leadlovers-portal-nav .geo-nav-links > a.leadlovers-nav-tab-link[aria-current="page"] {
  color: var(--color-brand);
}
:root[data-theme="dark"] .leadlovers-related {
  --color-text: #f4f6fb;
  --color-text-secondary: #e5e7eb;
  --color-text-muted: #c1c1cd;
}
:root.leadlovers-isolated body .geo-footer .leadlovers-related-seq-list a[aria-current="page"],
:root.leadlovers-isolated body .geo-footer .leadlovers-related-seq-list a[aria-current="page"]:is(:hover, :focus-visible) {
  color: var(--lle-on-brand, #ffffff) !important;
  background: var(--lle-brand, #a51243);
}
:root.leadlovers-isolated body .leadlovers-related-seq-label b {
  color: var(--lle-brand, #a51243);
}

/* ── /leadlovers2026/portal-learning.css ── */
/* Portal Leadlovers 2026 — camada educacional compartilhada.
   Sistema visual aditivo: preserva geo-design.css e portal-nav.css.
   Todas as classes deste arquivo usam o prefixo llx para evitar colisões. */

/* ── Cores semânticas da experiência ─────────────────────────────── */
body {
  --llx-accent: #a51243;
  --llx-accent-strong: #7a0d31;
  --llx-accent-soft: #fff0f5;
  --llx-accent-line: #d8698b;
  --llx-accent-2: #755000;
  --llx-accent-2-soft: #fff7dc;
  --llx-on-accent: #ffffff;
  --llx-on-accent-strong: #ffffff;
  --llx-surface: var(--color-bg, #ffffff);
  --llx-surface-raised: #ffffff;
  --llx-surface-soft: #f7f8fa;
  --llx-text: var(--color-text, #181818);
  --llx-text-muted: #52606f;
  --llx-border: #d8dee7;
  --llx-border-strong: #aab4c3;
  --llx-success: #1f6f43;
  --llx-success-soft: #eaf7ef;
  --llx-warning: #8a5100;
  --llx-warning-soft: #fff5e5;
  --llx-danger: #a61b2b;
  --llx-danger-soft: #fff0f1;
  --llx-shadow: 0 10px 26px rgba(15, 23, 42, 0.09);
  --llx-shadow-small: 0 3px 12px rgba(15, 23, 42, 0.07);
  --llx-radius: 16px;
  --llx-radius-small: 10px;
  --llx-learning-bar-height: 70px;
  --llx-motion-feedback: 160ms;
  --llx-motion-state: 240ms;
  --llx-motion-distance: 10px;
  --llx-motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-ll-track="inbound"] {
  --llx-accent: #006879;
  --llx-accent-strong: #00505e;
  --llx-accent-soft: #e8f8fa;
  --llx-accent-line: #59aeb9;
  --llx-accent-2: #126b57;
  --llx-accent-2-soft: #eaf8f3;
}

body[data-ll-track="outbound"] {
  --llx-accent: #a84b00;
  --llx-accent-strong: #7c3700;
  --llx-accent-soft: #fff2e7;
  --llx-accent-line: #df8a45;
  --llx-accent-2: #6040a6;
  --llx-accent-2-soft: #f2edff;
}

body[data-ll-track="branding"] {
  --llx-accent: #a51243;
  --llx-accent-strong: #7a0d31;
  --llx-accent-soft: #fff0f5;
  --llx-accent-line: #d8698b;
  --llx-accent-2: #755000;
  --llx-accent-2-soft: #fff7dc;
}

body[data-ll-track="estrategico"] {
  --llx-accent: #4338a8;
  --llx-accent-strong: #32277f;
  --llx-accent-soft: #efefff;
  --llx-accent-line: #8279d9;
  --llx-accent-2: #1f6372;
  --llx-accent-2-soft: #eaf7f9;
}

body[data-ll-track="glossario"] {
  --llx-accent: #006b64;
  --llx-accent-strong: #00514c;
  --llx-accent-soft: #e8f8f5;
  --llx-accent-line: #56aaa3;
  --llx-accent-2: #365d9d;
  --llx-accent-2-soft: #edf3ff;
}

/* ── Tema escuro: por que NÃO há @media (prefers-color-scheme: dark) aqui ──
   Auditoria de 03/08/2026 (checklist frontends-com-vibecoding, item
   prefers-color-scheme). O tema é governado por /assets/geo-theme.js, que é
   OPT-IN por decisão registrada no próprio arquivo ("nunca segue o SO
   sozinho"): no load ele aplica data-theme="dark" quando localStorage
   geo-theme === "dark" e REMOVE o atributo em qualquer outro caso — ou seja,
   "escolheu claro" e "nunca escolheu" são indistinguíveis no DOM. Um fallback
   :root:not([data-theme]) sob prefers-color-scheme: dark quebraria o toggle
   para quem usa SO escuro: a escolha explícita de tema claro nunca "pegaria".
   Um fallback restrito a @media (scripting: none) também foi considerado e
   rejeitado: os tokens BASE do escuro (--color-bg, --ll-*, etc.) moram no
   geo-design.css e no <style> inline de cada página — fora destas três
   folhas — e escurecer só a camada llx/llp sobre canvas claro entregaria uma
   página meio-escura pior que o claro íntegro. Se um dia o default do sistema
   for desejado, o lugar certo é o geo-theme.js estampar data-theme também a
   partir de matchMedia("(prefers-color-scheme: dark)") quando não houver
   escolha salva — aí estes tokens seguem funcionando sem mudança. */
:root[data-theme="dark"] body {
  --llx-surface: #0b1220;
  --llx-surface-raised: #172033;
  --llx-surface-soft: #111827;
  --llx-text: #f8fafc;
  --llx-text-muted: #c4ceda;
  --llx-border: #3e4b5f;
  --llx-border-strong: #65738a;
  --llx-accent: #ff91b3;
  --llx-accent-strong: #a51243;
  --llx-accent-soft: #321724;
  --llx-accent-line: #d8698b;
  --llx-accent-2: #f4cf69;
  --llx-accent-2-soft: #332a12;
  --llx-on-accent: #101827;
  --llx-success: #75d39a;
  --llx-success-soft: #123222;
  --llx-warning: #f2bd69;
  --llx-warning-soft: #38240e;
  --llx-danger: #ff9ca8;
  --llx-danger-soft: #3a171d;
  --llx-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
  --llx-shadow-small: 0 4px 14px rgba(0, 0, 0, 0.24);
}

:root[data-theme="dark"] body[data-ll-track="inbound"] {
  --llx-accent: #7bd5e2;
  --llx-accent-strong: #006879;
  --llx-accent-soft: #102d33;
  --llx-accent-line: #4ba7b4;
  --llx-accent-2: #80d8bc;
  --llx-accent-2-soft: #123128;
}

:root[data-theme="dark"] body[data-ll-track="outbound"] {
  --llx-accent: #ffb16e;
  --llx-accent-strong: #a84b00;
  --llx-accent-soft: #382313;
  --llx-accent-line: #dd8742;
  --llx-accent-2: #c1adff;
  --llx-accent-2-soft: #27203d;
}

:root[data-theme="dark"] body[data-ll-track="branding"] {
  --llx-accent: #ff91b3;
  --llx-accent-strong: #a51243;
  --llx-accent-soft: #321724;
  --llx-accent-line: #d8698b;
  --llx-accent-2: #f4cf69;
  --llx-accent-2-soft: #332a12;
}

:root[data-theme="dark"] body[data-ll-track="estrategico"] {
  --llx-accent: #b9b2ff;
  --llx-accent-strong: #5144bf;
  --llx-accent-soft: #24213f;
  --llx-accent-line: #8d84e6;
  --llx-accent-2: #89d4e2;
  --llx-accent-2-soft: #132f36;
}

:root[data-theme="dark"] body[data-ll-track="glossario"] {
  --llx-accent: #79d7cf;
  --llx-accent-strong: #006b64;
  --llx-accent-soft: #102f2c;
  --llx-accent-line: #55aaa2;
  --llx-accent-2: #a9c7ff;
  --llx-accent-2-soft: #172841;
}

/* ── Utilidades e foco ───────────────────────────────────────────── */
.llx-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.llx-progress-shell,
.llx-study-rail,
.llx-desktop-index,
.llx-mobile-index,
.llx-route-cards,
.llx-start-panel,
.llx-module,
.llx-page-pager,
.llx-pagination,
.llx-mobile-actions,
.llx-search,
.llx-answer-shell,
.llx-deep-dive,
.llx-learning-flow,
.llx-prereq-map {
  min-width: 0;
  max-width: 100%;
}

.llx-progress-shell *,
.llx-study-rail *,
.llx-desktop-index *,
.llx-mobile-index *,
.llx-route-cards *,
.llx-start-panel *,
.llx-module *,
.llx-page-pager *,
.llx-pagination *,
.llx-mobile-actions *,
.llx-search *,
.llx-answer-shell *,
.llx-deep-dive *,
.llx-learning-flow *,
.llx-prereq-map * {
  box-sizing: border-box;
}

.llx-progress-shell a,
.llx-study-rail a,
.llx-desktop-index a,
.llx-mobile-index a,
.llx-route-card,
.llx-page-pager a,
.llx-pagination a,
.llx-mobile-actions a {
  border-bottom: 0;
  text-decoration: none;
}

.llx-progress-shell button,
.llx-study-rail a,
.llx-desktop-index summary,
.llx-desktop-index a,
.llx-mobile-index summary,
.llx-mobile-index button,
.llx-mobile-index a,
.llx-route-card,
.llx-module-toggle,
.llx-page-pager a,
.llx-pagination a,
.llx-complete-button,
.llx-mobile-actions button,
.llx-mobile-actions a,
.llx-answer-toggle,
.llx-deep-dive summary {
  min-height: 44px;
}

.llx-progress-shell button:focus-visible,
.llx-study-rail a:focus-visible,
.llx-desktop-index summary:focus-visible,
.llx-desktop-index a:focus-visible,
.llx-mobile-index summary:focus-visible,
.llx-mobile-index button:focus-visible,
.llx-mobile-index a:focus-visible,
.llx-route-card:focus-visible,
.llx-module-toggle:focus-visible,
.llx-page-pager a:focus-visible,
.llx-pagination a:focus-visible,
.llx-complete-button:focus-visible,
.llx-mobile-actions button:focus-visible,
.llx-mobile-actions a:focus-visible,
.llx-search input:focus-visible,
.llx-answer-toggle:focus-visible,
.llx-deep-dive summary:focus-visible {
  outline: 3px solid var(--llx-accent);
  outline-offset: 3px;
}

/* Regra BASE de foco visível (curso frontends-com-vibecoding, 03/08/2026).
   Todo elemento interativo do portal ganha anel de foco por teclado, sem
   anel no clique de mouse (:focus-visible, nunca :focus). O :where() zera o
   peso dos alvos — a especificidade total fica em 0-1-0 (só o próprio
   :focus-visible conta) — então qualquer regra específica já existente
   (rail, prompt, playlist, nav) continua vencendo. O anel usa o accent do
   tema/trilha corrente e cai para a cor de marca fora da camada llx. */
:where(a, button, summary, input, select, textarea, [role="button"], [role="tab"], [tabindex]):focus-visible {
  outline: 3px solid var(--llx-accent, var(--color-brand, #b01a47));
  outline-offset: 2px;
}

/* O rádio do microquiz é visualmente oculto dentro do cartão da opção: o anel
   precisa aparecer no cartão, senão o teclado navega às cegas. */
.llx-quiz-option:has(input:focus-visible) {
  outline: 3px solid var(--llx-accent);
  outline-offset: 2px;
}

/* O input da paleta de comando remove o outline próprio (o chrome é da caixa);
   a caixa sinaliza o foco de teclado no lugar dele. */
.llx-command-search:focus-within {
  box-shadow: 0 0 0 3px var(--llx-accent-soft);
}

/* ── Progresso de leitura ────────────────────────────────────────── */
.llx-progress-reserve {
  box-sizing: border-box;
  width: 100%;
  min-height: 70px;
  border-bottom: 1px solid var(--llx-border);
  background: var(--llx-surface);
}

/* Linha de metadados do topo (04/08/2026): abriga o selo do pilar que a página
   já tinha e o rótulo estático de tempo de leitura. A regra só organiza os
   selos em linha com respiro; a forma continua vindo do .geo-badge do design
   system. Escrita no HTML, portanto não desloca nada depois do load. */
.llx-page-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
}

/* O par muted do design system (#706e6b sobre #f3f3f3) rende 4,58:1, e este
   rótulo tem 11 px em caixa alta: passa em AA raspando, sem folga para o
   antisserrilhado. Os tokens do portal sobem para 6,0:1 no tema claro e
   11,0:1 no escuro, com a mesma discrição visual. */
.llx-reading-time {
  border: 1px solid var(--llx-border);
  background: var(--llx-surface-soft);
  color: var(--llx-text-muted);
}

.llx-noscript-note {
  max-width: 1120px;
  margin: 0.75rem auto;
  padding: 0.75rem 1rem;
  border: 1px solid var(--llx-border);
  border-radius: var(--llx-radius-small);
  background: var(--llx-surface-soft);
  color: var(--llx-text-muted);
  font-size: 0.82rem;
}

.llx-progress-shell {
  box-sizing: border-box;
  position: sticky;
  top: var(--llx-nav-offset);
  z-index: 1080;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 70px;
  padding: 0.55rem max(1rem, calc((100vw - 1120px) / 2));
  border-bottom: 1px solid var(--llx-border);
  background: var(--llx-surface);
  color: var(--llx-text);
  box-shadow: var(--llx-shadow-small);
}

.llx-progress-shell::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: var(--llx-border);
}

.llx-progress-bar,
.llx-reading-progress {
  position: absolute;
  z-index: 1;
  inset: auto auto 0 0;
  width: 100%;
  max-width: 100%;
  height: 4px;
  border-radius: 0 999px 999px 0;
  background: var(--llx-accent-strong);
  transform: scaleX(var(--llx-progress-scale, 0));
  transform-origin: left center;
  transition: transform var(--llx-motion-feedback) var(--llx-motion-ease-out);
}

.llx-progress-copy,
.llx-global-progress {
  min-width: 0;
  color: var(--llx-text);
  font-size: 0.8rem;
  font-weight: 750;
  line-height: 1.35;
}

.llx-progress-copy span,
.llx-global-progress span {
  color: var(--llx-text-muted);
  font-weight: 600;
}

.llx-learning-context {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.7rem;
}

.llx-learning-context > svg,
.llx-learning-context > [data-lucide] {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  color: var(--llx-accent);
}

.llx-learning-context-text {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem 0.65rem;
}

.llx-reading-label {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: var(--llx-accent-soft);
  color: var(--llx-accent);
  white-space: nowrap;
}

.llx-learning-track,
.llx-global-progress {
  display: none;
}

.llx-learning-title {
  min-width: 0;
  overflow: hidden;
  color: var(--llx-text);
  font-size: 0.84rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Shell, rail e índice local ─────────────────────────────────── */
.llx-learning-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  width: 100%;
  min-width: 0;
}

.llx-learning-main {
  min-width: 0;
}

.llx-study-rail {
  display: none;
}

.llx-page-index .llx-study-rail {
  display: block;
  position: static;
  width: 100%;
  max-height: none;
}

.llx-desktop-index {
  display: none;
}

/* ── Índice da página: painel recolhível em largura total ────────
   Substituiu o rail lateral de 280px em 13/08/2026. Fechado por padrão, o
   leitor começa com a largura inteira; aberto, o cartão do índice ocupa a
   coluna e distribui os links em grade. */
.llx-page-index {
  margin: 0 0 1.5rem;
  border: 1px solid var(--llx-border);
  border-radius: var(--llx-radius);
  background: var(--llx-surface-raised);
  box-shadow: var(--llx-shadow-small);
}

.llx-page-index-summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.7rem 1rem;
  border-radius: var(--llx-radius);
  color: var(--llx-text);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  list-style: none;
}

.llx-page-index-summary::-webkit-details-marker {
  display: none;
}

.llx-page-index-summary svg,
.llx-page-index-summary [data-lucide] {
  width: 18px;
  height: 18px;
  color: var(--llx-accent);
  flex: 0 0 auto;
}

.llx-page-index-summary:hover,
.llx-page-index-summary:focus-visible {
  color: var(--llx-accent);
}

.llx-page-index-summary:focus-visible {
  outline: 3px solid var(--llx-accent);
  outline-offset: 2px;
}

.llx-page-index-count {
  margin-left: auto;
  color: var(--llx-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

/* A seta segue o estado do <details> sem depender de JS. */
.llx-page-index-summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s ease;
  flex: 0 0 auto;
}

.llx-page-index[open] > .llx-page-index-summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.llx-page-index[open] > .llx-page-index-summary {
  border-bottom: 1px solid var(--llx-border);
  border-radius: var(--llx-radius) var(--llx-radius) 0 0;
}

/* Dentro do painel o cartão do índice perde moldura própria: quem molda é o
   painel, e duas bordas empilhadas pesavam o bloco. */
.llx-page-index .llx-rail-card {
  border: 0;
  border-radius: 0 0 var(--llx-radius) var(--llx-radius);
  background: transparent;
  box-shadow: none;
}

.llx-page-index .llx-rail-title {
  display: none;
}

/* Busca, contagem e ações foram desenhadas para a coluna de 280px e ficavam
   esticadas na largura inteira. No painel elas voltam a ter tamanho de
   controle e dividem uma faixa só, acima da grade de links. */
@media (min-width: 720px) {
  .llx-page-index .llx-rail-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.9rem 1rem 0;
  }

  .llx-page-index .llx-rail-search-label {
    grid-column: 1 / -1;
    max-width: 22rem;
    padding: 0;
  }

  .llx-page-index .llx-rail-count {
    padding: 0;
    white-space: nowrap;
  }

  .llx-page-index .llx-rail-actions {
    justify-self: end;
    grid-template-columns: repeat(3, auto);
    padding: 0;
  }

  .llx-page-index .llx-rail-motion-toggle {
    grid-column: auto;
  }

  .llx-page-index .llx-rail-nav {
    grid-column: 1 / -1;
    padding: 0.9rem 0;
  }
}

.llx-rail-card {
  overflow: hidden;
  border: 1px solid var(--llx-border);
  border-radius: var(--llx-radius);
  background: var(--llx-surface-raised);
  box-shadow: var(--llx-shadow-small);
}

.llx-rail-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid var(--llx-border);
  color: var(--llx-text);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.llx-rail-title svg,
.llx-rail-title [data-lucide] {
  width: 18px;
  height: 18px;
  color: var(--llx-accent);
  flex: 0 0 auto;
}

.llx-rail-search-label {
  display: grid;
  gap: 0.4rem;
  padding: 0.8rem 0.8rem 0.35rem;
  color: var(--llx-text-muted);
  font-size: 0.72rem;
  font-weight: 750;
}

.llx-rail-search {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  min-height: 42px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--llx-border);
  border-radius: 8px;
  background: var(--llx-surface);
  color: var(--llx-text);
  font: inherit;
}

.llx-rail-count {
  margin: 0;
  padding: 0.25rem 0.8rem 0.55rem;
  color: var(--llx-text-muted);
  font-size: 0.72rem;
}

.llx-rail-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  padding: 0 0.55rem 0.55rem;
}

.llx-rail-actions button {
  display: inline-flex;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.45rem;
  border: 1px solid var(--llx-border);
  border-radius: 8px;
  background: var(--llx-surface);
  color: var(--llx-text-muted);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
}

.llx-rail-actions button:hover,
.llx-rail-actions button:focus-visible {
  border-color: var(--llx-accent);
  background: var(--llx-accent-soft);
  color: var(--llx-accent);
}

.llx-rail-motion-toggle {
  grid-column: 1 / -1;
}

.llx-rail-actions svg,
.llx-rail-actions [data-lucide] {
  width: 15px;
  height: 15px;
}

.llx-rail-nav {
  display: grid;
  gap: 0.55rem;
  max-height: min(62vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--llx-border-strong) transparent;
  padding: 0.55rem;
}

.llx-rail-group {
  display: grid;
  gap: 0.12rem;
}

.llx-rail-group[hidden],
.llx-rail-link[hidden] {
  display: none;
}

.llx-rail-group-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.55rem;
  border-bottom: 1px solid var(--llx-border);
  color: var(--llx-text);
}

.llx-rail-group-title > svg,
.llx-rail-group-title > [data-lucide] {
  width: 16px;
  height: 16px;
  color: var(--llx-accent);
  flex: 0 0 auto;
}

.llx-rail-group-title > span {
  display: grid;
  gap: 0.03rem;
}

.llx-rail-group-title span {
  font-size: 0.72rem;
  font-weight: 900;
}

/* 0,6rem dava 9,6px na tela, pequeno demais para um descritor que agora é
   visível de verdade (o rail voltou em 04/08/2026). Sobe para 11,2px, ainda
   abaixo do rótulo da etapa, que mantém a hierarquia. */
.llx-rail-group-title small {
  color: var(--llx-text-muted);
  font-size: 0.7rem;
  font-weight: 650;
}

.llx-rail-group-links {
  display: grid;
}

.llx-rail-link {
  position: relative;
  display: grid;
  grid-template-columns: 14px 24px minmax(0, 1fr);
  align-items: start;
  gap: 0.4rem;
  padding: 0.65rem 0.7rem;
  border-radius: 9px;
  color: var(--llx-text-muted);
  font-size: 0.79rem;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.llx-rail-number {
  color: var(--llx-text-muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.llx-rail-link-label {
  min-width: 0;
}

.llx-rail-link::before {
  content: "";
  width: 10px;
  height: 10px;
  margin: 0.22rem auto 0;
  border: 2px solid var(--llx-border-strong);
  border-radius: 50%;
  background: var(--llx-surface-raised);
}

.llx-rail-link:hover {
  background: var(--llx-accent-soft);
  color: var(--llx-text);
}

.llx-rail-link.is-active,
.llx-rail-link[aria-current="true"],
.llx-rail-link[aria-current="location"] {
  background: var(--llx-accent-soft);
  color: var(--llx-accent);
  font-weight: 800;
}

.llx-rail-link.is-active::before,
.llx-rail-link[aria-current="true"]::before,
.llx-rail-link[aria-current="location"]::before {
  border-color: var(--llx-accent);
  background: var(--llx-accent);
  box-shadow: 0 0 0 3px var(--llx-accent-soft);
}

.llx-rail-link.is-complete::before,
.llx-rail-link[data-complete="true"]::before {
  border-color: var(--llx-success);
  background: var(--llx-success);
}

.llx-mobile-index {
  position: sticky;
  top: calc(var(--llx-nav-offset) + var(--llx-learning-bar-height) + 0.5rem);
  z-index: 980;
  margin: 0 0 1rem;
  border: 1px solid var(--llx-border);
  border-radius: var(--llx-radius-small);
  background: var(--llx-surface-raised);
  box-shadow: var(--llx-shadow-small);
}

.llx-mobile-index > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  list-style: none;
  color: var(--llx-text);
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
}

.llx-mobile-index > summary::-webkit-details-marker {
  display: none;
}

.llx-mobile-index > summary::after {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-right: 2px solid var(--llx-accent);
  border-bottom: 2px solid var(--llx-accent);
  transform: translateY(-2px) rotate(45deg);
}

.llx-mobile-index[open] > summary::after {
  transform: translateY(2px) rotate(225deg);
}

.llx-mobile-motion-toggle {
  display: inline-flex;
  width: calc(100% - 1.1rem);
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0 0.55rem 0.55rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--llx-border);
  border-radius: 8px;
  background: var(--llx-surface-soft);
  color: var(--llx-text-muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.llx-mobile-motion-toggle:hover,
.llx-mobile-motion-toggle:focus-visible {
  border-color: var(--llx-accent);
  color: var(--llx-accent);
}

.llx-mobile-index .llx-rail-nav {
  max-height: 45vh;
  border-top: 1px solid var(--llx-border);
}

.llx-desktop-index {
  position: relative;
}

.llx-desktop-index > summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--llx-border);
  border-radius: var(--llx-radius-small);
  background: var(--llx-surface-raised);
  color: var(--llx-text);
  font-size: 0.78rem;
  font-weight: 850;
  list-style: none;
  cursor: pointer;
}

.llx-desktop-index > summary::-webkit-details-marker {
  display: none;
}

.llx-desktop-index > summary:hover,
.llx-desktop-index[open] > summary {
  border-color: var(--llx-accent);
  background: var(--llx-accent-soft);
  color: var(--llx-accent);
}

.llx-desktop-index > summary > svg,
.llx-desktop-index > summary > [data-lucide] {
  width: 18px;
  height: 18px;
}

.llx-desktop-index-count {
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  padding-inline: 0.3rem;
  border-radius: 999px;
  background: var(--llx-accent-soft);
  color: var(--llx-accent);
  font-size: 0.65rem;
  font-variant-numeric: tabular-nums;
}

.llx-desktop-index-links {
  position: absolute;
  z-index: 1200;
  top: calc(100% + 0.55rem);
  right: 0;
  display: grid;
  width: min(390px, calc(100vw - 2rem));
  max-height: min(68vh, 620px);
  padding: 0.55rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--llx-border);
  border-radius: 12px;
  background: var(--llx-surface-raised);
  box-shadow: var(--llx-shadow);
}

.llx-desktop-index-links a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 0.55rem;
  padding: 0.65rem 0.7rem;
  border-radius: 8px;
  color: var(--llx-text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
}

.llx-desktop-index-links .llx-rail-link::before {
  display: none;
}

.llx-desktop-index-links a:hover,
.llx-desktop-index-links a:focus-visible,
.llx-desktop-index-links a.is-active {
  background: var(--llx-accent-soft);
  color: var(--llx-accent);
}

/* ── Busca ───────────────────────────────────────────────────────── */
.llx-learning-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  margin: 0 0 1.25rem;
}

.llx-search,
.llx-glossary-tools {
  position: relative;
  width: 100%;
}

.llx-search svg,
.llx-search [data-lucide] {
  position: absolute;
  top: 50%;
  left: 0.9rem;
  width: 18px;
  height: 18px;
  color: var(--llx-text-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.llx-search input,
.llx-glossary-tools input,
.llx-glossary-tools select {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--llx-border-strong);
  border-radius: var(--llx-radius-small);
  background: var(--llx-surface-raised);
  color: var(--llx-text);
  font: inherit;
  font-size: 0.9rem;
}

.llx-search input {
  padding-left: 2.75rem;
}

.llx-search input::placeholder,
.llx-glossary-tools input::placeholder {
  color: var(--llx-text-muted);
  opacity: 1;
}

.llx-search input:focus,
.llx-glossary-tools input:focus,
.llx-glossary-tools select:focus {
  border-color: var(--llx-accent);
  box-shadow: 0 0 0 3px var(--llx-accent-soft);
}

.llx-search-status {
  display: block;
  min-height: 1.25rem;
  margin-top: 0.35rem;
  color: var(--llx-text-muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.llx-glossary-tools {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(150px, 1fr);
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--llx-border);
  border-radius: var(--llx-radius);
  background: var(--llx-surface-soft);
}

/* ── Cápsula de abertura e resposta progressiva ─────────────────── */
.llx-answer-shell {
  position: relative;
  overflow: hidden;
  margin: 0 0 1.5rem;
  border: 1px solid var(--llx-accent-line);
  border-left: 5px solid var(--llx-accent);
  border-radius: 0 var(--llx-radius) var(--llx-radius) 0;
  background: var(--llx-accent-soft);
  color: var(--llx-text);
}

.llx-answer-shell .answer-capsule,
.llx-answer-shell > p {
  margin: 0;
  padding: 1.15rem 1.25rem 0.7rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--llx-text);
  font-size: 1rem;
  line-height: 1.65;
}

/* O corte só existe quando o botão "Ler resposta completa" existe
   (.is-collapsible, texto > 430 caracteres). Sem botão, sem clamp: a faixa
   entre o corte e o limiar deixava texto truncado e inalcançável.
   padding-bottom: 0 no estado cortado remove a linha residual ("sliver")
   que o -webkit-line-clamp renderiza dentro do padding. */
.llx-answer-shell.is-collapsible:not(.is-expanded):not([data-expanded="true"]) .answer-capsule,
.llx-answer-shell.is-collapsible:not(.is-expanded):not([data-expanded="true"]) > p {
  display: -webkit-box;
  overflow: hidden;
  padding-bottom: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.llx-answer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.15rem 1rem 0.85rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--llx-accent);
  border-radius: 999px;
  background: var(--llx-surface-raised);
  color: var(--llx-accent);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}

.llx-answer-toggle:hover {
  background: var(--llx-accent);
  color: var(--llx-on-accent);
}

/* ── Comece por aqui / rotas de estudo ──────────────────────────── */
.llx-start-panel {
  margin: 1.5rem 0 2rem;
  padding: 1.25rem;
  border: 1px solid var(--llx-border);
  border-radius: var(--llx-radius);
  background: var(--llx-surface-soft);
}

.llx-start-panel > h2,
.llx-start-panel > h3 {
  margin: 0 0 0.35rem;
  padding: 0;
  border: 0;
  color: var(--llx-text);
}

.llx-start-panel > h2::after,
.llx-start-panel > h3::after {
  display: none;
}

.llx-start-panel > p {
  margin: 0 0 1rem;
  color: var(--llx-text-muted);
  font-size: 0.92rem;
}

.llx-route-cards,
.llx-start-panel .llx-route-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.llx-route-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: start;
  gap: 0.2rem 0.75rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--llx-border);
  border-top: 4px solid var(--llx-accent);
  border-radius: var(--llx-radius-small);
  background: var(--llx-surface-raised);
  color: var(--llx-text);
  box-shadow: var(--llx-shadow-small);
}

.llx-route-card:hover {
  border-color: var(--llx-accent);
  color: var(--llx-text);
  transform: translateY(-2px);
  box-shadow: var(--llx-shadow);
}

.llx-route-card-icon {
  display: inline-flex;
  grid-row: 1 / span 2;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--llx-accent-soft);
  color: var(--llx-accent);
}

.llx-route-card-icon svg,
.llx-route-card-icon [data-lucide] {
  width: 21px;
  height: 21px;
}

.llx-route-copy {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
}

.llx-route-card strong {
  align-self: end;
  color: var(--llx-text);
  font-size: 0.94rem;
  line-height: 1.3;
}

.llx-route-card span {
  color: var(--llx-text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.llx-route-card.is-active {
  border-color: var(--llx-accent);
  background: var(--llx-accent-soft);
}

.llx-route-card.is-complete::after,
.llx-route-card[data-complete="true"]::after {
  content: "";
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  width: 10px;
  height: 10px;
  border: 3px solid var(--llx-surface-raised);
  border-radius: 50%;
  background: var(--llx-success);
  box-shadow: 0 0 0 1px var(--llx-success);
}

/* ── Taxonomia canônica e retomada ─────────────────────────────── */
.llx-taxonomy-context {
  display: grid;
  gap: 0.65rem;
  margin: 1rem 0;
  padding: 0.85rem;
  border: 1px solid var(--llx-border);
  border-radius: var(--llx-radius);
  background: var(--llx-surface-soft);
}

.llx-taxonomy-title {
  color: var(--llx-text-muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.llx-taxonomy-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}

.llx-taxonomy-step {
  display: grid;
  min-width: 0;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem;
  border: 1px solid var(--llx-border);
  border-radius: var(--llx-radius-small);
  background: var(--llx-surface-raised);
  color: var(--llx-text);
  text-decoration: none;
}

.llx-taxonomy-step:hover,
.llx-taxonomy-step.is-active {
  border-color: var(--llx-accent);
  background: var(--llx-accent-soft);
  color: var(--llx-accent);
}

.llx-taxonomy-icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  background: var(--llx-accent-soft);
  color: var(--llx-accent);
}

.llx-taxonomy-icon svg,
.llx-taxonomy-icon [data-lucide] {
  width: 18px;
  height: 18px;
}

.llx-taxonomy-step > span:last-child {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}

.llx-taxonomy-step small,
.llx-taxonomy-step strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.llx-taxonomy-step small {
  color: var(--llx-text-muted);
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.llx-taxonomy-step strong {
  font-size: 0.78rem;
}

.llx-start-panel.is-journey-router .llx-route-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.llx-decision-brief {
  display: grid;
  gap: 0.7rem;
  margin: 0.9rem 0 1rem;
  padding: 0.8rem;
  border: 1px solid var(--llx-border);
  border-radius: var(--llx-radius-small);
  background: var(--llx-surface-soft);
}

.llx-decision-brief-header,
.llx-role-routes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.llx-decision-brief-header > strong,
.llx-role-routes-header > strong {
  color: var(--llx-text);
  font-size: 0.78rem;
  font-weight: 900;
}

.llx-decision-brief-header > span,
.llx-role-routes-header > span {
  color: var(--llx-text-muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.llx-decision-brief-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.llx-decision-brief-item {
  display: grid;
  min-width: 0;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
  padding: 0.65rem;
  border: 1px solid var(--llx-border);
  border-radius: 9px;
  background: var(--llx-surface-raised);
}

.llx-decision-brief-icon,
.llx-role-route-icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  background: var(--llx-accent-soft);
  color: var(--llx-accent);
}

.llx-decision-brief-icon svg,
.llx-decision-brief-icon [data-lucide],
.llx-role-route-icon svg,
.llx-role-route-icon [data-lucide] {
  width: 17px;
  height: 17px;
}

.llx-decision-brief-item > span:last-child,
.llx-role-route > span:last-child {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.llx-decision-brief-item strong,
.llx-role-route strong {
  color: var(--llx-text);
  font-size: 0.73rem;
  font-weight: 900;
}

.llx-decision-brief-item > span:last-child > span,
.llx-role-route > span:last-child > span {
  color: var(--llx-text-muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.llx-role-routes {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--llx-border);
}

.llx-role-routes-header {
  position: relative;
  padding: 0.3rem 2rem 0.3rem 0;
  list-style: none;
  cursor: pointer;
}

.llx-role-routes-header::-webkit-details-marker {
  display: none;
}

.llx-role-routes-header::after {
  position: absolute;
  top: 50%;
  right: 0.3rem;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--llx-accent);
  border-bottom: 2px solid var(--llx-accent);
  content: "";
  transform: translateY(-65%) rotate(45deg);
}

.llx-role-routes[open] > .llx-role-routes-header::after {
  transform: translateY(-35%) rotate(225deg);
}

.llx-role-route-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.llx-role-route {
  display: grid;
  min-width: 0;
  min-height: 78px;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
  padding: 0.65rem;
  border: 1px solid var(--llx-border);
  border-radius: 10px;
  background: var(--llx-surface-raised);
  color: var(--llx-text);
  text-decoration: none;
}

.llx-role-route:hover,
.llx-role-route:focus-visible {
  border-color: var(--llx-accent);
  background: var(--llx-accent-soft);
  box-shadow: var(--llx-shadow-small);
}

.llx-home-resource-library,
.llx-home-practice-studio {
  overflow: clip;
  margin: 0 0 1.1rem;
  border: 1px solid var(--llx-border);
  border-left: 5px solid var(--llx-accent-2);
  border-radius: var(--llx-radius);
  background: var(--llx-surface-raised);
  box-shadow: var(--llx-shadow-small);
}

.llx-home-resource-summary,
.llx-home-practice-summary {
  display: grid;
  min-height: 82px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  list-style: none;
  cursor: pointer;
}

.llx-home-resource-summary::-webkit-details-marker,
.llx-home-practice-summary::-webkit-details-marker {
  display: none;
}

.llx-home-resource-summary:hover,
.llx-home-resource-library[open] > .llx-home-resource-summary,
.llx-home-practice-summary:hover,
.llx-home-practice-studio[open] > .llx-home-practice-summary {
  background: var(--llx-accent-2-soft);
}

.llx-home-resource-icon {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 11px;
  background: var(--llx-accent-2-soft);
  color: var(--llx-accent-2);
}

.llx-home-resource-icon svg,
.llx-home-resource-icon [data-lucide] {
  width: 21px;
  height: 21px;
}

.llx-home-resource-summary > span:nth-child(2),
.llx-home-practice-summary > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
}

.llx-home-resource-summary strong,
.llx-home-practice-summary strong {
  color: var(--llx-text);
  font-size: 0.96rem;
}

.llx-home-resource-summary > span:nth-child(2) > span,
.llx-home-practice-summary > span:nth-child(2) > span {
  color: var(--llx-text-muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.llx-home-resource-count {
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  background: var(--llx-accent-2-soft);
  color: var(--llx-accent-2);
  font-size: 0.7rem;
  font-weight: 900;
  white-space: nowrap;
}

.llx-home-resource-content {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border-top: 1px solid var(--llx-border);
}

.llx-home-resource-content > section {
  margin: 0;
}

.llx-home-practice-studio {
  margin: 1.25rem 0 2rem;
  border-left-color: var(--llx-accent);
}

.llx-home-practice-content {
  display: grid;
  gap: 1rem;
  padding: 1rem 0 0;
  border-top: 1px solid var(--llx-border);
}

.llx-home-practice-content > * {
  width: 100%;
  margin-block: 0;
}

/* Reserva estática do cartão de retomada na home: segura o espaço até o
   script substituí-la, zerando o layout shift em rede lenta. As margens
   espelham as do painel; o min-height vem de medição real por breakpoint
   (painel renderiza entre 143px e 212px conforme variante e largura). */
.llx-resume-reserve {
  margin: -0.75rem 0 1.5rem;
  min-height: 153px;
}

@media (max-width: 920px) {
  .llx-resume-reserve {
    min-height: 201px;
  }
}

@media (max-width: 640px) {
  .llx-resume-reserve {
    min-height: 218px;
  }
}

.llx-resume-panel {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin: -0.75rem 0 1.5rem;
  padding: 1rem;
  border: 1px solid var(--llx-accent-line);
  border-radius: var(--llx-radius);
  background: linear-gradient(135deg, var(--llx-accent-soft), var(--llx-surface-raised));
}

.llx-resume-icon {
  display: inline-grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 13px;
  background: var(--llx-accent);
  color: var(--llx-on-accent);
}

.llx-resume-copy {
  display: grid;
  gap: 0.18rem;
}

.llx-resume-eyebrow {
  color: var(--llx-accent);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.llx-resume-copy h2 {
  margin: 0;
  color: var(--llx-text);
  font-size: 1rem;
}

.llx-resume-copy h2::after {
  display: none;
}

.llx-resume-copy p {
  margin: 0;
  color: var(--llx-text-muted);
  font-size: 0.8rem;
}

.llx-resume-progress {
  position: relative;
  display: block;
  width: min(360px, 100%);
  margin-top: 0.35rem;
  padding-top: 0.45rem;
  color: var(--llx-text-muted);
  font-size: 0.68rem;
  font-weight: 750;
}

.llx-resume-progress::before,
.llx-resume-progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  border-radius: 999px;
}

.llx-resume-progress::before {
  width: 100%;
  background: var(--llx-border);
}

.llx-resume-progress::after {
  width: 100%;
  background: var(--llx-accent);
  transform: scaleX(var(--llx-resume-scale, 0));
  transform-origin: left center;
  transition: transform var(--llx-motion-state) var(--llx-motion-ease-out);
}

.llx-resume-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.llx-resume-actions a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--llx-accent);
  border-radius: 999px;
  color: var(--llx-accent);
  font-size: 0.75rem;
  font-weight: 850;
  text-decoration: none;
}

.llx-resume-actions .llx-resume-primary {
  background: var(--llx-accent);
  color: var(--llx-on-accent);
}

.llx-resume-actions a:hover {
  box-shadow: var(--llx-shadow-small);
  transform: translateY(-1px);
}

/* ── Fluxo didático: Missão → Trilha → Aula → Prova ────────────── */
.llx-learning-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  margin: 1.5rem 0 2rem;
  padding: 1rem;
  border: 1px solid var(--llx-border);
  border-radius: var(--llx-radius);
  background: var(--llx-surface-soft);
}

.llx-learning-flow figcaption {
  grid-column: 1 / -1;
}

.llx-flow-node {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  min-height: 68px;
  padding: 0.7rem;
  border: 1px solid var(--llx-border);
  border-top: 3px solid var(--llx-accent);
  border-radius: var(--llx-radius-small);
  background: var(--llx-surface-raised);
  color: var(--llx-text);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.llx-flow-node > svg,
.llx-flow-node > [data-lucide],
.llx-flow-node .llx-module-icon {
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 10px;
  background: var(--llx-accent-soft);
  color: var(--llx-accent);
}

.llx-flow-arrow {
  position: relative;
  width: 100%;
  height: 2px;
  background: var(--llx-border-strong);
}

.llx-flow-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--llx-accent);
  border-right: 2px solid var(--llx-accent);
  transform: translateY(-50%) rotate(45deg);
}

/* ── Módulos recolhíveis ────────────────────────────────────────── */
.llx-module {
  position: relative;
  overflow: clip;
  margin: 0 0 1.1rem;
  border: 1px solid var(--llx-border);
  border-left: 5px solid var(--llx-accent);
  border-radius: var(--llx-radius);
  background: var(--llx-surface-raised);
  box-shadow: var(--llx-shadow-small);
  scroll-margin-top: calc(var(--llx-nav-offset) + var(--llx-learning-bar-height) + 1rem);
}

body.llx-learning-enhanced main [id],
body.llx-learning-enhanced .llx-visual-lab[id],
body.llx-learning-enhanced .llx-apply[id] {
  scroll-margin-top: calc(var(--llx-nav-offset) + var(--llx-learning-bar-height) + 1rem);
}

/* A camada de aprendizagem cria uma coluna numérica nas listas executáveis.
   O conteúdo real permanece inteiro na coluna de leitura, inclusive tabelas e diagramas. */
body.llx-learning-enhanced main ol.exec-steps > li {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 0.4rem 0.75rem;
  padding: 0.95rem 1.15rem;
}

body.llx-learning-enhanced main ol.exec-steps > li::before {
  content: none;
}

body.llx-learning-enhanced main ol.exec-steps > li > .llx-step-list-number {
  grid-column: 1;
  grid-row: 1;
}

body.llx-learning-enhanced main ol.exec-steps > li > :not(.llx-step-list-number) {
  grid-column: 2;
}

body.llx-learning-enhanced main ol.exec-steps > li > strong {
  align-self: center;
  grid-row: 1;
}

/* Material rico: e-book de tracking e analytics */
.llx-ebook-feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.45fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  overflow: hidden;
  padding: clamp(1rem, 2.6vw, 1.75rem);
  border: 1px solid var(--llx-border);
  border-radius: var(--llx-radius);
  background:
    radial-gradient(circle at 7% 4%, color-mix(in srgb, var(--llx-accent) 18%, transparent), transparent 32%),
    var(--llx-surface-raised);
  box-shadow: var(--llx-shadow);
}

.llx-ebook-feature::after {
  position: absolute;
  z-index: 0;
  right: -72px;
  bottom: -86px;
  width: 220px;
  height: 220px;
  border: 28px solid color-mix(in srgb, var(--llx-accent) 12%, transparent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.llx-ebook-art,
.llx-ebook-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.llx-ebook-art {
  align-self: center;
}

.llx-ebook-art img {
  display: block;
  width: min(100%, 330px);
  max-height: 420px;
  margin: 0 auto;
  border: 1px solid color-mix(in srgb, var(--llx-accent) 36%, var(--llx-border));
  border-radius: 12px;
  object-fit: cover;
  object-position: center top;
  box-shadow: 0 22px 46px rgba(15, 23, 42, 0.24);
}

.llx-ebook-art span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  color: var(--llx-text-muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-align: center;
}

.llx-ebook-art span i,
.llx-ebook-benefits i,
.llx-ebook-actions i {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.llx-ebook-copy {
  align-self: center;
}

.llx-ebook-copy h2 {
  max-width: 19ch;
  margin: 0.4rem 0 0.7rem;
  font-size: clamp(1.65rem, 3.4vw, 2.55rem);
  line-height: 1.04;
}

.llx-ebook-copy > p {
  color: var(--llx-text-muted);
}

.llx-ebook-benefits {
  display: grid;
  gap: 0.58rem;
  margin: 1rem 0 1.1rem;
  padding: 0;
  list-style: none;
}

.llx-ebook-benefits li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
  color: var(--llx-text);
  font-size: 0.84rem;
  line-height: 1.45;
}

.llx-ebook-benefits i {
  margin-top: 0.1rem;
  color: var(--llx-accent);
}

.llx-ebook-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.llx-ebook-download,
.llx-ebook-plans {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 0.48rem;
  padding: 0.72rem 0.95rem;
  border: 1px solid var(--llx-accent);
  border-radius: 9px;
  font-size: 0.79rem;
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 140ms ease, background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.llx-ebook-download {
  background: var(--llx-accent);
  color: var(--llx-on-accent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--llx-accent) 24%, transparent);
}

.llx-ebook-plans {
  background: var(--llx-surface);
  color: var(--llx-text);
}

.llx-ebook-download:hover,
.llx-ebook-download:focus-visible,
.llx-ebook-plans:hover,
.llx-ebook-plans:focus-visible {
  transform: translateY(-2px);
}

.llx-ebook-download:hover,
.llx-ebook-download:focus-visible {
  color: var(--llx-on-accent);
  filter: brightness(0.92);
}

.llx-ebook-plans:hover,
.llx-ebook-plans:focus-visible {
  background: var(--llx-accent-soft);
  color: var(--llx-text);
}

.llx-ebook-note {
  margin: 1rem 0 0;
  padding: 0.75rem 0.9rem;
  border-left: 4px solid var(--llx-accent);
  border-radius: 0 var(--llx-radius-small) var(--llx-radius-small) 0;
  background: var(--llx-surface-soft);
  color: var(--llx-text) !important;
  font-size: 0.75rem;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .llx-ebook-feature {
    grid-template-columns: minmax(0, 1fr);
  }

  .llx-ebook-art img {
    width: min(72vw, 300px);
    max-height: 390px;
  }

  .llx-ebook-copy h2 {
    max-width: none;
  }
}

@media (max-width: 520px) {
  .llx-ebook-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .llx-ebook-download,
  .llx-ebook-plans {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .llx-ebook-download,
  .llx-ebook-plans {
    transition: none;
  }

  .llx-ebook-download:hover,
  .llx-ebook-download:focus-visible,
  .llx-ebook-plans:hover,
  .llx-ebook-plans:focus-visible {
    transform: none;
  }
}

/* Biblioteca dos sete guias de bolso */
.llx-pocket-library {
  position: relative;
  overflow: clip;
  padding: clamp(1rem, 2.5vw, 1.6rem);
  border: 1px solid var(--llx-border);
  border-radius: var(--llx-radius);
  background: var(--llx-surface-soft);
}

.llx-pocket-library-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.6fr);
  align-items: end;
  gap: 1rem 2rem;
  margin-bottom: 1.25rem;
}

.llx-pocket-library-head h2 {
  margin-bottom: 0.5rem;
}

.llx-pocket-library-head > p,
.llx-pocket-card p,
.llx-pocket-step p {
  margin: 0;
}

.llx-pocket-guide-rule {
  padding: 0.85rem 1rem;
  border: 1px solid var(--llx-accent-line);
  border-left: 5px solid var(--llx-accent);
  border-radius: var(--llx-radius-small);
  background: var(--llx-surface-raised);
  color: var(--llx-text);
  font-size: 0.86rem;
  line-height: 1.5;
}

.llx-pocket-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}

.llx-pocket-step {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 0.65rem;
  padding: 0.8rem;
  border: 1px solid var(--llx-border);
  border-radius: var(--llx-radius-small);
  background: var(--llx-surface-raised);
}

.llx-pocket-step > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: var(--llx-accent);
  color: var(--llx-on-accent);
  font-weight: 900;
}

.llx-pocket-step strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--llx-text);
  font-size: 0.85rem;
}

.llx-pocket-step p {
  color: var(--llx-text-muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.llx-pocket-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.llx-pocket-card {
  --guide-accent: var(--llx-accent);
  position: relative;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 0.9rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--llx-border);
  border-top: 5px solid var(--guide-accent);
  border-radius: var(--llx-radius);
  background: var(--llx-surface-raised);
  box-shadow: var(--llx-shadow-small);
}

.llx-pocket-cover {
  position: relative;
  display: grid;
  min-height: 126px;
  align-content: space-between;
  padding: 0.65rem;
  border: 1px solid var(--llx-border);
  border-radius: 8px;
  background: var(--llx-surface);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
}

.llx-pocket-cover::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  border-radius: 7px 7px 0 0;
  background: var(--guide-accent);
}

.llx-pocket-cover i {
  width: 28px;
  height: 28px;
  margin-top: 0.45rem;
  color: var(--guide-accent);
}

.llx-pocket-cover span {
  color: var(--llx-text-muted);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.llx-pocket-cover strong {
  display: block;
  color: var(--llx-text);
  /* Tipografia fluida: extremos idênticos aos antigos degraus por breakpoint
     (1rem a 640px, 1.2rem no desktop), sem o salto no meio. */
  font-size: clamp(1rem, 0.64rem + 0.9vw, 1.2rem);
}

.llx-pocket-copy {
  min-width: 0;
}

.llx-pocket-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
  color: var(--guide-accent);
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.llx-pocket-copy h3 {
  margin: 0 0 0.25rem;
  color: var(--llx-text);
  font-size: 1rem;
  line-height: 1.25;
}

.llx-pocket-role {
  min-height: 2.6em;
  color: var(--llx-text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.llx-pocket-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.7rem 0;
}

.llx-pocket-stats span {
  padding: 0.28rem 0.48rem;
  border: 1px solid var(--llx-border);
  border-radius: 999px;
  background: var(--llx-surface-soft);
  color: var(--llx-text);
  font-size: 0.65rem;
  font-weight: 800;
}

.llx-pocket-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.llx-pocket-download,
.llx-pocket-lesson {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--guide-accent);
  border-radius: 8px;
  color: var(--guide-accent);
  font-size: 0.72rem;
  font-weight: 850;
  text-decoration: none;
}

.llx-pocket-download {
  background: var(--guide-accent);
  color: #ffffff;
}

.llx-pocket-download:hover,
.llx-pocket-download:focus-visible {
  filter: brightness(0.9);
  color: #ffffff;
}

.llx-pocket-lesson:hover,
.llx-pocket-lesson:focus-visible {
  background: var(--llx-accent-soft);
}

:root[data-theme="dark"] .llx-pocket-download {
  color: #ffffff;
}

@media (max-width: 900px) {
  .llx-pocket-library-head,
  .llx-pocket-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 641px) and (max-width: 820px) {
  .llx-progress-reserve,
  .llx-progress-shell {
    min-height: 108px;
  }

  .llx-progress-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .llx-progress-shell .llx-learning-actions {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .llx-progress-reserve {
    min-height: 52px;
  }

  .llx-pocket-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .llx-pocket-card {
    grid-template-columns: 72px minmax(0, 1fr);
    padding: 0.8rem;
  }

  .llx-pocket-cover {
    min-height: 112px;
    padding: 0.5rem;
  }

  /* O degrau de 1rem do título da capa saiu daqui: virou o mínimo do clamp()
     na regra base (tipografia fluida). */

  .llx-pocket-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .llx-pocket-download,
  .llx-pocket-lesson {
    width: 100%;
  }
}

.llx-module.is-active {
  border-color: var(--llx-accent);
  border-left-width: 5px;
  box-shadow: var(--llx-shadow);
}

.llx-module.is-complete,
.llx-module[data-complete="true"] {
  border-left-color: var(--llx-success);
}

.llx-module-head,
.llx-module-header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-width: 0;
  padding: 1rem 1.05rem;
  border-bottom: 1px solid transparent;
  background: var(--llx-surface-raised);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}

.llx-module:not(.is-open) .llx-module-header:hover,
.llx-module:not(.is-open) .llx-module-head:hover {
  background: var(--llx-accent-soft);
}

.llx-module.is-open .llx-module-head,
.llx-module.is-open .llx-module-header,
.llx-module[data-expanded="true"] .llx-module-head,
.llx-module[data-expanded="true"] .llx-module-header {
  border-bottom-color: var(--llx-border);
  background: var(--llx-accent-soft);
}

.llx-module-icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--llx-accent-line);
  border-radius: 13px;
  background: var(--llx-accent-soft);
  color: var(--llx-accent);
  flex: 0 0 auto;
}

.llx-module-icon svg,
.llx-module-icon [data-lucide] {
  width: 23px;
  height: 23px;
}

.llx-module.is-complete .llx-module-icon,
.llx-module[data-complete="true"] .llx-module-icon {
  border-color: var(--llx-success);
  background: var(--llx-success-soft);
  color: var(--llx-success);
}

.llx-module-copy {
  min-width: 0;
}

.llx-module-phase {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  width: fit-content;
  margin: 0 0 0.25rem;
  padding: 0.18rem 0.45rem;
  border: 1px solid var(--llx-accent-line);
  border-radius: 999px;
  background: var(--llx-surface-raised);
  color: var(--llx-accent);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.llx-module-phase svg,
.llx-module-phase [data-lucide] {
  width: 13px;
  height: 13px;
}

.llx-module-phase--validar {
  border-color: var(--llx-success);
  color: var(--llx-success);
}

.llx-module-phase--consultar {
  border-color: var(--llx-border-strong);
  color: var(--llx-text-muted);
}

.llx-module .llx-module-copy h2,
.llx-module .llx-module-copy h3,
.llx-module-title {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--llx-text);
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.3;
}

.llx-module-copy h2::after,
.llx-module-copy h3::after,
.llx-module-title::after {
  display: none;
}

.llx-module-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  margin: 0.25rem 0 0;
  color: var(--llx-text-muted);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.35;
}

.llx-module-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.llx-module .llx-module-summary {
  display: block;
  margin: 0.3rem 0 0;
  color: var(--llx-text-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

/* Com o módulo aberto, o resumo do cabeçalho repete palavra por palavra o
   primeiro parágrafo do corpo, logo abaixo. Ele existe para o leitor escanear
   o módulo FECHADO; aberto, vira eco. Esconder em vez de remover do DOM
   preserva o texto integral, inclusive quando o resumo foi truncado em 170
   caracteres. */
.llx-module.is-open > .llx-module-header .llx-module-summary {
  display: none;
}

.llx-module-toggle {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--llx-border-strong);
  border-radius: 50%;
  background: var(--llx-surface);
  color: var(--llx-accent);
  cursor: pointer;
}

.llx-module-toggle:hover {
  border-color: var(--llx-accent);
  background: var(--llx-accent-soft);
}

.llx-module-toggle svg,
.llx-module-toggle [data-lucide] {
  width: 20px;
  height: 20px;
  transition: transform 180ms ease;
}

.llx-module-toggle[aria-expanded="true"] svg,
.llx-module-toggle[aria-expanded="true"] [data-lucide] {
  transform: rotate(180deg);
}

.llx-module .llx-module-body {
  min-width: 0;
  padding: 1.25rem clamp(1rem, 3vw, 1.6rem) 1.5rem;
  background: var(--llx-surface-raised);
  color: var(--llx-text);
}

.llx-module-body[hidden] {
  display: none;
}

.llx-module .llx-module-body > p {
  max-width: 72ch;
  margin-inline: 0;
  color: var(--llx-text);
}

.llx-module-body > :first-child {
  margin-top: 0;
}

.llx-module-body > :last-child {
  margin-bottom: 0;
}

.llx-module-body img,
.llx-module-body svg,
.llx-module-body video,
.llx-module-body canvas,
.llx-module-body iframe {
  max-width: 100%;
}

.llx-module-body pre,
.llx-module-body code,
.llx-module-body td,
.llx-module-body th,
.llx-module-body a {
  overflow-wrap: anywhere;
}

/* ── Callouts e aprofundamento ──────────────────────────────────── */
.llx-callout {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--llx-accent-line);
  border-left: 4px solid var(--llx-accent);
  border-radius: var(--llx-radius-small);
  background: var(--llx-accent-soft);
  color: var(--llx-text);
}

.llx-callout--success {
  border-color: var(--llx-success);
  background: var(--llx-success-soft);
}

.llx-callout--warning {
  border-color: var(--llx-warning);
  background: var(--llx-warning-soft);
}

.llx-callout--danger {
  border-color: var(--llx-danger);
  background: var(--llx-danger-soft);
}

/* Callout de insight (04/08/2026): promove ao destaque uma frase que já está
   no corpo da página, no lugar onde ela está — não duplica o parágrafo como
   faria uma pull quote de revista. Escrito à mão no HTML pelas páginas, sem
   JavaScript e sem deslocamento de layout. Variante do callout da casa: herda
   borda, raio e o par --llx-text sobre --llx-accent-soft, que fica em 15,9:1
   no tema claro e 15,7:1 no escuro. Dispensa a coluna do ícone e sobe meio
   ponto no corpo do texto, o suficiente para a frase se destacar da prosa
   vizinha sem virar outro componente. Sem animação e sem transição. */
.llx-callout--insight {
  grid-template-columns: minmax(0, 1fr);
  padding: 1.1rem 1.25rem;
}

.llx-callout--insight p {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.55;
}

.llx-callout-icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--llx-surface-raised);
  color: var(--llx-accent);
}

.llx-callout p {
  margin: 0;
  text-align: justify;
}

.llx-deep-dive {
  margin: 1rem 0;
  border: 1px solid var(--llx-border);
  border-radius: var(--llx-radius-small);
  background: var(--llx-surface-soft);
}

.llx-deep-dive > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  list-style: none;
  color: var(--llx-accent);
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
}

.llx-deep-dive > summary::-webkit-details-marker {
  display: none;
}

.llx-deep-dive > summary::before {
  content: "+";
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--llx-accent);
  border-radius: 50%;
  color: var(--llx-accent);
  font-size: 1rem;
  line-height: 1;
}

.llx-deep-dive[open] > summary::before {
  content: "−";
}

.llx-deep-dive > :not(summary) {
  margin-inline: 1rem;
}

.llx-deep-dive > :last-child {
  margin-bottom: 1rem;
}

/* ── Paginação e conclusão ──────────────────────────────────────── */
.llx-page-pager,
.llx-pagination {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: stretch;
  margin: 2.25rem 0 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--llx-border);
}

.llx-page-pager a,
.llx-pagination a {
  display: grid;
  align-content: center;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--llx-border);
  border-radius: var(--llx-radius-small);
  background: var(--llx-surface-raised);
  color: var(--llx-text);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.llx-page-pager a:hover,
.llx-pagination a:hover {
  border-color: var(--llx-accent);
  background: var(--llx-accent-soft);
  color: var(--llx-accent);
}

.llx-page-pager a[data-direction="next"],
.llx-pagination a[data-direction="next"],
.llx-page-next {
  text-align: right;
}

.llx-page-pager small,
.llx-pagination small {
  color: var(--llx-text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.llx-complete-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 154px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--llx-accent-strong);
  border-radius: var(--llx-radius-small);
  background: var(--llx-accent-strong);
  color: var(--llx-on-accent-strong);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
}

.llx-complete-button:hover {
  filter: brightness(0.92);
}

.llx-complete-button.is-complete,
.llx-complete-button[aria-pressed="true"] {
  border-color: var(--llx-success);
  background: var(--llx-success);
  color: #ffffff;
}

:root[data-theme="dark"] .llx-complete-button.is-complete,
:root[data-theme="dark"] .llx-complete-button[aria-pressed="true"] {
  color: #052e16;
}

/* ── Ações móveis ───────────────────────────────────────────────── */
.llx-mobile-actions {
  display: none;
}

/* ── Desktop: rail lateral de aproximadamente 260 px ────────────── */
@media (min-width: 1080px) {
  .llx-page-index .llx-rail-card {
    grid-template-columns: minmax(0, 22rem) auto 1fr;
  }

  .llx-page-index .llx-rail-search-label {
    grid-column: auto;
  }

  /* 13/08/2026: a coluna lateral saiu. A casca fica em coluna única na largura
     natural da página, e o índice mora no painel recolhível do topo. */
  .llx-learning-shell {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.75rem, 3vw, 2.5rem);
  }

  .llx-study-rail {
    position: static;
    /* Coluna flexível em vez de bloco (04/08/2026): página de aula tem de 11 a
       21 seções e o cartão do rail passava da altura útil da janela, ficando
       com o pé abaixo da dobra e, por ser sticky, fora de alcance. Em coluna
       flexível o cartão encolhe até o max-height do rail e a lista de links,
       que já tinha rolagem própria, absorve a diferença: uma barra de rolagem
       só, dentro do índice, em vez de duas empilhadas. */
    display: block;
    width: 100%;
    max-height: none;
  }

  /* Em tela larga o índice aberto distribui as seções em colunas, o que evita
     a lista quilométrica que a coluna estreita impunha. */
  .llx-rail-nav {
    max-height: none;
    overflow: visible;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    align-items: start;
    gap: 0.9rem;
  }

  .llx-mobile-index {
    display: none;
  }

  .llx-desktop-index {
    display: block;
  }

  .llx-study-mode .llx-learning-shell {
    width: min(880px, calc(100vw - 3rem));
  }
}

@media (min-width: 641px) and (max-width: 1079px) {
  .llx-mobile-index {
    top: calc(var(--llx-nav-offset) + var(--llx-learning-bar-height) + 0.65rem);
    width: min(780px, calc(100vw - 2rem));
    margin: 1rem auto;
  }
}

/* ── Tablet ─────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .llx-route-cards,
  .llx-start-panel .llx-route-cards {
    grid-template-columns: 1fr;
  }

  .llx-start-panel.is-journey-router .llx-route-cards,
  .llx-taxonomy-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .llx-role-route-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .llx-resume-panel {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .llx-resume-actions {
    grid-column: 2;
  }

  .llx-learning-flow {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .llx-flow-arrow {
    display: none;
  }
}

/* ── Mobile, inclusive 320 px ───────────────────────────────────── */
@media (max-width: 640px) {
  body:has(.llx-mobile-actions) {
    /* A barra fixa cresce com o safe-area (recorte inferior do aparelho);
       a reserva de rolagem acompanha para o fim do conteúdo não ficar coberto. */
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }

  .llx-progress-shell {
    top: 60px;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-height: 52px;
    padding: 0.35rem 0.8rem 0.45rem;
  }

  .llx-progress-copy {
    font-size: 0.74rem;
  }

  .llx-progress-shell .llx-learning-actions,
  .llx-learning-track,
  .llx-global-progress {
    display: none !important;
  }

  .llx-learning-context {
    gap: 0.5rem;
  }

  .llx-learning-context > svg,
  .llx-learning-context > [data-lucide] {
    width: 20px;
    height: 20px;
  }

  .llx-learning-context-text {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.3rem 0.5rem;
  }

  .llx-learning-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .llx-reading-label {
    grid-column: 2;
    min-height: 24px;
    padding: 0.15rem 0.42rem;
    font-size: 0.68rem;
  }

  .llx-learning-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  .llx-mobile-index {
    position: fixed;
    z-index: 1320;
    inset: auto 0.75rem calc(72px + env(safe-area-inset-bottom));
    display: none;
    max-height: min(70vh, 620px);
    max-height: min(70dvh, 620px);
    margin: 0;
    overflow: auto;
    box-shadow: 0 18px 55px rgba(15, 23, 42, 0.32);
  }

  .llx-mobile-index[open] {
    display: block;
  }

  .llx-mobile-index .llx-rail-nav {
    max-height: calc(min(70vh, 620px) - 104px);
    max-height: calc(min(70dvh, 620px) - 104px);
  }

  .llx-glossary-tools {
    grid-template-columns: minmax(0, 1fr);
    padding: 0.75rem;
  }

  .llx-start-panel {
    padding: 1rem;
  }

  .llx-start-panel.is-journey-router .llx-route-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .llx-decision-brief-header,
  .llx-role-routes-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.2rem;
  }

  .llx-decision-brief-grid,
  .llx-role-route-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .llx-role-route {
    min-height: 70px;
  }

  .llx-home-resource-summary,
  .llx-home-practice-summary {
    min-height: 76px;
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 0.75rem;
  }

  .llx-home-resource-icon {
    width: 38px;
    height: 38px;
  }

  .llx-home-resource-count {
    grid-column: 2;
    justify-self: start;
  }

  .llx-home-resource-content {
    padding: 0.75rem;
  }

  .llx-home-practice-content {
    padding-top: 0.75rem;
  }

  .llx-taxonomy-context {
    padding: 0.7rem;
  }

  .llx-taxonomy-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .llx-taxonomy-step {
    grid-template-columns: 30px minmax(0, 1fr);
    padding: 0.5rem;
  }

  .llx-taxonomy-icon {
    width: 30px;
    height: 30px;
  }

  .llx-resume-panel {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.85rem;
  }

  .llx-resume-icon {
    width: 40px;
    height: 40px;
  }

  .llx-resume-actions {
    grid-column: 1 / -1;
    align-items: stretch;
  }

  .llx-resume-actions a {
    flex: 1;
  }

  .llx-answer-shell .answer-capsule,
  .llx-answer-shell > p {
    padding: 1rem 1rem 0.65rem;
    font-size: 0.94rem;
  }

  .llx-answer-shell.is-collapsible:not(.is-expanded):not([data-expanded="true"]) .answer-capsule,
  .llx-answer-shell.is-collapsible:not(.is-expanded):not([data-expanded="true"]) > p {
    -webkit-line-clamp: 5;
  }

  .llx-route-card {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 0.85rem;
  }

  .llx-route-card-icon {
    width: 38px;
    height: 38px;
  }

  .llx-learning-flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem;
    overflow: visible;
    padding: 0.85rem;
  }

  .llx-flow-node {
    grid-template-columns: 38px minmax(0, 1fr);
    min-height: 60px;
  }

  .llx-flow-node > svg,
  .llx-flow-node > [data-lucide],
  .llx-flow-node .llx-module-icon {
    width: 38px;
    height: 38px;
  }

  .llx-flow-arrow {
    display: block;
    width: 2px;
    height: 24px;
    margin: 0 auto;
  }

  .llx-flow-arrow::after {
    top: auto;
    right: 50%;
    bottom: 0;
    transform: translateX(50%) rotate(135deg);
  }

  .llx-module {
    border-left-width: 4px;
    border-radius: 12px;
  }

  .llx-module-head,
  .llx-module-header {
    grid-template-columns: 40px minmax(0, 1fr) 44px;
    gap: 0.65rem;
    padding: 0.85rem;
  }

  .llx-module-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }

  .llx-module-icon svg,
  .llx-module-icon [data-lucide] {
    width: 20px;
    height: 20px;
  }

  .llx-module-summary {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .llx-module-body {
    padding: 1rem 0.9rem 1.25rem;
  }

  .llx-page-pager,
  .llx-pagination {
    grid-template-columns: minmax(0, 1fr);
  }

  .llx-page-pager a[data-direction="next"],
  .llx-pagination a[data-direction="next"],
  .llx-page-next {
    text-align: left;
  }

  .llx-complete-button {
    width: 100%;
  }

  .llx-mobile-actions {
    position: fixed;
    z-index: 1250;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.45rem max(0.55rem, env(safe-area-inset-right)) calc(0.45rem + env(safe-area-inset-bottom)) max(0.55rem, env(safe-area-inset-left));
    border-top: 1px solid var(--llx-border);
    background: var(--llx-surface-raised);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.14);
  }

  .llx-mobile-actions button,
  .llx-mobile-actions a {
    display: inline-flex;
    min-width: 0;
    min-height: 52px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.18rem;
    padding: 0.3rem 0.2rem;
    border: 1px solid var(--llx-border);
    border-radius: 9px;
    background: var(--llx-surface);
    color: var(--llx-text);
    font: inherit;
    font-size: 0.72rem; /* 10,6px era ilegível em botão tocável */
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    overflow-wrap: anywhere;
    cursor: pointer;
  }

  .llx-mobile-actions span {
    white-space: nowrap;
  }

  .llx-mobile-actions button:hover,
  .llx-mobile-actions a:hover {
    border-color: var(--llx-accent);
    background: var(--llx-accent-soft);
    color: var(--llx-accent);
  }
}

@media (max-width: 360px) {
  .llx-module-head,
  .llx-module-header {
    grid-template-columns: 36px minmax(0, 1fr) 44px;
    gap: 0.5rem;
    padding-inline: 0.65rem;
  }

  .llx-module-icon {
    width: 36px;
    height: 36px;
  }

  .llx-module-meta {
    gap: 0.2rem 0.5rem;
    font-size: 0.68rem;
  }

  .llx-mobile-actions button,
  .llx-mobile-actions a {
    font-size: 0.72rem; /* 10,6px era ilegível em botão tocável */
  }
}

/* ── Leitura, modo estudo, busca global e diagramas ─────────────── */
.leadlovers-isolated p,
body[data-ll-page] p {
  text-align: justify !important;
  text-align-last: auto;
  hyphens: auto;
}

.llx-learning-enhanced .ll-indice {
  display: none;
}

.llx-learning-actions,
.llx-study-nav,
.llx-command-header,
.llx-command-result,
.llx-visual-eyebrow {
  display: flex;
  align-items: center;
}

.llx-learning-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
}

.llx-motion-toggle,
.llx-study-launch {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--llx-accent);
  border-radius: 9px;
  background: var(--llx-accent-soft);
  color: var(--llx-accent);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.llx-motion-toggle:hover,
.llx-motion-toggle:focus-visible,
.llx-study-launch:hover {
  background: var(--llx-accent);
  color: var(--llx-on-accent);
}

.llx-motion-toggle.is-reduced {
  border-color: var(--llx-border-strong);
  background: var(--llx-surface-soft);
  color: var(--llx-text-muted);
}

.llx-motion-toggle:disabled {
  opacity: 0.72;
  cursor: default;
}

.llx-skip-target:focus-visible {
  outline: 3px solid var(--llx-accent);
  outline-offset: 6px;
}

.llx-visual-lab {
  max-width: 1180px;
  margin: 1.5rem auto 2rem;
  padding: clamp(1rem, 2.5vw, 2rem);
  border: 1px solid var(--llx-border);
  border-top: 5px solid var(--llx-accent);
  border-radius: var(--llx-radius);
  background: var(--llx-surface-raised);
  color: var(--llx-text);
  box-shadow: var(--llx-shadow);
}

.llx-visual-lab h2 {
  margin: 0.45rem 0 0.55rem;
}

.llx-visual-intro {
  max-width: 72ch;
  color: var(--llx-text-muted);
}

.llx-visual-eyebrow {
  gap: 0.4rem;
  color: var(--llx-accent);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.llx-timeline {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.5fr);
  gap: 1rem;
  margin-top: 1.25rem;
}

.llx-timeline-tabs {
  display: grid;
  gap: 0.55rem;
}

.llx-timeline-tab {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  min-height: 58px;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem;
  border: 1px solid var(--llx-border);
  border-radius: 10px;
  background: var(--llx-surface);
  color: var(--llx-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.llx-timeline-tab span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--llx-surface-soft);
  color: var(--llx-text-muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.llx-timeline-tab.is-active {
  border-color: var(--llx-accent);
  background: var(--llx-accent-soft);
  color: var(--llx-accent);
  box-shadow: inset 4px 0 0 var(--llx-accent);
}

.llx-timeline-tab.is-active span {
  background: var(--llx-accent);
  color: var(--llx-on-accent);
}

.llx-timeline-panel,
.llx-funnel-detail,
.llx-decision-result {
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--llx-border);
  border-radius: 12px;
  background: var(--llx-surface-soft);
}

.llx-timeline-panel h3,
.llx-funnel-detail h3,
.llx-decision-result h3 {
  margin-top: 0;
  color: var(--llx-accent);
}

.llx-visual-proof,
.llx-visual-gate,
.llx-benchmark-insight {
  padding: 0.75rem 0.9rem;
  border-left: 4px solid var(--llx-success);
  border-radius: 0 8px 8px 0;
  background: var(--llx-success-soft);
}

.llx-visual-gate {
  border-left-color: var(--llx-warning);
  background: var(--llx-warning-soft);
}

.llx-benchmark-wrap {
  margin-top: 1.25rem;
  overflow-x: auto;
}

.llx-benchmark-table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
}

.llx-benchmark-table th,
.llx-benchmark-table td {
  padding: 0.7rem;
  border-right: 1px solid var(--llx-border);
  border-bottom: 1px solid var(--llx-border);
  text-align: center;
}

.llx-benchmark-table thead th {
  border-top: 1px solid var(--llx-border);
  background: var(--llx-surface-soft);
  color: var(--llx-text);
  font-size: 0.78rem;
}

.llx-benchmark-table tr > :first-child {
  border-left: 1px solid var(--llx-border);
  text-align: left;
}

.llx-benchmark-table tr.is-selected > * {
  background: var(--llx-accent-soft);
}

.llx-benchmark-select {
  border: 0;
  background: transparent;
  color: var(--llx-text);
  font: inherit;
  font-weight: 800;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  cursor: pointer;
}

.llx-benchmark-select:hover,
.llx-benchmark-select:focus-visible {
  color: var(--llx-accent);
  text-decoration-color: currentColor;
}

.llx-matrix-status {
  display: inline-flex;
  min-width: 68px;
  justify-content: center;
  padding: 0.28rem 0.45rem;
  border: 1px solid var(--llx-border);
  border-radius: 999px;
  background: var(--llx-surface);
  color: var(--llx-text-muted);
  font-size: 0.7rem;
  font-weight: 900;
}

.llx-matrix-status.is-forte {
  border-color: var(--llx-success);
  background: var(--llx-success-soft);
  color: var(--llx-success);
}

.llx-matrix-status.is-parcial {
  border-color: var(--llx-warning);
  background: var(--llx-warning-soft);
  color: var(--llx-warning);
}

.llx-matrix-status.is-ausente {
  border-color: var(--llx-danger);
  background: var(--llx-danger-soft);
  color: var(--llx-danger);
}

.llx-funnel {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: 0.45rem;
  margin: 1.25rem 0 1rem;
}

.llx-funnel-stage {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem;
  border: 1px solid var(--llx-border);
  background: var(--llx-surface);
  color: var(--llx-text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  cursor: pointer;
}

.llx-funnel-stage:nth-child(1) { clip-path: polygon(0 8%, 100% 0, 92% 100%, 8% 92%); }
.llx-funnel-stage:nth-child(2) { clip-path: polygon(8% 0, 100% 8%, 90% 92%, 0 100%); }
.llx-funnel-stage:nth-child(3) { clip-path: polygon(10% 8%, 90% 0, 100% 100%, 0 92%); }
.llx-funnel-stage:nth-child(4) { clip-path: polygon(0 0, 92% 8%, 100% 92%, 8% 100%); }
.llx-funnel-stage:nth-child(5) { clip-path: polygon(8% 8%, 100% 0, 92% 100%, 0 92%); }

.llx-funnel-stage.is-active {
  border-color: var(--llx-accent);
  background: var(--llx-accent);
  color: var(--llx-on-accent);
}

.llx-decision-tree {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0 1rem;
}

.llx-decision-tree label {
  display: grid;
  gap: 0.45rem;
  padding: 0.8rem;
  border: 1px solid var(--llx-border);
  border-radius: 10px;
  background: var(--llx-surface-soft);
  color: var(--llx-text);
  font-size: 0.78rem;
  font-weight: 850;
}

.llx-decision-tree select {
  min-height: 44px;
  padding: 0.55rem;
  border: 1px solid var(--llx-border-strong);
  border-radius: 7px;
  background: var(--llx-surface);
  color: var(--llx-text);
  font: inherit;
}

.llx-diagram-fallback {
  margin-top: 1rem;
  border-top: 1px solid var(--llx-border);
  padding-top: 0.8rem;
}

.llx-diagram-fallback summary {
  color: var(--llx-accent);
  font-weight: 800;
  cursor: pointer;
}

.llx-diagram-fallback table {
  width: 100%;
  min-width: 560px;
  margin-top: 0.75rem;
  border-collapse: collapse;
}

.llx-diagram-fallback th,
.llx-diagram-fallback td {
  padding: 0.6rem;
  border: 1px solid var(--llx-border);
  text-align: left;
  vertical-align: top;
}

.llx-microquiz.llx-module {
  border-color: var(--llx-accent);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--llx-accent) 14%, transparent);
}

.llx-quiz-eyebrow {
  display: inline-flex;
  margin: 0.85rem 1rem 0;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--llx-accent-line);
  border-radius: 999px;
  background: var(--llx-accent-soft);
  color: var(--llx-accent);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.llx-quiz-intro {
  color: var(--llx-text-muted);
}

.llx-quiz-status {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 1rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--llx-border);
  border-radius: 999px;
  background: var(--llx-surface-soft);
  color: var(--llx-text-muted);
  font-size: 0.7rem;
  font-weight: 850;
}

.llx-quiz-status.is-complete {
  border-color: var(--llx-success);
  background: var(--llx-success-soft);
  color: var(--llx-success);
}

.llx-quiz-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.llx-quiz-fieldset legend {
  width: 100%;
  margin-bottom: 0.8rem;
  color: var(--llx-text);
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 850;
  line-height: 1.45;
}

.llx-quiz-options {
  display: grid;
  gap: 0.65rem;
}

.llx-quiz-option {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  min-height: 58px;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--llx-border);
  border-radius: 10px;
  background: var(--llx-surface);
  color: var(--llx-text);
  cursor: pointer;
}

.llx-quiz-option:hover,
.llx-quiz-option:focus-within {
  border-color: var(--llx-accent);
  background: var(--llx-accent-soft);
}

.llx-quiz-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.llx-quiz-marker {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--llx-border);
  border-radius: 50%;
  background: var(--llx-surface-soft);
  color: var(--llx-text-muted);
  font-size: 0.74rem;
  font-weight: 900;
}

.llx-quiz-option.is-selected {
  border-width: 2px;
}

.llx-quiz-option.is-correct {
  border-color: var(--llx-success);
  background: var(--llx-success-soft);
}

.llx-quiz-option.is-correct .llx-quiz-marker {
  border-color: var(--llx-success);
  background: var(--llx-success);
  color: var(--llx-surface);
}

.llx-quiz-option.is-incorrect {
  border-color: var(--llx-danger);
  background: var(--llx-danger-soft);
}

.llx-quiz-option.is-incorrect .llx-quiz-marker {
  border-color: var(--llx-danger);
  background: var(--llx-danger);
  color: var(--llx-surface);
}

.llx-quiz-feedback {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0.85rem 0 0;
  padding: 0.75rem 0.85rem;
  border-left: 4px solid var(--llx-border-strong);
  border-radius: 0 9px 9px 0;
  background: var(--llx-surface-soft);
}

.llx-quiz-feedback[hidden] {
  display: none !important;
}

.llx-quiz-feedback.is-correct {
  border-left-color: var(--llx-success);
  background: var(--llx-success-soft);
  color: var(--llx-success);
}

.llx-quiz-feedback.is-incorrect {
  border-left-color: var(--llx-danger);
  background: var(--llx-danger-soft);
  color: var(--llx-danger);
}

.llx-quiz-feedback .llx-icon {
  flex: 0 0 auto;
  margin-top: 0.08rem;
}

.llx-quiz-retry {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--llx-accent);
  border-radius: 8px;
  background: var(--llx-surface);
  color: var(--llx-accent);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 850;
  cursor: pointer;
}

.llx-quiz-retry[hidden] {
  display: none !important;
}

.llx-quiz-retry:hover {
  background: var(--llx-accent);
  color: var(--llx-on-accent);
}

.llx-prereq-heading {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--llx-border);
}

.llx-prereq-heading h3 {
  margin: 0.45rem 0 0.55rem;
  color: var(--llx-text);
  font-size: clamp(1.35rem, 3vw, 1.85rem);
}

.llx-prereq-heading p {
  max-width: 76ch;
  color: var(--llx-text-muted);
}

.llx-prereq-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.llx-prereq-canvas {
  position: relative;
  display: grid;
  gap: 1.4rem;
  min-width: 0;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid var(--llx-border);
  border-radius: 12px;
  background: var(--llx-surface-soft);
}

.llx-prereq-lines {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.llx-prereq-lines path[data-from] {
  fill: none;
  stroke: var(--llx-border-strong);
  stroke-width: 1.6;
  opacity: 0.52;
}

.llx-prereq-lines path[data-from].is-active {
  stroke: var(--llx-accent);
  stroke-width: 2.6;
  opacity: 1;
}

.llx-prereq-lines marker path {
  fill: var(--llx-border-strong);
}

.llx-prereq-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

.llx-prereq-stage-label {
  color: var(--llx-text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.llx-prereq-stage-nodes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.llx-prereq-node {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  min-height: 66px;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem;
  border: 2px solid var(--llx-border);
  border-radius: 10px;
  background: var(--llx-surface-raised);
  color: var(--llx-text);
  font: inherit;
  text-align: left;
  box-shadow: var(--llx-shadow-small);
  cursor: pointer;
}

.llx-prereq-node > .llx-icon {
  width: 24px;
  height: 24px;
  color: var(--llx-accent);
}

.llx-prereq-node > span {
  display: grid;
  gap: 0.14rem;
}

.llx-prereq-node small {
  color: var(--llx-text-muted);
  font-size: 0.64rem;
  font-weight: 700;
}

.llx-prereq-node.is-selected {
  border-color: var(--llx-accent);
  background: var(--llx-accent);
  color: var(--llx-on-accent);
}

.llx-prereq-node.is-selected > .llx-icon,
.llx-prereq-node.is-selected small {
  color: var(--llx-on-accent);
}

.llx-prereq-node.is-prerequisite {
  border-color: var(--llx-warning);
  background: var(--llx-warning-soft);
}

.llx-prereq-node.is-unlocked {
  border-color: var(--llx-success);
  background: var(--llx-success-soft);
}

.llx-prereq-node.is-dimmed {
  opacity: 0.52;
}

.llx-prereq-node:hover,
.llx-prereq-node:focus-visible {
  opacity: 1;
  outline: 3px solid var(--llx-accent);
  outline-offset: 2px;
}

.llx-prereq-detail {
  align-self: start;
  padding: 1rem;
  border: 1px solid var(--llx-border);
  border-top: 5px solid var(--llx-accent);
  border-radius: 12px;
  background: var(--llx-surface-soft);
}

.llx-prereq-detail h4 {
  margin: 0 0 0.7rem;
  color: var(--llx-accent);
  font-size: 1.15rem;
}

.llx-prereq-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--llx-border);
  border-radius: 9px;
  background: var(--llx-surface);
}

.llx-prereq-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--llx-text-muted);
  font-size: 0.68rem;
  font-weight: 750;
}

.llx-prereq-swatch {
  width: 12px;
  height: 12px;
  border: 2px solid var(--llx-border);
  border-radius: 3px;
  background: var(--llx-surface);
}

.llx-prereq-swatch.is-prerequisite {
  border-color: var(--llx-warning);
  background: var(--llx-warning-soft);
}

.llx-prereq-swatch.is-selected {
  border-color: var(--llx-accent);
  background: var(--llx-accent);
}

.llx-prereq-swatch.is-unlocked {
  border-color: var(--llx-success);
  background: var(--llx-success-soft);
}

.llx-study-controls {
  position: sticky;
  top: calc(var(--llx-nav-offset) + var(--llx-learning-bar-height) + 0.5rem);
  z-index: 1020;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.8rem;
  border: 1px solid var(--llx-accent);
  border-radius: 12px;
  background: var(--llx-surface-raised);
  box-shadow: var(--llx-shadow);
}

.llx-study-controls[hidden] {
  display: none !important;
}

.llx-study-copy {
  display: grid;
  gap: 0.2rem;
}

.llx-study-status {
  margin: 0;
  color: var(--llx-accent);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.llx-study-current {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.llx-study-progress {
  position: relative;
  display: block;
  height: 5px;
  margin-top: 0.35rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--llx-border);
}

.llx-study-progress::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--llx-accent);
  transform: scaleX(var(--llx-study-scale, 0));
  transform-origin: left center;
  transition: transform var(--llx-motion-state) var(--llx-motion-ease-out);
}

.llx-study-nav {
  gap: 0.4rem;
}

.llx-study-nav button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--llx-border);
  border-radius: 8px;
  background: var(--llx-surface);
  color: var(--llx-text);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}

.llx-study-nav button:hover:not(:disabled) {
  border-color: var(--llx-accent);
  color: var(--llx-accent);
}

.llx-study-nav button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.llx-study-mode .llx-learning-shell {
  grid-template-columns: minmax(0, 1fr);
}

.llx-study-mode .llx-study-rail,
.llx-study-mode .llx-page-index,
.llx-study-mode .llx-mobile-index {
  display: none !important;
}

.llx-command-palette {
  position: fixed;
  inset: 0;
  width: min(720px, calc(100vw - 2rem));
  max-height: min(78vh, 760px);
  max-height: min(78dvh, 760px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--llx-border-strong);
  border-radius: 14px;
  background: var(--llx-surface-raised);
  color: var(--llx-text);
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.35);
}

.llx-command-palette::backdrop {
  background: rgba(15, 23, 42, 0.68);
}

.llx-command-header {
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1rem 0.7rem;
  border-bottom: 1px solid var(--llx-border);
}

.llx-command-header h2,
.llx-command-header p {
  margin: 0;
}

.llx-command-header p {
  color: var(--llx-text-muted);
  font-size: 0.78rem;
}

.llx-command-close {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid var(--llx-border);
  border-radius: 8px;
  background: var(--llx-surface);
  color: var(--llx-text);
  cursor: pointer;
}

.llx-command-search {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  margin: 0.8rem 1rem 0;
  padding: 0.65rem 0.75rem;
  border: 2px solid var(--llx-accent);
  border-radius: 10px;
  background: var(--llx-surface);
}

.llx-command-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--llx-text);
  font: inherit;
  font-size: 1rem;
}

.llx-command-count {
  margin: 0;
  padding: 0.55rem 1rem 0.35rem;
  color: var(--llx-text-muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.llx-command-results {
  max-height: min(54vh, 510px);
  margin: 0;
  padding: 0 0.65rem 0.75rem;
  overflow-y: auto;
  list-style: none;
}

.llx-command-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 22px;
  gap: 0.65rem;
  min-height: 62px;
  padding: 0.65rem;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--llx-text);
  text-decoration: none;
}

.llx-command-result:hover,
.llx-command-result:focus-visible {
  border-color: var(--llx-accent);
  background: var(--llx-accent-soft);
}

.llx-command-badge {
  align-self: center;
  padding: 0.24rem 0.38rem;
  border: 1px solid var(--llx-border);
  border-radius: 999px;
  color: var(--llx-accent);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.llx-command-result-copy {
  display: grid;
  gap: 0.12rem;
}

.llx-command-result-copy span {
  color: var(--llx-text-muted);
  font-size: 0.76rem;
}

@media (max-width: 780px) {
  .llx-timeline,
  .llx-study-controls,
  .llx-prereq-map {
    grid-template-columns: minmax(0, 1fr);
  }

  .llx-timeline-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .llx-funnel {
    grid-template-columns: minmax(0, 1fr);
  }

  .llx-funnel-stage {
    min-height: 54px;
    clip-path: none !important;
    border-radius: 9px;
  }

  .llx-decision-tree {
    grid-template-columns: minmax(0, 1fr);
  }

  .llx-prereq-stage {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .llx-study-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .llx-study-nav button {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .llx-learning-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .llx-study-launch,
  .llx-learning-actions .llx-complete-button {
    width: 100%;
    justify-content: center;
  }

  .llx-learning-actions .llx-complete-button {
    min-width: 0;
    padding-inline: 0.65rem;
  }

  .llx-timeline-tabs {
    grid-template-columns: minmax(0, 1fr);
  }

  .llx-prereq-canvas {
    padding: 0.75rem;
  }

  .llx-prereq-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem;
  }

  .llx-prereq-stage-nodes {
    grid-template-columns: minmax(0, 1fr);
  }

  .llx-prereq-lines {
    display: none;
  }

  .llx-prereq-node.is-dimmed {
    opacity: 0.68;
  }

  .llx-quiz-option {
    grid-template-columns: 34px minmax(0, 1fr);
    padding-inline: 0.65rem;
  }

  .llx-command-result {
    grid-template-columns: minmax(0, 1fr) 20px;
  }

  .llx-command-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .llx-study-nav button {
    padding-inline: 0.35rem;
    font-size: 0.7rem;
  }
}

/* ── Aplicar esta aula: ideia, caso, sequência e prompt ─────────── */
/* Bloco único (28/07/2026). Substitui a "Aula em modo visual" (três abas que
   escondiam dois terços do texto) e o "Laboratório de prompts" (cinco cartões
   que repetiam, fora do prompt, o texto que já está dentro dele). Quatro partes
   numeradas, lineares, sem nada dobrado além do próprio prompt. */
.llx-apply {
  position: relative;
  margin: 1.75rem 0;
  padding: clamp(1rem, 2.6vw, 1.65rem);
  border: 1px solid var(--llx-border);
  border-left: 5px solid var(--llx-accent);
  border-radius: var(--llx-radius);
  background: var(--llx-surface-raised);
  color: var(--llx-text);
  box-shadow: var(--llx-shadow-soft);
}

.llx-apply-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  flex-wrap: wrap;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--llx-border);
}

.llx-apply-header > div {
  min-width: 0;
}

.llx-apply-header h2 {
  margin: 0.3rem 0 0;
  color: var(--llx-text);
  font-size: clamp(1.1rem, 2.2vw, 1.32rem);
  font-weight: 800;
  line-height: 1.28;
}

/* Frentes do plano: a ponte entre o pilar da aula e o benchmark de mercado.
   Era uma linha de texto colada por ponto e vírgula; agora são destinos. */
.llx-apply-fronts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-width: 34rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.llx-apply-fronts li {
  margin: 0;
}

.llx-apply-front {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.62rem;
  border: 1px solid var(--llx-accent-line);
  border-radius: 999px;
  background: var(--llx-accent-soft);
  color: var(--llx-accent);
  font-size: 0.71rem;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}

.llx-apply-front:hover,
.llx-apply-front:focus-visible {
  border-color: var(--llx-accent);
  background: var(--llx-accent);
  color: var(--llx-on-accent);
}

.llx-apply-front .llx-icon {
  width: 0.85rem;
  height: 0.85rem;
  flex: 0 0 auto;
  color: currentColor;
}

.llx-apply-parts {
  display: grid;
  gap: 1.35rem;
  margin-top: 1.2rem;
}

.llx-apply-part {
  min-width: 0;
}

.llx-apply-part + .llx-apply-part {
  padding-top: 1.35rem;
  border-top: 1px dashed var(--llx-border);
}

.llx-apply-part > h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  color: var(--llx-text);
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.llx-apply-number {
  display: inline-flex;
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--llx-accent);
  color: var(--llx-on-accent);
  font-size: 0.74rem;
  font-weight: 850;
}

.llx-apply-lead {
  max-width: 68ch;
  margin: 0.5rem 0 0;
  color: var(--llx-text);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.55;
}

.llx-apply-hint {
  max-width: 68ch;
  margin: 0.45rem 0 0;
  color: var(--llx-text-muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

/* Cartões rotulados — a mesma peça serve à metáfora e ao caso, para que as
   duas partes não pareçam componentes diferentes. A grade é sempre de duas
   colunas: o portal justifica todo parágrafo com !important e quatro colunas
   estreitas abririam rios no texto. */
.llx-apply-card {
  min-width: 0;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--llx-border);
  border-radius: 11px;
  background: var(--llx-surface-soft);
  color: var(--llx-text);
}

.llx-apply-card small {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--llx-accent);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.llx-apply-card small .llx-icon {
  width: 0.92rem;
  height: 0.92rem;
  flex: 0 0 auto;
}

.llx-apply-card p {
  max-width: none;
  margin: 0.45rem 0 0;
  color: inherit;
  font-size: 0.86rem;
  line-height: 1.62;
}

.llx-apply-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 0.85rem;
}

.llx-apply-case {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 0.85rem;
}

.llx-apply-rule {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  max-width: 68ch;
  margin: 0.8rem 0 0;
  padding: 0.7rem 0.85rem;
  border-left: 3px solid var(--llx-accent);
  border-radius: 0 9px 9px 0;
  background: var(--llx-accent-soft);
  color: var(--llx-text);
  font-size: 0.86rem;
  line-height: 1.6;
}

.llx-apply-rule .llx-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  margin-top: 0.15rem;
  color: var(--llx-accent);
}

.llx-apply-rule strong {
  color: var(--llx-accent);
}

/* Sequência: lista estática. O stepper animado mostrava um passo por vez e
   sumia da busca do navegador e da impressão. */
.llx-apply-steps {
  display: grid;
  gap: 0.6rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: llx-apply-step;
}

.llx-apply-steps > li {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0.8rem 0.95rem 0.8rem 3rem;
  border: 1px solid var(--llx-border);
  border-radius: 11px;
  background: var(--llx-surface-soft);
  counter-increment: llx-apply-step;
}

.llx-apply-steps > li::before {
  position: absolute;
  top: 0.78rem;
  left: 0.85rem;
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--llx-accent-line);
  border-radius: 50%;
  background: var(--llx-surface-raised);
  color: var(--llx-accent);
  content: counter(llx-apply-step, decimal-leading-zero);
  font-size: 0.68rem;
  font-weight: 850;
}

.llx-apply-steps > li > strong {
  display: block;
  color: var(--llx-text);
  font-size: 0.88rem;
  font-weight: 800;
}

.llx-apply-steps > li > p {
  max-width: 72ch;
  margin: 0.3rem 0 0;
  color: var(--llx-text);
  font-size: 0.86rem;
  line-height: 1.62;
}

.llx-apply-steps > li > p.llx-apply-proof {
  margin-top: 0.45rem;
  color: var(--llx-text-muted);
  font-size: 0.8rem;
}

.llx-apply-proof strong {
  color: var(--llx-accent);
}

/* Prompt: o corpo escuro herda o tratamento já auditado de contraste. */
.llx-apply-part > .llx-prompt-tabs {
  margin-top: 0.9rem;
  padding: 0;
  border-top: 0;
  background: transparent;
}

.llx-apply-part > .llx-prompt-panels {
  margin-top: 0.7rem;
  overflow: hidden;
  border: 1px solid var(--llx-border);
  border-radius: 12px;
}

.llx-apply-part .llx-prompt-shell {
  border-top: 0;
}

@media (max-width: 680px) {
  .llx-apply-header {
    flex-direction: column;
  }

  .llx-apply-fronts {
    max-width: none;
  }

  .llx-apply-pair,
  .llx-apply-case {
    grid-template-columns: minmax(0, 1fr);
  }

  .llx-prompt-tabs {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Roteiro interno de cada capítulo ───────────────────────────── */
.llx-chapter-waypoints {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0 0 1rem;
  padding: 0.55rem;
  border: 1px solid var(--llx-border);
  border-radius: 11px;
  background: var(--llx-surface-soft);
}

.llx-chapter-waypoint {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.55rem;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--llx-text);
  text-decoration: none;
}

.llx-chapter-waypoint:hover {
  border-color: var(--llx-accent);
  background: var(--llx-surface-raised);
}

.llx-chapter-waypoint-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  background: var(--llx-accent-soft);
  color: var(--llx-accent);
}

.llx-chapter-waypoint-icon .llx-icon {
  width: 18px;
  height: 18px;
}

.llx-chapter-waypoint > span:last-child {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.llx-chapter-waypoint strong,
.llx-chapter-waypoint small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.llx-chapter-waypoint strong {
  font-size: 0.76rem;
}

.llx-chapter-waypoint small {
  color: var(--llx-text-muted);
  font-size: 0.64rem;
  font-weight: 700;
}

/* ── Listas instrucionais: escaneáveis antes de serem extensas ─── */
.llx-step-list,
.llx-keypoint-grid {
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

.llx-step-list {
  display: grid;
  gap: 0.6rem;
  counter-reset: none;
}

.llx-step-list > li {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  min-width: 0;
  padding: 0.78rem;
  border: 1px solid var(--llx-border);
  border-left: 4px solid var(--llx-accent);
  border-radius: 0 10px 10px 0;
  background: var(--llx-surface-soft);
}

/* Vistoria 04/08/2026: li com vários filhos (ex.: ol.cause-tree em medicao-de-busca)
   deixava filhos pares caírem na coluna de 42px do selo, rendendo uma palavra por
   linha. Generaliza o conserto que ol.exec-steps já tinha. */
.llx-step-list > li > :not(.llx-step-list-number) { grid-column: 2; }

.llx-step-list-number {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 10px;
  background: var(--llx-accent);
  color: var(--llx-on-accent);
  font-size: 0.68rem;
  font-weight: 900;
}

.llx-keypoint-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.llx-keypoint-grid > li {
  position: relative;
  min-width: 0;
  padding: 0.78rem 0.82rem 0.78rem 2.1rem;
  border: 1px solid var(--llx-border);
  border-radius: 10px;
  background: var(--llx-surface-soft);
}

.llx-keypoint-grid > li::before {
  position: absolute;
  top: 0.94rem;
  left: 0.82rem;
  width: 10px;
  height: 10px;
  border: 3px solid var(--llx-surface-raised);
  border-radius: 50%;
  background: var(--llx-accent);
  box-shadow: 0 0 0 1px var(--llx-accent);
  content: "";
}

.llx-prompt-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  padding: .65rem;
  border-top: 1px solid var(--llx-border);
  background: var(--llx-surface-raised);
}

.llx-prompt-tab {
  display: flex;
  min-width: 0;
  min-height: 58px;
  align-items: center;
  gap: .6rem;
  padding: .65rem .75rem;
  border: 1px solid var(--llx-border);
  border-radius: 10px;
  background: var(--llx-surface-soft);
  color: var(--llx-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.llx-prompt-tab .llx-icon {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
  color: var(--llx-accent);
}

.llx-prompt-tab > span {
  min-width: 0;
}

.llx-prompt-tab strong,
.llx-prompt-tab small {
  display: block;
}

.llx-prompt-tab strong {
  font-size: .8rem;
}

.llx-prompt-tab small {
  margin-top: .12rem;
  color: var(--llx-text-muted);
  font-size: .68rem;
  line-height: 1.35;
}

.llx-prompt-tab:hover {
  border-color: var(--llx-accent-line);
  background: var(--llx-accent-soft);
}

.llx-prompt-tab[aria-selected="true"] {
  border-color: var(--llx-accent);
  background: var(--llx-accent);
  color: var(--llx-on-accent);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--llx-accent) 25%, transparent);
}

.llx-prompt-tab[aria-selected="true"] .llx-icon,
.llx-prompt-tab[aria-selected="true"] small {
  color: var(--llx-on-accent);
}

.llx-prompt-tab:focus-visible {
  outline: 3px solid var(--llx-accent-line);
  outline-offset: 2px;
}

.llx-prompt-panel[hidden] {
  display: none;
}

.llx-prompt-shell {
  overflow: hidden;
  border-top: 1px solid var(--llx-border);
  background: #111827;
}

.llx-prompt-code {
  max-height: min(56vh, 560px);
  margin: 0;
  overflow: auto;
  padding: 1rem;
  background: transparent;
  color: #f8fafc;
  font: 500 .78rem/1.62 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
}

.llx-prompt-code:focus-visible {
  outline: 3px solid #f8c4d5;
  outline-offset: -4px;
}

.llx-prompt-actions {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem .7rem;
  border-top: 1px solid #334155;
  background: #1e293b;
}

.llx-prompt-copy {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .6rem .8rem;
  border: 1px solid #f8c4d5;
  border-radius: 9px;
  background: #fff;
  color: #7f1238;
  font: inherit;
  font-size: .78rem;
  font-weight: 850;
  cursor: pointer;
}

.llx-prompt-copy:hover,
.llx-prompt-copy.is-copied {
  border-color: #fff;
  background: #f8c4d5;
  color: #500724;
}

.llx-prompt-feedback {
  color: #cbd5e1;
  font-size: .72rem;
}

/* ── Movimento funcional, progressivo e sempre fail-open ────────── */
.llx-motion-item,
.llx-apply {
  opacity: 1;
  transform: none;
}

@keyframes llx-purpose-reveal {
  from {
    opacity: 0;
    transform: translateY(var(--llx-motion-distance));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes llx-content-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-llx-motion="reduce"]) .llx-motion-item {
      animation: llx-purpose-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 38%;
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  :root:not([data-llx-motion="reduce"]) .llx-module.is-open > .llx-module-body,
  :root:not([data-llx-motion="reduce"]) .llx-apply.is-ready,
  :root:not([data-llx-motion="reduce"]) .llx-timeline-panel.is-updating {
    animation: llx-content-enter var(--llx-motion-state) var(--llx-motion-ease-out) both;
  }

  :root:not([data-llx-motion="reduce"]) .llx-complete-button.is-confirming,
  :root:not([data-llx-motion="reduce"]) [data-llx-complete-compact].is-confirming,
  :root:not([data-llx-motion="reduce"]) .llx-prompt-copy.is-copied .llx-icon {
    animation: llx-feedback-pop var(--llx-motion-feedback) var(--llx-motion-ease-out) both;
  }

  .llx-route-card,
  .llx-module,
  .llx-module-toggle,
  .llx-answer-toggle,
  .llx-page-pager a,
  .llx-pagination a {
    transition:
      border-color 160ms ease,
      background-color 160ms ease,
      color 160ms ease,
      box-shadow 160ms ease,
      transform 160ms ease;
  }

  .llx-prompt-tab,
  .llx-apply-front {
    transition:
      border-color 180ms ease,
      background-color 180ms ease,
      color 180ms ease,
      box-shadow 180ms ease,
      transform var(--llx-motion-state) var(--llx-motion-ease-out);
  }
}

@keyframes llx-feedback-pop {
  50% {
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .llx-progress-bar,
  .llx-reading-progress,
  .llx-resume-progress::after,
  .llx-study-progress::after,
  .llx-module-toggle svg,
  .llx-module-toggle [data-lucide],
  .llx-module-head,
  .llx-module-header {
    transition: none;
  }

  .llx-route-card:hover,
  .llx-resume-actions a:hover {
    transform: none;
  }

  /* Animações decorativas restantes (reveal por scroll, entrada de conteúdo,
     pop de confirmação) já vivem sob prefers-reduced-motion: no-preference;
     este bloco cobre só o que era declarado sem guarda. */
}

:root[data-llx-motion="reduce"] {
  scroll-behavior: auto !important;
}

:root[data-llx-motion="reduce"] .llx-motion-item,
:root[data-llx-motion="reduce"] .llx-apply,
:root[data-llx-motion="reduce"] .llx-module-body,
:root[data-llx-motion="reduce"] .llx-timeline-panel,
:root[data-llx-motion="reduce"] .llx-complete-button.is-confirming,
:root[data-llx-motion="reduce"] [data-llx-complete-compact].is-confirming,
:root[data-llx-motion="reduce"] .llx-prompt-copy.is-copied .llx-icon {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

:root[data-llx-motion="reduce"] .llx-progress-bar,
:root[data-llx-motion="reduce"] .llx-reading-progress,
:root[data-llx-motion="reduce"] .llx-resume-progress::after,
:root[data-llx-motion="reduce"] .llx-study-progress::after,
:root[data-llx-motion="reduce"] .llx-module-toggle svg,
:root[data-llx-motion="reduce"] .llx-module-toggle [data-lucide] {
  transition: none !important;
}

/* O controle manual também governa animações inline legadas das 16 páginas. */
:root[data-llx-motion="reduce"] body.leadlovers-isolated *,
:root[data-llx-motion="reduce"] body.leadlovers-isolated *::before,
:root[data-llx-motion="reduce"] body.leadlovers-isolated *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

:root[data-llx-motion="reduce"] body.leadlovers-isolated :is(a, button, summary, [role="button"]):hover,
:root[data-llx-motion="reduce"] body.leadlovers-isolated :is(.frente-card, .papel-card, .subpage-card, .filha-card):hover {
  transform: none !important;
}

/* ── Impressão: conteúdo inteiro, sem controles de navegação ────── */
@media print {
  .llx-progress-shell,
  .llx-study-rail,
  .llx-page-index,
  .llx-mobile-index,
  .llx-learning-bar,
  .llx-module-toggle,
  .llx-page-pager,
  .llx-pagination,
  .llx-mobile-actions,
  .llx-answer-toggle {
    display: none !important;
  }

  .llx-learning-shell {
    display: block;
  }

  .llx-module,
  .llx-start-panel,
  .llx-learning-flow,
  .llx-visual-lab,
  .llx-apply,
  .llx-apply-part {
    break-inside: avoid;
    box-shadow: none;
  }

  .llx-module-body[hidden] {
    display: block !important;
  }

  .llx-module[hidden] {
    display: block !important;
  }

  .llx-study-controls,
  .llx-command-palette,
  .llx-prompt-tabs,
  .llx-prompt-actions {
    display: none !important;
  }

  /* O prompt vale impresso: as duas variantes saem inteiras, sem as abas. */
  .llx-prompt-panel[hidden] {
    display: block !important;
  }

  .llx-prompt-code {
    max-height: none;
    overflow: visible;
  }

  .llx-answer-shell:not(.is-expanded) .answer-capsule,
  .llx-answer-shell:not(.is-expanded) > p {
    display: block;
    overflow: visible;
  }
}

/* ══ Correções de contraste — auditoria frontend em 5 waves (28/07/2026) ══
   Chips de superfície clara injetados dentro de caixas navy da página
   (.quem-box / .quem-serve) herdavam o texto claro das regras da página e
   ficavam ilegíveis no tema claro. Todo contêiner que define superfície
   própria declara o par texto/fundo junto; specificity 0-1-2+ vence as
   regras de página (0-1-1) independente da ordem de carga. */
ul.llx-keypoint-grid > li,
details.llx-deep-dive {
  color: var(--llx-text);
}
ul.llx-keypoint-grid > li p,
ul.llx-keypoint-grid > li li,
ul.llx-keypoint-grid > li strong,
details.llx-deep-dive p,
details.llx-deep-dive li,
details.llx-deep-dive strong {
  color: inherit;
}
ul.llx-keypoint-grid > li a,
details.llx-deep-dive a {
  color: var(--llx-accent);
}

/* O rótulo <strong> da aba de prompt ativa herdava a cor global de texto em
   vez do par sobre-accent (small e .llx-icon já recebiam o tratamento). */
.llx-prompt-tab[aria-selected="true"] strong {
  color: var(--llx-on-accent);
}

/* Botão "Retomar aula": a regra de página
   :root[data-theme="dark"] a:not(.geo-btn):not(.cta) { color: var(--ll-ink) }
   (0-4-1) vencia o par correto e dava rosa sobre rosa (1,25:1). Guarda
   com !important contida a este componente. */
.llx-resume-actions .llx-resume-primary,
.llx-resume-actions .llx-resume-primary:hover,
.llx-resume-actions .llx-resume-primary:focus-visible {
  color: var(--llx-on-accent) !important;
}

/* Badge de atenção do design system: #DD7A01 rende 2,8:1 sobre o fundo suave.
   O fundo do badge (--color-warning-light) permanece creme também no tema
   escuro, então o âmbar escuro vale para os dois temas. */
body.leadlovers-isolated .geo-badge-warning {
  color: #8a5200;
}

/* Cards de páginas relacionadas nos hubs: as páginas-folha definem override
   escuro próprio (0-5-1) e continuam vencendo; esta regra (0-4-1) cobre os
   hubs, onde o card ficava branco com texto claro (1,05:1) no tema escuro. */
:root[data-theme="dark"] body.leadlovers-isolated .geo-related-pages a {
  background: #1f2937;
  border-color: var(--color-border, #374151);
  color: #e5e7eb;
}
:root[data-theme="dark"] body.leadlovers-isolated .geo-related-pages a span {
  color: #c4ceda;
}

/* ══ Diagramação — waves 6-9 (28/07/2026) ══
   Ritmo tipográfico do curso frontends-com-vibecoding: títulos equilibrados
   e prosa sem órfãs, via CSS nativo (progressive enhancement). */
h1,
h2,
h3,
.llx-module-title {
  text-wrap: balance;
}
p,
li,
figcaption,
dd {
  text-wrap: pretty;
}

/* ══ Largura de leitura pós-chrome mínimo (28/07/2026) ══
   Sem o rail lateral, a coluna de 780px com prosa presa em 560px deixava
   dois terços da tela vazios. Container a 1080px e medida tipográfica de
   75ch na prosa (85ch na cápsula introdutória); as regras de página que
   pinavam 560px perdem por especificidade. */
body.leadlovers-isolated main.geo-page {
  max-width: min(1080px, 94vw);
  /* Entrelinha da área de leitura (04/08/2026). O design system entrega 1,75
     no body, acima da faixa de 1,5 a 1,6 usada para prosa longa: numa aula de
     20 seções isso alongava a rolagem sem devolver legibilidade. A correção
     entra por herança, no container, e não nos parágrafos: componente que
     declara a própria entrelinha (resumo de módulo, selo, tabela, cartão)
     continua vencendo, e só o texto que herdava do body muda. Fora do portal
     nada se move, porque a regra depende de body.leadlovers-isolated. */
  line-height: 1.6;
}
body.leadlovers-isolated main.geo-page p {
  max-width: 75ch;
}
/* A cápsula de resposta rápida vinha em 85ch, cinco caracteres acima do teto
   de 80 recomendado para leitura corrida, e ela é o primeiro bloco que o
   leitor encontra depois do título. */
body.leadlovers-isolated main.geo-page .answer-capsule {
  max-width: 80ch;
}

/* ══ Alvos de toque — checklist frontends-com-vibecoding (03/08/2026) ══
   Em ponteiro grosso (dedo), todo controle que ficava entre 38 e 46 px sobe
   para ≥48 px de área útil. Só min-height/min-width: o layout desktop com
   mouse não muda, e os grids que reservavam coluna de 44 px para o botão de
   módulo acompanham. */
@media (pointer: coarse) {
  .llx-progress-shell button,
  .llx-study-rail a,
  .llx-desktop-index summary,
  .llx-desktop-index a,
  .llx-mobile-index summary,
  .llx-mobile-index button,
  .llx-mobile-index a,
  .llx-route-card,
  .llx-page-pager a,
  .llx-pagination a,
  .llx-complete-button,
  .llx-mobile-actions button,
  .llx-mobile-actions a,
  .llx-answer-toggle,
  .llx-deep-dive summary,
  .llx-rail-search,
  .llx-rail-actions button,
  .llx-mobile-motion-toggle,
  .llx-search input,
  .llx-glossary-tools input,
  .llx-glossary-tools select,
  .llx-motion-toggle,
  .llx-study-launch,
  .llx-quiz-retry,
  .llx-study-nav button,
  .llx-resume-actions a,
  .llx-decision-tree select,
  .llx-prompt-copy,
  .llx-pocket-download,
  .llx-pocket-lesson,
  .llx-taxonomy-step,
  .llx-chapter-waypoint,
  .llx-apply-front {
    min-height: 48px;
  }

  .llx-module-toggle,
  .llx-command-close {
    width: 48px;
    height: 48px;
  }

  /* A coluna reservada ao botão de módulo acompanha os 48 px (era 44 px nos
     breakpoints móveis; `auto` acomoda os dois mundos). */
  .llx-module-head,
  .llx-module-header {
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }
}

/* ══ Reforma mobile — Wave 4a (04/08/2026) ══
   Camada compartilhada das ~30 aulas em telas estreitas. Tudo atrás de
   max-width: 640px ou pointer: coarse, sem regressão de desktop. O bloco
   vive DEPOIS do @media (pointer: coarse) de propósito: no celular os dois
   casam e as regras daqui têm a última palavra. */
@media (max-width: 640px) {
  /* Tabelas dentro de região de rolagem ROLAM em vez de se espremer até uma
     palavra por linha: largura mínima proporcional ao número de colunas.
     .table-wrap fica de fora — é o padrão "tabela vira cartões" da aula de
     gestão de tráfego pago, que não pode ganhar largura mínima. Navegador
     sem :has() mantém o comportamento antigo (aperta, mas não quebra). */
  .leadlovers-scroll-region:not(.table-wrap) table:has(tr > :nth-child(3)) {
    min-width: 30rem;
  }

  .leadlovers-scroll-region:not(.table-wrap) table:has(tr > :nth-child(4)) {
    min-width: 38rem;
  }

  .leadlovers-scroll-region:not(.table-wrap) table:has(tr > :nth-child(5)) {
    min-width: 46rem;
  }

  .leadlovers-scroll-region:not(.table-wrap) table:has(tr > :nth-child(6)) {
    min-width: 54rem;
  }

  .leadlovers-scroll-region:not(.table-wrap) table:has(tr > :nth-child(7)) {
    min-width: 62rem;
  }

  /* Roteiro do capítulo: uma coluna, rótulo inteiro (sem "In…/En…"),
     alvo de toque >= 44px. */
  .llx-chapter-waypoints {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
  }

  .llx-chapter-waypoint {
    min-height: 44px;
  }

  .llx-chapter-waypoint strong,
  .llx-chapter-waypoint small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  /* Justificacao no celular (11/08/2026). A regra anterior alinhava todo
     paragrafo do portal a esquerda abaixo de 640px, porque coluna de 264 a
     338px abre rios entre as palavras. A decisao editorial passou a ser
     justificar tambem no celular, e o rio fica controlado por outra via:
     text-wrap pretty pede ao motor de quebra que evite linha orfa e
     distribuicao ruim, e a hifenizacao automatica autoriza partir a palavra
     longa em portugues, que e a causa real do vao. Medido antes da troca
     nesta largura: vao medio de 11,6% da coluna, com 63% das linhas acima de
     8%. Quem preferir o texto sem justificacao continua atendido pela
     preferencia do sistema, porque nada aqui e imposto ao usuario final. */
  .leadlovers-isolated p,
  body[data-ll-page] p {
    text-align: justify;
    text-align-last: left;
    -webkit-hyphens: auto;
    hyphens: auto;
    text-wrap: pretty;
    overflow-wrap: break-word;
  }

  /* Cascata de padding: margem do main + padding do main + módulo + cartão
     comiam ~120px dos 390px (texto útil de 242-259px). Receita da aula de
     gestão de tráfego pago, portada para a camada compartilhada. */
  body.leadlovers-isolated main.geo-page {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  .llx-module .llx-module-body {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }

  .leadlovers-isolated .geo-card {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  /* Header do acordeão: o título ganha a linha inteira (o grid de
     40px/48px + 1fr + 44px/48px deixava ~120-190px para ele) e o resumo
     injetado some com o módulo aberto — ele duplica o 1º parágrafo do corpo. */
  .llx-module-head,
  .llx-module-header {
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-areas:
      "icon toggle"
      "copy copy";
  }

  .llx-module-header .llx-module-icon,
  .llx-module-head .llx-module-icon {
    grid-area: icon;
  }

  .llx-module-header .llx-module-copy,
  .llx-module-head .llx-module-copy {
    grid-area: copy;
  }

  .llx-module-header .llx-module-toggle,
  .llx-module-head .llx-module-toggle {
    grid-area: toggle;
    justify-self: end;
  }

  .llx-module.is-open .llx-module-summary {
    display: none;
  }

  /* Pisos tipográficos: nada de texto funcional abaixo de 12px no celular.
     O piso genérico de <small> vem antes; os componentes com tamanho fixo
     em rem entram na lista explícita. */
  .leadlovers-isolated small {
    font-size: max(0.75rem, 0.8em);
  }

  .llx-chapter-waypoint small,
  .llx-step-list-number,
  .llx-quiz-eyebrow,
  .llx-quiz-status,
  .llx-apply-number,
  .llx-module-phase {
    font-size: 0.75rem;
  }

  /* Páginas com CSS local que refixa 0.68rem no número de passo
     (ex.: .cause-tree e .exec-steps na aula de medição): o piso precisa
     vencer por especificidade — 0,2,1 contra 0,2,0. */
  body.leadlovers-isolated .llx-step-list-number,
  body.leadlovers-isolated .llx-quiz-eyebrow,
  body.leadlovers-isolated .llx-quiz-status,
  body.leadlovers-isolated .llx-apply-number,
  body.leadlovers-isolated .llx-module-phase {
    font-size: 0.75rem;
  }

  .llx-chapter-waypoint strong {
    font-size: 0.8rem;
  }

  /* Chips "Aplicar esta aula": legíveis (>= 12px) e tocáveis (>= 34px
     mesmo quando pointer: coarse não casa). */
  .llx-apply-front {
    min-height: 34px;
    font-size: 0.75rem;
  }
}

/* Alvos de toque do miolo: links do índice "Nesta página" (toc-box) e dos
   índices rápidos tinham ~19-21px de altura. padding-block leva o alvo a
   ~44px sem mexer no desktop com mouse. */
@media (pointer: coarse) {
  .leadlovers-isolated .toc-box a,
  .leadlovers-isolated .quick-index a {
    display: inline-block;
    padding-block: 0.55rem;
  }
}

/* ── Guardas de tabela (vistoria de pilares, 11/08/2026) ──────────────────
   Nas tabelas dos pilares a coluna de rótulo encolhia até quebrar palavra sem
   hífen ("Detecçã o", "Observabilida de"). O piso de largura mantém o rótulo
   inteiro; hyphens: auto quebra com hífen quando precisar. As tabelas seguem
   dentro dos seus wrappers com rolagem horizontal, então o piso só empurra a
   rolagem, nunca a página. */
.leadlovers-isolated main table th,
.leadlovers-isolated main table td {
  hyphens: auto;
  -webkit-hyphens: auto;
  word-break: normal;
}

.leadlovers-isolated main table th:first-child,
.leadlovers-isolated main table td:first-child {
  min-width: 7.5rem;
}

/* ── /leadlovers2026/aula-player.css ── */
/* Player das aulas do portal (vídeo e podcast) — usado pelas páginas do menu
   Design em par com aula-player.js. A página hospedeira define os tokens de
   identidade (--ll, --ll-ink, --ll-surface, --ll-line, --neutral-soft,
   --neutral-ink); o player só os consome, então o mesmo asset serve o tema
   claro e o escuro sem regra própria de cor. Sem JavaScript, o <video>/<audio>
   mantém o atributo controls e a página continua inteira. */

.llap { margin: 1.4rem 0; }
.llap video { width: 100%; height: auto; display: block; border-radius: 12px 12px 0 0; background: #05080f; }
/* Sem JavaScript a consola não existe e o vídeo fecha o card sozinho. */
.llap:not(:has(.llap-consola)) video { border-radius: 12px; }
.llap figcaption { font-size: 0.88rem; color: var(--neutral-ink); margin-top: 0.55rem; }

/* A barra de controles nasce do JS; herda a superfície do card. */
.llap-consola { border: 1px solid var(--ll-line); border-top: 0; border-radius: 0 0 12px 12px;
  background: var(--ll-surface); padding: 0.65rem 0.9rem 0.55rem; }
.llap--audio .llap-consola { border-top: 1px solid var(--ll-line); border-radius: 12px; }
.llap--audio audio[controls] { display: block; width: 100%; max-width: 100%; }
.llap--audio:has(.llap-consola) audio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Cabeçalho do podcast: capa pequena + título, no espírito da fila do Spotify. */
.llap-cartao { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.55rem; }
.llap-capa { width: 56px; height: 56px; border-radius: 8px; flex: none; display: flex;
  align-items: center; justify-content: center; background: var(--ll-navy); color: #fff; }
.llap-capa svg { width: 28px; height: 28px; }
.llap-cartao-titulo { font-weight: 700; color: var(--ll-navy-head); line-height: 1.3; }
.llap-cartao-sub { font-size: 0.82rem; color: var(--neutral-ink); }

/* Linha do tempo. O range é o próprio trilho, pintado por --llap-prog/--llap-buf. */
.llap-linha { display: flex; align-items: center; gap: 0.6rem; }
.llap-tempo { font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--neutral-ink); flex: none; min-width: 2.9rem; }
.llap-tempo--total { text-align: right; }
.llap-progresso { flex: 1; min-width: 0; appearance: none; -webkit-appearance: none; height: 6px; border-radius: 999px;
  background:
    linear-gradient(var(--ll) 0 0) 0 / calc(var(--llap-prog, 0) * 100%) 100% no-repeat,
    linear-gradient(color-mix(in srgb, var(--ll) 28%, transparent) 0 0) 0 / calc(var(--llap-buf, 0) * 100%) 100% no-repeat,
    var(--neutral-soft);
  cursor: pointer; }
.llap-progresso::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 14px; height: 14px;
  border-radius: 50%; background: var(--ll); border: 2px solid var(--ll-surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.llap-progresso::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--ll);
  border: 2px solid var(--ll-surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.llap-progresso:focus-visible { outline: 2px solid var(--ll); outline-offset: 3px; }

/* Botões. O de tocar é o protagonista, redondo e cheio; os demais são fantasmas. */
.llap-controles { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.45rem; flex-wrap: wrap; }
.llap-bot { appearance: none; border: 0; background: transparent; color: var(--ll-navy-head);
  width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; }
.llap-bot svg { width: 20px; height: 20px; }
.llap-bot:hover { background: var(--neutral-soft); }
.llap-bot:focus-visible { outline: 2px solid var(--ll); outline-offset: 2px; }
.llap-bot--tocar { width: 48px; height: 48px; background: var(--ll); color: #fff; }
.llap-bot--tocar:hover { background: var(--ll-ink); }
.llap-bot--tocar svg { width: 24px; height: 24px; }
.llap-bot[aria-pressed="true"] { color: var(--ll); background: color-mix(in srgb, var(--ll) 14%, transparent); }
.llap-velocidade { font-size: 0.8rem; font-weight: 700; width: auto; min-width: 44px; height: 32px;
  border-radius: 999px; padding: 0 0.55rem; border: 1px solid var(--ll-line); }
.llap-vao { flex: 1; }
.llap-volume { appearance: none; -webkit-appearance: none; width: 84px; height: 5px; border-radius: 999px;
  background: linear-gradient(var(--ll-navy-head) 0 0) 0 / calc(var(--llap-vol, 1) * 100%) 100% no-repeat, var(--neutral-soft); }
.llap-volume::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 12px; height: 12px;
  border-radius: 50%; background: var(--ll-navy-head); }
.llap-volume::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--ll-navy-head); border: 0; }
.llap-volume:focus-visible { outline: 2px solid var(--ll); outline-offset: 3px; }

/* Ações da peça: baixar, compartilhar, transcrição. */
.llap-acoes { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.7rem; }
.llap-acao { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600;
  color: var(--ll-ink); background: transparent; border: 1px solid var(--ll-line); border-radius: 999px;
  padding: 0.4rem 0.85rem; cursor: pointer; text-decoration: none; }
.llap-acao svg { width: 16px; height: 16px; }
.llap-acao:hover { background: var(--neutral-soft); }
.llap-acao:focus-visible { outline: 2px solid var(--ll); outline-offset: 2px; }
.llap-acao[aria-expanded="true"] { background: var(--ll-navy); border-color: var(--ll-navy); color: #fff; }
:root[data-theme="dark"] .llap-acao[aria-expanded="true"] { color: var(--ll-navy-head); }

/* Painel de transcrição: leitura corrida com rolagem própria e cópia integral. */
.llap-transcricao { border: 1px solid var(--ll-line); border-radius: 12px; background: var(--ll-surface);
  margin: 0.8rem 0 1.4rem; }
.llap-transcricao-topo { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.7rem 1rem; border-bottom: 1px solid var(--ll-line); }
.llap-transcricao-topo strong { color: var(--ll-navy-head); }
.llap-transcricao-texto { max-height: 24rem; overflow-y: auto; overscroll-behavior: contain;
  padding: 0.9rem 1.1rem; }
.llap-transcricao-texto p { max-width: 75ch; font-size: 0.92rem; }
.llap-transcricao-nota { font-size: 0.8rem; color: var(--neutral-ink); padding: 0 1.1rem 0.9rem; }

@media (max-width: 560px) {
  .llap-volume { display: none; }
  .llap-consola { padding: 0.55rem 0.6rem 0.5rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .llap-bot, .llap-acao { transition: background-color 120ms ease, color 120ms ease; }
}

.llap .llap-status {
  margin: .7rem 0 0;
  color: var(--sgp-texto-2, var(--neutral-ink, var(--lle-muted)));
  font-size: .85rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.llap .llap-status[hidden] { display: none; }