/*========SLIDER HOME===========*/
@media (min-width: 768px) {
  /* Evitar alturas forzadas del carrusel de Bootstrap */
  .section-slider #slider,
  .section-slider #slider .carousel-inner,
  .section-slider #slider .carousel-item {
    height: auto !important;
    max-height: none !important;
  }

  /* La imagen de escritorio está como background en este div */
  .section-slider #slider .carousel-item > .bg-image-center {
    display: block;
    width: 100%;
    /* altura proporcional al ancho para que no se corte */
    height: auto !important;
    aspect-ratio: 16 / 6;              /* ajusta si tu arte tiene otra proporción */
    min-height: 420px;                  /* asegura presencia en pantallas bajas */
    background-size: contain !important;/* evita recortes */
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #0b2341;          /* color de fondo similar al banner */
  }

  /* (Opcional) que los textos del caption no se superpongan al banner */
  .section-slider .carousel-caption {
    position: static;
    padding-top: 1rem;
  }
}

/* Fallback para navegadores sin soporte de aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  @media (min-width: 768px) {
    .section-slider #slider .carousel-item > .bg-image-center {
      height: 0 !important;
      padding-top: 37.5%; /* 16:6 => 6/16 = 37.5% */
    }
  }
}
/* === Ajustes base: sin márgenes/paddings extra en el bloque del slider === */
.section-slider { margin: 0 !important; padding: 0 !important; }
.section-slider .carousel,
.section-slider .carousel-inner,
.section-slider .carousel-item {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;   /* anula h-100/h-md-100 */
}

/* --- Solo escritorio (tu div con background aparece desde md en adelante) --- */
@media (min-width: 768px) {
  :root {
    /* ALTURA/ANCHO del banner de escritorio. 
       Ej: 1920x650 -> 650/1920 = 0.338 (ajusta si tu arte tiene otra proporción) */
    --hero-ratio: 0.338;
  }

  /* El div que pinta el background en desktop */
  .section-slider #slider .carousel-item > .bg-image-center {
    display: block;
    width: 100%;
    /* Altura proporcional al ancho: NO hay recorte ni franjas */
    height: calc(100vw * var(--hero-ratio)) !important;
    min-height: 0 !important;

    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: 100% auto !important; /* se ajusta al ancho, respeta alto */
    background-color: transparent !important;
  }

  /* Mantener el caption en overlay para que no empuje el alto */
  .section-slider .carousel-caption {
    position: absolute !important;
    inset: 0 auto auto 0;
    margin: 0; padding: 0;
  }
}

/* Opcional: si tu theme mete padding global en secciones con .section-*, lo anulamos aquí también */
.section-slider.section-slider { padding-top: 0 !important; padding-bottom: 0 !important; }


/*========FIN SLIDER HOME===========*/

/*=========HEADER===========*/
/* Header con sombra inferior únicamente */
.angulo-header-main.fixed-top{
  background: #fff;                 /* asegura fondo sólido para que se vea la sombra */
  position: fixed;                  /* ya lo es, reforzamos por si hay overrides */
  top: 0; left: 0; right: 0;
  z-index: 1050;
  box-shadow: 0 10px 20px -12px rgba(0,0,0,.35);  /* sombra hacia abajo */
}

/* Si quieres aún más “sólo abajo”, usa el pseudo-elemento (opcional) */
.angulo-header-main.fixed-top{
  position: fixed;  /* mantiene referencia para el ::after */
}
.angulo-header-main.fixed-top::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;          /* coloca la sombra por fuera del header */
  height: 1px;           /* línea mínima que proyecta la sombra */
  box-shadow: 0 14px 22px rgba(0,0,0,.18);
  pointer-events: none;
}

/*========BOTONES==========*/
/* Texto blanco para el botón Enviar */
.boton-enviar .angulo-item-button,
.boton-enviar .angulo-item-button:hover,
.boton-enviar .angulo-item-button:focus,
.boton-enviar .angulo-item-button:active,
.boton-enviar .angulo-item-button:disabled {
  color: #fff !important;
}

