/* Tienda de Luniatic — estética estilo Dawn (GUI de Minecraft).
   Silkscreen para títulos, precios y etiquetas · Pixelify Sans SOLO para
   botones y pestañas · Noto Sans para texto corrido.
   Cero border-radius en toda la interfaz: el vocabulario es el bevel. */

:root {
  --pixel: 'Silkscreen', 'Pixelify Sans', monospace;
  /* Pixel font proporcional, con minúsculas y acentos: es lo más parecido a la
     tipografía del juego que hay en Google Fonts. Ojo con los tamaños — a igual
     px se ve más chica que una serif: 20px acá igualan el cap-height que tenía
     Libertinus Math a 17px, que es lo que había antes. */
  --boton: 'Pixelify Sans', 'Silkscreen', monospace;
  --sans: 'Noto Sans', system-ui, -apple-system, sans-serif;

  --fondo: #0B0C11;
  --panel: #17191F;
  --panel-violeta: #191428;
  --hundido: #0F1115;
  --barra: #12141B;
  --pie-fondo: #08090D;
  --tinta: #05060A;

  --borde: #313644;
  --borde-hover: #4A4F66;
  --separador: #22242E;
  --sec: #1E212A;
  --sec-hover: #262A36;
  --bisel-claro: #3B4154;
  --bisel-oscuro: #12141B;

  --violeta: #7C5CE8;
  --violeta-hover: #8B6FF0;
  --violeta-bisel: #A98FFF;
  --violeta-oscuro: #4B2FB0;
  --violeta-borde: #6B4CD8;
  --lila: #C9B8FF;
  --crema: #F5EFD6;
  --verde: #6FE0A8;
  --verde-texto: #05130C;
  --rojo: #B44;
  --rojo-texto: #FF7A7A;
  --discord: #5865F2;

  --t1: #E6E4F0;
  --t2: rgba(230, 228, 240, .66);
  --t3: rgba(230, 228, 240, .5);
  --t4: rgba(230, 228, 240, .4);

  --ancho: 1240px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scrollbar-color: var(--violeta) var(--fondo); }

/* Los saltos por ancla (#rangos, "saltar a los rangos", el logo a #top) se
   animan en vez de teletransportar.
   🔑 Esto NO toca la rueda ni el dedo: el scroll normal sigue yendo a la
   velocidad del sistema. Solo cambia el salto programado, y la duracion la
   decide el navegador segun la distancia, con tope propio; por eso no se
   fuerza con JS, que es lo que suele quedar lento y a tirones. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--t1);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.bloqueado { overflow: hidden; }

a { color: var(--violeta-bisel); text-decoration: none; }
a:hover { color: var(--lila); }
a:not([href]) { color: inherit; cursor: default; }
::selection { background: var(--violeta); color: var(--fondo); }
img.pixel { image-rendering: pixelated; }
section[id] { scroll-margin-top: 66px; }

::-webkit-scrollbar { width: 16px; height: 16px; background: var(--fondo); }
::-webkit-scrollbar-track { background: var(--fondo); box-shadow: inset 3px 0 0 var(--tinta), inset -3px 0 0 var(--tinta); }
::-webkit-scrollbar-thumb {
  background: var(--violeta); border: 3px solid var(--fondo);
  box-shadow: inset 2px 2px 0 var(--violeta-bisel), inset -2px -2px 0 var(--violeta-oscuro);
}
::-webkit-scrollbar-thumb:hover { background: var(--violeta-hover); }

.saltar { position: absolute; left: -9999px; }
.saltar:focus {
  left: 16px; top: 16px; z-index: 95;
  background: var(--violeta); color: var(--fondo);
  padding: 10px 16px; font-family: var(--pixel); font-size: 11px;
}
:where(a, button, input, summary):focus-visible { outline: 3px solid var(--violeta-bisel); outline-offset: 2px; }

/* --------------------------------------------------------------- primitivas */

.ojo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--pixel); font-size: 11px; letter-spacing: .24em;
  color: var(--violeta-bisel);
}
.ojo em { font-style: normal; }
.ojo .raya { width: 34px; height: 3px; background: var(--borde); flex: none; }

