/* Estilos de la página de ContentOS.
   Sin framework: son seis secciones y traer uno pesaría más que esto.

   La paleta es «Cartelera», la misma del programa y de la plataforma: tinta,
   lima y violeta, en bloques planos. Sin degradados ni resplandores. Quien
   llega de la página no debe sentir que abrió otro programa. */

:root {
  color-scheme: dark;

  --negro:        #0f0b16;
  --negro-suave:  #130e1c;
  --carbon:       #1f1730;
  --borde:        #32294a;
  --borde-claro:  #3f3459;

  --texto:        #f4f1f8;
  /* La jerarquía la dan el tamaño y el peso de la letra, no el color: a 13 px
     sobre un fondo oscuro, un gris que cumple el mínimo de contraste sigue
     leyéndose mal. Por eso los tres tonos son claros. */
  --texto-medio:  #ede8f5;
  /* El más apagado, y sólo para lo accesorio —una aclaración bajo un botón—,
     nunca para algo que haya que leer para decidir. */
  --texto-tenue:  #c9c2d8;

  /* La acción principal: lima con letra tinta. Da 13 de contraste. */
  --acento:       #c8f03c;
  --acento-hover: #b9e22c;
  --sobre-acento: #171026;
  /* El acento como LETRA sobre el fondo oscuro: la misma lima. */
  --acento-claro: #c8f03c;
  /* El violeta, para los bordes y los fondos teñidos. */
  --violeta:      #7c4dff;
  /* Rojo reservado para peligro (licencias revocadas, cifras negativas). */
  --peligro:      #ff5c6b;

  --radio:    16px;
  --radio-sm: 10px;
  --ancho:    1120px;
}

/* Las dos familias de «Cartelera»: Bricolage Grotesque para los titulares y
   Geist para leer. Van en la propia página —`fuentes/`— y no en un servicio de
   terceros: ni una petición a nadie más por cargar la portada. */
@font-face {
  font-family: 'Bricolage'; font-weight: 200 800; font-display: swap;
  src: url('/fuentes/bricolage.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist'; font-weight: 100 900; font-display: swap;
  src: url('/fuentes/geist.woff2') format('woff2');
}

* { box-sizing: border-box; }

/* La barra de desplazamiento, oculta.
   En una página de una sola columna sobre fondo negro, la barra del sistema
   mete una franja clara pegada al borde derecho que no forma parte del diseño y
   que en macOS ni siquiera aparece siempre — así que la página se veía distinta
   según el ratón que tuviera cada quien.
   Se oculta la barra, NO el desplazamiento: la rueda, las flechas, la barra
   espaciadora y el gesto del trackpad siguen funcionando igual. */
html {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* Edge antiguo */
}
html::-webkit-scrollbar { width: 0; height: 0; }
html { scroll-behavior: smooth; }

/* Sitio para la barra fija al saltar a un ancla.
   Sin esto, «Ver precio» dejaba el título de la sección justo DEBAJO de la
   barra —tapado— porque el navegador lleva el borde superior de la sección al
   borde superior de la ventana y no sabe que ahí hay una barra pegada. */
main > section {
  scroll-margin-top: 5.5rem;
}

/* La captura de la portada. Reserva su espacio antes de cargarse: si la altura
   la decide la imagen al llegar, la página crece de golpe y cualquier salto a
   un ancla acaba en el sitio equivocado. */
.captura img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

body {
  margin: 0;
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--negro);
  color: var(--texto);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.025em; margin: 0 0 .6em; font-weight: 640; }
h1, h2 { font-family: 'Bricolage', 'Geist', ui-sans-serif, system-ui, sans-serif; font-weight: 800; letter-spacing: -0.04em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.06rem; font-weight: 620; }
p  { margin: 0 0 1em; }
a  { color: inherit; }

/* El ancho de la página vive en UN sitio: `.contenedor`.
   Antes se centraba con reglas sobre `> *`, y cualquier `margin` posterior en
   un hijo lo anulaba sin avisar — que es lo que le pasaba a la lista de pasos,
   con `margin: 3rem 0 0` borrando el `margin-inline: auto`. Un contenedor
   explícito no se puede romper así. */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

section { padding-block: clamp(4rem, 9vw, 7rem); }

/* Franjas: el fondo alterna para separar bloques sin líneas duras. */
.franja { background: var(--negro-suave); border-block: 1px solid var(--borde); }

