/* Estilo base y reset */
body, div, h2, h3, p, img, select {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
.centered-content {
    text-align: center;
    display: block;
}
body {
    font-family: Arial, sans-serif;
    background-color: #ffffff;
}

header, footer {
    background-color: #ff7f00;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
}

#logo {
    max-width: 250px;
    margin: 1rem auto;
    display: block;
    object-position: center; 
}

select {
    width: 90%;
    padding: 10px;
    margin: 1rem auto;
    font-size: 1.2rem;
    display: block;
    border: 1px solid #ff7f00;
    border-radius: 5px;
    appearance: none;
    background-color: #fff;
    color: #ff7f00;
}

.menu-section {
    display: none;
    background-color: #fff;
    padding: 2rem;
    margin: 1rem 0;
    border-radius: 5px;
    border: 1px solid #ff7f00;
}

.menu-section h2 {
    border-bottom: 2px solid #ff7f00;
    padding-bottom: 10px;
}

.menu-item h3 {
    color: #ff7f00;
}

.menu-item p {
    margin: 0.5rem 0;
}

@media (max-width: 768px) {
    select {
        width: 80%;
    }
}

/* Estilo para las imágenes */
.menu-item img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-right: 10px;
    vertical-align: top;  /* Alineación vertical en la parte superior */
}

/* Estilo para el contenedor de imágenes múltiples */
.image-container {
    display: inline-block;
}


#carrusel {
    width: 100%;
    height: 300px;
    overflow: hidden; /* Desactivar el desbordamiento */
    margin-bottom: 0 !important; /* Asegúrate de que no haya margen en la parte inferior */
    position: relative;
}

.carrusel-wrapper {
    display: flex;
    animation: desplazar 15s infinite;
}

#carrusel img {
    width: 100%;
    height: 300px;
    flex: 0 0 auto;
    object-fit: cover; /* Asegura que la imagen cubra el contenedor sin distorsionar */
    object-position: center; /* Centra la imagen en el contenedor */
}

@keyframes desplazar {
    0%, 33% {
        transform: translateX(0%);
    }
    33.1%, 66% {
        transform: translateX(-100%);
    }
    66.1%, 100% {
        transform: translateX(-200%);
    }
}