/*
 * Boton flotante de WhatsApp y rotacion de fondos del heroe.
 *
 * El boton ya se emitia desde PHP, pero al reescribir el tema de cero se perdio
 * su hoja de estilos: quedaba como un enlace suelto al pie de la pagina. Esto
 * lo devuelve a ser un boton.
 */

/* --- Boton flotante --- */

.aw-wa-flotante {
	position: fixed;
	right: var(--wp--preset--spacing--30);
	bottom: var(--wp--preset--spacing--30);
	z-index: 45;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.85rem 1.15rem;
	border-radius: 999px;
	background: var(--wp--preset--color--verde);
	color: var(--wp--preset--color--negro);
	font-size: 0.88rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 10px 26px rgba(5, 8, 16, 0.26);
	transition:
		transform var(--toque) var(--sale),
		box-shadow var(--toque) var(--sale);
}

.aw-wa-flotante svg {
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
	fill: currentColor;
}

.aw-wa-flotante:active {
	transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
	.aw-wa-flotante:hover {
		transform: translateY(-2px);
		box-shadow: 0 14px 32px rgba(5, 8, 16, 0.32);
		background: var(--wp--preset--color--verde);
		color: var(--wp--preset--color--negro);
	}
}

/*
 * En telefono queda solo el icono: la palabra ocupa un cuarto del ancho de la
 * pantalla y el icono de WhatsApp ya se reconoce sin texto.
 */
@media (max-width: 599px) {
	.aw-wa-flotante {
		padding: 0.9rem;
	}

	.aw-wa-flotante__texto {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		white-space: nowrap;
	}
}

/*
 * En la ficha de producto la barra de compra vive abajo: el boton sube para no
 * taparle el precio ni el boton de comprar.
 */
@media (max-width: 899px) {
	body.single-product .aw-wa-flotante {
		bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px));
	}
}

/* --- Fondos del heroe que rotan --- */

/*
 * Las escenas se cruzan con una disolucion larga y quedan quietas un buen rato.
 * Es fondo, no espectaculo: si cambia rapido compite con el titular, que es lo
 * que hay que leer.
 *
 * Cada capa es un div propio con su foto, y no una sola capa cambiando de
 * background-image: cambiar la imagen de fondo no se puede animar, el navegador
 * la reemplaza de golpe y se ve el salto.
 */
.heroe__fondos {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.heroe__fondo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1600ms var(--premium, ease);
}

.heroe__fondo.esta {
	opacity: 1;
}

/*
 * Un acercamiento muy lento mientras la foto esta a la vista. Sin esto, entre
 * cambio y cambio la escena queda completamente muerta.
 */
@media (prefers-reduced-motion: no-preference) {
	.heroe__fondo.esta {
		animation: aw-acercar 14s linear forwards;
	}
}

@keyframes aw-acercar {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.06);
	}
}

/* Los puntos para saber cuantas escenas hay y en cual estamos. */
.heroe__puntos {
	position: absolute;
	left: max(var(--wp--preset--spacing--40), calc(50vw - 41rem));
	bottom: var(--wp--preset--spacing--40);
	z-index: 2;
	display: flex;
	gap: 0.45rem;
}

.heroe__punto {
	width: 2rem;
	height: 3px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(238, 244, 255, 0.28);
	cursor: pointer;
	transition: background-color var(--entra, 400ms) var(--premium, ease);
}

.heroe__punto[aria-current="true"] {
	background: var(--wp--preset--color--verde);
}

@media (max-width: 899px) {
	.heroe__puntos {
		left: var(--wp--preset--spacing--40);
		bottom: var(--wp--preset--spacing--30);
	}
}