:root{

--azul:#003C69;
--azul-dark:#00284A;
--amarillo:#F9C400;
--gris:#F5F7FA;
--texto:#333;

}


*{

margin:0;
padding:0;
box-sizing:border-box;

}


body{

font-family:'Montserrat',sans-serif;
color:var(--texto);
background:white;

}


h2{

font-weight:700;
color:var(--azul);
margin-bottom:40px;

}



/* HEADER */

.imex-navbar{

background:linear-gradient(
90deg,
#003C69,
#00284A
);

padding:12px 0;

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

position:sticky;

top:0;

z-index:1000;

}



.logo img{

height:65px;

width:auto;

object-fit:contain;

}



.nav-link{

color:white!important;

font-weight:600;

margin:0 8px;

transition:.3s;

}



.nav-link:hover{

color:#F9C400!important;

}



.dropdown-menu{

border:none;

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

}



.dropdown-item:hover{

background:#003C69;

color:rgb(255, 255, 255);

}



.search-box{

display:flex;

background:white;

border-radius:50px;

overflow:hidden;

height:42px;

}



.search-box input{

border:none;

outline:none;

padding:0 20px;

width:320px;

font-size:14px;

}



.search-box button{

border:none;

background:#F9C400;

width:55px;

}



.icons{

display:flex;

gap:18px;

margin-left:20px;

}



.icons a{

color:white;

font-size:20px;

}



.icons a:hover{

color:#F9C400;

}



.search-box{

display:flex;
background:white;
border-radius:30px;
overflow:hidden;

}


.search-box input{

border:none;
padding:12px 20px;
width:280px;
outline:none;

}


.search-box button{

border:none;
background:var(--amarillo);
padding:0 20px;

}



.icons{

color:white;
font-size:20px;
display:flex;
gap:20px;
margin-left:20px;

}


/* ==========================================
   MENU CLIENTE LOGUEADO
========================================== */


.user-menu .nav-link{

    color:white!important;
    display:flex;
    align-items:center;
    gap:8px;

}


.user-menu .dropdown-menu{

    min-width:260px;
    padding:12px;
    border:none;
    border-radius:15px;

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

}


/* Nombre y correo */

.user-menu .dropdown-item-text{

    color:#003C69;

}


.user-menu .dropdown-item-text.text-muted{

    font-size:13px;
    color:#666!important;

}


/* Opciones */

.user-menu .dropdown-item{

    color:#003C69!important;

    font-weight:600;

    padding:10px 15px;

    border-radius:8px;

    transition:.3s;

}


.user-menu .dropdown-item i{

    width:22px;

}


/* Hover */

.user-menu .dropdown-item:hover{

    background:#003C69!important;

    color:#F9C400!important;

}


.user-menu .dropdown-item:hover i{

    color:#F9C400;

}


/* Separadores */

.user-menu .dropdown-divider{

    margin:10px 0;

}



/* Cerrar sesión */

.user-menu .logout{

    color:#d32f2f!important;

}


.user-menu .logout:hover{

    background:#d32f2f!important;

    color:white!important;

}


.user-menu .logout:hover i{

    color:white;

}


/* HERO */


.hero{

min-height:650px;

display:flex;

align-items:center;


background:

linear-gradient(
90deg,
rgba(0,40,74,.95),
rgba(0,60,105,.75)
),

url('../img/hero/banner.jpg');


background-size:cover;

background-position:center;

position:relative;

}



.hero-content{

max-width:850px;

color:white;

padding:60px 0;

}



.hero-tag{

display:inline-block;

background:#F9C400;

color:#000;

font-size:13px;

font-weight:700;

padding:8px 18px;

border-radius:30px;

margin-bottom:20px;

}



.hero h1{

font-size:56px;

line-height:1.1;

font-weight:800;

margin-bottom:20px;

}



.hero p{

font-size:21px;

max-width:700px;

color:#e8eef5;

}



.hero-search{

display:flex;

background:white;

border-radius:50px;

padding:6px;

margin:35px 0;

max-width:750px;

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

}



.hero-search input{

flex:1;

border:none;

outline:none;

padding:18px 25px;

font-size:16px;

border-radius:50px;

}



