/* Definición de colores como variables para mayor facilidad de uso */
:root {
    --Turquesa: #2BBAD9;           /* Color principal turquesa */
    --TurquesaOscuro: #16a085;     /* Color turquesa más oscuro para hover */
    --GrisClaro: #f4f4f4;          /* Gris claro para el fondo */
    --GrisOscuro: #333;            /* Gris oscuro para el texto */
    --Blanco: #ffffff;             /* Blanco para los fondos de ciertos elementos */
    --Sombra: rgba(0, 0, 0, 0.1);  /* Sombra sutil para los elementos */
}

/* Estilos generales para el cuerpo */
body {
    font-family: 'Arial', sans-serif;  /* Fuente para todo el texto */
    margin: 0;
    background-color: var(--GrisClaro); /* Fondo gris claro */
}

/* Contenedor principal, máximo ancho para que no se expanda demasiado */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;  /* Centrado de la página */
    padding: 20px;
}

/* Header principal */
.header {
    background-color: var(--Turquesa);  /* Color de fondo turquesa */
    color: black;                      /* Texto en negro */
    padding: 50px 20px;                /* Espaciado interno */
    text-align: center;                /* Alinear texto al centro */
    border-radius: 10px;               /* Bordes redondeados */
    margin-bottom: 40px;               /* Espacio debajo del header */
    box-shadow: 0 4px 10px var(--Sombra); /* Sombra alrededor del header */
    position: relative;                /* Para posicionar elementos dentro del header */
}

/* Títulos dentro del header */
.header h1 {
    font-size: 2.5rem;                 /* Título principal con un tamaño grande */
}

/* Descripción dentro del header */
.header p {
    font-size: 1.2rem;
    margin-top: 20px;
}

/* Botón de Página Principal */
.home-button {
    position: absolute;                /* Para posicionar el botón dentro del header */
    top: 20px;                         /* Espaciado desde la parte superior */
    right: 20px;                       /* Espaciado desde la parte derecha */
    background-color: white;           /* Fondo blanco */
    color: var(--Turquesa);            /* Texto del mismo color que el fondo del header */
    text-decoration: none;             /* Sin subrayado */
    padding: 10px 15px;                /* Espaciado interno */
    border-radius: 5px;                /* Bordes redondeados */
    font-weight: bold;                 /* Texto en negrita */
    font-size: 14px;                   /* Tamaño de fuente */
    display: flex;                     /* Para alinear el ícono y texto */
    align-items: center;               /* Centrar verticalmente */
    gap: 5px;                          /* Espacio entre el ícono y texto */
    box-shadow: 0 2px 5px var(--Sombra); /* Sombra del botón */
    transition: background-color 0.3s, color 0.3s; /* Animación suave en hover */
}

/* Efecto hover para el botón */
.home-button:hover {
    background-color: var(--Turquesa);
    color: white;
}


/* Estilos para cada sección de la región (Costa, etc.) */
.region {
    display: flex;               /* Usamos flexbox para alinear imagen y texto */
    justify-content: center;     /* Centra las secciones horizontalmente */
    align-items: center;         /* Alinea las secciones verticalmente */
    padding: 50px 0;             /* Espaciado arriba y abajo */
    background-color: var(--Blanco); /* Fondo blanco para cada región */
    box-shadow: 0 2px 5px var(--Sombra); /* Sombra alrededor de cada sección */
    margin-bottom: 40px;         /* Espacio entre las secciones */
    border-radius: 10px;         /* Bordes redondeados */
}

/* El contenedor donde se encuentra la galería de imágenes y la información */
.region-content {
    display: flex;               /* Flexbox para dividir en dos columnas */
    width: 100%;
    max-width: 1200px;
    justify-content: space-between; /* Espacio entre las imágenes y el texto */
    align-items: center;         /* Alinea todo al centro verticalmente */
    padding: 20px;               /* Espaciado interno */
    border-radius: 10px;         /* Bordes redondeados */
    box-shadow: 0 4px 10px var(--Sombra); /* Sombra en el contenedor */
    background-color: var(--Blanco); /* Fondo blanco */
}

