@charset "utf-8";
.p-xy-center {
    /* [disabled]width: auto; */
    /* [disabled]height: auto; */
    margin-top: auto;
}
.fondo01 {
    background-color: #FFFFFF;
}
.bgn-plomo {
    background-color: #CCCCCC;
}
.bgn-plomo01 {
    background-color: #ebebeb;
}
.bgn-negro {
    background-color: #000000;
}
.bgn-plomo-os {
    background-color: #3C3C3C;
}
.bgn-azul-marino {
    background-color: #242046;
}
.bgn-blanco-cl {
    background-color: #fafafa;
}
.bgn-dg01{
    background: linear-gradient(0deg,#eaf2f8,#e5e8e8);
}
.bgn-dg02{
    background: linear-gradient(0deg,#3e396d,#0f043d);
}
.bgn-dg03 {
    background: linear-gradient(0deg,#cacaca,#474747);
}
.bgn-dg04 {
    background: linear-gradient(0deg,#000000,#ab9ff1);
}
.bgn-dg05 {
    background: linear-gradient(90deg,#f2f7c9,#b5b5b6,#f2f7c9);
}
.bgn-dg06 {
    background: linear-gradient(45deg,#21245e,#727272);
}
.claridad-05 {
    opacity: 0.55;
}
.padding-y1 {
    padding-top: 3rem;
}
.padding-y2 {
    padding-top:2.5%;
    padding-bottom: 2.5%;
}
.padding-x2 {
    padding-left: 5%;
    padding-right: 5%;
}
/*---------- Colores de texto ------------*/
.texto01 {
    color: #000000;
    font-weight: bolder;
    font-style: oblique;
    font-size: large;
}
.tx-negro-sm {
    color: #000000;
    font-style: normal;
    font-size: small;
}
.tx-blanco {
    color: #FFFFFF;
    font-size: large;
    font-style: oblique;
    font-weight: bolder;
}
.tx-blanco-nm {
    color:#ffffff;
}
.tx-blanco-st {
    color: #FFFFFF;
    font-size: small;
}
.tx-negro-tittle {
    color: #000000;
    font-weight: bold;
    font-size: large;
}
.tx-blanco-tittle {
    color: #FFFFFF;
    font-weight: bold;
    font-size: large;
}
.tx-azul-nm {
    color: #110391
}
/*------------------------Bordes --------------------------------*/
.margen-top {
    margin-top: 5rem;
}
@media all and (max-width:766px){
    .margen-top {
        margin-top: 8rem;
    }
}
/*--------------------Galeria de Imagen--------------------------*/
.contenedor-galeria {
    display: flex;
}
.contenedor-img {
    width: 25%;
    padding-top: 0.3%;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}
@media all and (max-width:992px){
	.contenedor-img {
		width:25%;
		height:25%;
		padding-top: 0.3%;
    	padding-left: 0.2%;
    	padding-right: 0.2%;
	}
}
/*-------------- Baner de Presentación Productos ---------------*/
.pos-relativa{
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}
.pos-absoluta{
    position: absolute;
    text-align: center;
    top:75%;
    left: 10%;
    right: 10%;
}
@media all and (max-width:766px){
    .padding-y1 {
        padding-top: 6rem;
    }
}
/*------- Grupo de Tarjetas de 3 columnas ----------*/
.container-card {
    display: flex;
    justify-content: space-between;
}
.item-card {
    width: 32%;
    border: 1px solid;
    border-color: #c7c6c6;
    border-radius: 5px;
 }
.text-card {
    padding-left: 5px;
    padding-right: 15px;
}
@media all and (max-width:768px) {
    .container-card{
        flex-direction:column;
        margin-bottom: 2rem;
    }
    .item-card{
        width:100%;
    }
}
/*------- Grupo de Tarjetas de 2 columnas ----------*/
.container-card02 {
    display: flex;
    justify-content: space-between;
}
.item-card02 {
    width: 49%;
    border: 1px solid;
    border-color: #c7c6c6;
    border-radius: 5px;
 }
 @media all and (max-width:992px) {
    .container-card02{
        flex-direction:column;
        margin-bottom: 0rem;
    }
    .item-card02{
        width:100%;
    }
}
/*--------- Slider Dezplegable con Texto al Costado ---------------------*/
.slider-container {
    display: flex;
    align-items: center;
}
.slider-item1 {
    width:50%
}
.slider-item2 {
    width: 50%;
}
.slider-tx {
    padding-left: 2.5%;
    padding-right: 2.5%;
    padding-top: 0%;
    padding-bottom: 0%;
    color: #FFFFFF;
    text-align: justify;
    font-size: medium;
}
@media all and (max-width:992px) {
    .slider-tx {
        font-size: x-small;
    }
}
/*--------------Formulario de Contacto -----------------------------------*/
.form-contacto {
    background: linear-gradient(180deg,#3b3b3f,#020202);
    border-radius: 5px;
    padding-left: 1.5%;
    padding-right: 1.5%;
    padding-top: 2%;
    padding-bottom: 0.5%;
}
.form-texto01 {
    color:#FFFFFF;
}
.form-button {
    align-items: center;
    justify-content: center;
}
/*------------ Mapa de Google Maps ---------------------------------------*/
.maps-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fafafa;
}
.maps-item01 {
    width: 48%;
    text-align: center;
    color: #FFFFFF;
    border-radius: 5px;
    background: linear-gradient(180deg,#545557,#000000);
    padding-top: 2%;
    padding-bottom: 2%
}
.maps-item02 {
    width: 48%;
    text-align: center;
    color: #FFFFFF;
    border-radius: 5px;
    background: linear-gradient(180deg,#545557,#000000);
    padding-top: 2%;
    padding-bottom: 2%;
}
.maps-text01 {
    text-align: left;
    padding-left: 5%;
}
@media all and (max-width:992px) {
    .maps-container {
        flex-direction:column;
    }
    .maps-item01{
        width:100%;
    }
    .maps-item02 {
        width: 100%;
    }
}
@media all and (min-width: 993px) and (max-width:1200px) {
    .maps-item01 {
        width: 48%;
    }
    .maps-item02 {
        width: 48%;
    }
}
/*--------------------- Cuadro de texto ---------------------*/
.cuadro00 {
    background: linear-gradient(45deg,#3e396d,#0f043d);
    border-radius: 5px;
}
.cuadro01 {
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 1%;
    padding-right: 1%;
}
/*---------------------Texto e Imagen en una Fila-------------*/
.imagen-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.imagen-item1 {
    width:49%;
    background: linear-gradient(45deg,#3e396d,#0f043d);
    padding-left: 1%;
    padding-right: 1%;
    border-radius: 5px;
}
.imagen-item2 {
    width: 49%;
}
@media all and (max-width:992px) {
    .imagen-container {
        flex-direction:column;
    }
    .imagen-item1 {
        width:100%;
    }
    .imagen-item2 {
        width:100%;
    }
}