/* ============================================================
   SMART PHONE FRAME — envoltura de las páginas
   Muestra el contenido con proporción y tamaño de smartphone,
   centrado en el viewport, incluso al abrirlo en un navegador de PC.
   Relación de aspecto fija 9:16 (720×1280) que NO cubre todo el
   navegador: siempre cabe completa dentro del viewport.
   Paleta consistente con la Motion Biblia (FASE 2): Negro Carbón
   #111111 · acento Dorado #B08D57. Sin degradados, esquinas rectas.
   ============================================================ */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

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

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  overflow: hidden;
  background: #0C0C0C;
}

/* --- Marco de smartphone: relación 9:16 (720×1280) --- */
.screen {
  position: relative;
  width: min(100vw, calc(100vh * 9 / 16));
  aspect-ratio: 9 / 16;
  max-width: 100vw;
  background: #111111;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(176, 141, 87, 0.14),
    0 40px 80px rgba(0, 0, 0, 0.55);
}

/* --- El contenedor interior llena el marco (herencia por página) --- */
.screen > .container {
  width: 100%;
  height: 100%;
  max-width: none;
  min-height: 0;
  justify-content: safe center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}