/* =======================================================
   TAM GLOBAL PORTFOLIO - VERSIÓN FINAL 2026
======================================================== */

/* --- 1. CONTENEDOR MAESTRO (ELIMINA HUECOS) --- */
.tam-portfolio-wrap {
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  /* Cierra el espacio con el título */
  padding: 0 10px !important;
  box-sizing: border-box !important;
}

/* --- 2. PESTAÑAS MODERNAS (FILTROS) --- */
.tam-filters {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 25px !important;
  /* Espacio reducido para que la grilla suba */
  flex-wrap: wrap;
}

.tam-filter-btn {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  padding: 10px 24px !important;
  border-radius: 100px !important;
  /* Estilo píldora moderna */
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;
}

/* Estado Activo: Azul Corporativo TAM #1e5baa */
.tam-filter-btn.is-active,
.tam-filter-btn:hover {
  background: #1e5baa !important;
  color: #ffffff !important;
  border-color: #1e5baa !important;
  box-shadow: 0 8px 20px rgba(30, 91, 170, 0.25) !important;
  transform: translateY(-2px);
}

/* --- 3. GRILLA MASONRY Y REDONDEADO DE 16PX --- */
.tam-grid {
  width: 100% !important;
  clear: both;
}

.tam-grid-item {
  width: 33.333% !important;
  /* 3 columnas en desktop */
  padding: 10px !important;
  /* Gutter uniforme */
  float: left;
  box-sizing: border-box !important;
}

.tam-grid-item img {
  border-radius: 16px !important;
  /* Identidad TAM 2026 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
  display: block;
  width: 100% !important;
  height: auto !important;
  transition: transform 0.4s ease !important;
}

.tam-grid-item:hover img {
  transform: scale(1.03);
}

/* ELIMINAR LUPAS Y OVERLAYS ANTERIORES */
.tam-overlay,
.tam-zoom-icon {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* --- 4. LIGHTBOX PREMIUM (GLIGHTBOX) --- */
.gslide-image img {
  border-radius: 16px !important;
  /* Round en la foto grande */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;
}

.glightbox-container .gclose {
  width: 44px !important;
  height: 44px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 50% !important;
  top: 15px !important;
  right: 15px !important;
}

/* --- 5. OPTIMIZACIÓN MÓVIL (MUESTRA FOTOS MÁS GRANDES) --- */
@media (max-width: 768px) {

  /* Grilla: 2 columnas en celular */
  .tam-grid-item {
    width: 50% !important;
    padding: 6px !important;
  }

  /* LIGHTBOX MÓVIL: Menos márgenes negros, más foto */
  .glightbox-container .gslide-content {
    padding-left: 5px !important;
    /* Foto más ancha */
    padding-right: 5px !important;
    /* Foto más ancha */
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .gslide-image img {
    max-width: 95vw !important;
    /* Casi todo el ancho del móvil */
    max-height: 88vh !important;
    /* Casi todo el alto del móvil */
    border-radius: 12px !important;
    /* Ajuste leve para ganar espacio */
  }
}

/* Ajuste horizontal (tanques de Lerma en modo landscape) */
@media (max-width: 768px) and (orientation: landscape) {
  .gslide-image img {
    max-height: 75vh !important;
  }
}