/* Casilla de inventario 48x48 */
.casilla {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  background: var(--fondo);
  box-shadow: inset 0 0 0 3px var(--tinta), 0 0 0 2px var(--separador);
}

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 24px; border: 0; cursor: pointer;
  background: var(--violeta); color: var(--fondo);
  font-family: var(--boton); font-size: 20px; letter-spacing: .08em;
  box-shadow: inset 3px 3px 0 var(--violeta-bisel), inset -3px -3px 0 var(--violeta-oscuro), 0 0 0 3px var(--tinta);
  transition: background .15s;
}
.boton:hover:not(:disabled) { background: var(--violeta-hover); color: var(--fondo); }
.boton:active:not(:disabled) {
  box-shadow: inset -3px -3px 0 var(--violeta-bisel), inset 3px 3px 0 var(--violeta-oscuro), 0 0 0 3px var(--tinta);
}
.boton--grande { height: 70px; padding: 0 36px; font-size: 27px; letter-spacing: .07em; }
.boton--suave {
  background: var(--sec); color: var(--t1);
  box-shadow: inset 2px 2px 0 var(--bisel-claro), inset -2px -2px 0 var(--bisel-oscuro), 0 0 0 3px var(--tinta);
}
.boton--suave:hover:not(:disabled) { background: var(--sec-hover); color: var(--t1); }
.boton--suave:active:not(:disabled) {
  box-shadow: inset -2px -2px 0 var(--bisel-claro), inset 2px 2px 0 var(--bisel-oscuro), 0 0 0 3px var(--tinta);
}
.boton--carrito { height: 38px; padding: 0 14px; font-size: 14px; flex: none; }
.carrito-btn__n {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--fondo); color: var(--crema);
  font-family: var(--pixel); font-size: 10px; letter-spacing: 0;
}

.cuadro-cerrar {
  width: 30px; height: 30px; flex: none; border: 0; cursor: pointer;
  background: var(--sec); color: var(--t1); font-size: 16px; line-height: 1;
  box-shadow: inset 2px 2px 0 var(--bisel-claro), inset -2px -2px 0 var(--bisel-oscuro);
  transition: background .15s;
}
.cuadro-cerrar:hover { background: var(--rojo); }

/* ---------------------------------------------------------------- cabecera */

.cab {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 66px;
  background: rgba(11, 12, 17, .88);
  backdrop-filter: blur(8px);
  box-shadow: 0 3px 0 var(--tinta);
  transition: background .25s, box-shadow .25s;
}
.cab--fija { background: rgba(9, 10, 14, .94); box-shadow: 0 3px 0 var(--tinta), 0 14px 34px rgba(0, 0, 0, .55); }
.cab__fila {
  max-width: var(--ancho); margin: 0 auto; height: 100%;
  padding: 0 20px; display: flex; align-items: center; gap: 16px;
}
.cab__fila > * { flex: none; white-space: nowrap; }
.cab__hueco { flex: 1 !important; }

.marca { display: flex; align-items: center; gap: 12px; color: var(--t1); }
.marca__nombre { font-family: var(--pixel); font-size: 16px; letter-spacing: .1em; }
.nav { display: flex; align-items: center; gap: 20px; }
.nav a { font-family: var(--pixel); font-size: 11px; letter-spacing: .14em; color: rgba(230, 228, 240, .62); }
.nav a:hover { color: var(--t1); }

.chip {
  display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px;
  background: var(--panel); color: var(--t1); border: 0;
  box-shadow: 0 0 0 3px var(--tinta);
  font-family: var(--sans); font-size: 12px;
}
.chip--ip {
  background: var(--sec); cursor: pointer;
  box-shadow: inset 2px 2px 0 var(--bisel-claro), inset -2px -2px 0 var(--bisel-oscuro), 0 0 0 3px var(--tinta);
}
.chip--ip:hover { background: var(--sec-hover); }
.chip--ip code { font-family: var(--pixel); font-size: 11px; color: var(--crema); }
.chip__accion { font-family: var(--pixel); font-size: 9px; color: var(--verde); }
.chip--discord {
  background: var(--discord); color: #fff; cursor: pointer;
  box-shadow: inset 2px 2px 0 #8890FF, inset -2px -2px 0 #3742C4, 0 0 0 3px var(--tinta);
}
.chip--discord:hover { background: #6b76ff; color: #fff; }
.chip--discord span { font-family: var(--pixel); font-size: 10px; letter-spacing: .06em; }
.chip__n { font-family: var(--pixel); font-size: 10px; color: var(--verde); }
.chip__tenue { font-size: 11px; color: var(--t3); }
.punto { width: 8px; height: 8px; flex: none; background: var(--verde); box-shadow: 0 0 8px var(--verde); }

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 130px 24px 100px; text-align: center; overflow: hidden;
}
.hero__escena {
  position: absolute; inset: -8% 0; width: 100%; height: 116%;
  object-fit: cover; will-change: transform;
}
.hero__velo {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(11,12,17,.55) 0%, rgba(11,12,17,.25) 30%,
    rgba(11,12,17,.55) 68%, rgba(11,12,17,.92) 90%, var(--fondo) 100%);
}

