:root{
    --azul-oscuro:#000E25;
    --azul:#001935;
    --naranja:#f96a05;
    --blanco:#fff;
    --amarillo:#FBB03B;
    --verde:#25d366;
}
*{
            font-family: "Roboto";
}

body{
    overflow-x: hidden;
}
/*HEADER*/
        /* ---------------- TOPBAR ---------------- */
        .topbar{
            background:var(--azul-oscuro);
            border-bottom:2px solid rgba(255,255,255,.25);
            color:white;
            font-size:16px;
            font-family: "Roboto";
        }
        .topbar .container{
            display:flex;
            justify-content:space-between;
            align-items:center;
            min-height:55px;
        }
        .topbar-left,
        .topbar-right{
            display:flex;
            align-items:center;
            gap:40px;
        }
        .topbar a{
            color:white;
            text-decoration:none;
            font-weight: 500;
        }
        .topbar i{
            color:var(--amarillo);
            margin-right:8px;
        }
        .topbar-right i{
            color:white;
            margin-right:0;
            font-size:18px;
        }
        .redes a{
           display: inline-block;
           margin-left: 15px;     
        }
    /* ---------------- NAVBAR ---------------- */

.main-navbar{
    background: var(--azul);
    padding: 18px 0;
}

.navbar-brand{
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}

.logo-img{
    display: block;
    width: auto;
    height: 90px;      /* altura del logo */
    max-width: 300px;  /* evita que crezca demasiado */
    object-fit: contain;
    object-position: left;
}

.navbar-nav{
    gap: 30px;
}

.nav-link{
    color: white;
    font-family: "Roboto";
    font-size: 18px;
    font-weight: 700;
    position: relative;
}

.nav-link:hover{
    color: var(--naranja);
}

.nav-link.active{
    color: var(--naranja) !important;
}

.nav-link.active::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-28px;
    height:5px;
    background:var(--naranja);
}

.btn-cotizar{
    background:var(--naranja);
    color:white;
    text-decoration:none;
    padding:12px 20px;
    border-radius:5px;
    font-size:16px;
    font-weight:700;
    transition:.3s;
    line-height:30px;
}

.btn-cotizar:hover{
    background:#ff8d1f;
    color:white;
}

.btn-cotizar i{
    margin-right:8px;
    font-size:22px;
}


        /* RESPONSIVE */

        @media (max-width:1200px) {
        /* ---------------- TOPBAR ---------------- */
        .topbar{
            background:var(--azul-oscuro);
            border-bottom:2px solid rgba(255,255,255,.25);
            color:white;
            font-size:13px;
            font-family: "Roboto";
        }
        .topbar-left,
        .topbar-right{
            display:flex;
            align-items:center;
            gap:30px;
        }
        .topbar a{
            color:white;
            text-decoration:none;
            font-weight: 500;
        }
        .topbar i{
            color:var(--amarillo);
            margin-right:5px;
        }
        .topbar-right i{
            color:white;
            margin-right:0;
            font-size:15px;
        }
      
        }
        @media (max-width:991px){
            .topbar .container{
                flex-direction:column;
                gap:15px;
                padding:15px;
            }
            .topbar-left{
                flex-wrap:wrap;
                justify-content:center;
                gap:20px;
            }
            .topbar-right{
                gap:20px;
            }
            .navbar-nav{
                gap:0;
                text-align:center;
                margin-top:20px;
            }
            .main-navbar .navbar-toggler {
                color: #fff;
            }    
            .nav-link.active::after{
                height:0px;
            }
            .btn-cotizar{
                display:block;
                width:fit-content;
                margin:20px auto 0;
            }

        }
/*SLIDERS*/
/*
|--------------------------------------------------------------------------
| SLIDER
|--------------------------------------------------------------------------
*/

.slider{

    position:relative;

}

/*
|--------------------------------------------------------------------------
| ITEM
|--------------------------------------------------------------------------
*/

