:root{
  --black:#0a0a0a;
  --panel:#141414;
  --panel-2:#1c1c1c;
  --red:#e10600;
  --red-light:#ff3b30;
  --white:#f7f5f2;
  --grey:#8a8a8a;
  --green:#2ecc71;
  --yellow:#f5c542;
}

*{margin:0;padding:0;box-sizing:border-box;}

html,body{
  background-color:var(--black);
  background-image:
    radial-gradient(1.4px 1.4px at 20px 30px, rgba(255,255,255,0.55), transparent 100%),
    radial-gradient(1px 1px at 65px 120px, rgba(255,255,255,0.35), transparent 100%),
    radial-gradient(1.6px 1.6px at 110px 45px, rgba(255,255,255,0.45), transparent 100%),
    radial-gradient(1px 1px at 150px 200px, rgba(255,255,255,0.3), transparent 100%),
    radial-gradient(1.4px 1.4px at 200px 80px, rgba(255,255,255,0.5), transparent 100%),
    radial-gradient(1.6px 1.6px at 250px 260px, rgba(255,255,255,0.4), transparent 100%),
    radial-gradient(1px 1px at 30px 220px, rgba(255,255,255,0.3), transparent 100%),
    radial-gradient(1px 1px at 280px 150px, rgba(255,255,255,0.4), transparent 100%),
    radial-gradient(1.5px 1.5px at 180px 10px, rgba(255,255,255,0.5), transparent 100%),
    radial-gradient(1px 1px at 90px 280px, rgba(255,255,255,0.3), transparent 100%),
    radial-gradient(1.3px 1.3px at 240px 40px, rgba(255,255,255,0.35), transparent 100%),
    radial-gradient(1px 1px at 10px 160px, rgba(255,255,255,0.3), transparent 100%),
    radial-gradient(1.2px 1.2px at 330px 190px, rgba(255,255,255,0.4), transparent 100%),
    radial-gradient(1px 1px at 55px 260px, rgba(255,255,255,0.3), transparent 100%),
    radial-gradient(1.5px 1.5px at 270px 100px, rgba(255,255,255,0.45), transparent 100%),
    radial-gradient(ellipse 140% 55% at 50% 0%, rgba(70,4,4,0.4), transparent 70%),
    radial-gradient(ellipse 160% 45% at 50% 100%, rgba(50,3,3,0.5), transparent 75%);
  background-repeat:repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,no-repeat,no-repeat;
  background-size:300px 300px,300px 300px,300px 300px,300px 300px,300px 300px,300px 300px,300px 300px,300px 300px,300px 300px,300px 300px,300px 300px,300px 300px,300px 300px,300px 300px,300px 300px,100% 100%,100% 100%;
  background-attachment:fixed;
  color:var(--white);
  font-family:'Inter',sans-serif;
  min-height:100%;
  overflow-x:hidden;
}

/* ==========================================================
   ESCENA DE FONDO INFERNAL — inyectada por particles.js
   (montañas con ruinas góticas, luna de sangre con halo,
   resplandor de horizonte, humo, luciérnagas y brasas)
   ========================================================== */

.bg-scene{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

/* ---------- resplandor de horizonte (fuego lejano) ---------- */
.horizon-glow{
  position:absolute;
  left:0; right:0; bottom:-140px;
  height:300px;
  background:radial-gradient(ellipse 70% 100% at 50% 100%, rgba(255,90,20,0.38), rgba(225,6,0,0.14) 42%, transparent 78%);
  filter:blur(4px);
  animation:glow-pulso 5s ease-in-out infinite;
}
@keyframes glow-pulso{ 0%,100%{ opacity:0.7; } 50%{ opacity:1; } }

/* ---------- halo giratorio detrás de la luna ---------- */
.moon-halo{
  position:absolute;
  top:clamp(50px, 8vh, 100px);
  right:2%;
  width:clamp(140px, 24vw, 260px);
  height:clamp(140px, 24vw, 260px);
  border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(225,6,0,0.20) 0deg, transparent 10deg, transparent 20deg,
    rgba(225,6,0,0.16) 32deg, transparent 42deg, transparent 52deg,
    rgba(225,6,0,0.18) 64deg, transparent 74deg, transparent 84deg,
    rgba(225,6,0,0.15) 96deg, transparent 106deg, transparent 116deg,
    rgba(225,6,0,0.19) 128deg, transparent 138deg, transparent 148deg,
    rgba(225,6,0,0.16) 160deg, transparent 170deg, transparent 180deg,
    rgba(225,6,0,0.18) 192deg, transparent 202deg, transparent 212deg,
    rgba(225,6,0,0.15) 224deg, transparent 234deg, transparent 244deg,
    rgba(225,6,0,0.19) 256deg, transparent 266deg, transparent 276deg,
    rgba(225,6,0,0.16) 288deg, transparent 298deg, transparent 308deg,
    rgba(225,6,0,0.18) 320deg, transparent 330deg, transparent 340deg,
    rgba(225,6,0,0.20) 352deg, transparent 360deg);
  -webkit-mask-image:radial-gradient(circle, #000 32%, transparent 68%);
  mask-image:radial-gradient(circle, #000 32%, transparent 68%);
  filter:blur(3px);
  opacity:0.4;
  animation:halo-girar 100s linear infinite;
}
@keyframes halo-girar{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

/* ---------- luna de sangre (con cráteres, late suavemente) ---------- */
.moon{
  position:absolute;
  top:clamp(65px, 11vh, 118px);
  right:6%;
  width:clamp(48px, 9vw, 100px);
  height:clamp(48px, 9vw, 100px);
  border-radius:50%;
  background:
    radial-gradient(circle at 63% 34%, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.25) 8%, transparent 9%),
    radial-gradient(circle at 28% 58%, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 6%, transparent 7%),
    radial-gradient(circle at 47% 76%, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.18) 5%, transparent 6%),
    radial-gradient(circle at 72% 64%, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.16) 4%, transparent 5%),
    radial-gradient(circle at 35% 32%, #fff8f2 0%, #ffe9dd 32%, #ffb199 52%, #ff5a3c 72%, #b3260a 100%);
  --moon-shadow-rest:
    0 0 26px 6px rgba(225,6,0,0.4),
    0 0 60px 26px rgba(225,6,0,0.2),
    0 0 110px 55px rgba(225,6,0,0.08);
  --moon-shadow-peak:
    0 0 36px 10px rgba(225,6,0,0.5),
    0 0 78px 36px rgba(225,6,0,0.26),
    0 0 135px 65px rgba(225,6,0,0.12);
  box-shadow:var(--moon-shadow-rest);
  animation:luna-latido 4s ease-in-out infinite;
}
@keyframes luna-latido{
  0%, 100%{
    transform:scale(1);
    box-shadow:var(--moon-shadow-rest);
  }
  50%{
    transform:scale(1.045);
    box-shadow:var(--moon-shadow-peak);
  }
}

/* ---------- montañas con ruinas góticas (dos capas, parallax) ---------- */
.bg-mountains-far{
  position:absolute;
  left:0; right:0; bottom:50px;
  height:38vh;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 420%22 preserveAspectRatio=%22none%22%3E %3Cpath d=%22M0,420 L0,260 L90,300 L180,220 L260,280 L350,190 L430,260 L520,170 L610,250 L700,200 L780,270 L870,210 L950,260 L1040,180 L1120,250 L1210,210 L1290,270 L1380,220 L1460,260 L1550,200 L1600,240 L1600,420 Z%22 fill=%22%231a0606%22 opacity=%220.55%22/%3E %3C/svg%3E");
  background-repeat:repeat-x;
  background-position:bottom left;
  background-size:1600px 100%;
  opacity:0.75;
  animation:mont-drift 150s linear infinite;
}
.bg-mountains-near{
  position:absolute;
  left:0; right:0; bottom:0;
  height:30vh;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 320%22 preserveAspectRatio=%22none%22%3E %3Cpath d=%22M0,320 L0,230 L40,230 L40,190 L55,190 L55,170 L70,190 L70,230 L110,230 L110,200 L150,240 L190,180 L210,180 L210,140 L222,140 L222,120 L234,140 L234,180 L246,180 L246,230 L300,230 L300,200 L330,250 L390,170 L420,230 L470,200 L500,260 L560,210 L610,230 L610,150 L625,150 L625,110 L635,90 L645,110 L645,150 L660,150 L660,230 L700,230 L740,190 L780,240 L830,200 L880,260 L950,210 L1010,240 L1060,190 L1120,250 L1170,210 L1220,240 L1280,200 L1330,250 L1400,220 L1460,250 L1520,215 L1600,245 L1600,320 Z%22 fill=%22%230a0202%22 opacity=%220.9%22/%3E %3C/svg%3E");
  background-repeat:repeat-x;
  background-position:bottom left;
  background-size:1600px 100%;
  animation:mont-drift-rev 110s linear infinite;
}
@keyframes mont-drift{ from{ background-position-x:0; } to{ background-position-x:-1600px; } }
@keyframes mont-drift-rev{ from{ background-position-x:0; } to{ background-position-x:1600px; } }

/* ---------- ajustes en pantallas chicas: escena más chica y corrida hacia abajo, para no pisar el header ---------- */
@media (max-width:700px){
  .moon-halo{ top:130px; right:-20px; opacity:0.3; }
  .moon{
    top:150px;
    right:-8px;
    --moon-shadow-rest:
      0 0 16px 4px rgba(225,6,0,0.4),
      0 0 34px 14px rgba(225,6,0,0.2),
      0 0 60px 28px rgba(225,6,0,0.08);
    --moon-shadow-peak:
      0 0 22px 6px rgba(225,6,0,0.5),
      0 0 44px 18px rgba(225,6,0,0.26),
      0 0 75px 34px rgba(225,6,0,0.1);
  }
  .bg-mountains-far{ height:24vh; }
  .bg-mountains-near{ height:18vh; }
  .horizon-glow{ height:180px; bottom:-90px; }
}

@media (prefers-reduced-motion: reduce){
  .moon-halo,.bg-mountains-far,.bg-mountains-near,.horizon-glow,.moon{ animation:none; }
}

/* ---------- humo que sube lentamente ---------- */
.smoke-layer{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
}
.smoke{
  position:absolute;
  bottom:-15vh;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.06) 0%, rgba(255,140,90,0.03) 45%, transparent 75%);
  filter:blur(9px);
  opacity:0;
  animation-name:smoke-subir;
  animation-timing-function:ease-out;
  animation-iteration-count:infinite;
}
@keyframes smoke-subir{
  0%{ transform:translate(0,0) scale(0.8); opacity:0; }
  15%{ opacity:var(--smoke-opacity, 0.25); }
  85%{ opacity:var(--smoke-opacity, 0.25); }
  100%{ transform:translate(var(--smoke-drift, 40px), -115vh) scale(1.7); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .smoke{ animation:none; display:none; }
}

/* ---------- luciérnagas / chispas flotando en el aire ---------- */
.firefly-layer{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
}
.firefly{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,200,140,0.95) 0%, rgba(255,90,30,0.55) 50%, transparent 75%);
  box-shadow:0 0 8px rgba(255,110,40,0.6);
  animation-name:firefly-flotar;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
