/* ACCESO — Solo en calma
   Lo que el tema hijo añade a la página pública de acceso. Hoy, la invitación a
   la cuenta de demostración.

   Hoja propia y no un trozo de tienda.css: aquella solo se sirve en la tienda y
   en el pago, y esta página no es ninguna de las dos. */

.sc-demo-invita {
  margin-block-start: var(--sc-espacio-8);
  padding: var(--sc-espacio-6);
  border: var(--sc-trazo-normal) dashed var(--sc-color-borde-sutil);
  border-radius: var(--sc-radio-l);
  background: var(--sc-color-superficie-elevada);
}

.sc-demo-invita__titulo {
  margin: 0 0 var(--sc-espacio-2);
  font-family: var(--sc-fuente-display);
  font-size: var(--sc-tipo-titulo-2);
  line-height: var(--sc-linea-titulo);
  color: var(--sc-color-tinta);
}

.sc-demo-invita__texto {
  margin: 0 0 var(--sc-espacio-4);
  font-size: var(--sc-tipo-cuerpo-s);
  line-height: var(--sc-linea-cuerpo);
  color: var(--sc-color-tinta-suave);
}

.sc-demo-invita__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-espacio-3) var(--sc-espacio-6);
  margin: 0 0 var(--sc-espacio-5);
}

.sc-demo-invita__rotulo {
  display: block;
  font-size: var(--sc-tipo-etiqueta);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sc-color-tinta-tenue);
}

.sc-demo-invita__datos code {
  font-family: var(--sc-fuente-mono);
  font-size: var(--sc-tipo-cuerpo);
  /* Seleccionable de un doble clic: se van a copiar a mano muchas veces. */
  user-select: all;
  color: var(--sc-color-tinta);
}

.sc-demo-invita__boton { min-height: var(--sc-toque-minimo); }