/*

TemplateMo 559 Zay Shop

https://templatemo.com/tm-559-zay-shop

---------------------------------------------
Table of contents
------------------------------------------------
1. Typography
2. General
3. Nav
4. Hero Carousel
5. Accordion
6. Shop
7. Product
8. Carousel Hero
9. Carousel Brand
10. Services
11. Contact map
12. Footer
13. Small devices (landscape phones, 576px and up)
14. Medium devices (tablets, 768px and up)
15. Large devices (desktops, 992px and up)
16. Extra large devices (large desktops, 1200px and up)
--------------------------------------------- */

/* Typography */
li{
font-family:"fuentes-textos", sans-serif;
  font-size: 12px !important;
  font-weight: 100 900 ;
}
body, ul, li, p, a, label, input, div {
  font-family:"fuentes-textos", sans-serif;
  font-size: 18px;
  font-weight: 100 900 ;
}
.cont-visitas{
  
  max-width: auto;
  display: flex;
  flex-direction: column;
  margin-left: auto;
  justify-content: flex-end;
  align-items: flex-end;
  text-align: center;
}
.visitas{
  display: flex;
  justify-content: center;
  width: min-content;
  padding: 2px 8px 2px 8px; /*padding como las manecillas del reloj (de arriba, abajo de derecha a izquierda*/
  text-align: center;
  align-items: center;
  font-family:"fuentes-titulos", sans-serif;
  font-size: 32px;
  font-weight: 100 900 ;
  color: white;
  background-color: #36632c ;
  border: solid 2px white;
  border-radius: 1rem;


}
.contenedor-info{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100vh; /* O la altura que desees */
}
.titulo-bandeja-inicio{
  font-family:"fuentes-titulos", sans-serif;
  margin-top: 7%;
  margin-left: 7%;
  font-size: 2.9rem;
  font-weight: 100 900 ;
}
.h1 {
  font-family:"fuentes-titulos", sans-serif;
  margin-top: 7%;
  margin-left: 7%;
  font-size: 2.5vw;
  font-weight: 100 900 ;
}
.h2 {
  font-family:"fuentes-titulos", sans-serif;
  font-size: 30px;
  font-weight: 100 900 ;
}
.h3 {
  font-family:"fuentes-titulos", sans-serif;
  font-size: 22px;
  font-weight: 100 900 ;
}
.h4{
   font-family:"fuentes-titulos", sans-serif;
    font-size: 48px;
    font-weight: 100 900 ;
}
.h5{
    font-family:"fuentes-titulos", sans-serif;
    font-size: 1rem !important;
    font-weight: 100 900 ;
    color: #ffffff;
}
.h6{
    font-family:"fuentes-titulos", sans-serif;
    font-size: 1rem !important;
    font-weight: 100 900 ;
    color: #000000;
}
.titulos{
  font-family:"fuentes-titulos", sans-serif;
  font-size: 60px;
  font-weight: 100 900 ;
}
.titulo-prod{
  font-family:"fuentes-titulos", sans-serif;
  font-size: 48px;
  font-weight: 100 900 ;
  text-align: center;
  }
/*fuentes del sitio web*/
@font-face{
  font-family:"fuentes-titulos";
  src:url("../webfonts/cambria-bold.ttf") format('truetype');
}
@font-face{
  font-family:"fuentes-textos";
  src:url("../webfonts/centurygothic.ttf") format('truetype');
}
/* General */
.logo { font-weight: 500 ;
  display:flex;
  width: 192px;
  height: auto;
  justify-content: center;
  align-items: center;
  margin: auto;
  margin-right: 2%;
}
.logo-wa {
  width: 0.9rem !important;
    height: auto;
    margin-right: 5px;
}
/*logo-footer*/
.logo2 { font-weight: 500 ;
  display:flex;
  width: auto;
  height: 35px;
  justify-content: center;
  align-items: center;
  margin-right: 2%;
  margin: 0;
}
.text-jutificado-flex{
  display: flex;            /* Activa Flexbox */
  justify-content: center;  /* Centra horizontalmente */
  align-items: center;      /* Centra verticalmente */
  background-color: #92521b;
  height: 60px;            /* Ejemplo: Altura necesaria para centrar verticalmente */
  width: 100%; /* Ocupa todo el ancho disponible */
}

