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





.search-box{
  width:180px;
}
/* HEADER */

.header{
  position:sticky;
  top:0;
  z-index:1000;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.header-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
}

@media (max-width:768px){

  .header{
    display:block;
  }

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

.header-actions.hide{
  transform:translateY(-100%);
  opacity:0;
  height:0;
  padding:0 12px;
  overflow:hidden;
}
  .search-box{
    flex:1;
    width:auto;
  }

  .search-box input{
    width:100%;
  }
}
.logo-link{
  text-decoration:none;
}

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

.logo img{
  width:50px;
  height:50px;
}

.header-actions{
  display:flex;
  align-items:center;
  gap: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: #e83e6e;
  font-weight: bold;
}

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

.desc-label{
  font-size:13px;	
  color: #e83e6e;
  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{
  color:#111;
  transition:.2s;
}

.price-type{
  font-size:12px;
  color:#111;
  display:block;
  margin-bottom:2px;
}

.price-option input:checked + .price{
  color:#fc8a01;
}

.price-option input:checked + .price .price-type,
.price-option input:checked + .price .money{
  color:#fc8a01;
}


.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:30px;
  height:20px;
  border-radius:10px;
}

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

/* IMPORTAR FONT ESTILO MODERNO TIPO VEGA */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Montserrat:wght@300;400;500&display=swap');

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

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

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

/* IMPORTACIONES */
.variedades{
  font-family:'Montserrat', sans-serif;
  font-size:10px;
  font-weight:400;
  letter-spacing:6px;
  color:#222;
  margin-top:4px;
  text-transform:uppercase;
}

/* YANMAR'S */
.gaela{
  font-family:'Cormorant Garamond', serif;
  font-size:42px;
  font-weight:700;
  letter-spacing:1px;
  color:#111;
  line-height:.9;
  text-transform:uppercase;
}

/* SLOGAN */
.slogan{
  font-family:'Montserrat', sans-serif;
  font-size:16px;
  font-weight:300;
  color:#000;
  letter-spacing:8px; /* más separación */
  text-transform:uppercase;
}


