/* ═══════════════════════════════════════════════════════════════
   Portada. Dos heroes distintos, uno por fase.

     · preapertura → .hero-portada  (composición editorial con la
       ilustración horizontal entera y los dos CTA dentro del hero)
     · completa    → .hero          (antetítulo, titular, lema,
       entradilla, acciones y cartel)

   Solo se pinta uno: index.php elige según config('fase').
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   1 · HERO DE PREAPERTURA
   ═══════════════════════════════════════════════════════════════

   La imagen se muestra SIEMPRE entera, con su proporción 1672 × 941:
   no se recorta ni se deforma, así que los dos semáforos, las figuras,
   las líneas de color, los cuatro colectivos, el lema y el logotipo
   salen completos.

   Medidas tomadas sobre el propio archivo:
     · la franja oscura inferior empieza en el 71,94 % de la altura y
       su color es #021D30, prácticamente la tinta de la web;
     · el blanco del archivo es #EFEDEC;
     · la zona blanca libre llega al 69 % del ancho en el tercio
       superior y se estrecha al 31 % hacia la mitad de la altura.

   De ahí sale la composición de escritorio: la ilustración se ancla
   abajo a la derecha ocupando «--k» del ancho, el fondo de la sección
   repite su mismo blanco y una franja inferior repite su mismo azul a
   la altura exacta en que la franja empieza dentro del archivo. Las
   dos bandas continúan hacia la izquierda sin costura y el titular
   dispone de una columna de verdad.

   --k es la única palanca: cuanto mayor, más ilustración y menos
   columna de texto. Se ajusta por tramos para que el titular crezca
   de forma coherente. */

.hero-portada {
    background: var(--hero-fondo);
    overflow: hidden;
}

.hero-lienzo {
    position: relative;
    container-type: inline-size;
    background: var(--hero-fondo);
}

.hero-foto {
    display: block;
}

.hero-foto img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1672 / 941;
}

/*
 * El titular no lleva ni un solo <br>: la caja de 10,4 em y
 * text-wrap:balance reparten las líneas solos (cuatro en móvil, tres
 * desde 768 px) y nunca dejan una línea de una sola palabra.
 */
.hero-texto h1 {
    margin: 0;
    line-height: 0.94;
    letter-spacing: -0.015em;
    text-wrap: balance;
    color: var(--tinta);
}

/* «XXI» solo aquí: el resto del sitio dice «21.º Congreso». */
.titular-xxi {
    color: var(--morado);
}

.hero-cuando {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.hero-fechas {
    font-weight: 650;
    color: var(--tinta);
    letter-spacing: 0.01em;
}

.hero-ciudad {
    color: var(--gris);
    letter-spacing: 0.17em;
    text-transform: uppercase;
    font-weight: 600;
}

/* Los dos CTA son enlaces de verdad: funcionan sin JavaScript. */
.hero-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* ═══ ESCRITORIO · desde 1024 px ═══
   La ilustración se ancla abajo a la derecha; el texto ocupa la
   columna izquierda en flujo normal, así que el hero crece con él y
   nada se desborda. */
@media (min-width: 1024px) {
    .hero-lienzo {
        --k: 0.60;                                              /* ancho de la ilustración */
        --ancho-imagen: min(calc(var(--k) * 100cqw), 1672px);   /* nunca por encima del tamaño real */
        --alto-imagen: calc(var(--ancho-imagen) / 1.7768);
        --alto-franja: calc(var(--alto-imagen) * 0.2806);       /* la franja empieza en el 71,94 % */
        min-height: var(--alto-imagen);
        padding-bottom: var(--alto-franja);
        display: flex;
        align-items: center;
    }

    /* la franja inferior del archivo, continuada hasta el borde izquierdo */
    .hero-lienzo::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--alto-franja);
        background: var(--hero-banda);
        z-index: 0;
    }

    .hero-foto {
        position: absolute;
        right: 0;
        bottom: 0;
        width: var(--ancho-imagen);
        z-index: 1;
    }

    /* El texto arranca con un margen proporcional al lienzo y los
       botones nunca pasan del borde izquierdo de la ilustración: se
       quedan siempre sobre el blanco, sin tocar la franja ni ninguna
       figura. */
    .hero-texto {
        position: relative;
        z-index: 2;
        --pad: clamp(48px, 4.2cqw, 88px);
        padding: 44px 0 40px var(--pad);
        width: 100%;
    }

    .hero-texto h1 {
        font-size: clamp(56px, 6.4vw, 66px);
        max-width: 10.4em;
    }

    .hero-cuando {
        margin-top: 26px;
        gap: 7px;
    }

    .hero-fechas {
        font-size: 22px;
    }

    .hero-ciudad {
        font-size: 18px;
    }

    .hero-cta {
        margin-top: 32px;
        gap: 13px;
        --cta-max: 352px;
        max-width: min(var(--cta-max), calc(100cqw - var(--ancho-imagen) - var(--pad) - 18px));
    }

    .hero-portada .cta {
        font-size: 17px;
        padding: 13px 22px;
        min-height: 54px;
    }
}

