/* =============================================================================
   PRECIOS — "SALA DE MÁQUINAS"
   -----------------------------------------------------------------------------
   Una página de precios convencional es una tabla de tres columnas. Esta es una
   pantalla de selección de arcade: eliges máquina (suscripción), eliges nivel
   (proyecto) o configuras la tuya pieza por pieza (plataforma), y el marcador
   de la derecha lleva la cuenta como si fuera un puntaje.

   El lenguaje es el mismo del resto del sitio —pixel, neón, terminal, azul
   profundo— pero aquí se usa para una función nueva: hacer que mirar precios
   se sienta como escoger en qué máquina jugar.

   DOS REGLAS QUE ATRAVIESAN TODO EL ARCHIVO
   1) Los números NUNCA van en la fuente pixel. En Pixelify Sans el 2 y el 5 se
      leen como un 8 y aquí el número es justo lo que hay que leer. Todo dígito
      lleva .pr-num (fuente normal + cifras tabulares para que no bailen al
      animarse).
   2) Ningún color se escribe suelto salvo en el bloque oscuro, donde el neón ES
      la identidad. Todo lo demás pide var(--token) y el tema decide. La piel
      clara del final no es un parche: reconstruye cada idea con luz.
   ========================================================================== */

.precios-page {
  --pr-neon: #9cff00;
  --pr-glow: rgba(156, 255, 0, .55);
  --pr-ink: rgba(255, 255, 255, .72);
}

.pr-sec { position: relative; isolation: isolate; }
.pr-sec > .section__inner { position: relative; z-index: 2; }

/* --- Los números: fuente normal, cifras tabulares, peso alto --------------- */
.pr-num {
  font-family: Aptos, Inter, "Segoe UI", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 900;
  letter-spacing: -.01em;
}

/* --- Esquinas pixeladas: el marco de máquina recreativa -------------------- */
.pr-corner {
  position: absolute;
  z-index: 3;
  width: 16px;
  height: 16px;
  border: 2px solid var(--pr-neon);
  opacity: .8;
  pointer-events: none;
}
.pr-corner--tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.pr-corner--tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.pr-corner--bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.pr-corner--br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* --- Barras de nivel: el medidor de dificultad de toda la página ---------- */
.pr-bars { display: inline-flex; gap: 3px; align-items: flex-end; }
.pr-bars i {
  width: 7px;
  height: 14px;
  border: 1px solid var(--line-accent, rgba(156, 255, 0, .38));
  background: transparent;
}
.pr-bars i.is-on {
  background: var(--pr-neon);
  box-shadow: 0 0 8px var(--pr-glow);
}
.pr-bars--sm i { width: 5px; height: 10px; }
.pr-bars--v { flex-direction: row; }

/* --- Encabezados de sección ---------------------------------------------- */
.pr-heading { max-width: 780px; }
.pr-heading__sub {
  margin: 0;
  color: var(--text-muted, var(--pr-ink));
  font-size: 1.05rem;
}

/* --- Letra fina: las condiciones que van al pie de cada bloque ------------ */
.pr-fine {
  margin: clamp(26px, 4vw, 40px) 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--line-accent-soft, rgba(156, 255, 0, .18));
  color: var(--text-faint, rgba(255, 255, 255, .58));
  font-size: .9rem;
  line-height: 1.65;
  max-width: 900px;
}
.pr-fine--tight { margin-top: 18px; }

/* =============================================================================
   HERO — la pantalla de selección
   ========================================================================== */
.pr-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(122px, 17vh, 200px) 0 clamp(56px, 8vw, 96px);
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(156, 255, 0, .1), transparent 58%),
    linear-gradient(160deg, #020812 0%, #06111f 58%, #0b172a 100%);
  border-bottom: 1px solid rgba(156, 255, 0, .28);
}
/* Líneas de barrido de monitor antiguo sobre toda la pantalla */
.pr-hero__scan {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .5;
  background: repeating-linear-gradient(180deg, rgba(156, 255, 0, .05) 0 1px, transparent 1px 5px);
}
/* Las de arriba bajan de 18px a 92px: el header va fijo y se las comía */
.pr-hero .pr-corner { z-index: 4; width: 24px; height: 24px; top: 92px; opacity: 1; }
.pr-hero .pr-corner--tl { left: 18px; }
.pr-hero .pr-corner--tr { right: 18px; }
.pr-hero .pr-corner--bl { top: auto; bottom: 18px; left: 18px; }
.pr-hero .pr-corner--br { top: auto; bottom: 18px; right: 18px; }

.pr-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}

