/* ==========================================================================
   Tabarca Experience · Global Layout — HEADER
   --------------------------------------------------------------------------
   Todo cuelga de `.tegl-*` y de `body.tegl-header-on`, así que nada de esto
   puede alcanzar al contenido de las páginas de Elementor.

   El reparto horizontal es un grid de tres columnas `auto 1fr auto`:

       [ LOGO ]        [ NAVEGACIÓN ]        [ IDIOMA · CARRITO · CTA ]
        auto               1fr                        auto

   El logo ocupa lo que mide y las utilidades lo que miden; la navegación se
   queda con lo que sobra. Ése es el arreglo de fondo: los porcentajes fijos
   (18% / 70% / 12%) del sistema anterior repartían el ancho sin mirar el
   contenido, y por eso el menú se estrangulaba y el logotipo invadía.

   No se usa `!important` en ninguna regla de maquetación: la especificidad
   propia y el orden de carga bastan porque el marcado también es nuestro.
   ========================================================================== */

/* El nivel de apilamiento del chrome se declara en `:root` a propósito: si en
   producción alguna sección de Elementor o el sticky de The7 quedara por encima
   del header, se corrige con UNA línea en el CSS adicional del tema
   —`:root{--tegl-z:99000}`— sin tocar el plugin ni pelear con especificidad.
   9000 deja el header por encima de cualquier contenido normal y por debajo de
   los popups de Elementor y del aviso de cookies, que deben seguir ganando. */
:root {
	--tegl-z: 9000;
}

