/* El mismo lenguaje visual que el panel del NAS: «Liquid Glass». Fondo con degradado suave,
   superficies de cristal esmerilado y un solo azul de acción. Así la web de venta y el panel se
   ven como el mismo producto. */
:root {
  --azul: #2563eb; --azul-oscuro: #1d4ed8;
  --tinta: #0f172a; --suave: #64748b; --linea: rgba(15, 23, 42, 0.09);
  --panel: rgba(255, 255, 255, 0.72); --fondo: rgba(255, 255, 255, 0.75);
  --ok: #059669; --error: #dc2626; --aviso: #b45309;
  --cristal: rgba(255, 255, 255, 0.72);
  --cristal-borde: rgba(255, 255, 255, 0.55);
  --sombra: 0 24px 56px -22px rgba(15, 23, 42, 0.32);
}
/* Modo oscuro: por preferencia del sistema (salvo que se haya forzado claro) o a mano con el
   interruptor (data-theme). Las mismas variables en los dos casos. */
:root[data-theme="dark"] {
  --tinta: #e2e8f0; --suave: #94a3b8; --linea: rgba(148, 163, 184, 0.14);
  --aviso: #fbbf24;
  --panel: rgba(30, 41, 59, 0.6); --fondo: rgba(15, 23, 42, 0.5);
  --cristal: rgba(30, 41, 59, 0.6);
  --cristal-borde: rgba(148, 163, 184, 0.16);
  --sombra: 0 24px 56px -22px rgba(0, 0, 0, 0.6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tinta: #e2e8f0; --suave: #94a3b8; --linea: rgba(148, 163, 184, 0.14);
    --aviso: #fbbf24;
    --panel: rgba(30, 41, 59, 0.6); --fondo: rgba(15, 23, 42, 0.5);
    --cristal: rgba(30, 41, 59, 0.6);
    --cristal-borde: rgba(148, 163, 184, 0.16);
    --sombra: 0 24px 56px -22px rgba(0, 0, 0, 0.6);
  }
}
/* ============================================================ movimiento
   Todo el movimiento de la web sale de aquí, y todo se apaga con una sola regla al final.

   `prefers-reduced-motion` no es un detalle de accesibilidad de manual: hay gente a la que
   una animación de entrada le provoca mareo de verdad. Se respeta sin excepciones, y por eso
   NINGUNA animación de esta hoja oculta contenido —todas parten de opacidad visible salvo
   las que el script activa, y el script no hace nada si el sistema pide quietud—. */

:root {
  --curva: cubic-bezier(.22, 1, .36, 1);   /* salida suave, sin rebote */
  --rapido: .18s;
  --medio: .32s;
}

