/*
 * Capa de interacción.
 *
 * Todo lo de aquí es opcional para que la tienda funcione, y por eso todo
 * degrada limpio: sin JavaScript, el botón de volver sigue siendo un enlace y
 * el contenido está visible sin esperar a ninguna animación.
 */

/* --------------------------------------------------------------------------
   Volver arriba
   -------------------------------------------------------------------------- */

.halo-totop {
	position: fixed;
	right: var(--wp--preset--spacing--40);
	bottom: var(--wp--preset--spacing--40);
	z-index: 90;
	display: grid;
	place-items: center;
	/* 48 px: por encima del mínimo táctil, sin llegar a tapar contenido. */
	width: 48px;
	height: 48px;
	padding: 0;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	color: var(--wp--preset--color--vapor);
	cursor: pointer;
	box-shadow: var(--wp--preset--shadow--lift);
	transition: background var(--wp--custom--transition--fast),
		border-color var(--wp--custom--transition--fast),
		transform var(--wp--custom--transition--fast);
}

.halo-totop:hover {
	background: var(--wp--preset--color--elevated);
	border-color: var(--wp--preset--color--crimson);
	transform: translateY(-2px);
}

.halo-totop[hidden] { display: none; }

/*
 * En móvil sube por encima de la barra de compra fija de la ficha de producto.
 * Si no, se solapan justo donde el pulgar llega, y el cliente pulsa «volver
 * arriba» cuando quería añadir al carrito.
 */
@media (max-width: 782px) {
	.halo-totop {
		right: var(--wp--preset--spacing--30);
		bottom: calc(var(--wp--preset--spacing--30) + 72px);
		width: 44px;
		height: 44px;
	}
}

/* --------------------------------------------------------------------------
   Volver atrás
   -------------------------------------------------------------------------- */

/*
 * Va dentro del flujo del contenido, no flotando. Pertenece a la lectura de la
 * ficha, no a la interfaz global: flotando competiría con el botón de comprar.
 */
.halo-back {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: 44px;
	margin-bottom: var(--wp--preset--spacing--30);
	padding: 0 var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--20);
	border-radius: 8px;
	color: var(--wp--preset--color--smoke);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	transition: color var(--wp--custom--transition--fast),
		background var(--wp--custom--transition--fast);
}

.halo-back:hover {
	background: var(--wp--preset--color--elevated);
	color: var(--wp--preset--color--vapor);
}

/* La flecha se adelanta un poco al pasar el cursor: la microinteracción que
   confirma la dirección antes de pulsar. */
.halo-back .halo-icon {
	transition: transform var(--wp--custom--transition--fast);
}

.halo-back:hover .halo-icon { transform: translateX(-3px); }

/* --------------------------------------------------------------------------
   Compartir
   -------------------------------------------------------------------------- */

.halo-share {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--40);
	background: transparent;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	color: var(--wp--preset--color--smoke);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
	transition: border-color var(--wp--custom--transition--fast),
		color var(--wp--custom--transition--fast);
}

.halo-share:hover {
	border-color: var(--wp--preset--color--smoke);
	color: var(--wp--preset--color--vapor);
}

.halo-share.is-done {
	border-color: var(--wp--preset--color--success);
	color: var(--wp--preset--color--success);
}

/* --------------------------------------------------------------------------
   Aparición al desplazar
   -------------------------------------------------------------------------- */

/*
 * Muy contenida a propósito: 14 px de recorrido y 420 ms. Una tienda donde todo
 * entra volando se vuelve agotadora al tercer scroll, y el movimiento deja de
 * dirigir la mirada para pasar a estorbarla.
 *
 * La clase se añade desde JavaScript. Si el script no carga, el contenido está
 * visible desde el principio — que es exactamente el comportamiento correcto.
 */
.halo-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
	/* Avisa al navegador de qué va a cambiar, para que prepare la capa y la
	   animación no salte en el primer fotograma. */
	will-change: opacity, transform;
}

.halo-reveal.is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/*
 * Escalonado dentro de una misma rejilla. Cuatro tarjetas entrando a la vez se
 * leen como un bloque; entrando con 60 ms de diferencia se leen como una
 * secuencia, y el ojo las recorre en orden.
 *
 * Se corta en el sexto: más allá, el retraso acumulado se percibe como lentitud.
 */
.halo-grid .halo-reveal:nth-child(2),
.halo-cats .halo-reveal:nth-child(2),
.halo-brands .halo-reveal:nth-child(2) { transition-delay: 60ms; }

