@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Montserrat:300');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
html{
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}
body{
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
	scroll-behavior: smooth;
	overflow-x: hidden;
}
html::-webkit-scrollbar { display: none }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 6px;
	box-shadow: 0px 0px 0px 0px #aaa;
	transition: 1s ease;
}
html::-webkit-scrollbar-thumb:hover { background: #eee; }
@keyframes x {
  0% { opacity: 0; margin-top: 33px; }
  100%{ opacity: 1; margin-top: 0; }
}
@keyframes sideNavAnimation{
	0%{ margin-left: 0vw; }
	100%{ margin-left: 100vw; }
}
@keyframes sideNavContentAnimation{
	0%{ opacity: 0; }
	70%{ opacity: 0; }
	100%{ opacity: 1; }
}
#header {
	position: fixed;
	top: -10vh;
	left: 0;
	right: 0;
	height: 10vh;
	background-color: #fff;
	border-bottom: 1px solid #eee;
	transition: top 0.3s;
	z-index: 2;
	padding: 0 10vw;
	display: inline-flex;
	box-shadow: 1px 1px 121px 3px #ddd;
}
.logotype{
	display: inline-flex;
	height: 10vh;
	width: auto;
	margin: 0;
	padding: 0 13px;
}
.imgLogotype{
	width: 6vh;
	height: 6vh;
	border-radius: 8px;
	margin: 2vh 13px 2vh 0;
}
.nameLogotype{
	font-family: "Rubik";
	color: #002F2F;
	font-size: 33px;
	margin: auto 0;
}
#sideNav{ display: none; }
#top{ width: 100%; height: auto; background-color: transparent;}
.topHeader{
	margin: 0 10%;
	width: 80%;
	height: auto;
	display: block;
	background-color: white;
}
.topHeaderItem{
	width: auto;
	height: auto;
	display: inline-flex;
	padding: 8px;
	float: right;
	text-decoration: none;
	background-color: #fff;
	border-radius: 13px;
	margin: 1vh 3px;
	box-shadow: 1px 1px 5px 1px #ccc;
}
.topHeaderItem img{ width: 21px; height: 21px; margin: 5px; }
.topHeaderItem p{ margin: 5px; color: #333; }
.bottomHeader{
	margin: 0;
	width: 100%;
	height: auto;
	display: inline-flex; 
	background-color: transparent;
	padding: 3px 0;
}
.desktopMenu{
	width: auto;
	height: auto;
	position: relative;
	float: right;
	display: inline-flex;
	margin: auto 0 auto auto;
}
a.dropbtn{
	transform: scale(1,1);
	font-family: 'Rubik';
	letter-spacing: 1px;
	font-size: 17px;
	font-weight: 500;
	color: #002F2F;
	height:40px;
	margin: 5px 21px;
	padding: 5px 0px;
	text-decoration: none;
	width: auto;
}
.dropbtn{ display: inline-flex; }
.dropbtn p{ margin: auto; padding: auto; }
.dropbtn img{ width: 21px; height:21px; margin: auto 5px; padding: auto; }
.dropdown-content{
	text-align: left;
	display: none;
	position: absolute;
	height: auto;
	background-color: #fff;
	left: -8px;
	top: 3px;
	animation: 0.5s ease x;
	z-index: 1;
}
.dropdown-content a{
	margin: 13px;
	padding: 8px 3px 0px 3px;
	width: auto;
	height: 30px;
	text-align: left;
	text-decoration: none;
	color: #000;
	transition: .5s ease;
	animation: zoom 1s ease;
	border-bottom: 1px solid #fff;
	display: inline-flex;
}
.dropdown-content a:hover{
	background-color: #eee;
	border-bottom: 1px solid #008080;
}
.dropdown-content img{ width: 33px; height: 21px; margin: 0 5px; }
.dropdown-content p{ margin: 0 auto 20px auto; font-size: 17px; }
.dropbtn:hover + .dropdown-content { display: inline-grid; }
.dropdown-content:hover{ display: inline-grid }
#mobileMenu{ display: none; }
.menuIcons{ width: 80%; height: auto; margin: auto; display: inline-flex; }
.menuIconsBox{ width: auto; height: auto; display: inline-flex; }
a.menuIconsItem{
	width: auto;
	height: auto;
	margin: 0px 8px;
	text-align: center;
	text-decoration: none;
	color: #aaa;
	font-family: "Rubik";
	padding: 3px 13px;
}
a.menuIconsItem:hover{
	text-decoration: none;
	color:#c8a96b;
	background-color: rgba(255,255,255,0.30);
	border-radius: 13px;
	backdrop-filter: blur(4px); 
}
.menuIconsItem img{ width: 6vh; height: 6vh; }
.slides { display: flex; transition: transform 0.5s ease; }
.slides img { width: 100%; height: auto; border-radius: 13px; }
.footer{
	width: 97vw;
	height: auto;
	background-color: #EDF4F4;
	margin: 1vh 1vw;
	border-radius: 13px;
}
.box_footer_son { margin-top: 13px; }
.box_footer_son a{ margin: 5px 0; color: blue; text-decoration: none; }
.title{ color: #000; font-family: "Rubik"; }
.box_footer_son img{ width: 233px; height: 233px; }
.box_footer_father{ display: inline-flex; width: 100%; height: auto; }
.box_footer_son{ display: inline-grid; width: 20%; margin: 2.5%; height: auto; }
.div-flex{ display: inline-flex; }
.div-flex img{ width: 36px; height: 36px; margin: 1px; }
.div-flex a{ text-decoration: none; margin: 8px; }
.bottom{
	border-top: 2px solid #D5E5E5;
	width: 80vw;
	height: auto;
	margin: 0 10vw;
	text-align: center;
	padding: 13px;
}
@media (max-width: 1024px) {
  #header {
	position: fixed;
	top: -10vh;
	left: 0; right: 0;
	height: 10vh;
	background-color: #fff;
	border-bottom: 1px solid #eee;
	transition: top 0.3s;
	padding: 0 0vw;
	display: inline-flex;
}
  #top{ width: 100%; height: auto; padding: 13px 0 0 0; border-bottom: 1px solid #eee; }
  .topHeader{
	width: 100%;
	height: 10vh;
	margin: 0;
	border-bottom: 1px solid #eee;
	display: inline-flex;
	background-color: #fff;
	position: absolute;
	top: 0;
}
  .topHeaderItem{ display: none; height: 0; }
  .bottomHeader{ margin: 0; width: 100%; height: 100%; display: inline-flex; overflow-x: hidden; }
  .desktopMenu{ display:none; }
  #mobileMenu{
	display: flex;
	margin: auto 1% auto auto;
	padding: 0;
	text-decoration: none;
	position: absolute;
	right: 2vw;
	top: 1vh;
	width: 8vh;
	height: 8vh;
}
  #menu{ border-radius: 5px; width: 100%; height: 100%; padding: 0; margin: 0; }
  .menuIcons{
	width: 95%;
	height: auto;
	margin: auto;
	padding-top: 13px;
	margin-top: 6vh;
	padding-bottom: -5vh;
	overflow-x: scroll;
	display: inline-flex;
}
  .menuIcons::-webkit-scrollbar { height:0px; }
  .menuIcons::-webkit-scrollbar-track { background: transparent; }
  .menuIcons::-webkit-scrollbar-thumb {
	background: #fff;
	border-radius: 6px;
	box-shadow: 0px 0px 0px 0px #aaa;
	transition: 1s ease;
	width: 0px;
}
  .menuIcons::-webkit-scrollbar-thumb:hover { background: #eee; }
  .menuIconsBox{ width: 100%; height: auto; }
  a.menuIconsItem{
	width: 25%;
	height: auto;
	margin: 5px 8px;
	text-align: center;
	text-decoration: none;
	padding: 3px;
}
  a.menuIconsItem:hover{
	text-decoration: none;
	color: #00c0c0;
	background-color: #eee;
	border-radius: 13px;
}
  a.menuIconsItem p{ margin: 0px; padding: 0px; font-family: 'Lato', sans-serif; }
  .menuIconsItem img{ width: 3vh; height: 3vh; margin: 5px 0 0 0; }
  #sideNav{
	width: 100%;
	height: 100%;
	display: block;
	position: fixed;
	top: 0;
	transition: 0.3s ease;
	background-color: #fff;
	margin-left: 100vw;
}
  #sideNavContent{ width: 100%; height: 100%; background-color: transparent; }
  .sideNavInside{ width: 100%; height: 100%; margin: 0; overflow: hidden; background-color: transparent; }
  .sideNavTop{
	width: 100%;
	height: auto;
	background-image: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,1));
	backdrop-filter: blur(2px);
	overflow-y: hidden;
}
  .sideNavTopBar{ width: auto; height: auto; margin: 8px; float: right; overflow-y: hidden; display: inline-flex; }
  .sideNavTopBarCloseBall{
	margin: 8px 5px 5px 5px;
	width: 33px; height: 33px; float: right;
	background-image: linear-gradient(45rad,#c90000,#d90000);
	border-radius: 5px; text-decoration: none; display: flex;
}
  .sideNavTopBarCloseBall p{ margin: 1px auto auto auto; color: white; display: block; font-size: 1.5em; font-weight: 600; }
  .sideNavBody{
	width: 200%;
	height: auto;
	background-color: transparent;
	display:inline-flex;
	border-top: 1px solid #ddd;
	overflow-y: hidden;
}
  .sideNavimg{ width: 30vh; height:30vh; margin: 8px auto 0 auto; }
  #sideNaveFirstMenu{ width: 100%; height:100vh; background-color: #eee; position: relative; overflow: hidden; }
  .sideNavItem{ height: 60px; display: flex; text-decoration: none; overflow-y: hidden; margin: 5px 21px; padding: 0px; }
  .sideNavItem img{ overflow-y: hidden; width: 5vh; height: 5vh; padding: 5px 5px; }
  .sideNavItem p{
	margin-top: 8px; overflow-y: hidden; color: #666;
	padding: -1px 5px 0px 5px; font-weight: 700; font-size: 17px; font-family: 'Rubik', sans-serif;
}
  .sideNavItem p:hover{ color: #999; transition: ease 1s; }
  #sideNavSecondMenu{
	width: 100%; height:100vh; background-color: #fff;
	position: relative; left: 0%; transition: 0.15s ease; overflow: hidden;
}
  #sideNavSecondMenuInsideOne,
#sideNavSecondMenuInsideTwo,
#sideNavSecondMenuInsideThree{
	width: 100%; height: auto; display: none; margin: 0px;
	text-decoration: none; overflow: hidden;
}
  .icon{ width: auto; height: auto; padding: 0; }
  .icon img{ width: 33px; height: 33px; display: block; margin: auto; }
  .option{ color: #777; margin: auto 13px; padding-left: 1px; font-weight: 700; font-size: 21px; }
  .sideNavSecondMenuActualItem{
	margin: auto 0; height: auto; width: 100%; padding:13px 8px;
	overflow-y: hidden; display: inline-flex; text-decoration: none;
	border-bottom: 1px #ddd solid;
}
  .sideNavSecondMenuActualItem img{ width: 33px; height: 33px; margin: 8px; }
  .sideNavSecondMenuActualItem h4{ color: #777; margin: auto 13px; padding-left: 1px; font-weight: 700; font-size: 21px; }
  .languaje{ width: 100vw; }
  .dropbtn{ display: inline-flex; width: 100vw; }
  .dropdown-content{
	text-align: left; display: none; position: absolute; height: auto;
	width: 75%; background-color: #fefefe; border-radius: 21px;
	left: 13px; top: 233px; animation: 0.5s ease x; z-index: 1;
}
  .dropdown-content a{
	margin: 13px; padding: 8px 3px 0px 3px; width: auto; height: 30px;
	text-align: left; text-decoration: none; color: #000; transition: .5s ease;
	animation: zoom 1s ease; border-bottom: 1px solid #ddd; display: inline-flex;
}
  .dropdown-content a:hover{ background-color: #eee; border-bottom: 1px solid #008080; }
  .dropdown-content img{ width: 33px; height: 21px; margin: 0 5px; }
  .dropdown-content p{ margin: auto 0px; font-size: 17px; }
  .footer{ width: 96vw; }
  .box_footer_father{ display: inline-grid; width: 100%; padding: 1% 10%; }
  .box_footer_son{ display: inline-grid; width: 100%; margin: 0%; }
  .box_footer_son a{ margin: 8px; font-size: 18px; }
  .bottom{ width: 85%; margin: 0 5%; }
}
.container {
	max-width: 900px;
	margin: 25px auto;
	padding: 25px;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0px 8px 25px rgba(0,0,0,0.1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body#body { color: var(--txt); font-family: Arial, Helvetica, sans-serif; }
#header { z-index: 99999 !important; }
#top { position: absolute; top: 0; left: 0; right: 0; z-index: 100; background: transparent !important; }
#top .topHeader { background: #fff !important; width: 100%; margin: 0; padding: 4px 6%; }
/* Sin bordes en la cabecera (top / topHeader / bottomHeader / header) */
#header, #top, #top .topHeader, .topHeader, .bottomHeader { border: 0 !important; border-bottom: 0 !important; }
#top .bottomHeader { background: transparent !important; border-bottom: 1px solid #fff; }
.section { width: 100%; padding: 72px 20px 90px; }
.section .container { max-width: 1360px; margin: 0 auto; }
.paq-hero { position: relative; width: 100%; height: 100vh; min-height: 560px; overflow: hidden; background: #000; }
.paq-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.paq-hero::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.55); z-index: 1; }
.paq-hero-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 26vh 24px 48px; gap: 34px; }
.paq-hero-legend { color: #fff; font-size: clamp(24px,4vw,46px); font-weight: 300; letter-spacing: 3px; text-transform: uppercase; text-shadow: 0 2px 18px rgba(0,0,0,.5); display:inline-block; max-width:min(1100px,92%); will-change:clip-path,opacity,transform; }
/* Slider de texto del hero: salida y entrada con clip-path */
@keyframes heroClipOut { 0%{ clip-path:inset(0 0 0 0); opacity:1; transform:translateY(0); } 100%{ clip-path:inset(0 0 100% 0); opacity:0; transform:translateY(-14px); } }
@keyframes heroClipIn  { 0%{ clip-path:inset(100% 0 0 0); opacity:0; transform:translateY(14px); } 100%{ clip-path:inset(0 0 0 0); opacity:1; transform:translateY(0); } }
.paq-hero-legend.leaving  { animation: heroClipOut .5s cubic-bezier(.76,0,.24,1) forwards; }
.paq-hero-legend.entering { animation: heroClipIn  .6s cubic-bezier(.16,1,.3,1) forwards; }
.paq-hero-cards { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; }
.paq-choice { width: 210px; max-width: 42vw; aspect-ratio: 1/1; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.6); border-radius: 0; backdrop-filter: blur(4px); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; cursor: pointer; transition: .35s cubic-bezier(.19,1,.22,1); }
.paq-choice svg { width: 66px; height: 66px; }
.paq-choice span { font-size: 20px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; }
.paq-choice:hover, .paq-choice.active { background: rgba(255,255,255,.18); border-color: #fff; transform: translateY(-6px); }
.paq-hero-hint { color: rgba(255,255,255,.75); font-size: 14px; letter-spacing: 1px; }
:root {
  --gold: #c8a96b;
  --gold-deep: #a9863f;
  --gold-soft: #b8935a;
  --ink: #1a1a1a;
  --txt: #2c2c2c;
  --muted: #6b6b6b;
  --line: #e7e5df;
  --bg-soft: #f7f6f2;
  --card: #ffffff;
  --shadow: 0 18px 48px rgba(20,20,20,.08);
}

#paquetesSection { background: var(--bg-soft); }

.paq-section-title { position: relative; color: var(--ink); font-size: clamp(26px,3.4vw,42px); font-weight: 300; text-align: center; margin-bottom: 54px; letter-spacing: 4px; text-transform: uppercase; }

.paq-section-title::after { content: ""; display: block; width: 62px; height: 2px; margin: 20px auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

.grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }

.card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 0; overflow: hidden; box-shadow: 0 12px 34px rgba(20,20,20,.06); transition: transform .45s cubic-bezier(.19,1,.22,1), box-shadow .45s ease, border-color .45s ease; }

.card:hover { transform: translateY(-4px); box-shadow: 0 26px 54px rgba(20,20,20,.11); border-color: rgba(200,169,107,.5); }

.carousel { position: relative; width: 100%; height: 340px; overflow: hidden; background: #f0efea; }

.slides { display: flex; height: 100%; transition: transform .6s cubic-bezier(.19,1,.22,1); }

.slide { min-width: 100%; height: 100%; flex-shrink: 0; position: relative; }

.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top,rgba(0,0,0,0.16),rgba(0,0,0,0) 45%); pointer-events: none; }

.slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.no-image { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 15px; letter-spacing: 1px; text-transform: uppercase; background: #f0efea; }

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 0;
    border: 1px solid rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.14);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    transition: .3s ease;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.card:hover .nav-btn { opacity: 1; }

.nav-btn:hover { background: #fff; color: var(--ink); border-color: #fff; }

.nav-prev { left: 14px; }

.nav-next { right: 14px; }

.dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; }

.dot { width: 18px; height: 2px; border: none; border-radius: 0; background: rgba(255,255,255,0.6); cursor: pointer; transition: .3s ease; }

.dot.active { background: var(--gold); }

.badge-offer { position: absolute; top: 16px; left: 16px; z-index: 4; background: rgba(255,255,255,0.9); color: var(--gold-deep); border: none; padding: 7px 14px; border-radius: 0; font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; backdrop-filter: blur(4px); }

.card-body { padding: 28px 28px 32px; background: var(--card); }

.top-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 22px; }

