:root{
    --azul: #335de8;
    --azul-oscuro: #2b57aa;
    --azul-claro: #8595C9;
    --negro: #3D464D;
    --blanco:#fff;
    --blanquecino: #ececec;
    --super-negro:#212529;
    --verde-wo:#56b51c;
    --primary:#335de8; --muted:#6b7280;
}



.container__logo{
    height: 70px;
    width: 341px;

}
.logo__jhimbo img{
    width: 220px;
}
.container__logo a{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-product{
  max-height: 500px;
  object-fit: contain;
}

.top-header {
    font-size: 14px;
}

.top-header .link__social {
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}

.top-header i {
    font-size: 15px;
}

.separator {
    margin: 0 10px;
    color: #aaa;
    font-weight: 300;
}


.separator {
    margin: 0 10px;
    color: #aaa;
    font-weight: 300;
}
.link__social{
    background-color: var(--blanco);
    /* border: 1px solid #d9d9d9; */
    padding: 5px 12.5px 5px 12.5px;
    text-decoration: none;
    color: var(--negro);
    background-color: var();
    font-size: 14px;
    font-weight: 500;
}

/* ==== MEJORAS DEL BUSCADOR ==== */

/* 🔍 Input principal más grande */
.search-smart-input {
    height: 40px !important;
    font-size: 1rem;
    padding: 0 18px;
    border-radius: 10px 0 0 10px;
    border: 1px solid #ced4da;
    transition: all 0.2s ease;
}


/* 🔍 Botón más alto y proporcionado */
.search-smart-btn {
    height: 40px !important;
    width: 48px;
    border-radius: 0 10px 10px 0;
    background-color: #0d6efd;
    color: #fff;
    border: none;
    transition: background-color 0.2s;
}

.search-smart-btn:hover {
    background-color: #0b5ed7;
}

/* 🔍 Panel de resultados más ancho y alto (desktop) */
.search-smart-overlay {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 20;
    overflow-x: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}

.search-smart-panel {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    max-height: 500px;
    overflow-y: auto;
    width: 100%;
    animation: fadeIn 0.15s ease-in-out;
    overflow-x: hidden;
    padding: 10px;
}

/* ==== Resultados del buscador ==== */
.group {
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 6px;
}
.group:last-child {
    border-bottom: none;
}
.group-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    padding: 10px 0px 5px;
}

/* Cada ítem */
.rs-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    flex-wrap: nowrap; 
    min-width: 0;       
}
.rs-item{
  margin-bottom: 5px;
}
.rs-item:hover,
.rs-item.active {
    background-color: #f1f7ff;
}
.rs-link{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Imagen */
.rs-media img.rs-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
}

.rs-media.small img.rs-img {
    width: 40px;
    height: 40px;
}

/* Placeholder cuando no hay imagen */
.rs-media.placeholder,
.rs-media.small.placeholder-cat,
.rs-media.small.placeholder-mar {
    background: #e9ecef;
    color: #adb5bd;
    font-size: 0.85rem;
}
.rs-media.placeholder::before {
    content: "\f03e"; /* icono imagen de FontAwesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* Texto del resultado */
.rs-body {
    flex: 1;
    margin-left: 10px;
    min-width: 0;   /* Necesario para ellipsis dentro de flex */
    overflow: hidden;
}


.rs-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #212529;
}

.rs-sub {
    font-size: 0.85rem;
    color: #6c757d;
}

/* Footer más visible */
.search-smart-footer {
    padding: 10px 15px;
    border-top: 1px solid #eee;
    text-align: center;
    font-size: 0.9rem;
    color: #6c757d;
}

/* Modal para móvil - Buscador */
.search-smart-mobile-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 9999;
    display: none;
    flex-direction: column;
}

.search-smart-mobile-modal.active {
    display: flex;
}

.search-smart-mobile-header {
    position: relative;
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
}

.search-smart-mobile-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    margin-right: 15px;
    cursor: pointer;
    color: #6c757d;
}

.search-smart-mobile-form {
    flex: 1;
    display: flex;
    align-items: center;
}

.search-smart-mobile-input {
    border: none;
    outline: none;
    font-size: 1.1rem;
    width: 100%;
    padding: 10px 0;
    background: transparent;
}


.search-smart-mobile-results {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    padding-top: 0px;
}

/* Botón trigger para móvil */
.mobile-search-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 10px;
}

.title-ps{
    text-align: center !important;
}

/* MOSTRAR el botón en móvil, OCULTAR en desktop */
@media (min-width: 992px) {
    .mobile-search-trigger {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .mobile-search-trigger {
        display: flex !important;
    }
    
    /* Ocultar el buscador desktop en la navbar móvil */
    .navbar_mobile .search-smart-wrapper {
        display: none !important;
    }
    
    /* Mostrar el buscador en la sección search__mobile */
    .search__mobile .search-smart-wrapper {
        display: block !important;
    }
}

/* Estilos para los resultados en móvil */
@media (max-width: 991px) {
    .search-smart-mobile-results .rs-item {
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .search-smart-mobile-results .rs-media {
        width: 50px;
        height: 50px;
    }
    
    .search-smart-mobile-results .rs-title {
        font-size: 1rem;
        font-weight: 500;
    }
    
    .search-smart-mobile-results .group-title {
        font-size: 1.1rem;
        font-weight: 600;
        margin: 15px 0 10px 0;
        color: #333;
    }
    .title-hosming{
      margin-left: 0 !important;
    }
}

.card-producto-mj{
  height: 130px !important;
}

.mj-img-producto{
  width: 150px;
}



.topping-item {
    transition: opacity 0.5s ease, transform 2s cubic-bezier(0, 0, 0.44, 1.18);
    cursor: pointer;
}

.topping-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2) !important;
}

.transition-all {
    transition: opacity 0.5s ease, transform 2s cubic-bezier(0, 0, 0.44, 1.18);
}

.topping-item:hover .transition-all {
    transform: scale(1.1);
}

.topping-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: 8px;
}

.topping-item:hover .topping-overlay {
    opacity: 1;
}

@media (max-width: 1199px) {
  .toppings{
    padding-top: 0 !important;
  }
  .topping-item:hover .transition-all {
    transform: none;
  }
  .top-mb{
    margin-bottom: 15px;
  }

}