/* Contador de créditos: el guiño que abre la página */
.pr-credit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--line-accent, rgba(156, 255, 0, .38));
  border-radius: 4px;
  background: rgba(156, 255, 0, .08);
  font-family: var(--font-pixel, monospace);
  font-size: .78rem;
  letter-spacing: .18em;
  color: var(--pr-neon);
}
.pr-credit__coin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: rgba(156, 255, 0, .25);
  animation: pr-coin 2.4s ease-in-out infinite;
}
@keyframes pr-coin {
  0%, 72%, 100% { transform: rotateY(0deg); }
  80% { transform: rotateY(180deg); }
  90% { transform: rotateY(0deg); }
}
.pr-credit b { color: #fff; font-size: .95rem; }

.pr-hero__eyebrow {
  color: var(--pr-neon);
  font-family: var(--font-pixel, monospace);
}

.pr-hero__title {
  max-width: none;
  margin: 0 0 18px;
  font-family: var(--font-display, monospace);
  font-size: clamp(2.6rem, 7.4vw, 5.6rem);
  line-height: .96;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.pr-hero__l1 { display: block; color: #fff; }
.pr-hero__l2 {
  position: relative;
  display: block;
  color: var(--pr-neon);
  text-shadow: 0 0 30px rgba(156, 255, 0, .35);
}
/* Glitch: dos copias desplazadas que parpadean cada tanto. El texto real sigue
   siendo el del elemento; las copias son decorativas y no las lee el lector. */
.pr-hero__l2::before,
.pr-hero__l2::after {
  /* El "/ ''" marca el contenido generado como decorativo: sin él, los lectores
     de pantalla que anuncian ::before/::after leerían la palabra tres veces. */
  content: attr(data-pr-glitch) / "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  opacity: .85;
}
.pr-hero__l2::before {
  color: #1f5eff;
  animation: pr-glitch-a 5.5s steps(1) infinite;
}
.pr-hero__l2::after {
  color: #02a4a8;
  animation: pr-glitch-b 5.5s steps(1) infinite;
}
@keyframes pr-glitch-a {
  0%, 92%, 100% { clip-path: inset(100% 0 0 0); transform: none; }
  93% { clip-path: inset(4% 0 62% 0); transform: translate(-3px, -1px); }
  95% { clip-path: inset(58% 0 18% 0); transform: translate(3px, 1px); }
  97% { clip-path: inset(22% 0 46% 0); transform: translate(-2px, 1px); }
}
@keyframes pr-glitch-b {
  0%, 92%, 100% { clip-path: inset(100% 0 0 0); transform: none; }
  94% { clip-path: inset(46% 0 24% 0); transform: translate(3px, -1px); }
  96% { clip-path: inset(12% 0 68% 0); transform: translate(-3px, 1px); }
  98% { clip-path: inset(70% 0 6% 0); transform: translate(2px, -1px); }
}

.pr-hero__lead {
  max-width: 56ch;
  margin: 0 0 26px;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(1rem, 1.9vw, 1.16rem);
}

/* Accesos rápidos con el precio "desde" de cada familia */
.pr-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.pr-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  border: 1px solid rgba(156, 255, 0, .3);
  border-radius: 2px 12px 2px 12px;
  background: linear-gradient(160deg, rgba(11, 24, 44, .85), rgba(4, 11, 23, .9));
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pr-chip:hover,
.pr-chip:focus-visible {
  transform: translateY(-3px);
  border-color: var(--pr-neon);
  box-shadow: 0 0 22px rgba(156, 255, 0, .25);
}
.pr-chip__k {
  color: rgba(255, 255, 255, .68);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pr-chip__v { color: #fff; font-size: 1.12rem; }
.pr-chip__v i { font-style: normal; font-size: .78rem; color: rgba(255, 255, 255, .6); font-weight: 600; }

.pr-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* --- La maquinita: ilustración hecha con cajas, sin imágenes -------------- */
.pr-hero__machine { display: grid; place-items: center; }
.pr-cab {
  width: min(320px, 100%);
  padding: 14px 14px 0;
  border: 2px solid rgba(156, 255, 0, .45);
  border-radius: 26px 26px 8px 8px;
  background: linear-gradient(180deg, rgba(16, 40, 79, .9), rgba(4, 12, 26, .95));
  box-shadow: 0 0 40px rgba(156, 255, 0, .16), 0 30px 70px rgba(0, 0, 0, .5);
  animation: pr-cab-float 6s ease-in-out infinite;
}
/* La marquesina de bombillas: sin ella el mueble se leía como un televisor */
.pr-cab::before {
  content: '';
  display: block;
  height: 6px;
  margin: 0 8px 12px;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(156, 255, 0, .85) 0 8px, transparent 8px 16px);
  box-shadow: 0 0 14px rgba(156, 255, 0, .4);
}
@keyframes pr-cab-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
.pr-cab__screen {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  gap: 10px;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(156, 255, 0, .3);
  border-radius: 8px;
  background: radial-gradient(circle at 50% 40%, rgba(156, 255, 0, .12), transparent 62%), #020812;
}
.pr-cab__grid {
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image:
    linear-gradient(rgba(156, 255, 0, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(156, 255, 0, .07) 1px, transparent 1px);
  background-size: 18px 18px;
}
.pr-cab__bot { position: relative; width: 46%; }
.pr-cab__bot .pixel-bot { width: 100%; margin: 0; display: block; }
.pr-cab__msg {
  position: relative;
  margin: 0;
  font-family: var(--font-pixel, monospace);
  font-size: .72rem;
  letter-spacing: .2em;
  color: var(--pr-neon);
  animation: pr-blink 1.4s steps(1) infinite;
}
@keyframes pr-blink { 50% { opacity: .15; } }

.pr-cab__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 6px 16px;
}
.pr-cab__slot {
  width: 42px;
  height: 8px;
  border-radius: 4px;
  background: #020812;
  box-shadow: inset 0 0 0 1px rgba(156, 255, 0, .35);
}
.pr-cab__btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d4ff7a, #7bc400 60%, #3c6300);
  box-shadow: 0 0 12px rgba(156, 255, 0, .4);
}
.pr-cab__btn:last-child {
  background: radial-gradient(circle at 35% 30%, #8fb4ff, #1f5eff 60%, #0b2a7a);
  box-shadow: 0 0 12px rgba(31, 94, 255, .45);
}

/* =============================================================================
   1) SUSCRIPCIONES — la palanca de periodo y las dos máquinas
   ========================================================================== */
.pr-sec--saas::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
  background-image:
    linear-gradient(var(--grid-line, rgba(156, 255, 0, .07)) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line, rgba(156, 255, 0, .07)) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 70% at 50% 20%, #000 30%, transparent 76%);
          mask-image: radial-gradient(120% 70% at 50% 20%, #000 30%, transparent 76%);
}

/* --- La palanca ----------------------------------------------------------- */
.pr-lever { margin: 0 0 clamp(30px, 4vw, 46px); }
.pr-lever__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: min(680px, 100%);
  padding: 5px;
  border: 1px solid var(--line-accent, rgba(156, 255, 0, .38));
  border-radius: 12px;
  background: rgba(2, 8, 18, .55);
}
/* El cursor que se desliza de una opción a otra */
.pr-lever__thumb {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  z-index: 0;
  width: calc((100% - 10px) / 4);
  border-radius: 8px;
  background: var(--accent-fill, #9cff00);
  box-shadow: 0 0 20px rgba(156, 255, 0, .45);
  transform: translateX(calc(100% * var(--pr-i, 0)));
  transition: transform .34s cubic-bezier(.3, 1.5, .5, 1);
}
.pr-lever__opt {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 46px;
  padding: 6px 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, .7);
  font-family: var(--font-display, inherit);
  font-size: .96rem;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .22s ease;
}
.pr-lever__opt:hover { color: #fff; }
.pr-lever__opt.is-on { color: var(--text-on-fill, #071a3d); font-weight: 700; }
.pr-lever__opt:focus-visible { outline: 2px solid var(--accent-fill, #9cff00); outline-offset: 3px; }
.pr-lever__best {
  font-family: Aptos, Inter, "Segoe UI", Arial, sans-serif;
  font-size: .56rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--pr-neon);
}
.pr-lever__opt.is-on .pr-lever__best { color: var(--text-on-fill, #071a3d); }
.pr-lever__hint {
  margin: 12px 0 0;
  color: var(--text-faint, rgba(255, 255, 255, .58));
  font-size: .88rem;
}

/* --- Las tarjetas de plan ------------------------------------------------- */
.pr-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 26px);
  align-items: start;
}
.pr-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3.4vw, 38px);
  border: 1px solid rgba(156, 255, 0, .2);
  border-radius: 4px 22px 4px 22px;
  background: linear-gradient(160deg, rgba(11, 24, 44, .9), rgba(4, 11, 23, .94));
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.pr-plan:hover {
  transform: translateY(-5px);
  border-color: rgba(156, 255, 0, .55);
  box-shadow: 0 0 30px rgba(156, 255, 0, .2), 0 22px 50px rgba(0, 0, 0, .45);
}
.pr-plan--star {
  border-color: rgba(156, 255, 0, .5);
  box-shadow: 0 0 34px rgba(156, 255, 0, .18), 0 22px 56px rgba(0, 0, 0, .45);
}
.pr-plan__flag {
  position: absolute;
  top: -12px;
  left: clamp(26px, 3.4vw, 38px);
  padding: 4px 12px;
  border-radius: 3px;
  background: var(--accent-fill, #9cff00);
  color: var(--text-on-fill, #071a3d);
  font-family: Aptos, Inter, "Segoe UI", Arial, sans-serif;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .14em;
}
.pr-plan__name {
  margin: 0 0 6px;
  font-family: var(--font-display, inherit);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: #fff;
}
.pr-plan__claim {
  margin: 0 0 22px;
  color: var(--text-faint, rgba(255, 255, 255, .58));
  font-size: .95rem;
}
.pr-plan__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}
.pr-plan__amount {
  font-size: clamp(2.3rem, 5vw, 3.2rem);
  line-height: 1;
  color: var(--pr-neon);
  text-shadow: 0 0 26px rgba(156, 255, 0, .3);
}
.pr-plan__per { color: var(--text-faint, rgba(255, 255, 255, .58)); font-size: 1rem; font-weight: 700; }
.pr-plan__billed {
  margin: 8px 0 0;
  color: var(--text-muted, rgba(255, 255, 255, .72));
  font-size: .9rem;
}

/* Barra de ahorro: se llena a medida que el compromiso se alarga */
.pr-save { margin: 16px 0 0; }
.pr-save[hidden] { display: none; }
.pr-save__bar {
  height: 8px;
  border: 1px solid var(--line-accent, rgba(156, 255, 0, .38));
  border-radius: 2px;
  background: rgba(255, 255, 255, .06);
  overflow: hidden;
}
.pr-save__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(156, 255, 0, .45), var(--accent-fill, #9cff00));
  box-shadow: 0 0 12px rgba(156, 255, 0, .5);
  transition: width .45s cubic-bezier(.3, 1.2, .5, 1);
}
.pr-save__txt {
  margin: 8px 0 0;
  color: var(--pr-neon);
  font-size: .88rem;
  font-weight: 700;
}

.pr-plan__list {
  flex: 1;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.pr-plan__list li {
  position: relative;
  padding-left: 24px;
  color: var(--text-muted, rgba(255, 255, 255, .72));
  font-size: .95rem;
}
/* La viñeta es una navecita pixelada de 3 cuadros, no un check genérico */
.pr-plan__list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .55em;
  width: 9px;
  height: 3px;
  background: var(--accent-fill, #9cff00);
  box-shadow: 0 -3px 0 -1px var(--accent-fill, #9cff00), 0 3px 0 -1px var(--accent-fill, #9cff00);
}
.pr-plan__note {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px dashed var(--line-accent-soft, rgba(156, 255, 0, .18));
  color: var(--text-faint, rgba(255, 255, 255, .58));
  font-size: .85rem;
}
.pr-plan__cta { margin-top: 20px; width: 100%; }

/* =============================================================================
   2) NIVELES — proyectos de pago único
   ========================================================================== */
.pr-sec--niveles::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-top: 1px solid rgba(156, 255, 0, .3);
  border-bottom: 1px solid rgba(156, 255, 0, .14);
  background:
    radial-gradient(95% 60% at 50% 0%, rgba(156, 255, 0, .06), transparent 62%),
    linear-gradient(180deg, rgba(1, 5, 12, .95), rgba(3, 9, 19, .86));
}
.pr-sec--niveles::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .45;
  background: repeating-linear-gradient(45deg, rgba(156, 255, 0, .05) 0 1px, transparent 1px 14px);
}

.pr-levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 22px);
  align-items: stretch;
}
/* Escalón: el nivel 3 arranca más arriba, como una escalera de dificultad */
.pr-level:nth-child(1) { margin-top: 34px; }
.pr-level:nth-child(2) { margin-top: 17px; }
.pr-level:nth-child(3) { margin-top: 0; }

.pr-level {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 24px 22px 26px;
  border: 1px solid rgba(156, 255, 0, .2);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, rgba(10, 22, 40, .8), rgba(4, 11, 22, .6));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* Barra superior de progreso: 1/3, 2/3, 3/3 según el nivel */
.pr-level::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, .09);
}
.pr-level::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(156, 255, 0, .35), var(--accent-fill, #9cff00));
  box-shadow: 0 0 12px rgba(156, 255, 0, .55);
}
.pr-level[data-pr-level="1"]::after { width: 33%; }
.pr-level[data-pr-level="2"]::after { width: 66%; }
.pr-level[data-pr-level="3"]::after { width: 100%; }

.pr-level:hover {
  transform: translateY(-5px);
  border-color: rgba(156, 255, 0, .5);
  box-shadow: 0 0 26px rgba(156, 255, 0, .22), 0 20px 46px rgba(0, 0, 0, .45);
}
.pr-level__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.pr-level__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--line-accent, rgba(156, 255, 0, .38));
  border-radius: 4px;
  background: rgba(156, 255, 0, .1);
  color: #cfff70;
  font-family: Aptos, Inter, "Segoe UI", Arial, sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
}
.pr-level__name {
  margin: 0 0 4px;
  font-family: var(--font-display, inherit);
  font-size: 1.35rem;
  color: #fff;
}
.pr-level__price {
  margin: 0 0 12px;
  font-size: clamp(1.7rem, 3.4vw, 2.2rem);
  line-height: 1;
  color: var(--pr-neon);
}
.pr-level__resumen {
  margin: 0 0 18px;
  color: var(--text-faint, rgba(255, 255, 255, .58));
  font-size: .9rem;
}
.pr-level__list {
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.pr-level__list li {
  position: relative;
  padding-left: 18px;
  color: var(--text-muted, rgba(255, 255, 255, .72));
  font-size: .9rem;
}
.pr-level__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .5em;
  width: 7px;
  height: 7px;
  background: var(--accent-fill, #9cff00);
}
.pr-level__cta {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line, rgba(255, 255, 255, .12));
  color: var(--link, #9cff00);
  font-weight: 800;
  font-size: .9rem;
}
.pr-level__cta:hover { text-decoration: underline; }

/* --- Web empresarial: filas de marcador ----------------------------------- */
.pr-web {
  margin-top: clamp(34px, 5vw, 52px);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: clamp(24px, 3.4vw, 36px);
  border: 1px solid rgba(156, 255, 0, .22);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(12, 28, 52, .8), rgba(4, 12, 26, .9));
}
.pr-web__head h3 {
  margin: 0 0 10px;
  font-family: var(--font-display, inherit);
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  color: #fff;
}
.pr-web__head p { margin: 0; color: var(--text-muted, rgba(255, 255, 255, .72)); font-size: .95rem; }
.pr-web__rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.pr-web__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line-accent-soft, rgba(156, 255, 0, .18));
}
.pr-web__row:last-child { border-bottom: 0; }
.pr-web__k { color: var(--text, #e8eef7); font-weight: 600; white-space: nowrap; }
/* La línea de puntos del marcador: une la etiqueta con la cifra */
.pr-web__dots {
  flex: 1;
  height: 1px;
  min-width: 20px;
  background-image: linear-gradient(90deg, currentColor 0 3px, transparent 3px 7px);
  background-size: 7px 1px;
  color: var(--line-strong, rgba(255, 255, 255, .22));
  transform: translateY(-4px);
}
.pr-web__v { color: var(--pr-neon); font-size: 1.3rem; white-space: nowrap; }

/* =============================================================================
   3) CONSTRUCTOR — la base, los módulos y el marcador
   ========================================================================== */
.pr-build {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 350px);
  gap: clamp(22px, 3vw, 34px);
  align-items: start;
}

.pr-base {
  position: relative;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid rgba(156, 255, 0, .35);
  border-radius: 14px;
  background:
    radial-gradient(90% 140% at 0% 0%, rgba(156, 255, 0, .1), transparent 60%),
    linear-gradient(160deg, rgba(12, 28, 52, .9), rgba(4, 12, 26, .94));
  margin-bottom: clamp(20px, 2.6vw, 28px);
}
.pr-base__tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 11px;
  border-radius: 3px;
  background: var(--accent-fill, #9cff00);
  color: var(--text-on-fill, #071a3d);
  font-family: Aptos, Inter, "Segoe UI", Arial, sans-serif;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .14em;
}
.pr-base h3 {
  margin: 0 0 4px;
  font-family: var(--font-display, inherit);
  font-size: 1.5rem;
  color: #fff;
}
.pr-base__price {
  margin: 0 0 16px;
  font-size: clamp(1.8rem, 3.6vw, 2.4rem);
  line-height: 1;
  color: var(--pr-neon);
}
.pr-base__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pr-base__list li {
  position: relative;
  padding-left: 18px;
  color: var(--text-muted, rgba(255, 255, 255, .72));
  font-size: .92rem;
}
.pr-base__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .5em;
  width: 7px;
  height: 7px;
  background: var(--accent-fill, #9cff00);
}

.pr-mods__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.pr-mods__head h3 {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: 1.35rem;
  color: #fff;
}
.pr-mods__demo {
  padding: 8px 14px;
  border: 1px solid var(--line-accent, rgba(156, 255, 0, .38));
  border-radius: 6px;
  background: rgba(156, 255, 0, .08);
  color: var(--link, #9cff00);
  font-family: inherit;
  font-size: .84rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.pr-mods__demo:hover { background: rgba(156, 255, 0, .18); border-color: var(--accent-fill, #9cff00); }
.pr-mods__demo:focus-visible { outline: 2px solid var(--accent-fill, #9cff00); outline-offset: 2px; }

.pr-mods__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* Cada módulo es una casilla seleccionable estilo "power-up" */
.pr-mod {
  position: relative;
  display: flex;
  gap: 12px;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line, rgba(255, 255, 255, .12));
  border-radius: 2px 14px 2px 14px;
  background: linear-gradient(160deg, rgba(11, 24, 44, .7), rgba(4, 11, 23, .8));
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.pr-mod:hover { border-color: rgba(156, 255, 0, .45); transform: translateY(-2px); }
.pr-mod input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.pr-mod__box {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 2px solid var(--line-ui, rgba(255, 255, 255, .38));
  border-radius: 3px;
  background: transparent;
  transition: background .18s ease, border-color .18s ease;
}
.pr-mod.is-on { border-color: var(--accent-fill, #9cff00); background: linear-gradient(160deg, rgba(20, 42, 20, .8), rgba(6, 18, 10, .88)); }
.pr-mod.is-on .pr-mod__box {
  border-color: var(--accent-fill, #9cff00);
  background: var(--accent-fill, #9cff00);
  /* El "tick" es un cuadro pixelado, coherente con el resto del lenguaje */
  box-shadow: inset 0 0 0 3px rgba(7, 26, 61, .001), inset 4px 4px 0 0 rgba(7, 26, 61, .9), inset -4px -4px 0 0 rgba(7, 26, 61, .9);
}
.pr-mod input:focus-visible + .pr-mod__box { outline: 2px solid var(--accent-fill, #9cff00); outline-offset: 2px; }
.pr-mod__body { display: grid; gap: 5px; min-width: 0; }
.pr-mod__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pr-mod__name { color: #fff; font-weight: 700; font-size: .96rem; }
.pr-mod__price { color: var(--pr-neon); font-size: .95rem; white-space: nowrap; }
.pr-mod__desc { color: var(--text-faint, rgba(255, 255, 255, .58)); font-size: .82rem; line-height: 1.45; }
.pr-mod__tier {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-faint, rgba(255, 255, 255, .58));
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* --- El marcador ---------------------------------------------------------- */
.pr-score { position: sticky; top: 96px; }
.pr-score__inner {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 3vw, 28px);
  border: 2px solid rgba(156, 255, 0, .45);
  border-radius: 14px;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(156, 255, 0, .12), transparent 60%),
    linear-gradient(180deg, rgba(8, 20, 38, .96), rgba(3, 9, 19, .98));
  box-shadow: 0 0 34px rgba(156, 255, 0, .18), 0 24px 60px rgba(0, 0, 0, .5);
}
/* Línea de barrido del marcador */
.pr-score__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .6;
  background: repeating-linear-gradient(180deg, rgba(156, 255, 0, .05) 0 1px, transparent 1px 5px);
}
.pr-score__inner > * { position: relative; }
.pr-score__label {
  margin: 0 0 6px;
  font-family: var(--font-pixel, monospace);
  font-size: .7rem;
  letter-spacing: .2em;
  color: var(--pr-neon);
}
.pr-score__total { display: flex; align-items: baseline; gap: 8px; margin: 0 0 18px; flex-wrap: wrap; }
.pr-score__from {
  color: var(--text-faint, rgba(255, 255, 255, .58));
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.pr-score__num {
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 26px rgba(156, 255, 0, .35);
}
.pr-score__lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pr-score__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line-accent-soft, rgba(156, 255, 0, .18));
  color: var(--text-muted, rgba(255, 255, 255, .72));
  font-size: .88rem;
}
.pr-score__line b { color: var(--pr-neon); font-size: .92rem; white-space: nowrap; }
.pr-score__line--base { color: #fff; font-weight: 700; }
/* Entrada de una línea nueva: llega desde la derecha como un marcador de arcade */
.pr-score__line--in { animation: pr-line-in .32s ease both; }
@keyframes pr-line-in {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: none; }
}
.pr-score__empty {
  margin: 14px 0 0;
  color: var(--text-faint, rgba(255, 255, 255, .58));
  font-size: .86rem;
}
.pr-score__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line, rgba(255, 255, 255, .12));
  color: var(--text-faint, rgba(255, 255, 255, .58));
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.pr-score__meta b { color: #fff; font-size: 1.05rem; }
/* --- Power-up de paquete: el beneficio que se ve venir ------------------- */
.pr-bonus {
  margin-top: 16px;
  padding: 14px 14px 12px;
  border: 1px dashed var(--line-strong, rgba(255, 255, 255, .22));
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.pr-bonus.is-on {
  border-style: solid;
  border-color: var(--accent-fill, #9cff00);
  background: rgba(156, 255, 0, .1);
  box-shadow: 0 0 22px rgba(156, 255, 0, .25);
  animation: pr-bonus-pop .5s ease;
}
@keyframes pr-bonus-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.035); }
  100% { transform: scale(1); }
}
.pr-bonus__head { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; }
.pr-bonus__badge {
  flex: none;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .12);
  /* A 9px y en mayúsculas esta etiqueta necesita más cuerpo que el gris tenue
     normal: sobre el panel del marcador se quedaba en 4,2:1 */
  color: rgba(255, 255, 255, .88);
  font-family: Aptos, Inter, "Segoe UI", Arial, sans-serif;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .14em;
}
.pr-bonus.is-on .pr-bonus__badge {
  background: var(--accent-fill, #9cff00);
  color: var(--text-on-fill, #071a3d);
}
.pr-bonus__title { color: #fff; font-weight: 800; font-size: .9rem; }
.pr-bonus__track {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}
.pr-bonus__track span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(156, 255, 0, .4), var(--accent-fill, #9cff00));
  transition: width .4s cubic-bezier(.3, 1.2, .5, 1);
}
.pr-bonus__state {
  margin: 9px 0 0;
  color: var(--text-muted, rgba(255, 255, 255, .72));
  font-size: .8rem;
  line-height: 1.5;
}

.pr-score__note {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--accent-fill, #9cff00);
  background: rgba(156, 255, 0, .08);
  color: var(--text-muted, rgba(255, 255, 255, .72));
  font-size: .82rem;
  line-height: 1.5;
}
.pr-score__note[hidden] { display: none; }
.pr-score__cta { margin-top: 18px; width: 100%; }
.pr-score__legal {
  margin: 12px 0 0;
  color: var(--text-faint, rgba(255, 255, 255, .58));
  font-size: .76rem;
  line-height: 1.5;
}

/* =============================================================================
   4) COMBOS — cartuchos
   ========================================================================== */
.pr-combos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 22px);
  align-items: stretch;
}
.pr-combo {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 24px 26px;
  border: 1px solid rgba(156, 255, 0, .24);
  border-radius: 14px 14px 4px 4px;
  background: linear-gradient(180deg, rgba(12, 28, 52, .9), rgba(4, 12, 26, .94));
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* La muesca del cartucho */
.pr-combo__slot {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 52%;
  height: 5px;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(156, 255, 0, .6) 0 6px, transparent 6px 12px);
}
.pr-combo:hover {
  transform: translateY(-6px);
  border-color: rgba(156, 255, 0, .55);
  box-shadow: 0 0 28px rgba(156, 255, 0, .22), 0 22px 50px rgba(0, 0, 0, .45);
}
.pr-combo--star { border-color: rgba(156, 255, 0, .5); box-shadow: 0 0 30px rgba(156, 255, 0, .16); }
.pr-combo h3 {
  margin: 10px 0 8px;
  font-family: var(--font-display, inherit);
  font-size: 1.3rem;
  color: #fff;
}
.pr-combo__price { display: flex; align-items: baseline; gap: 7px; margin: 0 0 18px; flex-wrap: wrap; }
.pr-combo__from {
  color: var(--text-faint, rgba(255, 255, 255, .58));
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.pr-combo__price .pr-num { font-size: clamp(1.5rem, 3vw, 1.95rem); line-height: 1; color: var(--pr-neon); }
.pr-combo ul { flex: 1; margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.pr-combo li {
  position: relative;
  padding-left: 18px;
  color: var(--text-muted, rgba(255, 255, 255, .72));
  font-size: .9rem;
}
.pr-combo li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .5em;
  width: 7px;
  height: 7px;
  background: var(--accent-fill, #9cff00);
}
.pr-combo__cta {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line, rgba(255, 255, 255, .12));
  color: var(--link, #9cff00);
  font-weight: 800;
  font-size: .9rem;
}
.pr-combo__cta:hover { text-decoration: underline; }

/* =============================================================================
   5) SOPORTE — el medidor de energía
   ========================================================================== */
.pr-sec--soporte::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-top: 1px solid rgba(156, 255, 0, .3);
  border-bottom: 1px solid rgba(156, 255, 0, .14);
  background: linear-gradient(180deg, rgba(1, 5, 12, .94), rgba(3, 9, 19, .86));
}
.pr-support {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}
.pr-support__copy h2 { color: #fff; }
.pr-support__copy > p { color: var(--text-muted, rgba(255, 255, 255, .72)); font-size: 1.02rem; }
.pr-support__list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pr-support__list li {
  padding: 5px 12px;
  border: 1px solid var(--line-accent, rgba(156, 255, 0, .38));
  border-radius: 20px;
  background: rgba(156, 255, 0, .08);
  color: var(--text-muted, rgba(255, 255, 255, .72));
  font-size: .82rem;
}
.pr-power { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.pr-power__cell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border: 1px solid rgba(156, 255, 0, .22);
  border-radius: 2px 16px 2px 16px;
  background: linear-gradient(160deg, rgba(11, 24, 44, .85), rgba(4, 11, 23, .9));
  transition: border-color .22s ease, transform .22s ease;
}
.pr-power__cell:hover { border-color: rgba(156, 255, 0, .5); transform: translateX(4px); }
.pr-power__k { color: var(--text, #e8eef7); font-weight: 600; }
.pr-power__v { color: var(--pr-neon); font-size: 1.3rem; white-space: nowrap; }
.pr-power__v i { font-style: normal; font-size: .76rem; font-weight: 600; color: var(--text-faint, rgba(255, 255, 255, .58)); }
.pr-power__v .pr-power__from { text-transform: uppercase; letter-spacing: .1em; }

/* =============================================================================
   6) TERMINAL — condiciones comerciales
   ========================================================================== */
.pr-terminal {
  overflow: hidden;
  border: 1px solid rgba(156, 255, 0, .3);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(6, 16, 32, .96), rgba(2, 8, 18, .98));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.pr-terminal__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, .12));
  background: rgba(255, 255, 255, .04);
}
.pr-terminal__bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}
.pr-terminal__bar i:first-child { background: var(--accent-fill, #9cff00); }
.pr-terminal__bar span {
  margin-left: 8px;
  font-family: var(--font-pixel, monospace);
  font-size: .76rem;
  color: var(--text-faint, rgba(255, 255, 255, .58));
}
.pr-terminal__body { padding: clamp(24px, 4vw, 40px); }
.pr-terminal__title {
  margin: 0 0 22px;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  color: #fff;
}
.pr-terminal__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  font-family: var(--font-pixel, monospace);
  font-size: .9rem;
  line-height: 1.6;
}
.pr-terminal__list li {
  position: relative;
  padding-left: 26px;
  color: var(--text-muted, rgba(255, 255, 255, .72));
}
.pr-terminal__list li::before {
  content: '>';
  position: absolute;
  left: 0;
  color: var(--pr-neon);
  font-weight: 700;
}
.pr-terminal__list b { color: #fff; }

/* =============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .pr-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .pr-hero__machine { order: -1; margin-bottom: 8px; }
  .pr-cab { width: min(240px, 70%); }
  .pr-build { grid-template-columns: minmax(0, 1fr); }
  .pr-score { position: static; }
  .pr-web { grid-template-columns: minmax(0, 1fr); }
  .pr-support { grid-template-columns: minmax(0, 1fr); }
  .pr-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pr-level:nth-child(n) { margin-top: 0; }
}

@media (max-width: 860px) {
  .pr-plans { grid-template-columns: minmax(0, 1fr); }
  .pr-levels { grid-template-columns: minmax(0, 1fr); }
  .pr-combos { grid-template-columns: minmax(0, 1fr); }
  .pr-mods__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  /* La palanca pasa a dos filas; el cursor se mueve en los dos ejes */
  .pr-lever__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-lever__thumb {
    width: calc((100% - 10px) / 2);
    height: calc((100% - 10px) / 2);
    bottom: auto;
    transform: translate(calc(100% * var(--pr-col, 0)), calc(100% * var(--pr-row, 0)));
  }
  .pr-hero { padding-top: clamp(104px, 15vh, 150px); }
  .pr-hero .pr-corner { width: 16px; height: 16px; }
  .pr-power__cell { grid-template-columns: auto minmax(0, 1fr); row-gap: 8px; }
  .pr-power__v { grid-column: 2; }
  .pr-web__row { flex-wrap: wrap; }
  .pr-web__dots { display: none; }
}

/* Respeta a quien pidió menos animación en su sistema */
@media (prefers-reduced-motion: reduce) {
  .pr-cab,
  .pr-credit__coin,
  .pr-cab__msg,
  .pr-hero__l2::before,
  .pr-hero__l2::after { animation: none; }
  .pr-hero__l2::before,
  .pr-hero__l2::after { display: none; }
  .pr-bonus.is-on { animation: none; }
  .pr-lever__thumb,
  .pr-bonus,
  .pr-bonus__track span,
  .pr-save__bar span,
  .pr-plan,
  .pr-level,
  .pr-combo,
  .pr-mod,
  .pr-power__cell,
  .pr-chip { transition: none; }
  .pr-score__line--in { animation: none; }
}

/* =============================================================================
   PIEL CLARA
   -----------------------------------------------------------------------------
   No se apaga el arcade: se enciende la luz de la sala. Cada pieza conserva su
   idea —marco de máquina, palanca, escalera de niveles, marcador— pero el
   contraste deja de venir del neón y pasa a venir del papel, la sombra y el
   borde.

   El lima se queda EXACTO donde funciona sobre claro: como relleno con texto
   oscuro encima (13,4:1). Donde tenía que dibujar una línea o ser texto, pasa
   al verde de trazo (#57931f) o al verde profundo (#2b5e14), que es el acento
   tipográfico del tema claro.

   La única excepción deliberada es la maquinita del hero: es una PANTALLA
   apagada dentro de una sala iluminada, así que su interior sigue oscuro. Un
   monitor encendido se ve oscuro también de día.
   ========================================================================== */
[data-theme="light"] .precios-page {
  --pr-neon: var(--accent);          /* el acento tipográfico del tema claro */
  --pr-glow: transparent;
  --pr-ink: var(--text-muted);
}

/* --- Marco y barras ------------------------------------------------------- */
[data-theme="light"] .pr-corner { border-color: var(--accent-stroke); opacity: 1; }
[data-theme="light"] .pr-bars i { border-color: var(--accent-stroke); }
[data-theme="light"] .pr-bars i.is-on { background: var(--accent-fill); box-shadow: none; }

/* --- Hero: la sala se ilumina, la máquina sigue encendida ----------------- */
/* El hero cierra con una regla lima de 3px en vez de una línea gris: es lo
   único que en claro dice "esto es Daptux" antes de hacer scroll. */
[data-theme="light"] .pr-hero {
  /* El resplandor arranca por debajo del header: centrado arriba teñía de verde
     la franja del logo y se leía como una mancha, no como luz. */
  background:
    radial-gradient(90% 70% at 10% 45%, rgba(156, 255, 0, .2), transparent 62%),
    linear-gradient(160deg, #ffffff 0%, #f1f5fb 58%, #e4ebf5 100%);
  border-bottom: 3px solid var(--accent-fill);
}
[data-theme="light"] .pr-hero__scan {
  opacity: .6;
  background: repeating-linear-gradient(180deg, rgba(10, 28, 61, .035) 0 1px, transparent 1px 5px);
}
[data-theme="light"] .pr-credit {
  border-color: var(--accent-stroke);
  background: var(--accent-soft);
  color: var(--accent);
}
[data-theme="light"] .pr-credit__coin { background: var(--accent-fill); }
[data-theme="light"] .pr-credit b { color: var(--text-strong); }
[data-theme="light"] .pr-hero__l1 { color: var(--text-strong); }
[data-theme="light"] .pr-hero__l2 { color: var(--accent); text-shadow: none; }
/* Sobre papel el glitch de colores se lee como un error de impresión */
[data-theme="light"] .pr-hero__l2::before,
[data-theme="light"] .pr-hero__l2::after { display: none; }
[data-theme="light"] .pr-hero__lead { color: var(--text-muted); }
[data-theme="light"] .pr-chip {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
[data-theme="light"] .pr-chip:hover,
[data-theme="light"] .pr-chip:focus-visible {
  border-color: var(--accent-stroke);
  box-shadow: var(--shadow-pop);
}
[data-theme="light"] .pr-chip__k { color: var(--text-faint); }
[data-theme="light"] .pr-chip__v { color: var(--text-strong); }
[data-theme="light"] .pr-chip__v i { color: var(--text-faint); }
/* La maquinita: mueble claro, pantalla encendida (sigue oscura a propósito) */
[data-theme="light"] .pr-cab {
  border-color: var(--accent-stroke);
  background: linear-gradient(180deg, #ffffff, #e9eff7);
  box-shadow: var(--shadow-pop);
}
[data-theme="light"] .pr-cab__slot { background: #0a1c3d; box-shadow: none; }
/* DENTRO de la pantalla el lima sigue siendo lima: el resto de la página lo
   cambia por verde profundo para poder leerse sobre papel, pero aquí el fondo
   es negro y el verde profundo desaparecía ("INSERTA FICHA" no se veía). */
[data-theme="light"] .pr-cab__screen { --pr-neon: var(--accent-fill); }
/* La marquesina se queda en lima puro: es luz, no texto */
[data-theme="light"] .pr-cab::before { box-shadow: none; }

/* --- Las viñetas de las listas ---------------------------------------------
   El lima puro sobre blanco da 1,26:1: como marca decorativa aún se intuye,
   pero es el elemento que ordena la lectura de las listas y merece cuerpo.
   Pasa al verde de trazo, que sí se sostiene sobre papel. */
[data-theme="light"] .pr-level__list li::before,
[data-theme="light"] .pr-base__list li::before,
[data-theme="light"] .pr-combo li::before { background: var(--accent-stroke); }
[data-theme="light"] .pr-plan__list li::before {
  background: var(--accent-stroke);
  box-shadow: 0 -3px 0 -1px var(--accent-stroke), 0 3px 0 -1px var(--accent-stroke);
}

/* --- 1) Suscripciones ----------------------------------------------------- */
[data-theme="light"] .pr-lever__track {
  border-color: var(--line-strong);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
[data-theme="light"] .pr-lever__thumb { box-shadow: none; }
[data-theme="light"] .pr-lever__opt { color: var(--text-muted); }
[data-theme="light"] .pr-lever__opt:hover { color: var(--text-strong); }
[data-theme="light"] .pr-lever__best { color: var(--accent); }
[data-theme="light"] .pr-plan {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
[data-theme="light"] .pr-plan:hover { border-color: var(--accent-stroke); box-shadow: var(--shadow-pop); }
/* El plan destacado gana por una barra lima arriba, no por un borde algo más
   verde: sobre papel esa diferencia no se veía y las dos tarjetas empataban. */
[data-theme="light"] .pr-plan--star {
  border-color: var(--accent-stroke);
  border-top: 4px solid var(--accent-fill);
  box-shadow: var(--shadow-pop);
}
[data-theme="light"] .pr-plan__name { color: var(--text-strong); }
[data-theme="light"] .pr-plan__amount { color: var(--accent); text-shadow: none; }
[data-theme="light"] .pr-save__bar { background: rgba(10, 28, 61, .08); border-color: var(--accent-stroke); }
[data-theme="light"] .pr-save__bar span {
  background: linear-gradient(90deg, rgba(87, 147, 31, .45), var(--accent-stroke));
  box-shadow: none;
}
[data-theme="light"] .pr-save__txt { color: var(--accent); }

/* --- 2) Niveles ----------------------------------------------------------- */
[data-theme="light"] .pr-sec--niveles::before {
  border-top: 1px solid var(--accent-stroke);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #e6ecf5, #eef3f9);
}
[data-theme="light"] .pr-sec--niveles::after {
  opacity: .7;
  background: repeating-linear-gradient(45deg, rgba(10, 28, 61, .04) 0 1px, transparent 1px 14px);
}
[data-theme="light"] .pr-level {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
[data-theme="light"] .pr-level:hover { border-color: var(--accent-stroke); box-shadow: var(--shadow-pop); }
[data-theme="light"] .pr-level::before { background: rgba(10, 28, 61, .1); }
/* El lima puro sobre papel da 1,17:1 y la barra dejaría de informar */
[data-theme="light"] .pr-level::after {
  background: linear-gradient(90deg, rgba(87, 147, 31, .45), var(--accent-stroke));
  box-shadow: none;
}
[data-theme="light"] .pr-level__tag {
  border-color: var(--accent-stroke);
  background: var(--accent-fill);
  color: var(--text-on-fill);
}
[data-theme="light"] .pr-level__name { color: var(--text-strong); }
[data-theme="light"] .pr-level__price { color: var(--accent); }
[data-theme="light"] .pr-web {
  border-color: var(--line);
  background: linear-gradient(180deg, #ffffff, #f2f6fc);
  box-shadow: var(--shadow-card);
}
[data-theme="light"] .pr-web__head h3 { color: var(--text-strong); }
[data-theme="light"] .pr-web__row { border-bottom-color: var(--line); }
[data-theme="light"] .pr-web__v { color: var(--accent); }

/* --- 3) Constructor ------------------------------------------------------- */
[data-theme="light"] .pr-base {
  border-color: var(--accent-stroke);
  background: linear-gradient(160deg, #ffffff, #eef4fa);
  box-shadow: var(--shadow-card);
}
[data-theme="light"] .pr-base h3 { color: var(--text-strong); }
[data-theme="light"] .pr-base__price { color: var(--accent); }
[data-theme="light"] .pr-mods__head h3 { color: var(--text-strong); }
[data-theme="light"] .pr-mods__demo {
  border-color: var(--accent-stroke);
  background: var(--accent-soft);
  color: var(--accent);
}
[data-theme="light"] .pr-mods__demo:hover { background: rgba(156, 255, 0, .35); }
[data-theme="light"] .pr-mod {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
[data-theme="light"] .pr-mod:hover { border-color: var(--accent-stroke); }
[data-theme="light"] .pr-mod.is-on {
  border-color: var(--accent-stroke);
  background: #f4fce6;                 /* verde papel: se nota elegido sin gritar */
}
[data-theme="light"] .pr-mod__box { border-color: var(--line-ui); }
[data-theme="light"] .pr-mod__name { color: var(--text-strong); }
[data-theme="light"] .pr-mod__price { color: var(--accent); }
/* EL MARCADOR SE QUEDA ENCENDIDO ------------------------------------------
   Aquí estaba el error de la primera version del tema claro: convertir en papel
   TAMBIÉN lo que es una pantalla. El resultado era una página de blanco sobre
   blanco donde la identidad arcade desaparecía.

   Un marcador es un display, igual que la maquinita del hero. Así que en claro
   se queda en tinta azul profunda con el lima encendido encima: deja de ser
   "una tarjeta más" y pasa a ser el ancla visual de la sección. Sobre tinta el
   lima vuelve a ser legible como texto (13,8:1), así que dentro de este bloque
   los tokens se invierten. */
[data-theme="light"] .pr-score {
  --text: #ffffff;
  --text-strong: #ffffff;
  --text-muted: rgba(255, 255, 255, .8);
  --text-faint: rgba(255, 255, 255, .64);
  --accent: #9cff00;
  --line: rgba(255, 255, 255, .16);
  --line-strong: rgba(255, 255, 255, .26);
  --line-accent-soft: rgba(156, 255, 0, .22);
}
[data-theme="light"] .pr-score__inner {
  border-color: var(--ink-surface);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(156, 255, 0, .14), transparent 60%),
    linear-gradient(180deg, var(--ink-surface-2), var(--ink-surface));
  box-shadow: var(--shadow-lift);
}
[data-theme="light"] .pr-score__inner::before {
  opacity: .6;
  background: repeating-linear-gradient(180deg, rgba(156, 255, 0, .05) 0 1px, transparent 1px 5px);
}
[data-theme="light"] .pr-score__label { color: var(--accent-fill); }
[data-theme="light"] .pr-score__num { color: #ffffff; text-shadow: none; }
[data-theme="light"] .pr-score__line b { color: var(--accent-fill); }
[data-theme="light"] .pr-score__line--base,
[data-theme="light"] .pr-score__meta b { color: #ffffff; }
[data-theme="light"] .pr-score__note {
  border-left-color: var(--accent-fill);
  background: rgba(156, 255, 0, .12);
  color: rgba(255, 255, 255, .8);
}
/* El power-up, ya dentro de la tinta */
[data-theme="light"] .pr-bonus {
  border-color: rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .05);
}
[data-theme="light"] .pr-bonus.is-on {
  border-color: var(--accent-fill);
  background: rgba(156, 255, 0, .14);
  box-shadow: 0 0 24px rgba(156, 255, 0, .22);
}
[data-theme="light"] .pr-bonus__badge { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .9); }
[data-theme="light"] .pr-bonus.is-on .pr-bonus__badge { background: var(--accent-fill); color: var(--ink-surface); }
[data-theme="light"] .pr-bonus__title { color: #ffffff; }
[data-theme="light"] .pr-bonus__track { background: rgba(255, 255, 255, .14); }
[data-theme="light"] .pr-bonus__track span {
  background: linear-gradient(90deg, rgba(156, 255, 0, .4), var(--accent-fill));
}

/* --- 4) Combos ------------------------------------------------------------ */
[data-theme="light"] .pr-combo {
  border-color: var(--line);
  background: linear-gradient(180deg, #ffffff, #f2f6fc);
  box-shadow: var(--shadow-card);
}
[data-theme="light"] .pr-combo:hover,
[data-theme="light"] .pr-combo--star { border-color: var(--accent-stroke); box-shadow: var(--shadow-pop); }
[data-theme="light"] .pr-combo__slot {
  background: repeating-linear-gradient(90deg, var(--accent-fill) 0 6px, transparent 6px 12px);
}
[data-theme="light"] .pr-combo h3 { color: var(--text-strong); }
[data-theme="light"] .pr-combo__price .pr-num { color: var(--accent); }

/* --- 5) Soporte ----------------------------------------------------------- */
[data-theme="light"] .pr-sec--soporte::before {
  border-top: 1px solid var(--accent-stroke);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #e6ecf5, #eef3f9);
}
[data-theme="light"] .pr-support__copy h2 { color: var(--text-strong); }
[data-theme="light"] .pr-support__list li {
  border-color: var(--accent-stroke);
  background: var(--accent-soft);
  color: var(--text-muted);
}
[data-theme="light"] .pr-power__cell {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
[data-theme="light"] .pr-power__cell:hover { border-color: var(--accent-stroke); }
[data-theme="light"] .pr-power__v { color: var(--accent); }
[data-theme="light"] .pr-power__v i { color: var(--text-faint); }

/* --- 6) Terminal: la consola pasa a hoja impresa -------------------------- */
[data-theme="light"] .pr-terminal {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
[data-theme="light"] .pr-terminal__bar {
  border-bottom-color: var(--line);
  background: var(--bg-3);
}
[data-theme="light"] .pr-terminal__bar i { background: var(--line-strong); }
[data-theme="light"] .pr-terminal__bar i:first-child { background: var(--accent-fill); }
[data-theme="light"] .pr-terminal__bar span { color: var(--text-faint); }
[data-theme="light"] .pr-terminal__title { color: var(--text-strong); }
[data-theme="light"] .pr-terminal__list li::before { color: var(--accent); }
[data-theme="light"] .pr-terminal__list b { color: var(--text-strong); }