/*
Theme Name: CCHDH
Theme URI: https://cchdh.cl
Author: Alvaro Pardow
Description: Theme propio de la Comisión Chilena de Derechos Humanos. Diseño simple y moderno, construido desde cero sobre la identidad visual institucional: azul #3FA9F5, azul marino #0F1C2D y los banners con corte diagonal. La portada abre a pantalla limpia con el carrusel institucional y la navegación justo debajo; el resto del sitio conserva la cabecera clásica. Sin frameworks ni dependencias externas.
Version: 1.9.5
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cchdh
Tags: derechos-humanos, noticias, institucional, responsive, accessibility-ready
*/

/* =========================================================================
   1. VARIABLES — la paleta sale de los banners institucionales (muestreada,
      no estimada): #3FA9F5 y #0F1C2D se repiten idénticos en todos.
   ========================================================================= */

:root {
	/* Marca */
	--c-azul: #3fa9f5;
	--c-azul-osc: #1b8ad6;
	--c-azul-claro: #eaf5fe;
	--c-marino: #0f1c2d;
	--c-marino-2: #1b2c44;

	/* Neutros */
	--c-texto: #1a2330;
	--c-texto-sec: #5a6674;
	--c-borde: #e2e8ef;
	--c-fondo: #ffffff;
	--c-fondo-alt: #f6f9fc;

	/* Tipografía: stack del sistema, sin dependencias externas */
	--f-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;

	/* Métricas */
	--ancho: 1180px;
	--gap: 1.75rem;
	--radio: 10px;
	--sombra: 0 1px 2px rgba(15, 28, 45, .06), 0 8px 24px rgba(15, 28, 45, .07);
	--sombra-alta: 0 2px 4px rgba(15, 28, 45, .08), 0 16px 40px rgba(15, 28, 45, .12);
	--trans: .18s ease;
}

/* =========================================================================
   2. RESET
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	font-family: var(--f-base);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--c-texto);
	background: var(--c-fondo);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, picture, video, iframe { max-width: 100%; height: auto; display: block; }

a { color: var(--c-azul-osc); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--c-marino); }

ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--c-marino);
}

/* Foco visible — accesibilidad por teclado */
:focus-visible {
	outline: 3px solid var(--c-azul);
	outline-offset: 2px;
	border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* =========================================================================
   3. UTILIDADES
   ========================================================================= */

.contenedor {
	width: min(100% - 2.5rem, var(--ancho));
	margin-inline: auto;
}

.saltar-al-contenido {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--c-marino);
	color: #fff;
	padding: .75rem 1.25rem;
	border-radius: 0 0 var(--radio) 0;
}
.saltar-al-contenido:focus {
	left: 0;
	color: #fff;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* =========================================================================
   4. CABECERA Y NAVEGACIÓN
   ========================================================================= */

.cabecera {
	background: #fff;
	border-bottom: 1px solid var(--c-borde);
	position: sticky;
	top: 0;
	z-index: 100;
}
.admin-bar .cabecera { top: 32px; }

.cabecera__barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 78px;
	padding-block: .75rem;
}

/* --- La barra de la portada ----------------------------------------------
   Va debajo del carrusel, sin logo —ya está dentro de la propia imagen— ni
   buscador, y no se queda pegada: fluye con la página. Al quedarse sola, el
   menú se centra. */
.cabecera--portada {
	position: static;
	border-top: 1px solid var(--c-borde);
}
.cabecera--portada .cabecera__barra {
	justify-content: center;
	min-height: 64px;
}

/* --- Marca --- */
.marca { display: flex; align-items: center; gap: .85rem; text-decoration: none; }

/* El logo del Customizer sale con class="custom-logo" desde el core, no con
   una clase del theme: hay que acotarlo por ahí o entra a tamaño original. */
.marca__logo,
.custom-logo-link img,
.custom-logo {
	max-height: 58px;
	width: auto;
	object-fit: contain;
}
.custom-logo-link { display: block; line-height: 0; }

.marca__sigla {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--c-azul);
	color: #fff;
	font-weight: 800;
	font-size: .82rem;
	letter-spacing: .02em;
	flex-shrink: 0;
}

.marca__texto { display: flex; flex-direction: column; line-height: 1.2; }
.marca__nombre {
	font-weight: 800;
	font-size: 1.02rem;
	color: var(--c-marino);
	letter-spacing: -.01em;
}
.marca__desc {
	font-size: .76rem;
	color: var(--c-texto-sec);
	letter-spacing: .01em;
}

/* --- Menú principal --- */
.nav-principal ul { display: flex; align-items: center; gap: .25rem; }

.nav-principal li { position: relative; }

