/* ════════════════════════════════════════════════════════════════════
   FOGEL STUDIO v2 — la hoja de contactos y la lupa (fase 4, js/hoja.js)
   Tiras de película sobre una mesa de luz. La usan archivo.html y las páginas de tema.
   ════════════════════════════════════════════════════════════════════ */

/* ── la mesa de luz: acrílico lechoso iluminado desde abajo ── */
.mesa-luz{--tinta:#16202c;--tinta-2:#5a6474;position:relative;color:var(--tinta);
  background:radial-gradient(140% 60% at 50% 0%,#fdfaf5 0%,#f2eadf 48%,#e4d8c7 100%);
  padding:clamp(48px,6vw,90px) var(--gut) clamp(64px,8vw,110px)}
/* regla en el borde de la mesa */
.mesa-luz::before{content:"";position:absolute;left:0;right:0;top:0;height:13px;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(22,32,44,.55) 0 1px,transparent 1px 10px) 0 0/100% 5px no-repeat,
             repeating-linear-gradient(90deg,rgba(22,32,44,.7) 0 1px,transparent 1px 50px) 0 0/100% 12px no-repeat}
.mesa-luz .reg{--ia:1;color:var(--tinta)}
.mesa-luz .code{color:var(--terra-deep)}

/* columna con hueco fijo: las hojas ocultas por un filtro no dejan hueco */
.mesa-luz{display:flex;flex-direction:column;gap:clamp(72px,9vw,130px)}
.hoja{position:relative;width:100%;max-width:1480px;margin:0 auto}
.hoja-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:clamp(16px,2vw,26px);padding:0 6px}
.hoja-h h2{font-size:clamp(1.9rem,4.4vw,3.8rem)}
@media (max-width:360px){.hoja-h h2{font-size:1.65rem}}   /* "PRODUCTO" ≈ 9,9 em: en 320 px no cabía a 1,9 rem */
.mesa-luz .hoja-n{color:var(--tinta-2);letter-spacing:.22em}
.hoja-pie{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px;margin-top:18px;padding:0 6px}
.hoja-pie .hand{font-size:1.4rem;color:var(--grease)}
.mesa-luz .hoja-pie .code{color:var(--tinta-2)}

/* ── las tiras: base de película; las perforaciones dejan pasar la luz de la mesa ── */
.tiras{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(12px,1.6vw,20px);padding:0 6px}
.tira{position:relative;display:flex;gap:var(--g,6px);padding:17px var(--p,8px) 26px;background:#0d0d0f;
  transform:translateX(var(--jx,0)) rotate(var(--jr,0));box-shadow:0 2px 7px rgba(60,44,28,.18)}
.tira::before,.tira::after{content:"";position:absolute;left:5px;right:5px;height:6px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Crect x='3' y='.5' width='6' height='5' rx='1.3' fill='%23fbf5ea'/%3E%3C/svg%3E") 0 0/12px 6px repeat-x}
.tira::before{top:5px}
.tira::after{bottom:5px}

.cuadro{position:relative;flex:none;display:block;background:#1a1a1d;text-align:left}
.cuadro img,.cuadro .previa{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cuadro img{filter:grayscale(1) contrast(1.07) brightness(.96);transition:filter .5s var(--ease)}
.cuadro .previa{opacity:0;transition:opacity .3s}
.cuadro.vivo .previa{opacity:1}
.cuadro:hover img,.cuadro:focus-visible img,.tira.enfoque .cuadro img{filter:none}
.cuadro:focus-visible{outline-offset:3px}
/* número de borde, como en la película: 1, 1A, 2, 2A… */
.cuadro .n{position:absolute;left:1px;top:calc(100% + 6px);font-size:8px;line-height:1;letter-spacing:.14em;color:var(--terra);white-space:nowrap;pointer-events:none}
.cuadro .n::before{content:"▸ "}

/* ── lápiz graso ── */
.gp{pointer-events:none;overflow:visible}
.gp path{fill:none;stroke:var(--grease);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1}
.cuadro .gp{position:absolute;left:-9px;top:-10px;width:calc(100% + 18px);height:calc(100% + 20px);z-index:3}
.cuadro .gp path{opacity:.94;transition:stroke-dashoffset 1.1s cubic-bezier(.6,.1,.2,1) var(--d,0s)}
.hoja.in .cuadro .gp path{stroke-dashoffset:0}
.cuadro .nota{position:absolute;left:18%;bottom:calc(100% + 3px);z-index:4;font-family:'Caveat',cursive;font-weight:600;font-size:1.18rem;
  line-height:1;color:var(--grease);white-space:nowrap;transform:rotate(-5deg);transform-origin:left bottom;pointer-events:none;
  opacity:0;transition:opacity .5s .9s}
.hoja.in .cuadro .nota{opacity:1}

@media (max-width:640px){
  .tira{padding:13px var(--p,6px) 20px}
  .tira::before{top:3px}.tira::after{bottom:3px}
  .cuadro .n{top:calc(100% + 4px);font-size:7px}
  .cuadro .nota{font-size:1rem}
  .hoja-pie .hand{font-size:1.2rem}
}

/* ════════════ LA LUPA (solo con cursor) ════════════ */
html.con-lupa .tiras,html.con-lupa .tiras *{cursor:none}
.lupa{position:fixed;left:0;top:0;z-index:950;width:180px;height:180px;border-radius:50%;pointer-events:none;opacity:0;
  transform:translate3d(-400px,-400px,0);will-change:transform,opacity;
  box-shadow:0 0 0 2px #0c0c0f,0 0 0 6px #1e1e24,0 0 0 7px rgba(255,255,255,.2),0 20px 46px rgba(20,14,8,.42)}
/* Chrome y Edge: el vidrio refracta de verdad (filtro #lupaFx, armado en hoja.js) */
.lupa.refracta{backdrop-filter:url(#lupaFx)}
/* el vidrio: reflejo, viñeta del borde y el filo bicolor del lente */
.lupa-v{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 31% 25%,rgba(255,255,255,.3),rgba(255,255,255,0) 30%),
             radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 64%,rgba(10,12,20,.3) 100%);
  box-shadow:inset 5px 0 8px -4px rgba(91,143,207,.8),inset -5px 0 8px -4px rgba(216,128,92,.8)}
.lupa-v::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;
  background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(0,0,0,.45)}
/* cinta de enmascarar con el nombre a mano */
.lupa-tag{position:absolute;left:50%;top:calc(100% + 16px);width:max-content;max-width:280px;padding:7px 16px 8px;text-align:center;
  background:rgba(238,226,203,.95);color:#1b2430;transform:translateX(-50%) rotate(-2deg);transition:opacity .2s;
  clip-path:polygon(2% 0,98% 0,100% 14%,98.4% 32%,100% 52%,98.2% 72%,100% 90%,98% 100%,2% 100%,0 86%,1.6% 66%,0 46%,1.8% 26%,0 10%)}
.lupa-tag b{display:block;font-family:'Caveat',cursive;font-weight:600;font-size:1.4rem;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lupa-tag small{display:block;margin-top:4px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#6d5a48;white-space:nowrap}
.lupa.arriba .lupa-tag{top:auto;bottom:calc(100% + 16px)}
.lupa.sin-tag .lupa-tag{opacity:0}

@media (prefers-reduced-motion:reduce){
  .cuadro .gp path,.cuadro .nota,.cuadro img{transition:none}
}