/* ==========================================================================
   Tabarca Experience · Global Layout — RESPONSIVE Y DRAWER
   --------------------------------------------------------------------------
   Anchos que se han considerado, en este orden:
       1440 · 1280 · 1024 · 768 · 390 · 375

   El punto de ruptura es `max-width: 1024px`, así que **a 1024 px exactos ya se
   ve la hamburguesa**; la navegación horizontal empieza en 1025 px. Es el mismo
   corte que usa hoy el widget de The7 (`dropdown: tablet`, cuyo máximo de
   tableta en Elementor son 1024 px), y coincidir con el tema evita un tramo con
   dos comportamientos conviviendo.
   ========================================================================== */

/* 1441 y más: el raíl ya está tope a 1440, así que sólo se relaja el aire
   interior entre logo, navegación y utilidades. */
@media (min-width: 1441px) {
	.tegl-header,
	.tegl-drawer {
		--tegl-gap: 36px;
	}
}

/* 1366 y 1280: aquí manda el viewport, no el max-width. Se recorta el aire
   lateral para que el ensanchado del raíl no se coma los márgenes. */
@media (max-width: 1400px) {
	.tegl-header {
		--tegl-gap: 22px;
		--tegl-pad: 24px;
	}
}

/* 1024–1200: la franja crítica. El menú de siete idiomas más el selector y el
   botón caben porque se comprimen los espacios interiores, no el texto. */
@media (max-width: 1200px) {
	/* La franja se escala entera —logo, padding y altura a la vez— para que
	   `min-height` siga siendo exactamente la suma del contenido. Si sólo se
	   encogiera el logotipo aparecería justo la banda vacía que no queremos. */
	.tegl-header {
		--tegl-gap: 14px;
		--tegl-pad: 18px;
		--tegl-pad-y: 20px;
		--tegl-h: 96px;
	}

	.tegl-nav__link {
		padding: 12px 10px;
		font-size: 14px;
	}

	.tegl-header__logo {
		height: 56px;
		max-width: 200px;
	}

	.tegl-cta {
		min-height: 44px;
		padding: 0 16px;
		font-size: 14px;
	}
}

/* --------------------------------------------------------------------------
   1024 px e inferiores: hamburguesa
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.tegl-header {
		/* 48 de logotipo + 12 arriba + 12 abajo = 72, y la hamburguesa de 44 px
		   cabe holgada. Compacto, pero acompañando al ensanchado de escritorio. */
		--tegl-h: 72px;
		--tegl-pad: 16px;
		--tegl-pad-y: 12px;
	}

	.tegl-header__inner {
		/* Dos columnas: marca y utilidades. La navegación se va al drawer. */
		grid-template-columns: auto 1fr;
	}

	.tegl-nav {
		display: none;
	}

	.tegl-header__utils {
		justify-content: flex-end;
		gap: 8px;
	}

	.tegl-burger {
		display: inline-flex;
	}

	.tegl-header__logo {
		height: 48px;
		max-width: 170px;
	}

	/* El botón de reserva se queda; es el elemento con más valor de la barra.
	   De 1024 px para abajo ya se navega con el dedo, así que TODO lo pulsable
	   de la barra mide 44 px de alto, que es el mínimo táctil. Sólo se recorta
	   el texto, nunca el objetivo. */
	.tegl-cta,
	.tegl-lang__toggle,
	.tegl-cart,
	.tegl-burger {
		min-height: 44px;
	}

	.tegl-cta {
		padding: 0 14px;
		font-size: 13px;
	}

	.tegl-cart {
		width: 44px;
	}
}

/* 768: se recorta el texto del selector a la bandera + código. */
@media (max-width: 768px) {
	.tegl-lang__toggle {
		padding: 0 10px;
		gap: 4px;
	}
}

/* 390 y 375: lo primero que se va es el botón de reserva de la barra (sigue,
   a ancho completo, dentro del drawer), y después el carrito si no tiene nada.
   Nunca se encoge un objetivo táctil por debajo de 44 px. */
@media (max-width: 480px) {
	.tegl-header {
		--tegl-pad: 12px;
		--tegl-pad-y: 11px;
		--tegl-h: 68px;
	}

	.tegl-header__utils .tegl-cta {
		display: none;
	}

	.tegl-header__logo {
		height: 46px;
		max-width: 140px;
	}

	/* Sólo se recorta el código del BOTÓN, donde el espacio es oro. Dentro del
	   desplegable se mantiene: ahí sobra sitio y el par bandera + código es lo
	   que hace reconocible cada idioma de un vistazo. */
	.tegl-lang__toggle .tegl-lang__code {
		display: none;
	}

	.tegl-cart:not(.has-items) {
		display: none;
	}

	.tegl-burger,
	.tegl-cart,
	.tegl-lang__toggle {
		min-width: 44px;
		min-height: 44px;
	}
}

/* ==========================================================================
   DRAWER
   ========================================================================== */

.tegl-drawer {
	position: fixed;
	inset: 0;
	z-index: calc(var(--tegl-z, 9000) + 10);
	font-family: var(--tegl-font);
}

.tegl-drawer[hidden] {
	display: none;
}

.tegl-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(23, 37, 48, .5);
	opacity: 0;
	transition: opacity var(--tegl-ease);
}

