:root{
  --brand-green: #51892D;
  --brand-green-hover: #74a157;
  --brand-green-light: #b2c99e;
}

body{
  background-color: #fbf9f4;
}

#mobil-menu{
  background-color: #fbf9f4;
  .site-mobile-menu-body{
    display: inline-block !important;
    width: 100%;
  }
  .site-mobile-menu-header{
    .site-mobile-menu-close{
      .row{
        align-items: center;
      }
      .col-5{
        text-align: right;
      }
    }
  }
  .site-mobile-menu-header{
    border-bottom: solid 1px #5e5b5241;
  }
}
.bottones-movil{
  width: 90%;
  border: solid 1px #897e7e;
}

.color_gris{
  color: #5E5B52;
}

.color_verde{
 color: var(--brand-green);
}

.botton_naranja{
  background-color: #EA9B1C; 
  color: white;
  
}
.botton_naranja:hover{
  background-color: #e28217;
  color: white;
}
.btn_naranja:hover{
  background-color: #e28217;
  color: white;
}

.Formulario3 div div a{
  font-size: 13px;
}
.Formulario3 div a{
  font-size: 13px;
}
a:hover {
  color:black;
  /* text-decoration: underline; */
}

#botton-inicio{
  /* text-decoration: underline; */
  color: #5e5b52;
  
}
#botton-inicio:hover{
  color: var(--brand-green);
}

.icon-menu{
  color: var(--brand-green);
}

header .container-fluid{
  background: var(--brand-green); height: 4.5vh; display: flex; align-items: center;
}

.nav-link,
.nav-link a {
  display: inline;
}

.site-navbar .site-navigation .site-menu>div>a {
  padding: 10px 20px;
  font-size: 13px;
  text-transform: uppercase;
  display: inline-block;
  text-decoration: none !important;
  color: black;
}

p {
  margin-top: auto;
  margin-bottom: auto;
}

a {
  color: black;
}

.nav-link {
  font-weight: 600;
  padding: 0.5rem 0.45rem;
  color: #5E5B52;
  font-size: 16px;
}

.nav-link:hover {
  color: var(--brand-green);
}

.btn_verde {
  padding: 0.5rem 1rem;
  background-color: var(--brand-green);
  color: white;
}

.btn_verde:focus,
.btn_verde.focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0);
}

.btn_verde:hover {
  background-color: var(--brand-green-hover);
  color: white;
}

.btn_naranja {
  padding: 0.5rem 1rem;
  background-color: #ea9b1c;
  color: white;
}

.btn:focus,
.btn.focus {
  box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 0%);
}

.fondo_1 {
  
  background-size: cover;
  height: 100vh;
  background-color: #fbf9f4;
  display: flex;
  align-items: center;
  
}

.fondo_2{
  align-items: center; 
  background-image: url(../images/frame-127.1.png); 
  background-size: 63%; 
  background-position-x: 20px;
}

.text-frist {
  text-align: center;
  color: #FCFCFC;
  font-size: 14px;
  font-weight: 400; 
  word-wrap: break-word;
}

.cycles_text {}

.cycles_text::before {
  content: "";
  width: 20px;
  height: 2px;
  background: #ea9b1c;
  display: inline-block;
  margin: 0 15px 9px 0;
}

.borde_puntuacion {
  border-left: solid 3px #EFEFEF;
  border-right: solid 3px #EFEFEF;
}

.hr_1 {
  width: 70%;
  /* Ancho del guion medio */
  border: none;
  border-top: 2px solid #EFEFEF;
  /* Color y grosor del guion medio */
  margin: 20px auto;
  /* Margen para centrarlo verticalmente */
}

.box {
  /* margin: 100px auto; */
  /* width: 300px; */
  height: 50px;
  display: flex;
  justify-content: center;
}

.form-control:focus {
  color: #999791;
  background-color: #fcfcfc;
  border-color: #b9b8b5;
  -webkit-box-shadow: 0 0 0 0.2rem #007bff00;
  box-shadow: 0 0 0 0.2rem #007bff00;
}
.form-control {
  color: #d1d1cf;
  background-color: #fcfcfc;
  border-color: #d7d6d4;
}

.container-1 {
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}

