/* V4 · EXPERIENCIA — estrella, órbita, cursor y sonido */
#giant .letra { display:inline-block; animation:letraCae .7s cubic-bezier(.2,1.4,.4,1) both; animation-delay:calc(var(--i) * 70ms + 150ms); }
@keyframes letraCae { from { opacity:0; transform:translateY(-60%) rotate(-8deg) scaleY(1.4); } }

.v4-orbita { position:absolute; inset:0; pointer-events:none; z-index:5; }
.v4-orbita img { position:absolute; left:0; top:0; height:auto; will-change:transform; filter:drop-shadow(3px 4px 0 rgba(0,0,0,.15)); transition:opacity .3s; }
@media (max-width:700px) { .v4-orbita img { width:38px !important; } }

/* la estrella encoge camino de la esquina */
.mascot { transform-origin:50% 50%; }

/* cursor propio */
html.v4-cursor.v4-cursor-on, html.v4-cursor.v4-cursor-on body, html.v4-cursor.v4-cursor-on a, html.v4-cursor.v4-cursor-on button, html.v4-cursor.v4-cursor-on .mascot { cursor:none; }
html.v4-cursor input, html.v4-cursor textarea, html.v4-cursor select, html.v4-cursor iframe { cursor:auto !important; }
.v4-punto, .v4-aro { position:fixed; left:0; top:0; z-index:9999; pointer-events:none; opacity:0; transition:opacity .2s; }
html.v4-cursor-on .v4-punto, html.v4-cursor-on .v4-aro { opacity:1; }
.v4-punto { width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:var(--jm-rosa); mix-blend-mode:normal; }
.v4-aro { width:38px; height:38px; margin:-19px 0 0 -19px; border-radius:50%; border:2px solid var(--jm-negro); display:grid; place-items:center;
  transition:opacity .2s, width .25s cubic-bezier(.3,1.5,.5,1), height .25s cubic-bezier(.3,1.5,.5,1), margin .25s cubic-bezier(.3,1.5,.5,1), border-color .2s, background .2s; }
.v4-aro img { width:70%; opacity:0; transform:scale(.4) rotate(-40deg); transition:opacity .2s, transform .3s cubic-bezier(.3,1.6,.5,1); }
.v4-aro.sobre { width:64px; height:64px; margin:-32px 0 0 -32px; border-color:var(--jm-rosa); background:rgba(251,4,139,.08); }
.v4-aro.estrella { border-color:transparent; background:none; }
.v4-aro.estrella img { opacity:1; transform:none; }
.v4-aro.pulsa { width:28px; height:28px; margin:-14px 0 0 -14px; }
.v4-aro.texto { opacity:0 !important; }
html.v4-cursor-on .v4-aro.texto ~ .v4-punto { opacity:0; }
[data-mode="noche"] .v4-aro, [data-mode="azul"] .v4-aro { border-color:#fff; }

/* botón de sonido */
.v4-sonido { position:fixed; z-index:81; left:14px; bottom:14px; font:800 11px 'Inter', system-ui, -apple-system, sans-serif; letter-spacing:.12em; text-transform:uppercase; background:#fff; color:#0B0B0B; border:2px solid #0B0B0B; padding:6px 9px; cursor:pointer; box-shadow:2px 2px 0 #0B0B0B; }
.v4-sonido[aria-pressed="true"] { background:var(--jm-verde); }
@media (max-width:700px) { .v4-sonido { left:auto; bottom:auto; right:10px; top:70px; font-size:10px; padding:5px 7px; } }
@media (min-width:701px) { .h-indice { left:150px; } }

/* destellos */
.v5-chispa { position:fixed; z-index:9998; pointer-events:none; font-style:normal; font-size:16px; line-height:1; margin:-8px 0 0 -6px; text-shadow:0 0 1px #000, 1px 1px 0 #000; animation:chispa .6s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes chispa { to { transform:translate(var(--dx), var(--dy)) scale(.3) rotate(140deg); opacity:0; } }