.publicidad-item {
    transition: opacity 0.5s ease, transform 2s cubic-bezier(0, 0, 0.44, 1.18);
    cursor: pointer;
}

.publicidad-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2) !important;
}

.publicidad-item .transition-all {
    transition: opacity 0.5s ease, transform 2s cubic-bezier(0, 0, 0.44, 1.18);
}

.publicidad-item:hover .transition-all {
    transform: scale(1.05);
}

.publicidad-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: 8px;
}

.publicidad-item:hover .publicidad-overlay {
    opacity: 1;
}
.publicidad-doble{
  padding-bottom: 3rem !important;
}

/* Espaciado para móvil */
@media (max-width: 767.98px) {
    .publicidad-item {
        margin-bottom: 1.5rem;
    }
    .publicidad-doble{
      padding-bottom: 0 !important;
    }
}

/* .link__social:hover{
    background-color: var(--blanquecino);
    text-decoration: none;
    color: var(--super-negro);
} */

.btn-buscador{
  background-color: #335de8 !important; 
  border: 0px solid #335de8 !important; 
  cursor: pointer !important;
}
.btn-buscador:focus, .btn-buscador:active{
  outline: none !important;
}


.nav-telf{
    font-size: 16px !important;
}

/* Contenedor del mega */
.mega-menu {
    position: absolute;
    left: -30px;
    top: 100%;
    width: calc(100% + 360px);
    background: #ffffff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
    padding: 30px 40px;
    z-index: 2000;
    border-top: 4px solid #2e4b8f;
    transition: opacity 180ms ease, transform 180ms ease;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    overflow-x: auto;
}

/* mostrar */
.mega-menu.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* inner */
.mega-inner { max-width: 1400px; margin: 0 auto; }

/* GRID: 4 columnas en desktop, responsive abajo */
.mega-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* <- aquí controlas cuantas columnas */
    gap: 0px 15px; /* gap vertical y horizontal */
    align-items: start;
}

/* cada enlace como item en la columna, se apilan verticalmente */
.mega-link {
    display: block;
    font-size: 15px;        /* más pequeña para que entre */
    line-height: 1.6;
    padding: 6px 0;
    color: #3D464D;
    text-decoration: none;
    white-space: normal;    /* permitir wrap pero con columnas más anchas ya no se romperán mal */
    word-break: keep-all;   /* evita romper palabras en medio (para idiomas como español) */
}

