body{
  margin:0;
  font-family:Arial;
  background:#f4f6f9;
}

/* HEADER */
.header{
  background:#bababf;
  color:white;
  padding:12px;
  position:sticky;
  top:0;
  z-index:10;
}

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

.search input{
  flex:1;
  padding:10px;
  border:none;
  border-radius:8px;
}

/* GRID */
.container{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  padding:10px;
}

@media(min-width:768px){
  .container{
    grid-template-columns:repeat(5,1fr);
  }
}

/* CARD MARKETPLACE */
.card{
  background:white;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 3px 12px rgba(0,0,0,.08);
  position:relative;
  transition:.2s;
}

.card:active{
  transform:scale(.97);
}

.card img{
  width:100%;
  height:140px;
  object-fit:cover;
  cursor:pointer;
}

/* FAVORITO */
.fav{
  position:absolute;
  top:6px;
  right:6px;
  background:white;
  border-radius:50%;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:14px;
}

.card-body{
  padding:8px;
}

.title{
  font-size:13px;
  font-weight:bold;
}

.code-label{
  font-size:13px;
  color: #b47a74;
  font-weight: bold;
}

.code-text{
	 font-size:11px;
  color: gray;
}

.desc-label{
  font-size:13px;	
  color: #b47a74;
  font-weight: bold;
}

.desc-text{
  color: gray;
  font-size:12px;
}
.more-link{
  display: inline-block;
  margin-top: 5px;
  color: #2563eb;
  font-weight: 200;
  text-decoration: none;
}

.more-link:hover{
  text-decoration: underline;
}
/* PRICES */
.prices{
  margin-top:6px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:5px;
}

.price{
  background:#f1f5f9;
  padding:5px;
  border-radius:8px;
  font-size:11px;
  text-align:center;
}

.price b{
  display:block;
  font-size:12px;
}

/* LOADING SKELETON */
.skeleton{
  height:180px;
  border-radius:12px;
  background:linear-gradient(90deg,#eee,#ddd,#eee);
  animation:load 1.2s infinite;
}

@keyframes load{
  0%{background-position:-200px}
  100%{background-position:200px}
}

/* LIGHTBOX */
#lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.9);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999;
}

#lightbox img{
  max-width:95%;
  max-height:95%;
  border-radius:10px;
}

/* SCANNER */
#scanner{
  display:none;
  margin-top:10px;
}



.logo img{
  width:70px;
  height:70px;
  border-radius:10px;
}

/* TEXTO BASE */
.brand{
  font-weight:bold;
  font-size:16px;
}

/* FUENTE ELEGANTE ESTILO LUJO / IMPORTADORA */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;800&family=Cormorant+Garamond:wght@400;500;600;700&display=swap');

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

.logo img{
  width:55px;
  height:55px;
  object-fit:cover;
}

.brand{
  display:flex;
  flex-direction:column;
  line-height:1;
}


/* IMPORTACIONES */
.variedades{
  font-family:'Cinzel', serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:4px;
  color:#444;
  margin-bottom:4px;
  text-transform:uppercase;
}

/* LJ / NOMBRE PRINCIPAL */
.gaela{
  font-family:'Cinzel', serif;
  font-size:34px;
  font-weight:800;
  letter-spacing:4px;
  color:#1e1e1e;
  line-height:.9;
  text-transform:uppercase;

  /* efecto elegante */
  background:linear-gradient(180deg,#2b2b2b 0%, #d6a5a5 55%, #8b5e5e 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  text-shadow:
    1px 1px 2px rgba(0,0,0,.15),
    0 0 8px rgba(214,165,165,.25);
}

/* SLOGAN */
.slogan{
  font-family:'Cormorant Garamond', serif;
  font-size:13px;
  font-weight:600;
  color:#b76e79;
  margin-top:5px;
  letter-spacing:1px;
  font-style:italic;
}
/* COLORES */
/*.golden{
  color:#38bdf8; 
}

.store{
  color:#b47a74; /* amarillo */
}*/

/* RESPONSIVE */
@media(max-width:600px){
  .logo img{
    width:70px;
    height:70px;
  }

  .brand{
    font-size:14px;
  }
}
.whatsapp-float{
  position:fixed;
  bottom:20px;
  right:20px;
  background:#25D366;
  color:white;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:50px;
  text-decoration:none;
  z-index:999;
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
  animation:pulse 2s infinite;
}

/* texto */
.whatsapp-text{
  font-size:13px;
  font-weight:bold;
}

/* icono */
.whatsapp-icon{
  font-size:24px;
}

/* animación suave */
@keyframes pulse{
  0%{transform:scale(1);}
  50%{transform:scale(1.05);}
  100%{transform:scale(1);}
}

/* en móvil solo icono */
@media(max-width:600px){
  .whatsapp-text{
    display:none;
  }
}

/* CONTENEDOR */
.slider{
  width:100%;
  overflow:hidden;
  margin-top:10px;
  border-radius:12px;
}

.slides{
  display:flex;
  transition:transform 0.5s ease;
}

