body {
    font-family: 'Roboto', sans-serif; /* Fuente Roboto */
    margin: 2%;
    padding: 0;
    box-sizing: border-box; /* Asegura que el padding y el border se incluyan en el tamaño total de los elementos */
}
header {
    display: flex; /* Flexbox para el encabezado */
    justify-content: space-between; /* Espacio entre los elementos */
    align-items: center; /* Alineación vertical centrada */
    padding: 20px; /* Espaciado interno */
    background-color: #fff; /* Fondo blanco */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}
header h1 {
    margin: 0; /* Sin margen */
    font-size: 24px; /* Tamaño de fuente grande */
    font-weight: 700; /* Negrita */
}
nav {
    display: flex; /* Flexbox para la navegación */
    gap: 10px; /* Espacio entre los enlaces */
}
nav a {
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 20px; /* Bordes redondeados */
    text-decoration: none; /* Sin subrayado */
    color: #000; /* Color del texto negro */
    font-weight: 500; /* Seminegrita */
}
nav a.active {
    background-color: #000; /* Fondo negro */
    color: #fff; /* Texto blanco */
}
.discover-btn {
    background-color: #000; /* Fondo negro */
    color: #fff; /* Texto blanco */
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 20px; /* Bordes redondeados */
    text-decoration: none; /* Sin subrayado */
    font-weight: 500; /* Seminegrita */
}
.contact-btn {
    background-color: #ffffff; /* Fondo negro */
    color: #000000; /* Texto blanco */
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 20px; /* Bordes redondeados */
    text-decoration: none; /* Sin subrayado */
    font-weight: 500; /* Seminegrita */
}
.hero {
    position: relative; /* Posicionamiento relativo */
    text-align: center; /* Texto centrado */
    color: white; /* Texto blanco */
}
.hero img {
    width: 80%; /* Ancho completo */
    height: auto; /* Altura automática */
    border-radius: 10px; /* Bordes redondeados */
}
.hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.4); /* Fondo oscuro translúcido */
    backdrop-filter: blur; /* Efecto desenfocado */
    -webkit-backdrop-filter: blur; /* Compatibilidad Safari */
    border-radius: 15px;
    max-width: 90%;
    color: #fff;
}
.hero-text h2 {
    font-size: clamp(18px, 5vw, 36px); /* Mínimo 18px, ideal 5% del ancho, máximo 36px */
    margin: 0; /* Sin margen */
}
.hero-text p {
    font-size: clamp(10px, 3vw, 18px); /* Mínimo 10px, ideal 3% del ancho, máximo 18px */
}
.categories {
    display: flex; /* Flexbox para las categorías */
    justify-content: center; /* Centrado horizontal */
    gap: 20px; /* Espacio entre las categorías */
    margin: 20px 0; /* Margen vertical */
    flex-wrap: wrap; /* Permite que las categorías se ajusten */
}
.category {
    background-color: #e0e0e0; /* Fondo gris claro */
    padding: 20px; /* Espaciado interno */
    border-radius: 10px; /* Bordes redondeados */
    text-align: center; /* Texto centrado */
    flex: 1; /* Ocupa el mismo espacio */
    cursor: pointer; /* Cursor de puntero */
}
.category h3 {
    margin: 0; /* Sin margen */
    font-size: 18px; /* Tamaño de fuente mediano */
    font-weight: 700; /* Negrita */
}
.category p {
    margin: 5px 0 0; /* Margen superior */
    font-size: 14px; /* Tamaño de fuente pequeño */
}
.featured-locations {
    padding: 20px; /* Espaciado interno */
}
.featured-locations h2 {
    font-size: 24px; /* Tamaño de fuente grande */
    font-weight: 700; /* Negrita */
}
.locations {
    display: flex; /* Flexbox para las ubicaciones */
    gap: 20px; /* Espacio entre las ubicaciones */
    flex-wrap: wrap; /* Permite que las ubicaciones se ajusten */
}
.location {
    flex: 1; /* Ocupa el mismo espacio */
    min-width: 200px; /* Ancho mínimo */
    background-color: #f0f0f0; /* Fondo gris claro */
    border-radius: 10px; /* Bordes redondeados */
    overflow: hidden; /* Oculta el desbordamiento */
    text-align: center; /* Texto centrado */
    cursor: pointer; /* Cursor de puntero */
}
.location img {
    width: 100%; /* Ancho completo */
    height: 85%; /* Altura automática */
}
.location h3 {
    margin: 10px 0 0; /* Margen superior */
    font-size: 18px; /* Tamaño de fuente mediano */
    font-weight: 700; /* Negrita */
}
.location p {
    margin: 5px 0 10px; /* Margen vertical */
    font-size: 14px; /* Tamaño de fuente pequeño */
}
footer {
    background-color: #000; /* Fondo negro */
    color: #fff; /* Texto blanco */
    padding: 20px; /* Espaciado interno */
    display: flex; /* Flexbox para el pie de página */
    justify-content: space-between; /* Espacio entre los elementos */
    flex-wrap: wrap; /* Permite que los elementos se ajusten */
}
footer .about{
    flex: 2;
    min-width: 200px; 
}

footer .contact,
footer .follow {
    flex: 1; /* Ocupa el mismo espacio */
    min-width: 200px; /* Ancho mínimo */
}
footer h3 {
    font-size: 18px; /* Tamaño de fuente mediano */
    font-weight: 700; /* Negrita */
}
footer p,
footer a {
    font-size: 14px; /* Tamaño de fuente pequeño */
    color: #fff; /* Texto blanco */
    text-decoration: none; /* Sin subrayado */
}
footer .social-icons {
    display: flex; /* Flexbox para los íconos sociales */
    gap: 10px; /* Espacio entre los íconos */
}
footer .social-icons a {
    color: #fff; /* Texto blanco */
    font-size: 18px; /* Tamaño de fuente mediano */
}

/* Estilos Responsivos */
@media (max-width: 768px) {
    .categories, .locations {
        flex-direction: column; /* Dirección de columna */
        align-items: center; /* Alineación centrada */
    }
    .category, .location {
        width: 100%; /* Ancho completo */
        max-width: 300px; /* Ancho máximo */
    }
}