/*
 * Kukinas — widget "Hero Circle": estilos específicos.
 * Las keyframes/utilidades compartidas (kk-anim-scale-in, kk-anim-float,
 * kk-caption-swap) viven en assets/css/common.css (dependencia declarada
 * en get_style_depends()).
 *
 * Tipografía: la define Elementor (Group_Control_Typography en el widget).
 * Este CSS solo aporta layout, posicionamiento y fallbacks de color.
 */

.kk-hero-circle {
	--kk-circle-color: #FF79C9;
	--kk-circle-opacity: .22;
	--kk-circle-size: 590px;
	--kk-image-radius: 28px;
	--kk-image-rotate: 4deg;
	--kk-fixed-text-rotate: 7deg;
	--kk-caption-rotate: -6deg;
	--kk-badge-rotate: -3deg;
	--kk-float-speed: 4s;
	--kk-arrow-size: 1.25em;
	position: relative;
	box-sizing: content-box;
	padding: 5% 7%;
}

.kk-hero-circle__stage {
	position: relative;
	width: 100%;
	max-width: var(--kk-circle-size);
	aspect-ratio: 1 / 1;
	margin-inline: auto;
	perspective: 1200px;
}

/* ---- Círculo de fondo ---- */

.kk-hero-circle__backdrop {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--kk-circle-color);
	opacity: var(--kk-circle-opacity);
}

/* ---- Slides (imagen de producto) ---- */

.kk-hero-circle__slides {
	position: absolute;
	inset: 10%;
}

.kk-hero-circle__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity .45s cubic-bezier(.34, 1.56, .64, 1),
		transform .45s cubic-bezier(.34, 1.56, .64, 1);
}

.kk-hero-circle__slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: var(--kk-image-radius);
	display: block;
}

.kk-hero-circle__slide.is-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 2;
	transform: scale(1) rotate(var(--kk-image-rotate));
}

/* "pop" (default): escala + rotación con overshoot */
.kk-hero-circle[data-transition="pop"] .kk-hero-circle__slide {
	transform: scale(.85) rotate(calc(var(--kk-image-rotate) * -2));
}
.kk-hero-circle[data-transition="pop"] .kk-hero-circle__slide.is-leaving {
	transform: scale(1.12) rotate(calc(var(--kk-image-rotate) * 2.5));
	transition-duration: .35s;
}

/* "slide_overshoot": entra desde la derecha con rebote */
.kk-hero-circle[data-transition="slide_overshoot"] .kk-hero-circle__slide {
	transform: translateX(60px) scale(.9);
}
.kk-hero-circle[data-transition="slide_overshoot"] .kk-hero-circle__slide.is-active {
	transform: translateX(0) scale(1) rotate(var(--kk-image-rotate));
}
.kk-hero-circle[data-transition="slide_overshoot"] .kk-hero-circle__slide.is-leaving {
	transform: translateX(-60px) scale(.9);
}

/* "flip": 3D */
.kk-hero-circle[data-transition="flip"] .kk-hero-circle__slide {
	transform: rotateY(90deg) scale(.9);
	backface-visibility: hidden;
	transition: opacity .5s ease, transform .5s cubic-bezier(.45, .05, .55, .95);
}
.kk-hero-circle[data-transition="flip"] .kk-hero-circle__slide.is-active {
	transform: rotateY(0deg) scale(1) rotate(var(--kk-image-rotate));
}
.kk-hero-circle[data-transition="flip"] .kk-hero-circle__slide.is-leaving {
	transform: rotateY(-90deg) scale(.9);
}

/* "fade": sobria */
.kk-hero-circle[data-transition="fade"] .kk-hero-circle__slide {
	transform: none;
	transition: opacity .4s ease;
}
.kk-hero-circle[data-transition="fade"] .kk-hero-circle__slide.is-active {
	transform: none;
}

/* ---- Textos manuscritos y badge ---- */

.kk-hero-circle__fixed-text,
.kk-hero-circle__caption,
.kk-hero-circle__badge {
	position: absolute;
}

.kk-hero-circle__fixed-text {
	--kk-rotate: var(--kk-fixed-text-rotate);
	top: 14%;
	left: 0;
	max-width: 52%;
	line-height: 1.15;
	color: #C91F28;
}

.kk-hero-circle__caption {
	--kk-rotate: var(--kk-caption-rotate);
	bottom: 8%;
	right: 0;
	max-width: 58%;
	display: flex;
	align-items: flex-end;
	gap: 6px;
	color: #C91F28;
}

.kk-floating-on .kk-hero-circle__caption.kk-anim-float {
	animation-delay: .6s;
}

.kk-hero-circle__caption-arrow svg {
	width: var(--kk-arrow-size);
	height: var(--kk-arrow-size);
	display: block;
}

.kk-hero-circle__badge {
	--kk-rotate: var(--kk-badge-rotate);
	top: 0;
	right: 2%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 16px;
	background: #FFFFFF;
	border-radius: 999px;
	color: #171717;
	text-decoration: none;
	max-width: min(90%, 220px);
	white-space: normal;
	text-align: center;
}

.kk-floating-on .kk-hero-circle__badge.kk-anim-float {
	animation-delay: 1.2s;
}

.kk-hero-circle__badge svg,
.kk-hero-circle__badge i {
	font-size: 1.2em;
}

/* ---- Dots ---- */

.kk-hero-circle__dots {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 50%);
	display: flex;
	gap: 8px;
}

.kk-hero-circle__dots button {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	background: rgba(23, 23, 23, .2);
	cursor: pointer;
	padding: 0;
	transition: background .2s ease, transform .2s ease;
}

.kk-hero-circle__dots button.is-active {
	background: var(--kk-circle-color, #FF79C9);
	transform: scale(1.3);
}

/* ---- Responsive: el stage escala vía --kk-circle-size (Elementor) ---- */

@media (max-width: 1024px) {
	.kk-hero-circle {
		padding: 4% 6%;
	}

	.kk-hero-circle__fixed-text {
		max-width: 50%;
	}
}

@media (max-width: 767px) {
	.kk-hero-circle {
		padding: 3% 5%;
	}

	.kk-hero-circle__fixed-text {
		max-width: 48%;
		top: 12%;
	}

	.kk-hero-circle__caption {
		max-width: 55%;
		bottom: 6%;
	}

	.kk-hero-circle__badge {
		padding: 6px 12px;
		max-width: 85%;
	}
}