/* ============================================================
   SKALRP · web pública
   ------------------------------------------------------------
   Paleta sacada del logo, no del sistema de diseño de las NUIs:
   negro profundo, acero y azul hielo. El turquesa de tokens.css
   es el de dentro del juego y aquí desentonaría con el escudo.

   Sin dependencias externas: ni fuentes de Google, ni CDN, ni
   frameworks. Misma disciplina que las interfaces del servidor,
   y además hace la página instantánea desde el primer visitante.
   ============================================================ */

:root {
    --hielo:        #7fd4f0;
    --hielo-claro:  #b9e8fa;
    --hielo-hondo:  #2b7fa3;
    --hielo-rgb:    127, 212, 240;

    --negro:        #05070a;
    --negro-alto:   #090c11;
    --panel:        #0d1117;
    --panel-alto:   #121821;

    --acero:        #8b98a8;
    --texto:        rgba(255, 255, 255, .90);
    --texto-medio:  rgba(255, 255, 255, .60);
    --texto-bajo:   rgba(255, 255, 255, .38);

    --linea:        rgba(255, 255, 255, .08);
    --linea-fuerte: rgba(255, 255, 255, .15);

    --ancho:        1180px;

    /* ---------- Movimiento ----------
       UNA curva para todo. La coherencia del movimiento de una web no sale
       de tener muchas animaciones, sale de que todas se muevan igual: si
       cada transición usa su propia curva, el conjunto se nota barato
       aunque cada pieza esté bien.

       Ésta es una expo-out marcada: arranca rápido y frena mucho al final,
       que es lo que hace que algo parezca que "llega" en vez de que se
       desliza. Es la misma que usa apexscripts.xyz (comprobado en su CSS:
       `--apex-ease: cubic-bezier(.16, 1, .3, 1)`).

       Regla: nada de esta web usa otra curva. Si algo la necesita, es que
       está mal pensado. Única excepción admitida, la elástica de abajo,
       y sólo para cosas que APARECEN de golpe (una insignia, un contador). */
    --curva:        cubic-bezier(.16, 1, .3, 1);
    --curva-pop:    cubic-bezier(.34, 1.56, .64, 1);
    --rapido:       .18s var(--curva);
    --medio:        .28s var(--curva);
    --lento:        .48s var(--curva);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    background: var(--negro);
    color: var(--texto);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;      /* la página nunca se desplaza en horizontal */
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.envoltorio { width: min(100% - 40px, var(--ancho)); margin-inline: auto; }

/* ---------- Cabecera ---------- */
.cabecera {
    position: sticky; top: 0; z-index: 50;
    background: rgba(5, 7, 10, .82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--linea);
}
.cabecera-fila { display: flex; align-items: center; gap: 28px; padding: 12px 0; }
.marca { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.marca img { width: 34px; }
.marca b { font-size: 19px; letter-spacing: .14em; font-weight: 800; }

.menu { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.menu a {
    font-size: 14px; color: var(--texto-medio);
    transition: color .2s var(--curva);
}
.menu a:hover { color: var(--hielo-claro); }

/* ---------- Botones ----------
   Medidos sobre la referencia, no inventados. Cuatro decisiones que son
   las que separan un botón que parece de plantilla de uno que no:

   · RADIO 12 px, no 3. El canto casi recto se lee como "formulario"; el
     redondeado generoso, como producto.
   · PESO 500 e INTERLETRAJE NEGATIVO (-.01em). Casi todo el mundo pone
     700 y espaciado positivo creyendo que se lee mejor; a este tamaño
     hace justo lo contrario, separa las letras y lo abarata.
   · RELLENO TRANSLÚCIDO + borde de 1 px, en vez de un color plano.
   · LUZ INTERIOR ARRIBA (`inset 0 1px 0`). Es el mismo truco que la
     sombra de las tarjetas: dibuja el canto superior y hace que el botón
     parezca tener grosor. Cuesta una línea y es lo que más se nota. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    height: 43px; padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 14px; font-weight: 500; letter-spacing: -.01em;
    cursor: pointer; font-family: inherit;
    white-space: nowrap;
    transition: transform var(--rapido), box-shadow var(--medio),
                background-color var(--medio), border-color var(--medio),
                color var(--medio);
}
.btn-primario {
    background: linear-gradient(160deg, var(--hielo), var(--hielo-hondo));
    color: #04141c;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn-primario:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28),
                0 12px 30px rgba(var(--hielo-rgb), .32);
}
.btn-linea {
    background: rgba(244, 244, 245, .05);
    color: var(--texto);
    border-color: rgba(255, 255, 255, .11);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.btn-linea:hover {
    background: rgba(244, 244, 245, .09);
    border-color: rgba(var(--hielo-rgb), .45);
    color: var(--hielo-claro);
}
.btn:active { transform: scale(.98); }
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* ---------- Selector de moneda ---------- */
.moneda { position: relative; }
.moneda-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 43px; padding: 0 14px;
    background: rgba(244, 244, 245, .05);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    color: var(--texto); font: inherit; font-size: 14px; font-weight: 500;
    cursor: pointer;
    transition: background-color var(--medio), border-color var(--medio);
}
.moneda-btn:hover { background: rgba(244, 244, 245, .09); }
.moneda-btn svg { width: 12px; height: 12px; opacity: .5; transition: transform var(--rapido); }
.moneda[data-abierto="true"] .moneda-btn svg { transform: rotate(180deg); }

.moneda-lista {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
    min-width: 152px; padding: 6px;
    background: var(--panel-alto);
    border: 1px solid var(--linea-fuerte);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
    /* Cerrado por defecto y sin ocupar sitio ni recibir clics. */
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--rapido), transform var(--rapido), visibility var(--rapido);
}
.moneda[data-abierto="true"] .moneda-lista {
    opacity: 1; visibility: visible; transform: none;
}
.moneda-op {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    width: 100%; padding: 8px 10px;
    background: none; border: 0; border-radius: 8px;
    color: var(--texto-medio); font: inherit; font-size: 13.5px;
    cursor: pointer; text-align: left;
    transition: background-color var(--rapido), color var(--rapido);
}
.moneda-op:hover { background: rgba(255, 255, 255, .05); color: var(--texto); }
.moneda-op[aria-selected="true"] { color: var(--hielo-claro); }
.moneda-op i { font-style: normal; opacity: .45; font-size: 12px; }

/* ---------- Precio en la ficha ---------- */
.ficha-precio {
    font-size: 19px; font-weight: 700; color: var(--hielo-claro);
    font-variant-numeric: tabular-nums;
}
.ficha-precio.pendiente {
    font-size: 13px; font-weight: 500; color: var(--texto-bajo);
}

/* ---------- Portada ---------- */
.portada { position: relative; padding: 86px 0 70px; overflow: hidden; }
.portada::before {
    /* Resplandor frío detrás del escudo. conic/radial en vez de una imagen:
       pesa cero y escala a cualquier pantalla. */
    content: '';
    position: absolute; inset: -30% 20% auto -10%; height: 620px;
    background: radial-gradient(closest-side, rgba(var(--hielo-rgb), .13), transparent 72%);
    pointer-events: none;
}
.portada-rejilla {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 52px; align-items: center;
}
.portada h1 {
    font-size: clamp(34px, 5vw, 60px);
    line-height: 1.06; letter-spacing: -.02em; margin: 0 0 20px;
    font-weight: 800;
}
.portada h1 em {
    font-style: normal;
    background: linear-gradient(120deg, var(--hielo-claro), var(--hielo-hondo));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.portada p.entrada { font-size: 18px; color: var(--texto-medio); margin: 0 0 30px; max-width: 54ch; }
.portada-botones { display: flex; gap: 12px; flex-wrap: wrap; }

.portada-escudo { position: relative; }
.portada-escudo img { filter: drop-shadow(0 26px 60px rgba(var(--hielo-rgb), .22)); }

/* Barra de datos honestos: sólo lo que se puede comprobar. */
.datos {
    display: flex; flex-wrap: wrap; gap: 30px;
    margin-top: 46px; padding-top: 26px;
    border-top: 1px solid var(--linea);
}
.dato b { display: block; font-size: 26px; font-weight: 800; color: var(--hielo-claro); }
.dato span { font-size: 13px; color: var(--texto-bajo); }

/* ---------- Secciones ---------- */
.seccion { padding: 76px 0; }
.seccion-cabeza { margin-bottom: 42px; max-width: 62ch; }
.cintillo {
    display: inline-block; font-size: 12px; letter-spacing: .22em;
    text-transform: uppercase; color: var(--hielo); margin-bottom: 12px;
}
.seccion h2 {
    font-size: clamp(26px, 3.4vw, 38px); line-height: 1.15;
    margin: 0 0 12px; letter-spacing: -.015em; font-weight: 800;
}
.seccion h2 + p { color: var(--texto-medio); margin: 0; font-size: 17px; }

/* ---------- Catálogo ---------- */
.catalogo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}
.ficha {
    position: relative;
    display: flex; flex-direction: column;
    background: linear-gradient(165deg, var(--panel-alto), var(--panel));
    border: 1px solid var(--linea);
    border-radius: 5px;
    padding: 22px;
    transition: transform var(--medio), border-color var(--medio),
                box-shadow var(--medio);
}
/* La sensación de calidad al pasar por encima NO viene del movimiento —son
   4 px— sino de la sombra en TRES capas. Es lo que hace la referencia y es
   lo que la diferencia de un `box-shadow` de plantilla:
     1) una luz finísima arriba, que dibuja el canto de la tarjeta;
     2) una sombra de contacto muy corta, que la pega al fondo;
     3) un halo grande y difuso con extensión NEGATIVA (-26px), que la
        levanta sin manchar lo que hay alrededor. Sin ese negativo, el halo
        se derrama y el conjunto se ensucia.
   Descartado a propósito: la inclinación 3D siguiendo al ratón. La
   referencia tampoco la tiene, cuesta JS en cada movimiento del cursor y
   envejece mal. */
.ficha:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--hielo-rgb), .4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 2px 4px rgba(0, 0, 0, .35),
        0 22px 48px -26px rgba(0, 0, 0, .62);
}
.ficha-alto { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ficha h3 { margin: 0; font-size: 17px; font-weight: 700; }
.ficha-nombre { font-size: 12px; color: var(--texto-bajo); font-family: ui-monospace, Menlo, Consolas, monospace; }
.ficha p { margin: 0 0 18px; font-size: 14.5px; color: var(--texto-medio); flex: 1; }

.etiqueta {
    font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 999px; font-weight: 700;
    border: 1px solid currentColor;
}
.etiqueta.demo { color: var(--hielo); }
.etiqueta.nui  { color: var(--acero); }

.ficha-pie {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: auto;                 /* pegado abajo: todas las fichas de una
                                         fila acaban con el botón a la misma
                                         altura aunque el texto mida distinto */
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .06);
}
.ficha-pie .btn { padding: 9px 16px; font-size: 13px; }

