/* Estilos de yt-maker.
   Sin framework: son seis secciones y traer uno pesaría más que esto.

   La paleta sale del icono —rojo intenso sobre negro— y es la misma que usa la
   aplicación, para que quien llega de la página no sienta que abrió otro
   programa. */

:root {
  color-scheme: dark;

  --negro:        #08080a;
  --negro-suave:  #0f0f13;
  --carbon:       #16161c;
  --borde:        #24242c;
  --borde-claro:  #33333d;

  --texto:        #f4f4f6;
  --texto-medio:  #b4b4c0;
  /* 5.87 de contraste sobre el fondo. El valor anterior, #6b6b78, daba 3.43 —
     por debajo del mínimo legible de 4.5— y se usaba justo en lo más pequeño:
     las descripciones de cada descarga y el pie. Medido, no ajustado a ojo. */
  --texto-tenue:  #8a8a96;

  /* El rojo del botón se eligió midiendo, no a ojo: con #e8203a el texto blanco
     encima daba 4,47 de contraste, justo por debajo del mínimo de 4,5, y al
     pasar el ratón se ACLARABA hasta 3,3 — el botón principal era lo menos
     legible de la página. Con #d81730 el blanco da 5,14 y el rojo sigue
     destacando sobre el fondo (3,9). */
  --rojo:         #d81730;
  /* Al pasar el ratón se oscurece; aclarar arruinaba la legibilidad. */
  --rojo-hover:   #c00d24;
  /* Para texto rojo sobre fondo oscuro, donde hace falta lo contrario: claro. */
  --rojo-claro:   #ff5c6b;

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

* { 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; }

body {
  margin: 0;
  font-family: 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 { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 700; letter-spacing: -0.04em; }
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 {
  position: sticky; top: 0; z-index: 20;
  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 { text-decoration: none; font-size: .93rem; color: var(--texto-medio); transition: color .15s; }
.barra nav a:hover { color: var(--texto); }
@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(--rojo); color: #fff;
  font: inherit; font-weight: 600; font-size: .95rem; text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 0 rgb(255 255 255 / .12) inset, 0 8px 24px -10px var(--rojo);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.boton:hover {
  background: var(--rojo-hover);
  transform: translateY(-1.5px);
  box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset, 0 14px 32px -10px var(--rojo);
}
.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);
}
/* El resplandor rojo del icono, difuminado detrás del titular. */
.heroe::before {
  content: ''; position: absolute; inset: -10% 50% auto; z-index: -1;
  width: min(760px, 90vw); height: 420px; translate: -50% 0;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--rojo) 26%, transparent), transparent 68%);
  filter: blur(70px); pointer-events: none;
}
.etiqueta {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .9rem; margin-bottom: 1.4rem;
  border: 1px solid color-mix(in srgb, var(--rojo) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--rojo) 10%, transparent);
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  color: var(--rojo-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; }

/* 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(--rojo) 40%, transparent);
  background: color-mix(in srgb, var(--rojo) 12%, transparent);
  color: var(--rojo-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: linear-gradient(180deg, var(--carbon), var(--negro-suave));
  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; } }
.plan {
  position: relative; padding: 2rem;
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: linear-gradient(180deg, var(--carbon), var(--negro-suave));
}
.plan.destacado {
  border-color: color-mix(in srgb, var(--rojo) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rojo) 22%, transparent),
              0 30px 60px -30px var(--rojo);
}
.cinta {
  position: absolute; top: -.8rem; left: 2rem;
  padding: .2rem .8rem; margin: 0;
  border-radius: 999px; background: var(--rojo); color: #fff;
  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(--rojo-claro); font-weight: 700; }
.plan .boton { width: 100%; }

/* ── Descargas ──────────────────────────────────────────────────────── */
.descargas { display: grid; gap: .8rem; max-width: 36rem; }
.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(--rojo) 50%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rojo) 8%, var(--carbon)), var(--carbon));
}
.descarga.recomendada .flecha { color: var(--rojo-claro); }
.marca-rec {
  display: inline-block; margin-left: .5rem; padding: .1rem .5rem;
  border-radius: 999px; background: var(--rojo); color: #fff;
  font-size: .68rem; font-weight: 650; letter-spacing: .02em; vertical-align: middle;
}

.ayuda { margin-top: 1.8rem; max-width: 36rem; }
.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; }
.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(--rojo-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(--rojo) 35%, transparent);
  border-radius: var(--radio);
  background: color-mix(in srgb, var(--rojo) 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 ──────────────────────────────────────── */

/* El hueco de los botones de PayPal. Vive dentro de una tarjeta de plan y su
   altura la decide la biblioteca de PayPal, así que sólo se le da separación. */
.pagar {
  margin-top: 1rem;
  min-height: 0;
}

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