/* 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);

  /* ---------------------------------------------------------- cristal de verdad
     Un `backdrop-filter` a secas no es cristal: es una mancha borrosa. El cristal se
     reconoce por otras tres cosas, y son las que van aquí.

     · SATURACIÓN. Detrás del cristal los colores se avivan, no se apagan. Es lo que separa
       un vidrio de una cortina.
     · BRILLO DE CANTO. Un borde plano parece pegatina. El de verdad se enciende arriba
       —donde le da la luz— y se apaga abajo, y eso es un degradado, no un color.
     · LUZ INTERIOR. Una sombra interior clarísima en el borde superior hace que la lámina
       tenga grosor en vez de ser un recorte. */
  --vidrio-filtro: saturate(180%) blur(22px);
  --vidrio-canto: linear-gradient(150deg,
                    rgba(255, 255, 255, .85), rgba(255, 255, 255, .18) 42%,
                    rgba(255, 255, 255, .06));
  --vidrio-luz: inset 0 1px 0 rgba(255, 255, 255, .75);

  /* Sombras en capas. Una sola sombra grande es una nube gris debajo del elemento; tres
     cortas y una larga es cómo cae la luz de verdad: contacto, cuerpo y ambiente. */
  --sombra-1: 0 1px 2px rgba(15, 23, 42, .06), 0 3px 8px -2px rgba(15, 23, 42, .08);
  --sombra-2: 0 2px 4px rgba(15, 23, 42, .05), 0 8px 20px -6px rgba(15, 23, 42, .12),
              0 24px 48px -20px rgba(15, 23, 42, .18);
  --sombra-3: 0 4px 8px rgba(15, 23, 42, .06), 0 16px 40px -12px rgba(15, 23, 42, .16),
              0 48px 96px -32px rgba(15, 23, 42, .28);
  /* La sombra que tiñe del color de la marca. Debajo de un botón azul, una sombra gris
     ensucia; una sombra azul lo levanta. */
  --sombra-azul: 0 2px 6px rgba(37, 99, 235, .24), 0 12px 28px -8px rgba(37, 99, 235, .38);

  /* Escala tipográfica fluida. `clamp` en vez de saltos por breakpoint: el titular crece
     con la ventana en lugar de pegar un tirón al cruzar los 768 px. Los títulos grandes
     llevan interlineado por debajo de 1 y letra apretada — un titular enorme con el
     interlineado de un párrafo se lee como una lista de palabras sueltas. */
  --t-display: clamp(2.75rem, 1.2rem + 6.4vw, 6rem);
  --t-h1: clamp(2.1rem, 1.1rem + 4vw, 3.9rem);
  --t-h2: clamp(1.6rem, 1rem + 2.4vw, 2.6rem);
  --t-h3: clamp(1.12rem, .95rem + .7vw, 1.4rem);
  --t-cuerpo: clamp(1rem, .96rem + .2vw, 1.12rem);
  --t-guia: clamp(1.05rem, .95rem + .8vw, 1.4rem);

  /* Aire. Lo que más separa una página cara de una barata no es el color: es cuánto hueco
     se atreve a dejar. */
  --aire-seccion: clamp(4.5rem, 9vw, 9rem);
  --radio: 18px;
  --radio-g: 26px;
}
/* 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);
  /* En oscuro el cristal no se aclara: se ilumina el CANTO. Subir la opacidad del relleno
     da un plástico lechoso; dejar el relleno oscuro y encender el borde da vidrio ahumado,
     que es lo que se busca. */
  --vidrio-canto: linear-gradient(150deg,
                    rgba(255, 255, 255, .28), rgba(255, 255, 255, .06) 42%,
                    rgba(255, 255, 255, .02));
  --vidrio-luz: inset 0 1px 0 rgba(255, 255, 255, .10);
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .4), 0 3px 8px -2px rgba(0, 0, 0, .45);
  --sombra-2: 0 2px 4px rgba(0, 0, 0, .35), 0 8px 20px -6px rgba(0, 0, 0, .5),
              0 24px 48px -20px rgba(0, 0, 0, .6);
  --sombra-3: 0 4px 8px rgba(0, 0, 0, .4), 0 16px 40px -12px rgba(0, 0, 0, .55),
              0 48px 96px -32px rgba(0, 0, 0, .7);
  --sombra-azul: 0 2px 6px rgba(37, 99, 235, .35), 0 12px 28px -8px rgba(37, 99, 235, .5);
}
@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);
    --vidrio-canto: linear-gradient(150deg,
                      rgba(255, 255, 255, .28), rgba(255, 255, 255, .06) 42%,
                      rgba(255, 255, 255, .02));
    --vidrio-luz: inset 0 1px 0 rgba(255, 255, 255, .10);
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .4), 0 3px 8px -2px rgba(0, 0, 0, .45);
    --sombra-2: 0 2px 4px rgba(0, 0, 0, .35), 0 8px 20px -6px rgba(0, 0, 0, .5),
                0 24px 48px -20px rgba(0, 0, 0, .6);
    --sombra-3: 0 4px 8px rgba(0, 0, 0, .4), 0 16px 40px -12px rgba(0, 0, 0, .55),
                0 48px 96px -32px rgba(0, 0, 0, .7);
    --sombra-azul: 0 2px 6px rgba(37, 99, 235, .35), 0 12px 28px -8px rgba(37, 99, 235, .5);
  }
}
/* ============================================================ 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;
  /* Solo el color base: el degradado entero va en el ::before del final de la hoja,
     pintado en un elemento `position: fixed`. Con `background-attachment: fixed` los
     navegadores del móvil cortaban el fondo al primer alto de pantalla y de ahí para
     abajo la página quedaba en blanco. */
  background: #e8ecf5;
}
:root[data-theme="dark"] body { background: #0d1424; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body { background: #0d1424; }
}
/* Y nada de desbordes laterales: `clip` y no `hidden`, que `hidden` crea un contenedor de
   scroll y rompe los position:sticky de dentro (la barra). */
