/* ============================================================
   DESARROLLO-WEB.CSS
   ============================================================ */

.proj-card{
   background:var(--panel); 
   border:1px solid var(--panel-border); 
   border-radius:14px; 
   overflow:hidden;
   display: flex;
   flex-direction: column;
}


.proj-thumb{
   width: 100%;
   height:200px;
   overflow:hidden;           /* nuevo: recorta lo que sobra de la imagen */
   background:linear-gradient(135deg, rgba(79,184,201,.25), rgba(127,224,168,.15));
   display:flex;
   align-items:center;
   justify-content:center;
   color:var(--ink-dim);
   font-size:.75rem;
 }
 
 /* nuevo: la imagen llena el recuadro sin deformarse */
 .proj-thumb img{
   width:100%;
   height:100%;
   object-fit:cover;
   object-position:center;
   display:block;
 }

.proj-card .body{
   /* padding:16px; */
   padding: 1.25rem;
}

.proj-card h4{
   margin: 0 0 0.5rem 0;
   font-size:.95rem; 
   /* margin-bottom:6px; */
}

.proj-card p{
   margin: 0;
   font-size:.8rem; 
   color:var(--ink-dim);
   line-height: 1.4;
}

.proj-card a {
   text-decoration: none;
   color: inherit;
   display: flex;
   flex-direction: column;
   height: 100%;
 }

/* ============================================================
   RESPONSIVE — desarrollo-web.css
   ============================================================ */
@media (max-width:760px){
  .proj-thumb{height:120px;}
}