/* The Collections — acceso privado con el objetivo. Hubents, nov-2026.
   Mismo lenguaje que la web de Lua: negro #080808, blanco roto, Archivo
   semiexpandida en mayúsculas espaciadas, rojo de marca #9C2D30. */
@font-face{font-family:Archivo;src:url('assets/archivo-semiexpanded.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  --ink:#080808;--paper:#f1eee8;--muted:rgba(241,238,232,.62);--faint:rgba(241,238,232,.34);
  --red:#9c2d30;--line:rgba(241,238,232,.18);
  --gutter:clamp(20px,4.7vw,68px);
  --lens:clamp(232px,min(74vw,50svh),430px);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink);color:var(--paper)}
body{min-height:100svh;font-family:Archivo,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit}

/* Fondo: el primer fotograma de la portada de Collections, fuera de foco. */
.lens-backdrop{position:fixed;inset:-6%;background:#0b0b0b url('review-media/drone142/001.jpg') center/cover no-repeat;
  filter:grayscale(1) blur(26px) brightness(.42);transform:scale(1.06);
  transition:filter 1.1s var(--ease-io),transform 1.1s var(--ease-io)}
.lens-veil{position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 70% 50%,transparent 0 35%,rgba(8,8,8,.55) 75%,rgba(8,8,8,.85));
  transition:opacity 1.1s var(--ease-io)}
.is-open .lens-backdrop{filter:grayscale(1) blur(0) brightness(.62);transform:scale(1)}
.is-open .lens-veil{opacity:.35}

/* Cabecera, calcada de la de Collections */
.lens-nav{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:25px var(--gutter)}
.lens-brand img{display:block;width:150px;height:auto}
.lens-nav nav{display:flex;gap:28px}
.lens-nav nav a{font-size:11px;letter-spacing:.2em;text-decoration:none;opacity:.86;min-height:44px;display:flex;align-items:center;transition:opacity .3s}
.lens-nav nav a:hover{opacity:1}

.lens-main{position:relative;z-index:2;min-height:calc(100svh - 94px);display:grid;grid-template-columns:1fr auto;align-items:end;
  gap:clamp(24px,5vw,90px);padding:0 var(--gutter) clamp(36px,7vh,80px)}
.lens-copy{align-self:end;max-width:640px;transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.lens-eyebrow{display:block;font-size:11px;letter-spacing:.18em;color:var(--muted);margin-bottom:22px}
.lens-copy h1{margin:0 0 26px;font-weight:500;font-size:clamp(46px,7.2vw,112px);line-height:.9;letter-spacing:-.01em}
.lens-copy p{margin:0;font-size:15px;line-height:1.6;color:var(--muted);max-width:34em}

.lens-dial{display:flex;flex-direction:column;align-items:center;align-self:center;transition:opacity .6s var(--ease-out),transform .9s var(--ease-io)}
.lens-stage{display:flex;align-items:center;gap:clamp(6px,1.6vw,22px)}
.lens-step{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:rgba(8,8,8,.35);cursor:pointer;
  font-size:22px;line-height:1;display:grid;place-items:center;opacity:.75;transition:opacity .25s,border-color .25s,transform .2s var(--ease-out)}
.lens-step:hover{opacity:1;border-color:rgba(241,238,232,.5)}
.lens-step:active{transform:scale(.94)}
.lens-step span{transform:translateY(-1px)}

/* El objetivo */
.lens{position:relative;width:var(--lens);height:var(--lens);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.65))}
.lens svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lens-ring{position:absolute;inset:0;border-radius:50%;cursor:grab;outline:none}
.lens-ring:active{cursor:grabbing}
.lens-ring:focus-visible{box-shadow:0 0 0 2px var(--ink),0 0 0 4px rgba(241,238,232,.7)}
#lens-rotor{transform-box:view-box;transform-origin:0 0;transition:transform .55s var(--ease-out)}
.lens.is-dragging #lens-rotor{transition:none}
.lens-set{position:absolute;left:50%;top:50%;width:58%;height:58%;transform:translate(-50%,-50%);border-radius:50%;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lens-set:focus-visible{outline:2px solid rgba(241,238,232,.7);outline-offset:4px}
#lens-glint{transition:opacity .4s}
.lens:hover #lens-glint{opacity:1}
.lens.is-hunting #lens-rotor{animation:lens-hunt .7s var(--ease-out)}
@keyframes lens-hunt{0%{rotate:0deg}20%{rotate:-7deg}45%{rotate:5deg}70%{rotate:-2.5deg}100%{rotate:0deg}}

/* Cifras marcadas */
.lens-slots{display:flex;gap:18px;margin-top:clamp(18px,3.4vh,30px)}
.lens-slots span{width:30px;height:38px;border-bottom:1px solid var(--line);display:grid;place-items:center;font-size:20px;letter-spacing:0;
  transition:border-color .3s,transform .35s var(--ease-out)}
.lens-slots span.is-set{border-color:var(--paper)}
.lens-slots span.is-set::before{content:attr(data-d);animation:slot-in .35s var(--ease-out)}
.lens-slots span.is-next{border-color:var(--red)}
.lens-slots.is-wrong{animation:slots-shake .45s var(--ease-out)}
@keyframes slot-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes slots-shake{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}

.lens-status{min-height:2.6em;margin:16px 0 0;font-size:10px;letter-spacing:.18em;color:var(--muted);text-align:center;max-width:36ch;line-height:1.6}
.lens-status.is-error{color:var(--paper)}
.lens-status.is-error::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:10px;vertical-align:1px}