@keyframes firefly-flotar{
  0%,100%{ transform:translate(0,0); opacity:0.15; }
  50%{ transform:translate(var(--fly-drift-x, 20px), var(--fly-drift-y, -30px)); opacity:0.9; }
}
@media (prefers-reduced-motion: reduce){
  .firefly{ animation:none; display:none; }
}

/* ---------- partículas animadas (brasas cayendo) ---------- */
.ember-layer{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
}
.ember{
  position:absolute;
  top:-5vh;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,120,80,0.95) 0%, rgba(225,6,0,0.55) 45%, rgba(225,6,0,0) 75%);
  box-shadow:0 0 6px rgba(225,6,0,0.55);
  opacity:0;
  animation-name:ember-caida;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-duration:var(--ember-duration, 16s);
  animation-delay:var(--ember-delay, 0s);
}
@keyframes ember-caida{
  0%{ transform:translate(0,0); opacity:0; }
  8%{ opacity:var(--ember-opacity, 0.6); }
  92%{ opacity:var(--ember-opacity, 0.6); }
  100%{ transform:translate(var(--ember-drift, 0px), 115vh); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .ember{ animation:none; display:none; }
}

/* ---------- anuncio / cartel personalizable (solo index.html) ---------- */
.anuncio-banner{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  overflow:hidden;
  position:relative;
  z-index:70;
  padding:10px 18px;
  /* se apaga hacia negro en los bordes (mismo --black que el fondo del
     sitio) y se enciende en rojo/ámbar al centro, como si el brillo
     emergiera de la propia oscuridad en vez de un bloque pegado encima */
  background:linear-gradient(90deg,
    var(--black) 0%,
    rgba(120,4,2,0.92) 10%,
    var(--red) 40%,
    #ff5a1f 50%,
    var(--red) 60%,
    rgba(120,4,2,0.92) 90%,
    var(--black) 100%);
}
/* resplandor suave hacia abajo, en vez de un borde duro, para que se
   funda con lo que sigue en vez de cortar en seco */
.anuncio-banner::before{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-22px;
  height:34px;
  z-index:0;
  background:radial-gradient(ellipse 60% 100% at 50% 0%, rgba(255,90,20,0.28), rgba(225,6,0,0.1) 55%, transparent 80%);
  filter:blur(3px);
  pointer-events:none;
}
/* brillo que recorre el cartel de punta a punta, de fondo */
.anuncio-banner::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(100deg, transparent 42%, rgba(255,255,255,0.14) 50%, transparent 58%);
  background-size:250% 100%;
  background-repeat:no-repeat;
  animation: anuncio-brillo 3.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes anuncio-brillo{
  0%{ background-position:160% 0; }
  100%{ background-position:-60% 0; }
}

.anuncio-badge{
  position:relative;
  z-index:2;
  flex:none;
  display:flex;
  align-items:center;
  gap:6px;
  background:rgba(10,10,10,0.65);
  border:1px solid rgba(255,140,40,0.5);
  color:var(--yellow);
  font-family:'Anton', sans-serif;
  font-weight:400;
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  padding:4px 11px 4px 8px;
  border-radius:999px;
  box-shadow:0 0 10px rgba(255,140,40,0.3);
}
.anuncio-badge-dot{
  width:6px;
  height:6px;
  flex:none;
  border-radius:50%;
  background:var(--red-light);
  box-shadow:0 0 8px 1px rgba(255,59,48,0.85);
  animation: anuncio-dot-pulso 1.4s ease-in-out infinite;
}
@keyframes anuncio-dot-pulso{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.6); opacity:0.55; }
}

.anuncio-viewport{
  position:relative;
  z-index:2;
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  height:20px;
}
.anuncio-track{
  position:absolute;
  top:0;
  left:0;
  white-space:nowrap;
  font-family:'Anton', sans-serif;
  font-weight:400;
  font-size:14.5px;
  letter-spacing:0.6px;
  color:var(--white);
  text-shadow:0 1px 3px rgba(0,0,0,0.45);
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){
  .anuncio-banner::after{ animation:none; }
  .anuncio-badge-dot{ animation:none; }
  .anuncio-viewport{ height:auto; overflow:visible; }
  .anuncio-track{ position:static; text-align:center; width:100%; transform:none !important; animation:none !important; }
}
@media (max-width:560px){
  .anuncio-badge-texto{ display:none; } /* en mobile queda solo el ícono, para no comerse espacio */
}

/* ---------- topbar ---------- */
.topbar{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:26px 20px 0;
  position:relative;
  z-index:60;
}

.topbar span.brandmark{
  font-family:'Anton', sans-serif;
  font-size:15px;
  letter-spacing:8px;
  color:var(--white);
  opacity:0.85;
}

.topbar span.brandmark::before,
.topbar span.brandmark::after{
  content:"—";
  color:var(--red);
  margin:0 10px;
  opacity:0.9;
}

.back-btn{
  position:absolute;
  left:20px;
  top:22px;
  background:none;
  border:none;
  color:var(--grey);
  font-size:13px;
  letter-spacing:0.5px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  transition:color .2s ease;
  text-decoration:none;
}
.back-btn:hover{ color:var(--white); }

/* ---------- topbar con info de cuenta al lado (ej. recargar diamantes) ----------
   El .topbar de siempre está pensado solo para "Volver" + marca centrada,
   con el botón de volver posicionado absoluto. Cuando además hay que
   mostrarle a alguien logueado su saldo/cuenta (topbar-account), esa
   combinación no entra en pantallas chicas y todo se pisaba. Estas clases
   nuevas arman dos filas en mobile en vez de forzar todo en una sola línea. */
.topbar-con-cuenta{
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px 16px;
}
.topbar-con-cuenta-fila1{
  display:flex;
  align-items:center;
  gap:14px;
}
.back-btn-inline{
  background:none;
  border:none;
  color:var(--grey);
  font-size:13px;
  letter-spacing:0.5px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  transition:color .2s ease;
  text-decoration:none;
  white-space:nowrap;
  flex-shrink:0;
}
.back-btn-inline:hover{ color:var(--white); }