.text-jutify-preguntas{
  display: flex;            /* Activa Flexbox */
  justify-content: center;  /* Centra horizontalmente */
  align-items: center;      /* Centra verticalmente */
  height:70%;           /* Ejemplo: Altura necesaria para centrar verticalmente */
  padding-top: 25%;
  padding-bottom: 5px;

}
/*textos de parrafo*/
.p1{
    font-family:"fuentes-textos", sans-serif;
    font-size: 24px;
    font-weight: 100 900 ;
  }
  .p1-confianza{
    font-family:"fuentes-textos", sans-serif;
    font-size: 24px;
    font-weight: 100 900 ;
    text-align: justify;
    
  }
  .p2-proceso{
    font-family:"fuentes-textos", sans-serif;
    font-size: 32px;
    font-weight: 100 900 ;
    text-align: center;
  }
  .p2{
    font-family:"fuentes-textos", sans-serif;
    font-size: 24px;
    font-weight: 100 900 ;
    text-align: center;
  }
  .p3{
    font-family:"fuentes-textos", sans-serif;
    font-size: 14px;
    font-weight: 100 900 ;
    text-align: center;
  }
  .p3-mv{
    font-family:"fuentes-textos", sans-serif;
    font-size: 18px;
    font-weight: 100 900 ;
    text-align: center;
  }
  .p4{
    font-family:"fuentes-textos", sans-serif;
    font-size: 14px;
    font-weight: 100 900 ;
    text-align: center;
  }
  .p5{
    font-family:"fuentes-textos", sans-serif;
    font-size: 16px;
    font-weight: 100 900 ;
  }
  .p6{
    font-family:"fuentes-textos", sans-serif;
    font-size: 32px;
    font-weight: 100 900 ;
    text-align: justify;
  }
  .p7{
    font-family:"fuentes-textos", sans-serif;
    font-size: 36px;
    font-weight: 100 900 ;
    text-align: center;
  }
  .p8{
    font-family:"fuentes-textos", sans-serif;
    font-size: 12px;
    font-weight: 100 900 ;
  }
  .parr-ini-12{
  font-family:"fuentes-textos", sans-serif;
  margin-top: 7%;
  margin-left: 7%;
  font-size: 1.7vw;
  font-weight: 100 900 ;
}
.p12{
  font-family:"fuentes-textos", sans-serif;
  margin-top: 7%;
  margin-left: 7%;
  font-size: 32px;
  font-weight: 100 900 ;
}
.li-prod{
    font-size: 22px !important;
    font-weight: 100 900 ;
}
.post-instagram{
  display: flex;
  justify-items: end;
  margin-right: 4%;
}
.espacio-nace{
  height: 100%;
  margin-left: 1.3rem;
  margin-top: 2rem;
}
.espacio-nace-2{
  height: 100%;
  margin-left: 1.3rem;
  margin-top: 2rem;
}
.tamaño-txt-nace {
font-family: "fuentes-titulos", sans-serif;
margin-top: 0%;
margin-left: 1%;
font-weight: 100 900 ;
  font-size: calc(2.9rem + 1.5vw);
  padding-top: 0;
}
.texto-nace{
   font-family: "fuentes-textos", sans-serif;
    margin-top: 0%;
    margin-left: 0%;
    font-size: 2.5vw !important;
    font-weight: 100 900 ;
  top: 20px; /* 20px desde arriba */
  right: 10px; /* 10px desde la derecha */
}
.marg-nace{
   margin-bottom: 15%;
}
.pal-contacto {
  width: min-content;
  font-family:"fuentes-titulos", sans-serif;
    font-size: 6vw;
    font-weight: 100 900 ;
}
.pad-par-bn{padding-top: 2%;}
/*colores de texto*/
.text-warning {  color: #ede861 ;}
.text-muted { color: #bcbcbc ;}
.text-success { color: #36632c ;}
.text-success-dark { color: #0e390c ;}
.text-light { color: #cfd6e1 ;}

/*colores de fondo*/
.bg-dark { background-color: #212934 ;}
.bg-white { background-color: #ffffff ;}
.bg-light { background-color: #e9eef5 ;}
.bg-black { background-color: #1d242d ;}
.bg-green-dark { background-color: #0e390c;}
.bg-beige{ background-color: #f4edda ;}
.bg-success { background-color: #36632c ;}
.bg-green-clar { background-color: #36632c ;}
/*colores valor de negocio*/
.bg-beige-1{ background-color: #e1d5bd ;}
.bg-beige-2{ background-color: #e1e1b7 ;}
.bg-beige-3{ background-color: #d3cca2 ;}
.bg-beige-4{ background-color: #f8ebe5 ;}
.bg-img {background-image:url("./assets/img/img-PA.png");}
.btn-success {
  background-color: #59ab6e ;
  border-color: #56ae6c ;
}
/*color borde*/
.border-green{
  border-color: #0e390c ;
}

.pagination .page-link:hover {color: #000;}
.pagination .page-link:hover, .pagination .page-link.active {
  background-color: #69bb7e;
  color: #fff;
}

/*cards de productos*/
.card-pr1 {
  width: 100% !important; /* Ancho fijo */
  height: 95% !important; /* Alto fijo */
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
  /*overflow: auto;  Muestra scroll si el contenido es mayor */
}
.card-pr2 {
  width: 100% !important; /* Ancho fijo */
  height: 95% !important; /* Alto fijo */
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
  /*overflow: auto;  Muestra scroll si el contenido es mayor */
}
.card-pr3 {
  width: 100% !important; /* Ancho fijo */
  height: 95% !important; /* Alto fijo */
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
  /*overflow: auto;  Muestra scroll si el contenido es mayor */
}
.card-pr4 {
  width: 100% !important; /* Ancho fijo */
  height: 95% !important; /* Alto fijo */
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
  /*overflow: auto;  Muestra scroll si el contenido es mayor */
}
.card-pr5 {
  width: 100% !important; /* Ancho fijo */
  height: 95% !important; /* Alto fijo */
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
  /*overflow: auto;  Muestra scroll si el contenido es mayor */
}
.card-pr6 {
  width: 100% !important; /* Ancho fijo */
  height: 95% !important; /* Alto fijo */
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
  /*overflow: auto;  Muestra scroll si el contenido es mayor */
}
.card-pr7 {
  width: 100% !important; /* Ancho fijo */
  height: 95% !important; /* Alto fijo */
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
  /*overflow: auto;  Muestra scroll si el contenido es mayor */
}
.card-pr8 {
  width: 100% !important; /* Ancho fijo */
  height: 95% !important; /* Alto fijo */
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
  /*overflow: auto;  Muestra scroll si el contenido es mayor */
}
.card-pr9 {
  width: 100% !important; /* Ancho fijo */
  height: 95% !important; /* Alto fijo */
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
  /*overflow: auto;  Muestra scroll si el contenido es mayor */
}
.col-4-custom {
  flex: 0 0 auto !important;
  width: 25% !important;
}
/*grids filas y columnas*/
.fil-col{
  display: grid;
  grid-template-columns: auto auto;
  
}
.fil-col-hist {
    
    display: grid;
    grid-template-columns: 37% 20% 55% !important ;
    gap: 0.80rem;
    position:sticky;
    top: 0;
    z-index: 1000;
    
}
.img-nh1{width: 100%; height: auto !important;} /* Ocupa las 3 columnas */
.img-lt1{width: auto !important; height: 640px; margin-left: 1rem;} /* Ocupa la primera columna */
.gr-pt{width: 70%; height: 650px;}
.gr-tiempo{width: auto; height: 650px; font-size:  1.33vw;} /* Ocupa las otras dos */


.fil-col-mv{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.fil-col-prod{
  display: grid;
  grid-template-columns: auto auto;
}
.p2-proceso{
    font-family:"fuentes-textos", sans-serif;
    text-wrap: wrap;
    font-size: 32px;
    font-weight: 100 900 ;
    text-align: justify;
    justify-content: justify;
  }

.gr-p2{grid-column: 1/1;}
.img1{grid-column: 2/2; }
.img2{grid-column: 1/3;}

.fil-col-hacemos{
  display:grid;
  grid-template-columns: 50% auto;
  gap: 10px;
}
.parr-hacemos{
    font-family: "fuentes-textos", sans-serif;
    font-size: 18px ;
    font-weight: 100 900 ;
    text-align: justify;
}
.IMG-QUE-HACEMOS{
    max-width: 90%;
    height: auto ;
}
.IMG-QUE-HACEMOS-pantalla{
  display: flex;
    align-items: center;
    justify-content: center;
    max-width: 160%;
    height: auto ;
}

/* Nav */
#templatemo_nav_top { min-height: 40px;}
#templatemo_nav_top * { font-size: .9em ;}
#templatemo_main_nav a { color: #ffffff;}
#templatemo_main_nav a:hover { color: #69bb7e;}
#templatemo_main_nav .navbar .nav-icon { margin-right: 20px;}
.barra-nav{ justify-content: space-around !important; background-color: #016b13; padding-left: 5px !important; padding-right: 5px !important; gap: 20px !important; height: 40px; width: auto; border-radius: 50px;}

/* Hero Carousel */
#template-mo-zay-hero-carousel { background: #efefef ;}
/* Accordion */
.templatemo-accordion a { color: #000;}
.templatemo-accordion a:hover { color: #333d4a;}
/* Shop */
.shop-top-menu a:hover { color: #69bb7e ;}
/* Product */
.product-wap { box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);}
.product-wap .product-color-dot.color-dot-red { background:#f71515;}
.product-wap .product-color-dot.color-dot-blue { background:#6db4fe;}
.product-wap .product-color-dot.color-dot-black { background:#000000;}
.product-wap .product-color-dot.color-dot-light { background:#e0e0e0;}
.product-wap .product-color-dot.color-dot-green { background:#0bff7e;}
.card.product-wap .card .product-overlay {
  background: rgba(0,0,0,.2);
  visibility: hidden;
  opacity: 0;
  transition: .3s;
}
.card.product-wap:hover .card .product-overlay {
  visibility: visible;
  opacity: 1;
}
.card.product-wap a { color: #000;}
#carousel-related-product .slick-slide:focus { outline: none ;}
#carousel-related-product .slick-dots li button:before {
  font-size: 15px;
  margin-top: 20px;
}
/*altura div-confianza*/
.div-hg{
  display: flex;
  width: auto;
  height: 100px;
}
/*borde google*/
.border-google{
  border: 5px solid #f8f9fa;
  border-radius: 10px;
  width: 100%;
  height: auto;

  }
/* Brand */
.brand-img {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: .5s;
}
.brand-img:hover {
  filter: grayscale(0%);
  opacity: 1;
}
/* Carousel Hero */
#template-mo-zay-hero-carousel .carousel-indicators li {
  margin-top: -50px;
  background-color: #59ab6e;
}
#template-mo-zay-hero-carousel .carousel-control-next i,
#template-mo-zay-hero-carousel .carousel-control-prev i {
  color: #59ab6e ;
  font-size: 2.8em ;
}
/* Carousel Brand */
.flex-center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.img-confianza{
  margin-top: 12% !important;
}
/*fondos css*/
.bg-img{
  width: 100%;
  height: 100%;
  background-image: url('../img/001 bandeja con bocadillos manos al fondo.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 0;
}
.img-vnf{
  width: 100%;
  height: 100%;
  background-image: url('../img/IMG-VNF-01.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.img-nace{
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('../img/IMG-EMP.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  margin: 0;
}
.img-vision{
  width: 100%;
  height: 100%;
  background-image: url('../img/IMG-MISION-VISION.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.img-fnd-contacto{
  width: 100%;
  height: 100%;
  background-image: url('../img/img-fondo-contac.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.cuadro-beige{
  background-color: #f4edda;
  border: 2px solid #36632c;
  border-radius: 5px;
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.3);
  width: 100%;
  height: 100%;
  opacity: 100%;
}
.cuadro-beige-2{
  background-color: #f4edda;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  opacity: 100%;
}
.cuadro-beige-fd{
  background-color: #f4edda;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  opacity: 70%;
}
.img-cp{
  display: flex;
  width:52%;
  height: auto;
  padding-bottom:20px;
  justify-items:end;
 
}
.img-pdh{
  display: flex;
   width:auto;
   height: auto;
  justify-items:center;
  
}
.tarj-1{
  background-color: #ffffff;
  border-radius: 5px;
  width: 90%;
  height: 100%;
  opacity: 60%;
}
.mision {
  width: auto;
  height: 53px;
}
.vision {
    width: auto;
  height: 53px;
}
.proposito{
   width: auto;
  height: 53px;
}
.tempaltemo-carousel .h1 {
  font-size: .5em ;
  color: #000 ;
}
/* Services */
.services-icon-wap {transition: .3s;}
.services-icon-wap:hover, .services-icon-wap:hover i {color: #fff;}
.services-icon-wap:hover {background: #69bb7e;}
/* Contact map */
.leaflet-control a, .leaflet-control { font-size: 10px ;}
.form-control { border: 1px solid #e8e8e8;}
/* Footer */
#tempaltemo_footer a { color: #dcdde1;}
#tempaltemo_footer a:hover { color: #68bb7d;}
#tempaltemo_footer ul.footer-link-list li { padding-top: 10px;}
#tempaltemo_footer ul.footer-icons li {
  width: 2.6em;
  height: 2.6em;
  line-height: 2.6em;
}
#tempaltemo_footer ul.footer-icons li:hover {
  background-color: #cfd6e1;
  transition: .5s;
}
#tempaltemo_footer ul.footer-icons li:hover i {
  color: #212934;
  transition: .5s;
}
#tempaltemo_footer .border-light { border-color: #2d343f ;}
/*
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
*/
/* Small devices (landscape phones, 576px and up)*/
.product-wap .h3, .product-wap li, .product-wap i, .product-wap p {
  font-size: 12px ;
}
.product-wap .product-color-dot {
  width: 6px;
  height: 6px;
}

@media (min-width: 576px) {
  .tempaltemo-carousel .h1 { font-size: 1em ;}
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  #templatemo_main_nav .navbar-nav {max-width: 450px; margin-left: 0.5rem; justify-content: space-around !important;}
 }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  #templatemo_main_nav .navbar-nav {max-width: 550px;}
  #template-mo-zay-hero-carousel .carousel-item {min-height: 30rem ;}
  .product-wap .h3, .product-wap li, .product-wap i, .product-wap p {font-size: 18px ;}
  .product-wap .product-color-dot {
    width: 12px;
    height: 12px;
  }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}
 .justify-content-md-between {
    justify-content: space-between !important;
  }
  .container {
    max-width: 1440px !important;
  }

/* CSS preguntas frecuentes */
 .contenedor-faq { width: 30%; }
    
    .pregunta-item {
        margin-bottom: 15px;
        padding: 10px;
        background-color: #e1e1b7;
        border: 1px solid #36632c;
        cursor: pointer;
        border-radius: 5px;
        position: relative;
        transition: background 0.3s;
    }
    
    .pregunta-item:hover { background-color: #ffffff; }
    
    /* Respuesta oculta por defecto */
    .respuesta {
        display:none;
        position: absolute;
        top: 0px;
        left: 105%; /* Lado derecho */
        width: 235% !important;
        padding: 10px;
        color: #ffffff;
        background-color: #016b13;
        border: 1px solid #ffeeba;
        border-radius: 5px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        z-index: 100;
    }
    
    /* Mostrar respuesta al pasar el mouse */
    .pregunta-item:hover .respuesta {
        display: block;
    }

    /*menu desplegable*/
    .oculto{
      display: none;
    }
    .visible{
      display: block;
    }