/* "Especiales" y los bloques temáticos de sección. Creado 2026-09-18 · v1.3.0
   Regla de la casa: cada cambio de CSS = nombre de archivo nuevo (WP Rocket).

   2026-09-18: la tarjeta pasa a ser la del buscador —blanca, con filete,
   esquinas de 14 y una etiqueta pequeña encima del nombre— y la parrilla, a
   cinco por línea. Angel: "rediseña según el nuevo estilo del buscador aunque
   no sea". Asi un listado de fichas se ve igual salga de donde salga.

   Todo va prefijado con .s27 porque el kit de Elementor (.elementor-kit-99596)
   gana a las reglas de una sola clase. */

.s27{
	background:#fff;
	padding:34px 0 40px;
}

.s27 .s27-rejilla{
	list-style:none;
	margin:22px 0 0;
	padding:0;
	display:grid;
	grid-template-columns:repeat(5,minmax(0,1fr));
	gap:20px;
}
.s27 .s27-ficha{
	margin:0;
	padding:0;
	list-style:none;
	display:flex;
	background:#fff;
	border:1px solid rgba(10,10,10,.08);
	border-radius:14px;
	box-shadow:0 1px 2px rgba(10,10,10,.04),0 1px 1px rgba(10,10,10,.03);
	overflow:hidden;
	transition:box-shadow .2s ease,transform .2s ease;
}
.s27 .s27-ficha:hover{
	box-shadow:0 10px 24px -14px rgba(10,10,10,.35);
	transform:translateY(-2px);
}

/* El enlace llena la tarjeta: si no, la tarjeta se estira en la rejilla y el
   enlace no, y queda un hueco muerto debajo de la foto. */
.s27 a.s27-enlace{
	display:flex;
	flex-direction:column;
	flex:1 1 auto;
	text-decoration:none;
}

.s27 .s27-foto{
	display:block;
	width:100%;
	aspect-ratio:2 / 1;
	overflow:hidden;
	background:#F3EFEA;
}
.s27 .s27-foto img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform .35s ease;
}
.s27 a.s27-enlace:hover .s27-foto img{transform:scale(1.05)}

.s27 .s27-cuerpo{
	display:block;
	padding:14px 16px 16px;
}
.s27 .s27-etiqueta{
	display:block;
	margin-bottom:5px;
	font-size:10px;
	font-weight:600;
	letter-spacing:.09em;
	text-transform:uppercase;
	color:#8A8A8B;
}
.s27 .s27-nombre{
	display:block;
	font-size:16px;
	font-weight:600;
	line-height:1.3;
	color:#0A0A0A !important;
	transition:color .18s ease;
}
.s27 a.s27-enlace:hover .s27-nombre{color:var(--wti-naranja,#F57C00) !important}

/* El paginador: las mismas pildoras de la casa, en pequeno. */
.s27 .s27-paginas{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	gap:8px;
	margin-top:26px;
}
.s27 .s27-pagina{
	display:inline-flex;
	align-items:center;
	gap:6px;
	min-width:34px;
	height:34px;
	padding:0 12px;
	justify-content:center;
	border:1px solid rgba(10,10,10,.12);
	border-radius:999px;
	font-family:var(--wti-titulos,"Oswald",sans-serif);
	font-size:14px;
	letter-spacing:.04em;
	text-transform:uppercase;
	text-decoration:none;
	color:var(--wti-tinta,#1B1512) !important;
	background:#fff;
	transition:border-color .18s ease,color .18s ease;
}
.s27 a.s27-pagina:hover{
	border-color:var(--wti-naranja,#F57C00);
	color:var(--wti-naranja,#F57C00) !important;
}
.s27 .s27-pagina--aqui{
	border-color:var(--wti-naranja,#F57C00);
	background:var(--wti-naranja,#F57C00);
	color:#fff !important;
}

/* ---------- tableta ---------- */
@media (max-width:1024px){
	.s27{padding:28px 0 32px}
	.s27 .s27-rejilla{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 16px}
	.s27 .s27-nombre{font-size:15px}
	.s27 .s27-cuerpo{padding:12px 14px 14px}
}

/* ---------- movil ---------- */
@media (max-width:640px){
	.s27{padding:24px 0 28px}
	.s27 .s27-rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;margin-top:18px}
	.s27 .s27-nombre{font-size:15px}
	.s27 .s27-cuerpo{padding:11px 12px 13px}
}