.hero__caja {
  position: relative; z-index: 10; max-width: 980px;
  display: flex; flex-direction: column; align-items: center; gap: 30px;
}
.hero__logo {
  position: relative; width: 200px; height: 200px;
  animation: lun-float 6.4s cubic-bezier(.45, 0, .55, 1) infinite;
  will-change: transform;
}
.hero__logo img { position: relative; display: block; width: 200px; height: 200px; }
/* Se anima SOLO la opacidad: animar filter:drop-shadow repinta cada frame. */
.hero__aura {
  position: absolute; inset: -16%;
  background: radial-gradient(closest-side, rgba(124, 92, 232, .5), rgba(124, 92, 232, 0) 72%);
  animation: lun-aura 5.4s ease-in-out infinite;
}
.hero__texto { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hero__ojo { letter-spacing: .3em; }
.hero__titulo {
  margin: 0; font-family: var(--pixel); font-weight: 400;
  font-size: clamp(28px, 4.2vw, 54px); line-height: 1.2; text-transform: uppercase;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .6));
}
.hero__titulo span { display: inline-block; }
.hero__titulo .acento { color: var(--violeta-bisel); }
.hero__bajada { margin: 0; max-width: 560px; font-size: 17px; line-height: 1.6; color: rgba(230, 228, 240, .72); text-wrap: pretty; }
.hero__acciones { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }

.hero__pista {
  position: absolute; bottom: 26px; left: 50%; margin-left: -110px; width: 220px; z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--pixel); font-size: 10px; letter-spacing: .24em; color: var(--t3);
  transition: opacity .3s;
}
.hero__pista:hover { color: var(--t1); }
.hero__pista-txt { animation: lun-hint-text 3s ease-in-out infinite; }
.flecha { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.flecha i { display: block; height: 3px; background: currentColor; animation: lun-hint-bob 1.6s ease-in-out infinite; }
.flecha i:nth-child(1) { width: 14px; }
.flecha i:nth-child(2) { width: 8px;  animation-delay: 120ms; }
.flecha i:nth-child(3) { width: 3px;  animation-delay: 240ms; }

.anim .hero__ojo, .anim .hero__titulo span, .anim .hero__bajada, .anim .hero__acciones {
  animation: lun-word 720ms cubic-bezier(.22, 1, .36, 1) both;
}
.anim .hero__ojo { animation-delay: 60ms; }
.anim .hero__titulo .p1 { animation-delay: 140ms; }
.anim .hero__titulo .p2 { animation-delay: 380ms; }
.anim .hero__titulo .p3 { animation-delay: 460ms; }
.anim .hero__bajada { animation-delay: 560ms; }
.anim .hero__acciones { animation-delay: 680ms; }

/* -------------------------------------------------------------- secciones */

.seccion { position: relative; z-index: 12; max-width: var(--ancho); margin: 0 auto; padding: 96px 24px; }
.seccion--angosta { max-width: 908px; }
.seccion__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 40px; }
/* Apila el bloque de texto de la cabecera. El :not() es obligatorio: sin el,
   esta regla le gana por especificidad a .pestanas y le impone direccion columna. */
.seccion__cab > div:not(.pestanas) { display: flex; flex-direction: column; gap: 14px; }
.seccion__titulo {
  margin: 0; font-family: var(--pixel); font-weight: 400;
  font-size: clamp(22px, 2.5vw, 32px); line-height: 1.3; text-transform: uppercase;
}
.seccion__bajada { margin: 0; font-size: 16px; line-height: 1.6; color: var(--t2); }
.seccion__nota { margin: 22px 0 0; font-size: 14px; line-height: 1.7; color: var(--t2); max-width: 72ch; }
.seccion__nota strong { color: var(--t1); }

/* wrap como red de contencion: un nombre de categoria largo pasa a un segundo
   renglon en vez de desbordar la caja, porque min-width:auto impide encogerlos. */
.pestanas { display: flex; flex-wrap: wrap; padding: 6px; gap: 6px; background: var(--panel); box-shadow: 0 0 0 3px var(--tinta); }
.pestanas button {
  height: 44px; padding: 0 22px; border: 0; cursor: pointer;
  font-family: var(--boton); font-size: 18px; letter-spacing: .08em;
  background: transparent; color: rgba(230, 228, 240, .6);
  transition: background .15s, color .15s;
}
.pestanas button:hover { color: var(--t1); }
.pestanas button[aria-selected="true"] { background: var(--violeta); color: var(--fondo); }

