/* --------- FICHA DE PRODUCTOS --------- */
/* Seleccionamos el <div> interno que tiene el background inline */
.containerImagePrincipal a#main-fancy > div {
  background-size: contain !important;
  background-position: center center !important;
}

/* Selecciona el <div> con background dentro de cada .ficha_carousel_img */
.carousel-thumbs .ficha_carousel_img > a > div {
  background-size: contain !important;
  background-position: center center !important;
}


/* --------- FIN FICHA DE PRODUCTOS --------- */

/* --------- TOP pre header  --------- */
.page-header .sticky-wrapper::before {
    background-color: #002554;
}
.top-bar:before {
    background-color: #002554;
}
/* --------- FIN TOP pre header  --------- */

/* --------- Categorias HOME  --------- */
/* ---- Sección categorías: ancho completo ---- */
.categories.section-categories-index .container{
    /* anula el max-width de Bootstrap y quita márgenes laterales */
    max-width:none;
    width:100%;
    padding-left:0;
    padding-right:0;
}

/* ---- Grid flexible basado en flexbox ---- */
.section-categories-index .row{
    display:flex !important;   /* sobreescribe el display:flex de Bootstrap si fuera grid */
    flex-wrap:wrap;
    margin-left:-.5rem;        /* compensan el padding interno */
    margin-right:-.5rem;
}

/* ---- Item base: 4 columnas (≥ 992 px) ---- */
.section-categories-index .row > div{
    padding:.5rem;             /* separa las tarjetas */
    flex:0 0 25%;              /* 4 × 25 % */
    max-width:25%;
}

/* 3 columnas (≥ 768 px y < 992 px) */
@media (max-width:991.98px){
    .section-categories-index .row > div{
        flex:0 0 33.3333%;
        max-width:33.3333%;
    }
}

/* 2 columnas (≥ 576 px y < 768 px) */
@media (max-width:767.98px){
    .section-categories-index .row > div{
        flex:0 0 50%;
        max-width:50%;
    }
}

/* 1 columna (< 576 px) */
@media (max-width:575.98px){
    .section-categories-index .row > div{
        flex:0 0 100%;
        max-width:100%;
    }
}

/* --------- FIN Categorias HOME  --------- */
/* ---- Destacados: forzamos ancho completo del contenedor ---- */
.section-hightlights .container{
    max-width:none;
    width:100%;
    padding-left:0;
    padding-right:0;
}

/* ---- Desactivamos el carrusel y convertimos todo en grilla ---- */

/* 1) Ocultamos duplicados y controles del Owl */
.owl-carousel-hightlights .owl-item.cloned,
.owl-carousel-hightlights .owl-nav,
.owl-carousel-hightlights .owl-dots{
    display:none !important;
}

/* 2) Permitimos que el track se expanda y eliminamos la traslación */
.owl-carousel-hightlights .owl-stage-outer{
    overflow:visible !important;      /* que crezca libremente */
}
.owl-carousel-hightlights .owl-stage{
    display:flex !important;          /* flexbox en lugar de “pista” */
    flex-wrap:wrap;
    transform:none !important;        /* anulamos el scroll del carrusel */
    width:100% !important;
    margin-left:-.5rem;               /* compensan el padding de los items */
    margin-right:-.5rem;
}

/* 3) Cada tarjeta: 5 columnas base */
.owl-carousel-hightlights .owl-item{
    flex:0 0 20%;                     /* 5 × 20 % */
    max-width:20%;
    padding:.5rem;                    /* separación uniforme */
    width:auto !important;            /* sobrescribe el inline style width:210px */
}

/* ---- Puntos de quiebre responsivos ---- */
/* 4 columnas (≥ 992 px < 1200 px) */
@media (max-width:1199.98px){
    .owl-carousel-hightlights .owl-item{
        flex:0 0 25%;
        max-width:25%;
    }
}

/* 3 columnas (≥ 768 px < 992 px) */
@media (max-width:991.98px){
    .owl-carousel-hightlights .owl-item{
        flex:0 0 33.3333%;
        max-width:33.3333%;
    }
}

/* 2 columnas (≥ 576 px < 768 px) */
@media (max-width:767.98px){
    .owl-carousel-hightlights .owl-item{
        flex:0 0 50%;
        max-width:50%;
    }
}

