/* ═══════════════ Veredia™ animated diagrams — shared by veredia.html and
   ai-services.html (Javi 2026-10-02). Markup lives in js/veredia-diagrams.js;
   a page shows one with <div class="vr-diagram" data-vr-diagram="concierge"></div>.
   Add .vr-dark on the diagram (or an ancestor) for dark sections. ═══════════════ */
.vr-diagram{position:relative; border-radius:22px; padding:18px; background:linear-gradient(180deg,#ffffff 0%,#F5F7FD 100%); border:1px solid #E2E5F0; box-shadow:0 30px 60px rgba(16,24,64,.10)}
.vr-dark .vr-diagram, .vr-diagram.vr-dark{background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.03) 100%); border-color:rgba(255,255,255,.14); box-shadow:0 30px 60px rgba(0,0,0,.35)}
.vr-diagram svg{width:100%; height:auto; display:block; overflow:visible}
.vr-diagram .lbl{font-family:'articulat-cf',-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:700}
.vr-diagram .cap{font-family:'articulat-cf',-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400}
/* Embedded in a product section (ai-services.html) */
.vr-embed{max-width:640px; margin:0 auto 54px; text-align:center}
.vr-embed-cap{margin:18px 0 0 !important; font-size:15px; line-height:1.5; color:#5b6478; font-weight:300 !important; text-align:center !important}
.vr-embed .vr-embed-cap a{color:#1630ED !important; font-weight:600; text-decoration:underline; text-underline-offset:3px}
.vr-dark .vr-embed-cap, .vr-embed.vr-dark .vr-embed-cap{color:rgba(255,255,255,.72)}
.vr-dark .vr-embed .vr-embed-cap a, .vr-embed.vr-dark .vr-embed-cap a{color:#93A8FF !important}
/* Split layout: section text on the left, animation on the right (ai-services.html) */
.vr-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:52px; align-items:start; max-width:1100px; margin:0 auto 44px; text-align:left}
.vr-split .vr-split-text>p:first-child{margin-top:0 !important}
.vr-split.vr-split-wide{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); margin-top:64px}
.vr-split .vr-split-text{min-width:0}
.vr-split .vr-split-text>p{max-width:none !important; margin-left:0 !important; margin-right:0 !important; text-align:left !important}
.vr-split>.vr-embed{max-width:none; margin:0; width:100%}
@media(max-width:940px){.vr-split{grid-template-columns:1fr; gap:30px} .vr-split>.vr-embed{max-width:640px; margin:0 auto}}
/* Flow lines: dashed, running */
.vr-flow{fill:none; stroke:#1630ED; stroke-width:2; stroke-dasharray:6 8; stroke-linecap:round; animation:vrDash 1.6s linear infinite; opacity:.85}
.vr-dark .vr-flow{stroke:#93A8FF}
.vr-flow.g{stroke:#3fbf5a}
.vr-dark .vr-flow.g{stroke:#8CF59A}
@keyframes vrDash{to{stroke-dashoffset:-28}}
/* Packet: a dot travelling along a path (SMIL animateMotion) */
.vr-pkt{fill:#1630ED} .vr-pkt.g{fill:#3fbf5a}
.vr-dark .vr-pkt{fill:#fff}
/* Nodes */
.vr-node{fill:#fff; stroke:#D9DEF0; stroke-width:1.5}
.vr-dark .vr-node{fill:rgba(255,255,255,.08); stroke:rgba(255,255,255,.25)}
.vr-node.hi{stroke:#1630ED; stroke-width:2}
.vr-dark .vr-node.hi{stroke:#93A8FF}
.vr-pulse{animation:vrPulse 2.4s ease-in-out infinite; transform-origin:center; transform-box:fill-box}
@keyframes vrPulse{0%,100%{opacity:.35; transform:scale(1)}50%{opacity:0; transform:scale(1.55)}}
/* Text colors that flip on dark */
.vr-t1{fill:#0e0e10} .vr-dark .vr-t1{fill:#fff}
.vr-t2{fill:#3a4152} .vr-dark .vr-t2{fill:rgba(255,255,255,.78)}
.vr-t3{fill:#8A93AD} .vr-dark .vr-t3{fill:rgba(255,255,255,.6)}
.vr-ey{fill:#1630ED} .vr-dark .vr-ey{fill:#93A8FF}
/* Chat bubbles typing sequence */
.vr-b{opacity:0; animation:vrBubble 12s ease-in-out infinite}
.vr-b.b1{animation-delay:.2s}.vr-b.b2{animation-delay:1.8s}.vr-b.b3{animation-delay:3.6s}.vr-b.b4{animation-delay:5.4s}.vr-b.b5{animation-delay:7.2s}.vr-b.b6{animation-delay:9s}
@keyframes vrBubble{0%{opacity:0; transform:translateY(6px)}4%{opacity:1; transform:none}84%{opacity:1}92%{opacity:0}100%{opacity:0}}
.vr-tick{opacity:0; animation:vrTick 12s ease-in-out infinite}
.vr-tick.k1{animation-delay:2.2s}.vr-tick.k2{animation-delay:3.8s}.vr-tick.k3{animation-delay:5.6s}.vr-tick.k4{animation-delay:7.4s}.vr-tick.k5{animation-delay:9.2s}
@keyframes vrTick{0%{opacity:0; transform:translateX(-6px)}4%{opacity:1; transform:none}84%{opacity:1}92%{opacity:0}100%{opacity:0}}
/* Voice: Ori "habla" — la onda cercana aparece primero, luego la lejana, en loop */
.vr-wave1,.vr-wave2{opacity:0; animation:vrTalk 1.6s ease-in-out infinite; transform-box:fill-box; transform-origin:left center}
.vr-wave2{animation-delay:.3s}
@keyframes vrTalk{0%{opacity:0; transform:scale(.85)}25%,60%{opacity:1; transform:scale(1)}85%,100%{opacity:0; transform:scale(1)}}
/* Call waveform */
.vr-wave rect{animation:vrWave 1.1s ease-in-out infinite; transform-origin:center; transform-box:fill-box}
.vr-wave rect:nth-child(2){animation-delay:.12s}.vr-wave rect:nth-child(3){animation-delay:.24s}.vr-wave rect:nth-child(4){animation-delay:.36s}.vr-wave rect:nth-child(5){animation-delay:.48s}.vr-wave rect:nth-child(6){animation-delay:.6s}.vr-wave rect:nth-child(7){animation-delay:.72s}
@keyframes vrWave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.vr-ring{animation:vrRing 2.2s ease-in-out infinite; transform-origin:center; transform-box:fill-box}
@keyframes vrRing{0%,100%{opacity:.9; transform:scale(1)}50%{opacity:0; transform:scale(1.7)}}
/* Calendar slot fill + check */
.vr-slot{animation:vrSlot 6s ease-in-out infinite}
@keyframes vrSlot{0%,30%{fill:#EEF1F9}45%,100%{fill:#6CDD61}}
.vr-check{stroke-dasharray:30; stroke-dashoffset:30; animation:vrCheck 6s ease-in-out infinite}
@keyframes vrCheck{0%,45%{stroke-dashoffset:30}60%,100%{stroke-dashoffset:0}}
/* Assist: toggles and page transform */
.vr-tg{animation:vrToggle 8s ease-in-out infinite; transform-box:fill-box; transform-origin:center}
.vr-tg.t2{animation-delay:2s}.vr-tg.t3{animation-delay:4s}.vr-tg.t4{animation-delay:6s}
@keyframes vrToggle{0%,15%{transform:translateX(0)}25%,100%{transform:translateX(18px)}}
.vr-tgbg{animation:vrToggleBg 8s ease-in-out infinite}
.vr-tgbg.t2{animation-delay:2s}.vr-tgbg.t3{animation-delay:4s}.vr-tgbg.t4{animation-delay:6s}
@keyframes vrToggleBg{0%,15%{fill:#C9D0EA}25%,100%{fill:#1630ED}}
.vr-txt-grow{animation:vrGrow 8s ease-in-out infinite; transform-box:fill-box; transform-origin:left center}
@keyframes vrGrow{0%,15%{transform:scale(1)}25%,100%{transform:scale(1.22)}}
.vr-contrast{animation:vrContrast 8s ease-in-out infinite; animation-delay:2s}
@keyframes vrContrast{0%,15%{fill:#F5F7FD}25%,100%{fill:#0e0e10}}
.vr-contrast-t{animation:vrContrastT 8s ease-in-out infinite; animation-delay:2s}
@keyframes vrContrastT{0%,15%{fill:#8A93AD}25%,100%{fill:#ffffff}}
.vr-guide{animation:vrGuide 8s ease-in-out infinite; animation-delay:4s}
@keyframes vrGuide{0%,15%{opacity:0}25%,100%{opacity:1}}
.vr-focus{animation:vrFocus 8s ease-in-out infinite; animation-delay:6s}
@keyframes vrFocus{0%,15%{opacity:0}25%,100%{opacity:1}}
/* Scanner: beam + gauge */
.vr-beam{animation:vrBeam 3.2s ease-in-out infinite}
@keyframes vrBeam{0%{transform:translateY(0)}50%{transform:translateY(150px)}100%{transform:translateY(0)}}
.vr-gauge{stroke-dasharray:283; stroke-dashoffset:283; animation:vrGauge 6s ease-out infinite}
@keyframes vrGauge{0%,20%{stroke-dashoffset:283}60%,100%{stroke-dashoffset:96}}
.vr-issue{opacity:0; animation:vrIssue 6s ease-in-out infinite}
.vr-issue.i2{animation-delay:.5s}.vr-issue.i3{animation-delay:1s}.vr-issue.i4{animation-delay:1.5s}.vr-issue.i5{animation-delay:2s}
@keyframes vrIssue{0%,25%{opacity:0; transform:translateX(-6px)}35%,100%{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){
  .vr-flow,.vr-pulse,.vr-b,.vr-tick,.vr-wave rect,.vr-wave1,.vr-wave2,.vr-ring,.vr-slot,.vr-check,.vr-tg,.vr-tgbg,.vr-txt-grow,.vr-contrast,.vr-contrast-t,.vr-guide,.vr-focus,.vr-beam,.vr-gauge,.vr-issue{animation:none !important}
  .vr-b,.vr-tick,.vr-issue,.vr-guide,.vr-focus,.vr-wave1,.vr-wave2{opacity:1} .vr-gauge{stroke-dashoffset:96}
}