/* ===========================================================================
AJUSTES DE COMPATIBILIDAD BOOTSTRAP 4 -> 5
1) ANCHO DEL CONTENEDOR.
Bootstrap 5 añadió un punto de corte nuevo, xxl (1400px), que lleva el
.container a 1320px. Bootstrap 4 no lo tenía y se quedaba en 1140px. En una
pantalla ancha eso estira todo el sitio 180px de más y descoloca la
maquetación del tema, que está calculada sobre 1140. Se restaura el límite
anterior.
2) SUBRAYADO DE ENLACES.
Bootstrap 5 subraya todos los enlaces por defecto; Bootstrap 4 no lo hacía.
El tema 10news se diseñó contando con el comportamiento anterior, así que
al actualizar aparecieron subrayados en el menú, el pie, la paginación y
las tarjetas. Se restaura SOLO en navegación y componentes; los enlaces
dentro del texto de una noticia conservan el subrayado, que ahí sí ayuda.
=========================================================================== */
@media (min-width: 1400px) {
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl {
max-width: 1140px;
}
}
.navbar a,
.navbar-nav .nav-link,
.menu-area a,
.top-news a,
.ticker a,
#webTicker a,
.breadcrumb-box a,
.pagination a,
.page-link,
.card a,
.list-unstyled a,
.list-inline a,
.relate-news a,
.rel-layer a,
.slider-layer a,
.footer-area a,
.tag-box a,
.btn {
text-decoration: none;
}
.navbar a:hover,
.menu-area a:hover,
.card a:hover,
.list-unstyled a:hover,
.relate-news a:hover,
.slider-layer a:hover {
text-decoration: underline;
}
/* ===========================================================================
CUADRÍCULA DE PORTADA
CSS Grid puro: sin Owl Carousel, sin JavaScript, sin dependencias.
Estructura en escritorio (2 filas x 3 columnas):
+-------------------+----------+----------+
| | cat 1 | cat 2 |
| DESTACADA +----------+----------+
| | cat 3 | cat 4 |
+-------------------+----------+----------+
En tablet pasa a 2 columnas y la destacada ocupa el ancho completo.
En móvil, una sola columna.
Nota sobre el LCP: la imagen destacada va sin lazy y con fetchpriority alta
porque es lo primero que ve el lector; las demás van con loading="lazy"
nativo. Todas llevan aspect-ratio fijo para que la página no dé saltos
mientras cargan (eso es lo que mide Google como CLS).
=========================================================================== */
.cuadricula-portada {
display: grid;
gap: 12px;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: repeat(2, minmax(0, 1fr));
margin-bottom: 20px;
}
/* La celda destacada ocupa 2 filas de la primera columna */
.cuadricula-portada .celda-destacada {
grid-column: 1;
grid-row: 1 / span 2;
}
.cuadricula-portada .celda {
position: relative;
overflow: hidden;
border-radius: 4px;
background: #1a1a1a;
min-height: 0;
}
/* El enlace del titular cubre toda la celda mediante .stretched-link de
Bootstrap 5, en vez de envolver la imagen. Así el enlace de la categoría
puede vivir dentro de la misma tarjeta sin quedar anidado dentro de otro
enlace (HTML no permite anidar , y el navegador rompe la estructura). */
.cuadricula-portada .celda a {
text-decoration: none;
}
/* CLAVE: el texto del titular vive dentro de un , y style.css trae
h2,h2 a{font-size:32px} y h3 a{font-size:28px}. Esas reglas apuntan al
ENLACE, así que fijar el tamaño solo en el