.carousel {
    width: 100%;
}

.carousel img {
    width: 100%;
    height: auto; /* Mantiene la proporción de la imagen */
    object-fit: contain; /* Muestra la imagen completa sin recortes */
    background-color: #f3f4f6; /* Fondo gris claro para imágenes con transparencia */
    border-radius: 0.5rem; /* Bordes redondeados */
}

#carousel-images {
    display: grid;
    grid-template-columns: 1fr; /* Una columna en móviles */
    gap: 1rem; /* Espacio entre imágenes */
}

body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2 {
    font-family: 'Poppins', sans-serif;
}

/* Estilos para el menú de navegación */
.nav-brand {
    color: #ffffff;
    transition: color 0.3s ease;
}

.nav-menu {
    list-style: none;
    padding: 0;
}

.nav-menu li {
    margin-bottom: 0.5rem; /* Espacio entre elementos en móviles */
}

.nav-menu li a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.nav-menu li a:hover {
    color: #f3e8ff; /* Color más claro al pasar el ratón */
}

/* Estilos para modo oscuro */
body.dark-mode {
    background-color: #1f2937; /* Fondo oscuro */
    color: #e5e7eb; /* Texto claro */
}

body.dark-mode header {
    background: linear-gradient(to right, #6b7280, #4b5563); /* Gradiente oscuro */
}

body.dark-mode .nav-brand {
    color: #e5e7eb; /* Color claro para el logo en modo oscuro */
}

body.dark-mode .nav-menu li a {
    color: #d1d5db; /* Color claro para los enlaces */
}

body.dark-mode .nav-menu li a:hover {
    color: #f3e8ff; /* Color más claro al pasar el ratón */
}

body.dark-mode .nav-menu li a.font-semibold {
    color: #fcd34d; /* Color destacado para Alimentación en modo oscuro */
}

body.dark-mode .bg-white {
    background-color: #374151; /* Fondo de tarjetas en modo oscuro */
}

body.dark-mode .text-gray-700 {
    color: #d1d5db; /* Texto claro en modo oscuro */
}

body.dark-mode .bg-gray-800 {
    background-color: #111827; /* Fondo del footer en modo oscuro */
}

body.dark-mode .text-green-600 {
    color: #34d399; /* Verde claro en modo oscuro */
}

body.dark-mode .text-yellow-600 {
    color: #fbbf24; /* Amarillo claro en modo oscuro */
}

body.dark-mode .text-red-600 {
    color: #f87171; /* Rojo claro en modo oscuro */
}

body.dark-mode .text-purple-600 {
    color: #a78bfa; /* Púrpura claro en modo oscuro */
}

body.dark-mode .text-blue-600 {
    color: #60a5fa; /* Azul claro en modo oscuro */
}

body.dark-mode .carousel img {
    background-color: #4b5563; /* Fondo gris oscuro para imágenes en modo oscuro */
}

#dark-mode-toggle {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Ajustes responsivos */
@media (min-width: 640px) {
    #carousel-images {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas en tabletas */
    }

    .nav-menu {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .nav-menu li {
        margin-bottom: 0;
        margin-left: 1rem;
    }
}

@media (min-width: 768px) {
    #carousel-images {
        grid-template-columns: repeat(3, 1fr); /* Tres columnas en escritorios */
    }
}

@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    h1 {
        font-size: 1.875rem; /* Tamaño de fuente más pequeño en móviles */
    }

    h2 {
        font-size: 1.25rem;
    }

    ul {
        font-size: 0.875rem; /* Texto más pequeño en móviles */
    }
}