/* Por si el botón tiene íconos o spans internos */
.boton-enviar .angulo-item-button *,
.boton-enviar .angulo-item-button::before,
.boton-enviar .angulo-item-button::after {
  color: #fff !important;
}

/*===========PRODUCTOS DESTACADOS===============*/
/* ====== THEME ====== */
:root{
  --brand:#001580;
  --accent:#E31831;
  --ink:#111827;
  --card-radius:18px;
  --gap:12px;
}

/* Fondo limpio y spacing del bloque */
#productosDestacados{
  background:#fff;
}
#productosDestacados .container-fluid{padding-left:0; padding-right:0;}
#productosDestacados .row.mx-0{
  align-items:stretch;            /* iguala alturas de las 2 columnas principales */
}

/* Quitamos bordes heredados/antiguos */
#productosDestacados .border-outstanding-home,
#productosDestacados .border-tl-outstanding,
#productosDestacados .border-br-outstanding{
  border:none !important;
}

/* ====== GRID INTERNA (col izquierda con 4 celdas) ====== */
#productosDestacados .col-lg-6 > .row{
  margin-left: calc(var(--gap) * -1);
  margin-right: calc(var(--gap) * -1);
}
#productosDestacados .col-lg-6 > .row > [class*="col-"]{
  padding-left: var(--gap);
  padding-right: var(--gap);
  margin-bottom: var(--gap);
}

/* ====== CELDA “Destacados” (texto) ====== */
#productosDestacados .bg-outstanding-home{
  background: linear-gradient(135deg, var(--brand), #05218f);
  color:#fff;
  border-radius: var(--card-radius);
  min-height: 260px; /* asegura presencia */
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  text-shadow: 0 1px 0 rgba(0,0,0,.12);
}
#productosDestacados .bg-outstanding-home h2{
  font-weight:800;
  letter-spacing:.2px;
  margin-bottom:.3rem;
}
#productosDestacados .bg-outstanding-home a{
  color:#fff;
  font-weight:700;
  padding:.4rem .9rem;
  border-radius:999px;
  display:inline-block;
  background: var(--accent);
  transition:.25s ease;
}
#productosDestacados .bg-outstanding-home a:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(227,24,49,.25);
}

/* ====== CARD DE PRODUCTO (izquierda y derecha) ====== */
#productosDestacados .img-product-outstading-home,
#productosDestacados .img-product-outstading-home-four{
  padding: var(--gap);
}

#productosDestacados .angulo-item-producto{
  background:#fff;
  border-radius: var(--card-radius);
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}

/* anula alturas fijas viejas */
#productosDestacados .h-px-200{ height:auto !important; }

/* Imagen como “media area” con proporción uniforme */
#productosDestacados .angulo-item-img{
  width:100%;
  aspect-ratio: 4 / 3;                /* proporción agradable y consistente */
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .5s;
}

/* Nombre */
#productosDestacados .angulo-item-name-container{
  padding: .75rem 1rem 1rem;
}
#productosDestacados .angulo-item-name{
  color: var(--ink);
  font-weight:700;
  font-size: .98rem;
  line-height:1.2;
  text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Hover “premium” */
#productosDestacados .angulo-item-producto:hover{
  transform: translateY(-6px);
  box-shadow:0 18px 36px rgba(0,0,0,.16);
}
#productosDestacados .angulo-item-producto:hover .angulo-item-img{
  transform: scale(1.06);
  filter: saturate(1.06) contrast(1.03);
}
/* brillo diagonal sutil */
#productosDestacados .angulo-item-producto .angulo-item-img::after{
  content:""; position:absolute; inset:-15%;
  background: linear-gradient(105deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.28) 45%, rgba(255,255,255,0) 60%);
  transform: translateX(-120%);
  transition: transform .75s ease;
  pointer-events:none; mix-blend-mode: screen;
}
#productosDestacados .angulo-item-producto:hover .angulo-item-img::after{
  transform: translateX(120%);
}

