/*--------------------------------------------------------------
 * Bloque · ¿Qué es el Arte?
 *-------------------------------------------------------------*/
.qa-arte{padding:4rem 2rem; background-color: #fff;}
.qa-container{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  gap:2rem;
  flex-wrap:wrap;
}

/* Columna texto */
.qa-left{flex:1 1 45%;}
.qa-titulo{
  font-family:'Playfair Display',serif;
  font-size:2rem;
  margin-bottom:1rem;
}
.qa-descripcion p{
  font-family:'Karla',sans-serif;
  font-size:1.05rem;
  line-height:1.65;
}

/* Mosaico */
.qa-grid{
  flex:1 1 45%;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:6px;
}
.qa-thumb{
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.qa-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s ease;
}
.qa-thumb:hover img{transform:scale(1.08);}

/* Modal / light-box */
.qa-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
  z-index:9999;
}
.qa-modal.is-open{
  opacity:1;
  pointer-events:auto;
}
.qa-full{
  max-width:90%;
  max-height:90vh;
  border-radius:4px;
}
.qa-close,
.qa-prev,
.qa-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  color:#fff;
  font-size:2.5rem;
  line-height:1;
  cursor:pointer;
  padding:.25rem .5rem;
  opacity:.8;
}
.qa-close{top:2rem; right:2rem; transform:none; font-size:2rem;}
.qa-prev {left:2rem;}
.qa-next {right:2rem;}
.qa-close:hover,
.qa-prev:hover,
.qa-next:hover{opacity:1;}

/* Responsive texto arriba */
@media(max-width:768px){
  .qa-container{flex-direction:column;}
  .qa-left, .qa-grid{flex:1 1 100%;}
}

/* Modal ahora se anima solo con opacity (inicial 0) */
.qa-modal{
  position:fixed;
  inset:0;
  background:rgba(255, 255, 255, 0.925);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;                 /* por defecto invisible */
  pointer-events:none;
  z-index:9999;
}

.qa-modal.is-open{           /* pointer-events activado cuando abre */
  pointer-events:auto;
}