/* Me lo sé todo: un póster de una sola pantalla. Sin JavaScript ni recursos de terceros. */

@font-face { font-family: "Young Serif"; font-weight: 400; src: url(fuentes/young-serif-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; src: url(fuentes/atkinson-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; src: url(fuentes/atkinson-700.woff2) format("woff2"); font-display: swap; }

:root {
  color-scheme: dark;
  --noche: #070b24;
  --tinta: #0d1450;
  --oro: #ffc933;
  --aviso: #fff4cf;
  --aviso-texto: #2c2a12;
  --aviso-borde: #d9a400;
  --titulares: "Young Serif", Georgia, serif;
  --cuerpo: "Atkinson Hyperlegible", "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; margin: 0; font: 400 1.0625rem/1.45 var(--cuerpo); background: var(--noche); color: #fff; font-synthesis: none; }
h1, p { margin: 0; }
a { color: inherit; }
a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: .2rem; }

.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 3.75rem; padding: 0 2.4rem; font-size: 1.25rem; font-weight: 700; background: var(--oro); color: var(--tinta); border-radius: .6rem; text-decoration: none; }
.boton:hover { background: #ffd65c; }
.boton:focus-visible { outline-color: #fff; }

/* El póster: la imagen lo ocupa todo y el texto va abajo a la izquierda */
main { position: relative; flex: 1; display: flex; align-items: flex-end; overflow: hidden; }
.fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(7 11 36 / .92) 8%, rgb(7 11 36 / .55) 42%, rgb(7 11 36 / 0) 68%); }
.texto { position: relative; z-index: 1; width: min(84rem, 100% - 2.5rem); margin-inline: auto; padding-block: 3rem clamp(1.5rem, 4vh, 3rem); }
h1 { font: 400 clamp(4.2rem, min(13.5vw, 24vh), 12rem)/.92 var(--titulares); letter-spacing: -.015em; color: var(--oro); text-shadow: 0 .2rem 2rem rgb(0 0 0 / .6); }
.frase { max-width: 30ch; margin-top: 1.1rem; font-size: clamp(1.25rem, 2.3vw, 1.75rem); line-height: 1.25; text-shadow: 0 .1rem .8rem #000; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: 1.5rem; }
.dato { max-width: 26ch; text-shadow: 0 .1rem .6rem #000; }

/* El aviso del libro: siempre a la vista, sin desplazarse */
.aviso { position: relative; z-index: 2; background: var(--aviso); color: var(--aviso-texto); border-top: 3px solid var(--aviso-borde); }
.aviso-cuerpo { width: min(84rem, 100% - 2.5rem); margin-inline: auto; padding-block: .7rem .2rem; }
.aviso strong { font: 400 1.2rem/1.2 var(--titulares); color: var(--tinta); }
.pie { display: flex; flex-wrap: wrap; gap: 0 1.4rem; font-size: .95rem; }
.pie a { display: inline-block; padding-block: .7rem; font-weight: 700; color: var(--tinta); text-underline-offset: .2em; }

/* Página de error */
.perdido { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; flex: 1; width: min(84rem, 100% - 2.5rem); margin-inline: auto; padding-block: 3rem; }
.perdido h1 { font-size: clamp(3rem, 8vw, 6rem); line-height: 1; }
.perdido .frase { margin-block: 1.1rem 1.8rem; }
.perdido .volver { margin-top: .6rem; padding-block: .75rem; font-weight: 700; text-underline-offset: .2em; }

@media (max-width: 820px), (orientation: portrait) {
  main::after { background: linear-gradient(0deg, rgb(7 11 36 / .95) 22%, rgb(7 11 36 / .55) 52%, rgb(7 11 36 / 0) 78%); }
  .fondo { object-position: 74% 30%; }
  .texto { padding-top: 11rem; }
  h1 { font-size: clamp(4.2rem, 21vw, 10rem); }
}

/* Móvil en horizontal: hay poca altura, así que el título se reduce */
@media (max-height: 500px) and (orientation: landscape) {
  main::after { background: linear-gradient(90deg, rgb(7 11 36 / .92) 8%, rgb(7 11 36 / .55) 52%, rgb(7 11 36 / 0) 78%); }
  .texto { padding-top: 1.5rem; }
  h1 { font-size: 3.4rem; }
  .frase { margin-top: .6rem; font-size: 1.1rem; }
  .acciones { margin-top: .8rem; }
  .boton { min-height: 3rem; }
}

@media (max-width: 480px) {
  .acciones .boton { width: 100%; }
  .aviso { font-size: .98rem; }
}

/* Móvil pequeño en vertical: se compacta para que el aviso del libro se vea sin desplazarse */
@media (max-height: 700px) and (orientation: portrait) {
  .texto { padding-block: 1.5rem .8rem; }
  h1 { font-size: min(17vw, 3.4rem); }
  .frase { margin-top: .5rem; font-size: 1.05rem; line-height: 1.2; }
  .acciones { gap: .4rem 1rem; margin-top: .6rem; }
  .boton { min-height: 3rem; font-size: 1.1rem; }
  .dato { font-size: .92rem; line-height: 1.25; max-width: none; }
  .aviso { font-size: .86rem; line-height: 1.3; }
  .aviso strong { font-size: 1rem; }
  .aviso-cuerpo { padding-top: .45rem; }
  .pie { font-size: .85rem; gap: 0 .9rem; }
  .pie a { padding-block: .8rem; }
}