/* ==========================================================================
   Talleres Juma — extras.css
   Capa de pulido: engranaje de scroll, brillo, luces de faro, lightbox, fluidez móvil
   ========================================================================== */

/* ---------- Engranaje que gira con el scroll (punta de la barra de progreso) ---------- */
.gear-tip{position:fixed;left:0;top:4px;width:22px;height:22px;z-index:300;pointer-events:none;color:var(--red-bright);
  filter:drop-shadow(0 0 8px rgba(239,36,48,.65));will-change:transform}
.gear-tip svg{width:100%;height:100%}

/* ---------- Navegación que se esconde al bajar y vuelve al subir ---------- */
.nav{transition:translate .45s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.nav.hide:not(.open){translate:0 -115%}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--red-bright),var(--blue-bright));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--white)}

/* ---------- Brillo que sigue al cursor / al dedo ---------- */
.service-card,.testimonial-card{position:relative;isolation:isolate}
.service-card::before,.testimonial-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;opacity:0;
  transition:opacity .35s var(--ease);background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(59,99,236,.24),rgba(209,18,31,.07) 55%,transparent 75%)}
.service-card:hover::before,.testimonial-card:hover::before,.service-card.lit::before,.testimonial-card.lit::before{opacity:1}

/* ---------- Ambiente: luces de faro que cruzan, brillo de cursor, ripple táctil ---------- */
.streaks{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.streaks i{position:absolute;left:-40vw;top:var(--y);width:36vw;height:2px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--c),transparent);box-shadow:0 0 14px var(--c);
  animation:streak var(--d) cubic-bezier(.45,0,.2,1) var(--dl) infinite}
@keyframes streak{0%{transform:translate3d(0,0,0);opacity:0}3%{opacity:.55}13%{transform:translate3d(190vw,0,0);opacity:0}100%{transform:translate3d(190vw,0,0);opacity:0}}
.cursor-glow{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(circle,rgba(59,99,236,.15),rgba(209,18,31,.05) 45%,transparent 70%);will-change:transform}
.cursor-glow.on{opacity:1}
.ripple{position:fixed;z-index:55;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;pointer-events:none;
  border:2px solid rgba(255,255,255,.5);background:rgba(239,36,48,.25);animation:rip .7s var(--ease) forwards}
@keyframes rip{to{transform:scale(7);opacity:0}}

/* ---------- Parallax suave en la galería (sin JS, corre en el compositor) ---------- */
@supports (animation-timeline:view()){
  .gallery-image-wrap img{scale:1.14;animation:gpar linear both;animation-timeline:view()}
  @keyframes gpar{from{translate:0 -5%}to{translate:0 5%}}
}
.gallery-item{cursor:zoom-in}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;
  background:rgba(6,12,43,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.lb.open{opacity:1;pointer-events:auto}
.lb img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:var(--radius-md);box-shadow:var(--shadow-deep);transform:scale(.94);transition:transform .45s var(--ease)}
.lb.open img{transform:none}
.lb-cap{font-family:var(--font-display);letter-spacing:.08em;text-transform:uppercase;font-size:.95rem;color:var(--ice);text-align:center}
.lb-cap small{display:block;margin-top:4px;font-family:var(--font-body);letter-spacing:.14em;font-size:.72rem;color:var(--steel)}
.lb button{position:absolute;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--surface-hi);color:#fff;font-size:1.7rem;border:1px solid var(--border-soft);transition:background .25s}
.lb button:hover{background:var(--red)}
.lb-x{top:16px;right:16px}.lb-prev{left:16px;top:50%;margin-top:-25px}.lb-next{right:16px;top:50%;margin-top:-25px}
@media(max-width:700px){.lb-prev,.lb-next{top:auto;bottom:22px;margin:0}.lb-prev{left:22px}.lb-next{right:22px}.lb img{max-height:70vh}}

/* ---------- Fluidez en celular: sin desenfoque animado, blur más liviano ---------- */
@media(max-width:899px){
  .reveal{filter:none;transform:translateY(22px)}
  .reveal.is-visible{filter:none;transform:none}
  .service-card,.testimonial-card,.footer,.social-pill{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .cursor-glow{display:none}
  .streaks i:nth-child(n+3){display:none}
}
@media(hover:none){.service-card:active{transform:scale(.985)}}
@media(prefers-reduced-motion:reduce){.streaks,.cursor-glow,.ripple,.gear-tip{display:none}
  .gallery-image-wrap img{animation:none;scale:1}}