@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');
/* CSS Document
font-family: 'Lato', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Bebas Neue';

	Color wall  theme:  
	////////////////////// 
dark turqueise #002F2F
meddle turqueise #008080
light turquese #00c0c0
*/ 
html{
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}
body{
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
	scroll-behavior: smooth;
	overflow-x: hidden;
}

/* Estilo para Webkit (Chrome, Safari) */
html::-webkit-scrollbar {
  display: none
}
html::-webkit-scrollbar-track {
    background: transparent; /* Color del fondo de la scrollbar */
}
html::-webkit-scrollbar-thumb {
    background: #fff; /* Color del "pulgar" de la scrollbar */
    border-radius: 6px; /* Bordes redondeados */
	box-shadow: 0px 0px 0px 0px #aaa;
	transition: 1s ease;
}
html::-webkit-scrollbar-thumb:hover {
    background: #eee; /* Color cuando se pasa el ratón */
} 
 
/*████ keyframes for moves ████████████████████████████████████████████████████████*/
@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;  
	}
}
.SEO{
	display: none;
	height: 0px;
}

/*████ Start Desktop version  █████████████████████████████████████████████████████*/
/*████ Start Desktop version  █████████████████████████████████████████████████████*/
/*##########################################################
 0.0 header
##########################################################*/ 
#header {
            position: fixed; /* Make the header fixed */
            top: -10vh; /* Start off-screen (hidden) */
            left: 0;
            right: 0;
            height: 10vh;
            background-color: #fff;
			border-bottom: 1px solid #eee; 
            transition: top 0.3s; /* Smooth transition for the header */
			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;
}

/*##########################################################
 0.0 Top
##########################################################*/ 
  
#sideNav{ 
		display: none; 
	}	 
#top{ width: 100%; height: auto; background-color: transparent;}
.topHeader{
	margin: 0;
	width: 100%;
	height: auto;
	display: block; 
	padding: 0 10%;
	box-sizing: border-box;
}
.topHeaderItem{
	width: auto;
	height: auto;
	display: inline-flex;
	padding: 8px;
	float: right;
	text-decoration: none; 
	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:#002020;
	background-color: rgba(255,255,255,0.30);
	border-radius: 13px;
	backdrop-filter: blur(4px); 
}
.menuIconsItem img{ width: 6vh; height: 6vh; }


/*##########################################################*/
 /*   0.1 index  */
.video-container {
  position: relative;
  width: 100vw;
  height: 100vh;
	margin-top: -21vh;
  overflow: hidden;
	z-index: -3;
}
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* asegura que el video llene toda la pantalla */
}
.video-container .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.5); /* capa oscura encima */
 
}
#title{
	position: absolute;
	padding-top: 21vh;
	color: white; 
	margin: 0 10%; 
	font-size: 5em;
}

 

/*##########################################################*/
 /*   0.3 alltours */
/*##########################################################*/		
.allTours{
  position: relative;
  width: 100vw;
  height: 100vh; 
  overflow: hidden;
	z-index: 1;
	background-image: url("../bg.jpg");
	background-size: 100% 120%; 
}
.allTours .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.5); /* capa oscura encima */
	
 
}
#titleTours{
	position: relative;
	padding-top: 21vh;
	color: white; 
	margin: 0 10%; 
	font-size: 2.5em;
}
#text{ 
	position: relative; 
	color: white; 
	margin: 0 10%; 
	font-size: 1.5em;
}
#btn{
	text-decoration: none;
	position: relative;
	color: #fff; 
	background-color: #008080;
	box-shadow: 0 0 21px 3px #333;
	margin: auto; 
	font-size: 1.3em;
	padding: auto 5px;
	border-radius: 33px;
  font-family: 'Nanum Gothic', sans-serif;
	transition: all ease 1s;
}
#btn:hover{
	color: #00c0c0; 
	background-color: #002020;
}

/*##########################################################*/
 /*   0.1 Index */
