/* Landing pública — Máquina de Narrativa */

.hero {
  background: linear-gradient(135deg, var(--dark) 0%, var(--navy) 60%, var(--navy-2) 100%);
  color: var(--white);
  padding: 80px 24px 100px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -120px; top: -120px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,.25) 0%, transparent 70%);
}
.hero-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-lt); margin-bottom: 20px;
}
.hero .eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--gold); }
.hero h1 {
  color: var(--white); font-size: clamp(34px, 5vw, 54px); max-width: 820px; margin-bottom: 18px;
}
.hero h1 em { font-style: normal; color: var(--gold-lt); }
.hero p.lead { font-size: 19px; opacity: .9; max-width: 640px; margin-bottom: 32px; }
.hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .price { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.85); margin-top: 22px; font-size: 14px; }
.hero .price strong { color: var(--white); font-size: 17px; }

/* Sections */
.section { padding: 72px 24px; }
.section-inner { max-width: 1100px; margin: 0 auto; }
.section h2 { text-align: center; margin-bottom: 12px; }
.section .section-sub { text-align: center; color: var(--text-2); max-width: 620px; margin: 0 auto 48px; font-size: 17px; }

.features {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.feature {
  background: var(--white); border-radius: var(--radius-lg); padding: 28px;
  box-shadow: var(--shadow); border-top: 3px solid var(--gold);
}
.feature .icon {
  width: 44px; height: 44px; border-radius: 10px; background: var(--gold-bg);
  display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px;
}
.feature h3 { margin-bottom: 8px; }
.feature p { color: var(--text-2); font-size: 15px; }

.steps {
  display: grid; gap: 22px; counter-reset: step;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.step {
  background: var(--white); border-radius: var(--radius-lg); padding: 28px; position: relative;
  box-shadow: var(--shadow); counter-increment: step;
}
.step::before {
  content: counter(step); position: absolute; top: -16px; left: 24px;
  width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: var(--gold);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px;
  box-shadow: var(--shadow);
}
.step h3 { margin: 8px 0; }
.step p { color: var(--text-2); }

.cta-band {
  background: var(--navy); color: var(--white); border-radius: var(--radius-lg);
  padding: 48px 32px; text-align: center; max-width: 1100px; margin: 0 auto;
}
.cta-band h2 { color: var(--white); margin-bottom: 12px; }
.cta-band p { opacity: .85; margin-bottom: 24px; max-width: 560px; margin-left: auto; margin-right: auto; }

footer.site-footer {
  padding: 32px 24px; text-align: center; color: var(--text-3); font-size: 13px; border-top: 1px solid var(--border);
}