/* VisorLab · Galería de casos */
.vlc{
  --vlc-paper:#F5F6F2; --vlc-ink:#15171B; --vlc-line:rgba(40,70,110,.18);
  --vlc-accent:#14463F; --vlc-on-accent:#D8F3E6;
  --vlc-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  position:relative; width:100%; background:var(--vlc-paper); color:var(--vlc-ink);
}
.vlc *, .vlc *::before, .vlc *::after{box-sizing:border-box}

.vlc-scroller{position:relative;height:var(--vlc-len,340vh)}
.vlc-stage{position:sticky;top:var(--vlc-offset,0px);height:calc(100vh - var(--vlc-offset,0px));overflow:hidden}
@supports (height:100svh){ .vlc-stage{height:calc(100svh - var(--vlc-offset,0px))} }
.vlc-grid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.vlc-world{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;z-index:2}

/* Panel intro */
.vlc-intro{position:absolute;z-index:3;overflow:hidden;border-radius:2px;background:var(--vlc-paper)}
.vlc-fill{position:absolute;inset:0;background:var(--vlc-accent);opacity:0}
.vlc-intro p{position:absolute;left:clamp(16px,2vw,28px);right:clamp(16px,2vw,28px);top:clamp(16px,2.4vw,30px);margin:0;
  font-weight:700;font-size:clamp(26px,3.1vw,46px);line-height:1.05;letter-spacing:-.02em;text-wrap:balance;max-width:17ch}
.vlc-intro .vlc-t1{color:var(--vlc-accent)}
.vlc-intro .vlc-t2{color:var(--vlc-on-accent);opacity:0;max-width:22ch;font-size:clamp(22px,2.4vw,36px)}
.vlc-mark{position:absolute;left:clamp(12px,1.6vw,24px);bottom:clamp(12px,1.6vw,24px);width:clamp(30px,3vw,44px);height:auto;color:var(--vlc-accent);z-index:2}
.vlc-hint{position:absolute;right:clamp(12px,1.6vw,24px);bottom:clamp(12px,1.6vw,24px);font:500 11px/1 var(--vlc-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--vlc-accent);z-index:2}

/* Bloques */
.vlc .vlc-tile{position:absolute;display:flex;flex-direction:column;justify-content:space-between;margin:0;
  padding:clamp(14px,1.6vw,24px);background:var(--c);color:var(--on);border:0;border-radius:2px;text-align:left;cursor:pointer;
  font:inherit;line-height:normal;text-transform:none;letter-spacing:normal;box-shadow:none;overflow:hidden;
  transition:background-color .25s ease,color .25s ease}
