/* ─────────────────────────────────────────────────────────────────────
 *  Botón "volver arriba" — loriente.com (Playroom, 08-2026)
 * ─────────────────────────────────────────────────────────────────────
 *  Estilo tomado de los CTA que ya usa el sitio: radio de 15px y borde
 *  de 1px del color contrario (los botones claros del sitio llevan
 *  borde #1D1F2A y los oscuros borde blanco).
 *
 *  Por qué disco CLARO y no oscuro: el botón flota sobre fondos que no
 *  controlamos —hero azul, secciones crema y footer azul marino
 *  (#1D1F2A, casi el mismo tono que el color primario del kit)—. Un
 *  botón oscuro desaparecería justo en el footer, que es exactamente
 *  donde más falta hace. El disco claro con borde oscuro se lee sobre
 *  los tres fondos.
 * ───────────────────────────────────────────────────────────────────── */

.loriente-back-to-top {
	/* Colores del kit de Elementor: accent #F9F4ED y primary #1D1F2A. */
	--loriente-btt-fondo: #f9f4ed;
	--loriente-btt-tinta: #1d1f2a;
	--loriente-btt-lado: 48px; /* 48px > los 44px mínimos de WCAG 2.5.5 */

	position: fixed;
	right: 16px;
	/* env() protege el botón de la barra de gestos en iOS. */
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));

	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--loriente-btt-lado);
	height: var(--loriente-btt-lado);
	margin: 0;
	padding: 0;

	color: var(--loriente-btt-tinta);
	background-color: var(--loriente-btt-fondo);
	border: 1px solid var(--loriente-btt-tinta);
	border-radius: 15px;
	box-shadow: 0 4px 14px rgba(29, 31, 42, 0.18);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;

	/* Oculto de partida: lo enciende el JS al pasar el umbral de scroll.
	   visibility:hidden (y no solo opacity) lo saca también del orden de
	   tabulación y del árbol de accesibilidad mientras no se ve. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;

	/* Por debajo de Complianz (9998) a propósito: si el aviso de cookies
	   o su pestaña de "gestionar consentimiento" coinciden en la esquina,
	   manda el aviso legal. */
	z-index: 900;
}

.loriente-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.loriente-back-to-top:hover {
	background-color: #ffffff;
	box-shadow: 0 6px 18px rgba(29, 31, 42, 0.26);
}

/* Anillo de foco de dos tonos: el claro se ve sobre el footer oscuro y
   el oscuro sobre las secciones claras. Con un solo color, en uno de los
   dos fondos el foco sería invisible. */
.loriente-back-to-top:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--loriente-btt-fondo), 0 0 0 4px var(--loriente-btt-tinta);
}

.loriente-back-to-top__icono {
	display: block;
	width: 20px;
	height: 20px;
	pointer-events: none;
}

/* Mientras el aviso de cookies está abierto, el botón estorba: en móvil
   el banner de Complianz ocupa todo el ancho abajo. Además Complianz ya
   anula los pointer-events de todo lo que no sea el banner, así que sin
   esto quedaría un botón visible que no responde. */
body.cmplz-banner-active .loriente-back-to-top {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

@media (min-width: 769px) {
	.loriente-back-to-top {
		right: 24px;
		bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	}
}

/* Para dejarlo SOLO en móvil (que es el mínimo que pidió el cliente),
   descomentar este bloque. 768px es el corte de móvil de Elementor y el
   mismo en el que Complianz esconde su pestaña de consentimiento.
@media (min-width: 769px) {
	.loriente-back-to-top {
		display: none;
	}
}
*/

@media (prefers-reduced-motion: reduce) {
	.loriente-back-to-top {
		transition: none;
		transform: none;
	}

	.loriente-back-to-top.is-visible {
		transform: none;
	}
}

@media print {
	.loriente-back-to-top {
		display: none;
	}
}