.halo-grid .halo-reveal:nth-child(3),
.halo-cats .halo-reveal:nth-child(3),
.halo-brands .halo-reveal:nth-child(3) { transition-delay: 120ms; }

.halo-grid .halo-reveal:nth-child(4),
.halo-cats .halo-reveal:nth-child(4),
.halo-brands .halo-reveal:nth-child(4) { transition-delay: 180ms; }

.halo-grid .halo-reveal:nth-child(5),
.halo-cats .halo-reveal:nth-child(5) { transition-delay: 240ms; }

.halo-grid .halo-reveal:nth-child(n + 6),
.halo-cats .halo-reveal:nth-child(n + 6) { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
	.halo-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Microinteracciones de botón
   -------------------------------------------------------------------------- */

/*
 * El hundimiento al pulsar. Es el detalle que hace que un botón se sienta
 * físico: sin él, pulsar en móvil no devuelve ninguna señal de que el toque
 * llegó, y el cliente vuelve a pulsar.
 */
.halo-btn,
.halo-agegate__yes,
.wp-element-button,
.halo-store__stock {
	transition: background var(--wp--custom--transition--fast),
		transform 90ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow var(--wp--custom--transition--fast);
}

.halo-btn:active,
.halo-agegate__yes:active,
.wp-element-button:active,
.halo-store__stock:active {
	transform: scale(0.975);
}

@media (prefers-reduced-motion: reduce) {
	.halo-btn:active,
	.halo-agegate__yes:active,
	.wp-element-button:active,
	.halo-store__stock:active { transform: none; }
}

/* --------------------------------------------------------------------------
   Carrusel de la apertura
   -------------------------------------------------------------------------- */

.halo-hero--image {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 68vh;
	justify-content: center;
	/*
	 * El ancho completo lo resuelve la clase `alignfull` que emite WordPress,
	 * no un truco de 100vw con margenes negativos.
	 *
	 * El truco fallaba por una razon concreta: 100vw incluye el ancho de la
	 * barra de desplazamiento, asi que en cualquier pagina con scroll vertical
	 * el elemento sobresalia unos pixeles y aparecia scroll HORIZONTAL. Una
	 * tienda que se desplaza de lado se siente rota aunque todo lo demas este
	 * bien.
	 */
	padding-left: 0;
	padding-right: 0;
}

.halo-hero__slides {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.halo-hero__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	/* Fundido largo. Un corte seco entre fotografías se lee como un fallo de
	   carga; 1,2 s se lee como una decisión. */
	transition: opacity 1200ms ease-in-out;
}

.halo-hero__slide.is-active { opacity: 1; }

/*
 * El velo va en capa propia, no como degradado sobre cada imagen. Así el mismo
 * oscurecido se aplica a las cinco sin repetir estilos, y el titular se lee
 * igual con una fotografía clara que con una oscura — que es justo lo que falla
 * cuando se confía en que las fotos vengan bien expuestas.
 */
.halo-hero__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		rgba(11, 9, 8, 0.5) 0%,
		rgba(11, 9, 8, 0.78) 55%,
		rgba(11, 9, 8, 0.95) 100%
	);
}

.halo-hero__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	position: relative;
	/* El texto si va contenido: la imagen llega al borde, la linea de lectura
	   no. Un titular de pared a pared es ilegible en pantalla ancha.
	   
	   El ancho NO se escribe aqui. Sale de theme.json, que es la unica fuente
	   de la que come el resto del sitio; asi el titular del hero cae en la
	   misma columna que el catalogo de abajo en cualquier pantalla.
	   
	   Se le suma el relleno propio porque el hero va a sangre y los demas
	   contenedores viven ya dentro del relleno de la pagina. Sin ese ajuste
	   el texto del hero quedaria metido hacia dentro respecto al resto. */
	width: 100%;
	max-width: calc(
		var(--wp--style--global--wide-size, 1280px) +
		var(--wp--preset--spacing--50) * 2
	);
	margin: 0 auto;
	padding: 0 var(--wp--preset--spacing--50);
}

@media (prefers-reduced-motion: reduce) {
	/* Sin rotación automática. Sólo se ve la primera. */
	.halo-hero__slide { transition: none; }
}

@media (max-width: 782px) {
	.halo-hero--image { min-height: 76vh; }

	.halo-hero__body { padding: 0 var(--wp--preset--spacing--40); }
}

/* --------------------------------------------------------------------------
   Valoraciones
   -------------------------------------------------------------------------- */

