/*

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 */
body, ul, li, p, a, label, input, div {
  font-family: 'Roboto', sans-serif;
  font-size: 18px !important;
  font-weight: 300 !important;
  color: #333333 !important;
}

.h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 48px !important;
  font-weight: 700!important;
  color: #184e77 !important;
}
.h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 30px !important;
  font-weight: 600;
   color: #9a031e!important;
}
.custom-h2 {
  font-weight: 700 !important; /* Más grueso */
  color: #6a040f !important;letras de los productos
}

.h3 {
     font-family: 'Roboto', sans-serif;
  font-size: 22px !important;
  color: #40E0D0 !important;
}
/* General */
.logo { font-weight: 500 !important;color: #184e77 !important;}
.text-warning {  color:  #FFAA00 !important;}
.text-muted { color: #AAAAAA !important;}
.text-success { color: #b23a48!important;} /* letras */
.text-light { color: #F5F5F5!important;}
.bg-dark { background-color: #1B263B !important;}
.bg-light { background-color:#ccd5ae!important;}
.bg-black { background-color: #1d242d!important;}
.bg-success { background-color:#bed6c7 !important;}
.btn-success/* botones */ {
  background-color: #c9184a !important; /* Color inicial */
  border-color: #c9184a !important;
  transition: background-color 0.3s ease, border-color 0.3s ease; /* Animación suave */
}

.btn-success:hover {
  background-color: #ff4d6d!important; /* Nuevo color al pasar el mouse */
  border-color: #ff4d6d !important;
}

.pagination .page-link:hover {color: #1D3557;}
.pagination .page-link:hover, .pagination .page-link.active {
  background-color: #457B9D;
  color: #F1FAEE;
}
/* Nav */
#templatemo_nav_34a0a4
  min-height: 40px;  
}
#templatemo_nav_top * { 
  font-size: 0.9em !important;
}
#templatemo_main_nav a { 
  color: #FFFFFF !important; /* Texto blanco por defecto */
   font-weight: 600 !important;
}
#templatemo_main_nav a:hover { 
  color: #E5E5E5!important; /* Rosado fucsia al pasar el ratón */
   font-weight: 300 !important;
}
#templatemo_main_nav .navbar .nav-icon {
  margin-right: 20px;
}


/* Hero Carousel */
#template-mo-zay-hero-carousel {
  background: linear-gradient(5deg, #e29578, #FFFFFF) !important;/* carucel */
}

/* Accordion */
.templatemo-accordion a { color: #000;}
.templatemo-accordion a:hover { color: #1B3A4B;}
/* Shop */
.shop-top-menu a:hover { color: #69bb7e !important;}
/* 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:#fcb9b2;}
.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 !important;}
#carousel-related-product .slick-dots li button:before {
  font-size: 15px;
  margin-top: 20px;
}
/* Estilo para el contenedor principal de las listas */
.templatemo-accordion {
    padding: 15px;
    border: 1px solid #ddd;
    background-color:#f7ede2c; /* Fondo claro */
    border-radius: 8px;
}

/* Estilo para los enlaces principales ("Género", "Productos") */
.templatemo-accordion .h3 {
    font-size: 20px;
    font-weight: bold;
    color: #6f1d1b; /* Azul intenso */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Icono al lado de los enlaces principales */
.templatemo-accordion .fa-chevron-circle-down {
    color:#c9380c; /* Azul intenso */
}

/* Efecto hover para los enlaces principales */
.templatemo-accordion .h3:hover {
    color: #ff5733; /* Naranja */
}

/* Estilo para las subcategorías */
.templatemo-accordion ul.collapse a.text-decoration-none {
    font-size: 16px;
    color:#6f1d1b; /* Gris oscuro */
    text-decoration: none;
    margin-left: 10px;
    display: block;
    padding: 5px 0;
}

/* Efecto hover para las subcategorías */
.templatemo-accordion ul.collapse a.text-decoration-none:hover {
    color: #001d3d; /* Verde */
    text-decoration:none;
}

/* Estilo para el estado activo del enlace principal */
.templatemo-accordion .collapsed {
    color: #001d3d; /* Gris */
}

/* Espaciado entre los elementos principales */
.templatemo-accordion li.pb-3 {
    margin-bottom: 15px;
     color: #001d3d;
}

/* Estilo para listas internas (subcategorías) */
.templatemo-accordion ul.pl-3 {
    margin-left: 20px;
    padding-left: 10px;
    border-left: 2px solid #f7ede2; /* Línea visual para subcategorías */

}

/* 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:#1B3A4B;
}
#template-mo-zay-hero-carousel .carousel-control-next i,
#template-mo-zay-hero-carousel .carousel-control-prev i {
  color: #124559!important;
  font-size: 2.9em !important;
}
/* Carousel Brand */
.tempaltemo-carousel .h1 {
  font-size: .5em !important;
  color: #000 !important;
}
/* 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 !important;}
.form-control { border: 1px solid #e8e8e8;}
/* Footer */
#tempaltemo_footer {
  background-color: #1B263B;
#tempaltemo_footer a { color: #FF6B35;}
#tempaltemo_footer a:hover { color: #FFFFFFb;}
#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: #FF6F61;
  transition: .5s;
}
#tempaltemo_footer ul.footer-icons li:hover i {
  color: #212934;
  transition: .5s;
}
#tempaltemo_footer .border-light { border-color: #2d343f !important;}
/*
// 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 !important;
}
.product-wap .product-color-dot {
  width: 6px;
  height: 6px;
}

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

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  #templatemo_main_nav .navbar-nav {max-width: 450px;}
 }

/* 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 !important;}
  .product-wap .h3, .product-wap li, .product-wap i, .product-wap p {font-size: 18px !important;}
  .product-wap .product-color-dot {
    width: 12px;
    height: 12px;
  }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}