/* Galería FILRos 2026 — estilos aislados bajo .filros-galeria (y .fg-lb para el visor).
   Toma los colores del sitio (variables de Bricks) y cae a los mismos valores fuera de WordPress. */
.filros-galeria,.fg-lb{
  --fg-azul:var(--azul,#192E60);--fg-azul2:var(--azuloscuro,#2c4285);--fg-azul100:var(--azul-100,#dce1ee);
  --fg-magenta:var(--magenta,#FF5C71);--fg-papel:var(--papel,#fff8f3);--fg-fondo:var(--fondo,#eeeeee);
  --fg-noche:#0c1837;--fg-texto:#363636;--fg-muted:#6b7286;
  --fg-degrade:linear-gradient(76deg,#FF5C71,#A1AAC7,#192E60);
  --fg-font:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
}
.filros-galeria{--fg-top:0px;font-family:var(--fg-font);color:var(--fg-texto);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
.filros-galeria *,.fg-lb *{box-sizing:border-box}
.filros-galeria .fg-wrap{max-width:1100px;margin:0 auto;padding:0 20px}
/* franjas a todo el ancho aunque el bloque esté dentro de un contenedor de Bricks (sin scroll horizontal) */
.filros-galeria .fg-band{box-shadow:0 0 0 100vmax var(--fg-band);clip-path:inset(0 -100vmax);background:var(--fg-band)}

/* encabezado (mismo esquema que las páginas internas: franja papel + línea degradé) */
.filros-galeria .fg-hero{--fg-band:var(--fg-papel);padding:36px 0 30px}
.filros-galeria .fg-kicker{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-magenta)}
.filros-galeria .fg-hero h2{font-family:var(--fg-font);font-weight:800;font-size:clamp(28px,4vw,44px);line-height:1.08;color:var(--fg-azul);margin:6px 0 10px;letter-spacing:-.01em}
.filros-galeria .fg-lead{margin:0;max-width:62ch;color:var(--fg-texto)}
.filros-galeria .fg-credits{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.filros-galeria .fg-credits span{font-size:13px;background:#fff;border:1px solid var(--fg-azul100);border-radius:25px;padding:5px 12px;color:var(--fg-azul)}
.filros-galeria .fg-credits b{font-weight:700}
.filros-galeria .fg-line{height:6px;background:var(--fg-degrade)}

/* botonera de días: continúa la banda azul del menú del sitio y se pega debajo de él */
.filros-galeria .fg-nav{--fg-band:var(--fg-azul);position:sticky;top:var(--fg-top);z-index:900;border-top:1px solid rgba(255,255,255,.14)}
.filros-galeria .fg-nav .fg-wrap{display:flex;gap:4px;overflow-x:auto;padding-top:7px;padding-bottom:7px;scrollbar-width:none}
.filros-galeria .fg-nav .fg-wrap::-webkit-scrollbar{display:none}
.filros-galeria .fg-nav a{flex:none;color:#fff;text-decoration:none;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;padding:7px 13px;border-radius:25px;white-space:nowrap;transition:background .15s}
.filros-galeria .fg-nav a b{font-weight:800}
.filros-galeria .fg-nav a:hover{background:rgba(255,255,255,.12)}
.filros-galeria .fg-nav a.on{background:var(--fg-magenta)}

/* filtro por fotógrafo */
.filros-galeria .fg-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:22px}
.filros-galeria .fg-filters label{font-size:12px;font-weight:700;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.06em;margin-right:4px}
.filros-galeria .fg-filters button{font:inherit;font-size:14px;line-height:1.2;border:1px solid var(--fg-azul100);background:#fff;color:var(--fg-azul);padding:7px 15px;border-radius:25px;cursor:pointer;transition:.15s;margin:0}
.filros-galeria .fg-filters button:hover{border-color:var(--fg-azul)}
.filros-galeria .fg-filters button.on{background:var(--fg-magenta);border-color:var(--fg-magenta);color:#fff}

/* días y secciones */
.filros-galeria .fg-day{padding:44px 0 4px}
.filros-galeria .fg-dayhead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-bottom:10px;margin-bottom:24px;border-bottom:3px solid;border-image:var(--fg-degrade) 1}
.filros-galeria .fg-dayhead .n{font-weight:800;font-size:clamp(36px,4.5vw,54px);line-height:1;color:var(--fg-magenta)}
.filros-galeria .fg-dayhead h3{font-family:var(--fg-font);font-weight:700;font-size:clamp(22px,2.6vw,27px);color:var(--fg-azul);margin:0;line-height:1.2}
.filros-galeria .fg-dayhead .c{margin-left:auto;font-size:13px;color:var(--fg-muted)}
.filros-galeria .fg-block{margin-bottom:34px}
.filros-galeria .fg-blockhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.filros-galeria .fg-blockhead h4{font-family:var(--fg-font);margin:0;font-size:16px;font-weight:700;color:var(--fg-azul);line-height:1.3}
.filros-galeria .fg-blockhead .by{font-size:14px;color:var(--fg-muted)}
.filros-galeria .fg-blockhead .by em{font-style:normal;font-weight:600;color:var(--fg-texto)}
.filros-galeria .fg-blockhead .c{margin-left:auto;font-size:12px;color:var(--fg-muted)}

/* grilla justificada */
.filros-galeria .fg-grid{display:flex;flex-wrap:wrap;gap:6px}
.filros-galeria .fg-grid::after{content:"";flex-grow:999999}
.filros-galeria .fg-ph{--h:200px;position:relative;display:block;overflow:hidden;background:var(--fg-fondo);border-radius:4px;cursor:zoom-in;flex:var(--r) 1 calc(var(--r)*var(--h));aspect-ratio:var(--r)}
.filros-galeria .fg-ph img{width:100%;height:100%;max-width:none;object-fit:cover;display:block;opacity:0;transition:opacity .4s,transform .5s;border-radius:0}
.filros-galeria .fg-ph img.ok{opacity:1}
.filros-galeria .fg-ph:hover img{transform:scale(1.03)}
.filros-galeria .fg-ph .cr{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 6px;font-size:11px;color:#fff;background:linear-gradient(transparent,rgba(12,24,55,.7));opacity:0;transition:.2s}
.filros-galeria .fg-ph:hover .cr{opacity:1}
.filros-galeria .fg-ph:focus-visible{outline:3px solid var(--fg-magenta);outline-offset:2px}
/* llamado a la acción para la home: banda azul como el hero del sitio */
.filros-galeria .fg-cta-band{--fg-band:var(--fg-azul);padding:44px 0 8px;color:#fff}
.filros-galeria .fg-cta-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;margin-bottom:26px}
.filros-galeria .fg-cta-txt{flex:1 1 420px}
.filros-galeria .fg-cta-band h2{font-family:var(--fg-font);font-weight:800;font-size:clamp(28px,4vw,44px);line-height:1.08;margin:6px 0 10px;letter-spacing:-.01em}
.filros-galeria .fg-cta-band h2 a{color:#fff;text-decoration:none}
.filros-galeria .fg-cta-band .fg-lead{color:rgba(255,255,255,.85);font-size:16px}
.filros-galeria .fg-btn{flex:none;display:inline-block;background:var(--fg-magenta);color:#fff;text-decoration:none;font-size:16px;font-weight:600;padding:13px 28px;border-radius:25px;transition:background .15s,transform .15s}
.filros-galeria .fg-btn:hover{background:#fff;color:var(--fg-azul)}
/* adelanto: mosaico parejo de fotos cuadradas (10 por fila en escritorio) */
.filros-galeria .fg-cta-band .fg-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.filros-galeria .fg-cta-band .fg-grid::after{display:none}
.filros-galeria .fg-cta-band .fg-ph{flex:none;aspect-ratio:1;cursor:pointer;background:var(--fg-azul2);border-radius:3px}
.filros-galeria .fg-cta-band .fg-ph .cr{font-size:11px;font-weight:600;line-height:1.25;padding:20px 6px 5px}
.filros-galeria .fg-cta-band .fg-foot{color:rgba(255,255,255,.55);padding:18px 0 30px;margin:0}
/* 15 al azar: mosaico parejo 5 × 3 (3 columnas en tablet y móvil) */
.filros-galeria .fg-rand{padding-top:32px;padding-bottom:32px}
.filros-galeria .fg-rand-head{margin-bottom:20px}
.filros-galeria .fg-rand-head h2{font-family:var(--fg-font);font-weight:800;font-size:clamp(26px,3.4vw,38px);line-height:1.1;color:var(--fg-azul);margin:6px 0 8px}
.filros-galeria .fg-rand .fg-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.filros-galeria .fg-rand .fg-grid::after{display:none}
.filros-galeria .fg-rand .fg-ph{flex:none;aspect-ratio:3/2}
.filros-galeria .fg-rand-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;padding-top:22px}
.filros-galeria .fg-mezclar{font:inherit;font-size:15px;line-height:1.2;color:var(--fg-azul);background:#fff;border:1px solid var(--fg-azul100);border-radius:25px;padding:12px 22px;cursor:pointer;margin:0}
.filros-galeria .fg-mezclar:hover{border-color:var(--fg-azul)}
.filros-galeria .fg-rand .fg-btn:hover{background:var(--fg-azul);color:#fff}
.filros-galeria .fg-foot{padding:28px 0 48px;color:var(--fg-muted);font-size:13px}

/* visor (va colgado de <body> para quedar por encima del header de Bricks) */
.fg-lb{position:fixed;inset:0;z-index:100000;background:var(--fg-noche);display:none;color:#fff;font-family:var(--fg-font);font-size:14px;line-height:1.4}
.fg-lb.open{display:grid;grid-template-rows:auto 1fr auto}
.fg-lb .top,.fg-lb .bot{display:flex;align-items:center;gap:14px;padding:12px 18px}
.fg-lb .t{opacity:.85}
.fg-lb .sp{flex:1}
.fg-lb button,.fg-lb a.btn{font:inherit;font-size:13px;color:#fff;background:rgba(255,255,255,.1);border:0;border-radius:25px;padding:8px 15px;cursor:pointer;text-decoration:none;margin:0;line-height:1.2}
.fg-lb button:hover,.fg-lb a.btn:hover{background:rgba(255,255,255,.2)}
.fg-lb a.btn{background:var(--fg-magenta)}
.fg-lb a.btn:hover{background:#ff7385}
.fg-lb .stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:0 64px}
.fg-lb .stage img{max-width:100%;max-height:calc(100vh - 124px);width:auto;height:auto;object-fit:contain;user-select:none}
.fg-lb .nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;font-size:24px;padding:0}
.fg-lb .prev{left:10px}.fg-lb .next{right:10px}
.fg-lb .credit b{font-weight:700}
.fg-lb .fn{opacity:.5;font-size:12px}

@media (max-width:900px){.filros-galeria .fg-cta-band .fg-grid{grid-template-columns:repeat(5,1fr)}.filros-galeria .fg-rand .fg-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){
  .filros-galeria .fg-wrap{padding:0 14px}
  .filros-galeria .fg-ph{--h:110px}
  .filros-galeria .fg-cta-band .fg-grid{grid-template-columns:repeat(4,1fr);gap:3px}
  .filros-galeria .fg-cta-band .fg-ph .cr{display:none}
  .filros-galeria .fg-rand .fg-grid{gap:4px}
  .filros-galeria .fg-rand .fg-ph{aspect-ratio:1}
  .filros-galeria .fg-rand .fg-ph .cr{display:none}
  .filros-galeria .fg-cta-band{padding-top:30px}
  .filros-galeria .fg-btn{width:100%;text-align:center}
  .filros-galeria .fg-grid{gap:4px}
  .filros-galeria .fg-hero{padding:26px 0 22px}
  .fg-lb .stage{padding:0}.fg-lb .nav{background:rgba(12,24,55,.5)}.fg-lb .fn,.fg-lb .t{display:none}
}