/* ── Barra ──────────────────────────────────────────────────────────── */
.barra {
  /* Muy por encima de todo. Con z-index 20 los botones de pago se pintaban
     ENCIMA de la barra al desplazarse y tapaban el menú: un elemento de un
     tercero no debe poder colocarse delante de la navegación de tu propia
     página. Se deja un número alto y aislado para que nada futuro lo alcance
     por accidente. */
  position: sticky; top: 0; z-index: 1000;
  padding-block: .85rem;
  background: color-mix(in srgb, var(--negro) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--borde);
}
.barra-interior {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.marca {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 650; font-size: 1.02rem; text-decoration: none; letter-spacing: -0.02em;
}
.marca img { border-radius: 8px; }
.barra nav { display: flex; align-items: center; gap: 1.6rem; }
.barra nav a {
  /* Blanco entero. Es la navegación principal: no hay nada en la página que
     merezca menos ser gris que esto. */
  text-decoration: none; font-size: .93rem; color: var(--texto); transition: opacity .15s;
}
.barra nav a:hover { color: var(--texto); }
/* El botón de la barra es un botón: letra tinta sobre lima, también al pasar. */
.barra nav a.boton, .barra nav a.boton:hover { color: var(--sobre-acento); }
@media (max-width: 700px) { .barra nav a:not(.boton) { display: none; } }

/* ── Botones ────────────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.3rem;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--acento); color: var(--sobre-acento);
  font: inherit; font-weight: 650; font-size: .95rem; text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease;
}
.boton:hover {
  background: var(--acento-hover);
  transform: translateY(-1.5px);
}
.boton:active { transform: translateY(0); }
.boton.grande { padding: .95rem 2rem; font-size: 1.03rem; }
.boton.chico  { padding: .48rem 1.05rem; font-size: .88rem; box-shadow: none; }
.boton.fantasma {
  background: transparent; color: var(--texto);
  border-color: var(--borde-claro); box-shadow: none;
}
.boton.fantasma:hover { background: var(--carbon); border-color: var(--texto-tenue); }

/* ── Héroe ──────────────────────────────────────────────────────────── */
.heroe {
  position: relative; text-align: center;
  padding-top: clamp(3.5rem, 8vw, 6rem);
}
.etiqueta {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .9rem; margin-bottom: 1.4rem;
  border: 1px solid color-mix(in srgb, var(--acento) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--acento) 10%, transparent);
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  color: var(--acento-claro);
}
.entrada {
  max-width: 40rem; margin: 0 auto 2.2rem;
  font-size: clamp(1.02rem, 1.9vw, 1.2rem); color: var(--texto-medio);
}
.acciones { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.letra-chica { font-size: .85rem; color: var(--texto-tenue); margin-top: 1.1rem; }
.centrado { text-align: center; }

/* Los títulos de sección, centrados. Todos.
   La página tenía dos criterios a la vez: la portada y el cierre centraban, y
   el resto alineaba a la izquierda. Eso ya se notaba, pero lo que lo hacía
   evidente era que debajo de un título pegado a la izquierda había bloques
   estrechos —las descargas, las preguntas— con quinientos píxeles muertos a la
   derecha, mientras los planes sí iban centrados. Un solo criterio y se acabó
   la discusión. */
main > section > .contenedor > h2,
main > section > .contenedor > .subtitulo {
  text-align: center;
}

/* La captura, presentada como una ventana de verdad. */
.captura {
  margin-top: 4rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--carbon);
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgb(0 0 0 / .9), 0 0 0 1px rgb(255 255 255 / .03);
}
.captura .titulo {
  display: flex; align-items: center; gap: .45rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--borde);
  background: var(--negro-suave);
}
.captura .punto { width: 11px; height: 11px; border-radius: 50%; background: var(--borde-claro); }
.captura img { width: 100%; height: auto; display: block; }

/* ── Pasos ──────────────────────────────────────────────────────────── */
.pasos { list-style: none; padding: 0; margin: 3rem 0 0; display: grid; gap: 2.5rem; }
@media (min-width: 820px) { .pasos { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.pasos li { position: relative; padding-top: 3.2rem; }
.numero {
  position: absolute; top: 0; left: 0;
  display: grid; place-items: center;
  width: 2.3rem; height: 2.3rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--acento) 40%, transparent);
  background: color-mix(in srgb, var(--acento) 12%, transparent);
  color: var(--acento-claro); font-weight: 700; font-size: .95rem;
}
.pasos p { color: var(--texto-medio); font-size: .95rem; margin: 0; }

