body{
background:#050505;
color:#eee;
font-family: "Poppins", sans-serif;
margin:0;
}
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 20px;
  background:black;
  border-bottom:1px solid gold;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;
  gap: 10px;
  flex-wrap: wrap; 
}


header{
transition:0.3s;
}

header.scrolled{
box-shadow:0 5px 20px rgba(0,0,0,0.5);
background:#000;
}
.header-top{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
flex-wrap: wrap;
}

.menu{
display:flex;
gap:15px;
flex-wrap: nowrap;
}

.logo img{
height:80px;
width:auto;
object-fit:contain;
}
nav a{
white-space: nowrap;
color:gold;
text-decoration:none;
font-weight:bold;
font-size: 15px;
}
nav{
  display: flex;
  gap: 15px;
  flex-wrap: wrap;

}
.hero h1{
color:gold;
font-size:50px;
}

#categorias, #productos{
text-align: center;
padding:40px;
}

#listaCategorias{
display:flex;
gap:20px;
}

.categoria{
background:#111;
padding:20px;
border:1px solid gold;
cursor:pointer;
}

#listaProductos{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

.producto{

background:#0f0f0f;

padding:20px;

border:1px solid rgba(255,215,0,0.2);

border-radius:10px;

text-align:center;

transition:0.3s;

}

.producto:hover{

transform:translateY(-10px);

border:1px solid gold;

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

}

.producto img{

width:100%;

height:220px;

object-fit:contain;

}

.producto h3{

color:gold;

}

.producto button{

background:gold;

padding:10px 20px;

border:none;

cursor:pointer;

margin-top:10px;

}

button{

background:gold;

color:black;

padding:10px 20px;

border:none;

border-radius:5px;

cursor:pointer;

transition:0.3s;

}

button:hover{

background:#ffd700;

transform:scale(1.05);

} 

.logo-animado{
width:120px;
margin-bottom:20px;
animation:logoEntrada 2s ease, brilloLogo 3s infinite;
}

@keyframes logoEntrada{

0%{

transform:scale(0);
opacity:0;

}

100%{

transform:scale(1);
opacity:1;

}

}
.hero{

margin-top:150px; /* 🔥 ESTA ES LA CLAVE */

height:500px;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

background:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.9)),
url("https://images.unsplash.com/photo-1605274280779-4e5a8c5a5f87");

background-size:cover;

}

.hero h1{

color:gold;

font-size:60px;

letter-spacing:3px;

}

.hero p{

font-size:20px;

margin:20px;

}

.botonHero{

background:gold;

padding:15px 30px;

color:black;

text-decoration:none;

font-weight:bold;

border-radius:5px;

}
.whatsapp{
position:fixed;
bottom:25px;
right:25px;
background:#25D366;
color:white;
font-size:30px;
padding:15px;
border-radius:50%;
text-decoration:none;
box-shadow:0 5px 15px rgba(0,0,0,0.3);

}

#buscador{
flex:1;
max-width:270px;
height: auto;
margin:0 auto;
padding:10px 11px;
border-radius:20px;
border:1px solid gold;
background:#111;
color:white;
transition:0.3s;
}

#buscador:focus{
outline:none;
box-shadow:0 0 10px rgba(255,215,0,0.5);
}
/* FONDO OSCURO */

.age-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.85);

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

z-index:9999;
}


/* CUADRO CENTRAL */

.age-box{

background:#0b0b0b;

padding:40px;

border-radius:12px;

text-align:center;

color:white;

width:350px;

box-shadow:0 0 25px rgba(0,0,0,0.8);

border:1px solid #222;

}


/* LOGO */

.age-logo{

width:120px;

margin-bottom:20px;

}


/* BOTONES */

.age-buttons button{

margin:10px;

padding:12px 20px;

border:none;

border-radius:6px;

cursor:pointer;

font-weight:bold;

}


/* BOTON ENTRAR */

.btn-entrar{

background:#c9a227;

color:black;

}


/* BOTON SALIR */

.btn-salir{

background:#444;

color:white;

}



@keyframes brilloLogo{

0%{

filter:drop-shadow(0 0 5px gold);

}

50%{

filter:drop-shadow(0 0 20px gold);

}

100%{

filter:drop-shadow(0 0 5px gold);

}

}
@media (max-width:900px){

#listaProductos{
grid-template-columns:repeat(2,1fr);
}

}

@media (max-width:500px){

#listaProductos{
grid-template-columns:1fr;
}

}
/* CONTENEDOR DE CATEGORIAS */

#listaCategorias{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap:15px;
margin-top:20px;
padding:10px;
}

/* TARJETAS DE CATEGORIA */

.categoria-card{
background:#111;
color:#fff;
padding:15px;
border-radius:12px;
text-align:center;
cursor:pointer;
transition:0.3s;
font-weight:500;
}

/* HOVER EFECTO */

.categoria-card:hover{
background:#ff4d4d;
transform:scale(1.05);
}

/* ICONO */