/* ---------- Por qué ---------- */
.motivos { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 20px; }
.motivo { padding: 26px; border: 1px solid var(--linea); border-radius: 5px; background: var(--panel); }
.motivo .num {
    font-size: 12px; letter-spacing: .18em; color: var(--hielo-hondo);
    display: block; margin-bottom: 12px; font-weight: 700;
}
.motivo h3 { margin: 0 0 9px; font-size: 17px; }
.motivo p { margin: 0; font-size: 14.5px; color: var(--texto-medio); }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--linea); padding: 40px 0; margin-top: 30px; }
.pie-fila { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.pie small { color: var(--texto-bajo); font-size: 13px; }
.pie-enlaces { display: flex; gap: 20px; }
.pie-enlaces a { font-size: 13.5px; color: var(--texto-medio); }
.pie-enlaces a:hover { color: var(--hielo-claro); }

/* ---------- Adaptación ---------- */
@media (max-width: 900px) {
    .portada-rejilla { grid-template-columns: 1fr; gap: 34px; }
    .portada-escudo { order: -1; max-width: 340px; margin-inline: auto; }
    .menu { display: none; }
    .seccion { padding: 54px 0; }
}

/* ============================================================
   APARICIÓN AL BAJAR
   ------------------------------------------------------------
   Los bloques entran cuando asoman por abajo. Dos cosas que casi
   nadie hace y aquí no son opcionales:

   1) SIN JAVASCRIPT SE VE TODO. El <html> nace con class="no-js"
      y el propio guion se la quita. Si el JS no carga o falla, la
      regla de abajo deja la página entera visible. Una web de
      venta donde el contenido no aparece porque falló un
      observador no vende nada, y el fallo es invisible para quien
      la publica.
   2) prefers-reduced-motion lo apaga del todo, no lo acelera.
   ============================================================ */
.aparece {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s var(--curva), transform .7s var(--curva);
}
.aparece.izq   { transform: translateX(-30px); }
.aparece.zoom  { transform: scale(.965); }
.aparece.visto { opacity: 1; transform: none; }

.no-js .aparece { opacity: 1; transform: none; }

/* Cascada: cada hijo entra 90 ms después del anterior. El retardo sale de
   una variable --i puesta en el HTML, así que no hace falta ni una línea de
   JS por tarjeta. */
.cascada > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s var(--curva) calc(var(--i, 0) * 90ms),
                transform .7s var(--curva) calc(var(--i, 0) * 90ms);
}
.cascada.visto > * { opacity: 1; transform: none; }
.no-js .cascada > * { opacity: 1; transform: none; }

