/* ================= VARIABLES ================= */
:root{
    --orange:#ff914d;
    --pink:#ff6fb7;
    --dark:#1f1f1f;
    --gray:#f5f5f5;
    --border:#e5e5e5;
    --gradient:linear-gradient(135deg,#ff914d,#ff6fb7);
    --toolx-blue-dark:#005ca8;
    --toolx-blue:#007fd4;
    --toolx-blue-light:#00aeef;
    --toolx-metal:#0f172a;
}

/* ================= RESET ================= */
body{
    font-family:'Segoe UI',system-ui,sans-serif;
    background:#fafafa;
    color:var(--dark);
    overflow-x:hidden;
}

img{max-width:100%}
a{text-decoration:none;color:inherit}

/* ================= HEADER ================= */

.toolx-header{
    position:sticky;
    top:0;
    z-index:1000;

    background:
        linear-gradient(
            180deg,
            #0f172a 0%,
            #0b1e33 60%,
            #081726 100%
        );

    padding:18px 34px;

    border-bottom:4px solid var(--toolx-blue-light);

    box-shadow:
        0 15px 35px rgba(0,0,0,.45),
        inset 0 -1px 0 rgba(255,255,255,.08);

    animation:headerFade .6s ease;
}

/* LOGO */
.toolx-header .logo img{
    height:64px;
    filter:drop-shadow(0 6px 12px rgba(0,0,0,.4));
}

/* ===== CONTENEDOR BUSCADOR CENTRADO ===== */
.header-search-wrapper{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    max-width:760px;
    padding:0 20px;
}

/* BUSCADOR */
.toolx-header .search-box{
    position:relative;
    background:#ffffff;
    border-radius:16px;
    overflow:hidden;

    box-shadow:0 20px 45px rgba(0,0,0,.35);
    border:2px solid rgba(0,174,239,.35);

    transition:.3s ease;
}

.toolx-header .search-box:focus-within{
    border-color:var(--toolx-blue-light);
    box-shadow:0 25px 60px rgba(0,174,239,.35);
}

.toolx-header .search-box input{
    width:100%;
    border:none;
    outline:none;

    padding:18px 72px 18px 24px; /* espacio para botón redondo */
    font-size:1rem;
    font-weight:500;
    color:#111;
}

/* BOTÓN BÚSQUEDA REDONDO */
.toolx-header .search-box button{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);

    width:46px;
    height:46px;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
        linear-gradient(
            135deg,
            var(--toolx-blue),
            var(--toolx-blue-light)
        );

    border:none;
    color:white;
    font-size:1.15rem;

    box-shadow:0 8px 18px rgba(0,0,0,.35);
    cursor:pointer;
    transition:.25s ease;
}

.toolx-header .search-box button:hover{
    transform:translateY(-50%) scale(1.08);
    box-shadow:0 14px 35px rgba(0,0,0,.45);
}

/* ===== DERECHA (CONTACTO + CARRITO) ===== */
.header-right{
    display:flex;
    align-items:center;
    gap:26px;
}

/* CONTACTO */
.toolx-header .contact-header{
    color:#cbd5e1;
    font-size:.85rem;
    line-height:1.3;
    text-align:right;
}

.toolx-header .contact-header strong{
    display:block;
    font-size:1rem;
    font-weight:700;
    color:var(--toolx-blue-light);
}

/* CARRITO */
.toolx-header .cart-btn{
    position:relative;

    background:
        linear-gradient(
            135deg,
            #0b1e33,
            #0f2f4d
        );

    border:1px solid rgba(0,174,239,.4);
    color:white;

    padding:12px 18px;
    border-radius:14px;

    box-shadow:0 12px 30px rgba(0,0,0,.4);
    transition:.3s ease;
}

.toolx-header .cart-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 45px rgba(0,0,0,.5);
}

.toolx-header .cart-btn .badge{
    position:absolute;
    top:-6px;
    right:-6px;

    background:var(--toolx-blue-light);
    color:#fff;
    font-size:.7rem;
    font-weight:700;
    padding:4px 6px;
    border-radius:50%;
}

