/* ==========================================================================
   Cabecera y pie
   ==========================================================================
   La cabecera es oscura y se funde con el hero: los dos bloques se leen como
   una sola pieza, que es lo que da el golpe de vista al entrar. Por eso el
   logotipo va en su versión blanca.
   ========================================================================== */

/* ==========================================================================
   1. Cabecera
   ========================================================================== */

.eps-site-header {
	position: relative;
	z-index: 100;
	background: var(--eps-noche-800);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* Filo de acento bajo la cabecera. */
.eps-site-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: linear-gradient(90deg,
		var(--eps-espuma-500) 0%,
		var(--eps-espuma-400) 40%,
		var(--eps-poliurea-500) 100%);
}

/* Elementor 4 no solo define la custom property: fija
   `.e-con-boxed.e-flex { flex-direction: column }` directamente. Hay que
   declarar la propiedad real y con más peso, no solo la variable. */
.eps-site-header .eps-seccion.eps-header,
.eps-site-header .eps-seccion.eps-header > .e-con-inner {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 12px;
}

.eps-site-header .eps-seccion {
	padding-block: 0.5rem;
	--flex-direction: row;
	--align-items: center;
	--justify-content: space-between;
	--flex-wrap: nowrap;
	--gap: 12px;
}

/* Reparto de la fila de la cabecera.
   Las custom properties de Elementor (--width, --flex-grow) pierden frente a
   sus propias reglas, así que aquí van propiedades reales y con el selector
   anclado a .eps-site-header para ganar en especificidad. Sin esto Elementor
   parte la fila al 50% y el botón del menú acaba en mitad de la cabecera en
   vez de pegado a la derecha. */
.eps-site-header .eps-header__marca {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

.eps-site-header .eps-header__nav,
.eps-site-header .eps-header__cta,
.eps-site-header .eps-header__menu-movil {
	flex: 0 0 auto;
	width: auto;
}

/* El botón del menú, pegado al borde derecho. */
.eps-site-header .eps-header__menu-movil {
	justify-content: flex-end;
	text-align: right;
}

.eps-site-header .eps-header__menu-movil .elementor-widget,
.eps-site-header .eps-header__menu-movil .elementor-widget-container {
	width: auto;
	text-align: right;
}

/* Elementor separa sus widgets con 20 px por defecto y eso engorda la cabecera
   en las dos resoluciones. Dentro de la cabecera van pegados. */
.eps-site-header .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}

.eps-site-header .e-con-inner {
	padding-block: 0;
}

/* --- Logotipo -------------------------------------------------------------
   Se dimensiona por altura: la cabecera mide lo mismo aunque el cliente suba
   mañana un logotipo con otra proporción. */
/* Selectores anclados a .eps-site-header a propósito.
   Elementor declara `.elementor-widget-image { text-align:center }` y
   `.elementor img { height:auto }`, que empatan en especificidad con
   `.eps-logo` y `.eps-logo img`. En un empate gana la hoja que va más abajo, y
   eso cambia según el orden de carga del hosting. Con el ancestro delante ya no
   hay empate posible. */
.eps-site-header .eps-logo,
.eps-site-header .eps-logo .elementor-widget-container {
	text-align: left;
}

.eps-site-header .eps-logo img {
	height: 46px;
	width: auto;
	max-width: 100%;
	display: block;
	object-fit: contain;
	transition: opacity var(--eps-transicion);
}

.eps-site-header .eps-logo a:hover img {
	opacity: 0.82;
}

/* Reserva por si algún día no hubiera logotipo importado. */
.eps-header__nombre {
	margin: 0;
	font-family: var(--eps-display);
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1.2;
}

.eps-header__nombre a {
	color: #fff;
	text-decoration: none;
}

/* --- Menú ---------------------------------------------------------------- */
.eps-site-header .hfe-nav-menu .menu-item a.hfe-menu-item {
	font-family: var(--eps-display);
	font-weight: 600;
	color: #D6E3EA !important;
	transition: color var(--eps-transicion);
}

.eps-site-header .hfe-nav-menu .menu-item a.hfe-menu-item:hover,
.eps-site-header .hfe-nav-menu .menu-item.current-menu-item a.hfe-menu-item {
	color: var(--eps-espuma-400) !important;
}

/* El icono de hamburguesa lo pinta HFE como SVG heredando currentColor. */
.eps-site-header .hfe-nav-menu__toggle {
	color: #fff;
}

.eps-site-header .hfe-nav-menu-icon svg {
	fill: currentColor;
}

/* --- Botón de llamar en la cabecera -------------------------------------- */

/* Sin teléfono configurado el botón no pinta nada, pero su contenedor sigue
   ocupando su hueco y empuja el menú hacia dentro. Se retira hasta que haya
   número. */
body.eps-sin-telefono .eps-header__cta {
	display: none;
}