html, body { overflow-x: clip; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

/* La selección, del azul de la casa y TRANSLÚCIDA: sin tocar el color del texto, cualquier
   cosa seleccionada sigue leyéndose igual en claro y en oscuro. */
::selection { background: color-mix(in srgb, var(--azul) 30%, transparent); }

/* Las superficies de cristal se definen UNA vez, en el bloque de refinamiento del final
   de la hoja: relleno translúcido con canto degradado para toda tarjeta, y el desenfoque
   solo en las superficies que mandan (es caro, y /admin puede pintar 500 filas). */

.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; }
.pista { color: var(--suave); font-size: .82rem; }

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

.tarjeta { border-radius: 16px; padding: 1.1rem; }

/* inline-flex con el contenido centrado, como en la hoja generada: dentro de una fila
   flexible (.lp-cta, .acciones) los botones se estiran a la altura del más alto, y con
   inline-block el texto se quedaba arriba —el fantasma del héroe parecía un globo con la
   etiqueta flotando—. Centrar el contenido hace que estirarse no se note. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  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; }
/* El secundario es de cristal, como .btn-secondary en la hoja generada: relleno translúcido,
   borde discreto y etiqueta neutra que se afirma al pasar. El contorno azul fino de antes
   parecía un wireframe al lado del botón sólido, no un botón del mismo producto. */
.btn.ghost {
  background: color-mix(in srgb, var(--cristal) 80%, transparent);
  color: var(--suave); border: 1px solid var(--linea);
  box-shadow: var(--sombra-1);
}
.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;
}
/* Acciones que van como texto (revocar, liberar, quitar filtro): mismas para <a> y para
   <button>, y con subrayado al pasar —un enlace que no reacciona parece un rótulo—. */
.enlace { background: none; border: 0; color: var(--azul); cursor: pointer; font: inherit; padding: 0; }
.enlace:hover { text-decoration: underline; }
.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; }

/* ============================================================ 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); }
/* El cristal no se tiñe al pasar: la etiqueta se afirma y la sombra crece, como en la hoja
   generada. */
.btn.ghost:hover {
  color: var(--tinta);
  border-color: color-mix(in srgb, var(--tinta) 16%, transparent);
  box-shadow: var(--sombra-2);
}

/* 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—. El anillo no
   toca el radio del elemento: se dibuja siguiendo la forma que ya tenga. */
.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;
}

/* 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 { gap: .6rem; }  /* el inline-flex centrado ya lo pone .btn */
.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"],
.fila-form input[type="file"] {
  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;
}
/* El selector de archivo, con su botón del sistema vestido como los nuestros. */
.fila-form input[type="file"] { padding: .35rem .45rem; color: var(--suave); }
.fila-form input[type="file"]::file-selector-button {
  margin-right: .6rem; padding: .3rem .7rem; border-radius: 8px; border: 1px solid var(--linea);
  background: none; color: var(--azul); font: inherit; font-size: .82rem; font-weight: 650;
  cursor: pointer;
}
.fila-form input[type="file"]::file-selector-button:hover {
  background: color-mix(in srgb, var(--azul) 10%, transparent);
}

