/* Páginas de pieza (Hecho en Espora) */

/* ---------- Pase de fotos automático ---------- */
.pase {
  position: relative;
  height: calc(100vh - var(--marco) - var(--franja));
  min-height: 420px;
  background: #000;
  overflow: hidden;
}
.pase--portada { margin-bottom: var(--franja); }   /* franja blanca que adelanta lo que sigue */

.pase__fotos { position: absolute; inset: 0; }
.pase__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.pase__img--contener { object-fit: contain; }      /* fotos verticales: se ven completas */
.pase__img.is-activo { opacity: 1; }

/* Título sobre las fotos */
.pase__titulo {
  position: absolute;
  left: 20px; bottom: 5vh;
  color: var(--blanco);
  pointer-events: none;
  text-shadow: 0 0 1.2em rgba(0, 0, 0, .45);
}
.pase__titulo h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 6.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.01em;
}

/* ---------- Texto y ficha técnica ---------- */
.proyecto {
  position: relative;
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 5vw;
  align-items: start;
  padding: 9vh 2vw 14vh 20px;
}
/* Marcas de esquina ┐ ┘: se quitaron de las páginas interiores (en todos los tamaños de pantalla).
   El inicio las conserva. Para volver a mostrarlas, borra esta regla. */
.proyecto .marca { display: none; }

.proyecto__lateral { position: sticky; top: calc(var(--marco) + 4vh); }