/* ====== TARJETA GRANDE (columna derecha) ====== */
/* hace que la derecha iguale la altura total de la izquierda */
#productosDestacados > .container-fluid > .row > .col-sm-6{
  display:flex;
}
#productosDestacados .img-product-outstading-home-four .angulo-item-producto{
  width:100%;
}
#productosDestacados .img-product-outstading-home-four .item-image-preview{
  flex:1 1 auto; display:flex;
}
#productosDestacados .img-product-outstading-home-four .angulo-item-img{
  aspect-ratio: auto;         /* la grande ocupa todo el alto disponible */
  height:100% !important;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 991.98px){
  #productosDestacados .bg-outstanding-home{ min-height: 220px; }
}
@media (max-width: 575.98px){
  :root{ --gap:10px; }
  #productosDestacados .angulo-item-name{ font-size:.95rem; }
}



/* ====== DAR ALTURA REAL Y EVITAR CORTES ====== */

/* La grilla chica (columna izquierda) iguala alturas y da más “cuerpo” a cada card */
#productosDestacados .col-lg-6 > .row > [class*="col-"]{
  display:flex !important;               /* cada col se vuelve contenedor flex */
}
#productosDestacados .col-lg-6 > .row > [class*="col-"] .angulo-item-producto{
  display:flex; flex-direction:column;
  width:100%;
  min-height: 360px !important;          /* +alto para que no se “achate” */
  overflow:hidden;
}
#productosDestacados .col-lg-6 > .row > [class*="col-"] .item-image-preview{
  flex: 1 1 auto;                         /* la zona de imagen ocupa el alto disponible */
  display:block;
}
#productosDestacados .col-lg-6 > .row > [class*="col-"] .angulo-item-img{
  min-height: 280px !important;           /* altura mínima visible de la imagen */
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;      /* evita “cortes” por contain */
  border-radius: inherit;
}

/* Tarjeta grande (columna derecha): más alta */
#productosDestacados .img-product-outstading-home-four .angulo-item-producto{
  display:flex; flex-direction:column;
  min-height: 480px !important;           /* subir la altura de la card grande */
  overflow:hidden;
}
#productosDestacados .img-product-outstading-home-four .item-image-preview{
  flex:1 1 auto; display:block;
}
#productosDestacados .img-product-outstading-home-four .angulo-item-img{
  min-height: 480px !important;           /* imagen a juego con la card */
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  border-radius: inherit;
}

/* Nombre arriba (por si lo mantienes así) — no afecta alturas */
#productosDestacados .angulo-item-producto{ position:relative; }
#productosDestacados .angulo-item-name-container{
  position:absolute !important; top:12px; left:12px; right:12px;
  padding:0 !important; margin:0 !important; min-height:0 !important;
  display:flex; align-items:flex-start; justify-content:flex-start;
  z-index:5; pointer-events:none;
}
#productosDestacados .angulo-item-name{
  pointer-events:auto;
  display:inline-block; max-width:100%;
  padding:.42rem .7rem; border-radius:12px;
  font-weight:800; font-size:.90rem; line-height:1.15;
  color:#fff !important; background:rgba(0,21,128,.96);
  white-space:normal; word-break:break-word;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Desktop: un poco más altas todavía */
@media (min-width: 1200px){
  #productosDestacados .col-lg-6 > .row > [class*="col-"] .angulo-item-img{
    min-height: 320px !important;
  }
  #productosDestacados .img-product-outstading-home-four .angulo-item-img{
    min-height: 520px !important;
  }
}

/* Móvil: compactar para no exceder */
@media (max-width: 575.98px){
  #productosDestacados .col-lg-6 > .row > [class*="col-"] .angulo-item-producto{
    min-height: 300px !important;
  }
  #productosDestacados .col-lg-6 > .row > [class*="col-"] .angulo-item-img{
    min-height: 220px !important;
  }
  #productosDestacados .img-product-outstading-home-four .angulo-item-img{
    min-height: 360px !important;
  }
}