/* Estilos de la galería de imágenes */
.image-gallery {
    width: 50%;                  /* Ocupa la mitad del contenedor */
    position: relative;
    height: 350px;               /* Altura de la galería de imágenes */
    overflow: hidden;            /* Oculta las imágenes fuera del área visible */
    border-radius: 10px;         /* Bordes redondeados */
    box-shadow: 0 4px 10px var(--Sombra); /* Sombra sutil */
    margin-right: 30px; /* Añadido para separar de la información de la región */
}

/* Cada imagen del carrusel */
.carousel-item {
    display: none; /* Las imágenes estarán ocultas por defecto */
    width: 100%;
    height: 100%;
}

/* La primera imagen se muestra por defecto */
.carousel-item:first-child {
    display: block;
}

/* Estilos para el contenedor del carrusel */
.carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Esto asegura que la imagen cubra el contenedor sin deformarse */
}

/* Región del contenido */
.region-info {
    margin-top: 20px;
    width: 50%;                  /* Ocupa la otra mitad del contenedor */
    padding-left: 30px;          /* Espaciado a la izquierda */
    text-align: left;            /* Alineación del texto a la izquierda */
}

/* Títulos de la región */
.region-info h2 {
    font-size: 24px;
    font-weight: bold;
}

/* Párrafos e información adicional */
.region-info p, .region-info ul {
    font-size: 1.1rem;           /* Tamaño de texto más grande */
    line-height: 1.6;            /* Espaciado entre líneas */
    color: var(--GrisOscuro);    /* Color del texto */
}

/* Listas de destinos */
.region-info ul {
    padding-left: 20px;          /* Indentación de la lista */
}

/* Estilo para los botones */
.region-info .btn {
    background-color: var(--Turquesa);   /* Color del fondo del botón */
    color: var(--Blanco);               /* Color del texto */
    text-decoration: none;              /* Quitar subrayado */
    padding: 12px 25px;                 /* Tamaño del botón */
    border-radius: 10px;                /* Bordes redondeados */
    margin-top: 20px;                   /* Espacio encima del botón */
    font-weight: bold;                  /* Texto en negrita */
    display: inline-block;              /* Que sea un bloque en línea */
    transition: background-color 0.3s;  /* Transición suave al pasar el ratón */
    text-align: center;                 /* Alinear el texto al centro */
    box-shadow: none !important;        /* Elimina cualquier sombra */
    border: none;                       /* Elimina cualquier borde adicional */
    appearance: none;                   /* Resetea estilos del navegador */
}

/* Efecto al pasar el ratón por encima del botón */
.region-info .btn:hover {
    background-color: var(--TurquesaOscuro); /* Cambia el color de fondo al pasar el ratón */
}

/* Footer */
footer {

    background: #222;
    color: white;
    padding: 2rem;
    text-align: center;
    font-size: 1rem;
    border-top: 2px solid var(--Turquesa); /* Añadido para darle un borde superior verde */
}

footer .footer-content p {
    margin-bottom: 10px; /* Separación entre las líneas de contacto y redes sociales */
}

footer .footer-content a {
    color: var(--Turquesa); /* Color verde para los enlaces */
    text-decoration: none;
    font-weight: bold;
    margin: 0 10px; /* Espaciado entre los enlaces */
}

footer .footer-content a:hover {
    text-decoration: underline; /* Subrayado al pasar el ratón */
    color: #fff; /* Cambia el color del enlace cuando se pasa el mouse */
}
/* Estilos responsivos para pantallas más pequeñas */
@media (max-width: 768px) {
    /* Cambia el diseño para pantallas más pequeñas */
    .region-content {
        flex-direction: column;  /* Disposición en columna en lugar de fila */
    }

    .image-gallery, .region-info {
        width: 100%;              /* Las imágenes y la información ocupan todo el ancho */
        margin-bottom: 20px;      /* Espacio entre los elementos */
    }

    .modal-content {
        width: 90%;              /* Modal ocupa más espacio en pantallas pequeñas */
    }
}