/* ==========================================================================
   Header Araweb
   - Variables CSS para personalizar por proyecto (futuro: controles Elementor).
   - El modo móvil se activa por JS con la clase .is-mobile (breakpoint configurable).

   Estructura:
   header > inner > [ bar (logo + tabs + toggle) ] + [ nav (paneles / menú) ]
   ========================================================================== */

.araweb-header {
	--araweb-accent: #f7941e;
	--araweb-header-bg: #ffffff;
	--araweb-header-link: #1a1a1a;
	--araweb-header-link-hover: var(--araweb-accent);
	--araweb-header-link-transparent: #ffffff; /* Color de enlaces/hamburguesa cuando el header está transparente (arriba). */
	--araweb-header-logo-h: 48px;
	--araweb-header-max: 1200px;

	/* Submenú de escritorio. */
	--araweb-submenu-bg: var(--araweb-header-bg);
	--araweb-submenu-text: var(--araweb-header-link);
	--araweb-submenu-text-hover: var(--araweb-header-link-hover);

	/* Estado "scrolled" (con o sin transparencia). Por defecto heredan los
	   colores normales del header, así que no cambian nada hasta que se
	   personalizan explícitamente desde los controles del widget. */
	--araweb-header-scroll-bg: var(--araweb-header-bg);
	--araweb-header-scroll-link: var(--araweb-header-link);
	--araweb-header-scroll-icon: var(--araweb-header-scroll-link);

	width: 100%;
	background: var(--araweb-header-bg);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
	z-index: 100000;
}

.araweb-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: var(--araweb-header-max);
	margin: 0 auto;
	padding: 12px 24px;
}

.araweb-header__bar {
	display: flex;
	align-items: center;
}

.araweb-header__logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.araweb-header__logo img {
	max-height: var(--araweb-header-logo-h);
	width: auto;
	height: auto;
}

/* Logo alternativo al hacer scroll (opcional). Si no se define, el logo
   principal ("--default") se muestra siempre y el bloque "--scroll" no existe
   en el DOM. Ambos bloques quedan dentro de .araweb-header__logo, así que
   heredan el tamaño máximo de la regla anterior. Se refuerza con !important
   porque algunos temas / el Kit de Elementor aplican reglas globales a
   todos los <img> que, si no, podrían pisar el display del swap. */
.araweb-header .araweb-header__logo .araweb-header__logo-img--scroll {
	display: none !important;
}

.araweb-header.is-scrolled .araweb-header__logo .araweb-header__logo-img--default {
	display: none !important;
}

.araweb-header.is-scrolled .araweb-header__logo .araweb-header__logo-img--scroll {
	display: inline-block !important;
}

/* --- Navegación (escritorio) --- */
.araweb-header__nav {
	display: flex;
	align-items: center;
	gap: 32px;
	margin-left: auto;
}

/* En escritorio nav/paneles no maquetan: el <ul> del menú y los botones fluyen
   como hermanos directos del inner, para poder alinear el menú con auto-márgenes. */
.araweb-header:not(.is-mobile) .araweb-header__nav,
.araweb-header:not(.is-mobile) .araweb-header__panel[data-panel="menu"],
.araweb-header:not(.is-mobile) .araweb-header__panel-menu {
	display: contents;
}

.araweb-header:not(.is-mobile) .araweb-header__panel[data-panel="contact"] {
	display: none;
}

/* Alineación del menú en escritorio (auto-márgenes sobre el <ul>).
   Por defecto a la derecha; los botones quedan siempre al extremo. */
.araweb-header:not(.is-mobile) .araweb-header__menu {
	margin-left: auto;
}

.araweb-header--menu-left:not(.is-mobile) .araweb-header__menu {
	margin-left: 0;
	margin-right: auto;
}

.araweb-header--menu-center:not(.is-mobile) .araweb-header__menu {
	margin-left: auto;
	margin-right: auto;
}

.araweb-header--menu-right:not(.is-mobile) .araweb-header__menu {
	margin-left: auto;
	margin-right: 0;
}

