/* lo común de los módulos de recursos.brndconsulting.com que el artículo «BRND® ProType & Grid System» del blog de Wix muestra
   incrustados: tokens, el render de Apple y la letra. Incrustado, el fondo es transparente (se ve el del artículo); abierto solo, va
   centrado sobre el fondo del sitio */
:root {
  --fondo: #F5F5F7; --hoja: #FBFBFD; --tinta: #1D1D1F; --tinta-2: #6E6E73; --relleno: #E5E5E7; --raya: #D2D2D7; --lima: #D9FE02; --noche: #141416;
  --redonda: 'PTV', system-ui, sans-serif; --mono: 'PTM', ui-monospace, monospace;
  --c13: 13px; --l13: 0.02em; --c16: 16px; --c21: 21px; --c55: 55px;   /* la escala de BRND®: Fibonacci, con 16 para leer */
  --e3: 3px; --e8: 8px; --e13: 13px; --e21: 21px; --e34: 34px; --e55: 55px; --e89: 89px;
  --radio-boton: 26px; --radio-bloque: 16px; --radio-continuo: 20px;   /* con esquina continua, el radio sube un 25 % */
  --lh-55: 55px; --lh-21: 27px; --lh-16: 22px; --lh-13: 19px;   /* el texto lleva el cuerpo + 6; la cifra grande, su propio cuerpo */
  --radio-pildora: 999px; --linea: 0.75px;   /* las líneas al grosor de la grilla */
  --punto: #AEAEB2;   /* el punto de las láminas que no están a la vista */
  --dur-1: 200ms; --dur-2: 300ms; --curva: cubic-bezier(0.4, 0, 0.2, 1);
  --z-visor: 10; --visor-boton: rgb(255 255 255 / 0.12); --visor-boton-encima: rgb(255 255 255 / 0.2); --visor-letra: #F5F5F7;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: transparent; }
body { color: var(--tinta); font-family: var(--redonda); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  font-synthesis: none; font-optical-sizing: auto; font-kerning: normal; font-feature-settings: "kern" 1, "liga" 1; }
button, a { font-feature-settings: inherit; -webkit-font-smoothing: inherit; }
main { container-type: inline-size; }
.suelto body { background: var(--fondo); padding: 16px; }
.suelto main { max-width: 1152px; margin: 0 auto; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
/* cada descarga, una barra como la de compra de apple.com: el botón redondo con la flecha hacia abajo y, al lado, qué se baja y qué trae;
   el fondo abraza al botón con el mismo margen arriba, abajo y al lado (8), así que el texto va en dos renglones: nombre y una línea. Toda
   la barra es el enlace. La del pack va en tinta. Al pasar el puntero, el botón se pone lima con la flecha negra */
.descarga { display: flex; align-items: center; gap: var(--e13); padding: var(--e8) var(--e21) var(--e8) var(--e8); border-radius: var(--radio-pildora);
  background: var(--hoja); color: var(--tinta); text-decoration: none; }
.descarga .boton { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--tinta); color: var(--hoja);
  transition: background-color var(--dur-1), color var(--dur-1); }
.descarga .boton svg { width: 20px; height: 20px; }
.descarga .texto { display: grid; min-width: 0; }
.descarga b { font-size: var(--c16); line-height: var(--lh-16); font-weight: inherit; font-variation-settings: "wght" 600, "wdth" 100; }
.descarga small { font-size: var(--c13); line-height: var(--lh-13); letter-spacing: var(--l13); color: var(--tinta-2); text-wrap: balance; }
.descarga.principal { background: var(--tinta); color: var(--hoja); }
.descarga.principal small { color: var(--raya); }
.descarga.principal .boton { background: var(--hoja); color: var(--tinta); }
.descarga:hover .boton, .descarga:focus-visible .boton { background: var(--lima); color: var(--tinta); }
@media (prefers-reduced-motion: reduce) { .descarga .boton { transition: none; } }