/* si prefieres evitar wrap por completo: usar white-space: nowrap; pero puede crear overflow */
.mega-link:hover { color: #000; }

/* responsive: menos columnas en pantallas menores */
@media (max-width: 1199.98px) {
    .mega-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mega-menu { display: none !important; } /* el collapse móvil se encarga */
}
@media (max-width: 575.98px) {
    .mega-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

/* Mega Menu Marcas - Mismo estilo que categorías */
.mega-menu-marcas {
    position: absolute;
    left: 0;
    top: 100%;
    width: 480px; /* Ancho específico para marcas */
    background: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
    padding: 20px;
    z-index: 2000;
    border-top: 4px solid #2e4b8f;
    transition: opacity 180ms ease, transform 180ms ease;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    overflow-x: auto;
    padding-right: 30px;
}

/* mostrar */
.mega-menu-marcas.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* inner */
.mega-inner-marcas { 
    max-width: 100%; 
    margin: 0 auto; 
}

/* GRID: 4 columnas en desktop para marcas */
.mega-grid-marcas {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px 28px;
    align-items: start;
}

/* cada enlace de marca */
.mega-link-marca {
    display: flex;
    align-items: center;
    gap: 0px;
    font-size: 13px;
    line-height: 1.6;
    color: #444;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.mega-link-marca:hover { 
    color: #335de8; 
}
.banner-hosming {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 6;       /* Proporción moderna tipo banner */
    object-fit: cover;          /* Evita deformaciones */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.container-publicidad{
  padding-left: 3.4rem;
  padding-right: 3.4rem;
}


.nav-item:hover{
  background-color: #427bff;
  color: #fff !important;
}
.nav-item:active, .nav-item:focus{
  color: #fff !important;
}

#ddBrands:hover{
  color: #fff !important;
}
.filter-close-btn{
  background: transparent !important;
  border: none;
}
/* imagen de la marca en el mega menu */
.mega-marca-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    flex-shrink: 0;
    border: 1px solid #e4e4ee;
}
/* Estilos para la sección de productos en dropdown móvil */
@media (max-width: 991.98px) {
    .hover-bg-light:hover {
        background-color: #f8f9fa;
    }

    .mv-cp{
      padding-top: 0px !important;
    }
    .container-btn-servicio{
      position: relative;
      bottom: 15px;
    }
    
    .dropdown-menu .border-bottom {
        border-bottom: 2px solid #e9ecef !important;
    }
    
    .dropdown-menu h6.text-primary {
        color: #335de8 !important;
        font-size: 1.1rem;
    }
    
    .dropdown-menu .row {
        margin: 0 -5px;
    }

    .dropdown-menu .col-12 {
        padding: 0 5px;
    }
    
    .dropdown-menu .rounded {
        border-radius: 6px !important;
    }
    .nav-item:hover{
      background-color: #fff !important;
      color:#333333 !important ;
    }
    .nav-item:focus, .nav-item:active{
      background-color: #fff !important;
       color:#333333 !important ;
    }
}
/* responsive para marcas */
@media (max-width: 1199.98px) {
    .mega-menu-marcas { 
        width: 500px; 
    }
    .mega-grid-marcas { 
        grid-template-columns: repeat(3, minmax(0, 1fr)); 
    }
}

@media (max-width: 991.98px) {
    .mega-menu-marcas { 
        display: none !important; 
    }
}

@media (max-width: 767.98px) {
    .mega-menu-marcas { 
        width: 400px; 
    }
    .mega-grid-marcas { 
        grid-template-columns: repeat(2, minmax(0, 1fr)); 
    }
}

@media (max-width: 575.98px) {
    .mega-menu-marcas { 
        width: 300px; 
    }
    .mega-grid-marcas { 
        grid-template-columns: repeat(1, minmax(0, 1fr)); 
    }
}

/* Ocultar el dropdown de Bootstrap de marcas en desktop */
@media (min-width: 992px) {
    .nav-item.dropdown .dropdown-menu[aria-labelledby="ddBrands"] {
        display: none !important;
    }
    
    /* Asegurar que nuestro mega menu tenga prioridad */
    .mega-menu-marcas {
        display: block !important;
    }
}

/* En móvil, mostrar el dropdown de Bootstrap y ocultar nuestro mega menu */
/* Menú de productos móvil */
@media (max-width: 991.98px) {
    .nav-item.dropdown .dropdown-menu {
        max-height: 70vh;
        overflow-y: auto;
        width: 100% !important;
    }
    
    .hover-bg-light:hover {
        background-color: #f8f9fa;
    }
    
    .dropdown-menu h6.text-primary {
        color: #335de8 !important;
        font-size: 1.1rem;
        border-bottom: 2px solid #e9ecef;
        padding-bottom: 10px;
        margin-bottom: 15px;
    }
}

/* ajustes estéticos del botón */
.nav__category { background: transparent !important; border: none; }
.nav__category h6 { color: #fff; font-weight: 700; }


.category_content:hover h6,
.category_content:hover small {
  /* color: var(--blanquecino) !important;
  text-decoration: none !important; */
}

.nav__category{
    background-color: var(--azul-oscuro) !important;
}
.text-sub-category{
    color: var(--blanco) !important;
}


.logo__jhimbo__mobile img{
    width: 200px !important;
    padding-left: 10px;
}
.search__mobile{
    display: none;
}
.search_input:focus{
    border:1px solid var(--azul-claro) !important;
}
.subidor_btn:focus, .subidor_btn:active, .subidor_btn:hover {
    background-color: var(--azul) !important;
    border-color: var(--azul) !important;
}

/* Estilos para el menú móvil lateral */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: none;
}

.mobile-menu-overlay.active {
    display: block;
}

.mobile-sidebar-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 320px;
    height: 100%;
    background-color: white;
    z-index: 9999;
    transition: left 0.3s ease;
    overflow-y: auto;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.mobile-sidebar-menu.active {
    left: 0;
}

.mobile-menu-header {
    padding: 15px 20px;
    border-bottom: 1px solid #efefef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
}

.mobile-menu-header .logo__jhimbo__mobile img {
    height: 35px;
}

.dropdown-toggle:focus .dropdown-toggle:active{
  background-color: #fff !important;
}

.mobile-menu-close {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-menu-content {
    padding: 20px 0;
    padding-top: 0px !important;
}

.mobile-menu-content .nav-item {
    border-bottom: 1px solid #f5f5f5;
}

.mobile-menu-content .nav-link {
    padding: 15px 20px;
    color: #333;
    font-weight: 500;
    display: flex;
    align-items: center;
}


/* Ocultar la flecha duplicada de Bootstrap */
.mobile-menu-content .nav-link .fa-angle-down {
    display: none;
}

.mobile-menu-content .dropdown-menu {
    position: static !important;
    transform: none !important;
    border: none;
    border-radius: 0;
    width: 100%;
    box-shadow: none;
    padding: 0;
    display: none;
}

.mobile-menu-content .dropdown-menu.show {
    display: block;
}

.mobile-menu-content .dropdown-item {
    padding: 12px 20px 12px 40px;
    border-bottom: 1px solid #f5f5f5;
    color: #555;
}

.mobile-menu-content .dropdown-item:hover {
    background-color: #f8f9fa;
    color: #335de8;
}

/* Asegurar que el body no se desplace cuando el menú esté abierto */
body.menu-open {
    overflow: hidden;
}

/*boton whatsap*/
.holographic-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  bottom: 15px;

}

.holographic-card {
  width: 80%;
  height: 40px;
  background: var(--verde-wo);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease;
    cursor: pointer;
}

.holographic-card h2 {
  color: var(--blanco);
  font-size: 1rem !important;
  position: relative;
  z-index: 2;
  font-size: 16px;
  margin-bottom: 0 !important;
}

.holographic-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    0deg, 
    transparent, 
    transparent 30%, 
    rgba(0,255,255,0.3)
  );
  transform: rotate(-45deg);
  transition: all 0.5s ease;
  opacity: 0;
}

.holographic-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(0,255,255,0.5);
}

.holographic-card:hover::before {
  opacity: 1;
  transform: rotate(-45deg) translateY(100%);
}

.feature-card {
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
  background-color: #fff;
  height: 100%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}


.icon-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 1.2rem;
}

.icon-wrapper i{
  font-size: 26px;
}

.feature-icon {
  font-size: 34px;
  color: #007bff;
  transition: transform 0.3s ease, color 0.3s ease;
}

.feature-card:hover .feature-icon {
  transform: rotate(15deg) scale(1.1);
  color: #0056b3;
}

.text-wrapper h5 {
  font-size: 1rem;
  margin-bottom: 2px;
}

.text-wrapper p {
  font-size: 0.9rem;
  color: #6c757d;
}
@media (max-width: 700px) {
  .feature-card p{
    display: none !important;
  }
  .feature-card h5{
    font-size: 12px !important;
    letter-spacing: 0.8px;
  }

}

/* 📱 Ajuste responsivo: dos arriba y dos abajo hasta 1200px */
@media (max-width: 1200px) {
  .col-feature {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  
  .feature-card h5{
    font-size: 15px ;
    letter-spacing: 0.8px;
  }
  .icon-wrapper i{
    font-size: 26x;
  }
  .feat-top{
    padding-bottom: 10px;
  }
  .featured{
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }


}

@media (max-width: 767px) {
  .feature-card {
    padding: 10px;
    flex-direction: row;
    text-align: left;
    height: 70px;
  }
}



/* --- Distribución responsive --- */
@media (max-width: 1200px) {
  .custom-product-grid .col-xl-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 768px) {
  .custom-product-grid .col-xl-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* --- Estilos base --- */
.product-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* --- Imagen más ancha --- */
.product-image {
  width: 120px;
  height: 120px;
  object-fit: cover;
  transition: transform 0.25s ease-in-out;
}

/* --- Pequeña animación solo en la imagen --- */
.product-image:hover {
  transform: scale(1.05);
}
.producto-super .product-item{
  transition: none !important;
}
.producto-super .product-item:hover{
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
}


.text-wrapper h5 {
  font-size: 1rem;
  margin-bottom: 2px;
}

.text-wrapper p {
  font-size: 0.9rem;
  color: #6c757d;
}

@media (max-width: 767px) {
  .feature-card {
    padding: 15px;
    flex-direction: row;
    text-align: left;
  }
}


.product-img .img-hover {
    opacity: 0;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s;
}

.product-img:hover .img-hover {
    opacity: 1;
}

.product-img .img-main {
    transition: opacity 0.3s;
}
.product-img:hover .img-main {
    opacity: 0;
}

/*boton flotante whatsapt*/
 #whatsapp-chat {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Header flotante con ícono */
#whatsapp-chat .chat-header {
    background-color: #25D366;
    color: white;
    padding: 14px 16px;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: all 0.3s;
    order: 2;
}

#whatsapp-chat .chat-header:hover {
    background-color: #20b558;
    transform: scale(1.05);
}