.estado { text-align: center; padding: 50px 20px; color: var(--t3); }
.estado--error h3 { margin: 0 0 10px; font-family: var(--pixel); font-weight: 400; font-size: 15px; text-transform: uppercase; color: var(--t1); }
.estado--error .boton { margin-top: 18px; }
.spinner { width: 22px; height: 22px; display: inline-block; border: 3px solid var(--borde); border-top-color: var(--violeta); animation: giro .8s steps(8) infinite; }
@keyframes giro { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------- rangos */

.rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.rejilla:has(> .paquete:only-child) { grid-template-columns: minmax(0, 400px); }
.rejilla:has(> .paquete:nth-child(2)):not(:has(> .paquete:nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Habilidades: se topan al ancho de una tarjeta de rango. Sin esto, dos solas se
   estiran a 583px y no pegan con las de la seccion de arriba, que miden 380. */
#habilidades-lista .rejilla {
  grid-template-columns: repeat(auto-fit, minmax(280px, 400px));
  justify-content: center;
}

.paquete {
  position: relative; display: flex; flex-direction: column; gap: 16px;
  padding: 30px 26px 26px;
  background: var(--panel); border: 3px solid var(--borde);
  box-shadow: 0 0 0 3px var(--tinta);
  transition: transform .24s cubic-bezier(.22, 1, .36, 1), border-color .24s, box-shadow .24s;
}
.paquete:hover { transform: translateY(-10px); border-color: var(--borde-hover); box-shadow: 0 0 0 3px var(--tinta), 0 22px 44px rgba(0, 0, 0, .5); }
.paquete--destacado { background: var(--panel-violeta); border-color: var(--violeta); animation: lun-borde 3.4s ease-in-out 900ms infinite; }
.paquete--destacado:hover { transform: translateY(-14px); }

.paquete__insignia {
  position: absolute; top: -17px; left: 22px; padding: 7px 11px;
  background: var(--violeta); color: var(--fondo);
  font-family: var(--pixel); font-size: 9px; letter-spacing: .12em;
  box-shadow: 0 0 0 3px var(--tinta);
}
.paquete__glifo { font-size: 30px; line-height: 1; text-shadow: 0 3px 0 var(--tinta); }
.g-astral { color: var(--violeta-bisel); }
.g-cosmico { color: var(--lila); }
.g-lunatico { color: var(--crema); }
/* El vuelo no es un rango: verde para que se lea como otra familia de producto. */
.g-vuelo { color: var(--verde); }

.paquete__nombre { margin: 0; font-family: var(--pixel); font-weight: 400; font-size: 16px; letter-spacing: .04em; line-height: 1.5; }
.paquete__nombre .plazo { color: rgba(230, 228, 240, .42); }
.paquete__nombre .plazo--perm { color: var(--verde); }

.paquete__precio { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.precio { font-family: var(--pixel); font-size: 28px; color: var(--crema); }
.precio__antes { font-family: var(--sans); font-size: 13px; color: var(--t4); text-decoration: line-through; }
.paquete__moneda { font-size: 12px; color: var(--t3); }

.destacados { margin: 0; padding: 0; list-style: none; flex: 1; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; color: rgba(230, 228, 240, .8); }
.destacados li { display: flex; gap: 10px; }
.destacados li::before { content: '✓'; color: var(--verde); flex: none; }
.paquete__resumen { margin: 0; flex: 1; font-size: 14px; line-height: 1.5; color: rgba(230, 228, 240, .8); }
.paquete__acciones { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.paquete__acciones .boton { width: 100%; }
.paquete__acciones .boton--suave { height: 44px; font-size: 15px; letter-spacing: .16em; }

/* --------------------------------------------------- meta y top (opcional) */

.paneles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; padding-top: 0; }
.panel-info { display: flex; flex-direction: column; gap: 12px; padding: 26px; background: var(--panel); border: 3px solid var(--borde); box-shadow: 0 0 0 3px var(--tinta); }
.panel-info__titulo { margin: 0; font-family: var(--pixel); font-weight: 400; font-size: 14px; }
.panel-info__cifra { margin: 0; font-size: 13px; color: var(--t3); }
.panel-info__cifra strong { font-family: var(--pixel); font-size: 22px; color: var(--crema); margin-right: 8px; }
.barra { height: 10px; background: var(--fondo); box-shadow: inset 0 0 0 3px var(--tinta); }
.barra__relleno { height: 100%; background: var(--violeta); box-shadow: inset 0 2px 0 var(--violeta-bisel); }
.top { margin: 0; padding: 0; list-style: none; counter-reset: puesto; }
.top li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--separador); }
.top li:last-child { border-bottom: 0; }
.top li::before { counter-increment: puesto; content: counter(puesto, decimal-leading-zero); font-family: var(--pixel); font-size: 10px; color: var(--violeta-bisel); flex: none; }
.top__nombre { flex: 1; font-size: 14px; }
.top__dato { font-size: 11px; color: var(--t3); }

/* ------------------------------------------------------------ comparativa */

.marco { background: var(--panel); padding: 3px; box-shadow: 0 0 0 3px var(--tinta); }
.tabla-scroll { overflow-x: auto; border: 3px solid var(--borde); }
.comparativa { width: 100%; border-collapse: collapse; font-size: 14px; }
.comparativa :is(th, td) { padding: 13px 16px; text-align: center; border-bottom: 1px solid var(--separador); }
.comparativa thead th {
  background: var(--barra); border-bottom: 3px solid var(--borde);
  font-family: var(--pixel); font-weight: 400; font-size: 10px; letter-spacing: .12em; white-space: nowrap;
}
.comparativa thead th:first-child { color: var(--t4); }
.comparativa .c-sin { color: var(--t3); }
.comparativa .c-astral { color: var(--violeta-bisel); }
.comparativa .c-cosmico { color: var(--lila); background: var(--panel-violeta); }
.comparativa .c-lunatico { color: var(--crema); }
.comparativa tbody th { text-align: left; font-weight: 400; color: rgba(230, 228, 240, .9); white-space: nowrap; background: var(--panel); }
.comparativa td { color: rgba(230, 228, 240, .78); }
.comparativa td.col-c { background: var(--panel-violeta); }
.comparativa td.si { color: var(--verde); }
.comparativa td.nada { color: var(--t4); }
.comparativa tbody tr { transition: background .16s; }
.comparativa tbody tr:hover { background: rgba(124, 92, 232, .09); }
.comparativa tbody tr:last-child :is(th, td) { border-bottom: 0; }
.comparativa code { font-family: var(--pixel); font-size: 9px; letter-spacing: .04em; color: var(--lila); }

/* -------------------------------------------------------------- preguntas */

.faqs { display: flex; flex-direction: column; gap: 12px; }
.faq { background: var(--panel); box-shadow: 0 0 0 3px var(--tinta); transition: box-shadow .2s; }
.faq:hover { box-shadow: 0 0 0 3px #2E3342; }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px;
  font-family: var(--pixel); font-size: 12px; line-height: 1.6; color: var(--t1);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary span[aria-hidden] {
  font-family: var(--pixel); font-size: 16px; color: var(--violeta-bisel); flex: none;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), color .22s;
}
.faq[open] summary span[aria-hidden] { transform: rotate(135deg); color: var(--lila); }
.faq p { margin: 0; padding: 0 22px 22px; font-size: 15px; line-height: 1.65; color: rgba(230, 228, 240, .72); }
.faq p strong { color: var(--t1); }
.faq[open] p { animation: lun-in 300ms ease-out both; }

/* -------------------------------------------------------------------- pie */

.pie { position: relative; z-index: 12; background: var(--pie-fondo); box-shadow: 0 -3px 0 var(--tinta); padding: 44px 24px; }
.pie__fila { max-width: var(--ancho); margin: 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.pie__marca { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.pie__logo { display: flex; align-items: center; gap: 12px; font-family: var(--pixel); font-size: 13px; letter-spacing: .1em; }
.pie__marca p { margin: 0; font-size: 12px; line-height: 1.7; color: rgba(230, 228, 240, .42); }
.pie__cols { display: flex; gap: 56px; flex-wrap: wrap; }
.pie__col { display: flex; flex-direction: column; gap: 11px; }
.pie__col .ojo { font-size: 9px; letter-spacing: .2em; color: var(--t4); }
.pie__col :is(a, button) { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font-family: var(--sans); font-size: 13px; color: rgba(230, 228, 240, .72); }
.pie__col :is(a, button):hover { color: var(--violeta-bisel); }

/* ------------------------------------------------------------------ aviso */

.aviso {
  position: fixed; left: 0; right: 0; bottom: 28px; z-index: 95;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  pointer-events: none;
}
.aviso > * { pointer-events: auto; }
.aviso__tic, #aviso-texto {
  background: var(--panel); box-shadow: 0 0 0 3px var(--tinta), 0 14px 40px rgba(0, 0, 0, .5);
  font-family: var(--pixel); font-size: 11px; letter-spacing: .06em;
  padding: 12px 14px;
}
.aviso__tic { color: var(--verde); padding: 12px; }
#aviso-texto { color: var(--t1); margin-left: -13px; }

/* ---------------------------------------------------------------- overlays */

.velo {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center; padding: 28px;
  background: rgba(5, 6, 10, .72);
  animation: lun-in 140ms ease-out both;
}
.dialogos-js .velo { animation: none; }
.dialogos-js :is(.ficha, .panel) { animation: none; }

.ficha, .panel {
  position: relative; width: 100%;
  background: var(--hundido); border: 3px solid var(--borde);
  box-shadow: 0 0 0 3px var(--tinta), 0 34px 90px rgba(0, 0, 0, .7);
  display: flex; flex-direction: column;
  animation: lun-pop 300ms cubic-bezier(.34, 1.38, .64, 1) both;
}
.ficha { max-width: 540px; max-height: 86vh; }
.panel { max-width: 580px; max-height: 88vh; }

.ficha__cab, .panel__cab {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 19px 22px; background: var(--barra); box-shadow: 0 3px 0 var(--tinta);
}
.ficha__id, .panel__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ficha__glifo { font-size: 20px; line-height: 1; color: var(--violeta-bisel); }
/* Sin glifo no ocupa lugar: si no, el gap del flex deja un hueco antes del titulo. */
.ficha__glifo:empty { display: none; }
.ficha__cab h2, .panel__cab h2 {
  margin: 0; font-family: var(--pixel); font-weight: 400; font-size: 12px; letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.panel__n { font-family: var(--pixel); font-size: 9px; letter-spacing: .1em; color: var(--t3); }

.ficha__cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 22px; }
/* La duracion es de las primeras cosas que el comprador busca, asi que va sola
   y grande. Antes era una pastilla de 9px perdida entre otras dos. */
.plazo {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 16px; background: var(--panel-violeta); box-shadow: 0 0 0 2px var(--tinta);
}
.plazo__et { font-family: var(--pixel); font-size: 10px; letter-spacing: .18em; color: var(--t3); }
.plazo__v  { font-family: var(--pixel); font-weight: 400; font-size: 17px; letter-spacing: .04em; color: var(--crema); }

.hereda {
  display: flex; align-items: baseline; gap: 9px; margin: -8px 0 0;
  font-size: 13px; line-height: 1.5; color: var(--lila);
}
.hereda span { color: var(--violeta-bisel); }

.grupo { display: flex; flex-direction: column; gap: 13px; }
.grupo__t {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--pixel); font-size: 11px; letter-spacing: .18em; color: var(--violeta-bisel);
}
.grupo__t i { flex: 1; height: 2px; background: var(--separador); }
.grupo ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }

