:root{
  --bg:#071225;
  --panel: rgba(6,16,34,.55);
  --stroke: rgba(255,255,255,.08);
  --text:#eaf3ff;
  --muted:#a9c4e8;

  --accent1:#00c6ff;
  --accent2:#0072ff;
  --accentGlow: rgba(0,198,255,.28);

  --teal:#37e6ff;
  --red:#ff3b5c;
  --yellow:#5aa7ff;

  --green:#2ecc71;
  --shadow: 0 18px 55px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
img{display:block}

.bg-pattern{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(0,198,255,.10), transparent 60%),
    radial-gradient(800px 420px at 85% 8%, rgba(0,114,255,.10), transparent 62%),
    radial-gradient(circle at 18px 18px, rgba(0,198,255,.10) 0 8px, transparent 9px),
    radial-gradient(circle at 62px 62px, rgba(0,114,255,.08) 0 10px, transparent 11px);
  background-size:
    auto,
    auto,
    84px 84px,
    84px 84px;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  filter: contrast(110%);
}

.wrap{max-width:1180px;margin:0 auto;padding:0 18px}
.main{padding-top:22px;padding-bottom:60px}

/* TOPBAR */
.topbar{
  position: sticky; top:0; z-index:50;
  background: rgba(4,10,22,.65);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--stroke);
}
.topbar-inner{display:flex;align-items:center;gap:16px;padding:14px 0}

.brand{
  display:flex;align-items:center;gap:10px;min-width:220px;
  text-decoration:none;color:inherit;
}
.logo-badge{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  color:#041022;font-weight:1000;font-size:20px;
  box-shadow: 0 14px 40px var(--accentGlow);
}
.brand-title{line-height:1;font-weight:1000;letter-spacing:.4px}
.brand-sub{line-height:1;font-weight:900;color:var(--muted);margin-top:2px}

.search{
  flex:1;display:flex;align-items:center;gap:10px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
  padding:10px 12px;border-radius:14px;
  max-width:560px;
}
.search input{width:100%;border:0;outline:none;background:transparent;color:var(--text);font-size:14px}
.search-ico{opacity:.85;color:var(--muted)}

.auth{
  display:flex;
  gap:10px;
  align-items:center;
  margin-left:auto; /* ✅ empuja el bloque al lado derecho */
}
.linkbtn{
  border:0;background:transparent;color:var(--text);
  padding:10px 12px;border-radius:12px;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
}
.linkbtn:hover{background: rgba(255,255,255,.06); box-shadow: 0 0 0 1px rgba(0,198,255,.18) inset;}
.linkbtn.ghost{border:1px solid rgba(0,198,255,.25)}

/* NAV */
.nav{border-top:1px solid var(--stroke)}
.nav-wrap{display:flex;align-items:center;gap:10px;padding:10px 0}
.nav-inner{
  display:flex;
  gap:18px;
  overflow:auto;
  padding:10px 0;
  flex:1;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:none;
}
.nav-inner::-webkit-scrollbar{display:none}
.navlink{color:var(--text);text-decoration:none;font-weight:650;font-size:13px;opacity:.9;white-space:nowrap}
.navlink:hover{opacity:1;color:var(--accent1)}

/* ✅ SOLO EN PC: nav centrado */
@media (min-width: 761px){
  .nav-inner{ justify-content:center; }
}

/* HERO + SLIDER */
.hero{
    margin-top:0;
}
.slider{
  position:relative;overflow:hidden;border-radius:22px;
  background:#061127;border:1px solid var(--stroke);
  box-shadow: var(--shadow);
}
.slides{display:flex;transition: transform .45s ease}
.slide{min-width:100%;height:280px;background:#061127}
.slide img{width:100%;height:100%;object-fit:cover}
.slider-btn{
  position:absolute;top:50%;transform: translateY(-50%);
  width:44px;height:44px;border-radius:999px;
  border:1px solid rgba(0,198,255,.25);
  background: rgba(0,0,0,.35);color:#fff;font-size:26px;cursor:pointer;
}
.slider-btn.left{left:14px}
.slider-btn.right{right:14px}
.slider-btn:hover{background: rgba(0,0,0,.55)}
.dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:8px}
.dotbtn{
  width:10px;height:10px;border-radius:999px;border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);cursor:pointer;
}
.dotbtn.on{background: linear-gradient(135deg,var(--accent1),var(--accent2)); border-color: rgba(0,0,0,.2);}