/* 1 columna (< 576 px) */
@media (max-width:575.98px){
    .owl-carousel-hightlights .owl-item{
        flex:0 0 100%;
        max-width:100%;
    }
}

/* --------- Destacados HOME  --------- */
/* --- Contenedor: ancho completo + margen sutil --- */
.section-hightlights .container{
    max-width:none;
    width:100%;
    padding-left:1rem;   /* margen interno deseado */
    padding-right:1rem;
}

/* --- Anular carrusel y clones/controles --- */
.owl-carousel-hightlights .owl-item.cloned,
.owl-carousel-hightlights .owl-nav,
.owl-carousel-hightlights .owl-dots{display:none!important;}

.owl-carousel-hightlights .owl-stage-outer{overflow:visible!important;}

.owl-carousel-hightlights .owl-stage{
    display:flex!important;
    flex-wrap:wrap;
    transform:none!important;
    width:100%!important;
    margin-left:-.5rem;      /* compensan padding de items */
    margin-right:-.5rem;
}

/* --- Tarjeta de producto --- */
.owl-carousel-hightlights .owl-item{
    box-sizing:border-box;
    flex:0 0 20%;            /* 5 columnas */
    max-width:20%;
    padding:.5rem;
    margin-right:0!important;/* sobrescribe el inline 15px */
    width:auto!important;    /* anula inline width:210px */
}

/* 4 columnas (992–1199 px) */
@media(max-width:1199.98px){
  .owl-carousel-hightlights .owl-item{
      flex:0 0 25%;
      max-width:25%;
  }
}

/* 3 columnas (768–991 px) */
@media(max-width:991.98px){
  .owl-carousel-hightlights .owl-item{
      flex:0 0 33.3333%;
      max-width:33.3333%;
  }
}

/* 2 columnas (576–767 px) */
@media(max-width:767.98px){
  .owl-carousel-hightlights .owl-item{
      flex:0 0 50%;
      max-width:50%;
  }
}

/* 1 columna (< 576 px) */
@media(max-width:575.98px){
  .owl-carousel-hightlights .owl-item{
      flex:0 0 100%;
      max-width:100%;
  }
}


/* ---------- Fondo gris del bloque Destacados ---------- */
/* Navegadores modernos (Chrome 105+, Safari 15.4+, Edge, Firefox 122+) */
section.section-hightlights:has(#owl-carousel-hightlights){
    background:#F6F6F6;
}

/* Fallback para navegadores sin :has()  ─ aplica el gris solo detrás de la grilla
   (títulos quedarían sobre fondo blanco, pero evitamos cualquier conflicto) */
@supports not(selector(:has(*))){
    #owl-carousel-hightlights{
        background:#F6F6F6;
        padding-top:2rem;
        padding-bottom:2rem;
        margin-left:-1rem;   /* neutraliza el padding‐left del contenedor */
        margin-right:-1rem;  /* neutraliza el padding‐right del contenedor */
    }
}


/* ---------- Tarjeta de producto tipo “card” ---------- */
.owl-carousel-hightlights .product-item{
    background:#fff;             /* interior blanco */
    border:1px solid #e4e4e4;    /* borde tenue */
    border-radius:8px;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
    height:100%;
    overflow:hidden;             /* para que nada sobresalga */
    transition:transform .18s ease, box-shadow .18s ease;
}

/* — Pequeño efecto “hover” para dar vida — */
.owl-carousel-hightlights .product-item:hover{
    transform:translateY(-3px);
    box-shadow:0 4px 12px rgba(0,0,0,.12);
}

/* ---------- Ajustes menores opcionales ---------- */
/* Redondear la imagen superior para que coincida con la tarjeta */
.owl-carousel-hightlights .product-grid__image-wrapper,
.owl-carousel-hightlights .ox-product-image{
    border-top-left-radius:8px;
    border-top-right-radius:8px;
}

/* Alineamos detalles debajo sin pegarse al borde */
.owl-carousel-hightlights .product-item-details{
    padding:0 0.75rem 0.75rem;
}


/* --------- FIN destacados HOME  --------- */

/* --------- blog HOME  --------- */
/* =========== GRID 4×1 PARA “Últimas novedades” =========== */

/* 1) Convertimos la fila a flex-box y anulamos los márgenes del grid Bootstrap */
.section-last-news .row{
    display:flex !important;
    flex-wrap:wrap;
    margin-left:-.5rem;
    margin-right:-.5rem;
}

