/* ==========================================================================
   /precio/ — Planes y precios

   Solo lo específico de esta página. Tokens, reset, contenedor, botones,
   badge, animaciones y responsive global viven en global.css y no se repiten.
   Lo que escribe el borde (tarjetas, comparativa y preguntas) tiene su hoja,
   precio-planes.css: es el contrato de clases con functions/precio/_middleware.js.

   Invariantes del sistema que aquí se respetan sin excepción:
   - border-radius: 0 en todo (SYNC DS §5.1, §5.6, §5.7, §5.9).
   - Sombras solo de offset sólido con blur 0 (SYNC DS §5.10).
   - Bordes: 3px estructural, 2px interactivo, 4px acento — siempre por token.
   - Fondos en --c-paper, nunca --c-white: rompe la calidez del sistema.
   ========================================================================== */

/* ── S1 · Hero ─────────────────────────────────────────────────────────── */

/* A la izquierda, como todos los heroes del sitio (taste 2026-08-15). Compacto:
   la primera pantalla es del plan destacado, que va justo debajo y lleva el
   titular grande; el h1 nombra la página sin quitarle el sitio. */
.pr-hero {
  padding: var(--space-2xl) 0 var(--space-xl);
}

.pr-hero-title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: var(--leading-display);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-heading);
  color: var(--c-indigo);
  margin-bottom: var(--space-xs);
}

/* La promesa es la frase estrella y va en caja baja: POSITIONING §3-Hero
   reserva las versales al kicker y al wordmark. */
.pr-hero-promise {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--c-indigo);
  max-width: 46ch;
  margin: 0;
}

/* ── Bloques de texto ─────────────────────────────────────────────── */

/* El header es sticky: sin este margen, un enlace a un id de la página deja el
   titular debajo de la cabecera. Derivado de los tokens. */
main [id] {
  scroll-margin-top: calc(var(--nav-height) + var(--border-w-accent) + var(--space-md));
}

.pr-block {
  padding: var(--space-4xl) 0;
  border-top: var(--border-w-structural) solid var(--c-indigo);
}

/* BRAND_MANUAL §8.4: 65–78 caracteres por línea. `pr-narrow` va en el
   contenedor (16px de la raíz: 74ch ≈ 76 caracteres del texto de dentro). */
.pr-narrow {
  max-width: 74ch;
}

.pr-h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-heading);
  color: var(--c-indigo);
  margin-bottom: var(--space-lg);
}

/* Cuerpo de landing, BRAND_MANUAL §8.4: 19–20px, interlínea 1.8 y 32px de aire
   entre párrafos; en móvil, 17–18px. */
.pr-block p {
  font-size: var(--text-p);
  line-height: 1.8;
  color: var(--c-carbon);
  margin-bottom: var(--space-8);
}

/* ── S5 · Cierre ───────────────────────────────────────────────────────── */

/* Una franja Índigo con el nombre del plan destacado y su botón, que escribe
   el borde (un h2 y un .btn-primary, sin clases propias). Es la única pieza
   invertida de la página: cierra la parte de comprar antes del bloque de
   escuelas. */
.pr-cierre {
  background: var(--c-indigo);
  padding: var(--space-3xl) 0;
}

.pr-cierre-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.pr-cierre h2 {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-title);
  color: var(--c-paper);
  margin: 0;
}

/* SYNC DS §5.2: la sombra de una pieza sobre Índigo es Papel
   (`--shadow-blockout-inverse` en campus; global.css no tiene ese token). */
.pr-cierre .btn {
  box-shadow: 4px 4px 0 var(--c-paper);
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .pr-block p { font-size: var(--text-base); }
}

@media (max-width: 640px) {
  .pr-hero { padding: var(--space-lg) 0 var(--space-md); }
  .pr-cierre .btn { width: 100%; }
  .pr-block { padding: var(--space-3xl) 0; }
}