/* ═══════════════════════════════════════════
   Feature Landing Pages — feature.css
   ═══════════════════════════════════════════ */

/* ── Hero ── */
.feat-hero {
  background: var(--mn-nav-bg);
  color: #fff;
  padding: 4rem 0 3.5rem;
  text-align: center;
  border-bottom: 2px solid var(--mn-accent);
}
.feat-hero-label {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mn-accent);
  background: rgba(194,65,12,.15); border: 1px solid rgba(194,65,12,.3);
  padding: .3rem .75rem; border-radius: 20px; margin-bottom: 1.25rem;
}
.feat-hero h1 {
  font-family: var(--mn-display); font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  color: #fff; margin-bottom: 1rem; line-height: 1.15;
}
.feat-hero h1 em { color: var(--mn-accent); font-style: italic; }
.feat-hero p {
  font-size: 1.05rem; color: rgba(255,255,255,.65);
  max-width: 560px; margin: 0 auto 1.75rem; line-height: 1.65;
}
.feat-hero-ctas {
  display: flex; align-items: center; justify-content: center;
  gap: .75rem; flex-wrap: wrap;
}
.feat-hero-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--mn-accent); color: #fff;
  font-weight: 700; font-size: .9rem;
  padding: .65rem 1.5rem; border-radius: 9px;
  text-decoration: none; transition: all .15s;
}
.feat-hero-cta:hover { background: var(--mn-accent-h); color: #fff; transform: translateY(-1px); }
.feat-hero-demo {
  display: inline-flex; align-items: center; gap: .4rem;
  background: transparent; color: rgba(255,255,255,.65);
  font-weight: 600; font-size: .85rem;
  padding: .65rem 1.25rem; border-radius: 9px;
  text-decoration: none; border: 1px solid rgba(255,255,255,.2);
  transition: all .15s;
}
.feat-hero-demo:hover { color: #fff; border-color: rgba(255,255,255,.5); }

/* ── Screenshot mockup ── */
.feat-mockup-wrap {
  margin-top: 2.5rem; padding: 0 1rem;
}
.feat-mockup {
  max-width: 900px; margin: 0 auto;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.08);
}
.feat-mockup-bar {
  background: #2a2825; padding: .55rem 1rem;
  display: flex; align-items: center; gap: .4rem;
}
.feat-mockup-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.feat-mockup-dot.red { background: #ff5f57; }
.feat-mockup-dot.yellow { background: #ffbd2e; }
.feat-mockup-dot.green { background: #28c840; }
.feat-mockup-url {
  flex: 1; background: rgba(255,255,255,.07); border-radius: 5px;
  padding: .2rem .75rem; font-size: .72rem;
  color: rgba(255,255,255,.4); margin: 0 .5rem;
}
.feat-mockup img {
  display: block; width: 100%; height: auto;
}

/* ── Content sections ── */
.feat-section {
  padding: 4rem 0;
}
.feat-section + .feat-section {
  border-top: 1px solid var(--mn-border);
}
.feat-section-label {
  font-size: .65rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mn-accent); margin-bottom: .5rem;
}
.feat-section h2 {
  font-family: var(--mn-display); font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--mn-ink); margin-bottom: .75rem; line-height: 1.2;
}
.feat-section p {
  color: var(--mn-ink-2); line-height: 1.7; font-size: .95rem;
  max-width: 600px;
}

/* ── Feature grid (bullets/cards) ── */
.feat-detail-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem; margin-top: 2rem;
}
.feat-detail-card {
  background: var(--mn-surface); border: 1px solid var(--mn-border);
  border-radius: 12px; padding: 1.25rem;
  transition: box-shadow .15s, border-color .15s;
}
.feat-detail-card:hover {
  box-shadow: var(--mn-shadow);
  border-color: var(--mn-accent);
}
.feat-detail-icon {
  font-size: 1.4rem; margin-bottom: .6rem;
}
.feat-detail-card h4 {
  font-size: .88rem; font-weight: 700; color: var(--mn-ink);
  margin-bottom: .35rem;
}
.feat-detail-card p {
  font-size: .78rem; color: var(--mn-muted); line-height: 1.5; max-width: none;
}

/* ── Split row (image + text) ── */
.feat-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3rem; align-items: center;
}
.feat-split.reverse { direction: rtl; }
.feat-split.reverse > * { direction: ltr; }
.feat-split-img {
  border-radius: 12px; overflow: hidden;
  box-shadow: var(--mn-shadow);
  border: 1px solid var(--mn-border);
}
.feat-split-img img { display: block; width: 100%; height: auto; }
.feat-split-text { }
.feat-split-bullets {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .5rem;
}
.feat-split-bullets li {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .87rem; color: var(--mn-ink-2); line-height: 1.5;
}
.feat-split-bullets li::before {
  content: '✓'; color: var(--mn-green); font-weight: 700;
  flex-shrink: 0; margin-top: .05rem;
}

/* ── Diferenciador final ── */
.feat-diff {
  background: var(--mn-nav-bg);
  border-top: 2px solid var(--mn-accent);
  padding: 4rem 0;
  text-align: center;
}
.feat-diff h2 {
  font-family: var(--mn-display); font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: #fff; margin-bottom: 1rem; line-height: 1.2;
}
.feat-diff h2 em { color: var(--mn-accent); font-style: italic; }
.feat-diff p {
  color: rgba(255,255,255,.6); font-size: .95rem; line-height: 1.7;
  max-width: 620px; margin: 0 auto 2rem;
}
.feat-diff-pills {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
  margin-bottom: 2.5rem;
}
.feat-diff-pill {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.75); font-size: .75rem; font-weight: 600;
  padding: .35rem .85rem; border-radius: 20px;
}
.feat-diff-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--mn-accent); color: #fff;
  font-weight: 700; font-size: .95rem;
  padding: .75rem 2rem; border-radius: 10px;
  text-decoration: none; transition: all .15s;
}
.feat-diff-cta:hover { background: var(--mn-accent-h); color: #fff; transform: translateY(-2px); }

@media (max-width: 768px) {
  .feat-split { grid-template-columns: 1fr; gap: 1.5rem; }
  .feat-split.reverse { direction: ltr; }
  .feat-hero { padding: 2.5rem 0 2rem; }
}