/* =========================================================================
   css/actualidad2026.css - Seccion "Actualidad" 2026 de la web principal
   (partials/actualidad2026.php). Todo bajo .actualidad26.
   Junta lo que en agencias reparten estilos.css (.news-section,
   .news-card-horizontal, .news-*, botones, puntos de Slick) y comun.css
   (flechas de Slick). Las tarjetas miden todas lo mismo: titulo a 3 lineas y
   texto a 2, para que fecha y botones queden alineados.
   ========================================================================= */

.actualidad26 {
	--ac26-amarillo: #ffb800;
	--ac26-titulo: #2e3946;
	clear: both;
	padding: 50px 24px 60px;
	background-color: #fff;
	font-family: var(--fuente-texto);
	text-align: left;
}

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

.actualidad26-ancho {
	max-width: 85%;
	margin: 0 auto;
}

/* ---------- Cabecera ---------- */
.actualidad26-cabecera {
	margin-bottom: 30px;
	text-align: center;
}

/* El h2 solo envuelve la imagen "ACTUALIDAD": sin los estilos de estilos2.css */
.actualidad26 .actualidad26-titulo {
	margin: 0;
	padding: 0;
	background: none;
	font-size: 0;
	line-height: 0;
}

/* "ACTUALIDAD" en texto relleno con una foto (img/fondo_titulos.png), como la antigua imagen
   encabezado-actualidad_*.png. Sin soporte de background-clip: text, en color.
   La variante "pie" (sin -foto) lleva su propio titulo blanco, mas abajo */
