/* ==========================================================================
   MENÚ DE CATEGORÍAS (GALERÍA)
   Botones tipo píldora para filtrar las imágenes de la galería
   ========================================================================== */
.categorias-menu {
  display: flex;             /* Flexbox para colocar los botones en una sola fila elástica */
  justify-content: center;   /* Centrado horizontal exacto del menú en la pantalla */
  flex-wrap: wrap;           /* Permite el salto de línea automático si no caben en móviles */
  gap: 12px;                 /* Espacio de separación idéntico entre cada botón de filtro */
  margin: 25px 0 35px;       /* Separación de 25px hacia arriba y 35px hacia abajo con el grid */
}

/* --- Botones individuales de categoría (Links) --- */
.categorias-menu a {
  padding: 10px 20px;        /* Espaciado interno cómodo para la interacción táctil o clic */
  border-radius: 20px;       /* Bordes totalmente redondeados tipo píldora/cápsula */
  background: #e3e6e6;       /* Fondo gris claro neutral estilo Amazon para elementos secundarios */
  color: var(--texto-oscuro);/* Aplica el tono gris casi negro para máxima legibilidad */
  text-decoration: none;     /* Remueve el subrayado clásico de las etiquetas de enlace */
  font-weight: 600;          /* Grosor de fuente en formato seminegrita */
  font-size: 15px;           /* Tamaño de letra equilibrado y estandarizado */
  transition: all 0.25s ease;/* Animación fluida para las transiciones de color */
}

/* --- Efecto al pasar el cursor por encima de una categoría --- */
.categorias-menu a:hover {
  background: #d5d9d9;       /* Oscurece sutilmente el fondo gris para dar feedback de selección */
  color: var(--texto-oscuro);/* Mantiene el texto oscuro legible */
}

/* --- Categoría actualmente activa/seleccionada (Aplicada por JS) --- */
.categorias-menu a.activo {
  background: var(--azul-oscuro); /* Cambiado al azul navy corporativo de tu cabecera */
  color: var(--blanco);           /* Letras en color blanco para un contraste nítido y accesible */
}

/* ==========================================================================
   GRID DE GALERÍA
   Contenedor principal auto-responsivo que organiza las tarjetas de fotos
   ========================================================================== */
.galeria-grid {
  display: grid;             /* Activa el modelo Grid Layout para estructurar las celdas */
  /* Genera columnas dinámicas automáticas según el espacio libre; cada una medirá mínimo 260px */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
  gap: 25px;                 /* Distancia física de separación de 25px entre las tarjetas de la cuadrícula */
  padding: 30px;             /* Colchón de espacio interno perimetral para el contenedor */
  max-width: 1300px;         /* Limita el ancho máximo en pantallas grandes para no estirar las fotos */
  margin: auto;              /* Centra el bloque elástico horizontalmente en el monitor */
}

/* ==========================================================================
   TARJETA DE IMAGEN (ITEM)
   Contenedor individual para cada foto de la galería
   ========================================================================== */
.item {
  background: var(--blanco);         /* Aplica el color blanco puro de tus variables globales */
  border-radius: 12px;               /* Esquinas suavizadas y modernas para la tarjeta */
  padding: 15px;                     /* Espaciado interno para aislar la foto y el texto de los bordes */
  border: 1px solid #ddd;            /* Añade un marco fino gris claro coincidiendo con tus secciones de Home */
  box-shadow: 0 4px 10px rgba(0,0,0,0.03); /* Sombra base sumamente sutil en la parte inferior */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición fluida para microanimaciones */
  cursor: pointer;                   /* Muestra el puntero de mano indicando que la imagen se puede ampliar */
}

/* --- Animación de elevación al pasar el mouse por encima del item --- */
.item:hover {
  transform: translateY(-5px);       /* Eleva físicamente la tarjeta 5px hacia arriba */
  box-shadow: 0 10px 20px rgba(0,0,0,0.08); /* Intensifica la sombra simulando flotabilidad */
}

/* --- Imagen dentro de la tarjeta --- */
.item img {
  width: 100%;               /* Fuerza a la imagen a consumir todo el ancho disponible del item */
  height: 200px;             /* Añadida altura fija uniforme para evitar que fotos desproporcionadas rompan el grid */
  object-fit: cover;         /* Recorta y adapta la imagen para rellenar el recuadro perfectamente sin deformarse */
  border-radius: 10px;       /* Redondeado armónico en las esquinas de la fotografía */
  margin-bottom: 10px;       /* Distancia de separación inferior con respecto al texto descriptivo */
  background: #f9f9f9;       /* Fondo gris neutro de carga por si la imagen tarda en renderizar */
}

