*{text-decoration:none;
margin: 0px;}


body {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  background-color: #fff;
}

 header{
  display:flex ; /*Para poder usar flexbox en todo el header*/
  border-bottom: 3px solid black ; /*Linea inferior del header*/
  max-width: 100%;
  margin: 0 auto;
  text-decoration: none !important;
 
}

.logo{
  flex:0 0 5%;
  display:flex;

}

.logo img{
 width: 80%;            
 height: auto;           
  object-fit: contain;    /* mantiene proporción sin deformar */
}

.textlogo{
 
   flex:0 0 10%;
   text-align:left;
   display:flex;
   align-items:center;
   font: bold 14px Arial, sans-serif;
}

nav ul li a {
  color: black !important;              
  text-decoration: none !important;     
  font-weight: bold;                    /* (Opcional) Negrita */
  font-size: 20px;                      
  transition: color 0.3s ease;  
  padding: 10px;        
}

/* Efecto hover */
nav ul li a:hover {
  color: #007bff !important;            /* Cambia a azul (puedes elegir otro color) */
}

nav{

    flex:0 0 70%;
    display:flex;
    align-items:center;  
    justify-content:flex-end;  /*Para que los elementos del nav se vayan al final (derecha)*/
    text-decoration: none !important;
    
}
nav ul{   
   
   display:flex;
   list-style:none;
   gap:30px;  /*Para que ocupen mas espacio*/
   font-size:30px;
   justify-items: right;
   text-decoration:none !important;
   
}
/*------------Contenido del main-------------*/
/*Uso block para que no esten alineados horizontalmente sino en vertical */
main {
  display: block;
  
}

/* Centra el título entre los dos bloques */
main h1 {
  text-align: center;
}
main h2 {
  text-align: center;
  font-size: 35px ;
}

/* Contenedor superior */

.container_ciudad {
  display: flex;                /* Organiza img y article en fila */
  align-items: center;          /* Centra verticalmente */
  justify-content: flex-start;  /* Comienza desde la izquierda */
  gap: 40px 20px;                    /* Espacio entre imagen y texto */
  max-width: 60%;            /* Ancho máximo del contenedor */
  margin: 10px auto;        /* Centrado horizontal con margen superior e inferior */
  padding: 20px;                /* Espacio interno */
  border-bottom: 1px solid gray;    /* Línea divisoria */



}

.container_ciudad iframe {
  width: 70%;            /* ocupa la mitad del contenedor */
  aspect-ratio: 16/9;    /* mantiene proporción del video */
  border-radius: 8px;
  object-fit: cover;
  max-height: 650px;     /* altura máxima opcional */
}


.container_ciudad article {
  width: 30%;                   /* El texto ocupa la otra mitad */
  background-color: #d0e2d3;    /* Color similar al ejemplo */
  padding: 20px;
  border-radius: 8px;           /* Bordes redondeados */
  height: 550px;
}


/* Contenedor inferior */


/* Contenedor del carrusel: tamaño fijo y centrado */
  #carruselChanChan {
    width: 80%;
    max-width: 1200px;   /* ancho máximo opcional */
    height: 600px;       /* altura fija */
    margin: 0 auto;      /* centrado horizontal */
    overflow: hidden;    /* evita que se vea contenido fuera del contenedor */
    border-radius: 8px;
  }

  /* Imágenes dentro del carrusel */
  #carruselChanChan .carousel-inner img {
    width: 100%;
    height: 100%;        /* igual altura que el contenedor */
    object-fit: cover;   /* recorta sin deformar */
  }


.container_turistico {
  padding: 40px 20px;       /*relleno arriba/abajo y a los lados*/
  max-width: 70%;        /*maximo ancho para evitar distorsion*/
  margin: 10px auto;
   display: flex;                    /* Imagen y texto en una fila */
  justify-content: center;          /* Centra horizontalmente los elementos */
  align-items: center;              /* Centra verticalmente dentro del contenedor */
  background-color:  #d0e2d3;
  border-radius: 8px;
  
}
.container_ciudad img,.container_turistico img {
  width: 300px;      /* ancho fijo */
  height: 200px;     /* alto fijo */
  object-fit: cover; /* recorta la imagen manteniendo proporción */
  border-radius: 8px; /* opcional, bordes redondeados */
}


/* Estilo del texto dentro de los article */
article h1 {
  text-align: center;
  text-decoration:underline;
  font-size: 60px;
}

article p {
  text-align: left;
  font-size: 16px;
  margin: 0 auto;
  max-width: 400px;
  font: bold ;
}
article a{
  text-align: center;
  margin: 0 auto;
  max-width: 400px;
  font: bold ;  
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn_reservar {
  background-color: #2a6912;
  color: white;
  border: 2px solid #004085;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  max-width: 150px;
  text-align: center;
}
.btn_reservar:hover {
  background-color: #0056b3;
}
main article{padding:20px}

/* Pie de pagina (footer)*/

footer {
  padding: 20px;
  border:2px solid black;
  max-width: 100%;
  margin: 0 auto;
}



footer .footer-content {
  display: flex;
  justify-content: space-between; /* Texto a la izquierda (centrado internamente) e iconos a la derecha */
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  flex-wrap: wrap;  /* Para ser responsivo o adaptable en diferentes pantallas*/
}

/* Centrar el texto dentro de su contenedor */
footer .footer-text {
  flex: 1;                     /* Ocupa todo el espacio disponible */
  text-align: center;           
}

/* Iconos de redes sociales */
footer .social-icons a i {
  font-size: 36px;             
  margin-left: 15px;
  transition: transform 0.3s;
}

/* Hover */
footer .social-icons a:hover i {
  transform: scale(1.2);
}

/* Colores oficiales */
footer .social-icons a.whatsapp i { color: #25D366; }
footer .social-icons a.facebook i { color: #1877F2; }
footer .social-icons a.instagram i { color: #E4405F; }
footer .social-icons a.youtube i { color: #FF0000; }