/* ============================================================================
   PÁGINA DE UN PROYECTO
   Cabecera (2/3 imagen + 1/3 texto) · nombre · galería · visor de imágenes
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1) CABECERA: ocupa toda la ventana.
      Horizontal -> 2/3 imagen (izq) + 1/3 texto (der)
      Vertical   -> 2/3 imagen (arriba) + 1/3 texto (abajo)
   --------------------------------------------------------------------------- */
.proyecto-cabecera{
  width:100%;
  min-height:100vh;                /* ocupa la ventana; crece si el texto es mas largo */
  display:grid;
  grid-template-columns:2fr 1fr;   /* 2 tercios / 1 tercio */
  background:#fff;
  /* misma drop shadow que el resto de secciones (Figma: X0 Y4 · blur 4 · negro 25%) */
  position:relative;
}

.proyecto-imagen{ position:relative; overflow:hidden; }
.proyecto-imagen img{
  width:100%; height:100%;
  object-fit:cover;                /* se recorta segun la ventana, no se deforma */
  display:block;
}

.proyecto-datos{
  background:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  /* Arriba se reserva el alto del barmenu (mismo clamp que usa .bar-menu) mas
     un pequeno respiro, solo para que el TITULO no quede bajo los botones.
     Abajo se recorta el relleno para compensar y que la seccion siga
     entrando en la ventana sin desbordar. */
  padding:calc(clamp(80px, 12vh, 130px) + 6px) clamp(22px,2.4vw,52px) clamp(12px,1.4vw,28px);
  font-family:'Segoe UI', system-ui, sans-serif;
  color:#404040;
  overflow:visible;
}

/* Título del proyecto: 48px en 1920 (48/1920 = 2.5vw) */
.proyecto-titulo{
  margin:0 0 clamp(14px,1.6vh,26px);
  font-size:clamp(26px, 2.5vw, 48px);
  font-weight:400;
  line-height:1.15;
  color:#14100C;
}

/* Año, Ubicación, Mandante y Descripción: 25px en 1920 (25/1920 = 1.3021vw) */
.proyecto-dato{
  margin:0 0 clamp(8px,1vh,14px);
  font-size:clamp(15px, 1.3021vw, 25px);
  line-height:1.45;
  font-weight:400;
}
.proyecto-dato:last-child{ margin-bottom:0; }
.proyecto-descripcion{ margin-top:clamp(10px,1.4vh,20px); }
.proyecto-descripcion p + p{ margin-top:clamp(8px,1vh,14px); }

/* ---------------------------------------------------------------------------
   2) NOMBRE DEL PROYECTO (debajo de la cabecera)
   --------------------------------------------------------------------------- */
.proyecto-nombre{
  width:100%;
  /* Mismo alto que las bandas de titulo del resto del sitio:
     290px en una ventana de 1920x1080  ->  290/1080 = 26.85vh */
  height:26.85vh;
  min-height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 20px;
  background:#fff;
}
.proyecto-nombre h2{
  margin:0;
  font-family:'Segoe UI', system-ui, sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:clamp(22px, 2.5vw, 48px);
  color:#14100C;
}

/* ---------------------------------------------------------------------------
   3) GALERÍA
   Mismas tarjetas que en la sección de proyectos, pero SIN texto y SIN capa
   oscura: solo el zoom de la imagen.
   --------------------------------------------------------------------------- */
.galeria{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  padding:10px;
  background:#fff;
  /* drop shadow que separa esta seccion del footer */
  position:relative;
}
.galeria-item{
  position:relative;
  display:block;
  overflow:hidden;              /* recorta el zoom */
  aspect-ratio:4 / 3;
  padding:0; border:0; margin:0;
  background:#14100C;
  cursor:pointer;
}
.galeria-item img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1);
  transition:transform 1300ms ease-in-out;
}
.galeria-item:hover img,
.galeria-item:focus-visible img{ transform:scale(var(--zoom-tarjeta, 1.06)); }

/* ---------------------------------------------------------------------------
   4) VISOR DE IMÁGENES
   La imagen no ocupa toda la pantalla; el fondo es negro con desenfoque.
   --------------------------------------------------------------------------- */
.visor{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.visor[hidden]{ display:none; }

.visor-img{
  max-width:76vw;
  max-height:80vh;
  object-fit:contain;
  display:block;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
}

.visor-btn{
  position:absolute;
  background:rgba(255,255,255,.12);
  border:0; color:#fff; cursor:pointer;
  width:clamp(44px,4vw,62px); height:clamp(44px,4vw,62px);
  font-size:clamp(26px,2.4vw,38px); line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background 160ms ease;
}
.visor-btn:hover{ background:var(--naranja,#F96611); }
.visor-prev{ left:clamp(10px,3vw,48px); }
.visor-next{ right:clamp(10px,3vw,48px); }
.visor-cerrar{ top:clamp(10px,3vh,32px); right:clamp(10px,3vw,48px); font-size:clamp(22px,2vw,30px); }

.visor-contador{
  position:absolute; bottom:clamp(14px,3vh,34px); left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.85);
  font-family:'Segoe UI', system-ui, sans-serif;
  font-size:clamp(13px,1vw,16px); letter-spacing:.08em;
}

/* ---------------------------------------------------------------------------
   5) RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width:1100px){
  .galeria{ grid-template-columns:repeat(2, 1fr); }
}
@media (orientation:portrait){
  .proyecto-cabecera{
    grid-template-columns:1fr;
    grid-template-rows:2fr 1fr;    /* imagen 2/3 arriba, texto 1/3 abajo */
  }
  .galeria{ grid-template-columns:1fr; }
  .galeria-item{ aspect-ratio:3 / 2; }
  .visor-img{ max-width:88vw; max-height:70vh; }
}
@media (prefers-reduced-motion:reduce){
  .galeria-item img{ transition:none; }
}

/* ---------------------------------------------------------------------------
   PLANTA DEL PROYECTO
   Reemplaza al texto de descripcion cuando la ficha del proyecto no lo trae.
   Ocupa TODO el ancho del bloque de textos de arriba (mismo ancho que el
   titulo y los datos). En 1920x1080 ese ancho util son 543px.
   El max-height es solo un tope de seguridad para plantas verticales, para
   que ninguna estire la seccion mas alla de la ventana.
   --------------------------------------------------------------------------- */
.proyecto-planta{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:min(37vh, 400px);
  object-fit:contain;
  margin:clamp(10px,1.4vh,20px) auto 0;   /* centrada dentro del panel */
}
/* En vertical el panel es la franja de abajo y hay poco alto disponible */
@media (orientation:portrait){
  .proyecto-planta{ max-width:100%; max-height:22vh; }
}