/* src/style.css */

body {
  font-family: 'Inter', sans-serif;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  /* Añade una altura fija para todos los elementos de la galería */
  height: 700px; /* Ajusta esta altura según lo que necesites */
}

.gallery-item img {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease, filter 0.5s ease;
  filter: blur(8px);
  /* Asegura que la imagen cubra el contenedor, recortando si es necesario */
  object-fit: cover;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

.gallery-item.in-view img {
  filter: blur(0);
}

.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery-overlay i {
  font-size: 2rem;
  color: white;
}

/* Regla #principal modificada - Eliminadas propiedades de Flexbox para el botón */
#principal {
  position: relative;
  width: 100%;
  /* Cambiar min-height por height y usar calc() */
  height: calc(100vh - 3.4rem); /* Ajusta '4rem' si la altura de tu header es diferente */
  overflow: hidden;
  display: flex; /* Mantenemos Flexbox para alinear el botón */
  justify-content: center; /* Centra horizontalmente */
  align-items: flex-end; /* Alinea los elementos al final (abajo) */
  padding-bottom: 30px; /* Mantenemos el padding en la parte inferior */
}

#video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Esto hace que el video cubra toda la altura y ancho del #principal */
  object-fit: cover;
  z-index: -1; /* Asegura que el video esté detrás */
}

#scroll-down {
  /* No necesita posicionamiento absoluto/fijo aquí */
  z-index: 10; /* Asegura que esté por encima del video */
}

#scroll-down button {
  /* ... estilos del botón ... */
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  transition: background 0.3s;
  cursor: pointer;
}

#scroll-down button:hover {
  background: rgba(255, 255, 255, 0.2);
}


/* Media query para aplicar estilos solo en pantallas pequeñas (hasta el tamaño 'md' de Tailwind, que es 767px) */
@media (max-width: 767px) {
  #principal #video { /* Selector más específico */
    object-fit: contain; /* Usamos !important para forzar la aplicación (solo para probar) */
  }
}