@media (max-width: 991px){

    /* ===== SEARCH STICKY SOLO MOBILE ===== */
    .header-search-wrapper.is-sticky{
        position:fixed !important;
        top:0;
        left:0;
        transform:none !important;

        width:100vw;
        max-width:100%;
        padding:10px 14px;

        background:#081726;
        z-index:9999;

        box-shadow:0 12px 30px rgba(0,0,0,.45);
    }

    .header-search-wrapper.is-sticky .search-box{
        max-width:100%;
    }

    .header-search-wrapper.is-sticky .search-box input{
        height:46px;
        font-size:.95rem;
    }

    /* EVITA ABSOLUTE AL INICIO */
    .header-search-wrapper{
        position:static !important;
        left:auto !important;
        transform:none !important;
        width:100%;
        max-width:100%;
        padding:0;
    }
}

/* ================= HEADER RESPONSIVE FIX ================= */
@media (max-width: 991px){

    .toolx-header .container-fluid{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        row-gap: 12px;
    }

    /* LOGO */
    .toolx-header .logo{
        order: 1;
        flex: 0 0 auto;
    }

    /* DERECHA (CARRITO) */
    .toolx-header .header-right{
        order: 2;
        flex: 0 0 auto;
        margin-left: auto;
    }

    /* BUSCADOR ABAJO (FILA NUEVA REAL) */
    .toolx-header .header-search-wrapper{
        order: 3;
        flex: 0 0 100%;
        width: 100%;
        position: static !important; /* 🔥 CLAVE */
        margin-top: 8px;
    }

    .toolx-header .search-box{
        width: 100%;
    }

    /* OCULTA TEXTO CONTACTO */
    .toolx-header .contact-header{
        display: none !important;
    }

    /* El contenedor general NO debe recortar */
    .toolx-header .container-fluid{
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Wrapper del buscador */
    .toolx-header .header-search-wrapper{
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0;
    }

    /* Caja del buscador */
    .toolx-header .search-box{
        width: 100%;
        max-width: 100%;
    }

    /* Input */
    .toolx-header .search-box input{
        width: 100%;
        min-width: 0; /* 🔥 clave para flex */
    }
}

/* ================= END HEADER ================= */

/* ================= BARRA CATEGORÍAS ================= */

.categories-bar{
    background:linear-gradient(180deg,#081726 0%,#0b1e33 100%);
    border-bottom:3px solid var(--toolx-blue-light);
    box-shadow:0 8px 25px rgba(0,0,0,.35);
    position:relative;
    z-index:900;
}

/* CONTENEDOR */
.categories-root{
    display:flex;
    gap:34px;
    list-style:none;
    margin:0;
    padding:0 36px;
}

/* ITEM PRINCIPAL */
.categories-root > li{
    position:relative;
    padding:16px 4px;

    color:#e2e8f0;
    font-weight:600;
    font-size:.9rem;
    letter-spacing:.05em;
    text-transform:uppercase;
    cursor:pointer;

    transition:.25s ease;
}

/* HOVER */
.categories-root > li:hover{
    color:#ffffff;
}

/* LINEA INFERIOR */
.categories-root > li::after{
    content:"";
    position:absolute;
    left:0;
    bottom:8px;
    width:0;
    height:2px;
    background:var(--toolx-blue-light);
    transition:.3s ease;
}

.categories-root > li:hover::after{
    width:100%;
}

/* ================= SUBMENÚ ================= */

.submenu{
    position:absolute;
    top:100%;
    left:0;

    background:#ffffff;
    border-radius:10px;

    min-width:230px;
    padding:10px 0;

    list-style:none;

    opacity:0;
    visibility:hidden;
    transform:translateY(10px);

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

    transition:.25s ease;
}

/* MOSTRAR */
.categories-root > li:hover > .submenu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* ITEMS SUBMENU */
.submenu li{
    padding:10px 18px;
    font-size:.9rem;
    color:#374151;
    cursor:pointer;
    transition:.2s ease;
}

.submenu li:hover{
    background:#f1f5f9;
    color:var(--toolx-blue);
    padding-left:22px;
}

/* ================= SUBMENU BARRA SUPERIOR ================= */

.categories-bar .submenu{
    position:absolute;
    top:100%;
    left:0;

    background:#ffffff;
    border-radius:10px;

    min-width:230px;
    max-width:260px;

    padding:12px;

    list-style:none;

    opacity:0;
    visibility:hidden;
    transform:translateY(10px);

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

    transition:
        opacity .25s ease,
        transform .25s ease;
}

/* mostrar submenu */
.categories-root > li:hover > .submenu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* contenedor relativo */
.categories-root > li{
    position:relative;
}

/* puente invisible entre categoría y submenu */
.categories-root > li::before{
    content:"";
    position:absolute;
    left:0;
    top:100%;
    width:100%;
    height:15px;
}

/* ================= ITEMS SUBMENU ================= */

.categories-bar .submenu li{

    padding:10px 14px;
    font-size:.9rem;
    color:#374151;

    border-radius:6px;

    cursor:pointer;

    /* permitir texto largo */
    white-space:normal;
    line-height:1.35;
    word-break:break-word;

    transition:
        background .25s ease,
        color .25s ease,
        padding-left .25s ease,
        transform .2s ease;
}

/* hover suave */
.categories-bar .submenu li:hover{

    background:#f1f5f9;
    color:var(--toolx-blue);

    padding-left:18px;
    transform:translateX(4px);
}

/* ================= MOBILE ================= */

@media(max-width:991px){

    .categories-root{
        overflow-x:auto;
        gap:24px;
        padding:0 18px;
    }

    .categories-root > li{
        white-space:nowrap;
    }

}

/* ================= HERO ================= */

.main-hero{
    background: linear-gradient(180deg, #f8f9fa 0%, #f1f3f5 100%);
    padding: 30px 0;
}

/* ================= RESET LISTAS ================= */

.category-sidebar ul,
.category-sidebar li,
.categories-bar .submenu ul,
.categories-bar .submenu li{
    list-style:none;
    margin:0;
    padding-left:0;
}

/* ================= SIDEBAR CATEGORÍAS ================= */

.category-sidebar{
    position:relative;
}

.category-sidebar > ul > li{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.category-sidebar > ul > li::after{
    content:"›";
    font-size:1.1rem;
    opacity:.4;
}

/* ================= SUBMENÚ SIDEBAR ================= */

.category-sidebar .submenu{
    position:absolute;
    top:0;
    left:100%;

    width:220px;

    background:white;
    border-radius:10px;

    padding:12px 15px;

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

    opacity:0;
    transform:translateX(10px);
    pointer-events:none;

    transition:.3s ease;
}

/* mostrar submenu sidebar */

.category-sidebar li:hover > .submenu{
    opacity:1;
    transform:translateX(0);
    pointer-events:auto;
}

/* items sidebar */

.category-sidebar .submenu li{
    padding:8px 6px;
    border-radius:6px;
    transition:.2s ease;
}

.category-sidebar .submenu li:hover{
    background:var(--gray);
    padding-left:10px;
}

.categories-root > li i{
    margin-right:6px;
    font-size:.95rem;
    opacity:.8;
    vertical-align:middle;
}

/* ================= Menu Movil ============ */

/* ================= BOTÓN HAMBURGUESA FLOAT ================= */

.fab-menu {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--toolx-blue), #0a58ca);
    color: #fff;
    border: none;
    font-size: 1.5rem;

    display: none;
    align-items: center;
    justify-content: center;

    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    z-index: 9999;

    transition: all .3s ease;
}

.fab-menu:hover{
    transform: scale(1.08);
}

/* SOLO MOBILE */
@media(max-width:991px){
    .fab-menu{
        display:flex;
    }

    .categories-bar{
        display:none; /* ocultamos barra horizontal */
    }
}

/* ================= MENÚ FULLSCREEN ================= */

.mobile-menu {
    position: fixed;
    inset: 0;

    background: linear-gradient(180deg,#081726 0%,#0b1e33 100%);

    z-index: 9998;

    transform: translateY(100%);
    transition: transform .4s ease;

    overflow-y: auto;
    padding: 80px 25px;
}

/* ACTIVO */
.mobile-menu.active{
    transform: translateY(0);
}

/* LISTA */
.mobile-menu ul{
    list-style:none;
    padding:0;
    margin:0;
}

/* ITEM PRINCIPAL */
.mobile-menu > ul > li{
    color:#e2e8f0;
    font-size:1.1rem;
    font-weight:600;
    padding:14px 0;

    border-bottom:1px solid rgba(255,255,255,.05);

    display:flex;
    align-items:center;
    justify-content:space-between;

    cursor:pointer;
}

/* ICONO */
.mobile-menu li i{
    margin-right:10px;
    color:var(--toolx-blue-light);
}

/* SUBMENU */
.mobile-menu .submenu{
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

/* ABIERTO */
.mobile-menu li.open > .submenu{
    max-height: 500px; /* suficiente para que se vea todo */
}

/* SUBITEM */
.mobile-menu .submenu li{
    padding:10px 15px;
    font-size:.95rem;
    color:#cbd5e1;
}

/* HOVER */
.mobile-menu .submenu li:hover{
    color:#fff;
    padding-left:20px;
}

/* BOTÓN CERRAR */
.mobile-close{
    position:absolute;
    top:20px;
    right:20px;
    font-size:1.8rem;
    color:#fff;
    cursor:pointer;
}

.menu-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    cursor:pointer;
}

.menu-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    cursor:pointer;
}

.mobile-menu li i.bi-chevron-down{
    transition: transform .3s ease;
}

.mobile-menu li.open i.bi-chevron-down{
    transform: rotate(180deg);
}

/* ================= HERO ================= */
.main-hero{
    background:#f6f8fb; /* claro, neutro */
    padding:30px 0;
}

/* ================= CARRUSEL ================= */
#mainCarousel{
    width:1800px;
    max-width:96vw;
    height:500px;
    margin:0 auto;

    border-radius:14px;
    overflow:hidden;

    border:1px solid rgba(0,174,239,.25); /* azul marca */
    box-shadow:none; /* ❌ sin sombras pesadas */

    position:relative;
    left:50%;
    transform:translateX(-50%);
}

/* SLIDES */
.carousel-item{
    height:500px;
    position:relative;
    background-size:cover;
    background-position:center;
}

/* CONTENIDO */
.hero-slide-content{
    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:45px;
}

/* TÍTULO */
.hero-slide-content h1{
    color:#0b1e33;
    font-size:2.7rem;
    font-weight:800;
    max-width:600px;
}

/* LÍNEA DECORATIVA */
.hero-slide-content h1::after{
    content:"";
    display:block;
    width:60px;
    height:3px;
    margin-top:12px;

    background:var(--toolx-blue-light);
    border-radius:6px;
}

/* TEXTO */
.hero-slide-content p{
    color:#334155;
    font-size:1.15rem;
    max-width:520px;
}

/* BOTÓN */
.hero-slide-content a{
    align-self:flex-start;

    background:var(--toolx-blue-light);
    color:white;

    padding:12px 32px;
    border-radius:24px;

    font-weight:600;
    font-size:1rem;

    transition:.25s ease;
}

.hero-slide-content a:hover{
    background:var(--toolx-blue);
}

/* INDICADORES */
.carousel-indicators button{
    width:9px;
    height:9px;
    border-radius:50%;
    background-color:rgba(0,174,239,.35);
}

.carousel-indicators .active{
    background-color:var(--toolx-blue-light);
}

/* CONTROLES */
.carousel-control-prev,
.carousel-control-next{
    width:48px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
    background-color:rgba(21, 104, 220, 0.85);
    border-radius:50%;
    padding:10px;
    filter:none;
}

/* ANIMACIÓN */
.carousel-item.active .hero-slide-content{
    animation:slideFadeUp .6s ease;
}

@keyframes slideFadeUp{
    from{
        opacity:0;
        transform:translateY(18px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* FADE */
.carousel-fade .carousel-item{
    opacity:0;
    transition:opacity .7s ease-in-out;
}

.carousel-fade .carousel-item.active{
    opacity:1;
}

/* ================= RESPONSIVE ================= */
@media(max-width:768px){
    #mainCarousel{
        height:420px;
    }

    .carousel-item{
        height:420px;
    }

    .hero-slide-content h1{
        font-size:2.2rem;
    }
}

/* ================= END CARRUSEL ================== */

/* ================= TOOLX CARRUSEL ================= */

.toolx-carousel-section{
    padding:70px 0;

    background:
    linear-gradient(
        180deg,
        #081726 0%,
        #0b1e33 100%
    );

    overflow:hidden;
}

/* ================= TITULO ================= */

.toolx-carousel-title{
    color:#ffffff;
    font-size:1.8rem;
    font-weight:700;
    margin-bottom:40px;
    text-align:center;
    letter-spacing:.5px;
}

/* ================= CONTENEDOR ================= */

.toolx-carousel{
    overflow:visible; /* 🔥 evita corte en hover */
    position:relative;
}

/* ================= TRACK ================= */

.toolx-track{
    display:flex;
    gap:30px;
    padding:10px 0;

    animation:toolxScroll 30s linear infinite;
}

/* ================= CARD ================= */

.toolx-card{
    min-width:180px;

    background:rgba(255,255,255,.03);
    border:1px solid rgba(0,174,239,.15);

    border-radius:14px;

    padding:15px;

    text-align:center;

    transition:.35s ease;

    cursor:pointer;

    display:flex;
    flex-direction:column;
    align-items:center;
}

/* ================= IMG BOX (PRO) ================= */

.toolx-img-box{
    background:#ffffff;

    border-radius:12px;

    padding:15px;

    width:100%;
    height:120px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:12px;

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

    transition:.3s ease;
}

/* IMAGEN */

.toolx-img-box img{
    max-width:100%;
    max-height:90px;
    object-fit:contain;

    transition:.3s ease;
}

/* ================= TEXTO ================= */

.toolx-card span{
    font-size:.9rem;
    color:#cbd5e1;
    font-weight:500;
    line-height:1.3;

    min-height:38px; /* 🔥 evita saltos por textos largos */
}

/* ================= HOVER ================= */

.toolx-card:hover{
    transform:translateY(-10px) scale(1.05);

    border-color:var(--toolx-blue-light);

    box-shadow:0 25px 60px rgba(0,0,0,.6);
}

/* EFECTO EN IMAGEN */

.toolx-card:hover .toolx-img-box{
    box-shadow:0 12px 30px rgba(0,174,239,.35);
}

.toolx-card:hover img{
    transform:scale(1.08);
}

/* ================= ANIMACION ================= */

@keyframes toolxScroll{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-50%);
    }

}

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

@media(max-width:991px){

    .toolx-track{
        gap:20px;
    }

    .toolx-card{
        min-width:160px;
    }

}

@media(max-width:768px){

    .toolx-card{
        min-width:140px;
        padding:12px;
    }

    .toolx-img-box{
        height:90px;
        padding:10px;
    }

    .toolx-img-box img{
        max-height:60px;
    }

    .toolx-card span{
        font-size:.8rem;
    }

}

/* ================= NOSOTROS ================= */
.about-us{
    background:#f6f8fb;
    padding:70px 0;
}

/* TÍTULO */
.section-title{
    font-size:2.4rem;
    font-weight:800;
    color:#0b1e33;
    text-transform:uppercase;
    letter-spacing:.04em;
    text-align:center;
    margin-bottom:50px;
}

.section-title::after{
    content:"";
    width:90px;
    height:3px;
    background:var(--toolx-blue-light);
    display:block;
    margin:16px auto 0;
    border-radius:4px;
}

/* BLOQUES MISIÓN / VISIÓN */
.about-card{
    background:#ffffff;
    border-radius:10px;
    padding:35px 40px;

    border-left:5px solid var(--toolx-blue-light);

    box-shadow:none;
    margin-bottom:30px;

    transition:border-color .3s ease;
}

.about-card:hover{
    border-left-color:var(--toolx-blue);
}

/* TÍTULO TARJETA */
.about-card h3{
    font-size:1.4rem;
    font-weight:800;
    color:#0b1e33;
    text-transform:uppercase;
    margin-bottom:18px;
}

/* TEXTO */
.about-card p{
    font-size:1.05rem;
    color:#334155;
    line-height:1.7;
}

/* RESPONSIVE */
@media(max-width:768px){
    .about-us{
        padding:50px 0;
    }

    .about-card{
        padding:28px;
    }

    .section-title{
        font-size:2rem;
    }
}

/* ================= SEGURIDAD INDUSTRIAL ================= */

.toolx-safety {
    background: #0f1e2e;
    padding: 60px 0;
}

.safety-container {
    max-width: 1100px; /* sección más angosta */
}

/* Título */
.safety-header {
    text-align: center;
    margin-bottom: 40px;
}

.safety-header h2 {
    color: #ffffff;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
}

.safety-header h2::after {
    content: "";
    width: 50px;
    height: 3px;
    background: var(--toolx-blue);
    display: block;
    margin: 15px auto 0;
}

/* Fila única */
.safety-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

/* Card */
.safety-card {
    flex: 1;
    background: #ffffff;
    padding: 25px 15px;
    text-align: center;
    border-radius: 4px;
    transition: all .25s ease;
    border-top: 4px solid transparent;
}

.safety-card:hover {
    transform: translateY(-5px);
    border-top: 4px solid var(--toolx-blue);
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

/* Icono */
.safety-icon {
    font-size: 28px;
    color: var(--toolx-blue);
    margin-bottom: 12px;
}

/* Texto */
.safety-card h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1c2733;
    margin: 0;
}

/* Responsive */
@media (max-width: 992px) {
    .safety-row {
        flex-wrap: wrap;
        gap: 15px;
    }

    .safety-card {
        flex: 1 1 calc(50% - 10px);
    }
}

@media (max-width: 576px) {
    .safety-card {
        flex: 1 1 100%;
    }
}

/* ================= PRODUCTOS POR CATEGORÍA ================= */
.products-section{
    background-color:#f8fafc;
    padding:60px 0;
}

/* TÍTULO */
.section-title{
    text-align:center;
    font-size:2.4rem;
    font-weight:800;
    color:#0b1e33;
    text-transform:uppercase;
    margin-bottom:60px;
    letter-spacing:.05em;
}

.section-title::after{
    content:"";
    width:70px;
    height:4px;
    background:var(--toolx-blue-light);
    display:block;
    margin:14px auto 0;
    border-radius:4px;
}

/* ================= PESTAÑAS ================= */
.nav-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.nav-item {
    margin: 0 15px;
}

.nav-link {
    font-weight: 700;
    color: var(--toolx-blue); /* Letras azules */
    padding: 12px 25px;
    border-radius: 4px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: 0.3s ease;
    text-decoration: none;
    border: 2px solid transparent;
    background-color: transparent; /* Fondo transparente */
}

/* Botón activo y hover */
.nav-link.active, .nav-link:hover {
    color: white;
    background-color: var(--toolx-blue); /* Fondo azul Toolx */
    border-color: var(--toolx-blue); /* Borde azul */
}

/* Subrayado elegante en hover */
.nav-link:hover::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--toolx-blue-light); /* Subrayado más claro */
    margin-top: 6px;
}