/* 2) Cada tarjeta (category-selector) ocupará 25 % = 4 columnas */
.section-last-news .category-selector{
    padding:.5rem;
    flex:0 0 25%;
    max-width:25%;
}

/* --- Responsivo --- */
/* 3 columnas (992–1199 px) */
@media(max-width:1199.98px){
  .section-last-news .category-selector{
      flex:0 0 33.3333%;
      max-width:33.3333%;
  }
}
/* 2 columnas (768–991 px) */
@media(max-width:991.98px){
  .section-last-news .category-selector{
      flex:0 0 50%;
      max-width:50%;
  }
}
/* 1 columna (< 768 px) */
@media(max-width:767.98px){
  .section-last-news .category-selector{
      flex:0 0 100%;
      max-width:100%;
  }
}

/* =========== AJUSTE DE TIPOGRAFÍA =========== */

/* Titulares: 50 % del tamaño real (aprox.) */
.section-last-news .page-card-custom h3{
    font-size:1rem;        /* antes ~2 rem */
    line-height:1.25;
    margin-bottom:.35rem;
}

/* Descripción: un poco más pequeña */
.section-last-news .blog-description{
    font-size:.85rem;      /* antes ~1 rem */
    line-height:1.35;
}

/* Ajustamos título del bloque mismo para que no parezca desproporcionado (opcional) */
.section-last-news .section-hightlights_title{
    font-size:1.25rem;
}

/* =========================================================
   Unificamos la tarjeta “ancha” (col-12) a formato vertical
   ========================================================= */

/* 1) Apunta sólo a la fila interna que aún usa .row */
.section-last-news .category-selector .row.h-100{
    display:flex !important;
    flex-direction:column !important;   /* apilamos imagen y texto */
    margin:0 !important;
}

/* 2) Forzamos que sus dos columnas ocupen 100 % */
.section-last-news .category-selector .row.h-100 > [class*="col-"]{
    flex:0 0 100% !important;
    max-width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

/* 3) Una altura coherente para la imagen (igual al resto) */
.section-last-news .row.h-100 .angulo-item-img.blog-list-image{
    height:230px;           /* ajusta si necesitas otra altura */
    background-size:cover;
    background-position:center;
}

/* 4) Alineamos la parte de texto como las demás tarjetas */
.section-last-news .row.h-100 > .col-md-6.pt-3{
    padding:1rem .75rem .75rem !important;   /* idéntico al resto */
}

/* ================================================
   Normalizamos la primera tarjeta (la que venía 12-cols)
   ================================================ */

/* 1) Cambiamos su fila interna a columna */
.section-last-news .category-selector.col-12 .row.h-100{
    display:flex !important;
    flex-direction:column !important;   /* imagen arriba, texto abajo */
    margin:0 !important;                /* anulamos márgenes Bootstrap */
    height:100%;                        /* llena todo el card */
}

/* 2) Sus dos “col-md-6” pasan a ocupar 100 % del ancho */
.section-last-news .category-selector.col-12 .row.h-100 > .col-md-6{
    width:100% !important;
    max-width:100% !important;
    flex:none !important;               /* sin flex-basis que altere la altura */
    padding-left:0 !important;
    padding-right:0 !important;
}

/* 3) Imagen con la misma altura que las otras noticias */
.section-last-news .angulo-item-img.blog-list-image{
    height:260px;                       /* ajusta aquí si quieres otra altura global */
    background-size:cover;
    background-position:center;
}

/* 4) Bloque de texto idéntico al resto */
.section-last-news .category-selector.col-12 .row.h-100 > .col-md-6.pt-3{
    padding:1rem .75rem .75rem !important;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

/* 5) Evita que la etiqueta y la fecha desborden */
.section-last-news .category-selector.col-12 .row.h-100 .d-flex{
    flex-wrap:wrap;
}


/* --------- FIN blog HOME  --------- */



/* --------- LISTA DE PRODUCTOS  --------- */

/* =========================================================
   PRODUCT GRID – 4 columnas compactas
   ========================================================= */

/* ---------- 1. Estructura de columnas ---------- */
#product-container{
    display:flex !important;
    flex-wrap:wrap;
    margin:0 -.6rem;                          /* elimina gutters laterales */
}
#product-container .products-template-item{padding:.6rem;flex:0 0 25%;max-width:25%;}
@media(max-width:1199.98px){#product-container .products-template-item{flex:0 0 33.3333%;max-width:33.3333%;}}
@media(max-width:991.98px){ #product-container .products-template-item{flex:0 0 50%;max-width:50%;}}
@media(max-width:767.98px){ #product-container .products-template-item{flex:0 0 100%;max-width:100%;}}

/* ---------- 2. Card básico ---------- */
#product-container .products-template-item > .mb-5{
    margin:0;
    padding:0;
    background:#fff;
    border:1px solid #e3e3e3;
    border-radius:8px;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
    overflow:hidden;
    transition:transform .15s ease, box-shadow .15s ease;
}
#product-container .products-template-item > .mb-5:hover{
    transform:translateY(-3px);
    box-shadow:0 4px 12px rgba(0,0,0,.12);
}

/* ---------- 3. Imagen — forzamos altura REAL 140 px ---------- */
/* Usamos selector ultra-específico (ID + 5 clases) + !important */
#product-container .products-template-item .position-relative > .angulo-item-img{
    height:140px !important;           /* ya no 400 px */
    max-height:140px !important;
    background-size:contain !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    margin:0 0 .35rem !important;      /* pequeño espacio bajo la foto */
}

/* Quita margen-bottom que Bootstrap agrega con .mb-3 */
#product-container .angulo-item-img.mb-3{margin-bottom:.35rem !important;}

/* ---------- 4. Nombre del producto ---------- */
#product-container .product-item-link{
    display:block;
    padding:0 .7rem;
    font-size:.9rem;
    font-weight:600;
    line-height:1.25;
    color:#00203d;
    text-align:center;
    margin-bottom:.2rem;
    text-decoration:none;
}
#product-container .product-item-link:hover{text-decoration:underline;}

