/*
 * El Diario — header y footer en PHP.
 * Valores tomados de las plantillas 772052 (header) y 772055 (footer) de Elementor.
 */

:root {
	--ed-blue: #003d80;
	--ed-blue-footer: #20408e;
	--ed-yellow: #ffcc00;
	--ed-text: #1f1f1f;
	--ed-gold: #d3b574;
	--ed-wrap: 1224px; /* 1200 px de contenido + 12 px de margen a cada lado, como Elementor */
	--ed-font-ui: "Roboto", "PT Serif", sans-serif;
	--ed-font-footer: "Roboto Condensed", "PT Serif", sans-serif;
}

.ed-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--ed-wrap);
	margin: 0 auto;
	padding: 0 12px;
}

/* ---------- Header ---------- */
/*
 * Réplica de la plantilla 772052 (Elementor). Puntos de corte de Elementor:
 * tablet ≤1024 px, móvil ≤767 px. Cada caja equivale a un widget/contenedor
 * de Elementor (mismo ancho, márgenes y flex), por eso las posiciones coinciden.
 */

.ed-header {
	position: sticky;
	top: 0;
	z-index: 999;
	box-shadow: 0 5px 30px rgba(0, 0, 0, .1);
}

/*
 * body trae overflow-x: hidden (tema/Elementor), que lo convierte en contenedor
 * de desplazamiento y anula position: sticky. "clip" recorta igual sin ese
 * efecto. html no se toca: su overflow pasa a la ventana y es el que permite
 * desplazarse. (Elementor fijaba su header con JavaScript.)
 */
body.ed-layout-php {
	overflow-x: clip !important;
}

.admin-bar .ed-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .ed-header {
		top: 0;
	}
}

/* Barra superior (2a665370). */
.ed-topbar {
	background: var(--ed-blue);
	color: #fff;
}

.ed-topbar-inner {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 10px;
	overflow: hidden;
	padding-top: 12px;
	padding-bottom: 12px;
}

/* Fecha (4d91549c): 27,474 % sin encoger. */
.ed-date-box {
	flex: 0 0 auto;
	width: 27.474%;
	max-width: 27.474%;
	min-height: 30.6px; /* alto de línea del widget de Elementor (18 px × 1,7) */
	display: flex;
	align-items: center;
}

.ed-date {
	font-size: 14.4px;
	line-height: 1.7;
	color: #fff;
}

/* Redes + buscador (21cc0fab): fila invertida, 562 px desde 768 px. */
.ed-topbar-right {
	flex: 0 1 562px;
	min-width: 0;
	width: 562px;
	max-width: 100%;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 20px;
}

/* Buscador de Foxiz en blanco sobre la barra azul. */
.ed-search .wnav-icon,
.ed-search .search-btn {
	color: #fff;
}

.ed-search .wnav-icon {
	font-size: 20px;
}

.ed-social {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ed-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	color: var(--ed-blue-footer);
	line-height: 16px;
	text-decoration: none;
	transition: opacity .2s;
}

.ed-social a:hover,
.ed-social a:focus-visible {
	opacity: .85;
}

.ed-social svg {
	display: block;
	width: 16px;
	height: 16px;
}

/* En el footer los enlaces son blancos: los íconos conservan su azul sobre el círculo blanco. */
.ed-footer-main .ed-social a,
.ed-footer-main .ed-social a:hover {
	color: var(--ed-blue-footer);
	text-decoration: none;
}

/* Barra principal (5a602d52). */
.ed-mainbar {
	position: relative;
	background: #fff;
}

.ed-mainbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 5px;
	padding-top: 15px;
	padding-bottom: 12px;
}

/* Logo (27e11b82): encoge si falta espacio, como el widget de imagen. */
.ed-logo-box {
	flex: 0 1 auto;
	min-width: 0;
	margin-right: 50px;
	line-height: 0;
}

