/* boneDev — la web. Los colores son los del juego y los del logo: el crema de Noita Rescue de
   fondo, y los dos grises apagados de "bone" y "Dev" para el texto. */
:root {
  --crema: #FFF6EA;
  --papel: #FFFFFF;
  --tinta: #3A2E23;
  --suave: #7A6A58;
  --bone: #5C5249;
  --dev: #7C8B98;
  --raya: #EADCC8;
  --enlace: #4F6F8A;
}

@media (prefers-color-scheme: dark) {
  :root {
    --crema: #1F1A15;
    --papel: #2A241E;
    --tinta: #F1E7DA;
    --suave: #BBAE9E;
    --raya: #3E352C;
    --enlace: #A9C4DC;
  }
  .logo { filter: invert(1) hue-rotate(180deg) brightness(1.4); }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 20px 64px;
}

a { color: var(--enlace); }

.logo {
  display: block;
  width: min(360px, 80%);
  height: auto;
  margin: 8px auto 12px;
}

.lema {
  text-align: center;
  color: var(--suave);
  margin: 0 0 40px;
}

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--raya);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  gap: 18px;
  align-items: center;
}

.tarjeta img {
  width: 88px;
  height: 88px;
  border-radius: 20px;
  flex: none;
}

.tarjeta h2 { margin: 0 0 4px; font-size: 21px; }
.tarjeta p { margin: 0 0 6px; color: var(--suave); }

.pie {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--raya);
  color: var(--suave);
  font-size: 15px;
  text-align: center;
}

/* La política. */
.doc h1 { font-size: 30px; line-height: 1.2; margin: 24px 0 6px; }
.doc h2 { font-size: 21px; margin: 36px 0 8px; }
.doc h3 { font-size: 18px; margin: 22px 0 4px; }
.doc .fecha { color: var(--suave); margin: 0 0 24px; }
.doc ul { padding-left: 22px; }
.doc li { margin: 4px 0; }
.idioma { text-align: right; font-size: 15px; margin: 0; }
.logo-pequeno { display: block; width: 180px; height: auto; }

/* Las fichas de la portada son enlaces enteros. */
a.tarjeta { color: inherit; text-decoration: none; margin-bottom: 16px; }
a.tarjeta:hover { border-color: var(--suave); }
.tarjeta .mas { color: var(--enlace); font-size: 15px; }

/* La página de cada app. */
.app { display: flex; gap: 20px; align-items: center; margin: 24px 0 8px; }
.app img { width: 112px; height: 112px; border-radius: 26px; flex: none; }
.app h1 { margin: 0; font-size: 32px; line-height: 1.15; }
.app p { margin: 4px 0 0; color: var(--suave); }
.boton {
  display: inline-block;
  margin: 18px 0 8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--crema);
  text-decoration: none;
  font-weight: 600;
}
.enlaces { margin: 28px 0 0; padding: 0; list-style: none; }
.enlaces li { margin: 6px 0; }

/* El logo animado de la portada (logo.js). Mientras carga, o sin JavaScript, se ve el quieto. */
.logo-hueco { width: min(520px, 92%); margin: 8px auto 12px; }
.logo-hueco > img.logo { width: 100%; margin: 0; }
.logo-anim { position: relative; width: 100%; cursor: pointer; }
.logo-anim > .logo { position: absolute; margin: 0; width: auto; display: block; }

/* Las tarjetas entran una detrás de otra. */
@keyframes sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
main > .tarjeta { animation: sube .6s cubic-bezier(.2,.8,.2,1) both; }
main > .tarjeta:nth-of-type(1) { animation-delay: .35s; }
main > .tarjeta:nth-of-type(2) { animation-delay: .5s; }
.lema { animation: sube .6s cubic-bezier(.2,.8,.2,1) .2s both; }
@media (prefers-reduced-motion: reduce) {
  main > .tarjeta, .lema { animation: none; }
}