/* PRODUCTOS */
.product-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap:30px;
}

/* CARD */
.product-card{
    background:#ffffff;
    border-radius:10px;
    padding:20px;
    box-shadow:0 12px 35px rgba(0,0,0,.1);
    transition: all .25s ease;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:relative;
}

.product-card:hover{
    transform:translateY(-6px);
    box-shadow: 0 18px 45px rgba(0,0,0,.15);
}

/* IMAGEN */
.product-image{
    height:180px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:15px;
}

.product-image img{
    max-height:100%;
    max-width:100%;
    object-fit:contain;
}

/* INFO */
.product-info h6{
    font-size:1.2rem;
    font-weight:700;
    color:#0b1e33;
    margin-bottom:10px;
}

.product-desc{
    font-size:.95rem;
    color:#6b7280;
    line-height:1.5;
}

/* ACCIONES */
.product-actions{
    display:flex;
    justify-content:space-between;
    margin-top:18px;
}

/* BOTÓN CARRITO */
.btn-cart{
    background-color:var(--toolx-blue);
    color:white;
    padding:10px 20px;
    border-radius:30px;
    font-weight:600;
    font-size:1rem;
    display:flex;
    align-items:center;
    gap:10px;
    transition:.3s ease;
    cursor:pointer;
    border:none;
}

