.product__bgDotted{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:baseline;
    position: relative;
    height:520px;
    /* width:256px; */
    transition: all ease-out 0.30s;
    cursor: pointer;
}
.productos-page{
    display:flex;
    flex-direction:column;
    height:calc(100vh - var(--productos-header-height, 100px));
    height:calc(100svh - var(--productos-header-height, 100px));
    min-height:calc(100vh - var(--productos-header-height, 100px));
    min-height:calc(100svh - var(--productos-header-height, 100px));
}
.productos-breadcrumb{
    background-color:#242424;
    color:#B1B3B5;
    flex:0 0 auto;
    padding:0.85rem 0;
}
.productos-breadcrumb .breadcrumb-item,
.productos-breadcrumb .breadcrumb-item.active{
    color:#B1B3B5;
}
.productos-breadcrumb .breadcrumb-item a{
    color:#FFFFFF;
    text-decoration:none;
}
.productos-breadcrumb .breadcrumb-item a:hover,
.productos-breadcrumb .breadcrumb-item a:focus-visible{
    color:#FFFFFF;
    text-decoration:underline;
}
.productos-breadcrumb .breadcrumb-item + .breadcrumb-item::before{
    color:#777777;
}
/* La maquetacion a altura completa es solo de /productos: el carrusel tambien
   se usa en la home y en resultados, donde el contenedor no tiene alto fijo. */
.productos-catalogo{
    display:flex;
    flex:1 0 auto;
    min-height:0;
}
.productos-catalogo #carousel__Products{
    display:flex;
    flex:1 0 auto;
    flex-direction:column;
    width:100%;
}
.productos-catalogo #carousel__Products .carousel-inner{
    flex:1 0 auto;
}
.productos-catalogo #carousel__Products .carousel-item,
.productos-catalogo #carousel__Products .carousel-item > .row,
.productos-catalogo #carousel__Products .carousel-item > .row > [class*="col-"]{
    height:100%;
}
.productos-catalogo #carousel__Products .carousel-item > .row > [class*="col-"]{
    display:flex;
}
.productos-catalogo #carousel__Products .product__bgDotted{
    flex:1 1 auto;
    height:100%;
    min-height:520px;
}
/* Caja de tamano fijo: reserva el espacio de las imagenes para que el
   titulo nunca se desplace ni quede tapado, sin importar el peso o las
   proporciones de la imagen que se suba desde el admin. */
.container__imgs{
    position: relative;
    width:100%;
    height:260px;
    flex: 0 0 auto;
}
/* Ambas imagenes ocupan exactamente la caja y se adaptan con contain,
   asi una imagen muy grande o de proporcion irregular nunca desborda. */
.container__imgs img{
    position: absolute;
    left:0;
    right:0;
    width:100%;
    margin:0;
    object-fit: contain;
    object-position: center;
    transition: transform ease-out 0.30s;
}
.product__BgImg{
    top:0;
    height:100%;
    opacity:.34;
    filter:saturate(.75);
    /* Capa trasera cruzada hacia la izquierda para formar la X con la principal. */
    transform:translateX(-5%) rotate(-14deg);
}
/* Cuando solo hay principal, se reutiliza espejada para que mire/incline
   hacia la direccion contraria y se forme la X automaticamente. */
.product__BgImg.is-auto{
    transform:translateX(-5%) rotate(-14deg) scaleX(-1);
}
/* La principal sobresale solo hacia arriba: su borde inferior coincide con
   el de la caja, por lo que no puede pisar el titulo que va debajo. */
.product__frontImg{
    top:-20px;
    height: calc(100% + 20px);
    transform:translateX(5%) rotate(12deg);
    filter:drop-shadow(0 .75rem .8rem rgba(0,0,0,.2));
}
/* Sin imagenes: logo quieto, centrado en ambos ejes y con un leve zoom al hover. */
.container__imgs.is-empty{
    display:block;
}
.container__imgs.is-empty .product__placeholder{
    position:absolute;
    inset:0;
    width:55%;
    height:72%;
    margin:auto;
    object-fit:contain;
    object-position:center;
    transform:none;
    transition: transform ease-out 0.30s;
}
.container__imgs.is-empty:hover .product__placeholder{
    transform:scale(1.07);
}
/* Archivo roto: si la trasera falla se oculta y la delantera queda centrada. */
.container__imgs img.product__BgImg.is-placeholder{
    display:none;
}
.container__imgs img.product__frontImg.is-placeholder{
    position:absolute;
    inset:0;
    width:55%;
    height:72%;
    margin:auto;
    padding:0;
    opacity:1;
    object-fit:contain;
    object-position:center;
    transform:none;
    transition: transform ease-out 0.30s;
}
.container__imgs:has(img.product__frontImg.is-placeholder):hover img.product__frontImg.is-placeholder{
    transform:scale(1.07);
}
.carousel__prod__hr{
    width: 90%;
    height:1px;
    background-color:white;
}
.carousel__container__link{
    text-decoration: none;
}
.container__imgs:not(.is-empty):hover .product__BgImg{
    transform: translateX(-17%) rotate(-16deg);
}
.container__imgs:not(.is-empty):hover .product__BgImg.is-auto{
    transform: translateX(-17%) rotate(-16deg) scaleX(-1);
}
.container__imgs:not(.is-empty):hover .product__frontImg{
    transform: translateX(17%) rotate(14deg);
}
/* El texto siempre sobre las imagenes: aunque una imagen sobresalga de su
   caja, el titulo y el resto del contenido quedan por encima. */
