/* Esenciales 2027 — los destacados de cada seccion.
   Creado 2026-09-18 · v1.5.0
   Regla de la casa: cada cambio de CSS = nombre de archivo nuevo (WP Rocket).

   v1.5.0 — Seis por linea, a prueba.
   v1.4.0 — Sin margen: el logo llena la tarjeta de lado a lado.
   Los archivos de logo ya traen su propio aire blanco dentro, asi que el
   margen de la tarjeta lo sumaba dos veces y los dejaba pequenos.
   v1.3.0 — La ultima fila se centra.
   Los destacados no siempre son multiplo de cinco: si sobran dos, quedaban
   pegados a la izquierda y parecia que faltaba algo. Con la fila incompleta
   centrada, parece hecho a proposito. Por eso la rejilla es flexible y no una
   rejilla de columnas fijas.
   v1.2.0 — Cinco logos por linea, por decision de Angel.
   v1.1.0 — Fuera el nombre: solo el logo, por decision de Angel.
   La tarjeta queda limpia y el logo manda. El nombre sigue viajando en el
   texto alternativo de la imagen y en el titulo del enlace, asi que el lector
   de pantalla y Google lo leen igual.

   Es el escaparate: son las marcas que pagan. Asi que la tarjeta no recorta el
   logo, le da aire y lo pone entero.

   Fondo crema y tarjetas blancas que flotan: el patron de la portada.

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

.e27{
	background:var(--wti-crema-fondo,#FBF7F2);
	padding:34px 0 40px;
}

.e27 .e27-dentro{width:100%}

/* ---------- la rejilla ---------- */
.e27 .e27-rejilla{
	list-style:none;
	margin:22px 0 0;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:16px;
}

.e27 .e27-ficha{
	margin:0;
	padding:0;
	list-style:none;
	flex:0 0 calc((100% - 5 * 16px) / 6);
	max-width:calc((100% - 5 * 16px) / 6);
}

/* ---------- la tarjeta: solo el logo, a sangre ---------- */
.e27 .e27-ficha{overflow:hidden}
.e27 .e27-enlace{
	display:block;
	height:100%;
	padding:0;
	box-sizing:border-box;
	text-decoration:none;
}

/* El marco del logo: 2:1, la proporcion de la casa. El logo va CONTENIDO, no
   recortado, y centrado dentro del hueco. */
.e27 .e27-marco{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	aspect-ratio:2 / 1;
	overflow:hidden;
	background:#fff;
}
.e27 .e27-logo{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

/* ---------- tableta ---------- */
@media (max-width:1024px){
	.e27{padding:28px 0 32px}
	.e27 .e27-rejilla{gap:14px}
	.e27 .e27-ficha{
		flex:0 0 calc((100% - 3 * 14px) / 4);
		max-width:calc((100% - 3 * 14px) / 4);
	}
}

/* ---------- movil ---------- */
@media (max-width:640px){
	.e27{padding:24px 0 28px}
	.e27 .e27-rejilla{gap:12px;margin-top:18px}
	.e27 .e27-ficha{
		flex:0 0 calc((100% - 12px) / 2);
		max-width:calc((100% - 12px) / 2);
	}
}

/* 1.5.1 (2026-09-29, tema 5.15.0) — iPad en vertical: seis por fila (Angel:
   «Esenciales en una línea, 6»). */
@media (min-width:700px) and (max-width:1024px) and (orientation:portrait){
	.e27 .e27-rejilla{gap:12px}
	.e27 .e27-ficha{flex:0 0 calc((100% - 5 * 12px) / 6);max-width:calc((100% - 5 * 12px) / 6)}
}