.btn-cart:hover{
    background-color:var(--toolx-blue-light);
    transform:scale(1.05);
}

/* VER DETALLE */
.btn-detail{
    font-size:.95rem;
    font-weight:600;
    color:var(--toolx-blue);
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:6px;
    transition:.3s ease;
}

.product-actions .btn-detail{
    margin-left:10px; /* Añadir espacio entre botones */
}

.btn-detail:hover{
    color:var(--toolx-blue-light);
}

/* ================= PRODUCTOS ================= */
.products-section{
    background-color:#f8fafc;
    padding:60px 0;
}

/* TÍTULO */
.section-title{
    text-align:center;
    font-size:2.4rem;
    font-weight:800;
    color:#0b1e33;
    text-transform:uppercase;
    margin-bottom:60px;
    letter-spacing:.05em;
}

.section-title::after{
    content:"";
    width:70px;
    height:4px;
    background:var(--toolx-blue-light) !important;
    display:block;
    margin:14px auto 0;
    border-radius:4px;
}

/* GRID */
.product-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap:30px;
}

/* CARD */
.product-card{
    background:#ffffff;
    border-radius:10px;
    padding:20px;
    box-shadow:0 12px 35px rgba(0,0,0,.1);
    transition: all .25s ease;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:relative;
}

