/* Guia desarrolada por CristianFuentes© con todos los controles basicos de diseño colores y configuraciones 
   Cada parte del sitio web estara dividido por secciones que aparecera especificado que seccion se trata
   Cada seccion empezara con el nombre de la seccion y terminara con fin y el nombre de la seccion
*/

/* <--------------------------------------VISIBILIDAD DE LAS SECCIONES DE LA PAGINA------------------------------> */
/*
----------------->DISPLAY: BLOCK ----> VISIBLE
----------------->DISPLAY: NONE -----> INVISIBLE
*/

/*<---------------------------SECCION 2--------------------------->*/
/* Visibilidad de la seccion 2, block:visible , none: escondido */
#section-2{
    display: block;
}

/*<------------------------SECCION 3----------------------------->*/
/* Visibilidad de la seccion 3, block:visible , none: escondido */
#section-3{
    display: block;
}

/*<------------------------SECCION 3----------------------------->*/
#section-4{
    display: block;
}

/* <--------------------------------------FIN VISIBILIDAD DE OBJETOS------------------------------> */


/*<--------------------------COLORES DE LA PAGINA-------------------------------------->*/


/*<--------------------------------------------DISEÑO PARA PC------------------------------------------------------->*/


/*<-------------------------------------------Boton de whatsapp----------------------------------------------------->*/

/* Mensaje de whastapp al pasar el mouser */
.mensaje::before{
    content: "¡Escribeme!";
}

/* Define la altura del boton de whastapp */
.btn-whats{
    top: 300px;
}

/*<-------------------------------------------FIN Boton de whatsapp----------------------------------------------------->*/




/*<---------------------------------------------NAVBAR / BARRA DE NAVEGACION-------------------------------------->*/


/* Color barra de navegacion */
.color-menu{
    background-color: rgba(80, 89, 92, 0.9);
}

/* Color del borde inferior que tiene la barra de navegacion */    
.borde-menu{
    border-bottom: 2px solid #52be80;
}

/* Color del texto principal del navbar / titulo o logo del navbar */
.navbar-logo-title{
    color: #f6f6f6;
}

/* Color del texto principal o titulo del navbar al pasar el mouse por encima */
.navbar-logo-title:hover{
    color:#f6f6f6 ;
}

/* Color elementos de la barra de navegacion */
.color-menu-texto a{
    color: #f6f6f6;
}

/* Color al pasar el cursor sobre los items del navbar*/
.color-menu-texto a:hover{
    color: #a569bd;
}

/* Color del item activo o en el que se encuentra */
.activo a{
    color: #ffd9e8;
}

/* Color del border derecho de los items del navbar */
.border-item-nav{
    border-right: solid 1px #ffd9e8;
}


/*<--------------------------------------------FIN NAVBAR / BARRA DE NAVEGACION---------------------------------->*/



/*<--------------------------------------------HEADER / 1 SECCION DE LA PAGINA SLIDER----------------------------> */


/* Color del filtro del Header SLider */
.p-header::before {
    background-color: rgba(255, 199, 199, 0.15); /* Color del filtro del Header */
}

/* Color de los botones derecha e izquierda de Slider header */
.splide__arrow{
    color: #000 !important; /* Color de la flecha */
    background-color: rgb(183, 183, 183); /* Color de Fondo */
}

/* Color de los botones derecha e izquierda al pasar el mouse sobre ellos */
.splide__arrow:hover{
    color: #2e2e2e !important; /* Color de las flechas */
    background-color: #d0d0d0; /* Color del fondo del circulo de las flechas */
}

/* Color de la paginacion del Header Slider los circulitos de abajo */
.splide__pagination__page{
    background: #e74c3c;
}

/* Color del item activo de la paginacion */
.splide__pagination__page.is-active {
    background: #de95ba;
}

/* Color del los items al pasar el mouse sobre ellos  */
.splide__pagination__page:hover {
    background: #de95ba;
}

/* Color de fondo de los items slider */
.p-header-splide__slide__inner{
    box-shadow: 0 0 50px 15px rgba(60, 110, 113, 0.61);
}


/* Color de los botones del header al pasar el mouse sobre ellos*/
.p-button--dark:hover {
    box-shadow: 0 0 40px 5px rgba(255, 255, 255, 0.5); /* Color de iluminacion del boton */
    color: #4a266a; /* Color de las letras al pasar el mouse  */
}

/* Color del boton al pasar el mouse */
.p-button--dark::before{
    background: #de95ba; /* Color del boton al pasar el mouse */
}

/* Color del texto titulo del header */
.color-texto-header{
    color: #4a266a;
}

/* Color de las botones del header */
.p-button--dark {
    background: #7f4a88; /* Color de fondo de los botones */
    color: #f6f6f6; /* Color de las letras de los botones */
}


/*<---------------------------------FIN HEADER / 1 SECCION DE LA PAGINA SLIDER--------------------> */


/*<---------------------------------CAJAS DE INFORMACION / SECCION 2 DE LA PAGINA------------------>*/