.ed-logo {
	display: inline-block;
	max-width: 100%;
}

.ed-logo img {
	display: block;
	width: 120px;
	max-width: 100%;
	height: 45px;
	object-fit: contain;
}

/* Menú (46b8147b): 60 % sin encoger; en tablet/móvil solo el botón, a la derecha. */
.ed-nav-box {
	flex: 0 0 auto;
	width: 60%;
	max-width: 60%;
	display: flex;
	align-items: center;
}

.ed-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ed-menu a {
	display: block;
	padding: 13px 0;
	font-family: var(--ed-font-ui);
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	color: var(--ed-text);
	text-decoration: none;
	text-transform: capitalize;
}

.ed-menu a:hover,
.ed-menu a:focus-visible,
.ed-menu .current-menu-item > a {
	color: var(--ed-gold);
}

/* Buscador, etiqueta y redes del panel: solo en tablet/móvil. */
.ed-nav-search,
.ed-nav-label,
.ed-nav-social,
.ed-nav-overlay {
	display: none;
}

/* Botón del menú (elementor-menu-toggle): ícono de 22 px con 0,25em de relleno. */
.ed-burger {
	display: none;
	flex: 0 0 auto;
	margin-left: auto;
	padding: .25em;
	border: 0;
	border-radius: 3px;
	background: #fff;
	color: #16163f;
	font-size: 22px;
	line-height: 0;
	cursor: pointer;
}

.ed-burger svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.ed-burger .ed-burger-close,
.ed-burger[aria-expanded="true"] .ed-burger-open {
	display: none;
}

.ed-burger[aria-expanded="true"] .ed-burger-close {
	display: block;
}

.ed-burger:hover,
.ed-burger:focus-visible {
	color: var(--ed-gold);
}

/* Login, notificaciones y modo oscuro: una caja cada uno (widgets independientes). */
.ed-action {
	flex: 0 1 auto;
	min-width: 0;
	color: #282828;
}

.ed-action .wnav-icon {
	font-size: 20px;
	color: #282828;
}

/* Foxiz agrega un separador al interruptor cuando sigue a otros íconos; en Elementor va solo. */
.ed-action .dark-mode-toggle-wrap:not(:first-child) .dark-mode-toggle {
	margin-left: 0;
	padding-left: 0;
	border-left: 0;
}

/* La barra principal sigue blanca en modo oscuro, como el header de Elementor. */
[data-theme="dark"] .ed-mainbar,
[data-theme="dark"] .ed-menu a {
	color: var(--ed-text);
}

/* Modo oscuro: mismos colores que los widgets 135baead y df329c (#1F1F1F). */
[data-theme="dark"] .ed-action .wnav-icon,
[data-theme="dark"] .ed-action .login-toggle .login-icon-svg {
	color: #1f1f1f;
}