@media (max-width:600px){
  .topbar-con-cuenta{
    justify-content:center;
    padding:16px 16px 0;
  }
  .topbar-con-cuenta-fila1{
    order:1;
    width:100%;
    justify-content:space-between;
  }
  .topbar-con-cuenta .topbar-account{
    order:2;
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
  }
}
@media (max-width:380px){
  .topbar-con-cuenta .account-name{ max-width:70px; }
  .topbar-con-cuenta .brandmark{ display:none; } /* con poco espacio, prioridad al saldo/cuenta */
}

/* ---------- topbar principal (home): logo, buscador, cuenta ---------- */
.topbar-main{
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding:22px 28px 0;
}

.brand-block{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex-shrink:0;
}

.brand-logo{
  width:36px; height:36px;
  object-fit:contain;
  flex-shrink:0;
}

.brand-name{
  font-family:'Anton', sans-serif;
  font-size:clamp(12px, 2.6vw, 14px);
  letter-spacing:2px;
  color:var(--white);
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

.verified-badge{ width:15px; height:15px; flex-shrink:0; }

.topbar-search{
  position:relative;
  flex:1 1 320px;
  max-width:420px;
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:999px;
  padding:9px 16px;
  transition:border-color .2s ease, background .2s ease;
}
.topbar-search:focus-within{ border-color:var(--red); background:rgba(255,255,255,0.07); }

.search-icon{ width:15px; height:15px; color:var(--grey); flex-shrink:0; }

.topbar-search input{
  flex:1;
  min-width:0;
  background:none;
  border:none;
  outline:none;
  color:var(--white);
  font-family:'Inter',sans-serif;
  font-size:13px;
}
.topbar-search input::placeholder{ color:var(--grey); }

.search-results{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0; right:0;
  background:var(--panel-2);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;
  overflow:hidden;
  z-index:5;
  box-shadow:0 12px 28px rgba(0,0,0,0.4);
}
.search-item{
  display:block;
  padding:10px 16px;
  font-size:13px;
  color:var(--white);
  text-decoration:none;
  cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.search-item:last-child{ border-bottom:none; }
.search-item:hover{ background:rgba(225,6,0,0.1); }
.search-empty{ padding:14px 16px; font-size:12.5px; color:var(--grey); text-align:center; }

.topbar-account{ display:flex; align-items:center; gap:10px; flex-shrink:0; min-height:36px; }

.pill-btn{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:12.5px;
  letter-spacing:0.3px;
  padding:9px 18px;
  border-radius:999px;
  text-decoration:none;
  white-space:nowrap;
  background:none;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pill-outline{ color:var(--white); border:1px solid rgba(247,245,242,0.3); }
.pill-outline:hover{ border-color:var(--white); transform:translateY(-1px); }
.pill-solid{ background:var(--red); color:var(--white); box-shadow:0 6px 16px rgba(225,6,0,0.35); }
.pill-solid:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(225,6,0,0.5); }

.account-chip{
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:999px;
  padding:6px 8px 6px 6px;
}
.account-avatar{
  width:26px; height:26px;
  border-radius:50%;
  background:var(--red);
  color:var(--white);
  font-family:'Anton', sans-serif;
  font-size:12px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.account-name{
  font-size:13px; font-weight:600; color:var(--white);
  max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.account-logout{
  background:none; border:none; color:var(--grey); font-size:11px;
  letter-spacing:0.5px; text-transform:uppercase; cursor:pointer; padding:4px 6px;
  transition:color .2s ease;
}
.account-logout:hover{ color:var(--red-light); }

/* ---------- login: panel promocional a la izquierda + form a la derecha ---------- */
.login-split{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:64px;
  flex-wrap:wrap;
  max-width:1100px;
  margin:0 auto;
  padding:70px 20px 60px;
  min-height:calc(100vh - 20px);
}

.login-promo{
  flex:1 1 380px;
  max-width:440px;
}

.login-form-side{
  flex:0 1 440px;
}

.promo-brand{ display:flex; align-items:center; gap:14px; }
.promo-brand .brand-logo{ width:48px; height:48px; }

.promo-brand-name{
  font-family:'Anton', sans-serif;
  font-size:clamp(1.5rem, 3.4vw, 2.1rem);
  letter-spacing:2px;
  color:var(--white);
}

.promo-tagline{
  margin-top:18px;
  margin-left:72px;
  color:var(--grey);
  font-size:15.5px;
  line-height:1.55;
  max-width:340px;
}

.promo-bubbles{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:36px;
  max-width:400px;
}

.promo-bubble{
  display:flex;
  align-items:center;
  gap:16px;
  border:1px solid rgba(247,245,242,0.15);
  background:rgba(255,255,255,0.03);
  backdrop-filter:blur(6px);
  border-radius:16px;
  padding:20px 24px;
  font-size:15.5px;
  font-weight:600;
  color:var(--white);
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.promo-bubble:hover{
  transform:translateY(-3px);
  border-color:rgba(225,6,0,0.5);
  background:rgba(225,6,0,0.06);
}

.promo-bubble-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  background:rgba(225,6,0,0.15);
  color:var(--red-light);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.promo-bubble-icon svg{ width:22px; height:22px; }

@media (max-width:1000px){
  .login-split{ gap:36px; padding:50px 16px 40px; }
  .login-promo{ display:none; }
}

/* login.html: layout flexible que se acomoda solo y scrollea bien */
body.login-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
body.login-page .topbar{ flex-shrink:0; }
body.login-page .login-split{
  gap:70px;
  max-width:1180px;
  padding:40px 20px;
}
body.login-page .login-promo{ max-width:480px; }
body.login-page .login-form-side{ flex:0 1 480px; }

body.login-page .promo-brand .brand-logo{ width:58px; height:58px; }
body.login-page .promo-brand-name{ font-size:clamp(1.8rem, 3.6vw, 2.4rem); }
body.login-page .promo-tagline{ font-size:17px; max-width:440px; }
body.login-page .promo-bubbles{ max-width:440px; gap:18px; margin-top:42px; }
body.login-page .promo-bubble{ font-size:17px; padding:24px 28px; }

body.login-page .card{ padding:46px 42px; max-width:480px; }
body.login-page .card h2{ font-size:2.1rem; }
body.login-page .card p.sub{ font-size:15px; margin-bottom:30px; }
body.login-page .field input{ padding:14px 16px; font-size:15px; }
body.login-page #login-btn{ padding:17px 34px; font-size:15px; }

.admin-link-footer{
  flex-shrink:0;
  margin-top:40px;
  padding-top:22px;
  padding-bottom:36px;
  border-top:1px solid rgba(255,255,255,0.06);
}

/* ---------- HOME ---------- */
main.home{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px 60px;
  min-height:calc(100vh - 60px);
}

.hero-lockup{ position:relative; display:inline-block; }

.brand{
  font-family:'Anton', sans-serif;
  font-size:clamp(3.2rem, 12vw, 8.5rem);
  line-height:0.95;
  letter-spacing:2px;

  /* ---------- reflejo rojo animado, de izquierda a derecha ---------- */
  /* Nota: se sacó el text-shadow rojo que tenía antes esta clase.
     Con el relleno de texto recortado (background-clip:text) para el
     brillo, ese resplandor se filtraba por los bordes de las letras
     y las teñía de rosa incluso en reposo. */
  color:var(--white);
  background-image: linear-gradient(
    100deg,
    var(--white) 0%,
    var(--white) 40%,
    var(--red-light) 46%,
    var(--red) 50%,
    var(--red-light) 54%,
    var(--white) 60%,
    var(--white) 100%
  );
  background-size: 250% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: brand-shine 5s infinite;
}

@keyframes brand-shine{
  0%   { background-position: 0% 0; }     /* blanco en reposo */
  10%  { background-position: 0% 0; }
  55%  { background-position: 100% 0; }   /* brillo terminó de cruzar */
  100% { background-position: 100% 0; }   /* blanco en reposo, listo para reiniciar */
}

@media (prefers-reduced-motion: reduce){
  .brand{ animation:none; -webkit-text-fill-color:var(--white); background-image:none; }
}

.store-wrap{ position:relative; display:inline-block; margin-top:2px; }

.store{
  font-family:'Anton', sans-serif;
  font-size:clamp(1.6rem, 5.5vw, 3.4rem);
  letter-spacing:22px;
  padding:6px 26px 6px 40px;
  color:var(--white);
  background:var(--red);
  display:inline-block;
  transform:skewX(-8deg);
  box-shadow:0 10px 30px rgba(225,6,0,0.4);
}

.store span{ display:inline-block; transform:skewX(8deg); }

.tagline{
  margin-top:34px;
  font-size:13px;
  letter-spacing:1.5px;
  color:var(--grey);
  text-transform:uppercase;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

.tagline .dot{ color:var(--red); }

.stats{ margin-top:46px; display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }

.bubble{
  border:1px solid rgba(247,245,242,0.15);
  background:rgba(255,255,255,0.03);
  backdrop-filter:blur(6px);
  border-radius:999px;
  padding:14px 26px;
  min-width:150px;
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}

.bubble:hover{
  transform:translateY(-3px);
  border-color:rgba(225,6,0,0.5);
  background:rgba(225,6,0,0.06);
}

.bubble .num{
  display:block;
  font-family:'Anton', sans-serif;
  font-size:1.6rem;
  color:var(--red-light);
  line-height:1.1;
}

.bubble .label{
  display:block;
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--grey);
  margin-top:4px;
}

.actions{ margin-top:38px; display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }

.btn{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:0.5px;
  padding:15px 34px;
  border-radius:999px;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  display:inline-block;
  text-decoration:none;
}

.btn:focus-visible{ outline:2px solid var(--white); outline-offset:3px; }

.btn-primary{ background:var(--red); color:var(--white); box-shadow:0 8px 24px rgba(225,6,0,0.35); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(225,6,0,0.5); }

.btn-secondary{ background:transparent; color:var(--white); border-color:rgba(247,245,242,0.35); }
.btn-secondary:hover{ transform:translateY(-2px); border-color:var(--white); }

.btn:disabled{ opacity:0.5; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

.admin-link{ position:relative; z-index:2; text-align:center; padding-bottom:24px; }

.admin-link a{
  background:none;
  border:none;
  color:var(--grey);
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;
  opacity:0.5;
  transition:opacity .2s ease;
  text-decoration:none;
}
.admin-link a:hover{ opacity:1; color:var(--white); }

/* ---------- paginas de formulario (registro / admin) ---------- */
.page-wrap{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  padding:70px 20px 60px;
  min-height:calc(100vh - 20px);
}

.card{
  width:100%;
  max-width:440px;
  background:var(--panel);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  padding:36px 30px;
  height:fit-content;
}

.card.admin-card{ max-width:680px; }

.card h2{
  font-family:'Anton', sans-serif;
  letter-spacing:2px;
  font-size:1.7rem;
  margin-bottom:8px;
}
.card h2 span{ color:var(--red-light); }

.card p.sub{ color:var(--grey); font-size:13.5px; margin-bottom:26px; }

.field{ margin-bottom:16px; text-align:left; }
.field label{
  display:block;
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--grey);
  margin-bottom:6px;
}
.field input{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  color:var(--white);
  font-family:'Inter',sans-serif;
  font-size:14px;
  outline:none;
  transition:border-color .2s ease, background .2s ease;
}
.field input:focus{ border-color:var(--red); background:rgba(255,255,255,0.07); }

.field select{
  width:100%;
  padding:12px 38px 12px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  color:var(--white);
  font-family:'Inter',sans-serif;
  font-size:14px;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px;
}
.field select:focus{ border-color:var(--red); background-color:rgba(255,255,255,0.07); }
.field select option{ background:var(--panel-2); color:var(--white); }

/* ---------- botón "ver variables disponibles" + su modal ---------- */
.tb-vars-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:none;
  border:1px solid rgba(255,255,255,0.15);
  color:var(--grey);
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:600;
  padding:6px 12px;
  border-radius:8px;
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
  margin:2px 0 4px;
}
.tb-vars-btn:hover{ border-color:var(--red-light); color:var(--white); }
.tb-vars-btn svg{ width:14px; height:14px; flex-shrink:0; }

.tb-vars-list{ text-align:left; }
.tb-vars-item{
  background:var(--panel-2);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:10px;
  padding:10px 14px;
  margin-bottom:10px;
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}
.tb-vars-code{
  font-family:'Anton', sans-serif;
  font-size:13px;
  color:var(--red-light);
  white-space:nowrap;
}
.tb-vars-desc{ font-size:12.5px; color:var(--white); line-height:1.5; flex:1 1 180px; }

.form-error{ color:var(--red-light); font-size:12px; margin-bottom:14px; min-height:16px; }

.success-box{ text-align:center; padding:10px 0 4px; }
.success-box .icon{
  width:56px; height:56px;
  border-radius:50%;
  background:rgba(46,204,113,0.12);
  color:var(--green);
  display:flex; align-items:center; justify-content:center;
  font-size:26px;
  margin:0 auto 18px;
}
.success-box h3{ font-family:'Anton', sans-serif; letter-spacing:1px; font-size:1.2rem; margin-bottom:10px; }
.success-box p{ color:var(--grey); font-size:13.5px; line-height:1.5; margin-bottom:22px; }

.admin-header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:6px;
  flex-wrap:wrap;
  gap:8px;
}

.admin-tag{
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--grey);
  background:rgba(255,255,255,0.05);
  padding:5px 12px;
  border-radius:999px;
}

.admin-list{ margin-top:18px; display:flex; flex-direction:column; gap:12px; }

.reg-card{
  border:1px solid rgba(255,255,255,0.08);
  background:var(--panel-2);
  border-radius:14px;
  padding:14px 16px;
  text-align:left;
}

.reg-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }

.reg-name{ font-weight:600; font-size:14.5px; }
.reg-meta{ color:var(--grey); font-size:12.5px; margin-top:3px; line-height:1.5;}

.status-pill{
  font-size:10.5px;
  letter-spacing:0.5px;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:999px;
  white-space:nowrap;
}
.status-pendiente{ background:rgba(245,197,66,0.15); color:var(--yellow); }
.status-aprobado{ background:rgba(46,204,113,0.15); color:var(--green); }
.status-rechazado{ background:rgba(225,6,0,0.15); color:var(--red-light); }

.tipo-pill{
  display:inline-block;
  padding:3px 9px;
  border-radius:20px;
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.3px;
  margin-top:6px;
}
.tipo-tienda{ background:rgba(138,138,138,0.18); color:var(--grey); }
.tipo-bot{ background:rgba(88,101,242,0.18); color:#5865F2; }
.tipo-ventas{ background:rgba(46,204,113,0.18); color:var(--green); }

.reg-actions{ display:flex; gap:8px; margin-top:12px; }

.mini-btn{
  flex:1;
  font-size:12.5px;
  font-weight:600;
  padding:9px 10px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  transition:opacity .2s ease;
}
.mini-btn:hover{ opacity:0.85; }
.mini-approve{ background:var(--green); color:#062814; }
.mini-reject{ background:rgba(225,6,0,0.85); color:var(--white); }

.tb-tipo-quitar-btn{
  flex:none;
  padding:6px 12px;
  font-size:11.5px;
}

#tb-tipo-agregar-btn{
  flex:none;
  width:100%;
  background:rgba(255,255,255,0.04);
  border:1px dashed rgba(255,255,255,0.25);
  color:var(--grey);
  padding:10px 12px;
}
#tb-tipo-agregar-btn:hover{ border-color:var(--red-light); color:var(--white); background:rgba(255,255,255,0.06); }

.empty-state{ text-align:center; color:var(--grey); font-size:13px; padding:30px 10px; }
.loading-row{ text-align:center; color:var(--grey); font-size:13px; padding:20px 0; }

.alt-link{ text-align:center; margin-top:18px; font-size:13px; color:var(--grey); }
.alt-link a{ color:var(--white); text-decoration:underline; }
.alt-link a:hover{ color:var(--red-light); }

@media (max-width:700px){
  .topbar-main{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:12px;
    padding:16px 16px 0;
  }
  .topbar-brand-row{ justify-content:center; width:100%; }
  .topbar-search{ order:2; flex-basis:auto; max-width:100%; }
  .topbar-account{
    order:3;
    flex-wrap:wrap;
    justify-content:center;
    width:100%;
  }
  .prod-img{
    aspect-ratio:unset;
    height:0;
    padding-top:76.9%;
    display:block;
  }
  .prod-img img{ position:absolute; top:0; left:0; width:100%; height:100%; }
  .prod-img .prod-img-placeholder{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
}

@media (max-width:420px){
  .pill-btn{ padding:8px 14px; font-size:11.5px; }
  .saldo-chip{ padding:7px 12px; font-size:11.5px; }
  .account-name{ max-width:80px; }
}

@media (max-width:480px){
  .store{ letter-spacing:14px; padding:5px 18px 5px 28px; }
  .tagline{ font-size:11px; }
  .bubble{ min-width:130px; padding:12px 18px; }
  .card{ padding:28px 20px; }
  .page-wrap{ padding:64px 14px 40px; }
}
/* ============================================================
   SALDO / CATALOGO / MODAL — agregado para el sistema de saldo
   ============================================================ */

.saldo-chip{
  font-size:12.5px;
  font-weight:700;
  color:var(--green);
  background:rgba(46,204,113,0.12);
  border:1px solid rgba(46,204,113,0.25);
  padding:8px 14px;
  border-radius:999px;
  white-space:nowrap;
  flex-shrink:0;
}

/* ---------- catalogo (home) ---------- */
/* ---------- sobre nosotros ---------- */
.about-wrap{
  position:relative;
  z-index:2;
  max-width:1160px;
  margin:0 auto;
  padding:20px 20px 90px;
}
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}
.about-left{ padding-right:10px; }
.about-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 16px;
  border-radius:999px;
  background:rgba(225,6,0,0.1);
  border:1px solid rgba(225,6,0,0.35);
  color:var(--red-light);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.8px;
  text-transform:uppercase;
  margin-bottom:18px;
}
.about-title{
  font-family:'Anton', sans-serif;
  letter-spacing:0.5px;
  font-size:2.1rem;
  line-height:1.2;
  margin-bottom:18px;
}
.about-title span{ color:var(--red-light); }
.about-desc{ color:var(--grey); font-size:14.5px; line-height:1.75; max-width:460px; }

.about-right{ display:flex; flex-direction:column; gap:14px; }
.about-card{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:20px 22px;
  background:var(--panel);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
  transition:border-color .2s ease, transform .2s ease;
}
.about-card:hover{ border-color:rgba(225,6,0,0.35); transform:translateY(-2px); }
.about-icon{
  flex-shrink:0;
  width:42px; height:42px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(225,6,0,0.12);
  color:var(--red-light);
}
.about-icon svg{ width:20px; height:20px; }
.about-card h3{ font-size:14.5px; font-weight:700; color:var(--white); margin-bottom:4px; }
.about-card p{ font-size:12.5px; color:var(--grey); line-height:1.55; }

@media (max-width:860px){
  .about-grid{ grid-template-columns:1fr; gap:34px; }
  .about-left{ padding-right:0; text-align:center; }
  .about-desc{ margin:0 auto; }
  .about-badge{ margin-left:auto; margin-right:auto; }
}

.catalogo-wrap{
  position:relative;
  z-index:2;
  max-width:1100px;
  margin:0 auto;
  padding:10px 20px 70px;
}

.catalogo-head{ text-align:center; margin-bottom:30px; }
.catalogo-head h2{
  font-family:'Anton', sans-serif;
  letter-spacing:1.5px;
  font-size:2rem;
}
.catalogo-head h2 span{ color:var(--red-light); }
.catalogo-head p.sub{ color:var(--grey); font-size:13.5px; margin-top:6px; }

.categoria-filtros{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-bottom:24px;
}
.categoria-btn{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  color:var(--grey);
  border-radius:20px;
  padding:8px 16px;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:12.5px;
  cursor:pointer;
  transition:all .2s ease;
}
.categoria-btn:hover{ color:var(--white); border-color:rgba(225,6,0,0.4); }
.categoria-btn.active{ background:var(--red); border-color:var(--red); color:var(--white); }

.catalogo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:18px;
}

