/* Guia desarrolada por CristianFuentes© con todos los controles basicos de diseño colores y configuraciones 
   Cada parte del sition 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: "¡Escríbeme!";
}

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

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

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

/* Color barra de navegacion */
.color-menu {
  background-color: rgba(156, 11, 11, 0.877);
}

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

/* 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: #a5a3a3;
}

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

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

/*<--------------------------------------------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: #ffffff(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: #ffffff;
}

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

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

/* 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 iluminación del boton */
  color: #ffffff; /* Color de las letras al pasar el mouse  */
}

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

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

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

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

/*<---------------------------------CAJAS DE INFORMACIÓN / 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: #242323;
}

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

/* 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(185, 185, 185, 0.8);
}

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

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

/*<---------------------------------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: #202020; /* Color de las letras del selector */
}

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

/* Colores de la caja del icono del selector de opciones*/
#box-select::before {
  background-color: #990c0c; /* 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: #333333;
}

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

/* 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: #ffffff;
}

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

/* Color de las letras de los botones al pasar el mouse */
.buy-btn2:hover {
  color: rgb(206, 206, 206);
}

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

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

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

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

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

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

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

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

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

/*<---------------------------------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 #9c9c9c;
  }

  /* Color de fondo de los items del navbar al pasar el mouse */
  .menu-collapse li:hover {
    background-color: #e5e7e9;
  }

  /* Color de las letras de los items del navbar al pasar el mouse */
  .menu-collapse a:hover {
    color: #990c0c;
  }

  /* 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----------------------------------->*/