/* =============================================
   GALERÍA DE AMBIENTE
   ============================================= */
#galeria {
  padding: var(--gap-xl) 0;
  background: var(--arena);
  overflow: hidden;
}
.galeria-header {
  display: flex; align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--gap-lg); gap: var(--gap-md); flex-wrap: wrap;
}

/* Grid mosaico desktop */
.galeria-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 200px 200px 200px;
  gap: 0.75rem;
  overflow: hidden;
}

/* Mostrar todos cuando está expandido */
  .galeria-grid.expanded .g-item { display: block !important; }

.g-item {
  border-radius: var(--radius-sm);
  overflow: hidden; position: relative;
  background: var(--azul-mar); cursor: pointer;
  min-width: 0;
}
.g-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; display:block; }
.g-item:hover img { transform: scale(1.08); }

/* Posicionamiento desktop — solo los primeros 8 */
.g-item:nth-child(1)  { grid-column:1/6;   grid-row:1/3; }
.g-item:nth-child(2)  { grid-column:6/9;   grid-row:1/2; }
.g-item:nth-child(3)  { grid-column:9/13;  grid-row:1/2; }
.g-item:nth-child(4)  { grid-column:6/10;  grid-row:2/3; }
.g-item:nth-child(5)  { grid-column:10/13; grid-row:2/3; }
.g-item:nth-child(6)  { grid-column:1/5;   grid-row:3/4; }
.g-item:nth-child(7)  { grid-column:5/9;   grid-row:3/4; }
.g-item:nth-child(8)  { grid-column:9/13;  grid-row:3/4; }
/* Los ítems 9+ se ocultan en desktop en el mosaico fijo */
.g-item:nth-child(n+9) { display: none; }

/* Botón ver más galería */
.galeria-ver-mas-wrap {
  display: flex; justify-content: center;
  margin-top: var(--gap-md);
}
.galeria-ver-mas {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.8rem 2.2rem;
  border-radius: 999px;
  border: 2px solid var(--azul-mar);
  background: transparent;
  color: var(--azul-mar);
  font-family: var(--font-body);
  font-size: 0.85rem; font-weight: 700;
  cursor: pointer; transition: var(--transition);
}
.galeria-ver-mas:hover {
  background: var(--azul-mar); color: var(--blanco);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(10,92,138,0.25);
}
.galeria-ver-mas i { transition: transform 0.3s ease; }
.galeria-ver-mas.expanded i { transform: rotate(180deg); }

/* Overlay */
.g-overlay {
  position: absolute; inset: 0;
  background: rgba(6,58,90,0.65);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.4rem;
  opacity: 0; transition: opacity var(--transition);
  color: var(--blanco);
}
.g-item:hover .g-overlay { opacity: 1; }
.g-overlay i { font-size: 1.6rem; color: var(--turquesa-light); }
.g-overlay p { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; }

/* Placeholder sin foto */
.g-placeholder {
  width:100%; height:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:0.6rem;
  background: linear-gradient(135deg, var(--azul-profundo) 0%, var(--azul-mar) 100%);
  color: rgba(255,255,255,0.2); font-size: 1.8rem;
  transition: transform 0.5s ease;
}
.g-item:hover .g-placeholder { transform: scale(1.06); }
.g-placeholder span {
  font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--turquesa-light); opacity: 0.6;
  text-align: center; padding: 0 0.5rem;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .galeria-grid {
    grid-template-columns: repeat(8,1fr);
    grid-template-rows: 180px 180px 180px;
  }
  .g-item:nth-child(1){grid-column:1/5;grid-row:1/3;}
  .g-item:nth-child(2){grid-column:5/7;grid-row:1/2;}
  .g-item:nth-child(3){grid-column:7/9;grid-row:1/2;}
  .g-item:nth-child(4){grid-column:5/9;grid-row:2/3;}
  .g-item:nth-child(5){grid-column:1/3;grid-row:3/4;}
  .g-item:nth-child(6){grid-column:3/6;grid-row:3/4;}
  .g-item:nth-child(7){grid-column:6/9;grid-row:3/4;}
  .g-item:nth-child(8){display:none;}
  .g-item:nth-child(n+9){display:none;}
}

@media (max-width: 900px) {
  #galeria { overflow: hidden; }
  .galeria-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: unset;
    grid-auto-rows: 160px;
  }
  .g-item { grid-column: auto !important; grid-row: auto !important; }
  .g-item:nth-child(-n+8) { display: block; }
  .g-item:nth-child(n+9)  { display: none; }
}

@media (max-width: 480px) {
  .galeria-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 200px;
  }
  .galeria-header { flex-direction: column; align-items: flex-start; }
}