/* Estilos generales */
body {
    font-family: 'Calibri', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f2f5;
    color: #1c1e21;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header {
    background-color: #000; /* Fondo negro */
    color: white;
    padding: 20px;
    text-align: center;
    position: relative;
}

header h1 {
    margin: 0;
    font-size: 2.5rem;
}

.logo-container {
    margin-bottom: 20px;
}

.logo {
    max-width: 150px;
    height: auto;
}

/* Botón de menú para móviles */
.menu-toggle {
    display: none; /* Oculto en desktop */
    background-color: #000;
    color: white;
    border: none;
    padding: 10px;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 10px;
}

main {
    display: flex;
    flex: 1;
    padding: 20px;
    flex-direction: column; /* Cambio para móviles */
}

/* Filtros en el margen izquierdo */
.filtro {
    width: 100%; /* Ocupa todo el ancho en móviles */
    margin-right: 0;
    margin-bottom: 20px;
    display: none; /* Oculto por defecto en móviles */
}

.filtro.active {
    display: block; /* Mostrar filtros al hacer clic en el botón */
}

.filtro h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.filtro-botones {
    display: flex;
    flex-direction: column;
}

.filtro-botones button {
    background-color: #000; /* Botones negros */
    color: white;
    border: none;
    padding: 10px;
    margin: 5px 0;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    text-align: left;
}

.filtro-botones button:hover {
    background-color: #333; /* Negro más claro al pasar el mouse */
}

/* Galería de feriantes */
.feriantes {
    flex: 1;
}

.feriantes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Columnas responsivas */
    gap: 20px;
    padding: 20px;
}

.feriante {
    text-align: center;
    background-color: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feriante:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.feriante img {
    max-width: 100px; /* Tamaño máximo de las imágenes */
    height: auto;
    margin-bottom: 10px;
    border-radius: 5px; /* Bordes redondeados para las imágenes */
}

.feriante p {
    margin: 0;
    font-size: 1rem;
    font-weight: bold;
    color: #333; /* Color del texto */
}

/* Pie de página */
footer {
    background-color: #000; /* Fondo negro */
    color: white;
    text-align: center;
    padding: 20px;
}

footer p {
    margin: 0 0 15px 0; /* Espacio entre el texto y las redes sociales */
}

.redes-sociales {
    display: flex;
    justify-content: center;
    gap: 20px; /* Espacio entre los íconos */
}

.redes-sociales a {
    display: inline-block;
    transition: transform 0.3s ease;
    text-decoration: none; /* Eliminar el subrayado */
}

.redes-sociales a:hover {
    transform: translateY(-5px); /* Efecto hover */
}

.redes-sociales img {
    width: 24px; /* Tamaño de los íconos reducido */
    height: auto;
}

/* Enlaces en el pie de página */
.enlaces-footer {
    margin-top: 15px;
    text-align: center;
}

.enlaces-footer a {
    color: white;
    text-decoration: none;
    font-size: 1rem;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.enlaces-footer a:hover {
    color: #ffcc00; /* Color amarillo al pasar el mouse */
}

/* Estilos para la sección "Quiénes somos" */
.quienes-somos {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.quienes-somos h2 {
    font-size: 2rem;
    color: #000;
    margin-bottom: 20px;
    text-align: center;
}

.quienes-somos p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 15px;
}

/* Estilos para el enlace "Volver al inicio" */
.volver-inicio {
    text-align: center;
    margin-top: 20px;
}

.volver-inicio a {
    display: inline-block;
    padding: 10px 20px;
    background-color: #000; /* Fondo negro */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.volver-inicio a:hover {
    background-color: #333; /* Fondo más claro al pasar el mouse */
}

/* Estilos para el carrusel */
.carrusel {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

.carrusel h2 {
    font-size: 2rem;
    color: #000;
    margin-bottom: 20px;
}

.carrusel-contenedor {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    height: 500px; /* Altura fija para el contenedor (ajusta según sea necesario) */
}

.carrusel-slide {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%; /* Asegura que el slide ocupe todo el contenedor */
}

.carrusel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta la imagen para cubrir el contenedor sin deformarla */
    border-radius: 10px;
}

.carrusel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.carrusel-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.anterior {
    left: 10px;
}

.siguiente {
    right: 10px;
}

/* Estilos para móviles */
@media (max-width: 768px) {
    .menu-toggle {
        display: block; /* Mostrar botón en móviles */
    }

    .filtro {
        display: none; /* Ocultar filtros por defecto en móviles */
    }

    .filtro.active {
        display: block; /* Mostrar filtros al hacer clic en el botón */
    }

    .feriantes-grid {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas en móviles */
    }

    .carrusel-contenedor {
        height: 300px; /* Altura más pequeña para móviles */
    }
}