/*
    Theme Name: Aura theme.
    Theme URI: 
    Author: Josué Antonio Contreras Guzmán.
    Author URI: 
    Description: Theme Diseñado para Aura por Medra. 
    Version: 1.0.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: logística, materias primas, industrial química, Insumos industriales.
    Text Domain: aura
*/

/*Estilos Globales */
:root {

    /** Fuentes **/
    --fuente-principal: 'LeagueSpartan-Medium', sans-serif;

    /** Colores **/
    --color-azul: #202a43;
    --color-amarillo: #f7e335;
    --color-blanco: #fff;
    --color-negro: #000;
    --color-gris: #e6e6e6;
}

@font-face {
    font-family: 'LeagueSpartan-Medium';
    src: url('fonts/LeagueSpartan-Medium.ttf');
}

html {
    box-sizing: border-box;
    font-size: 62.5%;
    scroll-behavior: smooth;
    /* 10px = 1rem*/
}

*,
*:before,
*:after {
    box-sizing: inherit;

}

/** globales **/
p {
    margin: 0;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

hr {
    border: 1px solid var(--gris-claro);
}

.contenedor {
    width: min(95%, 120rem);
    margin: 0 auto;
}

/** Estilos Header **/

.contenedor-header {
    display: none;
}

@media(min-width: 970px) {
    .contenedor-header {
        display: block;
        width: 100%;
        height: auto;
        padding: 3rem 0;
        background-color: var(--color-azul);
    }
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-flex img {
    width: 18rem;
}

@media(min-width: 820px) {
    .header-flex img {
        width: 26rem;
    }
}

.contenedor-enlaces {
    display: flex;
    align-items: center;
    gap: 5rem;
}

.contenedor-enlaces a li {
    display: none;
}

@media(min-width: 820px) {
    .contenedor-enlaces a li {
        display: block;
        color: var(--color-blanco);
        font-family: var(--fuente-principal);
        font-size: 2.4rem;
        position: relative;
        z-index: 1;
        padding: .5rem;
    }

    .contenedor-enlaces a li::before,
    .contenedor-enlaces a li::after {
        position: absolute;
        left: 0;
        content: '';
        display: block;
        width: 100%;
        height: 50%;
        background-color: var(--color-blanco);
        z-index: -1;
        transform: scaleX(0);
        transition: transform .6s;
        -webkit-transition: ease-out 0.3s;
        -moz-transition: ease-out 0.3s;
        transition: ease-out 0.3s;
    }

    .contenedor-enlaces a li::before {
        top: 0;
        transform-origin: left;
    }

    .contenedor-enlaces a li::after {
        top: 50%;
        transform-origin: right;
    }

    .contenedor-enlaces a li:hover::before {
        transform: scaleX(1);
    }

    .contenedor-enlaces a li:hover::after {
        transform: scaleX(1);
    }
}

@media(min-width: 820px) {
    .contenedor-enlaces a li:hover {
        color: var(--color-azul);
        -webkit-transition: ease-out 0.4s;
        -moz-transition: ease-out 0.4s;
        transition: ease-out 0.4s;
    }
}



/* Estilos Header Hamburguesa */

.header-hamburguesa {
    height: 100px;
}

@media(min-width: 970px) {
    .header-hamburguesa {
        display: none;
    }
}

.navbar-hamburguesa {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    padding: 0 3rem;
    background-color: var(--color-azul);
}

.menu-hamburguesa {
    display: none;
}

.menu-hamburguesa:checked+.ul-links {
    height: calc(75vh - 100px);
}

.imagen-header-hamburguesa {
    width: 160px;
    height: auto;
}


.list-icon {
    cursor: pointer;
    color: var(--color-blanco);
}

.ul-links {
    width: 100%;
    background-color: #2f3e64;
    position: absolute;
    top: 100px;
    left: 0;
    height: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1000;
    gap: 3rem;
    transition: all .3s;
}


.link {
    font-size: 2.8rem;
    color: var(--color-blanco);
    font-family: var(--fuente-principal);
    gap: 3rem;
}


/** Estilos Primera Seccion **/

.contenedor-seccion-principal {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0 0 5rem 0;
}

@media(min-width: 890px) {
    .contenedor-seccion-principal {
        padding: 5rem 0;
    }
}

.contenedor-titulo {
    padding-bottom: 4rem;
}

.contenedor-titulo h1 {
    margin: 0;
    font-size: clamp(4.5rem, 10vw, 9.5rem);
    text-align: right;
    color: var(--color-blanco);
    font-family: var(--fuente-principal);
    font-weight: normal;
    padding: 30% 0 2% 0;
}

@media(min-width: 580px) {
    .contenedor-titulo h1 {
        padding: 15% 0 0 0;
    }
}

.contenedor-titulo h2 {
    margin: 0;
    font-size: clamp(2.2rem, 5vw, 4rem);
    text-align: right;
    color: var(--color-blanco);
    font-family: var(--fuente-principal);
    font-weight: normal;
}

.contenedor-soluciones {
    display: flex;
    flex-direction: column-reverse;
    padding-top: 5rem;
}

@media(min-width: 890px) {
    .contenedor-soluciones {
        flex-direction: row;
        gap: 3rem;
    }
}

.tarjeta-soluciones {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 5rem 5rem;
}

@media(min-width: 890px) {
    .tarjeta-soluciones {
        width: 33.33%;
        min-height: 45rem;
        padding: 6rem 4rem;
    }
}

.tarjeta-soluciones h3 {
    color: var(--color-blanco);
    font-size: clamp(2.2rem, 5vw, 2.5rem);
    font-family: var(--fuente-principal);
    font-weight: normal;
    margin: 0;
    text-align: center;
}

@media(min-width: 890px) {
    .tarjeta-soluciones h3 {
        text-align: left;
    }
}

.tarjeta-soluciones-amarilla {
    background-color: var(--color-amarillo);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tarjeta-soluciones-amarilla h3 {
    color: var(--color-negro);
    font-family: var(--fuente-principal);
    font-weight: normal;
    padding-top: 3rem;
}

.tarjeta-soluciones-amarilla img {
    width: 6.5rem;
}

.linea-span {
    display: none;
}

@media(min-width: 890px) {
    .linea-span {
        display: block;
        width: 2px;
        height: 20rem;
        background-color: var(--color-blanco);
        margin-top: 6rem;
    }
}

.contenedor-cruzamos {
    display: grid;
    place-items: center;
}

@media(min-width: 890px) {
    .contenedor-cruzamos {
        display: flex;
        padding: 10rem 0 0 0;
    }
}

.contenedor-cruzamos iframe {
    min-height: 440px;
}

.contenedor-info-cruzamos {
    width: 100%;
    height: auto;
}

@media(min-width: 890px) {
    .contenedor-info-cruzamos {
        width: 50%;
        padding: 0 2rem;
    }
}

.contenedor-info-cruzamos-01 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contenedor-info-cruzamos-01 h2 {
    color: var(--color-blanco);
    font-family: var(--fuente-principal);
    font-weight: normal;
    font-size: clamp(3rem, 5vw, 6rem);
    text-align: center;

}

@media(min-width: 890px) {
    .contenedor-info-cruzamos-01 h2 {
        text-align: left;
        padding: 0 4rem;
    }
}

.contenedor-info-cruzamos-02 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10rem 0 0 0;
}

.contenedor-info-cruzamos-02 h3 {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    color: var(--color-amarillo);
    font-family: var(--fuente-principal);
    font-weight: normal;
    text-align: center;
    letter-spacing: .35rem;
}

@media(min-width: 890px) {
    .contenedor-info-cruzamos-02 h3 {
        text-align: left;
        margin: 0 0 2rem 0;
    }
}

.contenedor-info-cruzamos-02 p {
    font-size: clamp(2.2rem, 5vw, 3rem);
    color: var(--color-blanco);
    text-align: center;
    font-family: var(--fuente-principal);
    font-weight: normal;
}

@media(min-width: 890px) {
    .contenedor-info-cruzamos-02 p {
        margin-bottom: 2.5rem;
    }
}

.contenedor-boton-cruzamos {
    text-align: center;
}

@media(min-width: 890px) {
    .contenedor-boton-cruzamos {
        text-align: left;
    }
}

.contenedor-boton-cruzamos a button {
    width: 20rem;
    height: 4.5rem;
    margin: 2rem 0;
    background-color: var(--color-amarillo);
    color: var(--color-negro);
    font-size: clamp(2rem, 5vw, 2.5rem);
    font-family: var(--fuente-principal);
    font-weight: normal;
    box-shadow: inset 0 0 0 0 var(--color-blanco);
    -webkit-transition: ease-out 0.4s;
    -moz-transition: ease-out 0.4s;
    transition: ease-out 0.4s;
    border: 0;
}

@media(min-width: 890px) {
    .contenedor-boton-cruzamos a button {
        width: 20rem;
        height: 5.5rem;
    }
}

.contenedor-boton-cruzamos a button:hover {
    cursor: pointer;
    box-shadow: inset 0 100px 0 0 var(--color-blanco);
    color: var(--color-azul);
}

video {
    width: 100%;
    height: auto;
    max-width: 500px;
}

@media(min-width: 1040px) {
    video {
        max-width: 600px;
    }
}


/** Estilos Segunda Seccion **/
.contenedor-segunda-seccion {
    display: grid;
    width: 100%;
}

@media(min-width: 890px) {
    .contenedor-segunda-seccion {
        display: flex;
        width: 100%;
    }
}

.contenedor-segunda-seccion a {
    display: block;
    text-decoration: none;
    width: 100%;
}


.tarjeta-segunda-seccion {
    flex: 1;
    position: relative;
    padding: 5rem 4rem 5rem 4rem;
    color: white;
    overflow: hidden;
    height: auto;
    min-height: 30rem;
    background-size: cover;
    background-position: center;
}

@media(min-width: 890px) {
    .tarjeta-segunda-seccion {
        padding: 40rem 4rem 5rem 4rem;
        min-height: 75rem;
    }
}



.tarjeta-segunda-seccion::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(32, 42, 67, 0.7);
    z-index: 1;
    filter: brightness(0.7);
}

.tarjeta-segunda-seccion h3,
.tarjeta-segunda-seccion p {
    position: relative;
    z-index: 2;
    font-family: var(--fuente-principal);
    font-weight: normal;
}

.flecha {
    position: absolute;
    bottom: 20px;
    right: 30px;
    width: 50px;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    z-index: 2;

}

.tarjeta-segunda-seccion:hover .flecha {
    opacity: 1;
    transform: translateX(0);
}

.tarjeta-segunda-seccion:hover::before {
    filter: brightness(1);

}

.tarjeta-segunda-seccion h3 {
    margin: 0 0 10px;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    transition: color 0.3s ease-in-out;
    color: var(--color-amarillo);
}

.tarjeta-segunda-seccion:hover h3 {
    color: var(--color-blanco);
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
}

.tarjeta-segunda-seccion p {
    margin: 0 0 10px;
    line-height: 1.6;
    font-size: clamp(1.4rem, 5vw, 1.6rem);
}


/** Estilos tercera Seccion **/
.contenedor-background-tercera-generacion {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.contenedor-tercera-seccion {
    padding: 4rem 0;
}

@media(min-width: 890px) {
    .contenedor-tercera-seccion {
        display: flex;
        padding: 6rem 0;
    }
}

.contenedor-presencia {
    text-align: left;
}

@media(min-width: 890px) {
    .contenedor-presencia {
        width: 60%;
    }
}

.contenedor-presencia h2 {
    font-size: clamp(4rem, 5vw, 6rem);
    margin: 0;
    font-family: var(--fuente-principal);
    font-weight: normal;
    color: var(--color-blanco);
}

.contenedor-presencia img {
    width: 100%;
    height: auto;
}

.contenedor-ubicaciones {
    margin-top: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media(min-width: 890px) {
    .contenedor-ubicaciones {
        width: 60%;
    }
}

.contenedor-ubicaciones p {
    font-size: clamp(2.2rem, 5vw, 2.5rem);
    font-family: var(--fuente-principal);
    font-weight: normal;
    color: var(--color-blanco);
}

/** Estilos Cuarta Seccion **/
.contenedor-cuarta-seccion {
    padding: 4rem 0;
}

@media(min-width: 890px) {
    .contenedor-cuarta-seccion {
        margin-bottom: 10rem;
    }
}

.contenedor-titulo-cuarta-seccion {
    text-align: center;
}

.contenedor-titulo-cuarta-seccion h2 {
    font-size: clamp(4rem, 5vw, 6rem);
    margin: 0;
    font-family: var(--fuente-principal);
    font-weight: normal;
}

.contenedor-titulo-cuarta-seccion p {
    font-size: clamp(2.2rem, 5vw, 2.5rem);
    margin: 2rem 0 4rem 0;
    font-family: var(--fuente-principal);
    font-weight: normal;
}

@media(min-width: 890px) {
    .contenedor-titulo-cuarta-seccion p {
        margin: 2rem 18% 4rem 18%;
    }
}

.contenedor-tarjetas-cuarta-seccion {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.tarjetas-cuarta-seccion img {
    width: 100%;
}

.tarjetas-cuarta-seccion h3 {
    font-size: clamp(3rem, 5vw, 4rem);
    font-family: var(--fuente-principal);
    font-weight: normal;
}

.tarjetas-cuarta-seccion p {
    font-size: clamp(2.2rem, 5vw, 2.5rem);
    font-family: var(--fuente-principal);
    font-weight: normal;
}

/** Estilos quinta seccion **/

.contenedor-titulo-quinta-seccion {
    text-align: center;
}

.contenedor-titulo-quinta-seccion h2 {
    font-size: clamp(4rem, 5vw, 6rem);
    margin: 0;
    font-family: var(--fuente-principal);
    font-weight: normal;
}

@media(min-width: 890px) {
    .contenedor-titulo-quinta-seccion h2 {
        margin: 0 20%;
    }
}

.contenedor-tarjeta-quinta-seccion {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 6%;
}

.caja-quinta-seccion {
    width: 100%;
    height: auto;
    background-color: var(--color-blanco);
    display: grid;
    place-items: center;
}

.caja-quinta-seccion img{
    width: 100%;
    height: auto;
    min-height: 5rem;
}
.tarjeta-quinta-seccion p {
    font-size: clamp(2.2rem, 5vw, 1.8rem);
    margin: 2rem 0;
    font-family: var(--fuente-principal);
    font-weight: normal;
}

.contenedor-boton-quinta-seccion {
    text-align: center;
}

.contenedor-boton-quinta-seccion a button {
    width: 20rem;
    height: 4.5rem;
    margin: 2rem 0;
    background-color: var(--color-amarillo);
    color: var(--color-negro);
    font-size: clamp(2rem, 5vw, 2.5rem);
    box-shadow: inset 0 0 0 0 var(--color-azul);
    -webkit-transition: ease-out 0.4s;
    -moz-transition: ease-out 0.4s;
    transition: ease-out 0.4s;
    border: 0;
    font-family: var(--fuente-principal);
    font-weight: normal;
}

@media(min-width: 890px) {
    .contenedor-boton-quinta-seccion a button {
        width: 24rem;
        height: 5.5rem;
    }
}

.contenedor-boton-quinta-seccion a button:hover {
    cursor: pointer;
    box-shadow: inset 0 100px 0 0 var(--color-azul);
    color: var(--color-blanco);
}

.contenedor-quinta-seccion {
    margin-bottom: 8rem;
}

/** Estilos Sexta seccion **/

.contenedor-background-sexta-seccion {
    width: 100%;
    height: auto;
    background-color: var(--color-amarillo);
    padding-bottom: 4rem;
}

@media(min-width: 890px) {
    .contenedor-background-sexta-seccion {
        padding-bottom: 8rem;
        padding-top: 4rem;
    }
}

.contenedor-ceo-01 {
    display: none;
}

@media(min-width: 890px) {
    .contenedor-ceo-01 {
        display: block;
    }
}

@media(min-width: 890px) {
    .contenedor-ceo-01 {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5rem;
        margin-bottom: 2rem;
        padding-right: 2%;
    }
}


.contenedor-ceo-01 p {
    font-size: clamp(1.8rem, 5vw, 2rem);
    font-family: var(--fuente-principal);
    font-weight: normal;
}

.contenedor-ceo-02 {
    display: block;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contenedor-ceo-02 img {
    margin-top: -5rem;
}

.contenedor-ceo-02 p {
    font-size: clamp(1.8rem, 5vw, 4rem);
    margin-top: 2rem;
    margin-bottom: 2rem;
}

@media(min-width: 890px) {
    .contenedor-ceo-02 {
        display: none;
    }
}

.contenedor-texto-sexta-seccion {
    text-align: center;
}

.contenedor-texto-sexta-seccion h4 {
    font-size: clamp(2.2rem, 5vw, 3rem);
    margin: 0;
}

/** Estilos formulario **/

.contenedor-formulario {
    padding: 5rem 0;
}

@media(min-width: 890px) {
    .contenedor-formulario {
        display: flex;
        flex-direction: row;
        gap: 5rem;
    }
}

.contenedor-formulario h3 {
    margin: 0;
    text-align: center;
    font-size: clamp(4rem, 5vw, 6rem);
    padding: 1rem 0;
    font-family: var(--fuente-principal);
    font-weight: normal;
}

@media(min-width: 890px) {
    .contenedor-formulario h3 {
        text-align: left;
    }
}

.contenedor-imagen-formulario {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contenedor-imagen-formulario img {
    width: 100%;
    height: auto;
}

.input-formulario {
    width: 100%;
    height: 5rem;
    background-color: var(--color-gris);
    border: .2rem solid #dbdbdb;
    padding-left: 1rem;
    font-family: var(--fuente-principal);
    font-weight: normal;
    font-size: 1.8rem;
}

@media(min-width: 890px) {
    .input-formulario {
        width: 100%;
        height: 6rem;
    }
}

.input-formulario::placeholder {
    color: var(--color-negro);
    font-size: 1.8rem;
    font-family: var(--fuente-principal);
    font-weight: normal;
}

.input-mensaje {
    width: 100%;
    height: 12rem;
    background-color: var(--color-gris);
    border: .2rem solid #dbdbdb;
    padding-left: 1rem;
    font-size: 1.8rem;
    padding-top: 1rem;
    font-family: var(--fuente-principal);
    font-weight: normal;
}

.input-mensaje::placeholder {
    color: var(--color-negro);
    padding-top: .5rem;
    font-size: 1.8rem;
    font-family: var(--fuente-principal);
    font-weight: normal;
}

.contenedor-formulario-inputs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media(min-width: 890px) {
    .contenedor-formulario-comienza {
        width: 50%;
    }
}

.btn-enviar {
    display: none;
}

.wpcf7-not-valid-tip {
    color: var(--color-azul);
    font-size: 1.6rem;
    padding-top: 1rem;
    font-family: var(--fuente-principal);
    font-weight: normal;
}

.wpcf7-response-output {
    color: var(--color-azul);
    font-size: 1.6rem;
    padding-top: 1rem;
    border-color: var(--color-azul);
    font-family: var(--fuente-principal);
    font-weight: normal;
}

/** Estilos footer **/

footer {
    background-color: var(--color-azul);
    padding: 10% 0 10% 0;
}

@media(min-width: 890px) {
    footer {
        padding: 6% 0 6% 0;
    }
}

@media(min-width: 890px) {
    .contenedor-footer {
        display: flex;
        gap: 4rem;
    }

}

.contenedor-imagen-footer a img {
    width: 100%;
    height: auto;
    max-width: 220px;
}

.contenedor-imagen-enlaces-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
}

@media(min-width: 890px) {
    .contenedor-imagen-enlaces-footer {
        width: 40%;
        gap: 8rem;
    }
}


.contenedor-enlaces-footer {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contenedor-enlaces-footer a li {
    font-size: clamp(1.4rem, 5vw, 2.2rem);
    color: var(--color-blanco);
    font-family: var(--fuente-principal);
    font-weight: normal;
}

.contenedor-enlaces-footer a li:hover {
    -webkit-transition: ease-out 0.5s;
    -moz-transition: ease-out 0.5s;
    transition: ease-out 0.5s;
    color: var(--color-amarillo);
}

.contenedor-icons-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    padding: 4rem 0 0 0;
}

@media(min-width: 890px) {
    .contenedor-icons-footer {
        width: 30%;
        justify-content: center;
        align-items: flex-end;
    }

}

.contenedor-icons-footer a img:hover {
    -webkit-transition: ease-out 0.3s;
    -moz-transition: ease-out 0.3s;
    transition: ease-out 0.3s;
    transform: scale(1.15);
}

.contenedor-direccion-footer {
    width: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    padding: 4rem 0 0 0;
}

@media(min-width: 890px) {
    .contenedor-direccion-footer {
        width: 30%;
        padding: 0;
    }

}

.contenedor-direccion-footer p {
    font-size: clamp(1.8rem, 5vw, 2rem);
    font-family: var(--fuente-principal);
    color: var(--color-blanco);
}

.contenedor-direccion-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.contenedor-direccion-footer p {
    font-size: clamp(1.6rem, 4vw, 1.8rem);
}

/** Boton FLotante whats app **/
.float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
}

@media(min-width: 890px) {
    .float {
        bottom: 130px;
    }

}

.float:hover {
    text-decoration: none;
    color: #25d366;
    background-color: #fff;
}

.my-float {
    margin-top: 16px;
}

/** Estilos Post type Insumos **/
.contenedor-principal-insumos {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 5rem 0;
    margin-bottom: 4rem;
}

.contenedor-info-insumos {
    text-align: center;
}

@media(min-width: 890px) {
    .contenedor-info-insumos {
        text-align: right;
    }
}

.contenedor-info-insumos h1 {
    font-size: clamp(4rem, 10vw, 8rem) !important;
    font-family: var(--fuente-principal);
    color: var(--color-blanco);
    font-weight: 500;
    margin: 0;
}

.contenedor-info-insumos h3 {
    font-size: clamp(1.8rem, 5vw, 3.5rem) !important;
    font-family: var(--fuente-principal);
    color: var(--color-blanco);
    font-weight: 200;
    margin: 0;
    padding-left: 0;
}

@media(min-width: 890px) {
    .contenedor-info-insumos h3 {
        padding-left: 30%;
    }
}

.listado-grid-insumos {
    column-count: 3;
    column-gap: 5rem;
    padding: 0;
    list-style: none;
}

.tarjeta-insumos {
    display: inline-block;
    width: 100%;
    margin-bottom: 3rem;
    break-inside: avoid;
}

@media (max-width: 900px) {
    .listado-grid-insumos {
        column-count: 2;
    }
}

@media (max-width: 600px) {
    .listado-grid-insumos {
        column-count: 1;
    }
}

.titulo-materia-prima {
    font-size: clamp(1.8rem, 5vw, 2rem) !important;
    font-family: var(--fuente-principal);
    color: var(--color-amarillo) !important;
    background-color: var(--color-azul);
    padding: 1.5rem 1rem 1.5rem 2rem;
    border-radius: 1rem;
    font-weight: 500;
    margin-bottom: 10px;
    text-align: left;
    width: 80%;
}

.listado-productos {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
}

.listado-productos a li {
    color: var(--color-negro);
}


.producto-item {
    font-size: clamp(1.4rem, 5vw, 1.6rem) !important;
    font-family: var(--fuente-principal);
    border-bottom: 1px solid #ddd;
    background-color: var(--color-amarillo);
    text-align: left !important;
    border-radius: 1rem;
    font-weight: 200;
    padding: 10px;
}

.producto-item:last-child {
    border-bottom: none;
}