/* █▀▀ ▄▀█ █░░ █▀▀ █▀█ █ ▄▀█ ░ █▀▀ █▀ █▀ */
/* █▄█ █▀█ █▄▄ ██▄ █▀▄ █ █▀█ ▄ █▄▄ ▄█ ▄█ */

/* General para la galería */
.gallery-section .gallery-heading {
  font-family: 'Cinzel', serif; /* Fuente personalizada */
  font-size: 3rem; /* Tamaño del encabezado */
  font-weight: 400; /* Peso medio */
  color: #ffffff; /* Texto blanco */
  text-align: center; /* Texto centrado */
  margin: 40px 0 10px; /* Espaciado superior e inferior */
}

.gallery-section * {
  box-sizing: border-box; /* Ajuste de tamaño estándar */
  margin: 0;
  padding: 0;
}

.gallery-section .heading {
  text-align: center; /* Centra el texto */
  font-size: 2rem; /* Tamaño ajustado */
  letter-spacing: 1px; /* Espaciado entre letras */
  padding: 40px;
  color: white; /* Texto blanco */
}

.gallery-section .gallery-image {
  padding: 20px;
  display: flex; /* Contenedor flexible */
  flex-wrap: wrap; /* Ajuste en filas */
  justify-content: center; /* Centrado horizontal */
}

.gallery-section .gallery-image img {
  height: 250px; /* Altura fija */
  width: 350px; /* Ancho fijo */
  transform: scale(1.0); /* Tamaño inicial */
  transition: transform 0.4s ease; /* Transición suave al hacer hover */
}

.gallery-section .img-box {
  box-sizing: content-box;
  margin: 10px; /* Separación entre imágenes */
  height: 250px;
  width: 350px;
  overflow: hidden; /* Oculta desbordes */
  display: inline-block; /* Diseño en línea */
  position: relative;
  background-color: transparent; /* Fondo transparente */
}

.gallery-section .caption {
  position: absolute;
  bottom: 5px;
  left: 20px;
  opacity: 0; /* Oculto inicialmente */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Transiciones */
}

.gallery-section .transparent-box {
  height: 250px;
  width: 350px;
  background-color: rgba(0, 0, 0, 0); /* Transparente por defecto */
  position: absolute;
  top: 0;
  left: 0;
  transition: background-color 0.3s ease; /* Cambio de fondo al hacer hover */
}

.gallery-section .img-box:hover img {
  transform: scale(1.1); /* Efecto zoom */
}

.gallery-section .img-box:hover .transparent-box {
  background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
}

.gallery-section .img-box:hover .caption {
  transform: translateY(-20px); /* Movimiento hacia arriba */
  opacity: 1; /* Muestra la leyenda */
}

.gallery-section .img-box:hover {
  cursor: pointer; /* Cambia el cursor */
}

.gallery-section .caption > p:nth-child(2) {
  font-size: 0.8em; /* Tamaño reducido */
}

.gallery-section .caption p {
  color: #ffffff; /* Blanco */
}

.gallery-section .opacity-low {
  opacity: 0.7; /* Baja opacidad */
  color: #ffffff
}

/* Sección del diagrama */
.diagram-section {
  margin-top: 20px;
  padding: 40px;
}

.diagram-heading {
  font-family: 'Cinzel', serif; /* Fuente personalizada */
  font-size: 3rem; /* Tamaño del encabezado */
  font-weight: 400; /* Peso medio */
  color: #ffffff; /* Texto blanco */
  text-align: center; /* Texto centrado */
  margin: -30px 0 30px 0; /* Margen ajustado */
}

.diagram-container img {
  max-width: 80%; /* Limita el tamaño máximo */
  height: auto; /* Mantiene proporción */
  border-radius: 15px; /* Bordes redondeados */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
}

/* Responsividad */
@media (max-width: 980px) {
  .gallery-section .gallery-image {
    flex-direction: column; /* Diseño vertical */
    align-items: center; /* Centrado */
  }

  .gallery-section .img-box {
    width: 100%; /* Ocupa todo el ancho */
    max-width: 500px; /* Ancho máximo */
    margin: 10px 0; /* Separación vertical */
  }

  .gallery-section .gallery-image img {
    width: 100%; /* Ocupa todo el ancho disponible */
    height: auto; /* Mantiene proporción */
  }
}

@media (max-width: 745px) {
  .diagram-heading {
    font-size: 2.5rem; /* Tamaño reducido */
    line-height: 1.2; /* Espaciado ajustado */
    text-align: center; /* Centrado */
    margin: 0; /* Sin margen superior */
    word-wrap: break-word; /* Divide texto si es necesario */
    visibility: hidden; /* Oculta el texto original */
    position: relative;
    margin-bottom: 20px; /* Espaciado inferior */
  }

  .diagram-heading::after {
    content: "Tabla Crono Estatigráfica"; /* Texto alternativo */
    font-family: 'Cinzel', serif; /* Fuente personalizada */
    font-size: 2.5rem; /* Tamaño ajustado */
    font-weight: 400;
    color: #ffffff; /* Texto blanco */
    text-align: center; /* Centrado */
    visibility: visible; /* Muestra el pseudo-elemento */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Asegura que ocupe el ancho completo */
  }
}