/* === Global === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background: radial-gradient(circle at center, #111 0%, #1a1a1a 100%);
  color: #fff;
  overflow-x: hidden;
}

/* === Header === */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(12px);
  z-index: 100;
}

/* Línea verde animada debajo del header */
header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #00ff80, #ffffff, #00ff80, #0f0);
  background-size: 400% 100%;
  animation: moverLineaVerde 5s linear infinite;
  box-shadow: 0 0 12px rgba(0, 255, 80, 0.7);
}

@keyframes moverLineaVerde {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Logo */
.logo { text-align: right; color: #ff4d4d; cursor: pointer; }
.logo h1 { font-size: 1.8rem; }
.logo p { font-size: 0.9rem; color: #ccc; }

/* Nav */
.nav-toggle { font-size: 1.8rem; cursor: pointer; color: #fff; }
nav { position: fixed; top:0; left:-100%; width:220px; height:100%; background:rgba(0,0,0,0.95); display:flex; flex-direction:column; align-items:center; justify-content:center; transition:0.3s; z-index:150; }
nav.show { left:0; }
.nav-close { position:absolute; top:15px; right:15px; font-size:1.8rem; cursor:pointer; color:#fff; }
nav ul { list-style:none; width:100%; text-align:center; }
nav ul li { margin:20px 0; }
nav ul li a { color:#fff; text-decoration:none; font-size:1.2rem; padding:10px 20px; display:block; border-radius:25px; transition:0.3s; }
nav ul li a.active,
nav ul li a:hover { background: linear-gradient(120deg, red, black); color:#fff; }

/* Buscador */
.buscador { flex:1; margin:0 20px; text-align:center; }
.buscador input { width:80%; max-width:400px; padding:10px 15px; border-radius:30px; border:2px solid #ff4d4d; font-size:1rem; outline:none; transition:all 0.3s ease; }
.buscador input:focus { border-color:#00ff80; }

/* Presentación y productos */
.presentacion { padding:150px 50px 50px 50px; text-align:center; }
.titulo-seccion { font-size:2rem; color:#00ff80; margin-bottom:30px; text-transform:uppercase; }

/* Productos */
.productos-destacados { display:flex; flex-wrap:wrap; justify-content:center; gap:30px; }

.producto {
  position: relative;
  background: #111;
  width: 250px;
  border-radius: 20px;
  overflow: hidden;
  text-align: center;
  transition: all 0.4s ease;
  box-shadow: 0 0 15px rgba(0,255,0,0.2);
  border: 2px solid transparent;

  display: flex;               
  flex-direction: column;      
  justify-content: flex-start; /* Empieza desde arriba */
  padding: 15px;
}

/* Borde degradado animado */
.producto::before {
  content:"";
  position:absolute;
  top:-2px; left:-2px; right:-2px; bottom:-2px;
  border-radius:22px;
  padding:2px;
  background: linear-gradient(90deg, red, orange, yellow, red);
  background-size:300% 300%;
  z-index:-1;
  opacity:0;
  transition:opacity 0.3s ease;
}
.producto:hover::before { opacity:1; animation: bordeAnimado 3s linear infinite; }

@keyframes bordeAnimado {
  0% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}

.producto:hover { border: 2px solid #ff4d4d; }

.producto img { width:100%; height:180px; object-fit:cover; transition: transform 0.3s ease; }
.producto:hover img { transform: scale(1.05); }

.producto h3 { margin:10px 0; color:#ff2a2a; text-transform:uppercase; }
.producto p { font-size:0.9rem; color:#ccc; margin-bottom:10px; }

/* Botón alineado al fondo */
.btn-comprar { 
  margin-top: auto; /* Siempre al fondo del producto */
  padding:8px 20px; 
  border:none; 
  border-radius:25px; 
  background:linear-gradient(45deg, #ff2a2a, #000); 
  color:#fff; 
  cursor:pointer; 
  transition: all 0.3s ease; 
}
.btn-comprar:hover { background:linear-gradient(45deg, #fff, #ff2a2a); color:#000; transform: scale(1.05); }

/* Icono fuego en h3 */
.emoji-fire { transition: transform 0.3s ease, filter 0.3s ease; }
.producto:hover .emoji-fire { transform: scale(1.3) rotate(-10deg); filter: drop-shadow(0 0 10px #ff2a2a) drop-shadow(0 0 20px #ff4d4d) drop-shadow(0 0 30px #ff8080); }

/* Footer */
footer { text-align:center; padding:20px 0; background: rgba(0,0,0,0.85); color:#fff; margin-top:50px; }