@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&display=swap');

/* ============================================================
   HERO SLIDER — Luxe Paleta Co.   (banner-paletas.css)
   Efectos: fade+scale en slide, entrada por elemento,
            flotación idle, timing coordinado
   ============================================================ */

/* ── Contenedor ── */
.lp-hero-slider {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 580px;
	overflow: hidden;
	user-select: none;
}

.lp-slides-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
}

/* ================================================================
   SLIDE BASE
   Entra: fade-in + ligero zoom de 1.06 → 1 (Ken Burns suave)
   Sale : fade-out + zoom de 1 → 1.06
   ================================================================ */
.lp-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	overflow: hidden;
	transform: scale(1.06);
	transition:
		opacity    1.1s cubic-bezier(0.4, 0, 0.2, 1),
		visibility 1.1s cubic-bezier(0.4, 0, 0.2, 1),
		transform  1.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.lp-slide.active {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
	transform: scale(1);
}

/* ================================================================
   FONDOS POR SLIDE
   ================================================================ */
.lp-slide[data-slide="1"] {
	background: linear-gradient(115deg, #FABFBE 0%, #F8AEAD 50%, #F17B7A 100%);
}

/* ================================================================
   LOGO
   Estado base: invisible (opacity 0 + arriba)
   Al activarse: entra desde arriba con fade
   ================================================================ */
.lp-hero-slider .lp-logo {
	position: absolute;
	top: 4%;
	left: 50%;
	text-align: center;
	z-index: 10;
	white-space: nowrap;
	/* estado reposo (slide inactivo) */
	opacity: 0;
	transform: translateX(-50%) translateY(-22px);
}

.lp-hero-slider .lp-logo img {
	width: clamp(140px, 14vw, 210px);
	height: auto;  /* el inline style fue quitado; el CSS controla el tamaño */
	display: block;
	margin: 0 auto;
	filter: drop-shadow(0 1px 4px rgba(0,0,0,0.12));
}

.lp-hero-slider .lp-tagline {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-size: clamp(7px, 0.85vw, 11px);
	font-weight: 500;
	letter-spacing: 0.28em;
	color: #3a1812;
	margin-top: 5px;
}

/* Logo entra cuando el slide está activo */
.lp-slide.active .lp-logo {
	animation: lp-logo-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

@keyframes lp-logo-in {
	from { opacity: 0; transform: translateX(-50%) translateY(-22px); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ================================================================
   TÍTULO
   Estado base: invisible + desplazado abajo
   Al activarse: sube y aparece
   ================================================================ */
.lp-hero-slider .lp-title {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: 88% !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: clamp(44px, 8vw, 112px) !important;
	font-weight: 900 !important;
	color: #ffffff !important;
	text-align: center !important;
	line-height: 1.0 !important;
	letter-spacing: -0.025em !important;
	z-index: 5 !important;
	margin: 0 !important;
	padding: 0 !important;
	text-shadow: none !important;
	text-transform: none !important;
	background: none !important;
	border: none !important;
	/* estado reposo */
	opacity: 0;
	transform: translate(-50%, calc(-50% + 32px)) !important;
}

.lp-slide.active .lp-title {
	animation: lp-title-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

@keyframes lp-title-in {
	from {
		opacity: 0;
		transform: translate(-50%, calc(-50% + 32px));
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%);
	}
}

/* ================================================================
   PALETA
   Estado base: invisible + arriba
   Al activarse: cae con rebote (bounce cubic-bezier)
   ================================================================ */
.lp-hero-slider .lp-paleta {
	position: absolute;
	left: 50%;
	top: 30%;           /* baja para dejar el logo libre */
	height: 55%;
	max-height: 680px;
	width: auto;
	z-index: 6;
	pointer-events: none;
	-webkit-user-drag: none;
	filter: drop-shadow(0 15px 35px rgba(0,0,0,0.18));
	/* estado reposo */
	opacity: 0;
	transform: translateX(-50%) translateY(-70px) scale(0.88);
}

.lp-slide.active .lp-paleta {
	animation:
		lp-paleta-drop 1.15s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s both,
		lp-paleta-idle 5s   ease-in-out                        1.8s  infinite;
}

@keyframes lp-paleta-drop {
	0%   {
		opacity: 0;
		transform: translateX(-50%) translateY(-70px) scale(0.88);
	}
	60%  {
		opacity: 1;
		transform: translateX(-50%) translateY(10px) scale(1.02);
	}
	100% {
		opacity: 1;
		transform: translateX(-50%) translateY(0) scale(1);
	}
}

/* ================================================================
   ELEMENTOS FLOTANTES — posiciones base (slide 1)
   ================================================================ */
.lp-hero-slider .lp-elem {
	position: absolute;
	z-index: 4;
	pointer-events: none;
	-webkit-user-drag: none;
	opacity: 0; /* ocultos cuando el slide no está activo */
}

/* Posiciones en reposo (coordenadas finales) */
.lp-slide[data-slide="1"] .elem-tl {
	top: 8%;
	left: 7%;
	width: clamp(130px, 15vw, 220px);
}

.lp-slide[data-slide="1"] .elem-tr {
	top: 5%;
	right: 5%;
	width: clamp(120px, 14vw, 210px);
}

.lp-slide[data-slide="1"] .elem-bl {
	bottom: 7%;
	left: 20%;
	width: clamp(65px, 8vw, 115px);
}

.lp-slide[data-slide="1"] .elem-br {
	bottom: 5%;
	right: 6%;
	width: clamp(110px, 13vw, 185px);
}

/* ── ENTRADA + FLOTACIÓN encadenadas por elemento ── */

/* TL: entra volando desde esquina sup-izq, luego flota */
.lp-slide[data-slide="1"].active .elem-tl {
	animation:
		lp-enter-tl  0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s  both,
		lp-float-tl  6.5s ease-in-out                    1.2s  infinite;
}

/* TR: entra desde esquina sup-der, luego flota */
.lp-slide[data-slide="1"].active .elem-tr {
	animation:
		lp-enter-tr  0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both,
		lp-float-tr  7.2s ease-in-out                    1.35s infinite;
}

/* BL: entra desde esquina inf-izq, luego flota */
.lp-slide[data-slide="1"].active .elem-bl {
	animation:
		lp-enter-bl  0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.65s both,
		lp-float-bl  5.5s ease-in-out                    1.55s infinite;
}

/* BR: entra desde esquina inf-der, luego flota */
.lp-slide[data-slide="1"].active .elem-br {
	animation:
		lp-enter-br  0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.78s both,
		lp-float-br  6.0s ease-in-out                    1.68s infinite;
}

/* ── Keyframes de ENTRADA desde esquinas ── */
@keyframes lp-enter-tl {
	from { opacity: 0; transform: rotate(-8deg)  translate(-55px, -55px); }
	to   { opacity: 1; transform: rotate(-8deg)  translate(0, 0); }
}
@keyframes lp-enter-tr {
	from { opacity: 0; transform: rotate(10deg)  translate(55px, -55px); }
	to   { opacity: 1; transform: rotate(10deg)  translate(0, 0); }
}
@keyframes lp-enter-bl {
	from { opacity: 0; transform: translate(-40px, 55px); }
	to   { opacity: 1; transform: translate(0, 0); }
}
@keyframes lp-enter-br {
	from { opacity: 0; transform: translate(40px, 55px); }
	to   { opacity: 1; transform: translate(0, 0); }
}

/* ── Keyframes de FLOTACIÓN idle — movimiento orgánico X+Y+rotación ── */
@keyframes lp-float-tl {
	0%   { transform: rotate(-8deg)  translate(0px,   0px);  }
	25%  { transform: rotate(-5deg)  translate(6px,  -22px); }
	55%  { transform: rotate(-12deg) translate(-5px, -28px); }
	80%  { transform: rotate(-7deg)  translate(3px,  -14px); }
	100% { transform: rotate(-8deg)  translate(0px,   0px);  }
}
@keyframes lp-float-tr {
	0%   { transform: rotate(10deg)  translate(0px,   0px);  }
	30%  { transform: rotate(14deg)  translate(-6px, -24px); }
	60%  { transform: rotate(7deg)   translate(5px,  -20px); }
	85%  { transform: rotate(12deg)  translate(-3px, -12px); }
	100% { transform: rotate(10deg)  translate(0px,   0px);  }
}
@keyframes lp-float-bl {
	0%   { transform: translate(0px,   0px);  }
	35%  { transform: translate(-5px, -20px); }
	65%  { transform: translate(4px,  -26px); }
	100% { transform: translate(0px,   0px);  }
}
@keyframes lp-float-br {
	0%   { transform: translate(0px,   0px);  }
	40%  { transform: translate(6px,  -22px); }
	70%  { transform: translate(-4px, -18px); }
	100% { transform: translate(0px,   0px);  }
}

/* ── Paleta: flotación continua tras la caída ── */
@keyframes lp-paleta-idle {
	0%   { transform: translateX(-50%) translateY(0px)    rotate(0deg);    }
	20%  { transform: translateX(-50%) translateY(-8px)   rotate(0.5deg);  }
	50%  { transform: translateX(-50%) translateY(-13px)  rotate(-0.5deg); }
	75%  { transform: translateX(-50%) translateY(-6px)   rotate(0.3deg);  }
	100% { transform: translateX(-50%) translateY(0px)    rotate(0deg);    }
}

/* ================================================================
   SLIDE 2 — Tokio Matcha Coconut
   Fondo: verde lima/matcha
   ================================================================ */
.lp-slide[data-slide="2"] {
	background: linear-gradient(115deg, #E1F5B2 0%, #D2EC9B 55%, #CAE78E 100%);
}

/* Posiciones elementos slide 2 */
.lp-slide[data-slide="2"] .elem-tl {   /* polvo matcha */
	top: 3%;
	left: 2%;
	width: clamp(150px, 17vw, 250px);
}
.lp-slide[data-slide="2"] .elem-tr {   /* medio coco pequeño */
	top: 6%;
	right: 8%;
	width: clamp(130px, 14vw, 210px);
	transform: rotate(12deg);
}
.lp-slide[data-slide="2"] .elem-bl {   /* coco roto grande */
	bottom: -3%;
	left: 4%;
	width: clamp(200px, 24vw, 340px);
}
.lp-slide[data-slide="2"] .elem-br {   /* cuchara matcha + hojas */
	bottom: 4%;
	right: 4%;
	width: clamp(160px, 18vw, 260px);
}

/* Animaciones activas slide 2 */
.lp-slide[data-slide="2"].active .elem-tl {
	animation:
		lp-enter-tl 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.30s both,
		lp-float-tl 7.0s ease-in-out                    1.20s infinite;
}
.lp-slide[data-slide="2"].active .elem-tr {
	animation:
		lp-enter-tr 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both,
		lp-float-tr 8.0s ease-in-out                    1.35s infinite;
}
.lp-slide[data-slide="2"].active .elem-bl {
	animation:
		lp-enter-bl 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.65s both,
		lp-float-bl 6.0s ease-in-out                    1.55s infinite;
}
.lp-slide[data-slide="2"].active .elem-br {
	animation:
		lp-enter-br 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.78s both,
		lp-float-br 7.0s ease-in-out                    1.68s infinite;
}

/* ================================================================
   SLIDE 3 — Golden Paradise
   Fondo: dorado/amarillo cálido
   ================================================================ */
.lp-slide[data-slide="3"] {
	background: linear-gradient(109deg,rgba(232, 167, 58, 1) 0%, rgba(241, 205, 126, 1) 49%, rgba(254, 231, 162, 1) 100%);
}

/* Posiciones elementos slide 3 */
.lp-slide[data-slide="3"] .elem-tl {   /* piña + rebanadas */
	top: 4%;
	left: 2%;
	width: clamp(160px, 19vw, 270px);
	transform: rotate(-5deg);
}
.lp-slide[data-slide="3"] .elem-tr {   /* trozos piña esparcidos */
	top: 4%;
	right: 3%;
	width: clamp(130px, 15vw, 210px);
	transform: rotate(8deg);
}
.lp-slide[data-slide="3"] .elem-bl {   /* rebanada piña */
	bottom: 8%;
	left: 14%;
	width: clamp(120px, 14vw, 200px);
}
.lp-slide[data-slide="3"] .elem-br {   /* maracuyá */
	bottom: 6%;
	right: 5%;
	width: clamp(155px, 17vw, 245px);
}

/* Animaciones activas slide 3 */
.lp-slide[data-slide="3"].active .elem-tl {
	animation:
		lp-enter-tl 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.30s both,
		lp-float-tl 6.5s ease-in-out                    1.20s infinite;
}
.lp-slide[data-slide="3"].active .elem-tr {
	animation:
		lp-enter-tr 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both,
		lp-float-tr 7.5s ease-in-out                    1.35s infinite;
}
.lp-slide[data-slide="3"].active .elem-bl {
	animation:
		lp-enter-bl 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.65s both,
		lp-float-bl 5.5s ease-in-out                    1.55s infinite;
}
.lp-slide[data-slide="3"].active .elem-br {
	animation:
		lp-enter-br 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.78s both,
		lp-float-br 6.5s ease-in-out                    1.68s infinite;
}

/* ================================================================
   REDES SOCIALES — posición y tamaño en zona del hero
   ================================================================ */
.lp-social {
	top: 12% !important;
	right: 22px !important;
	transform: none !important;
	z-index: 20 !important;
}

.lp-social .social-icons li {
	margin-bottom: 18px !important;
}

.lp-social .social-icons li:last-child {
	margin-bottom: 0 !important;
}

.lp-social .social-icons li a {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
}

.lp-social .social-icons li a i {
	font-size: 24px !important;
	color: #ffffff !important;
	transition: transform 0.25s ease, opacity 0.25s ease !important;
	opacity: 0.85;
}

.lp-social .social-icons li a:hover i {
	transform: scale(1.2) !important;
	opacity: 1 !important;
}

/* ================================================================
   FLECHAS DE NAVEGACIÓN
   ================================================================ */
.lp-hero-slider .lp-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	background: rgba(255,255,255,0.78);
	border: none;
	border-radius: 50%;
	width: clamp(42px, 4vw, 58px);
	height: clamp(42px, 4vw, 58px);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 3px 14px rgba(0,0,0,0.18);
	outline: none;
	transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
}

.lp-hero-slider .lp-arrow:hover {
	background: #ffffff;
	transform: translateY(-50%) scale(1.08);
	box-shadow: 0 5px 20px rgba(0,0,0,0.22);
}

.lp-hero-slider .lp-arrow svg {
	width: 22px;
	height: 22px;
	stroke: #333;
	stroke-width: 2.5;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lp-hero-slider .lp-arrow-prev { left: 18px; }
.lp-hero-slider .lp-arrow-next { right: 18px; }

/* ================================================================
   DOTS DE NAVEGACIÓN
   ================================================================ */
.lp-hero-slider .lp-dots {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	display: flex;
	gap: 10px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.lp-hero-slider .lp-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255,255,255,0.45);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background 0.35s, transform 0.35s;
	outline: none;
}

.lp-hero-slider .lp-dot:hover { background: rgba(255,255,255,0.75); }

.lp-hero-slider .lp-dot.active {
	background: #ffffff;
	transform: scale(1.3);
}

/* ================================================================
   RESPONSIVE — media queries por breakpoint
   Layout móvil: logo → paleta → título (apilados, sin solaparse)
   ================================================================ */

/* ─── TABLET grande (≤1199px) ─── */
@media (max-width: 1199px) {
	.lp-hero-slider .lp-logo img { width: 170px; }
}

/* ─── TABLET (≤991px) ─── */
@media (max-width: 991px) {
	.lp-hero-slider .lp-title    { font-size: clamp(36px, 9.5vw, 76px) !important; }	
	.lp-hero-slider .lp-paleta   { height: 53%; top: 25%; }
	.body{margin-top: 0px !important;}
	.lp-slide[data-slide="1"] .elem-br {bottom: 16%; width: clamp(65px, 18vw, 170px);	}
	.lp-slide[data-slide="1"] .elem-bl {bottom: 16%; width: clamp(65px, 13vw, 100px);	}

	/* SLIDE 2 */	
	.lp-slide[data-slide="2"] .elem-bl { bottom: 16%; }
	.lp-slide[data-slide="2"] .elem-br {  bottom: 11%; }
	/* SLIDE 3 */	
	.lp-slide[data-slide="3"] .elem-bl { bottom: 18%; }
	.lp-slide[data-slide="3"] .elem-br { bottom: 16%; }


	

	
}


@media (max-width: 767px) {
	.lp-hero-slider { min-height: 500px; }

	/* Logo: altura fija para control exacto — el SVG mantiene su ratio */
	.lp-hero-slider .lp-logo     { top: 2%; }	

	/* Paleta: compacta, arranca después del logo */
	.lp-hero-slider .lp-paleta   { height: 40%; top: 17%; }

	/* Título: top 55% (peek-through con paleta) */
	.lp-hero-slider .lp-title {
		top: 55% !important;
		font-size: clamp(22px, 8.5vw, 38px) !important;
		width: 92% !important;
	}

	/* SLIDE 1 — bl/br más grandes y subidos */
	.lp-slide[data-slide="1"] .elem-tl {  top: 5%; }
	.lp-slide[data-slide="1"] .elem-tr {  top: 4%; }
	.lp-slide[data-slide="1"] .elem-bl {  bottom: 20%; }
	.lp-slide[data-slide="1"] .elem-br {  bottom: 16%; }

	/* SLIDE 2 */
	.lp-slide[data-slide="2"] .elem-tl {  top: 3%; }
	.lp-slide[data-slide="2"] .elem-tr {  top: 4%; }
	.lp-slide[data-slide="2"] .elem-bl {  bottom: 16%; }
	.lp-slide[data-slide="2"] .elem-br {  bottom: 19%; }

	/* SLIDE 3 */
	.lp-slide[data-slide="3"] .elem-tl { top: 4%; }
	.lp-slide[data-slide="3"] .elem-tr { top: 3%; }
	.lp-slide[data-slide="3"] .elem-bl { bottom: 18%; }
	.lp-slide[data-slide="3"] .elem-br { bottom: 16%; }
}

/* ─── MÓVIL pequeño (≤480px) ─── */
@media (max-width: 480px) {
	.lp-hero-slider { min-height: 460px; }
	/* Logo */
	.lp-hero-slider .lp-logo     { top: 1%; }
	/* Paleta */
	.lp-hero-slider .lp-paleta   { height: 37%; top: 18%; }

	/* Título */
	.lp-hero-slider .lp-title {
		top: 55% !important;
		font-size: clamp(22px, 8.5vw, 38px) !important;
	}

	/* SLIDE 1 */
	.lp-slide[data-slide="1"] .elem-tl { width: 90px; left: 1%;  top: 5%; }
	.lp-slide[data-slide="1"] .elem-tr { width: 120px; right: 1%; top: 4%; }
	.lp-slide[data-slide="1"] .elem-bl { width: 95px; left: 2%;  bottom: 18%; }
	.lp-slide[data-slide="1"] .elem-br { width: 140px; right: 2%; bottom: 24%; }

	/* SLIDE 2 */
	.lp-slide[data-slide="2"] .elem-tl { width: 180px; left: 0%;  top: 2%; }
	.lp-slide[data-slide="2"] .elem-tr { width: 123px; right: 0%; top: 3%; }
	.lp-slide[data-slide="2"] .elem-bl { width: 120px; left: 1%;  bottom: 14%; }
	.lp-slide[data-slide="2"] .elem-br { width: 150px;  right: 1%; bottom: 16%; }

	/* SLIDE 3 */
	.lp-slide[data-slide="3"] .elem-tl { width: 150px; left: 0%;  top: 3%; }
	.lp-slide[data-slide="3"] .elem-tr { width: 160px; right: 0%; top: 2%; }
	.lp-slide[data-slide="3"] .elem-bl { width: 140px; left: 2%;  bottom: 16%; }
	.lp-slide[data-slide="3"] .elem-br { width: 120px; right: 2%; bottom: 14%; }
}

/* ─── MÓVIL muy pequeño (≤360px) ─── */
@media (max-width: 360px) {
	/* Logo mínimo */
	

	/* Paleta mínima */
	.lp-hero-slider .lp-paleta   { height: 34%; top: 22%; }

	/* Título */
	.lp-hero-slider .lp-title {
		top: 60% !important;
		font-size: clamp(20px, 8vw, 32px) !important;
	}

	
}