.hotel-name { font-size: 23px; line-height: 1.18; font-weight: 500; letter-spacing: .2px; color: var(--ink); }

.price-box { flex-shrink: 0; min-width: 118px; text-align: right; padding: 0; background: transparent; border: none; color: var(--ink); }

.price-box .label { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 6px; }

.price-box .amount { font-size: 27px; font-weight: 600; line-height: 1; color: var(--ink); letter-spacing: .5px; }

.price-box .currency { display: block; margin-top: 6px; font-size: 11px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }

.price-box .approx { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.4; }

.meta { display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; padding-top: 18px; border-top: 1px solid var(--line); }

.meta-item { display: flex; gap: 8px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }

.meta-item strong { color: var(--gold-deep); font-weight: 600; letter-spacing: 1px; }

.actions { display: flex; gap: 12px; }

.btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 16px 18px; border-radius: 0; font-weight: 600; font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; transition: .3s ease; }

.btn-primary { background: var(--ink); color: #fff; border: 1px solid var(--ink); }

.btn-primary:hover { background: transparent; color: var(--ink); border-color: var(--ink); }

.empty-state { text-align: center; padding: 64px 28px; background: var(--card); border-radius: 0; border: 1px solid var(--line); box-shadow: 0 12px 34px rgba(20,20,20,.06); }

.empty-state h3 { font-size: 26px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 14px; color: var(--ink); }

.empty-state p { font-size: 15px; line-height: 1.8; color: var(--muted); }

@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 768px) {
  .paq-hero { height: 88vh; }
  .paq-hero-inner { justify-content: flex-start; padding: 22vh 20px 32px; gap: 24px; }
  .paq-choice { width: 160px; gap: 12px; }
  .paq-choice svg { width: 52px; height: 52px; }
  .paq-choice span { font-size: 16px; }
  .section { padding: 48px 16px 64px; }
  .grid { grid-template-columns: 1fr; gap: 22px; }
  .carousel { height: 255px; }
  .nav-btn { opacity: 1; }
  .top-row { flex-direction: column; }
  .price-box { width: 100%; text-align: left; }
  .actions { flex-direction: column; }
  .hotel-name { font-size: 24px; }
}

