@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Instrument+Sans:wght@400;500;600;700&display=swap');
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('assets/anton.ttf') format('truetype')}
:root{--orange:#ed850f;--yellow:#ffd529;--teal:#123f3a;--paper:#fafaf6;--ink:#163b33;--line:#163b3330;font-family:'Instrument Sans',Arial,sans-serif;color:var(--ink);background:var(--paper)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:86px}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a,summary{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid currentColor;outline-offset:6px}button{color:inherit}h1,h2,p{margin:0}h1,h2,.brand,.giant-name{font-family:'Bricolage Grotesque',Arial,sans-serif}h1,h2{font-weight:600;letter-spacing:-.055em;line-height:1.02}em{font-weight:400;font-family:Georgia,serif}h2{font-size:clamp(2.6rem,5.7vw,6rem)}.eyebrow{font-size:.75rem;letter-spacing:.13em;font-weight:700;line-height:1.5}.nav{height:88px;position:absolute;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 4.5%;border-bottom:1px solid #163b332c}.brand{font-size:2rem;font-weight:800;letter-spacing:-.075em}.brand span{font-size:.7rem;vertical-align:top;display:inline-block;margin:7px 0 0 4px;letter-spacing:0}.nav nav{display:flex;gap:32px;font-size:.875rem}.nav a:hover{opacity:.7}.nav-cta{font-size:.875rem;border:1px solid var(--ink);padding:12px 20px;border-radius:30px}.nav-cta span{margin-left:18px}.story{height:200svh;background:var(--orange)}.stage{position:sticky;top:0;height:100svh;min-height:650px;overflow:hidden}.hero-image{position:absolute;width:100%;height:100%;object-fit:cover;object-position:62% center;transform-origin:62% 42%;will-change:transform}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#ee8613 .5%,#ec8510cf 21%,#ed850f00 55%)}.hero-copy{position:absolute;left:4.5%;top:25%;z-index:2;will-change:opacity,transform}h1{font-size:clamp(3.8rem,6.8vw,7.7rem);margin:22px 0 24px;max-width:760px}.intro{font-size:1.05rem;line-height:1.55;margin-bottom:32px}.button{display:inline-flex;border:0;align-items:center;gap:38px;border-radius:40px;padding:19px 25px;font-size:.9rem;font-weight:600;transition:transform .2s,background .2s}.button:hover{transform:translateY(-3px)}.dark{background:var(--ink);color:var(--paper)}.button span{font-size:1.2rem}.second-copy{position:absolute;left:5%;top:34%;opacity:0;max-width:600px;pointer-events:none}.second-copy h2{margin-top:24px;font-size:clamp(3.5rem,7vw,8rem)}.scene-bottom{position:absolute;bottom:34px;left:4.5%;right:4.5%;display:flex;align-items:center;justify-content:space-between;font-size:.7rem;letter-spacing:.05em}.scene-bottom a{font-size:.85rem;letter-spacing:0}.scene-bottom a span{margin-left:24px}.story-progress{height:3px;background:var(--ink);position:absolute;left:0;bottom:0;width:0}.section{padding:100px 6%}.section-top{display:flex;justify-content:space-between;align-items:center;font-size:.7rem;letter-spacing:.08em}.model{background:var(--teal);color:var(--paper);padding-bottom:50px}.model-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:50px;margin-top:50px}.model-heading p{font-size:1.05rem;line-height:1.7;max-width:300px}.product-stage{position:relative;margin-top:50px;background:var(--paper);color:var(--teal);overflow:hidden;border-radius:4px}.giant-name{position:absolute;top:4%;left:0;width:100%;text-align:center;font-size:clamp(6rem,23vw,25rem);line-height:1;font-weight:800;letter-spacing:-.075em;color:#163b3315}.product-image{position:relative;display:block;width:75%;height:520px;max-width:1000px;object-fit:contain;margin:20px auto 0;mix-blend-mode:multiply}.product-caption{padding:20px 30px 30px;display:flex;justify-content:space-between;font-size:.75rem;letter-spacing:.07em}.product-caption a{font-size:.875rem;letter-spacing:0}.product-caption a span{margin-left:25px}.details{display:grid;grid-template-columns:1.1fr 1fr;gap:8%;padding-top:130px;padding-bottom:130px}.detail-visual{position:sticky;top:50px;align-self:start}.detail-crop{height:570px;overflow:hidden;background:#f2f2e9;border-radius:180px 180px 4px 4px}.detail-crop img{width:100%;height:100%;object-fit:contain;object-position:center;mix-blend-mode:multiply;transform:none}.image-label{display:block;font-size:.7rem;letter-spacing:.1em;margin-top:20px}.detail-copy h2{margin-top:25px;margin-bottom:42px}.detail-list details{border-top:1px solid var(--line);padding:20px 0}.detail-list details:last-child{border-bottom:1px solid var(--line)}summary{display:flex;align-items:center;justify-content:space-between;gap:25px;cursor:pointer;font-size:1rem;list-style:none}summary::-webkit-details-marker{display:none}summary span{font-size:1.3rem;transition:transform .2s}details[open] summary span{transform:rotate(45deg)}details p{margin-top:16px;font-size:.95rem;line-height:1.7;max-width:440px;color:#486058}.color-section{display:grid;grid-template-columns:1fr 1.2fr;background:#f7d842;align-items:center;gap:25px;transition:background .45s}.color-copy h2{margin:24px 0}.color-copy>p:not(.eyebrow):not(.fineprint):not(.selected-name){line-height:1.7;font-size:1.05rem}.color-product{position:relative;overflow:hidden}.color-product img{width:100%;display:block;mix-blend-mode:multiply;transition:filter .5s,transform .5s}.color-product:hover img{transform:rotate(-3deg) scale(1.03)}fieldset{padding:0;border:0;margin:35px 0 15px}legend{font-size:.875rem;margin-bottom:18px}.swatches{display:flex;gap:17px}.swatch{width:38px;height:38px;border-radius:50%;background:var(--swatch);border:1px solid #163b3355;position:relative}.swatch.selected:after{content:'';position:absolute;inset:-6px;border:1.5px solid var(--ink);border-radius:50%}.selected-name{font-size:.9rem;font-weight:600;margin:15px 0 10px}.fineprint{font-size:.75rem;line-height:1.6;opacity:.75}.color-number{display:block;text-align:right;font-size:.8rem;letter-spacing:.12em}.fit{display:grid;grid-template-columns:1.1fr 1fr;gap:8%;align-items:start}.fit h2{font-size:clamp(2.5rem,4.2vw,5rem);margin-top:25px}.fit-info>p{line-height:1.75;font-size:1.05rem;margin-bottom:26px}.measure-row{border-bottom:1px solid var(--line);padding:17px 0;display:flex;justify-content:space-between;font-size:.875rem;gap:20px}.measure-row span:last-child{color:#65756d}.text-button{border:0;background:none;padding:22px 0;font-weight:600;font-size:.875rem}.text-button span{margin-left:20px}.closing{padding:0;display:grid;grid-template-columns:1fr 1fr;background:var(--orange);align-items:center;overflow:hidden}.closing>img{width:100%;height:640px;object-fit:cover;object-position:65% center}.closing>div{padding:60px 12%}.closing h2{margin:25px 0}.closing .button{margin:25px 0 15px}footer{background:var(--teal);color:var(--paper);padding:45px 6%;display:flex;align-items:center;justify-content:space-between;gap:25px}footer p{font-size:.875rem}footer>span{font-size:.7rem;letter-spacing:.06em}dialog{border:0;padding:55px;max-width:580px;width:calc(100% - 32px);color:var(--ink);background:var(--paper);border-radius:12px;box-shadow:0 30px 120px #0004}dialog::backdrop{background:#082b25a8;backdrop-filter:blur(6px)}dialog h2{font-size:3rem;margin:20px 0 25px}dialog p,dialog li{font-size:1rem;line-height:1.65}dialog p+p{margin-top:15px}dialog ol{padding-left:22px}dialog li{padding:0 0 20px 5px}dialog .button{margin-top:20px}.close-dialog{position:absolute;right:18px;top:12px;border:0;background:none;font-size:2rem;padding:0 10px}
@media(min-width:1600px){.hero-image{object-position:center}.hero-shade{background:linear-gradient(90deg,#ee8613 0%,#ec851099 24%,#ed850f00 53%)}}
@media(max-width:900px){.nav{height:75px}.nav nav{gap:18px}.nav-cta{padding:11px 14px;font-size:.75rem}.nav-cta span{margin-left:8px}.brand{font-size:1.7rem}.hero-copy{top:25%}h1{font-size:4.8rem}.hero-image{object-position:60% center}.hero-shade{background:linear-gradient(90deg,#ed850fdd,#ed850f44 55%,transparent)}.details{gap:5%}.detail-crop{height:480px}.section{padding:75px 5%}.closing{padding:0}.product-image{height:390px}.model-heading{gap:25px}.model-heading p{max-width:240px}.color-section{grid-template-columns:1fr 1fr}.closing>img{height:570px}.closing>div{padding:45px 8%}footer{flex-wrap:wrap}.scene-bottom>span:first-child{display:none}}
@media(max-width:600px){html{scroll-padding-top:20px}.nav{padding:0 6%;height:75px}.nav nav{display:none}.nav-cta{font-size:.75rem}.brand{font-size:1.8rem}.story{height:165svh}.stage{min-height:720px}.hero-image{object-position:63% center}.hero-shade{background:linear-gradient(0deg,#ed850ff2 3%,#ed850f99 40%,#ed850f00 70%)}.hero-copy{top:auto;bottom:110px;left:6%}.hero-copy .eyebrow{font-size:.65rem}h1{font-size:clamp(3.4rem,12vw,4.7rem);margin:16px 0}.intro{font-size:1rem;margin-bottom:22px}.hero-image{height:78%;top:0}.second-copy{top:auto;bottom:160px;left:6%}.second-copy h2{font-size:3.8rem}.second-copy .eyebrow{max-width:250px}.scene-bottom{bottom:25px;left:6%;right:6%}.scene-bottom a{font-size:.75rem}.scene-count{font-size:.65rem}.section{padding:65px 6%}.section-top{align-items:start;gap:20px}.section-top>span{max-width:105px;text-align:right;font-size:.6rem}.model-heading{display:block;margin-top:34px}.model-heading h2{font-size:3.3rem}.model-heading p{max-width:100%;margin-top:25px;font-size:1rem}.product-stage{margin-top:30px}.product-image{height:260px;width:100%;margin-top:0}.giant-name{font-size:27vw;top:8%}.product-caption{padding:15px;font-size:.6rem;gap:15px}.product-caption a{font-size:.7rem}.details{display:flex;flex-direction:column;gap:40px}.detail-visual{position:relative;top:0;order:2;width:100%}.detail-crop{height:350px;border-radius:140px 140px 4px 4px}.detail-copy h2{font-size:3.8rem;margin-bottom:30px}.color-section{display:flex;flex-direction:column;align-items:stretch;gap:10px}.color-copy h2{font-size:3.8rem}.color-product{margin-top:10px}.fit{display:block}.fit h2{font-size:2.8rem}.fit-info{margin-top:30px}.closing{padding:0;display:flex;flex-direction:column}.closing>img{height:340px}.closing>div{padding:45px 6% 55px;width:100%}.closing h2{font-size:4.5rem}footer{padding:35px 6%;display:block}footer p{margin:20px 0}footer>span{font-size:.65rem}dialog{padding:40px 25px}dialog h2{font-size:2.5rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.story{height:100svh}.second-copy{display:none}.hero-image{transform:none!important}.hero-copy{opacity:1!important;transform:none!important}}

/* Editorial campaign: full-frame imagery, condensed type, quiet transitions. */
:root{--paper:#f6f6f2;--ink:#111;--teal:#0b0b0b;--line:#ffffff30;background:#0b0b0b;color:#f6f6f2}
h1,h2,.giant-name{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-weight:400;letter-spacing:-.025em;line-height:1.02;text-transform:uppercase}h2 em{font:inherit}.eyebrow{font-size:.875rem;letter-spacing:.11em}.nav{color:white;border-color:#ffffff35;height:96px}.brand{letter-spacing:-.06em}.nav nav{font-size:.875rem;gap:36px}.nav-cta{border-color:#ffffff80;border-radius:0;font-size:.875rem}.dark{background:#0b0b0b;color:white}.button{border-radius:0;font-size:1rem;padding:18px 23px}.story{height:180svh;background:#0b0b0b}.stage{min-height:660px}.hero-image{object-position:center;transform:none!important;will-change:auto}.hero-shade{background:linear-gradient(90deg,#25110270,transparent 42%),linear-gradient(0deg,#0b0b0b 0%,transparent 26%);opacity:1}.hero-copy{left:4%;top:24%;max-width:29%;color:white}.hero-copy .eyebrow{max-width:220px;font-size:.75rem}.hero-copy h1{font-size:clamp(4rem,7.5vw,8.5rem);margin:22px 0;line-height:.98;letter-spacing:-.025em}.hero-copy .intro{font-size:1rem;line-height:1.6}.hero-copy .button{gap:20px}.second-copy{left:4%;top:30%;max-width:90%;color:white;z-index:3}.second-copy h2{font-size:clamp(3rem,6.8vw,7rem);line-height:1.03}.scene-bottom{color:white;z-index:4;bottom:30px}.scene-bottom>span{font-size:.75rem}.story-progress{background:white;z-index:4}.section{padding:110px 5%}.model{padding-top:55px;padding-bottom:70px}.section-top{font-size:.75rem}.model-heading{margin-top:55px;align-items:end}.model-heading h2{font-size:clamp(3rem,6vw,6.8rem)}.model-heading p{color:#bdbdbd;font-size:1rem}.product-stage{border-radius:0;background:#e9e9e6;margin-top:55px}.giant-name{font-size:clamp(7rem,28vw,30rem);color:#11111112;top:4%}.product-image{height:560px}.product-caption{color:#111;font-size:.75rem}.details{background:#0b0b0b;gap:8%;padding-top:65px}.detail-crop{border-radius:0;background:#e9e9e6;height:auto;aspect-ratio:1}.detail-crop img{display:block;aspect-ratio:auto;object-fit:contain}.detail-copy h2{font-size:clamp(4rem,6.8vw,7rem);margin:25px 0 40px}.detail-copy .eyebrow,.image-label{color:#bbb}.image-label{font-size:.75rem;line-height:1.6}.detail-list p{color:#bdbdbd;font-size:1rem}.detail-list summary{font-size:1rem}.color-section{color:#111;--ink:#111}.color-copy h2{font-size:clamp(3.6rem,6vw,6.8rem)}.color-copy h2 em{font:inherit}.swatch{width:44px;height:44px}.fineprint{font-size:.8125rem}.fit{background:#0b0b0b}.fit-info>p{color:#bdbdbd}.fit h2{line-height:1.1}.measure-row span:last-child{color:#bdbdbd}.text-button{color:white;font-size:1rem}.closing{padding:0;color:white;background:#111}.closing>img{height:680px}.closing h2{font-size:clamp(4rem,6vw,7rem)}.closing .button{background:white;color:#111}footer{background:#0b0b0b;border-top:1px solid #ffffff25}footer>span{font-size:.75rem}dialog:not(#mobile-menu){color:#111;--line:#1113;--ink:#111;border-radius:0}.menu-toggle{display:none}.menu-close{border:0;background:transparent;color:white;font-size:1rem;position:absolute;right:24px;top:30px;padding:12px}.menu-toggle span{margin-left:16px}#mobile-menu{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;border:0;border-radius:0;background:#080808f5;color:white;padding:110px 24px;box-shadow:none}#mobile-menu::backdrop{background:#0008}#mobile-menu nav{display:flex;flex-direction:column;gap:30px}#mobile-menu nav a{font-family:'Anton',Impact,sans-serif;font-size:clamp(2.5rem,12vw,5rem);text-transform:uppercase;line-height:1.2}.reveal{opacity:1;transform:none}.motion-ready .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}.motion-ready .reveal.is-visible{opacity:1;transform:none}.motion-ready .model-heading>p{transition-delay:.15s}
@media(min-width:1600px){.hero-shade{background:linear-gradient(90deg,#25110270,transparent 42%),linear-gradient(0deg,#0b0b0b,transparent 26%)}}
@media(max-width:1000px){.hero-copy h1{font-size:7.6vw}.hero-copy{max-width:31%}.hero-copy .eyebrow{font-size:.75rem}.hero-copy .button{font-size:.875rem;padding:15px;gap:12px}.hero-copy .intro{font-size:1rem}.section{padding:80px 5%}.closing{padding:0}.nav{padding:0 4%;height:80px}.nav nav{gap:20px}.nav-cta{display:none}.product-image{height:430px}.details{gap:5%}.stage{min-height:660px}}
@media(max-width:767px){html{scroll-padding-top:25px}.nav{padding:0 24px;height:80px}.nav nav{display:none}.menu-toggle{display:block;border:1px solid #ffffff80;color:white;background:#1112;padding:11px 14px;font-size:.875rem}.story{height:170svh}.stage{height:100svh;min-height:760px}.hero-image{height:65%;width:100%;top:0;object-position:62% center}.hero-shade{background:linear-gradient(0deg,#0b0b0b 0%,#0b0b0b 34%,transparent 65%)}.hero-copy{left:24px;right:24px;top:auto;bottom:80px;max-width:none}.hero-copy h1{font-size:clamp(3rem,13vw,5rem);line-height:1.02;margin:14px 0}.hero-copy .eyebrow{font-size:.75rem;max-width:none}.hero-copy .intro{margin-bottom:18px}.hero-copy .button{font-size:1rem;padding:15px 20px}.scene-bottom{bottom:22px;left:24px;right:24px}.scene-bottom>span:first-child{display:none}.scene-bottom a{font-size:.8125rem;max-width:80%}.second-copy{left:24px;right:24px;top:auto;bottom:140px;max-width:none}.second-copy h2{font-size:clamp(2.7rem,10vw,4.5rem)}.second-copy .eyebrow{font-size:.75rem}.section{padding:65px 24px}.section-top>span{font-size:.75rem;line-height:1.5}.section-top .eyebrow{max-width:170px}.model-heading{display:block;margin-top:34px}.model-heading h2{font-size:clamp(2.5rem,8.5vw,4rem)}.model-heading p{max-width:100%;margin-top:24px}.product-image{width:100%;height:300px}.product-caption{font-size:.75rem;padding:18px;gap:18px;flex-wrap:wrap}.product-caption a{font-size:.875rem}.details{display:flex;flex-direction:column;gap:35px}.detail-visual{position:static;order:0;width:100%}.detail-copy h2{font-size:clamp(3.5rem,13vw,5rem)}.color-section{display:flex;flex-direction:column;align-items:stretch}.color-copy h2{font-size:clamp(3.2rem,11vw,5rem)}.fit{display:block}.fit h2{font-size:clamp(2.4rem,8vw,3.5rem)}.fit-info{margin-top:32px}.closing{padding:0;display:flex;flex-direction:column}.closing>img{height:360px}.closing>div{padding:50px 24px}.closing h2{font-size:4.5rem}footer{padding:35px 24px;display:block}footer p{margin:20px 0}.measure-row{font-size:.875rem}.image-label{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){.story{height:auto}.stage{position:relative}.hero-copy{visibility:visible!important}.hero-shade{opacity:1!important}.motion-ready .reveal{opacity:1;transform:none}.second-copy{display:none}}

/* Full-body campaign artwork: preserve the right-aligned character. */
.hero-image{object-position:right center}
@media(max-width:767px){.stage{min-height:940px}.hero-image{height:43%;object-position:right center}.hero-shade{background:linear-gradient(0deg,#0b0b0b 0%,#0b0b0b 55%,transparent 68%)}.hero-copy{bottom:80px}}

/* Scroll-driven lens color layer shares the photograph's exact crop. */
.story{height:280svh}.hero-lens-colors{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;pointer-events:none}.hero-image{will-change:opacity}
@media(max-width:767px){.story{height:calc(940px + 170svh)}.hero-lens-colors{height:43%;object-position:right center}}
@media(prefers-reduced-motion:reduce){.story{height:auto}.hero-lens-colors{display:none}}

.hero-color-legend{font-size:clamp(1.125rem,1.5vw,1.5rem)!important;font-weight:600;min-height:3.2em;max-width:22ch;text-wrap:balance}.second-copy{display:none}

/* Original Camaleón palette, retaining the current layout and scroll story. */
:root{--orange:#ed850f;--yellow:#ffd529;--teal:#123f3a;--paper:#fafaf6;--ink:#163b33;--line:#163b3330;color:var(--ink);background:var(--paper)}
.nav{color:var(--ink);border-color:#163b332c}.nav-cta{border-color:var(--ink)}
.story{background:var(--orange)}.hero-copy,.second-copy,.scene-bottom{color:var(--ink)}
.hero-shade{background:linear-gradient(0deg,#ed850f 0%,transparent 26%)}.story-progress{background:var(--ink)}
.dark,.closing .button{background:var(--ink);color:var(--paper)}
.model{background:var(--teal);color:var(--paper)}.model-heading p{color:#e0e9e3}
.product-stage{background:var(--paper);color:var(--teal)}.product-caption{color:var(--teal)}.giant-name{color:#163b3315}
.details,.fit{background:var(--paper);color:var(--ink)}.detail-crop{background:#f2f2e9}
.detail-copy .eyebrow,.image-label{color:var(--ink)}.detail-list p,.fit-info>p{color:#486058}
.color-section{color:#163b33;--ink:#163b33}.measure-row span:last-child{color:#65756d}.text-button{color:var(--ink)}
.closing{background:var(--orange);color:var(--ink)}footer{background:var(--teal);color:var(--paper);border-color:#fafaf625}
dialog:not(#mobile-menu){color:#163b33;--ink:#163b33;--line:#163b3330;background:var(--paper)}
#mobile-menu{background:#123f3af5;color:var(--paper)}#mobile-menu::backdrop{background:#082b2580}.menu-close{color:var(--paper)}
.menu-toggle{color:var(--ink);border-color:#163b3380;background:#ed850f33}
@media(max-width:767px){.hero-shade{background:linear-gradient(0deg,#ed850f 0%,#ed850f 55%,transparent 68%)}}

/* Reserve a stable three-line title while the scroll chapter changes. */
.hero-copy h1{min-height:3em}.hero-copy>.eyebrow{min-height:3em}

/* The scene tint follows the same object-fit geometry as the photo and frames. */
.story{--scene-bg:#ed850f;background:var(--scene-bg)}
.hero-scene-colors{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;pointer-events:none}
.hero-shade{background:linear-gradient(0deg,var(--scene-bg) 0%,transparent 26%)}
@media(max-width:767px){.hero-scene-colors{height:43%}.hero-shade{background:linear-gradient(0deg,var(--scene-bg) 0%,var(--scene-bg) 55%,transparent 68%)}}
@media(prefers-reduced-motion:reduce){.hero-scene-colors{display:none}.story{--scene-bg:#ed850f}}

/* Consistent directional icons for calls to action. */
.action-icon{display:inline-block;flex:none;width:24px;height:24px;vertical-align:middle;transition:transform .2s ease}.nav-cta,.text-button{display:inline-flex;align-items:center;gap:18px}.button:hover .action-icon,.nav-cta:hover .action-icon,.text-button:hover .action-icon{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.action-icon{transition:none}.button:hover .action-icon,.nav-cta:hover .action-icon,.text-button:hover .action-icon{transform:none}}

@media(max-width:1000px){.nav-cta{display:none}}

/* Frosted white navigation with links grouped against the right edge. */
.nav{background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.65);color:#163b33;justify-content:flex-start;gap:32px}
.nav>.brand{flex-shrink:0}.nav>nav{margin-left:auto}.nav>.nav-cta{flex-shrink:0}.nav>.menu-toggle{margin-left:auto;background:rgba(255,255,255,.4)}
@media(max-width:767px){.nav{gap:16px}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav{background:rgba(255,255,255,.96)}}

/* Wider brand typography with comfortable spacing and responsive line lengths. */
h1,h2{font-family:'Bricolage Grotesque',Arial,sans-serif;font-weight:800;font-stretch:normal;letter-spacing:-.035em;line-height:1.05}
.hero-copy{max-width:42%}.hero-copy h1{font-family:'Bricolage Grotesque',Arial,sans-serif;font-size:clamp(3.5rem,5.7vw,6.6rem);font-weight:800;letter-spacing:-.035em;line-height:1.05;min-height:3.15em}
.model-heading h2{font-size:clamp(2.5rem,4.6vw,5rem)}.detail-copy h2{font-size:clamp(3rem,5.5vw,5.8rem)}
@media(max-width:767px){.hero-copy{max-width:none}.hero-copy h1{font-size:clamp(2.7rem,10.7vw,4.8rem)}.model-heading h2{font-size:clamp(1.9rem,7.4vw,3.4rem)}.detail-copy h2{font-size:clamp(2.6rem,10vw,4.3rem)}}

/* Orbit introduction: focused product spread in the original brand palette. */
.model.section{padding:80px 5% 100px}.model>.section-top{padding-bottom:26px;border-bottom:1px solid #fafaf632;gap:24px}.model>.section-top>span{font-size:.8125rem;letter-spacing:.1em;color:#d4e5dd}
.model-layout{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:6%;align-items:center;margin-top:52px}
.model .model-heading{display:block;margin:0}.model-name{display:block;font-family:'Bricolage Grotesque',Arial,sans-serif;font-weight:800;font-size:clamp(3.5rem,6.5vw,7rem);line-height:1;letter-spacing:-.06em;margin-bottom:28px;color:#ffd529}
.model .model-heading h2{font-size:clamp(2rem,3.15vw,3.8rem);line-height:1.12;letter-spacing:-.04em;text-transform:none;margin:0 0 28px}.model .model-heading h2 span{color:#ffd529}
.model .model-heading>p{max-width:34ch;margin:0;font-size:1.125rem;line-height:1.65;color:#fafaf6}.model .model-heading>.model-description{font-size:1rem;color:#c3d7ce;margin-top:18px;max-width:39ch}
.model-link{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;padding:17px 0 13px;margin-top:30px;border-bottom:1px solid #ffd529;color:#ffd529;font-size:1rem;font-weight:600}.model-link:hover .action-icon{transform:translateX(3px)}
.model .product-stage{margin:0;background:#fafaf6;border-radius:12px;color:#163b33;min-width:0}.model-product-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 28px 0;font-size:.75rem;letter-spacing:.12em}.model-edition{display:inline-block;padding:8px 12px;background:#ffd529;font-weight:700}
.model .product-image{width:100%;height:auto;max-width:none;aspect-ratio:3/2;object-fit:contain;margin:12px 0 0;mix-blend-mode:multiply}.model .product-caption{padding:20px 28px 28px;align-items:end;gap:20px;font-size:1rem;letter-spacing:0;line-height:1.5}.model .product-caption strong{font-size:1.65rem;font-family:'Bricolage Grotesque',Arial,sans-serif;letter-spacing:-.03em}.model-concept{font-size:.8125rem;color:#486058;text-align:right}
@media(max-width:767px){.model.section{padding:55px 24px 65px}.model>.section-top{align-items:start}.model>.section-top>span{max-width:140px;font-size:.75rem;line-height:1.5}.model-layout{grid-template-columns:1fr;gap:36px;margin-top:32px}.model-name{font-size:4rem;margin-bottom:22px}.model .model-heading h2{font-size:clamp(2rem,7.5vw,3rem);margin-bottom:22px}.model .model-heading>p{font-size:1.0625rem}.model-product-top{padding:20px 20px 0}.model .product-caption{padding:18px 20px 22px;flex-wrap:wrap}.model .product-caption strong{font-size:1.5rem}}
@media(prefers-reduced-motion:reduce){.model-link:hover .action-icon{transform:none}}

/* Match Orbit headings to the shared heading typography. */
.model .model-name,.model .model-heading h2{font-family:'Bricolage Grotesque',Arial,sans-serif;font-weight:800;font-stretch:normal;letter-spacing:-.035em;line-height:1.05;text-transform:uppercase}

/* Wider hero copy and two-line titles across all scroll chapters. */
.hero-copy{width:48%;max-width:48%}.hero-copy h1{font-size:clamp(3rem,5.3vw,6.2rem);min-height:2.1em;max-width:none;overflow-wrap:normal}.hero-copy>.eyebrow{max-width:none;min-height:1.5em}.hero-color-legend{max-width:30ch;min-height:1.6em}
@media(max-width:767px){.hero-copy{width:auto;max-width:none;left:24px;right:24px}.hero-copy h1{font-size:clamp(1.9rem,8.5vw,4rem)}.hero-copy>.eyebrow{min-height:3em}}


/* Hero: titular grande anclado al piso del camaleón, botón y colores en una fila. */
.hero-copy{top:auto;bottom:13%;width:58%;max-width:58%}
.hero-copy>.eyebrow{min-height:0;font-size:.8rem}
.hero-copy h1{font-size:clamp(3.6rem,8.2vw,9.6rem);line-height:.92;letter-spacing:-.045em;min-height:0;margin:18px 0 20px}
.hero-color-legend{font-size:clamp(1.25rem,1.9vw,1.9rem)!important;min-height:0;max-width:26ch;margin-bottom:30px}
.hero-actions{display:flex;align-items:center;gap:34px;flex-wrap:wrap}
.hero-hues{display:flex;align-items:center;gap:12px;font-size:.8rem;font-weight:600;letter-spacing:.04em}
.hue{width:16px;height:16px;border-radius:50%;background:var(--hue);border:1px solid #163b3355;position:relative;transition:transform .3s}
.hue.is-active{transform:scale(1.25)}.hue.is-active:after{content:'';position:absolute;inset:-5px;border:1.5px solid var(--ink);border-radius:50%}
.hue-name{margin-left:6px;min-width:11ch}
@media(max-width:767px){.hero-copy{bottom:80px;width:auto;max-width:none}.hero-copy h1{font-size:clamp(2.8rem,12vw,4.8rem)}.hero-actions{gap:18px}.hue-name{display:none}}
@media(prefers-reduced-motion:reduce){.hue{transition:none}}

/* Mostrilio: la landing pasa de producto a servicio. Mismo sistema visual, piezas nuevas. */
.story{--scene-bg:#fdc931}
@media(prefers-reduced-motion:reduce){.story{--scene-bg:#fdc931}}

/* Tres frentes de servicio dentro de la tarjeta de la sección oscura. */
.service-list{list-style:none;margin:0;padding:4px 28px 0}
.service-list>li{display:flex;gap:22px;padding:24px 0;border-bottom:1px solid #163b3320}
.service-list>li:first-child{padding-top:18px}
.service-number{font-family:'Bricolage Grotesque',Arial,sans-serif;font-weight:800;font-size:.9rem;letter-spacing:.04em;color:#163b3366;padding-top:5px;flex:none}
.service-list h3{margin:0 0 8px;font-family:'Bricolage Grotesque',Arial,sans-serif;font-weight:800;font-size:1.35rem;letter-spacing:-.03em;line-height:1.15;color:#163b33}
.service-list p{margin:0;font-size:.95rem;line-height:1.6;color:#486058}

/* La sección de color ahora elige stack: pastillas con texto en vez de círculos. */
.color-section{background:#cfe3f2}
.color-copy h2{font-size:clamp(2.4rem,4vw,4.6rem);text-wrap:balance}
.swatches{flex-wrap:wrap;gap:12px}
.swatch{width:auto;height:auto;border-radius:0;background:transparent;border:1px solid #163b3355;padding:13px 22px;font-size:.9rem;font-weight:600;letter-spacing:.01em;color:#163b33;transition:background .2s,color .2s}
.swatch:hover{background:#163b3312}
.swatch.selected{background:#163b33;color:#fafaf6;border-color:#163b33}
.swatch.selected:after{display:none}
.stack-panel{padding:52px 12% 52px 0}
.stack-lead{font-size:1.15rem;line-height:1.6;margin:0 0 30px;max-width:34ch}
.stack-tools{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.stack-tools li{border:1px solid #163b3340;padding:10px 15px;font-size:.85rem;font-weight:600;background:#ffffff5c}
.color-product .color-number{margin-top:34px}
.color-product{overflow:visible}

/* Cierre sin fotografía: un solo bloque a todo el ancho. */
.closing{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:6%;align-items:center;padding:0}
.closing>div{padding:110px 0 110px 5%;max-width:none}
.closing-next{padding:110px 5% 110px 0}
.next-steps{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid #163b3333}
.next-steps li{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid #163b3333}
.next-steps span{font-family:'Bricolage Grotesque',Arial,sans-serif;font-weight:800;font-size:.9rem;letter-spacing:.04em;color:#163b3399;flex:none;padding-top:3px}
.next-steps p{margin:0;font-size:1rem;line-height:1.6}
.closing p strong{font-weight:700}

/* La foto del proceso llena su marco en lugar de flotar sobre el fondo. */
.detail-crop img{width:100%;height:100%;object-fit:cover;object-position:96% center;mix-blend-mode:normal}

@media(max-width:767px){
 .service-list{padding:4px 20px 0}
 .service-list li{gap:16px;padding:20px 0}
 .service-list h3{font-size:1.2rem}
 .stack-panel{padding:8px 0 30px}
 .stack-lead{font-size:1.05rem;max-width:none}
 .closing{display:block}
 .closing>div{padding:60px 24px 30px}
 .closing-next{padding:0 24px 60px}
}

/* En móvil el escenario medía más que la pantalla y el botón del hero quedaba fuera. */
@media(max-width:767px){.stage{min-height:640px}.story{height:280svh}}
@media(max-width:767px) and (prefers-reduced-motion:reduce){.story{height:auto}}

/* Inspiración BM&M: titular en dos capas, marquesina del vocabulario y chips de herramienta. */
.hero-copy h1 .title-line{display:block}
.hero-copy h1 .outline{color:transparent;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
@media(max-width:767px){.hero-copy h1 .outline{-webkit-text-stroke-width:1.6px}}

.ticker{background:var(--paper);color:var(--ink);overflow:hidden;padding:20px 0;border-bottom:1px solid #163b3320}
.ticker-track{display:flex;width:max-content;animation:ticker-scroll 44s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-group{display:flex;align-items:center;gap:30px;padding-right:30px;flex:none}
.ticker-group span{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-size:clamp(1.15rem,2vw,1.75rem);text-transform:uppercase;letter-spacing:.015em;white-space:nowrap;line-height:1}
.ticker-group span.tool{color:var(--orange)}
.ticker-group i{width:8px;height:8px;background:var(--orange);transform:rotate(45deg);flex:none}
@keyframes ticker-scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}

.service-tags{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.service-tags li{border:1px solid #163b3333;background:#163b330a;padding:6px 11px;font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#2c5147}

/* Prueba tipográfica: DM Sans en toda la página, salvo el logotipo. */
:root,body,button,input,select,textarea,summary{font-family:'DM Sans','Instrument Sans',Arial,sans-serif}
h1,h2,h3,.giant-name,.model-name,.service-number,.next-steps span,.ticker-group span{font-family:'DM Sans',Arial,sans-serif}
h1,h2,.giant-name{font-weight:800;letter-spacing:-.045em;line-height:.98}
.hero-copy h1{font-size:clamp(3rem,6.6vw,7.6rem);letter-spacing:-.05em}
.hero-copy h1 .outline{-webkit-text-stroke-width:3px}
.ticker-group span{font-weight:800;font-size:clamp(1rem,1.6vw,1.35rem);letter-spacing:-.01em}
.detail-copy h2,.closing h2,.color-copy h2{letter-spacing:-.045em}
.brand{font-family:'Bricolage Grotesque',Arial,sans-serif}

/* El hero es ahora tres fotos cruzadas, una por capítulo, en vez de una recoloreada. */
.hero-scenes{position:absolute;inset:0;overflow:hidden}
.hero-scenes .hero-image{position:absolute;inset:0;top:0;width:100%;height:100%;object-fit:cover;object-position:right center;will-change:opacity}
.hero-scenes .hero-image:first-child{opacity:1}
.hero-scenes .hero-image+.hero-image{opacity:0}
@media(max-width:767px){.hero-scenes{inset:0 0 auto 0;height:43%}.hero-scenes .hero-image{height:100%}}
@media(prefers-reduced-motion:reduce){.hero-scenes .hero-image+.hero-image{display:none}}
.hero-copy h1{line-height:1.04}

/* "Lo que hacemos": un solo titular en la columna izquierda, que además acompaña el scroll de la tarjeta. */
.model-layout{align-items:stretch;gap:7%}
.model .model-heading{min-width:0}
.model-heading-inner{position:sticky;top:104px}
.model .model-heading h2{font-size:clamp(2.4rem,4.1vw,4.4rem);line-height:1.04;margin:0 0 26px}
.model .model-heading h2 span{color:#fdc931}
.model .model-heading>.model-heading-inner>p{max-width:36ch;margin:0;font-size:1.0625rem;line-height:1.65;color:#e6efe9}
.model .model-heading>.model-heading-inner>.model-description{font-size:1rem;color:#a9c2b8;margin-top:16px;max-width:38ch}
.model-link{border-color:#fdc931;color:#fdc931;margin-top:34px}

/* La tarjeta pierde el redondeo para no salirse del sistema, y los tres frentes ganan peso. */
.model .product-stage{border-radius:0}
.model-product-top{padding:26px 30px 0;color:#65756d}
.service-list{padding:6px 30px 0}
.service-list>li{gap:26px;padding:26px 0}
.service-number{font-size:1.05rem;color:#163b3345;padding-top:3px;min-width:2.4ch}
.service-list h3{font-size:1.45rem;margin-bottom:10px}
.service-tags li{background:none;border-color:#163b3326;color:#486058;font-size:.6875rem;display:block;padding:6px 12px}
.model .product-caption{padding:24px 30px 30px}
@media(max-width:900px){.model-heading-inner{position:static}}
@media(max-width:767px){.model-product-top,.service-list{padding-left:22px;padding-right:22px}.model .product-caption{padding:20px 22px 24px}}
.service-tags li{display:inline-flex;align-items:center;line-height:1.2}

/* Un frente manda y los otros dos lo acompañan. Las herramientas van dentro de la frase, no en pastillas. */

/* Fuera la tarjeta. Los tres frentes se leen como un índice sobre el verde, no como tarjetas de producto. */
.model.section{padding-top:92px;padding-bottom:92px}
.model-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7%;align-items:end;padding-bottom:60px}
.model-intro h2{font-size:clamp(2.6rem,5vw,5.4rem);line-height:1.02;margin:0;letter-spacing:-.04em}
.model-intro h2 span{color:#fdc931}
.model-intro-text p{max-width:46ch;font-size:1.0625rem;line-height:1.65;color:#e6efe9;margin:0}
.model-intro-text .model-description{margin-top:16px;color:#a9c2b8}

.service-list{list-style:none;margin:0;padding:0;border-top:1px solid #fafaf62e}
.service-list>li,.service-list>li.service-lead{display:grid;grid-template-columns:auto minmax(0,.85fr) minmax(0,1.15fr);gap:5%;align-items:start;padding:40px 0;border-bottom:1px solid #fafaf62e}
.service-number{display:block;font-size:.8rem;letter-spacing:.14em;color:#fafaf675;padding-top:9px;min-width:3.5ch;margin:0}
.service-list h3{font-size:clamp(1.5rem,2.7vw,2.7rem);line-height:1;letter-spacing:-.03em;text-transform:uppercase;color:#fafaf6;margin:0;font-weight:800}
.service-list p{font-size:1.0625rem;line-height:1.6;color:#bcd0c8;margin:0;max-width:54ch}
.service-list>li.service-lead h3{font-size:clamp(2rem,4vw,4.1rem)}
.service-list>li.service-lead p{font-size:1.1875rem;line-height:1.55;color:#eef4f0}
.service-list>li.service-lead .service-number{color:#fdc931;padding-top:14px}

.model-foot{display:flex;align-items:center;justify-content:space-between;gap:40px;padding-top:46px}
.model-foot p{margin:0;font-size:1.0625rem;line-height:1.6;color:#e6efe9;max-width:46ch}
.model-foot .model-link{margin:0;flex:none}
@media(max-width:900px){.model-intro{grid-template-columns:1fr;gap:28px;align-items:start}
 .service-list>li,.service-list>li.service-lead{grid-template-columns:auto minmax(0,1fr);gap:22px;padding:30px 0}
 .service-list p{grid-column:2}
 .model-foot{flex-direction:column;align-items:start;gap:22px}}

/* "Cómo trabajamos": el retrato sale del rectángulo. Óvalo irregular, no una elipse perfecta. */
.detail-crop{aspect-ratio:5/6;border-radius:58% 42% 52% 48% / 47% 50% 50% 53%;background:#f2f2e9}
.detail-crop img{object-position:95% center}
.image-label{margin-top:24px;text-align:center;max-width:34ch;margin-left:auto;margin-right:auto}
@media(max-width:767px){.detail-crop{aspect-ratio:1;border-radius:56% 44% 50% 50% / 48% 50% 50% 52%}}
/* El óvalo baja de tamaño: es ambiente, no argumento. El acordeón manda en esta sección. */
.detail-crop{width:76%;margin-right:auto}
.image-label{text-align:left;margin-left:0;max-width:30ch}
@media(max-width:767px){.detail-crop{width:88%}}
/* El pie sigue al óvalo: mismo ancho que la forma, centrado bajo la curva y pegado a ella. */
.image-label{width:76%;max-width:none;margin:18px 0 0;text-align:center;text-wrap:balance}
@media(max-width:767px){.image-label{width:88%}}

/* El cierre y el pie son ahora un solo bloque: la página termina una vez, no dos. */
footer.closing{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:6%;row-gap:0;align-items:start;background:var(--teal);color:var(--paper);padding:0;border-top:0;overflow:hidden}
footer.closing>div{padding:104px 0 20px 5%;max-width:none}
footer.closing .closing-next{padding:104px 5% 20px 0}
footer.closing .footer-base{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:26px;margin:0 5%;padding:24px 0 34px;border-top:1px solid #163b3333}
footer.closing .footer-base .brand{font-size:1.7rem;color:var(--ink)}
footer.closing .footer-base p{font-size:.9375rem;margin:0}
footer.closing .footer-base>span{font-size:.75rem;letter-spacing:.06em}
@media(max-width:767px){footer.closing{display:flex;flex-direction:column;padding:0}
 footer.closing>div{padding:48px 24px 10px}
 footer.closing .closing-next{padding:10px 24px 20px}
 footer.closing .footer-base{margin:0 24px;padding:22px 0 30px;display:block}
 footer.closing .footer-base p{margin:16px 0}}
footer.closing h2{line-height:1.07;margin:22px 0 26px}
/* El pie vuelve al verde de la casa: todo lo que iba en tinta se invierte a papel. */
footer.closing .eyebrow,footer.closing h2,footer.closing .next-steps p{color:var(--paper)}
footer.closing>div>p{color:#dbe6e0}
footer.closing .fineprint{color:#a9c2b8;opacity:1}
footer.closing #closing-color{color:#fdc931}
footer.closing .next-steps{border-top-color:#fafaf62e}
footer.closing .next-steps li{border-bottom-color:#fafaf62e}
footer.closing .next-steps span{color:#fafaf675}
footer.closing .button.dark{background:var(--paper);color:var(--teal)}
footer.closing .footer-base{border-top-color:#fafaf62e}
footer.closing .footer-base .brand{color:var(--paper)}

/* Isotipo: el casco del robot junto al logotipo. Va como máscara para tomar el color del contexto. */
.brand{display:inline-flex;align-items:center;gap:.3em}
.brand-mark{display:block;flex:none;width:1.12em;height:.84em;background:currentColor;-webkit-mask:url(assets/isotipo.png) center/contain no-repeat;mask:url(assets/isotipo.png) center/contain no-repeat}
@media(max-width:767px){.brand-mark{width:1.02em;height:.76em}}
/* La regla vieja de .brand span era para un ® y encogía el texto del logotipo. */
.brand>span:not(.brand-mark){font-size:inherit;letter-spacing:inherit;vertical-align:baseline;margin:0;display:inline}
.brand>.brand-mark{font-size:inherit;width:1.55em;height:1.2em;margin-top:-.1em}
@media(max-width:767px){.brand>.brand-mark{width:1.4em;height:1.08em}}

/* "Tu stack": el selector deja de ser tres botones y pasa a ser un índice de caminos. */
.color-section{align-items:start;gap:7%;transition:background .5s ease}
.color-copy h2{margin:22px 0 20px}
.color-copy>p:not(.eyebrow){font-size:1.0625rem;line-height:1.65;max-width:44ch}
.stack-paths{list-style:none;margin:38px 0 0;padding:0;border-top:1px solid #163b3326}
.stack-paths li{border-bottom:1px solid #163b3326}
.stack-paths .path{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:baseline;width:100%;text-align:left;background:none;border:0;padding:20px 0;color:inherit;transition:opacity .2s}
.stack-paths .path:not(.selected){opacity:.5}
.stack-paths .path:hover{opacity:1}
.path-number{font-size:.75rem;letter-spacing:.14em}
.path-name{font-size:1.65rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.stack-paths .selected .path-name{box-shadow:inset 0 -.14em currentColor}
.path-note{font-size:.8125rem;text-align:right;line-height:1.4}

.color-product{display:flex;flex-direction:column;justify-content:center;gap:0;padding:0;overflow:visible}
.stack-lead{font-size:1.3125rem;line-height:1.5;margin:0;max-width:40ch;font-weight:500}
.stack-against{margin:28px 0 0;padding-top:26px;border-top:1px solid #163b3326;font-size:1rem;line-height:1.65;max-width:42ch;color:#2f4f47}
@media(max-width:900px){.color-section{gap:5%}.stack-lead{font-size:1.1875rem}}
@media(max-width:767px){.stack-paths{margin-top:28px}.stack-paths .path{grid-template-columns:auto minmax(0,1fr);gap:16px;padding:16px 0}
 .path-note{grid-column:2;text-align:left;margin-top:4px}
 .color-product{margin-top:30px}.stack-against{margin-top:22px;padding-top:22px}}
@media(prefers-reduced-motion:reduce){.color-section{transition:none}}
.path-name{justify-self:start}
.stack-against{display:block}
.against-label{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:10px;opacity:.7}

/* "Tu stack" se cuenta sola al bajar: escenario fijo y tres capítulos, sin quitarle el clic a nadie. */
.color-section{display:block;height:280svh;padding:0;position:relative}
.stack-stage{position:sticky;top:0;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:7%;align-items:center;padding:0 5%;overflow:hidden}
.stack-progress{position:absolute;left:0;bottom:0;height:3px;width:0;background:currentColor;opacity:.55}
@media(max-width:900px){.stack-stage{gap:5%}}
@media(max-width:767px){.color-section{height:auto}.stack-stage{position:static;min-height:0;display:flex;flex-direction:column;padding:60px 24px 70px}.stack-progress{display:none}}
@media(prefers-reduced-motion:reduce){.color-section{height:auto}.stack-stage{position:static;min-height:0;padding:90px 5%}.stack-progress{display:none}}

/* Sin números decorativos: solo quedan donde el orden es el contenido (proceso y qué pasa después). */
.service-list>li,.service-list>li.service-lead{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.stack-paths .path{grid-template-columns:minmax(0,1fr) auto}
@media(max-width:767px){.service-list>li,.service-list>li.service-lead{grid-template-columns:1fr}
 .service-list p{grid-column:1}
 .stack-paths .path{grid-template-columns:1fr}.path-note{grid-column:1}}

/* El titular de la sección deja de partirse en cuatro líneas dentro de media columna:
   corre a todo el ancho y los dos párrafos bajan a dos columnas parejas. */
.model-intro{display:block;padding-bottom:56px}
.model-intro h2{font-size:clamp(2.3rem,6.4vw,6rem);line-height:1.02;margin:0 0 38px;max-width:none;text-wrap:balance}
.model-intro-text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6%;padding-top:34px;border-top:1px solid #fafaf62e}
.model .model-intro-text p,.model .model-intro-text .model-description{margin:0;max-width:46ch;font-size:1.0625rem;line-height:1.65}
@media(max-width:767px){.model-intro{padding-bottom:36px}.model-intro h2{margin-bottom:26px}
 .model-intro-text{grid-template-columns:1fr;gap:16px;padding-top:24px}}
/* Un solo párrafo de apoyo: deja de ser una rejilla de dos y se alinea a la derecha del titular. */
.model-intro-text{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.model-intro-text>p:only-child{grid-column:2}
@media(max-width:767px){.model-intro-text>p:only-child{grid-column:1}}

/* "Lo que hacemos" en bandas: cada frente ocupa su franja de borde a borde y su propio color.
   El verde abre y cierra la sección, los tres colores van en medio. */
.model,.model.section{padding:0;background:none}
.band{padding:74px 5%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6%;align-items:start}
.band-intro{display:block;background:var(--teal);color:var(--paper);padding:96px 5% 88px}
.band-intro h2{font-size:clamp(2.3rem,6.2vw,5.8rem);line-height:1.02;margin:0 0 34px;max-width:none;text-wrap:balance}
.band-intro h2 span{color:#fdc931}
.band-intro>p{margin:0 0 0 auto;max-width:46ch;font-size:1.0625rem;line-height:1.65;color:#e6efe9}
.band h3{margin:0;font-size:clamp(1.9rem,4.2vw,3.9rem);line-height:1;letter-spacing:-.03em;text-transform:uppercase;font-weight:800}
.band p{margin:0;font-size:1.0625rem;line-height:1.65;max-width:48ch}
.band-a{background:#fdc931;color:var(--ink)}
.band-b{background:var(--orange);color:var(--ink)}
.band-c{background:#b9e3d8;color:var(--ink)}
.band-b h3{grid-column:2;grid-row:1;justify-self:end;text-align:right}
.band-b p{grid-column:1;grid-row:1;justify-self:end}
.band-foot{background:var(--teal);color:var(--paper);padding:44px 5% 52px;align-items:center}
.band-foot p{margin:0;max-width:46ch;color:#e6efe9}
.band-foot .model-link{margin:0;justify-self:end}
@media(max-width:767px){.band{padding:48px 24px;grid-template-columns:1fr;gap:18px}
 .band-intro{padding:56px 24px 48px}.band-intro h2{margin-bottom:24px}.band-intro>p{margin-left:0}
 .band-b h3,.band-b p{grid-column:1;justify-self:start;text-align:left}
 .band-b h3{grid-row:1}.band-b p{grid-row:2}
 .band-foot{padding:36px 24px 44px;gap:22px}.band-foot .model-link{justify-self:start}}
.band-intro>p{margin-left:auto}
@media(max-width:767px){.band-intro>p{margin-left:0}}
.band-b p{justify-self:start}
/* Retrato vertical: ya no hay que ampliar una foto apaisada, el recorte casi no toca al robot. */
.detail-crop img{object-position:center 42%}

/* Redes en el pie. Todavía sin enlace: son marcas, no botones, hasta que existan los perfiles. */
.social{list-style:none;display:flex;align-items:center;gap:22px;margin:26px 0 0;padding:0}
.social-icon{display:block;width:26px;height:26px;color:var(--paper);opacity:.9}
.social-icon svg{width:100%;height:100%;display:block}
footer.closing .closing-next .fineprint{margin-top:22px;color:#a9c2b8}
@media(max-width:767px){.social{gap:20px;margin-top:20px}.social-icon{width:24px;height:24px}}
footer.closing .closing-next{align-self:end;padding-bottom:26px}
@media(max-width:767px){footer.closing .closing-next{align-self:start;padding-bottom:0}}

/* Ajustes de teléfono detectados al probar a 390 px. */
@media(max-width:767px){
 footer.closing h2{font-size:clamp(2.4rem,11.5vw,3.4rem);line-height:1.05;margin:18px 0 22px}
 footer.closing .closing-next{padding-bottom:34px}
 .social{margin-top:18px}
}

/* El hero se apila en todo lo que no sea escritorio, no solo en teléfono.
   Dos fallas que esto corrige: la franja recortaba la cabeza del robot en ventanas bajas,
   y entre 768 y 1000 px el titular caía encima de la foto sin poder leerse. */
@media(max-width:1000px){
 /* La barra es opaca y se montaba sobre la cabeza del robot: la franja arranca debajo de ella. */
 .nav{height:80px}
 .hero-scenes{inset:80px 0 auto 0;height:auto;width:100%;aspect-ratio:1672/941}
 .hero-scenes .hero-image{height:100%;top:0}
 .hero-shade{background:linear-gradient(0deg,var(--scene-bg) 0%,var(--scene-bg) 54%,transparent 67%)}
 .hero-copy{left:24px;right:24px;top:auto;bottom:80px;max-width:none;width:auto}
 .hero-copy h1{font-size:clamp(2.6rem,8vw,4.4rem)}
 .hero-copy .eyebrow{max-width:none}
 .scene-bottom{left:24px;right:24px}
 .nav nav{display:none}
 .menu-toggle{display:block}
}
@media(max-width:1000px){
 /* Con la foto ya apilada, el velo de abajo solo tiene que fundir su borde inferior con la página.
    Antes cubría media pantalla y desteñía los pies del robot. */
 .hero-shade{display:none}
 .hero-scenes{position:absolute}
 .hero-scenes:after{content:'';position:absolute;left:0;right:0;bottom:0;height:20%;background:linear-gradient(0deg,var(--scene-bg),transparent);pointer-events:none}
}

/* En teléfono la sección del stack también se cuenta con el scroll.
   Para que quepa en una pantalla se compacta: sin párrafo de apoyo y con tipografía más corta. */
@media(max-width:767px){
 .color-section{height:280svh}
 .stack-stage{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:24px 24px 40px}
 .stack-progress{display:block}
 .color-copy>p:not(.eyebrow){display:none}
 .color-copy h2{font-size:clamp(2rem,8.6vw,2.9rem);margin:14px 0 0;line-height:1.04}
 .stack-paths{margin-top:24px}
 .stack-paths .path{padding:13px 0;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:14px}
 .path-name{font-size:1.3rem}
 .path-note{grid-column:2;margin-top:0;text-align:right;font-size:.75rem;line-height:1.3}
 .color-product{margin-top:24px}
 .stack-lead{font-size:1rem;line-height:1.5}
 .stack-against{margin-top:16px;padding-top:16px;font-size:.9rem}
 .against-label{margin-bottom:7px}
}
@media(prefers-reduced-motion:reduce){.color-section{height:auto}.stack-stage{position:static;min-height:0}.stack-progress{display:none}}

/* El fondo del hero se corta por la misma línea vertical que la cortina de las fotos. */
.story{--scene-wipe:linear-gradient(90deg,#fcc629,#fcc629);background:var(--scene-wipe)}
.hero-shade{background:var(--scene-wipe);-webkit-mask-image:linear-gradient(0deg,#000 0%,transparent 26%);mask-image:linear-gradient(0deg,#000 0%,transparent 26%)}
@media(max-width:1000px){
 .hero-scenes:after{background:var(--scene-wipe);-webkit-mask-image:linear-gradient(0deg,#000,transparent);mask-image:linear-gradient(0deg,#000,transparent)}
}
@media(prefers-reduced-motion:reduce){.story{--scene-wipe:linear-gradient(90deg,#fcc629,#fcc629)}}
/* El bloque de redes se va al margen derecho del pie. */
footer.closing .closing-next{text-align:right}
footer.closing .social{justify-content:flex-end}
@media(max-width:767px){footer.closing .closing-next{text-align:left}footer.closing .social{justify-content:flex-start}}

/* Tira de plataformas: símbolo en monocromo más el nombre en la tipografía del sitio. */
.stack-logos{grid-column:1/-1;margin-top:38px;padding-top:24px;border-top:1px solid #163b3326}
.stack-logos .eyebrow{opacity:.65;margin-bottom:16px}
.stack-logos ul{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:34px;margin:0;padding:0}
.stack-logos li{display:flex;align-items:center;gap:11px;font-size:1rem;font-weight:600;letter-spacing:-.01em}
.stack-logos img{width:24px;height:24px;display:block;flex:none}
@media(max-width:767px){.stack-logos{margin-top:22px;padding-top:16px}.stack-logos ul{gap:22px}.stack-logos li{font-size:.9rem;gap:9px}.stack-logos img{width:20px;height:20px}}

/* La marquesina pasa de vocabulario a marcas: los mismos símbolos monocromos del stack. */
.ticker-brand{display:inline-flex;align-items:center;gap:11px;font-family:'DM Sans',Arial,sans-serif;font-size:clamp(1rem,1.5vw,1.3rem);font-weight:700;letter-spacing:-.01em;text-transform:none;white-space:nowrap;line-height:1}
.ticker-brand img{width:26px;height:26px;display:block;flex:none}
.ticker-label{font-family:'DM Sans',Arial,sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;opacity:.6;line-height:1}
.ticker-group{gap:26px;padding-right:26px}
@media(max-width:767px){.ticker-brand{font-size:1rem;gap:9px}.ticker-brand img{width:22px;height:22px}.ticker-group{gap:20px;padding-right:20px}}
.ticker-brand>span{text-transform:none}

/* El escenario fijo repartía la altura estirando las filas, así que la tira de marcas
   quedaba pegada al borde inferior en ventanas bajas (se notaba en Safari). */
.stack-stage{min-height:100vh;min-height:100svh;grid-template-rows:1fr auto;align-content:stretch;padding:76px 5% 52px}
.stack-logos{align-self:end;margin-top:28px}
@media(max-width:900px){.stack-stage{padding:64px 5% 46px}}
@media(max-width:767px){.stack-stage{padding:28px 24px 44px;grid-template-rows:none}}

/* Las filas se dimensionan por su contenido y el aire sobrante va entre ellas.
   Con 1fr en la primera fila, lo que no cabía se recortaba contra el borde. */
.stack-stage{grid-template-rows:auto auto;align-content:space-between;overflow:visible}
.stack-logos{align-self:end;margin-top:24px}

/* En ventanas bajas la sección se compacta para caber en una pantalla completa. */
@media(min-width:768px) and (max-height:840px){
 .stack-stage{padding:52px 5% 40px}
 .color-copy h2{font-size:clamp(2rem,3.2vw,3.4rem)}
 .color-copy>p:not(.eyebrow){font-size:1rem;line-height:1.55}
 .stack-paths{margin-top:24px}
 .stack-paths .path{padding:14px 0}
 .path-name{font-size:1.45rem}
 .stack-lead{font-size:1.15rem}
 .stack-against{margin-top:20px;padding-top:20px;font-size:.9375rem}
 .stack-logos{margin-top:18px;padding-top:18px}
}

/* El escenario mide exactamente una pantalla y la tira se ancla a su borde inferior.
   Con min-height el escenario crecía según el contenido, se hacía más alto que la ventana
   y se derramaba sobre la sección siguiente (se veía en Safari). */
@media(min-width:768px){
 .stack-stage{height:100vh;height:100svh;min-height:0;overflow:hidden;display:grid;grid-template-rows:1fr;align-content:center;padding:56px 5% 104px}
 .stack-logos{position:absolute;left:5%;right:5%;bottom:36px;margin:0;padding-top:20px}
}
@media(min-width:768px) and (max-height:900px){
 .stack-stage{padding:44px 5% 96px}
 .color-copy h2{font-size:clamp(2rem,3.1vw,3.3rem)}
 .stack-paths .path{padding:13px 0}
 .path-name{font-size:1.4rem}
 .stack-lead{font-size:1.125rem}
 .stack-against{margin-top:18px;padding-top:18px;font-size:.9375rem}
}