/* Color de fondo de toda la seccion 2 */
.bg-seccion2{
    background-color: #ffffff;
}

/* Color de fondo de las cajas de informacion */
.bg-section2-box{
    background-color: #ededed;
}

/* Color de las letras de las cajas */
.color-letras-seccion2{
    color: #000000;
}

/* Color de las letras de los botones */
.btn-seccion2-boxes{
    color: #000000 !important;
}

/* Color del borde del boton */
.btn-seccion2-boxes{
    border-color: #000;
}

/* Color de los botones al pasar el mouse */
.btn-seccion2-boxes::before{
    background-color: #7f4a88;
}

/* Color de las letras de los botones al pasar el mouse */
.btn-seccion2-boxes:hover{
    color: #ffffff !important;
}



/*<---------------------------------FIN CAJAS DE INFORMACION / SECCION 2 DE LA PAGINA------------------>*/




/*<---------------------------------SECCION 3 --------------------------------------------------------->*/


/* Filtro de color para la imagen de fondo */
.filtro-bg-seccion3::before{
    background-color: rgba(252, 209, 209, 0.8);
}

/* Color del titulo */
#caja-texto-seccion3 .title-box-seccion3{
    color: #464646;
}

/* Color de la descripcion */
#caja-texto-seccion3 .description-box-seccion3{
    color: #525252;
}


/*<---------------------------------FIN SECCION 3 --------------------------------------------------------->*/


/*<---------------------------------SECCION 4 --------------------------------------------------------->*/

/* Color de fondo de la seccion 4 */
#section-4{
    background-color: #fff;
}

/* Colores del selector de opciones*/
#box-select select{
    background-color: #fff;/* Color de fondo del selector */
    color: #000; /* Color de las letras del selector */
}

/* Color de las letras del titulo acompañante del selector */
.combo-title{
    color: #000;
}

/* Colores de la caja del icono del selector de opciones*/
#box-select::before{
    background-color: #6d6d6d; /* Color de fondo de la caja del icono del selector de opciones */
    color: #fff; /* Color del icono */
}

/* Color del fondo de la caja del icono del selector de opciones al pasar el mouse */
#box-select:hover::before{
    background-color: #585858;
}

/* Color de la caja contenedora de todos los elementos */
.bg-items-seccion4{
    background-color: #575151;
}

/* Color de la caja contenedora de los elementos del slider */
.bg-box-items-slider{
    background-color: #ffffff;
}

/* Color de las letras del titutlo de la caja contenedora */
.title-items-seccion4{
    color: #f5eee6;
    
}

/* Color de los botones de los items de los slider */
.buy-btn2{
    background-color: #575151;

}

/* Color de las letras de los botones al pasar el mouse */
.buy-btn2:hover{
    color: antiquewhite;
}

/* Color de fondo de los items del slider */
.box{
    background-color: rgba(0, 0, 0, 0);
}


/*<---------------------------------FIN SECCION 4 --------------------------------------------------------->*/



/*<---------------------------------SECCION 5 --------------------------------------------------------->*/

/* Color de fondo de la seccion */
.bg-section-5{
    background-color: #fceaea;
}

/* Color del boton de consulta */
.btn-seccion5{
    background-color: #9e3668;
    color: aliceblue;
}

/* Color del boton al pasar el mouse encima */
.btn-seccion5:hover{
    background-color:#512e67;
    color: aliceblue;
}



/*<---------------------------------FIN SECCION 5 --------------------------------------------------------->*/


/*<---------------------------------SECCION 6/footer --------------------------------------------------------->*/

/* Color de fondo del footer */
.footer-seccion {
    background-color: #303841;
}



/*<---------------------------------FIN SECCION 6/footer --------------------------------------------------------->*/




/*-----------------------------------FIN DISEÑO PARA PC------------------------------------------->*/





/*<--------------------------------DISEÑO CELULAR/ RESPONSIVE-------------------------------------->*/

@media (max-width: 992px) {
    
    
    
/*<---------------------------------------------NAVBAR / BARRA DE NAVEGACION-------------------------------------->*/  
    
    
/* Color del borde inferior que tiene la barra de navegacion en modo celular */    
.borde-menu{
    border-bottom: 1px solid #ffd9e8;
}
    
/* Color de fondo de los items del navbar al pasar el mouse */    
.menu-collapse li:hover{
    background-color: #ffe2e2;
}
    
/* Color de las letras de los items del navbar al pasar el mouse */    
.menu-collapse a:hover{
    color: #7f4a88;
}
    
/* Color del icono de la barra de navegacion en modo celular */
.icono-color{
    color: #f6f6f6;
}
    
   
    
   
    
 /*<--------------------------------------------FIN NAVBAR / BARRA DE NAVEGACION---------------------------------->*/   
    
    
    
    
    
    
    
}





/*<--------------------------------FIN DISEÑO CELULAR/ RESPONSIVE----------------------------------->*/