/* ==========================================================================
   ENCABEZADOS DE SECCION COMPACTOS EN CELULAR
   Antetitulo + titulo + bajada, en todas las paginas publicas. Se carga
   despues de los estilos propios de cada pagina (bloque css de base.html)
   y va con "main.contenido-principal" delante para ganarles sin !important.
   El titulo principal de cada pagina (h1) no se toca.
   ========================================================================== */
/* ---------- En todas las pantallas ----------
   El antetitulo va pegado a su titulo: son una sola pieza. Antes cada
   pagina les dejaba 14-20px de aire entre medio y se leian separados. */
main.contenido-principal :is(
    .pt-eyebrow, .pt-cta-eyebrow, .sv-eyebrow, .fx-eyebrow, .blog-eyebrow,
    .etiqueta-pagina, .seccion-etiqueta, .pagina-etiqueta,
    .mapa-etiqueta, .enlaces-interes-etiqueta, .lr-etiqueta
) {
    display: block;
    margin-bottom: 6px;
}
main.contenido-principal :is(
    .pt-eyebrow, .pt-cta-eyebrow, .sv-eyebrow, .fx-eyebrow, .blog-eyebrow,
    .etiqueta-pagina, .seccion-etiqueta, .pagina-etiqueta,
    .mapa-etiqueta, .enlaces-interes-etiqueta, .lr-etiqueta
) + :is(h1, h2) {
    margin-top: 0;
}

@media (max-width: 640px) {

    /* Antetitulos: versales pequenas y pegadas al titulo. */
    main.contenido-principal :is(
        .pt-eyebrow, .pt-cta-eyebrow, .sv-eyebrow, .fx-eyebrow, .blog-eyebrow,
        .etiqueta-pagina, .seccion-etiqueta, .pagina-etiqueta,
        .mapa-etiqueta, .enlaces-interes-etiqueta, .lr-etiqueta
    ) {
        margin-bottom: 6px;
        font-size: 10.5px;
        letter-spacing: .16em;
        line-height: 1.4;
    }

    /* Titulos de seccion. */
    main.contenido-principal h2 {
        margin-top: 0;
        margin-bottom: 8px;
        font-size: 22px;
        line-height: 1.22;
        letter-spacing: -.015em;
    }

    /* Bajada que sigue al titulo. */
    main.contenido-principal h2 + p {
        margin-top: 0;
        font-size: 14.5px;
        line-height: 1.55;
    }

    /* Estos h2 ya eran mas chicos que 22px (tarjetas, avisos y el cuerpo
       de los documentos legales): se quedan como estaban. */
    main.contenido-principal .pt-hero-tarjeta h2 { margin-bottom: 4px; font-size: 19px; }
    main.contenido-principal .sv-confirmado h2 { margin-bottom: 5px; font-size: 18px; }
    main.contenido-principal .legal-cuerpo h2 { font-size: 18.5px; }
}