.sliderItem{

    height:500px;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

/*
|--------------------------------------------------------------------------
| CONTAINER
|--------------------------------------------------------------------------
*/

.sliderContainer{

    position:relative;

    height:600px;

}

/*
|--------------------------------------------------------------------------
| CONTENIDO
|--------------------------------------------------------------------------
*/

.sliderContenido{

    color:#fff;
}

.sliderTitulo{

    font-size:16px;
    font-weight:600;
    background: var(--naranja);
    padding: 5px 10px;
}

.sliderSubtitulo{
    margin-top: 30px;
    font-size:60px;
    font-weight:500;
    font-family: "Anton";
    line-height:1.1;
}
.sliderTexto{
    font-size:22px;
    line-height: 24px;
    margin-top: 30px;
    margin-bottom:50px;
}
/*
|--------------------------------------------------------------------------
| BOTONES
|--------------------------------------------------------------------------
*/

.sliderBotones{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}
.sliderBoton,
.sliderBotonSecundario{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 40px;
    text-decoration:none;
    border-radius:10px;
    font-size: 16px;
    font-weight:600;
    transition:.3s;
}
.sliderBoton{
    background:var(--naranja);
    color:#fff;
}
.sliderBoton:hover{
    padding:15px 45px;
}
.sliderBotonSecundario{
    border: 2px solid var(--verde);
    color:var(--verde);
    padding:15px 25px;
}
.sliderBotonSecundario:hover{
    border: 2px solid #eee;
    padding:15px 30px;
    background:#eee;
    color:#222;
}
.slick-dotted.slick-slider {
  margin-bottom: 0px !important;
}
/*
|--------------------------------------------------------------------------
| SLICK DOTS
|--------------------------------------------------------------------------
*/
.sliderPadre,.divPadre{
    position: relative;
}
.comodinSlider{
    position: absolute;
    text-align:center;
    width: 100%;
    z-index: 5;
    bottom: 0;
    margin-bottom: 75px;
}
.sliderNav,.valoresNav{
    display:flex;
    justify-content:end;
    
}
.valoresNav{
    margin-top: 35px;
}
.sliderNav .slick-dots,.valoresNav .slick-dots{
    display:flex;
    width: inherit;
    justify-content:center;
    gap:12px;
    margin:0;
    padding:0;
}
.sliderNav .slick-dots li,.valoresNav .slick-dots li{
    margin:0;
}
.sliderNav .slick-dots button,.valoresNav .slick-dots button{
    width:20px;
    height:20px;
    border-radius:50%;
    border:none;
    background:#cfcfcf;
    font-size:0;
    padding:0;
}

.sliderNav .slick-dots .slick-active button,.valoresNav .slick-dots .slick-active button{
    background:var(--naranja);
}
.sliderNav .slick-dots li button::before,.valoresNav .slick-dots li button::before  {
    display: none !important;
    content: "" !important;
}
/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media(max-width:1199px){

    .sliderItem{

        height:auto;

        padding:80px 0;

    }

    .sliderContainer{

        height:auto;

    }

    .sliderContenido{

        max-width:100%;

    }

    .sliderSubtitulo{

        font-size:36px;

    }

    .sliderTexto{

        font-size:16px;

    }

    .sliderBotones{

        flex-direction:column;

        align-items:flex-start;

    }

  

}
/*valores flotantes*/
.valoresFlotantes{
    background: var(--azul-oscuro);
    position: absolute;
    top: 100;
    left: 50%;
    width: 95%;
    transform: translateY(0%) translateX(-50%);
    margin-top: -30px;
   padding: 50px 0px;
   border-radius: 20px;
   padding-bottom: 20px;
   color: #fff;
}
.valoresFlotantes.ayudaAdmin{
    padding-bottom: 60px;
}
.espacioValoresInicio{
    margin-bottom: 200px;
}
.valoresInicio{
    width: 90%;
    margin: auto;
}
.valorItem,.marcaItem{

    display:flex;
   max-width:180px;
    margin: auto;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:15px;
    margin-bottom: 0;
}
.marcaItem{

    position:relative;

    width:95%;

    margin:auto;

    background:#fff;

    border-radius:8px;

    box-shadow:0 4px 12px rgba(0,0,0,.18);

    min-height:100px;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:15px;

    transition:.3s;

}

.marcaItem:hover{

    transform:translateY(-3px);

    box-shadow:0 8px 20px rgba(0,0,0,.25);

}

.marcaItem .valorImagen{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}

.marcaItem .valorImagen img{

    max-width:100%;

    max-height:70px;

    object-fit:contain;

}
.valoresInicio .slick-slide{

    padding:0 15px;

}
.iconoValor i{
    font-size: 36px;
    color: var(--naranja);
}
.textoValor{
    font-size: 17px;
    font-weight: 600;
    line-height: 17px;
}
@media(max-width:992px){
.valoresFlotantes{

        position:static;

        transform:none;

        width:100%;

        margin: 0;

        border-radius:0;

    }
    .valoresInicio{
        width: 100%;
    }
.espacioValoresInicio{
    margin: 0;
}
}
/*==================================================
NOSOTROS
==================================================*/


.bannerNosotros{

    height:420px;

    background-size:cover;

    background-position:center;

    position:relative;

}
.espacioNosotros{
    margin: 150px 0px;
    width: 100%;
    height: 30px;
}
.espacioNosotros.ayudaAdmin{
    margin: 125px 0px;

}
.nosotrosCaja{

    position:absolute;

    left:50%;

    bottom:0;

    transform:translate(-50%,50%);

    width:900px;

    max-width:90%;

    background:#fff;

    padding:40px;

    text-align:center;

    box-shadow:0 10px 25px rgba(0,0,0,.15);

    z-index:5;

}

.nosotrosTitulo{

    font-size:32px;
    font-family: 'Anton';
    margin-bottom:20px;

}

.nosotrosTexto{
    font-size: 16px;
    line-height:18px;
    color: rgba(0,0,0,0.6);
}

.nosotrosGrid{

    display:grid;

    grid-template-columns:repeat(2,1fr);
    gap:30px;
    margin-top: 50px;
    margin-bottom:50px;

}

.nosotrosItem{

    position:relative;

    background-size:cover;

    background-position:center;

    min-height:320px;

    border-radius:12px;

    overflow:hidden;

}
.nosotrosContenido{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding:35px 50px;
    grid-gap: 30px;
    align-items: center;
}


.nosotrosItemTitulo,.corteDiv h2{

    color:var(--naranja);
    font-family: 'Anton';
    margin-bottom:15px;
    font-size: 26px;
}
.nosotrosItemTitulo span{
    font-family: 'Anton';

    color: #fff !important;
}
.nosotrosItemTexto{
color: #fff;
font-size: 16px;
line-height: 18px;
}

.nosotrosImagen{

    width:100%;
    object-fit: cover;
    height: 100%;

}

.editarFondo{

    position:absolute;

    top:20px;

    right:0;
    margin-left: 20px;
    z-index:20;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1199px){
    .espacioNosotros{
        display: none;
    }
    .bannerNosotros{

        height:260px;

    }


    .nosotrosCaja{

        position:static;

        transform:none;

        width:100%;

        max-width:100%;

        margin:30px 0;

        box-shadow:none;

        padding:30px;

    }


    .nosotrosContenido{

        grid-template-columns:1fr;

        text-align:center;

        gap:30px;

    }

    .nosotrosImagen{

        justify-self:center;

        align-self:center;

        max-width:220px;

    }

}
@media(max-width:991px){
 .nosotrosGrid{

        grid-template-columns:1fr;

        text-align:center;

        gap:30px;

    }
}
@media(max-width:576px){

    .bannerNosotros{

        height:200px;

    }

    .nosotrosCaja{

        padding:25px;

    }

    .nosotrosTitulo{

        font-size:30px;

    }

    .nosotrosContenido{

        padding:25px;

    }

}
.valores{
    padding: 50px 0px;
}

/*valores*/
.valorImagen{

    position:relative;

    display:inline-block;

}

.valorImagen img{

    display:block;

    width:100%;

    height:100px;
    object-fit: contain;
    object-position: center;

}

.valoresTitulo,.valoresTitulo span{
    text-align: center;
    font-family: 'Anton';
    margin-bottom: 30px;
  font-size: 26px;
  color: var(--naranja);
}
.valoresTitulo span{
    color: #121212;
}
.valorTexto{
    font-size: 16px;
    font-weight: 600;
}
.valoresSlider,.marcasSlider,.categoriasSlider{
    margin: 30px auto;
    margin-top: 50px;
}
.marcaPrev,.categoriaPrev,
.marcaNext,.categoriaNext{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:30px;

    height:100px;

    border:none;

    background:#fff;

    border-radius:6px;

    box-shadow:0 4px 12px rgba(0,0,0,.25);

    z-index:20;

    cursor:pointer;

    transition:.3s;

}

.marcaPrev,.categoriaPrev{

    left:-60px;

}

.marcaNext,.categoriaNext{

    right:-60px;

}

.marcaPrev:hover,.categoriaPrev:hover,
.marcaNext:hover,.categoriaNext:hover{

    transform:translateY(-50%) scale(1.05);

}

.marcaPrev i,.categoriaPrev i,
.marcaNext i,.categoriaNext i{

    font-size:22px;

    color:var(--azul-oscuro);

}
.footer{

    background:var(--azul-oscuro);

    color:#fff;

}

.footerFrase{

    background:var(--naranja);

    color:#fff;

    text-align:center;

    padding:15px;

    font-size:24px;

    font-weight:700;

    text-transform:uppercase;

}

.footerPrincipal{

    padding:50px 0;

}

.footerGrid{

    display:grid;

    grid-template-columns:1fr 1fr 1fr 2fr;

    gap:40px;

}

.footerColumna{

    border-right:1px solid rgba(255,255,255,.15);

    padding-right:30px;

}

.footerColumna:last-child{

    border:none;

    padding-right:0;

}

.footerColumna h3{

    margin-bottom:25px;

    font-size:18px;

    font-weight:700;

}

.footerColumna ul{

    margin:0;

    padding:0;

    list-style:none;

}

.footerColumna li{

    display:flex;

    gap:15px;

    margin-bottom:18px;

    align-items:flex-start;

}

.footerColumna li i,.footerColumna i{

    color:var(--naranja);

    width:22px;

    text-align:center;

    margin-top:4px;

}
.footerColumna .contactoLi a{
    display: inline-flex;
}
.footerColumna .contactoLi a i{
    margin-right: 15px;
}
.footerRedes a,.footer p, .footer span{

    display:flex;

    align-items:center;

    gap:15px;
    font-size: 16px;

    color:#fff;

    text-decoration:none;

}

.comodinIconoFooter{
    display: flex;
    color: #fff;
    background: #000;
    height: 40px;
    width: 40px;
    line-height: 30px;
    border-radius: 50%;
    align-self:center;
}
.comodinIconoFooter i{
    line-height: 30px;
    font-size: 21px;
    color: #fff;
    display: block;
    margin: auto;
}
.footerFila{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

}

#formCotizacion{

    display:flex;

    flex-direction:column;

    gap:10px;

}

