body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

header{
  background: url(images/stars.jpg);
  background-size: cover;
  background-position: center;
  min-height: 880px; 
  /* background: rgba(255, 255, 255, 0.1); */
}
#tit_ini{
margin: 12% 0% 0% 0%;
}

@media screen and (max-width: 670px){
  header{
    min-height: 500px;
  }
}

nav{
  z-index: 999 !important;    
  position: fixed;
  background: transparent;
  background: rgba(0, 0, 0, 0.1);
  padding: 0px 20px;
}
.section{
  padding-top: 4vw;
  padding-bottom: 4vw;
}
.tabs .indicator{
  background-color: #1a237e;
}
.tabs .tab a:focus, .tabs .tab a:focus.active{
  background: transparent;
}
.materialboxed{
  position: inherit !important;
}
.parallax-container{
  height: 200px;
}


/* Contenedor principal */
#instafeed-container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Columnas automáticas */
    gap: 15px; /* Espacio entre fotos */
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Ajuste de los enlaces y fotos */
#instafeed-container a {
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1; /* Forza que sean cuadrados perfectos */
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

#instafeed-container a:hover {
    transform: scale(1.03); /* Efecto de zoom al pasar el mouse */
}

/* La imagen ocupa todo el cuadro sin deformarse */
#instafeed-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta el centro de la foto si no es cuadrada */
    display: block;
}

/* Ajuste para celulares */
@media (max-width: 600px) {
    #instafeed-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en móvil */
        gap: 8px;
        padding: 10px;
    }
}

/* Necesario para posicionar el icono dentro del enlace */
.insta-item {
    position: relative;
    display: block;
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.5); /* Fondo oscuro semitransparente */
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    pointer-events: none; /* Para que no interfiera con el clic en el link */
    border: 2px solid white;
}

/* Efecto hover: el icono brilla más al pasar el mouse */
.insta-item:hover .play-icon {
    background: rgba(0, 0, 0, 0.8);
    transform: translate(-50%, -50%) scale(1.1);
}

.noshadow {
  box-shadow: none !important;
}