*{
margin:0;
padding:0;
box-sizing:border-box;
}

/* ---------------- RESET SUAVE ---------------- */
*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
}

/* ---------------- GENERAL ---------------- */
body{
font-family:'Poppins',sans-serif;
color:#333;
line-height:1.6;
animation:fadeIn 0.6s ease;
margin:0;
padding:0;
overflow-x:hidden;

/* FONDO */
background: url("images/fondo.png") no-repeat center center fixed;
background-size: cover;
}

@keyframes fadeIn{
from{opacity:0;}
to{opacity:1;}
}

/* CAPA SUAVE */
body::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(255,255,255,0.75);
z-index:-1;
}

/* ---------------- PARTICULAS ---------------- */
#particles{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-2;
pointer-events:none;
}

.particle{
position:absolute;
width:6px;
height:6px;
background:#9c27b0;
border-radius:50%;
opacity:0.3;
animation:flotar linear infinite;
}

@keyframes flotar{
from{transform:translateY(100vh);}
to{transform:translateY(-10vh);}
}

/* ---------------- HEADER ---------------- */
.new-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 40px;
background:rgba(255,255,255,0.95);
backdrop-filter:blur(6px);
box-shadow:0 2px 10px rgba(0,0,0,0.08);
position:sticky;
top:0;
z-index:1000;
margin:0;
}

.logo img{
height:50px;
}

/* MENU TOGGLE */
.menu-toggle{
display:none;
font-size:28px;
cursor:pointer;
}

/* ---------------- NAV ---------------- */
nav ul{
display:flex;
gap:25px;
list-style:none;
}

nav a{
text-decoration:none;
color:#333;
font-weight:500;
transition:0.3s;
}

nav a:hover{
color:#9c27b0;
}

/* ---------------- BUSCADOR ---------------- */
.search-cart{
display:flex;
gap:10px;
align-items:center;
}

#buscador{
padding:8px 15px;
border-radius:25px;
border:1px solid #ccc;
outline:none;
}

.cart-btn{
background:#111;
color:white;
border:none;
padding:8px 15px;
border-radius:20px;
cursor:pointer;
transition:0.3s;
}

.cart-btn:hover{
transform:scale(1.05);
}

/* ---------------- BANNER CORREGIDO ---------------- */
.banner{
position:relative;
width:100%;
overflow:hidden;
margin:0;
padding:0;
}

.banner img{
width:100%;
display:block;
}

/* CAPA OSCURA SUAVE */
.banner-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.25);
display:flex;
justify-content:center;
align-items:center;
padding:20px;
box-sizing:border-box;
}

/* TEXTO */
.banner-text{
text-align:center;
max-width:90%;
}

/* BOTÓN */
.btn-banner{
display:inline-block;
background:#9c27b0;
color:white;
padding:18px 28px;
border-radius:12px;
text-decoration:none;
font-weight:bold;
font-size:clamp(18px,4vw,42px);
line-height:1.2;
transition:.3s;
}

.btn-banner:hover{
background:#7b1fa2;
transform:scale(1.05);
}


/* 🔥 RESPONSIVE */
@media(max-width:768px){

.banner-overlay{
padding:10px;
}

.btn-banner{
font-size:20px;
padding:14px 18px;
max-width:95%;
white-space:normal;
}
}

/* ---------------- HERO ---------------- */
.hero-pro{
text-align:center;
padding:80px 20px;
position:relative;
}

.hero-pro h1{
font-size:3rem;
color:#9c27b0;
margin-bottom:10px;
}

.hero-pro h2{
font-size:1.5rem;
margin-bottom:20px;
}

.hero-box{
background:#e0e0e0;
padding:20px;
border-radius:15px;
max-width:600px;
margin:0 auto 40px;
}

.hero-galeria{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:20px;
}

.hero-galeria img{
width:200px;
height:260px;
object-fit:cover;
border-radius:15px;
transition:0.3s;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
cursor:pointer;
display:block;
}

.hero-galeria img:hover{
transform:scale(1.05);
display:block;
}

/* ---------------- CATEGORÍAS ---------------- */
.categorias{
padding:60px 40px;
text-align:center;
}

.categoria-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
margin-top:30px;
}

.categoria-card{
background:white;
padding:15px;
border-radius:12px;
text-decoration:none;
color:black;
box-shadow:0 3px 12px rgba(0,0,0,0.08);
transition:0.3s;
}

.categoria-card:hover{
transform:translateY(-6px);
box-shadow:0 10px 20px rgba(0,0,0,0.15);
}

.categoria-card img{
width:100%;
height:220px;
object-fit:contain;
border-radius:10px;
background:#fff;
padding:10px;
}

/* ---------------- GALERÍA ---------------- */
.galeria-extra{
padding:60px 40px;
text-align:center;
}

.galeria-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
margin-top:30px;
}

.galeria-grid img{
width:100%;
height:250px;
object-fit:contain;
border-radius:12px;
transition:0.3s;
cursor:pointer;
background:#fff;
padding:10px;
}

.galeria-grid img:hover{
transform:scale(1.05);
}

/* ---------------- FOOTER ---------------- */
footer{
background:#1e1e1e;
color:white;
text-align:center;
padding:25px;
margin-top:40px;
}

/* ---------------- WHATSAPP ---------------- */
.whatsapp{
position:fixed;
bottom:20px;
right:20px;
background:#25D366;
color:white;
font-size:22px;
padding:15px;
border-radius:50%;
box-shadow:0 8px 15px rgba(0,0,0,0.3);
animation:float 2s infinite;
}

@keyframes float{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-5px);}
}