.prod-card{
  background:var(--panel);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.prod-card:hover{ transform:translateY(-4px); border-color:rgba(225,6,0,0.45); box-shadow:0 14px 34px rgba(0,0,0,0.35); }

.prod-img{ text-decoration:none; }
.prod-img{
  position:relative;
  width:100%;
  aspect-ratio:1.3/1;
  background:var(--panel-2);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.prod-img img{ width:100%; height:100%; object-fit:cover; }
.prod-img-alt{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1);
  transition:opacity .25s ease, transform .35s ease;
}
.prod-img:hover .prod-img-alt{ opacity:1; transform:scale(1.12); }
.prod-img-placeholder{
  font-family:'Anton', sans-serif;
  font-size:1.8rem;
  color:rgba(225,6,0,0.4);
}

.prod-agotado{ opacity:0.85; }
.prod-agotado-overlay{
  position:absolute;
  inset:0;
  background:rgba(10,10,10,0.72);
  backdrop-filter:blur(2px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:'Anton', sans-serif;
  letter-spacing:2px;
  font-size:1.1rem;
  color:var(--white);
  line-height:1.3;
}

.prod-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:4px; flex:1; }
.prod-name{ font-weight:700; font-size:19px; line-height:1.25; color:var(--white); text-decoration:none; display:block; }
.prod-name:hover{ color:var(--red-light); }
.prod-desc{ color:var(--grey); font-size:12px; line-height:1.4; margin-top:2px; }

.prod-price-row{ margin-top:10px; margin-bottom:14px; }
.prod-price{
  display:block;
  font-family:'Anton', sans-serif;
  color:var(--red-light);
  font-size:1.5rem;
  letter-spacing:0.5px;
  line-height:1.1;
}
.prod-price-note{ display:block; font-size:11px; color:var(--grey); margin-top:3px; }
.prod-price-old{ display:block; font-size:13px; color:var(--grey); text-decoration:line-through; }

.prod-buy-btn{
  margin-top:auto;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--red);
  color:var(--white);
  border:none;
  border-radius:999px;
  padding:13px 16px;
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:12.5px;
  letter-spacing:0.6px;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(225,6,0,0.35);
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.prod-buy-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(225,6,0,0.5); }
.prod-buy-btn:disabled{
  background:rgba(255,255,255,0.08);
  color:var(--grey);
  box-shadow:none;
  cursor:not-allowed;
  transform:none;
}

