/* ============================================================================
   PÁGINAS DE PROYECTOS (Públicos · Privados · Concursos y Licitaciones)
   Reutiliza: menu.css · .banda-intro (tarjetas.css) · footer.css
   Todas las secciones tienen fondo blanco.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1) HERO: imagen de fondo + capa oscura 20% + título encima.
      La imagen cambia a una versión VERTICAL cuando el ancho es menor que el
      alto (lo hace el <picture> del HTML con media="(orientation: portrait)").
   --------------------------------------------------------------------------- */
.pagina-hero{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#fff;
  /* misma drop shadow que el resto de secciones, al cierre del hero */
}
.pagina-hero picture,
.pagina-hero img{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
.pagina-hero img{ object-fit:cover; }   /* se ajusta a la ventana sin deformarse */

/* Capa oscura al 20% */
.pagina-hero::after{
  content:'';
  position:absolute; inset:0;
  background:rgba(0,0,0,.20);
  z-index:1;
}

.pagina-hero-texto{ position:relative; z-index:2; padding:0 20px; }
.pagina-hero-titulo{
  margin:0;
  font-family:'Segoe UI', system-ui, sans-serif;
  font-weight:600;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:clamp(28px, 4.1667vw, 80px);   /* 80px en 1920 (80/1920 = 4.1667vw) */
  line-height:1.15;
  text-shadow:0 2px 16px rgba(0,0,0,.55);   /* legible sobre la capa del 20% */
}

/* ---------------------------------------------------------------------------
   2) SECCIÓN DE FILTROS
      Referencia 1920x1080 -> 1920 x 290  (290/1080 = 26.85vh), igual que las
      bandas de título. Mismo drop shadow que el resto de secciones.
   --------------------------------------------------------------------------- */
.filtros{
  width:100%;
  height:26.85vh;
  min-height:150px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(12px, 2.2vw, 40px);
  padding:0 20px;
  flex-wrap:wrap;
  /* misma sombra que las demás secciones */
  position:relative;
}

.filtro-btn{
  /* rectangular: sin corner radius */
  border-radius:0;
  background:#fff;                              /* blanco, en todos los estados */
  border:0;
  border-bottom:1px solid rgba(64,64,64,.15);   /* unico borde: el inferior, siempre */
  color:#404040;
  font-family:'Segoe UI', system-ui, sans-serif;
  text-transform:uppercase;
  font-weight:600;
  font-size:clamp(14px, 1.4vw, 20px);
  line-height:1.2;
  padding:clamp(10px,1.6vh,16px) clamp(16px,2.4vw,38px);
  cursor:pointer;
  box-shadow:none;
  transition:box-shadow 160ms ease;   /* lo unico que cambia es la sombra */
}

/* Al pasar el mouse: drop shadow Y4 · blur 7 · negro 50% */
.filtro-btn:hover{
  box-shadow:0 4px 7px rgba(0,0,0,.50);
}

/* Presionado (se queda activo): inner shadow blur 4 · negro 25% */
.filtro-btn.activo{
  box-shadow:inset 0 0 4px rgba(0,0,0,.25);
}
.filtro-btn.activo:hover{
  box-shadow:inset 0 0 4px rgba(0,0,0,.25);
}

/* ---------------------------------------------------------------------------
   DESCRIPCIÓN DE LA CATEGORÍA (va encima de las tarjetas)
   --------------------------------------------------------------------------- */
.proyectos-desc{
  background:#fff;
  padding:clamp(50px,9vh,110px) 20px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.proyectos-desc p{
  margin:0;
  max-width:1500px;
  text-align:center;
  color:#404040;
  font-family:'Segoe UI', system-ui, sans-serif;
  font-weight:400;
  font-size:clamp(17px, 1.75vw, 32px);
  line-height:1.4;
}

/* ---------------------------------------------------------------------------
   3) LISTADO DE PROYECTOS
   --------------------------------------------------------------------------- */
.proyectos-lista{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  padding:40px 10px 10px;   /* 40px de separacion con la seccion de arriba */
  background:#fff;
  /* drop shadow que separa esta seccion del footer */
  position:relative;
}

.proyecto-item{
  position:relative;
  display:block;
  overflow:hidden;                 /* recorta el zoom de la imagen */
  text-decoration:none;
  color:inherit;
  background:#14100C;
  aspect-ratio:4 / 3;
  scroll-margin-top:20px;
}
.proyecto-item[hidden]{ display:none; }

.proyecto-item img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1);
  transition:transform 1300ms ease-in-out;
}
.proyecto-item:hover img,
.proyecto-item:focus-visible img{ transform:scale(var(--zoom-tarjeta, 1.06)); }

