/* ═══════════════════════════════════════════════════════════
   PROBADOR VIRTUAL (tryon.jsx)
   Full-screen modal: mirrored camera feed + tracked 3D frames.
   ═══════════════════════════════════════════════════════════ */
.tryon{
  position:fixed;inset:0;z-index:9000;
  display:grid;place-items:center;
  padding:clamp(10px,2.5vw,28px);
}
.tryon-backdrop{
  position:absolute;inset:0;
  background:rgba(4,12,24,0.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:tryonFade 0.28s ease both;
}
@keyframes tryonFade{from{opacity:0;}to{opacity:1;}}

.tryon-shell{
  position:relative;z-index:1;
  width:min(100%,860px);
  max-height:100%;
  display:flex;flex-direction:column;gap:14px;
  padding:clamp(14px,2.4vw,22px);
  border-radius:26px;
  background:linear-gradient(180deg,#0a2542 0%,#061a30 100%);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 60px 120px -50px #000, inset 0 1px 0 rgba(255,255,255,0.07);
  color:#fff;
  animation:tryonRise 0.34s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes tryonRise{from{opacity:0;transform:translateY(18px) scale(0.985);}to{opacity:1;transform:none;}}

/* ── header ── */
.tryon-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.tryon-eyebrow{
  display:flex;align-items:center;gap:9px;
  font-size:11px;letter-spacing:0.2em;text-transform:uppercase;
  color:rgba(255,255,255,0.58);font-weight:600;
}
.tryon-eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 12px var(--accent);
  animation:s3pulse 2.4s ease-in-out infinite;
}
.tryon-close{
  width:36px;height:36px;flex:none;display:grid;place-items:center;
  border-radius:50%;cursor:pointer;
  color:#fff;background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
  transition:background 0.2s ease,transform 0.2s ease;
}
.tryon-close:hover{background:rgba(255,255,255,0.16);transform:scale(1.05);}

/* ── stage ── */
.tryon-stage{
  position:relative;flex:1;min-height:0;
  display:grid;place-items:center;
  border-radius:20px;overflow:hidden;
  background:
    radial-gradient(60% 55% at 50% 40%, rgba(122,178,255,0.13), transparent 70%),
    rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  /* El alto lo pone esto, no un px fijo: la ventana manda y el recuadro de
     cámara se adapta. Antes styles.css le clavaba 340px desde un mockup. */
  min-height:min(62vh,520px);
}
/* Absolutely positioned so it can never push the stage taller than the modal:
   tryon.js sizes it in px to the camera's own aspect ratio once the feed is up. */
.tryon-mirror{
  position:absolute;top:50%;left:50%;
  width:100%;height:100%;
  transform:translate(-50%,-50%) scaleX(-1);/* selfie view — the overlay rides along, so it stays aligned */
  opacity:0;transition:opacity 0.5s ease;
}
.tryon-stage.live .tryon-mirror{opacity:1;}
.tryon-video,
.tryon-canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
}
.tryon-video{object-fit:fill;background:#04101f;}
.tryon-canvas{pointer-events:none;}

/* ── gate / loading / error card ── */
.tryon-gate{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;
  padding:clamp(18px,4vw,34px);
}
.tryon-gate h3{
  font-size:clamp(19px,2.6vw,25px);font-weight:600;letter-spacing:-0.02em;margin:0;
}
.tryon-gate p{
  margin:0;max-width:46ch;
  font-size:14px;line-height:1.6;color:rgba(255,255,255,0.66);
}
.tryon-gate .btn{margin-top:6px;}
.tryon-gate-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px;}
.tryon-gate-icon{
  width:62px;height:62px;display:grid;place-items:center;border-radius:50%;
  color:var(--accent);
  background:rgba(74,144,217,0.12);
  border:1px solid rgba(74,144,217,0.32);
}

.tryon-spinner{display:flex;gap:6px;}
.tryon-spinner span{
  width:8px;height:8px;border-radius:50%;background:var(--accent);
  animation:tryonBounce 1s ease-in-out infinite;
}
.tryon-spinner span:nth-child(2){animation-delay:0.14s;}
.tryon-spinner span:nth-child(3){animation-delay:0.28s;}
@keyframes tryonBounce{0%,100%{opacity:0.25;transform:translateY(0);}50%{opacity:1;transform:translateY(-5px);}}

.tryon-hint-face{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  z-index:2;padding:8px 14px;border-radius:999px;
  font-size:12.5px;white-space:nowrap;
  background:rgba(4,16,31,0.72);border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}

/* ── captured photo ── */
.tryon-shot{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:14px;background:rgba(4,12,24,0.9);
}
.tryon-shot img{
  max-width:100%;max-height:calc(100% - 60px);
  border-radius:14px;border:1px solid rgba(255,255,255,0.14);
}
.tryon-shot-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}