.container-1 input#search {
  width: 300px;
  height: 50px;
  background: #ffffff;
  /* border: none; */
  font-size: 10pt;
  float: left;
  color: #59545493;
  padding-left: 45px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.container-1 input#search::-webkit-input-placeholder {
  color: #65737e;
}

.container-1 input#search:-moz-placeholder {
  /* Firefox 18- */
  color: #65737e;
}

.container-1 input#search::-moz-placeholder {
  /* Firefox 19+ */
  color: #65737e;
}

.container-1 input#search:-ms-input-placeholder {
  color: #65737e;
}

.container-1 .icon {
  position: absolute;
  /* top: 50%; */
  /* top: 25%; */
  margin-left: 17px;
  margin-top: 12px;
  z-index: 1;
  color:
    #4f5b66;
}

.span2 {
  text-decoration: line-through;
  color: #92908a;
}

/* header styling */
h1 {
  color: green;
}

/* pagination position styling */
.pagination_section {
  position: relative;
}

/* pagination styling */
.pagination_section a {
  color: black;
  padding: 3px 11px;
  /* margin: px; */
  text-decoration: none;
  border-radius: 15%;
  color: #bbb7b2;
  font-size: 14px;
}
.redes_inco button:hover{
  background-color: var(--brand-green-hover);
}
.redes_inco a:hover{
  background-color: var(--brand-green-hover);
}
/* pagination hover effect on non-active */
.pagination_section a:hover:not(.active, .pagination_text, .pagination_text2) {
  background-color: #f4f0dd;
  color: #605f5c;
}

/* pagination hover effect on active*/

.pagination_section a:nth-child(2) {
  background-color: #ea9b1c;
  color: white;
}

.pagination_section a:nth-child(0) {
  font-weight: bold;
}

.pagination_section a:nth-child(7) {
  font-weight: bold;
}

.pagination_text {
  margin-right: 40px;
}

.pagination_text2 {
  margin-left: 40px;
}

.text-footer :nth-child(1){
  text-align: left;
}
.text-footer :nth-child(2){
  text-align: center;
}
.text-footer :nth-child(3){
  text-align: right;
}

/* modal */
.form-wrapper {
  max-height: 300px;
  overflow-y: auto;
}

.modal-header .close {
  margin: -1rem -1rem;
  color: var(--brand-green);

}

.modal-header {
  border-bottom: 0px solid #dee2e6;
}

.close {
  :focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
  }

}

/* animaicon */

.texto {
  position: relative;
  /* Añadido */
  transition: opacity 1s ease;
  /* Modificado */

}

@keyframes slidein {
  from {
    opacity: 0;
    top: -10px;
  }

  to {
    opacity: 1;
    top: 0px;

  }
}

.fade-in {
  animation-duration: 1s;
  animation-name: slidein;
}

@keyframes slideon {
  from {
    opacity: 1;
    bottom: 0px;
  }

  to {
    opacity: 0;
    bottom: -10px;
  }
}

.fade-on {
  animation-duration: 1s;
  animation-name: slideon;
}

.close:focus {
  outline: 0px auto -webkit-focus-ring-color;
}

.modal-content {
 border-bottom: 8px solid var(--brand-green);
 height: 550px;
}