/*##########################################################*/	
.index{
	width: 100%;
	height: auto;
	background-image: url("../bg.jpg");
	background-size: 100vw 100vh;
	position: relative;
	margin-top: 0vh;
}

    h1 {
      text-align: center;
      color: #0077cc;
      margin-bottom: 25px;
      font-size: 26px;
      letter-spacing: 0.5px;
    }
    form {
      background: white;
      padding: 25px;
      border-radius: 15px;
      max-width: 600px;
      margin: 0 auto 30px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    }
    label {
      font-weight: bold;
      display: block;
      margin-top: 15px;
      color: #005fa3;
    }
    input[type="datetime-local"],
    select {
      width: 100%;
      box-sizing: border-box;
      padding: 12px 15px;
      border: 1.5px solid #cfd8dc;
      border-radius: 8px;
      font-size: 15px;
      transition: all 0.3s ease;
      color: #333;
      background-color: #fff;
      appearance: none;
    }
    input[type="datetime-local"]::-webkit-calendar-picker-indicator {
      cursor: pointer;
      opacity: 0.7;
      filter: invert(41%) sepia(77%) saturate(474%) hue-rotate(178deg) brightness(96%) contrast(96%);
    }
    input[type="datetime-local"]:focus,
    select:focus {
      border-color: #0077cc;
      box-shadow: 0 0 6px rgba(0,119,204,0.3);
      outline: none;
    }
    select {
      background-color: #f7f9fc;
      cursor: not-allowed;
      color: #333;
    }
    button {
      background: linear-gradient(135deg, #0077cc, #005fa3);
      color: white;
      border: none;
      cursor: pointer;
      margin-top: 20px;
      font-weight: bold;
      width: 100%;
      padding: 14px;
      border-radius: 8px;
      font-size: 16px;
      letter-spacing: 0.5px;
      transition: all 0.3s ease;
    }
    button:hover {
      background: linear-gradient(135deg, #005fa3, #004c88);
      transform: scale(1.02);
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 20px;
      max-width: 1200px;
      margin: 0 auto 30px;
    }
    .car-card {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .car-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    }
    .car-card img {
      width: 121px;
      height: 89px;
		padding: 13px;
    }
    .car-card .info { padding: 15px; }
    .car-card h3 {
      margin: 0;
      color: #0077cc;
      font-size: 18px; 
    }
    .car-card p {
      margin: 4px 0;
      font-size: 14px;
      color: #333;
    }
    .car-card .price {
      background: #eee;
      color: #666;
      text-align: center;
      font-weight: bold;
      padding: 10px;
      font-size: 16px;
    }
    .select-btn {
      display: block;
      width: 90%;
      margin: 10px auto 15px;
      background: #28a745;
      color: white;
      border: none;
      border-radius: 6px;
      padding: 10px;
      cursor: pointer;
      font-weight: bold;
      font-size: 15px;
    }
    .select-btn:hover { background: #1e7e34; }
    #log {
      display: none;
      background: #fff7d1;
      border-left: 4px solid #ffc107;
      padding: 10px;
      border-radius: 6px;
      white-space: pre-wrap;
      margin-top: 20px;
      overflow-y: auto;
      max-height: 400px;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
    }
    /* 🔹 Estilos del bloque resumen */
    #resumenFechas {
      display: none;
      background: white;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      text-align: center;
      max-width: 600px;
      margin: 0 auto 30px;
    }
    #resumenFechas p {
      font-size: 16px;
      margin: 8px 0;
      color: #333;
    }
    #btnCambiar {
      margin-top: 15px;
      background: #f39c12;

      border: none;
      color: white;
      padding: 10px 20px;
      border-radius: 8px;
      cursor: pointer;
      font-weight: bold;
    }
    #btnCambiar:hover {
      background: #e67e22;
    }

    /* 🔹 Estilos placeholder móviles */
    .input-wrapper {
      position: relative;
      margin-top: 10px;
    }

    .placeholder-label {
      opacity: 0;
      position: absolute;
      top: 50%;
      left: 15px;
      transform: translateY(-50%);
      color: #9e9e9e;
      font-size: 18px;
      pointer-events: none;
      transition: all 0.2s ease;
    }
 
 