.it {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 14.5px; line-height: 1.5; color: rgba(230, 228, 240, .9);
}
.it .txt { flex: 1; min-width: 0; }
/* Letra chica: la salvedad que evita el reembolso (que el cosmetico se paga con
   dinero del juego, por ejemplo). Va debajo, no entre parentesis. */
.it .fino { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: rgba(230, 228, 240, .64); }

/* Punto violeta en vez de la tilde verde: el verde queda reservado para lo que
   se gana, asi que no puede ser tambien la marca de todo. */
.it .pto {
  flex: none; width: 6px; height: 6px; margin-top: 1px;
  background: var(--violeta); box-shadow: 0 0 0 2px var(--violeta-oscuro);
  align-self: flex-start; position: relative; top: 7px;
}

/* La placa del comando. Era 8px y no se leia: ahora 13px, ancho fijo para que
   las placas queden alineadas en columna y la descripcion arranque toda igual. */
.it--cmd code {
  flex: none; min-width: 104px; padding: 7px 9px; text-align: center;
  background: var(--fondo); box-shadow: inset 0 0 0 2px var(--violeta-borde), 0 0 0 2px var(--tinta);
  font-family: var(--pixel); font-size: 13px; letter-spacing: .02em; color: var(--lila);
}

/* Un numero que sube. Se lee de un vistazo sin leer la frase entera. */
.it--dato { align-items: center; }
.it--dato .par { flex: none; display: flex; align-items: center; gap: 8px; font-family: var(--pixel); }
.it--dato .de { font-weight: 400; font-size: 14px; color: rgba(230, 228, 240, .6); text-decoration: line-through; }
.it--dato .par i { font-style: normal; font-size: 12px; color: var(--violeta-bisel); }
.it--dato .a  { font-weight: 400; font-size: 18px; color: var(--verde); }

