/* ============================================================================
   Barra de compra fija en móvil — ficha de producto. 2026-08-31 · Gecko Studio

   POR QUE EXISTE
   El boton de compra quedaba fuera de la primera pantalla (y=851 con un viewport
   de 844) y, al elegir pack, se iba a y=1615 porque se despliega el bloque de
   suscripcion. Quien llega de una campana tenia que buscar el boton a dos
   pantallas de scroll. Recortar contenido no era opcion: la ficha esta aprobada.

   La barra es `position: fixed`, asi que NO genera saltos de maquetacion.
   ========================================================================= */

.kub-barra-compra {
	display: none;
}

@media (max-width: 999px) {

	.kub-barra-compra {
		position: fixed;
		z-index: 9400;
		left: 0;
		right: 0;
		bottom: 0;

		display: block;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));

		background: rgba(255, 255, 255, 0.96);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		border-top: 1px solid #e2ecee;
		box-shadow: 0 -6px 20px rgba(0, 50, 55, 0.10);

		transform: translateY(0);
		transition: transform .22s ease-out, opacity .22s ease-out;
	}

	/* Se aparta cuando el boton de verdad ya esta en pantalla: dos botones iguales
	   a la vez confunden y tapan contenido sin motivo. */
	.kub-barra-compra--oculta,
	/* Y mientras el aviso de cookies ocupa la parte de abajo, para no pelearse
	   con el por el mismo sitio. */
	.kub-barra-compra--esperando {
		transform: translateY(110%);
		opacity: 0;
		pointer-events: none;
	}

	/* El boton copia el estilo del real para que sea el mismo boton, no otro. */
	.kub-barra-compra__boton {
		display: block;
		width: 100%;
		margin: 0;
		padding: 15px 10px;

		border: 0;
		border-radius: 200px;
		background: #00828e;
		color: #fff;

		font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.2;
		text-align: center;
		cursor: pointer;
	}

	.kub-barra-compra__boton:focus-visible {
		outline: 3px solid #00636c;
		outline-offset: 2px;
	}

	/* Sin pack elegido el boton real esta desactivado; aqui se mantiene pulsable a
	   proposito, porque su trabajo entonces es llevar al selector. */
	.kub-barra-compra__boton--inactivo {
		background: #cfe3e5;
		color: #00636c;
	}

	/* Que la barra no tape el final de la pagina. */
	.single-product #footer-outer {
		padding-bottom: 84px;
	}
}

/* ---------------------------------------------------------------
 * El boton copia el HTML del real, que trae sus <span> (texto, separador y
 * precio). Pero el estilo de esos spans en producto.css cuelga de
 * `.single_add_to_cart_button`, asi que aqui no llegaba y el separador salia
 * pegado y a plena opacidad. Se replican esas dos reglas.
 * --------------------------------------------------------------- */

@media (max-width: 999px) {

	.kub-barra-compra__boton .kub-cta__sep {
		margin: 0 10px;
		opacity: 0.45;
	}

	.kub-barra-compra__boton .kub-cta__precio {
		font-weight: 700;
		text-transform: none;
	}
}