#formCotizacion input,

#formCotizacion select{

    height:48px;

    border:none;

    border-radius:5px;

    padding:0 15px;

    width:100%;

}

.btnFooter{

    height:52px;

    background:var(--naranja);

    border:none;

    color:#fff;

    font-weight:700;

    font-size:18px;

    border-radius:5px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    transition:.3s;

}

.btnFooter:hover{

    background:#ff7b00;

}

.footerInferior{

    border-top:1px solid rgba(255,255,255,.15);

    padding:20px 0;

    font-size:15px;

}

.footerInferiorGrid{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.footerInferior a{

    color:#fff;

    text-decoration:none;

}

.footerInferior span{

    margin:0 15px;

    opacity:.5;

}

@media(max-width:992px){

.footerGrid{

    grid-template-columns:1fr;

}

.footerColumna{

    border:none;

    padding-right:0;

}

.footerFila{

    grid-template-columns:1fr;

}

.footerInferiorGrid{

    flex-direction:column;

    text-align:center;

}

.footerFrase{

    font-size:26px;

}

}

.politica{
    font-size: 14px;
    display: flex;
}
.categoriaSlide{

    padding:15px 10px;

}

.categoriaItem{

    border-radius:18px;

    overflow:hidden;

    position:relative;

    box-shadow:0 8px 18px rgba(0,0,0,.18);

}

.categoriaImagen{

    position:relative;

    overflow:hidden;

    border-radius:18px;

}

.categoriaImagen img{

    width:100%;

    height:350px;

    object-fit:cover;

    display:block;

    transition:.35s;

}

.categoriaItem:hover img{

    transform:scale(1.05);

}

.categoriaOverlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:22px;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.92) 5%,

        rgba(0,0,0,.55) 45%,

        rgba(0,0,0,0) 100%

    );

}