.product-card:hover{
    transform:translateY(-6px);
    box-shadow: 0 18px 45px rgba(0,0,0,.15);
}

/* IMAGEN */
.product-image{
    height:180px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:15px;
}

.product-image img{
    max-height:100%;
    max-width:100%;
    object-fit:contain;
}

/* INFO */
.product-info h6{
    font-size:1.2rem;
    font-weight:700;
    color:#0b1e33;
    margin-bottom:10px;
}

.product-desc{
    font-size:.95rem;
    color:#6b7280;
    line-height:1.5;
}

/* ACCIONES */
.product-actions{
    display:flex;
    justify-content:space-between;
    margin-top:18px;
}

/* BOTÓN CARRITO */
.btn-cart{
    background-color:var(--toolx-blue);
    color:white;
    padding:10px 20px;
    border-radius:30px;
    font-weight:600;
    font-size:1rem;
    display:flex;
    align-items:center;
    gap:10px;
    transition:.3s ease;
    cursor:pointer;
    border:none;
}

.btn-cart:hover{
    background-color:var(--toolx-blue-light);
    transform:scale(1.05);
}

/* VER DETALLE */
.btn-detail{
    font-size:.95rem;
    font-weight:600;
    color:var(--toolx-blue);
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:6px;
    transition:.3s ease;
}