@keyframes entrar-abajo {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes entrar-suave {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* La entrada de la página. Corta y solo una vez: una web que tarda medio segundo en
   aparecer cada vez que navegas cansa al tercer clic. */
main { animation: entrar-suave .25s var(--curva) both; }

/* Aparecer al llegar con el scroll. La clase la pone el script SOLO si el sistema no pide
   quietud; sin script, el contenido está visible desde el principio (`.revelar` sin
   `.listo` no oculta nada por sí sola). */
.revelar.armado { opacity: 0; transform: translateY(18px); }
.revelar.armado.visible {
  opacity: 1; transform: none;
  transition: opacity .55s var(--curva), transform .55s var(--curva);
}

* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta); line-height: 1.55; min-height: 100vh; letter-spacing: -0.006em;
  background:
    radial-gradient(ellipse 90% 70% at 12% 0%, rgba(99, 132, 199, 0.22), transparent 62%),
    radial-gradient(ellipse 80% 60% at 88% 8%, rgba(129, 140, 202, 0.18), transparent 62%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(100, 150, 170, 0.16), transparent 68%),
    linear-gradient(165deg, #eef2f8 0%, #e8ecf5 45%, #e6eef1 100%);
  background-attachment: fixed;
}
:root[data-theme="dark"] body {
  background:
    radial-gradient(ellipse 90% 70% at 12% 0%, rgba(37, 99, 235, 0.18), transparent 62%),
    radial-gradient(ellipse 80% 60% at 88% 8%, rgba(79, 70, 229, 0.16), transparent 62%),
    linear-gradient(165deg, #0b1220 0%, #0d1424 50%, #0b131f 100%);
  background-attachment: fixed;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background:
      radial-gradient(ellipse 90% 70% at 12% 0%, rgba(37, 99, 235, 0.18), transparent 62%),
      radial-gradient(ellipse 80% 60% at 88% 8%, rgba(79, 70, 229, 0.16), transparent 62%),
      linear-gradient(165deg, #0b1220 0%, #0d1424 50%, #0b131f 100%);
    background-attachment: fixed;
  }
}
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Superficie de cristal, como los paneles del NAS. */
.cristal, .lp-feat, .lp-price-card, .tarjeta, .licencia {
  background: var(--cristal);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  border: 1px solid var(--cristal-borde);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(15, 23, 42, 0.04), var(--sombra);
}

.barra {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 1.2rem; border-bottom: 1px solid var(--cristal-borde);
  background: var(--cristal); backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  position: sticky; top: 0; z-index: 10;
}
.barra .marca { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; color: var(--tinta); }
.barra .marca:hover { text-decoration: none; }
.marca-tile { width: 26px; height: 26px; border-radius: 8px; }
.marca-os { color: var(--azul); }

/* ---------------------------------------------------------------- menú de navegación
   Tres pesos, no uno: los enlaces de sección son discretos, la sesión va detrás de un
   separador y «Comprar» es un botón sólido. Antes los siete eran texto azul del mismo
   tamaño, así que la acción que paga la web se perdía entre «Inicio» y «Documentación». */

.barra nav { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
.nav-fijo { display: flex; align-items: center; gap: .5rem; margin-left: .75rem; }
.barra nav form { display: flex; }

.nav-enlace {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: .42rem .7rem; border-radius: 9px;
  font: inherit; font-size: .9rem; font-weight: 500;
  color: var(--suave); background: none; border: 0; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.nav-enlace:hover {
  text-decoration: none; color: var(--tinta);
  background: color-mix(in srgb, var(--tinta) 7%, transparent);
}
/* Dónde estás. Se cuelga de aria-current, que es el atributo que ya lo dice de verdad: así
   no hay una clase «activo» que se pueda quedar desincronizada del enlace real. */
.nav-enlace[aria-current="page"] {
  color: var(--tinta); font-weight: 650;
  background: color-mix(in srgb, var(--azul) 12%, transparent);
}
.nav-sep {
  width: 1px; height: 18px; margin: 0 .45rem;
  background: var(--linea);
}

.nav-cta {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: .45rem .95rem; border-radius: 999px;
  font-size: .9rem; font-weight: 650; color: #fff;
  background: linear-gradient(180deg, var(--azul), var(--azul-oscuro));
  box-shadow: 0 1px 2px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.nav-cta:hover {
  text-decoration: none; filter: brightness(1.06);
  box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--azul) 55%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .22);
}
.nav-cta:active { transform: translateY(1px); }

/* El botón de menú solo existe en pantallas estrechas. */
.nav-abrir { display: none; }

/* Foco visible en todo lo que se puede pulsar de la barra: sin esto, moverse con el teclado
   por el menú es a ciegas. */
.nav-enlace:focus-visible, .nav-cta:focus-visible,
.tema-btn:focus-visible, .nav-abrir:focus-visible {
  outline: 2px solid var(--azul); outline-offset: 2px;
}

/* Por debajo de esto los enlaces ya no caben al lado de la marca —a 534 px ocupaban la barra
   entera y la partían en dos filas—, así que se pliegan. Comprar y el tema se quedan
   siempre a la vista: son la acción de venta y un ajuste de una sola pulsación. */
@media (max-width: 860px) {
  .barra { flex-wrap: wrap; gap: .5rem; padding: .6rem .9rem; }
  .nav-abrir {
    display: inline-flex; align-items: center; justify-content: center;
    order: 3; margin-left: auto;
    width: 38px; height: 38px; padding: 0; border-radius: 10px;
    background: none; border: 1px solid var(--cristal-borde); color: var(--tinta);
    cursor: pointer;
  }
  .nav-abrir svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
  .nav-fijo { order: 2; margin-left: auto; }
  .barra nav {
    order: 4; display: none; width: 100%;
    flex-direction: column; align-items: stretch; gap: .1rem;
    margin: .25rem 0 .15rem; padding-top: .5rem;
    border-top: 1px solid var(--linea);
  }
  .barra.menu-abierto nav { display: flex; }
  .barra nav form { width: 100%; }
  .nav-enlace { width: 100%; justify-content: flex-start; padding: .6rem .7rem; font-size: .95rem; }
  .nav-sep { width: 100%; height: 1px; margin: .35rem 0; }
}

main { max-width: 1040px; margin: 0 auto; padding: 1.6rem 1.2rem 3rem; }
footer { max-width: 860px; margin: 0 auto; padding: 1.5rem 1.2rem; color: var(--suave); font-size: .8rem; }

h1 { font-size: 1.8rem; letter-spacing: -.02em; margin: .2rem 0 .4rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 .6rem; }
h3 { margin: 0 0 .4rem; }
.sub { color: var(--suave); margin-top: 0; }
.nota { color: var(--suave); font-size: .9rem; margin-top: 1.5rem; }
.pista { color: var(--suave); font-size: .82rem; }

.hero { padding: 1.5rem 0 1rem; }
.acciones { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.estrecho { max-width: 460px; }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.tarjeta {
  background: var(--panel); border: 1px solid var(--linea); border-radius: 16px; padding: 1.1rem;
}

.btn {
  display: inline-block; background: var(--azul); color: #fff; border: 0; cursor: pointer;
  padding: .6rem 1.1rem; border-radius: 10px; font-size: .95rem; font-weight: 600;
}
.btn:hover { background: var(--azul-oscuro); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--azul); border: 1px solid var(--azul); }
.btn.grande { padding: .8rem 1.4rem; font-size: 1.05rem; }
.btn.peq { padding: .4rem .7rem; font-size: .82rem; }

.formulario { display: flex; flex-direction: column; gap: .9rem; margin: 1.2rem 0; }
.formulario label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; font-weight: 600; }
.formulario input {
  padding: .6rem .7rem; border: 1px solid var(--linea); border-radius: 10px;
  background: var(--fondo); color: var(--tinta); font-size: 1rem;
}
.en-linea { display: inline; }
button.enlace { background: none; border: 0; color: var(--azul); cursor: pointer; font: inherit; padding: 0; }
button.enlace.peligro { color: var(--error); }

.aviso { padding: .7rem .9rem; border-radius: 10px; margin: 1rem 0; font-size: .92rem; }
.aviso.error { background: color-mix(in srgb, var(--error) 12%, transparent); color: var(--error); }
.aviso.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }

.lista-check { list-style: none; padding: 0; margin: 1rem 0; }
.lista-check li { padding-left: 1.6rem; position: relative; margin: .4rem 0; }
.lista-check li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 800; }