.tegl-drawer.is-open .tegl-drawer__overlay {
	opacity: 1;
}

.tegl-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: min(88vw, 380px);
	height: 100%;
	/* `dvh` sigue al teclado y a la barra del navegador en iOS; `vh` es el respaldo. */
	height: 100dvh;
	background: var(--tegl-white, #fff);
	box-shadow: -16px 0 40px rgba(23, 37, 48, .2);
	transform: translateX(100%);
	transition: transform 220ms cubic-bezier(.4, 0, .2, 1);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.tegl-drawer.is-open .tegl-drawer__panel {
	transform: translateX(0);
}

.tegl-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--tegl-border, #e8e0d5);
}

.tegl-drawer__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	text-decoration: none;
}

.tegl-drawer__brand img {
	display: block;
	width: auto;
	height: 32px;
	max-width: 140px;
	object-fit: contain;
}

/* La marca del menú tiene proporción 0,8 (retrato). Se fija el ALTO y se deja
   el ancho en auto para no deformarla; los atributos width/height del HTML
   siguen reservando el hueco exacto antes de que cargue. */
/* Especificidad por encima de `.tegl-drawer__brand img`, que si no gana y
   deja la marca a 32 px: así lo mostrado coincide con los atributos
   width/height del HTML (32×40) y el hueco reservado es exacto. */
.tegl-drawer__brand .tegl-drawer__mark {
	width: auto;
	height: 40px;
	max-width: none;
}

.tegl-drawer__brand-text {
	font-family: Fraunces, Georgia, serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--tegl-ink, #172530);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tegl-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--tegl-border, #e8e0d5);
	border-radius: 10px;
	background: transparent;
	color: var(--tegl-ink, #172530);
	cursor: pointer;
}

.tegl-drawer__nav {
	flex: 1 1 auto;
	padding: 8px 8px 16px;
}

.tegl-dnav__list,
.tegl-dnav__sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tegl-dnav__item {
	position: relative;
	border-bottom: 1px solid rgba(23, 37, 48, .07);
}

.tegl-dnav__item--child {
	border-bottom: 0;
}

.tegl-dnav__link {
	display: flex;
	align-items: center;
	/* 44 px de alto real: el objetivo táctil mínimo, medido, no aproximado. */
	min-height: 48px;
	padding: 12px 56px 12px 12px;
	color: var(--tegl-ink, #172530);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.tegl-dnav__item.is-current > .tegl-dnav__link {
	color: var(--tegl-sun-hover, #e6a500);
}

.tegl-dnav__link--child {
	min-height: 44px;
	padding-left: 26px;
	font-size: 15px;
	font-weight: 500;
	color: var(--tegl-ink-soft, #4a5560);
}

/* El botón de desplegar es independiente del enlace: en móvil el padre sigue
   siendo navegable y el submenú se abre con su propio control. */
.tegl-dnav__expand {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-left: 1px solid rgba(23, 37, 48, .07);
	background: transparent;
	color: var(--tegl-ink, #172530);
	cursor: pointer;
	transition: transform var(--tegl-ease);
}

.tegl-dnav__expand[aria-expanded="true"] {
	transform: rotate(180deg);
}

.tegl-dnav__sub[hidden] {
	display: none;
}

.tegl-dnav__sub {
	padding-bottom: 6px;
	background: var(--tegl-cream, #fdf8f0);
}

.tegl-drawer__foot {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 16px;
	border-top: 1px solid var(--tegl-border, #e8e0d5);
	background: var(--tegl-cream, #fdf8f0);
}

.tegl-drawer__lang {
	display: flex;
	align-items: center;
	gap: 10px;
}

.tegl-drawer__lang-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--tegl-ink-soft, #4a5560);
}

/* En el drawer el desplegable se abre hacia arriba: abajo no hay sitio. */
.tegl-lang--drawer .tegl-lang__list {
	top: auto;
	bottom: calc(100% + 8px);
	right: auto;
	left: 0;
}

/* Bloqueo del scroll del documento mientras el drawer está abierto.
   El JS guarda y restaura la posición, así que al cerrar no se vuelve arriba. */
body.tegl-drawer-open {
	overflow: hidden;
	touch-action: none;
}

/* De 1025 px en adelante el drawer no existe, aunque el JS falle. */
@media (min-width: 1025px) {
	.tegl-drawer {
		display: none;
	}
}

/* ==========================================================================
   Tabarca Experience · Full-Width Edge-to-Edge Layout System
   Allows outer sections and backgrounds to span 100% viewport width
   while preserving inner container max-width, readability, and responsiveness.
   ========================================================================== */

/* 1. Main outer wrappers allow edge-to-edge layout */
#main,
#content,
.wf-container-main,
.elementor-7665,
.elementor-section-wrap {
	width: 100%;
	max-width: 100%;
}

/* 2. Remove default 10px column gap padding on top-level Elementor sections */
.elementor-section.elementor-top-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* 3. Allow boxed top sections hosting full-width modules to stretch edge-to-edge */
.elementor-section.elementor-top-section > .elementor-container {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* 4. Full-width background bands normalization */
.te .sec-bg-crema,
.te .sec-bg-arena {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
}

/* 5. Prevent lateral overflow */
html, body {
	overflow-x: clip;
}