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

/* ============================================================
   HERO SLIDER — Casa Lujano   (banner-casalujano.css v1.0)
   ============================================================ */

/* ── 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 — fade+scale (Ken Burns suave)
   ================================================================ */
.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 — degradados (sin fondo de madera)
   ================================================================ */
.lp-slide[data-slide="1"] {
	background: url('../img/slides/01/background_madera.jpg') top center / 100% auto repeat-y;
}
.lp-slide[data-slide="2"] {
	background: url('../img/slides/02/background_madera_02.jpg') top center / 100% auto repeat-y;
}
.lp-slide[data-slide="3"] {
	background: url('../img/slides/03/background_madera_02.jpg') top center / 100% auto repeat-y;
}

/* ================================================================
   LOGO
   ================================================================ */
.lp-hero-slider .lp-logo {
	position: absolute;
	top: 4%;
	left: 50%;
	text-align: center;
	z-index: 10;
	white-space: nowrap;
	opacity: 0;
	transform: translateX(-50%) translateY(-22px);
}
.lp-hero-slider .lp-logo img {
	width: clamp(140px, 14vw, 210px);
	height: auto;
	display: block;
	margin: 0 auto;
	filter: drop-shadow(0 1px 4px rgba(0,0,0,0.12));
}
.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); }
}

/* ================================================================
   PALETA / PLATO PRINCIPAL
   ================================================================ */
.lp-hero-slider .lp-paleta {
	position: absolute;
	left: 50%;
	top: 22%;
	height: 65%;
	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));
	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); }
}
@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);    }
}

/* ================================================================
   ELEMENTOS FLOTANTES — base
   ================================================================ */
.lp-hero-slider .lp-elem {
	position: absolute;
	z-index: 4;
	pointer-events: none;
	-webkit-user-drag: none;
	opacity: 0;
}

/* ── Keyframes 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 FLOTACIÓN idle ── */
@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);  }
}

/* ================================================================
   SLIDE 1 — Platillo principal
   ================================================================ */
.lp-slide[data-slide="1"] .elem-tl { top: 4%;  left: 3%;  width: clamp(220px, 21vw, 420px); }
.lp-slide[data-slide="1"] .elem-tr { top: 2%;  right: 2%; width: clamp(200px, 26vw, 400px); }
.lp-slide[data-slide="1"] .elem-bl { bottom: 4%;  left: 14%; width: clamp(120px, 16vw, 240px); }
.lp-slide[data-slide="1"] .elem-br { bottom: 2%;  right: 3%; width: clamp(200px, 24vw, 360px); }

.lp-slide[data-slide="1"].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.2s  infinite;
}
.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;
}
.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;
}
.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;
}

/* ================================================================
   SLIDE 2 — Guacamole en Molcajete
   ================================================================ */
.lp-slide[data-slide="2"] .elem-tl { top: 5%;    left: 5%;  width: clamp(160px, 18vw, 260px); }
.lp-slide[data-slide="2"] .elem-tr { top: 4%;    right: 5%; width: clamp(161px, 17vw, 253px); } /* cilantro +15% */
.lp-slide[data-slide="2"] .elem-bl { bottom: 8%; left: 8%;  width: clamp(147px, 16.5vw, 252px); } /* chile +40%+50% */
.lp-slide[data-slide="2"] .elem-br { bottom: 5%; right: 5%; width: clamp(170px, 19vw, 270px); }

.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 — Postre / Flan
   elem-tl (banner_3_fram_1) +40% → clamp(150→210, 16→22vw, 230→322)
   ================================================================ */
.lp-slide[data-slide="3"] .elem-tl { top: 5%;    left: 5%;  width: clamp(315px, 33vw, 483px); } /* +40%+50% */
.lp-slide[data-slide="3"] .elem-tr { top: 4%;    right: 5%; width: clamp(150px, 16vw, 230px); }
.lp-slide[data-slide="3"] .elem-bl { bottom: 7%; left: 6%;  width: clamp(140px, 15vw, 210px); }
.lp-slide[data-slide="3"] .elem-br { bottom: 6%; right: 5%; width: clamp(130px, 14vw, 200px); }

.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
   ================================================================ */
.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
   ================================================================ */
.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
   ================================================================ */
.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); }
#pading-footer{padding-top: 80px !important;}
/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1199px) {
	.lp-hero-slider .lp-logo img { width: 170px; }
	#jitomate-flotante{display: none  !important;}
	#separador{ height: 200px !important;}
	.cl-banner-mid {    
    	min-height: 380px;   
	}
}

@media (max-width: 991px) {
	.lp-hero-slider .lp-paleta { height: 55%; top: 20%; }
	.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); }
	.lp-slide[data-slide="2"] .elem-bl { bottom: 16%; }
	.lp-slide[data-slide="2"] .elem-br { bottom: 11%; }
	.lp-slide[data-slide="3"] .elem-bl { bottom: 18%; }
	.lp-slide[data-slide="3"] .elem-br { bottom: 16%; }
	#pading-footer {
		padding-top: 80px !important;
	}
}

@media (max-width: 767px) {
	.lp-hero-slider            { min-height: 500px; }
	.lp-hero-slider .lp-logo   { top: 2%; }
	.lp-hero-slider .lp-paleta { height: 45%; top: 25%; }
	.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%; width: clamp(65px, 18vw, 156px);}
	.lp-slide[data-slide="1"] .elem-br { bottom: 16%; width: clamp(65px, 30vw, 206px);}

	.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%; width: clamp(115px, 15vw, 189px); }
	.lp-slide[data-slide="2"] .elem-br { bottom: 19%; }
	/* slide 3 elem-tl +40%+50% */
	.lp-slide[data-slide="3"] .elem-tl { top: 4%;     width: clamp(262px, 28vw, 390px); }
	.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%; }
}