/* El menú, pegado al borde derecho del contenido. */
.eps-site-header .eps-header__nav {
	justify-content: flex-end;
}

.eps-header__tel a.eps-tel {
	padding: 0.6rem 1.15rem;
	min-height: 44px;
	font-size: 0.9375rem;
}

/* ==========================================================================
   2. Cabecera en móvil: fija y estrecha
   ==========================================================================
   Una barra fija se lleva su altura en TODAS las páginas, así que en móvil se
   aprieta al máximo. El hueco que deja al salir del flujo se compensa con
   padding en el body, con la altura medida por el propio tema.
   ========================================================================== */

@media (max-width: 767px) {
	.eps-site-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		box-shadow: 0 2px 16px rgba(7, 18, 25, .35);
	}

	body {
		padding-top: var(--eps-header-h, 60px);
	}

	body.admin-bar .eps-site-header {
		top: 46px;
	}

	.eps-site-header .eps-seccion {
		padding-block: 0.3rem;
	}

	.eps-site-header .e-con-inner {
		padding-block: 0;
	}

	.eps-site-header .eps-header__marca,
	.eps-site-header .eps-header__nav,
	.eps-site-header .eps-header__menu-movil {
		padding-block: 0;
	}


	.eps-site-header .eps-logo img {
		height: 38px;
	}

	/* El botón de llamar de la cabecera sobra en móvil: ya está en la barra
	   fija de abajo. */
	.eps-header__cta {
		display: none;
	}

	/* En móvil el menú es el panel propio (inc/menu-movil.php): el widget de
	   HFE se retira por completo, incluida su lista horizontal, que aun oculta
	   ocupaba más de 1000 px de ancho y aplastaba el logotipo. */
	.eps-site-header .eps-header__nav {
		display: none;
	}

	/* Sitio para la barra de acciones fija de abajo. */
	body {
		padding-bottom: 62px;
	}

	.eps-anclas {
		scroll-margin-top: calc(var(--eps-header-h, 60px) + 0.5rem);
	}
}

@media (min-width: 768px) {
	/* En escritorio manda el menú horizontal de HFE: el botón del panel se va. */
	.eps-header__menu-movil {
		display: none;
	}

	/* Se aprieta la tipografía del menú para que entre en una fila. */
	.eps-site-header .hfe-nav-menu .menu-item a.hfe-menu-item {
		font-size: 0.875rem;
		padding-inline: 0.7rem;
		line-height: 1.3;
	}

	.eps-site-header .hfe-nav-menu ul.hfe-nav-menu {
		flex-wrap: nowrap;
	}
}

@media (min-width: 1100px) {
	.eps-site-header .hfe-nav-menu .menu-item a.hfe-menu-item {
		font-size: 0.9375rem;
		padding-inline: 0.85rem;
	}
}

/* ==========================================================================
   3. Menú de reserva

   Solo aparece si falta Ultimate Addons for Elementor (ver inc/header-footer.php,
   función eps_menu_respaldo). Con el plugin activo esto no se usa nunca, pero
   si vuelve a desactivarse la cabecera mantiene el mismo aspecto en vez de
   quedarse sin navegación.
   ========================================================================== */

.eps-nav-respaldo__lista {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.2rem;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: nowrap;
}

.eps-nav-respaldo__lista a {
	display: block;
	font-family: var(--eps-display);
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1.3;
	color: #D6E3EA;
	text-decoration: none;
	padding: 0.5rem 0.7rem;
	transition: color var(--eps-transicion);
}

.eps-nav-respaldo__lista a:hover,
.eps-nav-respaldo__lista .current-menu-item > a {
	color: var(--eps-espuma-400);
}

@media (min-width: 1100px) {
	.eps-nav-respaldo__lista a {
		font-size: 0.9375rem;
		padding-inline: 0.85rem;
	}
}

/* En móvil manda el panel propio, igual que con el plugin activo. */
@media (max-width: 767px) {
	.eps-nav-respaldo {
		display: none;
	}
}

/* ==========================================================================
   4. Pie
   ========================================================================== */

.eps-site-footer {
	background: var(--eps-noche-900);
	color: var(--eps-sobre-oscuro-suave);
	margin-top: 0;
	position: relative;
}

.eps-site-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg,
		var(--eps-espuma-500) 0%,
		var(--eps-poliurea-500) 100%);
}

.eps-site-footer .eps-seccion {
	padding-block: clamp(2.5rem, 7vw, 4rem);
}

/* Los titulares del pie los pinta Elementor con
   .elementor-widget-heading .elementor-heading-title, que apunta al color
   primario del kit —ahora oscuro— y gana a cualquier clase suelta puesta sobre
   el widget. Hay que bajar hasta el propio <h2>. */
.eps-site-footer .elementor-widget-heading .elementor-heading-title {
	color: #fff;
}