.proyecto-item-capa{
  position:absolute; inset:0;
  background:#000; opacity:.25;
  transition:opacity 1300ms ease-in-out;
  z-index:2;
}
.proyecto-item:hover .proyecto-item-capa,
.proyecto-item:focus-visible .proyecto-item-capa{ opacity:.65; }

/* Texto: oculto en reposo, aparece centrado al pasar el mouse */
.proyecto-item-info{
  position:absolute; inset:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(14px,2vw,34px);
  color:#fff;
  font-family:'Segoe UI', system-ui, sans-serif;
  opacity:0;                                   /* sin hover: no se ve ningun texto */
  transition:opacity 1300ms ease-in-out;
  pointer-events:none;
}
.proyecto-item:hover .proyecto-item-info,
.proyecto-item:focus-visible .proyecto-item-info{ opacity:1; }

/* Titulo: 45px en una pantalla de 1920 (45/1920 = 2.34375vw) */
.proyecto-item-titulo{
  margin:0;
  font-size:clamp(18px, 2.34375vw, 45px);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.15;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}

/* Subtitulo (tipo de proyecto): 20px en 1920 (20/1920 = 1.0417vw) */
.proyecto-item-sub{
  margin:clamp(8px,1vw,16px) 0 0;
  font-size:clamp(11px, 1.0417vw, 20px);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:rgba(255,255,255,.95);
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}

/* Mensaje cuando un filtro no tiene proyectos */
.sin-proyectos{
  grid-column:1 / -1;
  padding:60px 20px; text-align:center;
  font-family:'Segoe UI', system-ui, sans-serif;
  font-size:clamp(15px,1.3vw,18px); color:#868686;
}
.sin-proyectos[hidden]{ display:none; }

/* ---------------------------------------------------------------------------
   4) RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width:1100px){
  .proyectos-lista{ grid-template-columns:repeat(2, 1fr); }
}
@media (orientation:portrait){
  .proyectos-lista{ grid-template-columns:1fr; }
  .proyecto-item{ aspect-ratio:3 / 2; }
  .filtros{ height:auto; min-height:26.85vh; padding:clamp(20px,4vh,40px) 20px; }
}
/* ---------------------------------------------------------------------------
   PANTALLAS TACTILES
   Sin mouse no existe el hover: al tocar la tarjeta se abre el proyecto, asi
   que el titulo no alcanzaria a verse nunca. En esos dispositivos el texto va
   siempre visible, abajo a la izquierda, y la capa oscura queda en un punto
   intermedio entre el reposo (.25) y el hover de escritorio (.65).
   Se detecta por (hover:none), o sea por la falta de mouse: no depende del
   ancho de pantalla ni de la orientacion, que es lo correcto aqui.
   --------------------------------------------------------------------------- */
@media (hover: none){
  .proyecto-item-info,
  .proyecto-item:hover .proyecto-item-info{
    opacity:1;
    justify-content:flex-end;   /* pegado abajo */
    align-items:flex-start;     /* pegado a la izquierda */
    text-align:left;
  }
  .proyecto-item-capa,
  .proyecto-item:hover .proyecto-item-capa{ opacity:.42; }
  /* el zoom tampoco aporta: al tocar se navega de inmediato */
  .proyecto-item:hover img,
  .proyecto-item:focus-visible img{ transform:none; }
}

@media (prefers-reduced-motion:reduce){
  .proyecto-item img, .proyecto-item-capa, .filtro-btn{ transition:none; }
}