@media (min-width: 1101px) {
    .hero-lienzo {
        --k: 0.62;
    }

    .hero-texto h1 {
        font-size: clamp(68px, 6.1vw, 78px);
        max-width: 10.4em;
    }

    .hero-fechas {
        font-size: 24px;
    }

    .hero-ciudad {
        font-size: 19px;
    }

    .hero-cta {
        --cta-max: 410px;
    }

    .hero-portada .cta {
        font-size: 18px;
        min-height: 56px;
    }
}

@media (min-width: 1280px) {
    .hero-lienzo {
        --k: 0.65;
    }

    .hero-texto h1 {
        font-size: clamp(78px, 6.1vw, 96px);
        max-width: 10.4em;
    }

    .hero-fechas {
        font-size: 25px;
    }

    .hero-ciudad {
        font-size: 20px;
    }

    .hero-cta {
        --cta-max: 440px;
    }

    .hero-portada .cta {
        font-size: 19px;
        min-height: 58px;
    }
}

@media (min-width: 1440px) {
    .hero-lienzo {
        --k: 0.68;
    }
}

@media (min-width: 1600px) {
    .hero-lienzo {
        --k: 0.72;
    }
}

/* ═══ TABLETA Y MÓVIL · hasta 1023 px ═══
   Primero el texto, después la imagen entera. Para que no quede un
   bloque blanco entre los botones y la ilustración, la imagen sube por
   detrás del bloque de texto justo lo que permite su propia zona
   blanca: con el texto limitado al 70 % del ancho, el archivo no tiene
   una sola mancha de tinta por encima del 25,5 % de su altura, así que
   ese es el tope. Nada ilustrado queda nunca detrás del texto. */
@media (max-width: 1023px) {
    .hero-lienzo {
        display: flex;
        flex-direction: column;
        background: var(--hero-fondo);
        --subida: calc(25.5cqw / 1.7768);   /* 25,5 % de la altura */
    }

    .hero-texto {
        order: 1;
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: var(--max);
        margin: 0 auto;
        padding: 32px 22px 14px;
    }

    .hero-foto {
        order: 2;
        margin-top: calc(var(--subida) * -1);
        position: relative;
        z-index: 1;
    }

    .hero-texto h1 {
        font-size: clamp(59.2px, 6.4vw, 66px);
        max-width: 10.4em;
    }

    .hero-cuando {
        margin-top: 20px;
        gap: 6px;
    }

    .hero-fechas {
        font-size: 21px;
    }

    .hero-ciudad {
        font-size: 18px;
    }

    .hero-cta {
        margin-top: 26px;
        gap: 12px;
        max-width: 70%;
    }

    .hero-portada .cta {
        font-size: 18px;
        padding: 14px 22px;
        min-height: 56px;
    }
}

