/* El recorrido completo: animación 3D en cinco escenas (solo CSS + journey.mjs, sin librerías).
   Cada escena se dibuja en un lienzo fijo de 600×420 px que journey.mjs escala al ancho disponible (--s). */

@property --fy{syntax:'<length>';inherits:false;initial-value:0px}

.journey{background:var(--white);border-block:1px solid var(--line)}
.journey-player{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:48px;align-items:center}

/* Escenario */
.journey-stage{position:relative;aspect-ratio:10/7.4;border-radius:var(--r-lg);overflow:hidden;perspective:1100px;perspective-origin:50% 35%;
  background:radial-gradient(circle at 1px 1px,#ffffff12 1px,transparent 1.5px) 0 0/22px 22px,radial-gradient(120% 90% at 50% 25%,#1f2a62 0,var(--night) 70%)}
.j-float{position:absolute;left:50%;top:50%;width:600px;height:420px;margin:-210px 0 0 -300px;transform:scale(var(--s,1));transform-style:preserve-3d;font-family:'Schibsted Grotesk',Arial,sans-serif;color:var(--ink)}

/* Escenas y cambio de cámara */
.j-scene{position:absolute;inset:0;transform-style:preserve-3d;opacity:0;visibility:hidden;
  transform:translateX(90px) rotateY(-32deg) translateZ(-260px);
  transition:opacity .5s ease,transform .9s cubic-bezier(.2,.8,.2,1),visibility 0s linear .9s}
.j-scene.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease .15s,transform .9s cubic-bezier(.2,.8,.2,1),visibility 0s}
.j-scene.is-leaving{transform:translateX(-90px) rotateY(32deg) translateZ(-260px)}
.j-rig{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s ease-out;
  transform:translateY(var(--fy)) rotateX(calc(14deg + var(--ty,0deg))) rotateY(calc(-20deg + var(--tx,0deg)))}
.j-shadow{position:absolute;left:40px;right:40px;bottom:-30px;height:90px;transform:translateZ(-60px) rotateX(82deg);background:radial-gradient(closest-side,#00000080,transparent);filter:blur(6px)}

/* Capas: cada una sale de la profundidad hasta su sitio */
.j-layer{position:absolute;transform:translateZ(calc(var(--z)*1px));transform-style:preserve-3d;border-radius:14px}
.is-active .j-layer{animation:j-in .85s cubic-bezier(.2,.8,.2,1) var(--d) both}
@keyframes j-in{from{opacity:0;transform:translateZ(calc(var(--z)*1px - 170px)) translateY(24px)}to{opacity:1;transform:translateZ(calc(var(--z)*1px))}}
.j-line{display:block;height:9px;border-radius:5px;background:#dfe3ec;margin-top:10px}
.j-big{height:16px;background:var(--ink);margin-top:12px}

/* 1. Captación */
.j-browser{left:0;top:30px;width:380px;height:330px;background:#fff;overflow:hidden;box-shadow:0 30px 60px #0006}
.j-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:#eceef4}
.j-bar i{width:9px;height:9px;border-radius:50%;background:#c6cbd8}
.j-bar span{margin-left:12px;background:#fff;border-radius:6px;padding:3px 12px;font-size:12px;color:var(--muted)}
.j-page{padding:26px 28px}
.j-logo{font:800 30px/1 'Manrope',Arial,sans-serif;letter-spacing:-.09em;display:block;margin-bottom:22px}
.j-logo em{font-style:normal;color:var(--blue);letter-spacing:0}
.j-cta{display:inline-block;margin-top:24px;background:var(--blue);color:#fff;font-size:14px;font-weight:600;padding:11px 16px;border-radius:8px}
.is-active .j-cta{animation:j-press .3s ease 2s}
@keyframes j-press{50%{transform:scale(.92)}}
.j-search{left:250px;top:6px;width:300px;background:#fff;padding:14px 16px;box-shadow:0 24px 50px #0007}
.j-q{display:block;font-size:14px;color:var(--muted);padding:0 0 12px 22px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 6px 7px,transparent 4px,var(--muted) 4.5px,transparent 6px) no-repeat 0 0/16px 16px}
.j-result{margin-top:12px;padding:8px 12px;border-left:3px solid var(--blue);background:var(--pale);border-radius:4px}
.j-result strong{display:block;font-size:15px;color:var(--blue)}
.j-result span{font-size:12px;color:var(--muted)}
.j-cursor{position:absolute;width:22px;height:26px;background:#fff;clip-path:polygon(0 0,0 100%,30% 75%,52% 100%,66% 92%,45% 68%,85% 68%);filter:drop-shadow(0 2px 2px #0008);transform:translateZ(200px);opacity:0;left:430px;top:80px}
.is-active .j-cursor{animation:j-cursor 2s ease-in-out .9s both}
@keyframes j-cursor{0%{opacity:0;left:470px;top:110px}12%{opacity:1;left:440px;top:84px}35%{left:440px;top:84px}80%,100%{opacity:1;left:110px;top:282px}}
.j-calendar{left:300px;top:200px;width:270px;background:#fff;padding:16px;box-shadow:0 30px 60px #0008}
.j-calendar strong{font-size:16px}
.j-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0}
.j-slots span{font-size:12px;text-align:center;padding:8px 2px;border:1px solid var(--line);border-radius:6px}
.j-slots .j-picked{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.j-calendar em{font-style:normal;font-size:14px;font-weight:600;color:#157a45}
.j-calendar em::before{content:'✓ '}

/* 2. Videollamada */
.j-call{left:0;top:20px;width:420px;height:320px;background:#161e45;border:1px solid #2a3256;padding:14px;box-shadow:0 30px 60px #0007}
.j-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;height:240px}
.j-tile{position:relative;border-radius:10px;overflow:hidden;background:#232c5c}
.j-tile img{width:100%;height:100%;object-fit:cover;display:block}
.j-tile span{position:absolute;left:8px;bottom:8px;font-size:12px;color:#fff;background:#0f1530b3;padding:3px 8px;border-radius:5px}
.j-you{display:grid;place-items:center;background:linear-gradient(160deg,#2b44f0,#1d32c4)}
.j-you b{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:#fff;color:var(--blue);font-size:28px}
.is-active .j-you b{animation:j-talk 1.4s ease-in-out 1.2s 3}
@keyframes j-talk{50%{box-shadow:0 0 0 10px #ffffff40}}
.j-controls{display:flex;justify-content:center;gap:12px;margin-top:16px}
.j-controls i{width:34px;height:34px;border-radius:50%;background:#2a3256}
.j-controls .j-hang{background:#e5484d}
.j-timer{left:250px;top:-10px;background:#fff;font-size:14px;font-weight:600;padding:8px 14px;border-radius:999px;box-shadow:0 14px 30px #0006;white-space:nowrap}
.j-timer i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#e5484d;margin-right:8px}
.is-active .j-timer i{animation:j-blink 1s steps(2) infinite}
@keyframes j-blink{50%{opacity:.2}}
.j-notes{left:385px;top:165px;width:215px;background:#fff;padding:16px;box-shadow:0 30px 60px #0008}
.j-notes strong{display:block;font-size:15px;margin-bottom:6px}
.j-notes p{font-size:13px;color:var(--ink);padding:7px 0;border-top:1px solid var(--line)}
.j-notes .j-key{background:var(--signal);border-radius:6px;padding:7px 8px;border:0;font-weight:600}
.is-active .j-notes p{animation:j-write .45s ease-out calc(1.4s + var(--n)*.6s) both}
@keyframes j-write{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}

/* 3. Propuesta */
.j-doc{left:40px;top:-10px;width:300px;height:400px;background:#fff;padding:26px;box-shadow:0 30px 60px #0007}
.j-doc-tag{display:inline-block;font-size:12px;font-weight:600;color:var(--blue);background:var(--pale);border-radius:999px;padding:4px 10px}
.j-doc strong{display:block;font-size:22px;line-height:1.15;margin:14px 0 4px;letter-spacing:-.02em}
.j-doc ul{list-style:none;margin:22px 0 0;padding:0}
.j-doc li{display:flex;align-items:center;gap:10px;font-size:15px;padding:10px 0;border-top:1px solid var(--line)}
.j-doc li::before{content:'';width:18px;height:18px;border-radius:5px;border:2px solid #c6cbd8;flex:none}
.is-active .j-doc li::before{animation:j-tick .35s ease-out calc(.9s + var(--n)*.4s) both}
@keyframes j-tick{to{background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;border-color:var(--blue)}}
.j-mail{left:300px;top:230px;width:280px;display:flex;align-items:center;gap:14px;background:#fff;padding:16px;box-shadow:0 30px 60px #0008}
.j-mail-icon{width:44px;height:44px;flex:none;border-radius:10px;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center/24px no-repeat}
.j-mail strong{display:block;font-size:15px}
.j-mail span{font-size:12px;color:var(--muted)}

/* 4. Acuerdo en persona */
.j-flat{position:absolute;left:60px;right:60px;top:150px;height:250px;transform-style:preserve-3d;transform:rotateX(62deg)}
.j-table{inset:0;background:linear-gradient(160deg,#e9ecf4,#cfd5e4);border-radius:26px;box-shadow:0 40px 60px #0008}
.j-paper{position:absolute;left:50%;top:50%;width:190px;height:200px;margin:-100px 0 0 -95px;background:#fff;border-radius:8px;padding:18px;transform:rotate(-4deg);box-shadow:0 6px 14px #0003}
.j-sign{position:absolute;left:24px;bottom:30px;width:120px;height:40px}
.j-sign path{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:260;stroke-dashoffset:260}
.is-active .j-sign path{animation:j-sign 1.4s ease-in-out 1.2s forwards}
@keyframes j-sign{to{stroke-dashoffset:0}}
.j-stamp{position:absolute;right:10px;top:16px;font-size:11px;font-weight:700;color:#157a45;border:2px solid #157a45;border-radius:6px;padding:3px 6px;transform:rotate(8deg) scale(1.4);opacity:0}
.is-active .j-stamp{animation:j-stamp .35s ease-out 2.7s forwards}
@keyframes j-stamp{to{opacity:1;transform:rotate(8deg) scale(1)}}
.j-person{width:96px;height:150px;top:92px}
.j-person img,.j-person b{display:block;width:96px;height:96px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 14px 30px #0007}
.j-person b{display:grid;place-items:center;background:var(--blue);color:#fff;font-size:30px}
.j-person::after{content:'';display:block;width:120px;height:64px;margin:6px 0 0 -12px;border-radius:60px 60px 14px 14px;background:#3a4685}
.j-p1{left:56px}
.j-p2{right:56px}
.j-place{left:205px;top:20px;background:#fff;font-size:14px;font-weight:600;padding:9px 16px 9px 34px;border-radius:999px;box-shadow:0 14px 30px #0006;white-space:nowrap;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b44f0' stroke-width='2'%3E%3Cpath d='M12 21s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12Z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E") 12px center/16px no-repeat}

/* 5. Entrega */
.j-dash{left:0;top:30px;width:350px;height:300px;background:#fff;padding:20px;box-shadow:0 30px 60px #0007}
.j-dash strong{font-size:16px}
.j-bars{display:flex;align-items:flex-end;gap:12px;height:210px;margin-top:20px;border-bottom:1px solid var(--line)}
.j-bars i{flex:1;height:var(--h);border-radius:6px 6px 0 0;background:var(--blue);transform-origin:bottom}
.is-active .j-bars i{animation:j-grow .6s cubic-bezier(.2,.8,.2,1) both}
.is-active .j-bars i:nth-child(2){animation-delay:.1s}.is-active .j-bars i:nth-child(3){animation-delay:.2s}.is-active .j-bars i:nth-child(4){animation-delay:.3s}.is-active .j-bars i:nth-child(5){animation-delay:.4s}.is-active .j-bars i:nth-child(6){animation-delay:.5s}
@keyframes j-grow{from{transform:scaleY(0)}}
.j-list{left:240px;top:150px;width:240px;background:#fff;padding:8px 16px;box-shadow:0 30px 60px #0008}
.j-list p{font-size:13px;color:var(--ink);padding:9px 0 9px 24px;border-top:1px solid var(--line);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23157a45' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 center/15px no-repeat}
.j-list p:first-child{border-top:0}
.j-phone{left:455px;top:40px;width:120px;height:230px;background:var(--ink);border:3px solid #2a3256;border-radius:22px;padding:30px 8px 8px;box-shadow:0 30px 60px #0008}
.j-phone::before{content:'';position:absolute;left:50%;top:9px;width:40px;height:8px;margin-left:-20px;border-radius:5px;background:#2a3256}
.j-phone span{display:block;background:#fff;border-radius:10px;padding:8px;font-size:11px;font-weight:600;line-height:1.3}
.j-done{left:150px;top:350px;display:flex;align-items:center;gap:10px;background:#157a45;color:#fff;font-size:16px;font-weight:600;padding:12px 20px;border-radius:999px;box-shadow:0 20px 40px #0008;white-space:nowrap}
.j-done i{width:22px;height:22px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23157a45' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}

/* Lista de pasos */
.journey-steps{list-style:none;margin:0;padding:0}
.journey-steps li{border-top:1px solid var(--line);padding:14px 0 12px}
.journey-steps li:last-child{border-bottom:1px solid var(--line)}
.journey-steps button{display:flex;align-items:center;gap:14px;width:100%;background:none;border:0;padding:4px 0;font-size:18px;font-weight:650;color:var(--muted);text-align:left;cursor:pointer;letter-spacing:-.01em}
.journey-steps button:hover{color:var(--ink)}
.journey-steps .is-active button{color:var(--ink)}
.j-num{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);font-size:14px;font-weight:700;flex:none;color:var(--muted)}
.is-active .j-num{background:var(--blue);border-color:var(--blue);color:#fff}
.journey-steps p{font-size:15px;line-height:1.6;margin:8px 0 0 44px}
.j-progress{display:block;height:2px;margin:12px 0 0 44px;background:var(--line);border-radius:2px;overflow:hidden;visibility:hidden}
.j-progress i{display:block;height:100%;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:left}
.journey.is-playing .is-active .j-progress{visibility:visible}
.journey.is-playing .is-active .j-progress i{animation:j-progress 6.5s linear forwards}
.journey.is-playing.is-paused .is-active .j-progress i,.journey.is-playing.is-offscreen .is-active .j-progress i{animation-play-state:paused}
@keyframes j-progress{to{transform:scaleX(1)}}
.journey-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:28px}

/* Flotación suave del conjunto */
@media (prefers-reduced-motion:no-preference){
  .j-rig{animation:j-float 7s ease-in-out infinite}
  @keyframes j-float{50%{--fy:-8px}}
}

/* Movimiento reducido: escenas estáticas, sin cámara ni autoplay */
@media (prefers-reduced-motion:reduce){
  .j-scene,.j-scene.is-active{transition:none}
  .is-active .j-layer,.is-active .j-cursor,.is-active .j-notes p,.is-active .j-doc li::before,.is-active .j-bars i,.is-active .j-cta,.is-active .j-you b,.is-active .j-timer i{animation:none}
  .j-cursor{display:none}
  .is-active .j-doc li::before{background:var(--blue);border-color:var(--blue)}
  .j-sign path{stroke-dashoffset:0}
  .j-stamp{opacity:1;transform:rotate(8deg)}
  [data-journey-toggle]{display:none}
}

@media(max-width:1100px){
  .journey-player{grid-template-columns:1fr;gap:32px}
}
@media(max-width:760px){
  .journey-stage{aspect-ratio:1/0.82;border-radius:var(--r-md)}
  .journey-steps button{font-size:16px}
  .journey-steps p{font-size:15px}
  .journey-actions .button{width:100%}
}