/* ---------- Tablet (≤1024 px) ---------- */
@media (max-width: 1024px) {
	.ed-topbar-inner {
		padding: 27px 15px;
	}

	.ed-date-box {
		width: 346.047px;
		max-width: 346.047px;
	}

	/* En tablet el contenedor 21cc0fab ocupa el 50 % (los 562 px rigen solo en escritorio). */
	.ed-topbar-right {
		flex: 0 0 50%;
		width: 50%;
		justify-content: space-evenly;
		align-items: center;
		gap: 0;
	}

	.ed-mainbar-inner {
		padding: 20px 15px;
	}

	.ed-logo-box {
		padding-right: 90px;
	}

	.ed-logo img {
		width: 133px;
	}

	/*
	 * Menú desplegable de tablet y móvil (diseño propio, no copia de Elementor):
	 * panel bajo el header con animación, fondo oscurecido, filas amplias,
	 * buscador y redes. Siempre está en el DOM; se muestra con .is-open.
	 */
	.ed-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 2;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-12px);
		transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
		pointer-events: none;
	}

	.ed-nav.is-open {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity .22s ease, transform .22s ease, visibility 0s;
		pointer-events: auto;
	}

	.ed-nav-panel {
		box-sizing: border-box;
		max-height: var(--ed-nav-max, calc(100vh - 150px));
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 16px 15px 24px;
		background: #fff;
		border-top: 1px solid #eceef1;
		box-shadow: 0 18px 30px rgba(0, 0, 0, .14);
	}

	.ed-nav-overlay {
		position: fixed;
		inset: 0;
		z-index: -1;
		background: rgba(10, 22, 40, .45);
		opacity: 0;
		visibility: hidden;
		transition: opacity .22s ease, visibility 0s linear .22s;
	}

	.ed-nav.is-open + .ed-nav-overlay {
		opacity: 1;
		visibility: visible;
		transition: opacity .22s ease, visibility 0s;
	}

	/* Buscador (visible solo en móvil, ver más abajo) */
	.ed-nav-search {
		align-items: center;
		margin: 0 0 18px;
		border: 1px solid #d9dde3;
		border-radius: 8px;
		background: #f6f7f9;
		overflow: hidden;
	}

	.ed-nav-search:focus-within {
		border-color: var(--ed-blue);
		box-shadow: 0 0 0 3px rgba(0, 61, 128, .15);
	}

	.ed-nav-search input[type="search"] {
		flex: 1 1 auto;
		min-width: 0;
		height: 46px;
		margin: 0;
		padding: 0 14px;
		border: 0;
		background: transparent;
		color: var(--ed-text);
		font-family: var(--ed-font-ui);
		font-size: 16px; /* 16 px evita el zoom automático de iOS */
		outline: 0;
		box-shadow: none;
	}

	.ed-nav-search button {
		flex: 0 0 46px;
		height: 46px;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--ed-blue);
		font-size: 18px;
		cursor: pointer;
	}

	.ed-nav-label {
		margin: 0 0 4px;
		color: #6b7280;
		font-family: var(--ed-font-ui);
		font-size: 12px;
		font-weight: 500;
		letter-spacing: .08em;
		text-transform: uppercase;
	}

	/* Secciones: filas de 52 px con flecha y la sección actual resaltada. */
	.ed-menu {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
	}

	.ed-menu li + li {
		border-top: 1px solid #eceef1;
	}

	.ed-menu a {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 52px;
		padding: 0 4px 0 0;
		font-size: 18px;
		font-weight: 500;
		line-height: 1.3;
		color: var(--ed-text);
		text-transform: none;
		transition: color .15s, padding-left .15s;
	}

	.ed-menu a::after {
		content: "";
		flex: 0 0 auto;
		width: 8px;
		height: 8px;
		margin-left: 12px;
		border-top: 2px solid #9aa3ae;
		border-right: 2px solid #9aa3ae;
		transform: rotate(45deg);
		transition: border-color .15s, transform .15s;
	}

	.ed-menu a:hover,
	.ed-menu a:focus-visible {
		color: var(--ed-blue);
		padding-left: 6px;
	}

	.ed-menu a:hover::after,
	.ed-menu a:focus-visible::after {
		border-color: var(--ed-blue);
		transform: translateX(2px) rotate(45deg);
	}

	.ed-menu .current-menu-item > a,
	.ed-menu .current-menu-parent > a,
	.ed-menu .current-post-ancestor > a {
		color: var(--ed-blue);
		padding-left: 12px;
	}

	.ed-menu .current-menu-item > a::before,
	.ed-menu .current-menu-parent > a::before,
	.ed-menu .current-post-ancestor > a::before {
		content: "";
		position: absolute;
		left: 0;
		top: 14px;
		bottom: 14px;
		width: 4px;
		border-radius: 2px;
		background: var(--ed-yellow);
	}

	/* Redes (visibles solo en móvil, ver más abajo) */
	.ed-nav-social {
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-top: 18px;
		padding-top: 18px;
		border-top: 1px solid #eceef1;
		color: #6b7280;
		font-family: var(--ed-font-ui);
		font-size: 14px;
	}

	.ed-social-menu a {
		width: 36px;
		height: 36px;
		background: var(--ed-blue);
		color: #fff;
	}

	/*
	 * Mientras el menú está abierto la página no se desplaza, pero SIN poner
	 * overflow: hidden en html/body: eso convierte a body en contenedor de
	 * desplazamiento y anula el header fijo (sticky). El bloqueo lo hace
	 * ed-layout.js con los eventos de scroll fuera del panel.
	 */
	.ed-nav-overlay {
		touch-action: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.ed-nav,
		.ed-nav.is-open,
		.ed-nav-overlay,
		.ed-menu a,
		.ed-menu a::after {
			transition: none;
		}
	}

	.ed-nav-label,
	.ed-nav-overlay {
		display: block;
	}

	.ed-burger {
		display: block;
	}
}