.vlc-head{display:block}
.vlc-tile .vlc-name{display:block;font-weight:700;font-size:clamp(18px,1.75vw,28px);letter-spacing:-.015em;line-height:1.05}
.vlc-kind{display:block;margin:6px 0 0;font:500 11px/1.3 var(--vlc-mono);letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.vlc-art{align-self:flex-end;width:min(62%,190px);height:auto;max-height:58%;overflow:visible}
.vlc-art-img{object-fit:contain}
.vlc-art .f{fill:currentColor;stroke:currentColor;stroke-width:0;transition:fill .25s,stroke-width .25s}
.vlc-art .s{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.vlc .vlc-tile:hover,.vlc .vlc-tile:focus-visible{background:var(--vlc-ink);color:var(--vlc-paper)}
.vlc-tile:hover .vlc-art .f,.vlc-tile:focus-visible .vlc-art .f{fill:none;stroke-width:1.6}
.vlc-tile:hover .vlc-art-img,.vlc-tile:focus-visible .vlc-art-img{filter:invert(1) grayscale(1) brightness(1.4)}
.vlc .vlc-tile:focus-visible{outline:3px solid var(--c);outline-offset:3px}
.vlc-go{position:absolute;left:clamp(14px,1.6vw,24px);bottom:clamp(14px,1.6vw,24px);font:500 12px/1 var(--vlc-mono);opacity:0;transform:translateX(-6px);transition:.25s}
.vlc-tile:hover .vlc-go,.vlc-tile:focus-visible .vlc-go{opacity:1;transform:none}

/* Teléfono / vertical (lo activa el JS) */
.vlc.is-compact .vlc-tile{padding:10px}
.vlc.is-compact .vlc-tile .vlc-name{font-size:clamp(14px,4vw,18px)}
.vlc.is-compact .vlc-tile .vlc-kind{font-size:9px;letter-spacing:.05em;margin-top:4px}
.vlc.is-compact .vlc-art{width:58%;max-height:52%}
.vlc.is-compact .vlc-go{display:none}
.vlc.is-compact .vlc-intro p{font-size:clamp(20px,6.2vw,28px);left:14px;right:14px;top:16px}
.vlc.is-compact .vlc-intro .vlc-t2{font-size:clamp(15px,4.4vw,20px)}

/* Ficha de detalle (se agrega al body) */
.vlc-scrim{position:fixed;inset:0;z-index:99998;background:rgba(10,12,14,.45);opacity:0;transition:opacity .4s}
.vlc-scrim.on{opacity:1}
.vlc-detail{--vlc-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  position:fixed;z-index:99999;background:var(--c);color:var(--on);overflow:auto;border-radius:2px;box-sizing:border-box;
  transition:left .55s cubic-bezier(.7,0,.2,1),top .55s cubic-bezier(.7,0,.2,1),width .55s cubic-bezier(.7,0,.2,1),height .55s cubic-bezier(.7,0,.2,1)}
.vlc-detail *{box-sizing:border-box}
.vlc-detail-in{padding:clamp(20px,3vw,44px);display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:1.1fr .9fr;opacity:0;transition:opacity .3s}
.vlc-detail.open .vlc-detail-in{opacity:1;transition-delay:.35s}
.vlc-detail h2{margin:0;color:inherit;font-weight:800;font-size:clamp(34px,5vw,72px);line-height:.95;letter-spacing:-.03em;text-wrap:balance}
.vlc-detail .vlc-kind{font-size:12px;letter-spacing:.1em;margin:0 0 14px}
.vlc-detail .vlc-lead{font-size:clamp(17px,1.5vw,21px);line-height:1.4;max-width:46ch;margin:22px 0 0;font-weight:500}
.vlc-detail .vlc-link{display:inline-block;margin-top:24px;color:inherit;font:500 13px/1 var(--vlc-mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:4px}
.vlc-detail dl{margin:0;display:grid;gap:18px;align-content:start}
.vlc-detail dt{font:500 11px/1 var(--vlc-mono);letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin:0 0 6px}
.vlc-detail dd{margin:0;font-size:16px;line-height:1.45}
.vlc-detail ul{margin:0;padding-left:1.1em}
.vlc-close{position:sticky;top:0;float:right;margin:14px 14px 0 0;background:var(--on);color:var(--c);border:0;border-radius:2px;
  font:500 12px/1 var(--vlc-mono);letter-spacing:.08em;text-transform:uppercase;padding:10px 12px;cursor:pointer;z-index:2}
.vlc-close:hover,.vlc-close:focus{background:var(--on);color:var(--c)}
.vlc-close:focus-visible{outline:3px solid var(--on);outline-offset:3px}
@media (max-width:720px){ .vlc-detail-in{grid-template-columns:1fr} }

@media (prefers-reduced-motion: reduce){
  .vlc-scroller{height:auto}
  .vlc-detail,.vlc-scrim,.vlc-detail-in{transition:none}
}

/* ---------- 1.1 · Fondo de imagen, overlay y hover por caso ---------- */
.vlc{--vlc-hover-ms:600ms;--vlc-zoom:1.08}
.vlc-tile .vlc-head,.vlc-tile .vlc-art{position:relative;z-index:2}
.vlc-tile .vlc-go{z-index:2}
.vlc .vlc-tile:not(.has-bg):hover,.vlc .vlc-tile:not(.has-bg):focus-visible{color:var(--on-h,var(--vlc-paper))}
.vlc .vlc-tile.has-bg:hover,.vlc .vlc-tile.has-bg:focus-visible{background:var(--c);color:var(--on-h,var(--on))}
.vlc-tile.has-bg:hover .vlc-art .f,.vlc-tile.has-bg:focus-visible .vlc-art .f{fill:currentColor;stroke-width:0}
.vlc-tile.no-art .vlc-art{display:none}

.vlc-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;margin:0;border:0;border-radius:0;
  transition:transform var(--vlc-hover-ms) cubic-bezier(.2,.7,.2,1),filter var(--vlc-hover-ms) ease}
.vlc-ov{position:absolute;inset:0;z-index:1;background:var(--ov);transition:opacity var(--vlc-hover-ms) ease;pointer-events:none}
.ov-bottom .vlc-ov{background:linear-gradient(to top,var(--ov) 0%,var(--ov) 30%,transparent 90%)}
.ov-top .vlc-ov{background:linear-gradient(to bottom,var(--ov) 0%,var(--ov) 30%,transparent 90%)}
.ov-none .vlc-ov{background:transparent}
.vlc-ov.vlc-ov-h{opacity:0;background:var(--ov-h)}
.ov-bottom .vlc-ov.vlc-ov-h{background:linear-gradient(to top,var(--ov-h) 0%,var(--ov-h) 30%,transparent 90%)}
.ov-top .vlc-ov.vlc-ov-h{background:linear-gradient(to bottom,var(--ov-h) 0%,var(--ov-h) 30%,transparent 90%)}
.hov-darker .vlc-ov.vlc-ov-h{background:rgba(0,0,0,.38)}

/* Overlay en hover */
.hov-lighter:is(:hover,:focus-visible) .vlc-ov:not(.vlc-ov-h){opacity:.25}
.hov-darker:is(:hover,:focus-visible) .vlc-ov-h{opacity:1}
.hov-custom:is(:hover,:focus-visible) .vlc-ov:not(.vlc-ov-h){opacity:0}
.hov-custom:is(:hover,:focus-visible) .vlc-ov-h{opacity:1}

/* Efecto en la imagen */
.himg-zoom-in:is(:hover,:focus-visible) .vlc-bg{transform:scale(var(--vlc-zoom))}
.himg-zoom-out .vlc-bg{transform:scale(var(--vlc-zoom))}
.himg-zoom-out:is(:hover,:focus-visible) .vlc-bg{transform:scale(1)}
.himg-color .vlc-bg{filter:grayscale(1)}
.himg-color:is(:hover,:focus-visible) .vlc-bg{filter:grayscale(0)}
.himg-unblur .vlc-bg{filter:blur(5px);transform:scale(1.06)}
.himg-unblur:is(:hover,:focus-visible) .vlc-bg{filter:blur(0)}
.himg-pan .vlc-bg{transform:scale(1.14) translateX(-5%)}
.himg-pan:is(:hover,:focus-visible) .vlc-bg{transform:scale(1.14) translateX(5%)}

/* Pantallas táctiles: sin hover, se muestra el estado “en reposo” más legible */
@media (hover:none){
  .himg-color .vlc-bg{filter:none}
  .himg-unblur .vlc-bg{filter:none}
}
@media (prefers-reduced-motion: reduce){
  .vlc-bg,.vlc-ov{transition:none}
  .himg-zoom-in:hover .vlc-bg,.himg-pan .vlc-bg,.himg-pan:hover .vlc-bg,.himg-zoom-out .vlc-bg{transform:none}
}