/* ---------- cartel / modal ---------- */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(3px);
  z-index:50;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:20px;
  overflow-y:auto;
}

.modal-box{
  background:var(--panel);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:20px;
  padding:34px 30px;
  max-width:380px;
  width:100%;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  margin:auto 0;
  max-height:calc(100vh - 40px);
  overflow-y:auto;
}

.modal-icon{
  width:56px; height:56px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
  margin:0 auto 18px;
}
.modal-icon-ok{ background:rgba(46,204,113,0.12); color:var(--green); }
.modal-icon-error{ background:rgba(225,6,0,0.15); color:var(--red-light); }

.modal-msg{ font-size:15px; line-height:1.5; margin-bottom:22px; color:var(--white); font-weight:600; }

.modal-box-wide{ max-width:480px; }

.modal-key-box{
  background:var(--panel-2);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;
  padding:14px 16px;
  margin-bottom:20px;
  text-align:left;
}
.modal-key-label{
  display:block; font-size:11px; color:var(--grey);
  text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px;
}
.modal-key-value{
  font-family:'Anton', sans-serif;
  font-size:1.15rem;
  color:var(--red-light);
  word-break:break-all;
  letter-spacing:0.5px;
}

.historial-item{
  border:1px solid rgba(255,255,255,0.08);
  background:var(--panel-2);
  border-radius:12px;
  padding:12px 14px;
}
.historial-top{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.historial-nombre{ font-weight:600; font-size:14px; }
.historial-fecha{ color:var(--grey); font-size:11px; white-space:nowrap; }
.historial-precio{ color:var(--grey); font-size:12.5px; margin-top:2px; }
.historial-key{
  margin-top:8px;
  font-family:monospace;
  font-size:12.5px;
  color:var(--red-light);
  word-break:break-all;
  background:rgba(255,59,48,0.08);
  border-radius:8px;
  padding:6px 10px;
}

/* ---------- admin: tabs ---------- */
.admin-tabs{
  display:flex;
  gap:8px;
  margin-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.admin-tab{
  background:none;
  border:none;
  color:var(--grey);
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:13.5px;
  padding:10px 4px 12px;
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.admin-tab:hover{ color:var(--white); }
.admin-tab.active{ color:var(--white); border-bottom-color:var(--red); }

/* ---------- admin: saldo por usuario ---------- */
.reg-saldo-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  flex-wrap:wrap;
}
.reg-saldo-actual{ font-size:12.5px; color:var(--grey); }
.reg-saldo-actual strong{ color:var(--white); }

.saldo-input{
  width:90px;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  color:var(--white);
  font-family:'Inter',sans-serif;
  font-size:12.5px;
  outline:none;
}
.saldo-input:focus{ border-color:var(--red); }

.comprobante-thumb{
  display:inline-block;
  margin-top:10px;
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.12);
}
.comprobante-thumb img{ display:block; width:90px; height:90px; object-fit:cover; }

.mini-saldo{ flex:none; background:rgba(255,255,255,0.08); color:var(--white); padding:8px 12px; }
.mini-quitar{ flex:none; background:rgba(225,6,0,0.85); color:var(--white); padding:8px 12px; }

/* ---------- recarga de saldo ---------- */
.metodo-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin-bottom:16px;
}
.metodo-btn{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  color:var(--grey);
  border-radius:10px;
  padding:11px 8px;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:12.5px;
  cursor:pointer;
  transition:all .2s ease;
}
.metodo-btn:hover{ color:var(--white); border-color:rgba(225,6,0,0.4); }
.metodo-btn.active{ background:var(--red); border-color:var(--red); color:var(--white); }

