*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:74px}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#17191b}header{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;background:#ffffffed;position:sticky;top:0;z-index:10;border-bottom:1px solid #eee}a{color:inherit;text-decoration:none}.brand{font-size:15px;font-weight:800;letter-spacing:1px}.brand b{background:#ed2026;color:#fff;display:inline-block;padding:10px 7px;font-style:italic;margin-right:8px}nav{display:flex;gap:32px;font-size:13px}.nav-cta{font-size:12px;border-bottom:1px solid;padding:7px 0}section{position:relative;overflow:hidden;isolation:isolate}.inner{max-width:1440px;margin:auto;min-height:clamp(420px,40vw,660px);display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:48px clamp(28px,6vw,100px);gap:35px}.copy{z-index:2;max-width:500px}.eyebrow{font-size:12px;letter-spacing:2.5px;font-weight:700;display:block;margin-bottom:22px}h1,h2,h3,p{margin:0}h1,.hero h2{font-size:clamp(42px,5.4vw,82px);font-style:italic;letter-spacing:-3px;line-height:1.1}h2{font-size:clamp(30px,3.3vw,52px);line-height:1.12;letter-spacing:-1.8px;font-weight:700}h3{font-size:21px;margin-top:26px;margin-bottom:10px}.rainbow{display:table;font-style:italic;font-size:clamp(25px,3vw,43px)!important;letter-spacing:0!important;border-bottom:4px solid transparent;border-image:linear-gradient(90deg,#e82836,#f8d81b,#47bfb1,#384ae1) 1;padding-bottom:5px;margin-top:18px}.statement{font-size:clamp(22px,2.3vw,34px);margin-top:30px;line-height:1.2}.visual{will-change:transform;position:relative;z-index:1;width:100%}.visual img{width:100%;display:block;height:auto}.hero{background:#fff}.hero .inner{min-height:clamp(520px,47vw,750px)}.hero .visual{width:120%;margin-left:-10%}.hero:before{content:'';position:absolute;inset:0 auto 0 0;width:7%;opacity:.15;background:repeating-linear-gradient(120deg,transparent 0 14px,#8a8a8a 15px 16px,transparent 17px 27px)}.hero .copy{padding-left:20px}.button{border:0;background:#1b1b1b;color:#fff;display:inline-flex;align-items:center;justify-content:space-between;gap:30px;padding:16px 22px;font-size:13px;cursor:pointer;margin-top:32px;font-family:inherit}.button:hover{background:#424242}.button span{font-size:19px}.orange{background:linear-gradient(110deg,#ce471c,#ffcb38 58%,#db6123);color:white}.orange .visual img{mix-blend-mode:multiply}.blue{background:#006575;color:white}.teal{background:#5ea8aa;color:white}.grey{background:#deded8}.lime{background:#f0f5c0}.green{background:#526e2e;color:#fff}.silver{background:#d2d2d5}.white{background:#fff}.reverse .copy{grid-column:2;grid-row:1}.reverse .visual{grid-column:1;grid-row:1}.feature .inner{min-height:clamp(390px,34vw,540px)}.feature h2{font-size:clamp(24px,2.4vw,36px);letter-spacing:-.7px}.feature p{font-size:clamp(14px,1.15vw,17px);line-height:1.7;margin-top:14px}.feature h3{font-size:20px;letter-spacing:-.4px}.feature .visual{width:115%}.feature:not(.reverse) .visual{margin-left:-4%}.light{background:#fff;color:#344b1b}.back{display:block;font-size:12px;margin-top:24px}.ending .inner{min-height:570px}footer{padding:25px 5vw;font-weight:bold;font-size:12px;display:flex;justify-content:space-between;border-top:1px solid #eee}footer span{font-weight:400;color:#777}dialog{border:0;padding:45px;max-width:540px;width:calc(100% - 32px);box-shadow:0 20px 100px #0005}dialog::backdrop{background:#0009;backdrop-filter:blur(5px)}dialog h2{margin-bottom:25px}.close{position:absolute;right:16px;top:10px;border:0;background:none;font-size:30px;cursor:pointer}dl{display:grid;grid-template-columns:1fr 1.2fr;font-size:14px;gap:16px}dt{color:#666}dd{margin:0}small{display:block;line-height:1.6;color:#777;margin-top:25px}a:focus-visible,button:focus-visible{outline:3px solid #3c74ee;outline-offset:5px}@media(min-width:1800px){.inner{max-width:1580px;gap:80px}}@media(max-width:760px){header{height:62px;padding:0 20px}nav{display:none}.inner{grid-template-columns:1fr;gap:25px;padding:50px 26px;min-height:0!important}.copy{max-width:100%}.visual,.hero .visual,.feature .visual{width:100%;margin:0!important;max-width:520px;justify-self:center}.reverse .copy,.reverse .visual{grid-column:auto;grid-row:auto}.hero .copy{padding-left:0}h1,.hero h2{font-size:56px}.hero .inner{padding-top:65px}.feature .inner{padding-bottom:35px}.feature .visual{max-width:420px}h2{font-size:36px}.feature h2{font-size:28px}.feature p{font-size:15px}.eyebrow{margin-bottom:16px}.statement{font-size:27px}.button{margin-top:24px}.ending .inner{padding-top:60px}.hero:before{width:15px}dialog{padding:34px 24px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.visual{transform:none!important;will-change:auto}}
section:not(.hero) .visual img{mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
/* Full-width photographic scenes, composed from Photoshop layers. */
.scene{min-height:clamp(480px,36vw,820px)}.scene.hero{min-height:clamp(650px,64.45vw,1050px)}.scene-content{position:relative;z-index:2;min-height:inherit;display:flex;align-items:center;max-width:1920px;margin:auto;padding:65px 8vw;pointer-events:none}.scene-content .copy{width:32%;max-width:570px;pointer-events:auto}.scene.reverse .scene-content{justify-content:flex-end}.scene.reverse .copy{width:37%}.stage{position:absolute;inset:-48px 0;z-index:0;overflow:hidden;pointer-events:none}.scene-image{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center;will-change:transform}.scene:not(.hero) .scene-image{mask-image:none;-webkit-mask-image:none}.scene.hero:before{display:none}.scene.hero .copy{padding-left:0}.scene.hero .scene-content{padding-left:14vw}.scene.hero .copy{width:30%}.scene.hero h1,.scene.hero h2{font-size:clamp(35px,4vw,76px);letter-spacing:-2px}.scene-2 h2,.scene-3 h2,.scene-4 h2{font-size:clamp(26px,2.6vw,48px);font-weight:400;font-style:italic;text-transform:uppercase;letter-spacing:-.7px}.scene-2 .statement,.scene-3 .statement,.scene-4 .statement{font-style:italic;text-transform:uppercase;font-size:clamp(22px,2.2vw,39px)}.scene.feature h2{font-size:clamp(22px,2vw,34px);letter-spacing:-.7px}.scene.feature h3{font-size:clamp(19px,1.6vw,27px)}.scene.feature p{font-size:clamp(14px,1.1vw,18px);line-height:1.65}.scene.feature .copy{width:38%;max-width:630px}.scene.feature .scene-content{padding:55px 8vw}.scene-3 .copy{text-align:center;width:27%!important}.scene-4{background:#5fa9aa}.scene-6{background:#f0f5c0}.scene-8{background:#526e2e}.scene-9{background:#d2d2d5}.scene .eyebrow{margin-bottom:20px}@media(min-width:1921px){.scene-content{padding-left:140px;padding-right:140px}.scene.hero .scene-content{padding-left:200px}}@media(max-width:760px){.scene,.scene.hero{min-height:0}.stage{position:relative;inset:auto;height:auto;aspect-ratio:3800/1240;overflow:visible}.scene.hero .stage{aspect-ratio:3792/2444}.scene-4 .stage{aspect-ratio:3792/1940}.scene-image{object-fit:contain;transform:none!important;will-change:auto}.scene-content,.scene.feature .scene-content,.scene.hero .scene-content{padding:30px 26px 45px;min-height:0;display:block}.scene-content .copy,.scene.reverse .copy,.scene.hero .copy,.scene.feature .copy,.scene-3 .copy{width:100%!important;max-width:100%;text-align:left}.scene.hero .stage{margin-bottom:-65px}.scene.hero h1,.scene.hero h2{font-size:43px}.scene-2 h2,.scene-3 h2,.scene-4 h2{font-size:30px}.scene.feature h2{font-size:26px}.scene.feature p{font-size:15px}.scene-2 .statement,.scene-3 .statement,.scene-4 .statement{font-size:25px;margin-top:20px}.scene-5{background:#deded8}.scene-7{background:white}.scene .button{margin-top:22px}.stage .scene-image.front{z-index:1}}@media(prefers-reduced-motion:reduce){.scene-image{transform:none!important;will-change:auto}}
/* Keep edge-positioned product layers fully inside desktop sections. */
@media(min-width:761px){.scene.feature .scene-image.front{top:80px;height:calc(100% - 160px);object-fit:contain;object-position:center}}
/* Calls section: place its product in the open concrete area. */
@media(min-width:761px){.scene-5.feature .scene-image.front{left:52%;width:21%;top:72px;height:calc(100% - 144px);object-fit:contain;object-position:center}}
@media(max-width:760px){.scene-5 .scene-image.front{left:78%;top:20%;width:18%;height:76%;object-fit:contain}}
/* Match the two product displays, with calls product reduced by 20%. */
@media(min-width:761px){.scene-5.feature .scene-image.front,.scene-6.feature .scene-image.front{width:16.8%;top:calc(10% + 57.6px);height:calc(80% - 115.2px);object-fit:contain;object-position:center}.scene-5.feature .scene-image.front{left:54.1%}.scene-6.feature .scene-image.front{left:3%}}
@media(max-width:760px){.scene-5 .scene-image.front{left:79.8%;top:27.6%;width:14.4%;height:60.8%}.scene-6 .scene-image.front{left:3%;top:27.6%;width:14.4%;height:60.8%;object-fit:contain}}
/* Music section: match the calls and monitoring product scale. */
@media(min-width:761px){.scene-7.feature .scene-image.front{left:80%;width:16.8%;top:calc(10% + 57.6px);height:calc(80% - 115.2px);object-fit:contain;object-position:center}}
@media(max-width:760px){.scene-7 .scene-image.front{left:79.8%;top:27.6%;width:14.4%;height:60.8%;object-fit:contain}}
/* Training and comfort: matching product size in the gap beside each model. */
@media(min-width:761px){.scene-8.feature .scene-image.front,.scene-9.feature .scene-image.front{width:16.8%;top:calc(10% + 57.6px);height:calc(80% - 115.2px);object-fit:contain;object-position:center}.scene-8.feature .scene-image.front{left:39.1%;top:calc(30% + 57.6px)}.scene-9.feature .scene-image.front{left:45.1%}}
@media(max-width:760px){.scene-8 .scene-image.front,.scene-9 .scene-image.front{top:27.6%;width:14.4%;height:60.8%;object-fit:contain}.scene-8 .scene-image.front{left:3%}.scene-9 .scene-image.front{left:79.8%}}
/* Preserve PSD framing and let the blue scene scroll over the orange one. */
@media(min-width:761px){.screen-transition{position:relative;isolation:isolate}.screen-transition .scene-2{position:sticky;top:74px;z-index:0}.screen-transition .scene-3{position:relative;z-index:1;min-height:0;height:32.631579vw;box-shadow:0 -14px 26px #00000014}.scene-3 .stage{inset:0}.scene-3 .scene-image{object-fit:contain;transform:none!important;will-change:auto}.scene-3 .scene-content{height:100%;min-height:0;padding-top:25px;padding-bottom:25px}}
@media(prefers-reduced-motion:reduce){.screen-transition .scene-2{position:relative;top:auto}}
/* Opening sequence: independent watches with sequential fades. */
#inicio .hero-watch{position:absolute;inset:0;will-change:transform}#inicio .hero-watch img{opacity:0;animation:watch-arrive 1.4s ease-out both}#inicio .reveal-1 img{animation-delay:.15s}#inicio .reveal-2 img{animation-delay:.15s}#inicio .reveal-3 img{animation-delay:1.65s}#inicio .reveal-4 img{animation-delay:3.15s}@keyframes watch-arrive{from{opacity:0}to{opacity:1}}
@media(min-width:761px){#inicio{--hero-trim:clamp(75px,8.6vw,160px);min-height:calc(clamp(650px,64.45vw,1050px) - var(--hero-trim))}#inicio .stage{top:calc(-48px - var(--hero-trim));bottom:-48px}#inicio .scene-content .copy{transform:translateY(calc(var(--hero-trim) / -2))}}
@media(prefers-reduced-motion:reduce){#inicio .hero-watch img{opacity:1;animation:none}#inicio .hero-watch{transform:none!important;will-change:auto}}

/* The complete composition enters as one image; no partial straps are exposed. */
#inicio .hero-ensemble img{animation:ensemble-arrive 1.5s ease-out both;animation-delay:0s}@keyframes ensemble-arrive{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#inicio .hero-ensemble img{animation:none;opacity:1;transform:none}}
/* Orange product: a smaller contained image, with the opening rolling underneath. */
@media(min-width:761px){.opening-transition{position:relative;isolation:isolate}.opening-transition>#inicio{position:sticky;top:74px;z-index:0}.opening-transition>.screen-transition{position:relative;z-index:1}.scene-2 .scene-image.front{top:80px;height:calc(100% - 160px);object-fit:contain;object-position:center}}
@media(prefers-reduced-motion:reduce){.opening-transition>#inicio{position:relative;top:auto}}
@media(min-width:761px){.screen-transition .scene-2{min-height:0;height:32.631579vw}.scene-2 .stage{inset:0}.scene-2 .scene-image.front{top:0;height:100%;object-fit:contain;transform:none!important;will-change:auto}.scene-2 .scene-content{height:100%;min-height:0;padding-top:25px;padding-bottom:25px}}
/* Tighten only the closing white scene's upper whitespace by about 20%. */
@media(min-width:761px){#detalhes{--closing-trim:clamp(30px,3.44vw,64px);min-height:calc(clamp(650px,64.45vw,1050px) - var(--closing-trim))}#detalhes .stage{top:calc(-48px - var(--closing-trim));bottom:-48px}#detalhes .scene-content .copy{transform:translateY(calc(var(--closing-trim) / -2))}}
/* Keep the training CTA legible on its existing grey hover background. */
#treinos .button:hover,#treinos .button:focus-visible{background:#424242;color:#fff}
/* Dedicated mobile art direction. Desktop composition is preserved. */
.mobile-art{display:none}
@media(max-width:760px){
 .scene>.stage{display:none}.scene>.mobile-art{display:block;position:relative;height:auto;aspect-ratio:390/285;overflow:hidden}
 .mobile-art .mobile-photo{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
 .mobile-art .mobile-product{position:absolute;height:72%;width:36%;object-fit:contain;bottom:12px;right:10px;filter:drop-shadow(0 5px 6px #0002)}
 .mobile-art .mobile-product.left{right:auto;left:10px}
 .scene.hero>.mobile-art{aspect-ratio:390/280}.scene.hero .mobile-photo,.scene-4 .mobile-photo{object-fit:contain}
 .scene .scene-content,.scene.feature .scene-content,.scene.hero .scene-content{padding:26px 25px 32px;min-height:0;height:auto}
 .scene.hero .copy{text-align:center}.scene.hero .rainbow{margin-left:auto;margin-right:auto}
 .scene.hero h1,.scene.hero h2{font-size:34px;letter-spacing:-1px}.scene.hero .rainbow{font-size:27px!important}
 .scene h2,.scene.feature h2{font-size:27px;line-height:1.15;letter-spacing:-.7px}
 .scene h3,.scene.feature h3{font-size:19px;margin-top:22px}.scene.feature p{font-size:15px;line-height:1.65}
 .scene .eyebrow{font-size:11px;letter-spacing:2px}.scene .statement{font-size:22px;line-height:1.25}
 .scene.hero .copy,.scene .copy{transform:none}.scene .button{min-height:46px}
 header{gap:15px}.brand{font-size:12px;white-space:nowrap}.nav-cta{font-size:11px}
 .scene-4 .copy{text-align:center}.scene-4 h2{font-size:27px}.scene-4 .statement{margin-top:22px}
}
/* Mobile opening: product name first, then the complete watch composition. */
@media(max-width:760px){
 #inicio{display:flex;flex-direction:column;align-items:stretch}
 #inicio .scene-content,#inicio .copy{display:contents}
 #inicio .copy>.eyebrow{order:1;text-align:center;margin:28px 25px 12px}
 #inicio .copy>h1{order:2;text-align:center;font-size:40px;line-height:1.1;letter-spacing:-1px;margin:0 20px}
 #inicio .copy>.rainbow{order:3;font-size:31px!important;align-self:center;margin:14px auto 0;padding-bottom:5px}
 #inicio>.mobile-art{order:4;margin-top:20px;width:100%;animation:mobile-opening-fade 1.5s ease-out .2s both}
 #inicio .copy>.button{order:5;align-self:center;margin:20px auto 32px;font-size:14px}
 @keyframes mobile-opening-fade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){#inicio>.mobile-art{animation:none;opacity:1;transform:none}}
/* Mobile AMOLED: one orange composition, copy above the black strap. */
@media(max-width:760px){
 .scene-2{display:flex;flex-direction:column;background:linear-gradient(120deg,#df6724,#ffca39 68%,#ef932b)}
 .scene-2>.scene-content{order:1;padding:26px 25px 8px;position:relative;z-index:2}
 .scene-2 .copy{display:flex;gap:18px;align-items:flex-start;max-width:100%}
 .scene-2 .copy>h2{font-size:25px;line-height:1.15;flex:1;margin:0}
 .scene-2 .copy>.statement{font-size:20px;line-height:1.2;flex:1;margin:0}
 .scene-2>.mobile-art{order:2;aspect-ratio:1/1;margin-top:-8px;overflow:hidden}
 .scene-2 .mobile-photo{object-fit:contain;object-position:center top;width:100%;height:100%}
}
/* Supplied mobile artwork, with live HTML copy on the lower-left strap. */
@media(max-width:760px){
 .scene-2{display:block;position:relative;aspect-ratio:1080/1091;min-height:0;padding:0;overflow:hidden}
 .scene-2>.mobile-art{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;margin:0}
 .scene-2 .mobile-photo{width:100%;height:100%;object-fit:contain;object-position:center}
 .scene-2>.scene-content{position:absolute;inset:0;display:block;height:100%;padding:0;min-height:0}
 .scene-2 .copy{position:absolute;left:6.4%;top:66.5%;width:56%;max-width:none;display:block;color:#fff}
 .scene-2 .copy>h2,.scene-2 .copy>.statement{font-family:Arial,Helvetica,sans-serif;font-size:clamp(14px,4.5vw,34px);line-height:1.2;letter-spacing:0;text-transform:none;font-style:normal;font-weight:400;margin:0}
 .scene-2 .copy strong{font-weight:400}
}

/* Klint typography and branded opening, matching the supplied artwork. */
@font-face{font-family:Klint;src:url("assets/fonts/KlintPro-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Klint;src:url("assets/fonts/KlintPro-BoldItalic.otf") format("opentype");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:KlintCond;src:url("assets/fonts/KlintPro-CondensedItalic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:KlintCond;src:url("assets/fonts/KlintPro-BoldCondItalic.otf") format("opentype");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:KlintExt;src:url("assets/fonts/KlintPro-BoldExtItalic.otf") format("opentype");font-weight:700;font-style:italic;font-display:swap}
body{font-family:Klint,Arial,sans-serif}
.scene.feature h2,.scene.feature h3{font-family:Klint,Arial,sans-serif;font-weight:700;font-style:italic;letter-spacing:0}
.scene-2 h2,.scene-3 h2,.scene-4 h2,.scene-2 .statement,.scene-3 .statement,.scene-4 .statement{font-family:KlintCond,Arial,sans-serif;font-style:italic;letter-spacing:0;font-weight:400}
.scene-2 strong,.scene-3 strong,.scene-4 strong{font-weight:700}
.scene.hero h1,.scene.hero .copy>h2:not(.rainbow){font-family:KlintExt,Arial,sans-serif;font-weight:700;font-style:italic;color:#858589;letter-spacing:0}
.scene.hero .rainbow{font-family:Klint,Arial,sans-serif;font-weight:700;font-style:italic;color:#17191b}
.brand,.hero-brand{font-family:Klint,Arial,sans-serif;letter-spacing:.5px;font-weight:700}
.brand b,.hero-brand b{font-family:Arial,sans-serif;font-weight:800;font-style:italic;background:#ed2026;color:white;display:inline-flex;align-items:center;justify-content:center;letter-spacing:-1px}
.brand b{width:38px;height:38px;padding:0;margin-right:8px}
.hero-brand{display:flex;align-items:center;gap:9px;font-size:clamp(12px,1.2vw,20px)!important;letter-spacing:.5px!important}
.hero-brand b{width:clamp(33.6px,3.24vw,52.8px);height:clamp(33.6px,3.24vw,52.8px);font-size:clamp(16.8px,1.68vw,27.6px);flex-shrink:0}
.scene.hero:before{display:block;content:"";position:absolute;inset:0 auto 0 0;width:13.5%;background:url("assets/hero-pattern.png") left top / 100% auto repeat-y;opacity:1;z-index:1;pointer-events:none}
@media(max-width:760px){
 .scene.hero:before{width:9%;opacity:.7}
 #inicio .copy>.hero-brand{display:flex;justify-content:center;gap:9px;margin-top:28px;margin-bottom:14px}
 .scene.hero .hero-brand{justify-content:center}
 .scene-2 .copy>h2,.scene-2 .copy>.statement{font-family:KlintCond,Arial,sans-serif;font-style:italic;font-size:clamp(14px,4.5vw,34px)}
 .scene-2 .copy strong{font-weight:700}
}

/* Mobile vibrant-colours section: live text over the right side of the photo. */
@media(max-width:760px){
 .scene-3{position:relative;aspect-ratio:966/810;min-height:0;padding:0}
 .scene-3>.mobile-art{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
 .scene-3 .mobile-photo{object-fit:cover;object-position:46% center}
 .scene-3>.scene-content{position:absolute;inset:0;width:100%;height:100%;padding:0;min-height:0}
 .scene-3 .scene-content>.copy{position:absolute;left:58%;top:25.5%;width:39%!important;max-width:none;text-align:left}
 .scene-3 .copy>h2{font-size:clamp(23px,7.2vw,54px);line-height:1.25;letter-spacing:0}
 .scene-3 .copy>.statement{font-size:clamp(20px,6vw,45px);line-height:1.35;margin-top:7vw}
}

/* Match orange and blue typography on mobile. */
@media(max-width:760px){
 .scene-2 .copy>h2,.scene-2 .copy>.statement,.scene-3 .copy>h2,.scene-3 .copy>.statement{font-size:clamp(14px,4.5vw,34px);line-height:1.2}
}
/* Mobile water/battery scene: edge-to-edge art with live copy at lower left. */
@media(max-width:760px){
 .scene-4{position:relative;aspect-ratio:780/676;min-height:0;padding:0}
 .scene-4>.mobile-art{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
 .scene-4 .mobile-photo{width:100%;height:100%;object-fit:cover;object-position:center}
 .scene-4>.scene-content{position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:0}
 .scene-4 .scene-content>.copy{position:absolute;left:4.5%;top:65%;width:41%!important;max-width:none;text-align:left}
 .scene-4 .copy>h2,.scene-4 .copy>.statement{font-size:clamp(14px,4.5vw,34px);line-height:1.1;letter-spacing:0}
 .scene-4 .copy>.statement{margin-top:3vw}
}

/* Mobile calls: clean photo and one independent product on the left. */
@media(max-width:760px){
 .scene-5 .mobile-art .mobile-photo{object-fit:cover;object-position:94% center}
 .scene-5 .mobile-art .mobile-product{left:4%;right:auto}
}

/* Mobile monitoring: clean photograph beneath the single HTML product. */
@media(max-width:760px){.scene-6 .mobile-art .mobile-photo{object-fit:cover;object-position:20% center}}

/* Mobile training: clean photograph with the existing independent watch. */
@media(max-width:760px){.scene-8 .mobile-art .mobile-photo{object-fit:cover;object-position:8% center}}
/* Mobile training composition: model right, matching product scale at left. */
@media(max-width:760px){
 .scene-8 .mobile-art .mobile-photo{object-position:left center}
 .scene-8 .mobile-art .mobile-product{left:4%;right:auto;width:36%;height:72%;bottom:12px}
}

/* Mobile comfort: clean photo, model left and one matching watch right. */
@media(max-width:760px){
 .scene-9 .mobile-art .mobile-photo{object-fit:cover;object-position:right center}
 .scene-9 .mobile-art .mobile-product{left:auto;right:4%;width:36%;height:72%;bottom:12px}
}

/* Mobile music: clean photo; preserve the independent watch position. */
@media(max-width:760px){.scene-7 .mobile-art .mobile-photo{object-fit:cover;object-position:89% center}}
/* Mobile opening only: larger brand and a tighter transition below. */
@media(max-width:760px){
 #inicio .copy>.hero-brand{font-size:clamp(16.2px,1.62vw,27px)!important;gap:12.15px;margin-top:22px;margin-bottom:14px}
 #inicio .hero-brand b{width:clamp(45.36px,4.374vw,71.28px);height:clamp(45.36px,4.374vw,71.28px);font-size:clamp(22.68px,2.268vw,37.26px)}
 #inicio>.mobile-art{margin-top:8px}
 #inicio .copy>.button{margin-top:8px;margin-bottom:20px}
}
/* Orange copy: modest rightward shift on desktop, 10% of the scene on mobile. */
@media(min-width:761px){.scene-2 .scene-content{padding-left:13vw}}
@media(max-width:760px){.scene-2 .copy{left:16.4%}}
/* Align mobile water/battery copy with the orange scene. */
@media(max-width:760px){.scene-4 .scene-content>.copy{left:16.4%}}
/* Mobile calls: move the model toward the right edge and raise the watch. */
@media(max-width:760px){
 .scene-5 .mobile-art .mobile-photo{object-position:80% center}
 .scene-5 .mobile-art .mobile-product{bottom:20%}
}

/* No navigation header: scenes roll from the top of the viewport. */
html{scroll-padding-top:0}
@media(min-width:761px){.opening-transition>#inicio,.screen-transition .scene-2{top:0}}
/* Scroll-animation study: independent text reveals and restrained depth. */
.motion-ready .motion-reveal{opacity:0;translate:0 22px;transition:opacity 900ms ease,translate 1100ms cubic-bezier(.22,1,.36,1);transition-delay:var(--reveal-delay,0ms)}
.motion-ready .motion-reveal.is-visible{opacity:1;translate:0 0}
.ending .stage .front{scale:var(--closing-scale,1);transform-origin:center}
@media(max-width:760px){
 .motion-ready .motion-reveal{translate:0 10px;transition-duration:700ms,850ms}
 .ending .mobile-photo{scale:var(--closing-scale,1);transform-origin:center}
}
@media(prefers-reduced-motion:reduce){
 .motion-ready .motion-reveal{opacity:1;translate:none;transition:none}
 .ending .stage .front,.ending .mobile-photo{scale:1!important}
}

.hero-brand img {
  display: block;
  width: clamp(210px, 24vw, 456px);
  max-width: 100%;
  height: auto;
}
@media (max-width: 760px) {
  .scene.hero .hero-brand img { width: 204px; }
  #inicio .hero-brand img { width: 240px; }
}

/* Keep the complete hero lockup clear of the product artwork. */
.scene.hero .copy {
  scale: .8;
  transform-origin: left center;
}
@media (max-width: 760px) {
  .scene.hero .copy { transform-origin: center; }
}

@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .screen-transition .scene-3 {
    position: sticky;
    top: 0;
  }
  .screen-transition .scene-4 {
    position: relative;
    z-index: 2;
  }
}

/* Keep the product shadow attached to its silhouette in each feature banner. */
.scene.feature .stage .front,
.scene.feature .mobile-art .mobile-product {
  filter: drop-shadow(5px 8px 9px rgb(0 0 0 / 25%));
}

.ending .suggested-price {
  position: absolute;
  z-index: 2;
  bottom: 4%;
  left: 30%;
  right: 2%;
  text-align: center;
  font: italic clamp(16px, 1.5vw, 24px)/1.2 KlintCond, Arial, sans-serif;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .ending .suggested-price {
    position: relative;
    inset: auto;
    order: 10;
    padding: 0 16px 24px;
  }
}

.ending .model-codes {
  position: absolute;
  z-index: 2;
  bottom: calc(4% + 2.3rem);
  left: 33%;
  right: 5%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  font: clamp(12px, 1.35vw, 21px)/1.2 KlintCond, Arial, sans-serif;
}
@media (max-width: 760px) {
  .ending .model-codes {
    position: relative;
    inset: auto;
    order: 9;
    padding: 0 4px 12px;
    font-size: clamp(10px, 3vw, 17px);
  }
}

@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .screen-transition .scene-4 {
    position: sticky;
    top: 0;
  }
  .screen-transition .scene-5 {
    position: relative;
    z-index: 3;
  }
}

@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .screen-transition > .feature {
    position: sticky;
    top: 0;
    z-index: 3;
  }
  .screen-transition > .ending {
    position: relative;
    z-index: 4;
  }
}

@media (max-width: 760px) {
  .scene.hero.ending {
    display: flex;
    flex-direction: column;
  }
  .ending > .scene-content { order: 1; }
  .ending > .mobile-art { order: 2; }
}

@media (min-width: 761px) {
  .scene-6.feature .scene-image.front {
    left: 2%;
  }
}
@media (max-width: 760px) {
  .scene-6 .mobile-art .mobile-product.left {
    left: 7%;
    right: auto;
    top: auto;
    bottom: 0;
    width: 24%;
    height: 67%;
    object-fit: contain;
    object-position: left bottom;
  }
}

@media (max-width: 760px) {
  .scene-6 > .mobile-art {
    aspect-ratio: 2048 / 1236;
  }
  .scene-6 .mobile-art .mobile-product.left {
    left: 7.2%;
    width: 23.4%;
    height: 67%;
  }
}

@media (max-width: 760px) {
  .scene-6 .mobile-photo,
  .scene-6 .mobile-art .mobile-product.left {
    scale: .92;
    transform-origin: center bottom;
  }
  .scene-6 .mobile-photo {
    mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent),
      linear-gradient(to bottom, transparent, black 8%);
    mask-composite: intersect;
  }
}

@media (max-width: 760px) {
  .scene-6 > .mobile-art { aspect-ratio: 2048 / 1225; }
  .scene-6 .mobile-art .mobile-photo {
    object-fit: contain;
    scale: none;
    mask-image: none;
  }
  .scene-6 .mobile-art .mobile-product { display: none; }
}

@media (min-width: 761px) {
  .scene-6.feature .stage .back {
    left: -8%;
  }
}

/* Keep adjoining artwork flush at fractional viewport widths. */
.screen-transition > .scene-3,
.screen-transition > .scene-4 {
  margin-top: -1px;
}
.screen-transition .scene-3 .scene-image {
  object-fit: cover;
}
.screen-transition .scene-3 {
  box-shadow: none;
}
.screen-transition :is(.scene-2, .scene-3, .scene-4) .scene-content > .copy {
  text-align: left;
}

@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  :is(.scene-5, .scene-7, .scene-8) {
    overflow: clip;
  }
  :is(.scene-5, .scene-7, .scene-8) > .stage {
    transform: translateY(var(--banner-art-offset, 0px));
  }
}

@media (min-width: 761px) {
  :is(.scene-5, .scene-8) > .stage {
    overflow: visible;
  }
  :is(.scene-5, .scene-8) > .stage > .back {
    height: max(166%, 54.15vw);
    object-position: center top;
  }
  :is(.scene-5, .scene-8) {
    overflow: clip;
  }
}

@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .scene-7 > .stage { overflow: visible; }
  .scene-7 > .stage > .back {
    height: calc(100% + 12vh);
    object-position: center top;
  }
}

@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  :is(.scene-5, .scene-7, .scene-8) > .scene-content > .copy {
    translate: 0 var(--banner-copy-offset, 0px);
  }
}