.categoriaOverlay h3{

    color:#fff;

    font-size:18px;

    font-weight:700;

    line-height:1.15;

    text-transform:uppercase;

    margin-bottom:20px;

    min-height:45px;

}

.categoriaBoton{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    width:100%;
    padding: 7.5px 5px;

    background:#fff;

    color:var(--azul-oscuro);

    font-weight:700;

    font-size:22px;

    border-radius:6px;
    font-size: 16px;
   text-decoration:none;

    transition:.3s;

}

.categoriaBoton:hover{

    background:var(--naranja);

    color:#fff;

}

.categoriaBoton i{

    transition:.3s;

}

.categoriaBoton:hover i{

    transform:translateX(4px);

}

.categoriaControles{

    right:0px;

}
.corteDiv{
    padding: 50px 0;
    padding-bottom: 30px;
}
.corteDiv h2{
    color: #121212;
    text-align: center;
    margin-bottom: 5px;
}
.corteDiv h3{
    text-align: center;
    font-style: italic;
    color: var(--naranja);
    font-size: 22px;
    margin-bottom: 30px;
}
.corteDiv p{
    text-align: center;
}
/*ATENCION*/
/*--------------------------------------------------------------
# ATENCION
--------------------------------------------------------------*/

.atencion{

    margin:50px 0;

}
.atencionGrid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 25px;
}
.atencionItem{

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;
    padding: 25px 0px;
}
.atencionContenido{
   display: flex;
   align-self: center;
}
.atencionItem.atencionRight > div:nth-child(1){
    order: 2;
}

