/*
 * ECN — Bloques de portada (Gutenberg)
 * ====================================
 * La portada (página "Portada", ID 1030) está construida con bloques
 * Query Loop del editor. Jannah no estiliza esos bloques: los hereda del
 * CSS por defecto de WordPress y de sus propias reglas de .entry-content,
 * que les aplican viñetas de lista y color de enlace. Resultado sin este
 * archivo: puntos negros huérfanos junto a cada titular, titulares rojos
 * sin jerarquía e imágenes flotando desalineadas.
 *
 * Este archivo define el componente C7 — Tarjeta de noticia y la retícula
 * de la portada. Cero hexadecimales: solo tokens de ecn-brand-tokens.css.
 *
 * Jerarquía de color (docs/01-sistema-visual.md):
 *   titular  → negro   (el rojo en un titular le quita autoridad)
 *   kicker   → rojo    (categoría: es el único acento de la tarjeta)
 *   metadato → gris
 *   dato     → azul    (exclusivo del Observatorio)
 */

/* ---- Reset de la lista del Query Loop ----------------------------------
 * .wp-block-post-template es un <ul>. Jannah aplica list-style y padding a
 * .entry-content ul, de ahí las viñetas sueltas. Se neutraliza con la misma
 * especificidad de contenedor, sin !important. */
.entry-content .wp-block-post-template,
.wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
}

.entry-content .wp-block-post-template > li,
.wp-block-post-template > li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.entry-content .wp-block-post-template > li::before,
.entry-content .wp-block-post-template > li::marker {
	content: none;
}

/* ---- C7 — Tarjeta de noticia ------------------------------------------
 * Estructura esperada en el bloque (de arriba abajo):
 *   post-featured-image · post-terms (kicker) · post-title · post-date · post-excerpt
 * El orden se fija con flex+order para no depender de cómo quedó guardado
 * el bloque en el editor. */
.wp-block-post-template > li.wp-block-post {
	display: flex;
	flex-direction: column;
	gap: var(--ecn-sp-2);
}

/* Imagen: relación fija 16:9 recortada. Es lo que alinea las tarjetas entre
 * sí aunque las fotos originales tengan proporciones distintas. */
.wp-block-post .wp-block-post-featured-image {
	margin: 0 0 var(--ecn-sp-1);
	order: 0;
}

.wp-block-post .wp-block-post-featured-image a,
.wp-block-post .wp-block-post-featured-image img {
	display: block;
	width: 100%;
}

.wp-block-post .wp-block-post-featured-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--ecn-radio-borde);
	background: var(--ecn-gris-superficie);
	transition: opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Al pasar el cursor la foto "se enciende": borde neón y leve elevación. */
.wp-block-post .wp-block-post-featured-image a:hover img {
	opacity: 0.94;
	box-shadow: var(--ecn-neon-glow);
	transform: translateY(-2px);
}

/* Kicker de categoría: el único rojo de la tarjeta (C1). */
.wp-block-post .wp-block-post-terms {
	order: 1;
	margin: 0;
	font-family: var(--ecn-font-titular);
	font-size: var(--ecn-fs-xs);
	font-variation-settings: 'wght' 700, 'wdth' 85;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.2;
}

.wp-block-post .wp-block-post-terms a,
.wp-block-post .wp-block-post-terms a:hover {
	color: var(--ecn-rojo);
	text-decoration: none;
}

/* El separador entre categorías no debe leerse como parte del kicker. */
.wp-block-post .wp-block-post-terms__separator {
	color: var(--ecn-gris-borde);
}

/* Titular: negro, condensado. Rojo solo en hover. */
.wp-block-post .wp-block-post-title {
	order: 2;
	margin: 0;
	font-family: var(--ecn-font-titular);
	font-variation-settings: 'wght' 700, 'wdth' 85;
	line-height: 1.18;
}

.entry-content .wp-block-post .wp-block-post-title a,
.wp-block-post .wp-block-post-title a {
	color: var(--ecn-negro);
	text-decoration: none;
}

