/* ============================================
   PROYECTO — Variables propias de este componente
   ============================================ */
.pagina-proyecto {
  --rojo: #cd5655;
  --negro: #1a1a1a;
  --blanco: #ffffff;
  --gris-claro: #b1b1af;
  --gris-texto: #545454;
}

.u-rojo {
  color: var(--rojo);
  display: block;
}
.u-mayus {
  text-transform: uppercase;
}

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

.pagina-proyecto .page-content {
  padding-top: 63px;
  margin: 0;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
}

.proyecto-wrapper {
  position: relative;
  width: 100%;
  margin-top: max(0px, calc(25vh - 63px));
  height: 75vh;
  overflow: hidden;
}

/* --- Variante para proyecto-especial: el CONTENEDOR arranca
   casi pegado al header (para que el héroe pueda usar esa
   altura completa), pero el resto de los elementos (viñeta,
   texto, fotos) se empujan hacia abajo con --desfase-cuarto
   para seguir respetando la línea del 25% — solo el héroe
   usa la altura completa del contenedor. --- */
.proyecto-wrapper--especial {
  margin-top: 25px;
  height: calc(100vh - 63px - 25px);
  --desfase-cuarto: max(0px, calc(25vh - 88px));
}
.proyecto-wrapper--especial .proyecto-sidebar {
  padding-top: calc(2rem + var(--desfase-cuarto));
}
.proyecto-wrapper--especial .proyecto-bloque--texto,
.proyecto-wrapper--especial .proyecto-foto {
  margin-top: var(--desfase-cuarto);
}

.proyecto-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(50vw / 3);
  min-width: 180px;
  height: 100%;
  padding: 2rem 1.5rem 2rem 25px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: var(--blanco);
  z-index: 10;
  text-align: left;
  font-weight: 400;
}

/* --- Título corto: solo lo usa proyecto-especial --- */
.proyecto-titulo-grande {
  font-family: "Rubik", system-ui;
  font-size: 1.53rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin: 0;
}

.proyecto-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.proyecto-meta__nombre {
  font-size: 17px;
  font-weight: 400;
}
.proyecto-meta__tipo,
.proyecto-meta__año {
  font-size: 14px;
  font-weight: 400;
}

.proyecto-colaboradores {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.proyecto-colaboradores span {
  font-size: 14px;
  font-weight: 400;
}

.proyecto-sidebar-footer {
  margin-top: auto;
  margin-bottom: 4.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.proyecto-nota {
  font-size: 13px;
  color: var(--gris-claro);
  line-height: 1.5;
  font-style: italic;
  font-weight: 400;
  margin: 1.5em 0 0 0;
}

.proyecto-volver {
  display: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: "Rubik", system-ui;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  color: var(--gris-texto);
}
.proyecto-volver.visible {
  display: inline-block;
  width: fit-content;
}
.proyecto-volver:hover,
.proyecto-volver:hover .a-span {
  color: var(--rojo) !important;
}

.proyecto-scroll {
  height: 100%;
  display: flex;
  align-items: flex-start;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  box-sizing: border-box;
  padding: 2rem 25px 2rem calc(50vw / 3);
  gap: 4rem;
}
.proyecto-scroll::-webkit-scrollbar {
  display: none;
}

.proyecto-bloque {
  flex-shrink: 0;
  text-align: left;
}

/* --- Héroe: solo en proyecto-especial, primer elemento del
   carrusel, ocupa toda la banda de contenido (75vh) --- */
/* --- Héroe: solo en proyecto-especial, primer elemento del
   carrusel. Ocupa toda la banda de contenido (75vh) y, como
   mínimo, todo el ancho visible restante (pantalla completa
   menos la viñeta) — así domina la primera pantalla en vez
   de aparecer "apachurrado" junto al texto. --- */
.proyecto-bloque--hero {
  height: 100%;
  width: calc(100vw - (50vw / 3));
  flex-shrink: 0;
}
.proyecto-bloque--hero img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.proyecto-bloque--texto {
  width: calc((100vw / 3) - 4rem);
  min-width: 280px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--negro);
  font-weight: 300;
}
.proyecto-bloque--texto p {
  margin: 0 0 1.2em 0;
}
.proyecto-bloque--texto p:last-child {
  margin-bottom: 0;
}

/* --- Fotos: la mitad de alto por defecto (32.5vh).
   El alto queda fijo; el ancho se calcula solo, según la
   proporción REAL de cada foto (sin recortar ni forzar 4:3).
   Crecen a 65vh (el tamaño "completo") con una simple
   transición de height. --- */
.proyecto-foto {
  flex-shrink: 0;
  height: 32.5vh;
  cursor: zoom-in;
  transition: height 0.4s ease;
}
.proyecto-foto img {
  height: 100%;
  width: auto;
  display: block;
}

/* La primera foto (o cualquiera marcada con completa: true
   en el .md) arranca directamente en tamaño completo */
.proyecto-foto.tamano-completo {
  height: 65vh;
}

/* Una foto chica, al hacer click, crece a este mismo tamaño */
.proyecto-foto.expandida {
  height: 65vh;
  cursor: zoom-out;
}

.flecha-carrusel {
  position: fixed;
  right: 25px;
  top: 62.5vh;
  transform: translateY(-50%);
  width: auto;
  height: 24px;
  z-index: 15;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.flecha-carrusel:hover {
  opacity: 1;
  transform: translateY(-50%) translateX(4px);
}
.flecha-carrusel.oculta {
  display: none;
}

.proyecto-progreso {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: #e8e8e8;
  z-index: 20;
}
.proyecto-progreso__barra {
  height: 100%;
  width: 0%;
  background: var(--rojo);
  transition: width 0.1s linear;
}

@media screen and (max-width: 600px) {
  .proyecto-sidebar {
    width: 185px;
  }
  .proyecto-scroll {
    padding-left: 210px;
  }
  .proyecto-bloque--texto {
    width: 280px;
  }
  .flecha-carrusel {
    height: 18px;
    right: 15px;
  }
}