.atencionItem.atencionRight > div:nth-child(2){
    order: 1;
}
.atencionItem.atencionRight{
    padding-left: 30px;
}
.comodinAtencion{
    position: relative;
        background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 15px;
}
.atencionFondo{
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    z-index: 2;
    margin-top: 15px;
}
.atencionImagen{
    width: 100%; 
}
.atencionImagen img{
    width: 100%;
    height: 230px;
    object-fit: contain;
    object-position: center;
}
.atencionContenido small{
    color: #fff;
    font-size: 22px;
}
.atencionContenido h2{
    color: #fff;
    font-size: 32px;
    margin-bottom: 30px;
    font-weight: 700;

}
.atencionBoton {
    background: var(--naranja);
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    padding: 15px 30px;
    border-radius: 10px;
    font-weight: 600;
}
.atencionBoton i{
    padding-left: 20px;
}
.atencionRight .atencionBoton{
background: var(--azul-oscuro);
} 
@media (max-width:768px) {
    
.atencionGrid{
    display: grid;
    grid-template-columns: 1fr;
}
}

/*breakpoints*/
/*====================================================
TABLET
====================================================*/

@media (max-width:1200px){

.atencionContenido small{

    font-size:20px;

}

.atencionContenido h2{

    font-size:28px;

}

.atencionBoton{

    font-size:15px;

    padding:14px 24px;

}

.atencionImagen img{

    height:210px;

}

}


/*====================================================
MOVIL HORIZONTAL
====================================================*/

@media (max-width:992px){

.atencionGrid{

    grid-template-columns:1fr;

}

.atencionItem{

    grid-template-columns:1fr 1fr;

}


}


/*====================================================
MOVIL VERTICAL
====================================================*/

@media (max-width:768px){

.atencionItem{

    grid-template-columns:1fr;

    text-align:center;

    gap:20px;

    padding:30px 20px;

}

.atencionItem.atencionRight > div:nth-child(1),

.atencionItem.atencionRight > div:nth-child(2){

    order:initial;

}

.atencionImagen{

    display:flex;

    justify-content:center;

}

.atencionImagen img{

    width:100%;

    max-width:280px;

    height:auto;

}

.atencionContenido{

    display:flex;

    justify-content:center;

}

.atencionContenido>div{

    width:100%;

}

.atencionContenido small{

    font-size:22px;

}

.atencionContenido h2{

    font-size:32px;

    margin-bottom:20px;

}

.atencionBoton{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:100%;

    max-width:320px;

}

}


/*====================================================
CELULARES PEQUEÑOS
====================================================*/

@media (max-width:480px){

.atencion{

    margin:35px 0;

}

.atencionItem{

    padding:25px 15px;

}

.atencionContenido small{

    font-size:18px;

}

.atencionContenido h2{

    font-size:26px;

}

.atencionBoton{

    font-size:15px;

    padding:14px 18px;

}

}
/*industrias*/
/*==================================================
INDUSTRIAS
==================================================*/

.industrias{

    padding:60px 0;

    background-size:cover;

    background-position:center;

}

.industriaItem{

    position:relative;

    overflow:hidden;

    border-radius:16px;

}

.industriaImagen{

    overflow:hidden;

}
.industriaItem:hover .industriaIcono{
    opacity: 0;
}
.industriaImagen img{

    width:100%;

    height:220px;

    object-fit:cover;

    display:block;

    transition:.35s;

}

.industriaOverlay{

    position:absolute;

    inset:0;

    background:rgba(5,18,55,.45);

    transition:.35s;

}

.industriaContenido{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:end;

    pointer-events:none;
    margin-bottom: 70px;

}

.industriaIcono{

    max-width: 140px;
    transition:.35s;

}

.industriaNombre{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    background:var(--azul-oscuro);

    color:#fff;

    text-align:center;

    padding:7px 10px;

    font-size:22px;
    font-family: 'Anton';

    font-weight:500;

    text-transform:uppercase;

    transition:.35s;

}

/* Hover */

.industriaItem:hover .industriaOverlay{

    opacity:0;

}

.industriaItem:hover .industriaNombre{

    background:var(--naranja);

}

.industriaItem:hover .industriaImagen img{

    transform:scale(1.05);

}
.industriaSlide{
    padding: 0px 7px;
}
/* Tablet */

@media(max-width:992px){

.industriaImagen img{

    height:180px;

}

.industriaNombre{

    font-size:20px;

}

.industriaIcono{

    width:90px;

}

}

