/* ===========================================================
   GALERÍA — CSS COMPLETO
   Preview (index) + Modal (Fotos/Videos) + Visor grande
   Estética dark / minimal (sin marcos blancos)
   =========================================================== */

:root{
  --NEGRO:#000;
  --TEXTO:#e7ecf3;
  --BORDE: rgba(255,255,255,.08);
  --PRIMARIO:#33b1ff;
  --PRIMARIO-ALFA: rgba(51,177,255,.14);
  --RAD:16px;
  --SOMBRA: 0 10px 30px rgba(0,0,0,.45);
  --TRANS:.22s cubic-bezier(.2,.6,.2,1);
}

/* ===========================================================
   PREVIEW EN INDEX
   Layout: 1 grande izquierda, 1 grande derecha arriba,
           y 2 chicas debajo (mismo alto total que la grande)
   =========================================================== */

#galeria{
  margin: 10px 0 24px;
  color: var(--TEXTO);
}

.galeria-hero{
  background: linear-gradient(180deg,#0b0f14 0%, #0a0d12 100%);
  border:1px solid var(--BORDE);
  border-radius: var(--RAD);
  box-shadow: var(--SOMBRA);
  padding: 10px;
}

.gal-hero-grid{
  display:grid;
  grid-template-columns: 2.1fr 1.2fr;
  grid-template-rows: repeat(2,minmax(210px, 1fr)); /* dos filas del mismo alto */
  gap:10px;
}

.gal-item{
  position:relative;
  overflow:hidden;
  width:100%;
  height:100%;
  padding:0;
  background:transparent !important;
  border:0 !important;
  outline:none !important;
  border-radius:12px;
  cursor:pointer;
  transition: transform var(--TRANS), box-shadow var(--TRANS), opacity var(--TRANS);
}
.gal-item img{
  width:100%; height:100%;
  display:block;
  object-fit:cover;
  background:#000; /* por si la imagen tiene transparencia */
  user-select:none;
}
.gal-item:hover{ transform: translateY(-2px); }
.gal-item:focus-visible{ box-shadow: 0 0 0 3px var(--PRIMARIO); }

.gal-main{ grid-column:1/2; grid-row:1/3; }       /* ocupa dos filas */
.gal-right-top{ grid-column:2/3; grid-row:1/2; }  /* arriba derecha */
.gal-right-bottom{
  grid-column:2/3; grid-row:2/3;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.gal-more-badge{
  position:absolute;
  right:10px; bottom:10px;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px;
  color:#fff;
  background: rgba(0,0,0,.55);
  border:1px solid var(--BORDE);
  border-radius: 999px;
  font-size:.92rem;
  backdrop-filter: blur(2px) saturate(120%);
}

/* Responsive preview */
@media (max-width: 960px){
  .gal-hero-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, minmax(160px, 1fr));
  }
  .gal-main{ grid-column:1/3; grid-row:1/3; }
  .gal-right-top{ grid-column:1/2; grid-row:3/4; }
  .gal-right-bottom{ grid-column:2/3; grid-row:3/4; grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .gal-hero-grid{
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, minmax(160px, 1fr));
  }
  .gal-main{ grid-column:1/2; grid-row:1/2; }
  .gal-right-top{ grid-column:1/2; grid-row:2/3; }
  .gal-right-bottom{ grid-column:1/2; grid-row:3/5; grid-template-columns:1fr 1fr; }
}

/* ===========================================================
   MODAL — overlay + contenedor
   =========================================================== */

.gal-overlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.92);
  display:none;
  align-items:center; justify-content:center;
  z-index: 9999;
}
.gal-overlay.is-open{ display:flex; }

.gal-wrap{
  width: min(1200px, 96vw);
  height: min(92vh, 950px);
  background:#000;
  color:var(--TEXTO);
  border:1px solid var(--BORDE);
  border-radius: 18px;
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow: var(--SOMBRA);
}

/* ===========================================================
   CABECERA con pestañas Fotos / Videos
   =========================================================== */

.gal-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding: 14px 18px 6px;
  border-bottom:1px solid var(--BORDE);
  background: linear-gradient(180deg,rgba(12,16,22,.9), rgba(8,11,15,.9));
}
.gal-tabs{ display:flex; gap:22px; }
.gal-tab{
  position:relative;
  background:transparent; border:0; color:var(--TEXTO);
  font-size:1rem; padding:8px 2px; cursor:pointer; outline:none;
}
.gal-tab:focus-visible{ box-shadow: inset 0 -2px 0 var(--PRIMARIO); }
.gal-tab-active{ color:#fff; }
.gal-tab-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-7px;
  height:3px; background: var(--PRIMARIO);
  border-radius: 999px;
}
.gal-close{
  background:transparent; border:0; color:var(--TEXTO);
  font-size:22px; cursor:pointer; padding:6px 8px; border-radius:10px;
}
.gal-close:hover{ background: rgba(255,255,255,.06); }

/* ===========================================================
   CUERPO del modal (scroll en paneles)
   =========================================================== */

.gal-body{
  position:relative;
  flex:1 1 auto;
  overflow:hidden;                 /* el scroll vive dentro de los paneles */
  display:flex; flex-direction:column;
  gap:16px;
  padding:16px;
  background:#000;
}

