/* ============================================================
   TECHNOFOTOS · GALERY — estilos compartidos de las subpáginas
   Diseño acorde a la portada: fondo #0a0a0a, Inter, acento
   violeta (#a76cff) de la escena electrónica.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#0a0a0a;color:#e8e8e8;font-family:'Inter',sans-serif;font-weight:300;font-size:15px;line-height:1.6;overflow-x:hidden}

/* ============ NAV (igual que portada) ============ */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:24px 40px;transition:padding .3s,background .3s}
nav.scrolled{padding:14px 40px;background:rgba(10,10,10,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.05)}
.logo{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:500;letter-spacing:4px;text-transform:uppercase;color:#fff;text-decoration:none}
.logo img{height:32px;width:auto;display:block}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.45);text-decoration:none;transition:color .2s}
.nav-links a:hover,.nav-dropdown.open .nav-dropbtn,.nav-links a.current,.nav-dropdown.current .nav-dropbtn{color:#fff}
.nav-dropdown{position:relative}
.nav-dropbtn{font-family:'Inter',sans-serif;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.45);background:none;border:0;padding:4px 0 8px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:color .2s}
.nav-dropbtn .caret{font-size:8px;transition:transform .25s}
.nav-dropdown.open .nav-dropbtn .caret{transform:rotate(180deg)}
.nav-dropmenu{position:absolute;top:100%;left:50%;transform:translate(-50%,6px);min-width:200px;background:rgba(12,12,12,.97);border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;padding:8px;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;z-index:120}
.nav-dropdown.open .nav-dropmenu,.nav-dropdown:hover .nav-dropmenu,.nav-dropdown:focus-within .nav-dropmenu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav-dropmenu a{color:rgba(255,255,255,.55);padding:10px 14px;white-space:nowrap}
.nav-dropmenu a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-links a.current{border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:3px}

