.titulo-inicio
{
    background: linear-gradient(180deg, #fbb500, #ffffff);
    margin-top: 5px;
    display: flex; /* Utiliza Flexbox para alinear el contenido */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    text-align: center; 
    align-items: normal;
}
.titulo-inicio h1 {
    margin: 0; /* Elimina márgenes del título */
    font-size: 1.5em; /* Ajusta el tamaño del texto según tus preferencias */
    color: black;
    margin-top: 5px;
    margin: 5px;
}
.descubre{
    text-align: center;
    margin: 1cqb
}
.descubre h1
{
    color: black;
    white-space: nowrap;
    width: 250px; 
    height: 60px; 
    border: 2px solid red; 
    border-radius: 60%; 
    display: inline-block; 
    text-align: center;
    color: blue; 
    font-weight: bold;
}
.titulo-categorias
{
  background-color: #fbb500;
  text-align: center;
}
.fondo-categorias
{
    background: linear-gradient(180deg, #fbb500, #ffffff);
    padding: 15px; /* Espaciado interno para que el fondo se vea por las orillas */
    border-radius: 10px; /* Opcional: Esquinas redondeadas */
    box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total */
    display: flex; /* Flexbox para centrar */
    flex-wrap: wrap; /* Asegura que las imágenes se ajusten en varias filas si es necesario */
    justify-content: space-around; /* Centra las imágenes horizontalmente */
    align-items: center; /* Centra las imágenes verticalmente */
    gap: 10px; /* Espaciado entre imágenes */
}
.titulo-productos
{
    background-color: #fbb500;
    text-align: center;
}
.fondo-productos
{
    background: linear-gradient(180deg, #fbb500, #ffffff);
    padding: 15px; /* Espaciado interno para que el fondo se vea por las orillas */
    border-radius: 10px; /* Opcional: Esquinas redondeadas */
    box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total */
    display: flex; /* Flexbox para centrar */
    flex-wrap: wrap; /* Asegura que las imágenes se ajusten en varias filas si es necesario */
    justify-content: space-around; /* Centra las imágenes horizontalmente */
    align-items: center; /* Centra las imágenes verticalmente */
    gap: 10px; /* Espaciado entre imágenes */
}
.marcas-titulo
{
  background-color: #fbb500;
  text-align: center;
}
.contenedor-marcas
{
    padding: 15px; /* Espaciado interno para que el fondo se vea por las orillas */
    border-radius: 10px; /* Opcional: Esquinas redondeadas */
    box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total */
    display: flex; /* Utiliza Flexbox para alinear el contenido */
    flex-wrap: wrap; /* Permite que los elementos salten a la siguiente fila si no caben */
    align-items: center; /* Centra verticalmente */
    text-align: center; /* Asegura que el texto se alinee en el centro */
    align-items: normal;
    background: linear-gradient(180deg, #fbb500, #ffffff);
    gap: 20px; /* Espaciado horizontal y vertical entre los elementos */
    justify-content: space-around; /* Centra las imágenes horizontalmente */
}
.marcas{
    display: flex;
    flex-direction: column; /* Alinea la imagen y el texto en columna */
    align-items: center; /* Centra el contenido horizontalmente */
    text-align: center;
    text-decoration: none;
}
.marcas:hover p {
    color: #007bff; /* Cambia el color del texto al pasar el cursor */
}
.marcas:hover img {
    transform: scale(1.05); /* Hace un ligero zoom en la imagen */
    transition: transform 0.3s ease; /* Añade una animación suave */
}
.contenedor-marcas .tamaño-img
{
    width: 150px; /* Ajusta el tamaño máximo de la imagen */
    height: auto; /* Mantiene la proporción de la imagen */
    object-fit: cover;
    margin: 5px;
}
.marcas p
{
    margin-top: 10px; /* Espaciado entre la imagen y el texto */
    font-size: 16px; /* Tamaño de fuente para el texto */
    color: #333; /* Color del texto */
}
/* Estilo para pantallas pequeñas */
@media (max-width: 768px) {
    .contenedor-marcas {
        display: grid; /* Cambia Flexbox a Grid */
        grid-template-columns: repeat(2, 1fr); /* Crea dos columnas de igual tamaño */
        gap: 15px; /* Espaciado entre los elementos */
        padding: 10px; /* Ajusta el padding para pantallas pequeñas */
    }

    .marcas {
        text-align: center; /* Centra los elementos en su celda */
    }

    .contenedor-marcas .tamaño-img {
        width: 100px; /* Ajusta el tamaño de las imágenes en móviles */
        height: auto; /* Mantiene la proporción */
        margin: 0 auto; /* Centra las imágenes dentro del grid */
    }

    .marcas p {
        font-size: 14px; /* Reduce el tamaño del texto */
        margin-top: 5px; /* Espaciado entre la imagen y el texto */
    }
}