/* ── controls row ── */
.tryon-controls{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.tryon-swatches{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.tryon-swatch{
  width:28px;height:28px;padding:3px;border-radius:50%;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,0.20);
  transition:border-color 0.2s ease,transform 0.2s ease;
}
.tryon-swatch span{
  display:block;width:100%;height:100%;border-radius:50%;
  background:var(--sw);box-shadow:inset 0 1px 2px rgba(0,0,0,0.35);
}
.tryon-swatch:hover{transform:scale(1.08);}
.tryon-swatch.on{border-color:var(--accent);box-shadow:0 0 0 3px rgba(74,144,217,0.22);}
.tryon-swatch-label{
  font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(255,255,255,0.55);font-weight:600;margin-left:4px;
}

.tryon-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.tryon-icon-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;border-radius:999px;cursor:pointer;
  font-size:13px;font-weight:600;color:#fff;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.14);
  transition:background 0.2s ease,border-color 0.2s ease,opacity 0.2s ease;
}
.tryon-icon-btn:hover:not(:disabled){background:rgba(255,255,255,0.14);}
.tryon-icon-btn.on{border-color:var(--accent);background:rgba(74,144,217,0.18);}
.tryon-icon-btn:disabled{opacity:0.38;cursor:not-allowed;}

/* ── fit panel ── */
.tryon-panel{
  display:grid;grid-template-columns:repeat(3,1fr) auto;gap:14px;align-items:center;
  padding:14px 16px;border-radius:16px;
  background:rgba(255,255,255,0.045);
  border:1px solid rgba(255,255,255,0.09);
}
.tryon-panel label{display:flex;flex-direction:column;gap:6px;}
.tryon-panel label span{
  font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.5);font-weight:600;
}
.tryon-panel input[type="range"]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:3px;border-radius:2px;background:rgba(255,255,255,0.18);cursor:pointer;
}
.tryon-panel input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:15px;height:15px;border-radius:50%;background:var(--accent);
  border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,0.4);
}
.tryon-panel input[type="range"]::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;background:var(--accent);
  border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,0.4);
}
.tryon-reset{
  align-self:end;padding:8px 12px;border-radius:999px;cursor:pointer;
  font-size:12px;font-weight:600;color:rgba(255,255,255,0.75);
  background:transparent;border:1px solid rgba(255,255,255,0.16);
}
.tryon-reset:hover{color:#fff;border-color:rgba(255,255,255,0.34);}

.tryon-note{
  margin:0;font-size:11.5px;line-height:1.55;
  color:rgba(255,255,255,0.42);text-align:center;
}

/* ── launcher button (hero + showcase) ── */
.tryon-launch{
  display:inline-flex;align-items:center;gap:9px;
}
.tryon-launch .tryon-dot{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:#3ddc84;box-shadow:0 0 10px rgba(61,220,132,0.8);
  animation:s3pulse 2.2s ease-in-out infinite;
}

/* ── mobile ── */
@media (max-width:760px){
  .tryon{padding:0;}
  .tryon-shell{
    width:100%;height:100%;max-height:100%;
    border-radius:0;border:none;gap:11px;
    padding:14px 12px calc(14px + env(safe-area-inset-bottom));
  }
  .tryon-stage{min-height:0;}
  .tryon-controls{justify-content:center;}
  .tryon-actions{width:100%;justify-content:center;}
  .tryon-wa{flex:1;justify-content:center;}
  .tryon-panel{grid-template-columns:1fr 1fr;}
  .tryon-reset{grid-column:1 / -1;justify-self:center;}
  .tryon-note{font-size:10.5px;}
}