.eps-footer__titulo,
.eps-site-footer .eps-footer__titulo .elementor-heading-title {
	font-family: var(--eps-display);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--eps-espuma-400);
	margin-bottom: 0.75rem;
}

.eps-site-footer p,
.eps-site-footer li {
	color: var(--eps-sobre-oscuro-suave);
}

.eps-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.9375rem;
}

.eps-footer__col li + li {
	margin-top: 0.35rem;
}

.eps-site-footer a {
	color: var(--eps-sobre-oscuro-suave);
	text-decoration: none;
	transition: color var(--eps-transicion);
}

.eps-site-footer a:hover {
	color: var(--eps-espuma-400);
}

.eps-site-footer .elementor-widget-text-editor a {
	text-decoration: none;
	color: var(--eps-sobre-oscuro-suave);
}

.eps-site-footer .elementor-widget-text-editor a:hover {
	color: var(--eps-espuma-400);
}

/* NAP: es el dato que más se mira en un pie de obra. */
.eps-nap {
	line-height: 1.7;
}

.eps-nap__nombre {
	font-family: var(--eps-display);
	font-weight: 700;
	color: #fff;
	font-size: 1.05rem;
}

.eps-nap__tel {
	display: inline-block;
	margin-top: 0.5rem;
	font-family: var(--eps-display);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--eps-espuma-400) !important;
	background: none;
	padding: 0;
	min-height: 0;
	border-radius: 0;
}

.eps-nap__tel:hover {
	transform: none;
	box-shadow: none;
	color: #fff !important;
}

.eps-footer__legal {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: 0.8125rem;
}

.eps-footer__copy,
.eps-footer__cookies {
	margin: 0.4rem 0;
	color: var(--eps-tinta-tenue) !important;
}

.eps-site-footer .eps-nav-legal ul.hfe-nav-menu {
	flex-wrap: wrap;
	gap: 0.35rem 1.5rem;
}

.eps-site-footer .eps-nav-legal .menu-item a.hfe-menu-item {
	color: var(--eps-sobre-oscuro-suave) !important;
	font-size: 0.8125rem;
	padding-inline: 0 !important;
	padding-block: 0.3rem;
}

.eps-site-footer .eps-nav-legal .menu-item a.hfe-menu-item:hover {
	color: var(--eps-espuma-400) !important;
}

/* En el pie el WhatsApp es un enlace más, no un botón grande. */
.eps-site-footer a.eps-whatsapp {
	margin-top: 0.75rem;
	font-size: 0.9375rem;
	padding: 0.6rem 1.1rem;
	min-height: 42px;
}

/* ==========================================================================
   4. Menú móvil propio

   Sustituye al desplegable de Header Footer Elementor, que se pintaba con
   fondo blanco y reglas de mucho peso: sobre la cabecera oscura salían
   enlaces gris claro sobre blanco.

   Panel a pantalla completa, enlaces grandes, página actual marcada y los
   botones de contacto dentro. Solo existe por debajo de 768 px.
   ========================================================================== */

/* --- Botón hamburguesa ----------------------------------------------------
   El selector va anclado a la cabecera porque el kit de Elementor estiliza los
   <button> a secas con el color de acento: sin esto el botón sale como un
   cuadrado naranja. */
.eps-site-header .eps-nav-toggle,
button.eps-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	min-height: 42px;
	padding: 0;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 11px;
	box-shadow: none;
	cursor: pointer;
	transition: background-color var(--eps-transicion), border-color var(--eps-transicion);
	-webkit-tap-highlight-color: transparent;
}

.eps-site-header .eps-nav-toggle:hover,
.eps-site-header .eps-nav-toggle:active,
button.eps-nav-toggle:active {
	background: rgba(255, 255, 255, .15);
	border-color: rgba(255, 255, 255, .35);
	transform: none;
}

.eps-nav-toggle__barras {
	position: relative;
	width: 20px;
	height: 14px;
	display: block;
}

.eps-nav-toggle__barras span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform 260ms cubic-bezier(.4, 0, .2, 1),
		opacity 160ms linear, top 260ms cubic-bezier(.4, 0, .2, 1);
}

.eps-nav-toggle__barras span:nth-child(1) { top: 0; }
.eps-nav-toggle__barras span:nth-child(2) { top: 6px; }
.eps-nav-toggle__barras span:nth-child(3) { top: 12px; }

/* Abierto, las tres barras se convierten en una X. */
.eps-nav-abierto .eps-nav-toggle__barras span:nth-child(1) {
	top: 6px;
	transform: rotate(45deg);
}

.eps-nav-abierto .eps-nav-toggle__barras span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.eps-nav-abierto .eps-nav-toggle__barras span:nth-child(3) {
	top: 6px;
	transform: rotate(-45deg);
}

