/* ==========================================================================
   /precio/ — lo que escribe el borde: las tarjetas de los planes secundarios

   Cada clase de aquí la pinta functions/precio/_middleware.js con lo que sirve
   campus: renombrar una es renombrarla allí. Va aparte de precio.css porque es
   ese contrato, no la maquetación de la página. El resto del contrato, partido
   por responsabilidad: el plan destacado y la escalera en precio-estrella.css,
   la comparativa y las preguntas en precio-comparativa.css. Las piezas comunes
   (aviso, lista, botón) viven aquí y las usa también el destacado.

   Invariantes: radio 0, sombras de offset sin blur, bordes por token y fondos
   en --c-paper (SYNC DS §5.1, §5.6, §5.9, §5.10).
   ========================================================================== */

/* ── S2 · Tarjetas de los demás planes ─────────────────────────────────── */

.pr-plans {
  padding: var(--space-3xl) 0;
}

/* Las tarjetas estiran a la misma altura (stretch, el valor por defecto) para
   que los botones queden en la misma línea: botones a alturas distintas sesgan
   la comparación antes de leer nada. Tantas columnas como planes mande campus,
   con un mínimo que en móvil deja una. */
.pr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-xl);
}

/* SYNC DS §5.6: card blockout — fondo papel, borde estructural, sombra sólida. */
.pr-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm2);
  padding: var(--space-xl);
  background: var(--c-paper);
  border: var(--border-w-structural) solid var(--c-indigo);
  box-shadow: var(--shadow-blockout);
}

/* La reserva, cuando campus no contesta: una sola tarjeta a ancho de lectura. */
.pr-card--sola {
  grid-column: 1 / -1;
  max-width: 40rem;
}

/* La etiqueta, si campus la manda: del ancho de su texto, no de la tarjeta. */
.pr-card-badge {
  align-self: flex-start;
}

.pr-card-name {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-heading);
  color: var(--c-indigo);
}

.pr-card-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm);
  color: var(--c-indigo);
}

.pr-amount {
  font-family: var(--font-heading);
  font-size: 3.2rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pr-period {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Los demás precios del mismo plan (otro periodo, o hasta dónde baja). Coral sobre papel da 3.89:1: cumple AA como
   texto grande (>=18.66px en negrita) y por eso va a 1.2rem/900. */
.pr-card-equiv {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--c-coral);
  font-variant-numeric: tabular-nums;
}

/* Lo que cambia hoy por el periodo abierto: una línea con el acento lateral,
   para que se lea como aviso y no como un beneficio más. */
.pr-card-aviso {
  padding-left: var(--space-md);
  border-left: var(--border-w-accent) solid var(--c-coral);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--c-indigo);
}

.pr-card-claim {
  font-size: var(--text-sm);
  color: var(--c-carbon);
}

.pr-card-sub {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  /* 0.80 y no 0.60: a 0.72rem, el 60% se quedaba en 3.75:1. */
  color: rgb(var(--c-indigo-rgb) / 0.80);
  margin-top: var(--space-sm);
}

.pr-card-list {
  list-style: none;
  display: grid;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--c-carbon);
}

.pr-card-list li {
  padding-left: var(--space-md);
  border-left: var(--border-w-interactive) solid rgb(var(--c-indigo-rgb) / 0.20);
  line-height: 1.45;
}

/* La viñeta tiene dos mitades —qué es y cuánto da— y el ojo tiene que poder
   separarlas de un vistazo. */
.pr-card-list li strong {
  font-weight: 700;
  color: var(--c-indigo);
}

/* La acción se pega al fondo para que todas queden a la misma altura aunque
   las tarjetas tengan distinto número de líneas. La que no se puede hacer hoy
   ocupa el mismo sitio y dice por qué, sin parecer un botón. */
.pr-cta,
.pr-cta-off {
  margin-top: auto;
  width: 100%;
  /* La misma caja para los dos: si no, el que no se puede hacer queda más bajo
     y los botones de la fila dejan de estar a la misma altura. */
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-md2);
  margin-bottom: 0;
  font-size: 0.9rem;
}

.pr-cta-off {
  border: var(--border-w-interactive) dashed rgb(var(--c-indigo-rgb) / 0.35);
  font-family: var(--font-heading);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  color: var(--c-indigo);
}

/* El resto de beneficios no se repite aquí: está en la tabla, con su cifra.
   Enlace (Coral oscuro, texto), con la altura táctil de §5.1. */
.pr-card-mas {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--c-coral-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pr-card-mas:focus-visible {
  outline: 0;
  box-shadow: var(--shadow-focus);
}

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

@media (max-width: 640px) {
  .pr-grid { gap: var(--space-lg); }
  .pr-amount { font-size: 2.6rem; }
}