/* Evergreen · Vista explosionada — estilos
   Todo con prefijo .evg-xv para no chocar con el tema.
   Variables personalizables (se pueden sobrescribir desde el CSS adicional del tema):
   --evg-bg      fondo            (por defecto #F4F1EA)
   --evg-ink     color de líneas y textos
   --evg-radius  radio de esquina del contenedor
   --evg-font    tipografía de las etiquetas                                   */

.evg-xv {
  --evg-bg: #F4F1EA;
  --evg-ink: #24331f;
  --evg-muted: #6f7a66;
  --evg-radius: 24px;
  --evg-font: "Inter", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  position: relative;
  width: 100%;
  max-width: var(--evg-max-width, 760px);
  margin: 0 auto;
  box-sizing: border-box;
  font-family: var(--evg-font);
  color: var(--evg-ink);
  -webkit-tap-highlight-color: transparent;
}

.evg-xv *, .evg-xv *::before, .evg-xv *::after { box-sizing: border-box; }

/* ───────────── Marco con iluminación de estudio ───────────── */
.evg-xv__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1160 / 1250;
  overflow: hidden;
  border-radius: var(--evg-radius);
  background:
    radial-gradient(68% 52% at 50% 20%, rgba(255,255,255,.80) 0%, rgba(255,255,255,0) 72%),
    radial-gradient(95% 38% at 50% 104%, rgba(110,94,66,.20) 0%, rgba(110,94,66,0) 72%),
    var(--evg-bg);
  box-shadow: inset 0 0 140px rgba(96,80,50,.10);
  isolation: isolate;
  contain: layout paint;
}

/* Barrido de luz suave durante la rotación */
.evg-xv__sweep {
  position: absolute;
  inset: -10% -40%;
  background: linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 62%);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  mix-blend-mode: soft-light;
}

/* ───────────── Escenario (coordenadas lógicas 1160 × 1250) ───────────── */
.evg-xv__stage {
  position: absolute;
  left: 0; top: 0;
  width: 1160px; height: 1250px;
  transform-origin: 0 0;
  visibility: hidden;                 /* se muestra al medir (evita parpadeo) */
}
.evg-xv.is-ready .evg-xv__stage { visibility: visible; }

.evg-xv__cam {
  position: absolute; inset: 0;
  transform-origin: 560px 606px;
  will-change: transform, opacity;
}

.evg-xv__persp {
  position: absolute; inset: 0;
  perspective: 1700px;
  perspective-origin: 560px 560px;
}

.evg-xv__model {
  position: absolute; inset: 0;
  transform-origin: 560px 640px;
  will-change: transform;
}

.evg-xv__layer {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  margin: 0; padding: 0; border: 0;
  user-select: none; -webkit-user-drag: none;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 20px 22px rgba(58,48,28,.17));
  backface-visibility: hidden;
}

/* Sombra de contacto en el suelo */
.evg-xv__floor {
  position: absolute;
  left: 380px; width: 360px;
  height: 46px;
  background: radial-gradient(closest-side, rgba(46,38,20,.34), rgba(46,38,20,.12) 55%, rgba(46,38,20,0));
  filter: blur(5px);
  will-change: transform, opacity;
}

/* Líneas guía */
.evg-xv__guides {
  position: absolute; inset: 0;
  width: 1160px; height: 1250px;
  overflow: visible;
  pointer-events: none;
}
.evg-xv__guides line { stroke: var(--evg-ink); stroke-linecap: round; fill: none; }
.evg-xv__guides circle { fill: var(--evg-bg); stroke: var(--evg-ink); }

/* ───────────── Etiquetas ───────────── */
.evg-xv__labels { position: absolute; inset: 0; pointer-events: none; }

.evg-xv__label { position: absolute; left: 0; top: 0; width: 0; height: 0; }

.evg-xv__dot {
  position: absolute;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--evg-bg);
  border: 3px solid var(--evg-ink);
  transform: scale(0);
  will-change: transform;
}
.evg-xv__ring {
  position: absolute;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid var(--evg-ink);
  opacity: 0;
  will-change: transform, opacity;
}
.evg-xv__line {
  position: absolute;
  height: 2px;
  margin-top: -1px;
  background: var(--evg-ink);
  opacity: .5;
  transform: scaleX(0);
  will-change: transform;
}
.evg-xv__text {
  position: absolute;
  top: 0;
  width: 250px;
  transform: translateY(-50%);
  opacity: 0;
  font-size: var(--evg-fs, 34px);
  line-height: 1.16;
  letter-spacing: -.012em;
  font-weight: 500;
  color: var(--evg-ink);
  will-change: transform, opacity;
}
.evg-xv__text small {
  display: block;
  margin-bottom: .32em;
  font-size: .56em;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--evg-muted);
  font-variant-numeric: tabular-nums;
}
.evg-xv__label[data-side="l"] .evg-xv__text { text-align: right; }

/* ───────────── Controles ───────────── */
.evg-xv__ui {
  position: absolute;
  left: 50%; bottom: 18px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  width: min(300px, calc(100% - 40px));
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 6px 20px rgba(60,50,28,.10);
  opacity: .0;
  transition: opacity .35s ease;
  z-index: 5;
}
.evg-xv__frame:hover .evg-xv__ui,
.evg-xv__ui:focus-within,
.evg-xv.is-ended .evg-xv__ui,
.evg-xv.is-touch .evg-xv__ui { opacity: 1; }

.evg-xv__btn {
  flex: none;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  padding: 0; margin: 0;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--evg-ink);
  cursor: pointer;
  transition: background .2s ease;
}
.evg-xv__btn:hover { background: rgba(36,51,31,.08); }
.evg-xv__btn:focus-visible, .evg-xv__track:focus-visible { outline: 2px solid var(--evg-ink); outline-offset: 2px; }
.evg-xv__btn svg { width: 16px; height: 16px; display: block; fill: currentColor; }

.evg-xv__track {
  position: relative;
  flex: 1;
  height: 20px;
  cursor: pointer;
  touch-action: none;
}
.evg-xv__track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 3px; margin-top: -1.5px; border-radius: 3px;
  background: rgba(36,51,31,.16);
}
.evg-xv__fill {
  position: absolute; left: 0; top: 50%;
  height: 3px; margin-top: -1.5px; border-radius: 3px;
  width: 0; background: var(--evg-ink);
}

/* ───────────── Accesibilidad / movimiento reducido ───────────── */
.evg-xv__sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .evg-xv__ui { display: none; }
}