.araweb-header__menu {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* "position:relative" en los <li> es necesario para el dropdown de
   escritorio (el submenú se posiciona respecto a su <li> ahí). Escopado
   solo a escritorio: en móvil convertía cada <li> en un contenedor de
   posicionamiento más cercano que el <ul> raíz, así que el submenú (que
   necesita ocupar toda la pantalla) se encogía al tamaño de una sola línea
   de texto en vez de a pantalla completa. */
.araweb-header:not(.is-mobile) .araweb-header__menu li {
	position: relative;
}

.araweb-header.is-mobile .araweb-header__menu li {
	position: static;
}

.araweb-header__menu a {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--araweb-header-link);
	font-weight: 500;
	transition: color 0.2s ease;
}

.araweb-header__menu a:hover {
	color: var(--araweb-header-link-hover);
}

.araweb-header__menu .current-menu-item > a {
	color: #9aa0a6; /* Página actual (en gris). */
}

/* Flecha de submenú, en cualquier nivel que tenga hijos (no solo el primero).
   Se pinta con un pseudo-elemento en vez de tocar el Walker de WordPress para
   inyectar markup extra; usa currentColor para heredar automáticamente
   cualquier color del enlace (hover, scroll, transparente...). Por defecto
   apunta hacia abajo (dropdown/drill-down de primer nivel); los flyouts
   anidados de escritorio la sobrescriben para apuntar al lado por el que
   realmente se abren. */
.araweb-header__menu li.menu-item-has-children > a::after {
	content: "";
	display: inline-block; /* Sin esto, width/height no aplican (::after es "inline" por defecto). */
	width: 7px;
	height: 7px;
	margin-left: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.25s ease;
	flex-shrink: 0;
}

/* Escritorio, primer nivel: el hover que abre el dropdown gira la flecha hacia arriba. */
.araweb-header:not(.is-mobile) .araweb-header__menu > li.menu-item-has-children:hover > a::after {
	transform: rotate(225deg);
}

/* Escritorio, niveles anidados: el submenú se abre en flyout lateral (no debajo),
   así que la flecha apunta hacia la derecha; si no cabe y se abre hacia la
   izquierda (ver .araweb-submenu--flip más abajo, calculado por JS), apunta
   hacia la izquierda en vez de rotar al "abrir" como el resto de niveles. */
.araweb-header:not(.is-mobile) .araweb-header__menu .sub-menu li.menu-item-has-children > a::after {
	transform: rotate(-45deg);
}

.araweb-header:not(.is-mobile) .araweb-header__menu .sub-menu li.menu-item-has-children:has(> .sub-menu.araweb-submenu--flip) > a::after {
	transform: rotate(135deg);
}

/* Móvil: gira mientras el drill-down de ese nivel está abierto (cualquier profundidad). */
.araweb-header.is-mobile .araweb-header__menu li.menu-item-has-children:has(> .sub-menu.is-active) > a::after {
	transform: rotate(225deg);
}

/* Dropdown de escritorio para items con hijos. */
.araweb-header:not(.is-mobile) .araweb-header__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	margin: 10px 0 0; /* Pequeña separación respecto al elemento del que sale. */
	min-width: 210px;
	padding: 8px 0;
	list-style: none;
	background: var(--araweb-submenu-bg);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	border-radius: 6px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 10;
}

/* Si no cabe a la derecha del viewport, el JS mide el hueco disponible y
   añade esta clase para anclar el dropdown al borde derecho del item en vez
   de al izquierdo (evita que se salga de la pantalla en menús alineados a
   la derecha o en viewports estrechos). */
.araweb-header:not(.is-mobile) .araweb-header__menu > li > .sub-menu.araweb-submenu--flip {
	left: auto;
	right: 0;
}

.araweb-header:not(.is-mobile) .araweb-header__menu .sub-menu .sub-menu {
	top: 0;
	left: 100%;
	margin: 0 0 0 10px; /* Separación horizontal en submenús anidados (flyout). */
}

/* Mismo mecanismo que arriba, pero para el flyout lateral: si no cabe a la
   derecha se abre hacia la izquierda del nivel anterior. */
.araweb-header:not(.is-mobile) .araweb-header__menu .sub-menu .sub-menu.araweb-submenu--flip {
	left: auto;
	right: 100%;
	margin: 0 10px 0 0;
}