/* Contador que sube. La animación la lleva el JS; aquí sólo se reserva el
   ancho con cifras tabulares para que el número no baile mientras cuenta. */
.dato b { font-variant-numeric: tabular-nums; }

/* ============================================================
   MENOS MOVIMIENTO
   ------------------------------------------------------------
   El reset global NO basta, y esto es lo que se aprende mirando
   una web hecha en serio: acelerar las transiciones a 0,01 ms no
   puede quitar un pseudo-elemento que brilla, ni devolver el
   scroll a un `sticky`, ni desactivar una animación infinita.
   Por eso, después del reset, van las excepciones una a una.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    /* Y ahora lo que el reset no puede hacer: */
    .aparece, .cascada > * { opacity: 1 !important; transform: none !important; }
    .ficha:hover { transform: none; }        /* la sombra se queda, el salto no */
    .btn-primario:hover { transform: none; }
    .cabecera { position: static; }          /* sin barra que persigue */
}

/* En pantalla táctil no hay "pasar por encima": el primer toque dispararía
   el hover y el segundo el clic, que se siente como que el botón falla. */
@media (pointer: coarse) {
    .ficha:hover { transform: none; box-shadow: none; }
    .btn:hover { transform: none; box-shadow: none; }
}

/* ---------------------------------------------------------------- Tienda */
/* Precio tachado cuando el paquete esta rebajado en Tebex. */
.ficha-antes{
  color: var(--tenue, rgba(255,255,255,.42));
  font-size: .82em;
  margin-right: .5em;
  text-decoration-thickness: 1px;
}