.lens-typed{display:flex;align-items:center;gap:12px;margin-top:8px;font-size:10px;letter-spacing:.18em;color:var(--faint)}
.lens-typed label{text-transform:uppercase}
.lens-typed input{width:5.4em;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--paper);font:inherit;font-size:14px;letter-spacing:.4em;
  padding:8px 0 6px;text-align:center;border-radius:0;transition:border-color .3s}
.lens-typed input:focus{outline:none;border-color:var(--paper)}
.lens-typed button{min-height:44px;padding:0 4px;background:none;border:0;cursor:pointer;letter-spacing:.18em;font-size:10px;color:var(--muted)}
.lens-typed button:hover{color:var(--paper)}

.lens-request{margin-top:28px;font-size:10px;letter-spacing:.18em;text-decoration:none;color:var(--muted);min-height:44px;display:inline-flex;align-items:center;gap:.6em}
.lens-request span{color:var(--paper);border-bottom:1px solid currentColor;padding-bottom:3px;transition:border-color .3s}
.lens-request:hover span{border-color:var(--red)}
.lens-request.is-nudged span{border-color:var(--red)}

.lens-noscript{grid-column:1/-1;font-size:12px;letter-spacing:.12em;color:var(--muted)}

/* Al abrir: el texto se va, el objetivo «entra» y el fondo enfoca */
.is-open .lens-copy{opacity:0;transform:translateY(-10px)}
.is-open .lens-dial{opacity:0;transform:scale(1.18)}

@media (max-width:900px){
  .lens-main{grid-template-columns:1fr;align-items:start;justify-items:center;text-align:center;padding-top:clamp(4px,2vh,24px)}
  .lens-copy{align-self:start}
  .lens-copy h1{font-size:clamp(28px,8.4vw,64px);margin-bottom:14px}
  .lens-copy p{font-size:13px;margin:0 auto}
  .lens-eyebrow{margin-bottom:14px;font-size:9px}
}
@media (max-width:560px){
  .lens-copy-hint{display:none}
  .lens-nav{padding:16px 20px}
  .lens-brand img{width:118px}
  .lens-nav nav{gap:16px}
  .lens-nav nav a{font-size:9px;letter-spacing:.16em}
  .lens-step{width:40px;height:40px;font-size:20px}
  .lens-main{gap:18px}
}
@media (max-width:900px){
  :root{--lens:clamp(220px,min(68vw,40svh),400px)}
  .lens-main{min-height:auto;padding-bottom:28px;gap:22px}
  .lens-slots{margin-top:16px}
  .lens-status{margin-top:12px}
  .lens-request{margin-top:10px}
}
@media (max-height:700px) and (min-width:901px){:root{--lens:clamp(220px,52svh,360px)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}