/* =========================================================================
   Sitrio · página de Servicios
   Historia con un iPhone fijo: mientras bajas por cada servicio, la pantalla
   del teléfono se convierte en una demo de ese servicio. En celular, cada
   servicio lleva su propio iPhone (el JS mueve las pantallas a su capítulo).
   Las pantallas se dibujan en cqw (1cqw = 1% del ancho de la pantalla del
   teléfono), así se ven idénticas a cualquier tamaño.
   Regla de animación: el estado base de cada elemento es el VISIBLE; los
   keyframes parten de oculto. Sin animación (movimiento reducido) se ve la
   composición completa y quieta.
   ========================================================================= */

/* ---------- Capítulos + escenario ---------- */
.ss{padding:calc(var(--nav-h) + clamp(48px,7vw,96px)) 0 clamp(64px,8vw,112px)}
/* El título vive en la columna de los capítulos: así el iPhone fijo arranca completo y centrado. */
.ss-intro{padding-bottom:clamp(28px,4vw,56px)}
.ss-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start}
.ss-chapters{display:flex;flex-direction:column}
.ss-ch{min-height:96svh;display:flex;align-items:center;padding:6vh 0}
.ss-intro+.ss-ch{min-height:calc(96svh - 200px);align-items:flex-start;padding-top:0}
.ss-ch-in{display:flex;flex-direction:column;align-items:flex-start;gap:26px;max-width:540px}
.ss-ic{display:flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:18px;background:var(--tinta);color:var(--lima);transition:background .45s var(--ease),color .45s var(--ease),transform .55s cubic-bezier(.34,1.56,.64,1)}
.ss-ic svg{width:28px;height:28px}
.ss-ic sitrio-agente{display:block;width:100%;height:100%}
.ss-ic--brio{background:transparent;width:72px;height:72px}
.ss-ch.is-active .ss-ic:not(.ss-ic--brio){background:var(--lima);color:var(--lima-ink);transform:rotate(-8deg) scale(1.06)}
.ss-ch h2{font-size:clamp(46px,5.8vw,88px);letter-spacing:-.058em;line-height:.9}
.ss-list{display:flex;flex-direction:column;gap:14px;width:100%;padding-top:24px;border-top:1.5px solid var(--tinta)}
.ss-list li{display:flex;align-items:center;gap:14px;font-size:18px;font-weight:600;letter-spacing:-.01em}
.ss-list .icon{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--lima);color:var(--lima-ink)}
.ss-list .icon svg{width:12px;height:12px}
.ss-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:6px}
.ss-stage{position:sticky;top:0;height:100svh;margin-top:calc(-1*(var(--nav-h) + clamp(48px,7vw,96px)));display:flex;align-items:center;justify-content:center;padding-top:calc(var(--nav-h) + 10px)}
.ss-stage .device{height:min(76svh,700px)}
.ss-ch-device{display:none}
.device .device-statusbar,.device .device-island,.device .device-home{z-index:20}

/* ---------- Pantallas ---------- */
.ss-screen{position:absolute;inset:0;z-index:1;overflow:hidden;opacity:0;transform:translate3d(0,3%,0) scale(.985);transition:opacity .6s var(--ease),transform .75s var(--ease);font-family:var(--body);-webkit-font-smoothing:antialiased}
.ss-screen.is-on{opacity:1;transform:none}
.ss-screen svg{display:block}
/* Las animaciones solo corren con .is-live: al entrar, la demo arranca desde el principio. */
.ss-screen:not(.is-live) *{animation:none !important}