/* Ganancia inmediata: el +N es el protagonista. */
.it--mas .mas {
  flex: none; min-width: 46px; padding: 5px 8px; text-align: center;
  background: rgba(111, 224, 168, .1); box-shadow: inset 0 0 0 2px rgba(111, 224, 168, .45);
  font-family: var(--pixel); font-size: 14px; color: var(--verde);
}

@media (max-width: 460px) {
  .it--cmd { flex-direction: column; align-items: stretch; gap: 7px; }
  .it--cmd code { min-width: 0; text-align: left; }
  .it--dato { flex-wrap: wrap; }
}
/* La nota es letra chica, pero es la que dice como se entrega la compra: estaba
   en --t4 (3,28:1), por debajo del minimo legible. */
.ficha__nota { margin: 0; padding-top: 14px; border-top: 2px solid var(--separador); font-size: 12px; line-height: 1.7; color: rgba(230, 228, 240, .62); }

.ficha__pie {
  flex: none; padding: 18px 22px 20px; background: var(--barra); box-shadow: 0 -3px 0 var(--tinta);
  display: flex; flex-direction: column; gap: 12px;
}
.ficha__precio { display: flex; align-items: baseline; justify-content: space-between; }
.ficha__precio .ojo { font-size: 11px; letter-spacing: .14em; color: var(--t2); }
.ficha__precio strong { font-family: var(--pixel); font-size: 26px; color: var(--crema); }
.ficha__pie .boton { height: 56px; }
.ficha__ya { margin: 0; text-align: center; font-size: 12px; color: var(--verde); }