/* 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; }
/* El acento del titular es COLOR SÓLIDO a propósito. La versión con degradado
   (`background-clip: text`) es una lotería del compositor de Chromium: según la GPU, al
   quedar el titular en su propia capa las palabras se pintaban como un rectángulo azul
   macizo o directamente NO se pintaban. Dos roturas distintas del mismo efecto bastan:
   un azul de marca dice lo mismo y no puede fallar en ningún navegador. */
.lp-grad { color: var(--azul); }
:root[data-theme="dark"] .lp-grad { color: #60a5fa; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-grad { color: #60a5fa; }
}
.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; }

/* La letra pequeña honesta bajo la demo: qué es maqueta y qué es de verdad. */
.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; }
.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); el cambio por tema vive en un
   solo bloque AL FINAL de la hoja, para ganar en orden a cualquier `display` posterior. */

/* Las únicas capturas de la landing son las del móvil (sección lp-mobile): el escritorio
   se enseña tocándolo en la demo, pero el teléfono no se puede maquetar aquí. */

/* 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 las capturas del móvil al pinchar (lightbox) */
.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; }


/* ═══════════════════════════════════════════════════════════════════════════════
   REFINAMIENTO
   ═══════════════════════════════════════════════════════════════════════════════

   Va al final a propósito: gana por cascada sin tener que tocar las setecientas líneas de
   arriba, que siguen siendo la base que funciona. Aquí solo está lo que separa una página
   correcta de una que parece cara.

   Tres ideas, y ninguna es «más efectos»:
     1. AIRE. El doble de hueco entre secciones. Es lo que más se nota y no cuesta nada.
     2. TIPOGRAFÍA. Titulares grandes de verdad, apretados y con interlineado corto.
     3. UNA capa de vidrio bien hecha, en las superficies que mandan. No en todo. */

/* ---------------------------------------------------------------- el lienzo
   TODO el fondo —la luz base y las manchas de color que dan al cristal algo que
   refractar— en un pseudo-elemento `position: fixed`. Fijo de verdad, no
   `background-attachment: fixed`, que en el móvil se corta al primer alto de pantalla. */
