/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{
background:#f5f6fa;
color:#222;
}

/* CONTENEDOR GENERAL */

.container{
max-width:1200px;
margin:auto;
padding:20px;
}

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

.main-header{
background:#111;
color:white;
}

/* HEADER SUPERIOR */

.header-container{

max-width:1200px;
margin:auto;

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

padding:15px;

}

/* LOGO */

.logo a{
color:#2a7cff;
font-size:26px;
font-weight:bold;
text-decoration:none;
}

/* BUSCADOR */

.search-box{

flex:1;
margin:0 20px;
position:relative;

}

.search-box input{

width:100%;
padding:11px;

border-radius:6px;
border:none;

font-size:14px;

}

/* RESULTADOS BUSQUEDA */

#searchResults{

position:absolute;

top:42px;
left:0;

width:100%;

background:white;

border-radius:6px;

box-shadow:0 5px 20px rgba(0,0,0,0.15);

display:none;

z-index:999;

}

#searchResults a{

display:block;
padding:10px;
text-decoration:none;
color:#333;

}

#searchResults a:hover{
background:#f2f2f2;
}

/* ICONOS */

.header-icons a{

color:white;
font-size:20px;
margin-left:15px;
text-decoration:none;

}

/* ================= MENU ================= */

.main-nav{
background:#1c1c1c;
}

.main-nav ul{

list-style:none;

max-width:1200px;
margin:auto;

display:flex;
align-items:center;

gap:30px;

padding:10px 15px;

}

.main-nav li{
position:relative;
}

.main-nav a{

color:white;
text-decoration:none;
font-size:15px;

padding:10px 5px;

display:block;

}

.main-nav a:hover{
color:#2a7cff;
}

/* ================= MEGA MENU ================= */

.mega-menu{

position:absolute;

top:100%;
left:0;

background:white;

padding:30px;

width:650px;

display:none;

grid-template-columns:repeat(3,1fr);

gap:25px;

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

z-index:999;

}

.mega-parent:hover .mega-menu{
display:grid;
}

.mega-column h4{
margin-bottom:10px;
font-size:16px;
color:#222;
}

.mega-column a{

display:block;
padding:5px 0;
color:#444;

}

.mega-column a:hover{
color:#2a7cff;
}

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

.hero{

background:linear-gradient(120deg,#0f172a,#1e293b);

color:white;

padding:90px 20px;

text-align:center;

}

.hero h1{

font-size:40px;
margin-bottom:15px;

}

.hero p{

font-size:18px;
margin-bottom:20px;

}

/* BOTON */

.btn{

background:#2a7cff;

color:white;

padding:12px 25px;

border-radius:6px;

text-decoration:none;

display:inline-block;

}

.btn:hover{
background:#1c5ed6;
}

/* ================= BENEFICIOS ================= */

.top-benefits{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

max-width:1200px;

margin:30px auto;

}

.benefit-item{

background:white;

padding:20px;

border-radius:8px;

display:flex;

align-items:center;

gap:10px;

box-shadow:0 5px 15px rgba(0,0,0,0.05);

}

.benefit-item strong{
font-size:14px;
}

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

.categorias{

max-width:1200px;

margin:40px auto;

}

.categorias h2{
margin-bottom:20px;
}

.categorias-grid{

display:grid;

grid-template-columns:repeat(6,1fr);

gap:15px;

}

.cat-card{

background:white;

padding:25px;

border-radius:10px;

text-align:center;

box-shadow:0 5px 20px rgba(0,0,0,0.05);

cursor:pointer;

transition:0.2s;

}

.cat-card:hover{

transform:translateY(-4px);

}

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

.productos-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

}

/* CARD PRODUCTO */

.producto-card{

background:white;

border-radius:10px;

overflow:hidden;

box-shadow:0 5px 20px rgba(0,0,0,0.05);

padding:15px;

text-align:center;

}

.producto-card img{

width:100%;

height:180px;

object-fit:contain;

margin-bottom:10px;

}

.producto-card h3{

font-size:15px;

margin-bottom:10px;

}

.precio{

font-size:18px;

font-weight:bold;

color:#2a7cff;

margin-bottom:10px;

}

.producto-card button{

background:#2a7cff;

color:white;

border:none;

padding:10px;

width:100%;

border-radius:6px;

cursor:pointer;

}

.producto-card button:hover{
background:#1d5cd6;
}

/* ================= TIENDA ================= */

.filtros{

background:white;

padding:20px;

border-radius:10px;

margin-bottom:20px;

}

.paginacion{

display:flex;

justify-content:center;

gap:10px;

margin-top:30px;

}

.paginacion a{

padding:8px 14px;

background:white;

border-radius:6px;

text-decoration:none;

color:#333;

}

.paginacion a:hover{
background:#2a7cff;
color:white;
}

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

footer{

background:#111;

color:white;

padding:40px;

margin-top:50px;

}

.footer-grid{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

footer a{

color:#ccc;

text-decoration:none;

display:block;

margin-bottom:8px;

}

footer a:hover{
color:white;
}

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

@media(max-width:1000px){

.productos-grid{
grid-template-columns:repeat(2,1fr);
}

.categorias-grid{
grid-template-columns:repeat(3,1fr);
}

.top-benefits{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:700px){

.header-container{
flex-direction:column;
gap:10px;
}

.main-nav ul{
flex-wrap:wrap;
}

.productos-grid{
grid-template-columns:1fr;
}

.categorias-grid{
grid-template-columns:repeat(2,1fr);
}

}

/* CATEGORIA ESTRELLA */

.categoria-estrella{

padding:70px 40px;

text-align:center;

background:#f7f7f7;

}


.titulo-seccion{

font-size:22px;

letter-spacing:3px;

margin-bottom:30px;

}


.categorias-tabs{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

margin-bottom:40px;

}


.tab{

padding:10px 20px;

border-radius:30px;

border:2px solid #3b5cff;

background:white;

cursor:pointer;

font-size:14px;

}


.tab.active{

background:#3b5cff;

color:white;

}

/* PRODUCTOS DESTACADOS */

.destacados{

padding:60px;

text-align:center;

}

.productos-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:25px;

margin-top:30px;

}

.producto-card{

background:white;

padding:20px;

border-radius:10px;

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

text-align:center;

transition:0.3s;

}

.producto-card:hover{

transform:translateY(-8px);

}

.producto-card img{

width:100%;

max-width:140px;

height:140px;

object-fit:contain;

margin:auto;

display:block;

}