/* ------------------------------------------------------------------ carrito */

.panel__cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.lineas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.linea { display: flex; align-items: center; gap: 14px; padding: 12px; background: var(--panel); box-shadow: 0 0 0 3px var(--tinta); }
/* Lleva la inicial del paquete, no un glifo: es tipografia, no un simbolo. */
.linea__casilla { width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; font-family: var(--pixel); font-size: 17px; line-height: 1; color: var(--lila); background: var(--fondo); box-shadow: inset 0 0 0 3px var(--tinta), 0 0 0 2px var(--separador); }
.linea__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.linea__nombre { font-family: var(--pixel); font-size: 11px; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linea__meta { font-size: 11.5px; color: rgba(230, 228, 240, .45); }
.stepper { display: flex; align-items: center; gap: 5px; flex: none; }
.stepper button {
  width: 28px; height: 28px; border: 0; cursor: pointer;
  background: var(--sec); color: var(--t1); font-family: var(--boton); font-size: 19px;
  box-shadow: inset 2px 2px 0 var(--bisel-claro), inset -2px -2px 0 var(--bisel-oscuro);
}
.stepper button:hover { background: var(--sec-hover); }
.stepper span { min-width: 24px; text-align: center; font-family: var(--pixel); font-size: 12px; }
.linea__sub { width: 84px; flex: none; text-align: right; font-family: var(--pixel); font-size: 13px; color: var(--crema); }
.linea__quitar { width: 24px; height: 24px; flex: none; border: 0; cursor: pointer; background: none; color: rgba(230, 228, 240, .35); font-size: 15px; line-height: 1; }
.linea__quitar:hover { color: var(--rojo-texto); }

.vaciar-fila { display: flex; justify-content: flex-end; }
.vaciar-fila button { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--sans); font-size: 12px; color: rgba(230, 228, 240, .42); }
.vaciar-fila button:hover { color: var(--rojo-texto); }

.vacio { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 34px 20px 30px; text-align: center; }
.vacio__casillas { display: flex; gap: 8px; }
.vacio__casillas span { width: 44px; height: 44px; background: var(--hundido); box-shadow: inset 3px 3px 0 var(--tinta), inset -3px -3px 0 #2A2E3C; }
.vacio p { margin: 0; font-size: 14px; color: var(--t3); }
.vacio .boton { height: 44px; font-size: 15px; letter-spacing: .16em; }

.entregar { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--panel); box-shadow: 0 0 0 3px var(--tinta); }
.entregar__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.entregar__cab .ojo { font-size: 10px; letter-spacing: .1em; }
.entregar__ok { font-size: 11.5px; color: var(--verde); }
.entregar__fila { display: flex; align-items: center; gap: 10px; }
.entregar__fila input {
  flex: 1; min-width: 0; height: 46px; padding: 0 14px;
  background: var(--fondo); border: 0; color: var(--crema);
  font-family: var(--pixel); font-size: 12px; outline: none;
  box-shadow: inset 3px 3px 0 var(--tinta), inset -2px -2px 0 var(--separador), 0 0 0 3px var(--tinta);
}
.entregar__fila input:focus { box-shadow: inset 3px 3px 0 var(--tinta), inset -2px -2px 0 var(--separador), 0 0 0 3px var(--violeta); }
.entregar__nota { margin: 0; font-size: 12px; line-height: 1.6; color: var(--t3); }
.entregar__nota strong { color: var(--t1); }
.usuario__error, .panel__error { margin: 0; font-size: 12px; color: var(--rojo-texto); }