.product-actions .btn-detail{
    margin-left:10px; /* Añadir espacio entre botones */
}

.btn-detail:hover{
    color:var(--toolx-blue-light);
}

/* BOTÓN CARRITO CON TEXTO */
.btn-cart{
    width:auto;
    padding:8px 16px;
    min-width:200px;
    justify-content:center;
    text-align:center;
    border-radius:25px;
}

.btn-cart i{
    font-size:1.1rem;
}

/* RESPONSIVIDAD */
@media(max-width:768px){
    .product-grid{
        gap:20px;
    }

    .product-card{
        padding:18px;
    }

    .product-image{
        height:160px;
    }

    .product-info h6{
        font-size:1rem;
    }

    .product-desc{
        font-size:.85rem;
    }

    .product-actions{
        flex-direction:column;
        gap:10px;
    }
}


/* ================= MARCAS ================= */

.brands-section {
    background: #f1f3f5; /* gris industrial claro */
    padding: 80px 0;
}

/* ================= TÍTULO ================= */

.section-title {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 60px;
    color: #1c2733; /* azul gris oscuro */
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
}

.section-title::after {
    content: "";
    width: 50px;
    height: 3px;
    background: var(--toolx-blue);
    display: block;
    margin: 18px auto 0;
}

/* ================= GRID TIPO TABLA ================= */

