/* Estilos generales */
 body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
     line-height: 1.6;
 }

 h2 {
     font-size: 2rem;
     margin-bottom: 20px;
 }

 p {
     margin-bottom: 15px;
 }

 a {
     text-decoration: none;
 }

 .contenedor {
     width: 90%;

     margin: auto;
     overflow: hidden;
 }

 /* ----- ----- HEADER ----- ----- */

 header {
     width: 100%;

 }


 header .contenedorHero {
     position: relative;
     height: 100%;
 }

 header .menu {
     width: 100%;
     background-color: rgb(51, 152, 219);
     display: flex;
     justify-content: space-between;
 }

 header .menu a {
     color: #fff;
     font-size: 20px;
     font-weight: 300;
     display: inline-block;
     margin: 40px 20px;
     text-decoration: none;
     position: relative;
 }

 header .menu img {
     max-width: 120px;
 }

 header .menu a:hover {
     text-decoration: underline;
 }

 .menu-toggle {
     display: none;
 }

 .logo {
     padding: 10px 0 10px 10px;
 }

 .hero {
     width: 100%;
     background: url('../img/bacalar.jpeg'), #c6a43f;
     background-size: cover;
     background-attachment: fixed;
     background-position: center center;
     background-repeat: no-repeat;
     height: 900px;
 }

 .hero .textos h3 {
     font-weight: 300;
     font-size: 25px;
     font-style: italic;
 }

 .hero .textos .nombre span {
     font-weight: 300;
 }

 .textos {
     max-width: 460px;
     margin-top: -200px;
 }

 .textos img {
     width: 100%;
 }

 .hero .textos {
     width: 100%;
     color: #fff;
     position: absolute;
     top: 45%;
     left: 65%;

 }

 .hero .textos .nombre {
     font-size: 50px;
     font-weight: 600;
 }


 @media screen and (max-width: 1024px) {
     .hero .textos {
         top: 40%;
         left: 60%;
         max-width: 370px;

     }
 }

 @media screen and (max-width: 800px) {
     .hero .textos {
         max-width: 300px;
     }
 }

 /* Diseño para dispositivos móviles */
 @media (max-width: 480px) {
     .hero {
         width: 100%;
         background: url('../img/velero.jpeg'), #281a0c;
         background-size: cover;
         background-attachment: fixed;
         background-position: -15px center;
         background-repeat: no-repeat;
         height: 800px;
     }

     .hero .textos {
         display: none;
     }

     .menu {
         flex-direction: row;
         align-items: center;
     }

     .menu.column {
         flex-direction: column;
         align-items: center;
     }

     .menu.column .menu-toggle {
         margin: 0 auto;
     }

     .menu .menu-toggle {
         display: block;
         background: none;
         border: none;
         font-size: 42px;
         cursor: pointer;
         margin: 0 20px 0 0;
     }

     .menu-items {
         display: none;
         /* Ocultar menú inicialmente */
         flex-direction: column;
         text-align: center;
         width: 100%;
     }

     .menu-items a {
         margin: 10px 0;
         font-size: 18px;
         text-decoration: none;
         color: #fff;
         /* Ajusta el color según el diseño */
     }

     .menu-items.active {
         display: flex;
         /* Mostrar menú cuando está activo */
     }
 }


 /*Sección Main*/
 .carousel {
     position: relative;
     width: 100%;
     height: 900px;
     margin: auto;
     overflow: hidden;
 }

 .carousel-images {
     display: flex;
     transition: transform 0.5s ease-in-out;
     width: 100%;
     height: 100%;
 }

 .carousel-images img {
     width: 100%;
     flex-shrink: 0;
     height: 100%;
     object-fit: cover;
     /* Dinámico según el ancho */
 }

 .carousel-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background-color: rgba(0, 0, 0, 0.5);
     color: white;
     border: none;
     font-size: 24px;
     cursor: pointer;
     padding: 10px;
     z-index: 10;
 }

 .carousel-btn.prev {
     left: 10px;
 }

 .carousel-btn.next {
     right: 10px;
 }

 .carousel-btn:hover {
     background-color: rgba(0, 0, 0, 0.8);
 }

 /* Indicadores */
 .carousel-indicators {
     position: absolute;
     bottom: 10px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 5px;
 }

 .carousel-indicators div {
     width: 10px;
     height: 10px;
     background-color: rgba(255, 255, 255, 0.5);
     border-radius: 50%;
     cursor: pointer;
     transition: background-color 0.3s;
 }

 .carousel-indicators .active {
     background-color: white;
 }

 /* Responsive */
 @media (max-width: 768px) {
     .carousel {
         height: 600px;
     }

     .carousel-btn {
         font-size: 18px;
         padding: 8px;
     }

     .carousel-indicators div {
         width: 8px;
         height: 8px;
     }
 }

 @media (max-width: 480px) {
     .carousel {
         height: 400px;
     }
 }

 /*--------- Sección de Galeria  ------------*/
 .main .galeria {
     overflow: hidden;
 }

 .main .galeria .titulo {
     font-size: 40px;
     font-weight: 300;
     text-align: center;
     margin-bottom: 40px;
 }

 .main .galeria .foto {
     width: 25%;
     float: left;
 }

 .main .galeria .foto img {
     vertical-align: top;
     width: 100%;
     opacity: .7;
 }

 .main .galeria .foto img:hover {
     opacity: 1;
     -webkit-transition: all .3s ease;
     -o-transition: all .3s ease;
     transition: all .3s ease;
 }
 .main .boton-contactanos .boton {
    text-align: center;
 }
 @media screen and (max-width: 800px) {
     .main .galeria .foto {
         width: 50%;
     }
 }

/* Botón "Conócenos más" */
.btn-conocenos {
	display: inline-block;
	margin: 50px;
	padding: 10px 20px;
	background-color: #ffb703;
	color: #fff;
	border-radius: 5px;
	font-weight: bold;
	transition: background-color 0.3s;
}

.btn-conocenos:hover {
	background-color: #a8862e;
}

 /* ----- ----- FOOTER ----- ----- */
 footer {
     background: #000;
 }

 footer .copyright {
     text-align: center;
     padding: 15px 0;
     color: #fff;
 }

 footer {
     background-color: #333;
     color: #fff;
     padding: 40px 0;
 }

 .footer-container {
     display: flex;
     justify-content: space-around;
     flex-wrap: wrap;
     gap: 20px;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px 20px;
 }

 .footer-section {
     flex: 1;
     min-width: 200px;
 }

 .footer-container .footer-section:nth-child(1) {
     margin-right: 70px;
 }

 .footer-section h4 {
     font-size: 1.2em;
     margin-bottom: 15px;
 }

 .footer-section p,
 .footer-section a,
 .footer-section li {
     color: #bbb;
     margin: 5px 0;
     text-decoration: none;
 }

 .footer-section ul {
     list-style-type: none;
     padding: 0;
 }

 .footer-section a:hover {
     color: #fff;
 }

 .social-icons img {
     width: 24px;
     height: 24px;
     margin-right: 10px;
 }

 .footer-bottom {
     text-align: center;
     padding: 20px;
     font-size: 0.9em;
     border-top: 1px solid #444;
     color: #bbb;
 }