/* ═══════════════════════════════════════════════════════════════
   El Congreso: qué es, las cinco rutas, GEPAC en cifras y la
   estructura de los tres días.

   Las tarjetas de ruta son .tarjeta .tarjeta-ruta: el filete
   superior toma el color de la ruta desde data-ruta y el texto se
   queda en tinta. Aquí no se declara ninguna caja de tarjeta.
   ═══════════════════════════════════════════════════════════════ */

/* La cabecera de página (.cabecera-pagina, .antetitulo-pagina,
   .entradilla-pagina, .acciones, .nota) vive en css/style.css: estaba
   copiada palabra por palabra en esta hoja y en otras tres. */

/*
 * Alias: el marcado de esta página escribe class="entradilla" en el
 * párrafo de apertura de «Quién viene». Ese nombre está tomado por la
 * portada (style-page-inicio.css: 34em y en tinta, otra pieza), así que
 * NO puede subir a la capa común. En cuanto el-congreso.php escriba
 * class="entradilla-pagina" esta regla desaparece.
 */
.entradilla {
    font-size: var(--txt-entradilla);
    color: var(--gris);
    max-width: 62ch;
    margin: 16px 0 0;
}

/* ── TEXTO CORRIDO ────────────────────────────────────────────── */
/*
 * Medida de lectura. El público del Congreso incluye a muchas
 * personas mayores: una línea de 1180px de ancho es ilegible.
 */
.bloque-texto {
    max-width: 70ch;
}

.bloque-texto h2 {
    margin: 0 0 18px;
}

.publicos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.publicos li {
    padding: 7px 16px;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: var(--hueso-claro);
    font-size: var(--txt-menor);
    font-weight: 600;
}

/* ── RUTAS ────────────────────────────────────────────────────── */
.rutas {
    --tarjetas-min: 300px;
}

/*
 * La imagen se pega al canto superior de la tarjeta, justo bajo el
 * filete de la ruta: se sacan los 22/24px del relleno con márgenes
 * negativos en lugar de tocar el padding de .tarjeta.
 */
/*
 * El radio no puede ser 0: la tarjeta tiene las esquinas redondeadas pero su
 * overflow es visible, asi que un canto recto asoma por FUERA de la curva y se
 * pinta sobre el fondo de pagina (medido: hasta 11 px en horizontal y 7 en
 * vertical). Y la esquina interior no es un circulo, es una ELIPSE: la tarjeta
 * lleva 1 px de borde a los lados y 5 px de filete de ruta arriba, asi que al
 * radio de 12 px hay que restarle cantidades distintas en cada eje. De ahi la
 * sintaxis con barra: horizontales antes de la «/», verticales despues.
 */
.ruta-imagen {
    width: calc(100% + 48px);
    margin: -22px -24px 18px;
    max-width: none;
    aspect-ratio: 16 / 6;
    object-fit: cover;
    border-radius:
        calc(var(--tarjeta-radio) - 1px) calc(var(--tarjeta-radio) - 1px) 0 0 /
        calc(var(--tarjeta-radio) - 5px) calc(var(--tarjeta-radio) - 5px) 0 0;
}

.rutas .tarjeta-meta {
    margin-bottom: 10px;
}

/* ── CIFRAS ───────────────────────────────────────────────────── */
.cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 18px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.cifras .cifra-dato {
    font-family: var(--font-headers);
    font-size: clamp(34px, 5vw, 46px);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--morado);
    margin: 0 0 8px;
}

.cifras .cifra-texto {
    font-size: var(--txt-menor);
    color: var(--gris);
    margin: 0;
}

.dias {
    --tarjetas-min: 300px;
}

.sede-linea {
    margin: 0 0 4px;
    font-size: var(--txt-entradilla);
}