/*##########################################################*/
 /*   0.1 Footer  */
/*##########################################################*/		
.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;
}
.flex{
	display: inline-flex;
}
.div-flex img{
	width: 36px;
	height: 36px;
	margin: 1px;
}
.div-flex a{ 
	text-decoration: none;
	margin: 8px  ;
}

/*##########################################################*/
 /*   0.1 Bottoms  */
/*##########################################################*/	
.bottom{ 
	border-top: 2px solid  #D5E5E5;
	width: 80vw;
	height: auto;
	margin: 0 10vw;
	text-align: center;
	padding: 13px;
}
 

/*##########################################################*/
 /*   0.1 Cart  */
/*##########################################################*/	
.cart{
	width: 100px;
	height: 100px;
	position: fixed;
	background-image: linear-gradient(#00c0c0,#008080);
	bottom: 10%;
	right: 0;
	z-index: 99;
	text-decoration: none;
	border-bottom-left-radius: 13px;
	border-top-left-radius: 13px;
	text-align: center; 
}
.count{
	font-size: 21px;
	font-weight: 900; 
	margin-left: 45px;
	margin-top: 35px;
	position: absolute;
	color: goldenrod;
}
.cart img{
	width: 55px;
	height: 55px;
	margin-top: 21%;
}




/*##########################################################*/
 /*   0.0 recomendation  */
/*##########################################################*/	
.recomendation{
	width: 100%;
	height: 100%; 
	padding: 1px 10%;
}
.recomendation p{
	font-family: "Rubik";
	font-size: 33px;
	color: #333;
	font-weight: 100;
}
/*##########################################################*/
 /*   0.0 products  */
/*##########################################################*/	
.products{
	width: 100vw; 
	height: auto; 
	display: grid;
}
.productsInside{
	width: 80vw; 
	height: auto; 
	margin: 0vh 10vw;  
	
	display: flex;
    flex-wrap: wrap; /* Permite que los elementos envuelvan hacia abajo */
    max-width: 100%; /* Ancho máximo del contenedor */
    gap: 0px; /* Espacio entre los elementos */
}
.item1 { 
	background-color: #fff; 
	margin: 0px 0px;
	height: 300px;
    width: 250px; /* Ancho de cada item */
    padding: 10px;  
	display: block;
	text-decoration: none;
	
            flex: 3 3 calc(33% - 10px); /* Cada elemento ocupará el 50% del ancho menos el espacio del gap */
            box-sizing: border-box; /* Incluye el padding y el borde dentro del ancho */
            text-align: center; /* Centra el texto */
	 
}
.item1 img{ 
	height: 100%;
    width: 100%;   border-radius: 13px;
}
.item1 p{  
	color: #fff;
	font-weight: 100;
	font-family: "Rubik";
	font-size: 27px;
	margin: -5% 1% auto 1%;
	z-index: 0;
	position: absolute;
	background-color: rgba(0,0,0,0.30);
	padding: 3px;
	border-radius: 13px;
}






/* Mobile V 0.0.1  */
@media (max-width: 767px){
/*##########################################################
 0.0 header
##########################################################*/ 
/*##########################################################
 0.0 header
##########################################################*/ 
#header {
            position: fixed; /* Make the header fixed */
            top: -10vh; /* Start off-screen (hidden) */
            left: 0;
            right: 0;
            height: 10vh;
            background-color: #fff;
			border-bottom: 1px solid #eee; 
            transition: top 0.3s; /* Smooth transition for the header */
		 
			padding: 0 0vw;
			display: inline-flex;
        }
 
/*##########################################################
 0.0 top
##########################################################*/ 
#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 0% 0 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;
	}	
	
