/* ==========================================================================
   /precio/ — lo que escribe el borde arriba: el plan destacado y su escalera

   Mitad del contrato con functions/precio/_middleware.js (las tarjetas, en
   precio-planes.css; la comparativa y las preguntas, en precio-comparativa.css):
   renombrar una clase es renombrarla allí. El destacado usa además el aviso, la
   lista y el botón de precio-planes.css, que son los mismos que en las tarjetas.

   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).
   ========================================================================== */

/* ── S1b · El plan destacado ───────────────────────────────────────────── */

/* Pegado al hero: la primera pantalla tiene que enseñar la idea del plan y su
   botón, no un titular de página y un hueco. */
.pr-estrella {
  padding: 0;
}

/* SYNC DS §5.6: tarjeta destacada — el borde de acento y la sombra levantada
   son la jerarquía; el fondo sigue siendo Papel. Dos columnas: el precio, que
   es la idea, a la izquierda y ancho; la acción y lo que incluye, al lado. */
.pr-estrella-panel {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  background: var(--c-paper);
  border: var(--border-w-structural) solid var(--c-indigo);
  border-left: var(--border-w-accent) solid var(--c-coral);
  box-shadow: var(--shadow-blockout-hover);
}

.pr-estrella-precio {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-2xl);
}

.pr-estrella-accion {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-2xl) var(--space-xl);
  border-left: var(--border-w-structural) solid var(--c-indigo);
}

/* El nombre del plan cuando el titular es otro, y su etiqueta. Kicker: Coral
   oscuro, porque es texto pequeño (§5.3). */
.pr-estrella-plan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm2);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-coral-dark);
  margin: 0;
}

.pr-estrella-titular {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.6vw, 4.25rem);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-heading);
  color: var(--c-indigo);
  margin: 0;
  text-wrap: balance;
}

/* Sin escalera (respuesta anterior a ADR-180), el precio de siempre, más grande. */
.pr-estrella .pr-amount { font-size: clamp(3.2rem, 6vw, 5rem); }

/* La acción, lo primero de su columna; la nota de la escalera, justo debajo.
   El hueco lo pone la columna. */
.pr-estrella .pr-cta,
.pr-estrella .pr-escalera-nota { margin-top: 0; }

/* Aquí la lista es solo títulos y es lo que hace decidir: a tamaño de cuerpo y
   en Índigo, no como letra pequeña de tarjeta. */
.pr-estrella .pr-card-list {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--c-indigo);
}

/* ── La escalera: el precio de un plan que baja mes a mes ─────────────── */

/* Una columna por peldaño, tantas como mande campus. Cada peldaño mide lo que
   su importe frente al primero (`--alto`, de 0 a 1, lo calcula el borde) y
   todos apoyan en la misma línea: se lee como escalera que baja antes de leer
   una cifra. Los peldaños casi se tocan —el hueco es el mínimo de la escala—
   para que la silueta sea una sola pieza. */
.pr-escalera {
  --escalera-alto: 6rem;
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-xs);
  margin: var(--space-sm) 0 0;
  padding: 0;
}

/* El orden del DOM es el de lectura («1.er mes, 15 €»); el visual pone la
   cifra encima de su barra y el mes debajo de la línea. */
.pr-peldano {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  min-width: 0;
  text-align: center;
  /* La cifra se mide contra el ancho de su peldaño (abajo, `cqi`). */
  container-type: inline-size;
}

/* La cifra va en una línea y cabe en su peldaño: su tamaño es `--importe`
   salvo que la columna sea más estrecha. «US$7,50», la más ancha de hoy, mide
   3,55 em en Gobold: a 26cqi ocupa el 92 % de la columna. Sin consultas de
   contenedor, se queda en `--importe`. */
.pr-peldano-importe {
  --importe: 1.5rem;
  order: 1;
  font-family: var(--font-heading);
  font-size: var(--importe);
  font-size: min(var(--importe), 26cqi);
  font-weight: 900;
  line-height: 1.1;
  color: var(--c-indigo);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-bottom: var(--space-xs);
}

.pr-peldano-barra {
  order: 2;
  display: block;
  height: calc(var(--alto, 1) * var(--escalera-alto));
  background: var(--c-indigo);
}

/* Bajo su barra. Reserva dos líneas para que un mes largo («Desde el 4.º»)
   no levante su barra sobre las demás. */
.pr-peldano-cuando {
  order: 3;
  min-height: 2.6em;
  padding-top: var(--space-xs);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
  /* Nivel muted del manual (§3.1): Índigo al 70 %, 4,98:1. */
  color: rgb(var(--c-indigo-rgb) / 0.70);
}

/* El precio que se queda: el peldaño en el acento. Coral oscuro en la cifra
   (texto), Coral en la barra (forma, sin texto encima). */
.pr-peldano--meta .pr-peldano-importe { color: var(--c-coral-dark); }
.pr-peldano--meta .pr-peldano-barra { background: var(--c-coral); }
.pr-peldano--meta .pr-peldano-cuando { color: var(--c-coral-dark); }

/* La regla del escalón, en una línea bajo los meses. */
.pr-escalera-nota {
  margin: var(--space-sm2) 0 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--c-indigo);
}

/* Los peldaños crecen desde la línea, uno tras otro, cuando entra el bloque
   que los lleva (el `.reveal` más cercano: la tarjeta o el plan destacado): el
   gesto es el dato —el precio baja—. Solo con movimiento permitido y con JS
   (lo que pone `.is-inview`); si no, la escalera está entera desde el
   principio (BRAND_MANUAL §5.4). Solo `transform`: no toca el LCP. */
@media screen and (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .reveal .pr-peldano-barra {
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--dur-reveal) var(--ease-blockout)
      calc(var(--reveal-delay, 0ms) + 200ms + var(--i, 0) * var(--reveal-stagger));
  }

  .reveal.is-inview .pr-peldano-barra {
    transform: none;
  }
}

/* En el destacado, la escalera es la pieza principal de la página. */
.pr-escalera--grande {
  --escalera-alto: 11rem;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.pr-escalera--grande .pr-peldano-importe { --importe: clamp(1.6rem, 3.4vw, 3rem); }
.pr-escalera--grande .pr-peldano-cuando { font-size: 0.95rem; }

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

@media (max-width: 900px) {
  .pr-estrella-panel { grid-template-columns: 1fr; }

  .pr-estrella-accion {
    border-left: 0;
    border-top: var(--border-w-structural) solid var(--c-indigo);
  }

  .pr-escalera--grande { --escalera-alto: 9rem; }
}

/* En móvil, el botón del destacado tiene que entrar en la primera pantalla
   (medido: iPhone SE con 611 px visibles). Por eso el panel aprieta sus huecos
   y la escalera baja: lo que separa los peldaños es la proporción, no la altura. */
@media (max-width: 640px) {
  .pr-estrella-precio,
  .pr-estrella-accion { padding: var(--space-md2); gap: var(--space-sm2); }

  .pr-estrella .pr-card-list { font-size: var(--text-sm); }

  .pr-escalera { --escalera-alto: 4.5rem; }
  .pr-escalera--grande { --escalera-alto: 4.5rem; gap: var(--space-xs); margin-top: 0; }
  .pr-peldano-importe { --importe: 1.25rem; }
  .pr-escalera--grande .pr-peldano-importe { --importe: 1.4rem; }
  .pr-escalera--grande .pr-peldano-cuando { font-size: 0.8rem; }
}