@media (max-width: 768px) {
    .hero-texto {
        padding: 28px 22px 12px;
    }

    .hero-texto h1 {
        font-size: clamp(2.8rem, 8vw, 3.7rem);   /* 44,8 px → 59,2 px */
        max-width: 10.4em;
    }

    .hero-fechas {
        font-size: clamp(18px, 4.6vw, 22px);
    }

    .hero-ciudad {
        font-size: clamp(16px, 4vw, 19px);
    }

    /* El tope del 84 % es el que permite que la imagen suba un 16,3 %
       por detrás del bloque sin que nada ilustrado quede tapado. Los
       botones se ajustan a ese ancho, no al revés. */
    .hero-cta {
        margin-top: 24px;
        max-width: 84%;
    }

    .hero-portada .cta {
        font-size: 17px;
        padding: 13px 17px;
        min-height: 56px;
    }

    .hero-lienzo {
        --subida: calc(16.3cqw / 1.7768);   /* con el texto al 84 % */
    }
}


/* ═══════════════════════════════════════════════════════════════
   2 · HERO DE LA FASE COMPLETA
   ═══════════════════════════════════════════════════════════════ */

.hero {
    padding: 56px 0 44px;
}

.hero .rejilla {
    display: grid;
    grid-template-columns: 1.06fr 0.94fr;
    gap: 56px;
    align-items: center;
}

.antetitulo {
    margin: 0 0 20px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--morado);
}

.hero h1 {
    font-size: clamp(38px, 4.6vw, 60px);
    margin-bottom: 22px;
}

.lema {
    margin: 0 0 22px;
    font-family: var(--font-headers);
    font-size: clamp(20px, 2vw, 25px);
    font-weight: 400;
    font-style: italic;
    line-height: 1.3;
    color: var(--tinta);
}

.lema .remate {
    display: block;
    margin-top: 6px;
    font-size: 0.78em;
    font-style: normal;
    color: var(--gris);
}

.entradilla {
    max-width: 34em;
    margin-bottom: 28px;
    font-size: var(--txt-entradilla);
    color: var(--tinta);
}

.hero-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.hero figure {
    margin: 0;
}

.hero figure img {
    width: 100%;
    border-radius: var(--r);
    box-shadow: 0 18px 44px rgba(0, 26, 45, 0.16);
}

/*
 * Bloque de inscripción al que apunta el distintivo del hero. Lleva
 * también .seccion, así que el ritmo vertical (72px) y el filete de
 * .seccion + .seccion salen de style.css: aquí ya no se sobreescribe
 * el padding, que era lo que lo dejaba fuera del sistema.
 */

.bloque-inscripcion h2 {
    margin-bottom: 18px;
    font-size: var(--txt-h2);
}

