html{background:#070707}
body.admin-bar .topbar{top:48px!important}
.sumak-main{margin:44px 0 40px;padding:48px 56px;border-radius:40px;color:#E6E6E6;font-size:16px;line-height:1.65;min-height:50vh}
.sumak-title{margin:0 0 24px;font-family:'Inter Tight',sans-serif;font-weight:300;font-size:52px;letter-spacing:-.035em;line-height:1.05;color:#F9F9F9}
.sumak-content a{color:#FF9A3A}
.sumak-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:0 0 36px;color:#6E6E6E;font-size:12px}
.sumak-foot a{color:#8C8C8C}
/* WooCommerce en oscuro */
.sumak-shop .woocommerce-products-header__title,.sumak-shop h1,.sumak-shop h2{font-family:'Inter Tight',sans-serif;font-weight:400;letter-spacing:-.02em;color:#F9F9F9}
.sumak-shop ul.products li.product{background:rgba(255,255,255,.04);border-radius:24px;padding:14px!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.sumak-shop ul.products li.product img{border-radius:16px}
.sumak-shop .price,.sumak-shop .amount{color:#FF7A00!important;font-family:'JetBrains Mono',monospace}
.sumak-shop .button,.woocommerce .button,.woocommerce button.button,.woocommerce a.button,.woocommerce input.button,.woocommerce #respond input#submit{background:#FF7A00!important;color:#0A0A0A!important;border-radius:999px!important;padding:14px 24px!important;font-weight:500!important;border:none!important}
.woocommerce input.input-text,.woocommerce textarea,.woocommerce select,.select2-container .select2-selection{background:rgba(0,0,0,.4)!important;color:#F9F9F9!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:12px!important;padding:10px 14px!important}
.woocommerce table.shop_table{border-color:rgba(255,255,255,.12)!important;border-radius:16px}
.woocommerce table.shop_table td,.woocommerce table.shop_table th{border-color:rgba(255,255,255,.08)!important}
.woocommerce-info,.woocommerce-message,.woocommerce-error{background:rgba(255,255,255,.05)!important;color:#E6E6E6!important;border-top-color:#FF7A00!important}
@media (max-width:900px){.sumak-main{padding:28px 20px;border-radius:28px}.sumak-title{font-size:36px}}
/* ---- Carrito y pago ---- */
.ckhead{margin-top:44px}
.ckeyebrow{display:flex;align-items:center;gap:14px;margin:0 0 18px;font:500 12px 'JetBrains Mono',monospace;letter-spacing:.18em;color:#BDBDBD}
.ckeyebrow span{width:32px;height:1px;background:#FF7A00}
.ckh1{margin:0;font-family:'Inter Tight',sans-serif;font-weight:300;font-size:72px;line-height:.95;letter-spacing:-.045em;color:#F9F9F9}
.ckh1 b{font-weight:600;color:#FF7A00}
.cksteps{display:flex;gap:8px;margin-top:28px;flex-wrap:wrap}
.ckstep{display:flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;border-radius:999px;font:500 14px Inter,sans-serif;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#8C8C8C}
.ckstep b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 12px 'JetBrains Mono',monospace;background:rgba(255,255,255,.08);color:#8C8C8C}
.ckstep.on{background:rgba(255,122,0,.14);box-shadow:inset 0 0 0 1px rgba(255,122,0,.55);color:#F9F9F9}.ckstep.on b{background:#F9F9F9;color:#0A0A0A}
.ckstep.past b{background:#FF7A00;color:#0A0A0A}
.sumak-ck{margin:24px 0 40px;padding:0;background:none;color:#E6E6E6}
.sumak-ck .wp-block-woocommerce-cart,.sumak-ck .wp-block-woocommerce-checkout,.sumak-ck .woocommerce{color:#E6E6E6}
.sumak-ck .wc-block-components-sidebar-layout{gap:24px}
.sumak-ck .wc-block-components-main,.sumak-ck .wc-block-components-sidebar{padding:32px!important;border-radius:32px;background:radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.12),rgba(255,255,255,0) 55%),linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 60%,rgba(255,122,0,.05));box-shadow:inset 0 1px 1px rgba(255,255,255,.25),inset 0 0 0 1px rgba(255,255,255,.1),0 30px 70px -24px rgba(0,0,0,.75);box-sizing:border-box}
.sumak-ck h1,.sumak-ck h2,.sumak-ck h3,.sumak-ck .wc-block-components-title,.sumak-ck .wc-block-components-checkout-step__title{font-family:'Inter Tight',sans-serif!important;color:#F9F9F9!important;letter-spacing:-.01em}
.sumak-ck .wc-block-components-product-name{color:#F9F9F9!important;font-family:'Inter Tight',sans-serif;font-size:18px;font-weight:500;text-decoration:none}
.sumak-ck .wc-block-components-product-price,.sumak-ck .wc-block-formatted-money-amount,.sumak-ck .amount{color:#FF7A00!important;font-family:'JetBrains Mono',monospace}
.sumak-ck .wc-block-cart-item__image img{border-radius:18px}
.sumak-ck table,.sumak-ck td,.sumak-ck th,.sumak-ck .wc-block-cart-items__row{border-color:rgba(255,255,255,.08)!important}
.sumak-ck .wc-block-components-totals-item__label,.sumak-ck .wc-block-components-totals-item{color:#BDBDBD}
.sumak-ck .wc-block-components-totals-footer-item .wc-block-components-totals-item__label{color:#F9F9F9;font-family:'Inter Tight',sans-serif;font-size:20px}
.sumak-ck .wc-block-components-quantity-selector{border-radius:999px!important;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1)!important}
.sumak-ck .wc-block-components-quantity-selector input,.sumak-ck .wc-block-components-quantity-selector button{color:#F9F9F9!important;background:transparent!important}
.sumak-ck .wc-block-cart-item__remove-link{color:#8C8C8C!important}
.sumak-ck .wc-block-components-button:not(.is-link),.sumak-ck .wc-block-cart__submit-button,.sumak-ck .wc-block-components-checkout-place-order-button{background:#FF7A00!important;color:#0A0A0A!important;border:none!important;border-radius:999px!important;min-height:58px;font:600 16px Inter,sans-serif!important;box-shadow:0 0 30px -6px rgba(255,122,0,.6)}
.sumak-ck .wc-block-components-text-input input,.sumak-ck .wc-block-components-combobox input,.sumak-ck .wc-blocks-components-select select,.sumak-ck textarea{background:rgba(0,0,0,.4)!important;color:#F9F9F9!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:16px!important}
.sumak-ck .wc-block-components-text-input label,.sumak-ck .wc-block-components-combobox label{color:#8C8C8C!important}
.sumak-ck .wc-block-components-radio-control__option,.sumak-ck .wc-block-components-radio-control-accordion-option{border-radius:20px!important;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);margin-bottom:8px;color:#F9F9F9}
.sumak-ck .wc-block-components-radio-control__option-checked,.sumak-ck .wc-block-components-radio-control-accordion-option--checked-option-highlighted{box-shadow:inset 0 0 0 1px rgba(255,122,0,.55)!important;background:rgba(255,122,0,.1)}
.sumak-ck .wc-block-components-radio-control__input:checked{border-color:#FF7A00!important}
.sumak-ck .wc-block-components-radio-control__input:checked:before{background:#FF7A00!important}
.sumak-ck a{color:#FF9A3A}
.sumak-ck .woocommerce-order-downloads,.sumak-ck .woocommerce-order-details,.sumak-ck .woocommerce-customer-details,.sumak-ck .woocommerce-thankyou-order-received,.sumak-ck .woocommerce-order-overview{padding:28px;border-radius:28px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);margin-bottom:20px;list-style:none}
.sumak-ck .woocommerce-MyAccount-downloads-file,.sumak-ck .woocommerce-order-downloads .button{display:inline-flex;padding:12px 18px;border-radius:999px;background:#FF7A00!important;color:#0A0A0A!important;text-decoration:none}
@media (max-width:900px){.ckh1{font-size:44px}.sumak-ck .wc-block-components-main,.sumak-ck .wc-block-components-sidebar{padding:20px!important;border-radius:24px}}
/* ===== Ajustes de celular ===== */
@media (max-width:900px){
  .topbar #menu.open .navpill,.topbar .navpill{display:none!important}
  .topbar #menu.open .navlink.feat::before,.topbar #menu.open .navlink.feat::after{display:none!important}
  .topbar #menu.open .navlink.feat{background:rgba(255,122,0,.16)!important;box-shadow:inset 0 0 0 1px rgba(255,122,0,.5)!important;color:#FF9A3A!important}
  .topbar #menu.open .navlink[aria-current="page"]{color:#FF7A00!important}
  .mphoto{height:220px!important}
  /* Beats */
  .tools>div[role="group"],.ltabs{flex-wrap:nowrap!important;overflow-x:auto;max-width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tools>div[role="group"]::-webkit-scrollbar,.ltabs::-webkit-scrollbar{display:none}
  .tools>div[role="group"]{width:100%;box-sizing:border-box}
  .gchip,.ltab{flex:none;white-space:nowrap}
  .cover,.pcov{aspect-ratio:16/10!important}
  .dock{gap:10px!important;padding:8px 10px 8px 8px!important;bottom:10px!important}
  .dock>span:last-of-type{display:none}
  .dock .lic{padding:10px 14px!important;font-size:13px!important}
  .dock .vinyl{width:46px!important;height:46px!important}
  .dock .dplay{width:46px!important;height:46px!important}
  .meta{flex-wrap:wrap}
  .meta .lic{flex:none}
}
/* menú celular v1.2.1 */
@media (max-width:900px){
  .menuopen .topbar #menu{display:flex!important;flex-direction:column;gap:2px;padding:4px 0 2px}
  .topbar #menu .navlink,.menuopen .topbar #menu .navlink{padding:11px 14px!important;font-size:15px!important;border-radius:12px!important;opacity:1;animation:none}
  .topbar .navpill{display:none!important}
}

.bgroot{overflow:clip!important}
@supports not (overflow:clip){.bgroot{overflow:hidden!important}}

/* espaciado v1.2.4 */
@media (max-width:900px){
  .wrap>section{padding-top:40px!important}
  .wrap>section.hero{margin-top:24px!important;padding:40px 22px!important;gap:32px!important}
  .wrap .glass.pad{padding:32px 24px!important;border-radius:28px!important;gap:24px!important}
  .wrap .glass.pad>button,.wrap .glass.pad>a{width:100%;justify-content:center}
  .wrap>footer{padding-top:40px!important}
  .wrap>footer .fsep{margin:0 0 28px!important}
  .ctas{display:flex!important;flex-direction:column;gap:12px!important;width:100%}
  .ctas>*{width:100%!important;box-sizing:border-box;justify-content:center!important;text-align:center;display:inline-flex!important;align-items:center;min-height:58px;padding:0 24px!important;font-size:16px!important}
}

/* scroll v1.2.6: el fondo ya no es una caja con scroll propio */
.bgroot{overflow:visible!important}
.orbwrap{overflow:hidden!important}
.wrap{overflow-x:clip}
/* barra fija v1.2.9 */
@media (max-width:900px){
  .wrap>.topbar{position:fixed!important;left:14px!important;right:14px!important;top:calc(10px + env(safe-area-inset-top))!important;z-index:50!important;margin:0!important;flex-wrap:nowrap!important}
  .wrap>.topbar>a:first-child{min-width:0;flex:1 1 auto;overflow:hidden}
  .wrap>.topbar>a:first-child span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wrap>.topbar .topactions{flex:none}
  .menuopen .wrap>.topbar,.wrap>.topbar:has(#menu.open){flex-wrap:wrap!important}
  .wrap{padding-top:calc(var(--hb,66px) + 34px)!important}
  body.admin-bar .wrap>.topbar{top:56px!important}
}
@media (max-width:370px){.wrap>.topbar>a:first-child span{font-size:12px!important;letter-spacing:.1em!important}}
@media (max-width:900px){
  .topbar>a[aria-label]{flex:1 1 0!important;min-width:0!important;overflow:hidden}
  .topbar>a[aria-label] span{white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}
  .topbar>a[aria-label] img{flex:none}
  .topbar .topactions{flex:none!important;order:2}
  .topbar #menu{order:3}
}@media (max-width:430px){.topbar>a[aria-label]{gap:9px!important}.topbar>a[aria-label] span{font-size:12.5px!important;letter-spacing:.08em!important}.topbar .topactions{gap:6px!important}.topbar .topactions>*{width:40px!important;height:40px!important}}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,a,.btn{touch-action:manipulation}
@media (max-width:900px){.wrap>section:first-of-type,.wrap>.topbar+section,.wrap>.topbar+div{margin-top:0!important}}
/* v1.3.1: capas fijas del tamaño exacto de la pantalla (iOS) */
.grainlayer{inset:0!important;transform:none!important;animation:none!important;background-size:240px!important}

.orbwrap{contain:paint}

/* filtros en una sola fila que se desliza, con pista visual */
@media (max-width:900px){
  .ltabs,.tools>div[role="group"]{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden;width:100%!important;box-sizing:border-box;scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 78%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 78%,transparent 100%);padding-right:40px!important}
  .ltabs.fin,.tools>div[role="group"].fin{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 100%)}
  .ltab,.gchip{flex:none!important;scroll-snap-align:start;padding:0 16px!important;min-height:42px!important;font-size:14px!important}
}
/* cristal de la barra en celular, igual que en computadora */
@media (max-width:900px){
  .wrap>.topbar{background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03) 60%,rgba(255,122,0,.06))!important;-webkit-backdrop-filter:blur(26px) saturate(1.8) brightness(1.03)!important;backdrop-filter:blur(26px) saturate(1.8) brightness(1.03)!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.12),0 18px 40px -18px rgba(0,0,0,.8)!important}
  .wrap>.topbar::before{display:block!important;border-radius:inherit!important}
}
/* cristal acanalado (rayas) del fondo del inicio también en celular */
@media (max-width:900px){
  .hero .flutes{display:flex!important}
  .hero .fluteimg{filter:blur(.4px) saturate(1.15) brightness(1.05)!important}
}

/* cristal acanalado del celular: a la derecha y con rayas anchas como en la web */
@keyframes flutedriftm{0%{translate:-3cqw 0}50%{translate:.8cqw -1cqh}100%{translate:3cqw 0}}
@media (max-width:900px){
  .hero .flutes{left:44cqw!important;width:56cqw!important}
  .hero .flutes>div:nth-of-type(even){display:none!important}
  .hero .fluteimg{animation:flutedriftm 5.5s cubic-bezier(.45,0,.55,1) infinite alternate!important}
  .hero .heroimg{animation:slowzoom 26s ease-in-out infinite alternate!important}
}
/* iPhone realista (horizontal): esquinas y bordes proporcionales al tamaño */
.phonefloat{container-type:inline-size;padding:1.5cqw!important;border-radius:7.6cqw!important;background:linear-gradient(145deg,#3a3a3c,#1c1c1e 40%,#0b0b0c 70%,#2a2a2c)!important;box-shadow:inset 0 0 0 .25cqw rgba(255,255,255,.22),inset 0 0 0 .55cqw #050505,0 50px 90px -30px rgba(0,0,0,.9),0 0 80px -30px rgba(255,122,0,.45)!important}
.phonefloat>div:first-child,.phonefloat .screen{border-radius:6.1cqw!important}
.phonefloat>span[aria-hidden]{left:3.2cqw!important;top:50%!important;width:2.6cqw!important;height:28%!important;margin-top:0!important;transform:translateY(-50%);border-radius:99px!important;background:#000!important;z-index:3}
.phonefloat::before,.phonefloat::after{content:"";position:absolute;top:-.45cqw;height:.55cqw;border-radius:2px 2px 0 0;background:linear-gradient(180deg,#4a4a4c,#1a1a1a)}
.phonefloat::before{left:18%;width:7%}
.phonefloat::after{left:27%;width:7%}
/* insignia App Store: cristal naranja sobre el título */
.asbadge{display:inline-flex;align-items:center;gap:11px;margin:0 0 22px;padding:9px 18px 9px 12px;border-radius:16px;color:#F9F9F9;line-height:1;background:radial-gradient(120% 140% at 0% 0%,rgba(255,170,90,.35),rgba(255,122,0,.10) 55%,rgba(255,122,0,.05));-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);box-shadow:inset 0 1px 1px rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,122,0,.55),0 10px 30px -10px rgba(255,122,0,.5)}
.asbadge svg{color:#FF9A3A}
.asbadge span{display:flex;flex-direction:column;gap:4px}
.asbadge small{font:500 9.5px 'JetBrains Mono',monospace;letter-spacing:.14em;color:#FFB47A}
.asbadge b{font:600 18px 'Inter Tight',Inter,sans-serif;letter-spacing:-.01em}
/* insignia más compacta */
.asbadge{gap:8px!important;padding:6px 14px 6px 9px!important;border-radius:12px!important;margin-bottom:18px!important;position:relative;overflow:hidden}
.asbadge svg{width:16px;height:16px}
.asbadge span{gap:2px!important}
.asbadge small{font-size:7.5px!important;letter-spacing:.16em!important}
.asbadge b{font-size:14.5px!important}
.asbadge::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);animation:asshine 4.5s ease-in-out infinite}
@keyframes asshine{0%,60%{left:-60%}100%{left:130%}}
/* fondo del final: sin espacio vacío y con resplandor cálido */
.orbwrap{transform:none!important}
.bgroot{position:relative}
.bgroot>.wrap{z-index:1}
.bgroot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:900px;pointer-events:none;z-index:0;background:radial-gradient(70% 55% at 50% 100%,rgba(255,110,10,.30),rgba(193,40,1,.10) 45%,transparent 75%)}
/* cinta de colaboraciones un poco más rápida */
.ftrack{animation-duration:34s!important}
@media (max-width:900px){.ftrack{animation-duration:22s!important}}
/* luces de fondo más visibles en celular */
@media (max-width:900px){
  .orbwrap .orb,.orbwrap .orb2,.orbwrap .orb3{display:block!important;opacity:1!important;width:640px!important;height:640px!important}
  .orbwrap .orb3{opacity:.8!important}
  .orbwrap::before,.orbwrap::after{content:"";position:absolute;width:560px;height:560px;border-radius:50%;pointer-events:none}
  .orbwrap::before{left:-260px;top:42%;background:radial-gradient(circle,rgba(255,110,10,.38),rgba(193,8,1,.12) 50%,transparent 75%)}
  .orbwrap::after{right:-260px;top:68%;background:radial-gradient(circle,rgba(255,130,20,.34),transparent 72%)}
}
/* inicio, Sumak Scratch en celular: primero la app, luego el texto */
@media (max-width:900px){#scratch .scratchtxt{order:2}#scratch .glass.pad{gap:32px!important}}
/* scratch mobile order */
@media(max-width:860px){#scratch .scratchtxt{display:flex!important;flex-direction:column;align-items:center}#scratch .scratchtxt .asbadge{order:1}#scratch .scratchtxt h2{order:2}#scratch .scratchtxt .ctas{order:3;width:100%;margin-top:24px!important}#scratch .scratchtxt>p{order:4;margin:26px 0 0!important}}

/* scratch badge first */
@media(max-width:860px){#scratch .scratchtxt{display:contents!important}#scratch .scratchtxt>*{text-align:center}#scratch .scratchtxt .asbadge{order:1!important;align-self:center!important;margin-left:auto!important;margin-right:auto!important;margin:0 0 22px!important}#scratch .scratchtxt+div{order:2!important}#scratch .scratchtxt h2{order:3!important;margin-top:26px!important;align-self:center!important;text-align:center!important;width:100%}#scratch .scratchtxt .ctas{order:4!important}#scratch .scratchtxt>p{order:5!important}}

@media(max-width:860px){html body #scratch .glass .scratchtxt .asbadge{margin:0 auto 22px auto!important;align-self:center!important;flex:0 0 auto!important}}

@media(max-width:860px){html body #scratch .scratchtxt h2{display:none!important}html body #scratch .scratchtxt .ctas{margin-top:28px!important}}

/* scratch compact mobile */
@media(max-width:860px){html body #scratch .glass.pad{padding:18px 16px 20px!important;row-gap:0!important;gap:0!important}html body #scratch .glass .scratchtxt .asbadge{margin:0 auto 20px!important}html body #scratch .scratchtxt+div{flex:0 0 100%!important;width:100%!important;margin:0!important}html body #scratch .scratchtxt .ctas{margin-top:14px!important;gap:10px!important}html body #scratch .scratchtxt .ctas{flex:0 0 100%!important}html body #scratch .scratchtxt>p{flex:0 0 100%!important}html body #scratch .scratchtxt>p{margin:14px 0 0!important;font-size:15px!important;line-height:1.5!important}}

/* hero legibility */
#inicio h1,#inicio h1 span{text-shadow:0 2px 6px rgba(0,0,0,.45),0 6px 28px rgba(0,0,0,.55)}
#inicio h1+p,#inicio .reveal.d3{color:rgba(255,255,255,.82)!important;text-shadow:0 1px 3px rgba(0,0,0,.6),0 4px 18px rgba(0,0,0,.55)}
#inicio .flutes{-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 30%,#000 70%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 30%,#000 70%)}
@media(max-width:860px){#inicio .flutes{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.55) 45%,#000 85%);mask-image:linear-gradient(90deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.55) 45%,#000 85%)}}

.logoslot.brandico{display:inline-grid;place-items:center;font-size:0;letter-spacing:0}
.socialcard .logoslot.brandico{background:rgba(255,255,255,.04)!important;color:rgba(255,255,255,.88);transition:color .25s,border-color .25s,background .25s}
.socialcard:hover .logoslot.brandico,.socialcard:active .logoslot.brandico{color:#FF7A00;border-color:rgba(255,122,0,.45)!important;background:rgba(255,122,0,.08)!important}
.wabtn .logoslot.brandico{background:transparent!important;border:none!important;color:#0A0A0A;width:auto!important;height:auto!important}


/* cassette v2: idle spin + real tape */
@keyframes skidle{to{transform:rotate(360deg)}}
@keyframes sktapeshine{from{background-position:140% 0}to{background-position:-40% 0}}
html body .tapeA .reel:not(.spin){animation:skidle 6s linear infinite!important;animation-play-state:running!important}
@media(prefers-reduced-motion:reduce){html body .tapeA .reel:not(.spin){animation:skidle 6s linear infinite!important}}
.tapeA .reelbox{z-index:1}
.tapeA .reelbox::before{content:"";position:absolute;inset:-7%;border-radius:50%;background:radial-gradient(circle,#2a1d14 0 55%,#140d08 56% 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 4px 10px rgba(0,0,0,.45);z-index:-1}
.tapeA .cwin::before{content:"";position:absolute;left:24.5%;right:24.5%;top:auto;bottom:6%;height:7px;border-radius:2px;z-index:0;pointer-events:none;background:linear-gradient(90deg,transparent 0,rgba(255,190,120,0) 40%,rgba(255,190,120,.0) 60%,transparent 100%),linear-gradient(180deg,#2a1c12 0,#0e0906 55%,#1b120c 100%);box-shadow:0 1px 0 rgba(255,255,255,.06),0 2px 6px rgba(0,0,0,.5)}
.tapeA:has(.reel.spin) .cwin::before{background:linear-gradient(90deg,transparent 0,transparent 35%,rgba(255,170,90,.75) 48%,rgba(255,235,210,.95) 50%,rgba(255,170,90,.75) 52%,transparent 65%,transparent 100%) 0 0/260% 100% no-repeat,linear-gradient(180deg,#2a1c12 0,#0e0906 55%,#1b120c 100%);animation:sktapeshine 1.4s linear infinite;box-shadow:0 1px 0 rgba(255,255,255,.06),0 0 12px rgba(255,122,0,.35)}

/* tape tangent join */
.tapeA .reelbox::before{background:radial-gradient(circle,#24180f 0 55%,#130c07 56% 100%)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)!important}
.tapeA .cwin::before{left:24.5%!important;right:24.5%!important;bottom:calc((100% - 80.4%)/2 - 80.4% * .07)!important;height:8px!important;border-radius:0!important;box-shadow:none!important;background:linear-gradient(180deg,#1c120b 0,#130c07 100%)!important}
.tapeA:has(.reel.spin) .cwin::before{background:linear-gradient(90deg,transparent 0,transparent 35%,rgba(255,170,90,.7) 48%,rgba(255,235,210,.9) 50%,rgba(255,170,90,.7) 52%,transparent 65%,transparent 100%) 0 0/260% 100% no-repeat,linear-gradient(180deg,#1c120b 0,#130c07 100%)!important;animation:sktapeshine 1.4s linear infinite!important}

/* tape follows reel size */
html body .tapeA .cwin::before{bottom:auto!important;top:calc(50% + min(152px,90cqh,38cqw) * .57 - 8px)!important}

/* smaller cassette label */
html body .tapeA > .cwin + span{font-size:6.5px!important;padding:2px 4px!important;top:12px!important;letter-spacing:.1em!important;border-radius:2px!important}
@media(max-width:860px){html body .tapeA > .cwin + span{font-size:5px!important;padding:1.5px 3px!important;top:6px!important}}

/* iPad hero: player right */
@media(min-width:861px) and (max-width:1300px){html body #inicio{flex-wrap:nowrap!important;align-items:center!important;gap:clamp(20px,3vw,40px)!important}html body #inicio>div:not(.reveal):not(.glass){flex:1 1 0!important;min-width:0!important;width:auto!important}html body #inicio>.glass.clearglass{flex:0 0 clamp(390px,44%,440px)!important;width:clamp(390px,44%,440px)!important;margin:0!important}html body #inicio h1{font-size:clamp(44px,6.2vw,72px)!important}}

/* cursor glow only on devices with mouse */



/* spot: hidden until a real mouse/trackpad moves */
html body .spot{display:none!important;z-index:0!important}
html.hasmouse body .spot{display:block!important}

/* smooth header scroll */
html body header.topbar{transition:opacity .6s ease,background-color .3s ease!important;-webkit-backdrop-filter:blur(22px) saturate(1.6)!important;backdrop-filter:blur(22px) saturate(1.6)!important}
@media(max-width:860px){html body header.topbar{-webkit-backdrop-filter:blur(16px) saturate(1.5)!important;backdrop-filter:blur(16px) saturate(1.5)!important}}

/* no scroll parallax behind header (caused jitter) */
html body .orbwrap{transform:none!important;will-change:auto!important}

/* tablets: fixed header instead of sticky (iOS sticky+blur jitter) */
@media (min-width:901px) and (hover:none),(min-width:901px) and (pointer:coarse){
html body .wrap>header.topbar{position:fixed!important;top:calc(20px + env(safe-area-inset-top))!important;left:max(32px,calc((100vw - 1280px) / 2))!important;right:max(32px,calc((100vw - 1280px) / 2))!important;width:auto!important;transform:none!important;z-index:50!important;margin:0!important}
html body .wrap{padding-top:calc(86px + env(safe-area-inset-top))!important}
}

/* no rubber-band stretch at top/bottom */
html,body{overscroll-behavior-y:none!important}
html{background:#0A0A0A}

/* smoother liquid pill */
@media(min-width:901px){html body .topbar .navpill{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:radial-gradient(120% 140% at 25% 0%,rgba(255,200,150,.34),rgba(255,122,0,.14) 45%,rgba(255,122,0,.09) 70%,rgba(255,150,60,.26))!important;will-change:left,width,opacity,transform;transition:left .42s cubic-bezier(.22,1,.36,1),width .42s cubic-bezier(.22,1,.36,1),top .42s cubic-bezier(.22,1,.36,1),height .42s cubic-bezier(.22,1,.36,1),opacity .22s ease,transform .32s cubic-bezier(.22,1,.36,1)!important}}

/* lighter glass on touch devices (iPad/iPhone perf) */
@media (hover:none),(pointer:coarse){html body .glass:not(.topbar){-webkit-backdrop-filter:blur(14px)!important;backdrop-filter:blur(14px)!important}html body .scard{-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important}}
/* product cards: cheaper glass everywhere */
html body .glass.scard{-webkit-backdrop-filter:blur(18px)!important;backdrop-filter:blur(18px)!important}

/* tablet: scratch buttons aligned, equal width */
@media(min-width:861px) and (max-width:1300px){html body #scratch .scratchtxt .ctas{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;width:100%!important;max-width:340px!important}html body #scratch .scratchtxt .ctas>*{width:100%!important;max-width:none!important;min-width:0!important;flex:none!important;justify-content:center!important;text-align:center;margin:0!important;box-sizing:border-box;white-space:nowrap}}

/* scroll hint chevrons */
@keyframes skhint{0%,100%{transform:translate(-50%,-50%) translateY(-3px);opacity:.35}50%{transform:translate(-50%,-50%) translateY(4px);opacity:.75}}
.wrap>.scrollhint{display:block;position:relative;height:0;width:100%;padding:0;margin:0;border:0;background:none;z-index:3}
.wrap>.scrollhint svg{position:absolute;left:50%;top:22px;color:#FFB070;filter:drop-shadow(0 0 6px rgba(255,122,0,.55));animation:skhint 2.4s ease-in-out infinite;cursor:pointer;pointer-events:auto}
.wrap>.scrollhint:hover svg{color:#FF7A00}
@media(max-width:900px){.wrap>.scrollhint svg{top:20px;width:20px;height:20px}}
@media(prefers-reduced-motion:reduce){.wrap>.scrollhint svg{animation:none;opacity:.6;transform:translate(-50%,-50%)}}

.wrap>.scrollhint{transform:none!important;animation:none!important}

/* single separator line */
footer .fsep+.fsep{display:none!important}

/* scratch CTAs: identical size on tablet + desktop */
@media(min-width:861px){html body #scratch .scratchtxt .ctas{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;width:100%!important;max-width:320px!important}
html body #scratch .scratchtxt .ctas>*{width:100%!important;height:52px!important;min-height:0!important;padding-top:0!important;padding-bottom:0!important;box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;margin:0!important;white-space:nowrap}}

/* new app screenshot: fill screen */
img[src*="scratch-ui-v2"]{object-fit:cover!important;object-position:center!important;width:100%!important;height:100%!important}

/* legal footer links */
.legalnav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;padding:18px 0 14px;font-size:12.5px;letter-spacing:.01em}
.legalnav a{color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s}
.legalnav a:hover,.legalnav a:focus-visible{color:#FF7A00}
footer.sumak-foot{flex-wrap:wrap}footer.sumak-foot .legalnav{width:100%;order:9}
@media(max-width:600px){.legalnav{gap:8px 16px;font-size:12px;padding:16px 8px 12px}}

/* no horizontal scroll from background orbs */
html,body{overflow-x:clip}

/* no glow on Scratch CTA */
html body #scratch .ctas .btn,html body #scratch .ctas .btn:hover{box-shadow:none!important;filter:none!important}
html body #scratch .ctas .btn::before,html body #scratch .ctas .btn::after{box-shadow:none!important;filter:none!important;opacity:0!important}

/* mobile: phone drop shadow no longer falls on the button below */
@media(max-width:860px){html body #scratch .phonefloat{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22),inset 0 0 0 4px #050505,0 14px 22px -14px rgba(0,0,0,.7)!important}}

/* App Store badge: more contrast */
html body .asbadge{background:linear-gradient(180deg,rgba(18,12,8,.82),rgba(10,7,5,.88))!important;border:1px solid rgba(255,140,40,.75)!important;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 8px 22px -8px rgba(0,0,0,.7),0 0 18px -4px rgba(255,122,0,.45)!important;-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important}
html body .asbadge *{text-shadow:none!important}
html body .asbadge small,html body .asbadge .s1,html body .asbadge span:first-child{color:#FFB070!important;opacity:1!important}
html body .asbadge b,html body .asbadge strong,html body .asbadge .s2{color:#fff!important;opacity:1!important}
html body .asbadge svg{color:#FF9A3D!important;stroke:#FF9A3D!important;opacity:1!important}