/* Página de un proyecto de investigación (Investigación > Proyectos > proyecto).
   Mismos colores y tipografía del sitio público (fondo #0f0f0f, tarjetas #161616, borde #262626, acento #4ade80 / #2e7d32).
   El sitio público es solo oscuro, así que esta página también. */

.pr-body { margin: 0; background: #0f0f0f; color: #e5e7eb; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
html.pr-sin-scroll, html.pr-sin-scroll .pr-body { overflow: hidden; }

/* ---------- Barra de progreso de lectura ---------- */
.pr-progreso { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 1100; pointer-events: none; }
.pr-progreso span { display: block; height: 100%; background: linear-gradient(90deg, #2e7d32, #4ade80); transform-origin: left center; transform: scaleX(var(--pr-p, 0)); transition: transform 0.12s linear; }

/* ---------- Encabezado con la imagen principal ---------- */
/* Es un <div> y no un <header>: home_style.css aplica a todo <header> la regla de la barra de navegación */
.pr-hero { padding: 20px 20px 0; }
.pr-hero__wrap { position: relative; max-width: 1180px; margin: 0 auto; }
.pr-hero__marco { position: relative; overflow: hidden; border: 1px solid #262626; border-radius: 16px; background: radial-gradient(900px 320px at 10% 0%, #1b5e20 0%, #0f0f0f 75%); aspect-ratio: 4 / 3; }
.pr-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; }
/* Portada pequeña: se ve completa y a su tamaño, centrada, sin ampliarla (evita el pixelado) */
.pr-hero--chica .pr-hero__img { object-fit: contain; object-position: center; }
.pr-hero--sin .pr-hero__marco { aspect-ratio: auto; min-height: 220px; }
.pr-hero__velo { display: none; }

.pr-hero__cuerpo { position: relative; padding: 18px 2px 4px; }
.pr-volver { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; font-weight: 700; color: #4ade80; text-decoration: none; }
.pr-volver:hover { text-decoration: underline; }
.pr-volver:focus-visible, .pr-boton:focus-visible, .pr-video__boton:focus-visible, .pr-galeria__item:focus-visible, .pr-video__alt a:focus-visible, .pr-doc--video:focus-visible, .pr-visor__b:focus-visible { outline: 3px solid #4ade80; outline-offset: 3px; border-radius: 8px; }
.pr-rotulo { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #86efac; }
.pr-titulo { margin: 0; max-width: 26ch; font-size: clamp(1.7rem, 6vw, 2.9rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; color: #fff; overflow-wrap: anywhere; text-wrap: balance; }

@media (min-width: 700px) {
    .pr-hero__marco { aspect-ratio: 2 / 1; }
    .pr-hero--sin .pr-hero__marco { aspect-ratio: auto; min-height: 300px; }
    /* En pantallas anchas el título va sobre la imagen, con degradado oscuro para que se lea */
    .pr-hero__velo { display: block; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15, 15, 15, 0) 35%, rgba(15, 15, 15, 0.55) 62%, rgba(15, 15, 15, 0.92) 100%); }
    .pr-hero--chica .pr-hero__velo { display: none; }
    .pr-hero__cuerpo { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 36px 30px; }
    .pr-hero--chica .pr-hero__cuerpo { position: relative; padding: 18px 2px 4px; }
    .pr-titulo { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7), 0 4px 24px rgba(0, 0, 0, 0.7); }
    .pr-hero--chica .pr-titulo { text-shadow: none; }
}

/* ---------- Lectura ---------- */
.pr-pagina { max-width: 820px; margin: 0 auto; padding: 10px 20px 80px; box-sizing: border-box; }
.pr-seccion { margin-top: 40px; }
.pr-seccion--ancha { max-width: 1180px; }
.pr-h2 { margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid #262626; font-size: 1.25rem; font-weight: 700; line-height: 1.25; color: #fff; }

/* Texto: a la izquierda y sin cortar palabras (la alineación que el autor elija en el editor va en el propio párrafo y se respeta) */
.pr-texto .rt, .pr-texto .rt p, .pr-texto .rt li { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
.pr-texto .rt { max-width: 68ch; font-size: 1.0625rem; line-height: 1.75; color: #d1d5db; }
.pr-texto .rt p { margin: 0 0 1.1em; }

/* ---------- Documentos ---------- */
.pr-docs { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.pr-doc { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid #262626; border-radius: 14px; background: #161616; color: inherit; text-decoration: none; }
.pr-doc__icono { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: rgba(239, 68, 68, 0.13); color: #f87171; font-size: 20px; }
.pr-doc--video .pr-doc__icono { background: rgba(74, 222, 128, 0.12); color: #4ade80; }
.pr-doc__datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pr-doc__titulo { font-size: 1rem; line-height: 1.35; color: #f3f4f6; overflow-wrap: anywhere; }
.pr-doc__tipo { font-size: 12px; color: #94a3b8; }
.pr-doc__acciones { flex: none; display: flex; flex-wrap: wrap; gap: 8px; }
.pr-doc--video:hover { border-color: #2e7d32; }
.pr-boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid #333; border-radius: 10px; background: #1f1f1f; color: #f3f4f6; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background 0.2s, border-color 0.2s; }
.pr-boton:hover { border-color: #2e7d32; background: #232323; }
.pr-boton--principal { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.pr-boton--principal:hover { background: #256528; border-color: #256528; }

/* ---------- Video ---------- */
.pr-video { position: relative; aspect-ratio: 16 / 9; border: 1px solid #262626; border-radius: 14px; overflow: hidden; background: radial-gradient(700px 260px at 15% 0%, #1b5e20 0%, #161616 75%); }
.pr-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pr-video__boton { position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 0; background: transparent; color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.pr-video__play { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; background: #2e7d32; color: #fff; font-size: 24px; padding-left: 4px; box-sizing: border-box; transition: background 0.2s, transform 0.2s; }
.pr-video__boton:hover .pr-video__play { background: #256528; transform: scale(1.05); }
.pr-video__alt { margin: 10px 0 0; font-size: 13px; }
.pr-video__alt a { color: #4ade80; text-underline-offset: 3px; }

/* ---------- Galería ---------- */
.pr-galeria { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.pr-galeria--1 { grid-template-columns: 1fr; }
.pr-galeria li { min-width: 0; }
.pr-galeria__item { display: block; width: 100%; padding: 0; border: 1px solid #262626; border-radius: 12px; overflow: hidden; background: #161616; cursor: zoom-in; aspect-ratio: 4 / 3; transition: border-color 0.2s; }
.pr-galeria__item:hover { border-color: #2e7d32; }
.pr-galeria__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Visor ---------- */
.pr-visor { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 64px 16px 56px; box-sizing: border-box; background: rgba(8, 8, 8, 0.94); }
.pr-visor[hidden] { display: none; }
.pr-visor__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.pr-visor__b { position: absolute; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid #333; border-radius: 50%; background: rgba(22, 22, 22, 0.92); color: #fff; font-size: 18px; cursor: pointer; }
.pr-visor__b:hover { background: #2e7d32; border-color: #2e7d32; }
.pr-visor__cerrar { top: 12px; right: 12px; }
.pr-visor__ant { left: 12px; top: 50%; margin-top: -24px; }
.pr-visor__sig { right: 12px; top: 50%; margin-top: -24px; }
.pr-visor__n { position: absolute; left: 0; right: 0; bottom: 16px; margin: 0; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: #cbd5e1; }

/* ---------- Otros proyectos y cierre ---------- */
.pl-grid--otros { margin-top: 0; }
.pr-fin { margin: 40px 0 0; }

@media (max-width: 640px) {
    .pr-doc { flex-wrap: wrap; }
    .pr-doc__acciones { width: 100%; }
    .pr-doc__acciones .pr-boton { flex: 1; }
    .pr-doc--video .pr-boton { width: 100%; }
    .pr-visor__ant, .pr-visor__sig { top: auto; bottom: 8px; margin-top: 0; }
    .pr-visor { padding-bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
    .pr-progreso span, .pr-boton, .pr-galeria__item, .pr-video__play { transition: none; }
    .pr-video__boton:hover .pr-video__play { transform: none; }
}