.actualidad26 .actualidad26-titulo-foto {
	color: var(--ac26-titulo);
	font-family: var(--fuente-titulos);
	font-size: clamp(2.2rem, 1rem + 5vw, 4.4rem); /* como mucho, el ancho de la antigua imagen (506px) */
	font-weight: 900;
	letter-spacing: -.01em;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.actualidad26 .actualidad26-titulo-foto {
		display: inline-block;
		background: url('../img/fondo_titulos.png') center / cover no-repeat;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.actualidad26-intro {
	max-width: 84%;
	margin: 15px auto 0;
	color: #f4b333;
	font-size: clamp(1.3rem, 0.9878rem + 1.33vw, 2.125rem);
	font-weight: 700;
	line-height: 1.1;
}

/* ---------- Carrusel ---------- */
.actualidad26-carrusel {
	position: relative;
}

.actualidad26 .slick-list {
	margin: 0 50px;
}

/* Fichas en fila; el alto lo fija .actualidad26-tarjeta (aqui la ficha es la propia
   diapositiva de Slick: un height:auto en .slick-slide anularia sus 250px) */
.actualidad26 .slick-track {
	display: flex !important;
	align-items: stretch;
}

/* Antes de que Slick arranque (o sin JS): en fila y sin desbordar */
.actualidad26-carrusel:not(.slick-initialized) {
	display: flex;
	overflow: hidden;
}

.actualidad26-carrusel:not(.slick-initialized) .actualidad26-tarjeta {
	flex: 0 0 50%;
}

/* ---------- Ficha horizontal (news-card-horizontal) ---------- */
/* 250px de alto fijos, como en agencias (la imagen se ajusta a ese alto) */
.actualidad26 .actualidad26-tarjeta {
	display: flex !important;
	height: 250px;
	margin: 15px 10px;
	padding: 25px 15px;
	overflow: hidden;
	border: 1px solid #e9ecef;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.1);
}

.actualidad26-imagen {
	display: block;
	flex: 0 0 40%;
	overflow: hidden;
	background-color: #f1f1f1;
}

.actualidad26-imagen img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s;
}

.actualidad26-tarjeta:hover .actualidad26-imagen img {
	transform: scale(1.2);
}

.actualidad26-contenido {
	display: flex;
	flex: 0 0 60%;
	flex-direction: column;
	min-width: 0;
	padding: 5px 25px;
}

.actualidad26-categoria {
	display: block;
	margin-bottom: 8px;
	color: #c8c8c8;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* Siempre el alto de 3 lineas: fecha, texto y botones a la misma altura en todas */
.actualidad26 .actualidad26-tarjeta-titulo {
	display: -webkit-box;
	height: 63px;
	margin: 0 0 8px;
	padding: 0;
	overflow: hidden;
	background: none;
	color: var(--ac26-titulo);
	font-family: var(--fuente-titulos);
	font-size: clamp(1.1rem, 1.024rem + 0.323vw, 1.3rem);
	font-weight: 400; /* Fjalla One solo tiene 400: en negrita sintetica se emborrona */
	letter-spacing: .3px;
	line-height: 21px;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.actualidad26 .actualidad26-tarjeta-titulo a {
	color: var(--ac26-titulo);
	text-decoration: none;
}

.actualidad26 .actualidad26-tarjeta-titulo a:hover {
	color: #f4b333;
}

.actualidad26-fecha {
	display: block;
	margin-bottom: 8px;
	color: var(--ac26-amarillo);
	font-size: .7rem;
	letter-spacing: 1px;
}

.actualidad26 .actualidad26-texto {
	display: -webkit-box;
	height: 2.4em;
	margin: 0 0 10px;
	overflow: hidden;
	color: #666;
	font-size: .7rem;
	line-height: 1.2;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.actualidad26-botones {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.actualidad26 .actualidad26-boton {
	display: inline-block;
	min-width: 90px;
	padding: 7px 20px;
	border: 1px solid var(--ac26-amarillo);
	border-radius: 6px;
	background-color: var(--ac26-amarillo);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .3px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: all .3s ease;
}

.actualidad26 .actualidad26-boton-borde {
	background-color: #fff;
	color: var(--ac26-amarillo);
}

.actualidad26 .actualidad26-boton:hover,
.actualidad26 .actualidad26-boton:focus {
	background-color: #e5a500;
	border-color: #e5a500;
	color: #fff;
}

/* ---------- Flechas y puntos de Slick ---------- */
.actualidad26 .slick-arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	color: var(--ac26-titulo);
	font-size: 0;
	cursor: pointer;
	transform: translateY(-50%);
	transition: box-shadow .3s ease, color .3s ease;
}

.actualidad26 .slick-arrow:hover,
.actualidad26 .slick-arrow:focus-visible {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
	color: #f4b333;
}

.actualidad26 .slick-prev { left: 0; }
.actualidad26 .slick-next { right: 0; }

.actualidad26 .slick-dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.actualidad26 .slick-dots li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.actualidad26 .slick-dots button {
	display: block;
	width: 12px;
	height: 12px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #ccc;
	font-size: 0;
	opacity: .45;
	cursor: pointer;
}

.actualidad26 .slick-dots .slick-active button {
	background: #555;
	opacity: .8;
	transform: scale(1.2);
}

/* ---------- Tablet y movil ---------- */
@media (max-width: 991px) {
	.actualidad26 {
		padding: 40px 16px 48px;
	}

	.actualidad26-ancho {
		max-width: 100%;
	}

	.actualidad26-intro {
		max-width: 100%;
	}

	/* Imagen arriba y texto debajo */
	.actualidad26 .actualidad26-tarjeta {
		flex-direction: column;
		height: auto;
	}

	.actualidad26-imagen {
		flex: 0 0 200px;
		height: 200px;
	}

	.actualidad26-contenido {
		flex: 1 1 auto;
		padding: 15px 5px 0;
	}
}

@media (max-width: 575px) {
	.actualidad26 .slick-list {
		margin: 0 40px;
	}

	.actualidad26 .slick-arrow {
		width: 36px;
		height: 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.actualidad26-imagen img {
		transition: none;
	}

	.actualidad26-tarjeta:hover .actualidad26-imagen img {
		transform: none;
	}
}

/* ---------- Variante "pie" ($actualidad_2026_pie, de momento norma.php) ----------
   Como seccion_actualidad.php en las fichas de agencias (.actualidad-section de
   agencias/css/estilos.css): fondo oscuro con foto, titulo en texto y las 3
   ultimas noticias en fila, sin carrusel. Va justo antes de los logos de clientes */
.actualidad26.actualidad26--pie {
	padding: 70px 24px 50px;
	background: #232d3b url('../img/formulario-contacto.png') center / cover no-repeat;
}

.actualidad26.actualidad26--pie .actualidad26-ancho {
	max-width: 92%;
}

.actualidad26.actualidad26--pie .actualidad26-titulo {
	color: #fff;
	font-family: var(--fuente-titulos);
	font-size: clamp(2.4rem, 1.5rem + 3vw, 4rem);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.1;
}

.actualidad26.actualidad26--pie .actualidad26-intro {
	max-width: 100%;
	margin-top: 20px;
	font-size: clamp(1.2rem, 0.95rem + 1vw, 2rem);
}

.actualidad26-rejilla {
	display: flex;
	gap: 20px;
}

.actualidad26.actualidad26--pie .actualidad26-tarjeta {
	flex: 1 1 0;
	min-width: 0;
	height: 350px;
	margin: 0;
	padding: 25px 15px;
	border: 0;
	border-radius: 4px;
}

/* Con tres en fila no caben imagen y texto lado a lado: una debajo de otra */
@media (max-width: 1399.98px) {
	.actualidad26-rejilla {
		flex-direction: column;
		max-width: 760px;
		margin: 0 auto;
	}

	.actualidad26.actualidad26--pie .actualidad26-tarjeta {
		flex: 0 0 auto;
		height: 300px;
	}
}

@media (max-width: 991px) {
	.actualidad26.actualidad26--pie {
		padding: 40px 16px 40px;
	}

	.actualidad26.actualidad26--pie .actualidad26-ancho {
		max-width: 100%;
	}

	.actualidad26.actualidad26--pie .actualidad26-tarjeta {
		height: auto;
	}
}