/* =========================================================================
   CITEM — /ensayador/: la landing de Ensayador
   Lo común vive en global/ (secciones, tarjetas `cds-*`, revelado). Aquí,
   solo la composición de esta página: hero, secciones, pasos, planes y cierre.

   Landing de conversión (manual §8.4): columna de lectura de 56ch,
   revelado en las secciones y NINGUNO en el hero: texto y botón, en el primer fotograma.
   ========================================================================= */

/* ─── Hero ─── */
.ens-hero {
    background-color: var(--c-indigo);
    padding: var(--spacing-xl) 0;
    border-bottom: var(--border-w-accent) solid var(--c-coral);
    text-align: center;
}

.ens-kicker {
    font-size: 0.875rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--c-paper); /* sobre Índigo, el gris atenuado casi no se lee a este tamaño */
    margin-bottom: var(--spacing-sm);
}

.ens-hero-title {
    font-size: var(--text-hero);
    font-weight: 900;
    color: var(--c-paper);
    text-transform: uppercase;
    letter-spacing: var(--tracking-display-sm);
    line-height: var(--leading-display);
    margin-bottom: var(--spacing-md);
}

.ens-hero-accent {
    color: var(--c-coral);
}

.ens-hero-sub {
    max-width: 56ch;
    margin: 0 auto var(--spacing-md);
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--c-text-muted-inverse);
}

.ens-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

/* El botón de contorno sobre Índigo: Papel, no Tinta. */
.ens-hero .cds-boton--contorno {
    background: transparent;
    border-color: var(--c-paper);
    color: var(--c-paper);
    box-shadow: none;
}

/* Sobre Índigo, el enlace va en Papel y subrayado: el color solo no lo distingue. */
.ens-hero-enlace {
    margin: var(--spacing-sm) 0 var(--spacing-lg);
    color: var(--c-text-muted-inverse);
}

.ens-hero a:not(.cds-boton),
.ens-cierre a:not(.cds-boton) {
    color: var(--c-paper);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ─── Secciones ─── */
.ens-seccion--papel {
    background-color: var(--c-paper);
    border-bottom: var(--border-weight) solid var(--c-ink);
}

.ens-seccion--indigo {
    background-color: var(--c-indigo);
    border-bottom: var(--border-weight) solid var(--c-ink);
}

.ens-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--c-coral-dark); /* SYNC DS §3.1: texto pequeño → Coral oscuro */
    margin-bottom: 1rem;
}

/* El Coral sobre Índigo da 3,10: no vale para texto de 12 px (§3.1). */
.ens-label--papel {
    color: var(--c-paper);
}

section h2.ens-h2-papel {
    color: var(--c-paper);
}

section p.intro.ens-intro-papel {
    color: var(--c-text-muted-inverse);
}

.ens-nota {
    max-width: 56ch;
    margin-top: var(--spacing-md);
    font-size: 1rem;
    color: var(--c-text-strong);
}

/* ─── Planes de Ensayador ───
   Las tarjetas las escribe functions/ensayador/_middleware.js; el fichero
   estático trae la reserva, una sola tarjeta sin cifras. */
.ens-planes-rejilla {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

@media (min-width: 768px) {
    .ens-planes-rejilla {
        grid-template-columns: repeat(2, 1fr);
    }

    /* La reserva es una sola tarjeta: ocupa la rejilla, no media. */
    .ens-planes-rejilla > .ens-plan:only-child {
        grid-column: 1 / -1;
    }
}

.ens-plan {
    justify-items: start;
}

.ens-plan .cds-boton {
    margin-top: var(--space-sm);
}

.ens-plan-precio {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-sm);
    font-family: var(--font-heading);
    color: var(--c-text-heading);
}

.ens-plan-importe {
    font-size: 2.25rem;
    line-height: 1;
}

.ens-plan-lista {
    margin: 0;
    padding-left: 1.25rem;
    text-align: left;
}

.ens-plan-periodo,
.ens-plan-aviso {
    font-size: 0.9rem;
    font-family: var(--font-body);
    color: var(--c-text-muted);
}

/* ─── Cierre ─── */
.ens-cierre {
    background-color: var(--c-indigo);
    text-align: center;
}

.ens-cierre h2 {
    color: var(--c-paper);
    margin-bottom: var(--spacing-md);
}

.ens-cierre .ens-hero-enlace {
    margin-bottom: 0;
}

/* ─── Móvil ─── */
@media (max-width: 768px) {
    .ens-hero {
        padding: var(--spacing-lg) 0 var(--spacing-md);
    }

    .ens-hero-title {
        font-size: clamp(2rem, 8vw, 4rem);
    }

    .ens-label {
        letter-spacing: 2px;
    }
}

/* ─── Móvil apaisado: la cabecera ya come ~100 px de 390, así que el título va
   en una línea y el botón entra en la primera pantalla sin hacer scroll. ─── */
@media (max-height: 520px) and (orientation: landscape) {
    .ens-hero {
        padding: var(--spacing-sm) 0 var(--spacing-md);
    }

    .ens-hero-title {
        font-size: clamp(1.75rem, 9vh, 2.5rem);
        margin-bottom: var(--spacing-sm);
    }

    .ens-hero-title br {
        display: none;
    }

    .ens-hero-sub {
        margin-bottom: var(--spacing-sm);
        font-size: 1rem;
        line-height: 1.45;
    }
}