/* Dispositivo y scroll de la pantalla de entrada. */
.intro-device {
  height: var(--device-h);
  min-height: var(--device-h);
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--surface-2);
  scrollbar-width: none;
}

.intro-device::-webkit-scrollbar { display: none; }

/* Barra de estado sin información adicional. */
.intro-status {
  align-items: flex-end;
  padding-right: var(--intro-pad);
  padding-bottom: var(--line-hairline);
  padding-left: var(--intro-pad);
}

.intro-status .status-island {
  width: var(--intro-island-w);
  height: var(--intro-island-h);
  background: var(--ink-300);
}

/* Contenido principal y cabecera Sopra. */
.intro-content {
  flex: 1;
  padding: var(--s-3) var(--intro-pad);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.intro-brand {
  font-size: var(--ui-sm);
  line-height: var(--ui-sm-lh);
  font-weight: var(--fw-semibold);
}

.intro-tag {
  margin-top: var(--s-4);
  border: var(--line-hairline) solid var(--line);
  background: var(--white);
  color: var(--magenta);
}

.intro-heading {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin-top: var(--s-3);
}

.intro-heading .sopra-lede {
  font-size: var(--ui-sm);
  line-height: var(--ui-sm-lh);
}

.intro-divider {
  height: var(--line-hairline);
  margin: var(--s-4) var(--s-0);
  border: var(--s-0);
  background: var(--line);
}

/* Tarjetas informativas. */
.intro-cards {
  display: flex;
  flex-direction: column;
  gap: var(--intro-card-stack-gap);
}

.intro-card {
  gap: var(--intro-card-gap);
  padding: var(--intro-card-pad);
  border-radius: var(--r-md);
}

.intro-card__icon {
  width: var(--intro-card-icon);
  height: var(--intro-card-icon);
  border-radius: var(--r-md);
  background: var(--sfs-gradient);
  color: var(--white);
}

.intro-card__icon img {
  width: var(--intro-card-icon);
  height: var(--intro-card-icon);
}

.intro-card__copy { gap: var(--s-1); }

.intro-card .info-card__title {
  font-size: var(--ui-sm);
  line-height: var(--ui-sm-lh);
}

.intro-card .info-card__description {
  font-size: var(--ui-sm);
  line-height: var(--ui-xs-lh);
}

/* Acción principal y pie. */
.intro-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: auto;
}

.intro-start {
  min-height: 56px;
  margin-top: var(--s-0);
  padding: var(--s-3) var(--s-4);
}

.intro-footer {
  display: flex;
  flex-direction: column;
  margin-top: var(--s-0);
}