@media (max-width: 640px) {
	.lp-hero-slider            { min-height: 460px; }
	.lp-hero-slider .lp-logo   { top: 1%; }
	.lp-hero-slider .lp-paleta { height: 37%; top: 27%; }
	.lp-slide[data-slide="1"] .elem-tl { width: 150px;  left: 1%;  top: 5%; }
	.lp-slide[data-slide="1"] .elem-tr { width: 190px; right: 1%; top: 4%; }
	.lp-slide[data-slide="1"] .elem-bl { width: 140px;  left: 2%;  bottom: 18%; }
	.lp-slide[data-slide="1"] .elem-br { width: 220px; right: 2%; bottom: 24%; }

	.lp-slide[data-slide="2"] .elem-tl { width: 160px; left: 0%;  top: 2%; }
	.lp-slide[data-slide="2"] .elem-tr { width: 161px; right: 0%; top: 3%; }
	.lp-slide[data-slide="2"] .elem-bl { width: 126px; left: 4%;  bottom: 14%; }
	.lp-slide[data-slide="2"] .elem-br { width: 160px; right: 1%; bottom: 16%; }
	/* slide 3 elem-tl +40%+50%: 150→315px */
	.lp-slide[data-slide="3"] .elem-tl { width: 315px; left: 0%;  top: 3%; }
	.lp-slide[data-slide="3"] .elem-tr { width: 150px; 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: 110px; right: 5%; bottom: 14%; }

	.cl-molcajete-img {
		max-height: 220px;
		width: 100%;
		object-fit: contain;
	}
	.cl-provecho-text {
        font-size: 4.2rem;
        letter-spacing: .06em;
    }

	.cl-banner-mid {   
    	min-height: 230px;   
	}

	.cl-pasion-text, .cl-mexico-text {
        font-size: 2.3rem;
        letter-spacing: .1em;
    }

}




@media (max-width: 500px) {
	.lp-hero-slider .lp-paleta { height: 31%; top: 27%; }
	.lp-slide[data-slide="1"] .elem-tl { width: 135px;  left: 1%;  top: 10%; }
	.lp-slide[data-slide="1"] .elem-tr { width: 190px; right: 1%; top: 10%; }
	.lp-slide[data-slide="1"] .elem-bl { width: 110px;  left: 2%;  bottom: 15%; }
	.lp-slide[data-slide="1"] .elem-br { width: 200px; right: 2%; bottom: 18%; }

	.lp-slide[data-slide="2"] .elem-tl { width: 120px; left: 0%;  top: 2%; }
	.lp-slide[data-slide="2"] .elem-tr { width: 121px; right: 0%; top: 3%; }
	.lp-slide[data-slide="2"] .elem-bl { width: 126px; left: 4%;  bottom: 14%; }
	.lp-slide[data-slide="2"] .elem-br { width: 120px; right: 1%; bottom: 16%; }
	/* slide 3 elem-tl +40%+50%: 150→315px */
	.lp-slide[data-slide="3"] .elem-tl { width: 200px; left: 0%;  top: 10%; }
	.lp-slide[data-slide="3"] .elem-tr { width: 100px; right: 0%; top: 10%; }
	.lp-slide[data-slide="3"] .elem-bl { width: 110px; left: 2%;  bottom: 16%; }
	.lp-slide[data-slide="3"] .elem-br { width: 90px; right: 5%; bottom: 14%; }
	.text-10 {
		font-size: 2.25em !important;
	}
	#pading-footer{padding-top: 45px !important;}
	.cl-provecho-text {
        font-size: 2.9rem;
        letter-spacing: .06em;
    }
	.cl-pasion-text, .cl-mexico-text {
        font-size: 1.8rem;
        letter-spacing: .1em;
    }


	

	
}

@media (max-width: 400px) {
	.lp-hero-slider .lp-paleta { height:25%; top: 32%; }

	.lp-slide[data-slide="1"] .elem-tl { width: 115px;  left: 1%;  top: 17%; }
	.lp-slide[data-slide="1"] .elem-tr { width: 150px; right: 1%; top: 17%; }
	.lp-slide[data-slide="1"] .elem-bl { width: 85px;  left: 2%;  bottom: 15%; }
	.lp-slide[data-slide="1"] .elem-br { width: 180px; right: 2%; bottom: 15%; }


	.lp-slide[data-slide="2"] .elem-tl { width: 100px; left: 0%;  top: 17%; }
	.lp-slide[data-slide="2"] .elem-tr { width: 101px; right: 0%; top: 17%; }
	.lp-slide[data-slide="2"] .elem-bl { width: 110px; left: 4%;  bottom: 16%; }
	.lp-slide[data-slide="2"] .elem-br { width: 100px; right: 1%; bottom: 16%; }

	.lp-slide[data-slide="3"] .elem-tl { width: 200px; left: 0%;  top: 17%; }
	.lp-slide[data-slide="3"] .elem-tr { width: 110px; right: 0%; top: 17%; }
	.lp-slide[data-slide="3"] .elem-bl { width: 100px; left: 2%;  bottom: 16%; }
	.lp-slide[data-slide="3"] .elem-br { width: 80px; right: 5%; bottom: 16%; }

	.cl-provecho-text {
        font-size: 1.8rem;       
    }
	.cl-pasion-text, .cl-mexico-text {
        font-size: 1.3rem;
        letter-spacing: 0.1em;
    }
	.mx-3 {
		margin-right: 0rem !important;
		margin-left: 0rem !important;
	}
	.cl-pasion-wrap {   
		gap: 0 0px;
	}
	#separador{height: 100px !important;}
	



}