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

/* HEADER */
.header{
  background:#111827;
  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{
  font-size:11px;
  color:#777;
}

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

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

.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{
  display:flex;
  align-items:center;
  gap:10px;
}

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

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

/* COLORES */
.golden{
  color:#38bdf8; /* azul claro */
}

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

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

  .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:#0b2c6b;
  margin:0;
  line-height:1.2;
}

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

.golden{
  color:#f2b705;
}

.store{
  color:#f2b705;
}

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

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

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

/* =========================
   BOTON CARRITO
========================= */
.cart-btn{
  background:#facc15;
  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:#111827;
  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:#f2b705;
  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:#f2b705;
  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:#f2b705;
  color:white;
  transform:scale(1.03);
}

.price{
  transition:.2s;
}
/* =========================
   TOPBAR
========================= */
.topbar{
  background:#f2b705;
  color:white;
  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: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;
}



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

.qty button{
  width:28px;
  height:28px;
  border:none;
  background:#f2b705;
  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:#f2b705;
  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:#f2b705;*/
  color:#fff;
  transform:scale(1.03);
}

.price{
  transition:.2s;
}


.money{
  display:flex;
  align-items:flex-start;
  gap:3px;
  color:#fff;
  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:#002fa6;
  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:#f2b705;
}

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

.logo-link{
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

.logo-link:hover,
.logo-link:visited,
.logo-link:active{
    text-decoration: none;
    color: inherit;
}


.bandera-flotante{
  position:fixed;
  bottom:20px;
  right:20px;
  width:70px;
  height:70px;
  z-index:99999;
  animation: floatBandera 2.5s ease-in-out infinite;
}

.bandera-flotante img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.3));
}

/* animación suave */
@keyframes floatBandera{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* móvil */
@media (max-width:768px){
    .flag-float{
        left: 10px;
        bottom: 15px;
        width: 50px;
    }
}


/* ================= BANDERA FLOTANTE ================= */
.flag-float{
  position:fixed;
  bottom:20px;
  left:20px;
  z-index:99999;
  width:60px;
  animation: floatFlag 2s infinite ease-in-out;
}

.flag-float img{
  width:100%;
  border-radius:8px;
  box-shadow:0 4px 15px rgba(0,0,0,.3);
}

@keyframes floatFlag{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}

/* ================= MARQUEE ================= */
.marquee-container{
  width:100%;
  background:#d90000;
  color:#fff;
  overflow:hidden;
  white-space:nowrap;
  padding:8px 0;
  font-weight:bold;
  position:relative;
}

.marquee{
  display:inline-block;
  padding-left:100%;
  animation: marquee 18s linear infinite;
}

@keyframes marquee{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-100%); }
}