* {
   box-sizing: border-box;
}

body {
   font-family: "Caveat", sans-serif;
   font-optical-sizing: auto;
   text-align: center;
   margin: 0;
   padding: 0;
   background-image: url(imag/body.avif);
   background-size: cover;
   background-repeat: no-repeat;
   overflow-x: hidden;
}

header {
   background-image: url(imag/cabecera.avif);
   height: 280px;
   color: #45454b;
   font-style: italic;
   padding: 30px;
   font-size: 30px;
   background-size: cover;
   background-repeat: no-repeat;
}

nav ul {
   list-style: none;
   padding: 0;
}

nav ul li {
   display: inline;
   margin: 0 10px;
}

nav ul li a {
   color: #45454b;
   text-decoration: none;
   font-size: 20px;
}

nav ul li a:hover {
   color: red;
}

#hero {
   padding: 50px 20px;
   color: antiquewhite;
   background-size: cover;
   background-repeat: no-repeat;
}

.parrafo {
   text-align: left;
   font-size: 25px;
   color: #e6e6f5;
   margin-bottom: 40px;
}

#botonAgregar {
   padding: 10px 20px;
   border: none;
   font-family: "Caveat", sans-serif;
   font-size: 25px;
   margin-left: 10%;
   background-color: #11f737;
   color: #0C0C3A;
   border-radius: 10px;
   cursor: pointer;
   margin-right: 2%;
}

#botonAgregar:hover {
   transform: scale(1.1);
   background-color: #149c2b;
}

#item {
   border-radius: 5px;
   width: 30%;
   padding: 10px;
   margin: 5px 0;
   margin-bottom: 5%;
   background-color: aquamarine;
}

#lista {
   color:#e6e6f5;
   text-align: left;
   font-size: 25px;
}

#lista:hover {
   cursor: pointer;
}

/* ---- CONTENEDOR PRINCIPAL ---- */
.contenedor {
   display: flex;
   flex-direction: row;       
   justify-content: flex-start;   
   align-items: center;       
   padding: 30px 5% 30px 8%;        
   flex-wrap: wrap;
   gap: 50px;
}

/* ---- LISTA DE PASOS (izquierda) ---- */
.lista {
   text-align: left;         
   color: #e6e6f5;
   font-size: 28px;
   list-style: none;
   padding: 0;
   min-width: 280px;
}

#button {
   display: inline-block;
   padding: 10px 20px;
   font-size: 25px;
   background-color: #11f737;
   color: #0C0C3A;
   border-radius: 10px;
   cursor: pointer;
   margin-top: 20px;
   text-decoration: none;
}

#button:hover {
   background-color: #149c2b;
}

/* ---- SLIDESHOW (centro) ---- */
.contenedor-slideshow {
   display: flex;
   flex-direction: column;    
   align-items: center;
   gap: 15px;  
   width: 100%;
   max-width: 700px;                
}

#player {
   position: absolute;
   width: 1px;
   height: 1px;
   opacity: 0;
   pointer-events: none;      
}

#slideshow {
   width: 100%;           
   height: 400px;           
   border-radius: 15px;
   overflow: hidden;
   position: relative;
}

.slide {
   position: absolute;
   top: 0;  
   left: 0; 
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: 0;
   transition: opacity 1s ease-in-out;
}

.slide.activa {
   opacity: 1;
}

#btnPlay {
   padding: 12px 30px;
   font-size: 22px;
   font-family: "Caveat", sans-serif;
   background-color: #11f737;
   color: #0C0C3A;
   border: none;
   border-radius: 10px;
   cursor: pointer;
}

#btnPlay:hover {
   background-color: #149c2b;
   transform: scale(1.05);
}

.descubre {
   color: #e6e6f5;
   font-size: 2.5rem;   
   font-weight: bold;
   margin-top: 20px;
}

/* ---- SECCIÓN FREETOURS ---- */
.titulo-elige-destino {
   margin-left: 5%;
   margin-bottom: 1%;
   font-size: 40px;
   padding: 0px 40px 20px 40px;
   text-align: left;
   color: #e6e6f5;
}

#Freetours {
   margin-left: 2%;
   font-size: 25px;
   padding: 20px;
   text-align: center;
   color: #cbdb3c;
}

.ciudades {
   margin-top: 1%;
   max-width: 100%;
   height: auto;
   cursor: pointer;
   box-sizing: border-box;
   border-radius: 20px;
   transition: transform 0.4s ease-in-out;
}

.ciudades img {
   display: block;
   margin: 0 auto;
   width: 80%;
   height: 250px;
   object-fit: cover;
   border-radius: 10px;
   border: 1px solid cyan;
   box-shadow: 0px 0px 15px cyan, 0px 0px 15px cyan inset;
}

.ciudades:hover {
   transform: scale(1.1);
}

/* ---- CARRITO ---- */
#titulo-carrito {
   margin-left: 2%;
   text-align: left;
   font-size: 30px;
   color: #0C0C3A;
}

#carrito {
   margin-left: 5%;
   text-align: left;
   font-size: 25px;
   color: #0C0C3A;
}

#total {
   text-align: center;
   font-size: 40px;
   color: #0C0C3A;
}

#carrito button {
   margin-left: 10px;
   padding: 4px 8px;
   background-color: #c0392b;
   color: #0C0C3A;
   border: none;
   border-radius: 4px;
   cursor: pointer;
}

#carrito button:hover {
   background-color: #752c23;
}

/* ---- FORMULARIO ---- */
#reserva {
   color: #0C0C3A;
}

a {
   color: #cbdb3c;
   text-decoration: none;
}

#reserva input, #reserva textarea {
   width: 80%;
   padding: 10px;
   margin: 5px 5px 20px;
   border-radius: 10px;
   background-color: aquamarine;
}

.boton {
   padding: 10px 20px;
   font-family: "Caveat", sans-serif;
   margin-left: 2%;
   font-size: 25px;
   background-color: #11f737;
   color: #0C0C3A;
   border-radius: 5px;
   cursor: pointer;
   border: none;
}

.boton:hover {
   transform: scale(1.1);
   background-color: #149c2b;
}

/* ---- FOOTER ---- */
footer {
   background-color: #4141fc;
   color: #cbdb3c;
   padding: 10px;
}

/* ---- RESPONSIVE: Tablet (>= 768px) ---- */
@media (min-width: 768px) {
   #hero {
       padding: 80px;
   }

   .ciudades {
       display: inline-block;
       width: 30%;
       margin: 1%;
   }

   #reserva input, #reserva textarea {
       width: 60%;
   }
}

/* ---- RESPONSIVE: Escritorio (>= 1024px) ---- */
@media (min-width: 1024px) {
   header {
       display: flex;
       justify-content: space-between;
       padding: 15px 50px;
   }

   nav ul li {
       margin: 0 15px;
   }

   #hero {
       font-size: 2.5rem;
   }

   .ciudades {
       width: 28%;
   }

   #reserva input, #reserva textarea {
       width: 40%;
   }
}