.tegl-header,
.tegl-drawer {
	--tegl-ink: #172530;
	--tegl-ink-soft: #4a5560;
	--tegl-sun: #ffb700;
	--tegl-sun-hover: #e6a500;
	--tegl-white: #ffffff;
	--tegl-cream: #fdf8f0;
	--tegl-border: #e8e0d5;
	--tegl-shadow: 0 1px 0 rgba(23, 37, 48, .08);
	--tegl-radius: 12px;
	/* Altura de la franja. NO es un relleno artificial: es exactamente lo que
	   miden el logotipo y el padding vertical (64 + 24 + 24 = 112). Se declara
	   para que el hueco esté reservado desde el primer pintado, antes de que
	   carguen la fuente y la imagen. */
	--tegl-h: 112px;
	--tegl-pad-y: 24px;
	--tegl-logo-h: 64px;
	--tegl-gap: 28px;
	/* Raíl del chrome, v3.
	   Antes: 1320 px. Ahora 1440, +9%. El contenedor de contenido del sitio
	   (kit de Elementor) son 1300 px, así que header y pie quedan en un raíl 70 px
	   más ancho que el contenido a cada lado: es deliberado, chrome por encima de
	   la columna de texto. Por debajo de 1440 manda el viewport, de modo que a
	   1366 y 1280 el cambio es casi nulo y a 1440+ se nota de verdad. Volver a la
	   alineación estricta con el contenido es cambiar este único valor a 1300. */
	--tegl-pad: 32px;
	--tegl-max: 1440px;
	--tegl-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--tegl-ease: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   Barra
   -------------------------------------------------------------------------- */

.tegl-header {
	position: relative;
	z-index: var(--tegl-z);
	box-sizing: border-box;
	width: 100%;
	background: var(--tegl-white);
	border-bottom: 1px solid var(--tegl-border);
	box-shadow: var(--tegl-shadow);
	font-family: var(--tegl-font);
	/* Reserva la altura desde el primer pintado: sin esto, la carga de la
	   fuente o del logotipo movería el contenido de debajo. */
	min-height: var(--tegl-h);

	/* NO poner aquí `contain`. `contain: paint` recorta los descendientes a la
	   caja del header, y tanto el desplegable de idiomas como los submenús
	   sobresalen por debajo: se quedaban recortados y el héroe se los comía.
	   La estabilidad de maquetación ya la da `min-height` más las dimensiones
	   explícitas del logotipo. */
}

/* `sticky` en vez de `fixed`: no saca al header del flujo, así que no hace
   falta ningún espaciador de compensación y no hay salto de maquetación. */
body.tegl-sticky-on .tegl-header--sticky {
	position: sticky;
	top: 0;
}

/* Barra de administración de WordPress.
   Con `top: 0` a secas, un administrador identificado veía el header pegado
   DEBAJO de la barra de WordPress, que está fija por encima. Los tres tramos
   son los del propio core: 32 px en escritorio, 46 px hasta 782 px y, por
   debajo de 600 px, la barra deja de estar fija y se va con el scroll, así que
   el header vuelve a pegarse arriba del todo. */
body.admin-bar.tegl-sticky-on .tegl-header--sticky {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar.tegl-sticky-on .tegl-header--sticky {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {
	body.admin-bar.tegl-sticky-on .tegl-header--sticky {
		top: 0;
	}
}

.tegl-header *,
.tegl-drawer * {
	box-sizing: border-box;
}

.tegl-header__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--tegl-gap);
	width: 100%;
	max-width: var(--tegl-max);
	min-height: var(--tegl-h);
	margin: 0 auto;
	/* El alto sale del contenido más el padding, no de un min-height inflado:
	   por eso no hay bandas blancas por encima ni por debajo de la composición. */
	padding: var(--tegl-pad-y) var(--tegl-pad);
}

/* --------------------------------------------------------------------------
   Logotipo
   -------------------------------------------------------------------------- */

.tegl-header__brand {
	display: flex;
	align-items: center;
	/* `min-width: 0` deja que la columna se encoja antes que empujar al menú. */
	min-width: 0;
	line-height: 0;
	text-decoration: none;
}

.tegl-header__logo {
	display: block;
	width: auto;
	/* Manda el alto; la proporción la pone el archivo. El valor llega de los
	   ajustes por una propiedad personalizada que imprime la plantilla, de modo
	   que el alto que aplica el CSS y el que se usó para calcular los atributos
	   width/height del HTML son el mismo número. */
	height: var(--tegl-logo-h, 64px);
	max-width: 260px;
	object-fit: contain;
	object-position: left center;
}

.tegl-header__wordmark {
	font-family: Fraunces, Georgia, serif;
	font-size: 20px;
	font-weight: 600;
	color: var(--tegl-ink);
	line-height: 1.1;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Navegación
   -------------------------------------------------------------------------- */

/* La navegación ocupa toda la altura de la franja. Dos motivos: el área de
   hover deja de ser una línea de texto suelta —el logotipo ya no queda flotando
   aparte del menú— y los submenús pueden colgar del borde inferior del header
   en lugar de aparecer a media altura. */
.tegl-nav {
	display: flex;
	align-self: stretch;
	min-width: 0;
}

.tegl-nav__list {
	display: flex;
	flex-wrap: nowrap;          /* una sola línea, sin excepción */
	align-items: stretch;
	justify-content: flex-end;
	gap: 2px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tegl-nav__item {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.tegl-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 14px;
	border-radius: 10px;
	color: var(--tegl-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-decoration: none;
	white-space: nowrap;        /* «Contact» nunca parte en dos líneas */
	transition: color var(--tegl-ease), background-color var(--tegl-ease);
}

.tegl-nav__link:hover,
.tegl-nav__link:focus-visible {
	color: var(--tegl-sun-hover);
	background: var(--tegl-cream);
}

.tegl-nav__item.is-current > .tegl-nav__link,
.tegl-nav__item.is-ancestor > .tegl-nav__link {
	color: var(--tegl-sun-hover);
}

.tegl-nav__item.is-current > .tegl-nav__link::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 7px;
	height: 2px;
	border-radius: 2px;
	background: var(--tegl-sun);
}

.tegl-nav__caret {
	display: inline-flex;
	color: currentColor;
	opacity: .55;
	pointer-events: none;
}

/* Submenú de escritorio: se muestra con hover y con foco de teclado, y también
   cuando el JS marca `is-open` (pulsación o tecla en el elemento padre). */
.tegl-nav__sub {
	position: absolute;
	/* Del borde inferior del header, no de media franja: el ítem llega hasta el
	   final del contenido y falta justo el padding inferior. */
	top: calc(100% + var(--tegl-pad-y) - 2px);
	left: 0;
	z-index: 5;
	min-width: 232px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--tegl-white);
	border: 1px solid var(--tegl-border);
	border-radius: var(--tegl-radius);
	box-shadow: 0 14px 34px rgba(23, 37, 48, .14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--tegl-ease), transform var(--tegl-ease), visibility var(--tegl-ease);
}

.tegl-nav__item.has-children:hover > .tegl-nav__sub,
.tegl-nav__item.has-children:focus-within > .tegl-nav__sub,
.tegl-nav__item.has-children.is-open > .tegl-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Los últimos ítems abren el submenú hacia dentro para no salirse de pantalla. */
.tegl-nav__item:nth-last-child(-n+2) > .tegl-nav__sub {
	left: auto;
	right: 0;
}

.tegl-nav__link--child {
	display: flex;
	width: 100%;
	padding: 9px 12px;
	font-size: 14px;
	font-weight: 500;
	white-space: normal;
}

/* --------------------------------------------------------------------------
   Utilidades de la derecha
   -------------------------------------------------------------------------- */

.tegl-header__utils {
	display: flex;
	flex: 0 0 auto;
	align-self: stretch;
	align-items: center;
	gap: 12px;
}

.tegl-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 22px;
	border-radius: 999px;
	background: var(--tegl-sun);
	color: var(--tegl-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--tegl-ease), transform var(--tegl-ease);
}

.tegl-cta:hover,
.tegl-cta:focus-visible {
	background: var(--tegl-sun-hover);
	color: var(--tegl-ink);
}

.tegl-cta--block {
	width: 100%;
	min-height: 48px;
}

.tegl-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	color: var(--tegl-ink);
	text-decoration: none;
	transition: background-color var(--tegl-ease);
}