.metodo-datos{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:14px 16px;
  margin-bottom:20px;
}
.dato-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:6px 0;
  font-size:12.5px;
}
.dato-row span{ color:var(--grey); }
.dato-row strong{ color:var(--white); font-weight:700; text-align:right; word-break:break-all; }
.dato-row + .dato-row{ border-top:1px solid rgba(255,255,255,0.06); }

.tasa-info{
  font-size:12px;
  color:var(--grey);
  margin-bottom:14px;
  padding:8px 12px;
  background:rgba(255,255,255,0.03);
  border-radius:8px;
}

.saldo-equivale{
  font-size:12.5px;
  font-weight:700;
  color:var(--green);
  margin:-10px 0 16px;
  min-height:16px;
}

.field input[type="file"]{
  width:100%;
  padding:10px;
  border-radius:10px;
  border:1px dashed rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.03);
  color:var(--grey);
  font-family:'Inter',sans-serif;
  font-size:12.5px;
  cursor:pointer;
}
.field input[type="file"]::file-selector-button{
  background:var(--red);
  color:var(--white);
  border:none;
  border-radius:6px;
  padding:7px 12px;
  margin-right:10px;
  font-weight:600;
  font-size:12px;
  cursor:pointer;
}

.ayuda-foto{
  font-size:12px;
  line-height:1.6;
  color:var(--grey);
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  padding:12px 14px;
  margin-bottom:16px;
}
.ayuda-foto strong{ color:var(--white); display:block; margin-bottom:2px; }
.ayuda-foto a{ color:var(--red-light); font-weight:600; text-decoration:underline; }

.btn-wsp{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  background:#25D366;
  color:#0a0a0a;
  font-weight:700;
  font-size:13.5px;
  padding:13px 16px;
  border-radius:999px;
  text-decoration:none;
  margin-bottom:16px;
  transition:transform .2s ease, opacity .2s ease;
}
.btn-wsp:hover{ transform:translateY(-2px); opacity:0.92; }

.check-field{ margin-top:4px; }

.foto-preview-wrap{
  margin-top:10px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.1);
  max-height:180px;
}
.foto-preview-wrap img{ width:100%; display:block; object-fit:cover; max-height:180px; }

/* ---------- admin: form de productos ---------- */
.prod-form{ text-align:left; }
.prod-check-field{ margin-top:-4px; }
.prod-checkbox-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  color:var(--grey);
  text-transform:none;
  letter-spacing:normal;
  cursor:pointer;
}
.prod-checkbox-label input{ width:16px; height:16px; accent-color:var(--red); cursor:pointer; }
/* ---------- MODAL PROMO SOCIOS ---------- */
.promo-socio-box{
  position:relative;
  padding-top:38px;
  background:linear-gradient(180deg, rgba(225,6,0,0.10) 0%, var(--panel) 55%);
  border:1px solid rgba(225,6,0,0.25);
}
.promo-socio-close{
  position:absolute;
  top:14px; right:14px;
  width:30px; height:30px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.06);
  color:var(--grey);
  font-size:14px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.promo-socio-close:hover{ background:rgba(255,255,255,0.12); color:var(--white); }

.promo-socio-icon{
  width:60px; height:60px;
  margin:0 auto 16px;
  border-radius:50%;
  background:rgba(225,6,0,0.14);
  color:var(--red-light);
  display:flex; align-items:center; justify-content:center;
}

.promo-socio-title{
  font-family:'Anton', sans-serif;
  letter-spacing:1px;
  font-size:1.5rem;
  margin-bottom:8px;
}
.promo-socio-title span{ color:var(--red-light); }

.promo-socio-sub{
  color:var(--grey);
  font-size:13.5px;
  line-height:1.5;
  margin-bottom:22px;
}

.promo-socio-list{
  text-align:left;
  margin-bottom:24px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.promo-socio-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13.5px;
  line-height:1.4;
  color:var(--white);
}
.promo-socio-check{
  flex:0 0 auto;
  width:20px; height:20px;
  border-radius:50%;
  background:rgba(46,204,113,0.15);
  color:var(--green);
  font-size:11px;
  font-weight:700;
  display:flex; align-items:center; justify-content:center;
  margin-top:1px;
}
.promo-socio-item strong{ color:var(--red-light); }

.promo-socio-later{
  width:100%;
  background:none;
  border:none;
  color:var(--grey);
  font-size:13px;
  margin-top:14px;
  padding:6px;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
}
.promo-socio-later:hover{ color:var(--white); }

/* ---------- TOP COMPRADORES ---------- */
.ranking-wrap{
  max-width:1100px;
  margin:60px auto 0;
  padding:0 20px 80px;
}

.ranking-podio{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:10px;
}

.ranking-card{
  background:var(--panel);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;
  padding:24px 20px;
  width:170px;
  text-align:center;
  transition:transform .2s ease;
}
.ranking-card:hover{ transform:translateY(-4px); }

.ranking-card.rank-1{
  order:2;
  padding-top:34px;
  padding-bottom:30px;
  border-color:rgba(245,197,66,0.5);
  background:linear-gradient(180deg, rgba(245,197,66,0.10) 0%, var(--panel) 60%);
  box-shadow:0 12px 30px rgba(245,197,66,0.12);
  transform:scale(1.08);
}
.ranking-card.rank-1:hover{ transform:scale(1.08) translateY(-4px); }
.ranking-card.rank-2{ order:1; border-color:rgba(200,200,200,0.35); }
.ranking-card.rank-3{ order:3; border-color:rgba(205,127,50,0.35); }

.ranking-medal{ font-size:34px; line-height:1; margin-bottom:10px; }

.ranking-avatar{
  width:50px; height:50px;
  border-radius:50%;
  background:var(--red);
  color:var(--white);
  font-weight:700;
  font-size:18px;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 12px;
}
.ranking-card.rank-1 .ranking-avatar{ background:var(--yellow); color:#3a2b00; width:58px; height:58px; font-size:20px; }

.ranking-puesto{ color:var(--grey); font-size:11.5px; text-transform:uppercase; letter-spacing:.8px; margin-bottom:4px; }
.ranking-name{ font-weight:700; font-size:16px; margin-bottom:6px; }
.ranking-total{ color:var(--red-light); font-weight:600; font-size:13px; }

@media (max-width:600px){
  .ranking-card{ width:44%; padding:18px 12px; }
  .ranking-card.rank-1{ transform:none; padding-top:24px; }
  .ranking-card.rank-1:hover{ transform:translateY(-4px); }
}

/* ---------- PAGINA DE PRODUCTO ---------- */
.producto-page-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:50px 20px 90px;
  position:relative;
  z-index:2;
}

.producto-layout{
  display:grid;
  grid-template-columns:2.1fr 1fr;
  gap:44px;
  align-items:start;
}

.producto-main{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:36px;
  min-width:0;
}

.producto-image{
  width:100%;
  max-width:600px;
  max-height:600px;
  border-radius:20px;
  overflow:hidden;
  background:var(--panel-2);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:0;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 20px 50px rgba(225,6,0,0.16);
  position:relative;
}
.producto-image:has(.prod-img-placeholder){ min-height:280px; }
.producto-image img{ width:100%; height:auto; max-height:600px; display:block; object-fit:contain; }

.prod-gallery-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(10,10,10,0.55);
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  backdrop-filter:blur(3px);
  transition:background .15s ease, transform .15s ease, border-color .15s ease;
  z-index:2;
}
.prod-gallery-arrow:hover{ background:var(--red); border-color:var(--red); }
.prod-gallery-prev{ left:12px; }
.prod-gallery-prev:hover{ transform:translateY(-50%) translateX(-2px); }
.prod-gallery-next{ right:12px; }
.prod-gallery-next:hover{ transform:translateY(-50%) translateX(2px); }

