Chapultepec - Fideicomiso PRO ZOO CDMX

@import url(‘https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap’); .prozo-gallery-root{ –ink:#000; –accent:#96c120; –accent2:#d34a94; –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(520px, 86vw); /* <— ajusta ancho máximo aquí */ –lb-max-h: 50vh; /* <— ajusta alto máximo aquí */ –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:inline-flex;gap:8px;align-items:center;margin-bottom:18px} .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)} /* Tabs + search */ .prozo-tabsbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:14px} .prozo-tablist{display:flex;gap:6px;flex-wrap:wrap} .prozo-tab{appearance:none;border:0;border-radius:999px;padding:8px 14px;font-weight:700;cursor:pointer; background:#ffffff;color:#000;box-shadow:inset 0 0 0 2px transparent} .prozo-tab.is-active{background:var(–accent);color:#000} .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 (título) sobre la imagen — más pequeña y semitransparente */ .prozo-tag{ position:absolute;left:10px;top:10px; font-size:.72rem; padding:3px 8px; background:rgba(150,193,32,.4); 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:#fff;border:0;padding:8px 14px;border-radius:999px;font-weight:800;text-decoration:none;box-shadow:0 6px 14px rgba(230,186,30,.35)} .prozo-card:hover .prozo-view{transform:translateY(-1px)} /* Panels */ .prozo-panel{display:none} .prozo-panel.is-active{display:block} /* ===== Lightbox (usa variables) ===== */ .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)); /* <— lo sube un poco */ } .prozo-lightbox img{ width:100%; height:auto; max-height: calc(var(–lb-max-h) – 56px); /* deja espacio a la leyenda/botón */ object-fit:contain; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.5); } /* Leyenda del lightbox — más discreta */ .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(225,163,34,.45); z-index:3; cursor:pointer; touch-action:manipulation; } /* Capa de fondo clicable para cerrar */ .prozo-lightbox .content{ z-index:2; } .prozo-overlay-close{ position:absolute; inset:0; z-index:1; } /* ===== Móvil: más compacto y menos offset ===== */ @media (max-width:600px){ .prozo-tabsbar{gap:8px} .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; } }

Habitantes

Lobo mexicano (amenazado) — Lobo mexicano

/* ===== TABS + BUSCADOR ===== */ (() => { const root = document.currentScript.closest(‘.prozo-gallery-root’); const tabs = root.querySelectorAll(‘.prozo-tab’); const panels = root.querySelectorAll(‘.prozo-panel’); const search = root.querySelector(‘.prozo-search’); function activate(targetId){ tabs.forEach(t=>{ const on = t.dataset.target === targetId; t.classList.toggle(‘is-active’, on); t.setAttribute(‘aria-selected’, on ? ‘true’ : ‘false’); }); panels.forEach(p=>p.classList.toggle(‘is-active’, ‘#’+p.id === targetId)); if(search){ search.value=”; filter(”); } } function filter(q){ const panel = root.querySelector(‘.prozo-panel.is-active’); if(!panel) return; const needle = (q||”).trim().toLowerCase(); panel.querySelectorAll(‘.prozo-card’).forEach(card=>{ const name = (card.dataset.name||”).toLowerCase(); card.style.display = name.includes(needle) ? ” : ‘none’; }); } tabs.forEach(btn=>btn.addEventListener(‘click’, ()=>activate(btn.dataset.target))); if(search){ search.addEventListener(‘input’, e=>filter(e.target.value)); } /* ===== GENERAR LIGHTBOXES AUTOMÁTICAMENTE ===== */ const cards = root.querySelectorAll(‘.prozo-card’); const frag = document.createDocumentFragment(); cards.forEach(card => { const link = card.querySelector(‘.prozo-view’); const img = card.querySelector(‘img’); if(!link || !img) return; const target = (link.getAttribute(‘href’)||”).replace(‘#’,”).trim(); if(!target) return; 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); })();

Habitantes

¡Mantente al tanto de nuestras acciones por la vida silvestre!