.tegl-cart:hover,
.tegl-cart:focus-visible {
	background: var(--tegl-cream);
}

.tegl-cart__count {
	position: absolute;
	top: 3px;
	right: 3px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--tegl-ink);
	color: var(--tegl-white);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

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

/* --------------------------------------------------------------------------
   Selector de idiomas
   -------------------------------------------------------------------------- */

/* El envoltorio también llega de arriba abajo. Sin esto el selector medía sólo
   lo que mide su botón (44 px) y su desplegable colgaba a media franja en vez de
   hacerlo desde el borde inferior del header. */
.tegl-header__lang {
	display: flex;
	align-self: stretch;
	align-items: center;
}

.tegl-lang {
	position: relative;
	display: flex;
	align-self: stretch;
	align-items: center;
	flex: 0 0 auto;
}

.tegl-lang__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--tegl-border);
	border-radius: 999px;
	background: var(--tegl-white);
	color: var(--tegl-ink);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: border-color var(--tegl-ease), background-color var(--tegl-ease);
}

.tegl-lang__toggle:hover,
.tegl-lang__toggle[aria-expanded="true"] {
	border-color: var(--tegl-ink);
	background: var(--tegl-cream);
}

.tegl-lang__flag {
	font-size: 17px;
	line-height: 1;
}

.tegl-lang__caret {
	opacity: .6;
	transition: transform var(--tegl-ease);
}

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

.tegl-lang__list {
	position: absolute;
	top: calc(100% + var(--tegl-pad-y));
	right: 0;
	z-index: 10;
	min-width: 236px;
	margin: 0;
	padding: 7px;
	list-style: none;
	background: var(--tegl-white);
	border: 1px solid var(--tegl-border);
	border-radius: var(--tegl-radius);
	box-shadow: 0 14px 34px rgba(23, 37, 48, .16);
}

/* Cerrado de fábrica. `[hidden]` lo pone el servidor y lo quita el JS, así que
   sin JavaScript el desplegable simplemente no se abre: no queda colgando. */
.tegl-lang__list[hidden] {
	display: none;
}

.tegl-lang__link {
	display: flex;
	align-items: center;
	gap: 11px;
	/* 44 px de alto por fila: el desplegable también se usa con el dedo. */
	min-height: 44px;
	padding: 10px 14px;
	border-radius: 8px;
	color: var(--tegl-ink);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--tegl-ease);
}

.tegl-lang__link:hover,
.tegl-lang__link:focus-visible {
	background: var(--tegl-cream);
}

.tegl-lang__item.is-active .tegl-lang__link {
	font-weight: 700;
	background: var(--tegl-cream);
}

.tegl-lang__name {
	flex: 1 1 auto;
}

.tegl-lang__code--small {
	font-size: 12px;
	font-weight: 700;
	color: var(--tegl-ink-soft);
	letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   Botón hamburguesa · sólo por debajo del punto de ruptura (responsive.css)
   -------------------------------------------------------------------------- */

.tegl-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--tegl-border);
	border-radius: 10px;
	background: var(--tegl-white);
	color: var(--tegl-ink);
	cursor: pointer;
}

.tegl-burger__bars {
	display: block;
	width: 20px;
}

.tegl-burger__bars i {
	display: block;
	height: 2px;
	margin: 4px 0;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--tegl-ease), opacity var(--tegl-ease);
}

.tegl-burger[aria-expanded="true"] .tegl-burger__bars i:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.tegl-burger[aria-expanded="true"] .tegl-burger__bars i:nth-child(2) {
	opacity: 0;
}

.tegl-burger[aria-expanded="true"] .tegl-burger__bars i:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Foco visible · uno solo para todo el chrome
   -------------------------------------------------------------------------- */

.tegl-header a:focus-visible,
.tegl-header button:focus-visible,
.tegl-drawer a:focus-visible,
.tegl-drawer button:focus-visible,
.tegl-footer a:focus-visible,
.tegl-footer button:focus-visible {
	outline: 2px solid var(--tegl-ink, #172530);
	outline-offset: 2px;
	border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
	.tegl-header *,
	.tegl-drawer * {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
	}
}