.carousel_prod__name,
.carousel__prod__hr,
.carousel__prod__shotdescription,
.carousel__prod__links{
    position: relative;
    z-index: 1;
}
.product__bgDotted:hover .carousel_prod__name{
    color: black;
}
.product__bgDotted:hover .carousel__prod__hr{
    background-color: black;
    transform: translateY(30px);
    transition: all ease-out 0.30s;
}
.product__bgDotted:hover .carousel__prod__shotdescription{
    transform: translateY(30px);
    transition: all ease-out 0.30s;
    color: black;
}
.product__bgDotted:hover .carousel__prod__links{
    transform: translateY(30px);
    transition: all ease-out 0.30s;
    color: black;
}
.carousel_prod__name{
    font-family: 'Roboto-Regular';
    font-size: 24px;
    color: white;
    padding: 15px;
}
.carousel__prod__shotdescription{
    font-family: 'Roboto-Regular';
    font-size: 17px;
    color: white;
    padding: 15px;
    text-transform: uppercase;
}
.carousel__prod__links{
    display: flex;
    justify-content: space-between;
    color: #B1B3B5;
    font-family: 'Roboto-Regular';
    font-size: 15px;
    padding: 15px;
    width: 100%;
    text-transform: uppercase;
    text-decoration: none;
}
#carousel__Products .carousel-control-prev-icon {
    position: absolute;
    left: 0px;
    bottom: 50%;
    background-image: url('../iconLeft.svg');
}
#carousel__Products .carousel-control-next-icon {
    position: absolute;
    right: 0px;
    bottom: 50%;
    background-image: url('../iconRight.svg');
}
#carousel_Productos .carousel-control-next, .carousel-control-prev{
    width: 5% !important;
}
#carousel_Productos .carousel-control-next, .carousel-control-next{
    width: 5% !important;
}

@media (min-width: 768px){
    .productos-catalogo #carousel__Products .product__bgDotted{
        align-items:stretch;
        gap:clamp(0.5rem, 1.5vh, 1rem);
        justify-content:flex-start;
        padding:clamp(1.25rem, 3vh, 2.25rem) clamp(0.75rem, 1.25vw, 1.25rem);
    }

    .productos-catalogo #carousel__Products .container__imgs{
        flex:1 1 auto;
        height:auto;
        min-height:260px;
    }

    .productos-catalogo #carousel__Products .container__imgs > img.product__BgImg,
    .productos-catalogo #carousel__Products .container__imgs > img.product__frontImg:not(.is-placeholder){
        height:min(100%, 300px);
        top:50%;
    }

    .productos-catalogo #carousel__Products .container__imgs > img.product__BgImg{
        transform:translate(-5%, -50%) rotate(-14deg);
    }

    .productos-catalogo #carousel__Products .container__imgs > img.product__BgImg.is-auto{
        transform:translate(-5%, -50%) rotate(-14deg) scaleX(-1);
    }

    .productos-catalogo #carousel__Products .container__imgs > img.product__frontImg:not(.is-placeholder){
        transform:translate(5%, -50%) rotate(12deg);
    }

    .productos-catalogo #carousel__Products .container__imgs:not(.is-empty):hover > img.product__BgImg{
        transform:translate(-17%, -50%) rotate(-16deg);
    }

    .productos-catalogo #carousel__Products .container__imgs:not(.is-empty):hover > img.product__BgImg.is-auto{
        transform:translate(-17%, -50%) rotate(-16deg) scaleX(-1);
    }

    .productos-catalogo #carousel__Products .container__imgs:not(.is-empty):hover > img.product__frontImg:not(.is-placeholder){
        transform:translate(17%, -50%) rotate(14deg);
    }

    .productos-catalogo #carousel__Products .container__imgs .product__placeholder,
    .productos-catalogo #carousel__Products .container__imgs img.product__frontImg.is-placeholder{
        max-height:300px;
    }
}

@media (max-width: 767.98px){
    .productos-page{
        height:auto;
        min-height:calc(100vh - var(--productos-header-height, 100px));
        min-height:calc(100svh - var(--productos-header-height, 100px));
    }
    .productos-catalogo,
    .productos-catalogo #carousel__Products,
    .productos-catalogo #carousel__Products .carousel-inner{
        display:block;
    }
    .productos-catalogo #carousel__Products .carousel-item,
    .productos-catalogo #carousel__Products .carousel-item > .row,
    .productos-catalogo #carousel__Products .carousel-item > .row > [class*="col-"]{
        height:auto;
    }
    .productos-catalogo #carousel__Products .carousel-item > .row > [class*="col-"]{
        display:block;
    }
    .productos-catalogo #carousel__Products .product__bgDotted{
        height:520px;
        min-height:520px;
    }
}