/* menu icons */
.menuIcons{
	width: 95%;
	height: auto;
	margin: auto;  
	padding-top: 13px;
	margin-top: 6vh;
	padding-bottom: -5vh;
	overflow-x: scroll;
	display: inline-flex;  
} 
/* Estilo para Webkit (Chrome, Safari) */
.menuIcons::-webkit-scrollbar {
    height:0px;
}
.menuIcons::-webkit-scrollbar-track {
    background: transparent; /* Color del fondo de la scrollbar */
}
.menuIcons::-webkit-scrollbar-thumb {
    background: #fff; /* Color del "pulgar" de la scrollbar */
    border-radius: 6px; /* Bordes redondeados */
	box-shadow: 0px 0px 0px 0px #aaa;
	transition: 1s ease;
	width: 0px;
}
.menuIcons::-webkit-scrollbar-thumb:hover {
    background: #eee; /* Color cuando se pasa el ratón */
} 		
.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 for mobile*/	
#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;
	}
.sideNavTopBarBall{
		width: 33px;
		height: 33px;
		float: right;
		background-image: linear-gradient(0rad,#ccc,#eee);
		border-radius: 50%;
		margin: 5px;
	}
.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;
	} 
.sideNavActualItem{
		width: 99%; 
		height: 50px;
		display: inline-flex;
		margin: 3px 0px;
		padding: 5px;
		background-color: white;
		text-decoration: none; 
		overflow-y: hidden;
		border-radius: 8px;
	}
.sideNavActualItem img{
		overflow-y: hidden;
		width: 33px;
		height: 33px;
		padding: 5px 5px;
	}
.sideNavActualItem p{	
		margin-top: 8px;
		overflow-y: hidden;
		color: #333;
		padding: -1px 5px 0px 5px;
		font-weight: 700;
		font-size: 21px;
		font-family: 'Rubik', sans-serif;
	} 
.sideNavActualItem p:hover{
		color: green;
		transition: ease 1s; 
	}
.sideNavItem p:hover{
		color: #999; 
		transition: ease 1s;
	}
/*   Sub Menu */
#sideNavSecondMenu{ 
		width: 100%;
		height:100vh;
		background-color: #fff; 
		position: relative;
		left: 0%;
		transition: 0.15s ease;
		overflow: hidden;
	}
#sideNavSecondMenuInsideOne{
			width: 100%;  
		height: auto;
		display: none;
		margin: 0px;
		text-decoration: none; 
		overflow: hidden;  
	} 
#sideNavSecondMenuInsideTwo{
			width: 100%;  
		height: auto;
		display: none;
		margin: 0px;
		text-decoration: none; 
		overflow: hidden; 
	} 
#sideNavSecondMenuInsideThree{
			width: 100%;  
		height: auto;
		display: none;
		margin: 0px;
		text-decoration: none; 
		overflow: hidden; 
	} 
/* ##### */
.sideNavSecondMenuItem{
		margin: 0;
		background-color: #eee;
		height: auto;
		width: 100%; 
		padding: 3px; 
		overflow-y: hidden;
		display: inline-flex;
		text-decoration: none;
		border-bottom: 1px #ddd solid;
	} 
.icon{
		width: auto; 
		height: auto; 
		padding: 0;
	}
.icon img{  
		width: 33px;
		height: 33px;
		display: block;
		margin: auto auto auto auto;
		
	}
.sideNavSecondMenuItem img{
		  width: 33px;
	 	 height: 33px;
		 margin: 8px;
	}
.sideNavSecondMenuItem h4{ 
		 color: #777;
		 margin: auto 13px;
		 padding-left: 1px;
		 font-weight: 700;
		 font-size: 21px;
	}
.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;
	} 
/* Language */	
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;
	}
.languaje{
	width: 100vw; 
	}	
