/* ============================================================
   clon-qa-portfolio.css — Galería unificada del portafolio
   Cargado solo en /portafolio/.
   Miniaturas (fotos + los 2 vídeos verticales) en una única grilla;
   al hacer clic se abre en pantalla completa con navegación
   anterior/siguiente. Los vídeos se muestran acotados a la pantalla
   (max-height:88vh) para que un vídeo vertical nunca desborde.

   Nota de especificidad: los selectores van prefijados con
   #cqa-pf-gallery / #cqa-pf-lb a propósito. El body lleva la clase
   global "elementor-kit-9" (tema Hello Elementor) que trae reglas
   como ".elementor-kit-9 button" y ".elementor img" con especificidad
   0-1-1; un simple ".cqa-pf-thumb" (0-1-0) pierde ese pulso. Prefijar
   con el id sube a 1-x-0 y gana siempre sin usar !important.

   Marca: verde #249150
   ============================================================ */

#cqa-pf-gallery{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:40px 5% 60px;
  box-sizing:border-box;
}
#cqa-pf-gallery .cqa-pf-thumb{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1/1;
  border:none;
  padding:0;
  margin:0;
  border-radius:10px;
  overflow:hidden;
  cursor:zoom-in;
  background:#e9e9e9;
  -webkit-tap-highlight-color:transparent;
}
#cqa-pf-gallery .cqa-pf-thumb__media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .3s ease;
}
#cqa-pf-gallery .cqa-pf-thumb:hover .cqa-pf-thumb__media{ transform:scale(1.06); }

#cqa-pf-gallery .cqa-pf-thumb__play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,15,15,.22);
  transition:background .15s ease;
}
#cqa-pf-gallery .cqa-pf-thumb:hover .cqa-pf-thumb__play{ background:rgba(15,15,15,.34); }
#cqa-pf-gallery .cqa-pf-thumb__play::before{
  content:"";
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
#cqa-pf-gallery .cqa-pf-thumb__play::after{
  content:"";
  position:absolute;
  width:0;
  height:0;
  border-style:solid;
  border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #249150;
  margin-left:6px;
}

/* ---------- Lightbox pantalla completa (galería del portafolio) ---------- */
#cqa-pf-lb{
  position:fixed;
  inset:0;
  z-index:100000;
  background:rgba(12,12,12,.94);
  display:none;
  align-items:center;
  justify-content:center;
}
#cqa-pf-lb.is-open{ display:flex; }
#cqa-pf-lb .cqa-pf-lb__img,
#cqa-pf-lb .cqa-pf-lb__video{
  display:none;
  max-width:92vw;
  max-height:88vh;
  width:auto;
  height:auto;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
  background:#000;
}
#cqa-pf-lb .cqa-pf-lb__img.is-active,
#cqa-pf-lb .cqa-pf-lb__video.is-active{ display:block; }

#cqa-pf-lb .cqa-pf-lb__btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease;
  z-index:1;
}
#cqa-pf-lb .cqa-pf-lb__btn:hover{ background:rgba(255,255,255,.28); }
#cqa-pf-lb .cqa-pf-lb__btn--prev{ left:24px; }
#cqa-pf-lb .cqa-pf-lb__btn--next{ right:24px; }

#cqa-pf-lb .cqa-pf-lb__close{
  position:absolute;
  top:20px;
  right:24px;
  width:44px;
  height:44px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:22px;
  cursor:pointer;
  z-index:1;
}
#cqa-pf-lb .cqa-pf-lb__close:hover{ background:rgba(255,255,255,.28); }

#cqa-pf-lb .cqa-pf-lb__count{
  position:absolute;
  bottom:22px;
  left:50%;
  transform:translateX(-50%);
  color:#fff;
  font-size:13px;
  letter-spacing:.03em;
  background:rgba(0,0,0,.4);
  padding:5px 12px;
  border-radius:20px;
}

body.cqa-pf-lb-open{ overflow:hidden; }

@media (max-width:1024px){
  #cqa-pf-gallery{ grid-template-columns:repeat(3, 1fr); }
}

@media (max-width:600px){
  #cqa-pf-gallery{ grid-template-columns:repeat(2, 1fr); gap:8px; padding:28px 4% 40px; }
  #cqa-pf-gallery .cqa-pf-thumb__play::before{ width:44px; height:44px; }
  #cqa-pf-gallery .cqa-pf-thumb__play::after{ border-width:9px 0 9px 14px; margin-left:5px; }
  #cqa-pf-lb .cqa-pf-lb__btn{ width:44px; height:44px; font-size:22px; }
  #cqa-pf-lb .cqa-pf-lb__btn--prev{ left:8px; }
  #cqa-pf-lb .cqa-pf-lb__btn--next{ right:8px; }
  #cqa-pf-lb .cqa-pf-lb__close{ top:12px; right:12px; }
}