body { position: relative; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46vw 46vw at 12% 4%, color-mix(in srgb, var(--azul) 13%, transparent), transparent 70%),
    radial-gradient(38vw 38vw at 92% 18%, color-mix(in srgb, #8b5cf6 11%, transparent), transparent 70%),
    radial-gradient(52vw 40vw at 50% 108%, color-mix(in srgb, #06b6d4 9%, transparent), transparent 72%),
    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%),
    linear-gradient(165deg, #eef2f8 0%, #e8ecf5 45%, #e6eef1 100%);
}
:root[data-theme="dark"] body::before {
  background:
    radial-gradient(46vw 46vw at 12% 4%, color-mix(in srgb, var(--azul) 15%, transparent), transparent 70%),
    radial-gradient(38vw 38vw at 92% 18%, color-mix(in srgb, #8b5cf6 12%, transparent), transparent 70%),
    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%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before {
    background:
      radial-gradient(46vw 46vw at 12% 4%, color-mix(in srgb, var(--azul) 15%, transparent), transparent 70%),
      radial-gradient(38vw 38vw at 92% 18%, color-mix(in srgb, #8b5cf6 12%, transparent), transparent 70%),
      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%);
  }
}

/* ---------------------------------------------------------------- tipografía */
h1, .lp-hero h1 { font-size: var(--t-h1); line-height: 1.03; letter-spacing: -.035em; }
h2, .lp-h2 { font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.028em; }
h3 { font-size: var(--t-h3); letter-spacing: -.015em; }
/* El titular de la portada es el único que va a tamaño «display»: si todos gritan, no
   grita ninguno. */
.lp-hero h1 { font-size: var(--t-display); font-weight: 700; }
.lp-sub, .lp-hero p.lp-sub { font-size: var(--t-guia); line-height: 1.45; }
body { font-size: var(--t-cuerpo); text-rendering: optimizeLegibility;
       -webkit-font-smoothing: antialiased; }

/* ---------------------------------------------------------------- aire */
.lp-hero { padding-block: clamp(4rem, 11vw, 9rem) clamp(2.5rem, 6vw, 5rem); }
.lp-features, .lp-pricing { margin-block: var(--aire-seccion); }

/* ---------------------------------------------------------------- el vidrio
   La receta, en dos capas.

   1. TODA tarjeta lleva el relleno translúcido con el canto degradado —pintado como fondo
      del BORDE: un `border-color` es un color plano y siempre parece pegatina— y la
      sombra en capas. Esto es barato y define el lenguaje.
   2. El DESENFOQUE solo va en las superficies que mandan: la barra, las cajas de acceso y
      descarga, las tarjetas de la landing. `backdrop-filter` cuesta caro, y /admin puede
      pintar quinientas filas: desenfocarlas todas se nota en un móvil de gama media. */
.barra, .tarjeta, .cristal, .lp-feat, .lp-price-card {
  background:
    linear-gradient(var(--cristal), var(--cristal)) padding-box,
    var(--vidrio-canto) border-box;
  border: 1px solid transparent;
  box-shadow: var(--sombra-2), var(--vidrio-luz);
}
.barra, .cristal, .acceso-caja, .descarga-caja, .iso-tarjeta, .lp-feat, .lp-price-card {
  -webkit-backdrop-filter: var(--vidrio-filtro);
  backdrop-filter: var(--vidrio-filtro);
}

/* ---------------------------------------------------------------- la barra
   Se despega del borde y flota. Una barra pegada al canto superior parece parte del
   navegador; una que flota parece parte del producto. */
.barra {
  position: sticky; top: .75rem; z-index: 50;
  margin: .75rem auto 0; max-width: min(1180px, calc(100% - 1.5rem));
  border-radius: 999px; padding-inline: clamp(.9rem, 2vw, 1.4rem);
}
/* En cuanto el menú se pliega DENTRO de la barra (860px, el mismo corte que el plegado),
   la píldora pasa a radio normal: una barra alta con radio 999px se dibuja como una
   ELIPSE gigante y los últimos enlaces del menú quedaban fuera del fondo, flotando
   ilegibles sobre la página. Los dos breakpoints tienen que ser EL MISMO número. */
@media (max-width: 860px) { .barra { border-radius: var(--radio-g); } }

/* ---------------------------------------------------------------- botones
   Un botón se levanta al acercarse y se HUNDE al pulsarlo. Lo segundo es lo que casi nadie
   pone y lo que hace que se sienta físico: sin el hundido, pulsar no confirma nada. */
.btn {
  border-radius: 999px; font-weight: 600; letter-spacing: -.01em;
  transition: transform var(--rapido) var(--curva), box-shadow var(--medio) var(--curva),
              background-color var(--rapido) var(--curva);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); transition-duration: .06s; }
.btn:not(.ghost) { box-shadow: var(--sombra-azul); }
.btn:not(.ghost):hover { box-shadow: var(--sombra-azul), 0 20px 40px -12px rgba(37, 99, 235, .45); }
.btn.grande { padding: .95rem 1.9rem; font-size: 1.05rem; }
/* El foco NUNCA se quita: es cómo se navega con teclado. Se dibuja bonito y se acabó. */
.btn:focus-visible, .nav-enlace:focus-visible, .nav-cta:focus-visible {
  outline: 2px solid var(--azul); outline-offset: 3px;
}
/* Un botón apagado no promete nada: ni sombra, ni salto, ni hover. La demo del pool deja
   «Crear volumen» así hasta que hay discos elegidos, y tiene que VERSE que aún no toca. */
.btn:disabled {
  opacity: .5; cursor: not-allowed; pointer-events: none;
  transform: none; box-shadow: none; filter: none;
}

/* ---------------------------------------------------------------- tarjetas */
.lp-feat {
  border-radius: var(--radio-g); padding: 1.6rem 1.5rem;
  transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
.lp-feat:hover { transform: translateY(-4px); box-shadow: var(--sombra-3), var(--vidrio-luz); }
.lp-ico { font-size: 1.9rem; line-height: 1; display: block; margin-bottom: .7rem; }

/* ---------------------------------------------------------------- el revelado
   Más recorrido y más tiempo que un fundido de manual. Un `fade` de 200 ms no se percibe
   como movimiento, solo como un parpadeo; el recorrido es lo que da la sensación de que
   algo tiene peso. */
.revelar.armado { opacity: 0; transform: translateY(26px); }
.revelar.armado.visible { opacity: 1; transform: none; }
.revelar { transition: opacity .7s var(--curva), transform .7s var(--curva); }

/* ---------------------------------------------------------------- quietud
   Una sola regla apaga TODO el movimiento de la hoja. Va la última para que no haya forma
   de que algo se le escape por especificidad. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}


/* ---------------------------------------------------------------- las cifras
   Cuatro datos que caben de un vistazo. No son adorno: convierten «otro NAS más» en algo
   concreto antes de que nadie haya bajado a leer nada. */
.lp-cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem); text-align: center;
  margin-block: clamp(3rem, 6vw, 5rem);
}
.lp-cifra b {
  display: block; font-size: clamp(2rem, 1.1rem + 3.2vw, 3.4rem); font-weight: 700;
  letter-spacing: -.04em; line-height: 1;
  background: linear-gradient(150deg, var(--tinta), color-mix(in srgb, var(--azul) 70%, var(--tinta)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-cifra span { display: block; margin-top: .45rem; color: var(--suave); font-size: .92rem; }

/* ---------------------------------------------------------------- app por app
   Una columna estrecha y mucho aire. Un bloque de texto ancho no se lee: el ojo pierde el
   renglón al volver. Se queda en 68 caracteres, que es donde se lee cómodo. */
.lp-fichas { margin-block: var(--aire-seccion); }
.lp-ficha-cab { text-align: center; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.lp-ficha {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 2.4rem);
  max-width: 60rem; margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
/* El número, enorme y casi transparente: da ritmo y sensación de catálogo sin robar
   atención al titular, que es lo que hay que leer. */
.lp-ficha-num {
  font-size: clamp(2.2rem, 1rem + 3.5vw, 4rem); font-weight: 700; line-height: .9;
  letter-spacing: -.05em; color: color-mix(in srgb, var(--azul) 26%, transparent);
  font-variant-numeric: tabular-nums; user-select: none;
}
.lp-ficha-txt { max-width: 46rem; }
.lp-ficha-txt h3 {
  display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem;
  font-size: clamp(1.35rem, 1rem + 1.4vw, 1.95rem); letter-spacing: -.028em;
}
.lp-ficha-txt h3 .lp-ico { font-size: 1.5rem; margin: 0; display: inline; }
.lp-ficha-txt > p { color: var(--suave); margin: 0 0 1rem; max-width: 44rem; }
.lp-ficha-txt .lista-check { margin: 0; }
.lp-ficha-txt code {
  font-size: .88em; padding: .1em .38em; border-radius: 6px;
  background: color-mix(in srgb, var(--tinta) 8%, transparent);
}
@media (max-width: 560px) {
  .lp-ficha { grid-template-columns: 1fr; gap: .4rem; }
  .lp-ficha-num { font-size: 1.6rem; }
}

/* ---------------------------------------------------------------- comparativa */
.lp-porque { margin-block: var(--aire-seccion); }
.lp-vs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem); max-width: 62rem; margin: 2.5rem auto 0;
}
.lp-vs-col {
  border-radius: var(--radio-g); padding: 1.6rem 1.5rem;
  border: 1px solid var(--linea); background: color-mix(in srgb, var(--cristal) 55%, transparent);
}
.lp-vs-col h3 { margin: 0 0 1rem; font-size: 1.15rem; }
/* La nuestra destaca, pero sin gritar: un borde azul y un poco de elevación bastan. */
.lp-vs-nuestro {
  border-color: color-mix(in srgb, var(--azul) 40%, transparent);
  box-shadow: var(--sombra-2), var(--vidrio-luz);
  background: var(--cristal);
  -webkit-backdrop-filter: var(--vidrio-filtro); backdrop-filter: var(--vidrio-filtro);
}
.lista-cruz { list-style: none; padding: 0; margin: 0; }
.lista-cruz li { position: relative; padding-left: 1.7rem; margin-bottom: .55rem; color: var(--suave); }
.lista-cruz li::before {
  content: '×'; position: absolute; left: .35rem; top: -.05rem;
  color: var(--error); font-weight: 700; font-size: 1.15em;
}

/* ---------------------------------------------------------------- dudas
   `<details>` nativo: se abre sin una línea de JavaScript, funciona con teclado y el
   buscador lo indexa. Una acordeón hecha a mano no gana nada y pierde las tres cosas. */
.lp-faq { margin-block: var(--aire-seccion); }
.lp-faq-lista { max-width: 46rem; margin: 2.5rem auto 0; display: grid; gap: .7rem; }
.lp-q {
  border-radius: var(--radio); border: 1px solid var(--linea);
  background: color-mix(in srgb, var(--cristal) 55%, transparent);
  padding: 0 1.15rem; transition: box-shadow var(--medio) var(--curva);
}
.lp-q[open] { box-shadow: var(--sombra-1); }
.lp-q summary {
  cursor: pointer; padding: 1rem 0; font-weight: 600; list-style: none;
  display: flex; align-items: center; gap: .75rem;
}
.lp-q summary::-webkit-details-marker { display: none; }
/* El signo gira al abrir. Es la animación más barata que existe y la que más se nota. */
.lp-q summary::after {
  content: '+'; margin-left: auto; font-size: 1.4rem; font-weight: 400; line-height: 1;
  color: var(--azul); transition: transform var(--medio) var(--curva);
}
.lp-q[open] summary::after { transform: rotate(45deg); }
.lp-q p { margin: 0 0 1.1rem; color: var(--suave); }

/* ---------------------------------------------------------------- cierre */
.lp-final { text-align: center; margin-block: var(--aire-seccion); }
.lp-final h2 { font-size: var(--t-h1); letter-spacing: -.035em; margin-bottom: .6rem; }
.lp-cta.center { justify-content: center; }


/* ---------------------------------------------------------------- movimiento vivo
   Lo que separa una web bonita de una que parece un producto: que reaccione. Tres cosas,
   y las tres se apagan solas con `prefers-reduced-motion`. */

/* 1. El reflejo sigue al puntero. Es LO que hace que una superficie parezca vidrio y no una
      caja con desenfoque: la luz se mueve con quien mira. Las coordenadas las pone el
      script; sin él se queda centrado y no pasa nada. */
.lp-feat, .lp-vs-col, .lp-price-card, .lp-q {
  --mx: 50%; --my: 0%; position: relative; isolation: isolate;
}
.lp-feat::before, .lp-vs-col::before, .lp-price-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(18rem 18rem at var(--mx) var(--my),
              color-mix(in srgb, var(--azul) 20%, transparent), transparent 70%);
  opacity: 0; transition: opacity .35s var(--curva);
}
.lp-feat:hover::before, .lp-vs-col:hover::before, .lp-price-card:hover::before { opacity: 1; }

/* 2. La barra se encoge al bajar: la página «arranca». */
.barra { transition: padding .3s var(--curva), box-shadow .3s var(--curva), transform .3s var(--curva); }
html.rodando .barra { padding-block: .25rem; box-shadow: var(--sombra-3), var(--vidrio-luz); }

/* 3. Las cifras cuentan hacia arriba al llegar. Un número que sube se lee dos veces: una al
      verlo moverse y otra al pararse. Uno estático se lee media. */
.lp-cifra b { font-variant-numeric: tabular-nums; }

/* 4. El titular entra ENTERO, sin partirse en palabras. La versión por palabras envolvía
      cada una en un span con `filter`, y un descendiente con filtro rompe el
      `background-clip: text` en Chromium: el degradado de «a ser tuyos» se pintaba como
      un rectángulo azul macizo y las letras —transparentes— desaparecían. Animar el h1
      completo (opacidad y recorrido, NUNCA filter) no rompe el recorte. */
/* `backwards` y no `both`: al terminar, el h1 vuelve a su estado natural y el compositor
   suelta la capa, en vez de quedarse asociado a la animación para siempre. */
.lp-hero h1 { animation: hero-entra .65s var(--curva) backwards; }
@keyframes hero-entra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-feat::before, .lp-vs-col::before, .lp-price-card::before { display: none; }
  .lp-hero h1 { animation: none; }
}


/* ---------------------------------------------------------------- la demo del pool
   Se viste como una ventana del NAS —barra con sus tres luces— para que se entienda de un
   vistazo que lo que se está tocando es el producto y no un formulario de la web. */
.lp-demo { margin-block: var(--aire-seccion); }
.demo-marco {
  max-width: 62rem; margin: 2.2rem auto 1rem; border-radius: var(--radio-g);
  overflow: hidden; background: var(--cristal);
  -webkit-backdrop-filter: var(--vidrio-filtro); backdrop-filter: var(--vidrio-filtro);
  box-shadow: var(--sombra-3), var(--vidrio-luz);
  border: 1px solid var(--linea);
}
.demo-barra {
  display: flex; align-items: center; gap: .45rem;
  padding: .7rem 1rem; border-bottom: 1px solid var(--linea);
  background: color-mix(in srgb, var(--tinta) 5%, transparent);
}
/* Las luces pueden venir envueltas en un span decorativo: `contents` lo hace transparente
   para el flex y las tres siguen siendo hijas de la barra a efectos de hueco. */
.demo-barra > span[aria-hidden="true"] { display: contents; }
.demo-luz { width: 11px; height: 11px; border-radius: 50%; }
.demo-luz.r { background: #f87171 } .demo-luz.a { background: #fbbf24 } .demo-luz.v { background: #34d399 }
.demo-titulo { margin-left: .6rem; font-size: .84rem; font-weight: 600; color: var(--suave); }
.demo-cuerpo { padding: clamp(1.1rem, 3vw, 1.9rem); }
.demo-paso h4 {
  margin: 0 0 .7rem; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--suave); font-weight: 700;
}
.demo-paso + .demo-paso { margin-top: 1.6rem; }

/* Los discos. Se pulsan y se hunden un poco: tienen que sentirse como piezas físicas. */
.demo-discos { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; }
.demo-disco {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  padding: .85rem .9rem; border-radius: 16px; cursor: pointer; text-align: left;
  border: 1.5px solid var(--linea); background: color-mix(in srgb, var(--cristal) 45%, transparent);
  color: inherit; font: inherit;
  transition: transform var(--rapido) var(--curva), border-color var(--rapido) var(--curva),
              box-shadow var(--medio) var(--curva);
}
.demo-disco:hover { transform: translateY(-2px); }
.demo-disco:active { transform: translateY(0) scale(.98); transition-duration: .06s; }
.demo-disco[data-on="1"] {
  border-color: var(--azul); box-shadow: var(--sombra-azul);
  background: color-mix(in srgb, var(--azul) 12%, transparent);
}
.demo-disco-ico { font-size: 1.1rem; opacity: .5; }
.demo-disco b { font-size: 1.05rem; }
.demo-disco small { color: var(--suave); font-size: .76rem; }

.demo-raids { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.demo-raid {
  display: flex; flex-direction: column; gap: .12rem; padding: .7rem .85rem;
  border-radius: 14px; cursor: pointer; text-align: left; font: inherit; color: inherit;
  border: 1.5px solid var(--linea); background: transparent; font-weight: 600;
  transition: border-color var(--rapido) var(--curva), background-color var(--rapido) var(--curva);
}
.demo-raid small { font-weight: 400; color: var(--suave); font-size: .76rem; }
.demo-raid[aria-checked="true"] {
  border-color: var(--azul); background: color-mix(in srgb, var(--azul) 10%, transparent);
}

/* El resultado. Es la parte que de verdad importa y por eso ocupa y respira. */
.demo-resultado {
  margin-top: 1.6rem; padding: 1.1rem 1.2rem; border-radius: 18px;
  background: color-mix(in srgb, var(--tinta) 5%, transparent);
}
.demo-cifra { display: inline-block; margin-right: 2.2rem; }
.demo-cifra b {
  display: block; font-size: clamp(1.6rem, 1rem + 2.2vw, 2.4rem); line-height: 1;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums;
  /* La cifra cambia mucho al tocar los botones: sin transición da un salto seco. */
  transition: color var(--medio) var(--curva);
}
.demo-cifra span { font-size: .8rem; color: var(--suave); }
.demo-barra-uso {
  height: 8px; border-radius: 999px; margin: 1rem 0 .7rem; overflow: hidden;
  background: color-mix(in srgb, var(--tinta) 12%, transparent);
}
.demo-barra-uso i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #60a5fa, var(--azul));
  transition: width .5s var(--curva);
}
.demo-nota { margin: 0; font-size: .88rem; color: var(--suave); }
.demo-acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }

.demo-progreso { height: 8px; border-radius: 999px; overflow: hidden; margin-bottom: .6rem;
  background: color-mix(in srgb, var(--tinta) 12%, transparent); }
.demo-progreso i { display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #34d399, var(--azul)); transition: width .5s var(--curva); }
.demo-creando { margin-top: 1.2rem; }
.demo-creando p { margin: 0; font-size: .9rem; color: var(--suave); }

.demo-listo { margin-top: 1.2rem; animation: entrar-abajo .5s var(--curva) both; }
.demo-pool {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  padding: 1rem 1.1rem; border-radius: 16px; margin-bottom: .7rem;
  border: 1.5px solid color-mix(in srgb, #34d399 45%, transparent);
  background: color-mix(in srgb, #34d399 10%, transparent);
}
.demo-online { color: #059669; font-size: .78rem; font-weight: 700; letter-spacing: .04em; }
.demo-pool b { font-size: 1.15rem; }
.demo-pool small { color: var(--suave); font-size: .84rem; }

/* Mientras crea, los mandos se apagan: tocarlos a media faena no tendría sentido.
   Solo los pasos del POOL (su panel): las otras apps no entran en esa fase. */
.demo-marco[data-fase="creando"] #demo-app-pool .demo-paso,
.demo-marco[data-fase="listo"] #demo-app-pool .demo-paso { opacity: .45; pointer-events: none; }
.demo-marco[data-fase="creando"] .demo-acciones { display: none; }
.demo-marco .demo-paso { transition: opacity var(--medio) var(--curva); }

/* ---------------------------------------------------------------- las pestañas
   Como las apps del escritorio: discretas, y la activa con el mismo tinte que lleva el
   enlace activo de la barra. El estado vive en `aria-selected`, no en otra clase. */
.demo-tabs {
  display: flex; gap: .35rem; padding: .55rem .9rem;
  border-bottom: 1px solid var(--linea);
  overflow-x: auto; scrollbar-width: none;      /* en el móvil, tira deslizable sin barra */
}
.demo-tabs::-webkit-scrollbar { display: none; }
.demo-tab {
  padding: .42rem .9rem; border-radius: 999px; border: 0; background: none;
  font: inherit; font-size: .88rem; font-weight: 550; color: var(--suave);
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.demo-tab:hover { color: var(--tinta); background: color-mix(in srgb, var(--tinta) 7%, transparent); }
.demo-tab[aria-selected="true"] {
  background: color-mix(in srgb, var(--azul) 12%, transparent);
  color: var(--tinta); font-weight: 650;
}
.demo-tab:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* ---------------------------------------------------------------- tienda */
.tienda-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .6rem; }
.tienda-app {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem;
  padding: .7rem .8rem; border-radius: 14px;
  border: 1.5px solid var(--linea);
  background: color-mix(in srgb, var(--cristal) 45%, transparent);
  transition: border-color var(--rapido) var(--curva), background-color var(--rapido) var(--curva);
}
.tienda-app[data-estado="en-marcha"] {
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
  background: color-mix(in srgb, var(--ok) 7%, transparent);
}
.tienda-ico {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: .88rem; letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), var(--sombra-1);
}
.tienda-datos { min-width: 0; }
.tienda-datos b { display: block; font-size: .95rem; }
.tienda-datos small { color: var(--suave); font-size: .78rem; }
.tienda-fase { grid-column: 1 / -1; display: grid; gap: .3rem; }
.tienda-fase .demo-progreso { margin: 0; }
.tienda-fase small { color: var(--suave); font-size: .78rem; }
.tienda-estado { color: var(--ok); font-weight: 700; font-size: .8rem; white-space: nowrap; }
.tienda-nota { margin-top: 1.1rem; }

/* ---------------------------------------------------------------- carpetas */
.carpeta-nombre {
  width: min(20rem, 100%);
  padding: .6rem .75rem; border: 1px solid var(--linea); border-radius: 10px;
  background: var(--fondo); color: var(--tinta); font: inherit;
}
.carpeta-nombre:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: transparent; }
.demo-acciones-app { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1.4rem; }
#carpeta-aviso { margin: 0; color: var(--aviso); }
.carpeta-lista { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.carpeta-lista li {
  display: flex; align-items: center; gap: .7rem;
  padding: .65rem .8rem; border-radius: 12px;
  border: 1.5px solid var(--linea);
  background: color-mix(in srgb, var(--cristal) 45%, transparent);
  animation: entrar-abajo .4s var(--curva) both;
}
.carpeta-lista svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--azul); }
.carpeta-lista div { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.carpeta-lista b { font-size: .92rem; }
.carpeta-lista code {
  font-size: .76rem; padding: .1rem .4rem; border-radius: 6px;
  background: color-mix(in srgb, var(--tinta) 7%, transparent); color: var(--suave);
}
.carpeta-chip {
  flex: 0 0 auto; padding: .12rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 650; white-space: nowrap;
  background: color-mix(in srgb, var(--azul) 14%, transparent); color: var(--azul);
}
.carpeta-nota { margin-top: 1rem; }

/* ---------------------------------------------------------------- copias */
.copia-versiones { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.copia-versiones li {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .6rem .8rem; border-radius: 12px;
  border: 1.5px solid color-mix(in srgb, var(--ok) 40%, transparent);
  background: color-mix(in srgb, var(--ok) 7%, transparent);
  animation: entrar-abajo .4s var(--curva) both;
}
.copia-check { color: var(--ok); font-weight: 800; }
.copia-versiones b { font-size: .9rem; }
.copia-versiones small { margin-left: auto; color: var(--suave); font-size: .78rem; }
.copia-nota { margin-top: 1rem; }

/* ---------------------------------------------------------------- sección de contenido
   La parte que responde a lo que se busca en Google («alternativa a Synology», «NAS con un
   PC viejo»). Va en dos columnas en pantalla ancha y en una en el móvil: son textos para
   leer, y una columna de 1.200 px de ancho no se lee. */
.lp-seo { max-width: 1100px; margin: 0 auto; padding: 3rem 1.25rem; }
.lp-cols {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  margin-bottom: 2.5rem;
}
.lp-cols article { text-align: left; }
.lp-cols h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.lp-cols p { margin: 0 0 .75rem; line-height: 1.65; }
/* La nota legal: se lee si se busca, no compite con el texto. */
.lp-nota { font-size: .8rem; opacity: .65; }