/* Evergreen · Vista explosionada 3D — estilos (prefijo .evg3d)
   Fondo transparente. Colores de líneas/etiquetas:
     data-theme="auto"  (por defecto) hereda el color de texto de la página
     data-theme="dark"  etiquetas oscuras (para fondos claros)
     data-theme="light" etiquetas claras  (para fondos oscuros)
   Variables: --evg-ink (color), --evg-font (tipografía), --evg-max-width, --evg-aspect */
.evg3d{
  --evg-ink: currentColor;
  --evg-muted: color-mix(in srgb, currentColor 55%, transparent);
  --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); background:transparent;
  -webkit-tap-highlight-color:transparent;
}
.evg3d[data-theme="dark"]{ color:#24331f; }
.evg3d[data-theme="light"]{ color:#f4f1ea; }
.evg3d *,.evg3d *::before,.evg3d *::after{ box-sizing:border-box; }

.evg3d__frame{
  position:relative; width:100%; aspect-ratio:var(--evg-aspect,1160/1340);
  background:transparent; overflow:hidden; touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none;
}
.evg3d__frame.is-grabbing{ cursor:grabbing; }
.evg3d__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; background:transparent; opacity:0; will-change:opacity; }
.evg3d.is-ready .evg3d__canvas{ visibility:visible; }
.evg3d__poster{ display:block; width:100%; height:auto; }

.evg3d__guides{ position:absolute; left:0; top:0; overflow:visible; pointer-events:none; }
.evg3d__guides line{ stroke:var(--evg-ink); fill:none; }
.evg3d__guides circle{ stroke:var(--evg-ink); fill:none; }

.evg3d__labels{ position:absolute; inset:0; pointer-events:none; }
.evg3d__label{ position:absolute; inset:0; }
.evg3d__dot,.evg3d__ring{
  position:absolute; left:0; top:0; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%;
  will-change:transform,opacity;
}
.evg3d__dot{ background:var(--evg-ink); box-shadow:0 0 0 4px color-mix(in srgb, var(--evg-ink) 22%, transparent); transform:scale(0); }
.evg3d__ring{ border:2px solid var(--evg-ink); opacity:0; }
.evg3d__line{ position:absolute; left:0; top:0; height:2px; margin-top:-1px; background:var(--evg-ink); opacity:.55; width:0; transform:scaleX(0); will-change:transform; }
.evg3d__text{
  position:absolute; left:0; top:0; width:calc(var(--evg-w,760px) * .205);
  font-size:var(--evg-fs,24px); line-height:1.16; letter-spacing:-.012em; font-weight:500;
  color:var(--evg-ink); opacity:0; will-change:transform,opacity; text-wrap:balance;
}
.evg3d__text small{ display:block; margin-bottom:.3em; font-size:.55em; font-weight:600; letter-spacing:.16em; color:var(--evg-muted); font-variant-numeric:tabular-nums; }
.evg3d__label[data-side="l"] .evg3d__text{ text-align:right; }

.evg3d__ui{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:5;
  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(0,0,0,.14);
  color:#24331f; opacity:0; transition:opacity .35s ease; pointer-events:auto;
}
.evg3d__frame:hover .evg3d__ui,.evg3d__ui:focus-within,.evg3d.is-ended .evg3d__ui,.evg3d.is-touch .evg3d__ui{ opacity:1; }
.evg3d__btn{ flex:none; display:grid; place-items:center; width:32px; height:32px; padding:0; margin:0; border:0; border-radius:50%; background:transparent; color:inherit; cursor:pointer; transition:background .2s; }
.evg3d__btn:hover{ background:rgba(36,51,31,.1); }
.evg3d__btn:focus-visible,.evg3d__track:focus-visible{ outline:2px solid #24331f; outline-offset:2px; }
.evg3d__btn svg{ width:16px; height:16px; display:block; fill:currentColor; }
.evg3d__track{ position:relative; flex:1; height:20px; cursor:pointer; touch-action:none; }
.evg3d__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,.18); }
.evg3d__fill{ position:absolute; left:0; top:50%; height:3px; margin-top:-1.5px; border-radius:3px; width:0; background:#24331f; }
@media (prefers-reduced-motion:reduce){ .evg3d__ui{ display:none; } }