/* BLOCKS */
.block{
  margin-top:28px;padding:18px;border-radius:22px;
  background: var(--panel);border:1px solid var(--stroke);
  box-shadow: var(--shadow);
}
.block-head{display:flex;align-items:center;justify-content:center;gap:14px;padding:8px 0 18px}
.block-head h2{
  margin:0;font-weight:1000;letter-spacing:.8px;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.flame{font-size:22px;color:var(--accent1)}

/* GRID */
.grid{display:grid;grid-template-columns: repeat(4,1fr);gap:16px}

/* PRODUCT CARD */
.card{
  background: rgba(6,16,34,.72);
  border: 1px solid rgba(255,255,255,.08);
  border-radius:18px;overflow:hidden;position:relative;
}
.card:hover{border-color: rgba(0,198,255,.22); box-shadow: 0 22px 60px rgba(0,0,0,.55);}
.card-badges{position:absolute;top:10px;left:10px;display:flex;gap:8px;flex-wrap:wrap;z-index:2}
.badge{font-size:12px;padding:5px 10px;border-radius:999px;font-weight:900;letter-spacing:.2px}
.badge.teal{background: rgba(55,230,255,.16); color: var(--teal); border:1px solid rgba(55,230,255,.22)}
.badge.red{background: rgba(255,59,92,.14); color: var(--red); border:1px solid rgba(255,59,92,.22)}
.badge.yellow{background: rgba(90,167,255,.14); color: #9fd0ff; border:1px solid rgba(90,167,255,.22)}

.card-img{height:150px;background:#061127}
.card-img img{width:100%;height:100%;object-fit:cover}

.card-body{padding:12px 12px 14px}
.seller{font-size:11px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;margin-bottom:6px}
.title{font-weight:950;font-size:14px;line-height:1.2;margin-bottom:10px;min-height:34px}
.rating{margin-bottom:10px}
.star{opacity:.25}
.star.on{opacity:1;color:#bfeaff}

.meta{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.dotline{display:flex;align-items:center;gap:8px;color:#d8e8ff;font-size:12px}
.dot{width:8px;height:8px;border-radius:999px;background:#888}
.dot.green{background: var(--green)}
.dot.teal{background: var(--accent1)}
.dot.yellow{background: #9fd0ff}

.price-row{display:flex;align-items:baseline;justify-content:space-between;margin:10px 0 12px}
.old{color: var(--muted); text-decoration: line-through; font-size:12px}
.price{font-weight:1000;font-size:16px;color:#dff3ff}

.buy{
  width:100%;border:0;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  color:#041022;font-weight:1000;
  padding:12px 10px;border-radius:14px;cursor:pointer;
  box-shadow: 0 16px 40px rgba(0,198,255,.18);
}
.buy:hover{filter: brightness(1.05)}


/* ===== SOLO LOGOS: MARQUEE INFINITO ===== */
@keyframes brands-marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--brands-distance, 0px))); }
}

.brands-marquee{ margin-top:16px; }
.brands-viewport{ position:relative; overflow:hidden; border-radius:18px; }

.brands-viewport::before,
.brands-viewport::after{
  content:""; position:absolute; top:0; bottom:0; width:48px; z-index:2; pointer-events:none;
}
.brands-viewport::before{
  left:0;
  background: linear-gradient(90deg, rgba(7,18,37,1), rgba(7,18,37,0));
}
.brands-viewport::after{
  right:0;
  background: linear-gradient(270deg, rgba(7,18,37,1), rgba(7,18,37,0));
}

/* BASE: tarjeta glass (sin blanco) */
.brands-track .brand-card{
  flex:0 0 auto;
  width: clamp(120px, 18vw, 170px);
  min-height:80px;

  border-radius:18px;
  padding:14px;
  display:grid; place-items:center;
  text-decoration:none;

  /* 👇 base oscuro premium */
  background: rgba(6,16,34,.62);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  position:relative;
  overflow:hidden;

  /* por marca (defaults) */
  --bc1: rgba(0,198,255,.22);
  --bc2: rgba(0,114,255,.18);
}

/* glow/gradiente sutil dentro */
.brands-track .brand-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(circle at 25% 20%, var(--bc1), transparent 60%),
    radial-gradient(circle at 80% 30%, var(--bc2), transparent 62%);
  opacity:.9;
  pointer-events:none;
}

/* mejora el logo */
.brands-track .brand-card img{
  max-width:100%;
  max-height:44px;
  object-fit:contain;
  position:relative;
  z-index:1;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

/* hover pro */
@media (hover:hover){
  .brands-track .brand-card:hover{
    transform: translateY(-2px);
    border-color: rgba(0,198,255,.22);
    box-shadow: 0 26px 75px rgba(0,0,0,.45);
  }
}

/* ===== COLORES POR MARCA ===== */
.brand-card[data-brand="hbo"]{
  --bc1: rgba(142, 68, 255, .28);   /* violeta */
  --bc2: rgba(0, 198, 255, .14);
}
.brand-card[data-brand="viki"]{
  --bc1: rgba(0, 198, 255, .26);    /* celeste */
  --bc2: rgba(55, 230, 255, .14);
}
.brand-card[data-brand="crunchyroll"]{
  --bc1: rgba(255, 140, 60, .28);   /* naranja */
  --bc2: rgba(255, 59, 92, .12);
}
.brand-card[data-brand="directv"]{
  --bc1: rgba(0, 114, 255, .26);    /* azul */
  --bc2: rgba(0, 198, 255, .16);
}
.brand-card[data-brand="yt"]{
  --bc1: rgba(255, 59, 92, .28);    /* rojo */
  --bc2: rgba(255, 140, 60, .12);
}
.brand-card[data-brand="gemini"]{
  --bc1: rgba(55, 230, 255, .22);   /* teal */
  --bc2: rgba(90, 167, 255, .18);
}


/* ===== SALDO + DROPDOWN USUARIO ===== */
.balance-pill{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(0,198,255,.18);
}
.balance-label{font-size:12px;color:var(--muted);font-weight:700}
.balance-value{font-size:13px;font-weight:950;color:var(--text)}

.user-menu{ position:relative; }
.userbtn{ min-width:44px; }

.user-dropdown{
  position:absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 260px;
  border-radius: 16px;
  background: rgba(6,16,34,.92);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  padding: 10px;
  display:none;
  z-index: 80;
}

.user-menu.open .user-dropdown{ display:block; }

.user-head{
  padding: 10px 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  margin-bottom: 8px;
}
.user-name{font-weight:1000}
.user-saldo{margin-top:4px;color:var(--muted);font-size:12px}

.user-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 10px;
  border-radius: 12px;
  text-decoration:none;
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
}
.user-item:hover{
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 1px rgba(0,198,255,.18) inset;
}
.user-item.danger{ color: #ffb4c1; }
.user-sep{
  height:1px;
  background: rgba(255,255,255,.08);
  margin: 6px 0;
}

/* Buscador: filtrado visual */
.card.is-hidden{ display:none !important; }

.search-empty{
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--muted);
  font-weight: 700;
  display:none;
}

/* Responsive */
@media (max-width: 1080px){ .grid{grid-template-columns: repeat(3,1fr)} }
@media (max-width: 760px){
  .wrap{
    padding-left: 18px;
    padding-right: 18px;
    padding-left: calc(18px + env(safe-area-inset-left));
    padding-right: calc(18px + env(safe-area-inset-right));
  }
  .topbar-inner{
    justify-content: space-between;
    gap: 10px;
  }
  .search{display:none !important;}
  .brand{min-width:0;}
  .slide{height:220px}
  .grid{grid-template-columns: repeat(2,1fr)}
  .brands-viewport::before,.brands-viewport::after{width:28px}
  .brands-track{gap:10px}
  .brands-track .brand-card{width: clamp(110px, 34vw, 150px); min-height:74px; border-radius:16px; padding:12px;}
  .balance-pill{display:none;} /* si quieres saldo en móvil, quita esta línea */

  /* ✅ NUEVO: NAV CENTRADO EN CELULAR */
  .nav-wrap{
    justify-content: center;
  }
  .nav-inner{
    justify-content: center;
  }
}
@media (max-width: 480px){ .grid{grid-template-columns: 1fr} }
.buy:disabled,
.buy.is-disabled{
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(1);
}

.buy:disabled{
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.7);
  box-shadow: none;
}
@media (max-width: 760px){
  .navlink{
    font-size: 14px;
    font-weight: 750;
  }
}
/* ===== NAV MÁS GRANDE EN PC ===== */
@media (min-width: 761px){
  .navlink{
    font-size: 18px;
    font-weight: 750;
  }
}
/* ===== NAV ACTIVO ===== */
.navlink.active{
  color: var(--accent1);
  opacity: 1;
  font-weight: 900;
  position: relative;
}

.navlink.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:3px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  box-shadow: 0 0 12px var(--accentGlow);
}
/* PC (igual que ya lo tienes) */
.brands-track{
  display:flex;
  align-items:center;
  gap:14px;
  padding:2px;
  width:max-content;
  will-change: transform;
  animation: brands-marquee-left var(--brands-duration, 18s) linear infinite;
}

/* ✅ MÓVIL: loop real sin espacio */
@media (max-width: 760px){
  .brands-viewport{
    overflow:hidden; /* importante */
  }

  .brands-track{
    animation: brands-marquee-mobile 16s linear infinite !important;
  }

  @keyframes brands-marquee-mobile{
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); } /* porque duplicaste (SET1 + SET2) */
  }
}
/* ===== CHIPS NAV (igual al de la foto) ===== */
.chips-wrap{
  margin-top: 0px;
  padding: 10px;
  background: rgba(6,16,34,.62);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.chips{
  display:flex;
  align-items:center;
  gap:10px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:none;
  padding: 4px;
}
.chips::-webkit-scrollbar{ display:none; }

.chip{
  flex: 0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(0,198,255,.18) inset;
}

/* Activo (rojo como la imagen) */
.chip.active{
  background: rgba(255,59,92,.18);
  border-color: rgba(255,59,92,.28);
  color: #ffd7de;
  box-shadow: 0 14px 30px rgba(255,59,92,.10);
}

/* Opcional: un glow suave */
.chips-wrap:before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:999px;
  pointer-events:none;
  background: radial-gradient(circle at 20% 50%, rgba(0,198,255,.18), transparent 60%);
  opacity:.45;
}
.chips-wrap{ position:relative; }
/* =================================================
   SLIDER WEIKANG SHOP – DEFINITIVO
   PC: delgado | Móvil: chico y casi cuadrado
   ================================================= */

/* CONTENEDOR */
.slider {
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  background: #061127;
}

/* TRACK */
.slides {
  display: flex;
  transition: transform 0.4s ease;
}

/* SLIDE */
.slide {
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

/* ======================
   MÓVIL
   ====================== */
@media (max-width: 760px) {
  .slide {
    height: min(320px, 90vw); /* chico y casi cuadrado */
  }

  .slider-btn {
    width: 34px;
    height: 34px;
    font-size: 20px;
  }

  .dots {
    bottom: 10px;
  }
}

/* ======================
   TABLET
   ====================== */
@media (min-width: 761px) and (max-width: 1024px) {
  .slide {
    height: 260px;
  }
}

/* ======================
   PC
   ====================== */
@media (min-width: 1025px) {
  .slide {
    height: 220px; /* DELGADO en escritorio */
  }
}
/* ===== MÓVIL: mostrar imagen COMPLETA (sin recorte) ===== */
@media (max-width: 760px) {
  .slide img {
    object-fit: contain !important;  /* muestra toda la imagen */
    background: #061127;             /* relleno bonito en los lados */
  }
}