/* ============================================================================
 * KIVOR — Landing pública. Hermana del panel: mismos tokens de identidad
 * (base ciruela, acento lila, Libre Baskerville + Inter). Minimalista
 * intencional, editorial, calmado. El lila se gasta con parsimonia; el sello
 * de "confirmado" es donde la marca se hace sentir. CSS puro, sin build, sin JS.
 * ========================================================================== */

/* ── Fuentes auto-hospedadas (sin CDN) ──────────────────────────────────── */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fuentes/libre-baskerville-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fuentes/libre-baskerville-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fuentes/inter-var.woff2') format('woff2');
}

:root {
  /* Color — tokens del panel */
  --ink: #14131a;          /* fondo: near-black tintado ciruela */
  --superficie: #1d1b24;   /* paneles elevados (la tarjeta) */
  --superficie-2: #23212c; /* elevación mayor */
  --hairline: #2c2a35;     /* divisiones tipo extracto bancario */
  --texto: #eceaf2;
  --tenue: #9a96a8;
  --tenue-2: #6f6b7d;
  --lila: #c3b1e1;         /* ACENTO: sello, enlaces, números de paso */
  --lila-hondo: #6e5a99;
  --lila-tenue: #2a2436;

  --serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --t-hero: 2.5rem;
  --t-titulo: 1.375rem;
  --t-logo: 1.5rem;
  --t-cuerpo: 1rem;
  --t-etiqueta: 0.8125rem;

  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 72px;

  --radio: 8px;
  --radio-gd: 14px;
  --ancho: 64rem;   /* la página respira a lo ancho, no en una columna sola */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--texto);
  font-family: var(--sans);
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--lila); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--lila); outline-offset: 2px; border-radius: 2px; }

.monto { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; }

/* Contenedor común: ancho editorial, con aire lateral generoso ─────────── */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding-left: var(--e5);
  padding-right: var(--e5);
}

/* ── Logotipo (el punto lila: la certeza, único acento del nombre) ───────── */
.logo {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--t-logo);
  letter-spacing: 0.01em;
  color: var(--texto);
  display: inline-flex;
  align-items: baseline;
}
.logo-punto { color: var(--lila); }

/* ── Cabecera ───────────────────────────────────────────────────────────── */
.cabecera { border-bottom: 1px solid var(--hairline); }
.cabecera-inner { padding-top: var(--e4); padding-bottom: var(--e4); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  /* halo lila muy sutil detrás de la tarjeta: profundidad sin imágenes */
  background:
    radial-gradient(60rem 40rem at 85% 15%, var(--lila-tenue), transparent 55%);
}
.hero-inner {
  padding-top: var(--e8);
  padding-bottom: var(--e8);
  display: grid;
  gap: var(--e7);
  align-items: center;
}
.hero-texto { max-width: 34rem; }
.hero h1 {
  font-size: var(--t-hero);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--e5);
}
.hero .bajada {
  font-size: 1.125rem;
  color: var(--tenue);
  margin: 0;
}

/* ── Tarjeta-mockup: ejemplo de pago confirmado (CSS puro) ──────────────── */
.mock {
  background: var(--superficie);
  border: 1px solid var(--hairline);
  border-radius: var(--radio-gd);
  padding: var(--e5);
  max-width: 24rem;
  width: 100%;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.8);
}
.mock-cabecera {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--hairline);
}
.mock-sello {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--lila-tenue);
  color: var(--lila);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mock-sello svg { width: 1.25rem; height: 1.25rem; display: block; }
.mock-titulo { display: flex; flex-direction: column; line-height: 1.25; }
.mock-label { color: var(--texto); font-weight: 600; }
.mock-estado {
  color: var(--lila);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
.mock-ejemplo {
  margin-left: auto;
  align-self: flex-start;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tenue-2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 2px 8px;
}
.mock-monto {
  font-family: var(--serif);
  font-size: 2.25rem;
  line-height: 1.1;
  color: var(--texto);
  margin: var(--e4) 0 var(--e5);
}
.mock-detalle {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e4) var(--e3);
}
.mock-detalle dt {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tenue);
  margin-bottom: 2px;
}
.mock-detalle dd { margin: 0; color: var(--texto); overflow-wrap: anywhere; }
.mock-pie {
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--hairline);
  font-size: var(--t-etiqueta);
  color: var(--tenue);
}

/* ── Bandas de contenido ────────────────────────────────────────────────── */
.banda { border-top: 1px solid var(--hairline); }
.banda .contenedor { padding-top: var(--e8); padding-bottom: var(--e8); }
.eyebrow {
  display: block;
  font-size: var(--t-etiqueta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tenue);
  font-weight: 500;
  margin: 0 0 var(--e3);
}
.banda-titulo { font-size: var(--t-titulo); margin: 0 0 var(--e5); }
.prosa { max-width: 42rem; }
.prosa p { margin: 0 0 var(--e4); }
.prosa p:last-child { margin-bottom: 0; }
.prosa.tenue { color: var(--tenue); }
.dato-fuerte { color: var(--texto); font-weight: 600; }

/* ── Cómo funciona: rejilla de pasos ────────────────────────────────────── */
.pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e5);
}
.paso {
  border-top: 2px solid var(--hairline);
  padding-top: var(--e4);
}
.paso-num {
  display: block;
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--lila);
  line-height: 1;
  margin-bottom: var(--e3);
}
.paso-titulo { font-size: 1.0625rem; font-weight: 700; margin: 0 0 var(--e2); }
.paso-texto { margin: 0; color: var(--tenue); }

/* ── Cierre: empresa + contacto ─────────────────────────────────────────── */
.cierre { display: grid; gap: var(--e7); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.pie {
  border-top: 1px solid var(--hairline);
  color: var(--tenue-2);
  font-size: var(--t-etiqueta);
}
.pie .contenedor { padding-top: var(--e5); padding-bottom: var(--e5); }
.pie a { color: var(--tenue-2); }
.pie a:hover { color: var(--lila); }

/* ── Escritorio ─────────────────────────────────────────────────────────── */
@media (min-width: 720px) {
  :root { --t-hero: 3.25rem; --t-titulo: 1.5rem; }
  .pasos { grid-template-columns: repeat(3, 1fr); gap: var(--e6); }
  .cierre { grid-template-columns: 1fr 1fr; gap: var(--e8); }
}

@media (min-width: 900px) {
  :root { --t-hero: 3.5rem; }
  .hero-inner {
    grid-template-columns: 1fr auto;
    gap: var(--e8);
  }
  .mock { justify-self: end; }
}