.nav-principal a {
	display: block;
	padding: .6rem .85rem;
	border-radius: 7px;
	font-size: .95rem;
	font-weight: 600;
	color: var(--c-marino);
	text-decoration: none;
	transition: background var(--trans), color var(--trans);
	white-space: nowrap;
}
.nav-principal a:hover,
.nav-principal a:focus-visible { background: var(--c-azul-claro); color: var(--c-azul-osc); }

.nav-principal .current-menu-item > a,
.nav-principal .current_page_item > a,
.nav-principal .current-menu-ancestor > a {
	color: var(--c-azul-osc);
	background: var(--c-azul-claro);
}

/* Submenús */
.nav-principal .sub-menu {
	position: absolute;
	top: calc(100% + .35rem);
	left: 0;
	min-width: 230px;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: .4rem;
	background: #fff;
	border: 1px solid var(--c-borde);
	border-radius: var(--radio);
	box-shadow: var(--sombra-alta);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--trans), transform var(--trans), visibility var(--trans);
	z-index: 50;
}

.nav-principal li:hover > .sub-menu,
.nav-principal li:focus-within > .sub-menu,
.nav-principal .abierto > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav-principal .sub-menu a { font-weight: 500; white-space: normal; }

/* Flechita en ítems con hijos */
.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: .38em;
	height: .38em;
	margin-left: .45em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