/* --- Velo ----------------------------------------------------------------- */
.eps-nav-velo {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(7, 18, 25, .6);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	/* visibility cambia de golpe, así que se retrasa hasta que acaba el
	   desvanecido al cerrar y se aplica al instante al abrir. */
	transition: opacity 240ms ease, visibility 0s linear 240ms;
}

.eps-nav-abierto .eps-nav-velo {
	opacity: 1;
	visibility: visible;
	transition: opacity 240ms ease, visibility 0s linear 0s;
}

/* --- Panel ---------------------------------------------------------------- */
.eps-nav-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1001;
	width: min(88vw, 400px);
	background: var(--eps-noche-800);
	border-left: 1px solid var(--eps-noche-600);
	box-shadow: -18px 0 50px rgba(7, 18, 25, .55);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-bottom: env(safe-area-inset-bottom, 0);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 280ms cubic-bezier(.32, .72, 0, 1),
		visibility 0s linear 280ms;
}

.eps-nav-abierto .eps-nav-panel {
	transform: none;
	visibility: visible;
	transition: transform 280ms cubic-bezier(.32, .72, 0, 1),
		visibility 0s linear 0s;
}

.eps-nav-panel__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--eps-noche-600);
	flex: none;
}

.eps-nav-panel__etiqueta {
	font-family: var(--eps-display);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--eps-espuma-400);
}

.eps-nav-panel .eps-nav-cerrar,
button.eps-nav-cerrar {
	width: 44px;
	height: 44px;
	margin-right: -0.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	border-radius: 10px;
	box-shadow: none;
	min-height: 44px;
	cursor: pointer;
	color: #fff;
}

.eps-nav-panel .eps-nav-cerrar:active {
	background: rgba(255, 255, 255, .1);
}

.eps-nav-cerrar svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

/* --- Lista de enlaces ------------------------------------------------------ */
.eps-nav-panel__menu {
	flex: 1 1 auto;
	padding: 0.5rem 0;
}

.eps-nav-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.eps-nav-lista .menu-item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	font-family: var(--eps-display);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	color: #E8F0F4;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .06);
	transition: background-color var(--eps-transicion), color var(--eps-transicion);
}

/* Flecha que aparece a la derecha de cada enlace. */
.eps-nav-lista .menu-item a::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	opacity: 0.35;
	flex: none;
}

.eps-nav-lista .menu-item a:active {
	background: rgba(255, 255, 255, .06);
}

/* La página en la que estás, marcada con el color de marca y un filo. */
.eps-nav-lista .current-menu-item > a,
.eps-nav-lista .current-page-ancestor > a {
	color: var(--eps-espuma-400);
	box-shadow: inset 3px 0 0 var(--eps-espuma-500);
	background: rgba(240, 123, 40, .07);
}

.eps-nav-lista .current-menu-item > a::after,
.eps-nav-lista .current-page-ancestor > a::after {
	opacity: 1;
}

/* Submenús, si algún día se añaden. */
.eps-nav-lista .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.eps-nav-lista .sub-menu a {
	padding-left: 2.25rem;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--eps-sobre-oscuro-suave);
}

/* --- Botones de contacto dentro del panel --------------------------------- */
.eps-nav-panel__acciones {
	flex: none;
	display: grid;
	gap: 0.6rem;
	padding: 1.25rem;
	border-top: 1px solid var(--eps-noche-600);
	background: var(--eps-noche-900);
}

.eps-nav-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0.75rem 1.25rem;
	border-radius: var(--eps-radio-pill);
	font-family: var(--eps-display);
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
	color: #fff;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28);
	transition: background-color var(--eps-transicion), box-shadow var(--eps-transicion);
}

.eps-nav-cta:active {
	background: rgba(255, 255, 255, .1);
}

.eps-nav-cta--principal {
	background: var(--eps-espuma-500);
	color: #10202A;
	box-shadow: none;
}

.eps-nav-cta--principal:active {
	background: var(--eps-espuma-600);
}

.eps-nav-panel__aviso {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--eps-tinta-tenue);
}

.eps-nav-panel__aviso a {
	color: var(--eps-espuma-400);
}

.eps-nav-panel__pie {
	flex: none;
	margin: 0;
	padding: 1rem 1.25rem 1.5rem;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--eps-tinta-tenue);
	background: var(--eps-noche-900);
}

/* El panel no existe en escritorio. */
@media (min-width: 768px) {
	.eps-nav-velo,
	.eps-nav-panel {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eps-nav-panel,
	.eps-nav-velo,
	.eps-nav-toggle__barras span {
		transition: none !important;
	}
}

/* Sin JavaScript el panel nunca se abre, así que el botón no debe prometer
   nada: se oculta y el menú del pie sigue dando acceso a todo. */
.no-js .eps-nav-toggle {
	display: none;
}