#whatsapp-chat .chat-header i {
    font-size: 30px;
}

/* Caja de chat */
#whatsapp-chat .chat-box {
    display: none;
    flex-direction: column;
    background: white;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    overflow: hidden;
    margin-bottom: 10px;
    width: 280px;
    max-width: 90%;
    animation: fadeIn 0.3s;
    order: 1;
}

/* Animación */
@keyframes fadeIn {
    from {opacity: 0; transform: translateY(20px);}
    to {opacity: 1; transform: translateY(0);}
}

/* Encabezado de la caja de chat */
#whatsapp-chat .chat-box-header {
    background-color: #075E54;
    color: white;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#whatsapp-chat .chat-box-header img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

#whatsapp-chat .chat-box-header .profile-info {
    flex: 1;
}

#whatsapp-chat .chat-box-header .profile-name {
    font-weight: bold;
    font-size: 14px;
}

#whatsapp-chat .chat-box-header .profile-status {
    font-size: 12px;
    opacity: 0.8;
    display: flex;
    align-items: center;
    gap: 5px;
}

#whatsapp-chat .chat-box-header .profile-status::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #4CAF50;
}

#whatsapp-chat .chat-body {
    padding: 20px;
    text-align: left;
}
.chat-body p{
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
}
#whatsapp-chat .chat-body p {
    margin-bottom: 12px;
    font-size: 14px;
    color: #333;
    line-height: 1.4;
}

/* Botón dentro del chat */
#whatsapp-chat .chat-button {
    display: inline-block;
    background-color: #25D366;
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    font-size: 15px !important;
}

#whatsapp-chat .chat-button:hover {
    background-color: #20b558;
}

/* Pie de la caja de chat */
#whatsapp-chat .chat-footer {
    background-color: #f0f0f0;
    padding: 8px 15px;
    font-size: 10px;
    color: #666;
    text-align: center;
    border-top: 1px solid #e0e0e0;
}

/* Responsive */
@media (max-width: 480px) {
    #whatsapp-chat {
        right: 10px;
        bottom: 10px;
    }
    
    #whatsapp-chat .chat-box {
        width: 260px;
    }
}

/*videos*/
/* Oscurecer miniatura y play centrado */
.video-thumb-overlay{
  position:absolute; inset:0; background:#000; opacity:.45; transition:opacity .25s;
}
.video-trigger:hover .video-thumb-overlay{ opacity:.55; }
.video-play-icon{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:3rem; line-height:1; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.4);
  transition: transform .2s;
}

.video-thumb{
  aspect-ratio: 9 / 16;   /* alto en todas las vistas */
  width: 100%;
  background:#000;
}
.video-thumb > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.dropdown-menu.show{
    z-index: 5000;
}
.badge-discount {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #e63946; /* rojo */
  color: #fff;
  font-weight:600;
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 12px;
  z-index: 10;
  letter-spacing: 0.5px;
}

/* Carrusel móvil con scroll-snap */
.video-scroller-wrap { position: relative; }
.video-scroller{
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
.video-card{
  flex: 0 0 88%;            /* 1 card por vista (ajusta 88–95%) */
  scroll-snap-align: center;
}

/* Botones prev/next (móvil) */
.vs-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    border: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    font-size: 35px;
    line-height: 36px;
    text-align: center;
}
.vs-prev{ left: 6px; }
.vs-next{ right: 6px; }

.vs-btn:active , .vs-btn:focus{
    outline: none !important;
}

.video-trigger:hover .video-play-icon{ transform:translate(-50%,-50%) scale(1.06); }

/* Accesibilidad: quitar scroll del body cuando abierto (opcional si quieres añadir con JS) */
.body-lock{ overflow:hidden; }

/* Ajusta flechas del carrusel */
.vendor-carousel .owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none; /* deja pasar clics excepto en botones */
}

.vendor-carousel .owl-nav button {
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  font-size: 10rem;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  pointer-events: auto; /* habilita clics en los botones */
  transition: background 0.3s;
}

.vendor-carousel .owl-nav button:hover {
  background: rgba(0,0,0,0.8);
}

.cat-card{ border-radius:16px; }
.prod-box{
    height:120px; border-radius:16px; position:relative;
    display:flex; align-items:center; justify-content:center;
    background-color: #fff !important;
}
.prod-box img{ max-height:100%; max-width:100%; object-fit:contain; border: 8px solid #fff; }
.disc-badge{
    position:absolute; top:6px; right:6px;
    background:#dc3545; color:#fff; padding:.2rem .45rem; border-radius:12px;
    font-size:.75rem; line-height:1;
}
.btn-see-more .eyes{ display:inline-block; transition:transform .2s ease; }
.btn-see-more:hover .eyes{ transform:translateX(6px) rotate(-6deg); }

.txt-ofertas{
  position: relative;
  bottom: 2px;
}

/* 1 solo resultado: columna = 100% y card centrada */
#shopGrid.single-one > .product-col {
  flex: 0 0 100%;
  max-width: 100%;
}
#shopGrid.single-one .card {
  margin-left: auto;
  margin-right: auto;
  /* opcional, limita ancho si quieres que no se estire demasiado */
  max-width: 640px;
}

/* Map grande responsivo */
.ratio-map {
  position: relative;
  width: 100%;
  padding-top: 60vh;   /* controla la altura relativa */
  max-height: 600px;   /* límite en pantallas grandes */
}

