/* ═══════════════════════════════════════════════════════════════
   landing.css — hoja compartida para landings de servicio y clúster.
   Ligera y theme-aware. Sin Tailwind ni icon-fonts externos (CWV).
   Marca: navy #04284C · verde #00d67e · rojo #9D0C1B.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --l-bg: #F4F6FA; --l-bg2: #EBF0F7;
  --l-panel: #ffffff; --l-panel2: #F8FAFD;
  --l-text: #0B1426; --l-dim: #475569; --l-muted: #7A889C;
  --l-border: rgba(11,20,38,.09); --l-border2: rgba(11,20,38,.14);
  --l-navy: #04284C; --l-navy2: #063a6e;
  --l-green: #00b46a; --l-green2: #00d67e;
  --l-red: #9D0C1B;
  --l-r: 14px; --l-r-sm: 9px;
  --l-max: 1120px;
  --l-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --l-head: 'Outfit', var(--l-font);
  --l-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}
:root[data-theme="dark"] {
  --l-bg: #060A11; --l-bg2: #0B1120;
  --l-panel: #0F1729; --l-panel2: #141E33;
  --l-text: #E6EDF6; --l-dim: #9FB0C4; --l-muted: #64748B;
  --l-border: rgba(255,255,255,.08); --l-border2: rgba(255,255,255,.14);
  --l-navy: #0A1A30; --l-navy2: #0E294a;
  --l-green: #00d67e; --l-green2: #33e39b;
}

* { box-sizing: border-box; }
.lp { margin: 0; font-family: var(--l-font); color: var(--l-text);
  background: var(--l-bg); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.lp img { max-width: 100%; height: auto; }
.lp a { color: inherit; text-decoration: none; }

.lp-wrap { max-width: var(--l-max); margin: 0 auto; padding: 0 22px; }

/* ── Nav ─────────────────────────────────────────────────────── */
.lp-nav { position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--l-bg) 86%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--l-border); }
.lp-nav .lp-wrap { display: flex; align-items: center; justify-content: space-between;
  height: 62px; gap: 18px; }
.lp-brand { display: flex; align-items: center; gap: 10px; font-family: var(--l-head);
  font-weight: 800; letter-spacing: -.01em; }
.lp-brand img { height: 30px; width: auto; border-radius: 6px; }
.lp-navlinks { display: flex; gap: 22px; font-size: .93rem; font-weight: 600; color: var(--l-dim); }
.lp-navlinks a:hover { color: var(--l-text); }
@media (max-width: 760px) { .lp-navlinks { display: none; } }

/* ── Botones ─────────────────────────────────────────────────── */
.lp-btn { display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--l-head); font-weight: 700; font-size: .95rem;
  padding: 12px 22px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.lp-btn:hover { transform: translateY(-1px); }
.lp-btn-primary { background: linear-gradient(135deg, var(--l-green) 0%, var(--l-green2) 100%);
  color: #04231a; box-shadow: 0 8px 24px -10px var(--l-green); }
.lp-btn-ghost { background: transparent; color: var(--l-text); border-color: var(--l-border2); }

/* ── Hero ────────────────────────────────────────────────────── */
.lp-hero { position: relative; padding: 74px 0 58px;
  background: radial-gradient(1100px 420px at 78% -8%, color-mix(in srgb, var(--l-green) 14%, transparent), transparent 60%),
              linear-gradient(180deg, var(--l-bg2), var(--l-bg)); }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--l-mono); font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--l-green);
  background: color-mix(in srgb, var(--l-green) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--l-green) 30%, transparent);
  padding: 6px 13px; border-radius: 999px; }
.lp-hero h1 { font-family: var(--l-head); font-weight: 900; letter-spacing: -.025em;
  font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.05; margin: 20px 0 14px; max-width: 18ch; }
.lp-hero p.lead { font-size: clamp(1.05rem, 2.2vw, 1.28rem); color: var(--l-dim);
  max-width: 60ch; margin: 0 0 28px; }
.lp-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Secciones ───────────────────────────────────────────────── */
.lp-section { padding: 56px 0; }
.lp-section.alt { background: var(--l-panel2); border-block: 1px solid var(--l-border); }
.lp-kicker { font-family: var(--l-mono); font-size: .76rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--l-green); margin: 0 0 8px; }
.lp-h2 { font-family: var(--l-head); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.12; margin: 0 0 14px; }
.lp-sub { color: var(--l-dim); font-size: 1.05rem; max-width: 68ch; margin: 0 0 30px; }

/* GEO/AEO — bloques de respuesta */
.lp-answer { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.lp-card { background: var(--l-panel); border: 1px solid var(--l-border);
  border-radius: var(--l-r); padding: 24px; }
.lp-card h3 { font-family: var(--l-head); font-weight: 700; font-size: 1.12rem; margin: 0 0 8px;
  display: flex; align-items: center; gap: 9px; }
.lp-card h3::before { content: ""; width: 9px; height: 9px; border-radius: 3px;
  background: var(--l-green); flex: none; }
.lp-card p { margin: 0; color: var(--l-dim); font-size: .97rem; }

.lp-features { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lp-feature { padding: 20px 22px; border: 1px solid var(--l-border); border-radius: var(--l-r);
  background: var(--l-panel); }
.lp-feature strong { display: block; font-family: var(--l-head); font-size: 1.02rem; margin-bottom: 5px; }
.lp-feature span { color: var(--l-dim); font-size: .93rem; }

.lp-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lp-list li { position: relative; padding-left: 30px; color: var(--l-dim); }
.lp-list li::before { content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--l-green); font-weight: 800; }

/* ── FAQ (visible → habilita FAQPage) ────────────────────────── */
.lp-faq { display: grid; gap: 12px; max-width: 820px; }
.lp-faq details { background: var(--l-panel); border: 1px solid var(--l-border);
  border-radius: var(--l-r-sm); padding: 4px 18px; }
.lp-faq summary { cursor: pointer; font-family: var(--l-head); font-weight: 700;
  padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; color: var(--l-green); font-weight: 800; font-size: 1.3rem; }
.lp-faq details[open] summary::after { content: "−"; }
.lp-faq details p { margin: 0 0 16px; color: var(--l-dim); }

/* ── CTA final ───────────────────────────────────────────────── */
.lp-final { padding: 66px 0; text-align: center;
  background: linear-gradient(135deg, var(--l-navy), var(--l-navy2)); color: #EAF2FB; }
.lp-final h2 { font-family: var(--l-head); font-weight: 900; font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  letter-spacing: -.02em; margin: 0 0 12px; }
.lp-final p { color: #B9C9DC; max-width: 52ch; margin: 0 auto 26px; font-size: 1.08rem; }

/* ── Footer ──────────────────────────────────────────────────── */
.lp-footer { background: var(--l-panel2); border-top: 1px solid var(--l-border);
  padding: 40px 0; font-size: .9rem; color: var(--l-muted); }
.lp-footer .lp-wrap { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; }
.lp-footer a { color: var(--l-dim); }
.lp-footer a:hover { color: var(--l-text); }
.lp-crumb { font-size: .84rem; color: var(--l-muted); margin-bottom: 26px; }
.lp-crumb a:hover { color: var(--l-green); }

@media (prefers-reduced-motion: reduce) { .lp-btn { transition: none; } }