/**
 * INARQO · Header sticky + botón "subir arriba"
 *
 * - El header (Elementor: .elementor-location-header) se queda fijo arriba
 *   al hacer scroll, con animaciones suaves de entrada/salida según la
 *   dirección del scroll.
 * - Se inserta un botón circular flotante "ir arriba" en la esquina inferior
 *   derecha (#inarqo-totop).
 *
 * Las clases las gestiona header-scroll.js:
 *   .is-inarqo-sticky        → header en posición fija (always while scrolled).
 *   .is-inarqo-elevated      → ha bajado del umbral (sombra + fondo opaco).
 *   .is-inarqo-hidden        → desaparece (al bajar scroll).
 *   .is-inarqo-revealed      → reaparece (al subir scroll).
 */

/* Reserva el espacio que ocupaba el header al volverse fixed para que el
   contenido no salte. El JS calcula el valor y lo pone en --inarqo-h-h. */
body.has-inarqo-sticky {
	--inarqo-h-h: 0px;
}

body.has-inarqo-sticky::before {
	content: "";
	display: block;
	height: var(--inarqo-h-h, 0px);
	pointer-events: none;
}

/* —— Header sticky —— */
.elementor-location-header.is-inarqo-sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 9998;
	will-change: transform, opacity, backdrop-filter;
	transition:
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		background-color 0.35s ease,
		box-shadow 0.35s ease,
		backdrop-filter 0.35s ease;
}

/* Estado elevado: el header lleva un fondo translúcido y una sombra muy sutil
   en cuanto pasamos del umbral, aunque siga visible. Solo aplica a hijos
   directos para no contaminar widgets internos. */
.elementor-location-header.is-inarqo-sticky.is-inarqo-elevated {
	background-color: rgba(255, 255, 255, 0.88);
	backdrop-filter: saturate(140%) blur(12px);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	box-shadow:
		0 1px 0 rgba(28, 28, 28, 0.05),
		0 12px 30px rgba(28, 28, 28, 0.08);
}

/* Animación de salida hacia arriba al bajar el scroll. */
.elementor-location-header.is-inarqo-sticky.is-inarqo-hidden {
	transform: translate3d(0, -110%, 0);
	opacity: 0;
	pointer-events: none;
}

/* Animación de entrada (slide-down) al subir el scroll. */
.elementor-location-header.is-inarqo-sticky.is-inarqo-revealed {
	transform: translate3d(0, 0, 0);
	opacity: 1;
}

/* Cuando el header todavía está en la posición original (sin scroll real)
   eliminamos cualquier transición para que no parpadee al entrar a la página. */
.elementor-location-header:not(.is-inarqo-sticky) {
	transition: none;
}

/* —— Botón "ir arriba" —— */
#inarqo-totop {
	--itp-bg: #1c1c1c;
	--itp-bg-hover: #475576;
	--itp-fg: #f7f6f3;
	--itp-sand: #c8aa72;
	--itp-shadow: rgba(28, 28, 28, 0.28);

	position: fixed;
	right: clamp(1rem, 3vw, 1.85rem);
	bottom: clamp(1rem, 3vw, 1.85rem);
	z-index: 9990;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(46px, 5vw, 54px);
	height: clamp(46px, 5vw, 54px);
	padding: 0;
	margin: 0;

	background: var(--itp-bg);
	color: var(--itp-fg);
	border: 1px solid rgba(247, 246, 243, 0.14);
	border-radius: 999px;
	cursor: pointer;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.08) inset,
		0 18px 36px var(--itp-shadow);

	opacity: 0;
	transform: translate3d(0, 18px, 0) scale(0.92);
	pointer-events: none;
	transition:
		opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		background-color 0.25s ease,
		box-shadow 0.25s ease;
}

#inarqo-totop.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
	pointer-events: auto;
}

#inarqo-totop:hover {
	background: var(--itp-bg-hover);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.1) inset,
		0 22px 44px var(--itp-shadow);
}

#inarqo-totop:active {
	transform: translate3d(0, 0, 0) scale(0.96);
}

#inarqo-totop:focus-visible {
	outline: 2px solid var(--itp-sand);
	outline-offset: 4px;
}

/* Icono SVG dentro del botón */
#inarqo-totop svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

#inarqo-totop:hover svg {
	transform: translateY(-2px);
}

/* Anillo decorativo de progreso (opcional, lo dibuja el JS con conic-gradient). */
#inarqo-totop::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: inherit;
	background: conic-gradient(var(--itp-sand) calc(var(--itp-progress, 0) * 1%), transparent 0);
	-webkit-mask:
		radial-gradient(circle, transparent calc(50% - 2px), #000 calc(50% - 1px));
	mask:
		radial-gradient(circle, transparent calc(50% - 2px), #000 calc(50% - 1px));
	opacity: 0.85;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

#inarqo-totop:not(.is-visible)::before {
	opacity: 0;
}

/* Texto accesible solo para lectores */
.inarqo-totop__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* —— Móvil —— */
@media (max-width: 600px) {
	#inarqo-totop {
		right: 0.9rem;
		bottom: 0.9rem;
		width: 46px;
		height: 46px;
	}

	#inarqo-totop svg {
		width: 20px;
		height: 20px;
	}
}

/* Cuando el banner de cookies está visible, sube el botón para no taparlo. */
.inarqo-cookies.is-visible ~ #inarqo-totop,
body:has(.inarqo-cookies.is-visible) #inarqo-totop {
	transform: translate3d(0, -120px, 0) scale(1);
}

@media (max-width: 600px) {
	body:has(.inarqo-cookies.is-visible) #inarqo-totop {
		transform: translate3d(0, -180px, 0) scale(1);
	}
}

/* —— Movimiento reducido —— */
@media (prefers-reduced-motion: reduce) {
	.elementor-location-header.is-inarqo-sticky,
	#inarqo-totop,
	#inarqo-totop svg,
	#inarqo-totop::before {
		transition: none !important;
	}

	.elementor-location-header.is-inarqo-sticky.is-inarqo-hidden {
		transform: none;
		opacity: 0;
	}
}