/*===========FIN PRODUCTOS DESTACADOS=============*/


/*===========LISTADO PRODUCTOS=============*/
/* ===== THEME ===== */
:root{
  --brand:#001580;
  --accent:#E31831;
  --ink:#111827;
  --muted:#6B7280;
  --card-radius:18px;
}

/* Separación pareja entre columnas */
#product-container { margin-left:-8px; margin-right:-8px; }
#product-container > [class*="col-"]{ padding-left:8px; padding-right:8px; margin-bottom:16px; }

/* ===== CARD ===== */
#product-container .angulo-item-producto{
  background:#fff;
  border-radius:var(--card-radius);
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  display:flex; flex-direction:column;
  height:100%;
  overflow:hidden; position:relative;
  transform:translateZ(0);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
#product-container .angulo-item-producto::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:0 0 0 0 rgba(0,21,128,0);
  transition:box-shadow .35s;
}
#product-container .angulo-item-producto:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 36px rgba(0,0,0,.16);
}
#product-container .angulo-item-producto:hover::before{
  box-shadow:0 0 0 2px rgba(0,21,128,.85) inset; /* halo de marca */
}

/* Zona de imagen */
#product-container .item-image-preview{ display:block; overflow:hidden; }
#product-container .angulo-item-img{
  position:relative;
  width:100% !important;
  height:auto !important;            /* anula el inline height:200px */
  aspect-ratio: 4 / 3;               /* altura consistente */
  background-color:#f6f7fb;          /* fondo neutro si la imagen tiene “aire” (contain) */
  transition:filter .5s ease;
}
#product-container .angulo-item-producto:hover .angulo-item-img{
  filter:saturate(1.06) contrast(1.03);
}
/* Brillo diagonal */
#product-container .angulo-item-img::after{
  content:""; position:absolute; inset:-20% -60%;
  background:linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 60%);
  transform:translateX(-120%);
  transition:transform .8s ease;
  pointer-events:none; mix-blend-mode:screen;
}
#product-container .angulo-item-producto:hover .angulo-item-img::after{
  transform:translateX(120%);
}

/* Nombre del producto */
#product-container .angulo-item-name-container{
  padding:.8rem 1rem .5rem;
  min-height:48px;                    /* evita saltos entre cards */
  display:flex; align-items:center; justify-content:center;
}
#product-container .angulo-item-name{
  color:var(--ink);
  font-weight:700;
  font-size:1rem;
  line-height:1.2;
  text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Botón CTA */
#product-container .angulo-item-button{
  display:block;
  margin:.6rem 1rem 1rem;
  background:var(--accent);
  color:#fff !important;
  border:none;
  border-radius:999px;
  font-weight:700; letter-spacing:.02em;
  padding:.7rem 1rem;
  text-align:center;
  box-shadow:0 8px 22px rgba(227,24,49,.28);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, filter .25s;
}
#product-container .angulo-item-button:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(227,24,49,.35), 0 8px 16px rgba(0,0,0,.08);
  filter:saturate(1.05);
}
#product-container .angulo-item-button:focus{
  outline:none; box-shadow:0 0 0 3px rgba(227,24,49,.35);
}
/* Asegura texto/íconos blancos dentro del botón */
#product-container .angulo-item-button *,
#product-container .angulo-item-button::before,
#product-container .angulo-item-button::after{ color:#fff !important; }

/* Animación de entrada (stagger suave) */
#product-container .angulo-item-producto{ opacity:0; animation:fadeUp .7s ease both; }
#product-container > [class*="col-"]:nth-child(1) .angulo-item-producto{ animation-delay:.05s; }
#product-container > [class*="col-"]:nth-child(2) .angulo-item-producto{ animation-delay:.12s; }
#product-container > [class*="col-"]:nth-child(3) .angulo-item-producto{ animation-delay:.19s; }
#product-container > [class*="col-"]:nth-child(4) .angulo-item-producto{ animation-delay:.26s; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