/* Celular */

@media(max-width:768px){

.industriaImagen img{

    height:220px;

}

.industriaNombre{

    font-size:18px;

    padding:15px;

}

.industriaIcono{

    width:75px;

}

}
/*CATALOGO*/
.catalogoCajaContenido{

    display:block;

}

.catalogoCaja:not(.abierto)
.catalogoCajaContenido{

    display:none;

}

.catalogoCaja.abierto
.catalogoCajaTitulo i{

    transform:rotate(180deg);

}

.catalogoCajaTitulo i{

    transition:.25s;

}
.espacioCatalogo{
    width: 100%;
    height: 10px;
    margin: 30px 0px;
}
.trueBannerItem{
    width: 100%;
    background-size: cover;
    background-position: center;
    padding: 100px 50px;
    margin-top: 50px;
    border-radius: 15px;
    position: relative;
}
.trueBannerItem h2{
    text-transform: uppercase !important;
    color: #fff;
    font-weight: 900;
    font-size: 21px !important;
}
.trueBannerItem h2 span{
    color: var(--naranja);
}
.trueBannerItem p{
    color: #fff;
    font-size: 16px;
}
.catalogoBannerEditar{

    position:absolute !important;

    top:15px;

    right:15px;

    z-index:20;

}

.catalogoGrid{
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-gap: 50px;
}
.catalogoCajaTitulo{
    background: var(--azul-oscuro);
    color: #fff;
    border: none;
    width: 100%;
    text-align: left;
    position: relative;
    padding: 5px 20px;
    
}
.catalogoCajaTitulo span{
    font-family: 'Anton';

}
.flechaCatalogo{
    position: absolute;
    right: 0;
    margin-right:20px ;
    top: 0;
    margin-top: 5px;
}
.catalogoCajaContenido a{
    display: flex;
    position: relative;
    width: 100%;
    padding: 10px 20px;
    align-self: center;
    border: 1px solid rgba(0,0,0,.15);
    text-decoration: none;
    font-size: 16px;
    color: #121212;
    transition: 0.3s all ease;

}

.catalogoCajaContenido a img{
    display: flex;
    height: 20px;
    width: 20px;
    object-fit: contain;
    align-self: center;
    margin-right: 20px;
}
.flechaicono{
    position: absolute;
    margin-right: 20px;
    right: 0;
}
.catalogoCajaContenido a.activo,.catalogoCajaContenido a:hover,.catalogoCajaContenido a.activo:hover{
    background: var(--naranja);
    color: #fff;
    transition: 0.3s all ease;
    opacity: 1;
}

.catalogoCajaContenido a:hover{
    opacity: 0.5;
    transition: 0.3s all ease;
}
.catalogoTitulo h2{
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 50px;
}
.producto{
    padding:15px;
  border: 1px solid rgba(0,0,0,.15);
  margin: 0 !important;
}
.productoImagen img{
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center;   
}
.productoNombre{
    text-transform: uppercase;
    font-size: 13px;
    margin: 10px 0px;
    font-weight: 600;
    height: 50px;
    overflow: hidden;
}
.productoBoton{
    text-align: center;
    display: flex;
}
.productoBoton a{
    display: block;
    margin: auto;
    position: relative;
    font-size: 13px;
    text-decoration: none;
    color: var(--naranja);
    border:2px solid var(--naranja);
    padding: 5px 15px;
    border-radius: 5px;
    font-weight: 600;
    padding-right: 30px;
}
.productoBoton a i{
    position: absolute;
    right: 0;
    margin-top: 9px;
    transform: translateY(-50%);
    margin-right: 10px;
}
.productoBoton a:hover{
    background: var(--naranja);
    color: #fff;
    transition: all 0.3s ease;
}
.catalogoPaginacion{
    display: flex;
    align-self: center;
    justify-content: center;
    margin-top: 50px;
}
.catalogoPaginacion button{
    margin: 2.5px;
    border: none;
    height: 35px;
    line-height: 35px;
    width: 40px;
    display: flex;
    align-self: center;
    justify-content: center;
    background: #fff;
    color: rgba(0, 0, 0, .50);
    border: 1px solid  rgba(0, 0, 0, .50);
    border-radius: 5px;
}
.catalogoPaginacion button.activo{
    background: var(--naranja);
    color: #fff;
    border: 1px solid var(--naranja);

}
/*PRODUCTO REAL*/
.productoRuta{
    border: 1px solid rgba(0,0,0,.15);
    padding: 5px 20px;
    margin: 50px auto;
    font-size: 16px;
}
.productoDetalle{
    margin: 50px auto;
}
.productoRuta a{
    text-decoration: none;
    color: rgba(0, 0, 0, .50);
}
.productoRuta span{
    color: var(--naranja);
    font-weight: 700;
}
.infoProductos h1{
    font-size: 28px;
    font-weight: 800;
}
.infoProductos section{
    margin: 30px 0px;
    font-size: 18px;
}
.accionesProducto{
    display: flex;
}
.accionesProducto a{
    display: flex;
    text-decoration: none;
    align-items: center;
    margin-right: 20px;
    padding: 10px 15px;
    position: relative;
    color: #fff;
}
.pdfProducto{
    background: var(--azul-oscuro);
}
.cotizaProducto{
    background: var(--naranja);
}
.accionesProducto a i{
    margin-right: 10px;
}
.accionesProducto a:hover{
    padding: 10px 25px;
    transition: all 0.3s ease;
}
.productoBeneficios{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    margin-top:30px;

}

