body {
        font-family: 'Satoshi', sans-serif;
        margin: 0;
        background-color: #fff7ee;
    }
p, li{line-height: 1.8em;}
h1 {margin:38px 0 18px 0;text-align: center}
    .wrapper {
        width: 100%;
        max-width: 1000px; /* Máximo ancho para el contenido */
        margin: 0 auto; /* Centrar el contenedor */
    }
    .header, .navigation, .content {
        padding: 0 20px;
    }
    .header {
        background-image: linear-gradient(180deg, #ffffff 5%, #fff7ee 40%);
        color: #333;
        padding: 10px 0;
        text-align: center;
    }
    .header .brand {
        display: flex; align-items: center;
        font-size:42px;font-weight: 600;
        text-align:center;
        justify-content: center;
        margin: 0;
    }
    .header .mission {
        font-size:0.8em;font-weight: 600;color: #333;
        padding: 0;margin: 0 0 12px 0;
    }
    .header img {
        max-width:100px;
    }
.navigation {
    background-color: #C13E49;
    padding: 10px 0;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px -2px 5px rgba(0, 0, 0, 0.3);
}

.navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navigation li {
    margin: 0 10px;
}

.navigation li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    text-transform:uppercase;
    transition: transform 0.2s ease-in-out;
}

.navigation li a:hover {
    background-color: #a00037;
    transform: scale(1.1);
}
    .search-box input[type="text"] {
        width: calc(100% - 20px); /* Restar el padding para el ancho total */
        padding: 10px;
        margin: 10px 0;
        border: 1px solid #ddd;
    }
    .alphabet-indexer {
        text-align: center;
        margin: 20px 0;
    }
    .alphabet-indexer a {
        padding: 5px 10px;
        background:#fff;
        border: 1px solid #ddd;
        margin: 5px;
        text-decoration: none;
        color: #333;
        display:inline-block;
    }
    .content-box {
        background-color: #fff;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    .ingredient {
        margin: 10px 0;
    }
    .ingredient span {
        font-weight: bold;
    }


.ingredient-list {
    list-style: none; /* Elimina los bullets por defecto de la lista */
    padding: 0; /* Elimina el padding por defecto de la lista */
    margin: 0; /* Elimina el margen por defecto de la lista */
    border-radius: 8px; /* Bordes redondeados */
    width: 100%; /* Ajusta este valor según sea necesario */
}

.ingredient-list li {
    padding: 10px 15px; 
    border-bottom: 1px solid #dcdcdc; 
    color: #333; 
}
.ingredient-list li a {
    color: #333;
    text-decoration:none;

}
.ingredient-list li a:hover{text-decoration:underline}
.ingredient-list li:last-child {
    border-bottom: none; /* Elimina el borde del último elemento */
}

/* Puedes agregar un pseudoelemento para el cuadrado verde antes de cada elemento */
.ingredient-list li::before {
    content: ''; /* Pseudoelemento para el cuadrado */
    display: inline-block; /* Hace que el pseudoelemento sea en línea */
    width: 10px; /* Tamaño del cuadrado */
    height: 10px; /* Tamaño del cuadrado */
    background-color: #d46d6e; /* Color del cuadrado */
    margin-right: 10px; /* Espacio entre el cuadrado y el texto */
    border-radius: 6px;
}

.productos_ingrediente {
    margin-top:35px;
}
.productos_ingrediente h2 {
    font-size:1em;
    margin-bottom:20px;
}

.producto_ingrediente {
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1), 0px -2px 5px rgba(0, 0, 0, 0.1);
    display:inline-block;
    margin:5px 50px 30px 50px;
    padding:20px;
    border-radius: 4px;
    max-width:250px;
    min-height:200px;
}
.producto_ingrediente img{
    display:block;
    margin:0 auto;
    max-width:100px;
    max-height:120px;
}

.end {
    display:block;
    text-align:center;
    width:100%;
}
#diccionario_volver {
    border:2px solid #333;
    border-radius: 4px;
    clear:both;
    color:#333;
    cursor: pointer;
    display:inline-block;
    font-size:0.9em;
    margin: 35px auto;
    padding: 11px 23px 10px;
    text-decoration:none;
    text-transform:uppercase;
}
h2{font-size:1.2em;margin-top:35px;}
.scientific-studies {list-style-type: none;}
.scientific-studies li {
    display:block;
    line-height:1.8em;
    min-height:35px;
    padding:0 0 10px 40px;
    background:url('../img/study.png') no-repeat 0 6px;
}
footer {text-align:center;margin:30px 0 0 0;padding:25px 0}
footer a, footer span{color:#333;display:inline-block;padding:0 15px}