/* Ultimas noticias. Creado 2026-09-17 · v1.16.0
   Regla de la casa: cada cambio de CSS = nombre de archivo nuevo (WP Rocket).
   Todo prefijado con .n27 para ganarle al kit de Elementor. */

.n27{
	--n27-naranja:#F57C00;
	--n27-marron:#7A5238;
	--n27-crema:#F2E6D8;
	--n27-crema-bd:#FFF4E5;
	--n27-tinta:#1B1512;
	--n27-gris:#8A817B;
	--n27-linea:#E8E2DA;
	--n27-crema-fondo:#FBF7F2;
	max-width:none;
	margin:0;
	padding:34px 0 34px;
	box-sizing:border-box;
	background:var(--n27-crema-fondo);
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

/* El bloque va a todo ancho sobre crema; lo de dentro sigue centrado a 1280. */
.n27 .n27-cabeza,
.n27 .n27-categorias,
.n27 .n27-rejilla{
	max-width:1280px;
	margin-left:auto;
	margin-right:auto;
	padding-left:22px;
	padding-right:22px;
	box-sizing:border-box;
}

/* ---------- cabecera ---------- */
/* Cabecera de bloque de la casa: titulo a la izquierda, lema al lado en la
   misma linea base, enlace a la derecha. Igual en todos los bloques. */
.n27 .n27-todas{
	/* Solo la colocacion. La pinta (pildora) vive en wti-base-2027. */
	flex:none;
	margin-left:auto;
	align-self:flex-start;
	margin-top:9px;
	white-space:nowrap;
}
.n27 .n27-todas span{margin-left:6px}

/* ---------- las categorias, en linea ----------
   Antes eran trece bloques naranjas macizos en una columna a la izquierda:
   pesaban tanto como las noticias. Ahora es una linea, con la misma pastilla
   que las de la cabecera. */
.n27 .n27-categorias{
	/* 17 px con 15 de separacion: las trece caben en una sola linea (1.169 de
	   los 1.236 disponibles). Con 18 se iban a dos. */
	gap:0 15px;
	/* Solo arriba y abajo: el margen lateral lo pone la regla comun del bloque.
	   Con el atajo `padding` se lo cargaba y la linea de categorias salia 22 px
	   mas a la izquierda que el titulo. */
	padding-top:2px;
	padding-bottom:14px;
	border-bottom:2px solid var(--n27-tinta);
}
/* Sin caja ni fondo: solo la palabra. Trece pastillas seguidas pesaban tanto
   como las noticias que tienen debajo. */
/* La pinta del enlace la pone .wti-linea, en wti-base-2027: es el mismo
   elemento que los enlaces de seccion y ahora se ven igual. Aqui solo queda
   lo propio del bloque. */

/* ---------- la rejilla: fichas horizontales ---------- */
/* Tarjetas que flotan: el aire y la sombra las separan, no las lineas. Una
   tarjeta con sombra Y linea dice lo mismo dos veces. */
.n27 .n27-rejilla{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	column-gap:14px;
	row-gap:30px;
	padding-top:30px;
}
/* La foto va a sangre: toca el borde izquierdo, el de arriba y el de abajo de
   la ficha. Antes era una miniatura pequena flotando dentro del relleno. */
/* La ficha se estira a la altura de su fila. El enlace tiene que llenarla, o
   la foto se queda con el alto del texto y deja blanco debajo. */
.n27 .n27-noticia{
	position:relative;
	display:flex;
	padding:0;
	overflow:visible;
	background:#fff;
	border:0;
	border-radius:14px;
	box-shadow:0 14px 30px -22px rgba(27,21,18,.55);
	box-sizing:border-box;
	transition:transform .2s ease,box-shadow .2s ease;
}
.n27 .n27-noticia:hover{
	transform:translateY(-3px);
	box-shadow:0 20px 38px -22px rgba(27,21,18,.60);
}

.n27 .n27-enlace{
	display:flex;
	flex:1 1 auto;
	gap:0;
	align-items:stretch;
	min-height:95px;
	text-decoration:none;
	color:inherit;
}
/* A sangre por los tres lados. La foto arranca en 2:1 (190x95, la proporcion
   de la casa) y si el titulo la obliga a crecer, crece con la ficha en vez de
   dejar un hueco blanco debajo. Todas las fichas de una misma fila miden lo
   mismo, asi que el recorte es igual en las tres. */
.n27 .n27-foto{
	flex:0 0 190px;
	width:190px;
	min-height:95px;
	align-self:stretch;
	overflow:hidden;
	border-radius:14px 0 0 14px;
	background:#F3EFEA;
	display:block;
}
.n27 .n27-foto img{
	width:100%;height:100%;
	object-fit:cover;display:block;
	transition:transform .35s ease;
}
.n27 .n27-enlace:hover .n27-foto img{transform:scale(1.05)}

.n27 .n27-texto{
	flex:1 1 auto;
	min-width:0;
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding:18px 16px 22px;
}
/* Peso 400, no 500: con la insignia arriba, el titulo en negrita hacia que la
   ficha entera fuera un grito. Sube medio punto el cuerpo para compensar. */
.n27 .n27-nombre{
	display:block;
	font-family:"Oswald",sans-serif;
	font-weight:400;
	font-size:16.5px;
	line-height:1.25;
	color:var(--n27-tinta);
}
.n27 .n27-enlace:hover .n27-nombre{color:var(--n27-naranja)}
/* La categoria sale de la ficha: insignia apoyada en el borde de arriba, a la
   derecha. La fecha se queda dentro, chiquita, en la esquina de abajo. Asi la
   ficha solo tiene que cuadrar foto y titulo. */
.n27 .n27-insignia{
	position:absolute;
	right:14px;
	top:-12px;
	z-index:2;
	display:inline-block;
	max-width:calc(100% - 28px);
	padding:5px 13px;
	background:#fff;
	border:1.5px solid #E8E2DA;
	border-radius:999px;
	box-shadow:0 6px 14px -10px rgba(27,21,18,.6);
	font-family:"Oswald",sans-serif;
	font-size:12px;
	font-weight:500;
	letter-spacing:.08em;
	text-transform:uppercase;
	line-height:1.2;
	color:var(--n27-marron);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.n27 .n27-noticia:hover .n27-insignia{border-color:#E3D0BA;color:var(--n27-naranja)}

.n27 .n27-fecha{
	position:absolute;
	right:14px;
	bottom:9px;
	z-index:2;
	font-size:11.5px;
	line-height:1;
	letter-spacing:.04em;
	color:#A79C93;
}
.n27 .n27-punto{margin:0 5px}
.n27 .n27-cat-pie{color:var(--n27-marron);font-weight:600}

/* ---------- tableta ---------- */
@media (max-width:1024px){
	.n27{padding:26px 0 26px}
	.n27 .n27-cabeza,.n27 .n27-categorias,.n27 .n27-rejilla{padding-left:18px;padding-right:18px}
	.n27 .n27-rejilla{grid-template-columns:repeat(2,1fr)}
	.n27 .n27-cat{font-size:17px}
	.n27 .n27-categorias{gap:0 16px}
}

/* ---------- movil ---------- */
@media (max-width:640px){
	.n27{padding:22px 0 20px}
	.n27 .n27-cabeza,.n27 .n27-categorias,.n27 .n27-rejilla{padding-left:16px;padding-right:16px}
				.n27 .n27-categorias{
		flex-wrap:nowrap;
		overflow-x:auto;
		scrollbar-width:none;
		-webkit-overflow-scrolling:touch;
	}
	.n27 .n27-categorias::-webkit-scrollbar{display:none}
	.n27 .n27-categorias{gap:0 15px;padding-bottom:12px}
	.n27 .n27-categorias{scroll-padding-left:16px}
	.n27 .n27-rejilla{grid-template-columns:1fr;column-gap:12px;row-gap:28px}
	.n27 .n27-noticia{padding:0}
	.n27 .n27-foto{flex:0 0 150px;width:150px;min-height:75px}
	.n27 .n27-enlace{min-height:75px}
	.n27 .n27-texto{padding:12px 14px}
	.n27 .n27-nombre{font-size:15.5px}
}