/* Cristal: la vuelta a la casa (spin interactivo, v3f). 180 vistas del spin v2 del central v3q, una cada 2 grados. */
#giro { margin-top:clamp(50px, 7vw, 100px); }
#giro .cab { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:14px; }
#giro .cab .eti { white-space:nowrap; }
#giro .cab .nota { color:var(--tenue); font-size:13.5px; text-align:right; }
.giro-esc { position:relative; aspect-ratio:16 / 9; border-radius:4px; overflow:hidden; background:#0B0B0E; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; outline:none; }
.giro-esc:focus-visible { outline:1px solid var(--crema); outline-offset:3px; }
.giro-esc.arrastre { cursor:grabbing; }
.giro-esc img, .giro-esc canvas { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; pointer-events:none; }
.giro-esc canvas { opacity:0; transition:opacity .35s; } .giro-esc.vivo canvas { opacity:1; }
.giro-esc::after { content:''; position:absolute; inset:52% 0 0 0; background:linear-gradient(0deg, rgba(10,10,12,.72), rgba(10,10,12,0)); pointer-events:none; }
.giro-tit { z-index:1; position:absolute; left:18px; bottom:30px; margin:0; font:italic 400 clamp(30px, 3.6vw, 52px)/1.04 var(--serif); font-variation-settings:'opsz' 60; text-shadow:0 0 22px rgba(0,0,0,.45); pointer-events:none; }
.giro-pista { z-index:1; position:absolute; right:18px; bottom:28px; height:38px; padding:0 18px; border-radius:19px; display:inline-flex; align-items:center; gap:12px; pointer-events:none; transition:opacity .6s; }
.giro-pista .flecha { font-size:17px; letter-spacing:0; line-height:1; }
.giro-pista .grados { font-variant-numeric:tabular-nums; min-width:3.2em; text-align:right; color:var(--tenue); }
.giro-pista .tacto { display:none; }
@media (pointer:coarse) { .giro-pista .raton { display:none; } .giro-pista .tacto { display:inline; } }
.giro-esc.tocado .giro-pista .texto { display:none; }
/* regla de la vuelta: el tramo cargado se aclara; la marca dice donde va la casa */
.giro-regla { z-index:1; position:absolute; left:18px; right:18px; bottom:12px; height:1px; background:var(--hilo); pointer-events:none; }
.giro-regla .carga { position:absolute; left:0; top:0; bottom:0; width:0; background:rgba(246,239,228,.45); transition:width .3s; }
.giro-esc.listo .giro-regla .carga { opacity:0; transition:opacity .8s; }
.giro-regla .marca { position:absolute; top:-4px; width:1px; height:9px; background:var(--crema); left:0; }
#giro .leyenda-giro { margin:10px 0 0; color:var(--tenue); font-size:13px; }
@media (max-width:820px) {
  #giro .cab { flex-direction:column; gap:4px; } #giro .cab .nota { text-align:left; }
  .giro-esc { margin:0 calc(-1 * var(--m)); border-radius:0; }
  .giro-tit { left:var(--m); bottom:26px; font-size:28px; }
  .giro-pista { right:var(--m); bottom:22px; height:32px; padding:0 13px; gap:8px; }
  .giro-regla { left:var(--m); right:var(--m); bottom:9px; }
}
@media (max-width:420px) { .giro-tit { font-size:24px; bottom:24px; } .giro-pista .texto { display:none; } }