.hero-search button{

background:#F9C400;

border:none;

padding:0 35px;

border-radius:50px;

font-weight:700;

}



.btn-main{

display:inline-block;

background:#F9C400;

color:#000;

padding:15px 40px;

border-radius:50px;

font-weight:700;

text-decoration:none;

transition:.3s;

}







/* ESTADISTICAS */


.hero-stats{

display:flex;

gap:50px;

margin-top:45px;

}



.hero-stats div{

display:flex;

flex-direction:column;

}



.hero-stats strong{

font-size:32px;

color:#F9C400;

}



.hero-stats span{

font-size:14px;

color:white;

}



.btn-main{

display:inline-block;
background:var(--amarillo);
color:#000;
padding:14px 35px;
border-radius:30px;
font-weight:bold;
text-decoration:none;

}



/* MARCAS */

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


.section-header{

text-align:center;

max-width:800px;

margin:auto;

margin-bottom:45px;

}



.section-header span{

color:#F9C400;

font-weight:800;

font-size:14px;

}



.section-header h2{

font-size:36px;

margin-top:10px;

}



.section-header p{

color:#666;

font-size:18px;

}





.marca-card{


height:100%;

background:white;

border-radius:20px;

padding:35px 25px;

text-align:center;

box-shadow:0 10px 35px rgba(0,0,0,.08);

border:1px solid #eee;

transition:.35s;


}



.marca-card:hover{


transform:translateY(-12px);

border-color:#F9C400;

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


}



.marca-logo{


height:110px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:20px;


}



.marca-logo img{


max-width:170px;

max-height:90px;

object-fit:contain;


}



.marca-card h3{


color:#003C69;

font-size:24px;

font-weight:800;


}



.marca-card p{


font-size:14px;

color:#666;

min-height:60px;


}



.btn-marca{


display:inline-flex;

align-items:center;

gap:10px;

background:#003C69;

color:white;

padding:12px 25px;

border-radius:30px;

text-decoration:none;

font-weight:600;

transition:.3s;


}



.btn-marca:hover{


background:#F9C400;

color:#000;


}

/* BOTÓN AMARILLO IMEX (acciones principales) */
.btn-imex{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
background:var(--amarillo);
color:#000;
font-weight:700;
padding:12px 30px;
border-radius:30px;
border:none;
text-decoration:none;
transition:.25s;
}

.btn-imex:hover{
background:#003C69;
color:#fff;
}

.btn-imex.btn-lg{
padding:16px 40px;
font-size:1.05rem;
}

/* Botón secundario con más presencia */
.btn-outline-secondary{
border-width:2px;
font-weight:600;
padding:10px 22px;
border-radius:30px;
}

.btn-outline-secondary:hover{
background:#003C69;
border-color:#003C69;
}



/* ===========================
   CATEGORIAS
=========================== */


.categorias{

background:#F5F7FA;

}



.categoria-card{


background:white;

height:100%;

padding:35px 25px;

border-radius:20px;

text-align:center;

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

transition:.35s;

border-bottom:4px solid transparent;


}



.categoria-card:hover{


transform:translateY(-10px);

border-bottom-color:#F9C400;

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


}



.categoria-icon{


width:80px;

height:80px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#003C69;

color:white;

font-size:32px;

margin-bottom:20px;


}



.categoria-card h3{


font-size:22px;

font-weight:800;

color:#003C69;


}



.categoria-card p{


color:#666;

font-size:14px;

min-height:45px;


}



.categoria-card a{


display:inline-flex;

gap:8px;

align-items:center;

color:#003C69;

font-weight:700;

text-decoration:none;


}



.categoria-card a:hover{


color:#F9C400;


}



/* ===========================
   PRODUCTOS
=========================== */


.productos{

background:white;

}



.product-card{

height:100%;

background:white;

border-radius:20px;

overflow:hidden;

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

transition:.35s;

display:flex;

flex-direction:column;

border:1px solid #eee;

}



.product-card:hover{


transform:translateY(-10px);

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


}



/* IMAGEN */

.product-image{

height:230px;

display:flex;

align-items:center;

justify-content:center;

position:relative;

background:#fafafa;

overflow:hidden;

}