.proyecto__volver {
  display: inline-block;
  margin-bottom: 6vh;
  font-size: clamp(.65rem, .75vw, .9rem);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.proyecto__volver:hover { text-decoration: line-through; text-decoration-thickness: .08em; }

.proyecto__ficha-titulo {
  margin: 0 0 2.2vh;
  font-size: clamp(.7rem, .85vw, 1rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.proyecto__ficha { margin: 0; font-size: clamp(.85rem, 1.05vw, 1.3rem); line-height: 1.45; color: var(--texto-suave); }
.proyecto__ficha dt { font-weight: 600; color: var(--negro); margin-top: 1.4em; }
.proyecto__ficha dt:first-child { margin-top: 0; }
.proyecto__ficha dd { margin: 0; }
.proyecto__ficha dd span { display: block; white-space: nowrap; }   /* cada nombre en su línea, sin cortarse */

.proyecto__texto { max-width: 44em; }
.proyecto__texto p {
  font-size: clamp(.95rem, 1.3vw, 1.6rem);
  line-height: 1.5;
  color: var(--texto-suave);
}
.proyecto__texto p + p { margin-top: 1.1em; }
.proyecto__nota { font-size: .85em !important; }

/* Segundo pase (montaje en sala) */
.pase--sala { margin-top: 2vh; }

/* ---------- Video (reemplaza la galería) ---------- */
/* Misma grilla que el texto: el borde izquierdo del video coincide con el del bloque de texto.
   El tamaño es relativo al ancho de ese bloque: --ancho-video (100% = igual de ancho que el texto). */
.video {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 5vw;
  padding: 0 2vw 12vh 20px;
}
.video__marco { grid-column: 2; max-width: 44em; line-height: 0; }
.video__proporcion {
  width: var(--ancho-video, 66.667%);       /* 2/3 del ancho del bloque de texto */
  aspect-ratio: 1612 / 1080;                /* proporción del video */
  position: relative;
}
.video__proporcion iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Galería de proceso en mosaico: filas de altura igual, cada foto ocupa según su proporción (--ar) */
.mosaico { padding: 0 0 var(--franja) 20px; display: flex; flex-direction: column; gap: 1.3vw; }
.mosaico__fila { display: flex; gap: 1.3vw; }
.mosaico__fila figure { flex: var(--ar, 1) 1 0; margin: 0; min-width: 0; }
.mosaico__fila img { width: 100%; height: auto; display: block; }

/* Imagen pequeña dentro del texto (recuadro, no a pantalla completa) */
.proyecto__imagen { margin: 5vh auto 0; }   /* centrada en la columna de texto */
.proyecto__imagen img { display: block; width: 100%; height: auto; }

/* Video de Vimeo dentro del texto (proporción 16:9) */
.proyecto__video { position: relative; margin: 3vh auto 0; aspect-ratio: 16 / 9; background: #000; }
.proyecto__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Flechas del pase: la esquina ┐ girada. Discretas; solo aparecen si hay más de una imagen. */
.pase__flecha {
  position: absolute; top: 50%; z-index: 2;
  width: 56px; height: 56px;
  margin-top: -28px; padding: 0;
  border: 0; background: none;
  display: flex; align-items: center; justify-content: center;
  opacity: .6; cursor: pointer;
  transition: opacity .2s ease;
}
.pase__flecha:hover, .pase__flecha:focus-visible { opacity: 1; }
.pase__flecha span {
  width: 14px; height: 14px;
  border-top: 2px solid var(--blanco);
  border-right: 2px solid var(--blanco);
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, .45));
}
.pase__sig { right: 10px; }
.pase__sig span { transform: rotate(45deg); margin-right: 6px; }    /* ┐ girada: apunta a la derecha */
.pase__ant { left: 10px; }
.pase__ant span { transform: rotate(-135deg); margin-left: 6px; }   /* ┐ girada: apunta a la izquierda */

/* =====================================================================
   RESPONSIVO · PROYECTOS (tablet y móvil, hasta 1100 px)
   Mosaico en carrusel y video centrado en la pantalla. En escritorio nada cambia.
   ===================================================================== */
@media (max-width: 1100px) {
  /* Galería en carrusel: todas las fotos en una fila que se desliza con el dedo; la siguiente asoma a la derecha.
     "display: contents" hace que las filas del mosaico desaparezcan y las fotos queden sueltas en la fila. */
  .mosaico {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mosaico::-webkit-scrollbar { display: none; }
  .mosaico__fila { display: contents; }
  .mosaico__fila figure { flex: 0 0 62%; scroll-snap-align: start; }

  /* Video centrado respecto de la pantalla completa: la barra lateral derecha ocupa un ancho "marco",
     y el cálculo del margen izquierdo lo compensa. */
  .video { grid-template-columns: 1fr; padding: 0 0 12vh; }
  .video__marco {
    grid-column: 1;
    width: min(44em, calc(100% - var(--marco)));
    max-width: none;
    margin: 0 0 0 calc((100% + var(--marco) - min(44em, 100% - var(--marco))) / 2);
  }
  .video__proporcion { --ancho-video: 100%; }

  /* Foto y video dentro del texto: en escritorio sobresalen un poco de la columna (110 %); en tablet y móvil
     ocupan justo el ancho del texto, para que no se metan bajo la barra lateral.
     "!important" porque el ancho está escrito en el propio HTML. */
  .proyecto__imagen, .proyecto__video { width: 100% !important; margin-left: 0 !important; }
}

/* =====================================================================
   RESPONSIVO · PROYECTOS (móvil y tablet vertical: mismo comportamiento)
   ===================================================================== */
@media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
  .pase__titulo { left: 20px; right: 20px; bottom: 4vh; }

  /* Una sola columna. Orden: "← Hecho en Espora", texto y, al final, la ficha técnica.
     "display: contents" deja que la ficha se ordene junto con el texto. */
  .proyecto { grid-template-columns: 1fr; gap: 0; padding: 6vh 20px 12vh 20px; }
  .proyecto__lateral { display: contents; }
  .proyecto__volver { order: -1; justify-self: start; margin-bottom: calc(4vh - .7em); font-size: .75rem; }
  .proyecto__texto { max-width: none; }
  .proyecto__texto p { font-size: 1rem; }
  .proyecto__ficha-titulo { order: 1; margin-top: 6vh; }
  .proyecto__ficha { order: 1; font-size: .95rem; }
  .proyecto__ficha dd span { white-space: normal; }

  .mosaico { padding: 0 0 var(--franja) 20px; }
  .mosaico__fila figure { flex-basis: 82%; }

  /* Video centrado respecto de la pantalla completa (mismo ancho de margen a cada lado) */
  .video__marco { width: calc(100% - var(--marco)); margin-left: var(--marco); }
}

/* =====================================================================
   RESPONSIVO · PORTADA EN MÓVIL Y TABLET VERTICAL
   Título arriba, en texto sobre fondo blanco, y debajo las fotos completas (sin recortar),
   en una fila que se desliza con el dedo. Sin cambio automático ni flechas.
   ===================================================================== */
.pase__contador-movil { display: none; }

@media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
  .pase {
    height: auto;
    min-height: 0;
    background: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
  }
  .pase--portada { margin-bottom: 3vh; }

  .pase__titulo {
    position: static;
    order: -1;
    padding: 9vh 20px 3vh;
    color: var(--texto-suave);
    text-shadow: none;
  }
  .pase__titulo h1 { font-size: clamp(2rem, 9vw, 3rem); }

  .pase__fotos {
    position: static;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 20px;
    scroll-padding-left: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pase__fotos::-webkit-scrollbar { display: none; }
  .pase__img {
    position: static;
    inset: auto;
    opacity: 1;
    transition: none;
    flex: 0 0 86%;
    width: 86%;
    height: auto;
    max-height: 75vh;
    object-fit: contain;
    scroll-snap-align: start;
  }
  .pase__img:only-child { flex-basis: 100%; width: 100%; }   /* una sola foto: de borde a borde */
  .pase__img--primera-movil { order: -1; }                    /* en móvil esta foto va primero, aunque en el HTML esté segunda */
  .pase__flecha { display: none; }
  .pase--portada:not(:has(.pase__titulo)) { padding-top: 20px; }   /* portada sin título (página "Espora"): aire arriba, igual que el margen lateral */

  .pase__contador-movil {
    display: block;
    margin: 1.5vh 20px 0;
    font-size: .75rem;
    letter-spacing: .12em;
    color: var(--texto-suave);
  }
}

/* Revisión general (tablet y móvil): letra mínima de 12 px y zona de toque más grande en "← Hecho en Espora". */
@media (max-width: 1100px) {
  .proyecto__volver { font-size: .75rem; padding: .7em 0; margin-top: -.7em; }
  .proyecto__ficha-titulo { font-size: .75rem; }
}