/* ===== 1 · Lumbre (sitio One Page de una panadería) ===== */
.s1{background:#F6EEE3;color:#3B2416}
.s1-page{position:absolute;inset:0;padding:13cqw 5cqw 0}
.s1-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:4cqw}
.s1-logo{font-family:Georgia,'Times New Roman',serif;font-size:6.6cqw;font-style:italic;font-weight:700;letter-spacing:-.02em}
.s1-burger{display:flex;flex-direction:column;gap:1.2cqw}
.s1-burger i{display:block;width:5.6cqw;height:.7cqw;border-radius:1cqw;background:#3B2416}
.s1-hero{position:relative;height:60cqw;border-radius:5cqw;background:#E3B985;overflow:hidden}
.s1-board{position:absolute;left:9cqw;right:9cqw;bottom:6cqw;height:5cqw;border-radius:3cqw;background:#7A4A25}
.s1-loaf{position:absolute;left:15cqw;right:15cqw;bottom:9.5cqw;height:28cqw;border-radius:50% 50% 42% 42%/64% 64% 36% 36%;background:#B87333;box-shadow:inset 0 -3cqw 0 #9C5D27}
.s1-loaf i{position:absolute;top:26%;width:17%;height:9%;border-radius:2cqw;background:#EBC596;transform:rotate(-24deg)}
.s1-loaf i:nth-child(1){left:20%}.s1-loaf i:nth-child(2){left:41%}.s1-loaf i:nth-child(3){left:62%}
.s1-steam i{position:absolute;bottom:39cqw;width:1.3cqw;height:8cqw;border-radius:2cqw;background:#F6EEE3;opacity:.75}
.s1-steam i:nth-child(1){left:39%}.s1-steam i:nth-child(2){left:49%}.s1-steam i:nth-child(3){left:59%}
.s1-title{margin:5cqw 0 4cqw;font-family:Georgia,'Times New Roman',serif;font-size:6.8cqw;font-weight:700;line-height:1.06;letter-spacing:-.02em}
.s1-title span{display:block}
.s1-ctas{display:flex;gap:2.4cqw}
.s1-wa,.s1-menu{display:inline-flex;align-items:center;gap:1.6cqw;height:11cqw;padding:0 4cqw;border-radius:6cqw;font-size:3.5cqw;font-weight:700}
.s1-wa{background:#25D366;color:#06301A}
.s1-wa svg{width:4.4cqw;height:4.4cqw}
.s1-menu{border:.5cqw solid #3B2416}
.s1-info{display:flex;flex-direction:column;gap:2.2cqw;margin-top:5cqw;padding:4cqw;border-radius:4cqw;background:#FFFFFF;font-size:3.4cqw;font-weight:600}
.s1-info span{display:flex;align-items:center;gap:2.2cqw}
.s1-info svg{width:4.4cqw;height:4.4cqw;color:#B87333}
.s1-form{display:flex;flex-direction:column;gap:3cqw;margin-top:4cqw;padding:5cqw 4cqw;border-radius:4cqw;background:#3B2416;color:#F6EEE3}
.s1-form b{font-family:Georgia,'Times New Roman',serif;font-size:5.4cqw}
.s1-field{display:flex;flex-direction:column;gap:.6cqw;padding:2.2cqw 3cqw;border-radius:2.6cqw;background:#F6EEE3;color:#3B2416}
.s1-field small{font-size:2.6cqw;font-weight:700}
.s1-type{display:inline-block;min-height:4.6cqw;font-size:3.7cqw;font-weight:600;white-space:nowrap}
.s1-send{align-self:flex-start;display:inline-flex;align-items:center;height:10cqw;padding:0 5cqw;border-radius:6cqw;background:#E8763A;color:#FFFFFF;font-size:3.5cqw;font-weight:700}
.s1-toast{position:absolute;left:5cqw;right:5cqw;bottom:8cqw;z-index:3;display:flex;align-items:center;gap:2.6cqw;padding:3.6cqw 4cqw;border-radius:4cqw;background:#1E1A17;color:#FFFFFF;font-size:3.7cqw;font-weight:600}
.s1-toast svg{width:5.4cqw;height:5.4cqw;padding:1.1cqw;border-radius:50%;background:#25D366;color:#06301A}
.s1-float{position:absolute;right:5cqw;bottom:26cqw;z-index:2;display:flex;align-items:center;justify-content:center;width:13cqw;height:13cqw;border-radius:50%;background:#25D366;color:#FFFFFF}
.s1-float svg{width:6.6cqw;height:6.6cqw}
.s1-float::after{content:"";position:absolute;inset:-1.2cqw;border-radius:50%;border:.6cqw solid #25D366;opacity:0}

.is-live .s1-page{animation:s1-page 9s var(--ease) infinite both}
.is-live .s1-hero{animation:s1-hero 9s var(--ease) infinite both}
.is-live .s1-steam i{animation:s1-steam 2.4s ease-in infinite}
.is-live .s1-steam i:nth-child(2){animation-delay:.6s}
.is-live .s1-steam i:nth-child(3){animation-delay:1.2s}
.is-live .s1-title span:nth-child(1){animation:s1-line1 9s var(--ease) infinite both}
.is-live .s1-title span:nth-child(2){animation:s1-line2 9s var(--ease) infinite both}
.is-live .s1-ctas{animation:s1-ctas 9s cubic-bezier(.34,1.4,.64,1) infinite both}
.is-live .s1-info{animation:s1-info 9s var(--ease) infinite both}
.is-live .s1-type-a{animation:s1-type-a 9s steps(13,end) infinite both}
.is-live .s1-type-b{animation:s1-type-b 9s steps(12,end) infinite both}
.is-live .s1-send{animation:s1-send 9s ease infinite both}
.is-live .s1-toast{animation:s1-toast 9s cubic-bezier(.34,1.3,.64,1) infinite both}
.is-live .s1-float::after{animation:ring 1.8s ease-out infinite}
@keyframes s1-page{0%,30%{transform:none;opacity:1}40%,86%{transform:translate3d(0,-34cqw,0)}94%{transform:none;opacity:1}97%{opacity:0}100%{opacity:0}}
@keyframes s1-hero{0%{opacity:0;transform:translate3d(0,-5cqw,0) scale(.96)}8%,100%{opacity:1;transform:none}}
@keyframes s1-steam{0%{transform:translate3d(0,0,0) scaleY(.6);opacity:0}30%{opacity:.75}100%{transform:translate3d(0,-10cqw,0) scaleY(1.2);opacity:0}}
@keyframes s1-line1{0%,7%{opacity:0;transform:translate3d(0,4cqw,0)}14%,100%{opacity:1;transform:none}}
@keyframes s1-line2{0%,11%{opacity:0;transform:translate3d(0,4cqw,0)}18%,100%{opacity:1;transform:none}}
@keyframes s1-ctas{0%,19%{opacity:0;transform:scale(.8)}26%,100%{opacity:1;transform:none}}
@keyframes s1-info{0%,25%{opacity:0;transform:translate3d(0,4cqw,0)}32%,100%{opacity:1;transform:none}}
@keyframes s1-type-a{0%,42%{clip-path:inset(0 100% 0 0)}54%,100%{clip-path:inset(0 0 0 0)}}
@keyframes s1-type-b{0%,56%{clip-path:inset(0 100% 0 0)}66%,100%{clip-path:inset(0 0 0 0)}}
@keyframes s1-send{0%,69%{transform:none}71%{transform:scale(.92)}73%,100%{transform:none}}
@keyframes s1-toast{0%,72%{opacity:0;transform:translate3d(0,12cqw,0)}76%,90%{opacity:1;transform:none}94%,100%{opacity:0;transform:translate3d(0,6cqw,0)}}
@keyframes ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}

/* ===== 2 · Altamar (sitio corporativo de un despacho contable) ===== */
.s2{background:#F3F6FA;color:#10233F}
.s2-head{position:absolute;top:0;left:0;right:0;height:24cqw;padding:13cqw 5cqw 0;background:#10233F;color:#FFFFFF}
.s2-logo{display:flex;align-items:center;gap:2.2cqw;font-family:var(--display);font-size:6cqw;font-weight:700;letter-spacing:-.045em}
.s2-mark{position:relative;width:5.6cqw;height:5.6cqw;border-radius:1.6cqw;background:#2BB3A3;overflow:hidden}
.s2-mark::after{content:"";position:absolute;left:-20%;right:-20%;bottom:-35%;height:70%;border-radius:50%;background:#10233F}
.s2-tabs{position:absolute;top:24cqw;left:0;right:0;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;height:11cqw;background:#FFFFFF;border-bottom:.3cqw solid #DCE3EC;font-size:3.1cqw;font-weight:700;text-align:center}
.s2-ind{position:absolute;left:0;bottom:-.3cqw;width:25%;height:.9cqw;border-radius:1cqw;background:#2BB3A3}
.s2-view{position:absolute;top:35cqw;left:0;right:0;bottom:0;overflow:hidden}
.s2-track{display:flex;width:400%;height:100%}
.s2-pg{width:25%;display:flex;flex-direction:column;gap:3.6cqw;padding:5cqw}
.s2-h{font-family:var(--display);font-size:6.4cqw;font-weight:700;letter-spacing:-.04em;line-height:1.05}
.s2-hero{display:flex;flex-direction:column;gap:4cqw;padding:6cqw 5cqw;border-radius:5cqw;background:#10233F;color:#FFFFFF}
.s2-hero b{font-family:var(--display);font-size:7.2cqw;letter-spacing:-.04em;line-height:1.04}
.s2-btn{align-self:flex-start;display:inline-flex;align-items:center;height:10cqw;padding:0 4.4cqw;border-radius:6cqw;background:#2BB3A3;color:#06221F;font-size:3.4cqw;font-weight:700}
.s2-chart{display:flex;align-items:flex-end;gap:2.2cqw;height:19cqw;padding-top:2cqw;border-top:.3cqw solid #2A3E5C}
.s2-chart i{flex:1;border-radius:1.4cqw 1.4cqw 0 0;background:#2BB3A3}
.s2-chart i:nth-child(1){height:28%;background:#3B5578}.s2-chart i:nth-child(2){height:42%;background:#3B5578}.s2-chart i:nth-child(3){height:38%;background:#3B5578}.s2-chart i:nth-child(4){height:64%}.s2-chart i:nth-child(5){height:88%}
.s2-stats{display:grid;grid-template-columns:1fr 1fr;gap:3cqw}
.s2-stat{display:flex;flex-direction:column;gap:.6cqw;padding:4cqw;border-radius:4cqw;background:#FFFFFF}
.s2-stat b{font-family:var(--display);font-size:7cqw;letter-spacing:-.04em}
.s2-stat span{font-size:3cqw;font-weight:600}
.s2-row{display:flex;align-items:center;gap:3.4cqw;padding:3.6cqw;border-radius:4cqw;background:#FFFFFF}
.s2-row-ic{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:11cqw;height:11cqw;border-radius:3cqw;background:#E3F5F2;color:#10233F}
.s2-row-ic svg{width:5.4cqw;height:5.4cqw}
.s2-row b{display:block;font-size:3.7cqw}
.s2-row span{font-size:3cqw;font-weight:500}
.s2-av{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:12cqw;height:12cqw;border-radius:50%;font-size:3.6cqw;font-weight:800;color:#FFFFFF}
.s2-week{display:grid;grid-template-columns:repeat(5,1fr);gap:2cqw}
.s2-day{display:flex;flex-direction:column;align-items:center;gap:.6cqw;padding:2.6cqw 0;border-radius:3cqw;background:#FFFFFF;font-size:2.8cqw;font-weight:700}
.s2-day b{font-size:4.6cqw}
.s2-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw}
.s2-slot{padding:3cqw 0;border-radius:3cqw;border:.4cqw solid #DCE3EC;background:#FFFFFF;font-size:3.3cqw;font-weight:700;text-align:center}
.s2-confirm{display:flex;align-items:center;justify-content:center;height:11cqw;border-radius:6cqw;background:#10233F;color:#FFFFFF;font-size:3.6cqw;font-weight:700}
.s2-ok{position:absolute;left:5cqw;right:5cqw;bottom:8cqw;z-index:3;display:flex;align-items:center;gap:3cqw;padding:4cqw;border-radius:4cqw;background:#2BB3A3;color:#06221F;opacity:0}
.s2-ok svg{flex:0 0 auto;width:7cqw;height:7cqw;padding:1.4cqw;border-radius:50%;background:#06221F;color:#2BB3A3}
.s2-ok b{display:block;font-size:3.8cqw}
.s2-ok span{font-size:3.1cqw;font-weight:600}

.is-live .s2-track{animation:s2-track 10s cubic-bezier(.65,0,.35,1) infinite both}
.is-live .s2-ind{animation:s2-ind 10s cubic-bezier(.65,0,.35,1) infinite both}
.is-live .s2-view{animation:s2-fade 10s ease infinite both}
.is-live .s2-day.is-pick{animation:s2-pick 10s ease infinite both}
.is-live .s2-slot.is-pick{animation:s2-pick 10s ease infinite both;animation-delay:.6s}
.is-live .s2-confirm{animation:s2-press 10s ease infinite both}
.is-live .s2-ok{animation:s2-ok 10s cubic-bezier(.34,1.3,.64,1) infinite both}
.s2-day.is-pick,.s2-slot.is-pick{background:#10233F;border-color:#10233F;color:#FFFFFF}
@keyframes s2-track{0%,18%{transform:none}24%,40%{transform:translate3d(-25%,0,0)}46%,58%{transform:translate3d(-50%,0,0)}64%,100%{transform:translate3d(-75%,0,0)}}
@keyframes s2-ind{0%,18%{transform:none}24%,40%{transform:translate3d(100%,0,0)}46%,58%{transform:translate3d(200%,0,0)}64%,100%{transform:translate3d(300%,0,0)}}
@keyframes s2-fade{0%{opacity:0}4%,95%{opacity:1}100%{opacity:0}}
@keyframes s2-pick{0%,70%{background:#FFFFFF;border-color:#DCE3EC;color:#10233F}73%,100%{background:#10233F;border-color:#10233F;color:#FFFFFF}}
@keyframes s2-press{0%,80%{transform:none}82%{transform:scale(.94)}84%,100%{transform:none}}
@keyframes s2-ok{0%,84%{opacity:0;transform:translate3d(0,10cqw,0)}88%,95%{opacity:1;transform:none}100%{opacity:0;transform:translate3d(0,4cqw,0)}}

/* ===== 3 · Barro Norte (tienda en línea de cerámica) ===== */
.s3{background:#EFE7DC;color:#2A211C}
.s3-head{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:13cqw 5cqw 0}
.s3-logo{font-size:6.2cqw;font-weight:800;letter-spacing:-.06em}
.s3-cart{position:relative;display:flex;align-items:center;justify-content:center;width:10.5cqw;height:10.5cqw;border-radius:50%;background:#2A211C;color:#EFE7DC}
.s3-cart svg{width:5cqw;height:5cqw}
.s3-badge{position:absolute;top:-1.2cqw;right:-1.2cqw;width:5.4cqw;height:5.4cqw;overflow:hidden;border-radius:50%;background:#B5603A;color:#FFFFFF;font-size:3cqw;font-style:normal;font-weight:800;line-height:5.4cqw;text-align:center}
.s3-badge span{display:block;height:5.4cqw}
.s3-hello{position:absolute;top:28cqw;left:5cqw;right:5cqw;font-size:6.8cqw;font-weight:800;letter-spacing:-.045em;line-height:1.04}
.s3-grid{position:absolute;top:50cqw;left:5cqw;right:5cqw;display:grid;grid-template-columns:1fr 1fr;gap:3cqw}
.s3-prod{display:flex;flex-direction:column;gap:1.2cqw;padding:2.4cqw 2.4cqw 3cqw;border-radius:4cqw;background:#FFFFFF}
.s3-ph{position:relative;height:30cqw;border-radius:3cqw;overflow:hidden}
.p1 .s3-ph{background:#E6D2BC}.p2 .s3-ph{background:#CFDAD3}.p3 .s3-ph{background:#D9D6E6}.p4 .s3-ph{background:#F0D9BD}
.s3-prod b{font-size:3.5cqw}
.s3-prod span{font-size:3.4cqw;font-weight:700;color:#8E4527}
.s3-add{align-self:flex-start;margin-top:.6cqw;padding:1.4cqw 3cqw;border-radius:4cqw;background:#2A211C;color:#FFFFFF;font-size:2.9cqw;font-style:normal;font-weight:700}
.cup{position:absolute;left:28%;bottom:18%;width:34%;height:50%;border-radius:1.6cqw 1.6cqw 5cqw 5cqw;background:#B5603A}
.cup::after{content:"";position:absolute;right:-34%;top:20%;width:36%;height:44%;border:1.6cqw solid #B5603A;border-left:0;border-radius:0 50% 50% 0}
.plate{position:absolute;left:50%;top:50%;width:64%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#F7F4EE;box-shadow:inset 0 0 0 3.2cqw #7FA393}
.jar{position:absolute;left:33%;bottom:14%;width:34%;height:64%;background:#5B6E8C;clip-path:polygon(22% 0,78% 0,70% 20%,96% 100%,4% 100%,30% 20%)}
.jar::after{content:"";position:absolute;left:6%;top:-2%;width:22%;height:10%;background:#5B6E8C}
.bowl{position:absolute;left:20%;bottom:24%;width:60%;height:32%;border-radius:0 0 50% 50%/0 0 100% 100%;background:#D9A441;box-shadow:inset 0 1.4cqw 0 #B9852C}
.s3-sheet{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-direction:column;gap:1.6cqw;padding:5cqw 5cqw 8cqw;border-radius:6cqw 6cqw 0 0;background:#FFFFFF;transform:translate3d(0,100%,0)}
.s3-sheet>b{margin-bottom:1cqw;font-size:5cqw;letter-spacing:-.03em}
.s3-line{display:flex;justify-content:space-between;padding:1.6cqw 0;border-bottom:.3cqw solid #EFE7DC;font-size:3.5cqw;font-weight:600}
.s3-total{display:flex;align-items:baseline;justify-content:space-between;margin-top:1cqw;font-size:3.5cqw;font-weight:700}
.s3-total b{font-size:5.4cqw}
.s3-pay{display:grid;grid-template-columns:1fr 1fr;gap:2cqw;margin:2.4cqw 0}
.s3-pay span{padding:3cqw 0;border-radius:3cqw;border:.4cqw solid #E0D6CA;font-size:3.1cqw;font-weight:700;text-align:center}
.s3-paybtn{position:relative;display:flex;align-items:center;justify-content:center;height:12cqw;border-radius:6cqw;background:#2A211C;color:#FFFFFF;font-size:3.9cqw;font-weight:700}
.s3-spin{position:absolute;width:5cqw;height:5cqw;border-radius:50%;border:.7cqw solid #6B5D52;border-top-color:#FFFFFF;opacity:0}
.s3-done{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4cqw;background:#2A211C;color:#FFFFFF;opacity:0}
.s3-done svg{width:16cqw;height:16cqw;padding:3.6cqw;border-radius:50%;background:#B6FF00;color:#1C2600}
.s3-done b{font-size:7cqw;letter-spacing:-.04em}
.s3-done span{font-size:3.6cqw;font-weight:600}

.is-live .p1 .s3-add{animation:s3-tap1 10s ease infinite both}
.is-live .p4 .s3-add{animation:s3-tap2 10s ease infinite both}
.is-live .s3-badge{animation:s3-badge 10s cubic-bezier(.34,1.56,.64,1) infinite both}
.is-live .s3-badge span{animation:s3-count 10s cubic-bezier(.34,1.3,.64,1) infinite both}
.is-live .s3-sheet{animation:s3-sheet 10s var(--ease) infinite both}
.is-live .s3-mp{animation:s3-mp 10s ease infinite both}
.is-live .s3-paybtn{animation:s3-press 10s ease infinite both}
.is-live .s3-paybtn em{animation:s3-label 10s ease infinite both}
.is-live .s3-spin{animation:s3-spin 10s linear infinite both}
.is-live .s3-done{animation:s3-done 10s var(--ease) infinite both}
.s3-paybtn em{font-style:normal}
@keyframes s3-tap1{0%,9%{transform:none}11%{transform:scale(.86)}13%,100%{transform:none}}
@keyframes s3-tap2{0%,23%{transform:none}25%{transform:scale(.86)}27%,100%{transform:none}}
@keyframes s3-badge{0%,11%{transform:scale(0)}14%,100%{transform:none}}
@keyframes s3-count{0%,25%{transform:none}28%,100%{transform:translate3d(0,-100%,0)}}
@keyframes s3-sheet{0%,33%{transform:translate3d(0,100%,0)}40%,94%{transform:none}100%{transform:translate3d(0,100%,0)}}
@keyframes s3-mp{0%,49%{border-color:#E0D6CA;background:#FFFFFF}52%,100%{border-color:#00A1E4;background:#E5F6FD}}
@keyframes s3-press{0%,59%{transform:none}61%{transform:scale(.94)}63%,100%{transform:none}}
@keyframes s3-label{0%,61%{opacity:1}62%,72%{opacity:0}73%,100%{opacity:1}}
@keyframes s3-spin{0%,61%{opacity:0;transform:rotate(0)}62%{opacity:1}72%{opacity:1;transform:rotate(1080deg)}73%,100%{opacity:0;transform:rotate(1080deg)}}
@keyframes s3-done{0%,73%{opacity:0;transform:scale(1.04)}77%,94%{opacity:1;transform:none}98%,100%{opacity:0}}

/* ===== 4 · Brío en Mensajes de iPhone (Barro Norte) =====
   El cliente escribe en azul a la derecha; Brío contesta en gris a la izquierda.
   Las colitas de las burbujas se recortan con el blanco del fondo. */
.s4{background:#FFFFFF;color:#000000;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter Tight',system-ui,sans-serif}
.s4-head{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;justify-content:center;padding:14.2cqw 16cqw 2.4cqw;background:#F6F6F6;border-bottom:.25cqw solid #DEDEE3}
.s4-back{position:absolute;left:3.4cqw;top:22.6cqw;display:flex;align-items:center;gap:1cqw;color:#007AFF}
.s4-back svg{width:3cqw;height:5cqw}
.s4-back em{display:flex;align-items:center;justify-content:center;min-width:5.6cqw;height:5.6cqw;padding:0 1.5cqw;border-radius:3cqw;background:#007AFF;color:#FFFFFF;font-size:3.2cqw;font-style:normal;font-weight:600}
.s4-cam{position:absolute;right:4cqw;top:22.8cqw;width:7.2cqw;height:5.2cqw;color:#007AFF}
.s4-cam svg{width:100%;height:100%}
.s4-who{display:flex;flex-direction:column;align-items:center;gap:.4cqw;line-height:1.2}
.s4-av{display:flex;align-items:center;justify-content:center;width:11cqw;height:11cqw;margin-bottom:.8cqw;border-radius:50%;background:#B5603A;color:#FFFFFF;font-size:3.8cqw;font-weight:700}
.s4-who b{display:inline-flex;align-items:center;gap:.9cqw;font-size:3.2cqw;font-weight:500}
.s4-who b svg{width:1.6cqw;height:2.4cqw;color:#A1A1A6}
.s4-status{position:relative;display:block;width:44cqw;height:3.6cqw;font-size:2.8cqw;color:#8E8E93;text-align:center}
.s4-status em{position:absolute;left:0;right:0;top:0;font-style:normal;white-space:nowrap}
.s4-status em+em{opacity:0}
.s4-status em:nth-child(2){color:#556E00}
.s4-body{position:absolute;top:37.6cqw;left:0;right:0;bottom:18cqw;display:flex;flex-direction:column;gap:2.2cqw;padding:3.4cqw 4.6cqw}
.s4-day{align-self:center;font-size:2.8cqw;color:#8E8E93}
.s4-day b{font-weight:600}
.s4-msg{position:relative;z-index:0;max-width:78%;padding:2cqw 3.2cqw 2.2cqw;border-radius:4.6cqw;font-size:3.6cqw;line-height:1.3}
.s4-msg::before,.s4-msg::after{content:"";position:absolute;z-index:-1;bottom:0;height:5cqw}
.s4-msg::after{height:6cqw}
.s4-me{align-self:flex-end;background:#007AFF;color:#FFFFFF;transform-origin:100% 100%}
.s4-me::before{right:-1.8cqw;width:5cqw;background:#007AFF;border-bottom-left-radius:4cqw 3.6cqw}
.s4-me::after{right:-6.5cqw;width:6.5cqw;background:#FFFFFF;border-bottom-left-radius:2.6cqw}
.s4-them{align-self:flex-start;background:#E9E9EB;color:#000000;transform-origin:0 100%}
.s4-them::before{left:-1.8cqw;width:5cqw;background:#E9E9EB;border-bottom-right-radius:4cqw 3.6cqw}
.s4-them::after{left:-6.5cqw;width:6.5cqw;background:#FFFFFF;border-bottom-right-radius:2.6cqw}
.s4-them u{color:#007AFF;text-decoration:none}
.s4-trace{align-self:center;display:inline-flex;align-items:center;gap:1.8cqw;padding:1.3cqw 3.2cqw 1.3cqw 1.4cqw;border-radius:6cqw;background:#F2F2F7;font-size:2.9cqw;color:#3C3C43}
.s4-trace b{color:#000000;font-weight:600}
.s4-ic{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:4.4cqw;height:4.4cqw;border-radius:50%;background:#B6FF00;color:#1C2600;font-size:2.7cqw;font-weight:800}
.s4-slot{position:relative;align-self:flex-start;max-width:80%}
.s4-slot .s4-msg{max-width:none}
.s4-typing{position:absolute;left:0;top:0;display:flex;gap:1cqw;padding:3cqw 3.4cqw;border-radius:4.6cqw;background:#E9E9EB;opacity:0}
.s4-typing i{width:1.7cqw;height:1.7cqw;border-radius:50%;background:#8E8E93}
.s4-prod{display:flex;align-items:center;gap:2.4cqw;margin:-.4cqw -1.4cqw 2cqw;padding:1.8cqw 2.6cqw 1.8cqw 1.8cqw;border-radius:3.2cqw;background:#FFFFFF}
.s4-sw{position:relative;flex:0 0 auto;width:11cqw;height:11cqw;border-radius:2cqw;background:#D9D6E6}
.s4-sw::before{content:"";position:absolute;left:24%;bottom:18%;width:38%;height:52%;border-radius:.8cqw .8cqw 2cqw 2cqw;background:#3F5F8A}
.s4-sw::after{content:"";position:absolute;left:60%;top:30%;width:18%;height:26%;border:.9cqw solid #3F5F8A;border-left:0;border-radius:0 50% 50% 0}
.s4-prod b{display:block;font-size:3.3cqw;font-weight:600}
.s4-prod small{font-size:2.8cqw;color:#6C6C70}
.s4-quick{align-self:flex-start;display:flex;gap:1.6cqw}
.s4-quick span{padding:1.6cqw 3.4cqw;border-radius:5cqw;border:.3cqw solid #D1D1D6;background:#FFFFFF;color:#007AFF;font-size:3cqw;font-weight:600}
.s4-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:2.4cqw;padding:2cqw 3.6cqw 8.4cqw;background:#FFFFFF}
.s4-plus{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:8cqw;height:8cqw;border-radius:50%;background:#E9E9EB;color:#8E8E93}
.s4-plus svg{width:4cqw;height:4cqw}
.s4-field{flex:1;display:flex;align-items:center;justify-content:space-between;height:8.6cqw;padding:0 2cqw 0 3.6cqw;border-radius:4.3cqw;border:.3cqw solid #D1D1D6;font-size:3.4cqw;color:#A1A1A6}
.s4-field svg{width:4.8cqw;height:4.8cqw;color:#8E8E93}

.is-live .s4-body>*{animation:s4-in 10s cubic-bezier(.34,1.3,.64,1) infinite both}
.is-live .s4-day{animation-name:s4-day}
.is-live .s4-m1{animation-name:s4-m1}
.is-live .s4-t1{animation-name:s4-t1}
.is-live .s4-t2{animation-name:s4-t2}
.is-live .s4-slot{animation:none}
.is-live .s4-m2{animation:s4-m2 10s cubic-bezier(.34,1.3,.64,1) infinite both}
.is-live .s4-typing{animation:s4-typing 10s ease infinite both}
.is-live .s4-typing i{animation:dot 1.1s ease-in-out infinite}
.is-live .s4-typing i:nth-child(2){animation-delay:.15s}
.is-live .s4-typing i:nth-child(3){animation-delay:.3s}
.is-live .s4-quick{animation-name:s4-quick}
.is-live .s4-m3{animation-name:s4-m3}
.is-live .s4-m4{animation-name:s4-m4}
.is-live .s4-t1 .s4-ic{animation:s4-check1 10s ease infinite both}
.is-live .s4-t2 .s4-ic{animation:s4-check2 10s ease infinite both}
.is-live .s4-status em:nth-child(1){animation:s4-st1 10s steps(1,end) infinite both}
.is-live .s4-status em:nth-child(2){animation:s4-st2 10s steps(1,end) infinite both}
.is-live .s4-status em:nth-child(3){animation:s4-st3 10s steps(1,end) infinite both}
@keyframes s4-day{0%{opacity:0}3%,95%{opacity:1}100%{opacity:0}}
@keyframes s4-m1{0%,4%{opacity:0;transform:translate3d(4cqw,3cqw,0) scale(.94)}9%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s4-t1{0%,13%{opacity:0;transform:scale(.9)}17%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s4-t2{0%,23%{opacity:0;transform:scale(.9)}27%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s4-typing{0%,33%{opacity:0}35%,43%{opacity:1}44%,100%{opacity:0}}
@keyframes s4-m2{0%,43%{opacity:0;transform:translate3d(-4cqw,3cqw,0) scale(.94)}48%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s4-quick{0%,49%{opacity:0;transform:translate3d(0,2cqw,0)}53%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s4-m3{0%,59%{opacity:0;transform:translate3d(4cqw,3cqw,0) scale(.94)}64%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s4-m4{0%,71%{opacity:0;transform:translate3d(-4cqw,3cqw,0) scale(.94)}76%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s4-check1{0%,19%{background:#E5E5EA;color:#E5E5EA}21%,100%{background:#B6FF00;color:#1C2600}}
@keyframes s4-check2{0%,29%{background:#E5E5EA;color:#E5E5EA}31%,100%{background:#B6FF00;color:#1C2600}}
@keyframes s4-st1{0%{opacity:1}12%{opacity:0}46%{opacity:1}}
@keyframes s4-st2{0%{opacity:0}12%{opacity:1}34%{opacity:0}}
@keyframes s4-st3{0%{opacity:0}34%{opacity:1}46%{opacity:0}}
@keyframes s4-in{0%{opacity:0}100%{opacity:1}}

/* ---------- Celular: cada servicio con su propio iPhone ---------- */
@media (max-width:980px){
  .ss-grid{grid-template-columns:1fr}
  .ss-stage{display:none}
  .ss-ch,.ss-intro+.ss-ch{min-height:0;display:block;padding:0 0 clamp(56px,10vw,88px)}
  .ss-ch-in{max-width:none}
  .ss-ch-device{display:flex;justify-content:center;margin-top:32px}
  .ss-ch-device .device{height:min(620px,74svh)}
  .ss-ch h2{font-size:clamp(40px,11vw,64px)}
  .ss-list li{font-size:16.5px}
  .ss-actions .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .ss-screen,.ss-screen *{animation:none !important}
  .ss-screen{transition:none}
  .s3-sheet{transform:none}
}