.licencia {
  border: 1px solid var(--linea); border-radius: 14px; padding: 1rem; margin: 1rem 0;
  background: var(--panel);
}
.licencia.revocada { opacity: .7; }
.licencia .cab { display: flex; justify-content: space-between; margin-bottom: .6rem; }
.licencia .tipo { font-weight: 700; }
.licencia .estado { font-size: .8rem; color: var(--suave); }
.licencia.activa .estado { color: var(--ok); }
.clave-etq { font-size: .8rem; color: var(--suave); display: block; margin-bottom: .3rem; }
.clave-fila { display: flex; gap: .5rem; }
.clave {
  flex: 1; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .8rem;
  padding: .5rem .6rem; border: 1px solid var(--linea); border-radius: 8px;
  background: var(--fondo); color: var(--tinta); overflow-x: auto;
}

.tabla { width: 100%; border-collapse: collapse; margin-top: .5rem; font-size: .9rem; }
.tabla th, .tabla td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--linea); }
.tabla th { color: var(--suave); font-weight: 600; }

.switch { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.switch input { width: 1.1rem; height: 1.1rem; }

/* ============================================================ campaña de licencia gratis
   Se anuncia arriba del todo y en la tarjeta de pago: son los dos sitios donde se decide, y
   enterarse de que ahora es gratis DESPUÉS de pagar es la peor forma de enterarse. */

.banda-regalo {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 1.2rem; padding: .7rem 1rem; border-radius: 14px;
  font-size: .92rem; color: var(--tinta);
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--ok) 20%, transparent),
    color-mix(in srgb, #10b981 12%, transparent));
  border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent);
}
.banda-regalo:hover { text-decoration: none; filter: brightness(1.05); }
.banda-punto {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent);
  animation: latido 2.2s ease-out infinite;
}
/* Un latido lento, no un parpadeo: llama la atención sin marear a quien lee la página. */
@keyframes latido {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
  70% { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .banda-punto { animation: none; } }
.banda-accion { font-weight: 700; color: var(--ok); }

.lp-amount-gratis { color: var(--ok); }
.lp-tachado { text-decoration: line-through; opacity: .45; font-size: .55em; font-weight: 600; }

/* ============================================================ micro-interacciones
   Lo que separa una web correcta de una que se siente sólida: que TODO lo pulsable responda,
   y que responda igual. Cada pieza tenía su propia transición (o ninguna); aquí van todas
   con la misma curva y la misma duración. */

.btn, .nav-cta, .btn-copiar, .palanca-pista, .tarjeta, .lp-feat, .nav-enlace, .tema-btn {
  transition: transform var(--rapido) var(--curva),
              box-shadow var(--medio) var(--curva),
              background-color var(--rapido) var(--curva),
              border-color var(--rapido) var(--curva),
              color var(--rapido) var(--curva),
              filter var(--rapido) var(--curva);
}

/* Los botones se hunden al pulsar. Es el gesto que hace que un clic «se note» aunque la
   respuesta del servidor tarde. */
.btn:active, .nav-cta:active, .btn-copiar:active { transform: translateY(1px) scale(.985); }
.btn:hover { box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--azul) 70%, transparent); }
.btn.ghost:hover { background: color-mix(in srgb, var(--azul) 8%, transparent); }