/* Aviso de la tienda. Aparece SOLO si falla algo al abrir el pago; el resto
   del tiempo no existe en la pagina. */
.tienda-aviso{
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(12px);
  max-width: min(520px, calc(100vw - 32px));
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(18, 20, 24, .96);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  color: rgba(255, 255, 255, .9);
  font-size: 14px;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 90;
}
.tienda-aviso.visible{ opacity: 1; transform: translateX(-50%); }

@media (prefers-reduced-motion: reduce){
  .tienda-aviso{ transition: none; }
}

/* ============================================================
   PAGINA DE UN SCRIPT
   ------------------------------------------------------------
   La tarjeta del catalogo da una linea; aqui es donde se decide
   la compra. Mismo lenguaje que el resto: hielo sobre negro,
   sin glow ni neon.
   ============================================================ */
.pagina-ficha .ficha-pagina {
    max-width: 860px;
    margin: 0 auto;
    padding: clamp(24px, 5vw, 64px) clamp(18px, 4vw, 32px) 96px;
}

.migas {
    display: inline-block;
    color: var(--texto-bajo);
    font-size: 14px;
    margin-bottom: 28px;
    transition: color .2s var(--curva);
}
.migas:hover { color: var(--hielo); }

.ficha-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--linea);
    margin-bottom: 40px;
}
.ficha-cab h1 {
    font-size: clamp(30px, 5vw, 46px);
    line-height: 1.05;
    margin: 0 0 8px;
}
.ficha-id {
    color: var(--texto-bajo);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 14px;
}

