:root{--signal:#C7F36B;--ease:cubic-bezier(.22,1,.36,1);--f:"Archivo",system-ui,sans-serif;--m:"Martian Mono",ui-monospace,Menlo,Consolas,monospace;--tb:64px}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{overflow-x:clip;font-family:var(--f);background:#0C0C0D;color:#ECEAE4;-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit}
.skip{position:absolute;left:-999px;top:8px;background:#C7F36B;color:#151515;padding:8px 14px;border-radius:8px;z-index:99}
.skip:focus{left:8px}
.mono{font-family:var(--m);letter-spacing:.08em;text-transform:uppercase;font-size:11px}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(18px,3.4vw,44px)}

/* cabecera */
.eh{padding:16px 0;border-bottom:1px solid rgba(236,234,228,.12)}
.eh .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:30px;height:30px}
.brand b{font:800 15px var(--f);font-stretch:125%;letter-spacing:.02em}
.eh nav{display:flex;align-items:center;gap:18px}
.eh nav a{text-decoration:none;color:#8D8C86}
.eh nav a:hover{color:#ECEAE4}
.chip{background:#C7F36B;color:#151515!important;border-radius:99px;padding:9px 18px;font:700 13px var(--f)!important;letter-spacing:0!important;text-transform:none!important}

/* introduccion */
.intro{position:relative;overflow:hidden;padding:clamp(60px,9vw,110px) 0 clamp(40px,6vw,70px)}
.intro .aur span{background:#C7F36B}
.intro h1{font:800 clamp(38px,7vw,92px)/.95 var(--f);font-stretch:122%;letter-spacing:-.04em;max-width:15ch;position:relative}
.intro h1 em{font-style:normal;color:#C7F36B}
.intro p{max-width:56ch;margin-top:22px;color:#b9b8b2;font-size:clamp(16px,1.6vw,19px);position:relative}
.intro .mono{color:#8D8C86;margin-bottom:22px;position:relative}

/* fondo aurora (sirve a la introduccion y a cada demo) */
.aur{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.aur span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.4;animation:drift 18s ease-in-out infinite alternate}
.aur span:nth-child(1){width:46vw;height:46vw;left:-8vw;top:-14vw}
.aur span:nth-child(2){width:40vw;height:40vw;right:-10vw;top:6vh;animation-duration:23s}
.aur span:nth-child(3){width:34vw;height:34vw;left:30vw;bottom:-18vw;animation-duration:27s;opacity:.28}
@keyframes drift{to{transform:translate(9vw,7vh) scale(1.2)}}
.aur::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,var(--bg,#0C0C0D) 88%)}

/* selector de rubro (fijo arriba al bajar) */
.sel{position:sticky;top:0;z-index:40;background:rgba(12,12,13,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(236,234,228,.12);border-bottom:1px solid rgba(236,234,228,.12)}
.sel .wrap{display:flex;align-items:center;gap:18px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.sel .mono{color:#8D8C86}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{border:1px solid rgba(236,234,228,.18);background:transparent;color:#ECEAE4;font:600 14px var(--f);padding:9px 18px;border-radius:99px;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.tabs button:hover{border-color:#ECEAE4}
.tabs button[aria-selected=true]{background:var(--ac,#C7F36B);color:var(--acink,#151515);border-color:transparent}
.tabs button:focus-visible,.bd:focus-visible,.bs:focus-visible,a:focus-visible,.acc>div:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* paletas de cada negocio ficticio */
.demo{--bg:#1A110C;--ac:#E0A458;--ac2:#8A4F1E;--acink:#1A110C;--fg:#F4ECE0;--mu:#B3A18F;background:var(--bg);color:var(--fg);transition:background .5s}
.demo[data-r=dental]{--bg:#F3F8F8;--ac:#0B7F86;--ac2:#2340FF;--acink:#FFFFFF;--fg:#0B2530;--mu:#4F6B73}
.demo[data-r=vina]{--bg:#17080F;--ac:#E5587C;--ac2:#7A1F3A;--acink:#17080F;--fg:#F8E9EE;--mu:#B58E9B}
.bg2{background:color-mix(in srgb,var(--fg) 5%,var(--bg))}
.demo .aur span:nth-child(1){background:var(--ac)}
.demo .aur span:nth-child(2){background:var(--ac2);opacity:.55}
.demo .aur span:nth-child(3){background:var(--ac);opacity:.22}
.demo .aur{--bg:inherit}

/* botones */
.row{display:flex;gap:14px;flex-wrap:wrap}
.bd{position:relative;display:inline-flex;align-items:center;overflow:hidden;border:1px solid color-mix(in srgb,var(--fg,#ECEAE4) 28%,transparent);border-radius:99px;padding:16px 30px 16px 40px;font:600 15px var(--f);color:var(--fg,#ECEAE4);background:transparent;cursor:pointer;text-decoration:none}
.bd .dot{position:absolute;left:20px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--ac,#C7F36B);transition:all .55s var(--ease)}
.bd .t{transition:transform .45s var(--ease),opacity .3s;display:block}
.bd .t2{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--acink,#151515);font-weight:700;transform:translateX(30px);opacity:0;transition:transform .45s var(--ease),opacity .3s}
.bd:hover .dot,.bd:focus-visible .dot{left:0;top:0;width:100%;height:100%;margin:0;border-radius:0}
.bd:hover .t,.bd:focus-visible .t{transform:translateX(-30px);opacity:0}
.bd:hover .t2,.bd:focus-visible .t2{transform:none;opacity:1}
.bs{display:inline-block;text-decoration:none;border-radius:99px;padding:16px 30px;background:var(--ac,#C7F36B);color:var(--acink,#151515);font:700 15px var(--f);border:0;cursor:pointer;position:relative;overflow:hidden}
.bs::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-18deg);animation:shine 3.2s infinite}
@keyframes shine{0%,55%{left:-60%}100%{left:140%}}

/* demo: portada */
.d-hero{position:relative;overflow:hidden;min-height:calc(100vh - var(--tb));display:grid;align-items:center;padding:clamp(60px,9vw,110px) 0;view-transition-name:dhero}
.dw{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 clamp(18px,3.4vw,44px);width:100%}
.dtag{color:var(--mu);margin-bottom:22px}
.dh{font:800 clamp(36px,7vw,96px)/.95 var(--f);font-stretch:122%;letter-spacing:-.04em;max-width:14ch}
.rot{display:inline-grid;vertical-align:bottom;overflow:hidden;color:var(--ac)}
.rot span{grid-area:1/1;transform:translateY(105%);opacity:0;transition:transform .7s var(--ease),opacity .5s}
.rot span.on{transform:none;opacity:1}
.rot span.out{transform:translateY(-105%);opacity:0}
.dsub{max-width:50ch;margin:26px 0 34px;color:var(--mu);font-size:clamp(16px,1.6vw,19px)}
::view-transition-old(dhero){animation:.3s ease both vt-out}
::view-transition-new(dhero){animation:.6s var(--ease) both vt-in}
@keyframes vt-out{to{opacity:0;filter:blur(10px);transform:scale(.97)}}
@keyframes vt-in{from{opacity:0;filter:blur(10px);transform:translateY(16px) scale(1.02)}}

/* demo: marco que se expande */
.d-exp{height:230vh}
.d-exp .st{position:sticky;top:var(--tb);height:calc(100vh - var(--tb));display:grid;place-items:center;overflow:hidden}
.d-exp .tt{position:absolute;top:7vh;text-align:center;width:100%;padding:0 20px;opacity:calc(1 - var(--p,0) * 2.4);transform:translateY(calc(var(--p,0) * -30px))}
.d-exp .tt .mono{color:var(--mu)}
.d-exp .tt h3{font:800 clamp(28px,5vw,60px)/.98 var(--f);font-stretch:118%;letter-spacing:-.035em;margin-top:12px}
.d-exp .fr{width:calc(34% + var(--p,0) * 66%);height:calc(44vh + var(--p,0) * 56vh);border-radius:calc(28px * (1 - var(--p,0)));margin-top:calc(16vh * (1 - var(--p,0)));position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--fg) 16%,transparent)}
.d-exp .scr{position:absolute;inset:0;background:radial-gradient(60% 70% at 25% 20%,color-mix(in srgb,var(--ac) 70%,transparent),transparent 60%),radial-gradient(50% 60% at 85% 80%,color-mix(in srgb,var(--ac2) 85%,transparent),transparent 60%),var(--bg);display:grid;place-items:center;text-align:center;padding:24px}
.d-exp .scr b{display:block;font:800 clamp(28px,6.4vw,92px)/.95 var(--f);font-stretch:122%;letter-spacing:-.04em;transform:scale(calc(.7 + var(--p,0) * .3))}
.d-exp .scr small{display:block;margin-top:14px;font:500 12px var(--m);letter-spacing:.1em;text-transform:uppercase;color:var(--mu);opacity:var(--p,0)}

/* demo: tarjetas con foco de luz */
.pad{padding:clamp(70px,10vw,130px) 0}
.d-h{font:800 clamp(28px,4.6vw,56px)/.98 var(--f);font-stretch:118%;letter-spacing:-.035em;margin:12px 0 34px;max-width:18ch}
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(170px,auto);gap:14px}
.card{--mx:50%;--my:50%;position:relative;border-radius:20px;background:color-mix(in srgb,var(--fg) 5%,var(--bg));padding:26px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(260px circle at var(--mx) var(--my),var(--ac),transparent 70%),color-mix(in srgb,var(--fg) 16%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1}
.card::after{content:"";position:absolute;inset:0;background:radial-gradient(380px circle at var(--mx) var(--my),color-mix(in srgb,var(--ac) 16%,transparent),transparent 60%);opacity:0;transition:opacity .4s;z-index:-1}
.card:hover::after{opacity:1}
.card h4{font:700 22px/1.1 var(--f);letter-spacing:-.02em;margin-bottom:6px}
.card p{color:var(--mu);font-size:14.5px;max-width:36ch}
.card .big{font:800 clamp(52px,7vw,96px)/.9 var(--f);font-stretch:120%;letter-spacing:-.04em;color:var(--ac);margin-bottom:auto}
.c1{grid-column:span 3;grid-row:span 2}.c2,.c3{grid-column:span 3}.c4{grid-column:span 6}

/* demo: acordeon */
.acc{display:flex;gap:12px;height:min(62vh,500px)}
.acc>div{position:relative;flex:1;border-radius:20px;overflow:hidden;cursor:pointer;transition:flex .7s var(--ease);display:flex;align-items:flex-end;padding:22px;outline:0}
.acc>div:hover,.acc>div:focus{flex:5}
.acc>div::before{content:"";position:absolute;inset:0;background:var(--g);transition:transform .9s var(--ease)}
.acc>div:hover::before,.acc>div:focus::before{transform:scale(1.08)}
.acc>div::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.72),transparent 58%)}
.acc b{position:relative;z-index:1;color:#fff;font:700 20px var(--f);white-space:nowrap}
.acc em{position:absolute;z-index:1;top:18px;left:22px;font:500 11px var(--m);color:rgba(255,255,255,.78);letter-spacing:.08em;font-style:normal}
.acc small{display:block;position:relative;z-index:1;color:rgba(255,255,255,.85);font-size:13px;opacity:0;max-height:0;transition:opacity .5s .15s,max-height .5s;margin-top:4px;white-space:nowrap}
.acc>div:hover small,.acc>div:focus small{opacity:1;max-height:24px}
.acc>div:not(:hover):not(:focus) b{writing-mode:vertical-rl;transform:rotate(180deg);align-self:flex-end}

/* demo: texto que se ilumina y cifras */
.rev{font:700 clamp(26px,4.6vw,58px)/1.08 var(--f);letter-spacing:-.03em;max-width:24ch}
.rev span{opacity:.2;transition:opacity .25s}
.rev span.on{opacity:1}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:70px}
.stats div{border-top:1px solid color-mix(in srgb,var(--fg) 20%,transparent);padding-top:18px}
.stats b{display:block;font:800 clamp(40px,6vw,76px)/1 var(--f);font-stretch:120%;letter-spacing:-.04em;color:var(--ac)}
.stats span{color:var(--mu);font-size:14px}
.stats small{display:block;margin-top:26px;color:var(--mu);font-size:12px;grid-column:1/-1}

/* demo: cierre con haz de luz */
@property --a{syntax:"<angle>";initial-value:0deg;inherits:false}
.beam{position:relative;border-radius:26px;padding:clamp(34px,6vw,76px);text-align:center;background:color-mix(in srgb,var(--fg) 5%,var(--bg));isolation:isolate}
.beam::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--a),transparent 0 70%,var(--ac) 90%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 5s linear infinite;z-index:-1}
@keyframes spin{to{--a:360deg}}
.beam h3{font:800 clamp(28px,4.6vw,56px)/.98 var(--f);font-stretch:118%;letter-spacing:-.035em;margin-bottom:14px}
.beam p{color:var(--mu);max-width:48ch;margin:0 auto 28px}
.beam .row{justify-content:center}

.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}

/* cierre de la pagina */
.final{padding:clamp(60px,8vw,100px) 0;text-align:center;background:#0C0C0D}
.final h2{font:800 clamp(30px,5vw,60px)/.98 var(--f);font-stretch:118%;letter-spacing:-.035em;margin-bottom:16px}
.final p{color:#b9b8b2;max-width:56ch;margin:0 auto 28px}
.final .bs{--ac:#C7F36B;--acink:#151515}
.note{padding:26px 0 50px;color:#8D8C86;font-size:13px;text-align:center;background:#0C0C0D}
.note a{color:#ECEAE4}
.foot{padding:26px 0 40px;border-top:1px solid rgba(236,234,228,.12);color:#8D8C86;font-size:13px}
.foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

@media (max-width:820px){
 .eh nav a:not(.chip){display:none}
 .bento{grid-template-columns:1fr 1fr}.c1,.c2,.c3,.c4{grid-column:span 2;grid-row:auto}
 .acc{flex-direction:column;height:auto}.acc>div{flex:none;height:64px}.acc>div:hover,.acc>div:focus{flex:none;height:220px}
 .acc>div:not(:hover):not(:focus) b{writing-mode:initial;transform:none;align-self:auto}
 .stats{grid-template-columns:1fr}
 .d-exp .fr{width:calc(70% + var(--p,0) * 30%)}
 .sel .mono{display:none}
 .sel .wrap{flex-wrap:nowrap;padding-top:10px;padding-bottom:10px}
 .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -2px;padding:2px}
 .tabs::-webkit-scrollbar{display:none}
 .tabs button{white-space:nowrap;flex:none}
 .acc em{left:auto;right:22px;top:22px}
 :root{--tb:62px}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .rv{opacity:1;transform:none}.rot span{opacity:0}.rot span.on{opacity:1;transform:none}.rev span{opacity:1}
}

/* ===== variantes por rubro: cada demo se ve y se mueve distinto ===== */
#dnext{display:block;height:0;scroll-margin-top:var(--tb)}

/* clínica dental: clara, redondeada, con portada dividida */
.demo[data-r=dental] :is(.dh,.d-h,.rev,.beam h3,.stats b,.steps h4,.t3 h4){font-weight:700;font-stretch:100%;letter-spacing:-.03em}
.demo[data-r=dental] .aur span{opacity:.2}
.demo[data-r=dental] .aur span:nth-child(2){opacity:.18}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,70px);align-items:center}
.split .dh{max-width:12ch}
.sp-r{position:relative;height:min(460px,60vh);--px:0;--py:0}
.fc{position:absolute;transform:translate(calc(var(--px) * var(--d) * 1px),calc(var(--py) * var(--d) * 1px));transition:transform .25s ease-out}
.fc>div{background:#fff;color:#0B2530;border-radius:18px;padding:18px 20px;box-shadow:0 30px 50px -24px rgba(11,37,48,.4);display:grid;gap:5px;animation:bob 6s ease-in-out infinite alternate}
.f1{left:2%;top:6%}.f2{right:0;top:36%}.f3{left:10%;bottom:4%;max-width:260px}
.f2>div{animation-delay:-2s}.f3>div{animation-delay:-4s}
@keyframes bob{to{transform:translateY(-10px)}}
.fc small{font:500 11px var(--m);letter-spacing:.06em;color:#4F6B73;text-transform:uppercase}
.fc b{font:700 20px var(--f)}
.fc .ok{color:#0a7a52;font-size:13px;font-weight:600}
.fc i{font-style:normal;background:#E6F4F4;border-radius:14px;padding:8px 12px;font-size:14px}
.fc em{font-style:normal;background:#0B7F86;color:#fff;border-radius:14px;padding:8px 12px;font-size:14px;justify-self:end}
.mqs{padding:26px 0;border-block:1px solid color-mix(in srgb,var(--fg) 14%,transparent)}
.mq{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mq div{display:flex;gap:14px;width:max-content;animation:mq 36s linear infinite}
.mq:hover div{animation-play-state:paused}
.mq span{white-space:nowrap;border:1px solid color-mix(in srgb,var(--fg) 18%,transparent);border-radius:99px;padding:12px 24px;font:600 16px var(--f);background:color-mix(in srgb,var(--fg) 4%,var(--bg))}
@keyframes mq{to{transform:translateX(-50%)}}
.two{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,80px);align-items:center}
.steps{list-style:none;padding:0;margin:30px 0 0;position:relative;display:grid;gap:34px;--sp:0}
.steps::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:2px;background:color-mix(in srgb,var(--fg) 14%,transparent)}
.steps::after{content:"";position:absolute;left:19px;top:8px;width:2px;height:calc((100% - 16px) * var(--sp));background:var(--ac)}
.steps li{position:relative;padding-left:64px;opacity:.35;transition:opacity .4s}
.steps li.on{opacity:1}
.steps li b{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:2px solid color-mix(in srgb,var(--fg) 22%,transparent);font:700 15px var(--f);transition:all .4s;z-index:1}
.steps li.on b{background:var(--ac);color:var(--acink);border-color:var(--ac)}
.steps h4{font:700 22px/1.15 var(--f);margin-bottom:4px}
.steps p{color:var(--mu)}
.tl{perspective:900px;display:grid;place-items:center}
.t3{--rx:0deg;--ry:0deg;--gx:50%;--gy:50%;width:min(400px,100%);aspect-ratio:4/5;border-radius:26px;background:linear-gradient(160deg,#0f3a46,#06161B);border:1px solid rgba(255,255,255,.14);transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .25s ease-out;position:relative;padding:28px;color:#E8F6F5;box-shadow:0 50px 60px -34px rgba(6,22,27,.7);display:flex;flex-direction:column;justify-content:space-between}
.t3::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(260px circle at var(--gx) var(--gy),rgba(255,255,255,.16),transparent 60%);pointer-events:none}
.t3 .a{transform:translateZ(40px);font:500 11px var(--m);letter-spacing:.08em;color:#8FB0AE}
.t3 .b{transform:translateZ(90px);font:800 clamp(64px,10vw,110px)/.9 var(--f);letter-spacing:-.05em;color:#5EE0D0}
.t3 .c{transform:translateZ(60px)}
.t3 .c h4{font:700 22px/1.1 var(--f);margin-bottom:6px}
.t3 .c p{color:#8FB0AE;font-size:14px;margin-bottom:16px}
.t3 .pill{display:inline-block;transform:translateZ(110px);background:#5EE0D0;color:#06161B;font:700 14px var(--f);border-radius:99px;padding:11px 22px}

/* viña: tipografía de revista, portada centrada y galería horizontal */
.demo[data-r=vina] :is(.dh,.d-h,.rev,.beam h3,.d-exp .tt h3,.d-exp .scr b,.stats b,.wc h4){font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-stretch:100%;letter-spacing:-.01em}
.demo[data-r=vina] .dh{font-size:clamp(40px,8vw,108px);line-height:1}
.demo[data-r=vina] .rot{font-style:italic}
.d-center .dw{text-align:center}
.d-center .dh{margin:0 auto;max-width:15ch}
.d-center .dsub{margin-left:auto;margin-right:auto}
.d-center .row{justify-content:center}
.hs{--hp:0;--shift:0px;height:300vh}
.hs .st{position:sticky;top:var(--tb);height:calc(100vh - var(--tb));overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:10px}
.hs .hh{width:100%}
.hs .trk{display:flex;gap:20px;padding:0 clamp(18px,3.4vw,44px);width:max-content;transform:translateX(calc(var(--hp) * var(--shift)));will-change:transform}
.wc{flex:none;width:min(72vw,340px);height:min(52vh,430px);border-radius:22px;background:var(--g);position:relative;overflow:hidden;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff}
.wc::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent 60%)}
.wc em{position:absolute;z-index:1;top:20px;left:24px;font:500 11px var(--m);letter-spacing:.08em;font-style:normal;color:rgba(255,255,255,.8)}
.wc h4,.wc p{position:relative;z-index:1}
.wc h4{font-size:32px;line-height:1.02;margin-bottom:6px}
.wc p{color:rgba(255,255,255,.85);font-size:14px}

@media (max-width:820px){
 .split,.two{grid-template-columns:1fr}
 .sp-r{height:340px}
 .hs .st{justify-content:flex-start;padding-top:24px}
}
@media (prefers-reduced-motion:reduce){
 .hs{height:auto!important}
 .hs .st{position:static;height:auto}
 .hs .trk{transform:none;overflow-x:auto;width:auto}
 .fc>div{animation:none}
}