/* ---------- 5. Precio (pegado al nombre, sin huecos) ---------- */
#product-container .price-final_price{
    padding:0 .7rem .45rem;
    justify-content:center !important;
}
#product-container .text-price{
    font-size:.9rem;
    font-weight:700;
    margin:0;
    color:#00203d;
}

/* ---------- 6. Botón “añadir” ---------- */
#product-container .position-relative > a[data-action="add-product"]{
    right:.5rem;
    bottom:.5rem;
    width:30px;
    height:30px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.15);
    display:flex;
    align-items:center;
    justify-content:center;
}
#product-container .position-relative > a[data-action="add-product"] svg{width:13px;height:15px;}
#product-container .position-relative > a[data-action="add-product"] svg,
#product-container .position-relative > a[data-action="add-product"] svg path{
    fill:#0d6efd;
    stroke:#0d6efd;
}

/* ---------- 7. Eliminamos paddings sobrantes ---------- */
#product-container .products-template-item > .mb-5 > .position-relative{padding:0 !important;}

/* --------- FIN LISTA DE PRODUCTOS  --------- */


/* --------- TITULO SUBTITULO CARRUSEL ---------*/
/* ==========================================================
   Encabezado de #sectionCarrusel – mismo look de DESTACADOS
   ========================================================== */

/* ---------- SUBTÍTULO (equivale a .section-hightlights_subtitle) */
#sectionCarrusel .text-destacado h4{
  font-family: inherit;
  font-size: .8125rem;          /* ≈13 px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .25em;
  color: #c5c5c5;               /* gris claro usado en “PRODUCTOS” */
  margin: 0 0 .4rem;
}

/* ---------- TÍTULO PRINCIPAL (equivale a .section-hightlights_title) */
#sectionCarrusel .text-destacado > div{
  font-family: inherit;
  font-weight: 800;             /* mismo grosor */
  text-transform: uppercase;
  line-height: 1.1;
  color: #0e2e5c;               /* azul oscuro corporativo */
  text-align: center;
  margin: 0;
}

/* tamaños responsivos idénticos a DESTACADOS */
@media (min-width:992px){       /* desktop */
  #sectionCarrusel .text-destacado > div{font-size: 3.75rem;}   /* ≈60 px */
}
@media (max-width:991.98px){    /* tablet/móvil */
  #sectionCarrusel .text-destacado > div{font-size: 1.75rem;}   /* ≈28 px */
}

/* Contador de productos */
.contador-productos {
    font-weight: 600;
    background-color: #1ecad3;
    color: #fdfdfd;
}