/* Mobile tweaks */
@media (max-width:575.98px){
  #product-container > [class*="col-"]{ margin-bottom:14px; }
  #product-container .angulo-item-name{ font-size:.98rem; }
}
/* Nombre de producto más pequeño y compacto */
#product-container .angulo-item-name {
  font-size: .90rem !important;
  letter-spacing: .02em;
  color: #111827;
  margin: .2rem 0 .1rem !important;
}
#product-container .angulo-item-name-container {
  padding: .55rem 1rem .25rem !important;
  min-height: 38px !important; /* evita saltos altos */
}

/* Botón: una sola línea, menos margen inferior y centrado */
#product-container .angulo-item-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap !important;      /* una línea */
  font-size: .80rem !important;        /* ajusta si aún se corta */
  line-height: 1.05 !important;
  padding: .65rem 1.1rem !important;   /* compacta el alto */
  margin: .45rem auto .50rem !important; /* menos espacio debajo */
  border-radius: 999px !important;
  color: #fff !important;               /* texto blanco */
}

/* Si en pantallas muy chicas aún parte, reducimos un poco más la fuente del botón */
@media (max-width: 360px) {
  #product-container .angulo-item-button { font-size: .82rem !important; }
}



/* MÓVIL: mostrar la imagen completa sin cortes */
@media (max-width: 767.98px){

  /* Listado de productos */
  #product-container .item-image-preview,
  #product-container .angulo-item-img{
    aspect-ratio: auto !important;         /* quita la proporción forzada */
    height: 260px !important;               /* altura real suficiente para no “cortar” */
    min-height: 260px !important;
    background-size: contain !important;    /* que quepa completa */
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #fff !important;      /* base neutra */
  }

  /* “Destacados” u otras grillas con las mismas clases */
  #productosDestacados .item-image-preview,
  #productosDestacados .angulo-item-img,
  .img-product-outstading-home .angulo-item-img,
  .img-product-outstading-home-four .angulo-item-img{
    aspect-ratio: auto !important;
    height: 260px !important;
    min-height: 260px !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #fff !important;
  }
}

/* Si en algunos móviles chicos aún queda justa la altura, súbela a 300px */
@media (max-width: 360px){
  #product-container .item-image-preview,
  #product-container .angulo-item-img,
  #productosDestacados .item-image-preview,
  #productosDestacados .angulo-item-img,
  .img-product-outstading-home .angulo-item-img,
  .img-product-outstading-home-four .angulo-item-img{
    height: 300px !important;
    min-height: 300px !important;
  }
}



/*===============BOTON CATEGORIAS MOVIL ===============*/
/* Botón "Categorías" (solo mobile: < lg) */
@media (max-width: 991.98px) {
  .d-block.d-lg-none .btn-toggle-categories {
    background: #f2f4f7 !important;   /* gris sutil */
    color: #001580 !important;         /* tipografía en contraste (marca) */
    border: 1px solid #d0d5dd !important;
    border-radius: 999px !important;   /* pill */
    font-weight: 700;
    letter-spacing: .02em;
    padding: .85rem 1.1rem !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
    transition: background-color .2s, color .2s, border-color .2s,
                box-shadow .2s, transform .2s;
  }
  .d-block.d-lg-none .btn-toggle-categories:hover {
    background: #e9edf3 !important;
    border-color: #c5ccd6 !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.10);
    transform: translateY(-1px);
  }
  .d-block.d-lg-none .btn-toggle-categories:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0,0,0,.12) inset;
  }
  .d-block.d-lg-none .btn-toggle-categories:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(0,21,128,.18) !important; /* focus ring accesible */
  }
}

/*================BOTON FICHA PRODUCTOS===============*/
/* Texto blanco para el botón "SOLICITAR COTIZACIÓN" */
#btnAddCart,
#btnAddCart:hover,
#btnAddCart:focus,
#btnAddCart:active,
#btnAddCart:disabled {
  color: #fff !important;
}

