*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
}

a{ color:var(--link); text-decoration:underline; }
img{ max-width:100%; display:block; }

.container{
  width:min(100%, var(--container-max));
  margin:0 auto;
  padding: var(--s-6) var(--s-4);
}

.app-bg{
  min-height:100%;
  background-image: url("../assets/img/bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.app-bg::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(3,68,175,.25), rgba(56,159,244,.18));
}

.screen{
  position:relative; /* para quedar arriba del overlay */
  min-height:100vh;
}

.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.mt-2{ margin-top:var(--s-2); }
.mt-4{ margin-top:var(--s-4); }
.mt-5{ margin-top:var(--s-5); }
.mt-6{ margin-top:var(--s-6); }