/* Pequenauta — la hoja del sitio: reinicio, tipografía base, body, decorado,
   cabecera y utilidades. La usan la home y las páginas legales; el juego no,
   que tiene su propio body en tesoro-tablas/css/base.css.

   Va justo después de tokens.css, que es de donde salen las fichas, y antes de
   componentes.css. El orden no es negociable: la primera regla de abajo ya
   pide var(--mar).

   El body de aquí no es el del Tesoro. Comparten el degradado del mar, pero el
   juego además centra en vertical y alinea el texto al centro, y eso es suyo:
   tesoro-tablas/css/base.css lo sigue teniendo. Duplicar el degradado en dos
   hojas es más barato que enredar las dos páginas en una sola definición con
   excepciones. */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(175deg, var(--mar-claro) 0%, var(--mar) 42%, var(--mar-profundo) 100%);
  background-attachment: fixed;
  color: var(--texto);
  font-family: var(--tipo-texto);
  line-height: 1.5;
  overflow-x: hidden;
}

/* Tipografía: Fredoka para lo que se mira, Nunito para lo que se lee. Los
   cuerpos y las sombras son los del juego, para que las dos páginas se lean
   como un solo sitio. */
h1 {
  font-family: var(--tipo-titulo);
  font-weight: 700;
  font-size: clamp(2rem, 7vw, 3.25rem);
  line-height: 1.15;
  color: var(--texto);
  text-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.4), 0 0 3.5rem rgba(245, 166, 35, 0.3);
}

h2 {
  font-family: var(--tipo-titulo);
  font-weight: 600;
  font-size: clamp(1.25rem, 4vw, 1.6rem);
  line-height: 1.25;
  color: var(--texto);
  text-shadow: var(--sombra-texto);
}

a {
  color: inherit;
}

/* Composición ------------------------------------------------------------ */

/* La cabecera y el contenido van sobre el decorado, que es fijo y de la capa
   cero. Todo con un margen lateral de al menos --e4, que es lo que impide que
   una tarjeta toque el borde en un teléfono estrecho. El pie sigue la misma
   receta, pero vive en componentes.css: el juego también lo lleva y no puede
   enlazar esta hoja, porque el body de aquí pisaría al suyo. */
.cabecera-sitio,
main {
  position: relative;
  z-index: var(--z-hud);
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding-inline: var(--e4);
}

.cabecera-sitio {
  padding-block: var(--e6) var(--e4);
  text-align: center;
}

.bienvenida {
  margin-top: var(--e2);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--cielo-calido);
  text-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3);
}

main {
  flex: 1;
  padding-block: var(--e4);
}

/* Decorado --------------------------------------------------------------- */

/* Nubes arriba y olas al pie, detrás de todo y sin capturar ni un toque. Es el
   mismo decorado del Tesoro, copiado y no compartido: el juego lo tiene en su
   hoja y la home en esta, y cada uno lo retira cuando le conviene. */
.decorado {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: var(--z-fondo);
}

.nube {
  position: absolute;
  fill: #ffffff;
}

.nube-1 {
  top: 4%;
  left: 4%;
  width: 8rem;
  opacity: 0.18;
}

.nube-2 {
  top: 9%;
  right: 8%;
  width: 6rem;
  opacity: 0.14;
}

/* Cada ola es el mismo perfil dibujado dos veces seguidas dentro de un SVG del
   doble de ancho: desplazarlo media anchura lo deja exactamente donde estaba, y
   el bucle no tiene costura. */
.ola {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 5rem;
}

.ola-1 {
  fill: rgba(255, 255, 255, 0.07);
}

.ola-2 {
  bottom: 1.25rem;
  height: 3.5rem;
  fill: rgba(255, 255, 255, 0.05);
}

@keyframes oleaje {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes deriva {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(1.25rem); }
}

/* Lento y lineal, para que se note que hay mar pero no distraiga. */
.ola-1 { animation: oleaje 8s linear infinite; }
.ola-2 { animation: oleaje 14s linear infinite; }

.nube-1 { animation: deriva 12s ease-in-out infinite; }
.nube-2 { animation: deriva 16s ease-in-out infinite 2s; }

/* Utilidades ------------------------------------------------------------- */

.oculta {
  display: none !important;
}

/* Solo para lectores de pantalla. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* El foco tiene que verse siempre: el sitio se recorre con el teclado. */
:focus-visible {
  outline: 0.2rem solid var(--oro-claro);
  outline-offset: 0.2rem;
}

/* Adaptaciones ----------------------------------------------------------- */

/* Móvil apaisado: hay poca altura y el decorado solo estorba. */
@media (max-height: 34rem) and (orientation: landscape) {
  .cabecera-sitio {
    padding-block: var(--e4) var(--e2);
  }

  .decorado {
    display: none;
  }
}

/* Menos movimiento: se anula todo con !important. Por eso nada de lo que se ve
   puede depender solo de una animación. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}