.panel__pie { flex: none; padding: 18px 22px 20px; background: var(--barra); box-shadow: 0 -3px 0 var(--tinta); display: flex; flex-direction: column; gap: 12px; }
.panel__sub { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: rgba(230, 228, 240, .55); }
.panel__sub span:last-child { font-family: var(--pixel); font-size: 12px; color: rgba(230, 228, 240, .7); }
.panel__total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 10px; border-top: 2px solid var(--separador); }
.panel__total .ojo { font-size: 11px; letter-spacing: .14em; color: var(--t2); }
.panel__total strong { font-family: var(--pixel); font-size: 28px; color: var(--crema); }
.boton--pagar {
  height: 58px; font-size: 18px;
  background: var(--separador); color: rgba(230, 228, 240, .35);
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.06), inset -3px -3px 0 rgba(0,0,0,.35), 0 0 0 3px var(--tinta);
}
.boton--pagar:not(:disabled) {
  background: var(--verde); color: var(--verde-texto);
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.22), inset -3px -3px 0 rgba(0,0,0,.35), 0 0 0 3px var(--tinta);
}
.boton--pagar:hover:not(:disabled) { background: #82ecb6; color: var(--verde-texto); }
.boton--pagar:disabled { opacity: 1; }
.panel__nota { margin: 0; text-align: center; font-size: 12px; color: var(--t3); }

/* ------------------------------------------------------------ animaciones */

@keyframes lun-float { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-15px,0); } }
@keyframes lun-aura { 0%, 100% { opacity: .4; } 50% { opacity: .85; } }
@keyframes lun-in { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes lun-pop { 0% { opacity: 0; transform: translateY(14px) scale(.94); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes lun-sheet { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } }
@keyframes lun-word { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes lun-hint-text { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes lun-hint-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes lun-borde {
  0%, 100% { border-color: var(--violeta-borde); box-shadow: 0 0 0 3px var(--tinta), 0 0 34px rgba(124,92,232,.14); }
  50%      { border-color: #CDBEFF;              box-shadow: 0 0 0 3px var(--tinta), 0 0 74px rgba(124,92,232,.42); }
}

.anim [data-revelar] { opacity: 0; }
/* Las tarjetas entran con CSS: una animación `both` termina siempre visible,
   así que no puede dejar la sección en blanco si algo falla. */
.anim .paquete { animation: lun-in 560ms cubic-bezier(.22, 1, .36, 1) both; }
.anim .paquete:nth-child(2) { animation-delay: 90ms; }
.anim .paquete:nth-child(3) { animation-delay: 180ms; }
.anim .paquete--destacado { animation: lun-in 560ms cubic-bezier(.22, 1, .36, 1) 90ms both, lun-borde 3.4s ease-in-out 900ms infinite; }

/* ------------------------------------------------------------------ movil */

@media (max-width: 1180px) { .chip--online { display: none; } }
@media (max-width: 1060px) { .nav { display: none; } }
@media (max-width: 900px)  { .chip--discord span { display: none; } .chip--discord { padding: 0 12px; } }
@media (max-width: 560px)  { .chip--discord { display: none; } .marca img { width: 30px; height: 30px; } .marca__nombre { font-size: 13px; } }

@media (max-width: 820px) {
  .hero { min-height: auto; padding: 104px 18px 72px; }
  .hero__logo, .hero__logo img { width: 132px; height: 132px; }
  .hero__titulo { font-size: 30px; }
  .hero__acciones { width: 100%; flex-direction: column; }
  .hero__acciones .boton { width: 100%; height: 62px; font-size: 20px; }
  .hero__pista { display: none; }

  .seccion { padding: 64px 18px; }
  .seccion__titulo { font-size: 22px; }
  .seccion__cab { margin-bottom: 28px; }
  /* Hay que repetir los tres selectores de arriba: los de :has()/:not() tienen mas
     especificidad que .rejilla y el media query no aporta ninguna, asi que una
     rejilla de dos tarjetas se quedaba en dos columnas de 149px en un telefono. */
  .rejilla,
  .rejilla:has(> .paquete:only-child),
  .rejilla:has(> .paquete:nth-child(2)):not(:has(> .paquete:nth-child(3))) { grid-template-columns: minmax(0, 1fr); }
  .pestanas { width: 100%; }
  /* A 18px las tres pestañas piden 400px y la caja mide 324, asi que se achican para
     que la fila entre en un telefono. 14px es el tope: a 15px COMPARAR se cae al
     renglon de abajo y queda sola, estirada de lado a lado. */
  .pestanas button { flex: 1; padding: 0 6px; font-size: 14px; letter-spacing: .03em; }

  .comparativa { min-width: 620px; }
  .comparativa tbody th { position: sticky; left: 0; z-index: 1; }

  .pie__fila { flex-direction: column; }

  /* El carrito y el detalle pasan a hoja a pantalla completa */
  .velo { padding: 0; align-items: flex-end; }
  .ficha, .panel {
    max-width: none; width: 100%; max-height: 92vh; border: 0;
    box-shadow: 0 -3px 0 var(--tinta);
    animation: lun-sheet 280ms cubic-bezier(.22, 1, .36, 1) both;
  }
  .linea__sub { width: auto; }
}

/* Ultimo escalon de las pestañas. A 14px las tres piden 299px y el hueco es el ancho
   de pantalla menos 60, o sea que 360px es el minimo donde entran en una fila; abajo
   de eso hay que bajar a 12px. Va DESPUES del bloque de 820px a proposito: misma
   especificidad, asi que gana el que este mas abajo. */
@media (max-width: 359px) {
  .pestanas button { font-size: 12px; padding: 0 4px; letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}