/* --- Texto descriptivo debajo de la foto --- */
.item p {
  margin: 8px 0 0;           /* Resetea márgenes y deja 8px de espacio superior con la foto */
  font-size: 15px;           /* Escala de fuente limpia para la lectura */
  color: var(--texto-oscuro);/* Modificado al color de lectura principal (gris casi negro) */
  text-align: center;        /* Centra el texto de la descripción */
  font-weight: 500;          /* Grosor medio para darle un acabado más estilizado */
}

/* ==========================================================================
   MODAL (VENTANA EMERGENTE DE AMPLIACIÓN)
   Pantalla superpuesta negra que resalta la imagen seleccionada
   ========================================================================== */
.modal {
  display: none;             /* Oculto por defecto mediante CSS, se activa vía JavaScript */
  position: fixed;           /* Fijo permanentemente en pantalla cubriendo el scroll del fondo */
  inset: 0;                  /* Ocupa el 100% de la pantalla (top, right, bottom, left en 0) */
  background: rgba(15, 17, 17, 0.85); /* Modificado al fondo oscuro translúcido usando tu color --texto-oscuro */
  justify-content: center;   /* Centrado horizontal exacto del recuadro blanco */
  align-items: center;       /* Centrado vertical exacto del recuadro blanco */
  z-index: 2000;             /* Sube a 2000 para que se superponga incluso por encima del Header sticky (1000) */
}

/* --- Contenido de la Tarjeta Interna del Modal --- */
.modal-content {
  background: var(--blanco);         /* Fondo blanco puro para la caja del modal */
  padding: 25px;                     /* Espaciado interno generoso para que respire el contenido */
  width: 90%;                        /* Ancho adaptable elástico para pantallas táctiles */
  max-width: 520px;                  /* Anchura límite para que mantenga proporciones elegantes en PC */
  border-radius: 15px;               /* Mayor redondeado consistente con las tarjetas de formularios */
  text-align: center;                /* Centra los textos e imágenes interiores */
  position: relative;                /* Necesario para posicionar de forma absoluta el botón "cerrar" */
  box-shadow: 0 20px 50px rgba(0,0,0,0.3); /* Sombra profunda para despegar notablemente el modal */
}

/* --- Botón Cerrar (X) del Modal --- */
#cerrar {
  position: absolute;        /* Posición absoluta e independiente dentro del recuadro */
  top: 12px;                 /* Ajusta la distancia con el borde superior */
  right: 18px;               /* Ajusta la distancia con el borde derecho */
  cursor: pointer;           /* Puntero interactivo de mano */
  font-size: 28px;           /* Tamaño aumentado del icono de aspa o cruz */
  color: #64748b;            /* Color gris suave pizarra para no invadir visualmente */
  transition: color 0.2s;    /* Transición suave para el cambio de color */
}
#cerrar:hover {
  color: var(--texto-oscuro);/* Se oscurece al pasar el ratón para indicar que se puede clicar */
}

/* --- Imagen ampliada dentro del Modal --- */
#modal-img {
  width: 100%;               /* Se expande hasta abarcar el ancho total de la tarjeta blanca */
  max-height: 70vh;          /* Evita que la foto sea más alta que el propio monitor del usuario */
  object-fit: contain;       /* Garantiza que la imagen se vea completa sin recortar ningún borde */
  border-radius: 10px;       /* Suaviza las esquinas de la fotografía ampliada */
  margin-bottom: 12px;       /* Distancia de separación inferior con el texto explicativo */
}

/* --- Texto explicativo inferior del Modal --- */
#modal-text {
  color: var(--texto-oscuro);/* Pinta las letras con el color estandarizado de lectura */
  font-size: 16px;           /* Aumenta un punto la fuente para leer cómodamente en la ampliación */
  font-weight: 600;          /* Aplica grosor seminegrita para destacar el título de la foto */
}

/* ==========================================================================
   RESPONSIVE DESIGN (ADAPTACIÓN AUTOMÁTICA A DISPOSITIVOS MÓVILES)
   ========================================================================== */
@media (max-width: 600px) {
  /* --- Ajuste de espaciados en las tarjetas del grid --- */
  .item {
    padding: 12px;           /* Reduce el acolchado interno para otorgarle más espacio a la foto */
  }
  
  /* --- Ajuste de los botones del menú de filtros --- */
  .categorias-menu a {
    padding: 8px 16px;       /* Compacta el tamaño horizontal y vertical de las píldoras */
    font-size: 14px;         /* Disminuye un punto el texto para evitar desbordes excesivos */
  }
}