.ferbal-photo-trigger{display:contents;cursor:zoom-in}
.ferbal-photo-trigger:focus-visible img{outline:3px solid #ee262e;outline-offset:-3px}
.ferbal-visor-open{overflow:hidden}
.ferbal-visor{inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(0,0,0,.95);color:white;overflow:hidden;touch-action:pan-y}
.ferbal-visor[open]{display:grid;place-items:center}
.ferbal-visor img{max-width:100%;max-height:100dvh;width:auto;height:auto;object-fit:contain}
.ferbal-visor button{position:absolute;display:grid;place-items:center;padding:0;width:46px;height:46px;border:1px solid #fff8;border-radius:50%;background:#111d;color:#fff;font:32px/1 system-ui;cursor:pointer}
.ferbal-visor button[hidden]{display:none}
.ferbal-visor button:focus-visible{outline:2px solid white;outline-offset:3px}
.visor-close{top:16px;right:16px}
.visor-prev,.visor-next{top:50%;transform:translateY(-50%)}
.visor-prev{left:12px}
.visor-next{right:12px}
.ferbal-visor output{position:absolute;bottom:12px;padding:5px 12px;background:#111d;border-radius:20px;font-size:14px;pointer-events:none}

@media (min-width:1001px) and (max-width:1250px) {
  .site-header:has(a[href="inspiracion.html"]) {padding-inline:2%;gap:14px}
  .site-header:has(a[href="inspiracion.html"]) .site-nav {gap:10px}
  .site-header:has(a[href="inspiracion.html"]) .site-nav>a,
  .site-header:has(a[href="inspiracion.html"]) .site-nav summary {font-size:12px}
}

.hero > .ferbal-hero-photo-trigger {
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:zoom-in;
}
.hero > .ferbal-hero-photo-trigger:focus-visible {
  outline:3px solid #fff;
  outline-offset:-5px;
}
.hero:has(> .ferbal-hero-photo-trigger) > .hero-copy {z-index:2}