/* Puente invisible que rellena el hueco entre el item y su submenú, para que
   el hover no se pierda al mover el ratón sobre la separación. */
.araweb-header:not(.is-mobile) .araweb-header__menu li.menu-item-has-children > a::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 10px;
}

.araweb-header:not(.is-mobile) .araweb-header__menu .sub-menu li.menu-item-has-children > a::before {
	left: auto;
	right: -10px;
	top: 0;
	bottom: 0;
	width: 10px;
	height: auto;
}

/* Con el flyout volcado a la izquierda, el puente va al lado contrario. */
.araweb-header:not(.is-mobile) .araweb-header__menu .sub-menu li.menu-item-has-children:has(> .sub-menu.araweb-submenu--flip) > a::before {
	left: -10px;
	right: auto;
}

.araweb-header:not(.is-mobile) .araweb-header__menu li:hover > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.araweb-header:not(.is-mobile) .araweb-header__menu .sub-menu a {
	display: block;
	padding: 8px 18px;
	white-space: nowrap;
	color: var(--araweb-submenu-text);
}

.araweb-header:not(.is-mobile) .araweb-header__menu .sub-menu a:hover {
	color: var(--araweb-submenu-text-hover);
}

/* --- Botones --- */
.araweb-header__buttons {
	display: flex;
	align-items: center;
	gap: 12px;
}

