/* =========================================
   RESET GENERAL
========================================= */

body{
  margin:0;
  overflow-x:hidden;
  font-family:'Poppins', Arial, Helvetica, sans-serif;
  background-color:#000;
  color:white;
  text-align:center;
}

/* =========================================
   FONDO PRINCIPAL INDEX
========================================= */

body:not(.producto-page)::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.85)),
    url("img/bar-fondo.jpg");
  background-size:cover;
  background-position:center;
  z-index:-2;
}

/* =========================================
   HERO
========================================= */

.hero{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
}

.overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.7);
}

.hero-content{
  position:relative;
  z-index:2;
}

.logo{
  width:200px;
  filter: drop-shadow(0 0 25px #00f0ff);
}

.sub{
  font-size:20px;
  opacity:0.8;
}

.entrega{
  color:#00ff88;
  font-weight:bold;
  text-shadow:0 0 12px #00ff88;
}

/* =========================================
   PRODUCTOS GRID
========================================= */

.productos{
  padding:80px 20px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:30px;
  max-width:1000px;
  margin:auto;
}

/* =========================================
   CARD PRODUCTO
========================================= */

.card{
  background:linear-gradient(
    145deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.02)
  );
  backdrop-filter:blur(20px);
  border-radius:20px;
  padding:20px;
  transition:0.4s ease;
  border:1px solid rgba(255,255,255,0.1);
}

.card:hover{
  transform:translateY(-10px);
  box-shadow:0 0 40px #ff00ff;
}

.card img{
  width:100%;
  border-radius:10px;
}

/* BOTÓN CARD */

.card button{
  margin-top:15px;
  padding:12px 35px;
  background:linear-gradient(90deg,#ff00ff,#00f0ff);
  color:white;
  border:none;
  border-radius:40px;
  font-weight:bold;
  cursor:pointer;
  transition:0.3s;
  box-shadow:0 0 20px #ff00ff;
}

.card button:hover{
  transform:scale(1.05);
  box-shadow:0 0 35px #00f0ff;
}

/* =========================================
   PRECIO INDEX VERDE NEÓN PRO
========================================= */

.card h4,
.card .precio{
  font-size:22px;
  margin-top:10px;
  color:#39ff14;
  font-weight:bold;
  text-shadow:
    0 0 5px #39ff14,
    0 0 15px #39ff14,
    0 0 25px #39ff14;
}

/* =========================================
   LOGO EFECTO NEÓN
========================================= */

.logo-wrapper{
  position:relative;
  margin-top:60px;
  display:inline-block;
}

.logo-principal{
  width:320px;
  max-width:85%;
  opacity:0;
  animation:
    logoBoot 1.5s ease forwards,
    logoGlow 3s ease-in-out infinite alternate 1.5s;
}

.logo-reflejo{
  width:320px;
  max-width:85%;
  position:absolute;
  top:100%;
  left:0;
  transform:scaleY(-1);
  opacity:0.15;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
  pointer-events:none;
}

@keyframes logoBoot{
  0%{opacity:0; transform:scale(0.8);}
  60%{opacity:1; transform:scale(1.05);}
  100%{opacity:1; transform:scale(1);}
}

@keyframes logoGlow{
  from{filter:drop-shadow(0 0 10px #00f0ff);}
  to{filter:drop-shadow(0 0 40px #00f0ff);}
}

/* =========================================
   PRODUCTO PAGE
========================================= */

body.producto-page{
  margin:0;
  min-height:100vh;
  background:url("img/fondo-producto.jpg") no-repeat center center fixed;
  background-size:cover;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  overflow:hidden;
}

body.producto-page::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
  z-index:0;
}

body.producto-page .producto-container{
  position:relative;
  z-index:2;
  width:90%;
  max-width:420px;
  text-align:center;
}

.producto-img-container{
  height:380px;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:15px;
}

.producto-img-container img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

.producto-info h1{
  font-size:28px;
  color:#00f0ff;
  text-shadow:0 0 15px #00f0ff;
}

.producto-info h2{
  font-size:34px;
  color:#00ffcc;
  text-shadow:0 0 20px #00ffcc;
}

.btn-pedir{
  display:inline-block;
  margin-top:10px;
  padding:14px 45px;
  background:linear-gradient(90deg,#ff00ff,#00f0ff);
  color:white;
  font-weight:bold;
  text-decoration:none;
  border-radius:50px;
  transition:0.3s;
  box-shadow:0 0 25px #ff00ff;
}

.btn-pedir:hover{
  transform:scale(1.05);
  box-shadow:0 0 40px #00f0ff;
}

/* =========================================
   EXPERIENCIA + RESEÑAS
========================================= */

.relax-experiencia,
.relax-reviews{
  padding:120px 20px;
}

.relax-titulo{
  font-size:32px;
  margin-bottom:60px;
  color:#00f0ff;
  text-shadow:0 0 25px #00f0ff;
}

.relax-grid,
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:40px;
  max-width:1000px;
  margin:auto;
}

.relax-card,
.review-card{
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(15px);
  padding:30px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.1);
  transition:0.4s;
}

.relax-card:hover,
.review-card:hover{
  transform:translateY(-10px);
  box-shadow:0 0 30px #00f0ff;
}

.stars{
  font-size:22px;
  color:#ffd700;
}

/* =========================================
   TOP VENTAS
========================================= */

.relax-top{
  padding:100px 20px;
}

.top-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:40px;
  max-width:1000px;
  margin:auto;
}

.top-card{
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(18px);
  border-radius:25px;
  padding:30px;
  border:1px solid rgba(0,255,255,0.3);
  transition:0.5s;
}

.top-card:hover{
  transform:scale(1.05);
  box-shadow:0 0 40px #00f0ff;
}

.top-card img{
  width:100%;
  max-height:200px;
  object-fit:contain;
  margin-bottom:15px;
}

.top-price{
  font-size:22px;
  color:#39ff14;
  font-weight:bold;
  text-shadow:0 0 15px #39ff14;
}

/* =========================================
   BADGE + WHATSAPP FIX
========================================= */

.relax-badge{
  position:fixed;
  bottom:90px; /* subido para no tapar WhatsApp */
  left:20px;
  background:rgba(0,0,0,0.7);
  padding:15px 20px;
  border-radius:20px;
  backdrop-filter:blur(10px);
  box-shadow:0 0 25px #39ff14;
  z-index:50;
}

.whatsapp{
  position:fixed;
  bottom:20px;
  right:20px;
  background:#25D366;
  padding:15px;
  border-radius:50%;
  font-size:22px;
  color:white;
  text-decoration:none;
  box-shadow:0 0 15px #25D366;
  z-index:100;
}