.prod-gallery-dots{
  position:absolute;
  left:0; right:0; bottom:12px;
  display:flex;
  justify-content:center;
  gap:6px;
  z-index:2;
}
.prod-gallery-dot{
  width:7px; height:7px;
  border-radius:50%;
  background:rgba(255,255,255,0.35);
  transition:background .15s ease, transform .15s ease;
}
.prod-gallery-dot.active{ background:var(--red); transform:scale(1.2); }

.producto-info{
  min-width:0;
  width:100%;
  max-width:600px;
  text-align:left;
}

.producto-nombre{
  font-family:'Anton', sans-serif;
  letter-spacing:.5px;
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom:14px;
}

.producto-badges-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.prod-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.2px;
  padding:6px 12px;
  border-radius:999px;
  white-space:nowrap;
}
.prod-badge-stock{
  background:rgba(46,204,113,0.14);
  color:var(--green);
  border:1px solid rgba(46,204,113,0.3);
}
.prod-badge-entrega{
  background:rgba(225,6,0,0.12);
  color:var(--red-light);
  border:1px solid rgba(225,6,0,0.3);
}

.producto-price-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:4px;
}
.producto-price-row-main{ margin-bottom:4px; }
.producto-price{ font-size:2.3rem; font-weight:800; color:var(--white); line-height:1; }
.producto-price-old{ font-size:1.05rem; color:var(--grey); text-decoration:line-through; }
.prod-badge-off{
  display:inline-flex;
  align-items:center;
  font-size:11.5px;
  font-weight:700;
  color:var(--red-light);
  background:rgba(225,6,0,0.14);
  border:1px solid rgba(225,6,0,0.3);
  padding:4px 10px;
  border-radius:999px;
}
.producto-price-note{ font-size:13px; color:var(--grey); margin-bottom:24px; }

.producto-actions{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:12px;
}
.producto-actions .btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:15px 16px;
  font-size:14px;
  letter-spacing:.3px;
  border-radius:999px;
}
.producto-actions .btn-primary{
  background:linear-gradient(135deg, var(--red-light), var(--red));
  box-shadow:0 12px 28px rgba(225,6,0,0.35);
}
.producto-actions .btn-secondary{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.14);
}
.producto-actions .btn-wsp{ margin-bottom:0; }

