/* Fondo y tipografías del hero de la home de Atheria (los mismos que el
   portal Accesos, sites/access/public/styles.css): navy #0B1220 + dos
   radiales azules que derivan lento + velo oscuro vertical. */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/instrument-sans-latin.woff2") format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500-latin.woff2") format('woff2');
}

:root {
  --bg: #0B1220;
  --deep: #1E3A8A;
  --primary: #2563EB;
  --accent: #60A5FA;
  --text: #ffffff;
  --soft: #C7D3EA;
  --sans: 'Instrument Sans', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bg::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(60% 60% at 25% 25%, var(--deep) 0%, rgba(30, 58, 138, 0) 60%),
    radial-gradient(50% 55% at 80% 65%, var(--primary) 0%, rgba(37, 99, 235, 0) 62%);
  opacity: 0.75;
  animation: atheriaDrift 18s ease-in-out infinite;
}
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 18, 32, 0.2) 0%, rgba(11, 18, 32, 0.85) 100%);
}
@keyframes atheriaDrift {
  0%   { transform: translate3d(-4%, -2%, 0) scale(1.05); }
  50%  { transform: translate3d(4%, 3%, 0) scale(1.18); }
  100% { transform: translate3d(-4%, -2%, 0) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .bg::before { animation: none; }
}

main {
  text-align: center;
  max-width: 560px;
}
.logo {
  width: clamp(96px, 22vw, 140px);
  height: auto;
  filter: drop-shadow(0 12px 40px rgba(37, 99, 235, 0.45));
}
h1 {
  margin: 20px 0 0;
  font-size: clamp(34px, 7vw, 52px);
  font-weight: 600;
  letter-spacing: 0.22em;
  /* El tracking agrega espacio a la derecha de la última letra: se compensa
     para que la palabra quede centrada. */
  margin-right: -0.22em;
}
.lema {
  margin: 12px 0 0;
  font-size: clamp(16px, 2.6vw, 19px);
  color: var(--soft);
}
.aviso {
  margin: 40px 0 0;
  font-size: 16px;
  color: var(--soft);
}
.eyebrow {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}