/* Fuentes alojadas en la web, las mismas que usa la app LASIO MP-12DB.
   Licencia SIL OFL 1.1: fonts/Archivo-LICENSE.txt y fonts/DSEG-LICENSE.txt */
@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DSEG7-Modern";
  src: url("fonts/DSEG7Modern-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DSEG14-Modern";
  src: url("fonts/DSEG14Modern-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #1b1b1d;
}

a {
  color: #e6e7e9;
}

a:hover {
  color: #ffffff;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid #d66133;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Cabecera: tres columnas con los lados iguales, para que la célula solar quede
   en el centro exacto aunque el logotipo y el menú midan distinto. */
.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
}

@media (min-width: 1100px) {
  .bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .bar > a {
    justify-self: start;
  }

  .bar > nav {
    justify-self: end;
  }
}

/* Paneles de explicación de cada modo: solo se ve el del modo activo. */
.mode-pane {
  display: contents;
}

.mode-pane[hidden] {
  display: none;
}

/* Teclas de la calculadora dibujada en la cabecera. */
.k {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border-radius: 9px;
  border: 1px solid #0d0d0e;
  color: #fff;
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  background: linear-gradient(#535357, #2b2b2e);
  box-shadow:
    0 5px #131314,
    0 9px 10px #0000006b,
    inset 0 1px #fff3;
}

.kf {
  background: linear-gradient(#8a8a90, #56565c);
  border-color: #1c1c1e;
  box-shadow:
    0 5px #2a2a2d,
    0 9px 10px #0000006b,
    inset 0 1px #ffffff4d;
}

.ka {
  background-color: #d66133;
  background-image: linear-gradient(#ffffff2e, #0000001f);
  border-color: #6b301a;
  box-shadow:
    0 5px #853c20,
    0 9px 10px #0000006b,
    inset 0 1px #ffffff59;
}

.ks {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* Tecla hundida mientras la calculadora de la cabecera se teclea sola. */
.k {
  transition:
    transform 0.06s,
    box-shadow 0.06s;
}

.k.is-down {
  transform: translateY(4px);
  box-shadow:
    0 1px #131314,
    0 2px 4px #0000006b,
    inset 0 1px #fff3;
}

.kf.is-down {
  box-shadow:
    0 1px #2a2a2d,
    0 2px 4px #0000006b,
    inset 0 1px #ffffff4d;
}

.ka.is-down {
  box-shadow:
    0 1px #853c20,
    0 2px 4px #0000006b,
    inset 0 1px #ffffff59;
}

/* Como en la app: el contador parpadea mientras está a cero. */
@keyframes tcBlink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  to {
    opacity: 0.25;
  }
}

#hero-digits.blink {
  animation: 1s step-end infinite tcBlink;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  #demo-knob {
    transition: none !important;
  }

  #hero-digits.blink {
    animation: none;
  }
}