/* ── Funciones ──────────────────────────────────────────────────────── */
.rejilla { display: grid; gap: 1rem; margin-top: 3rem; }
@media (min-width: 720px)  { .rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .rejilla { grid-template-columns: repeat(3, 1fr); } }
.rejilla article {
  padding: 1.6rem;
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--carbon);
  transition: border-color .18s ease, transform .18s ease;
}
.rejilla article:hover { border-color: var(--borde-claro); transform: translateY(-2px); }
.rejilla h3 { color: var(--texto); }
.rejilla p  { color: var(--texto-medio); font-size: .93rem; margin: 0; }

/* ── Precio ─────────────────────────────────────────────────────────── */
.subtitulo { color: var(--texto-medio); margin-bottom: 2.5rem; font-size: 1.02rem; }
.planes { display: grid; gap: 1.2rem; }
@media (min-width: 780px) { .planes { grid-template-columns: repeat(2, 1fr); max-width: 46rem; margin-inline: auto; } }
/* Un solo plan (la membresía de la plataforma): centrado, no estirado a dos columnas. */
.planes.una { grid-template-columns: 1fr; max-width: 24rem; margin-inline: auto; }
.plan {
  position: relative; padding: 2rem;
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--carbon);
}
.plan.destacado {
  border-color: var(--acento);
  box-shadow: 0 0 0 1px var(--acento);
}
.cinta {
  position: absolute; top: -.8rem; left: 2rem;
  padding: .2rem .8rem; margin: 0;
  border-radius: 999px; background: var(--acento); color: var(--sobre-acento);
  font-size: .74rem; font-weight: 650; letter-spacing: .01em;
}
.cifra { font-size: 2.6rem; font-weight: 700; margin: .4rem 0 1.4rem; letter-spacing: -0.04em; }
.cifra span { font-size: .95rem; font-weight: 500; color: var(--texto-tenue); letter-spacing: 0; }
.plan ul { list-style: none; padding: 0; margin: 0 0 1.8rem; }
.plan li { position: relative; padding-left: 1.6rem; font-size: .94rem; margin-bottom: .55rem; color: var(--texto-medio); }
.plan li::before { content: '✓'; position: absolute; left: 0; color: var(--acento-claro); font-weight: 700; }
.plan .boton { width: 100%; }

/* ── Descargas ──────────────────────────────────────────────────────── */
.descargas { display: grid; gap: .8rem; max-width: 36rem; margin-inline: auto; }
.descarga {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--borde); border-radius: var(--radio-sm);
  background: var(--carbon); text-decoration: none;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.descarga:hover { border-color: var(--borde-claro); background: var(--negro-suave); transform: translateY(-1px); }
.descarga .info { display: flex; flex-direction: column; gap: .1rem; }
.descarga strong { font-weight: 600; font-size: .98rem; }
.descarga span   { font-size: .84rem; color: var(--texto-tenue); }
.descarga .flecha { color: var(--texto-tenue); font-size: 1.2rem; }
.descarga.recomendada {
  border-color: color-mix(in srgb, var(--acento) 50%, transparent);
  background: var(--carbon);
}
.descarga.recomendada .flecha { color: var(--acento-claro); }
/* El selector lleva `.descarga` delante a propósito. Es un <span> dentro de
   una tarjeta de descarga, y `.descarga span` —que tiene más peso por incluir
   el elemento— le imponía el gris de las descripciones: la etiqueta salía en
   gris claro sobre rojo, con 3,42 de contraste, la peor combinación de toda la
   página y encima en lo que más llama la atención. */
.descarga .marca-rec {
  display: inline-block; margin-left: .5rem; padding: .1rem .5rem;
  border-radius: 999px; background: var(--acento); color: var(--sobre-acento);
  font-size: .68rem; font-weight: 650; letter-spacing: .02em; vertical-align: middle;
}

.ayuda { margin-top: 1.8rem; max-width: 36rem; margin-inline: auto; }
.ayuda summary { cursor: pointer; font-size: .92rem; color: var(--texto-medio); }
.ayuda summary:hover { color: var(--texto); }
.ayuda p { font-size: .9rem; color: var(--texto-medio); margin-top: .9rem; }