.entry-content .wp-block-post .wp-block-post-title a:hover,
.wp-block-post .wp-block-post-title a:hover,
.wp-block-post .wp-block-post-title a:focus-visible {
	color: var(--ecn-rojo);
}

/* Fecha: sin fecha visible, un medio de noticias parece abandonado. */
.wp-block-post .wp-block-post-date {
	order: 3;
	margin: 0;
	font-size: var(--ecn-fs-xs);
	font-variation-settings: 'wght' 500, 'wdth' 100;
	color: var(--ecn-gris);
}

.wp-block-post .wp-block-post-date a,
.wp-block-post .wp-block-post-date time {
	color: var(--ecn-gris);
	text-decoration: none;
}

.wp-block-post .wp-block-post-excerpt {
	order: 4;
	margin: 0;
}

.wp-block-post .wp-block-post-excerpt__excerpt {
	margin: 0;
	color: var(--ecn-gris);
	font-size: var(--ecn-fs-base);
	line-height: 1.55;
}

.wp-block-post .wp-block-post-excerpt__more-text {
	display: none;
}

/* ---- Escalas de titular por tipo de tarjeta ---------------------------
 * Una portada sin escala es una lista. La apertura tiene que ganar por
 * tamaño, no por color. */

/* Apertura (una sola por portada) */
.ecn-apertura .wp-block-post-title {
	font-size: var(--ecn-fs-2xl);
	font-variation-settings: 'wght' var(--ecn-titular-wght), 'wdth' var(--ecn-titular-wdth);
}

.ecn-apertura .wp-block-post-excerpt__excerpt {
	font-size: var(--ecn-fs-md);
	line-height: 1.5;
}

/* Secundarias de la fila de apertura */
.ecn-secundarias .wp-block-post-title {
	font-size: var(--ecn-fs-md);
}

/* Tarjetas de sección */
.ecn-tarjetas .wp-block-post-title {
	font-size: var(--ecn-fs-md);
}

/* Lista compacta sin foto (columna "Lo último" del cuerpo) */
.ecn-lista-compacta .wp-block-post-template > li.wp-block-post {
	gap: var(--ecn-sp-1);
	padding-block: var(--ecn-sp-3);
	border-bottom: 1px solid var(--ecn-gris-borde);
}

.ecn-lista-compacta .wp-block-post-template > li.wp-block-post:first-child {
	padding-top: 0;
}

.ecn-lista-compacta .wp-block-post-template > li.wp-block-post:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.ecn-lista-compacta .wp-block-post-title {
	font-size: var(--ecn-fs-base);
	font-variation-settings: 'wght' 600, 'wdth' 88;
	line-height: 1.3;
}

/* ---- Retícula de la portada ------------------------------------------- */
.wp-block-post-template.is-layout-grid {
	gap: var(--ecn-sp-5);
}

.wp-block-query + .wp-block-query {
	margin-top: var(--ecn-sp-5);
}

/* Separación entre filas de la portada */
.ecn-fila {
	margin-block: var(--ecn-sp-6);
}

/* ---- Título de sección con filete rojo --------------------------------
 * Marca dónde empieza cada sección sin gritar. El filete es el acento. */
.entry-content .ecn-seccion-titulo,
.ecn-seccion-titulo {
	position: relative;
	margin: 0 0 var(--ecn-sp-4);
	padding-bottom: var(--ecn-sp-2);
	border-bottom: 1px solid var(--ecn-gris-borde);
	font-family: var(--ecn-font-titular);
	font-size: var(--ecn-fs-md);
	font-variation-settings: 'wght' 800, 'wdth' 82;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ecn-negro);
}

.ecn-seccion-titulo::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 56px;
	height: var(--ecn-ancho-linea-dato);
	background: var(--ecn-neon);
	border-radius: var(--ecn-radio-pildora);
	box-shadow: 0 0 10px var(--ecn-neon-suave);
}

