/* ----------- index-proyectos.css ---------------- */
.proyectos-section{
  padding:80px 30px;
  text-align:center;
  background:#ebebeb;
}
.section-title{ font-size:34px; margin-bottom:20px; color:#333; }

/* contenedor flex */
.proyectos{
  display:flex;
  gap:1%;
  flex-wrap:nowrap;
}

/* tarjeta */
.proyectos-item{
  position:relative;
  flex:0 0 24%;
  height:400px;
  cursor:pointer;
  transition:flex 1s ease;
}

/* al hacer hover la tarjeta se expande al 48 % */
.proyectos-item:hover{ flex:0 0 48%; }

/* imagen (80 % de la altura) */
.proyectos-item .image-box{
  height:80%;
  overflow:hidden;
}
.proyectos-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease, filter .5s ease;
  background:#fff;
}

/* título */
.proyectos-item p{
  margin-top:10px; font-size:16px; font-weight:bold; color:#333;
  text-align:left;
}

/* overlay degradado dorado */
.overlay{
  position:absolute; inset:0;
  background:linear-gradient(to bottom,transparent,rgba(255,192,0,.5));
  opacity:0; transition:opacity .8s ease;
}
.proyectos-item .image-box:hover .overlay{ opacity:1; }

/* círculo “MÁS INFO” */
.info-overlay{
  position:fixed;
  width:80px; height:80px; border-radius:50%;
  background:rgba(255,255,255,.25); border:1px solid #c4c4c4;
  backdrop-filter:blur(10px); box-shadow:0 0 2px rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center;
  font:bold 11px/1 'Arial',sans-serif; color:#fff; text-shadow:1px 1px 2px #000;
  pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.1);
  transition:opacity .4s ease, transform .4s ease;
  z-index:30;
}