Ir al contenido
@import url(‘https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap’);
.prozo-gallery-root{
–ink:#000;
–accent:#96c120; /* color botones/etiquetas */
–accent2:#d34a94; /* color bot贸n cerrar (X) */
–bg:#fff;
–radius:18px; –gap:16px; –shadow:0 8px 24px rgba(0,0,0,.15);
font:normal 16px/1.5 ‘Montserrat’, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
/* ===== Controles del lightbox ===== */
–lb-max-w: min(560px, 86vw); /* ancho m谩ximo */
–lb-max-h: 56vh; /* alto m谩ximo */
–lb-offset-y: -6vh; /* s煤belo/b谩jalo: -8vh, -4vh, 0 */
}
.prozo-gallery-root *{box-sizing:border-box}
.prozo-gallery-root .wrap{max-width:1200px;margin:auto;padding:clamp(12px,3vw,28px)}
.prozo-gallery-root h2{margin:0 0 6px;font-size:clamp(22px,3.2vw,32px);font-weight:800;color:var(–ink)}
.prozo-gallery-root .sub{display:flex;gap:8px;align-items:center;margin-bottom:14px}
.prozo-gallery-root .chip{height:8px;width:56px;border-radius:999px}
.prozo-gallery-root .chip.accent{background:var(–accent)}
.prozo-gallery-root .chip.gold{background:var(–accent2)}
/* Buscador */
.prozo-toolbar{display:flex;justify-content:flex-end;margin:8px 0 16px}
.prozo-search{flex:1 1 260px;max-width:320px;padding:10px 12px;border-radius:12px;border:1px solid #e6e6e6;
outline:none;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.prozo-search::placeholder{color:#666}
/* Grid + cards */
.prozo-grid{display:grid;gap:var(–gap);grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.prozo-card{position:relative;border-radius:var(–radius);overflow:hidden;background:#111;aspect-ratio:3/4;box-shadow:var(–shadow);isolation:isolate}
.prozo-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;filter:saturate(1.02)}
.prozo-card:hover img{transform:scale(1.04)}
/* Etiqueta (m谩s chica y semitransparente) */
.prozo-tag{
position:absolute;left:10px;top:10px;
font-size:.72rem; padding:3px 8px;
background:rgba(150,193,32,.40); color:#fff;
border-radius:999px;font-weight:600;letter-spacing:.2px;
backdrop-filter:saturate(1.2) blur(2px);
box-shadow:0 2px 10px rgba(0,0,0,.25);
}
/* Bot贸n Ver */
.prozo-view{
position:absolute;right:10px;bottom:10px;background:var(–accent);color:#000;border:0;padding:8px 14px;
border-radius:999px;font-weight:800;text-decoration:none;box-shadow:0 6px 14px rgba(150,193,32,.35)
}
.prozo-card:hover .prozo-view{transform:translateY(-1px)}
/* ===== Lightbox ===== */
.prozo-lightbox{
position:fixed; inset:0; background:rgba(0,0,0,.85);
display:none; align-items:center; justify-content:center;
padding:24px; z-index:9999;
}
.prozo-lightbox:target{display:flex}
.prozo-lightbox .content{
position:relative;
max-width: var(–lb-max-w);
max-height: var(–lb-max-h);
transform: translateY(var(–lb-offset-y));
}
.prozo-lightbox img{
width:100%; height:auto;
max-height: calc(var(–lb-max-h) – 56px);
object-fit:contain; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.prozo-lightbox .caption{
margin:10px auto 0; text-align:center; color:#fff; font-weight:600;
font-size:.75rem; opacity:.85;
}
/* Bot贸n cerrar */
.prozo-close{
position:absolute; top:-14px; right:-14px; background:var(–accent2); color:#96c120;
width:40px; height:40px; border-radius:999px; display:grid; place-items:center; text-decoration:none;
font-size:22px; font-weight:800; box-shadow:0 10px 24px rgba(211,74,148,.45);
z-index:3; cursor:pointer; touch-action:manipulation;
}
/* Fondo clicable para cerrar */
.prozo-lightbox .content{ z-index:2; }
.prozo-overlay-close{ position:absolute; inset:0; z-index:1; }
/* M贸vil */
@media (max-width:600px){
.prozo-search{flex-basis:100%;max-width:none}
.prozo-tag{font-size:.68rem; padding:2px 7px}
.prozo-gallery-root{
–lb-max-w: 92vw;
–lb-max-h: 64vh;
–lb-offset-y: -3vh;
}
}
/* ===== Buscador + Lightboxes autom谩ticos ===== */
(() => {
const root = document.currentScript.closest(‘.prozo-gallery-root’);
const search = root.querySelector(‘.prozo-search’);
function filter(q){
const needle = (q||”).trim().toLowerCase();
root.querySelectorAll(‘.prozo-card’).forEach(card=>{
const name = (card.dataset.name||”).toLowerCase();
card.style.display = name.includes(needle) ? ” : ‘none’;
});
}
if(search){ search.addEventListener(‘input’, e=>filter(e.target.value)); }
// Crear lightboxes a partir de cada tarjeta
const cards = root.querySelectorAll(‘.prozo-card’);
const frag = document.createDocumentFragment();
// Helper para slug
const slug = s => (s||’img’)
.toString().toLowerCase()
.normalize(‘NFD’).replace(/[u0300-u036f]/g,”)
.replace(/[^a-z0-9]+/g,’-‘).replace(/(^-|-$)/g,”);
cards.forEach(card => {
const link = card.querySelector(‘.prozo-view’);
const img = card.querySelector(‘img’);
if(!img) return;
// Si no hay href, lo generamos del data-name
let target = link && link.getAttribute(‘href’) ? link.getAttribute(‘href’).replace(‘#’,”).trim() : ”;
if(!target){
target = ‘lb-‘ + slug(card.dataset.name || img.alt || ‘imagen’);
if(link) link.setAttribute(‘href’, ‘#’+target);
}
const name = (card.dataset.name || img.alt || ‘Imagen’).trim();
const lb = document.createElement(‘div’);
lb.id = target;
lb.className = ‘prozo-lightbox’;
lb.setAttribute(‘role’,’dialog’);
lb.setAttribute(‘aria-modal’,’true’);
lb.setAttribute(‘aria-label’, name);
lb.innerHTML = `
脳
${name}
`;
frag.appendChild(lb);
});
root.appendChild(frag);
})();
