@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('responsive-txt.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;
}





main {
  position: relative;
  z-index: 1;
  padding-top: 60px; /* Match header height */
}




.text-container {
  display: block;         
  width: 90%;             
  max-width: 250px;       
  margin: 2rem auto;      
  position: relative;
  text-align: center;     /* Centra el texto dentro del bloque */
  font-family: 'Libre Baskerville', serif;
  font-size: 1rem;
  line-height: 2;
  color: #010101;
}

.main-text {
  /* Opcional para más ajustes */
  font-family: 'Chivo Mono', monospace;
  line-height: 2;
  font-size: 0.3rem;
  color: #fdfdfd8f;
}




  /* Magnifier effect */
  .magnifier {
    position: absolute;
    width: 400px; /* Twice the size of the original */
    height: 450px; /* Twice the size of the original */
    border-radius: 20%;
    /*overflow: hidden; */
    pointer-events: none;
    mix-blend-mode: difference;
    will-change: transform;
    backface-visibility: hidden;
   
  }

 
  .magnifier-content {
    position: absolute;
    width: 80%; /* Scale the text up inside the magnifier */
    height: 80%; /* Maintain scaling consistency */
    transform-origin: 5% 10%; /* Anchor the scaling */
    transform: scale(1.5);
    font-family: 'Chivo Mono', monospace;
    font-size: .7rem; /* Double the font size for zoom */
    line-height: 1rem;
    color: #ffffff;
    mix-blend-mode: difference;
    opacity: 80%;
    overflow-wrap: anywhere;    /* CSS moderno */
    /*background-image: url("img_back/blog/lupa.png");*/
    background-size: cover;
    transition: opacity 0.5s ease;
  }
  .content {
    flex: 1; /* El contenido toma el resto del espacio */
    max-width: 600px; /* Limita el ancho máximo del contenido */
    text-align: left; /* Alinea el texto a la izquierda */
  }
  
/* Ajustes específicos para cada lupa */
#magnifier-content {
  transform-origin: left top;  /* Primera lupa se expande a la izquierda */
}

#magnifier-content2 {
  transform-origin: right top; /* Segunda lupa se expande a la derecha */
}

#text-container {
  cursor: zoom-in;
}


.lupa-img {
  width: 30%;
  height: 30%;
  object-fit: fill;
  border-radius: 50%;
  transition: transform 0.3s ease;
}




.layoutbox {
  display: flex;
  flex-direction: flex-start;
  flex-wrap: wrap;
  font-family: 'Chivo', monospace;
  font-size: .7rem;
  gap: 50px; /* Adds space between columns */
  justify-content: center;
  align-items: stretch; /* Ensures columns align properly */
  max-width: 1200px; /* Optional: Prevents content from stretching too wide */
  margin: 20px;
    margin-left: 50px;
  padding: 20px;


}

.grow1 { 
  
    flex: 1;
    min-width: 300px; /* Ensures it wraps for smaller screens */
    max-width: 33%; /* Limits width to fit three columns */

}



            .divider {
              width: 80%;
              max-width: 800px;
              margin: 1rem auto;
              border: 0;
              border-bottom: 1px solid #000;
            }

            /* Accordion Container */
            .accordion {
              width: 80%;
              max-width: 800px;
              margin: 0 auto;
              border-bottom: 1px solid #ccc;
            }

            /* Accordion Header (Clickable Area) */
            .accordion-header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              cursor: pointer;
              padding: 1rem 0;
              text-transform: uppercase;
              font-family: 'Chivo Mono', serif;
              
              font-size: .9rem;
              font-weight: medium;
            }

            /* Down Arrow (SVG) */
            .accordion-arrow {
              transition: transform 0.2s ease;
            }

            /* Rotates the arrow when open */
            .open .accordion-arrow {
              transform: rotate(180deg);
            }

            /* Accordion Content (Hidden by default) */
            .accordion-content {
              display: none;
              padding: 0 4rem 2rem 4rem;
              font-family: 'Baskerville Libre', serif; /* Ensure the font family is correct */
              font-size: 0.8rem;
              line-height: 3;
            }

            /* Shows the content when parent has .open */
            .open .accordion-content {
              display: block;
            }




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

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