/**
 * Botones — efecto hover uniforme en todo el sitio.
 *
 * Aplica el mismo lenguaje de interacción a TODOS los botones principales
 * (mantiene sus colores y tamaños propios, sólo unifica el efecto):
 *
 *   - .sugar-btn                 (botones de contenido, negros con flecha)
 *   - .oz-header__contact-btn    (CTA del header, rosa "CONSULTA EN LÍNEA")
 *   - .oz-card__button           (botones dentro de cards del slider)
 *   - .ozs__cta                  (CTA del header del slider)
 *
 * Efecto: lift (-2px) + sombra suave + shine sweep (destello que cruza el botón).
 */

/* Base común — transición unificada (sin tocar layout/colores existentes). */
.sugar-btn,
.oz-header__contact-btn,
.oz-card__button,
.ozs__cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition:
		transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		background-color 0.3s ease,
		color 0.3s ease,
		filter 0.3s ease !important;
}

/* Destello (shine) que cruza el botón en hover */
.sugar-btn::before,
.oz-header__contact-btn::before,
.oz-card__button::before,
.ozs__cta::before {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 60%;
	height: 100%;
	background: linear-gradient(
		115deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.28) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: skewX(-18deg);
	pointer-events: none;
	z-index: 0;
	transition: left 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.sugar-btn:hover::before,
.oz-header__contact-btn:hover::before,
.oz-card__button:hover::before,
.ozs__cta:hover::before {
	left: 130%;
}

/* Asegura que el contenido del botón quede sobre el shine. */
.sugar-btn > *,
.oz-header__contact-btn > *,
.oz-card__button > *,
.ozs__cta > * {
	position: relative;
	z-index: 1;
}

/* Hover: lift + sombra. Mantiene los colores que ya tiene cada botón. */
.sugar-btn:hover,
.oz-header__contact-btn:hover,
.oz-card__button:hover,
.ozs__cta:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18) !important;
}

/* Tonos específicos de sombra para que el "glow" pegue con el color de cada
   botón. */
.oz-header__contact-btn:hover {
	box-shadow: 0 10px 22px rgba(200, 20, 124, 0.38) !important;
}
.sugar-btn:hover {
	box-shadow: 0 10px 22px rgba(23, 23, 25, 0.32) !important;
}

/* Active: vuelve un poco para feedback táctil. */
.sugar-btn:active,
.oz-header__contact-btn:active,
.oz-card__button:active,
.ozs__cta:active {
	transform: translateY(0) !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16) !important;
}

/* Focus accesible */
.sugar-btn:focus-visible,
.oz-header__contact-btn:focus-visible,
.oz-card__button:focus-visible,
.ozs__cta:focus-visible {
	outline: 2px solid rgba(250, 89, 8, 0.6);
	outline-offset: 3px;
}

/* Reduce-motion */
@media (prefers-reduced-motion: reduce) {
	.sugar-btn,
	.oz-header__contact-btn,
	.oz-card__button,
	.ozs__cta {
		transition: none !important;
	}
	.sugar-btn::before,
	.oz-header__contact-btn::before,
	.oz-card__button::before,
	.ozs__cta::before {
		display: none !important;
	}
	.sugar-btn:hover,
	.oz-header__contact-btn:hover,
	.oz-card__button:hover,
	.ozs__cta:hover {
		transform: none !important;
	}
}