.ratio-map > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: .5rem;
}


  /* ----- NAV EN MÓVIL ----- */
  @media (max-width: 991.98px){
    #navSecundario .navbar-collapse{
      padding: .5rem 0rem;
      width: 100%;
    }
    #navSecundario .navbar-nav .nav-link{
      margin: .15rem 0;
    }
    .nav-link{
      padding-left: 20px !important;
    }
    .med-mb{
      padding-left: 15px;
      padding-right: 15px;
    }
    .med-mm{
      margin-left: 15px;
      margin-right: 15px;
    }
    .shop-filters-bar{
      margin-top: 1rem;
    }
    #viewToggle{
      display: none !important;
    }

    .navbar_mobile {
      background-color: #fff !important;
      padding-top: 0.5rem !important;
      padding-bottom: 0.5rem !important;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
    }

  }


.btn-see-more {
    color: #000; /* Texto negro */
    border: 1px solid #ccc;
    background-color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
}
.btn-see-more:hover {
    background-color: #f8f9fa;
    border-color: #999;

}


/* Ojitos base */
.eyes {
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url('../img/ojos.png') center/contain no-repeat;
    margin-left: 6px;
    transition: none !important; 
    position: relative;
    top: 5px;
}

/* Ojitos al hacer hover */
.btn-see-more:hover .eyes {
    transform: scaleX(-1);
    transition: none !important; 
}

.btn-ofertas{
    border: 1px solid var(--blanquecino) !important;
    background-color: #007bff !important;
    font-size: 14px !important;
    border-radius: 15px !important;
    color:var(--blanco) !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px !important;
}



/* Botón del carrito */
.cart-btn{
  background: transparent;
  border: 0;
  color: #fff;                 /* Icono blanco para navbar oscuro */
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px 4px;
}
.cart-btn:focus{ outline: 2px solid rgba(255,255,255,.3); outline-offset:2px; }

/* Badge contador */
.cart-badge{
  position: absolute;
  top: -6px; right: -10px;
  background: #fff;
  color: #111;
  font-size: 11px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  min-width: 20px;
  text-align: center;
}

/* Panel */
.cart-menu{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.2);
  overflow: hidden;
  z-index: 1000;
}