/* pop */
.popup {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #5e5b52;
  color: white;
  padding: 10px;
  text-align: center;
  /* box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); */
  display: none; /* El anuncio estará oculto inicialmente */
  animation: slideUp 0.5s ease-in-out;
  p{
    color: white;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* .closeBtn {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closeBtn:hover,
.closeBtn:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
} */

/* hover productos */
.zoom {
  transition: transform .6s;
  background-color: #e9e7e3;
  border-radius: 3% 3% 0% 0%;
}

.zoom:hover {
  transform: scale(1.2);
  background-color: #ffffff00;
}

/* focus  */
.modal-header .close {
  margin: -1rem -1rem;
  color: var(--brand-green);

}

.modal-header {
  border-bottom: 0px solid #dee2e6;
}

.close {
  :focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
  }

}

.close:focus {
  outline: 0px auto -webkit-focus-ring-color;
}

.cycles_text{
  letter-spacing: 0.25em; font-weight: 600; color: #5e5b52;
}

.titulo_productos{
  color: #5e5b52; font-weight: 400; line-height: 1.2;
  span{
    font-weight: 500;
  }
}

input:focus-visible {
  /* outline-offset: 11px !important; */
  outline-color: #bebcb900;
  border: solid 1px #8e8c86;
}
input {
  border: solid 1px #bebcb9;
}
.btn_produc{
  color: #92908a;
}
.btn_produc:hover{
  background-color: #f4f0dd;
  color: #5e5b52;
}
.fondo_1 div div div{ 
  h1{
    font-weight: 450;
    span{
      color: #ea9b1c;
    }
  }
  h6{
    color: #92908a;
  }
}
.borde_inicio{
  border: solid 2px var(--brand-green-light); padding: 15px; border-radius: 2%;
  div{
    background-color: #f4f0dd;  
  }
}
.borde_boton{
  border-bottom: solid 2px #92908a;
}
.text-tarjeta h6{
  color: #e7e3dc !important;
}

.titulo_productos{
  span{
    color: #ea9b1c;
  }
}

.quienes_somos{
  div{
    h2{
      color: #5e5b52;
    }
    h5{
      color: #92908a;
    }
  }
}

.item-producto{
  .contenedor{
    padding-bottom: 15px; border-bottom: solid 3px var(--brand-green); max-width: fit-content; margin: 0 auto;
    button{
      overflow: hidden;
    }
  }
  h6{
    color:#656464
  }
  p{
    color: #92908a;
  }
  .precio{
    color: var(--brand-green);
  }
}

.formulario2{
  div div label{
    color: #5E5B52;
  }
}

.redes_inco button{
  background-color: var(--brand-green); 
  border-radius: 50%;
}

.redes_inco a i{
  color: #F4F0DD;
}

.redes_inco a{
  background-color: var(--brand-green); 
  border-radius: 50%;
}

.redes_inco button i{
  color: #F4F0DD;
}

.text-footer{
  font-size: .8rem; color: #ADADAD; align-items: center; border-top: solid 2px #a79e9e45;
}
.partada_contenedor{
  h6{
    font-size: .9rem;
    font-weight: 400;
  }
}

#myModalnav2, #myModalnav3{
  padding-right: 15px;
}

/* dispositivos movil */

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 400px;
    margin: 1.75rem auto;
  }
}

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

  #myModalnav2, #myModalnav3{
    padding-right: 0px;
  }

  .fondo_1 {
    height: auto;
  }
  .fondo_2 {
    background-image: none;
  }

  .text-frist {
    font-size: 13px;
  }

  .site-navbar {
    display: flex;
    flex-direction: column-reverse;
  }

  .pantalla_movil {
    margin-top: 17vh;
  }

  .text-tarjeta div h5 {
    font-size: 1.1rem;
    padding-right: 10px;
  }

  .text-tarjeta div h6 {
    font-size: .9rem;
    padding-right: 10px;
  }

  .text-tarjeta {
    margin-right: 2px;
  }

  .borde_puntuacion {
    border-left: solid 0px #92908a;
    border-right: solid 0px #92908a;
    border-top: solid 1px #EFEFEF;
    border-bottom: solid 1px #EFEFEF;
  }
  .pagination_text{
    margin-right: 0px;
    /* display: none; */
  }
  .pagination_text2{
    margin-left: 0px;
  }
  .display_none{
    display: none;
  }
  .text-footer div{
    padding: 10px !important;
  }
    
  .text-footer :nth-child(1){
    text-align: left;
  }
  .text-footer :nth-child(2){
    text-align: left;
  }
  .text-footer :nth-child(3){
    text-align: left;
  }
  .titulo1 h1{
    font-size: 2rem;
  }
  .titulo1 h6{
    font-size: 1.2rem;
    font-weight: 400;
  }
  .modales .modal-dialog{
    margin: 0;
    height: 100%;
    .modal-content{
      height: 100%;
      .modal-body{
        .form-wrapper {
          /* max-height: 60%; */
          max-height: 450px;
          overflow-y: auto;
      }
      }
    }
  }
  h1, .h1 {
    font-size: 2rem;
  }
}

/* dispositivos grandes */
@media only screen and (min-width: 1200px) {
  .fondo_1 {
    background-size: 90%;
    background-position-x: center;
    background-position-y: center;
  }
}