/* Variante para el Observatorio: el filete no cambia de color, cambia de
 * forma. Doble trazo en lugar de uno continuo: se distingue del filete
 * editorial a la misma distancia a la que se distinguía por color, y no
 * gasta un color del sistema. */
.ecn-seccion-titulo--dato::after {
	width: 96px;
	background: repeating-linear-gradient(
		90deg,
		var(--ecn-neon) 0 24px,
		transparent 24px 32px
	);
}

/* ---- Franja de boletín ------------------------------------------------
 * Prioridad 3 del negocio: la captura no puede vivir solo en la barra
 * lateral y el pie. Franja ancha, fondo negro, una sola acción. */
.ecn-franja-boletin {
	position: relative;
	background-color: var(--ecn-negro-profundo);
	background-image: var(--ecn-tech-halo), var(--ecn-tech-reticula);
	background-size: auto, var(--ecn-tech-reticula-tam);
	border: 1px solid var(--ecn-neon-suave);
	border-radius: var(--ecn-radio-borde);
	box-shadow: var(--ecn-neon-glow);
	color: var(--ecn-blanco);
	padding: var(--ecn-sp-6) var(--ecn-sp-5);
	margin-block: var(--ecn-sp-6);
	overflow: hidden;
}

/* Tubo neón en el borde superior de la franja */
.ecn-franja-boletin::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: var(--ecn-neon-filete);
	box-shadow: 0 0 12px var(--ecn-neon-suave);
}

.ecn-franja-boletin h2,
.ecn-franja-boletin h3,
.entry-content .ecn-franja-boletin h2,
.entry-content .ecn-franja-boletin h3 {
	color: var(--ecn-blanco);
	margin: 0 0 var(--ecn-sp-2);
	font-family: var(--ecn-font-titular);
	font-size: var(--ecn-fs-lg);
	font-variation-settings: 'wght' 800, 'wdth' 82;
}

.ecn-franja-boletin p {
	color: var(--ecn-blanco);
	opacity: 0.82;
	margin: 0 0 var(--ecn-sp-4);
}

/* El formulario de Hostinger Reach hereda fondo claro: se fuerza contraste
 * sobre el negro sin tocar el markup del plugin. */
.ecn-franja-boletin label,
.ecn-franja-boletin .hostinger-reach-form label {
	color: var(--ecn-blanco);
}

.ecn-franja-boletin input[type="email"],
.ecn-franja-boletin input[type="text"] {
	border: 1px solid var(--ecn-blanco);
	border-radius: var(--ecn-radio-borde-sm);
}

.ecn-franja-boletin small,
.ecn-franja-boletin .hostinger-reach-form small {
	color: var(--ecn-blanco);
	opacity: 0.7;
}

/* ---- Barra lateral: tabla del Observatorio -----------------------------
 * [ecn_tabla] emite 5 columnas (Indicador · Valor · Variación · Periodo ·
 * Fuente). En 300px eso obliga a scroll horizontal y corta la fuente. En la
 * barra lateral se muestran solo las tres primeras; la tabla completa vive
 * en el cuerpo de la portada y en la sección del Observatorio. */
.sidebar .ecn-tabla th:nth-child(n + 4),
.sidebar .ecn-tabla td:nth-child(n + 4),
#sidebar .ecn-tabla th:nth-child(n + 4),
#sidebar .ecn-tabla td:nth-child(n + 4),
.side-aside .ecn-tabla th:nth-child(n + 4),
.side-aside .ecn-tabla td:nth-child(n + 4) {
	display: none;
}

.sidebar .ecn-tabla-wrap,
#sidebar .ecn-tabla-wrap,
.side-aside .ecn-tabla-wrap {
	overflow-x: visible;
}

.sidebar .ecn-tabla td,
#sidebar .ecn-tabla td,
.sidebar .ecn-tabla th,
#sidebar .ecn-tabla th {
	font-size: var(--ecn-fs-xs);
	padding: var(--ecn-sp-2);
}

