/* ============================================================
   PIEZAS VIVAS (2026-10-18) — companion de js/core/vivo.js.
   ============================================================ */
:root{--vv-bg:rgba(22,22,28,.95);--vv-bd:rgba(237,237,235,.16);--vv-tx:#EDEDEB;--vv-mut:#9a9aa0;--vv-ic-bg:#EDEDEB;--vv-ic-tx:#08080c}
html[data-theme="alba"]{--vv-bg:rgba(255,252,246,.97);--vv-bd:rgba(30,27,23,.14);--vv-tx:#1E1B17;--vv-mut:rgba(30,27,23,.6);--vv-ic-bg:#1E1B17;--vv-ic-tx:#FAF1E3}

/* 1. Avisos */
.v-avisos{position:fixed;z-index:1200;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 24px);
  width:min(420px,calc(100vw - 24px));display:flex;flex-direction:column;gap:8px;pointer-events:none}
html.has-app-bottom-nav .v-avisos{bottom:calc(var(--bottom-nav-total-h,64px) + 14px)}
.v-aviso{pointer-events:auto;position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;padding:12px 12px 14px 14px;border-radius:var(--r-s);
  background:var(--vv-bg);border:1px solid var(--vv-bd);color:var(--vv-tx);box-shadow:0 18px 40px rgba(0,0,0,.4);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  font-family:'Space Grotesk',sans-serif;opacity:0;transform:translateY(14px) scale(.97);transition:opacity .3s ease,transform .35s cubic-bezier(.2,.9,.25,1.1);touch-action:pan-y}
.v-aviso.is-visible{opacity:1;transform:none}
.v-aviso.is-saliendo{opacity:0;transform:translateY(10px) scale(.97)}
.v-aviso-ic{flex:none;width:26px;height:26px;border-radius:50%;background:var(--vv-ic-bg);color:var(--vv-ic-tx);display:grid;place-items:center;font:700 14px 'Space Grotesk',sans-serif}
.v-aviso-ic svg{width:14px;height:14px}
.v-aviso.is-error .v-aviso-ic{background:#c96b5c;color:#fff}
.v-aviso-txt{min-width:0}
.v-aviso-txt b{display:block;font-weight:500;font-size:13.5px}
.v-aviso-txt small{display:block;font-size:12px;color:var(--vv-mut);margin-top:1px}
.v-aviso-acc{margin-left:auto;flex:none;padding:8px 13px;border-radius:999px;border:1px solid var(--vv-bd);background:none;color:var(--vv-tx);font:600 10.5px 'Space Grotesk',sans-serif;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.v-aviso-barra{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--vv-tx);opacity:.55;transform-origin:left;animation:vv-consume linear forwards}
.v-aviso.is-pausado .v-aviso-barra{animation-play-state:paused}
@keyframes vv-consume{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* 3. Pestañas que se deslizan */
.v-pestanas{position:relative}
.v-pestanas-marca{position:absolute;left:0;top:0;z-index:0;border-radius:999px;background:var(--s1,#EDEDEB);pointer-events:none;
  transition:transform .38s cubic-bezier(.3,.9,.25,1.05),width .38s cubic-bezier(.3,.9,.25,1.05),height .3s ease}
.v-pestanas [role="tab"]{position:relative;z-index:1;transition:color .25s ease}
.v-pestanas [role="tab"][aria-selected="true"]{background:transparent !important}

/* 4. Luna en vivo */
.v-vivo{display:inline-flex;align-items:center;gap:9px;padding:8px 15px 8px 12px;border-radius:999px;border:1px solid var(--vv-bd);background:color-mix(in srgb,var(--vv-tx) 4%,transparent);
  font:500 12.5px 'Space Grotesk',sans-serif;color:var(--vv-tx)}
.v-vivo em{font:italic 300 14.5px 'Fraunces',Georgia,serif;font-variant-numeric:tabular-nums}
.v-vivo-punto{position:relative;width:7px;height:7px;border-radius:50%;background:var(--vv-tx)}
.v-vivo-punto::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--vv-tx);animation:vv-late 2s ease-out infinite}
@keyframes vv-late{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(1.5)}}

/* 5. Guía de la primera vez */
.v-guia{position:fixed;inset:0;z-index:1500;opacity:0;transition:opacity .3s ease;pointer-events:none}
.v-guia.is-visible{opacity:1}
.v-guia-hueco{position:fixed;border-radius:var(--r-m);box-shadow:0 0 0 9999px rgba(4,4,7,.74),0 0 0 2px rgba(237,237,235,.85),0 0 34px rgba(237,237,235,.3);
  pointer-events:none}
.v-guia.is-paso .v-guia-hueco{transition:left .4s cubic-bezier(.3,.9,.25,1),top .4s cubic-bezier(.3,.9,.25,1),width .4s ease,height .4s ease}
.v-guia.is-paso .v-guia-tip{transition:top .4s cubic-bezier(.3,.9,.25,1)}
.v-guia-tip{pointer-events:auto;position:fixed;left:16px;right:16px;max-width:380px;margin:0 auto;padding:15px 16px 13px;border-radius:var(--r-m);background:#EDEDEB;color:#08080c;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.v-guia-tip b{display:block;font:500 17px 'Fraunces',Georgia,serif;margin-bottom:4px}
.v-guia-tip p{margin:0;font:400 13.5px/1.5 'Space Grotesk',sans-serif;color:#2a2a30}
.v-guia-pie{display:flex;align-items:center;gap:10px;margin-top:12px}
.v-guia-dots{display:flex;gap:4px;margin-right:auto}
.v-guia-dots i{width:6px;height:6px;border-radius:3px;background:rgba(8,8,12,.25);transition:width .3s}
.v-guia-dots i.on{width:16px;background:#08080c}
.v-guia-saltar,.v-guia-sig{border:0;background:none;font:600 10.5px 'Space Grotesk',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#08080c;cursor:pointer;padding:8px 4px}
.v-guia-saltar{color:rgba(8,8,12,.5)}

@media (prefers-reduced-motion:reduce){
  .v-aviso,.v-pestanas-marca,.v-guia,.v-guia-hueco{transition:none}
  .v-vivo-punto::after{animation:none}
}
.hoy-luna-vivo{display:flex;justify-content:center;margin:14px 0 4px}.hoy-luna-vivo[hidden]{display:none}

/* 6. Cielo de fondo que responde (variables de js/core/vivo.js) */
html.cielo-vivo body::before{
  background-position:var(--cielo-x1,0px) var(--cielo-y1,0px),calc(340px + var(--cielo-x2,0px)) calc(210px + var(--cielo-y2,0px));
  inset:-40px;
}

/* 7. Barra de lectura */
.v-lectura-barra{position:fixed;left:0;right:0;top:0;height:2px;z-index:1100;pointer-events:none}
.v-lectura-barra i{display:block;height:100%;background:var(--vv-tx);transform-origin:left;transform:scaleX(0);box-shadow:0 0 10px color-mix(in srgb,var(--vv-tx) 60%,transparent)}
.v-lectura-queda{position:fixed;right:14px;top:calc(env(safe-area-inset-top) + 74px);z-index:1100;padding:6px 11px;border-radius:999px;border:1px solid var(--vv-bd);background:var(--vv-bg);
  font:500 11px 'Space Grotesk',sans-serif;letter-spacing:.06em;color:var(--vv-mut);opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s;pointer-events:none}
.v-lectura-queda.is-visible{opacity:1;transform:none}

/* 8. Deslizar entre secciones: la pista en el borde */
.v-seccion-pista{position:fixed;top:50%;left:12px;z-index:1300;padding:10px 16px;border-radius:999px;background:var(--vv-bg);border:1px solid var(--vv-bd);
  color:var(--vv-mut);font:600 11px 'Space Grotesk',sans-serif;letter-spacing:.14em;text-transform:uppercase;pointer-events:none;
  opacity:0;transform:translate(calc(var(--dx,0px) - 20px),-50%);transition:opacity .2s,color .2s,background .2s}
.v-seccion-pista.a-la-derecha{left:auto;right:12px;transform:translate(calc(var(--dx,0px) + 20px),-50%)}
.v-seccion-pista.is-visible{opacity:1}
.v-seccion-pista.is-lista{color:var(--vv-ic-tx);background:var(--vv-ic-bg)}

/* 1. Racha que se llena (js/components/v-racha.js) */
.v-racha-anillo{display:inline-grid;place-items:center;width:34px;height:34px;position:relative;vertical-align:middle;margin-right:10px}
.v-racha-anillo svg{width:34px;height:34px;transform:rotate(-90deg)}
.v-racha-anillo circle{fill:none;stroke-width:2.4}
.v-racha-anillo .fondo{stroke:color-mix(in srgb,var(--vv-tx) 16%,transparent)}
.v-racha-anillo .lleno{stroke:var(--vv-tx);stroke-linecap:round;stroke-dasharray:88;stroke-dashoffset:88;animation:vv-anillo 1.2s .4s cubic-bezier(.3,.8,.2,1) forwards}
.v-racha-anillo b{position:absolute;font:500 12px 'Space Grotesk',sans-serif;color:var(--vv-tx)}
@keyframes vv-anillo{to{stroke-dashoffset:var(--falta,88)}}
.v-racha-chispa{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:var(--vv-tx);opacity:0;animation:vv-chispa 1.1s 1.5s ease-out forwards}
@keyframes vv-chispa{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--cx),var(--cy)) scale(.4)}}
@media (prefers-reduced-motion:reduce){.v-racha-anillo .lleno{animation:none;stroke-dashoffset:var(--falta,88)}.v-racha-chispa{display:none}}

/* 2. Number Flow (2026-10-29): cifras que ruedan como un cuentakilómetros */
.nf{display:inline-flex;vertical-align:top;height:1em;line-height:1;overflow:hidden;font-variant-numeric:tabular-nums}
.nf-d{display:inline-block;height:1em;overflow:hidden}
.nf-tira{display:flex;flex-direction:column;transition:transform 1.1s cubic-bezier(.16,1,.3,1);will-change:transform}
.nf-tira span{display:block;height:1em;line-height:1}
.nf-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 3b. La pastilla también en grupos de opciones (role=radio), p. ej.
   «¿Qué sois?» en Compatibilidad (2026-10-29, «Animated Tabs» de 21st.dev) */
.v-pestanas [role="radio"]{position:relative;z-index:1;transition:color .25s ease,border-color .25s ease}
.v-pestanas [role="radio"][aria-checked="true"]{background:transparent !important}
.compat-vinculo-fila.v-pestanas .v-pestanas-marca{background:color-mix(in srgb,var(--tono-champan) 18%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tono-champan) 70%,transparent)}
.compat-vinculo-fila.v-pestanas [role="radio"][aria-checked="true"]{border-color:transparent}

/* 9. Línea de lectura (2026-10-29, «Tracing Beam»): fina a la izquierda,
   se llena de champán según lees. */
.v-traza{position:relative}
.v-traza::before,.v-traza::after{content:'';position:absolute;left:-14px;top:6px;bottom:6px;width:1px;border-radius:1px;pointer-events:none}
.v-traza::before{background:linear-gradient(transparent,color-mix(in srgb,var(--tono-champan) 22%,transparent) 8%,color-mix(in srgb,var(--tono-champan) 22%,transparent) 92%,transparent)}
.v-traza::after{background:linear-gradient(transparent,var(--tono-champan) 30%,var(--tono-champan));transform-origin:top;transform:scaleY(var(--traza,0));box-shadow:0 0 8px color-mix(in srgb,var(--tono-champan) 60%,transparent);transition:transform .12s linear}
@media (max-width:600px){.v-traza::before,.v-traza::after{left:-10px}}

/* 10. Títulos que suben (2026-10-29, «Text Reveal (Mask)») */
.v-revela .vr-m{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.v-revela .vr-p{display:inline-block;transform:translateY(105%);transition:transform .8s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--vr,0) * 55ms)}
.v-revela.is-revelado .vr-p{transform:none}