.categoria-icono{
font-size:30px;
margin-bottom:5px;
display:block;
}
#categorias h2{
text-align:center;
font-size:28px;
margin-top:20px;
}
/* FONDO */
.modal-carrito {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(6px);
  background: rgba(0,0,0,0.4);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

/* MODAL FONDO */
.modal-carrito {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(6px);
  background: rgba(0,0,0,0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

/* CAJA PREMIUM */
.modal-contenido {
  background: rgba(15,15,15,0.95);
  width: 360px;
  border-radius: 20px;
  padding: 25px;
  text-align: center;

  border: 2px solid gold;
  box-shadow: 0 0 25px rgba(255,215,0,0.3);

  color: white;

  animation: aparecer 0.3s ease;
}

/* HEADER */
.modal-header h2 {
  color: gold;
  margin-bottom: 10px;
}

/* ITEMS */
.item-carrito {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,215,0,0.2);
  font-size: 14px;
}

/* SCROLL */
#itemsCarrito {
  max-height: 250px;
  overflow-y: auto;
  text-align: left;
  padding-right: 5px;
}

/* SCROLL BONITO */
#itemsCarrito::-webkit-scrollbar {
  width: 6px;
}

#itemsCarrito::-webkit-scrollbar-thumb {
  background: gold;
  border-radius: 10px;
}

/* TOTAL */
#totalCarrito {
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
  color: gold;
}

/* BOTON WHATSAPP */
.btn-wsp {
  background: linear-gradient(45deg, #FFD700, #FFC300);
  color: #111; /* 🔥 clave: texto oscuro */
  border: none;
  padding: 12px;
  border-radius: 12px;
  margin-top: 10px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 0 10px rgba(255,215,0,0.4);
}
/* BOTONES SECUNDARIOS */
.btn-vaciar {
  background: transparent;
  color: #FFD700;
  border: 1px solid #c4b230;
  padding: 10px;
  border-radius: 10px;
}
.btn-cerrar {
  background: transparent;
  color: #FFD700;
  border: 1px solid #cdae23;
  padding: 10px;
  border-radius: 10px;
  
}

.btn-vaciar:hover,
.btn-cerrar:hover {
  color: rgb(0, 0, 0);
}
/* 📱 ESTILOS PARA CELULAR */
@media (max-width: 768px) {

  /* HEADER */
  header {
    padding: 10px;
  }

  nav a {
    font-size: 14px;
    margin: 0 5px;
  }

  /* BUSCADOR */
  
#buscador{
  width: 220px;
  padding: 8px 12px;
  border-radius: 15px;
  font-size: 14px;
}
  /* LOGO */
  .logo img {
    width: 60px;
  }

  /* HERO */
  .hero h1 {
    font-size: 28px;
  }

  .hero p {
    font-size: 16px;
  }

  .botonHero {
    font-size: 16px;
    padding: 12px 20px;
  }

  /* CATEGORIAS */
  #listaCategorias {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* PRODUCTOS */
  #listaProductos {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .producto {
    padding: 10px;
  }

  .producto h3 {
    font-size: 14px;
  }

  .producto p {
    font-size: 14px;
  }

  .producto button {
    font-size: 14px;
    padding: 8px;
  }
}
.hero h1 {
  font-size: 40px;
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 30px;
  }
}
/* SECCION CONTACTO */
.contacto {
  padding: 30px 15px;
  background: #0d0d0d;
  color: white;
  text-align: center;
}

/* TITULO */
.contacto h2 {
  color: gold;
  margin-bottom: 20px;
  font-size: 26px;
}

/* CONTENEDOR */
.contacto-contenedor {
  display: flex;
  flex-direction: column; /* 🔥 CLAVE PARA CELULAR */
  gap: 15px;
}

/* TARJETAS */
.contacto-item {
  background: #111;
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 15px;
  padding: 15px;
  text-align: center;
}

/* TITULOS */
.contacto-item h3 {
  color: gold;
  margin-bottom: 8px;
  font-size: 16px;
}

/* TEXTO */
.contacto-item p {
  margin: 3px 0;
  font-size: 14px;
}

/* LINK */
.contacto-item a {
  display: inline-block;
  margin-top: 5px;
  color: #25D366;
  text-decoration: none;
  font-weight: bold;
}

/* 📱 TABLET Y PC */
@media (min-width: 600px) {

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

}

@media (min-width: 1024px) {

  .contacto-contenedor {
    grid-template-columns: repeat(4, 1fr);
  }

}
#buscador {
  transition: 0.3s;
}

#buscador:focus {
  border-bottom: 2px solid gold;
  box-shadow: 0 2px 10px rgba(255,215,0,0.3);
}
@media (max-width:768px){
.hero{
margin-top:140px;
}
.header-top{
flex-direction:column;
align-items:center;
}

#buscador{
width:90%;
margin-top:10px;
}

.menu{
justify-content:center;
margin-top:10px;
}
}

.aviso-domicilio {
  background: linear-gradient(45deg, #FFD700, #FFC300);
  color: #111;
  padding: 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: bold;
  margin: 10px 0;
  text-align: center;
  box-shadow: 0 0 10px rgba(255,215,0,0.3);
}
@media (max-width:768px){
  #buscador{
    width: 90%;
  }
}