/* ---- Responsive -------------------------------------------------------
 * Por debajo de 782px Gutenberg apila las columnas solo. Lo que hay que
 * corregir es la escala del titular de apertura, que a 39px desborda. */
@media (max-width: 782px) {
	.ecn-apertura .wp-block-post-title {
		font-size: var(--ecn-fs-xl);
	}

	.ecn-apertura .wp-block-post-excerpt__excerpt {
		font-size: var(--ecn-fs-base);
	}

	.ecn-fila {
		margin-block: var(--ecn-sp-5);
	}

	.ecn-franja-boletin {
		padding: var(--ecn-sp-5) var(--ecn-sp-4);
	}
}

@media (max-width: 480px) {
	.ecn-apertura .wp-block-post-title {
		font-size: var(--ecn-fs-lg);
	}
}

/* ---- Botón sobre fondo negro (franja de boletín) ----------------------
 * .wp-element-button hereda de Jannah un fondo oscuro con texto rojo: sobre
 * el negro de la franja queda ilegible. Sobre negro, el botón se invierte:
 * fondo blanco, texto negro; en hover pasa al rojo de marca. */
.ecn-franja-boletin .wp-block-button__link,
.ecn-franja-boletin .wp-element-button {
	background-color: var(--ecn-blanco);
	color: var(--ecn-negro);
	border: 0;
	border-radius: 0;
	padding: var(--ecn-sp-3) var(--ecn-sp-5);
	border-radius: var(--ecn-radio-pildora);
	font-family: var(--ecn-font-titular);
	font-variation-settings: 'wght' 700, 'wdth' 85;
	text-decoration: none;
}

.ecn-franja-boletin .wp-block-button__link:hover,
.ecn-franja-boletin .wp-block-button__link:focus-visible,
.ecn-franja-boletin .wp-element-button:hover {
	background-color: var(--ecn-rojo);
	color: var(--ecn-blanco);
}

/* ---- Tabla del Observatorio: cabeceras sin partir --------------------
 * Sin esto el navegador parte "Variación" en "Vari / ació / n" cuando la
 * tabla vive en una columna angosta. Las cabeceras nunca se parten; si no
 * caben, scrollea el wrapper (que para eso existe). */
.ecn-tabla th {
	white-space: nowrap;
}

.ecn-tabla td:first-child,
.ecn-tabla th:first-child {
	min-width: 14ch;
}

/* En el cuerpo de la portada hay ancho de sobra: se reparte para que la
 * fuente y el periodo no queden en columnas de dos letras. */
.entry-content .ecn-tabla {
	table-layout: auto;
	width: 100%;
}

.entry-content .ecn-tabla td {
	vertical-align: top;
}


/* ---- Contenedor del ticker de divisas ---------------------------------
 * El ticker lo pinta el plugin ecn-divisas; aquí solo se le da su sitio
 * en la cabecera. Arriba del todo (TieLabs/before_header).
 *
 * El 2026-08-27 se invertía a fondo blanco por pedido de Alexander. El 31, con
 * la cabecera entera en negro, esa inversión sobraba: se retira y el tícker
 * vuelve al oscuro que el plugin pinta por defecto. Se quita en vez de apilar
 * otra regla encima, que es como se acumulan las capas que nadie entiende. */
.ecn-ticker-wrap {
	background: var(--ecn-negro-profundo);
	border-bottom: 1px solid var(--ecn-tech-linea);
	position: relative;
	z-index: 2;
}

.ecn-ticker-wrap .ecn-div-tick {
	background: transparent;
	color: var(--ecn-blanco);
}

.ecn-ticker-wrap .ecn-div-tick__par {
	color: var(--ecn-tech-texto-suave);
}

.ecn-ticker-wrap .ecn-div-tick__item a:hover .ecn-div-tick__par,
.ecn-ticker-wrap .ecn-div-tick__item a:focus-visible .ecn-div-tick__par {
	color: var(--ecn-blanco);
}