/* Por si hay spans/íconos dentro del botón */
#btnAddCart *,
#btnAddCart::before,
#btnAddCart::after {
  color: #fff !important;
  fill: #fff !important; /* SVG */
}

/*===========PRODUCTOS RELACIONADOS FICHA PRODUCTOS============*/
/* ====== Espaciado interno del carrusel ====== */
#carrouselProductsRecomended .carousel-item .row{
  margin-left:-8px; margin-right:-8px;
}
#carrouselProductsRecomended .carousel-item .row > [class*="col-"]{
  padding-left:8px; padding-right:8px; margin-bottom:16px;
}

/* ====== CARD (mismo estilo que la grilla) ====== */
#product-container .angulo-item-producto,
#carrouselProductsRecomended .angulo-item-producto{
  background:#fff;
  border-radius:18px;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  display:flex; flex-direction:column; height:100%;
  overflow:hidden; position:relative; transform:translateZ(0);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
#product-container .angulo-item-producto::before,
#carrouselProductsRecomended .angulo-item-producto::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:0 0 0 0 rgba(0,21,128,0); transition:box-shadow .35s;
}
#product-container .angulo-item-producto:hover,
#carrouselProductsRecomended .angulo-item-producto:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 36px rgba(0,0,0,.16);
}
#product-container .angulo-item-producto:hover::before,
#carrouselProductsRecomended .angulo-item-producto:hover::before{
  box-shadow:0 0 0 2px rgba(0,21,128,.85) inset;
}

/* ====== Imagen (misma proporción + brillo) ====== */
#product-container .item-image-preview,
#carrouselProductsRecomended .item-image-preview{ display:block; overflow:hidden; }

#product-container .angulo-item-img,
#carrouselProductsRecomended .angulo-item-img{
  position:relative;
  width:100% !important;
  height:auto !important;              /* anula height:200px inline */
  aspect-ratio: 4 / 3;                 /* consistencia visual */
  background-color:#f6f7fb;
  background-size: contain !important; /* respeta tu inline */
  background-position:center !important;
  background-repeat:no-repeat !important;
  transition:filter .5s ease;
}
#product-container .angulo-item-producto:hover .angulo-item-img,
#carrouselProductsRecomended .angulo-item-producto:hover .angulo-item-img{
  filter:saturate(1.06) contrast(1.03);
}
#product-container .angulo-item-img::after,
#carrouselProductsRecomended .angulo-item-img::after{
  content:""; position:absolute; inset:-20% -60%;
  background:linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 60%);
  transform:translateX(-120%); transition:transform .8s ease;
  pointer-events:none; mix-blend-mode:screen;
}
#product-container .angulo-item-producto:hover .angulo-item-img::after,
#carrouselProductsRecomended .angulo-item-producto:hover .angulo-item-img::after{
  transform:translateX(120%);
}

/* ====== Nombre (igual de compacto) ====== */
#product-container .angulo-item-name-container,
#carrouselProductsRecomended .angulo-item-name-container{
  padding:.8rem 1rem .5rem; min-height:48px;
  display:flex; align-items:center; justify-content:center;
}
#product-container .angulo-item-name,
#carrouselProductsRecomended .angulo-item-name{
  color:#111827; font-weight:700; font-size:.80rem;
  line-height:1.2; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ====== Botón (mismo look y en una sola línea) ====== */