/* --- Botón hamburguesa --- */
.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background: transparent;
	border: 1px solid var(--c-borde);
	border-radius: 8px;
	cursor: pointer;
}
.nav-toggle__barras,
.nav-toggle__barras::before,
.nav-toggle__barras::after {
	display: block;
	width: 21px;
	height: 2px;
	background: var(--c-marino);
	border-radius: 2px;
	transition: transform var(--trans), opacity var(--trans);
}
.nav-toggle__barras { position: relative; }
.nav-toggle__barras::before,
.nav-toggle__barras::after { content: ""; position: absolute; left: 0; }
.nav-toggle__barras::before { top: -6px; }
.nav-toggle__barras::after { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__barras { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__barras::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__barras::after { transform: translateY(-6px) rotate(-45deg); }

/* --- Buscador de la cabecera ---
   Hay dos formularios: el de la barra (escritorio) y el que viaja dentro del
   panel del menú (móvil). Cada uno se oculta donde no corresponde. */
.busqueda { position: relative; }
.nav-principal .busqueda { display: none; }
.busqueda input[type="search"] {
	width: 190px;
	padding: .5rem .8rem .5rem 2.1rem;
	border: 1px solid var(--c-borde);
	border-radius: 999px;
	background: var(--c-fondo-alt);
	font-size: .9rem;
	transition: width var(--trans), border-color var(--trans);
}
.busqueda input[type="search"]:focus { width: 230px; border-color: var(--c-azul); outline: none; }
.busqueda__icono {
	position: absolute;
	left: .75rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--c-texto-sec);
	pointer-events: none;
}
.busqueda button[type="submit"] { position: absolute; left: -9999px; }

/* =========================================================================
   5. BANNER DE SECCIÓN
      Los banners institucionales ya traen el corte diagonal incorporado en
      la propia imagen, así que aquí solo se presentan. Cuando no hay imagen
      se reproduce la misma gramática con un degradado y un corte en CSS.
   ========================================================================= */

.banner { position: relative; background: var(--c-marino); overflow: hidden; }

/* Ya no hay variante con imagen: el encabezado es SIEMPRE este, en todas las
   internas. La fotografia que antes lo sustituia abre ahora el contenido
   (.entrada__portada, mas abajo). */
.banner--liso {
	background: var(--c-azul);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.banner--liso::before {
	content: "";
	position: absolute;
	inset: 0 55% 0 0;
	background: var(--c-marino);
	clip-path: polygon(0 0, 100% 0, calc(100% - 90px) 100%, 0 100%);
}
.banner--liso .contenedor { position: relative; }

.banner__titulo {
	color: #fff;
	font-size: clamp(1.75rem, 4.5vw, 3rem);
	font-weight: 800;
	letter-spacing: -.025em;
	text-shadow: 0 2px 12px rgba(15, 28, 45, .25);
}
.banner__bajada > :last-child { margin-bottom: 0; }
.banner__bajada {
	color: rgba(255, 255, 255, .92);
	margin-top: .6rem;
	font-size: 1.05rem;
	max-width: 60ch;
}

/* =========================================================================
   5b. CARRUSEL DE PORTADA
       Dos efectos sobre el mismo marcado: .slider--deslizar mueve la pista
       en horizontal y .slider--difuminar cruza las opacidades. El JS solo
       cambia el índice activo; de la animación se encarga el CSS.
   ========================================================================= */

.slider {
	position: relative;
	background: var(--c-marino);
	overflow: hidden;
}

.slider__viewport { overflow: hidden; position: relative; }

/* --- Logo flotando sobre la franja oscura ---------------------------------
   Todas las fotografías del carrusel traen una franja marino a la izquierda
   que ocupa, como mínimo, el 27,9 % del ancho (medido sobre los archivos).
   El logo se queda dentro de ese margen para no pisar nunca la foto. */
.slider__logo {
	position: absolute;
	left: 3.5%;
	top: 50%;
	z-index: 2;
	width: 20%;
	max-width: 300px;
	transform: translateY(-50%);
	pointer-events: none;
	animation: cchdh-flotar 6s ease-in-out infinite;
}
.slider__logo img {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 3px 14px rgba(0, 0, 0, .35));
}

@keyframes cchdh-flotar {
	0%, 100% { transform: translateY(-50%); }
	50%      { transform: translateY(calc(-50% - 10px)); }
}

.slider__pista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.slider__slide { position: relative; }

.slider__img {
	width: 100%;
	aspect-ratio: 1188 / 376;
	object-fit: cover;
	display: block;
}

/* En la portada el menú va DEBAJO del carrusel, así que el carrusel no puede
   llenar la pantalla: se le pone un techo para que la barra asome siempre en
   el primer pantallazo y se vea de inmediato dónde está la navegación.
   Con la proporción normal (3,16:1) el carrusel ya queda muy por debajo de
   este techo; solo entra en juego en pantallas anchas y bajas. */
.portada .slider__img { max-height: calc(100vh - 150px); }

.slider__enlace { display: block; line-height: 0; }

/* --- Efecto: desplazamiento hacia la izquierda --- */
.slider--deslizar .slider__pista {
	display: flex;
	flex-wrap: nowrap;
	transform: translate3d(0, 0, 0);
	transition: transform .7s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}
.slider--deslizar .slider__slide {
	flex: 0 0 100%;
	min-width: 100%;
}

/* --- Efecto: difuminado --- */
.slider--difuminar .slider__pista { display: grid; }
.slider--difuminar .slider__slide {
	grid-area: 1 / 1;
	opacity: 0;
	transition: opacity .8s ease;
	pointer-events: none;
}
.slider--difuminar .slider__slide.activo {
	opacity: 1;
	pointer-events: auto;
}

/* --- Barra de avance ------------------------------------------------------
   Cuanto le queda a la diapositiva. Es una animacion CSS y no un temporizador
   en JS a proposito: asi pausarla es una sola linea -animation-play-state- y
   al soltar sigue exactamente donde estaba, sin recalcular nada. */
.slider__progreso {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: rgba(255, 255, 255, .18);
	z-index: 3;
	overflow: hidden;
}
.slider__progreso i {
	display: block;
	height: 100%;
	background: var(--c-azul);
	transform: scaleX(0);
	transform-origin: left center;
	animation: cchdh-progreso var(--slider-dur, 4s) linear forwards;
}
@keyframes cchdh-progreso {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* Si se pide menos animacion el carrusel no avanza solo, asi que la barra no
   tendria nada que contar -- y ademas el reset global de arriba la dispararia
   entera de golpe. */
@media (prefers-reduced-motion: reduce) {
	.slider__progreso { display: none; }
}

/* --- Flechas --- */
.slider__flecha {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: var(--c-marino);
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--trans), background var(--trans), transform var(--trans);
	box-shadow: 0 2px 12px rgba(15, 28, 45, .2);
}
.slider__flecha--prev { left: 1rem; }
.slider__flecha--next { right: 1rem; }

.slider:hover .slider__flecha,
.slider:focus-within .slider__flecha { opacity: 1; }

.slider__flecha:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.slider__flecha:focus-visible { opacity: 1; }

/* --- Puntos y pausa --- */
.slider__controles {
	position: absolute;
	left: 50%;
	bottom: .9rem;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .4rem .6rem;
	border-radius: 999px;
	background: rgba(15, 28, 45, .45);
	backdrop-filter: blur(6px);
}

.slider__puntos { display: flex; align-items: center; gap: .4rem; }

.slider__punto {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	cursor: pointer;
	transition: background var(--trans), width var(--trans);
}
.slider__punto:hover { background: rgba(255, 255, 255, .8); }
.slider__punto.activo { background: #fff; width: 24px; border-radius: 999px; }

.slider__pausa {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: rgba(255, 255, 255, .85);
	cursor: pointer;
	transition: color var(--trans), background var(--trans);
}
.slider__pausa:hover { color: #fff; background: rgba(255, 255, 255, .15); }

/* Los dos iconos comparten celda y solo se ve el que toca. El atributo
   `hidden` por sí solo no oculta un <svg> de forma fiable, así que se fuerza. */
.slider__pausa svg { grid-area: 1 / 1; }
.slider__pausa svg[hidden] { display: none; }

/* Sin JS el carrusel no puede rotar: se muestra solo el primero y se
   esconden unos controles que no harían nada. */
.no-js .slider__slide:not(.activo) { display: none; }
.no-js .slider__flecha,
.no-js .slider__controles { display: none; }

@media (max-width: 780px) {
	.slider__flecha { display: none; }
	.slider__controles { bottom: .6rem; }

	/* Se da más alto a la imagen, pero anclada a la izquierda: si se recortara
	   por el centro desaparecería justo la franja donde va el logo. */
	.slider__img {
		aspect-ratio: 2 / 1;
		object-position: left center;
	}

	/* Al recortarse los lados, la franja pasa a ocupar más porcentaje del
	   ancho visible, así que el logo puede crecer. */
	.slider__logo { width: 30%; left: 4%; }
}

@media (max-width: 480px) {
	.slider__img { aspect-ratio: 5 / 3; }
	.slider__logo { width: 34%; }
}

/* Si el sistema pide menos animación: sin deslizamiento, sin cruce y sin que
   el logo flote. El JS además no autoavanza. */
@media (prefers-reduced-motion: reduce) {
	.slider--deslizar .slider__pista { transition: none; }
	.slider--difuminar .slider__slide { transition: none; }
	.slider__logo { animation: none; }
}

/* =========================================================================
   6. SECCIONES DE LA PORTADA
   ========================================================================= */

/* El aire entre secciones se acorto a peticion de Alvaro: la portada respiraba
   demasiado entre Actualidad, Mural de la Memoria e Internacional. */
.seccion { padding-block: clamp(1.75rem, 3.2vw, 2.5rem); }
.seccion--alt { background: var(--c-fondo-alt); }
.seccion--marino { background: var(--c-marino); }
.seccion--marino .seccion__titulo,
.seccion--marino .tarjeta__titulo a { color: #fff; }

.seccion__cabecera {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
	padding-bottom: .75rem;
	border-bottom: 2px solid var(--c-borde);
}

.seccion__titulo {
	font-size: clamp(1.35rem, 2.6vw, 1.85rem);
	position: relative;
	padding-left: .85rem;
}
.seccion__titulo::before {
	content: "";
	position: absolute;
	left: 0;
	top: .12em;
	bottom: .12em;
	width: 5px;
	border-radius: 3px;
	background: var(--c-azul);
}

.seccion__vermas {
	font-weight: 700;
	font-size: .92rem;
	color: var(--c-azul-osc);
	text-decoration: none;
	white-space: nowrap;
	transition: gap var(--trans);
	display: inline-flex;
	align-items: center;
	gap: .3rem;
}
.seccion__vermas::after { content: "→"; transition: transform var(--trans); }
.seccion__vermas:hover::after { transform: translateX(3px); }

/* --- Banner central: los seis banners rotulados en dos columnas -----------
   Es el "Banner (2 columnas centrales)" del Word. Traen el rótulo dentro de la
   imagen y el corte diagonal ya dibujado: el theme solo los coloca. No se
   recortan nunca —fluyen a su propia proporción— para que el texto no se
   pierda por un lado. */
.banners-central {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gap);
}

.banner-bloque {
	display: block;
	border-radius: var(--radio);
	overflow: hidden;
	background: var(--c-azul-claro);
	line-height: 0;
	box-shadow: 0 1px 3px rgba(15, 28, 45, .07);
}
.banner-bloque img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform var(--trans);
}
a.banner-bloque:hover img { transform: scale(1.015); }
a.banner-bloque:focus-visible { outline: 3px solid var(--c-azul); outline-offset: 3px; }

/* --- Búsquedas: las categorías que no tienen bloque propio ----------------
   Cierra la portada. Flex y no rejilla a propósito: son rótulos de largo muy
   distinto —de «Informes» a «Declaraciones Públicas»— y en una rejilla la
   columna la fijaría el más largo, dejando aire muerto a la derecha de los
   cortos. En flex cada ficha ocupa lo suyo y la fila se pliega sola.

   La sección va en blanco, no en --alt: el pie arranca con 3,5rem de margen
   superior, así que un fondo gris aquí dejaría una franja blanca suelta entre
   el bloque y el pie marino. El gris vive en las fichas. */
.busquedas {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.busquedas__chip {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem 1.1rem;
	background: var(--c-fondo-alt);
	border: 1px solid var(--c-borde);
	border-radius: 999px;
	color: var(--c-marino);
	font-weight: 700;
	font-size: .95rem;
	text-decoration: none;
	transition: background var(--trans), border-color var(--trans),
		color var(--trans), transform var(--trans);
}
.busquedas__chip:hover {
	background: var(--c-azul);
	border-color: var(--c-azul);
	color: #fff;
	transform: translateY(-1px);
}

.busquedas__n {
	font-size: .78rem;
	font-weight: 700;
	color: var(--c-texto-sec);
	background: #fff;
	border-radius: 999px;
	padding: .05rem .5rem;
	transition: background var(--trans), color var(--trans);
}
.busquedas__chip:hover .busquedas__n {
	background: rgba(255, 255, 255, .24);
	color: #fff;
}

/* =========================================================================
   7. REJILLAS Y TARJETAS
   ========================================================================= */

.rejilla { display: grid; gap: var(--gap); }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }

.tarjeta {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--c-borde);
	border-radius: var(--radio);
	overflow: hidden;
	transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
	height: 100%;
}
.tarjeta:hover {
	transform: translateY(-3px);
	box-shadow: var(--sombra-alta);
	border-color: transparent;
}

.tarjeta__media { position: relative; background: var(--c-azul-claro); }
.tarjeta__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.tarjeta__cat {
	position: absolute;
	left: .75rem;
	bottom: .75rem;
	background: var(--c-azul);
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: .25rem .6rem;
	border-radius: 4px;
	text-decoration: none;
}
.tarjeta__cat:hover { background: var(--c-marino); color: #fff; }

.tarjeta__cuerpo {
	padding: 1.1rem 1.15rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	flex: 1;
}

.tarjeta__titulo { font-size: 1.06rem; line-height: 1.3; }
.tarjeta__titulo a { color: var(--c-marino); text-decoration: none; }
.tarjeta__titulo a:hover { color: var(--c-azul-osc); }

.tarjeta__fecha {
	font-size: .8rem;
	color: var(--c-texto-sec);
	display: flex;
	align-items: center;
	gap: .4rem;
}

.tarjeta__extracto {
	font-size: .92rem;
	color: var(--c-texto-sec);
	line-height: 1.55;
}

/* Tarjeta destacada (primera de Actualidad): horizontal y a todo el ancho,
   para que las otras tres queden en rejilla limpia debajo. */
.tarjeta--destacada { display: grid; grid-template-columns: 1.25fr 1fr; align-items: stretch; }
.tarjeta--destacada .tarjeta__media { height: 100%; }
.tarjeta--destacada .tarjeta__media img,
.tarjeta--destacada .tarjeta__marcador { height: 100%; aspect-ratio: auto; min-height: 320px; object-fit: cover; }
.tarjeta--destacada .tarjeta__cuerpo { justify-content: center; padding: 2rem 2.25rem; gap: .7rem; }
.tarjeta--destacada .tarjeta__titulo { font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.tarjeta--destacada .tarjeta__extracto { font-size: 1rem; }

@media (max-width: 780px) {
	.tarjeta--destacada { grid-template-columns: 1fr; }
	.tarjeta--destacada .tarjeta__media img,
	.tarjeta--destacada .tarjeta__marcador { min-height: 0; aspect-ratio: 16 / 9; }
	.tarjeta--destacada .tarjeta__cuerpo { padding: 1.25rem; }
}

/* Tarjeta compacta, sin imagen */
.tarjeta--lista { flex-direction: row; align-items: flex-start; gap: .9rem; padding: .9rem; }
.tarjeta--lista .tarjeta__media { width: 96px; flex-shrink: 0; border-radius: 7px; overflow: hidden; }
.tarjeta--lista .tarjeta__media img { aspect-ratio: 1; }
.tarjeta--lista .tarjeta__cuerpo { padding: 0; }
.tarjeta--lista .tarjeta__titulo { font-size: .95rem; }

/* =========================================================================
   8. CARRUSEL (Actualidad) — scroll-snap nativo, sin librerías
   ========================================================================= */

.carrusel { position: relative; }

/* Flex y no grid a propósito: con grid-auto-columns el porcentaje no resuelve
   dentro de un contenedor con overflow-x, se va a cero y el calc queda
   negativo, así que las tarjetas colapsaban a su ancho mínimo (~111 px). Como
   ítem flex, el porcentaje sí resuelve contra el ancho del contenedor. */
.carrusel__pista {
	display: flex;
	gap: var(--gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: .75rem;
	scrollbar-width: thin;
}
.carrusel__pista > * {
	flex: 0 0 min(260px, 100%);
	scroll-snap-align: start;
}

.carrusel__pista::-webkit-scrollbar { height: 6px; }
.carrusel__pista::-webkit-scrollbar-thumb { background: var(--c-borde); border-radius: 3px; }
.carrusel__pista::-webkit-scrollbar-thumb:hover { background: var(--c-azul); }

.carrusel__controles { display: flex; gap: .5rem; }

.carrusel__btn {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	background: #fff;
	border: 1px solid var(--c-borde);
	border-radius: 50%;
	cursor: pointer;
	color: var(--c-marino);
	transition: background var(--trans), color var(--trans), border-color var(--trans);
}
.carrusel__btn:hover:not(:disabled) { background: var(--c-azul); color: #fff; border-color: var(--c-azul); }
.carrusel__btn:disabled { opacity: .35; cursor: default; }

@media (min-width: 700px) {
	.carrusel__pista > * { flex-basis: calc((100% - 2 * var(--gap)) / 3); }
}

/* =========================================================================
   9. BLOQUE DE COLECCIONES (banner de 2 columnas del Word)
   ========================================================================= */

.colecciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }

.coleccion {
	background: #fff;
	border: 1px solid var(--c-borde);
	border-radius: var(--radio);
	padding: 1.4rem 1.5rem;
}
.coleccion__titulo {
	font-size: 1.1rem;
	margin-bottom: .9rem;
	padding-bottom: .65rem;
	border-bottom: 2px solid var(--c-azul-claro);
}
.coleccion__lista li + li { margin-top: .1rem; }
.coleccion__lista a {
	display: block;
	padding: .5rem .7rem;
	border-radius: 7px;
	color: var(--c-texto);
	text-decoration: none;
	font-size: .94rem;
	font-weight: 500;
	transition: background var(--trans), color var(--trans), padding-left var(--trans);
}
.coleccion__lista a:hover {
	background: var(--c-azul-claro);
	color: var(--c-azul-osc);
	padding-left: 1rem;
}

/* =========================================================================
   10. CONTENIDO (single / page)
   ========================================================================= */

.disposicion {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-block: clamp(2rem, 4vw, 3.25rem);
	align-items: start;
}
.disposicion--completa { grid-template-columns: minmax(0, 1fr); }

/* La fotografia que antes hacia de cabecera, ahora abriendo el contenido bajo
   el encabezado estandar. NO se recorta -a diferencia de cuando era cabecera-:
   fluye a su propia proporcion, porque los banners institucionales traen el
   rotulo dentro de la imagen y un recorte se lo comeria por un lado. */
.entrada__portada {
	margin: 0 0 2rem;
	border-radius: var(--radio);
	overflow: hidden;
	background: var(--c-azul-claro);
	line-height: 0;
}
.entrada__portada img { width: 100%; height: auto; display: block; }

/* Listado de entradas bajo el texto de una pagina (Regiones). Separado del
   contenido, para que se lea como otra cosa y no como el final del texto. */
.pagina-listado { margin-top: 3rem; }

.entrada__cabecera { margin-bottom: 1.75rem; }

.entrada__titulo {
	font-size: clamp(1.7rem, 4vw, 2.5rem);
	margin-bottom: .75rem;
}

.entrada__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.1rem;
	font-size: .88rem;
	color: var(--c-texto-sec);
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--c-borde);
}
.entrada__meta a { color: var(--c-azul-osc); text-decoration: none; font-weight: 600; }
.entrada__meta a:hover { text-decoration: underline; }

.entrada__destacada { margin-bottom: 1.75rem; border-radius: var(--radio); overflow: hidden; }

/* Contenido enriquecido del editor */
.contenido { font-size: 1.04rem; line-height: 1.75; }
.contenido > * + * { margin-top: 1.15rem; }
.contenido h2 { font-size: 1.6rem; margin-top: 2.25rem; }
.contenido h3 { font-size: 1.3rem; margin-top: 1.85rem; }
.contenido h4 { font-size: 1.1rem; margin-top: 1.5rem; }
.contenido ul, .contenido ol { padding-left: 1.4rem; }
.contenido li + li { margin-top: .35rem; }
.contenido img { border-radius: var(--radio); }
.contenido figure { margin: 1.75rem 0; }
.contenido figcaption {
	font-size: .85rem;
	color: var(--c-texto-sec);
	text-align: center;
	margin-top: .6rem;
}
.contenido blockquote {
	border-left: 4px solid var(--c-azul);
	background: var(--c-azul-claro);
	padding: 1rem 1.35rem;
	border-radius: 0 var(--radio) var(--radio) 0;
	font-style: italic;
	color: var(--c-marino);
}
.contenido blockquote p + p { margin-top: .75rem; }
.contenido table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.contenido th, .contenido td { border: 1px solid var(--c-borde); padding: .6rem .8rem; text-align: left; }
.contenido th { background: var(--c-fondo-alt); font-weight: 700; }
.contenido pre {
	background: var(--c-marino);
	color: #e8eef5;
	padding: 1.1rem;
	border-radius: var(--radio);
	overflow-x: auto;
	font-size: .9rem;
}
.contenido code { font-size: .92em; }
.contenido :not(pre) > code {
	background: var(--c-azul-claro);
	padding: .12em .4em;
	border-radius: 4px;
	color: var(--c-azul-osc);
}
.contenido a { font-weight: 500; }

/* Alineaciones de WordPress */
.alignleft { float: left; margin: .4rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .4rem 0 1rem 1.5rem; }
.aligncenter { margin-inline: auto; }
.alignwide { width: min(100vw - 2.5rem, 1100px); margin-inline: auto; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); max-width: none; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: .85rem; color: var(--c-texto-sec); text-align: center; }
.sticky .tarjeta { border-color: var(--c-azul); }

/* Etiquetas del pie de la entrada */
.entrada__pie {
	margin-top: 2.5rem;
	padding-top: 1.35rem;
	border-top: 1px solid var(--c-borde);
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
}
.etiqueta {
	display: inline-block;
	padding: .28rem .7rem;
	background: var(--c-azul-claro);
	color: var(--c-azul-osc);
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--trans), color var(--trans);
}
.etiqueta:hover { background: var(--c-azul); color: #fff; }

/* Navegación entre entradas */
.nav-entradas {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-top: 2.5rem;
}
.nav-entradas a {
	display: block;
	padding: 1rem 1.2rem;
	border: 1px solid var(--c-borde);
	border-radius: var(--radio);
	text-decoration: none;
	transition: border-color var(--trans), background var(--trans);
}
.nav-entradas a:hover { border-color: var(--c-azul); background: var(--c-azul-claro); }
.nav-entradas span {
	display: block;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--c-texto-sec);
	margin-bottom: .3rem;
	font-weight: 700;
}
.nav-entradas strong { color: var(--c-marino); font-size: .97rem; line-height: 1.35; font-weight: 600; }
.nav-entradas .siguiente { text-align: right; }

