/* path: apps/manu/public/assets/css/editorial.css */
/* ============================================================
   CONTENT PLATFORM — ESTILOS EDITORIAIS E COMPONENTES
   Harmonizado com o Design System Oficial de Manu Santana
   ============================================================ */

/* Layout e Container do Artigo */
.editorial-article {
  padding-top: clamp(24px, 4vw, 48px);
  padding-bottom: clamp(48px, 8vw, 80px);
  background-color: var(--off, #F7F8FB);
  color: var(--graphite-900, #1E2330);
  font-family: var(--font-sans);
}

@media (max-width: 640px) {
  .editorial-article {
    padding-top: calc(var(--site-nav-height, 104px) + 20px);
    padding-bottom: 48px;
  }
}

.editorial-container {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--pad-x, clamp(16px, 4vw, 28px));
}

/* Header do Artigo */
.editorial-header {
  margin-bottom: clamp(28px, 5vw, 44px);
}

.editorial-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--muted-600, #5A6072);
  margin-bottom: 16px;
}

.editorial-breadcrumb a {
  color: var(--muted-600, #5A6072);
  text-decoration: none;
  transition: color 0.2s ease;
}

.editorial-breadcrumb a:hover {
  color: var(--gold-600, #C99500);
}

.editorial-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: var(--radius-sm, 4px);
  background: rgba(220, 171, 9, 0.12);
  color: #8C6208;
  margin-bottom: 16px;
  border: 1px solid rgba(220, 171, 9, 0.25);
}

.editorial-title {
  font-size: clamp(1.85rem, 4vw + 0.8rem, 2.75rem);
  font-weight: 800;
  line-height: 1.18;
  color: var(--navy-900, #181A36);
  letter-spacing: -0.025em;
  margin-bottom: 16px;
}

.editorial-lead {
  font-size: clamp(1.05rem, 1.2vw + 0.8rem, 1.25rem);
  line-height: 1.6;
  color: var(--muted-600, #5A6072);
  margin-bottom: 24px;
}

.editorial-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--gray-200, #E6E8EF);
  border-bottom: 1px solid var(--gray-200, #E6E8EF);
  font-size: 0.85rem;
  color: var(--muted-500, #8A8D98);
}

.editorial-meta__author {
  font-weight: 600;
  color: var(--navy-900, #181A36);
}

.editorial-meta__item {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Corpo de Texto e Tipografia Geral */
.editorial-content {
  font-size: clamp(1.02rem, 0.4vw + 0.95rem, 1.125rem);
  line-height: 1.72;
  color: #242938;
}

.editorial-content > p,
.editorial-content p {
  margin-bottom: 1.4rem;
}

.editorial-content > h2,
.editorial-content h2 {
  font-size: clamp(1.4rem, 2.2vw + 0.8rem, 1.85rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--navy-900, #181A36);
  letter-spacing: -0.02em;
  margin-top: clamp(36px, 6vw, 56px);
  margin-bottom: 18px;
  scroll-margin-top: 80px;
}

.editorial-content > h3,
.editorial-content h3 {
  font-size: clamp(1.15rem, 1.4vw + 0.75rem, 1.35rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy-800, #1D2646);
  margin-top: clamp(24px, 4vw, 36px);
  margin-bottom: 14px;
}

.editorial-content strong {
  font-weight: 700;
  color: var(--navy-900, #181A36);
}

.editorial-content ul, 
.editorial-content ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.editorial-content li {
  margin-bottom: 0.5rem;
  line-height: 1.65;
}

.editorial-content a {
  color: #8C6208;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.18s ease;
}

.editorial-content a:hover {
  color: var(--navy-900, #181A36);
}

/* ============================================================
   COMPONENTES ESCUROS — ISOLAÇÃO TOTAL DE ESPECIFICIDADE E CONTRASTE
   ============================================================ */

/* 1. Contextual CTA */
.editorial-content .c-context-cta,
.c-context-cta {
  background: linear-gradient(135deg, var(--navy-900, #181A36) 0%, var(--navy-800, #1D2646) 100%);
  color: #FFFFFF;
  border-radius: var(--radius-lg, 16px);
  padding: clamp(24px, 4vw, 36px);
  margin: 48px 0;
  border: 1px solid rgba(201, 161, 90, 0.25);
  box-shadow: 0 16px 40px rgba(16, 24, 50, 0.12);
}

.editorial-content .c-context-cta .c-context-cta__badge,
.c-context-cta__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 30px;
  background: rgba(220, 171, 9, 0.15);
  color: var(--gold-400, #F0C33A);
  margin-bottom: 12px;
  border: 1px solid rgba(220, 171, 9, 0.35);
}

.editorial-content .c-context-cta h2,
.editorial-content .c-context-cta h3,
.editorial-content .c-context-cta h4,
.editorial-content .c-context-cta .c-context-cta__title,
.c-context-cta__title {
  font-size: clamp(1.25rem, 2vw + 0.8rem, 1.65rem);
  font-weight: 800;
  color: #FFFFFF !important;
  margin-top: 0 !important;
  margin-bottom: 10px;
  line-height: 1.25;
}

.editorial-content .c-context-cta p,
.editorial-content .c-context-cta .c-context-cta__desc,
.c-context-cta__desc {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--cream-dim, #E2D9C6) !important;
  margin-bottom: 22px;
  max-width: 620px;
}

.editorial-content .c-context-cta strong {
  color: #FFFFFF !important;
  font-weight: 700;
}

.editorial-content .c-context-cta a.c-context-cta__btn,
.c-context-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--gold-500, #DCAB09) !important;
  color: var(--navy-900, #181A36) !important;
  font-weight: 800;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: var(--radius-sm, 4px);
  text-decoration: none !important;
  border: none;
  transition: background 0.2s ease, transform 0.15s ease;
  min-height: 48px;
}

.editorial-content .c-context-cta a.c-context-cta__btn:hover,
.c-context-cta__btn:hover {
  background: var(--gold-400, #F0C33A) !important;
  color: var(--navy-950, #101832) !important;
  text-decoration: none !important;
  transform: translateY(-2px);
}

.editorial-content .c-context-cta a.c-context-cta__btn:focus-visible,
.c-context-cta__btn:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}

/* 2. MiniQuiz Interativo */
.editorial-content .c-miniquiz,
.c-miniquiz {
  background: var(--navy-900, #181A36);
  color: var(--cream, #F2ECE0);
  border-radius: var(--radius-lg, 16px);
  padding: clamp(24px, 4vw, 36px);
  margin: 44px 0;
  box-shadow: 0 16px 40px rgba(16, 24, 50, 0.2);
}

.editorial-content .c-miniquiz .c-miniquiz__badge,
.c-miniquiz__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 30px;
  background: rgba(220, 171, 9, 0.2);
  color: var(--gold-400, #F0C33A);
  margin-bottom: 12px;
  border: 1px solid rgba(220, 171, 9, 0.4);
}

.editorial-content .c-miniquiz h3,
.editorial-content .c-miniquiz h4,
.editorial-content .c-miniquiz .c-miniquiz__title,
.c-miniquiz__title {
  font-size: clamp(1.2rem, 2vw + 0.8rem, 1.55rem);
  font-weight: 800;
  color: #FFFFFF !important;
  margin-top: 0 !important;
  margin-bottom: 8px;
  line-height: 1.3;
}

.editorial-content .c-miniquiz p,
.editorial-content .c-miniquiz .c-miniquiz__intro,
.c-miniquiz__intro {
  font-size: 0.95rem;
  color: var(--cream-dim, #E2D9C6) !important;
  margin-bottom: 24px;
}

.editorial-content .c-miniquiz strong {
  color: #FFFFFF !important;
}

.c-miniquiz__questions {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.c-miniquiz__q-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md, 8px);
  padding: 16px 18px;
}

.editorial-content .c-miniquiz .c-miniquiz__q-text,
.c-miniquiz__q-text {
  font-size: 0.98rem;
  font-weight: 600;
  color: #FFFFFF !important;
  margin-bottom: 12px;
}

.c-miniquiz__options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.c-miniquiz__opt-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm, 4px);
  color: var(--cream, #F2ECE0) !important;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 8px 16px;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
  font-family: inherit;
}

.c-miniquiz__opt-btn:hover {
  background: rgba(220, 171, 9, 0.2);
  border-color: var(--gold-500, #DCAB09);
  color: #FFFFFF !important;
}

.c-miniquiz__opt-btn.is-selected {
  background: var(--gold-500, #DCAB09) !important;
  border-color: var(--gold-500, #DCAB09) !important;
  color: var(--navy-900, #181A36) !important;
  font-weight: 700;
}

.c-miniquiz__opt-btn:focus-visible {
  outline: 2px solid var(--gold-400, #F0C33A);
  outline-offset: 2px;
}

.c-miniquiz__action {
  margin-top: 24px;
  text-align: center;
}

.editorial-content .c-miniquiz button.c-miniquiz__submit,
.c-miniquiz__submit {
  background: var(--gold-500, #DCAB09) !important;
  color: var(--navy-900, #181A36) !important;
  font-weight: 800;
  font-size: 1rem;
  padding: 14px 32px;
  border-radius: var(--radius-sm, 4px);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  min-height: 48px;
  font-family: inherit;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.editorial-content .c-miniquiz button.c-miniquiz__submit:hover,
.c-miniquiz__submit:hover {
  background: var(--gold-400, #F0C33A) !important;
  transform: translateY(-1px);
}

.c-miniquiz__feedback {
  margin-top: 24px;
  padding: 20px;
  border-radius: var(--radius-md, 8px);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(220, 171, 9, 0.35);
  animation: fadeIn 0.3s ease;
}

.c-miniquiz__feedback.is-hidden {
  display: none;
}

.c-miniquiz__feedback-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--gold-400, #F0C33A) !important;
  margin-bottom: 8px;
}

.c-miniquiz__feedback-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--cream, #F2ECE0) !important;
  margin: 0;
}

/* ============================================================
   DEMAIS COMPONENTES EDITORIAIS
   ============================================================ */

/* Resposta Rápida */
.c-quick-answer {
  background: #FFFFFF;
  border-left: 4px solid var(--gold-500, #DCAB09);
  border-radius: var(--radius-sm, 4px);
  padding: clamp(18px, 3vw, 26px);
  margin: 24px 0 36px 0;
  box-shadow: 0 4px 20px rgba(24, 26, 54, 0.05);
}

.c-quick-answer__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8C6208;
  margin-bottom: 8px;
}

.c-quick-answer__text {
  font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.18rem);
  font-weight: 600;
  line-height: 1.6;
  color: var(--navy-900, #181A36);
  margin: 0;
}

/* Callout */
.c-callout {
  display: flex;
  gap: 16px;
  padding: clamp(18px, 3vw, 24px);
  border-radius: var(--radius-md, 8px);
  margin: 32px 0;
  background: #FFFFFF;
  border: 1px solid var(--gray-200, #E6E8EF);
}

.c-callout--principle {
  background: rgba(24, 26, 54, 0.03);
  border-left: 4px solid var(--navy-900, #181A36);
}

.c-callout--alert {
  background: #FFFBF0;
  border-left: 4px solid var(--gold-500, #DCAB09);
  border-color: rgba(220, 171, 9, 0.3);
}

.c-callout--tip {
  background: #F0FDF4;
  border-left: 4px solid #16A34A;
  border-color: rgba(22, 163, 74, 0.25);
}

.c-callout__icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.c-callout__body {
  flex: 1;
}

.c-callout__title {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy-900, #181A36);
  margin-bottom: 6px;
}

.c-callout__body p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--graphite-900, #1E2330);
}

/* Comparison */
.c-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 36px 0;
}

@media (max-width: 680px) {
  .c-comparison {
    grid-template-columns: 1fr;
  }
}

.c-comparison__col {
  padding: clamp(20px, 3vw, 26px);
  border-radius: var(--radius-md, 8px);
  background: #FFFFFF;
  border: 1px solid var(--gray-200, #E6E8EF);
}

.c-comparison__col--bad {
  border-top: 4px solid #DC2626;
  background: #FEF2F2;
}

.c-comparison__col--good {
  border-top: 4px solid #16A34A;
  background: #F0FDF4;
}

.c-comparison__header {
  font-size: 1.05rem;
  font-weight: 800;
  margin-top: 0 !important;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.c-comparison__col--bad .c-comparison__header { color: #991B1B !important; }
.c-comparison__col--good .c-comparison__header { color: #166534 !important; }

.c-comparison__items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.c-comparison__items li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.c-comparison__col--bad .c-comparison__items li::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: #DC2626;
  font-weight: 800;
}

.c-comparison__col--good .c-comparison__items li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #16A34A;
  font-weight: 800;
}

/* Diagrama Anatomia do Preço */
.c-diagram-anatomy {
  background: #FFFFFF;
  border: 1px solid var(--gray-200, #E6E8EF);
  border-radius: var(--radius-lg, 16px);
  padding: clamp(20px, 4vw, 32px);
  margin: 36px 0;
  box-shadow: 0 8px 32px rgba(24, 26, 54, 0.04);
}

.c-diagram-anatomy__header {
  text-align: center;
  margin-bottom: 24px;
}

.c-diagram-anatomy__title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--navy-900, #181A36);
  margin-top: 0 !important;
  margin-bottom: 6px;
}

.c-diagram-anatomy__subtitle {
  font-size: 0.92rem;
  color: var(--muted-600, #5A6072);
  margin: 0;
}

.c-diagram-anatomy__stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.c-diagram-anatomy__layer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius-sm, 4px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.c-diagram-anatomy__layer:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 14px rgba(24, 26, 54, 0.08);
}

.c-diagram-anatomy__layer--1 { background: #EAEFFC; border-left: 4px solid #3B82F6; }
.c-diagram-anatomy__layer--2 { background: #E0F2FE; border-left: 4px solid #0284C7; }
.c-diagram-anatomy__layer--3 { background: #F3E8FF; border-left: 4px solid #9333EA; }
.c-diagram-anatomy__layer--4 { background: #FEF3C7; border-left: 4px solid #D97706; }
.c-diagram-anatomy__layer--5 { background: #DCFCE7; border-left: 4px solid #16A34A; }

.c-diagram-anatomy__layer-num {
  font-size: 1.1rem;
  font-weight: 800;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--navy-900, #181A36);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.c-diagram-anatomy__layer-info {
  flex: 1;
}

.c-diagram-anatomy__layer-name {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy-900, #181A36);
  margin-bottom: 2px;
}

.c-diagram-anatomy__layer-desc {
  font-size: 0.85rem;
  color: var(--muted-600, #5A6072);
  margin: 0;
}

/* Grid dos 4 Quadros */
.c-quadros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 36px 0;
}

.c-quadro-card {
  background: #FFFFFF;
  border: 1px solid var(--gray-200, #E6E8EF);
  border-radius: var(--radius-md, 8px);
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.c-quadro-card--tarefas { border-top: 4px solid #3B82F6; }
.c-quadro-card--vendas { border-top: 4px solid #10B981; }
.c-quadro-card--financeiro { border-top: 4px solid #F59E0B; }
.c-quadro-card--projetos { border-top: 4px solid #8B5CF6; }

.c-quadro-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.c-quadro-card__title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy-900, #181A36);
  margin: 0 !important;
}

.c-quadro-card__desc {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted-600, #5A6072);
  margin-bottom: 12px;
}

.c-quadro-card__item {
  font-size: 0.85rem;
  background: var(--off, #F7F8FB);
  padding: 6px 10px;
  border-radius: 4px;
  margin-bottom: 6px;
  color: var(--graphite-900, #1E2330);
  font-weight: 500;
}

/* Cenário de Diálogos / Prazos */
.c-dialogue-scenario {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 36px 0;
}

@media (max-width: 680px) {
  .c-dialogue-scenario {
    grid-template-columns: 1fr;
  }
}

.c-dialogue-box {
  background: #FFFFFF;
  border-radius: var(--radius-md, 8px);
  padding: 20px;
  border: 1px solid var(--gray-200, #E6E8EF);
}

.c-dialogue-box--fragil {
  border-left: 4px solid #EF4444;
  background: #FEF2F2;
}

.c-dialogue-box--firme {
  border-left: 4px solid #10B981;
  background: #F0FDF4;
}

.c-dialogue-box__title {
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.c-dialogue-box--fragil .c-dialogue-box__title { color: #B91C1C !important; }
.c-dialogue-box--firme .c-dialogue-box__title { color: #047857 !important; }

.c-dialogue-box__msg {
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--navy-900, #181A36);
  margin-bottom: 10px;
}

.c-dialogue-box__result {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted-600, #5A6072);
}

/* Fluxo do Dinheiro */
.c-money-flow {
  background: #FFFFFF;
  border: 1px solid var(--gray-200, #E6E8EF);
  border-radius: var(--radius-lg, 16px);
  padding: clamp(20px, 4vw, 32px);
  margin: 36px 0;
}

.c-money-flow__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.c-money-flow__step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  background: var(--off, #F7F8FB);
  border-radius: var(--radius-sm, 4px);
  border-left: 4px solid var(--gold-500, #DCAB09);
}

.c-money-flow__badge {
  font-size: 0.85rem;
  font-weight: 800;
  background: var(--navy-900, #181A36);
  color: #FFFFFF;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.c-money-flow__info strong {
  display: block;
  font-size: 1rem;
  color: var(--navy-900, #181A36);
  margin-bottom: 4px;
}

.c-money-flow__info p {
  font-size: 0.9rem;
  color: var(--muted-600, #5A6072);
  margin: 0;
  line-height: 1.5;
}

/* Diagrama de Risco de Dependência */
.c-dependency-diagram {
  background: #FFFFFF;
  border: 1px solid var(--gray-200, #E6E8EF);
  border-radius: var(--radius-lg, 16px);
  padding: clamp(20px, 4vw, 32px);
  margin: 36px 0;
}

.c-dependency-diagram__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 680px) {
  .c-dependency-diagram__grid {
    grid-template-columns: 1fr;
  }
}

.c-dependency-card {
  padding: 18px;
  border-radius: var(--radius-md, 8px);
}

.c-dependency-card--risk {
  background: #FEF2F2;
  border: 1px solid #FECACA;
}

.c-dependency-card--safe {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
}

.c-dependency-card__title {
  font-size: 1rem;
  font-weight: 800;
  margin-top: 0 !important;
  margin-bottom: 8px;
}

.c-dependency-card--risk .c-dependency-card__title { color: #DC2626 !important; }
.c-dependency-card--safe .c-dependency-card__title { color: #16A34A !important; }

.c-dependency-card p {
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  color: var(--graphite-900, #1E2330);
}

/* Timeline da Transição */
.c-timeline {
  position: relative;
  padding-left: 28px;
  margin: 40px 0;
}

.c-timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--gold-500, #DCAB09);
}

.c-timeline__item {
  position: relative;
  margin-bottom: 32px;
}

.c-timeline__item:last-child {
  margin-bottom: 0;
}

.c-timeline__dot {
  position: absolute;
  left: -28px;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--navy-900, #181A36);
  border: 3px solid var(--gold-500, #DCAB09);
}

.c-timeline__year {
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8C6208;
  margin-bottom: 4px;
}

.c-timeline__title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy-900, #181A36);
  margin-top: 0 !important;
  margin-bottom: 8px;
}

.c-timeline__desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted-600, #5A6072);
  margin: 0;
}

/* Mapa dos 3 Nós */
.c-nodes-map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 36px 0;
}

.c-node-card {
  background: #FFFFFF;
  border: 1px solid var(--gray-200, #E6E8EF);
  border-radius: var(--radius-md, 8px);
  padding: 22px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.c-node-card--rotina { border-top: 4px solid #3B82F6; }
.c-node-card--atendimento { border-top: 4px solid #10B981; }
.c-node-card--financeiro { border-top: 4px solid #F59E0B; }

.c-node-card__num {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--navy-900, #181A36);
  margin-bottom: 4px;
}

.c-node-card__title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--navy-900, #181A36);
  margin-top: 0 !important;
  margin-bottom: 8px;
}

.c-node-card__text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted-600, #5A6072);
  margin-bottom: 14px;
}

.editorial-content .c-node-card a.c-node-card__link,
.c-node-card__link {
  font-size: 0.88rem;
  font-weight: 700;
  color: #8C6208 !important;
  text-decoration: none !important;
}

.editorial-content .c-node-card a.c-node-card__link:hover,
.c-node-card__link:hover {
  text-decoration: underline !important;
  color: var(--navy-900, #181A36) !important;
}

/* Checklist Interativo com Feedback */
.c-checklist {
  background: #FFFFFF;
  border: 1px solid var(--gray-200, #E6E8EF);
  border-radius: var(--radius-md, 8px);
  padding: clamp(20px, 3vw, 28px);
  margin: 36px 0;
}

.c-checklist__title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--navy-900, #181A36);
  margin-top: 0 !important;
  margin-bottom: 16px;
}

.c-checklist__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.c-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.c-checklist__label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--graphite-900, #1E2330);
}

.c-checklist__box {
  margin-top: 3px;
  width: 20px;
  height: 20px;
  accent-color: var(--navy-900, #181A36);
  cursor: pointer;
  flex-shrink: 0;
}

.c-checklist__feedback {
  margin-top: 18px;
  display: none;
  animation: fadeIn 0.25s ease;
}

.c-checklist__feedback-box {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: var(--radius-sm, 4px);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: #166534;
}

.c-checklist__feedback-icon {
  font-size: 1.1rem;
  font-weight: 800;
}

/* Citação Tipográfica */
.c-quote-highlight {
  margin: 40px 0;
  padding: 24px 32px;
  background: #FFFFFF;
  border-left: 4px solid var(--gold-500, #DCAB09);
  border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.c-quote-highlight__text {
  font-size: clamp(1.15rem, 1.2vw + 0.8rem, 1.35rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.5;
  color: var(--navy-900, #181A36);
  margin-bottom: 10px;
}

.c-quote-highlight__author {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--muted-600, #5A6072);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ProcessFlow */
.c-process-flow {
  background: #FFFFFF;
  border: 1px solid var(--gray-200, #E6E8EF);
  border-radius: var(--radius-lg, 16px);
  padding: clamp(20px, 4vw, 32px);
  margin: 36px 0;
}

.c-process-flow__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.c-process-flow__step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: var(--off, #F7F8FB);
  border-radius: var(--radius-sm, 4px);
}

.c-process-flow__num {
  font-size: 1.1rem;
  font-weight: 800;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy-900, #181A36);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.c-process-flow__info h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy-900, #181A36);
  margin: 0 0 4px 0 !important;
}

.c-process-flow__info p {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted-600, #5A6072);
  margin: 0;
}

/* Instagram Embed — Centralização Real e Limpeza Visual */
.c-ig-embed {
  margin: 36px 0;
  display: flex;
  justify-content: center;
  width: 100%;
}

.c-ig-embed__wrapper {
  background: #FFFFFF;
  border: 1px solid var(--gray-200, #E6E8EF);
  border-radius: var(--radius-md, 8px);
  padding: 16px;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.c-ig-embed__wrapper blockquote.instagram-media {
  margin: 0 auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  width: 100% !important;
}

.c-ig-embed__fallback {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.c-ig-embed__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted-600, #5A6072);
}

.c-ig-embed__quote {
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--navy-900, #181A36);
  border-left: 3px solid var(--gold-500, #DCAB09);
  padding-left: 12px;
  margin: 0;
}

.editorial-content .c-ig-embed a.c-ig-embed__link,
.c-ig-embed__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy-900, #181A36) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
  min-height: 44px;
}

.editorial-content .c-ig-embed a.c-ig-embed__link:hover,
.c-ig-embed__link:hover {
  color: var(--gold-600, #C99500) !important;
  text-decoration: underline !important;
}

/* Related Content */
.c-related-content {
  margin-top: 56px;
  padding-top: 36px;
  border-top: 2px solid var(--gray-200, #E6E8EF);
}

.c-related-content__heading {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--navy-900, #181A36);
  margin-top: 0 !important;
  margin-bottom: 20px;
}

.c-related-content__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.c-article-card {
  background: #FFFFFF;
  border: 1px solid var(--gray-200, #E6E8EF);
  border-radius: var(--radius-md, 8px);
  padding: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.c-article-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(24, 26, 54, 0.08);
  border-color: var(--gold-500, #DCAB09);
}

.c-article-card__topic {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8C6208;
  margin-bottom: 8px;
}

.c-article-card__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 0 !important;
  margin-bottom: 12px;
}

.editorial-content .c-article-card a,
.c-article-card__title a {
  color: var(--navy-900, #181A36) !important;
  text-decoration: none !important;
}

.editorial-content .c-article-card a:hover,
.c-article-card__title a:hover {
  color: var(--gold-600, #C99500) !important;
  text-decoration: underline !important;
}

.c-article-card__meta {
  font-size: 0.8rem;
  color: var(--muted-500, #8A8D98);
}

/* Animações e Acessibilidade */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}