.producto-desc-block{
  margin-top:16px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.producto-desc-block h2{
  font-family:'Anton', sans-serif;
  font-size:1.25rem;
  letter-spacing:.5px;
  margin-bottom:12px;
}
.producto-desc-block h2 span{ color:var(--red-light); }
.producto-desc-block p{ color:var(--grey); font-size:14.5px; line-height:1.65; white-space:pre-line; }

.productos-sustitutos-wrap{
  margin-top:26px;
}

.prod-badge-off-mini{
  display:inline-flex;
  font-size:10.5px;
  font-weight:700;
  color:var(--red-light);
  text-decoration:none;
  margin-left:4px;
}

.producto-sidebar{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.info-bubble{
  background:var(--panel);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:22px 20px;
}
.info-bubble-icon{
  width:42px; height:42px;
  border-radius:12px;
  background:rgba(225,6,0,0.14);
  color:var(--red-light);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
.info-bubble-title{ font-weight:700; font-size:14.5px; margin-bottom:6px; }
.info-bubble-sub{ color:var(--grey); font-size:13px; line-height:1.55; }

.pago-badges{ display:flex; flex-direction:column; gap:8px; margin-top:2px; }
.pago-badge{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:10px;
  font-size:12.5px;
  font-weight:700;
}
.pago-badge .pago-dot{ width:9px; height:9px; border-radius:50%; background:currentColor; flex-shrink:0; }
.pago-mp{ background:rgba(0,158,227,0.14); color:#3fb6ea; }
.pago-pp{ background:rgba(0,112,186,0.14); color:#4f9eea; }
.pago-bn{ background:rgba(240,185,11,0.14); color:#f0b90b; }

@media (max-width:900px){
  .producto-layout{ grid-template-columns:1fr; }
  .producto-sidebar{ flex-direction:row; flex-wrap:wrap; }
  .info-bubble{ flex:1 1 220px; }
}
@media (max-width:820px){
  .producto-layout{
    display: flex !important;
    flex-direction: column !important;
    gap: 24px;
    width: 100% !important;
    max-width: 100% !important;
  }
  .producto-main{
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  .producto-image{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  .producto-image img{
    width: 100% !important;
    height: auto !important;
  }
  .producto-info{
    width: 100% !important;
  }
  .producto-sidebar{
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 16px;
  }
  .info-bubble{
    width: 100% !important;
    flex: none !important;
  }
}
@media (max-width:520px){
  .producto-layout{
    gap: 16px !important;
  }
  .producto-main{
    gap: 12px !important;
  }
  .producto-sidebar{
    gap: 10px !important;
  }
}
/* ---------- footer de contacto (fijo al final de cada página) ---------- */
.site-footer{
  border-top:1px solid rgba(255,255,255,0.08);
  background:var(--panel);
  margin-top:40px;
  padding:28px 20px 90px;
}
.site-footer-inner{
  max-width:720px;
  margin:0 auto;
  text-align:center;
}
.site-footer-title{
  display:block;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--grey);
  margin-bottom:16px;
}
.site-footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}
.footer-link{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:999px;
  color:var(--white);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  background:rgba(255,255,255,0.03);
  transition:border-color .15s, background .15s, color .15s;
}
.footer-link svg{ width:16px; height:16px; flex-shrink:0; }
.footer-link:hover{
  border-color:var(--red);
  background:rgba(225,6,0,0.12);
  color:var(--red-light);
}
@media (max-width:480px){
  .site-footer-links{ gap:9px; }
  .footer-link{ padding:8px 13px; font-size:12.5px; }
}

/* ---------- botón flotante de soporte (fijo en todas las páginas) ---------- */
.soporte-flotante{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  font-family:'Inter', sans-serif;
}
.soporte-menu{
  display:flex;
  flex-direction:column;
  gap:8px;
  opacity:0;
  transform:translateY(8px) scale(0.98);
  pointer-events:none;
  transition:opacity 0.18s ease, transform 0.18s ease;
}
.soporte-flotante.open .soporte-menu{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.soporte-opcion{
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 16px;
  border-radius:999px;
  background:var(--panel-2);
  color:var(--white);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  border:1px solid rgba(247,245,242,0.12);
  box-shadow:0 8px 20px rgba(0,0,0,0.35);
  white-space:nowrap;
  transition:transform 0.15s ease, border-color 0.15s ease;
}
.soporte-opcion:hover{ transform:translateY(-2px); border-color:rgba(247,245,242,0.3); }
.soporte-opcion svg{ width:17px; height:17px; flex-shrink:0; }
.soporte-opcion.soporte-wsp svg{ color:#25D366; }
.soporte-opcion.soporte-discord svg{ color:#5865F2; }

.soporte-btn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:13px 20px;
  border-radius:999px;
  background:var(--red);
  color:var(--white);
  font-size:14px;
  font-weight:700;
  border:none;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(225,6,0,0.45);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.soporte-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(225,6,0,0.55); }
.soporte-btn svg{ width:18px; height:18px; flex-shrink:0; }

@media (max-width:520px){
  .soporte-flotante{ right:12px; bottom:12px; }
  .soporte-btn{ padding:12px 16px; font-size:13px; }
  .soporte-btn span.soporte-btn-label{ display:none; }
}
/* ============================================================
   CARRITO DE COMPRAS (solo para visitantes sin cuenta)
   ============================================================ */
.cart-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  color:var(--white);
  cursor:pointer;
  flex-shrink:0;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.cart-btn:hover{ transform:translateY(-1px); border-color:var(--red); background:rgba(225,6,0,0.12); }
.cart-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border-radius:999px;
  background:var(--red);
  color:var(--white);
  font-family:'Inter',sans-serif;
  font-size:10.5px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 8px rgba(225,6,0,0.5);
}

/* botón "agregar al carrito" en la card del catálogo */
.prod-actions{ margin-top:auto; display:flex; flex-direction:column; gap:8px; }
.prod-cart-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:transparent;
  color:var(--white);
  border:1px solid rgba(247,245,242,0.3);
  border-radius:999px;
  padding:11px 16px;
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:0.5px;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .2s ease, border-color .2s ease;
}
.prod-cart-btn:hover{ transform:translateY(-2px); border-color:var(--white); }
.prod-cart-btn:disabled{ opacity:0.4; cursor:not-allowed; transform:none; }

.prod-avisame-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#25D366;
  color:#0a0a0a;
  border:none;
  border-radius:999px;
  padding:11px 16px;
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:0.5px;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:transform .2s ease, opacity .2s ease;
}
.prod-avisame-btn:hover{ transform:translateY(-2px); opacity:0.92; }

/* lista dentro del modal del carrito */
.carrito-lista{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:320px;
  overflow-y:auto;
  margin-bottom:14px;
  padding-right:2px;
}
.carrito-item{
  display:flex;
  align-items:center;
  gap:10px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:8px 10px;
}
.carrito-item-img{
  width:46px; height:46px;
  border-radius:10px;
  overflow:hidden;
  flex-shrink:0;
  background:var(--panel-2);
  display:flex; align-items:center; justify-content:center;
}
.carrito-item-img img{ width:100%; height:100%; object-fit:cover; }
.carrito-item-info{ flex:1; min-width:0; }
.carrito-item-nombre{
  font-size:13px; font-weight:700; color:var(--white);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.carrito-item-precio{ font-size:11.5px; color:var(--grey); margin-top:1px; }
.carrito-item-qty{
  display:flex; align-items:center; gap:6px;
  flex-shrink:0;
}
.qty-btn{
  width:22px; height:22px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.2);
  background:transparent;
  color:var(--white);
  font-size:14px;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s ease, background .2s ease;
}
.qty-btn:hover{ border-color:var(--red); background:rgba(225,6,0,0.15); }
.qty-value{ min-width:16px; text-align:center; font-size:13px; font-weight:700; color:var(--white); }
.carrito-item-subtotal{
  font-size:12.5px; font-weight:700; color:var(--red-light);
  flex-shrink:0; min-width:70px; text-align:right;
}
.carrito-item-quitar{
  background:none; border:none; color:var(--grey);
  font-size:14px; cursor:pointer; padding:4px 2px; flex-shrink:0;
  transition:color .2s ease;
}
.carrito-item-quitar:hover{ color:var(--red-light); }

.carrito-total-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 4px;
  margin-bottom:14px;
  border-top:1px solid rgba(255,255,255,0.1);
  border-bottom:1px solid rgba(255,255,255,0.1);
  font-size:14px;
  color:var(--grey);
}
.carrito-total-row strong{ font-family:'Anton', sans-serif; font-size:1.3rem; color:var(--red-light); letter-spacing:0.5px; }

.carrito-vacio{
  text-align:center;
  color:var(--grey);
  font-size:13px;
  padding:30px 10px;
}

/* botón de carrito en el topbar simple (producto.html, etc.) */
.topbar:not(.topbar-main) .cart-btn{
  position:absolute;
  right:20px;
  top:18px;
}

/* ============================================================
   NAV LATERAL IZQUIERDA (solo en index.html) — se abre con
   el botón de hamburguesa que está a la izquierda del logo
   ============================================================ */

.topbar-brand-row{
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0;
}

.hamburger-btn{
  width:34px;
  height:34px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}
.hamburger-btn span{
  display:block;
  width:21px;
  height:2px;
  border-radius:2px;
  background:var(--white);
  transition:background .2s ease, transform .25s ease, opacity .2s ease;
}
.hamburger-btn:hover span{ background:var(--red); }
.hamburger-btn.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger-btn.active span:nth-child(2){ opacity:0; }
.hamburger-btn.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.side-nav-backdrop{
  position:fixed;
  inset:0;
  background:transparent;
  z-index:89;
  opacity:0;
  pointer-events:none;
}
.side-nav-backdrop.open{ opacity:1; pointer-events:auto; }

.side-nav{
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:260px;
  max-width:80vw;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(circle at 20% -10%, rgba(225,6,0,0.35) 0%, rgba(225,6,0,0) 45%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 2px, rgba(255,255,255,0) 2px 14px),
    linear-gradient(180deg, #1e1e1e 0%, #161616 45%, #0d0d0d 100%);
  border-right:1px solid rgba(225,6,0,0.25);
  z-index:90;
  transform:translateX(-100%);
  transition:transform .28s ease;
  box-shadow:0 0 50px rgba(0,0,0,0.7);
}
.side-nav.open{ transform:translateX(0); }

.side-nav-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 18px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.side-nav-title{
  font-family:'Anton', sans-serif;
  font-size:13px;
  letter-spacing:1.5px;
  color:var(--white);
}
.side-nav-close{
  background:none;
  border:none;
  color:var(--grey);
  font-size:16px;
  cursor:pointer;
  line-height:1;
  padding:4px;
}
.side-nav-close:hover{ color:var(--red-light); }

.side-nav-body{
  padding:18px;
}

.side-nav-item{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  text-decoration:none;
  color:var(--white);
  transition:background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.side-nav-item:hover{
  background:rgba(225,6,0,0.1);
  border-color:rgba(225,6,0,0.45);
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(225,6,0,0.18);
}
.side-nav-item:hover .side-nav-icon{
  background:var(--red);
  color:var(--white);
  box-shadow:0 0 0 4px rgba(225,6,0,0.18);
}
.side-nav-item:hover .side-nav-arrow{
  color:var(--red-light);
  transform:translateX(3px);
}

.side-nav-icon{
  width:42px;
  height:42px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:rgba(225,6,0,0.14);
  color:var(--red-light);
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.side-nav-icon svg{ width:21px; height:21px; }

.side-nav-text{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.side-nav-label{
  font-size:13.5px;
  font-weight:800;
  letter-spacing:0.6px;
  color:var(--white);
}

.side-nav-sub{
  font-size:11.5px;
  color:var(--grey);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.side-nav-arrow{
  width:16px;
  height:16px;
  flex-shrink:0;
  margin-left:auto;
  color:var(--grey);
  transition:color .2s ease, transform .2s ease;
}
.side-nav-arrow svg{ width:100%; height:100%; }

@media (max-width:700px){
  .side-nav{ width:240px; }
}
/* ============================================================
   NOTIFICACIONES — campanita flotante (mensajes desde Telegram)
   ============================================================ */
.notif-flotante{
  position:fixed;
  right:18px;
  bottom:80px;
  z-index:10000;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}
.notif-btn{
  position:relative;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.12);
  background:var(--panel);
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,0.45);
  transition:transform 0.15s ease;
}
.notif-btn:hover{ transform:translateY(-2px); }
.notif-btn svg{ width:20px; height:20px; }
.notif-badge{
  position:absolute;
  top:-4px;
  right:-4px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border-radius:9px;
  background:var(--red);
  color:var(--white);
  font-size:10.5px;
  font-weight:700;
  align-items:center;
  justify-content:center;
  display:none;
  border:2px solid var(--black);
}
.notif-panel{
  display:none;
  width:300px;
  max-height:360px;
  overflow-y:auto;
  background:var(--panel);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,0.55);
}
.notif-flotante.open .notif-panel{ display:block; }
.notif-panel-header{
  font-family:'Anton', sans-serif;
  font-size:13px;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:var(--red-light);
  padding:14px 16px 10px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.notif-panel-lista{ padding:6px 0; }
.notif-vacio{
  padding:18px 16px;
  font-size:12.5px;
  color:var(--grey);
}
.notif-item{
  padding:10px 16px;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.notif-item:last-child{ border-bottom:none; }
.notif-item-nueva{ background:rgba(225,6,0,0.06); }
.notif-item-texto{
  font-size:12.5px;
  color:var(--white);
  line-height:1.5;
  white-space:pre-wrap;
}
.notif-item-fecha{
  font-size:10.5px;
  color:var(--grey);
  margin-top:4px;
}
@media (max-width:700px){
  .notif-flotante{ right:12px; bottom:76px; }
  .notif-panel{ width:min(88vw, 320px); }
}

/* ============================================================
   CUPONES DE DESCUENTO
   ============================================================ */
.cupon-box{
  display:flex;
  gap:8px;
  margin:14px 0 4px;
}
.cupon-box input{
  flex:1;
  background:var(--panel-2);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:10px;
  padding:10px 12px;
  color:var(--white);
  font-family:'Inter', sans-serif;
  font-size:13px;
}
.cupon-box .btn{
  padding:10px 18px;
  font-size:13px;
  white-space:nowrap;
}
.cupon-msg{
  font-size:12px;
  margin-bottom:10px;
  min-height:16px;
}
.cupon-msg.ok{ color:var(--green); }
.cupon-msg.error{ color:var(--red-light); }