/* =========================================================
   start.css — La pantalla previa al pago
   RUTH.il

   NO DECLARA :root A PROPÓSITO.
   Los colores, las tipografías y la escala de espaciado vienen de
   shared/css/tokens.css, que se carga antes. Si hace falta un color
   que no está allí, se añade allí.

   LA MAQUETACIÓN TIENE UNA REGLA QUE NO ES DECORATIVA
   ---------------------------------------------------
   Precio, duración y requisitos van ARRIBA del botón. Es la regla del
   sistema de diseño del NHS: mucha gente no baja, y si lo crítico
   queda debajo del botón, no lo lee nadie. Por eso el botón está al
   final del artículo y no flotando arriba.
   ========================================================= */

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Barra superior ─────────────────────────────────────────────
   components/navbar/navbar.css resuelve la barra, el logo y la parte
   derecha, pero NO los enlaces del centro: cada pantalla los estiliza.
   Sin esto salen como enlaces sueltos, azules y subrayados. */

/* El contenedor centrado de esta barra ya NO está aquí: se subió a
   components/navbar/navbar.css, que lo aplica a las 24 pantallas. Esto
   era el parche de una sola pantalla; ahora es la regla de la casa. */

.navbar-ruth .nav-links {
  display: flex;
  align-items: center;
  gap: var(--esp-5);
}
.navbar-ruth .nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tactil-min);
  color: var(--text-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.navbar-ruth .nav-link:hover { color: var(--text-1); }

@media (max-width: 640px) {
  /* En móvil no caben y esta pantalla no necesita navegación: lo que
     hace falta es el enlace de volver, que está dentro del contenido. */
  .navbar-ruth .nav-links { display: none; }
}

.start-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding-inline: var(--esp-4);
  padding-block: var(--esp-6) var(--esp-8);
}

/* ── Volver ─────────────────────────────────────────────────────── */

.start-volver {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: var(--tactil-min);
  color: var(--text-2);
  text-decoration: none;
  font-size: 14px;
}
.start-volver:hover { color: var(--text-1); text-decoration: underline; }

/* ── Estados de carga y error ───────────────────────────────────── */

.start-cargando,
.start-error { padding-block: var(--esp-7); }
.start-cargando p { color: var(--text-3); }
.start-error h1 { font-family: var(--f-display); font-size: 1.8rem; margin: 0 0 var(--esp-3); }
.start-error p  { color: var(--text-2); margin: 0 0 var(--esp-5); }

/* ── Encabezado de la ficha ─────────────────────────────────────── */

.start-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* Antes esta clase de etiqueta usaba el magenta directo, que sobre
     fondo oscuro da 3,75:1 y no llega al mínimo para texto pequeño. */
  color: var(--magenta-texto);
  margin: var(--esp-5) 0 var(--esp-3);
}

.start-titulo {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: 1.12;
  margin: 0 0 var(--esp-3);
  text-wrap: balance;
}

.start-descripcion {
  color: var(--text-2);
  font-size: 1.05rem;
  margin: 0 0 var(--esp-6);
  max-width: 58ch;
}

/* ── Los tres datos que deciden ─────────────────────────────────── */

.start-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 0 var(--esp-6);
}

.start-dato {
  background: var(--bg-2);
  padding: var(--esp-4) var(--esp-4) var(--esp-5);
}
.start-dato dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--esp-2);
}
.start-dato dd {
  margin: 0;
  color: var(--text-1);
  font-size: 15px;
  line-height: 1.4;
}
.start-dato-fuerte {
  font-family: var(--f-display);
  font-size: 1.9rem !important;
  line-height: 1.1 !important;
  font-variant-numeric: tabular-nums;
}

/* ── Bloques de contenido ───────────────────────────────────────── */

.start-bloque { margin-bottom: var(--esp-6); }
.start-bloque h2 {
  font-family: var(--f-display);
  font-size: 1.25rem;
  margin: 0 0 var(--esp-3);
}
.start-bloque p {
  color: var(--text-2);
  margin: 0;
  max-width: 62ch;
}
.start-bloque-nota {
  font-size: 14px;
  margin-bottom: var(--esp-4) !important;
}

.start-bloque--requisitos {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--esp-5);
}

.start-requisitos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}
.start-requisitos li {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  color: var(--text-1);
  font-size: 15px;
  line-height: 1.45;
}
.start-requisitos li i {
  color: var(--success);
  margin-top: 3px;
  flex: none;
}
.start-requisitos li span { flex: 1; }

/* ── Acción ─────────────────────────────────────────────────────── */

.start-accion {
  border-top: 1px solid var(--border);
  padding-top: var(--esp-6);
  margin-bottom: var(--esp-5);
}

.start-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tactil-min);
  padding: var(--esp-3) var(--esp-6);
  border-radius: var(--radius-sm);
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--border-strong);
  color: var(--text-1);
  background: var(--bg-3);
  transition: transform .12s ease, filter .12s ease;
}
.start-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }

.start-btn--primario {
  background: var(--accent);
  /* El color del texto encima del acento lo decide el tema, no esta
     hoja: en oscuro el acento es crema y pide tinta; en claro es dorado
     oscuro y pide blanco. Ver --accent-ink en tokens.css. */
  color: var(--accent-ink);
  border-color: transparent;
}

.start-accion-nota {
  color: var(--text-3);
  font-size: 13.5px;
  margin: var(--esp-3) 0 0;
  max-width: 58ch;
}

.start-otra-via {
  color: var(--text-3);
  font-size: 14px;
  margin: 0;
}
.start-otra-via a { color: var(--text-2); }

@media (max-width: 480px) {
  /* En móvil el botón ocupa el ancho: es la acción de la pantalla y
     no compite con nada. */
  .start-btn { width: 100%; }
}