/* Lista */
.cart-items{
  max-height: 260px;
  overflow: auto;
}
.cart-item{
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid #eee;
}
.cart-item img{
  width: 56px; height: 56px; object-fit: contain; border-radius: 6px;
}
.cart-item-info{ flex: 1; min-width: 0; }
.cart-item-name{
  font-size: 12px; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cart-item-row{
  margin-top: 6px;
  display: flex; align-items: center; justify-content: space-between;
}
.cart-item-price{ color: #111; }

/* Cantidades */
.qty{
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid #ddd; border-radius: 8px; padding: 2px;
}
.qty-btn{
  width: 28px; height: 28px; border: 0; background: #f3f4f6;
  border-radius: 6px; font-size: 16px; cursor: pointer;
}
.qty-btn:hover{ background:#e5e7eb; }
.qty-input{
  width: 46px; height: 28px; border: 0; text-align: center; font-weight: 600;
}
.qty-input:focus{ outline: 2px solid var(--primary); outline-offset: 1px; }
/* Quitar flechas en Chrome */
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.qty-input[type=number]{ -moz-appearance: textfield; }
.qty-btn:active, .qty-btn:focus{
    outline: none;
}

/* Footer */
.cart-footer{ padding: 12px 14px; background:#fafafa; }
.cart-sub{
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; margin-bottom: 10px;
}
.buy-btn{
  display: block; width: 100%; text-align: center;
  background: var(--primary); color:#fff; text-decoration: none;
  padding: 10px 12px; border-radius: 8px; font-weight: 600;
}
.buy-btn:hover{ background:#2549c9; }

/* Polyfill para .ratio-1x1 (Bootstrap 4) */
  .ratio { position: relative; width: 100%; }
  .ratio.ratio-1x1::before { content:""; display:block; padding-top:100%; }
  .ratio > * { position:absolute; top:0; left:0; right:0; bottom:0; }

  /* Efecto hover: mostrar segunda imagen */
  .hover-swap img { width:100%; height:100%; object-fit:contain; }
  .hover-swap .thumb-main  { opacity:1;  transition:opacity .3s ease; }
  .hover-swap .thumb-hover { opacity:0;  transition:opacity .3s ease; }
  .hover-swap:hover .thumb-main  { opacity:0; }
  .hover-swap:hover .thumb-hover { opacity:1; }

  /* Botón de carrito personalizado */
  .btn-cart {
    width:40px; height:40px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    background: var(--blanco);
    border:1px solid #cdd6ff;
    color:#335de8;
  }
  .btn-cart:hover {
    background:#fafafa;
  }
  .filters-shop{
    padding: 1rem;
  }
  .btn-filter-apply{
    background-color: var(--blanquecino);
    color: var(--negro);
    text-decoration: none;
    font-size: 15px;
    border: 1px solid #ced4da;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 14px;
    letter-spacing: 0.4px;
  }
  .btn-filter-apply:active, .btn-filter-apply:focus{
    outline: none !important;
  }
  .form-control:active .form-control_focus{
    outline: none !important;
    border-color: transparent !important;
  }
  .btn-filter-apply:hover{
    background: rgb(212, 214, 214);
  }
  
  .apply-one{
    margin-right: 10px;
  }
  .search-shop{
    width: 100%;
  }
  .card-shop{
    margin-bottom: 1rem;
  }

  .product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;      /* máximo 2 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.8em;          /* asegura altura consistente */
    line-height: 1.4em;         /* 1.4em x 2 líneas = 2.8em */
  }


  /* --- Dropdown Marcas --- */
.marcas-grid {
  /* min-width: 600px; */
  padding: 10px;
}
.navbar-toggler:focus, .navbar-dark .navbar-toggler:active{
  outline: none;
}
/* Cuando el dropdown está abierto, lo mostramos en grid */
.navbar .dropdown.show .marcas-grid {
  display: grid; 
  grid-template-columns: repeat(5, 1fr); /* 5 por fila */
  gap: 10px;
}

/* Cada “celda” de marca */
.marca-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Para versión con altura automática */
.publicidad-item img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}





/* Tarjetita fija */
.marca-card {
  width: 50px;       /* ancho fijo */
  height: 50px;       /* alto fijo */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  overflow: hidden;
}

/* Imagen ajustada */
.marca-card img {
  max-width: 100%;    
  max-height: 100%;
  object-fit:fill;
}

/* === Carrusel de marcas (home) === */
#vendorCarousel .brand-slide{
  height: 80px;               /* alto uniforme del “bloque” */
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

#vendorCarousel .brand-slide img{
  max-height: 56px;           /* todas las marcas con la misma altura visual */
  max-width: 100%;
  width: auto;
  object-fit: contain;
}



  .pill-wrap { display:flex; flex-wrap:wrap; }
  .pill-wrap .filter-pill {
    border: 1px solid #ddd;
    background: #fff;
    color: #666;
    border-radius: 4px;
    padding: 6px 12px;
    margin: 6px 8px 0 0; /* simula gap en BS4 */
    font-size: .9rem;
    line-height: 1.2;
    cursor: pointer;
    outline: none;
  }
  .pill-wrap .filter-pill:hover { background:#f5f7ff; border-color:#c9d2ff; color:#335de8; }
  .pill-wrap .filter-pill.active { background:#335de8; color:#fff; border-color:#335de8; }

/* Contenedor con zoom (no se deforma la imagen) */
/* .zoom-wrap{
  position: relative;
  overflow: hidden;
}
.zoom-img{
  object-fit: contain;
  transition: transform .25s ease;
}
.zoom-img{
  object-fit: contain;
  transition: transform .2s ease, transform-origin .1s linear;
  cursor: zoom-in;
} */

  /* Estilos para el HTML de la descripción larga */
  .product-description h1,
  .product-description h2,
  .product-description h3,
  .product-description h4,
  .product-description h5,
  .product-description h6 {
      color: #333;
      margin-top: 1rem;
      margin-bottom: 0.5rem;
  }

  .product-description p {
      margin-bottom: 1rem;
      line-height: 1.6;
  }

  .product-description ul, 
  .product-description ol {
      margin-bottom: 1rem;
      padding-left: 2rem;
  }

  .product-description li {
      margin-bottom: 0.5rem;
  }

  .product-description strong {
      font-weight: bold;
  }

  .product-description em {
      font-style: italic;
  }
  .product-description{
    border: 1px solid #eaeaea; 
    padding: 0px 20px 15px 20px;;
  }
  .menu-description-detail{
    border-bottom: none !important;
  }
  .card-product-detail{
    display: flex !important;
    flex-direction: column !important;
  }

  .tab-des{
    border: 1px solid #eaeaea !important;
  }

/* Tira de miniaturas debajo */
.thumb-strip {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 10px;
  overflow-x: auto;
  padding: 5px 0;
  background: transparent;
}

.thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background: transparent;
  flex: 0 0 auto;
  width: 80px;  /* un poco más grande */
  height: 80px;
  display: flex;               /* centrado */
  align-items: center;
  justify-content: center;
  transition: border-color .2s ease, box-shadow .2s ease;
  cursor: pointer;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* asegura que la imagen no se deforme */
  border-radius: 6px;  /* coincide con el cuadro */
}

.thumb:hover {
  border-color: #cbd5e1;
}

.thumb.active, .thumb:focus {
  border-color: var(--azul) !important; /* fallback si var no está definida */
  outline: none !important;
}
.btn-mas, .btn-menos{
    background-color: var(--blanquecino) !important;
    border: #e5e7eb;
}
.btn-mas:active, .btn-mas:focus, .btn-menos:focus, .btn-mas.active{
    background: transparent;
    outline: none;
    box-shadow: transparent  !important;
}
.btn-carrito{
    border: 1px solid var(--azul);
    text-decoration: none;
    background: var(--blanco);
    color: var(--azul);
    height: 38px;
    padding-right: 10px;
    padding-left: 10px;
}
.btn-carrito:hover{
    background-color: #f8f8f8;
}

/* Caja */
.qctrl{
  display:inline-flex;
  align-items:center;
  width:120px;
  height:40px;
  border:1px solid #ccc;
  border-radius:6px;
  overflow:hidden;
  background:#fff;
}

/* Botones */
.qctrl__btn{
  flex:0 0 40px;
  height:100%;
  border:none;
  background:#f2f2f2;
  font-size:18px;
  font-weight:700;
  color:#333;
  cursor:pointer;
  transition:background .2s ease;
  user-select:none;
}
.qctrl__btn:hover{ background:#e6e6e6; }
.qctrl__btn:active{ background:#dcdcdc; outline: none !important;}
.qctrl__btn[disabled]{ opacity:.45; cursor:not-allowed; }
.qctrl__btn:focus{ outline: none !important;}

/* Input */
.qctrl__input{
  flex:1;
  height:100%;
  width: 100%;
  border:none !important;
  outline:none !important;
  text-align:center;
  font-size:16px;
  font-weight:600;
  color:#333;
  background:transparent;
  box-shadow:none !important;
  -webkit-tap-highlight-color: transparent;
  -moz-appearance:textfield;
}
.qctrl__input::-webkit-outer-spin-button,
.qctrl__input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.btn-complete-pay{
  color: var(--blanco) !important;
}
.btn-complete-pay:hover{
  background-color: var(--azul-oscuro) !important;
  border: 1px solid var(--azul-oscuro) !important;
}
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 8px;
  border-radius: 50%;
  background-color: #28a745;
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.btn-whatsapp .btn-text {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  margin-left: 0;
  font-size: 14px;
}

.btn-whatsapp:hover {
  width: 115px; /* ancho expandido */
  border-radius: 30px;
  justify-content: flex-start;
  padding-left: 12px;
}

.btn-whatsapp:hover .btn-text {
  max-width: 150px;
  opacity: 1;
  margin-left: 8px;
}

.stats-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

.stat-item {
    transition: transform 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-5px);
}

.bg-primary {
    background-color: #007bff !important;
}

.btn-square {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-whatsapt-layout{
  position:fixed;
  width:60px;
  height:60px;
  bottom:20px;
  right:20px;
  background-color:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:30px;
  z-index:10;
}
.card-container-product{
  padding: 3px !important;
}
.product-card {
  margin-bottom: 20px; 
}
.price-card{
  font-size: 15px;
  font-weight: 500;
}
.whatsapp-icon {
  margin-top:13px;
}
.txt-title-filter{
    margin-top: 0.5rem;
    margin-bottom: 4px !important;
    font-size: 20px;
}
.ft-2{
  margin-top: 2rem;

}
.txt-title-filter span{
  background-color:#fff ;
}
.results-filter{
  background-color:#f8f8f8 ;
}
.card-product{
  /* box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); */
  border: 2px solid #eaeaea !important;
}
.filter-lat{
  background-color: #f8f8f8;
  border: 1px solid #eaeaea ;
  padding: 5px 5px 5px 10px;
  border-radius: 15px;
}
#loadMoreBtn {
    transition: all 0.3s ease;
    padding: 12px 30px;
    font-weight: 600;
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}

#loadMoreBtn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    background-color: #0056b3;
    border-color: #0056b3;
}

#loadMoreBtn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}


.shop-filters-bar {
    background: #f8f8f8;
    border: 1px solid rgba(20,20,20,0.03);
    padding: 0.75rem 1rem !important; 
    border:1px solid rgb(221, 221, 221);
    border-radius: 5px;
}

/* Resultados */
.results-info {
    color: #6b7280; /* gris suave */
    font-weight: 500;
}

/* Chips de filtro */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #f1f5f9;
    color: #0f172a;
    padding: .35rem .6rem;
    border-radius: 999px;
    font-size: .85rem;
    box-shadow: 0 1px 2px rgba(2,6,23,0.04);
    border: 1px solid rgba(2,6,23,0.04);
}

.filter-chip .filter-label {
    display: inline-block;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botón cerrar del chip */
.filter-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #475569;
    cursor: pointer;
    margin-left: 4px;
}
.filter-close-btn:hover { color: #0b5ed7; transform: translateY(-1px); }

.btn-col{
  border: 1px solid rgb(221, 221, 221) !important;
}

/* Select */
.select-rec select.form-control {
    min-width: 190px;
    border-radius: 8px;
    padding: .35rem .6rem;
    box-shadow: 0 1px 2px rgba(2,6,23,0.04) inset;
    background: #fff;
}
.btn-whatsapt:hover{
  background-color: #218838 !important;
  color: #fff !important;
}
.txt-price-hr{
  color:#3D464D !important;
  font-weight: 500 !important;
}
/* View toggle buttons */
.btn-group .btn-view {
    border-radius: 8px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.06);
    color: #334155;
    /* transition: all .12s ease; */
  
}
.btn-group .btn-view.active {
    background: linear-gradient(180deg, #0b5ed7, #0a58ca);
    color: #fff;
    border-color: rgba(11,94,215,0.9);
    box-shadow: 0 8px 24px rgba(11,94,215,0.12);
}

/* Responsive tweaks */
@media (max-width: 767.98px) {
    .shop-filters-bar { gap: .5rem; }
    .results-info { font-size: .9rem; }
    .select-rec select.form-control { min-width: 140px; }
}

/* Ajustes visuales pequeños */
.shop-filters-bar .fa-th-large,
.shop-filters-bar .fa-list {
    font-size: 1rem;
}

.load-more-spinner {
    margin-left: 8px;
}

.btn-square { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; padding:0; border-radius:6px; }
    .btn-square.active, .btn-square:active, .btn-square:focus { box-shadow: 0 0 0 0.125rem rgba(13,110,253,.15); }


.icon-pay{
  border: 2px solid #335ce8 ;
  width: 50px;
  padding: 10px 10px 5px 10px;
  margin: 0 auto
}

.banner-servicio {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  position: relative;
  overflow: visible; /* permite sobresalir */
  min-height: 215px;
  margin-top: 2rem;
}
.hombre-img {
  max-height: 265px;
  position: absolute;
  bottom: -111px;
  right: 10%;
  z-index: 5;
}

 .how-card i {
    transition: transform 0.3s ease, color 0.3s ease;
  }
  .how-card:hover i {
    transform: scale(1.2);
    color: #0056d2;
  }
  @media (max-width: 767px) {
    .how-card {
      text-align: center;
    }
    .how-card i {
      margin-bottom: 10px;
    }
  }

.zero-m{
  margin-bottom: 0px !important;
}

.txt-asesor{
  margin-top: 1rem;
}

.seccion-consultar {
  position: absolute;
  bottom: -54px;
  right: 60%;
  z-index: 5;
}
.btn-remove-filter:focus, .btn-remove-filter:active{
  outline: none !important;
}

.active-nav{
  background-color: #427bff !important;
  color: #fff;
}

.banner-servicio .onda {
  position: absolute;
  top: 0;
  right: 0;
  width: 35%;
  height: 100%;
  background: white;
  border-top-left-radius: 100% 50%;
  border-bottom-left-radius: 100% 50%;
}

.banner-servicio {
  max-height: 220px;
  position: relative;
  z-index: 2;
}
.img-banner-man{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.seccion-consultar:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.content-search-product{
    width: 80% !important;
  }


/* Modal Video */
.modal-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none; /* se muestra con aria-hidden=false */
    justify-content: center;
    align-items: center;
    z-index: 1050;
}

.modal-video[aria-hidden="false"] {
    display: flex;
}

.modal-video-backdrop {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000000; /* Cambiado a negro sólido */
    top: 0;
    left: 0;
}

.modal-video-content {
    position: relative;
    width: 90%;
    height: 90%;
    background: #000;
    z-index: 10;
}

.modal-video-content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Cambiado a 100% para usar toda la altura del contenedor */
    border: 0;
}

.modal-video-close {
    position: absolute;
    top: 0px;
    right: 2px;
    border-radius: 50%;
    border: 0;
    width: 40px; /* Un poco más grande para mejor visibilidad */
    height: 40px;
    cursor: pointer;
    z-index: 20;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}


/* Fullscreen en móviles */
@media (max-width: 768px) {
    .modal-video-content {
        width: 100%;
        height: 100%;
        max-width: none;
        padding-bottom: 0;
    }

    .modal-video-content iframe {
        position: relative;
        width: 100%;
        height: 100%;
    }
    
    .modal-video-close {
        top: 10px;
        right: 10px;
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
    #shopGrid{
      padding-right: 0px !important;
      padding-left: 0px !important;
    }
    .mb-mv{
      margin-top: 2rem;
    }
    .navbar-toggler{
      position: relative;
      right: 12px !important;
    }
    .txt-title-filter{
      margin-top: 10px !important;
    }
    .about-card{
      padding: 0 !important;
      margin-top: 10px;
    }
}

.btn-video {
  border: 0;
  height: 100%;
  display: block;
  width: 100%;
}

.btn-video:active, .btn-video:focus{
  outline: none;
}

/* Hacer toda la card clickeable */
.product-item {
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.card-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    text-decoration: none;
    border: 1px solid #eaeaea ;
}

/* Asegurar que los botones estén por encima del enlace */
.product-item .btn,
.product-item a:not(.card-link) {
    position: relative;
    z-index: 2;
}

/* Efecto visual al hacer hover en toda la card */
.product-item:hover .card-link {
    background-color: rgba(0,0,0,0.02);
}

.modal-video-close {
  position: absolute; top:8px; right:8px;
  z-index:3;
  background: rgba(0,0,0,0.7);
  color:#fff; border:none; 
  font-size:1.2rem; 
  padding:4px 10px; 
  border-radius:50%;
  cursor:pointer;
}
.modal-video-close:active, .modal-video-close:focus{
  outline: none !important;
}

/* Contenedor fijo para miniaturas */
.thumb-video {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 100%;       /* altura fija */
  overflow: hidden;
}

/* Imagen con tamaño uniforme, recortando si hace falta */
.thumb-video img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* cubre el contenedor sin deformar */
}

/* Overlay de play centrado */
.btn-video {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  display: inline-block;
  border-radius: 12px;
  overflow: hidden;
}

.thumb-video {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 12px;
}

.thumb-video img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

/* Círculo transparente con el ícono de play */
.overlay-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 96px;
    height: 68px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 45% / 70%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

/* Triángulo de “play” */
.overlay-play::before {
  content: "";
  position: absolute;
  left: 42%;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 14px 0 14px 24px; /* aumentado */
  border-color: transparent transparent transparent white;
}

/* Efecto al pasar el mouse */
.btn-video:hover .thumb-video img {
  transform: scale(1.05);
}

.btn-video:hover .overlay-play {
  background: rgba(255, 0, 0, 0.85);
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
}


.video-scroller-wrap {
  position: relative;
  overflow: hidden;
}

.video-scroller {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
}

.video-scroller::-webkit-scrollbar {
  display: none;
}
.playerModal{
  height: 80vh;
}

.video-card {
  flex: 0 0 auto;
  width: 150px; 
}

.vs-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(0,0,0,0.4);
  color: #fff;
  border: none;
  font-size: 1.8rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 50%;
}