#product-container .angulo-item-button,
#carrouselProductsRecomended .angulo-item-button{
  display:inline-flex; align-items:center; justify-content:center;
  white-space:nowrap;                      /* una sola línea */
  margin:.45rem auto .50rem;
  background:#E31831; color:#fff !important; border:none;
  border-radius:999px; padding:.65rem 1.1rem;
  font-weight:700; letter-spacing:.02em; font-size:.90rem;
  box-shadow:0 8px 22px rgba(227,24,49,.28);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, filter .25s;
}
#product-container .angulo-item-button:hover,
#carrouselProductsRecomended .angulo-item-button:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(227,24,49,.35), 0 8px 16px rgba(0,0,0,.08);
  filter:saturate(1.05);
}
#product-container .angulo-item-button *,
#product-container .angulo-item-button::before,
#product-container .angulo-item-button::after,
#carrouselProductsRecomended .angulo-item-button *,
#carrouselProductsRecomended .angulo-item-button::before,
#carrouselProductsRecomended .angulo-item-button::after{
  color:#fff !important;
}

/* ====== Flechas del carrusel en estilo sutil de marca (opcional) ====== */
#carrouselProductsRecomended + .carousel-control-next,
#carrouselProductsRecomended ~ .carousel-control-prev,
.carousel-control-prev, .carousel-control-next{
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
}
.carousel-control-prev-icon, .carousel-control-next-icon{
  background-color: rgba(0,21,128,.85);
  background-size: 50% 50%;
  border-radius:999px; padding:14px;
}
/*==========Boton categorias===========*/
/* Tipografía blanca cuando el card está activo en el acordeón */
#accordion .card-header.active,
#accordion .card-header.active .text-category,
#accordion .card-header.active a,
#accordion .card-header.active a:visited,
#accordion .card-header.active a:hover,
#accordion .card-header.active a:focus,
#accordion .card-header.active i,
#accordion .card-header.active .fa,
#accordion .card-header.active svg,
#accordion .card-header.active svg * {
  color: #fff !important;
  fill:  #fff !important;   /* por si hay SVG */
  text-decoration: none !important;
}

/* (Opcional) sutil feedback al hover sin cambiar el color */
#accordion .card-header.active a:hover { opacity: .92; }

/*============ESPACIO ENTRE BANNER Y CATEGORIAS=============*/
/* --- 1) Normaliza el slider en desktop: altura auto y hero compacto --- */
@media (min-width: 992px){
  /* evita que el 100% de altura del carrusel estire la sección */
  .section-slider #slider,
  .section-slider .carousel-inner,
  .section-slider .carousel-item{
    height: auto !important;
    min-height: 0 !important;
  }

  /* define la altura real del hero + cover correcto */
  .section-slider .bg-image-center.d-none.d-md-block{
    display: block !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    /* Ajusta si quieres más/menos alto (320–540px aprox) */
    height: clamp(320px, 34vw, 520px) !important;
  }

  /* por si la caption agrega espacio invisible */
  .section-slider .carousel-caption{
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* --- 2) Elimina margen inferior extra del slider --- */
.section-slider,
.section-slider #slider{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* --- 3) Reduce el espacio superior de la sección de categorías al ~10% --- */
/* Antes: padding-top: 42px → ahora ~4-6px */
.cats{
  padding-top: 6px !important;
}

/* (opcional) si aún ves un gap, fuerza el primer bloque tras el slider */
.section-slider + [data-section="block-location-template"] .cats{
  margin-top: 0 !important;
  padding-top: 6px !important;
}


/* Texto blanco para el botón COTIZAR */
#btn-comprar-productos,
#btn-comprar-productos:hover,
#btn-comprar-productos:focus,
#btn-comprar-productos:active,
#btn-comprar-productos:disabled {
  color: #fff !important;
}

/* Si el botón contiene spans/íconos */
#btn-comprar-productos *,
#btn-comprar-productos::before,
#btn-comprar-productos::after {
  color: #fff !important;
  fill: #fff !important; /* para SVG */
}

/*=============REDES SOCIALES FOOTER===============*/
/* ===== Redes sociales – estilos base ===== */
#redes .list-inline a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px; height:46px;
  margin:0 6px;
  border:none !important;
  border-radius:999px;
  background:#f3f5f9;                 /* fondo sutil */
  color:#475569;                       /* icono neutro */
  text-decoration:none !important;
  position:relative;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  transition:transform .25s, box-shadow .25s, background .25s, color .25s;
}
#redes .list-inline a i{
  line-height:1;
  font-size:1.15rem;
  transition: transform .25s;
}

