/* viewer.css — OWNER viewer · Slide 5 · Visor 3D interactivo */

#slide-6{
  background:var(--navy-900);
  padding:0;
}

.viewer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.viewer__canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  touch-action:pan-y;         /* permite scroll vertical de la página sobre el visor */
  cursor:grab;
}
.viewer__canvas:active{cursor:grabbing}

/* ---------- Encabezado ---------- */
.viewer__head{
  position:absolute;
  top:clamp(28px,6vh,64px);
  left:clamp(24px,5vw,80px);
  z-index:6;
  max-width:min(440px,52vw);
  pointer-events:none;
}
.viewer__title{
  margin:.5rem 0 0;
  font-size:clamp(2rem,4.4vw,3.4rem);
  color:var(--ink);
  text-shadow:0 2px 30px rgba(2,6,18,.55);
}
.viewer__lede{
  margin:.85rem 0 0;
  max-width:36ch;
  font-size:clamp(.9rem,1.15vw,1.02rem);
  line-height:1.55;
  color:var(--muted);
  text-shadow:0 1px 14px rgba(2,6,18,.6);
}

/* ---------- Estado carga / error ---------- */
.viewer__status{
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.1rem;
  color:var(--muted);
  font-size:.95rem;
  letter-spacing:.02em;
  transition:opacity .5s var(--ease);
  pointer-events:none;
}
.viewer__status.is-hidden{opacity:0}
.viewer__spinner{
  width:42px;height:42px;
  border-radius:50%;
  border:2px solid rgba(148,163,200,.22);
  border-top-color:var(--accent);
  animation:viewer-spin 900ms linear infinite;
}
.viewer__status.is-error .viewer__spinner{
  animation:none;
  border:2px dashed var(--steel-dim);
  border-top-color:var(--steel-dim);
}
.viewer__status-text{max-width:30ch;text-align:center;line-height:1.5}
@keyframes viewer-spin{to{transform:rotate(360deg)}}

/* ---------- Panel de controles (glass) ---------- */
.viewer__panel{
  position:absolute;
  right:clamp(20px,3vw,42px);
  bottom:clamp(64px,9vh,84px);
  z-index:7;
  width:clamp(248px,23vw,300px);
  padding:0;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(160deg,rgba(15,31,85,.55),rgba(6,13,40,.62));
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
}
.viewer__panel-toggle{
  display:flex;align-items:center;gap:.55rem;
  width:100%;
  padding:.95rem 1.1rem;
  border:0;background:transparent;
  font-family:var(--font-head);
  font-size:.72rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--steel);
  cursor:pointer;
}
.viewer__panel-toggle-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px var(--accent);
}
.viewer__panel-body{
  padding:0 1.1rem 1.15rem;
  display:flex;flex-direction:column;gap:1.25rem;
  overflow:hidden;
  transition:max-height .4s var(--ease),opacity .3s var(--ease);
  max-height:420px;
}
.viewer__panel.is-collapsed .viewer__panel-body{
  max-height:0;opacity:0;padding-top:0;padding-bottom:0;
}

.viewer__group{display:flex;flex-direction:column;gap:.7rem}

/* ---------- Zoom (sustituye al zoom por rueda) ---------- */
.viewer__zoom{display:flex;gap:.5rem;align-items:stretch}
.viewer__zoom-btn{
  flex:none;
  min-width:38px;height:38px;
  display:grid;place-items:center;
  padding:0 .6rem;
  border:1px solid var(--line);border-radius:11px;
  background:rgba(6,13,40,.4);
  color:var(--ink);
  font-family:var(--font-head);
  font-size:1.15rem;font-weight:600;line-height:1;
  cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
.viewer__zoom-reset{
  flex:1;
  font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
.viewer__zoom-btn:hover{
  color:var(--ink);
  border-color:var(--accent);
  background:rgba(79,124,255,.14);
}
.viewer__zoom-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(79,124,255,.35)}
.viewer__zoom-btn:active{transform:translateY(1px)}
.viewer__group-title{
  font-family:var(--font-head);
  font-size:.66rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-soft);
  margin:0;
}

/* ---------- Sliders ---------- */
.viewer__ctrl{display:flex;flex-direction:column;gap:.4rem}
.viewer__ctrl-label{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:.82rem;color:var(--muted);
}
.viewer__ctrl-label em{
  font-style:normal;
  font-variant-numeric:tabular-nums;
  font-weight:600;color:var(--ink);
  font-size:.8rem;
}
.viewer__slider{
  -webkit-appearance:none;appearance:none;
  width:100%;height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent) var(--fill,50%),rgba(148,163,200,.2) var(--fill,50%));
  outline:none;cursor:pointer;
}
.viewer__slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:var(--ink);
  border:3px solid var(--accent);
  box-shadow:0 2px 8px rgba(0,0,0,.5);
  transition:transform .15s var(--ease);
}
.viewer__slider::-webkit-slider-thumb:hover{transform:scale(1.18)}
.viewer__slider::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:var(--ink);border:3px solid var(--accent);
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.viewer__slider::-moz-range-track{height:4px;border-radius:99px;background:rgba(148,163,200,.2)}