.ecn-ticker-wrap .ecn-div-tick .ecn-div__var--sube {
	color: var(--ecn-variacion-positiva);
}

.ecn-ticker-wrap .ecn-div-tick .ecn-div__var--baja {
	color: var(--ecn-variacion-negativa);
}

.ecn-ticker-wrap .container {
	padding-inline: 0;
}

/* ---- Anuncio de casa ("Publica aquí") --------------------------------
 * Rellena el inventario que todavía no está vendido. Un hueco gris
 * rotulado "PUBLICIDAD" lee como sitio inacabado; el mismo hueco
 * ofreciéndose lee como inventario disponible. Y de paso es un enlace a
 * contacto, así que trabaja comercialmente en vez de solo ocupar sitio.
 *
 * Cuando entre AdSense o un anunciante, el PHP deja de inyectarlo: el
 * anuncio pagado siempre gana al de casa. */
.ecn-casa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ecn-sp-2) var(--ecn-sp-4);
	flex-wrap: wrap;
	width: 100%;
	min-height: 90px;
	padding: var(--ecn-sp-4) var(--ecn-sp-5);
	background-color: var(--ecn-negro-profundo);
	background-image: var(--ecn-tech-halo), var(--ecn-tech-reticula);
	background-size: auto, var(--ecn-tech-reticula-tam);
	border-left: var(--ecn-ancho-linea-dato) solid var(--ecn-neon);
	border-radius: var(--ecn-radio-borde);
	box-shadow: 0 0 0 1px var(--ecn-neon-tenue), 0 0 20px var(--ecn-neon-tenue);
	color: var(--ecn-blanco);
	text-decoration: none;
	transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.ecn-casa:hover,
.ecn-casa:focus-visible {
	background-color: var(--ecn-superficie-tech);
	box-shadow: var(--ecn-neon-glow);
	text-decoration: none;
}

.ecn-casa__rotulo {
	font-family: var(--ecn-font-cuerpo);
	font-size: var(--ecn-fs-xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ecn-neon);
	flex-basis: 100%;
	text-align: center;
	line-height: 1;
}

.ecn-casa__titular {
	font-family: var(--ecn-font-titular);
	font-variation-settings: 'wght' 800, 'wdth' 80;
	font-size: var(--ecn-fs-lg);
	line-height: 1.05;
	color: var(--ecn-blanco);
}

.ecn-casa__bajada {
	font-family: var(--ecn-font-cuerpo);
	font-size: var(--ecn-fs-sm);
	color: var(--ecn-gris-borde);
}

.ecn-casa__cta {
	font-family: var(--ecn-font-titular);
	font-variation-settings: 'wght' 700, 'wdth' 88;
	font-size: var(--ecn-fs-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ecn-blanco);
	border: 1px solid var(--ecn-blanco);
	border-radius: var(--ecn-radio-pildora);
	padding: var(--ecn-sp-2) var(--ecn-sp-4);
	white-space: nowrap;
}

.ecn-casa:hover .ecn-casa__cta {
	background: var(--ecn-rojo);
	border-color: var(--ecn-neon);
	box-shadow: 0 0 10px var(--ecn-neon-suave);
}


.ecn-casa--caja .ecn-casa__titular {
	font-size: var(--ecn-fs-xl);
}

/* El contenedor ya no necesita su etiqueta "PUBLICIDAD" ni su borde
 * punteado cuando lleva un anuncio de casa dentro. */
.ecn-espacio-publicitario:has(.ecn-casa),
.ecn-franja-publicitaria:has(.ecn-casa) {
	background: none;
	border: 0;
	padding: 0;
	min-height: 0;
}

.ecn-espacio-publicitario:has(.ecn-casa)::before,
.ecn-franja-publicitaria:has(.ecn-casa)::before {
	content: none;
}

.ecn-espacio-publicitario--caja:has(.ecn-casa) {
	max-width: none;
}

