@import url('floating-unified.css');    /* ← ÚLTIMO */
@import url('base.css'); /* reset-body-fonts */
@import url('footer-header.css'); /* ffooterheader */
@import url('canvas.css'); /* canvas */
@import url('grid-icons.css'); /* linkicons and gallery */
@import url('sections.css'); /* secciones */
@import url('modal.css'); /* modal */
@import url('footer.css'); /* pie de página */
@import url('respon_series.css'); /* Media queries and responsive design */




.image-container {
    position: relative;
    width: 100%;
    height: 100%; /* Ocupa toda la altura visible */
    overflow: hidden;
}

.wrapper {
  display: flex;
  flex-direction: column; /* Secciones una debajo de la otra */
  width: 100%;
  overflow-x: hidden;
}


p {
  margin: 0.5em 0; /* Ajuste vertical */
  font-family: 'Chivo Mono', monospace;
  font-size: .8rem; /* Tamaño de fuente */
  line-height: 2rem; /* Espaciado entre líneas */
}



h4 {
  font-family: 'Chivo Mono', monospace;
  font-size: .9rem;
  font-weight: 100;
  margin: 0;
}



.first-section {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 1rem;
  }
  
  .two-images {
    display: flex;
    gap: 20px;
  }
  
  .two-images a {
    display: block;
    width: 40vw; /* Ajusta a tu preferencia */
    max-width: 400px;
  }
  
  .two-images img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  @media (max-width: 768px) {
    .two-images {
      flex-direction: column;
      align-items: center;
    }
  }
  





#exposiciones {
  padding: 4rem 2rem 2rem 3rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: 140px; 
}

.expo-names {
  padding: 4rem 2rem 2rem 3rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin-right: auto;
  /*grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));*/
  gap: 1.5rem;
  justify-items: left;
  align-items: left;
}

.expo-item {
  width: 150px;
  height: 150px;
  padding-bottom: 20px;
  display: flex;
  justify-content: center;
  display: flex;
  flex-direction: row; /* para apilar imagen y texto en columna */
  align-items: right;    /* centrará la imagen y el texto horizontalmente */
  text-align: right;     /* centra el contenido dentro del .gallery-item */
}


.expo-item img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
  /*height: auto;*/
  display: block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.expo-item p {
  margin-top: 0.5rem;     /* Espacio entre la imagen y el texto */
  font-size: 0.9rem;      /* Ajusta el tamaño de letra a tu gusto */
  color: #333;            /* Color del texto */
  text-align: right;
}

/* The overall container for all expo rows (section.expo-names) can remain as is.
   We'll just define how each “.expo-row” lays out. */
   .expo-row {
    display: flex;      /* Side-by-side columns */
    gap: .9rem;          /* Space between columns */
    margin-bottom: 2rem;/* Space below each row */
  }
  
  /* Left text column */
  .expo-description {
    font-family: 'Chivo Mono', monospace;
    font-weight: 100;
    font-size: 1rem;
    width: 250px;       /* Fix width or use a percentage if you prefer */
    flex-shrink: 0;     /* Prevent it from shrinking if the screen is narrower */
    text-align: right;  /* Centrar el texto del lado derecho */
  }
  
  /* Right gallery column:
     We’re reusing your `.gallery` class. Just ensure it expands to fill the leftover space. */
  .expo-gallery {
    flex: 1;            /* Fills remaining horizontal space */
    display: flex; 
    flex-wrap: wrap;    /* Let items wrap onto new lines if needed */
    gap: 1rem;          /* Space between .gallery-item blocks */
  }
  
  /* Optional: If you want a grid of images, you can do something like: 
  .expo-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  */
  .exhibit-thumb {
    width: 120px;
    margin: 1rem;
    cursor: pointer;
    text-align: center;
    display: inline-block; /* or flex, etc. */
  }
  
  .exhibit-thumb img {
    width: 100%;
    height: auto;
    display: block;
  }
  

  /* Make it stack for small screens: */
  @media (max-width: 768px) {
    .expo-row {
      flex-direction: column; /* Stack columns vertically on mobile */
    }
    .expo-description, 
    .expo-gallery {
      width: 100% !important;
    }
  }
  

/* Galería */
.gallery {
    padding: 4rem 2rem 2rem 3rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    /*grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));*/
    gap: 1.5rem;
    justify-items: center;
    align-items: center;
  }

  .gallery-item {
    width: 120px;
    height: 200px;
    display: flex;
    justify-content: center;
    margin-left: .5rem;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 6px;
    margin-bottom: 10px;
  }

  .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*height: auto;*/
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .gallery-item:hover img {
    transform: scale(1.1);
    opacity: 0.8;
  }

  .gallery .image {
    width: 100px;
    height: 100px;
    margin: 5px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

#displayBox {
  width: auto;
  height: auto;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 8px rgba(0,0,0,0.5);
  z-index: 1000;
}

 
/* Textos */

.txtgallery {
  display: flex;
  flex-direction: column;
  align-items: left;
  padding: 50px 10px; /* Add padding for breathing room */
}

.text-box {
  
  max-width: 100%; /* Allow it to scale for smaller screens */
  padding: 0; /* Side spaces for larger screens */
  /*box-sizing: border-box;*/
  
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left; /* Center-align text */
  margin-left: 10px;
  margin-top: 20px;
}

.subtitle {
  font-family: 'Baskerville Libre', serif; /* Ensure the font family is correct */
  font-size: 2.0rem; /* Slightly smaller size */
  font-weight: 400; /* Normal weight to avoid bold */
  letter-spacing: 0.2em; /* 60% letter spacing */
  margin-bottom: 25px;
  margin-left: 120px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left; /* Center-align text */
}

.text-box p {

  width:50%; /* Constrain paragraph width */
  margin-left: auto;
  margin-right: auto; /* Center-align paragraph block */
  text-align: left; /* Ensure text aligns to the left */
}

.section-title {
  font-family: 'Chivo Mono', monospace;
  font-size: 1.2rem;
  font-weight: 200;
  margin-top: 50px;
  letter-spacing: 0.2em; /* 60% letter spacing */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  text-align: right; /* Center-align text */
}



/* Animación para desvanecer */

  .fadeOutBottom {
    animation-name: fadeOutBottom;
    animation-duration: 2s; /* Duración de 2 segundos */
    animation-fill-mode: forwards; /* Mantiene el estado final */
}



@keyframes fadeOutBottom {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translateY(100%);
    }
}



  @keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* Animación para desvanecer */
@keyframes fade-out {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2);
  }
}

/* 🔹 Efecto de desaparición más suave */
@keyframes smoke-fade {
  0% { opacity: 1; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(1.5); } /* 🔹 Crece menos para mayor suavidad */
}

/* 🔹 Movimiento ascendente con curva más fluida */
@keyframes smoke-rise {
  0% { transform: translateY(0); }
  100% { transform: translateY(-15px); } /* 🔹 Se eleva menos para no verse tan brusco */
}