/* ==========================
   Estilos generales
========================== */
body {
  background-color: antiquewhite;
  margin: 0;
  font-family: Arial, sans-serif;
}

/* ==========================
   Overlay del porfolio
========================== */
.overlay-custom {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  background: rgba(0, 0, 0, 0.5);
  border-radius: .5rem;
}
.card:hover .overlay-custom {
  opacity: 1;
}

/* ==========================
   Fondos del porfolio
========================== */

.porfolio {
    min-height: 100vh; /* Asegura que la sección ocupe al menos toda la altura de la ventana */
}
/* Fondo con VIDEO */
#porfolio {
  position: relative; /* Encierra el video en esta sección */
  overflow: hidden;   /* Evita que el video sobresalga */
  color: rgb(24, 17, 17);
  padding: 2rem 0; /* Espacio alrededor del contenido */
}

#porfolio .bg-video {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
#porfolio .container {
  position: relative;
  z-index: 1; /* Asegura que el contenido quede arriba del video */
}

/* Fondo color sólido */
/* 
#porfolio {
  background: #f4f4f4;
}
*/

/* Fondo con imagen */
/* 
#porfolio {
  background: url('../img/fondo.jpg') no-repeat center center/cover;
}
*/

/* Fondo transparente (default) */
/* 
#porfolio {
  background: transparent;
}
*/

/* ==========================
   Ajuste de imágenes
========================== */
#porfolio .card {
  border: none;
  overflow: hidden;
  border-radius: .5rem;
}
#porfolio .card img {
  width: 100%;
  height: 250px; /* Todas las imágenes tendrán la misma altura */
  object-fit: cover; /* Recorta sin deformar */
  object-position: center; /* Centra la parte visible */
  border-radius: .5rem;
}