@media (max-width: 640px) {
	.ecn-casa {
		flex-direction: column;
		text-align: center;
		gap: var(--ecn-sp-2);
		padding: var(--ecn-sp-4);
	}

	.ecn-casa__titular {
		font-size: var(--ecn-fs-md);
	}
}

/* ---- Anuncio junto al logo --------------------------------------------
 * Jannah pone el logo en .tie-col-md-4 y deja 8 columnas vacías a su lado.
 * El anuncio ocupa ese hueco sin tocar plantillas del padre. */
/* En movil NO se oculta: se coloca en flujo, justo bajo el logo. El
 * inventario tiene que ser el mismo en las dos pantallas; lo que cambia
 * es donde cae cada pieza, no cuantas hay. */
.ecn-cabecera-anuncio {
	display: block;
	margin-top: var(--ecn-sp-3);
}

@media (min-width: 992px) {
	.logo-container {
		position: relative;
	}

	.ecn-cabecera-anuncio {
		display: block;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		/* La columna del logo son 4/12: 100% la salta, 200% cubre las 8 restantes. */
		left: calc(100% + var(--ecn-sp-5));
		width: calc(200% - var(--ecn-sp-5) * 2);
		max-width: 728px;
	}

	.ecn-cabecera-anuncio .ecn-casa {
		min-height: 90px;
		padding: var(--ecn-sp-3) var(--ecn-sp-4);
	}

	.ecn-cabecera-anuncio .ecn-casa__titular {
		font-size: var(--ecn-fs-md);
	}

	.ecn-cabecera-anuncio .ecn-casa__bajada {
		display: none;
	}
}

/* ---- Formatos IAB del inventario --------------------------------------
 * Medidas estandar del IAB, no medidas propias: el anunciante ya tiene las
 * piezas hechas en estos tamanos. El hueco se reserva con la altura real
 * del formato para que al llegar el anuncio no salte el maquetado. */
.ecn-casa--billboard {
	min-height: 250px;
	max-width: 970px;
	margin-inline: auto;
}

.ecn-casa--megabanner {
	min-height: 90px;
	max-width: 970px;
	margin-inline: auto;
}

.ecn-casa--leaderboard,
.ecn-casa--cabecera {
	min-height: 90px;
	max-width: 728px;
	margin-inline: auto;
}

.ecn-casa--halfpage,
.ecn-casa--rectangulo {
	flex-direction: column;
	text-align: center;
	max-width: 300px;
	margin-inline: auto;
	border-left: 0;
	border-top: var(--ecn-ancho-linea-dato) solid var(--ecn-neon);
	gap: var(--ecn-sp-3);
}

.ecn-casa--halfpage { min-height: 600px; }
.ecn-casa--rectangulo { min-height: 250px; }

/* En los formatos altos el titular puede crecer sin apretar nada. */
.ecn-casa--billboard .ecn-casa__titular,
.ecn-casa--halfpage .ecn-casa__titular {
	font-size: var(--ecn-fs-xl);
}

.ecn-casa--billboard,
.ecn-casa--halfpage,
.ecn-casa--rectangulo {
	flex-direction: column;
	text-align: center;
}

/* La medida se muestra en el anuncio de casa: al anunciante le dice de un
 * vistazo que pieza tiene que mandar. Desaparece con el anuncio real. */
.ecn-casa__medida {
	font-family: var(--ecn-font-cuerpo);
	font-size: var(--ecn-fs-xs);
	letter-spacing: 0.12em;
	color: var(--ecn-gris);
	border: 1px solid var(--ecn-gris);
	border-radius: var(--ecn-radio-borde-sm);
	padding: 2px var(--ecn-sp-2);
	line-height: 1.4;
}

/* En el leaderboard de 90px de alto no cabe todo: se queda lo esencial. */
.ecn-casa--leaderboard .ecn-casa__bajada,
.ecn-casa--cabecera .ecn-casa__bajada,
.ecn-casa--megabanner .ecn-casa__bajada {
	display: none;
}