/* 11. Haz de luz por el borde (2026-10-29, «Border Beam»): un cometa
   champán que recorre el borde. Solo gira con .is-haz-activo (en pantalla). */
@property --haz-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.v-haz{position:relative;isolation:isolate}
.v-haz::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.2px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--haz-a),transparent 0 72%,color-mix(in srgb,var(--tono-champan) 30%,transparent) 80%,var(--tono-champan) 88%,#fff8e8 90%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:v-haz 7s linear infinite;animation-play-state:paused;opacity:.9}
.v-haz.is-haz-activo::after{animation-play-state:running}
@keyframes v-haz{to{--haz-a:360deg}}

/* 12. Estallido de estrellas de Véloris (2026-10-29, «Sparkles») */
.v-chispas{position:fixed;width:0;height:0;z-index:1500;pointer-events:none}
.v-chispas .v-estrella{position:absolute;left:-6px;top:-6px;width:12px;height:12px;color:var(--tono-champan);opacity:0;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--tono-champan) 80%,transparent));animation:v-chispa 1.1s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes v-chispa{0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0)}18%{opacity:1}100%{opacity:0;transform:translate(var(--cx),var(--cy)) scale(var(--cs,1)) rotate(90deg)}}

@media (prefers-reduced-motion:reduce){.v-traza::after{transition:none}.v-revela .vr-p{transform:none;transition:none}.v-haz::after{animation:none;display:none}.v-chispas{display:none}}