/* El Viaje en Carruaje — escena y su interfaz. Unidades: var(--u) = 1 % del alto de la pantalla (world.js).
   Por cuadro sólo cambian transform y opacity (compositor). Nada de filtros en vivo. */

/* ---------- mundo y capas ---------- */
.vc .world { position: absolute; inset: 0; overflow: hidden; contain: strict; }
/* maqueta 3D: el lienzo y, encima, lo interactivo colocado por proyección (botones de los cuadros, nombre) */
.vc .world3d { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.vc .scene-ui3d { position: absolute; inset: 0; pointer-events: none; }
.vc .photo-hit { position: absolute; left: 0; top: 0; display: none; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; pointer-events: auto; }
.vc .scene-ui3d.is-hits .photo-hit { display: block; }
.vc .scene-ui3d .dname { left: 0; top: 0; }
.vc .layer, .vc .lights, .vc .mid-ui { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.vc .tile { position: absolute; display: block; pointer-events: none; }
/* (lejos de la cámara: fuera del árbol de pintura y sin animar) */
.vc .is-far { display: none !important; }

/* ---------- cielo: cuatro horas que se funden (world.js ajusta la opacidad) ---------- */
.vc .sky { position: absolute; inset: 0; }
/* (todo lo que cambia de opacidad con la hora vive en su propia capa: cambiarla no repinta la página) */
.vc .sky-l, .vc .stars, .vc .moon, .vc .tint, .vc .lgroup, .vc .rig-light { will-change: opacity; }
.vc .sky-l { position: absolute; inset: 0; }
.vc .sky-tarde { background: linear-gradient(180deg, #9CC6E6 0%, #C8DDEC 26%, #F8E6C6 50%, #F6D2A6 64%, #F2C89A 100%); }
.vc .sky-atardecer { opacity: 0; background: linear-gradient(180deg, #B99ED4 0%, #EBB2C6 28%, #FFCF9E 50%, #F8B488 66%, #F2A882 100%); }
.vc .sky-anochecer { opacity: 0; background: linear-gradient(180deg, #4E4E94 0%, #8870B0 28%, #D896B2 50%, #EFAE98 64%, #D9938E 100%); }
.vc .sky-noche { opacity: 0; background: linear-gradient(180deg, #161A44 0%, #262A62 34%, #4B4180 56%, #6C5388 68%, #5E4A7E 100%); }
.vc .stars { position: absolute; inset: 0 0 45% 0; opacity: 0; background-image:
  radial-gradient(1.4px 1.4px at 12% 18%, #FFF 60%, transparent), radial-gradient(1.2px 1.2px at 22% 8%, #FFF 60%, transparent), radial-gradient(1.8px 1.8px at 34% 24%, #FFF6D8 60%, transparent),
  radial-gradient(1.2px 1.2px at 48% 12%, #FFF 60%, transparent), radial-gradient(1.6px 1.6px at 58% 30%, #FFF 60%, transparent), radial-gradient(1.2px 1.2px at 66% 6%, #FFF 60%, transparent),
  radial-gradient(2px 2px at 76% 20%, #FFF6D8 60%, transparent), radial-gradient(1.2px 1.2px at 86% 12%, #FFF 60%, transparent), radial-gradient(1.4px 1.4px at 94% 28%, #FFF 60%, transparent),
  radial-gradient(1.2px 1.2px at 6% 34%, #FFF 60%, transparent), radial-gradient(1.4px 1.4px at 40% 40%, #FFF 60%, transparent), radial-gradient(1.2px 1.2px at 72% 42%, #FFF 60%, transparent); }
.vc .sun { position: absolute; left: 62%; top: 12%; width: calc(var(--u) * 11); height: calc(var(--u) * 11); border-radius: 50%; background: radial-gradient(circle, #FFF6DC 0 34%, rgba(255, 226, 170, .75) 46%, rgba(255, 210, 150, 0) 70%); will-change: transform, opacity; }
.vc .moon { position: absolute; left: 18%; top: 8%; width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; opacity: 0; box-shadow: calc(var(--u) * -1.3) calc(var(--u) * .5) 0 0 #FFF4D6, 0 0 calc(var(--u) * 4) rgba(255, 244, 214, .35); }

/* ---------- velos de la hora del día (sobre el paisaje y el carruaje; debajo de las luces) ---------- */
.vc .tint { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.vc .tint-gold { background: linear-gradient(180deg, rgba(255, 214, 150, .0), #FFC47E 70%); }
/* (multiply: el atardecer y la noche profundizan el color de la pintura en vez de agrisarla) */
.vc .tint-dusk { background: linear-gradient(180deg, #B08AD6, #F2A0BE); mix-blend-mode: multiply; }
.vc .tint-night { background: linear-gradient(180deg, #2A2E78 0%, #3A3480 55%, #4A3A7E 100%); mix-blend-mode: multiply; }

/* ---------- luces (no se oscurecen de noche) ---------- */
.vc .lgroup { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; }
.vc .light { position: absolute; pointer-events: none; }
.vc .light i { position: absolute; inset: 0; border-radius: 50%; }
.vc .l-lamp i { background: radial-gradient(circle, rgba(255, 246, 214, .95) 0 8%, rgba(255, 214, 140, .55) 22%, rgba(255, 190, 120, 0) 70%); animation: vc-flicker 2.3s ease-in-out infinite; }
.vc .l-window i { background: radial-gradient(circle, rgba(255, 232, 170, .95) 0 22%, rgba(255, 200, 130, .45) 45%, rgba(255, 190, 120, 0) 72%); }
.vc .l-candle i { background: radial-gradient(circle, #FFFBEA 0 12%, rgba(255, 214, 140, .7) 26%, rgba(255, 190, 120, 0) 68%); animation: vc-flicker 1.4s ease-in-out infinite; }
.vc .l-candle:nth-child(2n) i { animation-duration: 1.1s; animation-delay: -.4s; }
.vc .l-chandelier i { background: radial-gradient(circle, rgba(255, 246, 214, .7) 0 10%, rgba(255, 220, 160, .3) 35%, rgba(255, 200, 140, 0) 70%); }
.vc .l-hall i { border-radius: 50% 50% 0 0 / 38% 38% 0 0; background: radial-gradient(70% 60% at 50% 45%, rgba(255, 226, 170, .75), rgba(255, 200, 140, .25) 70%, rgba(255, 190, 120, .08)); }
@keyframes vc-flicker { 0%, 100% { opacity: 1; transform: scale(1); } 30% { opacity: .82; transform: scale(.96); } 55% { opacity: .95; transform: scale(1.03); } 78% { opacity: .86; } }
.vc .is-flare .l-candle i, .vc .is-flare .l-chandelier i { animation: vc-flare 1.4s ease-out 1; }
@keyframes vc-flare { 0% { transform: scale(1); opacity: 1; } 18% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.vc .rig-light { position: absolute; width: calc(var(--u) * 6); height: calc(var(--u) * 6); pointer-events: none; opacity: .15; }
.vc .rig-light i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 246, 214, .9) 0 7%, rgba(255, 214, 140, .45) 22%, rgba(255, 190, 120, 0) 66%); animation: vc-flicker 2s ease-in-out infinite; }

/* ---------- el tiro ---------- */
.vc .rig-pos { position: absolute; width: 0; height: 0; }
.vc .rig, .vc .unicorn, .vc .bob, .vc .head, .vc .carriage, .vc .cbody { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.vc .unicorn { transform-origin: 0 0; }
.vc .bob, .vc .cbody, .vc .head, .vc .joint { will-change: transform; }
.vc .joint { position: absolute; width: 0; height: 0; }
.vc .part { position: absolute; display: block; }
.vc .medallion { position: absolute; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 calc(var(--u) * .25) #E2BE6A, 0 0 0 calc(var(--u) * .4) rgba(184, 144, 62, .7); background: #F6E6EA; }
.vc .medallion img, .vc .medallion canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.vc .zzz { position: absolute; width: 0; height: 0; opacity: 0; transition: opacity .8s; font: 700 calc(var(--u) * 2.2) / 1 var(--font-head); color: #FFF6E4; text-shadow: 0 0 6px rgba(90, 70, 140, .6); }
.vc .zzz span { position: absolute; left: 0; top: 0; animation: vc-z 3s ease-in infinite; opacity: 0; }
.vc .zzz span:nth-child(2) { animation-delay: 1s; font-size: .8em; } .vc .zzz span:nth-child(3) { animation-delay: 2s; font-size: .65em; }
@keyframes vc-z { 0% { opacity: 0; transform: translate(0, 0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--u) * 2.5), calc(var(--u) * -5)); } }

/* ---------- lo interactivo de la escena ---------- */
.vc .scene-ui { position: absolute; left: 0; top: 0; }
.vc .photo-frame { position: absolute; padding: calc(var(--u) * .55); border: 0; border-radius: 6px; background: var(--gold-grad); box-shadow: inset 0 0 0 1px rgba(255, 246, 214, .8), 0 4px 10px rgba(90, 60, 40, .35); cursor: pointer; transform-origin: 50% calc(-1 * var(--drop)); animation: vc-sway 5.2s ease-in-out infinite; animation-delay: var(--d, 0s); pointer-events: auto; }
.vc .photo-frame::after { content: ""; position: absolute; inset: calc(var(--u) * .25); border: 1px solid rgba(160, 110, 40, .6); border-radius: 4px; pointer-events: none; }
.vc .pf-ribbon { position: absolute; left: 50%; bottom: 100%; width: 2px; height: var(--drop); margin-left: -1px; background: #B98AA6; }
.vc .pf-ribbon::before { content: ""; position: absolute; left: 50%; top: calc(100% - 8px); width: 14px; height: 8px; margin-left: -7px; border-radius: 50%; background: var(--rz-primary); box-shadow: 0 0 0 1px rgba(184, 144, 62, .6); }
.vc .pf-in { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 3px; background: #F6EAD8; }
.vc .pf-in img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vc .photo-frame:active { filter: brightness(1.06); }
@keyframes vc-sway { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }
.vc .pennant { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding: calc(var(--u) * 1) 3px 0; text-align: center; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); transform-origin: 50% 0; animation: vc-wave 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35); }
.vc .pennant.c0 { background: linear-gradient(180deg, var(--rz-primary-hi), var(--rz-primary)); color: var(--rz-on-primary); }
.vc .pennant.c1 { background: linear-gradient(180deg, #FDF0C8, #F2D38A); color: #4A3620; }
.vc .pennant.c2 { background: linear-gradient(180deg, #D6F0E4, #A9DCC6); color: #1F4A3C; }
.vc .pennant b { font: 700 16px/1.05 var(--font-head); }
.vc .pennant span { font: 700 12.5px/1.15 var(--font-text); }
@keyframes vc-wave { 0%, 100% { transform: rotate(-3deg) skewY(0deg); } 50% { transform: rotate(3deg) skewY(2deg); } }
.vc .wall { position: absolute; overflow: hidden; border-radius: 48% 48% 0 0 / 16% 16% 0 0; pointer-events: none; }
.vc .wall::after { /* luz de velas que titila sobre la pared */
  content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 30% 60%, rgba(255, 214, 150, .22), transparent 70%), radial-gradient(60% 70% at 70% 60%, rgba(255, 214, 150, .18), transparent 70%); animation: vc-flicker 2.6s ease-in-out infinite; }
.vc .dancer { position: absolute; }
.vc .dancer .spin { position: absolute; inset: 0; transform-origin: 50% 90%; animation: vc-waltz var(--dur, 3.8s) ease-in-out infinite; animation-delay: var(--delay, 0s); will-change: transform; }
.vc .dancer .spin svg { display: block; width: 100%; height: 100%; }
@keyframes vc-waltz {
  0% { transform: translate(0, 0) scaleX(1); } 20% { transform: translate(9%, -2%) scaleX(.25); } 40% { transform: translate(14%, 0) scaleX(-1); }
  60% { transform: translate(5%, -2%) scaleX(-.25); } 80% { transform: translate(-6%, 0) scaleX(1); } 100% { transform: translate(0, 0) scaleX(1); } }
.vc .dname { position: absolute; transform: translateX(-50%); white-space: nowrap; max-width: calc(var(--u) * 30); overflow: hidden; text-overflow: ellipsis; padding: 3px 10px; border-radius: 999px; background: rgba(255, 250, 242, .96); color: var(--rz-ink); font: 700 16px/1.2 var(--font-text); box-shadow: 0 0 0 1px rgba(var(--rz-gold-rgb), .7), 0 4px 10px rgba(60, 30, 40, .25); opacity: 0; transition: opacity .6s; z-index: 3; }
.vc .dname.is-on { opacity: 1; }
.vc .dancer.is-entering { animation: vc-enter 2.3s cubic-bezier(.25, .7, .25, 1) 1 both; }
@keyframes vc-enter { 0% { opacity: 0; transform: translate(calc(var(--u) * 24), calc(var(--u) * -3)) scale(.45) rotate(-30deg); } 60% { opacity: 1; transform: translate(calc(var(--u) * -2), 0) scale(1.08) rotate(6deg); } 100% { opacity: 1; transform: none; } }
.vc .dancer.is-fadein { animation: vc-fadein 1s ease 1 both; }
@keyframes vc-fadein { from { opacity: 0; } }
.vc .dancer.is-bow .spin { animation: vc-bow 2.4s ease-in-out 1; }
@keyframes vc-bow { 0% { transform: none; } 30%, 60% { transform: translateY(4%) rotate(-12deg) scaleY(.9); } 100% { transform: none; } }
.vc .fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- barra de arriba: mapa del camino + detalles + sonido ---------- */
.vc .topbar { position: absolute; left: 10px; right: 10px; top: calc(8px + var(--safe-t)); display: flex; align-items: center; gap: 8px; pointer-events: none; }
.vc .topbar > * { pointer-events: auto; }
.vc .rm-slot { flex: 1; min-width: 0; }
.vc .top-btns { display: flex; gap: 8px; }
.vc .roadmap { height: 44px; padding: 0 16px; border-radius: 999px; background: rgba(255, 250, 242, .88); box-shadow: 0 0 0 1px rgba(var(--rz-gold-rgb), .6), 0 3px 10px rgba(90, 60, 40, .15); transition: opacity .5s; }
.vc .is-cover .roadmap { opacity: 0; pointer-events: none; }
.vc .rm-track { position: relative; height: 100%; }
.vc .rm-line, .vc .rm-done { position: absolute; left: 0; top: 50%; height: 0; border-top: 2px dotted rgba(90, 62, 76, .45); }
.vc .rm-line { right: 0; }
.vc .rm-done { right: 0; border-top: 2px solid #C99A48; transform: scaleX(0); transform-origin: 0 0; will-change: transform; }
.vc .rm-stop { position: absolute; top: 50%; width: 26px; height: 44px; padding: 0; border: 0; background: none; transform: translate(-50%, -50%); cursor: pointer; display: grid; place-items: center; }
.vc .rm-stop i { display: block; width: 9px; height: 9px; border-radius: 50%; background: #FFF8EE; box-shadow: 0 0 0 1.5px #C99A48; transition: transform .3s, background .3s; }
.vc .rm-stop.is-past i { background: #E2BE6A; }
.vc .rm-stop.is-here i { transform: scale(1.4); background: var(--rz-primary); }
.vc .rm-car { position: absolute; left: 0; top: 50%; color: #8C6526; transform: translate(-50%, -88%); pointer-events: none; will-change: transform; }

/* ---------- portada ---------- */
.vc .cover { position: absolute; inset: 0; pointer-events: none; transition: opacity .6s; }
.vc .cover > * { pointer-events: auto; }
.vc .is-travel .cover { opacity: 0; visibility: hidden; transition: opacity .6s, visibility 0s .6s; }
.vc .cv-title { position: absolute; left: 12px; right: 12px; top: calc(58px + var(--safe-t)); text-align: center; pointer-events: none; }
.vc .cv-pre { margin: 0; font: 700 clamp(19px, 3vh, 24px)/1.1 var(--font-head); color: #6A4658; text-shadow: 0 0 10px rgba(255, 250, 240, .9), 0 0 2px #FFF; }
.vc .cv-name { margin: 0; font: 400 clamp(54px, 9.4vh, 80px)/1.05 var(--font-script); color: #A4507A; text-shadow: 0 0 14px rgba(255, 250, 240, .95), 0 0 3px #FFF, 0 2px 0 rgba(255, 255, 255, .8); }
.vc .cv-badge { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 0; padding: 6px 16px; border-radius: 999px; background: var(--gold-grad); color: #3A2618; font: 700 17px/1 var(--font-head); box-shadow: 0 4px 12px rgba(120, 80, 40, .25); }
.vc .sign { position: absolute; left: 50%; top: 61%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.vc .sign-board { display: block; max-width: 290px; padding: 12px 20px; border-radius: 10px; background:
  repeating-linear-gradient(0deg, rgba(90, 58, 34, .08) 0 2px, transparent 2px 7px), linear-gradient(180deg, #C9A07A, #A97C56); color: #FFF8EC; font: 700 18px/1.25 var(--font-head); text-shadow: 0 1px 0 rgba(70, 40, 20, .7);
  box-shadow: inset 0 0 0 2px rgba(255, 236, 200, .35), 0 0 0 2px #7A5638, 0 8px 16px rgba(70, 40, 20, .3); transform: rotate(-2deg); }
.vc .sign-post { display: block; width: 10px; height: calc(var(--u) * 6); background: linear-gradient(90deg, #8A6444, #A97C56); border-radius: 0 0 4px 4px; }
.vc .hand { position: absolute; left: 54%; top: 72%; opacity: 0; pointer-events: none; transition: opacity .6s; }
.vc .show-hand .hand { opacity: 1; animation: vc-swipe 1.8s ease-in-out infinite; }
@keyframes vc-swipe { 0% { transform: translate(0, 18px); opacity: 0; } 20% { opacity: 1; } 70% { transform: translate(0, -30px); opacity: 1; } 100% { transform: translate(0, -34px); opacity: 0; } }
.vc .info-link { position: absolute; left: 50%; bottom: calc(18px + var(--safe-b)); transform: translateX(-50%); min-height: 44px; padding: 0 18px; border: 1px solid rgba(var(--rz-gold-rgb), .7); border-radius: 999px; background: rgba(255, 250, 242, .92); color: var(--rz-ink); font: 700 16px/1 var(--font-text); cursor: pointer; white-space: nowrap; }

/* ---------- pergamino de cada estación (se desenrolla hacia abajo; nunca tapa al carruaje: empieza al 57 %) ---------- */
.vc .scroll-card { position: absolute; left: 10px; right: 10px; bottom: calc(10px + var(--safe-b)); max-height: calc(43% - 10px - var(--safe-b)); display: flex; flex-direction: column; opacity: 0; pointer-events: none;
  clip-path: inset(0 0 calc(100% - 20px) 0); transition: clip-path .55s var(--ease-soft), opacity .25s; }
.vc .scroll-card.is-on { opacity: 1; pointer-events: auto; clip-path: inset(-12px -8px -16px -8px); }
.vc .scroll-card.no-anim { transition: none; }
.vc.rm .scroll-card { clip-path: none; transition: opacity .3s; }
.vc .sc-roll { flex: none; display: block; height: 14px; margin: 0 -4px; border-radius: 8px; background: linear-gradient(180deg, #F2DDB8 0%, #FFF6E2 40%, #D9B98A 100%); box-shadow: 0 0 0 1px rgba(160, 120, 70, .5), 0 3px 6px rgba(90, 60, 40, .25); position: relative; z-index: 1; }
.vc .sc-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: -4px 0; background: var(--parch); color: var(--rz-ink); box-shadow: inset 0 8px 10px -8px rgba(120, 80, 40, .35), inset 0 -8px 10px -8px rgba(120, 80, 40, .35), 0 8px 22px rgba(90, 60, 40, .25); touch-action: pan-y; }
.vc .sc-inner { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 8px; }
.vc .sc-inner .kicker { display: flex; align-items: center; gap: 6px; margin: 0; font: 800 13px/1.2 var(--font-text); letter-spacing: .06em; text-transform: uppercase; color: #9A6A48; }
.vc .sc-inner h2 { margin: 0; font: 700 24px/1.15 var(--font-head); color: var(--rz-ink); }
.vc .sc-inner .lead { margin: 0; font: 600 16px/1.45 var(--font-text); }
.vc .sc-inner .big { margin: 0; font: 700 20px/1.25 var(--font-head); }
.vc .sc-inner .sub { margin: 0; font: 600 16px/1.3 var(--font-text); color: #6A4A58; }
.vc .sc-inner .hosts, .vc .sc-inner .dead { display: flex; align-items: center; gap: 6px; margin: 0; font: 700 16px/1.3 var(--font-text); color: #6A4A58; }
.vc .sc-inner .hosts span:first-child, .vc .sc-inner .dead span:first-child { color: #C98AA0; display: grid; }
.vc .sc-inner .go-on { align-self: flex-end; min-height: 44px; margin-top: 2px; }
.vc .sc-inner .gbtn.is-primary.is-big { width: 100%; }
.vc .sc-inner .link-btn { align-self: center; }
.vc .btns { display: flex; flex-wrap: wrap; gap: 8px; }
.vc .btns > * { flex: 1 1 140px; }
.vc .btns.col { flex-direction: column; }
.vc .btns.col > * { flex: none; width: 100%; }