/* CADA SLIDE */
.slide{
  min-width:100%;
  position:relative;
}

/* IMÁGENES */
.slide img{
  width:100%;
  display:block;
  border-radius:12px;
  object-fit:cover;
}

/* TEXTO */
.caption{
  position:absolute;
  bottom:15px;
  left:15px;
  background:rgba(0,0,0,0.55);
  color:white;
  padding:8px 14px;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  backdrop-filter: blur(4px);
}

/* =========================================
   MOBILE
========================================= */
.mobile-slide{
  display:block;
}

.desktop-slide{
  display:none;
}

.mobile-slide img{
  height:auto;
  max-height:750px;
  object-fit:contain;
}

/* =========================================
   DESKTOP
========================================= */
@media(min-width:768px){

  .mobile-slide{
    display:none;
  }

  .desktop-slide{
    display:block;
  }

  .desktop-slide img{
    height:auto;
    max-height:910px;
    object-fit:cover;
  }

  .caption{
    font-size:18px;
    padding:10px 18px;
  }
}

/* TÍTULO PRODUCTOS */
.titulo-productos{
  width:100%;
  text-align:center;
  margin:25px 0 15px;
}

.titulo-productos h2{
  font-size:28px;
  font-weight:800;
  color:#bababf;
  margin:0;
  line-height:1.2;
}

/* COLORES MARCA */
.brand{
  display:block;
  margin-top:5px;
  font-size:24px;
  font-weight:900;
}

.golden{
  color:#b47a74;
}

.store{
  color:#b47a74;
}

/* MOBILE */
@media(max-width:768px){

  .titulo-productos h2{
    font-size:22px;
  }

  .brand{
    font-size:20px;
  }
}

/* =========================
   BOTON CARRITO
========================= */
.cart-btn{
  background:#b47a74;
  border:none;
  padding:10px 14px;
  border-radius:10px;
  font-weight:bold;
  cursor:pointer;
}

/* =========================
   PANEL CARRITO
========================= */
#cart-panel{
  position:fixed;
  top:0;
  right:-400px;
  width:350px;
  max-width:100%;
  height:100%;
  background:white;
  z-index:9999;
  box-shadow:-5px 0 20px rgba(0,0,0,.2);
  transition:.3s;
  display:flex;
  flex-direction:column;
}

#cart-panel.active{
  right:0;
}

.cart-header{
  background:#b47a74;
  color:white;
  padding:15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.cart-header button{
  background:none;
  border:none;
  color:white;
  font-size:20px;
  cursor:pointer;
}

#cart-items{
  flex:1;
  overflow:auto;
  padding:10px;
}

.cart-item{
  display:flex;
  gap:10px;
  margin-bottom:12px;
  border-bottom:1px solid #eee;
  padding-bottom:10px;
}

.cart-item img{
  width:70px;
  height:70px;
  object-fit:cover;
  border-radius:10px;
}

.cart-info{
  flex:1;
}

.cart-info h4{
  margin:0;
  font-size:14px;
}

.cart-info p{
  margin:5px 0;
  color:#555;
}

.qty{
  display:flex;
  align-items:center;
  gap:8px;
}

.qty button{
  width:28px;
  height:28px;
  border:none;
  background:#b47a74;
  color:white;
  border-radius:6px;
  cursor:pointer;
}

.remove{
  color:red;
  cursor:pointer;
  font-size:13px;
}

.cart-footer{
  padding:15px;
  border-top:1px solid #ddd;
}

.buy-btn{
  width:100%;
  padding:14px;
  border:none;
  background:#25D366;
  color:white;
  font-size:16px;
  border-radius:12px;
  cursor:pointer;
  font-weight:bold;
}

.add-cart{
  width:100%;
  margin-top:8px;
  padding:10px;
  border:none;
  background:#b47a74;
  color:white;
  border-radius:10px;
  font-weight:bold;
  cursor:pointer;
}

.price-option{
  cursor:pointer;
}

.price-option input{
  display:none;
}

.price-option input:checked + .price{
  background:#b47a74;
  color:white;
  transform:scale(1.03);
}

.price{
  transition:.2s;
}
/* =========================
   TOPBAR
========================= */
/* =========================
   TOPBAR
========================= */

.topbar{
  background:#b47a74;
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 15px;
  font-size:13px;
  flex-wrap:wrap;
  gap:10px;
}