.halo-rating {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.halo-rating__star {
	display: inline-flex;
	color: var(--wp--preset--color--line);
}

/*
 * La estrella marcada se rellena además de cambiar de color. Sólo con color,
 * quien no distingue el ámbar del gris no ve ninguna diferencia entre tres
 * estrellas y cinco.
 */
.halo-rating__star.is-on {
	color: var(--wp--preset--color--warning);
}

.halo-rating__star.is-on .halo-icon {
	fill: currentColor;
}

.halo-rating .halo-icon {
	width: 15px;
	height: 15px;
	stroke-width: 1.4;
}

/* El número junto a las estrellas: cinco estrellas con una reseña y cinco con
   doscientas se ven igual de lejos, y no valen lo mismo. */
.halo-rating b {
	margin-left: 6px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 400;
	color: var(--wp--preset--color--smoke);
}

.halo-product-card .halo-rating {
	padding: 0 var(--wp--preset--spacing--40);
}

/* --------------------------------------------------------------------------
   Franja de opiniones
   -------------------------------------------------------------------------- */

.halo-reviews {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.halo-review {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
}

.halo-review blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.halo-review figcaption {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: auto;
	font-size: var(--wp--preset--font-size--micro);
}

.halo-review figcaption strong { font-weight: 700; }

.halo-review figcaption a {
	color: var(--wp--preset--color--smoke);
	text-decoration: none;
}

.halo-review figcaption a:hover { color: var(--wp--preset--color--crimson-300); }

/* ===========================================================================
   WhatsApp flotante
   ===========================================================================

   Va abajo a la izquierda. La derecha esta ocupada por el boton de volver
   arriba, y en ficha de producto por la barra de compra del movil: apilar tres
   controles en la misma esquina termina en que el cliente pulsa el que no
   queria justo cuando iba a comprar.

   El color es el de WhatsApp, no el de la marca. Un boton de chat verde se
   reconoce sin leerlo; pintado de carmesi se confunde con «comprar».
   =========================================================================== */

.halo-wa {
	position: fixed;
	left: clamp(16px, 3vw, 28px);
	bottom: clamp(16px, 3vw, 28px);
	z-index: 60;

	display: inline-flex;
	align-items: center;
	gap: 0;

	padding: 12px;
	border-radius: 999px;

	background: #25D366;
	color: #0B0908;
	text-decoration: none;

	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
	transition: gap 220ms ease, padding 220ms ease, transform 220ms ease;
}

.halo-wa svg {
	width: 26px;
	height: 26px;
	flex: none;
}

/* La etiqueta se despliega al pasar por encima. En reposo es solo el icono
   —ocupa poco y no tapa contenido—, y al acercarse dice que hace. */
.halo-wa__label {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	font-size: 0.9rem;
	font-weight: 600;
	transition: max-width 260ms ease;
}

.halo-wa:hover,
.halo-wa:focus-visible {
	gap: 8px;
	padding-right: 18px;
	color: #0B0908;
}

.halo-wa:hover .halo-wa__label,
.halo-wa:focus-visible .halo-wa__label {
	max-width: 10rem;
}

.halo-wa:focus-visible {
	outline: 2px solid var(--wp--preset--color--vapor);
	outline-offset: 3px;
}

/* En movil no hay «pasar por encima», asi que la etiqueta no se desplegaria
   nunca: se queda solo el circulo, que es lo esperable en un telefono. */
@media (max-width: 782px) {
	.halo-wa {
		bottom: 84px; /* Por encima de la barra de compra. */
	}
}

@media (prefers-reduced-motion: reduce) {
	.halo-wa,
	.halo-wa__label { transition: none; }
}

/* ===========================================================================
   Barra de progreso de lectura
   =========================================================================== */

.halo-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 70;
	background: transparent;
	pointer-events: none;
}

.halo-progress__bar {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--crimson-900, #7A1414),
		var(--wp--preset--color--crimson-300, #FF6156)
	);
	/* Sin transicion: la barra sigue al dedo. Una interpolacion de 200 ms se
	   percibe como retraso, no como suavidad. */
}

/* ===========================================================================
   Redes sociales
   =========================================================================== */

.halo-social {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
}

.halo-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--smoke);
	transition: color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.halo-social a:hover,
.halo-social a:focus-visible {
	color: var(--wp--preset--color--vapor);
	border-color: var(--wp--preset--color--crimson);
	transform: translateY(-2px);
}

.halo-social svg {
	width: 20px;
	height: 20px;
}

@media (prefers-reduced-motion: reduce) {
	.halo-social a { transition: color 180ms ease, border-color 180ms ease; }
	.halo-social a:hover { transform: none; }
}