.dropbtn{
	display: inline-flex;
	width: 100vw; 
}
.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;
	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;
}
.dropbtn:hover + .dropdown-content {
  display: inline-grid;
}
.dropdown-content:hover{
	 display: inline-grid
} 	

/*##########################################################*/
 /*   0.1 Index */
/*##########################################################*/	
.index{
	width: 100%;
	height: auto;
	background-image: url("../imgM.png");
	background-size: cover;
	position: relative;
	padding: 0;
} 	
 .placeholder-label { opacity: 1; }
	
/*##########################################################*/
 /*   0.1 index  */
.video-container {
  position: relative;
  width: 100vw;
  height: 100vh;
	margin-top: -21vh;
  overflow: hidden;
	z-index: -3;
}
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* asegura que el video llene toda la pantalla */
}
.video-container .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.5); /* capa oscura encima */
 
}
#title{
	position: absolute;
	padding-top: 21vh;
	color: white; 
	margin: 0 10%; 
	font-size: 3em;
}
 
 
/*██████████████████████████████████████████████████████████*/
 /*   0.0 Footer  */
/*██████████████████████████████████████████████████████████*/
.footer{ 
		width: 96vw;
		height: auto; 
		background-color: #EDF4F4;	
	margin: 1vh 1vw;
	border-radius: 13px;
	}		
	.box_footer_father{
	display: inline-grid;
	width: 100%;
	height: auto;
		padding: 1% 10%;
		}
	.box_footer_son{
	display: inline-grid;
	width: 100%;
	margin: 0%;
	height: auto;
		}			
	.box_footer_son a{
	margin: 8px;
		font-size: 18px;
	}
	/*##########################################################*/
 /*   0.1 Bottoms  */
/*##########################################################*/	
.bottom{ 
	border-top: 2px solid  #D5E5E5;
	width: 85%;
	height: auto;
	margin: 0 5%;
	text-align: center;
	padding: 13px;
}
 
	
/*##########################################################*/
 /*   0.1 Cart  */
/*##########################################################*/	
.cart{
	width: 80px;
	height: 80px;
	position: fixed;
	background-image: linear-gradient(#00c0c0,#008080);
	bottom: 0%;
	right: 0;
	z-index: 99;
	text-decoration: none;
	border-bottom-left-radius: 0px;
	border-top-left-radius: 13px;
	border-top-right-radius: 0px;
	text-align: center; 
}
.count{
	font-size: 21px;
	font-weight: 900; 
	margin-left: 35px;
	margin-top: 30px;
	position: absolute;
	color: goldenrod;
}
.cart img{
	width: 55px;
	height: 55px;
	margin-top: 21%;
}

 




/*##########################################################*/
 /*   0.0 recomendation  */
/*##########################################################*/	
.recomendation{
	width: 100%;
	height: 100%; 
	padding: 3% 3% 0 3%;
}
.recomendation p{
	font-family: "Rubik";
	font-size: 23px;
	color: #333;
	font-weight: 100;
}


/*##########################################################*/
 /*   0.0 products  */
/*##########################################################*/	
.products{
	width: 100vw; 
	height: auto; 
	display: grid;
}
.productsInside{
	width: 100vw; 
	height: auto; 
	margin: 0vh 0vw;  
	
	display: flex;
    flex-wrap: wrap; /* Permite que los elementos envuelvan hacia abajo */
    max-width: 100%; /* Ancho máximo del contenedor */
    gap: 0px; /* Espacio entre los elementos */
}
.item1 { 
	background-color: #fff; 
	margin: 0px 0px;
	height: 150px;
    width: 250px; /* Ancho de cada item */
    padding: 0px;  
	display: block;
	text-decoration: none;
	  
            flex: 2 2 calc(50% - 10px); /* Cada elemento ocupará el 50% del ancho menos el espacio del gap */
            box-sizing: border-box; /* Incluye el padding y el borde dentro del ancho */
            text-align: center; /* Centra el texto */
	 
}
.item1 img{ 
	height: 100%;
    width: 100%; 
	border-radius: 0;
}
.item1 p{  
	color: #008080;
	font-weight: 100;
	font-family: "Rubik";
	font-size: 17px;
	margin: -55px 0% auto 0%;
	z-index: 0;
	position: relative;
	background-color: rgba(255,255,255,0.8);
	padding: 3px 0;
	width: 100%;
	border-radius: 0px;
}	

	
	
#btn{
	text-decoration: none;
	position: relative;
	color: #fff; 
	background-color: #008080;
	box-shadow: 0 0 21px 3px #333;
	margin: 4% auto; 
	font-size: 1.3em;
	padding: auto 5px;
	border-radius: 33px;
  font-family: 'Nanum Gothic', sans-serif;
	transition: all ease 1s;
}
#btn:hover{
	color: #00c0c0; 
	background-color: #002020;
}
}









