@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;
}




.grid-container {
  display: grid;
  grid-template-columns: repeat(12, minmax(30px, 1fr)); /* Ensures each column has space */
    grid-template-rows: repeat(9, minmax(30px, auto)); /* Ensures rows can grow */
  gap: 20px;  
  align-items: center;
  justify-items: center;                            /* Espaciado entre links */
  grid-template-areas: 
      ". a . . b . . . c . . ." /* Fila 1 */
      ". . d . . . e . . . f ." /* Fila 2 */
      ". g . . . . . h . . . ." /* Fila 3 */
      ". . . . . . j . . k . ." /* Fila 4 */
      ". n l . i . . m . . . ." /* Fila 5 */
      ". r . s . . . . . . . ." /* Fila 6 */
      ". . . o . . p . . . . ." /* Fila 7 */
      ". . . . . . . . . . . ." /* Fila 8 */
      ". . . . . . . . . . . ."; /* Fila 9 */

  width: 100%;                             /* Ocupa todo el ancho */
  height: 100%;                            /* Ocupa todo el alto */
  position: relative;                      /* Relativo al canvas */
  top: 0;                                  /* Alineado al inicio */
  left: 0;                                 /* Alineado al inicio */
  z-index: 2;                              /* Sobre la imagen */
}




/* 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: 40px;
  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 */
}



.link-icon img,
.modal-link img {
  width: 10px;
  height: 10px;
  padding: 0.5rem;
}





/* 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 */
}