/* El iPhone de la opción 1 (CSS + SVG, sin imágenes), trasladado a la maqueta y aislado bajo .iph.
   Diferencias con el original: sombra más suave (aquí el escenario es claro), transiciones CSS en vez de resortes,
   y las capas se encienden con .on desde recorrido.js (sincronizadas con el scroll). */
.iph{--ok:#30d158;--wa:#25d366;--brand:#8201f8;--late:#ff6a55;--glow:rgb(130 1 248 / .45);--e:cubic-bezier(.22,.61,.36,1);color:#fff;letter-spacing:-.01em}
.iph .phone{position:relative;width:100%;aspect-ratio:71.5/149.6;border-radius:calc(var(--pw)*.172);padding:calc(var(--pw)*.0115);
  background:linear-gradient(140deg,#a7a7ad 0%,#4a4a50 14%,#1d1d21 38%,#2b2b30 62%,#6c6c73 86%,#b9b9bf 100%);
  box-shadow:inset 0 0 0 1px rgb(255 255 255/.1),0 calc(var(--pw)*.09) calc(var(--pw)*.22) rgb(30 20 40/.34),0 0 calc(var(--pw)*.5) calc(var(--pw)*-.1) color-mix(in oklab,var(--glow) 55%,transparent)}
.iph .pbtn{position:absolute;width:calc(var(--pw)*.011);border-radius:2px;background:linear-gradient(90deg,#6b6b71,#2c2c30)}
.iph .b-act{left:calc(var(--pw)*-.0085);top:17%;height:4.4%}
.iph .b-vu{left:calc(var(--pw)*-.0085);top:24.5%;height:8.6%}
.iph .b-vd{left:calc(var(--pw)*-.0085);top:35%;height:8.6%}
.iph .b-pw{right:calc(var(--pw)*-.0085);top:27%;height:13%;background:linear-gradient(270deg,#6b6b71,#2c2c30)}
.iph .bezel{width:100%;height:100%;border-radius:calc(var(--pw)*.161);background:#000;padding:calc(var(--pw)*.032);box-shadow:inset 0 0 0 1px rgb(255 255 255/.06)}
.iph .screen{position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate;border-radius:calc(var(--pw)*.13);background:#000;container-type:size;font-family:"Hanken Grotesk",system-ui,sans-serif;line-height:1.3}
.iph p{margin:0}
.iph .L{position:absolute;inset:0;font-size:4.2cqw;opacity:0;visibility:hidden;transition:opacity .4s var(--e),transform .55s var(--e),visibility 0s .55s}
.iph .L.lock{z-index:1;transform:scale(.96)}
.iph .L.notif{z-index:6;inset:auto 0 auto 0;top:57cqw;padding:0 3.6cqw;transform:translate3d(0,-46cqw,0) scale(.4)}
.iph .L.call{z-index:2;transform:scale(1.08)}
.iph .L.wa{z-index:3;transform:translate3d(100%,0,0)}
.iph .L.days{z-index:4;transform:scale(1.05)}
.iph .L.cita{z-index:5;transform:scale(.9)}
/* el estado encendido va DESPUÉS de las entradas por capa: misma especificidad, gana el último */
.iph .L.on{opacity:1;visibility:visible;transform:none;transition:opacity .4s var(--e),transform .55s var(--e),visibility 0s}
.iph .island{position:absolute;z-index:30;top:3cqw;left:50%;width:31cqw;height:9.2cqw;margin-left:-15.5cqw;border-radius:5cqw;background:#000}
.iph .status{position:absolute;z-index:29;top:3cqw;left:0;right:0;height:9.2cqw;display:flex;align-items:center;justify-content:space-between;padding:0 7.6cqw 0 10cqw;font-size:4.3cqw;font-weight:600;color:#fff;transition:color .4s}
.iph .st-ic{display:flex;align-items:center;gap:1.5cqw}
.iph .st-ic svg{height:3.1cqw;width:auto;fill:currentColor}
.iph .st-ic svg:nth-child(2) path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.iph .st-ic svg:nth-child(2) path:first-child{fill:currentColor;stroke:none}
.iph .st-ic svg:last-child{height:3.4cqw}
.iph .home-ind{position:absolute;z-index:29;bottom:2.2cqw;left:50%;width:36cqw;height:1.4cqw;margin-left:-18cqw;border-radius:1cqw;background:#fff;opacity:.85;transition:background-color .4s}
.iph .glare{position:absolute;z-index:28;inset:0;pointer-events:none;background:linear-gradient(115deg,rgb(255 255 255/.09) 0%,rgb(255 255 255/.02) 30%,transparent 46%)}
.iph .phone.light .status{color:#000}
.iph .phone.light .home-ind{background:#000;opacity:.7}

/* bloqueo */
.iph .wall{position:absolute;inset:0;background:
  radial-gradient(120% 62% at 8% 100%,rgb(130 1 248/.95),transparent 62%),
  radial-gradient(90% 55% at 104% 18%,rgb(94 216 255/.42),transparent 62%),
  radial-gradient(70% 40% at 62% 58%,rgb(169 155 255/.3),transparent 70%),
  linear-gradient(180deg,#0c0824 0%,#150b33 48%,#05030c 100%)}
.iph .wall-2{background:
  radial-gradient(120% 60% at 90% 100%,rgb(64 92 255/.7),transparent 62%),
  radial-gradient(90% 50% at -4% 20%,rgb(130 1 248/.45),transparent 62%),
  linear-gradient(180deg,#050816 0%,#0a1030 55%,#02030a 100%)}
.iph .lock-date{position:absolute;top:16cqw;width:100%;text-align:center;font-size:4.7cqw;font-weight:600;color:rgb(255 255 255/.86)}
.iph .lock-time{position:absolute;top:20.5cqw;width:100%;text-align:center;font-size:26cqw;font-weight:700;line-height:1;letter-spacing:-.035em;background:linear-gradient(180deg,#fff 20%,rgb(255 255 255/.62));-webkit-background-clip:text;background-clip:text;color:transparent}

/* notificación del lead */
.iph .n-card{display:flex;gap:3cqw;padding:3.2cqw;border-radius:6cqw;background:rgb(44 40 58/.58);border:1px solid rgb(255 255 255/.1);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:0 4cqw 10cqw -3cqw rgb(0 0 0/.6)}
.iph .n-ic,.iph .av,.iph .wa-av{display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(150deg,#a04bff,#8201f8 55%,#5600a6)}
.iph .n-ic{flex:none;width:9.6cqw;height:9.6cqw;border-radius:2.4cqw;font-size:3.8cqw}
.iph .n-b{min-width:0;flex:1}
.iph .n-top{display:flex;justify-content:space-between;font-size:3.2cqw;color:rgb(255 255 255/.62);text-transform:uppercase;letter-spacing:.02em}
.iph .n-top b{font-weight:600}
.iph .n-top span{text-transform:none}
.iph .n-ti{margin-top:.6cqw;font-size:4.1cqw;font-weight:700}
.iph .n-tx{font-size:3.85cqw;line-height:1.3;color:rgb(255 255 255/.9)}
.iph .n-src{display:flex;justify-content:center;gap:1.8cqw;margin-top:3cqw}
.iph .n-src span{font-size:3.1cqw;font-weight:600;padding:1.3cqw 3cqw;border-radius:9cqw;background:rgb(255 255 255/.1);color:rgb(255 255 255/.62)}
.iph .n-src .on{background:rgb(255 255 255/.92);color:#1d1d1f}

/* llamada */
.iph .call-bg{position:absolute;inset:0;background:radial-gradient(95% 55% at 50% 34%,rgb(48 209 88/.26),transparent 70%),linear-gradient(180deg,#0d1a11 0%,#050906 58%,#000 100%)}
.iph .call-top{position:absolute;top:22cqw;width:100%;text-align:center}
.iph .call-sub{font-size:4.2cqw;color:rgb(255 255 255/.68)}
.iph .call-name{margin-top:.6cqw;font-size:9.6cqw;font-weight:600;letter-spacing:-.025em}
.iph .call-av{position:absolute;top:50cqw;left:50%;width:30cqw;height:30cqw;margin-left:-15cqw}
.iph .av{position:absolute;inset:0;border-radius:50%;font-size:10.5cqw;box-shadow:inset 0 0 0 1px rgb(255 255 255/.25)}
.iph .ring{position:absolute;inset:0;border-radius:50%;border:.5cqw solid rgb(48 209 88/.7);opacity:0}
.iph .call.on .ring{animation:iph-ring 2s cubic-bezier(.2,.6,.3,1) infinite}
.iph .call.on .r2{animation-delay:.7s}
@keyframes iph-ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.9);opacity:0}}
.iph .wave{position:absolute;top:96cqw;left:13cqw;right:13cqw;height:22cqw;display:flex;align-items:center;justify-content:space-between}
.iph .wave i{width:1.35cqw;height:100%;border-radius:1cqw;background:linear-gradient(180deg,#fff,var(--ok));transform:scaleY(.18)}
.iph .call-btns{position:absolute;top:137cqw;left:13cqw;right:13cqw;display:flex;justify-content:space-between}
.iph .cb{display:flex;flex-direction:column;align-items:center;gap:2cqw;font-size:3.6cqw;color:rgb(255 255 255/.86)}
.iph .cbc{width:19cqw;height:19cqw;border-radius:50%;display:grid;place-items:center}
.iph .cbc svg{width:8.4cqw;height:8.4cqw}
.iph .cbc.no{background:#ff453a}.iph .cbc.ok{background:var(--ok)}

/* WhatsApp */
.iph .wa{background:#0b141a}
.iph .wa-head{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:2.4cqw;padding:13.5cqw 3.2cqw 2.6cqw;background:#1f2c34}
.iph .wa-back{width:6cqw;height:6cqw;color:#e9edef;flex:none}
.iph .wa-av{flex:none;width:9.6cqw;height:9.6cqw;border-radius:50%;font-size:3.6cqw}
.iph .wa-name{font-size:4.3cqw;font-weight:600;color:#e9edef}
.iph .wa-st{font-size:3.2cqw;color:#8696a0}
.iph .wa-body{position:absolute;top:28cqw;bottom:18cqw;left:0;right:0;padding:4cqw 3.6cqw;display:flex;flex-direction:column;gap:2.2cqw;background:#0b141a}
.iph .wa-chip{align-self:center;margin-bottom:1.4cqw;padding:1.2cqw 3.2cqw;border-radius:2cqw;background:#1f2c34;color:#8696a0;font-size:3.1cqw;font-weight:500}
.iph .bub{display:none;align-self:flex-start;max-width:86%;padding:2.2cqw 3cqw;border-radius:.9cqw 3.4cqw 3.4cqw 3.4cqw;background:#202c33;color:#e9edef;font-size:4.15cqw;line-height:1.33;transform-origin:0 0}
.iph .bub.on{display:block;animation:iph-bub .38s var(--e) both}
@keyframes iph-bub{from{opacity:0;transform:translate3d(0,2cqw,0) scale(.6)}to{opacity:1;transform:none}}
.iph .bub .tm{float:right;margin:1.6cqw 0 -.8cqw 2.6cqw;font-size:2.8cqw;color:#8696a0}
.iph .typing{display:none;align-self:flex-start;gap:1.2cqw;padding:3.2cqw 3.6cqw;border-radius:.9cqw 3.4cqw 3.4cqw 3.4cqw;background:#202c33}
.iph .typing.show{display:flex}
.iph .typing i{width:1.7cqw;height:1.7cqw;border-radius:50%;background:#8696a0;animation:iph-dot 1.1s infinite ease-in-out}
.iph .typing i:nth-child(2){animation-delay:.15s}.iph .typing i:nth-child(3){animation-delay:.3s}
@keyframes iph-dot{0%,80%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-.8cqw)}}
.iph .wa-in{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:2.4cqw;padding:2.6cqw 3.2cqw 8.4cqw;background:#0b141a}
.iph .wa-field{flex:1;height:10.4cqw;display:flex;align-items:center;padding:0 4cqw;border-radius:6cqw;background:#1f2c34;color:#8696a0;font-size:4cqw}
.iph .wa-mic{flex:none;width:10.4cqw;height:10.4cqw;border-radius:50%;background:#00a884;display:grid;place-items:center}
.iph .wa-mic svg{width:5.4cqw;height:5.4cqw}

/* días 1 a 7: notificaciones que se apilan */
.iph .d-top{position:absolute;top:16cqw;width:100%;text-align:center}
.iph .d-k{font-size:4.4cqw;font-weight:600;color:rgb(255 255 255/.82)}
.iph .d-day{margin-top:.4cqw;font-size:20cqw;font-weight:700;letter-spacing:-.035em;line-height:1}
.iph .d-stack{position:absolute;top:52cqw;left:3.6cqw;right:3.6cqw;height:130cqw}
.iph .dn{position:absolute;left:0;right:0;top:0;display:flex;gap:2.8cqw;padding:3cqw;border-radius:5.4cqw;background:rgb(34 34 44/.66);border:1px solid rgb(255 255 255/.07);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);transform-origin:50% 0;
  transition:transform .5s var(--e),opacity .35s var(--e)}
.iph .dn:not(.on){opacity:0!important;visibility:hidden}
.iph .dn-ic{flex:none;width:8.6cqw;height:8.6cqw;border-radius:2.2cqw;display:grid;place-items:center}
.iph .dn-ic svg{width:5cqw;height:5cqw}
.iph .dn-call .dn-ic{background:var(--ok)}
.iph .dn-msg .dn-ic{background:var(--wa)}
.iph .dn-b{min-width:0;flex:1}
.iph .dn-top{display:flex;justify-content:space-between;gap:2cqw;font-size:3.3cqw;color:rgb(255 255 255/.58)}
.iph .dn-top b{font-size:3.7cqw;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iph .dn-top span{flex:none}
.iph .dn-t{margin-top:.3cqw;font-size:3.85cqw;color:rgb(255 255 255/.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* cita */
.iph .cita{background:radial-gradient(85% 45% at 50% 18%,rgb(255 170 90/.22),transparent 70%),#07050a}
.iph .ck{position:absolute;top:20cqw;left:50%;width:22cqw;height:22cqw;margin-left:-11cqw;overflow:visible}
.iph .ck-c{fill:rgb(48 209 88/.16);stroke:var(--ok);stroke-width:3}
.iph .ck-p{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s var(--e) .25s}
.iph .cita.on .ck-p{stroke-dashoffset:0}
.iph .cita-t{position:absolute;top:47cqw;width:100%;text-align:center;font-size:8.8cqw;font-weight:700;letter-spacing:-.03em}
.iph .cita-s{position:absolute;top:59cqw;width:100%;text-align:center;font-size:4cqw;color:rgb(255 255 255/.66)}
.iph .cal{position:absolute;top:72cqw;left:5cqw;right:5cqw;padding:4.4cqw;border-radius:6cqw;background:rgb(255 255 255/.065);border:1px solid rgb(255 255 255/.08)}
.iph .cal-h{font-size:4.2cqw;font-weight:700}
.iph .cal-h span{color:rgb(255 255 255/.5);font-weight:500}
.iph .cal-g{display:grid;grid-template-columns:repeat(7,1fr);row-gap:1.1cqw;margin-top:2.8cqw;text-align:center;font-size:3.4cqw;color:rgb(255 255 255/.78)}
.iph .cal-g .wd{font-size:2.8cqw;font-weight:600;color:rgb(255 255 255/.4)}
.iph .cal-g span{height:6.8cqw;line-height:6.8cqw}
.iph .cal-g .sel{width:6.8cqw;margin:auto;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;box-shadow:0 0 5cqw rgb(130 1 248/.8)}
.iph .cita.on .cal-g .sel{animation:iph-late .9s var(--e) .5s both}
@keyframes iph-late{0%{transform:scale(.4)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
.iph .cal-ev{display:flex;align-items:center;gap:3cqw;margin-top:3.4cqw;padding-top:3.4cqw;border-top:1px solid rgb(255 255 255/.1)}
.iph .cal-ev i{width:1.1cqw;height:9cqw;border-radius:1cqw;background:var(--brand)}
.iph .ev-t{font-size:4cqw;font-weight:600}
.iph .ev-s{font-size:3.6cqw;color:rgb(255 255 255/.62)}

/* [E17] la cita y el CRM son una sola parada: sobre la pantalla de la cita asoma el aviso "Registrada en tu CRM" */
.iph .cita-crm{position:absolute;left:4cqw;right:4cqw;bottom:7cqw;display:flex;gap:3cqw;padding:3.2cqw;border-radius:6cqw;background:rgb(44 40 58/.72);border:1px solid rgb(255 255 255/.12);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:0 4cqw 10cqw -3cqw rgb(0 0 0/.6);
  opacity:0;transform:translate3d(0,8cqw,0) scale(.96);transition:opacity .35s var(--e),transform .45s var(--e)}
.iph .cita.on .cita-crm{opacity:1;transform:none;transition:opacity .45s var(--e) .9s,transform .55s var(--e) .9s}
.iph .cita-crm .n-ti{color:#7dffa9}

/* odómetro del día (dentro y fuera del teléfono) */
.odo{display:inline-block;height:1em;line-height:1em;overflow:hidden;vertical-align:top}
.odo-s{display:flex;flex-direction:column;transition:transform .6s cubic-bezier(.3,1.25,.5,1)}
.odo-s span{display:block;height:1em;line-height:1em}

@media (prefers-reduced-motion:reduce){
  .iph .L,.iph .dn,.odo-s,.iph .ck-p,.iph .cita-crm{transition:none!important}
  .iph .call.on .ring,.iph .typing i,.iph .bub.on,.iph .cita.on .cal-g .sel{animation:none!important}
}