.product-demo{min-width:0;color:#173429}.pd-label{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.3px;font-weight:700;margin:0 0 18px}.pd-label>span{color:#718078;font-size:8px}.pd-screen{border-radius:36px;overflow:hidden;background:#f7f7f7;border:2px solid #101817}.pd-status{height:43px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;color:#14211c;font-size:10px;position:relative}.pd-island{background:#101313;width:78px;height:22px;border-radius:20px;position:absolute;left:50%;transform:translateX(-50%);top:9px}.pd-chathead{display:flex;align-items:center;gap:8px;padding:8px 9px 11px;border-bottom:1px solid #dadeda;background:#fafafa}.pd-back{font-size:29px;color:#147b57}.pd-avatar{display:grid;place-items:center;border-radius:50%;width:32px;height:32px;background:#d7e5d9;color:#477450;font:italic 22px Georgia}.pd-chathead strong{font-size:12px;display:block;color:#16251e}.pd-chathead small{display:block;font-size:9px;margin-top:3px;color:#6e7973}.pd-call{margin-left:auto;font-size:23px;color:#168464}.pd-chat{height:452px;position:relative;display:flex;flex-direction:column;gap:7px;padding:10px 10px 25px;background-color:#efeae2;background-image:radial-gradient(#cec6b94d .8px,transparent .8px);background-size:13px 13px}.pd-date{align-self:center;padding:4px 8px;border-radius:5px;background:#fff9;color:#69706c;font-size:8px;margin-bottom:3px}.pd-message{max-width:91%;padding:7px 8px 4px;border-radius:8px;box-shadow:0 1px 1px #0002;font-size:11.5px;line-height:1.38;color:#17211d;transition:opacity .3s,transform .3s}.pd-message small{display:block;text-align:right;font-size:8px;color:#728079;line-height:1.3;margin-top:2px}.pd-message small b{color:#39a4cf;letter-spacing:-2px;margin-left:3px}.pd-sent{align-self:flex-end;background:#d9fdd3;border-top-right-radius:2px}.pd-received{align-self:flex-start;background:white;border-top-left-radius:2px}.pd-message.is-pending{opacity:0;transform:translateY(6px);visibility:hidden}.pd-typing{display:none;position:absolute;bottom:7px;left:12px;background:white;border-radius:12px;padding:4px 10px;font-size:9px;color:#66746c}.product-demo.is-typing .pd-typing{display:block}.pd-input{height:40px;display:flex;gap:9px;align-items:center;padding:5px 9px;color:#157851;font-size:20px}.pd-input>div{border:1px solid #e0e4df;border-radius:20px;background:white;font-size:10px;color:#9ba29e;flex:1;padding:7px 10px;display:flex;justify-content:space-between}.pd-homebar{height:4px;background:#18201c;width:90px;border-radius:4px;margin:5px auto 9px}.pd-controls{display:flex;justify-content:space-between;align-items:center;font-size:11px}.pd-replay{background:none;border:0;color:#376646;cursor:pointer;min-height:44px;font-size:12px;padding:8px}.pd-replay:focus-visible{outline:2px solid #376646;outline-offset:2px}.pd-disclaimer{font-size:10px;color:#718077;margin:0}.pd-caption{font-weight:600}



@media(prefers-reduced-motion:reduce){.product-demo *{transition:none!important}}
.pd-call svg,.pd-input>span svg{width:19px;height:19px;display:block}.pd-message{flex-shrink:0}

/* ── Escena hero v3: iPhone + panel horizontal ── */
.pd-stage{--pd-s:1;--pd-w:640;--pd-h:500;position:relative;height:calc(var(--pd-h)*1px*var(--pd-s));isolation:isolate}
.pd-canvas{position:absolute;left:0;top:0;width:calc(var(--pd-w)*1px);height:calc(var(--pd-h)*1px);transform:scale(var(--pd-s));transform-origin:0 0;perspective:1500px;perspective-origin:30% 45%}
.pd-canvas:before{content:'';position:absolute;z-index:-1;inset:6% 0 0 8%;background:radial-gradient(ellipse at 45% 55%,#e3ece5,transparent 68%)}

/* iPhone */
.pd-phone{position:absolute;z-index:3;left:-24px;top:-66px;width:282px;transform-style:preserve-3d;transform-origin:50% 50%;transform:scale(var(--pd-ps,.75)) rotateX(var(--pd-rx,14deg)) rotateY(var(--pd-ry,30deg)) rotateZ(var(--pd-rz,-6deg))}
.pd-face{position:relative;padding:8px;border-radius:46px;background:#050607;box-shadow:inset 0 0 0 1px #5d6367,inset 0 0 0 2.5px #d5d9dc,inset 0 0 0 3.5px #8d9397,inset 0 0 0 5px #121517}
.pd-face .pd-screen{border:0;border-radius:38px}
.pd-glare{position:absolute;z-index:5;inset:8px;border-radius:38px;pointer-events:none;background:linear-gradient(115deg,#ffffff38 0%,#ffffff12 24%,transparent 38%,transparent 72%,#ffffff0d 86%,transparent 100%)}
.pd-layer{position:absolute;inset:0;border-radius:46px;background:linear-gradient(180deg,#e4e7e9 0%,#a3a9ad 18%,#cfd3d6 42%,#8f959a 70%,#c2c6c9 90%,#7f858a 100%);transform:translateZ(calc(var(--z)*-1.8px))}
.pd-layer[style*="--z:1;"],.pd-layer[style$="--z:1"]{background:#5b6166}
.pd-layer[style$="--z:14"]{background:#2d3134;box-shadow:40px 50px 70px #1637263a,14px 18px 26px #1637262e}
.pd-btn{position:absolute;width:6px;border-radius:3px;background:linear-gradient(180deg,#eef0f1,#a2a8ac 45%,#cdd1d4 70%,#868c90);transform:translateZ(-13px)}
.pd-btn-action{left:-4px;top:98px;height:26px}.pd-btn-vol1{left:-4px;top:142px;height:46px}.pd-btn-vol2{left:-4px;top:198px;height:46px}.pd-btn-power{right:-4px;top:160px;height:72px}
.pd-screen{position:relative;transform:translateZ(.5px)}
.pd-face .pd-chat{height:412px}

/* Panel horizontal */
.pd-dashboard{position:absolute;z-index:1;left:188px;top:40px;width:448px;border:1px solid #dde4e0;border-radius:14px;background:#f6f8f7;box-shadow:0 24px 50px #1d3a2a1f,0 3px 8px #1d3a2a0d;overflow:visible;transform-origin:0 50%;transform:rotateX(5deg) rotateY(-11deg);font-size:9px;color:#173429}
.pd-dashhead{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#fff;border-bottom:1px solid #e3e9e5;border-radius:14px 14px 0 0}
.pd-dashhead img{width:58px}.pd-dashhead>span{font-size:11.5px;font-weight:700;color:#142b20;line-height:1.1}.pd-dashhead small{display:block;font-size:7.5px;font-weight:400;color:#6b7d73;margin-top:3px}
.pd-dashtools{margin-left:auto;display:flex;gap:6px}.pd-dashtools i{font-style:normal;font-size:8px;color:#4d6157;border:1px solid #e0e6e2;border-radius:6px;padding:4px 7px;background:#fff}
.pd-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:10px 12px 4px}
.pd-kpis>div{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid #e3e9e5;border-radius:9px;padding:8px}
.pd-kpis i{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:6px;font-style:normal;font-size:10px}
.pd-kpis .k1{background:#dff2e4;color:#2f7a48}.pd-kpis .k2{background:#e1eaf8;color:#3f63a6}.pd-kpis .k3{background:#e5ece7;color:#4d6b58}.pd-kpis .k4{background:#efe5f7;color:#8456ad}
.pd-kpis b{display:block;font-size:12px;color:#12251b;line-height:1}.pd-kpis small{display:block;font-size:6.5px;color:#6b7d73;margin-top:3px;white-space:nowrap}
.pd-tabs{display:flex;gap:13px;align-items:center;padding:8px 12px;margin:6px 12px 0;border-bottom:1px solid #e3e9e5;font-size:8px;color:#5e7067;white-space:nowrap}
.pd-tabs b{background:#426f4f;color:#fff;padding:5px 8px;border-radius:5px;font-weight:500}
.pd-agenda{margin:9px 12px 12px;background:#fff;border:1px solid #e0e7e3;border-radius:9px;padding:10px 12px 12px}
.pd-agendatitle{display:flex;align-items:center;justify-content:space-between}
.pd-agendatitle>strong{font-size:12.5px;color:#12251b}.pd-agendatitle>span{font-size:7.5px;color:#6b7d73}
.pd-day{display:flex;gap:12px;align-items:center;color:#5c7066;font-size:10px}.pd-day strong{font-size:10px;color:#264236}
.pd-timeline{margin-top:10px}
.pd-times,.pd-row{display:grid;grid-template-columns:78px 1fr}
.pd-times{grid-template-columns:78px repeat(4,1fr)}
.pd-times time{font-size:7.5px;color:#7b8a82;padding:0 0 5px 4px;border-left:1px solid #e6ece8}
.pd-professional{display:flex;align-items:center;gap:5px;background:#f3f6f4;border-radius:6px 0 0 6px;padding:0 7px;font-size:8px;color:#556b60}
.pd-professional i{width:6px;height:6px;background:#527d60;border-radius:50%}
.pd-slots{position:relative;height:62px;background:repeating-linear-gradient(90deg,#e6ece8 0 1px,transparent 1px 25%);border-top:1px solid #e6ece8;border-bottom:1px solid #e6ece8}
.pd-existing,.pd-booking{position:absolute;top:7px;bottom:7px;border-radius:5px;border-left:3px solid #9eb0a6;padding:6px 7px;background:#eef2f0;font-size:8px;color:#63766c;overflow:hidden}
.pd-existing{left:2px;width:calc(25% - 5px)}.pd-existing small{display:block;font-size:7px;margin-top:4px}
.pd-booking{left:calc(50% + 2px);width:calc(25% + 12px);border-color:#487b55;background:#e3f2e7;color:#244d31;box-shadow:0 0 0 2px #cfe8d6;transition:opacity .4s,transform .4s}
.pd-booking b,.pd-booking strong,.pd-booking small{display:block;white-space:nowrap}.pd-booking b{font-size:9.5px}.pd-booking strong{font-size:7.5px;margin:3px 0}.pd-booking small{font-size:6.5px}
.pd-notice{position:absolute;right:10px;bottom:-30px;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #d4e7d9;border-radius:10px;padding:9px 13px 9px 10px;box-shadow:0 14px 30px #1d3a2a24;transition:opacity .4s,transform .4s}
.pd-notice>span{display:grid;place-items:center;width:22px;height:22px;background:#e3f1e7;color:#38724b;border-radius:50%;font-size:11px}
.pd-notice strong{font-size:9.5px;display:block}.pd-notice small{font-size:8px;color:#64786b;display:block;margin-top:3px}
.product-demo:not(.is-booked) .pd-booking,.product-demo:not(.is-booked) .pd-notice{opacity:0;transform:translateY(5px)}
.pd-controls{margin-top:14px}

/* Móvil: composición vertical, teléfono protagonista */
@media(max-width:700px){
.pd-label{font-size:8px}.pd-label>span{display:none}
.pd-stage{--pd-w:420;--pd-h:680;--pd-s:.85}
.pd-canvas{perspective-origin:30% 60%}
.pd-canvas:before{inset:20% 0 0 0}
.pd-phone{--pd-ps:.85;left:-10px;top:120px}
.pd-dashboard{left:14px;top:0;width:404px;transform:rotateX(4deg) rotateY(-7deg)}
.pd-kpis{grid-template-columns:repeat(2,1fr)}.pd-kpis>div:nth-child(n+3){display:none}
.pd-tabs span:nth-of-type(n+4){display:none}
.pd-notice{right:4px;bottom:-58px}.pd-booking{width:calc(50% - 6px)}
}
@media(prefers-reduced-motion:reduce){.product-demo *{transition:none!important}}

/* Momento clave de la cita */
.pd-link{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}
.pd-link-path{fill:none;stroke:#5c8f6c;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);opacity:0}
.pd-link circle{fill:#fff;stroke:#5c8f6c;stroke-width:1.6;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4)}
.product-demo.is-booked .pd-link-path{opacity:.9;stroke-dashoffset:0;transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1),opacity .15s}
.product-demo.is-booked .pd-link-a{opacity:1;transform:none;transition:opacity .2s,transform .25s}
.product-demo.is-booked .pd-link-b{opacity:1;transform:none;fill:#5c8f6c;transition:opacity .2s .55s,transform .3s .55s}
/* La cita aparece cuando la línea llega a la agenda */
.product-demo.is-booked .pd-booking{transition-delay:.5s}
.product-demo.is-booked .pd-notice{transition-delay:.75s}
/* La agenda gana protagonismo */
.pd-dashboard{transition:box-shadow .6s ease .45s}
.pd-agenda{transition:border-color .6s ease .45s,box-shadow .6s ease .45s}
.product-demo.is-booked .pd-dashboard{box-shadow:0 30px 60px #1d3a2a29,0 4px 10px #1d3a2a12}
.product-demo.is-booked .pd-agenda{border-color:#bcd6c3;box-shadow:0 0 0 3px #e6f1e9}
@media(prefers-reduced-motion:reduce){.pd-link *{transition:none!important}.product-demo.is-booked .pd-link-path{stroke-dashoffset:0}}
@media(max-width:700px){.pd-link{display:none}}