/* ---------------- CARRITO ---------------- */
#carrito-lateral{
position:fixed;
top:0;
right:-400px;
width:340px;
height:100%;
background:#fff;
box-shadow:-8px 0 25px rgba(0,0,0,0.15);
padding:20px;
transition:0.4s ease;
z-index:9999;
overflow-y:auto;
}

.item-carrito{
display:flex;
gap:10px;
margin-bottom:15px;
}

.item-carrito img{
width:60px;
height:60px;
object-fit:cover;
border-radius:8px;
}

.btn-checkout{
width:100%;
padding:12px;
background:black;
color:white;
border:none;
margin-top:10px;
border-radius:6px;
}

.btn-vaciar{
width:100%;
padding:10px;
background:#ff4d4d;
color:white;
border:none;
border-radius:6px;
}

/* ---------------- ANIMACIÓN SCROLL ---------------- */
.reveal{
opacity:0;
transform:translateY(40px);
transition:0.6s;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:768px){

.new-header{
display:grid;
grid-template-columns:50px 1fr;
grid-template-areas:
"menu logo"
"search search";
align-items:center;
padding:12px 15px;
gap:12px;
}

header,
.new-header{
margin-top:0;
padding-top:0;
}

.menu-toggle{
display:block;
grid-area:menu;
position:static;
font-size:32px;
justify-self:start;
}

nav{
display:none;
width:100%;
}

nav.activo{
display:block;
}

nav ul{
flex-direction:column;
gap:10px;
padding:10px 0;
}

.search-cart{
grid-area:search;
width:100%;
margin-top:0;
display:flex;
align-items:center;
gap:10px;
}

#buscador{
flex:1;
height:45px;
font-size:15px;
}

.banner img{
height:220px;
}

.hero-pro h1{
font-size:22px;
}

.hero-pro h2{
font-size:14px;
}

.hero-galeria{
display:grid;
grid-template-columns:1fr 1fr;
}

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

.galeria-grid{
grid-template-columns:1fr 1fr;
}
}
/* =========================
   CONSERVAR BANNER
   PERO QUE AL ENTRAR YA SE VEAN PRODUCTOS
   PEGA ESTO AL FINAL DE TU CSS
   ========================= */

/* REDUCE ALTURA DEL BANNER */
.banner{
width:100%;
overflow:hidden;
}

.banner img{
width:100%;
height:auto;
display:block;
object-fit:contain;
}

/* QUITA ESPACIOS EXTRA */
.banner-overlay{
padding:10px !important;
}

/* HACE VISIBLE TODO SIN ESPERAR SCROLL */
.reveal{
opacity:1 !important;
transform:none !important;
transition:none !important;
}

/* SUBE HERO Y PRODUCTOS */
.hero-pro{
padding:40px 20px !important;
margin-top:0 !important;
}

.categorias{
padding:40px 20px !important;
}

.galeria-extra{
padding:40px 20px !important;
}


/* RESPONSIVE */
@media(max-width:768px){

.banner{
height:28vh !important;
min-height:220px;
}


.hero-pro{
padding:25px 15px !important;
}
}
/* =========================
   BARRA SUPERIOR BENEFICIOS
========================= */

.top-benefits{
width:100%;
background:#eef1f5;
display:flex;
justify-content:space-around;
align-items:center;
padding:14px 25px;
border-bottom:1px solid #dcdcdc;
flex-wrap:wrap;
gap:10px;
position:sticky;
top:0;
z-index:2000;
}
.top-benefits{
margin:0;
padding:10px 0;
}

/* ITEMS */
.benefit-item{
display:flex;
align-items:center;
gap:12px;
font-size:15px;
font-weight:500;
color:#333;
position:relative;
padding:0 25px;
}

/* ICONOS */
.benefit-item i{
color:#9c27b0;
font-size:20px;
}

/* LINEAS */
.benefit-item:not(:last-child)::after{
content:"";
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
width:1px;
height:35px;
background:#d7d7d7;
}

/* RESPONSIVE */
@media(max-width:900px){

.top-benefits{
justify-content:center;
padding:12px;
}

.benefit-item{
width:45%;
justify-content:center;
padding:10px;
}

.benefit-item::after{
display:none;
}

}

@media(max-width:500px){

.benefit-item{
width:100%;
font-size:14px;
justify-content:flex-start;
}

}

/* ===================================
   MÓVIL
=================================== */
@media (max-width:768px){

  /* BENEFICIOS MÁS COMPACTOS */
  .top-benefits{
    padding:10px 15px;
  }

  .benefit-item{
    font-size:14px;
    margin:10px 0;
  }

  .benefit-item i{
    font-size:18px;
    width:22px;
  }

  /* HEADER */
  .new-header{
    display:flex;
    flex-direction:column;
    padding:15px;
    gap:15px;
  }

  /* FILA SUPERIOR */
  .logo{
grid-area:logo;
text-align:center;
}

.logo img{
width:120px;
height:auto;
}

  /* MENÚ HAMBURGUESA */
  .menu-toggle{
    position:absolute;
    left:20px;
    top:20px;
    font-size:32px;
  }

  /* BUSCADOR + CARRITO */
  .search-cart{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
  }

  .search-cart input{
    flex:1;
    height:45px;
    border-radius:30px;
    font-size:15px;
  }

  .cart-btn{
    min-width:70px;
    height:45px;
    border-radius:25px;
    font-size:16px;
  }

  /* BANNER */
  .banner{
    margin:0;
    width:100%;
  }

  .banner img{
    width:100%;
    height:auto;
  }

  /* BOTÓN DEL BANNER */
  .btn-banner{
    padding:15px 20px;
    font-size:22px;
    line-height:1.2;
  }

  /* OCULTAR BENEFICIOS EN CELULAR */
@media (max-width:768px){

  .top-benefits{
    display:none !important;
  }

}

}