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

body{
  font-family: 'Poppins', sans-serif;
  background:
  radial-gradient(circle at top right,
  rgba(139,92,246,.12),
  transparent 35%),
  #0f0f0f;

  color:white;
}

header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 8%;
  background: #111;
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.05);
}

header h1{
  font-size: 1.8rem;
  color: #8b5cf6;
  white-space: nowrap;
}

nav{
  display: flex;
  gap: 25px;
}

nav a{
  text-decoration: none;
  color: white;
  transition: 0.3s;
}

nav a:hover{
  color: #8b5cf6;
}

.hero{

  position: relative;

  height: 90vh;

  background:
  linear-gradient(rgba(0,0,0,0.6),
  rgba(0,0,0,0.6)),
  url('hero.jpg');

  background-size: cover;

  background-position: center;

  display: flex;

  align-items: center;

  padding: 0 8%;
}

.hero-text{

  max-width: 500px;
}

.hero-text span{

  color: #8b5cf6;

  letter-spacing: 3px;

  font-size: 0.9rem;
}

.hero-text h2{
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  margin-bottom: 20px;
}

.hero-text p{
  font-size: 1.1rem;
  color: #ccc;
  margin-bottom: 30px;
}

.btn{
  display: inline-block;
  padding: 14px 35px;
  background: linear-gradient(45deg,#8b5cf6,#6d28d9);
  color: white;
  text-decoration: none;
  border-radius: 10px;
  transition: 0.3s;
}

.btn:hover{

  background: #7347d6;

  transform: scale(1.05);
}

.productos{
  padding: 100px 8%;
}

.productos h2{
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 60px;
}

.cards{
  display: grid;
  grid-template-columns:
  repeat(auto-fit, minmax(250px,1fr));

  gap: 30px;
}

.card{
  position:relative;
  
  background:#161616;

  border-radius:20px;

  border:1px solid rgba(139,92,246,.15);

  overflow:hidden;

  transition:.35s;

  box-shadow:0 0 20px rgba(0,0,0,.3);
  
  backdrop-filter: blur(10px);
}

.card:hover{

  transform:translateY(-12px);

  border-color:rgba(139,92,246,.5);

  box-shadow:
  0 15px 40px rgba(0,0,0,.4),
  0 0 25px rgba(139,92,246,.25);
}

.card:hover img{

  transform: scale(1.05);
}

.card img{

  width: 100%;

  height: 320px;

  object-fit: cover;

  transition: 0.4s;
}

.card h3{
  padding: 20px 20px 10px;
}

.card p{
  padding: 0 20px;
  color: #aaa;
}

.card button{
  margin: 20px;
  padding: 12px 25px;
  border: none;
  background: linear-gradient(45deg,#8b5cf6,#6d28d9);
  color: white;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s;
}

.card button:hover{

  background: #7347d6;

  transform: scale(1.05);
}

.beneficios{
  padding: 100px 8%;
  display: grid;
  grid-template-columns:
  repeat(auto-fit, minmax(250px,1fr));

  gap: 25px;
}

.beneficio{
  background: #1a1a1a;
  padding: 40px;
  border-radius: 20px;
  text-align: center;
}

.galeria{
  padding: 100px 8%;
}

.galeria h2{
  text-align: center;
  margin-bottom: 50px;
  font-size: 2.5rem;
}

.galeria-grid{
  display: grid;
  grid-template-columns:
  repeat(auto-fit, minmax(250px,1fr));

  gap: 20px;
}

.galeria-grid img{
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 20px;
}

footer{
  background: #111;
  padding: 50px 8%;
  text-align: center;
}

footer h2{
  margin-bottom: 15px;
  color: #8b5cf6;
}

footer p{
  color: #aaa;
  margin-bottom: 20px;
}

footer a{
  color: white;
  text-decoration: none;
}

@media(max-width:768px){

  header{
    flex-direction: column;
    gap: 20px;
  }

  .hero-text h2{
    font-size: 2.5rem;
  }

}
.mini-text{

  margin-top: 20px;

  color: #aaa;

  font-size: 0.9rem;
}
.menu-toggle{

  display: none;

  font-size: 2rem;

  cursor: pointer;

  color: white;

}

@media(max-width:768px){

  header{
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .hero-text h2{
    font-size: 2.5rem;
  }

  .menu-toggle{
    display:block;
  }

  nav{
    position:absolute;
    top:80px;
    left:0;
    width:100%;
    background:#111;
    flex-direction:column;
    align-items:center;
    padding:20px 0;
    display:none;
  }

  nav.active{
    display:flex;
  }

}
  .whatsapp{

  position: fixed;

  bottom: 20px;

  right: 20px;

  width: 60px;

  height: 60px;

  border-radius: 50%;

  background: #25D366;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 1.8rem;

  text-decoration: none;

  color: white;

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

  transition: 0.3s;

}

.whatsapp:hover{

  transform: scale(1.1);

}
.testimonios{

  padding: 100px 8%;

}

.testimonios h2{

  text-align: center;

  margin-bottom: 50px;

  font-size: 2.5rem;

}

.testimonios-grid{

  display: grid;

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

  gap: 25px;

}

.testimonio{

  background: #1a1a1a;

  padding: 30px;

  border-radius: 20px;

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

}

.testimonio p{

  color: #ccc;

  margin-bottom: 15px;

}

.testimonio h4{

  color: #8b5cf6;

}

.hidden{

  opacity: 1;

  transform: translateY(0);

  transition: all 0.8s ease;

}

.show{

  opacity: 1;

  transform: translateY(0);

}

.filtros{

display:flex;

justify-content:center;

gap:10px;

flex-wrap:wrap;

margin:30px 0;

}

.filtro-btn{

padding:10px 20px;

border:none;

border-radius:30px;

cursor:pointer;

font-weight:600;

}

.filtro-btn.active{

transform:scale(1.05);

}

.modal{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

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

justify-content:center;

align-items:center;

z-index:9999;

}

.modal-content{

background:#111;

padding:30px;

border-radius:20px;

max-width:400px;

width:90%;

text-align:center;

}

.close-modal{

font-size:30px;

cursor:pointer;

float:right;

}

.cerrar-carrito{
  cursor:pointer;
  font-size:28px;
  color:white;
}

.descripcion{

color:#bbb;

font-size:0.9rem;

padding:0 20px;

margin-top:10px;

line-height:1.5;

}
.talles{

padding:100px 8%;

text-align:center;

}

.talles h2{

font-size:2.5rem;

margin-bottom:40px;

}

.talles table{

width:100%;

max-width:700px;

margin:auto;

border-collapse:collapse;

background:#1a1a1a;

border-radius:20px;

overflow:hidden;

}

.talles th,
.talles td{
padding:15px;

border:1px solid #333;

}

.talles th{

background:#8b5cf6;

color:white;

}
.envios{
padding:100px 8%;
text-align:center;
}

.envios h2{
font-size:2.5rem;
margin-bottom:50px;
}

.envios-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
}

.envio-box{
background:#1a1a1a;
padding:30px;
border-radius:20px;
}

.envios-top{

background:#8b5cf6;

text-align:center;

padding:12px;

font-weight:600;

font-size:0.95rem;

}
.creditos{

margin-top:30px;

font-size:0.9rem;

color:#777;

}
.destacados{

padding:100px 8%;

}

.destacados h2{

text-align:center;

font-size:2.5rem;

margin-bottom:50px;
}

.faq{
padding:100px 8%;
}

.faq h2{
text-align:center;
font-size:2.5rem;
margin-bottom:50px;
}

.faq-item{
background:#1a1a1a;
padding:25px;
border-radius:20px;
margin-bottom:20px;
}

.faq-item h3{
margin-bottom:10px;
color:#8b5cf6;
}

.faq-item p{
color:#bbb;
line-height:1.6;
}
.stats{
display:flex;
justify-content:center;
gap:40px;
padding:60px 20px;
flex-wrap:wrap;
text-align:center;
}

.stat h3{
font-size:2rem;
color:#8b5cf6;
margin-bottom:10px;
}

.stat p{
color:#aaa;
}

html{
  scroll-behavior:smooth;
}

.hero{
  overflow:hidden;
}

.hero::before{

  content:"";

  position:absolute;

  width:500px;

  height:500px;

  background:rgba(139,92,246,.15);

  filter:blur(120px);

  top:-150px;

  right:-100px;

}

.stat{

  min-width:180px;

  padding:20px;

  background:#161616;

  border-radius:20px;

  border:1px solid rgba(139,92,246,.1);

  transition:.3s;
}

.stat:hover{

  transform:translateY(-5px);
}

.faq-item{

  transition:.3s;

  border:1px solid transparent;
}

.faq-item:hover{

  border-color:rgba(139,92,246,.3);

  transform:translateY(-3px);
}

footer{

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

footer a{

  color:#8b5cf6;

  font-weight:600;
}

footer a:hover{

  opacity:.8;
}

.about{

  padding:100px 8%;

  text-align:center;
}

.about h2{

  font-size:2.5rem;

  margin-bottom:30px;
}

.about p{

  max-width:700px;

  margin:15px auto;

  color:#bbb;

  line-height:1.8;
}

header{
  transition: .3s;
}

.btn{
  box-shadow: 0 10px 25px rgba(139,92,246,.25);
}

.btn:hover{
  box-shadow: 0 15px 35px rgba(139,92,246,.4);
}

.galeria-grid img{
  transition:.4s;
}

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

.beneficio{
  transition:.3s;
}

.beneficio:hover{
  transform:translateY(-8px);
  box-shadow:0 0 25px rgba(139,92,246,.25);
}

.envio-box{
  transition:.3s;
}

.envio-box:hover{
  transform:translateY(-8px);
  box-shadow:0 0 25px rgba(139,92,246,.2);
}

.testimonio{
  transition:.3s;
}

.testimonio:hover{
  transform:translateY(-8px);
}

.about{
  background:#131313;
}

html{
  scroll-padding-top:100px;
}

.carrito{
  max-width: 700px;
  margin: 80px auto;
  padding: 35px;
  background: #111;
  border-radius: 25px;
  text-align: center;

  border: 1px solid rgba(139,92,246,.2);

  box-shadow:
  0 0 30px rgba(0,0,0,.4),
  0 0 20px rgba(139,92,246,.15);
}

.carrito h2{
  font-size: 2rem;
  margin-bottom: 20px;
}

.carrito p{
  margin: 10px 0;
  font-size: 1.1rem;
}

#lista-carrito{
  list-style: none;
  padding: 0;
  margin: 25px 0;
}

#lista-carrito button{
  background:none;
  border:none;
  color:#ff4d4d;
  font-size:1.1rem;
  cursor:pointer;
  margin-left:10px;
}

#lista-carrito li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background: #1a1a1a;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 12px;
  border-left: 4px solid #8b5cf6;
}

