/* ==========================================================================
   LOTES DE DIVULGACIÓN — libros, cine, tv, juegos, canciones, canales
   Forma de las imágenes (--img-ratio):
     · 1/1 CUADRADAS: canciones, canales          (body.divulgacion.cuadrado)
     · 2/3 VERTICAL:  libros, cine, tv, juegos    (body.divulgacion, por defecto)
   ========================================================================= */

body.divulgacion {
    --img-ratio: 2 / 3;     /* por defecto: cartel vertical (libros, cine, tv, juegos) */
}

/* Páginas cuadradas (canciones, canales): añaden la clase .cuadrado */
body.divulgacion.cuadrado {
    --img-ratio: 1 / 1;
}

table { border-collapse: collapse; }

/* Escritorio: subir el contenido 20px reduciendo el padding del main
   (más fiable que un margin negativo sobre <table>).
   Los bloques @media de abajo lo pisan en móvil con su propio padding. */
.divulgacion main {
    padding-top: 1.2em;
    gap:         1.0em;
}

/* canales: separación encima de cada <titulo> de sección.
   En el primero (FÍSICA) ese margen además lo despeja del header fijo (se ve poco);
   en el segundo (CIENCIA) se ve entero. Ajustable. */
.divulgacion main > titulo { margin-top: 2em; }

.tabla-limpia {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
.tabla-limpia td {
    text-align: center;
    vertical-align: top;
    padding: 0.5em 0.25em;
    width: 20%;
}
/* Excepcion puntual: imagenes de origen cuadrado dentro de una pagina 2:3
   (p. ej. logos de bibliotecas digitales en libros). Anadir la clase
   "cuadrado" al <div class="contenido-celda"> concreto, no a <body>. */
.contenido-celda.cuadrado img {
    aspect-ratio: 1 / 1;
}

.tabla-limpia td img {
    border: 0.125em solid #ffffff;
    width: 12em;
    max-width: 100%;
    aspect-ratio: var(--img-ratio);   /* el ALTO se deriva del ratio: la imagen nunca se deforma */
    height: auto;
    object-fit: cover;
    display: block;
    margin: 1.0em auto 0.375em auto;
}

.contenido-celda {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.titulo-obra {
    font-size: 0.7em;
    font-weight: bold;
    display: block;
    line-height: 1.0;
}
.ano-obra {
    font-size: 0.7em;
    display: block;
    line-height: 1.0;
}
.autor-obra {
    font-size: 0.6em;
    display: block;
    line-height: 1.0;
}
.cita-final { margin-top: 0.375em; }

@media (max-width: 768px) and (orientation: portrait) {
    table { margin-top: 3.5em; }
    .divulgacion main > titulo + table { margin-top: 0; } /* tras un título no despeja el header */
    .tabla-limpia,
    .tabla-limpia tbody,
    .tabla-limpia tr {
        display: block;
        width: 100%;
    }
    .tabla-limpia tr {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .tabla-limpia td {
        display: flex;
        flex-direction: column;
        width: 80%;
        padding: 0.375em 0.25em;
    }
    .tabla-limpia td img {
        width: 100%;
        height: auto;
        margin: 0.5em auto 0.375em auto;
    }
    .divulgacion main {
        position: static;
        overflow-y: visible;
        padding: 0 0.5em 1.0em;
    }

.titulo-obra {
    font-size: 1em;
	}
.ano-obra {
    font-size: 1em;
	}
.autor-obra {
    font-size: 0.9em;
	}

}

@media (max-width: 900px) and (orientation: landscape) {
    table { margin-top: 0.5em; } /* subir 10px */
    .divulgacion main > titulo + table { margin-top: -0.5em; } /* la tabla tras un título no despeja el header (ya lo hace el título) */
    .tabla-limpia td img {
        width: 37.8vh;     /* ancho común: cuadradas −10% (eran 42vh); las 2:3 suben hasta igualarlo */
        height: auto;      /* el alto lo deriva el ratio (cuadrada 37.8vh; 2:3 ≈ 56.7vh) */
        max-width: none;
        margin: 0.25em auto 0.25em auto;