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



/* Estilo para las bolitas de humo */
.humo {
  position: fixed;
  width: 15px; /* Tamaño de la bolita */
  height: 15px;
  background: radial-gradient(circle, rgb(2, 78, 111) 0%, rgb(97, 172, 207) 70%);
  opacity: 0.5;
  border-radius: 50%; /* Forma circular */
  filter: blur(8px);
  pointer-events: none; /* Evita que interfiera con el mouse */
  transform: translate(-50%, -50%); /* Centra la bolita en el puntero */
  animation: fade-out 1.5s ease-out forwards; /* Animación de desvanecimiento */
  z-index: 9999999 !important;
 
}





.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;                              /* Espaciado entre links */
  align-items: center;
  justify-items: center;
  grid-template-areas: 
  "a . d . b . h . c . . ." /* Fila 1 */
  ". . . . . . e . . . . ." /* Fila 2 */
  ". . . . . . f . . . . ." /* Fila 3 */
  ". . . . . . j . . k . ." /* Fila 4 */
  ". n l o i . m . . . . ." /* Fila 5 */
  ". r g s . . t . . . . ." /* Fila 6 */
  ". . . . . . p u v w x y" /* Fila 7 */
  ". . . . . . . . . . . ." /* Fila 8 */
  ". . . . . . . . . . . ."; /* Fila 9 */

  width: 100%;                             /* Ocupa todo el ancho */
  height: 80vh;                            /* 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 */
}



.fade {
  opacity: 0;
}



/* 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;
  font-size: 2.0rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  margin-bottom: 25px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
}

.text-box p {
  max-width: 700px;
  width: 80%;
  margin: 0 auto;
  font-size: 0.8rem;
  line-height: 2rem;
  text-align: justify;
}

.fake-spacer {
  height: 10px; /* o ajústalo según el efecto que te gustaba */
}




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