.productoBeneficio{

    display:flex;
    align-items:center;
    gap:15px;
    padding:18px;
    border:1px solid #e5e5e5;
    border-radius:12px;
    background:#fff;

}

.productoBeneficioIcono{

    width:42px;
    height:42px;
    border:1px solid var(--naranja);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--naranja);
    font-size:18px;
    flex-shrink:0;

}

.productoBeneficioTexto{

    display:flex;
    flex-direction:column;
    line-height:1.2;

}

.productoBeneficioTexto strong{

    font-size:13px;
    font-weight:600;
    color:#222;

}

.productoBeneficioTexto span{

    margin-top:3px;
    font-size:12px;
    color:#777;

}

@media(max-width:991px){

    .productoBeneficios{

        grid-template-columns:1fr;

    }

}
.productoZoom img{
    width: 100%;
    height: 620px;
    object-fit: cover;
}
.productoSliderBotones button{
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: none;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.25);
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.25);
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.25);
margin: 5px;
}
.productoSliderBotones button.activo{
    background: var(--naranja);
}
.productoSlide{
    position: relative;
}
.controladoresProductos{
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    margin-right: 10px;
    margin-top: 10px;
}
.controladoresProductos button{
    display: block;
    margin-bottom: 5px;
    
}
.controladoresProductos button{
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    color: #fff;
}



/*CORRECCIONES*/

.controladoresAdam button{
    border-radius: 50% !important;
    height: 40px !important;
    width: 40px !important;
    text-align:center;
    line-height: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,.25);
    border: none;

}
.controlDebajo{
    position: absolute;
    top: 0;
    right:  0;
    display: grid;
    grid-template-columns: 1fr;
  
}
.controlesDebajo button{
    display: block;
}
.atencionItem{
    padding: 0px;
}
/*css contacto*/
/*
|--------------------------------------------------------------------------
| CONTACTO
|--------------------------------------------------------------------------
*/

.contactoContenido{

    padding:70px 0;

}

.contactoGrid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;

    margin-bottom:40px;

}

.contactoCard{

    background:#fff;

    border:1px solid #ececec;

    border-radius:15px;

    padding:35px;

    box-shadow:0 3px 15px rgba(0,0,0,.06);

}

.contactoCard h3{

    font-size:24px;

    margin-bottom:25px;

    font-weight:700;

}

.contactoCard p{

    margin:15px 0;

    color:#666;

    line-height:1.7;

}

.contactoCard strong{

    color:#222;

}

.contactoCard a{

    color:var(--naranja);

    font-weight:600;

    text-decoration:none;

}

.contactoMapa{

    background:#fff;

    border:1px solid #ececec;

    border-radius:15px;

    padding:45px;

    box-shadow:0 3px 15px rgba(0,0,0,.06);

    text-align:center;

}

.contactoMapa h3{

    font-size:28px;

    margin-bottom:15px;

}

.contactoMapa p{

    color:#666;

    margin-bottom:8px;

}

.contactoMapa span{

    display:block;

    color:var(--naranja);

    font-weight:700;

    margin-bottom:35px;

}

.contactoIframe{

    overflow:hidden;

    border-radius:15px;

}

.contactoIframe iframe{

    width:100%;

    height:420px;

    border:0;

    display:block;

}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media(max-width:991px){

    .contactoGrid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .contactoContenido{

        padding:50px 0;

    }

    .contactoCard,

    .contactoMapa{

        padding:25px;

    }

    .contactoMapa h3{

        font-size:24px;

    }

    .contactoIframe iframe{

        height:320px;

    }

}
/*CORRECCIONES*/
@media (max-width:998px) {
 .catalogoGrid{
    grid-template-columns: 1fr;
    width: 100%;
    margin: 0;
    padding: 0;
 }   
}



