@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fuentes/bricolage-grotesque-500-latin.woff2') format('woff2');
}

:root {
  /* Debe coincidir con HORIZONTE en js/main.js. */
  --horizonte: 82%;

  /* Valores iniciales: noche añil, hasta que el JS pinta la luz del momento. */
  --cielo-0: #141A4A;
  --cielo-1: #1C2259;
  --cielo-2: #252A66;
  --cielo-3: #2A2F6E;
  --mar-0: #222E66;
  --mar-1: #1C2A5E;
  --mar-2: #182258;
  --sol-color: #FFF6DC;
  --resplandor-x: 50%;
  --resplandor-y: 82%;
  --resplandor-opacidad: 0;
  --reflejo-opacidad: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: var(--cielo-0);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  touch-action: none;
}

.escena {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.escena > * {
  position: absolute;
}

.cielo {
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--cielo-0) 0%,
    var(--cielo-1) 42%,
    var(--cielo-2) 68%,
    var(--cielo-3) var(--horizonte)
  );
}

.resplandor {
  inset: 0;
  background: radial-gradient(
    ellipse 70vmax 38vmax at var(--resplandor-x) var(--resplandor-y),
    var(--sol-color) 0%,
    transparent 62%
  );
  opacity: calc(var(--resplandor-opacidad) * 0.55);
}

.estrellas {
  inset: 0;
  width: 100%;
  height: 100%;
}

.astro {
  left: 0;
  top: 0;
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  opacity: 0;
  will-change: transform;
}

.sol {
  --d: clamp(34px, 7vmin, 60px);
  border-radius: 50%;
  background: var(--sol-color);
  box-shadow: 0 0 calc(var(--d) * 0.5) calc(var(--d) * 0.12) var(--sol-color);
}

.luna {
  --d: clamp(26px, 5.4vmin, 46px);
  filter: drop-shadow(0 0 calc(var(--d) * 0.25) rgb(246 240 222 / 0.35));
}

.luna svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mar {
  left: 0;
  right: 0;
  top: var(--horizonte);
  bottom: 0;
  background: linear-gradient(to bottom, var(--mar-0), var(--mar-1) 45%, var(--mar-2));
}

.reflejo {
  top: var(--horizonte);
  bottom: 0;
  left: var(--resplandor-x);
  width: clamp(90px, 22vmin, 220px);
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 100% at 50% 0, var(--sol-color), transparent 70%);
  opacity: calc(var(--reflejo-opacidad) * 0.6);
}

.firma {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
  font: 500 15px/1 'Bricolage Grotesque', system-ui, sans-serif;
  letter-spacing: 0.04em;
  color: rgb(255 248 236 / 0.62);
}