/* =====================================================================
   PÁGINA DE PROYECTO (VERSIÓN SIMPLE) — MJV Studio
   La usan los proyectos que todavía no tienen su contenido completo: título (el nombre del proyecto) y la
   imagen principal. Tiene todo lo demás de siempre: preferencias (tema, sonido, idioma), botón de volver, etc.
   Cuando un proyecto tenga su página completa, se reemplaza su projectN.html y listo.
   ===================================================================== */
@font-face { font-family: 'titulos'; src: url('../assets/fonts/titulos/titulos.ttf') format('truetype'); }
@font-face { font-family: 'texto';   src: url('../assets/fonts/texto/texto.otf') format('opentype'); }

h1 { font-family: 'titulos', sans-serif; }
p, span, a { font-family: 'texto', sans-serif; }

html, body { height: 100%; height: 100dvh; margin: 0; overflow: hidden; }
body { display: flex; flex-direction: column; }
::-webkit-scrollbar { display: none; }

/* Misma fila que los encabezados de las secciones de la portada (alto, ancho, tamaño y estilo de letra) */
:root { --hdr-h: calc(10 * var(--vh)); }
@media (orientation: portrait) { :root { --hdr-h: max(calc(6 * var(--vh)), 44px); } }
.title-header-container { flex: 0 0 auto; width: 90vw; height: var(--hdr-h); margin: 0 auto; padding: 0 56px 0 0; box-sizing: border-box; display: flex; align-items: center; }
.project-title { margin: 0; }
.project-title h1 { font-size: max(1.15rem, 2vw); line-height: 1.2; letter-spacing: normal; margin: 0; color: black; text-transform: none; font-weight: normal; }

/* La imagen ocupa todo el espacio disponible, entera (sin recortes) y centrada */
.simple-main {
    flex: 1 1 auto; min-height: 0; width: 90%; max-width: 1400px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    padding-bottom: 4.5rem; box-sizing: border-box;
}
.simple-main img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; opacity: 0; transition: opacity 0.5s ease; }
.simple-main.is-ready img { opacity: 1; }

.back-to-projects-btn {
    position: fixed; top: 0; right: calc(5vw - 7px); z-index: 1000; width: 42px; height: var(--hdr-h);
    display: flex; align-items: center; justify-content: center; background: none;
    -webkit-tap-highlight-color: transparent; transition: transform 0.3s ease;
}
.back-to-projects-btn:hover { transform: scale(1.12); }
.back-to-projects-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
.back-to-projects-btn img { width: 28px; height: auto; display: block; }

/* ===== Memoria descriptiva (páginas con texto) ===== */
.simple-main.has-info { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 30%, 400px); gap: 3vw; align-items: center; }
.simple-main.has-info img { justify-self: center; }
.simple-info { align-self: stretch; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; justify-content: center; color: black; font-family: 'texto', sans-serif; font-size: 0.75rem; line-height: 1.5; padding: 0 4px; opacity: 0; transition: opacity 0.6s ease 0.15s; }
.simple-main.is-ready .simple-info { opacity: 1; }
.simple-info .si-type { margin: 0 0 0.9em; font-size: 0.85rem; }
.simple-info .si-meta { margin: 0 0 1.2em; }
.simple-info .si-meta > div { display: flex; gap: 0.6em; margin: 0 0 0.35em; }
.simple-info .si-meta dt { flex: 0 0 6.2em; opacity: 0.55; }
.simple-info .si-meta dd { margin: 0; }
.simple-info .si-line { display: block; }
.simple-info .si-text p { margin: 0 0 1em; text-align: justify; hyphens: auto; }
.simple-info .si-text p:last-child { margin-bottom: 0; }
@media (orientation: portrait), (max-width: 700px) {
    .simple-main.has-info { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding-bottom: 4rem; }
    .simple-main.has-info img { flex: 0 1 38%; min-height: 0; max-width: 100%; object-fit: contain; align-self: center; }
    .simple-info { flex: 1 1 0; justify-content: flex-start; font-size: 0.85rem; }
}