/* La banda de banners de la portada. Creado 2026-09-17 · v1.3.0
   Regla de la casa: cada cambio de CSS = nombre de archivo nuevo (WP Rocket).
   v1.4.0 · 2026-09-26 (tema 5.7.4): la fila deja de ser una rejilla fija de 4 y pasa a
   repartirse entre los huecos que quedan. Con el reparto del Ad Manager 2.16.0 (un banner
   no sale dos veces en la misma página) un hueco puede ocultarse, y en la rejilla dejaba
   un agujero. Con 4 huecos se ve igual que antes.
   v1.4.1 · 2026-09-26 (tema 5.7.5): la cuadrícula del móvil ocupa todo su hueco (en la tableta,
   con un banner oculto por el reparto, se encogía a 0 px) y en la tableta va a dos columnas. */

.b27{
	max-width:1280px;
	margin:0 auto;
	padding:10px 22px 16px;
	box-sizing:border-box;
}

/* El marco de la banda. En la portada de hoy existe, pero es una sombra de
   10 px al 50% de negro, que ensucia. Aqui es un filete fino mas una sombra
   suave: sigue separando la publicidad del contenido, sin la mancha. */
.b27 .b27-fila{
	background:#fff;
	border:1px solid #E8E2DA;
	border-radius:14px;
	padding:11px;
	box-shadow:0 10px 26px -18px rgba(27,21,18,.40);
}
.b27 .b27-fila{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:14px;
	align-items:center;
	justify-items:center;
}

/* Un filete entre hueco y hueco, para que cada banner sea su propio objeto. */
.b27 .b27-hueco + .b27-hueco{border-left:1px solid #F0EAE2}
.b27 .b27-hueco{
	width:100%;
	max-width:300px;
	min-height:150px;
	display:grid;
	place-items:center;
}
.b27 .b27-hueco img{max-width:100%;height:auto;display:block;border-radius:6px}

@media (max-width:1024px){
	.b27{padding:14px 18px 16px}
	.b27 .b27-fila{grid-template-columns:repeat(2,1fr);gap:14px}
	.b27 .b27-hueco:nth-child(odd){border-left:0}
}

/* En movil los banners son 400x100: una columna, uno debajo de otro */
@media (max-width:640px){
	.b27{padding:12px 16px 14px}
	.b27 .b27-fila{grid-template-columns:1fr;gap:12px;padding:12px}
	.b27 .b27-hueco + .b27-hueco{border-left:0;border-top:1px solid #F0EAE2;padding-top:12px}
	.b27 .b27-hueco{max-width:400px;min-height:100px}
}

/* ==========================================================================
   Variante "franja": la que separa mejor la publicidad del contenido.
   Banda blanca a TODO ancho con un filete fino arriba y abajo. Ni caja
   redondeada, ni sombra, ni lineas entre banner y banner: el corte lo hacen
   los dos filetes, y el blanco de la franja dice "esto es publicidad" sin
   tener que escribirlo.
   ========================================================================== */
.b27.b27-franja{
	max-width:none;
	width:100%;
	padding:0;
	background:#fff;
	border-top:1px solid var(--wti-linea,#E8E2DA);
	border-bottom:1px solid var(--wti-linea,#E8E2DA);
}
.b27.b27-franja .b27-fila{
	max-width:1280px;
	margin:0 auto;
	padding:16px 22px;
	background:transparent;
	border:0;
	border-radius:0;
	box-shadow:none;
	gap:20px;
}
.b27.b27-franja .b27-hueco + .b27-hueco{border-left:0}

@media (max-width:1024px){
	.b27.b27-franja .b27-fila{padding:14px 18px;gap:16px}
}
@media (max-width:640px){
	.b27.b27-franja .b27-fila{padding:12px 16px;gap:12px}
	.b27.b27-franja .b27-hueco + .b27-hueco{border-top:1px solid #F0EAE2;padding-top:12px}
}

/* ==========================================================================
   v1.4.0 — Sin agujeros cuando el reparto oculta un hueco (data-wti-ad-vacio).
   Con los 4 huecos, mismos anchos que la rejilla de antes (1fr + 14/20 px).
   ========================================================================== */
.b27 .b27-fila{display:flex;flex-wrap:wrap;justify-content:center}
.b27 .b27-hueco{flex:1 1 0;min-width:0}
@media (max-width:1024px){
	.b27 .b27-hueco{flex:1 1 calc(50% - 16px)}
}
@media (max-width:640px){
	.b27 .b27-hueco{flex:1 1 100%;max-width:none}
	.b27 .b27-hueco > .wti-ad-grid{width:100%;max-width:400px;margin:0 auto}
}

/* v1.4.1 — La cuadrícula del móvil (una por banda) ocupa su hueco; en la tableta, 2 columnas */
.b27 .b27-hueco > .wti-ad-grid{width:100%;justify-self:stretch}
.b27.b27-movil .b27-hueco{max-width:400px}
@media (min-width:641px){
	.b27.b27-movil .b27-hueco{max-width:820px}
	.b27.b27-movil .b27-hueco > .wti-ad-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px}
}


/* v1.4.3 (2026-09-29, tema 5.16.1) — iPad en vertical (700–1024 px, más alto que
   ancho): opción 2 de Angel, los banners de 400×100 dos por fila (unos 347×87 px en un
   iPad de 768). La versión de ordenador lleva también la zona del móvil en otra fila
   (.b27-fila--tableta, tema 5.16.1): aquí se enseña esa y se oculta la de 300×150. En el
   resto de pantallas, al revés. Sustituye a la 1.4.2 (los cuatro de 300×150 en línea). */
.b27 .b27-fila--tableta{display:none}
@media (min-width:700px) and (max-width:1024px) and (orientation:portrait){
	.b27.b27--con-tableta .b27-fila:not(.b27-fila--tableta){display:none}
	.b27.b27--con-tableta .b27-fila--tableta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
	.b27 .b27-fila--tableta .b27-hueco{flex:1 1 calc(50% - 14px);max-width:none;min-height:0;border-left:0}
	.b27 .b27-fila--tableta .b27-hueco > .wti-ad-grid{width:100%;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px}
	.b27 .b27-fila--tableta img{width:100%;max-width:400px;height:auto;margin:0 auto}
}