.rotate-vert-center:hover {
	-webkit-animation: rotate-vert-center 0.75s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: rotate-vert-center 0.75s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2026-7-13 18:42:30
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation rotate-vert-center
 * ----------------------------------------
 */
@-webkit-keyframes rotate-vert-center {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@keyframes rotate-vert-center {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}

.bounce-in-top {
	-webkit-animation: bounce-in-top 0.75s both;
	        animation: bounce-in-top 0.75s both;
}
/* ----------------------------------------------
 * Generated by Animista on 2026-7-13 19:1:29
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-in-top
 * ----------------------------------------
 */
@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
              opacity: 1;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
.slide-in-blurred-left {
	-webkit-animation: slide-in-blurred-left .75s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
	        animation: slide-in-blurred-left .75s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2026-7-13 19:25:48
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-blurred-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-blurred-left {
  0% {
    -webkit-transform: translateX(-250px) scaleX(2.5) scaleY(0.2);
            transform: translateX(-250px) scaleX(2.5) scaleY(0.2);
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) scaleY(1) scaleX(1);
            transform: translateX(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
@keyframes slide-in-blurred-left {
  0% {
    -webkit-transform: translateX(-250px) scaleX(2.5) scaleY(0.2);
            transform: translateX(-250px) scaleX(2.5) scaleY(0.2);
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) scaleY(1) scaleX(1);
            transform: translateX(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
/*CORRECCIONES CELULADRAR*/
@media (max-width:998px) {
    .sliderTitulo {
  font-size: 13px;
}
.sliderSubtitulo {
    font-size: 28px;
  }
    .sliderTexto {
    font-size: 13px;
  line-height: 15px;
    
  margin-top: 20px;
  margin-bottom: 30px;
  }
  .sliderBoton, .sliderBotonSecundario {
  
  padding: 7px 20px;
  font-size: 13px;
  transition: .3s;
}
.atencion{
    margin: 0 auto;
}
.valores{
    padding-top: 50px;
    padding-bottom: 30px;
}
.productoImagen img {
  width: 100%;
  height: 350px;
}
.productoZoom img {
  height: 650px;
}
}
@media (max-width:768px) {
.categoriaImagen img {
  height: 550px;
}
.atencionItem{
    padding: 30px;
}
.atencionGrid{
    grid-gap: 50px;
}
.corteDiv{
    padding-bottom: 0px;
}
.sliderItem{
    background-position: right;
     position: relative;
}
.sliderItem::before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45); /* Ajusta la intensidad */
    z-index: 1;
}
.sliderContainer{
    z-index: 2;
}
.productoImagen img {
  width: 100%;
  height: 180px;
}
.productoZoom img {
  height: 370px;
}
}
.contactoLi a{
    list-style: none;
    text-decoration: none;
    color: #fff;
}
.pdfProducto{
    cursor: pointer;
}
.popupFicha{
    border-radius:25px;
    padding:15px 30px;
    width:600px;
}

.tituloFicha{
    font-size:32px;
    font-weight:700;
    margin-bottom:10px;
}

.modalFichaTexto{
    color:#777;
    font-size:16px;
    margin-bottom:15px;
}

.popupFicha .swal2-input,
.popupFicha .swal2-textarea{

    width:100%;
    margin:15px 0;
    border:1px solid #d9d9d9;
    border-radius:15px;
    box-shadow:none;
    font-size:16px;
    padding:15px;
    resize: none;

}

.popupFicha .swal2-textarea{
    min-height:120px;
}

.btnFicha{

    background:#ff2727 !important;
    border-radius:35px !important;
    padding:14px 45px !important;
    font-size:20px !important;
    font-weight:bold !important;
    transition: all 0.3s ease;

}
.btnFicha:hover{

    background:#ff2727 !important;
    border-radius:35px !important;
    padding:14px 65px !important;
    font-size:20px !important;
    font-weight:bold !important;
    transition: all 0.3s ease;


}
.btnFooter i{
    color: #fff !important;
}

/*LOADER*/

#gabrielLoader{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(
        0,
        0,
        0,
        .5
    );

    z-index:999999;

    display:none;

    align-items:center;

    justify-content:center;

}

.gabrielLoaderBox{

    background:#fff;

    padding:25px;

    border-radius:10px;

    min-width:250px;

    text-align:center;

    box-shadow:
    0 10px 30px rgba(
        0,
        0,
        0,
        .2
    );

}
.noexisteProducto{
    margin: 100px auto;
    text-align: center;
    font-size: 32px;
}