:root{
  --bg: #0a0d14;
  --surface: #0f141f;
  --surface2:#0c111b;

  --text: #eef1f6;
  --muted:#b7bfcd;

 
  --brand: #c9b27a;   
  --brand2:#9fb3d1;   
  --line: rgba(255,255,255,0.08);
  --shadow: 0 16px 40px rgba(0,0,0,.55);
}
body{
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: radial-gradient(circle at top, #111827, var(--bg));
  margin: 0;
  line-height: 1.6;
}

/* HEADER */
header{
  display:flex;
  justify-content:center;
  padding:20px;
  background:linear-gradient(135deg,#0f1522,#0b1020);
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.logo{
  display:flex;
  align-items:center;
  gap:20px;
}

.logo img{
  width:140px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
}

.nombre-empresa{
  color:#c9b27a;
  font-size:28px;
  letter-spacing:2px;
}


/* NAV */
nav{
 
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap: 10px;
  padding: 10px 10px;
 
}

nav a{
  color:white;
  text-decoration:none;
  padding: 12px 18px;
  display:block;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}

nav a:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(201,178,122,0.18);
  transform: translateY(-4px);
}


.hero{
  padding: 54px 16px 42px;
  text-align: center;
  background: radial-gradient(circle at center, rgba(159,179,209,.10), transparent 62%);

}

.hero h2{
  font-size: 2.15rem;
  font-weight: 900;
  color:  #c9b27a;
 
}

.hero-text{
  max-width: 900px;
  margin: 14px auto 0;
  font-size: 1.05rem;
}


.catalogo{
  max-width: 1150px;
  margin: 0 auto;
  padding: 26px 16px 56px;
}


.seccion-catalogo{
  margin-top: 22px;
}


.seccion-titulo{
  background-color: #111827;
  border: 0.1px solid ;
  border-radius: 20px;
  padding: 18px 18px;

}

.seccion-titulo h2{
  text-transform: uppercase;
  font-size: 1.05rem;
  font-weight: 900;
  color: #c9b27a;
}

.seccion-titulo p{
  margin-top: 6px;
}

.grid-productos{
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));/*eeeeeeeeeeeeeeeeeeeeeeeeeeeeee*/
  gap: 18px;
}


.card{
  
  border-radius: 20px;
  background-color:#111827;
 
}

.card:hover{
  border-color: rgba(201,178,122,0.18);
  
}


.card img{
  width: 100%;
  height: 250px;
  background-size: cover;
  background: rgba(0,0,0,0.18);
  border-top-left-radius:  15px;
  border-top-right-radius: 15px;
}


.card-body{
  padding: 14px 14px 16px;
}

.card-body h3{
  font-size: 1rem;
  font-weight: 900;

}

.precio{
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.precio-actual{
  font-size: 1.2rem;
  font-weight: 900;
 
}

.precio-antes{

  color: rgba(183,191,205,0.85);
  text-decoration: line-through;
}


.extra{
  margin-top: 8px;
  font-size: .95rem;
}

.btn-comprar{
  margin-top: 12px;
  width: 100%;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: #eef1f6 ;
  font-weight: 900;
  
}

.btn-comprar:hover{
  transform: translateY(-2px);
  background-color: #9fb3d1;
  border-color: whitesmoke;
}

footer{
  background: var(--surface2);
  color:#9fb3d1;
  text-align:center;
  padding:15px;

}

footer a{
 color:#c9b27a;
  text-decoration:none;
  font-weight: 800;
}

footer a:hover{
  text-decoration: underline;
}

footer p{
  padding:5px;
  margin:0;
}


/* ================= RESPONSIVE ================= */
@media (max-width: 980px){
  .grid-productos{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px){
  .logo h1{ font-size: 1.25rem; }
  .hero h2{ font-size: 1.55rem; }
  .card img{ height: 180px; }
}

@media (max-width: 520px){
  nav{ flex-direction: column; }
  nav a{ text-align: center; }
  .hero{ padding: 42px 14px 34px; }
  .grid-productos{
    grid-template-columns: 1fr;
  }
}