.brands-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border-top: 1px solid #d9dee5;
    border-left: 1px solid #d9dee5;
    background: #ffffff;
}

/* ================= CELDA MARCA ================= */

.brand-card {
    background: #ffffff;
    border-right: 1px solid #d9dee5;
    border-bottom: 1px solid #d9dee5;
    padding: 45px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    position: relative;
    cursor: pointer;
}

/* Quitamos efecto degradado decorativo */
.brand-card::before {
    display: none;
}

/* HOVER MÁS FIRME Y CORPORATIVO */
.brand-card:hover {
    background: #ffffff;
    box-shadow: inset 0 -4px 0 var(--toolx-blue); /* línea inferior fuerte */
}

/* ================= IMAGEN ================= */

.brand-card img {
    max-height: 60px;
    max-width: 100%;
    object-fit: contain;
    transition: transform .25s ease;
}

/* Hover sobrio */
.brand-card:hover img {
    transform: scale(1.08);
}

/* ================= OCULTAR TEXTO Y BOTÓN ================= */

.brand-card h4,
.brand-card p,
.brand-card .btn-view-brand {
    display: none;
}

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

@media (max-width: 1200px) {
    .brands-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .brand-card {
        padding: 35px 15px;
    }

    .brand-card img {
        max-height: 45px;
    }
}

/* ================= FOOTER ================= */
.footer{
    background:#1a1a1a;
    color:#aaa;
    padding:20px;
    font-size:.85rem;
}

/* ================= RESPONSIVE ================= */
@media(max-width:991px){
    .categories-bar{
        display:none;
    }

    .search-box{
        max-width:100%;
    }

    .contact-header{
        display:none;
    }

    .hero-carousel{
        padding:30px;
    }
}

/* ================= CTA TOOLX ================= */
.toolx-cta{
    padding:70px 0;
    background:
        linear-gradient(
            135deg,
            #f8fafc 0%,
            #eef2f7 100%
        );
}