.araweb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1;
	border: 2px solid transparent;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.araweb-btn--primary { background: var(--araweb-accent); color: #fff; }
.araweb-btn--primary:hover { filter: brightness(0.92); }
.araweb-btn--secondary { background: var(--araweb-header-link); color: #fff; }
.araweb-btn--secondary:hover { filter: brightness(1.2); }
.araweb-btn--outline { background: transparent; color: var(--araweb-accent); border-color: currentColor; }
.araweb-btn--outline:hover { background: var(--araweb-accent); color: #fff; }

/* Estilo "Personalizado": colores propios (fondo, borde, texto) definidos por
   variables CSS inline desde el widget, en estado normal y hover. Si algún
   color no se define, el fallback es un botón sólido con el acento del sitio
   (nunca transparente/heredado sin más), para que no pueda quedar invisible
   mientras no se termine de configurar. */
.araweb-btn--custom {
	background: var(--araweb-btn-bg, var(--araweb-accent));
	color: var(--araweb-btn-text, #ffffff);
	border-color: var(--araweb-btn-border, transparent);
}

.araweb-btn--custom:hover {
	background: var(--araweb-btn-bg-hover, var(--araweb-btn-bg, var(--araweb-accent)));
	color: var(--araweb-btn-text-hover, var(--araweb-btn-text, #ffffff));
	border-color: var(--araweb-btn-border-hover, var(--araweb-btn-border, transparent));
}

/* Colores del botón personalizado con el header en scroll. Si no se definen,
   caen en cascada sobre los colores normales/hover de arriba (nunca vacío). */
.araweb-header.is-scrolled .araweb-btn--custom {
	background: var(--araweb-btn-bg-scroll, var(--araweb-btn-bg, var(--araweb-accent)));
	color: var(--araweb-btn-text-scroll, var(--araweb-btn-text, #ffffff));
	border-color: var(--araweb-btn-border-scroll, var(--araweb-btn-border, transparent));
}

.araweb-header.is-scrolled .araweb-btn--custom:hover {
	background: var(--araweb-btn-bg-scroll-hover, var(--araweb-btn-bg-scroll, var(--araweb-btn-bg-hover, var(--araweb-btn-bg, var(--araweb-accent)))));
	color: var(--araweb-btn-text-scroll-hover, var(--araweb-btn-text-scroll, var(--araweb-btn-text-hover, var(--araweb-btn-text, #ffffff))));
	border-color: var(--araweb-btn-border-scroll-hover, var(--araweb-btn-border-scroll, var(--araweb-btn-border-hover, var(--araweb-btn-border, transparent))));
}

/* --- Sticky / Transparente --- */
.araweb-header--sticky {
	position: sticky;
	top: 0;
}

.araweb-header--transparent {
	position: absolute;
	left: 0;
	background: transparent;
	box-shadow: none;
}

/* Estado transparente (arriba): color propio. En móvil NO se aplica a los
   enlaces, porque el overlay es blanco y quedarían invisibles; ahí mandan
   las variables --araweb-header-link. La hamburguesa sí se mantiene clara. */
.araweb-header--transparent:not(.is-mobile) .araweb-header__menu a,
.araweb-header--transparent .araweb-header__toggle span {
	color: var(--araweb-header-link-transparent);
}

.araweb-header--transparent .araweb-header__toggle span {
	background: var(--araweb-header-link-transparent);
}

.araweb-header--transparent.is-scrolled {
	position: fixed;
	background: var(--araweb-header-scroll-bg);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.araweb-header--transparent.is-scrolled .araweb-header__menu a {
	color: var(--araweb-header-scroll-link);
}

.araweb-header--transparent.is-scrolled .araweb-header__toggle span {
	background: var(--araweb-header-scroll-icon);
}

/* Header NO transparente: el fondo/enlaces/icono al hacer scroll solo cambian
   si se han personalizado esos colores en el widget (por defecto heredan los
   colores normales, así que no hay ningún cambio visual salvo que se editen). */
.araweb-header:not(.araweb-header--transparent).is-scrolled {
	background: var(--araweb-header-scroll-bg);
}

.araweb-header:not(.araweb-header--transparent).is-scrolled .araweb-header__menu a {
	color: var(--araweb-header-scroll-link);
}

.araweb-header:not(.araweb-header--transparent).is-scrolled .araweb-header__toggle span {
	background: var(--araweb-header-scroll-icon);
}

/* --- Botón hamburguesa --- */
/* Doble clase para ganar al estilo global de botones del Kit de Elementor
   (.elementor-kit-NN button), que si no inyecta fondo, borde y tipografía. */
.araweb-header .araweb-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 8px;
	background: none;
	border: 0;
	border-radius: 0;
	color: inherit;
	font: inherit;
	line-height: normal;
	box-shadow: none;
	cursor: pointer;
}

.araweb-header .araweb-header__toggle:focus,
.araweb-header .araweb-header__toggle:focus-visible {
	outline: none;
	background: none;
	box-shadow: none;
}

.araweb-header__toggle span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--araweb-header-link);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Pestañas: ocultas en escritorio. */
.araweb-header__tabs {
	display: none;
}

/* ==========================================================================
   MODO MÓVIL  (.is-mobile, activado por JS según el breakpoint)
   ========================================================================== */

/* La barra ocupa todo el ancho: logo a la izquierda, hamburguesa a la derecha. */
.araweb-header.is-mobile .araweb-header__bar {
	flex: 1;
	justify-content: space-between;
}

.araweb-header.is-mobile .araweb-header__toggle {
	display: flex;
}

/* Botones en móvil: anclados al fondo del panel del menú, debajo de la lista. */
.araweb-header.is-mobile .araweb-header__buttons {
	flex: 0 0 auto;
	flex-direction: column;
	gap: 12px;
	padding: 20px 24px calc(20px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid #eee;
	background: #ffffff;
}

.araweb-header.is-mobile .araweb-header__buttons .araweb-btn {
	width: 100%;
}

/* En móvil el botón siempre se ve como el "Primario" del tema (fondo con el
   color de acento, texto blanco), sea cual sea el estilo elegido en los
   ajustes del widget (Primario/Secundario/Contorno/Personalizado). Se
   ignoran tanto los presets como cualquier color personalizado (incluidos
   los de scroll), tanto en normal como en hover. */
.araweb-header.is-mobile .araweb-header__buttons .araweb-btn,
.araweb-header.is-mobile .araweb-header__buttons .araweb-btn:hover,
.araweb-header.is-mobile.is-scrolled .araweb-header__buttons .araweb-btn,
.araweb-header.is-mobile.is-scrolled .araweb-header__buttons .araweb-btn:hover {
	background: var(--araweb-accent) !important;
	color: #ffffff !important;
	border-color: transparent !important;
	filter: none !important;
}

/* Overlay cerrado: paneles ocultos. */
.araweb-header.is-mobile .araweb-header__nav {
	display: none;
}

/* --- Overlay ABIERTO: pantalla completa en blanco ---
   Altura explícita en vh + dvh (con fallback progresivo): "inset:0" solo con
   position:fixed puede desbordar la altura visible real en móvil, porque el
   navegador reserva espacio para su barra de direcciones dinámica. dvh sí
   se ajusta a la zona visible, evitando que el contenido quede recortado o
   que aparezca un scroll "fantasma" del propio overlay. */
.araweb-header.is-mobile.is-open .araweb-header__inner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 100vh;
	height: 100dvh;
	max-width: none;
	margin: 0;
	padding: 0;
	gap: 0;
	flex-direction: column;
	align-items: stretch;
	background: #ffffff;
	z-index: 99999;
}

/* Barra superior del overlay (respeta el notch/isla dinámica en iOS). */
.araweb-header.is-mobile.is-open .araweb-header__bar {
	flex: 0 0 auto;
	height: calc(64px + env(safe-area-inset-top, 0px));
	padding-top: env(safe-area-inset-top, 0px);
	align-items: stretch;
	border-bottom: 1px solid #eee;
	box-sizing: border-box;
}

.araweb-header.is-mobile.is-open .araweb-header__logo {
	display: none;
}

.araweb-header.is-mobile.is-open .araweb-header__tabs {
	display: flex;
	flex: 1;
}

/* Doble clase + reset del foco para ganar a `.elementor-kit-NN button` y a
   button:focus del Kit (si no, el fondo se va a blanco al pulsar). */
.araweb-header .araweb-header__tab {
	flex: 1;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--araweb-header-link);
	cursor: pointer;
}

.araweb-header .araweb-header__tab:focus,
.araweb-header .araweb-header__tab:focus-visible {
	outline: none;
	box-shadow: none;
}

.araweb-header .araweb-header__tab.is-active {
	background: var(--araweb-accent);
	color: #ffffff;
}

.araweb-header.is-mobile.is-open .araweb-header__toggle {
	width: 64px;
	height: 64px;
	flex: 0 0 64px;
}

/* Hamburguesa -> X (siempre con color oscuro en el overlay blanco). */
.araweb-header.is-open .araweb-header__toggle span {
	background: var(--araweb-header-link);
}

.araweb-header.is-open .araweb-header__toggle span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.araweb-header.is-open .araweb-header__toggle span:nth-child(2) {
	opacity: 0;
}

.araweb-header.is-open .araweb-header__toggle span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Zona de paneles. */
.araweb-header.is-mobile.is-open .araweb-header__nav {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
}

.araweb-header.is-mobile .araweb-header__panel {
	display: none;
}

.araweb-header.is-mobile.is-open .araweb-header__panel.is-active {
	display: flex;
	flex: 1;
	flex-direction: column;
	overflow: hidden;
	width: 100%;
}

/* --- Panel MENÚ con drill-down --- */
.araweb-header.is-mobile .araweb-header__panel-menu {
	position: relative;
	flex: 1;
	overflow: hidden;
}

.araweb-header.is-mobile .araweb-header__menu,
.araweb-header.is-mobile .araweb-header__menu .sub-menu {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 32px 24px calc(32px + env(safe-area-inset-bottom, 0px));
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	overflow-y: auto;
	overscroll-behavior: contain; /* No arrastra el scroll al fondo de la página. */
	-webkit-overflow-scrolling: touch; /* Inercia suave en iOS. */
	scrollbar-width: none; /* Firefox: oculta la barra de scroll nativa. */
	background: #ffffff;
	transform: translateX(100%);
	transition: transform 0.3s ease;
}

/* Oculta la barra de scroll nativa en navegadores WebKit/Blink, para un
   acabado más limpio (el propio gesto de scroll sigue funcionando igual). */
.araweb-header.is-mobile .araweb-header__menu::-webkit-scrollbar,
.araweb-header.is-mobile .araweb-header__menu .sub-menu::-webkit-scrollbar {
	display: none;
}

.araweb-header.is-mobile .araweb-header__menu {
	transform: translateX(0); /* El nivel raíz siempre visible detrás. */
	z-index: 1;
}

/* El submenú activo se desliza encima del nivel anterior y, al tener fondo
   opaco, lo tapa visualmente sin necesidad de ocultar nada más: no hace
   falta ningún truco de "visibility" (que además se hereda y puede acabar
   ocultando también el propio submenú activo si no se tiene cuidado).
   z-index explícito por seguridad, para garantizar que siempre queda por
   encima del nivel anterior. */
.araweb-header.is-mobile .araweb-header__menu .sub-menu.is-active {
	transform: translateX(0);
	z-index: 2;
}

.araweb-header.is-mobile .araweb-header__menu li {
	width: 100%;
	text-align: center;
}

.araweb-header.is-mobile .araweb-header__menu a {
	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Botón "volver" inyectado por JS: fijado arriba del listado, alineado a la
   izquierda y separado del resto con una línea, para que no se confunda con
   un ítem más del menú (que van centrados y en mayúsculas). Especificidad
   igualada a la regla de los <li> normales para poder anular su centrado. */
.araweb-header.is-mobile .araweb-header__menu .araweb-nav__back-item {
	align-self: stretch;
	width: 100%;
	text-align: left;
	padding-bottom: 18px;
	margin-bottom: 4px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.araweb-header .araweb-nav__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--araweb-accent);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: normal;
	text-transform: uppercase;
	cursor: pointer;
}

.araweb-header .araweb-nav__back:focus,
.araweb-header .araweb-nav__back:focus-visible {
	outline: none;
	box-shadow: none;
}

/* --- Panel CONTACTO --- */
.araweb-header.is-mobile.is-open .araweb-header__panel[data-panel="contact"].is-active {
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.araweb-header.is-mobile.is-open .araweb-header__panel[data-panel="contact"].is-active::-webkit-scrollbar {
	display: none;
}

.araweb-contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 32px 24px calc(32px + env(safe-area-inset-bottom, 0px));
}

.araweb-contact__card {
	width: 100%;
	max-width: 340px;
	padding: 22px;
	text-align: center;
	border: 1px solid var(--araweb-accent);
	border-radius: 6px;
}

.araweb-contact__icon {
	display: inline-flex;
	color: var(--araweb-accent);
}

.araweb-contact__card h3 {
	margin: 10px 0 6px;
	font-size: 18px;
	color: var(--araweb-header-link);
}

.araweb-contact__card p {
	margin: 0;
	color: #444;
	line-height: 1.6;
}

.araweb-contact__card a {
	color: inherit;
	text-decoration: none;
}

.araweb-contact__social {
	display: flex;
	gap: 16px;
	margin-top: 8px;
}

.araweb-contact__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--araweb-accent);
	color: #fff;
}

/* Bloqueo de scroll del body con el overlay abierto.
   position:fixed (en vez de solo overflow:hidden) es la técnica fiable en
   iOS/Safari; el "top" negativo que compensa la posición lo pone el JS. */
body.araweb-no-scroll {
	position: fixed;
	left: 0;
	right: 0;
	overflow: hidden;
}

/* ==========================================================================
   Editor de Elementor: nunca fijo/absoluto, para no solaparse.
   ========================================================================== */
.elementor-editor-active .araweb-header--sticky,
.elementor-editor-active .araweb-header--transparent,
.elementor-editor-active .araweb-header--transparent.is-scrolled {
	position: relative !important;
}

.elementor-editor-active .araweb-header--transparent {
	background: var(--araweb-header-bg);
}

.elementor-editor-active .araweb-header--transparent .araweb-header__menu a,
.elementor-editor-active .araweb-header--transparent .araweb-header__toggle span {
	color: var(--araweb-header-link);
}

.elementor-editor-active .araweb-header--transparent .araweb-header__toggle span {
	background: var(--araweb-header-link);
}

/* Aviso de "selecciona un menú", solo en el editor. */
.araweb-header__hint {
	margin: 0;
	padding: 8px 12px;
	font-size: 13px;
	color: #b26a00;
	background: #fff8e5;
	border: 1px dashed #dba617;
	border-radius: 4px;
}