/* ===== Dispositivos (17/10/2026): MacBook, iPhone negro y pestañas de Estadísticas ===== */
.chosen-landing{--dev-ease:cubic-bezier(.23,1,.32,1);--iphone-w:clamp(180px,15vw,214px)}

/* ---------- iPhone 17 · titanio negro (igual en toda la página) ---------- */
.chosen-landing .phone{
  aspect-ratio:402/874;padding:calc(var(--pw,260px)*.034);border-radius:calc(var(--pw,260px)*.165);
  background:linear-gradient(150deg,#3a3a3f 0%,#18181b 18%,#0c0c0e 52%,#1d1d21 82%,#2c2c31 100%);
  box-shadow:0 0 0 1px #6b6a72,inset 0 0 0 1px #4a4a51,inset 0 0 0 calc(var(--pw,260px)*.012) #08080a,var(--shadow-lg);
}
/* botones laterales sutiles: izquierda acción + 2 de volumen, derecha encendido */
.chosen-landing .phone::before,.chosen-landing .phone::after{content:"";position:absolute;width:calc(var(--pw,260px)*.011);border-radius:2px;pointer-events:none}
.chosen-landing .phone::before{left:calc(var(--pw,260px)*-.01);top:17%;height:23%;
  background:linear-gradient(180deg,#3a3a40 0 12%,transparent 12% 26%,#3a3a40 26% 60%,transparent 60% 70%,#3a3a40 70% 100%)}
.chosen-landing .phone::after{right:calc(var(--pw,260px)*-.01);top:26%;height:11%;background:#3a3a40}
.chosen-landing .phone .screen{border-radius:calc(var(--pw,260px)*.13);background:#fff}
.chosen-landing .sbar{background:#fff;color:#0b0b0c}
.chosen-landing .sbar:after{background:#000;box-shadow:inset 0 0 0 1px #1b1b1e}
.chosen-landing .sbar .bat i{background:#0b0b0c}
.chosen-landing .sbar .bat b{border-color:#0b0b0c}
.chosen-landing .sbar .bat b:before{background:#0b0b0c}

/* Desplazamiento de la captura con el scroll (alternativa estática: parte superior) */
.chosen-landing .phone.scrolls .shot,.chosen-landing .mb-shot{animation:none;transform:translateY(var(--y,0%))}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .chosen-landing .phone.scrolls{view-timeline:--ph block}
    .chosen-landing .phone.scrolls .shot,.chosen-landing .premium-stage .phone.scrolls .shot[data-statistic-image]{animation:dev-travel linear both!important;animation-timeline:--ph!important;animation-range:cover 18% cover 82%!important}
    .chosen-landing .macbook{view-timeline:--mb block}
    .chosen-landing .mb-shot{animation:dev-travel linear both;animation-timeline:--mb;animation-range:cover 22% cover 78%}
  }
}
@keyframes dev-travel{from{transform:translateY(var(--from,0%))}to{transform:translateY(var(--to,0%))}}

/* Mismo tamaño de iPhone en Estadísticas y en la pestaña 03 */
.chosen-landing .premium-stage .phone{--pw:var(--iphone-w)}
.chosen-landing .phone-pair{align-items:flex-start;gap:clamp(14px,3vw,30px);padding:clamp(20px,3vw,30px) clamp(12px,2.4vw,24px) clamp(22px,3vw,30px)}
.chosen-landing .phone-pair .app-capture{width:auto;max-width:none;flex:0 1 var(--iphone-w);min-width:0}
.chosen-landing .phone-pair .phone{--pw:var(--iphone-w);width:100%;max-width:var(--iphone-w)}
.chosen-landing .phone-pair .app-capture>span{font-size:11px;margin-top:14px}

/* ---------- MacBook (HTML y CSS) ---------- */
.chosen-landing .macbook{container-type:inline-size;position:relative;width:100%;max-width:640px;margin-inline:auto;padding-inline:7%;
  transition:transform .65s var(--dev-ease);transform:perspective(1200px) rotateX(calc(var(--pointer-y,0) * -2deg)) rotateY(calc(var(--pointer-x,0) * 3deg));
  filter:drop-shadow(0 24px 26px #06030c99)}
.chosen-landing .mb-lid{position:relative;background:#0a0a0b;border-radius:3.6cqw 3.6cqw 1cqw 1cqw;padding:2.1cqw 2.1cqw 2.6cqw;
  box-shadow:0 0 0 .32cqw #a7a9b0,0 0 0 .55cqw #6c6e75,inset 0 0 0 .2cqw #1f1f22}
.chosen-landing .mb-screen{position:relative;border-radius:1cqw;overflow:hidden;background:#f4f7fa}
.chosen-landing .mb-notch{position:absolute;z-index:2;top:0;left:50%;transform:translateX(-50%);width:15%;height:3.4cqw;background:#0a0a0b;
  border-radius:0 0 1.2cqw 1.2cqw;display:grid;place-items:center}
.chosen-landing .mb-notch i{width:.9cqw;height:.9cqw;border-radius:50%;background:radial-gradient(circle at 35% 35%,#3c4b63,#0c1220 70%);box-shadow:0 0 0 .2cqw #151517}
.chosen-landing .mb-view{position:relative;aspect-ratio:2560/1664;overflow:hidden}
.chosen-landing .mb-view img{position:absolute;inset:0 0 auto;width:100%;height:auto;display:block}
.chosen-landing .mb-base{position:relative;margin-inline:-7cqw;height:2.4cqw;border-radius:.3cqw .3cqw 3.2cqw 3.2cqw / .3cqw .3cqw 1.9cqw 1.9cqw;
  background:linear-gradient(180deg,#e9eaee 0%,#cfd1d6 38%,#a3a5ab 78%,#7f8187 100%);box-shadow:inset 0 .18cqw 0 #ffffffb3,inset 0 -.22cqw .3cqw #5b5d6255}
.chosen-landing .mb-hinge{position:absolute;left:7cqw;right:7cqw;top:0;height:.75cqw;border-radius:0 0 .6cqw .6cqw;
  background:linear-gradient(180deg,#1d1e21,#55575d 70%,#8b8d93)}
.chosen-landing .mb-lip{position:absolute;left:50%;top:0;transform:translateX(-50%);width:15%;height:1.15cqw;border-radius:0 0 1.4cqw 1.4cqw;
  background:linear-gradient(180deg,#9c9ea4,#c2c4c9)}
@media (max-width:650px){.chosen-landing .macbook{padding-inline:6%}.chosen-landing .mb-base{margin-inline:-6cqw}.chosen-landing .mb-hinge{left:6cqw;right:6cqw}}

/* ---------- Pestañas de Estadísticas ---------- */
.chosen-landing .dims button[aria-selected=true]{background:var(--teal);color:#1b1721;border-color:var(--teal);box-shadow:0 4px 12px #f28f4230}
.chosen-landing .dims button[aria-selected=false]{background:#17131fcc;color:var(--ink-soft);border-color:var(--line-strong);box-shadow:none}
.chosen-landing .dims button:focus-visible{outline:2px solid #ffd36e;outline-offset:3px}
.chosen-landing .dims button{transition:background .22s var(--dev-ease),color .22s var(--dev-ease),box-shadow .22s var(--dev-ease),transform .22s var(--dev-ease)}
@media (prefers-reduced-motion:reduce){
  .chosen-landing .macbook{transition:none;transform:none}
  .chosen-landing .phone.scrolls .shot,.chosen-landing .mb-shot{animation:none!important}
}