@media (max-width: 900px) {
    .hero {
        padding: 34px 0 30px;
    }

    .hero .rejilla {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .hero .texto {
        order: 1;
    }

    .hero figure {
        order: 2;
    }

    .hero h1 {
        font-size: 34px;
    }

    .entradilla {
        font-size: 17px;
    }

    .hero-acciones {
        width: 100%;
    }

    .hero-acciones .btn {
        flex: 1 1 100%;
    }

    .hero-acciones .chip-inscripcion {
        flex: 1 1 100%;
        justify-content: center;
    }
}


/* ═══════════════════════════════════════════════════════════════
   3 · RESTO DE LA PORTADA DE PREAPERTURA
   ═══════════════════════════════════════════════════════════════

   Las cinco secciones que cuelgan del hero: banda de cifras, los
   tres días, las cinco rutas temáticas, los accesos al programa y
   la sede. Solo se pintan en la fase de preapertura.

   Lo que NO se declara aquí, porque ya existe y se reutiliza:

     · el ancho y el margen de la columna → .contenedor (generic)
     · el ritmo vertical y el filete entre secciones → .seccion y
       .seccion + .seccion (style.css)
     · el fondo de «Elige tu ruta» → .fondo-claro (style.css). El
       material de diseño lo traía como
       style="background:rgba(255,255,255,.42)" dentro del HTML
     · la caja, la rejilla, el filete de ruta y el enlace que cubre
       la tarjeta → .tarjetas, .tarjeta, .tarjeta-ruta,
       .tarjeta-con-enlace, .enlace-cubre, .tarjeta-meta, .punto
       (style-cards.css)
     · el color de cada ruta → data-ruta="<id>" en el marcado, que
       style-colors.css convierte en --c y --sc para todo el
       subárbol. Por eso tampoco queda ningún style en línea
     · los botones → .btn .btn-sec, y su fila → .acciones
     · la nota gris bajo los días → .nota (style.css)

   Móvil primero: una columna, y las rejillas abren solas por
   auto-fit/auto-fill sin media query. Solo quedan dos breakpoints:
   600 px (la foto de ruta pasa de 16/9 a cuadrada) y 768 px (la banda
   de cifras respira más). */

/* ── CABECERA DE SECCIÓN: NO EXISTE, A PROPÓSITO ──────────────── */
/*
 * Aquí vivían .seccion-cab y .seccion-cab p (más su media query de
 * 1024px). Eran, palabra por palabra, .entradilla-pagina de style.css:
 * 62ch de ancho, var(--txt-entradilla) y var(--gris), con 2px de
 * diferencia de margen que la propia media query acababa igualando.
 *
 * style.css documenta que ese bloque subió a la capa común porque
 * estaba copiado en cuatro hojas de página: repetirlo aquí lo habría
 * dejado copiado en cinco. Las cabeceras de la portada usan ahora
 * <h2> + <p class="entradilla-pagina"> y el <div> envolvente
 * desaparece del marcado, para no dejar en él una clase sin regla.
 */

/* ── BANDA DE CIFRAS ──────────────────────────────────────────── */
/*
 * No es una .seccion: es una banda estrecha pegada al hero, así que
 * trae su propio ritmo y sus dos filetes. Tampoco reutiliza .cifras de
 * style-page-el-congreso.css (que son tarjetas, otra pieza, y además esa
 * hoja no se carga en la portada).
 *
 * Sufijo «-portada» y sus dos piezas con ámbito, por el mismo motivo que
 * .dias-portada: .cifra ya la lleva el marcado de el-congreso.php
 * (<li class="tarjeta cifra">), donde es una tarjeta entera y no un
 * número de 44px. Hoy las dos hojas no se cargan juntas, pero el nombre
 * está tomado y el día que una regla suba a la capa común el choque es
 * silencioso.
 *
 * El fondo NO se declara aquí: es var(--hueso-claro), es decir
 * .fondo-claro de style.css, que la banda ya lleva en el marcado.
 *
 * auto-fit y no cuatro columnas fijas: la cuarta cifra —la gratuidad—
 * solo se pinta si hay alguna inscripción abierta, y con tres la fila
 * tiene que repartirse sin dejar un hueco.
 */
/* OJO: este selector se declara DOS veces en esta hoja. Aqui va la caja; mas
   abajo, en el bloque «ENTRADA DE LA BANDA», va --cifra-entrada, que es la
   duracion de la animacion y se explica alli junto al resto del efecto. Estan
   separados a proposito, pero conviene mirar los dos antes de tocar. */
.datos-portada {
    padding: 30px 0;
    border-top: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea);
}

.datos-portada ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr));
    gap: 22px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.datos-portada li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Sin esto «inscripción» ensancharía su columna en la rejilla. */
    min-width: 0;
}

/*
 * La cifra es la pieza que se lee de lejos. Va en tabular-nums para que
 * 66 y 5 asienten en la misma rejilla óptica, y el clamp está calculado
 * para que quepa la única cifra que no es un número («Gratis», seis
 * letras) en una columna de 148 px a 360 px de ancho de pantalla.
 */