/* ── Preguntas ──────────────────────────────────────────────────────── */
.preguntas { display: grid; gap: .6rem; max-width: 48rem; margin-top: 2.5rem; margin-inline: auto; }
.preguntas details {
  border: 1px solid var(--borde); border-radius: var(--radio-sm);
  background: var(--carbon); overflow: hidden;
  transition: border-color .16s ease;
}
.preguntas details[open] { border-color: var(--borde-claro); }
.preguntas summary {
  cursor: pointer; padding: 1.1rem 1.3rem;
  font-weight: 560; font-size: .97rem; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: '+'; color: var(--texto-tenue); font-size: 1.3rem; font-weight: 300;
  transition: transform .2s ease;
}
.preguntas details[open] summary::after { content: '−'; }
.preguntas p { padding: 0 1.3rem 1.2rem; margin: 0; color: var(--texto-medio); font-size: .94rem; }

/* ── Cierre y pie ───────────────────────────────────────────────────── */
.cierre { text-align: center; }
/* `margin-inline: auto 1.8rem` no centra: da margen automático a la izquierda y
   fijo a la derecha, así que el párrafo salía descolocado. */
.cierre p { color: var(--texto-medio); max-width: 34rem; margin: 0 auto 1.8rem; }
footer {
  border-top: 1px solid var(--borde);
  padding: 3rem 1.5rem; text-align: center;
  color: var(--texto-tenue); font-size: .89rem;
}
footer p { margin: 0 0 .35rem; }

/* ── Páginas legales ────────────────────────────────────────────────── */
.legal { max-width: 46rem; }
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: .3em; }
.legal h2 {
  font-size: 1.15rem; margin-top: 2.4rem; margin-bottom: .7rem;
  padding-top: 1.6rem; border-top: 1px solid var(--borde);
}
.legal p, .legal li { color: var(--texto-medio); font-size: .96rem; }
.legal strong { color: var(--texto); font-weight: 600; }
.legal ul { padding-left: 1.2rem; margin-bottom: 1.2rem; }
.legal li { margin-bottom: .45rem; }
.legal a { color: var(--acento-claro); }
.actualizado { font-size: .85rem; color: var(--texto-tenue); margin-bottom: 2.5rem; }
.destacado {
  padding: 1.2rem 1.4rem; margin-bottom: 2rem;
  border: 1px solid color-mix(in srgb, var(--acento) 35%, transparent);
  border-radius: var(--radio);
  background: color-mix(in srgb, var(--acento) 7%, transparent);
}
.destacado p { margin: 0; }
.legal table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: .92rem; }
.legal th, .legal td {
  text-align: left; padding: .7rem .8rem;
  border-bottom: 1px solid var(--borde); vertical-align: top;
}
.legal th { color: var(--texto); font-weight: 600; font-size: .85rem; }
.legal td { color: var(--texto-medio); }
.legal td:first-child { color: var(--texto); white-space: nowrap; }
@media (max-width: 620px) {
  .legal td:first-child { white-space: normal; }
}
footer a { color: var(--texto-medio); }
footer a:hover { color: var(--texto); }


/* ── Compra y entrega de la clave ──────────────────────────────────────── */

/* Los botones de suscripción.
   Son botones nuestros y usan la misma clase que el resto de la página, así
   que aquí sólo hace falta la separación y la nota de debajo. Los de PayPal
   venían en un iframe con fondo blanco que no se podía cambiar y rompían el
   diseño; ver pagar.js. */
.pagar {
  margin-top: 1.4rem;
}

.pagar-boton {
  width: 100%;
  justify-content: center;
}

.pagar-nota {
  margin: .7rem 0 0;
  font-size: .8rem;
  text-align: center;
  color: var(--texto-medio);
}

.pagar-nota.pagar-error {
  color: var(--acento-claro);
}

/* La franja del modo prueba. Deliberadamente fea y evidente: si algún día se
   queda puesta por error en una visita normal, quiero verla desde la otra punta
   de la habitación, no que pase por parte del diseño. */
.aviso-prueba {
  margin: 0 auto 2rem;
  max-width: 40rem;
  padding: .8rem 1.2rem;
  border: 1px dashed var(--acento-claro);
  border-radius: var(--radio-sm);
  background: color-mix(in srgb, var(--acento) 12%, transparent);
  color: var(--texto);
  font-size: .9rem;
  text-align: center;
}