.product-image img{

max-width:85%;

max-height:180px;

object-fit:contain;

transition:transform .35s ease;

}


.product-image:hover img{

transform:scale(1.18);

}


.link-card-imagen,
.link-card-titulo{

display:block;
text-decoration:none;
color:inherit;
cursor:pointer;

}


.link-card-imagen{

width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;

}


.link-card-titulo:hover h3{

color:#003C69;

}



.favorite{


position:absolute;

right:15px;

top:15px;

width:40px;

height:40px;

border-radius:50%;

border:none;

background:white;

box-shadow:0 3px 10px #0002;

z-index:2;


}



.favorite:hover{

color:#F9C400;

}




.product-info{

padding:22px;

display:flex;

flex-direction:column;

flex:1;

}



.product-brand{


color:#003C69;

font-weight:800;

font-size:14px;


}



.product-info h3{

font-size:19px;
font-weight:800;
margin:10px 0;

min-height:48px;

display:-webkit-box;
display:box;

-webkit-line-clamp:2;
line-clamp:2;

-webkit-box-orient:vertical;

overflow:hidden;

}



.part-number{


font-size:13px;

color:#666;


}



.product-info p{

font-size:14px;
color:#777;

min-height:63px;

display:-webkit-box;
display:box;

-webkit-line-clamp:3;
line-clamp:3;

-webkit-box-orient:vertical;

overflow:hidden;

}


.stock{


color:#198754;

font-size:14px;

margin:15px 0;


}



.product-bottom{

display:flex;

align-items:center;

justify-content:space-between;

margin-top:auto;

padding-top:20px;

}


.product-bottom strong{


font-size:18px;

color:#003C69;


}



.product-bottom a{


background:#F9C400;

color:#000;

padding:10px 18px;

border-radius:25px;

text-decoration:none;

font-weight:700;

transition:.25s;


}


.product-bottom a:hover{

background:#003C69;

color:#fff;

}
/* ===========================
   FOOTER
=========================== */


.footer{


background:#001B2E;

color:white;

padding:60px 0 20px;


}



.footer h3{


color:#F9C400;

font-weight:800;


}



.footer h4{


margin-bottom:20px;

font-weight:700;


}



.footer a{


display:block;

color:#cbd5df;

text-decoration:none;

margin-bottom:10px;


}



.footer a:hover{


color:#F9C400;


}



.footer p{


color:#cbd5df;


}



.social{


display:flex;

gap:15px;


}



.social a{


font-size:25px;


}



.copy{


text-align:center;

margin-top:20px;

font-size:14px;


}

/* ===========================
   SOLUCIONES
=========================== */


.soluciones{

background:#F5F7FA;

}



.solucion-card{


background:white;

height:100%;

padding:35px 25px;

border-radius:20px;

text-align:center;

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

transition:.35s;


}



.solucion-card:hover{


transform:translateY(-10px);

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


}



.solucion-icon{


width:85px;

height:85px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#003C69;

color:white;

font-size:35px;

margin-bottom:25px;


}



.solucion-card h3{


font-size:22px;

font-weight:800;

color:#003C69;


}



.solucion-card p{


color:#666;

font-size:15px;

min-height:70px;


}



.solucion-card a{


text-decoration:none;

color:#003C69;

font-weight:700;

display:inline-flex;

gap:8px;

align-items:center;


}



.solucion-card a:hover{


color:#F9C400;


}

/* ===========================
   CONFIANZA
=========================== */


.confianza{


background:

linear-gradient(
90deg,
#003C69,
#00284A
);

color:white;


}



.confianza-item{


text-align:center;

padding:25px;


}



.confianza-item i{


font-size:40px;

color:#F9C400;

margin-bottom:15px;


}



.confianza-item h3{


font-size:35px;

font-weight:800;

margin:0;


}



.confianza-item p{


margin-top:10px;

color:#e5edf5;


}

.descripcion-producto{

height:65px;

display:-webkit-box;



-webkit-box-orient:vertical;

overflow:hidden;

}


@media (min-width:1400px){

    .col-xxl-2-4{
        width:20%;
        flex:0 0 auto;
    }

}