.topbar-left,
.topbar-right{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.top-link{
  color:#fff;
  text-decoration:none;
  transition:.2s;
}

.top-link:hover{
  opacity:.8;
}

.social{
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  text-decoration:none;
  font-size:16px;
  color:#fff;
  transition:.2s;
}

.social:hover{
  transform:translateY(-2px);
}

.tiktok{
  background:#000;
}

.instagram{
  background:#E1306C;
}

.facebook{
  background:#1877F2;
}

.youtube{
  background:#FF0000;
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

  .topbar{
    flex-direction:column;
    text-align:center;
    padding:10px;
  }

  .topbar-left,
  .topbar-right{
    justify-content:center;
  }

  .top-link{
    font-size:12px;
  }

  .social{
    width:28px;
    height:28px;
    font-size:14px;
  }

}

.top-link{
  color:white;
  text-decoration:none;
  transition:.2s;
}

.top-link:hover{
  opacity:.8;
}

.social{
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  text-decoration:none;
  font-size:16px;
  color:white;
  transition:.2s;
}

.social:hover{
  transform:translateY(-2px);
}

.tiktok{
  background:#000;
}

.instagram{
  background:#E1306C;
}

.facebook{
  background:#1877F2;
}

.youtube{
  background:#FF0000;
}

/* MOBILE */
@media(max-width:768px){

  .topbar{
    flex-direction:column;
    text-align:center;
    padding:10px;
  }

  .topbar-left,
  .topbar-right{
    justify-content:center;
  }

  .top-link{
    font-size:12px;
  }

  .social{
    width:28px;
    height:28px;
    font-size:14px;
  }
}

/* =========================
   CLASES
========================= */

.clases-wrap{
  padding:20px 15px 10px;
  overflow-x:auto;
}

.clases-lista{
  display:flex;
  gap:14px;
  min-width:max-content;
}

.clase-item{
  min-width:110px;
  background:#fff;
  border-radius:18px;
  padding:10px;
  text-align:center;
  cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  transition:.2s;
  border:2px solid transparent;
}

.clase-item:hover{
  transform:translateY(-3px);
}

.clase-item.active{
  border-color:#d4af37;
}

.clase-item img{
  width:70px;
  height:70px;
  object-fit:cover;
  border-radius:14px;
  margin-bottom:8px;
}

.clase-item span{
  display:block;
  font-size:14px;
  font-weight:600;
}

.product-actions{
  display:flex;
  gap:6px;
  margin-top:8px;
}

.share-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;

  border:none;
  background:#25D366;
  color:#fff;

  padding:7px 10px;
  border-radius:8px;

  cursor:pointer;

  font-size:12px;
  font-weight:600;

  transition:.2s;
  white-space:nowrap;
}

.share-btn i{
  font-size:13px;
}

.share-btn:hover{
  background:#1ebe5d;
}

/* MOBILE */
@media (max-width:768px){

  .product-actions{
    gap:4px;
  }

  .share-btn{
    padding:6px 8px;
    font-size:11px;
    border-radius:7px;
  }

  .share-btn i{
    font-size:12px;
  }

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

  .share-btn span{
    display:none;
  }

  .share-btn{
    width:34px;
    padding:6px;
  }

}

.product-carousel{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:16px;
  background:#f5f5f5;
}

.carousel-track{
  display:flex;
  gap:8px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
}

.carousel-track::-webkit-scrollbar{
  display:none;
}

.product-media{
  min-width:100%;
  width:100%;
  height:240px;
  object-fit:cover;
  border-radius:16px;
}

.carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:34px;
  height:34px;
  border:none;
  border-radius:50%;
  background:rgba(0,0,0,.45);
  color:#fff;
  font-size:24px;
  cursor:pointer;
}

.carousel-btn.left{
  left:8px;
}

.carousel-btn.right{
  right:8px;
}
.logo-link{
  text-decoration:none;
  color:inherit;
  display:inline-block;
}


#lightbox{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.9);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

#lightbox img{
  max-width:90%;
  max-height:90%;
  object-fit:contain;
}

#lightbox .carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:45px;
  height:45px;
  border:none;
  border-radius:50%;
  background:rgba(0,0,0,.5);
  color:white;
  font-size:28px;
  cursor:pointer;
  z-index:10000;
}

#lightbox .left{
  left:20px;
}

#lightbox .right{
  right:20px;
}

.carousel-track{
  display:flex;
  overflow:hidden;
  scroll-behavior:smooth;
}

.product-media{
  min-width:100%;
  flex-shrink:0;
}

/* =========================
   PAGINACION
========================= */

.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:30px 0;
}

.page-btn{
  border:none;
  background:#111827;
  color:#fff;
  padding:10px 16px;
  border-radius:10px;
  cursor:pointer;
  font-size:14px;
  transition:.2s;
}

.page-btn:hover{
  opacity:.9;
  transform:translateY(-2px);
}

.page-btn.active{
  background:#b47a74;
}

.page-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* =========================
   BOTON MERCADO PAGO
========================= */

.mercadopago-btn{
  background: #25a1d3;
  color: white;
  border: none;
}

.mercadopago-btn:hover{
  background: #0084c2;
}

/* =========================
   BOTON WHATSAPP
========================= */

.whatsapp-btn{ 
  background: #25D366;
  color: white;
  border: none;
}

.whatsapp-btn:hover{
  background: #1ebe5d;
}

/* ========================= IMAGEN MERCADO PAGO ========================= */ 
.mp-img{ cursor: pointer; transition: 0.3s; border-radius: 12px; }
.mp-img:hover{ transform: scale(1.03); opacity: 0.92; }