/* =========================================================================
   11. BARRA LATERAL
   ========================================================================= */

.lateral { position: sticky; top: 105px; display: grid; gap: 1.5rem; }
.admin-bar .lateral { top: 137px; }

.widget {
	background: var(--c-fondo-alt);
	border: 1px solid var(--c-borde);
	border-radius: var(--radio);
	padding: 1.25rem 1.35rem;
}
.widget__titulo,
.widget .wp-block-heading,
.widget-title {
	font-size: 1rem;
	margin-bottom: .9rem;
	padding-bottom: .6rem;
	border-bottom: 2px solid var(--c-azul);
	color: var(--c-marino);
	font-weight: 800;
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li + li { margin-top: .15rem; }
.widget a {
	display: block;
	padding: .42rem .55rem;
	border-radius: 6px;
	color: var(--c-texto);
	text-decoration: none;
	font-size: .93rem;
	transition: background var(--trans), color var(--trans);
}
.widget a:hover { background: #fff; color: var(--c-azul-osc); }
.widget li.cat-item { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

/* =========================================================================
   12. PAGINACIÓN
   ========================================================================= */

.paginacion { margin-top: 2.5rem; }
.paginacion .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.paginacion .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding-inline: .7rem;
	border: 1px solid var(--c-borde);
	border-radius: 8px;
	color: var(--c-marino);
	text-decoration: none;
	font-weight: 600;
	font-size: .93rem;
	transition: background var(--trans), color var(--trans), border-color var(--trans);
}
.paginacion .page-numbers:hover { background: var(--c-azul-claro); border-color: var(--c-azul); }
.paginacion .page-numbers.current { background: var(--c-azul); color: #fff; border-color: var(--c-azul); }
.paginacion .page-numbers.dots { border-color: transparent; }

/* =========================================================================
   13. PIE
   ========================================================================= */

.pie { background: var(--c-marino); color: rgba(255, 255, 255, .8); margin-top: 3.5rem; }

.pie__superior {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: 2.5rem;
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.pie h2, .pie h3, .pie .widget__titulo { color: #fff; border-bottom-color: rgba(63, 169, 245, .5); }

.pie__marca { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; }
.pie__nombre { color: #fff; font-weight: 800; font-size: 1.05rem; }
.pie__desc { font-size: .92rem; line-height: 1.65; max-width: 42ch; }

.pie .widget { background: transparent; border: 0; padding: 0; }
.pie .widget a { color: rgba(255, 255, 255, .8); padding-inline: 0; }
.pie .widget a:hover { background: transparent; color: var(--c-azul); }

.pie__inferior {
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding-block: 1.35rem;
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	font-size: .87rem;
}
.pie__inferior a { color: var(--c-azul); text-decoration: none; }
.pie__inferior a:hover { text-decoration: underline; }

/* Fila de redes del pie. El circulo esperaba un icono desde el principio;
   hasta la v1.8.1 no habia ninguno y el bloque ni siquiera se pintaba. */
.redes { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.redes a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	transition: background var(--trans), transform var(--trans);
}
.redes a:hover { background: var(--c-azul); transform: translateY(-2px); }
.redes svg { display: block; }

/* =========================================================================
   14. ESTADOS VACÍOS Y 404
   ========================================================================= */

.vacio {
	text-align: center;
	padding: clamp(2.5rem, 7vw, 5rem) 1.5rem;
	background: var(--c-fondo-alt);
	border: 1px dashed var(--c-borde);
	border-radius: var(--radio);
}
.vacio__titulo { font-size: 1.35rem; margin-bottom: .6rem; }
.vacio p { color: var(--c-texto-sec); max-width: 52ch; margin-inline: auto; }
.vacio .busqueda { margin-top: 1.5rem; display: inline-block; }
.vacio .busqueda input[type="search"] { width: 280px; }

.error404__codigo {
	font-size: clamp(4rem, 15vw, 8rem);
	font-weight: 800;
	color: var(--c-azul);
	line-height: 1;
	letter-spacing: -.04em;
}

.boton {
	display: inline-block;
	padding: .7rem 1.5rem;
	background: var(--c-azul);
	color: #fff;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 700;
	font-size: .95rem;
	transition: background var(--trans), transform var(--trans);
}
.boton:hover { background: var(--c-azul-osc); color: #fff; transform: translateY(-1px); }

/* Pie de un bloque de la portada: el enlace que lleva al archivo completo.
   Va al final de la caja -alineado a la derecha, donde termina la ultima
   tarjeta- y con la letra mas chica que un boton normal: es una salida
   secundaria, no la accion principal del bloque. */
.bloque__pie { margin-top: 1.25rem; text-align: right; }
.bloque__pie .boton { font-size: .85rem; padding: .5rem 1.1rem; }

/* =========================================================================
   15. RESPONSIVE
   ========================================================================= */

@media (max-width: 1024px) {
	.disposicion { grid-template-columns: minmax(0, 1fr); }
	.lateral { position: static; }
	.pie__superior { grid-template-columns: 1fr 1fr; }
	.rejilla--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
	.nav-toggle { display: flex; }

	/* En la portada el menú se centra porque va solo, pero al plegarse a
	   hamburguesa lo único que queda en flujo es el botón: va a la derecha,
	   donde el pulgar lo espera. */
	.cabecera--portada .cabecera__barra { justify-content: flex-end; }

	.nav-principal {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(88vw, 340px);
		background: #fff;
		padding: 5.5rem 1.25rem 2rem;
		overflow-y: auto;
		box-shadow: -8px 0 40px rgba(15, 28, 45, .18);
		transform: translateX(100%);
		transition: transform .25s ease;
		z-index: 90;
	}
	.nav-principal.abierta { transform: translateX(0); }

	.nav-principal ul { flex-direction: column; align-items: stretch; gap: .1rem; }
	.nav-principal a { padding: .8rem .9rem; font-size: 1rem; }

	.nav-principal .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-left: 2px solid var(--c-azul-claro);
		border-radius: 0;
		margin: .15rem 0 .4rem .9rem;
		padding: 0 0 0 .35rem;
		display: none;
	}
	.nav-principal .abierto > .sub-menu { display: block; }

	.menu-item-has-children > a::after { float: right; margin-top: .5em; transition: transform var(--trans); }
	.nav-principal .abierto > a::after { transform: translateY(-2px) rotate(-135deg); }

	.nav-fondo {
		position: fixed;
		inset: 0;
		background: rgba(15, 28, 45, .5);
		backdrop-filter: blur(2px);
		z-index: 80;
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--trans), visibility var(--trans);
	}
	.nav-fondo.visible { opacity: 1; visibility: visible; }

	.busqueda { display: none; }
	.nav-principal .busqueda { display: block; margin-top: 1.25rem; }
	.nav-principal .busqueda input[type="search"] { width: 100%; }
	.nav-principal .busqueda input[type="search"]:focus { width: 100%; }
}

@media (max-width: 780px) {
	.rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; }
	.colecciones { grid-template-columns: 1fr; }
	.banners-central { grid-template-columns: 1fr; }
	.nav-entradas { grid-template-columns: 1fr; }
	.nav-entradas .siguiente { text-align: left; }
	.marca__desc { display: none; }
}

@media (max-width: 560px) {
	.pie__superior { grid-template-columns: 1fr; gap: 1.75rem; }
	.pie__inferior { flex-direction: column; align-items: flex-start; }
	.seccion__cabecera { flex-direction: column; align-items: flex-start; gap: .5rem; }
	.tarjeta--lista { flex-direction: column; }
	.tarjeta--lista .tarjeta__media { width: 100%; }
	.tarjeta--lista .tarjeta__media img { aspect-ratio: 16 / 10; }

	/* Con las fichas a tamaño completo, en móvil casi ninguna comparte fila:
	   se aprietan un punto para que entren de a dos. */
	.busquedas { gap: .5rem; }
	.busquedas__chip { font-size: .88rem; padding: .5rem .85rem; }
}

/* =========================================================================
   16. IMPRESIÓN
   ========================================================================= */

@media print {
	.cabecera, .pie, .lateral, .nav-entradas, .carrusel__controles, .banner { display: none; }
	.disposicion { grid-template-columns: 1fr; }
	body { font-size: 11pt; color: #000; }
	a { text-decoration: underline; }
	.contenido a::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}