/* 🔥 CONTENEDOR PRINCIPAL */
.container-main{
  max-width:1500px;
  margin:auto;
  padding:25px;
}

/* 🔥 TITULO */
.titulo{
  font-size:26px;
  font-weight:700;
  margin-bottom:25px;
  letter-spacing:-0.3px;
}

/* 🔥 GRID PRO */
.grid-proyectos{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

/* 🔥 CARD */
.card-proyecto{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.06);
  transition:.3s;
  position:relative;
}

.card-proyecto:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 50px rgba(0,0,0,0.12);
}

/* 🔥 IMAGEN */
.card-proyecto .img{
  position:relative;
}

.card-proyecto img{
  width:100%;
  height:190px;
  object-fit:cover;
}

/* 🔥 BADGE */
.badge{
  position:absolute;
  top:12px;
  left:12px;
  background:#16a34a;
  color:#fff;
  font-size:12px;
  font-weight:600;
  padding:5px 10px;
  border-radius:6px;
  box-shadow:0 4px 10px rgba(0,0,0,0.2);
}

/* 🔥 INFO */
.card-proyecto .info{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* TITULO */
.card-proyecto h3{
  font-size:16px;
  font-weight:600;
  line-height:1.3;
}

/* UBICACION */
.ubicacion{
  font-size:13px;
  color:#64748b;
}

/* 🔥 AREA TOTAL */
.area{
  font-size:14px;
  font-weight:600;
  color:#111;
  margin-top:4px;
}

/* 🔥 LINEA SEPARADORA */
.divider{
  height:1px;
  background:#f1f5f9;
  margin:10px 0;
}

/* 🔥 BOTON */
.btn-ver{
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  background:#111;
  color:#fff;

  padding:10px;
  border-radius:10px;
  font-size:14px;
  font-weight:500;

  text-decoration:none;
  transition:.25s;
}

/* hover elegante */
.btn-ver:hover{
  background:#16a34a;
  transform:translateY(-2px);
}

/* 🔥 ICONO FLECHA */
.btn-ver::after{
  content:"→";
  font-size:14px;
  transition:.2s;
}

.btn-ver:hover::after{
  transform:translateX(4px);
}

/* 🔥 RESPONSIVE */
@media(max-width:1200px){
  .grid-proyectos{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:800px){
  .grid-proyectos{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:500px){
  .grid-proyectos{
    grid-template-columns:1fr;
  }
}