/* 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;
}
.mobile-actions{
  display:none;
}
.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:#e83e6e;
}

.store{
  color:#e83e6e;
}

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

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

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


.search-box{
  width:160px;
}

.search-box input{
  width:100%;
  height:38px;
  border:1px solid #ddd;
  border-radius:20px;
  padding:0 14px;
}
.desktop-actions{
  display:flex;
}
.search-box input:focus{
  border-color:#e83e6e;
  background:#fff;
}

.icon-btn{
  width:38px;
  height:38px;
  border:none;
  border-radius:50%;
  background:#f5f5f5;
  font-size:18px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* =========================
   BOTON CARRITO
========================= */
.cart-btn{
  position:relative;
  width:38px;
  height:38px;
  border:none;
  border-radius:50%;
  background:#e83e6e;
  color:#fff;
  font-size:18px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

#cart-count{
  position:absolute;
  top:-5px;
  right:-5px;
  width:18px;
  height:18px;
  background:#222;
  color:#fff;
  border-radius:50%;
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
}
@media (max-width:768px){

  .search-box{
    width:120px;
  }

  .gaela{
    font-size:24px;
  }

  .slogan{
    font-size:9px;
    letter-spacing:4px;
  }
}
/* =========================
   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:#e83e6e;
  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:#e83e6e;
  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:#e83e6e;
  color:white;
  border-radius:10px;
  font-weight:bold;
  cursor:pointer;
}*/
.cart-btn{
  width:60px;
  height:30px;
  border:1.5px solid #222;
  border-radius:30%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.cart-icon{
  width:40px;
  height:40px;
  background:#111;

  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%201024%201024%22%20strokeWidth%3D%220%22%20style%3D%22width%3A%201em%3B%20height%3A%201em%3B%20vertical-align%3A%20middle%3B%20fill%3A%20currentcolor%3B%20overflow%3A%20hidden%3B%22%3E%3Cpath%20d%3D%22M409.7%20752.4c31.8%200%2057.6%2025.8%2057.5%2057.6%200%2031.8-25.8%2057.6-57.5%2057.6-31.8%200-57.6-25.8-57.6-57.6%200-31.8%2025.8-57.6%2057.6-57.6z%20m327.5%200c31.8%200%2057.6%2025.8%2057.6%2057.6%200%2031.8-25.8%2057.6-57.6%2057.6-31.8%200-57.6-25.8-57.5-57.6%200-31.8%2025.8-57.6%2057.5-57.6z%20m-541-563.2c21.6%200%2040.7%204.8%2060.2%2016.6%2020.9%2012.6%2037%2031.5%2047.1%2055.9l3.6%209.7%201.5%206.2%2018.5%20113.1%2031.4%20199.2c2.9%2017.9%2017.5%2031.7%2035.1%2033.7l4.9%200.3%20347.2%200c18.3%200%2034.2-12.3%2039.1-30.1l1.1-5.2%2048.6-260.5c4.5-24.3%2027.9-40.4%2052.3-35.8%2022.3%204.2%2037.9%2024.3%2036.5%2047.1l-0.7%205.1-48.4%20259.5c-9.7%2060.2-59.9%20105.6-120.8%20109.2l-7.7%200.3-347.2%200c-63.8%200-118.1-46.2-128.5-109.4l-36.3-230.3-12.4-76.3-1-2.5c-2.1-4.9-4.7-8.4-7.5-10.6l-2.7-1.9c-3.3-2-6.8-3.1-10.1-3.5l-3.8-0.2-85.3%200c-24.7%200-44.8-20.1-44.8-44.8%200-22.7%2016.9-41.7%2039.6-44.5l5.2-0.3%2085.3%200z%20m382.2-1.2c22.7%200%2041.7%2016.9%2044.5%2039.6l0.3%205.2%200%2066.1%2066.2%200c23.1%200%2042.1%2017.5%2044.5%2039.9l0.3%204.9c0%2022.7-16.9%2041.7-39.6%2044.5l-5.2%200.3-66.2%200%200%2066.1c0%2023.1-17.5%2042.1-39.9%2044.6l-4.9%200.2c-22.7%200-41.7-16.9-44.4-39.5l-0.4-5.3%200-66.1-66.1%200c-23.1%200-42.1-17.5-44.5-39.9l-0.3-4.9c0-22.7%2016.9-41.7%2039.6-44.5l5.2-0.3%2066.1%200%200-66.1c0-23.1%2017.5-42.1%2040-44.6l4.8-0.2z%22%20fill%3D%22%23000000%22%20stroke%3D%22none%22%20stroke-width%3D%221820.4444444444443%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/contain no-repeat;

  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%201024%201024%22%20strokeWidth%3D%220%22%20style%3D%22width%3A%201em%3B%20height%3A%201em%3B%20vertical-align%3A%20middle%3B%20fill%3A%20currentcolor%3B%20overflow%3A%20hidden%3B%22%3E%3Cpath%20d%3D%22M409.7%20752.4c31.8%200%2057.6%2025.8%2057.5%2057.6%200%2031.8-25.8%2057.6-57.5%2057.6-31.8%200-57.6-25.8-57.6-57.6%200-31.8%2025.8-57.6%2057.6-57.6z%20m327.5%200c31.8%200%2057.6%2025.8%2057.6%2057.6%200%2031.8-25.8%2057.6-57.6%2057.6-31.8%200-57.6-25.8-57.5-57.6%200-31.8%2025.8-57.6%2057.5-57.6z%20m-541-563.2c21.6%200%2040.7%204.8%2060.2%2016.6%2020.9%2012.6%2037%2031.5%2047.1%2055.9l3.6%209.7%201.5%206.2%2018.5%20113.1%2031.4%20199.2c2.9%2017.9%2017.5%2031.7%2035.1%2033.7l4.9%200.3%20347.2%200c18.3%200%2034.2-12.3%2039.1-30.1l1.1-5.2%2048.6-260.5c4.5-24.3%2027.9-40.4%2052.3-35.8%2022.3%204.2%2037.9%2024.3%2036.5%2047.1l-0.7%205.1-48.4%20259.5c-9.7%2060.2-59.9%20105.6-120.8%20109.2l-7.7%200.3-347.2%200c-63.8%200-118.1-46.2-128.5-109.4l-36.3-230.3-12.4-76.3-1-2.5c-2.1-4.9-4.7-8.4-7.5-10.6l-2.7-1.9c-3.3-2-6.8-3.1-10.1-3.5l-3.8-0.2-85.3%200c-24.7%200-44.8-20.1-44.8-44.8%200-22.7%2016.9-41.7%2039.6-44.5l5.2-0.3%2085.3%200z%20m382.2-1.2c22.7%200%2041.7%2016.9%2044.5%2039.6l0.3%205.2%200%2066.1%2066.2%200c23.1%200%2042.1%2017.5%2044.5%2039.9l0.3%204.9c0%2022.7-16.9%2041.7-39.6%2044.5l-5.2%200.3-66.2%200%200%2066.1c0%2023.1-17.5%2042.1-39.9%2044.6l-4.9%200.2c-22.7%200-41.7-16.9-44.4-39.5l-0.4-5.3%200-66.1-66.1%200c-23.1%200-42.1-17.5-44.5-39.9l-0.3-4.9c0-22.7%2016.9-41.7%2039.6-44.5l5.2-0.3%2066.1%200%200-66.1c0-23.1%2017.5-42.1%2040-44.6l4.8-0.2z%22%20fill%3D%22%23000000%22%20stroke%3D%22none%22%20stroke-width%3D%221820.4444444444443%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/contain no-repeat;
}

/*aqui finaliaza*/
.price-option{
  cursor:pointer;
}

.price-option input{
  display:none;
}

.price-option input:checked + .price{
  /*background:#e83e6e;*/
  color:#fc8a01;
  transform:scale(1.03);
}

.price{
  transition:.2s;
}


.money{
  display:flex;
  align-items:flex-start;
  gap:3px;
  color:#000;
  font-weight:600;
}

.currency{
  font-size:14px;
  margin-top:5px;
}

.integer{
  font-size:18px;
  line-height:1;
}

.decimal{
  font-size:14px;
  margin-top:5px;
  opacity:0.9;
}
/* =========================
   TOPBAR
========================= */
/* =========================
   TOPBAR
========================= */

.topbar{
  background:#e83e6e;
  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:#e83e6e;
}

.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; }

.card{
  cursor:pointer;
  transition:.2s;
}

.card:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

@media (max-width:768px){

  .desktop-actions{
    display:none;
  }

  .mobile-actions{
    display:flex;
    padding:8px 12px;
  }

  .search-box{
    flex:1;
    width:auto;
  }
}