/* Las tarjetas que se pueden pulsar se elevan; las que solo informan, no. Que una tarjeta
   reaccione al ratón promete que hace algo, y si no hace nada, miente. */
.lp-feat:hover, .licencia-fila:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 0 1px rgba(15, 23, 42, .05),
              0 28px 60px -24px rgba(15, 23, 42, .38);
}

/* Foco visible en TODO lo que se puede alcanzar con el teclado. Sin esto, recorrer la web
   tabulando es a ciegas —y es como la recorre quien no puede usar el ratón—. */
.btn:focus-visible, .btn-copiar:focus-visible, a:focus-visible,
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 6px;
}

/* El interruptor maestro. Va al final para ganar a todo lo de arriba. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .revelar.armado { opacity: 1 !important; transform: none !important; }
  .btn:active, .nav-cta:active, .lp-feat:hover, .licencia-fila:hover { transform: none !important; }
}

/* ============================================================ entrar · registro · gracias · comprar
   Todas comparten la misma caja centrada. Un formulario suelto contra el fondo de la página
   no dice dónde empieza ni dónde acaba, y estas son las pantallas donde alguien decide si
   se queda o se va. */

.acceso { max-width: 26rem; margin: 2.5rem auto 0; }
.acceso-caja { border-radius: 20px; padding: 1.9rem; }
.acceso-caja h1 { font-size: 1.5rem; margin: 0 0 .3rem; }
.acceso-caja .sub { margin: 0 0 1.4rem; font-size: .92rem; }
.acceso-caja .formulario { margin: 0; }
/* El botón principal, a todo el ancho de la caja: en un formulario de dos campos, un botón
   pequeño a la izquierda no parece el final del camino. */
.acceso-btn { display: block; width: 100%; text-align: center; margin-top: .4rem; }
.acceso-pie { margin: 1.1rem 0 0; text-align: center; font-size: .88rem; color: var(--suave); }

.formulario input:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: transparent; }
.formulario label .pista { font-weight: 400; }

.acceso-ventajas {
  margin: 1.4rem 0 0; padding: 1.1rem 0 0; list-style: none;
  border-top: 1px solid var(--linea);
}
.acceso-ventajas li {
  position: relative; padding-left: 1.5rem; margin-bottom: .5rem;
  font-size: .85rem; color: var(--suave); line-height: 1.5;
}
.acceso-ventajas li:last-child { margin-bottom: 0; }
.acceso-ventajas li::before {
  content: ''; position: absolute; left: 0; top: .45rem;
  width: .85rem; height: .45rem; border: 2px solid var(--ok);
  border-top: 0; border-right: 0; transform: rotate(-45deg);
}

/* ---- gracias ---- */

.gracias-marca {
  display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1rem;
  border-radius: 50%; color: var(--ok);
  background: color-mix(in srgb, var(--ok) 14%, transparent);
}
.gracias-marca svg { width: 1.5rem; height: 1.5rem; }
.gracias-marca.esperando { color: var(--azul); background: color-mix(in srgb, var(--azul) 14%, transparent); }
.gracias-pasos { grid-template-columns: minmax(0, 1fr); margin: 1.5rem 0 0; }
.gracias-sepa { margin-top: 1rem; }

/* ---- comprar ---- */

.compra-precio {
  font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1;
}
.compra-precio.es-gratis { color: var(--ok); }
.compra-tachado { text-decoration: line-through; opacity: .4; font-size: .42em; font-weight: 600; }
.compra-nota { margin: .45rem 0 1.4rem; font-size: .88rem; color: var(--suave); }
.compra-incluye { margin: 0 0 1.5rem; }
.compra-seguro { margin-top: .8rem; text-align: center; }

/* ---- descargar ---- */

.descarga { max-width: 42rem; margin: 0 auto; }
.descarga-cab { text-align: center; margin-bottom: 1.8rem; }
.descarga-cab h1 { margin-bottom: .4rem; }
.descarga-caja { border-radius: 20px; padding: 1.8rem; text-align: center; }
.descarga-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
}
.descarga-btn svg { width: 1.15rem; height: 1.15rem; }
.descarga-meta { margin: .9rem 0 0; font-size: .85rem; color: var(--suave); }
.descarga-suma { margin-top: 1rem; text-align: left; }
.descarga-suma summary {
  cursor: pointer; font-size: .82rem; color: var(--azul); list-style: none;
}
.descarga-suma summary::-webkit-details-marker { display: none; }
.descarga-suma summary::before { content: '▸ '; }
.descarga-suma[open] summary::before { content: '▾ '; }
.descarga-suma .pista { margin: .6rem 0 .4rem; }
.descarga-pasos { margin: 1.8rem 0; }
.descarga-ojo { margin: 1.5rem 0; }
.descarga-pie { font-size: .88rem; color: var(--suave); }
.descarga pre {
  overflow-x: auto; padding: .8rem 1rem; border-radius: 12px; font-size: .8rem;
  background: color-mix(in srgb, var(--tinta) 7%, transparent);
  border: 1px solid var(--linea);
}