.ficha-compra {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.precio-grande {
    font-size: clamp(24px, 3.4vw, 32px);
    font-weight: 700;
    color: var(--hielo-claro);
    white-space: nowrap;
}
.precio-grande.pendiente {
    font-size: 15px;
    font-weight: 500;
    color: var(--texto-bajo);
}
.btn.desactivado {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

.bloque-ficha { margin-bottom: 44px; }
.bloque-ficha h2 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hielo);
    margin: 0 0 14px;
}
.bloque-ficha p {
    color: var(--texto-medio);
    font-size: 16.5px;
    line-height: 1.7;
    margin: 0;
    max-width: 62ch;
}

.lista-etiquetas, .lista-req {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0;
}
.lista-etiquetas li, .lista-req li {
    padding: 7px 15px;
    border-radius: 999px;
    background: rgba(var(--hielo-rgb), .07);
    border: 1px solid rgba(var(--hielo-rgb), .18);
    color: var(--texto);
    font-size: 14px;
}
.lista-req li code { font-size: 13.5px; color: var(--hielo-claro); }

.pasos {
    color: var(--texto-medio);
    font-size: 16px;
    line-height: 1.75;
    padding-left: 22px;
    margin: 0;
    max-width: 62ch;
}
.pasos li { margin-bottom: 8px; }
.pasos code {
    color: var(--hielo-claro);
    font-size: 14.5px;
    background: rgba(var(--hielo-rgb), .08);
    padding: 2px 7px;
    border-radius: 5px;
}
.nota-ficha {
    color: var(--texto-bajo);
    font-size: 14px;
    margin-top: 12px;
}

.volver {
    display: inline-block;
    margin-top: 12px;
    color: var(--texto-bajo);
    font-size: 15px;
    transition: color .2s var(--curva);
}
.volver:hover { color: var(--hielo); }

/* El titulo de la tarjeta ahora es un enlace a su ficha. */
.ficha-alto h3 a {
    color: inherit;
    transition: color .2s var(--curva);
}
.ficha-alto h3 a:hover { color: var(--hielo-claro); }

/* ============================================================
   APARICION AL BAJAR
   ------------------------------------------------------------
   Lo pone el JS con IntersectionObserver, no una animacion a
   ciegas: asi solo se mueve lo que de verdad entra en pantalla y
   nada baila al cargar. El estado de reposo es VISIBLE, para que
   si el JS no corre no se quede la pagina en blanco.
   ============================================================ */
.aparece {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s var(--curva), transform .55s var(--curva);
}
.aparece.dentro { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .aparece { opacity: 1; transform: none; transition: none; }
}