/* CAJA PRINCIPAL */
.cta-box{
    background:white;
    border-radius:20px;
    padding:45px 55px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;

    border-left:6px solid var(--toolx-blue-light);

    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

/* TEXTO */
.cta-content h2{
    font-size:2.1rem;
    font-weight:800;
    color:#0f172a;
    margin-bottom:10px;
}

.cta-content p{
    font-size:1.05rem;
    color:#475569;
    max-width:520px;
    line-height:1.6;
}

/* BOTONES */
.cta-actions{
    display:flex;
    gap:18px;
    flex-shrink:0;
}

.btn-cta{
    padding:14px 30px;
    border-radius:30px;
    font-size:.95rem;
    font-weight:700;
    text-decoration:none;
    transition:.3s ease;
    white-space:nowrap;
}

/* BOTÓN PRINCIPAL */
.btn-cta.primary{
    background:
        linear-gradient(
            135deg,
            var(--toolx-blue),
            var(--toolx-blue-light)
        );
    color:white;
    box-shadow:0 8px 18px rgba(0,174,239,.22); 
}

.btn-cta.primary:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 26px rgba(0,174,239,.3);
}

/* BOTÓN SECUNDARIO */
.btn-cta.secondary{
    border:2px solid var(--toolx-blue-light);
    color:var(--toolx-blue);
    background:white;
}

.btn-cta.secondary:hover{
    background:rgba(0,174,239,.08);
}

/* RESPONSIVE */
@media(max-width:991px){
    .cta-box{
        flex-direction:column;
        text-align:center;
        padding:40px 30px;
    }

    .cta-actions{
        justify-content:center;
    }
}

/* ================= CONTACTO TOOLX ================= */
.contact-corporate{
    background:#111827; /* fondo industrial oscuro */
    padding:70px 0;
    color:#e5e7eb;
}

/* ================= TEXTO ================= */
.contact-title{
    font-size:2.5rem;
    font-weight:900;
    line-height:1.2;
    margin-bottom:18px;
    color:#ffffff;
    text-transform:uppercase;
}

.contact-text{
    font-size:1.05rem;
    color:#d1d5db;
    margin-bottom:24px;
    max-width:420px;
}

.contact-list{
    list-style:none;
    padding:0;
    margin:0;
}

.contact-list li{
    font-size:1rem;
    margin-bottom:12px;
    color:#f9fafb;
    display:flex;
    align-items:center;
    gap:10px;
}

/* ================= TARJETA FORMULARIO ================= */
.contact-card{
    background:#0f172a;
    padding:38px;
    border-radius:12px;
    box-shadow:
        0 25px 50px rgba(0,0,0,.6),
        inset 0 0 0 1px rgba(255,255,255,.05);
    border-left:6px solid var(--toolx-blue);
}

/* ================= LABELS ================= */
.contact-card label{
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.5px;
    margin-bottom:6px;
    display:block;
    color:#f9fafb;
    text-transform:uppercase;
}

/* ================= INPUTS ================= */
.contact-card .form-control{
    width:100%;
    background:#020617;
    border:1px solid #1e293b;
    border-radius:6px;
    padding:13px 14px;
    font-size:.95rem;
    color:#f9fafb;
}

.contact-card .form-control::placeholder{
    color:#64748b;
}

.contact-card .form-control:focus{
    border-color:var(--toolx-blue);
    box-shadow:0 0 0 2px rgba(14,165,233,.35);
    outline:none;
}

/* ================= BOTÓN TOOLX ================= */
.contact-card .btn-send-toolx{
    margin-top:14px;
    background:linear-gradient(
        135deg,
        var(--toolx-blue),
        var(--toolx-blue-dark)
    );
    color:#ffffff;
    border:none;
    padding:15px 40px;
    font-weight:900;
    border-radius:6px;
    letter-spacing:1px;
    text-transform:uppercase;
    transition:.25s ease;
    min-width:260px;
    position:relative;
}

.contact-card .btn-send-toolx:hover{
    transform:translateY(-2px);
    box-shadow:
        0 12px 30px rgba(14,165,233,.45),
        inset 0 0 0 1px rgba(255,255,255,.15);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 991px){
    .contact-corporate{
        padding:50px 15px;
    }

    .contact-title{
        font-size:2rem;
    }

    .contact-card{
        padding:28px;
    }
}

html, body {
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

.products-grid {
    width: 100%;
}

@media(max-width:600px){
    .category-search input{
        width:100%;
    }
}