/* ---------- Toggle ---------- */
.viewer__switch{
  display:flex;align-items:center;gap:.6rem;
  cursor:pointer;font-size:.82rem;color:var(--muted);
  margin-top:.1rem;
}
.viewer__switch input{position:absolute;opacity:0;width:0;height:0}
.viewer__switch-track{
  position:relative;width:36px;height:20px;border-radius:99px;
  background:rgba(148,163,200,.22);
  border:1px solid var(--line);
  transition:background .25s var(--ease);
  flex:none;
}
.viewer__switch-thumb{
  position:absolute;top:2px;left:2px;
  width:14px;height:14px;border-radius:50%;
  background:var(--steel);
  transition:transform .25s var(--ease),background .25s var(--ease);
}
.viewer__switch input:checked + .viewer__switch-track{background:var(--accent)}
.viewer__switch input:checked + .viewer__switch-track .viewer__switch-thumb{
  transform:translateX(16px);background:#fff;
}
.viewer__switch input:focus-visible + .viewer__switch-track{box-shadow:0 0 0 3px rgba(79,124,255,.35)}

/* ---------- Swatches de fondo ---------- */
.viewer__swatches{display:flex;flex-wrap:wrap;gap:.5rem}
.viewer__swatch{
  position:relative;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.4rem .65rem .4rem .5rem;
  border:1px solid var(--line);border-radius:99px;
  background:rgba(6,13,40,.4);
  color:var(--muted);
  font-size:.74rem;font-family:var(--font-body);
  cursor:pointer;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.viewer__swatch::before{
  content:"";width:13px;height:13px;border-radius:50%;
  background:var(--sw);
  border:1px solid rgba(255,255,255,.18);
  flex:none;
}
.viewer__swatch:hover{color:var(--ink);border-color:var(--steel-dim)}
.viewer__swatch.is-active{
  color:var(--ink);
  border-color:var(--accent);
  background:rgba(79,124,255,.14);
}
.viewer__swatch--custom{padding:.4rem;overflow:hidden}
.viewer__swatch--custom::before{display:none}
.viewer__swatch--custom input[type=color]{
  position:absolute;inset:0;opacity:0;cursor:pointer;
}
.viewer__swatch-plus{
  width:13px;height:13px;display:grid;place-items:center;
  font-size:1rem;line-height:1;color:var(--steel);
}

/* ---------- Hint ---------- */
.viewer__hint{
  position:absolute;
  left:clamp(24px,5vw,80px);
  bottom:clamp(26px,5vh,40px);
  z-index:6;
  font-size:.74rem;letter-spacing:.04em;
  color:var(--steel-dim);
  pointer-events:none;
}

/* ---------- Barra de scroll (teléfono) ----------
   Oculta en escritorio; en teléfono es una franja a la derecha que SIEMPRE
   scrollea la página (es un div normal, no el canvas), evitando que el gesto
   quede atrapado por la rotación del 3D. */
.viewer__scroll{display:none}

@media (max-width:760px){
  .viewer__head{max-width:80vw}
  .viewer__lede{display:none}
  /* En teléfono se oculta el panel de controles para dejar el modelo limpio */
  .viewer__panel{display:none}
  .viewer__hint{display:none}

  .viewer__scroll{
    position:fixed;               /* fijo: permanece en pantalla para funcionar como scrollbar real */
    top:18%;bottom:14%;right:6px;
    z-index:8;
    width:30px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:8px 0;
    border-radius:999px;
    background:rgba(6,13,40,.55);
    border:1px solid var(--line);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    touch-action:none;            /* el JS controla el scroll a partir del gesto */
    opacity:0;                    /* visible solo en la slide 3D o mientras se arrastra (JS) */
    pointer-events:none;
    transition:opacity .25s var(--ease);
  }
  .viewer__scroll.is-active{opacity:1;pointer-events:auto}
  .viewer__scroll-arrow{
    flex:none;
    width:24px;height:24px;
    display:grid;place-items:center;
    border:0;border-radius:50%;
    background:rgba(79,124,255,.16);
    color:var(--accent-soft);
    font-size:.6rem;line-height:1;
    cursor:pointer;
  }
  .viewer__scroll-arrow:active{background:rgba(79,124,255,.34);color:#fff}
  .viewer__scroll-track{
    position:relative;
    flex:1;
    width:4px;
    border-radius:99px;
    background:rgba(148,163,200,.25);
    overflow:visible;
  }
  .viewer__scroll-thumb{
    position:absolute;
    left:50%;transform:translateX(-50%);
    top:42%;
    width:10px;height:42px;
    border-radius:99px;
    background:linear-gradient(180deg,var(--accent),var(--red));
    box-shadow:0 2px 10px -2px rgba(58,107,255,.7);
  }
}