#vaciar,
#comprar{
  display:block;
  margin:15px auto;
  width:100%;
  max-width:300px;
}

#total{
  color:#8b5cf6;
  font-weight:700;
  font-size:1.4rem;
}

.buscador{

width:100%;

max-width:500px;

display:block;

margin:0 auto 30px;

padding:15px 20px;

border:none;

border-radius:15px;

background:#1a1a1a;

color:white;

font-size:1rem;

outline:none;

border:1px solid rgba(139,92,246,.2);

}

.buscador:focus{

border-color:#8b5cf6;

box-shadow:0 0 15px rgba(139,92,246,.3);

}

.whatsapp{
  bottom: 100px;
}

.carrito-icono{
  background:#8b5cf6;
  color:white;
  padding:8px 15px;
  border-radius:20px;
  font-weight:600;
  cursor:pointer;

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

  transition:.3s;
}

.carrito-icono:hover{
  transform:scale(1.05);
  
}

.cart-icon{

  width:60px;

  height:60px;

  border-radius:20px;

  background:#8b5cf6;

  display:flex;

  justify-content:center;

  align-items:center;

  flex-direction:column;

  font-weight:bold;

  box-shadow:
  0 0 25px rgba(139,92,246,.5);

}

.oferta{
  background:#8b5cf6;
  color:white;
  text-align:center;
  padding:12px;
  font-weight:700;
}

.badge{
  position:absolute;
  top:15px;
  left:15px;
  background:#8b5cf6;
  color:white;
  padding:8px 12px;
  border-radius:20px;
  font-size:.8rem;
  font-weight:700;
  z-index:10;
}

.card h3{
  font-size:1.3rem;
}

.buy-btn{
  width:calc(100% - 40px);
}

.info-btn{
  background:#222 !important;
}

.card p:first-of-type{
  color:#8b5cf6;
  font-size:1.3rem;
  font-weight:700;
}

.carrito-panel{

position:fixed;

top:0;

right:-400px;

width:350px;

max-width:90%;

height:100%;

background:#111;

padding:25px;

z-index:9999;

transition:.4s;

overflow-y:auto;

border-left:1px solid rgba(139,92,246,.3);

animation:aparecer .3s ease;

}

.carrito-panel.active{

right:0;

}

.carrito-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}

.cerrar-carrito{

font-size:1.8rem;

cursor:pointer;

color:white;

transition:.3s;

}

.cerrar-carrito:hover{
  color:#8b5cf6;
}

.carrito-panel #lista-carrito li{

margin-bottom:10px;

}