/* ===== Extraido del inline de autos/index.php (intro loader + padding + rediseno buscador) ===== */


.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; }


/* Sección de búsqueda */
.index{ background:#f4f7f7 !important; padding:52px 16px 64px; }
.index h1{ color:#002F2F !important; letter-spacing:2px; text-transform:uppercase; font-weight:300; }

/* Card del formulario de búsqueda */
#consultaForm{
  background:#fff !important; border:1px solid #dde6e6 !important; border-radius:0 !important;
  box-shadow:0 18px 48px rgba(0,47,47,.08) !important; max-width:560px; padding:34px 32px !important;
}
#consultaForm label{ color:#5f7373 !important; text-transform:uppercase; letter-spacing:1px; font-size:12px; font-weight:600; margin-top:18px; }
#consultaForm input[type="datetime-local"],
#consultaForm select{
  border:1px solid #dde6e6 !important; border-radius:0 !important; color:#002F2F !important; background:#fff !important;
}
#consultaForm input[type="datetime-local"]:focus,
#consultaForm select:focus{ border-color:#008080 !important; box-shadow:none !important; }
.placeholder-label{ color:#8aa0a0 !important; font-size:15px !important; }
#consultaForm button{
  background:#002F2F !important; color:#fff !important; border:1px solid #002F2F !important; border-radius:0 !important;
  letter-spacing:2.5px; text-transform:uppercase; font-size:13px; font-weight:600; margin-top:26px;
}
#consultaForm button:hover{ background:#008080 !important; transform:none !important; }

/* Resumen de fechas */
#resumenFechas{ background:#fff !important; border:1px solid #dde6e6 !important; border-radius:0 !important; box-shadow:0 12px 34px rgba(0,47,47,.06) !important; }
#resumenFechas h2{ color:#002F2F !important; text-transform:uppercase; letter-spacing:1px; font-weight:500; }
#resumenFechas p{ color:#33403f !important; }
#btnCambiar{ background:#002F2F !important; border-radius:0 !important; letter-spacing:1.5px; text-transform:uppercase; font-size:12px; }
#btnCambiar:hover{ background:#008080 !important; }

/* Cards de resultados */
.car-card{ border:1px solid #dde6e6 !important; border-radius:0 !important; box-shadow:0 12px 34px rgba(0,47,47,.06) !important; transition:transform .35s cubic-bezier(.19,1,.22,1), box-shadow .35s ease, border-color .35s ease; }
.car-card:hover{ transform:translateY(-4px); box-shadow:0 26px 54px rgba(0,47,47,.12) !important; border-color:rgba(0,128,128,.45) !important; }
.car-card h3{ color:#002F2F !important; font-weight:500; letter-spacing:.3px; }
.car-card .price{ background:#f4f7f7 !important; color:#002F2F !important; letter-spacing:.5px; }
.select-btn{ background:#002F2F !important; color:#fff !important; border-radius:0 !important; letter-spacing:2px; text-transform:uppercase; font-size:13px; }
.select-btn:hover{ background:#008080 !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; }