/* ═══════════════════════════════════════════════════════════════
   Página «ponentes». Solo lo que esta página añade.

   La caja de la tarjeta NO se toca aquí: viene entera de
   css/style-cards.css (.tarjeta + .tarjeta-ponente +
   .tarjeta-con-enlace) y sus medidas de style-colors.css
   (--tarjeta-relleno, --tarjeta-radio). Esta hoja solo describe las
   piezas de dentro que son propias de una ficha de persona.

   Todas las reglas que matizan un elemento ya alcanzado por
   style-cards.css se escriben como «.tarjeta .ponente-*»: la hoja de
   tarjetas usa selectores de dos niveles (.tarjeta p, .tarjeta >
   h3) y cargar después no basta para ganarles.
   ═══════════════════════════════════════════════════════════════ */

/* ── CABECERA DE LA PÁGINA ────────────────────────────────────── */
/*
 * Mismo ritmo que la .cabecera-pagina de css/style.css (54/40 y filete
 * inferior): las seis páginas de contenido tienen que abrir igual. No
 * puede usar esa clase todavía porque el marcado escribe
 * .ponentes-cabecera; cuando ponentes.php pase a .cabecera-pagina —y
 * saque el <header> fuera de .contenedor, para que el filete llegue de
 * canto a canto como en las demás— estas dos reglas desaparecen.
 */
.ponentes-cabecera {
    padding: 54px 0 40px;
    border-bottom: 1px solid var(--linea);
}

.ponentes-entradilla {
    font-size: var(--txt-entradilla);
    color: var(--gris);
    max-width: 62ch;
    margin: 16px 0 0;
}

/* ── LA REJILLA ───────────────────────────────────────────────── */
/*
 * 300px en lugar de los 280 por defecto: el cargo de estas fichas es
 * largo («Profesor Titular (UAM); Jefe del Servicio de Hematología»)
 * y con la columna estrecha se convertía en ocho líneas. Con 300 caen
 * 3 columnas a 1180px, 2 en tableta y 1 desde 320px, sin media query.
 */
.ponentes-lista {
    --tarjetas-min: 300px;
    margin: 34px 0 0;
    padding-bottom: 56px;
}

/* ── EL RETRATO QUE NO EXISTE ─────────────────────────────────── */
/*
 * El disco con las iniciales es .inicial y se define una sola vez, en
 * css/style-cards.css: allí van el color de ruta, el aro de alto
 * contraste forzado y el aro de impresión. Aquí solo su medida, que en
 * la rejilla es menor que en la ficha, y el hueco hasta el nombre.
 *
 * (El marcado escribe .ponente-retrato; style-cards.css lo alcanza por
 * alias hasta que ponentes.php escriba class="inicial".)
 */
.tarjeta .ponente-retrato {
    --inicial-tamano: 74px;
    --inicial-letra: 26px;

    letter-spacing: .02em;
    margin: 0 0 18px;
}

/* ── TEXTO DE LA FICHA ────────────────────────────────────────── */
/*
 * El sistema visual junta cargo, centro y ciudad en un solo párrafo
 * gris. Se separan en dos: el cargo dice QUIÉN es y el centro DÓNDE
 * está, y son las dos cosas por las que se busca a una persona en una
 * lista de 44. El cargo sube a tinta para que la jerarquía se vea de
 * un vistazo; el centro se queda en gris. Ni un color ni un tamaño
 * fuera de la escala del sistema.
 */
.tarjeta .ponente-cargo {
    font-size: var(--txt-menor);
    color: var(--tinta);
    line-height: 1.45;
    margin: 0 0 6px;
}

.tarjeta .ponente-centro {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    font-size: var(--txt-menor);
    color: var(--gris);
    line-height: 1.45;
    margin: 0 0 16px;
}

/* Separador tipográfico entre centro y ciudad, sin nodo de texto. */
.ponente-centro .ponente-ciudad::before {
    content: "· ";
}

/* ── PARTICIPACIONES ──────────────────────────────────────────── */
/*
 * Solo se imprime si la persona tiene alguna ponencia publicable: las
 * del bloque precongreso no tienen ninguna y su tarjeta pasa del
 * centro al pie sin dejar un rótulo huérfano.
 *
 * Los títulos van en texto, no en enlaces: la tarjeta entera ya es un
 * enlace a la ficha (.enlace-cubre) y un <a> dentro de otro <a> no es
 * marcado válido. Los enlaces al programa están en la ficha.
 *
 * Selector de dos clases a propósito: el rótulo es un <h3> y
 * «.tarjeta > h3» (0,1,1) de style-cards.css le impone --txt-h3 y
 * Fraunces, con lo que competía con el nombre de la persona; y
 * «.tarjeta-con-enlace h3» le impone la tinta. Hacen falta 0,2,0 para
 * devolverlo a rótulo de servicio.
 */
.tarjeta .ponente-rotulo {
    font-size: var(--txt-rotulo);
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--gris);
    margin: 0 0 8px;
}

.ponente-ponencias {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    font-size: var(--txt-menor);
    color: var(--gris);
    line-height: 1.4;
}

.ponente-ponencias li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 6px;
}

.ponente-ponencias li:last-child {
    margin-bottom: 0;
}

/* Viñeta con el color de la ruta: marca, no texto. */
.ponente-ponencias li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c);
}

/* ── PIE DE LA TARJETA ────────────────────────────────────────── */
/*
 * .tarjeta-pie lo empuja al fondo y .etiqueta-sobria le quita el
 * fondo de color: el punto es la marca de ruta y el texto se queda en
 * tinta. Aquí solo se ajusta el interlineado, que la píldora original
 * no necesitaba.
 *
 * El pie es un <p>, así que «.tarjeta p» (0,1,1) le ganaba a .etiqueta
 * y a .etiqueta-sobria (0,1,0) el tamaño y el color: salía a 15,5px y
 * en gris en lugar del rótulo de 12,5px en tinta. No se redefine nada
 * de la caja, solo se devuelven a la etiqueta los dos valores que ya
 * declara style-cards.css, con la especificidad que hace falta.
 */
.tarjeta .ponente-ruta {
    font-size: var(--txt-rotulo);
    color: var(--tinta);
    line-height: 1.3;
}

/* ── IMPRESIÓN ────────────────────────────────────────────────── */
@media print {
    .ponentes-lista {
        padding-bottom: 0;
    }
}