/* ---------- Móvil (≤767 px) ---------- */
@media (max-width: 767px) {
	.ed-topbar-inner {
		flex-wrap: wrap;
		padding: 15px;
	}

	/* Texto en línea dentro de una línea de 30,6 px, como el widget de fecha. */
	.ed-date-box {
		display: block;
		width: 100%;
		max-width: 100%;
		line-height: 30.6px;
		text-align: center;
	}

	.ed-date {
		font-size: 12.6px;
	}

	/* Redes y buscador ocultos en móvil (elementor-hidden-mobile)... */
	.ed-topbar-right {
		display: none;
	}

	/* ...por eso en móvil van dentro del menú desplegable. */
	.ed-nav-search,
	.ed-nav-social {
		display: flex;
	}

	.ed-logo-box {
		margin-right: 0;
		padding-right: 0;
	}

	.ed-logo img {
		width: 130px;
	}

	.ed-nav-box {
		width: 21.797px;
		max-width: 21.797px;
	}

}

/* ---------- Footer ---------- */
/* Medidas de la plantilla 772055: contenedor de 1200 px, dos columnas de 50 % con 10 px de relleno. */

/* Solo los párrafos propios: los del formulario de Mailchimp conservan los estilos de Foxiz. */
.ed-footer p[class^="ed-"] {
	margin: 0;
}

.ed-footer-main {
	padding: 20px 0 10px;
	background: var(--ed-blue-footer);
	color: #fff;
	font-family: var(--ed-font-footer);
	font-size: 16px;
	line-height: 28px;
}

.ed-footer-main a {
	color: #fff;
	text-decoration: none;
}

.ed-footer-cols {
	display: flex;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
}

.ed-footer-col {
	box-sizing: border-box;
	flex: 0 0 50%;
	max-width: 50%;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 10px;
}

.ed-footer-thanks {
	max-width: 70.845%;
}

.ed-footer-phone {
	font-size: 30px;
	font-weight: 600;
	line-height: 28px;
}

.ed-footer-badge {
	color: #fff;
}

.ed-footer-badge svg {
	display: block;
}

.ed-footer-news {
	gap: 15px;
}

.ed-footer-social {
	flex-wrap: nowrap;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
	padding: 10px;
	line-height: 1.7;
}

.ed-footer-news-title {
	font-size: 19px;
	font-weight: 600;
	line-height: 1.7;
	text-align: end;
}

/* Widget foxiz-newsletter-2 (57a9b1a7): 68 % de ancho, alineado a la derecha. */
.ed-footer-form {
	align-self: flex-end;
	width: 68%;
	color: #282828; /* texto del campo (en Elementor se hereda #282828; el ejemplo va al 70 %) */
	line-height: 1.7; /* relativo, como en Elementor (no los 28 px del resto del footer) */
	--mc-input-bg: #ffcc00;
	--mc-btn-padding: 0px 0px 0px 0px;
}