/* La clave, en grande y legible.
   Es lo único que la persona tiene que copiar de esta página, y se copia a
   mano más veces de las que uno cree: a un papel, a un gestor de contraseñas,
   a un mensaje. `user-select: all` hace que un solo clic la seleccione entera
   en lugar de por trozos. */
.clave-grande code {
  display: inline-block;
  font-size: clamp(1.1rem, 3.4vw, 1.7rem);
  letter-spacing: 0.08em;
  padding: 1rem 1.4rem;
  border: 1px solid var(--borde-claro);
  border-radius: var(--radio);
  background: var(--carbon);
  color: var(--texto);
  user-select: all;
  word-break: break-all;
}

.aviso-caja {
  margin: 2rem auto 0;
  max-width: 34rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--negro-suave);
  color: var(--texto-medio);
  text-align: left;
}

.pasos-numerados {
  max-width: 30rem;
  margin: 1rem auto 0;
  text-align: left;
  color: var(--texto-medio);
  line-height: 1.9;
}

/* ── El código de referido, bajo los planes ──────────────────────────────── */

.codigo-referido {
  max-width: 26rem;
  margin: 1.75rem auto 0;
  text-align: left;
}
.codigo-referido > summary {
  cursor: pointer;
  text-align: center;
  font-size: .9rem;
  color: var(--texto-tenue);
  padding: .5rem;
}
.codigo-referido > summary:hover { color: var(--texto); }
.campo-codigo { display: block; margin-top: .75rem; }
.campo-codigo span {
  display: block;
  font-size: .84rem;
  color: var(--texto-tenue);
  margin-bottom: .45rem;
}
.campo-codigo input {
  width: 100%;
  padding: .7rem .9rem;
  font: inherit;
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto);
  background: var(--negro-suave);
  border: 1px solid var(--borde-claro);
  border-radius: var(--radio-sm);
}
.campo-codigo input:focus {
  outline: none;
  border-color: var(--texto-tenue);
}
#codigo-referido-aviso { margin-top: .5rem; min-height: 1.2em; }

/* ── El aviso de SmartScreen en Windows ──────────────────────────────────── */

.aviso-windows {
  max-width: 42rem;
  margin: 1.5rem auto 0;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--borde-claro);
  border-radius: var(--radio-sm);
  background: var(--negro-suave);
  text-align: left;
}
.aviso-windows p { margin: 0 0 .6rem; font-size: .93rem; color: var(--texto-tenue); }
.aviso-windows p:last-child { margin-bottom: 0; }
.aviso-windows strong { color: var(--texto-medio); }
/* Cuando quien mira ES de Windows: el mismo texto, imposible de pasar por alto. */
.aviso-windows.destacado { border-color: var(--acento); background: var(--carbon); }
.aviso-windows.destacado strong { color: var(--texto); }

/* El caso raro —el Control Inteligente de Aplicaciones, que bloquea sin botón—
   va plegado: le toca a poca gente y desplegado convertiría el aviso en un
   muro de texto que nadie lee. El título del pliegue es la frase exacta del
   bloqueo, para que quien lo tiene delante se reconozca al primer vistazo. */
/* En la página de la clave el resto de cajas mide 34rem (.aviso-caja): con las
   42rem de arriba, ésta sobresalía y se leía como un bloque ajeno a la página. */
.aviso-windows.estrecho { max-width: 34rem; }

.aviso-windows details { margin: 0 0 .6rem; }
.aviso-windows summary {
  cursor: pointer;
  font-size: .93rem;
  color: var(--texto-medio);
}
.aviso-windows summary:hover { color: var(--texto); }
.aviso-windows details p { margin-top: .6rem; }

/* En el móvil no se puede instalar un programa de escritorio.
   Las tarjetas de descarga se apagan en vez de esconderse: `descargas.js`
   explica el porqué al detalle, pero el resumen es que la detección de sistema
   falla más de lo que uno cree y esconder la única salida deja tirado a quien
   quedó mal clasificado. Se apagan, no se anulan: siguen abriendo. */
.descargas.apagadas { opacity: .45; }
.descargas.apagadas:hover,
.descargas.apagadas:focus-within { opacity: 1; }

/* Para quitar de en medio un botón que en cierta pantalla sobra. */
.oculto { display: none !important; }