.ecn-casa--leaderboard,
.ecn-casa--cabecera,
.ecn-casa--megabanner {
	flex-direction: row;
	text-align: left;
}

.ecn-casa--leaderboard .ecn-casa__rotulo,
.ecn-casa--cabecera .ecn-casa__rotulo,
.ecn-casa--megabanner .ecn-casa__rotulo {
	flex-basis: auto;
	text-align: left;
}

@media (max-width: 640px) {
	/* Movil: una sola medida horizontal (320x100) y el rectangulo 300x250.
	 * Dos piezas en vez de tres le simplifica la produccion al anunciante,
	 * y 50px de alto dejan el anuncio de casa ilegible. */
	.ecn-casa--billboard,
	.ecn-casa--megabanner,
	.ecn-casa--leaderboard {
		min-height: 100px;
		flex-direction: column;
		text-align: center;
		gap: var(--ecn-sp-2);
	}

	.ecn-casa--halfpage,
	.ecn-casa--rectangulo {
		min-height: 250px;
	}

	.ecn-casa--leaderboard .ecn-casa__rotulo,
	.ecn-casa--megabanner .ecn-casa__rotulo {
		text-align: center;
	}

	.ecn-casa__medida { display: none; }

	.ecn-casa--billboard .ecn-casa__titular,
	.ecn-casa--halfpage .ecn-casa__titular {
		font-size: var(--ecn-fs-md);
	}
}

/* ---- Ancho real del anuncio dentro de un bloque de grupo --------------
 * .ecn-franja-publicitaria es display:flex (ecn-components.css) y su hijo
 * .wp-block-group__inner-container es el flex item. Sin ancho declarado,
 * ese hijo se encoge al contenido y el anuncio nunca alcanza su medida.
 * Con esto el hueco ocupa todo el ancho disponible, que es lo que un
 * anunciante espera de un billboard. */
.ecn-franja-publicitaria > .wp-block-group__inner-container,
.ecn-espacio-publicitario > .wp-block-group__inner-container {
	width: 100%;
	flex: 1 1 100%;
}

/* ---- Anuncio de cabecera: movil vs escritorio ------------------------
 * El div vive DENTRO de .logo-container, junto al icono de menu y el
 * logotipo. Si el padre es flex, un hijo sin base declarada se aprieta al
 * lado del logo en vez de bajar. Por eso aqui no basta con quitar el
 * position:absolute: hay que forzar que ocupe una linea propia.
 *
 * flex-wrap en el padre es inocuo si el padre no es flex.
 *
 * En movil el formato baja a 320x50: esta posicion va sobre el pliegue y
 * un banner de 100px de alto empuja la portada entera hacia abajo. */
@media (max-width: 991px) {
	.logo-container {
		flex-wrap: wrap;
	}

	.ecn-cabecera-anuncio {
		position: static;
		order: 99;
		flex: 0 0 100%;
		width: 100%;
		max-width: none;
		clear: both;
		margin: var(--ecn-sp-3) 0 0;
	}

	.ecn-cabecera-anuncio .ecn-casa {
		max-width: none;
		min-height: 50px;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		text-align: left;
		gap: var(--ecn-sp-3);
		padding: var(--ecn-sp-2) var(--ecn-sp-3);
	}

	/* A 50px de alto solo cabe lo imprescindible. */
	.ecn-cabecera-anuncio .ecn-casa__rotulo,
	.ecn-cabecera-anuncio .ecn-casa__bajada,
	.ecn-cabecera-anuncio .ecn-casa__medida {
		display: none;
	}

	.ecn-cabecera-anuncio .ecn-casa__titular {
		font-size: var(--ecn-fs-base);
		white-space: nowrap;
	}

	.ecn-cabecera-anuncio .ecn-casa__cta {
		padding: var(--ecn-sp-1) var(--ecn-sp-3);
		font-size: 0.68rem;
	}
}