/* File: /modules/landing/css/landing.css
 * Portada.
 *
 * Reutiliza el sistema visual del panel (card, btn, badge, grid) en lugar de
 * inventar el suyo. Es lo que hace que la portada y el producto se vean de la
 * misma casa: quien se registra no siente que entró a otro sitio.
 */

body.landing { padding-top: var(--nav-h); }

/* ── Barra ────────────────────────────────────────────────────────────────── */

.lp-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .lp-nav { background: var(--surface); }
}

/* La fila de la barra. Clase propia y no .row: .row es un nombre que Bootstrap
   también usa —para columnas de rejilla— y en la barra el choque se veía a
   simple vista. */
.lp-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  /* nowrap es la regla que impide que la barra se desborde hacia abajo: si algo
     no cabe, se encoge o se recorta, pero nunca salta a otro renglón encima del
     contenido. */
  flex-wrap: nowrap;
  min-width: 0;
}

.lp-nav-inner .brand { flex: 0 1 auto; min-width: 0; overflow: hidden; }

.lp-nav-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

/* En pantallas estrechas la barra se queda con lo esencial: entrar y crear
   cuenta. Apretar cuatro controles en 360 px no los hace accesibles, los hace
   imposibles de acertar. */
@media (max-width: 480px) {
  .lp-nav-actions .nav-btn { display: none; }
  .lp-nav-actions .btn-sm  { padding: 7px 11px; font-size: .82rem; }
}

/* ── Portada ──────────────────────────────────────────────────────────────── */

.lp-hero {
  padding: 52px 0 60px;
  /* Un solo halo del color de acento. Sigue al tema del admin, así que la
     portada cambia de color con el resto del sitio sin tocar este archivo. */
  background: radial-gradient(900px 420px at 15% -10%, var(--accent-soft), transparent 68%);
}

.lp-hero-grid {
  display: grid;
  gap: 44px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .lp-hero { padding: 78px 0 88px; }
  .lp-hero-grid { grid-template-columns: 1.08fr .92fr; gap: 56px; }
}

.lp-h1 {
  font-size: clamp(2rem, 6vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 720;
  margin-top: 14px;
}
.lp-sub {
  font-size: clamp(1rem, 2.4vw, 1.16rem);
  color: var(--text-soft);
  margin-top: 14px;
  max-width: 520px;
  line-height: 1.6;
}

.lp-h2 {
  font-size: clamp(1.4rem, 3.6vw, 2rem);
  letter-spacing: -.028em;
  font-weight: 690;
}

/* La dirección de ejemplo. Es el elemento que más explica el producto. */
.lp-url {
  display: inline-flex;
  align-items: center;
  margin-top: 24px;
  padding: 11px 18px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(.9rem, 2.4vw, 1.02rem);
  max-width: 100%;
  overflow: hidden;
}
.lp-url-fixed { color: var(--text-soft); }
.lp-url-var {
  color: var(--accent);
  font-weight: 640;
  border-bottom: 2px solid var(--accent-line);
  margin-left: 1px;
}

/* ── Demo en teléfono ─────────────────────────────────────────────────────── */

.lp-phone {
  justify-self: center;
  width: min(268px, 82vw);
  aspect-ratio: 9 / 18.5;
  padding: 11px;
  background: linear-gradient(160deg, #2a2f3a, #14171e);
  border-radius: 38px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
}

.lp-phone-screen {
  height: 100%;
  border-radius: 28px;
  background: #0f1117;
  color: #f2f4f8;
  padding: 30px 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.lp-demo-pic {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.3rem;
}
.lp-demo-name { margin-top: 12px; font-weight: 660; font-size: .98rem; }
.lp-demo-role { font-size: .76rem; color: #9aa4b6; margin-top: 3px; }

.lp-demo-links {
  width: 100%;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.lp-demo-link {
  background: #fff;
  color: #0f1117;
  border-radius: 11px;
  padding: 11px 12px;
  font-size: .8rem;
  font-weight: 600;
  text-align: center;
}

/* ── Secciones ────────────────────────────────────────────────────────────── */

.lp-section { padding: 56px 0; }
.lp-alt     { background: var(--surface-2); }

.lp-step { text-align: center; padding: 8px; }

.lp-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 12px;
}
.lp-step h3 { font-size: 1.02rem; margin-bottom: 6px; }

.lp-feat-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
}

.lp-biz { display: flex; gap: 28px; align-items: center; }

.lp-list { display: flex; flex-direction: column; gap: 10px; }
.lp-list li { display: flex; align-items: flex-start; gap: 9px; font-size: .94rem; }
.lp-list .ic { color: var(--accent); flex: 0 0 auto; margin-top: 2px; }