.ed-footer-form input[type="submit"]:not(:hover) {
	background: #151313;
}

/* Envío en curso (ed-layout.js). */
.ed-footer-form .is-sending input[type="submit"],
.ed-footer-form .is-sending button[type="submit"] {
	opacity: .7;
	cursor: progress;
}

/* Mensaje de respuesta: legible sobre el fondo azul del footer. */
.ed-footer-form .mc4wp-response:empty {
	display: none;
}

.ed-footer-form .mc4wp-alert {
	margin-top: 12px;
	padding: 10px 14px;
	border-left: 4px solid var(--ed-yellow);
	border-radius: 4px;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-family: var(--ed-font-footer);
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
}

.ed-footer-form .mc4wp-alert p {
	margin: 0;
}

.ed-footer-form .mc4wp-error {
	border-left-color: #ff8a80;
	background: rgba(255, 138, 128, .16);
}

.ed-footer-form .mc4wp-notice {
	border-left-color: #fff;
}

.ed-footer-tagline {
	line-height: 1.7;
	text-align: end;
}

/* Barra inferior (34d091a4): 1160 px, dos bloques de 570 px. */
.ed-footer-bottom {
	background: #fff;
	color: #282828;
	font-family: var(--ed-font-footer);
	font-size: 16px;
	line-height: 1.7;
}

.ed-footer-bottom-inner {
	box-sizing: border-box;
	display: flex;
	gap: 20px;
	max-width: 1180px; /* 1160 px de contenido + 10 px de relleno a cada lado */
	margin: 0 auto;
	padding: 10px;
}

.ed-footer-bottom-inner > p {
	box-sizing: border-box;
	flex: 0 0 calc(50% - 10px);
	padding: 10px;
}

.ed-footer-links-inner {
	display: block;
}

/* 647286d0: bloque de 500 px centrado, solo desde 768 px (igual que Elementor). */
@media (min-width: 768px) {
	.ed-footer-links-inner {
		max-width: 500px;
		margin: 0 auto;
	}
}

/* Mismo estilo de enlace de Foxiz que en los widgets de texto de Elementor (.elementor-widget-text-editor p a). */
.ed-footer-bottom a {
	color: var(--hyperlink-color, inherit);
	font-weight: var(--hyperlink-weight, 700);
	font-style: var(--hyperlink-style, normal);
	transition: var(--effect);
	text-decoration-line: underline;
	text-decoration-color: var(--hyperlink-line-color, transparent);
	text-underline-offset: min(4px, .175em);
}

.ed-footer-bottom a:hover,
.ed-footer-bottom a:focus-visible {
	color: var(--g-color);
	text-decoration-color: var(--g-color);
}

.ed-footer-links-inner > span {
	margin: 0 4px;
}

.ed-footer-social > span {
	flex: 0 1 auto;
	min-width: 0;
}

/* El widget de redes (374e6c48) se alinea abajo cuando el texto ocupa dos líneas. */
.ed-social-footer {
	align-self: flex-end;
}

/* El widget de texto con el distintivo mide 60 px (SVG de 51 px en línea + alto de línea). */
.ed-footer-badge {
	min-height: 60px;
}

/* El copyright era blanco sobre blanco en Elementor: aquí se ve (gris oscuro). */
.ed-footer-copy {
	text-align: end;
}

@media (max-width: 767px) {
	.ed-footer-cols,
	.ed-footer-bottom-inner {
		flex-direction: column;
	}

	/* En móvil los contenedores de Elementor pasan a varias líneas. */
	.ed-footer-social {
		flex-wrap: wrap;
		row-gap: 0;
	}

	.ed-footer-col,
	.ed-footer-bottom-inner > p {
		flex-basis: auto;
		max-width: 100%;
	}
}

/* ---------- Sidebar (plantillas PHP) ---------- */

.ed-sidebar .widget + .widget {
	margin-top: 30px;
}