.datos-portada .cifra {
    font-family: var(--font-headers);
    font-size: clamp(30px, 7.5vw, 44px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
    /*
     * Tinta, no morado. El material de referencia no declara `color` en
     * .cifra: la hereda del documento, que es var(--tinta). El morado lo
     * añadimos aquí por nuestra cuenta y el cliente ha pedido volver al
     * original. Se declara explícito en vez de borrar la línea porque en
     * esta banda el color es una decisión tomada, no un descuido: quien
     * lea la hoja tiene que ver que la cifra va en tinta a propósito.
     *
     * Contraste sobre var(--hueso-claro) (#F4F3F2), que es el fondo de la
     * banda: 15,98:1. El morado daba 6,35:1.
     */
    color: var(--tinta);
    /* Una cifra partida por el guión de <body> deja de ser una cifra. */
    hyphens: none;
}

.datos-portada .dato-pie {
    font-size: var(--txt-menor);
    line-height: 1.3;
    color: var(--gris);
}

@media (min-width: 768px) {
    .datos-portada {
        padding: 38px 0;
    }

    .datos-portada ul {
        gap: 26px 24px;
    }
}

/* ── ENTRADA DE LA BANDA (conteo) ─────────────────── */
/*
 * Estas clases las pone js/cifras-portada.js. Sin JavaScript no se aplica
 * ninguna, y la banda es exactamente la de siempre: los números
 * definitivos ya vienen impresos desde PHP y ahí se quedan.
 *
 * La ventana de la entrada la gobierna el CSS y NO el temporizador de
 * JavaScript, a propósito: pase lo que pase dentro del bucle de
 * requestAnimationFrame, al cerrarse la ventana el número definitivo
 * vuelve a verse y el sobreimpreso desaparece —sin fill-mode, las dos
 * propiedades vuelven solas al valor de la cascada—. Es la red de
 * seguridad de «si el JavaScript falla, se ven las cifras de verdad».
 *
 * Y encaja con la regla global de style-generic.css sin repetir aquí la
 * consulta de medios: bajo prefers-reduced-motion esa regla anula
 * `animation`, así que el número definitivo no llega a ceder el color y
 * el sobreimpreso se queda en su opacity 0. El JavaScript, además, lee la
 * preferencia y ni siquiera monta el andamio.
 */
.datos-portada {
    /*
     * Duración única de toda la banda. La lee también el JavaScript, de la
     * animación ya calculada (getComputedStyle().animationDuration), para
     * que la subida de los números y esta ventana no puedan descuadrarse:
     * el dato vive una sola vez y vive aquí.
     *
     * 900 ms: por debajo de ~600 ms la subida no se lee como subida, se ve
     * como un parpadeo —y un número que parpadea, en esta web, parece un
     * error—; por encima de 1 s la página se hace esperar para dar un dato
     * que ya estaba escrito. Muy lejos de los 5 s a partir de los cuales el
     * criterio 2.2.2 de las WCAG exigiría un control para pararlo.
     */
    --cifra-entrada: 900ms;
}

@keyframes cifra-aparece {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*
 * Ventana en la que el número definitivo cede el color al sobreimpreso.
 * Cede el color y solo el color: sigue en el flujo y sigue midiendo la
 * caja.
 */
@keyframes cifra-cede {
    from,
    to {
        color: transparent;
    }
}

.datos-portada .cifra-anima {
    position: relative;
}

.datos-portada .cifra-real {
    animation: cifra-cede var(--cifra-entrada) linear;
}

/*
 * El sobreimpreso está FUERA DEL FLUJO: ocupa 0 en la caja. El ancho de la
 * columna lo sigue fijando el número definitivo, que no se mueve, así que
 * «66» pasando por 0→9 no encoge nada. tabular-nums iguala el ancho ENTRE
 * dígitos, pero no arregla el cambio de CANTIDAD de dígitos; esto sí.
 *
 * Y no puede desbordar: contando de 0 a N ningún valor intermedio tiene
 * más dígitos que N.
 */
.datos-portada .cifra-cuenta {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    animation: cifra-aparece var(--cifra-entrada) ease-out;
}

/*
 * «Gratis» no es un número y no se puede contar, pero tampoco puede
 * quedarse quieta al lado de tres cifras subiendo: entra con la misma
 * curva y en la misma ventana que ellas, y la banda se lee como una sola
 * cosa. Sin clase, opacity vale 1: si el JavaScript no llega, se ve.
 */
.datos-portada .cifra-entra {
    animation: cifra-aparece var(--cifra-entrada) ease-out;
}

/* ── LOS TRES DÍAS ────────────────────────────────────────────── */
/*
 * Sufijo «-portada» a propósito: .dias ya existe en
 * style-page-el-congreso.css con otra medida de columna. Esa hoja no se
 * carga aquí, así que hoy no hay choque, pero dos rejillas distintas con
 * el mismo nombre se pisarían el día que alguna suba a la capa común.
 */
/*
 * Única rejilla del sitio que cambia auto-fill por auto-fit, y por un
 * motivo medido: los días son tres, y con auto-fill caben cuatro
 * columnas de 260 px en el contenedor de 1180 px. La cuarta se queda
 * vacía pero ocupa su sitio, así que las tres tarjetas salían
 * estrechas y arrinconadas a la izquierda con un hueco muerto al lado.
 * auto-fit colapsa la columna sobrante y las tres reparten el ancho.
 *
 * La medida mínima baja a 210 px para que a 768 px entren las tres en
 * una sola fila (3 × 227 px) en lugar de 2 + 1. Ninguna cifra está
 * atada a que los días sean tres: si mañana son dos o cuatro, la
 * rejilla se reparte igual.
 */
.dias-portada {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

/* Columna, para que el reclamo «Ver … →» se pegue al fondo de la caja
   y las tres líneas queden alineadas entre tarjetas de distinto alto.
   Es lo que .tarjeta-pie necesita para que su margin-top:auto sirva. */
.dia-bloque {
    display: flex;
    flex-direction: column;
}

/*
 * Antetítulo de la tarjeta: la fecha. Gana a «.tarjeta :where(p)» sin
 * trucos porque aquella regla va dentro de :where() y no suma
 * especificidad; esta hoja se carga después.
 */
.dia-fecha {
    margin: 0 0 8px;
    font-size: var(--txt-rotulo);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--morado);
}

/* ── RUTAS TEMÁTICAS ──────────────────────────────────────────── */
.rutas-portada {
    --tarjetas-min: 288px;

    /*
     * Las dos mitades de --tarjeta-relleno (style-colors.css: 22px 24px) y
     * el grosor del filete de .tarjeta-ruta (style-cards.css: 5px). Solo se
     * escriben aquí: de ellas salen por calc() TODAS las medidas de la foto,
     * abajo. Ver la nota de .ruta-foto.
     */
    --relleno-tarjeta-y: 22px;
    --relleno-tarjeta-x: 24px;
    --filete-ruta: 5px;
}

.rutas-portada .tarjeta {
    display: flex;
    flex-direction: column;
}

/*
 * La fotografía se pega a los tres cantos de la tarjeta, justo bajo el
 * filete de color de .tarjeta-ruta: se sale del relleno con márgenes
 * negativos, sin tocar el padding de la caja (style-cards.css prohíbe
 * expresamente que una hoja de página redeclare el padding de .tarjeta).
 *
 * MEDIDAS DERIVADAS, NO COPIADAS. Antes los 22 y los 24 px estaban
 * escritos a mano aquí y en style-page-el-congreso.css, cuando la fuente
 * única es --tarjeta-relleno (style-colors.css): al cambiarla, las fotos
 * se descuadraban en silencio. Ahora salen de las dos variables de abajo
 * por calc(), y de ellas salen a la vez el ancho y los tres márgenes, que
 * es donde de verdad se descuadraban al tocar uno solo.
 *
 * Las dos variables existen porque --tarjeta-relleno es un PAR
 * («22px 24px») y calc() no sabe partir un valor compuesto: no hay forma
 * en CSS de negar una de sus dos mitades. Traducirlo una vez, con el
 * origen anotado al lado, es lo más cerca del punto único que llega esta
 * hoja; el arreglo completo es que style-colors.css publique las dos
 * mitades y componga el par con ellas.
 *
 * EL RADIO. Medido en Chromium sobre la tarjeta real (364 px de ancho):
 * la esquina del hueco interior de la tarjeta no es un círculo, es una
 * elipse, porque los bordes de .tarjeta-ruta no miden lo mismo arriba
 * (5 px del filete de ruta) que a los lados (1 px). El radio interior es
 * por tanto 12−1 horizontal y 12−5 vertical, y así se escribe: con la
 * sintaxis de dos ejes «horizontales / verticales». Con un radio circular
 * de 8 px quedaba una cuña del filete a la vista en la esquina; con 0
 * —lo que hace hoy .ruta-imagen en el-congreso— la foto asoma por fuera
 * de la curva, porque border-radius solo recorta el contenido cuando el
 * overflow no es visible, y aquí es visible a propósito: overflow:hidden
 * se comería el contorno de foco de .enlace-cubre, que se dibuja por
 * fuera con outline-offset.
 *
 * El archivo es cuadrado (560 × 560) y así se muestra desde 600 px,
 * que es donde la tarjeta ya es estrecha. Por debajo la tarjeta ocupa
 * el ancho entero de la pantalla y un cuadrado de 316 px de alto por
 * ruta convertiría la sección en cinco pantallas de scroll: ahí se
 * recorta a 16/9 con object-fit, sin deformar.
 */
.ruta-foto {
    width: calc(100% + 2 * var(--relleno-tarjeta-x));
    max-width: none;
    margin: calc(-1 * var(--relleno-tarjeta-y)) calc(-1 * var(--relleno-tarjeta-x)) 18px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius:
        calc(var(--tarjeta-radio) - 1px) calc(var(--tarjeta-radio) - 1px) 0 0 /
        calc(var(--tarjeta-radio) - var(--filete-ruta)) calc(var(--tarjeta-radio) - var(--filete-ruta)) 0 0;
}

@media (min-width: 600px) {
    .ruta-foto {
        aspect-ratio: 1 / 1;
    }
}

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

/* ── EL RECLAMO «VER … →» ─────────────────────────────────────── */
/*
 * No es un enlace: la tarjeta entera ya lo es por el <a> de su titular,
 * y un segundo enlace al mismo sitio duplicaría la parada de tabulador.
 * Es un párrafo marcado aria-hidden, así que solo pinta la flecha para
 * quien la ve. El subrayado de :hover lo pone .tarjeta-con-enlace sobre
 * el titular, que es el enlace de verdad.
 *
 * No es flex: con flex, un rótulo que se parte en dos líneas («Ver la
 * Jornada Precongreso» en una tarjeta estrecha) deja la flecha suelta
 * al final de la caja, centrada entre las dos líneas y separada del
 * texto. En bloque, la flecha es una palabra más de la frase y se queda
 * pegada a la última. .icono ya trae su alineación vertical.
 */
.dia-ir,
.ruta-ir {
    display: block;
    margin: 0;
    font-size: var(--txt-menor);
    font-weight: 600;
    color: var(--tinta);
    /*
     * <body> pone hyphens:auto para que las palabras largas del
     * vocabulario médico quepan en una tarjeta estrecha. Un rótulo de
     * llamada no es ese caso: a 768 px las tarjetas de día miden 227 px
     * y salía «Ver la Jornada Precon-greso».
     */
    hyphens: none;
}

.dia-ir .icono,
.ruta-ir .icono {
    margin-left: 8px;
}

/* ── SEDE ─────────────────────────────────────────────────────── */
/*
 * <address> viene en cursiva por defecto del navegador. Mismo patrón que
 * .sede-direccion en style-page-sede.css: una línea por dato, con el
 * nombre de la sede en la tipografía de titulares.
 *
 * Sufijo «-portada» en la raíz y ámbito para su hija, igual que
 * .dias-portada y .datos-portada: «dirección» es un nombre que cualquier
 * página puede querer, y sede.php ya tiene su propio .sede-direccion.
 */
.direccion-portada {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 22px 0 0;
    font-style: normal;
    font-size: var(--txt-entradilla);
}

.direccion-portada .direccion-nombre {
    font-family: var(--font-headers);
    font-size: var(--txt-h3);
    font-weight: 650;
    line-height: 1.22;
}

/* ── IMPRESIÓN ────────────────────────────────────────────────── */
@media print {
    /* En papel la flecha no lleva a ninguna parte. */
    .dia-ir,
    .ruta-ir {
        display: none;
    }

    /* Gana a .fondo-claro sin !important: misma especificidad y esta
       hoja se carga después de style.css. */
    .datos-portada {
        background: none;
    }

    /* Cinco fotografías a sangre por página de papel, sin aportar
       ningún dato, son cinco cargas de tinta. */
    .ruta-foto {
        display: none;
    }
}