/* Page: Suscribirse (Subscribe / Pricing) */
.subscribe-page {
    margin-top: var(--space-xl);
}

.subscribe-page__header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--space-xl) auto;
}

.subscribe-page__header h1 {
    font-size: clamp(2rem, 3vw, 3rem);
    margin-bottom: var(--space-s);
}

.subscribe-page__header p {
    font-size: var(--font-size-md);
    color: var(--text-body-soft);
    margin: 0 auto;
    text-wrap: pretty;
}

.subscribe-page__promo {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--space-l) auto;
    font-weight: 600;
    color: var(--link);
}

/* --- Rejilla de modalidades ---
   Se dimensiona con el número real de paquetes y se centra. Antes usaba `grid--3-cols` fijo con
   `align-items: center`: con menos de 3 modalidades el conjunto quedaba descolgado a la izquierda,
   y el `center` anulaba el `stretch` por defecto del grid, así que cada tarjeta tomaba su propia
   altura y quedaban desalineadas entre sí. */
.subscribe-page__plans {
    display: grid;
    gap: var(--space-l);
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
    align-items: stretch;
}

@media (min-width: 768px) {
    /* Con varias columnas la fila del distintivo vuelve a reservar su hueco: es lo que mantiene
       los nombres de las modalidades a la misma altura. Con una sola modalidad no hay nada con
       lo que alinear, así que sigue colapsada. */
    .subscribe-page__plans--2 .pricing-card__flag--vacia,
    .subscribe-page__plans--3 .pricing-card__flag--vacia {
        min-height: 1.5rem;
        margin-bottom: var(--space-xs);
    }

    .subscribe-page__plans--1 {
        grid-template-columns: minmax(0, 460px);
    }

    .subscribe-page__plans--2 {
        grid-template-columns: repeat(2, minmax(0, 400px));
    }

    .subscribe-page__plans--3 {
        grid-template-columns: repeat(3, minmax(0, 360px));
    }
}

/* Alineación interna entre columnas.
   Base (sin subgrid): flex vertical, con el CTA empujado al fondo. Las tarjetas miden lo mismo,
   pero cada tramo interno conserva la altura de su contenido. */
.pricing-card {
    display: flex;
    flex-direction: column;
}

.pricing-card__cta {
    margin-top: auto;
}

/* Con subgrid las cinco filas (distintivo · cabecera · qué incluye · beneficios · CTA) son las
   MISMAS para todas las tarjetas, así que nombre, precio, listado y botón quedan a plomo aunque
   los títulos ocupen distinto número de líneas o una modalidad incluya más prestaciones. */
@supports (grid-template-rows: subgrid) {
    @media (min-width: 768px) {

        .subscribe-page__plans--2,
        .subscribe-page__plans--3 {
            grid-template-rows: repeat(5, auto);
        }

        .subscribe-page__plans--2 .pricing-card,
        .subscribe-page__plans--3 .pricing-card {
            display: grid;
            grid-row: span 5;
            grid-template-rows: subgrid;
        }

        .subscribe-page__plans--2 .pricing-card__cta,
        .subscribe-page__plans--3 .pricing-card__cta {
            margin-top: 0;
        }
    }
}

/* Footer CTA */
.subscribe-page__footer {
    text-align: center;
    margin-top: var(--space-2xl);
    font-size: var(--font-size-sm);
    color: var(--text-body-soft);
}

.subscribe-page__footer p {
    max-width: none;
    margin-bottom: var(--space-xs);
}

.subscribe-page__empty {
    text-align: center;
    margin: var(--space-2xl) auto;
}