.vs-prev { left: 0; }
.vs-next { right: 0; }

.vs-flecha{
  position: relative;
  bottom: 6px;
}

/* Forzar que la primera columna dentro de la card sea full-width */
.tab-des .row > div:first-child {
  display: block !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
}

/* Asegurar que el contenedor de la imagen ocupe todo el ancho y alto deseado */
.tab-des .prod-box {
  width: 100%;
  height: auto; /* ajusta altura según tu diseño */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 !important;
}

/* La imagen rellena todo el prod-box sin espacios */
.tab-des .prod-box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* usa 'contain' si prefieres sin recortes */
  margin: 0;
  padding: 0;
  border-radius: 0px !important;
}

/* Si hay elementos ocultos dentro de la row, aseguramos que no interfieran */
.tab-des .row > div:not(:first-child) {
  display: none !important;
}


/*celular*/
@media (max-width: 600px) {
    .con_header_mobile{
        display: none;
    }
    .mt-gx{
      padding-top: 1rem !important;
    }
    .header_mobile{
        background-color: var(--azul-oscuro) !important;
        text-align: left  !important;
    }
    .btn-my_account{
        background-color: transparent !important;
        border: 0px solid transparent !important;
        color: var(--blanco) !important;
    }
    .video-d{
      display: none;
    }
    .search__mobile{
        display: flex;
        justify-content: center;
        margin-bottom: 1rem;
    }
    .search__mobile__action{
        width: 93%;
    }
    /* .video-card{ flex-basis: 92%; } */
    .video-thumb{ aspect-ratio: 3 / 4; }

    .vlb-dialog {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    .vlb-media {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
    .vlb-aspect {
        position: relative;
        width: 100%;
        height: 100%;
        padding-top: 0;       
    }
    .vlb-video {
        width: 100%;
        height: 100%;
        object-fit: cover;    
    }
    .vlb-close {
        top: 12px;
        right: 12px;
        background: rgba(0,0,0,0.4);
        color: #fff;
    }
    .card-recomen_mb{
        gap: 1rem !important;
    }
    .cart-btn{ margin-right: 20px; }
    .txt-superior, .header_mobile{
      display: none !important;
    }
    .hombre-img{
      display: none;
    }
    .seccion-consultar{
      position: relative;
      bottom: 0;
      right: 0;
      bottom: 10px;
    }
    .banner-servicio{
      max-height: 280px;
    }
    .seccion-consultar{
      position: relative;
      top: 10px;
    }
    .select-rec{
      display: none;
    }
    .content-search-product{
      width: 100% !important;
    }
    .icon-whatsapt-layout{
      display: none;
    }
    .sec-pt{
      position: relative;
      bottom: 20px;
      margin-bottom: 0 !important;
    }
    .xx{
      display: none !important;
    }
    .mb-pb{
      margin-top:1rem
    }

     .modal-video {
      background: #000; /* sin transparencia para parecer fullscreen */
    }

    .modal-video-content {
      width: 100%;
      height: 100%;
      max-width: none;
      max-height: none;
      border-radius: 0;
      box-shadow: none;
    }

    #playerModal {
      width: 100%;  
      height: 100% !important;
      max-height: none;
      object-fit: contain; /* mantiene proporción */
    }

    .modal-video-close {
      top: 14px;
      right: 14px;
      background: rgba(0, 0, 0, 0.5);
      font-size: 24px;
    }
    .plyr__poster{
      height: 100% !important;
    }


  }


  @media (max-width: 767px) {
    .sec-pt{
      position: relative;
      bottom: 20px;
      margin-bottom: 0 !important;
    }
    .xx{
      display: none !important;
    }
  }
  


  @media (max-width: 1200px) {
    .hombre-img{
      display: none;
    }
     .seccion-consultar{
      position: relative;
      bottom: 0;
      right: 0;
      bottom: 10px;
    }

    .select-rec{
      display: none;
    }
    .content-search-product{
      width: 100% !important;
    }
    .mb-pb{
      margin-top:1.5rem
    }

  
  }