:root {
  --verde:  #09853e;
  --verde-Claro:  #99cc33;
  --verde-faq: #096f36;
  --amarillo: #f6d800;
  --gris: #eeeeee;
}
@font-face {
    font-family: 'coco_gothicbold';
    src: url('../fonts/cocogothic-bold_trial-webfont.woff2') format('woff2'),
         url('../fonts/cocogothic-bold_trial-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'coco_gothiclight';
    src: url('../fonts/cocogothic-light_trial-webfont.woff2') format('woff2'),
         url('../fonts/cocogothic-light_trial-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'coco_gothicregular';
    src: url('../fonts/cocogothic_trial-webfont.woff2') format('woff2'),
         url('../fonts/cocogothic_trial-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'comfortaaregular';
    src: url('../fonts/comfortaa-regular-webfont.woff2') format('woff2'),
         url('../fonts/comfortaa-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'comfortaabold';
    src: url('../fonts/comfortaa-bold-webfont.woff2') format('woff2'),
         url('../fonts/comfortaa-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'comfortaalight';
    src: url('../fonts/comfortaa-light-webfont.woff2') format('woff2'),
         url('../fonts/comfortaa-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
/**{
  font-family: 'coco_gothicregular';
}*/
.btn-fijo-top{
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 922;
}

  .ancho-menu {
    width: 350px;
  }
  .menu-movil, .menu-pc {
    background-color: var(--verde);
  }

  #menuFlotMovil {
    background-color: var(--verde);
    color: white;
  }

  .item-menu-movil, .item-menu-movil > a {
    color: white;
    text-decoration: none;
    width: 100%;
    text-align: left;
    text-transform: uppercase;
    font-size: 1.2rem;
    line-height: 3rem;
  }
  .texto-intro {
    font-size: 1.5rem;
    color: var(--verde);
    text-align: center;
    text-transform: uppercase;
    font-family: 'coco_gothicregular';
  }

  .titulo-seccion {
    color: var(--verde);
    font-size: 1.5rem;
    text-transform: uppercase;
    text-align: center;
    font-style: italic;
  }

  .barra-faq, .barra-faq>a {
    background-color: var(--verde-Claro);
    color: #fff;
    text-transform: uppercase;
    font-size: 1.1rem;
    line-height: 2.8rem;
    text-decoration: none;
    font-family: 'comfortaaregular';
    margin-bottom: 2px;
  }

  #FAQ1, #FAQ2, #FAQ3, #FAQ4, #FAQ5 {
    color: var(--verde-faq);
    font-size: 1rem;
    line-height: 1.8rem;
    font-family: 'comfortaaregular';
    padding-left: 2%;
  }

  .texto-reco {
    color: var(--verde);
    font-size: 1rem;
  }

  .offcanvas-title {
    color: var(--amarillo);
  }
  .text-reset, .btn-close, .navbar-toggler-icon {
    color: var(--amarillo) !important; 
  }

  .contenedor-contacto {
    padding-top: 50px;
    background-color: var(--gris) ;
    border-top-left-radius: 40px 40px;
    border-top-right-radius: 40px 40px;
    width: 95%;
    margin: auto;
  }

  .btn-enviar,  .btn-enviar:hover,  .btn-enviar:visited,  .btn-enviar:focus {
    background-color: var(--amarillo);
    color: var(--verde);
    font-size: 1.1rem;
    line-height: 4rem;
    border-radius: 15px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: bold;
    text-decoration: none;
  }

.form-control, .form-control:focus {
  color: var(--verde);
  font-size: 1rem;
  font-family: 'comfortaaregular';
}

input::placeholder {
  color: green;
  font-size: 1rem;
  font-family: 'comfortaaregular';
}

.texto-footer {
  color: var(--verde);
  font-size: 0.9rem;
  text-align: center;
}

.ancho-icono-reco {
  max-width: 180px !important;
}

.FAQ-barra-mas {
  font-size: 1.5rem;
  font-weight: 900;
  text-align: right;
}

.texto-prod-intro {
  color: var(--verde);
  font-size: 1rem;
  font-family: 'comfortaabold';
  font-weight: bold;
}

.texto-prod-detalle {
  color: var(--verde);
  font-size: 1rem;
  font-family: 'comfortaaregular';
}

.contenedor-iconos-producto {
  max-width: 500px;
}
@media only screen and (max-width: 768px) {
      .ancho-menu {
        width: 310px !important;
        
      }
      .texto-intro {
        font-size: 1.3rem;        
      }

      #FAQ1, #FAQ2, #FAQ3, #FAQ4, #FAQ5 {
        font-size: 0.9rem;
        line-height: 1.5rem;
       
      }

      .barra-faq, .barra-faq>a {       
        font-size: 1rem;
        line-height: 2.1rem;
        
      }

      .texto-reco {        
        font-size: 0.8rem;
      }

      .titulo-seccion {
        font-size: 1.4rem;      
      }

      .ancho-icono-reco {
        max-width: 150px !important;
      }

      .espacio-arriba-movil{
          padding-top: 15px;;
      }
      
      .prod-sub{
        font-size: 1rem !important;
      }
}

@media only screen and (max-width: 576px) {


  .contenedor-iconos-producto {
    max-width: 280px !important;
  }
  
}