/* ============================================================ mi cuenta
   Lo que ve alguien que acaba de pagar. Antes era un muro: el aviso de descarga, la clave, el
   identificador, el equipo y los tres párrafos de ayuda, todo del mismo tamaño. Ahora hay un
   orden —qué hacer, tu clave, en qué equipo está— y cada cosa pesa lo que le toca. */

.cabecera-cuenta {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.4rem;
}
.cabecera-cuenta h1 { margin: 0; }
.cabecera-cuenta .sub { margin: .15rem 0 0; }

/* Los tres pasos. Numerados y en fila: es algo que se hace en orden, y un párrafo no lo
   dice. En estrecho se apilan solos. */
.pasos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .75rem; margin: 0 0 1.8rem; padding: 0; list-style: none; counter-reset: paso;
}
.pasos li {
  position: relative; padding: .9rem 1rem .9rem 2.9rem; border-radius: 14px;
  font-size: .9rem; line-height: 1.5; color: var(--suave);
  background: color-mix(in srgb, var(--tinta) 4%, transparent);
  border: 1px solid var(--linea);
}
.pasos li b { color: var(--tinta); font-weight: 650; }
.pasos li::before {
  counter-increment: paso; content: counter(paso);
  position: absolute; left: .9rem; top: .85rem;
  display: flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  font-size: .78rem; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, var(--azul), var(--azul-oscuro));
}

.lic-tarjeta { border-radius: 18px; padding: 1.2rem; }
.lic-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.lic-plan { display: block; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.lic-id { font-size: .76rem; color: var(--suave); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.clave-etq { display: block; margin: 1rem 0 .35rem; font-size: .8rem; font-weight: 650; color: var(--suave); }
.lic-tarjeta .lic-clave { display: flex; gap: .5rem; }
input.clave {
  flex: 1 1 auto; min-width: 0;
  padding: .55rem .7rem; border-radius: 10px; border: 1px solid var(--linea);
  background: color-mix(in srgb, var(--tinta) 5%, transparent); color: var(--tinta);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem;
}
input.clave:focus { outline: 2px solid var(--azul); outline-offset: 1px; }

.lic-equipo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--linea);
}
.lic-equipo-datos { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; }
.lic-equipo-datos .pista { margin: 0; }

.vacio-cuenta { border-radius: 18px; padding: 1.6rem; text-align: center; }
.vacio-cuenta h2 { margin-top: 0; }
.vacio-cuenta .acciones { justify-content: center; }

/* ============================================================ administración
   El mismo lenguaje que el panel del NAS: cristal, una acción por tarjeta y el estado dicho
   en una palabra. Antes eran párrafos con la explicación entera —y con la casilla del sistema
   en crudo, que no dice si está encendido hasta que lo miras de cerca—. */

.admin-rejilla {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem; margin: 1.2rem 0;
}
.tarjeta.ajuste { display: flex; flex-direction: column; gap: .35rem; border-radius: 18px; padding: 1.1rem 1.2rem; }
.ajuste-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ajuste-cab h3 { margin: 0; font-size: 1rem; }
.ajuste-cab form { display: flex; }
.ajuste-estado { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.ajuste-estado.es-on { color: var(--ok); }
.ajuste-estado.es-off { color: var(--suave); }
/* Modo gratuito: no es un apagado cualquiera, es «no estás vendiendo». En ámbar y con la
   tarjeta teñida, para que se note al entrar sin necesidad de ir a leer el estado. */
.ajuste-estado.es-aviso { color: var(--aviso); }
.tarjeta.ajuste.ojo {
  border-color: color-mix(in srgb, var(--aviso) 45%, transparent);
  background:
    linear-gradient(color-mix(in srgb, var(--aviso) 9%, transparent),
                    color-mix(in srgb, var(--aviso) 9%, transparent)),
    var(--cristal);
}
.ajuste-estado.es-mal { color: var(--error); font-size: .9rem; }
.ajuste-pista { margin: 0; color: var(--suave); font-size: .82rem; line-height: 1.45; }
.iso-tarjeta { margin-bottom: 1.5rem; }

.fila-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .4rem 0 0; }
.fila-form input[type="email"], .fila-form input[type="search"] {
  flex: 1 1 12rem; min-width: 0;
  padding: .45rem .65rem; border: 1px solid var(--linea); border-radius: 10px;
  background: var(--fondo); color: var(--tinta); font-size: .9rem;
}