/* ===== Extraido del inline de paquetes/index.php (intro + padding) ===== */


.intro-loader{ position:fixed; inset:0; z-index:99999; background:#fff; overflow:hidden; display:flex; align-items:center; justify-content:center; animation: introLift 1.15s cubic-bezier(.76,0,.24,1) forwards 2.8s; }
.intro-inner{ display:flex; flex-direction:column; align-items:center; gap:clamp(24px,5vh,44px); }
.intro-spinner{ position:relative; width:132px; height:132px; display:flex; align-items:center; justify-content:center; }
.intro-spinner::before{ content:""; position:absolute; inset:0; border-radius:50%; border:3px solid #e3f0f0; border-top-color:#008080; border-right-color:#00c0c0; animation: introSpin 1s linear infinite; }
.intro-logo{ width:76px; height:76px; object-fit:contain; }
.intro-words{ display:flex; align-items:baseline; gap:clamp(14px,4vw,42px); overflow:hidden; padding:3px 0; }
.intro-word{ display:inline-block; font-family:"Rubik"; font-weight:500; text-transform:uppercase; letter-spacing:3px; font-size:clamp(15px,2.6vw,26px); line-height:1; opacity:0; transform:translateY(120%); clip-path:inset(100% 0 0 0); animation: introTextIn .85s cubic-bezier(.16,1,.3,1) forwards; }
.intro-word:nth-child(1){ color:#002F2F; animation-delay:.45s; }
.intro-word:nth-child(2){ color:#008080; animation-delay:.95s; }
.intro-word:nth-child(3){ color:#00c0c0; animation-delay:1.45s; }
@keyframes introSpin{ to{ transform:rotate(360deg); } }
@keyframes introTextIn{ 0%{ transform:translateY(120%); opacity:0; clip-path:inset(100% 0 0 0); } 60%{ opacity:1; } 100%{ transform:translateY(0); opacity:1; clip-path:inset(0 0 0 0); } }
@keyframes introLift{ 0%{ transform:translateY(0); clip-path:polygon(0 0,100% 0,100% 100%,0 100%); } 55%{ clip-path:polygon(0 0,100% 0,100% 78%,0 100%); } 100%{ transform:translateY(-100%); clip-path:polygon(0 0,100% 0,100% 0,0 0); visibility:hidden; } }
:root{ --side-pad:5%; }
@media (max-width:1024px){ :root{ --side-pad:2%; } }
.titleSlider{ padding-left:var(--side-pad) !important; padding-right:var(--side-pad) !important; }
.carousel-track{ max-width:none !important; margin-left:var(--side-pad) !important; margin-right:var(--side-pad) !important; }
.itemsInside{ width:auto !important; margin-left:var(--side-pad) !important; margin-right:var(--side-pad) !important; box-sizing:border-box; }
.productsInside{ width:auto !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; padding-left:var(--side-pad) !important; padding-right:var(--side-pad) !important; box-sizing:border-box; }
.footer{ width:auto !important; margin-left:var(--side-pad) !important; margin-right:var(--side-pad) !important; }
.footer .box_footer_father{ padding-left:0 !important; padding-right:0 !important; }
.footer .bottom{ width:auto !important; margin-left:0 !important; margin-right:0 !important; }

/* header/top al mismo padding lateral (5% / 2%) */
#header{ padding-left:var(--side-pad) !important; padding-right:var(--side-pad) !important; box-sizing:border-box; }
.topHeader{ margin:0 !important; width:100% !important; padding-left:var(--side-pad) !important; padding-right:var(--side-pad) !important; box-sizing:border-box; }

/* ===== Slider promo: "paga hoy, úsalo cuando quieras" (antes del hero) ===== */
.promo-slider{position:relative;width:100vw;height:100vh;height:100dvh;max-width:100%;overflow:hidden;background:#0e0e0e}
.promo-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.1s ease;display:flex;align-items:center}
.promo-slide.active{opacity:1}
.promo-slide::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.34);z-index:1}
.promo-slide::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.20) 60%,transparent);z-index:1}
.promo-content{position:relative;z-index:2;color:#fff;max-width:680px;padding:0 6%}
.promo-kicker{display:inline-block;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#e7d3a3;background:rgba(200,169,107,.14);border:1px solid rgba(200,169,107,.5);border-radius:999px;padding:6px 15px;margin-bottom:16px;backdrop-filter:blur(4px)}
.promo-content h2{font-size:clamp(25px,3.8vw,44px);font-weight:600;line-height:1.08;margin-bottom:13px;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.promo-content p{font-size:clamp(14px,1.5vw,18px);line-height:1.5;max-width:500px;opacity:.94}
.promo-dots{position:absolute;bottom:18px;left:0;right:0;z-index:3;display:flex;gap:9px;justify-content:center}
.promo-dots button{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.45);cursor:pointer;padding:0;transition:.35s ease}
.promo-dots button.active{background:#e7d3a3;width:26px;border-radius:999px}
@media (max-width:768px){
  .promo-content{padding:0 5%}
  .promo-content p{max-width:100%}
}

/* Flecha indicadora de scroll en el slider (rebota en el eje Y) */
.promo-scroll{position:absolute;left:50%;bottom:44px;z-index:3;color:#fff;opacity:.9;pointer-events:none;animation:promoBounce 1.6s ease-in-out infinite}
.promo-scroll svg{width:32px;height:32px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}
@keyframes promoBounce{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(12px)}
}
@media (prefers-reduced-motion:reduce){ .promo-scroll{animation:none} }

/* Nota de impuestos junto al precio en las cards */
.price-box .tax-note{font-size:14px;font-weight:500;color:#b89b63;letter-spacing:.3px;white-space:nowrap;vertical-align:baseline}