@import url('base.css');

:root{
    --fuente: 'Baloo Tamma 2', cursive;
    --blanco: #FFF;
    --negro: #000;
    --colorF1: #140C0C;
    --colorF2: #1a0303;
    --colorF3: #262323;
    --colorF4: #373740;
    --colorF5: #88B3A1;
    --colorF6: #38594F;
    --colorF7: #38594F;
    --colorB: rgba(5, 35, 232, 1);
}

.body{
    /*background: linear-gradient(70deg,var(--colorF3),var(--colorF1),var(--colorF2),var(--colorF3));*/
    background: var(--blanco);
    /*background: linear-gradient(111deg,var(--colorF4),var(--colorF4),var(--colorF5),var(--colorF6));*/
}

/*****************Sección Banner***************/
.iconos-com{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.tm-icono{
    width: 10rem;
    height: 8rem;
    padding: 0 1rem;
}

/************************************Sección de Zona****************************************/
@media(min-width:770px){
    .zona{
        display: block;
        width: 100%;
        margin: 1rem 0;
        justify-items: center;
    }
    .tablero-comercial{
        display: block;
        width: 95%;
        margin: 1rem 0;
        justify-items: center;
    }
    .muestra{
        display: block;
        width: 95%;
        margin: 1rem 0;
        text-align: center;
        justify-items: center;
    }
    .nombre-servicio{
        margin: 1rem 0;
        font-size: 1.8rem;
    }
    .servicio{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        justify-content: center;
        width: 100%;
        justify-items: center;
    }
    .producto{
        display: block;
        width: 90%;
        margin: 1rem 0;
        padding: 1rem 0;
    }
    .link-producto{
        cursor: pointer;
        text-decoration: none;
        color: var(--negro);
    }
    .nombre-producto{
        margin: 0 0 1rem 0;
    }
    .imagen-producto{
        width: 20rem;
        height: 20rem;
        align-content: center;
        border-radius: 5rem 0 5rem 0;
    }
    .texto-producto{
        text-align: center;
        font-size: 1rem;
        margin: 1rem 0;
    }
    .boton-referencia{
        display: flex;
        border: #FFF 2px solid;
        padding: 1rem;
        color: var(--blanco);
        text-decoration: none;
        cursor: pointer;
        border: var(--negro) 3px solid;
        border-radius: 20rem;
        background: var(--colorB);
        width: 10rem;
        justify-content: center;
        font-size: 1.2rem;
        margin: 1rem 0;
    }
    .sombra{
        /*-webkit-box-shadow: -1px 13px 5px -6px rgba(227,4,16,1);
        -moz-box-shadow: -1px 13px 5px -6px rgba(227,4,16,1);*/
        box-shadow: 15px 5px 15px 10px rgba(0,0,0,1);
    }
}