/* La palanca: se ve encendida o apagada de un vistazo y desde lejos. */
.palanca { position: relative; display: inline-flex; cursor: pointer; }
.palanca input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.palanca-pista {
  width: 46px; height: 27px; border-radius: 999px;
  background: color-mix(in srgb, var(--tinta) 18%, transparent);
  border: 1px solid var(--cristal-borde); transition: background .18s ease;
}
.palanca-pista::after {
  content: ""; display: block; width: 21px; height: 21px; margin: 2px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .35);
  transition: transform .18s cubic-bezier(.3, 1.4, .5, 1);
}
.palanca input:checked + .palanca-pista { background: var(--ok); }
.palanca input:checked + .palanca-pista::after { transform: translateX(19px); }
.palanca input:focus-visible + .palanca-pista { outline: 2px solid var(--azul); outline-offset: 2px; }

/* ---- la lista de licencias ---- */

.tabla-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.tabla-cab h2 { margin: 0; }
.tabla-cab .fila-form { margin: 0; }

.licencias { display: flex; flex-direction: column; gap: .6rem; margin-top: .9rem; }
.licencia-fila {
  display: grid; align-items: center; gap: .5rem 1rem; border-radius: 16px; padding: .85rem 1rem;
  grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1.6fr) auto;
}
.lic-quien { display: flex; flex-direction: column; min-width: 0; }
.lic-email { font-weight: 650; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lic-meta { color: var(--suave); font-size: .78rem; }
.lic-marcas { display: flex; flex-wrap: wrap; gap: .3rem; }

.marca {
  display: inline-block; padding: .12rem .5rem; border-radius: 999px;
  font-size: .72rem; font-weight: 650; white-space: nowrap;
}
.marca-ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.marca-mal { background: color-mix(in srgb, var(--error) 16%, transparent); color: var(--error); }
.marca-equipo { background: color-mix(in srgb, #8b5cf6 20%, transparent); color: #7c3aed; }
.marca-libre { background: color-mix(in srgb, var(--tinta) 10%, transparent); color: var(--suave); }
:root[data-theme="dark"] .marca-equipo { color: #c4b5fd; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .marca-equipo { color: #c4b5fd; }
}

.lic-clave { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.lic-clave code {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: .25rem .5rem; border-radius: 8px; font-size: .74rem;
  background: color-mix(in srgb, var(--tinta) 7%, transparent); color: var(--suave);
}
.btn-copiar {
  flex: 0 0 auto; padding: .25rem .6rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--cristal-borde); background: none; color: var(--azul);
  font: inherit; font-size: .74rem; font-weight: 650;
}
.btn-copiar:hover { background: color-mix(in srgb, var(--azul) 12%, transparent); }
.btn-copiar.copiado { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }

.lic-acciones { display: flex; align-items: center; gap: .75rem; white-space: nowrap; }
.lic-acciones form { display: flex; }

/* En estrecho, cada licencia se apila: una rejilla de cuatro columnas en un móvil deja el
   correo en dos letras y la clave en tres. */
@media (max-width: 820px) {
  /* minmax(0,...) y no 1fr: en Grid, `1fr` es `minmax(auto, 1fr)`, y ese `auto` deja
     que el contenido imponga su ancho minimo. Con una clave de licencia dentro eso es
     una cadena larga empujando la pagina fuera de la pantalla del movil. Es el mismo
     fallo que sacaba la documentacion 587 px de la pantalla. */
  .licencia-fila { grid-template-columns: minmax(0, 1fr); }
  .lic-acciones { justify-content: flex-end; }
}

/* ============================================================ landing de venta */

.lp-hero { text-align: center; padding: 2.5rem 0 1.5rem; }
.lp-badge {
  display: inline-block; font-size: .78rem; font-weight: 600; color: var(--azul);
  background: color-mix(in srgb, var(--azul) 12%, transparent); padding: .3rem .8rem;
  border-radius: 999px; margin-bottom: 1rem;
}
.lp-hero h1 { font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.05; margin: .2rem 0 .6rem; letter-spacing: -.03em; }
.lp-grad { background: linear-gradient(120deg, #2563eb, #06b6d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-sub { color: var(--suave); font-size: 1.05rem; max-width: 640px; margin: 0 auto; }
.lp-sub.center { text-align: center; }
.lp-cta { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin: 1.4rem 0 .6rem; }
.lp-mini { color: var(--suave); font-size: .82rem; }

/* Mock del panel (estilos), sin ninguna imagen */
.lp-shot { margin: 1.5rem 0 2.5rem; }
.lp-window {
  max-width: 820px; margin: 0 auto; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--linea); box-shadow: 0 30px 70px -30px rgba(15,23,42,.5);
  background: var(--panel);
}
.lp-bar {
  display: flex; align-items: center; gap: .4rem; padding: .55rem .8rem; font-size: .78rem;
  color: var(--suave); background: color-mix(in srgb, var(--tinta) 6%, var(--panel));
  border-bottom: 1px solid var(--linea);
}
.lp-bar span { width: 11px; height: 11px; border-radius: 50%; background: #cbd5e1; }
.lp-bar span:nth-child(1){ background:#f87171 } .lp-bar span:nth-child(2){ background:#fbbf24 } .lp-bar span:nth-child(3){ background:#34d399 }
.lp-screen {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 20px;
  background:
    radial-gradient(ellipse 80% 60% at 15% 0%, rgba(99,132,199,.28), transparent 60%),
    radial-gradient(ellipse 70% 60% at 90% 10%, rgba(129,140,202,.24), transparent 60%),
    linear-gradient(165deg, #eef2f8, #e6eef1);
}
.lp-card {
  background: rgba(255,255,255,.72); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.6);
  border-radius: 14px; padding: 14px; min-height: 96px; box-shadow: 0 8px 24px -14px rgba(15,23,42,.4);
}
.lp-card .lp-t { font-size: .72rem; font-weight: 700; color: #475569; margin-bottom: 10px; }
.lp-ring { width: 44px; height: 44px; border-radius: 50%; border: 6px solid #dbeafe; border-top-color: var(--azul); }
.lp-l { height: 8px; border-radius: 4px; background: #cbd5e1; margin-top: 8px; }
.lp-l.short { width: 55%; }
.lp-bars { display: flex; align-items: flex-end; gap: 6px; height: 46px; }
.lp-bars i { flex: 1; background: linear-gradient(#60a5fa, var(--azul)); border-radius: 3px; }
.lp-bars i:nth-child(1){height:40%} .lp-bars i:nth-child(2){height:70%} .lp-bars i:nth-child(3){height:55%} .lp-bars i:nth-child(4){height:90%} .lp-bars i:nth-child(5){height:65%}
.lp-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lp-apps b { aspect-ratio: 1; border-radius: 10px; background: linear-gradient(135deg, #60a5fa, #2563eb); }
.lp-apps b:nth-child(2){ background: linear-gradient(135deg,#34d399,#059669) } .lp-apps b:nth-child(3){ background: linear-gradient(135deg,#f472b6,#db2777) } .lp-apps b:nth-child(4){ background: linear-gradient(135deg,#fbbf24,#d97706) }
.lp-cam { height: 46px; border-radius: 10px; background: linear-gradient(135deg,#1e293b,#334155); position: relative; }
.lp-cam::after { content:""; position:absolute; width:12px; height:12px; border-radius:50%; background:#34d399; top:8px; left:8px; box-shadow:0 0 0 4px rgba(52,211,153,.25) }
.lp-shot-cap { text-align: center; color: var(--suave); font-size: .85rem; margin-top: 1rem; }

/* Facilidades */
.lp-features { margin: 2.5rem 0; }
.lp-features h2 { text-align: center; font-size: 1.7rem; letter-spacing: -.02em; }
.lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.lp-feat { background: var(--panel); border: 1px solid var(--linea); border-radius: 16px; padding: 1.2rem; }
.lp-ico { font-size: 1.6rem; }
.lp-feat h3 { margin: .5rem 0 .3rem; font-size: 1.05rem; }
.lp-feat p { color: var(--suave); font-size: .9rem; margin: 0; }

/* La tarjeta de pago */
.lp-pricing { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 2rem; align-items: center; margin: 3rem 0; }
.lp-price-card {
  background: var(--panel); border: 1px solid var(--linea); border-radius: 22px; padding: 1.8rem;
  box-shadow: 0 30px 70px -34px rgba(37,99,235,.5); position: relative;
}
.lp-price-top { font-weight: 700; color: var(--azul); }
.lp-amount { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; margin-top: .2rem; }
.lp-once { color: var(--suave); font-size: .85rem; margin-bottom: 1rem; }
.lp-incluye { margin: 1rem 0 1.4rem; }
.lp-buy { width: 100%; }
.lp-secure { text-align: center; color: var(--suave); font-size: .78rem; margin-top: .7rem; }
.lp-price-aside h2 { font-size: 1.7rem; letter-spacing: -.02em; margin-top: 0; }
.lp-price-aside p { color: var(--suave); }

.lp-final { text-align: center; padding: 2.5rem 0 1rem; }
.lp-final h2 { font-size: 1.8rem; letter-spacing: -.02em; margin-bottom: 1rem; }

.btn.grande { padding: .8rem 1.5rem; font-size: 1.05rem; }

@media (max-width: 720px) {
  .lp-pricing { grid-template-columns: minmax(0, 1fr); }
  .lp-price-aside { order: -1; }
  .lp-mobile { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .lp-mobile .lp-h2 { text-align: center; }
  .lp-mobile-text { text-align: center; }
  .lp-phones { min-height: 380px; }
}

/* ---------------------------------------------------------- tema e imágenes por tema */

.tema-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border-radius: 10px;
  background: none; border: 0; cursor: pointer; color: var(--suave);
  transition: background .15s ease, color .15s ease;
}
.tema-btn:hover { background: color-mix(in srgb, var(--tinta) 8%, transparent); color: var(--tinta); }
.tema-btn svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.tema-sol { display: none; }
:root[data-theme="dark"] .tema-luna { display: none; }
:root[data-theme="dark"] .tema-sol { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tema-luna { display: none; }
  :root:not([data-theme="light"]) .tema-sol { display: inline; }
}

/* Cada captura viene en dos versiones (…-claro / …-oscuro); se enseña la del tema activo. */
img.oscuro { display: none; }
:root[data-theme="dark"] img.claro { display: none; }
:root[data-theme="dark"] img.oscuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img.claro { display: none; }
  :root:not([data-theme="light"]) img.oscuro { display: block; }
}

/* Captura grande del hero */
.lp-hero-shot { max-width: 920px; margin: 0 auto; }
.lp-hero-shot img { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--cristal-borde); box-shadow: 0 44px 100px -46px rgba(15, 23, 42, .65); display: block; }

/* Galería de capturas de la landing */
.lp-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.2rem; margin-top: 1.4rem; }
.lp-gallery figure { margin: 0; }
.lp-gallery img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--cristal-borde); box-shadow: var(--sombra); display: block; }
.lp-gallery figcaption { color: var(--suave); font-size: .85rem; margin-top: .5rem; line-height: 1.5; }
.lp-gallery figure { transition: transform .2s ease; }
.lp-gallery figure:hover { transform: translateY(-4px); }

/* Encabezados de sección de la landing, uniformes y centrados. */
.lp-h2 { text-align: center; font-size: clamp(1.5rem, 4vw, 2rem); letter-spacing: -.02em; margin: 0; }

/* Sección del móvil: texto a un lado, dos teléfonos al otro (así cuadra, sin huecos). */
.lp-mobile {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center;
  margin: 4rem auto; max-width: 960px;
}
.lp-mobile .lp-h2 { text-align: left; }
.lp-mobile-text p { color: var(--suave); margin: 1rem 0 1.4rem; }
.lp-phones { display: flex; justify-content: center; gap: 0; position: relative; min-height: 420px; align-items: center; }
.lp-phones .lp-movil { margin: 0; }
.lp-phones .lp-movil img { width: 190px; height: auto; border-radius: 26px;
  border: 1px solid var(--cristal-borde); box-shadow: 0 30px 60px -24px rgba(15, 23, 42, .55); }
/* El segundo teléfono, un poco detrás y girado, como una foto de producto. */
.lp-phones .lp-phone-back { transform: rotate(6deg) translateX(-30px); z-index: 0; }
.lp-phones .lp-movil:first-child { transform: rotate(-4deg) translateX(30px); z-index: 1; }

/* Un poco de vida en las tarjetas de facilidades. */
.lp-feat { transition: transform .2s ease; }
.lp-feat:hover { transform: translateY(-4px); }

footer { text-align: center; }
.pie-links { margin-bottom: .5rem; }
.pie-links a { color: var(--suave); }

/* Ampliar capturas al pinchar (lightbox) */
.lp-gallery img, .lp-hero-shot img, .lp-phones img { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  background: rgba(2, 6, 23, .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 2rem; cursor: zoom-out; animation: lb-in .18s ease;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 12px; box-shadow: 0 40px 110px -30px rgba(0, 0, 0, .85); }
.lightbox-x {
  position: absolute; top: 1rem; right: 1.2rem; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff; border: 0; font-size: 1.15rem; cursor: pointer;
}
.lightbox-x:hover { background: rgba(255, 255, 255, .28); }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }

/* Cambio de captura por tema, AL FINAL para ganar en orden a «.lp-gallery img { display:block }».
   En claro se ve la versión «-claro»; en oscuro, la «-oscuro». */
img.oscuro { display: none; }
img.claro { display: block; }
:root[data-theme="dark"] img.claro { display: none; }
:root[data-theme="dark"] img.oscuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img.claro { display: none; }
  :root:not([data-theme="light"]) img.oscuro { display: block; }
}


/* ------------------------------------------------------------- descarga de la ISO */
/* El SHA-256 entero no cabe en una línea de móvil: que parta donde haga falta. */
.clave-suma { word-break: break-all; font-size: .8rem; }
.aviso-ok {
  padding: .7rem .9rem; border-radius: 10px; margin: 1rem 0; font-size: .92rem;
  background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok);
}
.descarga-cuenta { margin-bottom: 1rem; }