/* Paneles con scroll propio */
.gal-photos, .gal-videos{
  min-height:0;
  flex:1 1 auto;
  overflow:auto;
  scrollbar-width: thin;
  scrollbar-color: var(--BORDE) transparent;
}
.gal-photos::-webkit-scrollbar,
.gal-videos::-webkit-scrollbar{ width:10px; height:10px; }
.gal-photos::-webkit-scrollbar-thumb,
.gal-videos::-webkit-scrollbar-thumb{ background:var(--BORDE); border-radius:999px; }

.gal-photos.is-active{ display:block; }
.gal-videos.is-active{ display:block; }
.gal-videos{ display:none; }
.gal-photos{ display:block; }

/* Mosaico superior dentro del modal */
.gal-photos-mosaic{
  display:grid;
  grid-template-columns: 2.1fr 1.2fr;
  grid-template-rows: repeat(2,minmax(220px, 1fr));
  gap:16px;                   /* aire entre tiles */
  margin-bottom: 12px;
}
.gal-photos-mosaic .tile{
  position:relative; overflow:hidden; border-radius:12px;
  border:0 !important; box-shadow:none !important; background:transparent !important;
  cursor:pointer;
}
.gal-photos-mosaic .tile img{
  width:100%; height:100%; object-fit:cover; display:block; background:#000;
}
.gal-photos-mosaic .main{ grid-column:1/2; grid-row:1/3; }
.gal-photos-mosaic .top-right{ grid-column:2/3; grid-row:1/2; }
.gal-photos-mosaic .col-right{
  grid-column:2/3; grid-row:2/3;
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}

/* Grilla del resto (todas las fotos) */
.gal-photos-rest{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;                   /* aire entre thumbs */
  padding-right:6px;
}
.gal-thumb-all{
  position:relative; overflow:hidden; border-radius:12px;
  border:0 !important; box-shadow:none !important; background:transparent !important;
  cursor:pointer; transition: transform var(--TRANS);
}
.gal-thumb-all img{
  width:100%; height:220px; object-fit:cover; display:block; background:#000;
}
.gal-thumb-all:hover{ transform: translateY(-2px); }

@media (max-width: 960px){
  .gal-photos-mosaic{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, minmax(180px, 1fr));
  }
  .gal-photos-mosaic .main{ grid-column:1/3; grid-row:1/3; }
  .gal-photos-mosaic .top-right{ grid-column:1/2; grid-row:3/4; }
  .gal-photos-mosaic .col-right{ grid-column:2/3; grid-row:3/4; grid-template-columns:1fr; }
  .gal-photos-rest{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal-thumb-all img{ height:200px; }
}
@media (max-width: 640px){
  .gal-photos-mosaic{
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, minmax(160px, 1fr));
  }
  .gal-photos-mosaic .main{ grid-column:1/2; grid-row:1/2; }
  .gal-photos-mosaic .top-right{ grid-column:1/2; grid-row:2/3; }
  .gal-photos-mosaic .col-right{ grid-column:1/2; grid-row:3/5; grid-template-columns:1fr 1fr; }
  .gal-photos-rest{ grid-template-columns: 1fr 1fr; }
  .gal-thumb-all img{ height:160px; }
}

/* Grilla de videos (cuando existan) */
.gal-videos-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:16px;
}
.gal-videos-grid video{
  width:100%; height:auto; display:block;
  background:#000; border-radius:12px; outline:none; border:0;
}

/* ===========================================================
   VISOR GRANDE (lightbox interno)
   =========================================================== */

.gal-view{
  position:absolute; inset:0;
  background: rgba(0,0,0,.96);
  display:none;
  align-items:center; justify-content:center;
  z-index:2;
  border:0 !important;
}
.gal-view.open{ display:flex; }

.gal-view-img{
  max-width: 92vw; max-height: 86vh;
  width:auto; height:auto;
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(0,0,0,.7);
  background:#000;
}

/* Flechas de navegación */
.gal-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:46px; height:46px; border-radius:999px;
  background: var(--PRIMARIO-ALFA);
  border:1px solid var(--BORDE);
  color:#fff;
  display:grid; place-items:center;
  font-size:20px; cursor:pointer;
  transition: transform var(--TRANS), background var(--TRANS);
  backdrop-filter: blur(2px) saturate(120%);
}
.gal-arrow:hover{ transform: translateY(-50%) scale(1.06); background: rgba(51,177,255,.22); }
.gal-arrow.prev{ left:16px; }
.gal-arrow.next{ right:16px; }

/* Cerrar visor */
.gal-view .gal-x{
  position:absolute; top:14px; right:14px;
  width:40px; height:40px; border-radius:10px;
  background:transparent; border:1px solid var(--BORDE);
  color:#fff; font-size:20px; display:grid; place-items:center;
  cursor:pointer;
}
.gal-view .gal-x:hover{ background: rgba(255,255,255,.06); }

/* Pie de foto */
.gal-caption{
  position:absolute; left:0; right:0; bottom:10px;
  text-align:center; color:#dfe7f2;
  font-size:.95rem;
  padding:8px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.7) 100%);
}

/* ===========================================================
   Auxiliares
   =========================================================== */

.gal-empty{
  color:#9aa7b3; font-size:.95rem;
  padding: 28px 10px; text-align:center;
}

/* Asegurar que jamás aparezcan marcos/sombras no deseados */
.gal-photos-mosaic .tile,
.gal-thumb-all,
.gal-item{
  border:0 !important;
  outline:none !important;
  box-shadow:none !important;
  background:transparent !important;
}