/* Shine diagonal */
#redes .list-inline a::before{
  content:"";
  position:absolute; top:0; left:-140%;
  width:70%; height:100%;
  background:linear-gradient(120deg, rgba(255,255,255,0) 0%,
                                      rgba(255,255,255,.45) 50%,
                                      rgba(255,255,255,0) 100%);
  transform:skewX(-20deg);
  transition:left .6s ease;
  pointer-events:none;
}

/* Hover general */
#redes .list-inline a:hover{
  transform:translateY(-2px) scale(1.06);
  box-shadow:0 12px 22px rgba(0,0,0,.14);
}
#redes .list-inline a:hover::before{ left:140%; }
#redes .list-inline a:hover i{ transform:scale(1.08); }

/* ===== Colores por marca ===== */
#redes .list-inline a[href*="wa.me"]:hover,
#redes .list-inline a[href*="whatsapp"]:hover{
  background:#25D366;
  color:#fff !important;
  box-shadow:0 12px 28px rgba(37,211,102,.35);
}
#redes .list-inline a[href*="facebook"]:hover,
#redes .list-inline a[href*="fb.com"]:hover{
  background:#1877F2;
  color:#fff !important;
  box-shadow:0 12px 28px rgba(24,119,242,.35);
}
/* Instagram gradiente animado */
#redes .list-inline a[href*="instagram"]:hover{
  background:linear-gradient(45deg,#F58529,#FEDA77,#DD2A7B,#8134AF,#515BD4);
  background-size:200% 200%;
  animation:igShift 2.2s linear infinite;
  color:#fff !important;
  box-shadow:0 12px 28px rgba(221,42,123,.35);
}
@keyframes igShift{
  0%{background-position:0% 50%}
  100%{background-position:100% 50%}
}

/* ===== Accesibilidad: focus visible sin “recuadro horrible” ===== */
#redes .list-inline a:focus{
  outline:none !important;
  box-shadow:0 0 0 3px rgba(0,21,128,.22), 0 8px 20px rgba(0,0,0,.14);
}


/*===================FICHA DE PRODUCTOS====================*/
/* 1) Ocultar "CONSULTAR POR:" */
.product-status{
  display:none !important;
}

/* 2) Ocultar el "ó" del centro (solo en este bloque) */
.col-md-12.mt-4 .row .col-md-1.text-center{
  display:none !important;
}

/* 3) Botones redondeados + texto blanco */
#consult_whatsapp,
#consult_email{
  border-radius:999px !important;  /* pill */
  color:#fff !important;
}

/* Asegurar blanco en hover/focus/active y también dentro de hijos/iconos */
#consult_whatsapp:hover,
#consult_email:hover,
#consult_whatsapp:focus,
#consult_email:focus,
#consult_whatsapp:active,
#consult_email:active{
  color:#fff !important;
}

#consult_whatsapp *,
#consult_email *,
#consult_whatsapp::before,
#consult_email::before,
#consult_whatsapp::after,
#consult_email::after{
  color:#fff !important;
  fill:#fff !important;           /* por si hay SVGs */
}

/* === Imagen principal (anula el cover inline) === */
.containerImagePrincipal .fancyboxPrincipal > div,
.containerImagePrincipal a#main-fancy > div{
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #fff; /* opcional: base neutra para las “bandas” */
}

/* === Miniaturas del carrusel === */
.carousel-thumbs .ficha_carousel_img a.fancybox > div,
.carousel-thumbs .owl-item .ficha_carousel_img > a > div{
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #fff; /* opcional */
}

/* Opcional: asegura que los anchors no colapsen */
.containerImagePrincipal a#main-fancy,
.containerImagePrincipal .fancyboxPrincipal{
  display: block;
}

/*===================FIN FICHA DE PRODUCTOS====================*/