/* ============ CABECERA DE PÁGINA ============ */
.page-head{padding:170px 40px 56px;max-width:1200px;margin:0 auto}
.page-eyebrow{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:20px;display:flex;align-items:center;gap:16px}
.page-eyebrow::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.06)}
.page-head h1{font-size:clamp(32px,5vw,64px);font-weight:300;letter-spacing:-1px;color:#fff;line-height:1;margin-bottom:16px}
.page-head h1 strong{font-weight:500}
.page-sub{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:48px}
.page-sub-tight{margin-bottom:18px}

/* ============ FILTROS ============ */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px}
.filter-btn{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.1);background:none;padding:8px 16px;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.filter-btn:hover{border-color:rgba(255,255,255,.35);color:#fff}
.filter-btn.active{color:#fff;border-color:rgba(167,108,255,.6);background:rgba(167,108,255,.08)}
.gal-count{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.25);margin-left:auto;align-self:center;font-variant-numeric:tabular-nums}

/* ============ HERMANAS DE LA MISMA RAMA ============ */
/* Multicam y Single Cam son la misma rama (video): se enlazan con un botón.
   No usa .filter-btn a propósito: esa clase la maneja galery.js para filtrar. */
.gal-siblings{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 32px}
.gal-siblings-label{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#999}
.gal-sibling{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#fff;text-decoration:none;border:1px solid rgba(167,108,255,.6);background:rgba(167,108,255,.08);padding:8px 16px;transition:border-color .2s,background .2s,color .2s}
.gal-sibling:hover{border-color:rgba(167,108,255,.9);background:rgba(167,108,255,.16)}

/* ============ GRID MASONRY (columnas CSS) ============ */
.gal-grid{max-width:1200px;margin:0 auto;padding:0 40px 120px;columns:3;column-gap:14px}
.gal-item{break-inside:avoid;margin-bottom:14px;position:relative;overflow:hidden;cursor:pointer;background:#111;border:1px solid rgba(255,255,255,.04);transition:border-color .3s}
.gal-item:hover{border-color:rgba(255,255,255,.2)}
.gal-item img{width:100%;display:block;opacity:.75;transition:opacity .4s,transform .6s cubic-bezier(.22,.61,.36,1)}
.gal-item:hover img{opacity:1;transform:scale(1.04)}
.gal-item .gal-type{position:absolute;top:12px;left:12px;font-size:8px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.2);padding:5px 10px;background:rgba(10,10,10,.5);backdrop-filter:blur(4px);display:flex;align-items:center;gap:6px}
.gal-item-info{position:absolute;bottom:0;left:0;right:0;padding:32px 16px 14px;background:linear-gradient(to top,rgba(10,10,10,.9) 0%,transparent 100%)}
.gal-item-cat{font-size:8px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(167,108,255,.8);margin-bottom:2px}
.gal-item-name{font-size:12px;font-weight:400;color:#fff;letter-spacing:.3px}
/* Haz de luz violeta al pasar el mouse (guiño "rave" de la portada) */
.gal-sweep{position:absolute;top:-30%;bottom:-30%;left:0;width:46%;z-index:2;opacity:0;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.14) 42%,rgba(167,108,255,.16) 58%,rgba(255,255,255,0) 100%);transform:translateX(-130%) skewX(-12deg)}
.gal-item:hover .gal-sweep{animation:galSweep .9s cubic-bezier(.3,.7,.4,1) both}
@keyframes galSweep{0%{opacity:0;transform:translateX(-130%) skewX(-12deg)}14%{opacity:1}82%{opacity:.9}100%{opacity:0;transform:translateX(330%) skewX(-12deg)}}
.gal-item.hidden{display:none}

/* ============ LIGHTBOX ============ */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.95);display:none;align-items:center;justify-content:center;padding:56px 40px;backdrop-filter:blur(8px)}
.lightbox.open{display:flex}
.lb-stage{position:relative;max-width:90vw;max-height:82vh;display:flex;align-items:center;justify-content:center}
.lb-stage img,.lb-stage video{max-width:90vw;max-height:82vh;object-fit:contain;display:block;background:#000}
.lb-close{position:absolute;top:-48px;right:0;background:none;border:1px solid rgba(255,255,255,.2);color:#fff;font-size:14px;width:36px;height:36px;cursor:pointer;transition:border-color .2s;display:flex;align-items:center;justify-content:center}
.lb-close:hover{border-color:#fff}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(10,10,10,.6);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:16px;width:42px;height:42px;cursor:pointer;transition:border-color .2s,background .2s;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.lb-nav:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.lb-prev{left:-62px}
.lb-next{right:-62px}
.lb-caption{position:absolute;bottom:-42px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.4)}
.lb-counter{position:absolute;top:-48px;left:0;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums}
.lb-error{width:70vw;max-width:600px;height:40vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:rgba(255,255,255,.4);font-size:12px;letter-spacing:2px;text-transform:uppercase;border:1px dashed rgba(255,255,255,.2);text-align:center;padding:24px}
.lb-error strong{color:rgba(255,255,255,.7);font-weight:400}

/* ============ FOOTER ============ */
footer{background:#0a0a0a;border-top:1px solid rgba(255,255,255,.05);padding:28px 40px;display:flex;justify-content:space-between;align-items:center}
.footer-logo{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:500;letter-spacing:4px;text-transform:uppercase;color:#fff;text-decoration:none}
.footer-logo img{height:24px;width:auto;display:block}
.footer-copy{font-size:10px;color:rgba(255,255,255,.2);letter-spacing:1px}

/* ============ MOBILE ============ */
@media(max-width:900px){
  .gal-grid{columns:2;column-gap:10px;padding:0 20px 80px}
  .page-head{padding:130px 20px 40px}
  .lb-prev{left:8px}
  .lb-next{right:8px}
  .lightbox{padding:56px 16px}
}
@media(max-width:600px){
  nav{padding:18px 20px}
  nav.scrolled{padding:12px 20px}
  .gal-grid{columns:1}
  footer{flex-direction:column;gap:12px;text-align:center;padding:20px}
  .gal-count{margin-left:0;width:100%;margin-top:8px}
}
@media(prefers-reduced-motion:reduce){
  .gal-item,.gal-item img{transition:none;transform:none}
  .gal-item:hover .gal-sweep{animation:none}
}

/* Accesibilidad y composición de las galerías */
a:focus-visible,button:focus-visible{outline:2px solid #a76cff;outline-offset:5px}
nav{background:rgba(10,10,10,.94)}
.page-sub{color:#999;line-height:1.9;max-width:650px}
.page-eyebrow,.gal-count,.footer-copy{color:#999}
.gal-item{display:block;text-decoration:none;color:inherit}
.gal-item img{aspect-ratio:4/3;object-fit:cover;height:auto}
.gal-item:nth-child(3n + 1) img{aspect-ratio:3/4}
.gal-item[data-type="video"] img{aspect-ratio:16/10}
.gal-item:first-child{border-color:rgba(167,108,255,.35)}
.gal-item-cat{color:#cdaaff}
.gal-item-info span{display:block}
.gal-type{z-index:1}
.lightbox{border:0;width:100%;height:100%;max-width:none;max-height:none;color:#fff;margin:0;box-sizing:border-box}
.lightbox::backdrop{background:#000}
.lb-stage{width:100%;height:100%;max-width:none;max-height:none}
.lb-stage img,.lb-stage video{max-width:calc(100vw - 120px);max-height:calc(100dvh - 180px)}
.lb-close{position:fixed;top:20px;right:20px;width:44px;height:44px;z-index:2}
.lb-counter{position:fixed;top:28px;left:24px}
.lb-caption{position:fixed;bottom:24px;left:70px;right:70px;letter-spacing:1.5px}
.lb-prev{position:fixed;left:12px;z-index:2}
.lb-next{position:fixed;right:12px;z-index:2}
.lb-error a{color:#cdaaff}
.archive-note{font-size:13px;color:#999;margin-top:-24px;margin-bottom:32px}
@media(max-width:700px){
  nav,nav.scrolled{padding:14px 20px;flex-direction:column;gap:16px}
  .nav-links{gap:18px;flex-wrap:wrap;justify-content:center}
  .nav-links a{font-size:9px;letter-spacing:1px;padding:4px 0}
  .logo img{height:26px}
  .page-head{padding-top:160px}
  .lb-stage img,.lb-stage video{max-width:94vw;max-height:calc(100dvh - 220px)}
  .lb-nav{top:auto;bottom:16px;transform:none;width:44px;height:44px}
  .lb-caption{font-size:9px;bottom:22px;max-height:65px;overflow:auto}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}