/* "Así funciona": a fixed phone whose screen follows the step being read. */
.story{--phone-w:300px;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;margin-top:24px}
.story-stage{position:sticky;top:12vh;align-self:start;height:76vh;display:grid;place-items:center;align-content:center;gap:18px}
.story-phone{position:relative;width:var(--phone-w);aspect-ratio:9/18.5;border-radius:44px;padding:14px;background:#0b1f3a;box-shadow:0 2px 0 #ffffff26 inset,0 30px 70px #0b1f3a40,0 0 0 1px #0b1f3a;overflow:hidden}
.story-phone::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 6px #0b1f3a;pointer-events:none}
.story-bar{position:absolute;inset:14px 14px auto;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:12px 22px 0;font:600 .72rem/1 Poppins,sans-serif;color:var(--ui-ink,#0b1f3a)}
.story-dots{display:flex;gap:3px}.story-dots i{width:4px;height:4px;border-radius:50%;background:currentColor}
.story-screen{position:absolute;inset:14px;border-radius:32px;padding:44px 16px 16px;display:flex;flex-direction:column;gap:10px;background:var(--ui-background,#f3f6fa);color:var(--ui-ink,#0b1f3a);opacity:0;transform:translateY(16px) scale(.98);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1);font-size:.8rem}
.story[data-active="1"] [data-screen="1"],.story[data-active="2"] [data-screen="2"],.story[data-active="3"] [data-screen="3"],.story[data-active="4"] [data-screen="4"],.story[data-active="5"] [data-screen="5"]{opacity:1;transform:none}
.ss-eyebrow{font:700 1.02rem/1.2 Poppins,sans-serif;margin:4px 2px 2px}
.ss-card{display:grid;gap:6px;padding:12px 14px;border-radius:16px;background:var(--ui-surface,#fff);border:1px solid var(--ui-line,#dbe5ee);box-shadow:0 1px 2px #0b1f3a0d}
.ss-muted{color:var(--ui-muted,#5b6b7c);font-size:.72rem}
.ss-big{font:700 1.6rem/1.1 Poppins,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ss-rows{display:grid;gap:4px;margin-top:4px;padding-top:8px;border-top:1px dashed var(--ui-line,#dbe5ee);font-size:.74rem}
.ss-meter,.ss-stack{display:flex;height:10px;border-radius:99px;overflow:hidden;background:var(--ui-secondary,#e4f1fa)}
.ss-meter i{width:20%;background:var(--ui-primary,#0078bd);border-radius:inherit;transform-origin:left}
.ss-legend,.ss-legend3{display:flex;justify-content:space-between;gap:6px;font-size:.66rem;color:var(--ui-muted,#5b6b7c)}
.ss-legend3 b{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px}
.ss-stack i{transform-origin:left}.ss-stack .c1{width:90%;background:var(--ui-primary,#0078bd)}.ss-stack .c2{width:9%;background:#2d9b4b}.ss-stack .c3{width:1%;background:#e8b831}
.d1{background:var(--ui-primary,#0078bd)}.d2{background:#2d9b4b}.d3{background:#e8b831}
.ss-row{grid-template-columns:1fr auto;align-items:center}
.ss-button{margin-top:auto;display:grid;place-items:center;min-height:40px;border-radius:12px;background:var(--ui-primary,#0078bd);color:#fff;font:600 .78rem Poppins,sans-serif}
.ss-good{margin-top:4px;min-height:32px;background:#2d9b4b;text-align:center;white-space:nowrap}
.ss-center{justify-items:center;text-align:center;padding:18px 14px}
.ss-pin{display:flex;gap:8px;margin:4px 0}.ss-pin i{display:grid;place-items:center;width:40px;height:48px;border-radius:12px;background:var(--ui-secondary,#e4f1fa);color:var(--ui-primary,#0078bd);font:700 1.4rem Poppins,sans-serif;font-style:normal}
.ss-confirm{grid-template-columns:auto 1fr;align-items:center;gap:10px}.ss-confirm strong{display:block;font-size:.8rem}
.ss-check{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#2d9b4b;color:#fff}.ss-check svg{width:17px;height:17px}
.ss-chat{display:grid;gap:8px;padding:10px;border-radius:16px;background:#e7ddd3}
.ss-bubble{max-width:88%;padding:8px 10px;border-radius:12px;font-size:.72rem;line-height:1.35;box-shadow:0 1px 1px #0000001a}
.ss-bubble.out{justify-self:end;background:#d9fdd3;border-top-right-radius:4px}.ss-bubble.out u{display:block;color:#0b6fb8}
.ss-bubble.in{justify-self:start;background:#fff;border-top-left-radius:4px}
.ss-receipt{justify-self:end;width:78%;padding:10px 12px}.ss-receipt .ss-big{font-size:1.2rem}
.ss-up{color:#1d7a3e;font-weight:700;font-size:.74rem}
.ss-chart{display:flex;align-items:flex-end;gap:6px;height:70px;margin-top:6px}
.ss-chart i{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(var(--ui-primary,#0078bd),color-mix(in srgb,var(--ui-primary,#0078bd) 55%,#fff));transform-origin:bottom}
.ss-chart i:nth-child(1){height:38%}.ss-chart i:nth-child(2){height:46%}.ss-chart i:nth-child(3){height:52%}.ss-chart i:nth-child(4){height:63%}.ss-chart i:nth-child(5){height:74%}.ss-chart i:nth-child(6){height:92%;background:linear-gradient(#2d9b4b,#7cc58f)}
.story-progress{width:var(--phone-w);height:4px;border-radius:99px;background:var(--ui-line,#dbe5ee);overflow:hidden}
.story-progress i{display:block;height:100%;width:20%;background:var(--ui-primary,#0078bd);border-radius:inherit;transition:width .45s ease}
.story[data-active="2"] .story-progress i{width:40%}.story[data-active="3"] .story-progress i{width:60%}.story[data-active="4"] .story-progress i{width:80%}.story[data-active="5"] .story-progress i{width:100%}
.story-steps{list-style:none;margin:0;padding:0}
.story-step{min-height:48vh;display:flex;flex-direction:column;justify-content:center;gap:12px;max-width:460px;transition:opacity .4s ease}
.story.is-live .story-step{opacity:.28}
.story.is-live .story-step.is-active{opacity:1}
.story-step h3{margin:0;font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.15;letter-spacing:-.02em}
.story-step p{margin:0;font-size:1.05rem;line-height:1.6;color:var(--ui-muted,#5b6b7c)}
.story-step .step-no{font-weight:700;color:var(--ui-primary,#0078bd);letter-spacing:.02em}
/* Reading progress at the top of the page. */
.scroll-progress{position:fixed;inset:0 0 auto;height:3px;z-index:60;background:var(--ui-primary,#0078bd);transform-origin:left;transform:scaleX(0);pointer-events:none}

@media (max-width:900px){
  .story{--phone-w:min(168px,44vw);grid-template-columns:1fr;gap:0}
  .story-stage{top:72px;height:auto;z-index:2;gap:10px;padding:10px 0 22px;background:linear-gradient(var(--ui-background,#f3f6fa) 84%,transparent)}
  .story-phone{border-radius:28px;padding:8px}.story-screen{inset:8px;border-radius:22px;padding:28px 8px 8px;font-size:.54rem;gap:5px}
  .story-bar{inset:8px 8px auto;padding:8px 13px 0;font-size:.5rem}
  .ss-big{font-size:1rem}.ss-eyebrow{font-size:.72rem}.ss-pin i{width:24px;height:30px;font-size:.9rem;border-radius:8px}.ss-chart{height:40px}.ss-muted,.ss-legend,.ss-legend3,.ss-bubble{font-size:.5rem}.ss-check{width:22px;height:22px}.ss-check svg{width:13px;height:13px}
  .ss-button{min-height:24px;font-size:.52rem;border-radius:8px}.ss-card{padding:7px 8px;border-radius:10px;gap:4px}.ss-chat{padding:6px;gap:5px}
  .ss-bubble.in{display:none}
  .story-step{min-height:44vh;justify-content:flex-start;padding:4px 2px 0;max-width:none;scroll-margin-top:var(--stage-bottom,460px)}
  .story-step h3{font-size:1.35rem}.story-step p{font-size:.98rem}
}

/* Each screen performs its moment when it becomes active. */
@media (prefers-reduced-motion:no-preference){
  @keyframes ss-grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes ss-grow-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  @keyframes ss-pop{0%{opacity:0;transform:translateY(10px) scale(.94)}100%{opacity:1;transform:none}}
  @keyframes ss-check{0%{transform:scale(0)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
  @keyframes ss-digit{0%{opacity:0;transform:translateY(-12px)}100%{opacity:1;transform:none}}
  @keyframes ss-press{0%,100%{transform:scale(1)}50%{transform:scale(.95)}}
  .story[data-active="1"] [data-screen="1"] .ss-meter i{animation:ss-grow-x .9s cubic-bezier(.2,.7,.2,1) .35s both}
  .story[data-active="1"] [data-screen="1"] .ss-button{animation:ss-press .5s ease 1.4s}
  .story[data-active="2"] [data-screen="2"] .ss-pin i{animation:ss-digit .35s ease both}
  .story[data-active="2"] [data-screen="2"] .ss-pin i:nth-child(2){animation-delay:.12s}.story[data-active="2"] [data-screen="2"] .ss-pin i:nth-child(3){animation-delay:.24s}.story[data-active="2"] [data-screen="2"] .ss-pin i:nth-child(4){animation-delay:.36s}
  .story[data-active="2"] [data-screen="2"] .ss-confirm{animation:ss-pop .5s ease 1s both}
  .story[data-active="2"] [data-screen="2"] .ss-check,.story[data-active="4"] [data-screen="4"] .ss-check,.story[data-active="5"] [data-screen="5"] .ss-check{animation:ss-check .5s cubic-bezier(.3,1.4,.5,1) 1.3s both}
  .story[data-active="3"] [data-screen="3"] .ss-stack i{animation:ss-grow-x .8s cubic-bezier(.2,.7,.2,1) .3s both}
  .story[data-active="3"] [data-screen="3"] .ss-stack .c2{animation-delay:.9s}.story[data-active="3"] [data-screen="3"] .ss-stack .c3{animation-delay:1.2s}
  .story[data-active="4"] [data-screen="4"] .ss-bubble.out{animation:ss-pop .45s ease .2s both}
  .story[data-active="4"] [data-screen="4"] .ss-receipt{animation:ss-pop .45s ease .6s both}
  .story[data-active="4"] [data-screen="4"] .ss-bubble.in{animation:ss-pop .45s ease 1.6s both}
  .story[data-active="4"] [data-screen="4"] .ss-confirm{animation:ss-pop .45s ease 1.1s both}
  .story[data-active="5"] [data-screen="5"] .ss-chart i{animation:ss-grow-y .7s cubic-bezier(.2,.7,.2,1) both}
  .story[data-active="5"] [data-screen="5"] .ss-chart i:nth-child(2){animation-delay:.08s}.story[data-active="5"] [data-screen="5"] .ss-chart i:nth-child(3){animation-delay:.16s}.story[data-active="5"] [data-screen="5"] .ss-chart i:nth-child(4){animation-delay:.24s}.story[data-active="5"] [data-screen="5"] .ss-chart i:nth-child(5){animation-delay:.32s}.story[data-active="5"] [data-screen="5"] .ss-chart i:nth-child(6){animation-delay:.4s}
  .story[data-active="5"] [data-screen="5"] .ss-confirm{animation:ss-pop .45s ease 1s both}
}
@media (prefers-reduced-motion:reduce){.story-screen,.story-step,.story-progress i{transition:none}.scroll-progress{display:none}}

.ss-move{display:flex;justify-content:space-between;padding-top:6px;border-top:1px solid var(--ui-line,#dbe5ee)}.ss-move b{color:#1d7a3e}
@media (max-width:900px){.ss-moves{display:none}}

/* Screens slide like a carousel: earlier ones exit left, later ones wait on the right. */
.story-screen[data-pos="prev"]{opacity:0;transform:translateX(-28%)}
.story-screen[data-pos="next"]{opacity:0;transform:translateX(28%)}
.story-screen[data-pos="current"]{opacity:1;transform:none}
.story-step{transform:translateY(0);transition:opacity .4s ease,transform .4s ease}
.story.is-live .story-step:not(.is-active){transform:translateY(8px)}

/* Teléfono: sin teléfono fijo. Cada paso trae su propia pantalla y el texto
   debajo, siempre legible; solo aparece con un fundido corto. */
.story-mini{display:none}
@media (max-width:900px){
  .story-stage{display:none}
  .story-steps{display:grid;gap:44px}
  .story-step,.story.is-live .story-step{min-height:0;padding:0;gap:10px}
  .story.is-live .story-step:not(.reveal),.story.is-live .story-step.reveal.is-visible{opacity:1;transform:none}
  .story-mini{display:block;position:relative;width:min(240px,64vw);aspect-ratio:9/13.5;margin:14px auto 0;border-radius:30px;padding:8px;background:#0b1f3a;box-shadow:0 20px 44px #0b1f3a33}
  .story-mini .story-screen{inset:8px;border-radius:23px;padding:30px 9px 9px;font-size:.6rem;gap:6px;opacity:1;transform:none}
  .story-mini .story-bar{inset:8px 8px auto;padding:9px 14px 0;font-size:.55rem}
  .story-mini .ss-bubble.in,.story-mini .ss-moves{display:none}
}

/* "Así se ve tu día": real screens appear one by one while scrolling, no dots. */
.examples-list{display:grid;gap:clamp(48px,8vw,96px);margin-top:28px}
.examples-list .example-slide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;padding:0;background:none;border:0;box-shadow:none}
.examples-list .example-slide:nth-child(even) .demo-screenshot{order:2}
.examples-list .demo-screenshot{justify-self:center;width:min(300px,70vw);margin:0;border-radius:30px;overflow:hidden;background:var(--ui-surface,#fff);box-shadow:0 2px 4px #0b1f3a0d,0 26px 60px #0b1f3a26;border:8px solid #0b1f3a}
.examples-list .demo-screenshot img{display:block;width:100%;height:auto}
.examples-list .example-copy h3{font-size:clamp(1.4rem,2.4vw,2rem);margin:0 0 10px;letter-spacing:-.02em}
.examples-list .example-copy p{color:var(--ui-muted,#5b6b7c);font-size:1.02rem;line-height:1.6}
@media (max-width:760px){
  .examples-list{gap:56px}
  .examples-list .example-slide{grid-template-columns:1fr;gap:18px}
  .examples-list .example-slide:nth-child(even) .demo-screenshot{order:0}
  .examples-list .example-copy{order:-1}
  .examples-list .demo-screenshot{width:min(260px,68vw);border-width:7px;border-radius:26px}
}
@media (prefers-reduced-motion:no-preference){
  .examples-list .example-slide.ex-ready .demo-screenshot{opacity:0;transform:translateX(-40px) rotate(-2deg) scale(.96);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
  .examples-list .example-slide.ex-ready:nth-child(even) .demo-screenshot{transform:translateX(40px) rotate(2deg) scale(.96)}
  .examples-list .example-slide.ex-ready .example-copy{opacity:0;transform:translateY(16px);transition:opacity .4s ease .12s,transform .45s ease .12s}
  .examples-list .example-slide.ex-in .demo-screenshot,.examples-list .example-slide.ex-in:nth-child(even) .demo-screenshot{opacity:1;transform:none}
  .examples-list .example-slide.ex-in .example-copy{opacity:1;transform:none}
  @media (max-width:760px){
    .examples-list .example-slide.ex-ready .demo-screenshot,.examples-list .example-slide.ex-ready:nth-child(even) .demo-screenshot{transform:translateY(24px) scale(.97)}
  }
}
@media (max-width:760px){.examples-list .screen-details{display:none}.examples-list .example-copy{text-align:left}}

/* ===== "Así se ve tu día": pinned phone driven by scroll ===== */
.exp-replaced{display:none}
.exp-pin{position:relative;height:calc(var(--n,6)*70vh + 100vh);margin-top:12px}
.exp-stage{position:sticky;top:var(--landing-header-height,78px);height:calc(100vh - var(--landing-header-height,78px));display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto;column-gap:clamp(32px,6vw,96px);align-items:center}
.exp-copy{position:relative;display:grid;align-self:center;min-height:240px}
.exp-cap{grid-area:1/1;align-self:center;opacity:0;transform:translateY(18px);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.exp-cap.is-on{opacity:1;transform:none}
.exp-count{display:inline-block;margin-bottom:12px;font:700 .85rem Poppins,sans-serif;letter-spacing:.06em;color:var(--ui-primary,#0078bd)}
.exp-cap h3{margin:0 0 12px;font-size:clamp(1.8rem,3.2vw,2.8rem);line-height:1.08;letter-spacing:-.025em}
.exp-cap p{margin:0;max-width:440px;font-size:1.08rem;line-height:1.6;color:var(--ui-muted,#5b6b7c)}
.exp-phone-wrap{position:relative;grid-row:1/3;grid-column:2;align-self:center;--ph:min(70vh,660px)}
.exp-phone{position:relative;height:var(--ph);aspect-ratio:390/844;padding:10px;border-radius:44px;background:#0b1f3a;box-shadow:0 2px 0 #ffffff26 inset,0 40px 90px #0b1f3a40;transform-origin:50% 80%;will-change:transform}
.exp-screen{position:relative;height:100%;border-radius:34px;overflow:hidden;background:#fff}
.exp-feed{height:calc(var(--n,6)*100%);will-change:transform}
.exp-shot{height:calc(100% / var(--n,6))}
.exp-shot picture,.exp-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.exp-callouts{position:absolute;inset:0;pointer-events:none}
.exp-chip{position:absolute;left:calc(100% + 28px);width:min(260px,22vw);display:grid;gap:4px;padding:14px 16px;border-radius:16px;background:var(--ui-surface,#fff);border:1px solid var(--ui-line,#dbe5ee);box-shadow:0 14px 34px #0b1f3a1f;opacity:0;transform:translateX(-16px) scale(.96);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.exp-chip::before{content:"";position:absolute;right:100%;top:50%;width:28px;height:2px;background:linear-gradient(90deg,transparent,var(--ui-primary,#0078bd))}
.exp-chip::after{content:"";position:absolute;right:calc(100% + 24px);top:calc(50% - 4px);width:8px;height:8px;border-radius:50%;background:var(--ui-primary,#0078bd);box-shadow:0 0 0 4px color-mix(in srgb,var(--ui-primary,#0078bd) 22%,transparent)}
.exp-chip[data-k="0"]{top:16%}.exp-chip[data-k="1"]{top:42%}.exp-chip[data-k="2"]{top:68%}
.exp-chip:nth-child(odd){transition-delay:0s}.exp-chip[data-k="1"]{transition-delay:.06s}.exp-chip[data-k="2"]{transition-delay:.12s}
.exp-chip.is-on{opacity:1;transform:none}
.exp-chip strong{font:700 .95rem Poppins,sans-serif;color:var(--ui-ink,#0b1f3a)}
.exp-chip span{font-size:.85rem;line-height:1.4;color:var(--ui-muted,#5b6b7c)}
.exp-rail{grid-column:1;grid-row:2;align-self:end;display:flex;gap:6px;margin:0 0 6vh;padding:0;list-style:none;flex-wrap:wrap}
.exp-rail li{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:99px;font:600 .78rem Poppins,sans-serif;color:var(--ui-muted,#5b6b7c);background:transparent;transition:background .3s ease,color .3s ease}
.exp-rail i{width:8px;height:8px;border-radius:50%;background:var(--ui-line,#dbe5ee);transition:background .3s ease,transform .3s ease}
.exp-rail li.is-done i{background:color-mix(in srgb,var(--ui-primary,#0078bd) 45%,transparent)}
.exp-rail li.is-on{background:var(--ui-surface,#fff);color:var(--ui-ink,#0b1f3a);box-shadow:0 4px 14px #0b1f3a14}
.exp-rail li.is-on i{background:var(--ui-primary,#0078bd);transform:scale(1.3)}
@media (max-width:1100px){.exp-chip{width:200px;left:calc(100% + 18px)}.exp-chip span{display:none}}
@media (max-width:900px){
  .exp-pin{height:calc(var(--n,6)*62vh + 100vh)}
  .exp-stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;row-gap:10px;align-items:start;padding-top:10px}
  .exp-copy{min-height:96px;align-self:start}
  .exp-cap h3{font-size:1.35rem;margin-bottom:4px}.exp-cap p{display:none}.exp-count{margin-bottom:4px;font-size:.75rem}
  .exp-phone-wrap{grid-row:2;grid-column:1;justify-self:center;align-self:start;--ph:min(56vh,520px)}
  .exp-phone{padding:7px;border-radius:32px}.exp-screen{border-radius:26px}
  .exp-chip{left:auto;right:-6px;width:auto;max-width:62vw;padding:9px 12px;border-radius:12px;transform:translateX(16px) scale(.96)}
  .exp-chip::before,.exp-chip::after{display:none}
  .exp-chip strong{font-size:.8rem}
  .exp-chip[data-k="0"]{top:30%}.exp-chip[data-k="1"]{top:48%}.exp-chip[data-k="2"]{top:66%}
  .exp-rail{display:none}
}
@media (max-width:420px){.exp-chip{right:-10px}}
@media (min-width:901px){.exp-phone-wrap{margin-right:calc(min(260px,22vw) + 36px)}}
@media (min-width:901px) and (max-width:1100px){.exp-phone-wrap{margin-right:236px}}
.exp-stage{height:var(--exp-stage-h,calc(100vh - var(--landing-header-height,78px)))}
.exp-phone-wrap{--ph:min(calc(var(--exp-stage-h,80vh) - 64px),660px)}
@media (max-width:900px){.exp-phone-wrap{--ph:min(calc(var(--exp-stage-h,80vh) - 150px),520px)}}
@media (max-width:900px){
  .exp-phone-wrap{--ph:min(calc(var(--exp-stage-h,80vh) - 230px),500px)}
  .exp-callouts{position:absolute;inset:auto auto auto 50%;top:calc(100% + 12px);width:min(92vw,480px);transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
  .exp-chip{position:static;max-width:none;transform:translateY(8px) scale(.96)}
  .exp-chip:not(.is-cur){display:none}
}

/* Profile switch: screens no longer slide; a card announces the next account. */
.exp-feed{position:relative;height:100%;transform:none!important}
.exp-shot{position:absolute;inset:0;height:100%;opacity:0;transition:opacity .25s ease}
.exp-shot.is-shown{opacity:1}
.exp-switch{--role:var(--ui-primary,#0078bd);position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:8px;padding:24px;text-align:center;background:color-mix(in srgb,var(--ui-surface,#fff) 82%,transparent);backdrop-filter:blur(10px);opacity:0;pointer-events:none}
.exp-switch[data-role="inversora"],.exp-switch[data-role="inversor"]{--role:#1d3f74}.exp-switch[data-role="cliente"]{--role:#2d9b4b}.exp-switch[data-role="colaborador"]{--role:#0b8fa3}
.exp-switch-note{font:600 .72rem Poppins,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ui-muted,#5b6b7c)}
.exp-switch-avatar{display:grid;place-items:center;width:76px;height:76px;margin:6px 0;border-radius:50%;background:var(--role);color:#fff;font:700 2rem Poppins,sans-serif;box-shadow:0 0 0 8px color-mix(in srgb,var(--role) 18%,transparent);transform:scale(.7);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.exp-switch.is-on .exp-switch-avatar{transform:scale(1)}
.exp-switch-name{font:700 1.5rem Poppins,sans-serif;color:var(--ui-ink,#0b1f3a)}
.exp-switch-role{display:inline-block;padding:3px 12px;border-radius:99px;background:color-mix(in srgb,var(--role) 12%,transparent);color:var(--role);font:600 .85rem Poppins,sans-serif}
.exp-switch-dots{display:flex;gap:5px;margin-top:10px}
.exp-switch-dots i{width:7px;height:7px;border-radius:50%;background:var(--role);opacity:.3}
@media (prefers-reduced-motion:no-preference){
  @keyframes exp-dot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
  .exp-switch.is-on .exp-switch-dots i{animation:exp-dot .9s ease-in-out infinite}
  .exp-switch.is-on .exp-switch-dots i:nth-child(2){animation-delay:.15s}.exp-switch.is-on .exp-switch-dots i:nth-child(3){animation-delay:.3s}
}
@media (max-width:900px){.exp-switch-avatar{width:56px;height:56px;font-size:1.5rem}.exp-switch-name{font-size:1.15rem}}

/* Indicador «desliza para seguir» en la sección fija de ejemplos. */
.exp-scroll-cue{position:absolute;left:50%;bottom:14px;z-index:4;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;background:color-mix(in srgb,#fff 88%,transparent);border:1px solid color-mix(in srgb,var(--ui-ink,#0b1f3a) 12%,transparent);box-shadow:0 6px 18px rgba(11,31,58,.14);color:var(--ui-ink,#0b1f3a);font:600 .8rem Poppins,sans-serif;opacity:0;transform:translate(-50%,8px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.exp-scroll-cue.is-on{opacity:.92;transform:translate(-50%,0)}
.exp-scroll-cue.is-strong{opacity:1;background:#fff;box-shadow:0 8px 24px rgba(11,31,58,.22)}
.exp-mouse{position:relative;width:16px;height:24px;border:2px solid currentColor;border-radius:9px}
.exp-mouse i{position:absolute;left:50%;top:4px;width:3px;height:5px;margin-left:-1.5px;border-radius:2px;background:currentColor}
.exp-chev{display:none;width:18px;height:18px}
@media (hover:none),(max-width:900px){.exp-mouse{display:none}.exp-chev{display:block}}
@media (prefers-reduced-motion:no-preference){
  .exp-scroll-cue.is-on .exp-mouse i{animation:exp-wheel 1.4s ease-in-out infinite}
  .exp-scroll-cue.is-on .exp-chev{animation:exp-bob 1.2s ease-in-out infinite}
}
@keyframes exp-wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(8px)}}
@keyframes exp-bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}