/* Home titles follow the internal-page system: Red Hat Display 500, tight tracking, solid accents (no outlines). */
#wallet-journey h1,#wallet-journey h2,#who .who-heading h2,#who .reach-copy h3,#clients h3,#explore h2.ttl,#next h2{font-family:"Red Hat Display",system-ui,sans-serif!important;font-weight:500!important;letter-spacing:-.062em!important;line-height:.98!important;text-wrap:balance}
#clients h3,#explore h2.ttl{font-size:clamp(40px,4.8vw,69px)!important}
#clients h3{color:#302052!important;padding-inline:max(16px,var(--g,24px))}
#clients h3 .o,#explore h2.ttl .o,#clients h3 .o *,#explore h2.ttl .o *{-webkit-text-stroke:0!important;background:none!important}
#clients h3 .o,#clients h3 .o *{color:#7B3FD0!important}
#explore h2.ttl .o,#explore h2.ttl .o *{color:#DE8AF7!important}
#who .who-heading h2 em .who-word{color:transparent;background:linear-gradient(100deg,#8E80E8,#DE8AF7 55%,#E551C1);-webkit-background-clip:text;background-clip:text}
/* Intro: the film plays muted as a dimmed hero loop; the play button opens it with sound */
#intro .hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0;filter:brightness(.42) saturate(.85) contrast(1.05);transition:opacity 1.2s ease}
#intro .hero-film.on{opacity:1}
#intro .veil{z-index:1}#intro .center{z-index:2}
#intro .veil{background:radial-gradient(ellipse at 50% 50%,rgba(7,7,13,.15) 0%,rgba(7,7,13,.7) 75%),linear-gradient(180deg,rgba(7,7,13,.55),rgba(7,7,13,0) 30%,rgba(7,7,13,.85))!important}
@media(prefers-reduced-motion:reduce){#intro .hero-film{display:none}}
/* ===== One title scale and one left edge across the home (matches the internal pages) ===== */
#who .who-heading h2,#who .reach-copy h3,#clients h3,#explore .head h2.ttl,#next.next-brief .brief-heading h2{font-size:clamp(50px,6.4vw,112px)!important;line-height:.96!important}
#who .who-shell{max-width:none!important;padding-left:max(var(--g,24px),calc((100% - 1360px)/2))!important;padding-right:max(var(--g,24px),calc((100% - 1360px)/2))!important}
#explore .head{padding-left:max(var(--g,24px),calc((100% - 1360px)/2))!important;padding-right:max(var(--g,24px),calc((100% - 1360px)/2))!important}
#explore .portfolio-all{margin-left:max(var(--g,24px),calc((100% - 1360px)/2))!important}
#clients h3{text-align:left!important;padding-left:max(var(--g,24px),calc((100% - 1360px)/2))!important;padding-right:max(var(--g,24px),calc((100% - 1360px)/2))!important}
#clients{padding-left:0!important;padding-right:0!important}
#reach .reach-stage{padding-left:max(var(--g,24px),calc((100% - 1360px)/2))!important;padding-right:max(var(--g,24px),calc((100% - 1360px)/2))!important}
#reach .reach-inner{max-width:none!important}
/* Section titles at the same scale as the internal page titles (Trabajos h1) */
#who .who-heading h2,#who .reach-copy h3,#clients h3,#explore .head h2.ttl,#next.next-brief .brief-heading h2{font-size:clamp(62px,10.5vw,158px)!important;line-height:.92!important;letter-spacing:-.065em!important}
#who .who-heading{grid-template-columns:1fr!important}
#who .who-heading .who-intro{max-width:520px}
@media(max-width:800px){#reach .reach-copy{grid-template-columns:1fr!important}#reach .reach-stat{grid-column:auto!important;grid-row:auto!important;padding-left:0!important;margin-top:18px}#reach .reach-stat strong{font-size:84px!important}}
/* reach: title lines rise with the scroll, the figure counts up, the group link draws its rule */
#reach .rw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
#reach .rw>i{display:inline-block;font-style:normal;transform:translateY(calc((1 - var(--rw,1))*105%));opacity:calc(.15 + var(--rw,1)*.85)}
#reach .reach-stat strong{background:linear-gradient(100deg,#C6B2FA,#DE8AF7 60%,#E551C1);-webkit-background-clip:text;background-clip:text;color:transparent!important}
#reach .reach-stat b a{background:linear-gradient(90deg,#E551C1,#8E80E8) left bottom/calc(var(--reach-line,0)*100%) 1px no-repeat;text-decoration:none!important;border:0!important;padding-bottom:3px}
/* masks must not clip glyph overhang (tight tracking) */
.nm-on .nm-head .nm-w,#reach .rw,#who .who-word-mask{padding-right:.1em!important;margin-right:-.1em!important;padding-left:.04em!important;margin-left:-.04em!important}
/* clients: one line, centred over the logo wall */
#clients h3{text-align:center!important;white-space:nowrap;font-size:clamp(34px,6.4vw,112px)!important;padding-left:var(--g,24px)!important;padding-right:var(--g,24px)!important;margin-bottom:clamp(36px,4vw,64px)!important}
@media(max-width:600px){#clients h3{white-space:normal;font-size:clamp(40px,11vw,62px)!important}}
/* reach: the title lives in its column; the map never runs under the words */
#who .reach-copy h3{font-size:clamp(48px,5.4vw,104px)!important}
#reach .reach-network{position:relative;z-index:0}
#reach .reach-copy{z-index:2}
@media(max-width:800px){#who .reach-copy h3{font-size:clamp(46px,12vw,62px)!important}}
/* explore: a composed headline with its own side note, not three loose lines */
#explore .head{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px clamp(32px,5vw,96px);padding-top:clamp(56px,7vw,110px)!important;padding-bottom:clamp(32px,4vw,56px)!important}
#explore .head h2.ttl{font-size:clamp(56px,8.4vw,150px)!important;line-height:.88!important;margin:0!important;max-width:none!important}
#explore .head h2.ttl .o{white-space:nowrap}
#explore .explore-side{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:300px;padding-bottom:.6em}
#explore .explore-side p{margin:0;font-size:16px;line-height:1.55;color:#A9A3C0}
#explore .explore-side .portfolio-all{margin:0!important;position:static!important;font-size:18px;color:#fff;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:8px;text-decoration:none}
#explore .explore-side .portfolio-all::after{content:" →";color:#E99DE0;display:inline-block;transition:transform .4s cubic-bezier(.2,.75,.2,1)}
#explore .explore-side .portfolio-all:hover::after{transform:translateX(6px)}
@media(max-width:800px){#explore .head{grid-template-columns:1fr}#explore .head h2.ttl{font-size:clamp(46px,12.5vw,72px)!important}#explore .explore-side{max-width:none}}
/* ===== Services: staged entrance ===== */
#services.sl-pre .sl-top{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.75,.2,1)}
#services.sl-pre .sl-choice strong{display:inline-block;clip-path:inset(0 0 100% 0);transform:translateY(40%);transition:clip-path 1s cubic-bezier(.2,.75,.2,1) calc(var(--i,0)*.14s + .1s),transform 1s cubic-bezier(.2,.75,.2,1) calc(var(--i,0)*.14s + .1s)}
#services.sl-pre .sl-choice small{opacity:0;transform:translateY(10px);transition:opacity .7s ease calc(var(--i,0)*.14s + .45s),transform .7s ease calc(var(--i,0)*.14s + .45s)}
#services.sl-pre .sl-choice{position:relative}
#services.sl-pre .sl-choice::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,#E551C1,#6932CC 55%,rgba(255,255,255,.08));transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.2,.75,.2,1) calc(var(--i,0)*.14s + .3s)}
#services.sl-pre .sl-visual{opacity:0;transform:scale(.92);filter:blur(8px);transition:opacity 1.4s ease .35s,transform 1.6s cubic-bezier(.2,.75,.2,1) .35s,filter 1.4s ease .35s}
#services.sl-pre .sl-panel:not([hidden]) h3,#services.sl-pre .sl-panel:not([hidden]) p{opacity:0;transform:translateY(22px);transition:opacity .9s ease .7s,transform 1s cubic-bezier(.2,.75,.2,1) .7s}
#services.sl-pre .sl-panel:not([hidden]) p{transition-delay:.82s}
#services.sl-pre .sl-links a{opacity:0;transform:translateX(28px);transition:opacity .8s ease calc(var(--i,0)*.12s + .5s),transform .9s cubic-bezier(.2,.75,.2,1) calc(var(--i,0)*.12s + .5s)}
#services.sl-in .sl-top,#services.sl-in .sl-choice small,#services.sl-in .sl-panel:not([hidden]) h3,#services.sl-in .sl-panel:not([hidden]) p,#services.sl-in .sl-links a{opacity:1;transform:none}
#services.sl-in .sl-choice strong{clip-path:inset(-10% -5% -20% -5%);transform:none}
#services.sl-in .sl-choice::after{transform:scaleX(1)}
#services.sl-in .sl-visual{opacity:1;transform:none;filter:none}
/* switching areas: the new panel's services slide in one by one */
#services.sl-in .sl-panel.sl-enter .sl-links a{animation:sl-link-in .8s cubic-bezier(.2,.75,.2,1) both;animation-delay:calc(var(--i,0)*.12s + .45s)}
#services.sl-in .sl-panel.sl-enter h3{animation:sl-link-in .6s cubic-bezier(.2,.75,.2,1) both}
@keyframes sl-link-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#services .sl-panel.sl-enter *{animation:none!important}}
/* ===== Brand accent gradient — the one gradient for every highlighted word ===== */
:root{--tw-accent:linear-gradient(100deg,#8E80E8 0%,#DE8AF7 55%,#E551C1 100%)}
#clients h3 .o,#explore h2.ttl .o,#reach h3 em,#next h2 em,#lab-camera h2 em,#who .who-heading h2 em .who-word,.nm-acc>.o,.nm-acc>em{background:var(--tw-accent)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent;-webkit-text-stroke:0!important;padding-right:.06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
#clients h3 .o *,#explore h2.ttl .o *{color:inherit!important;background:none!important}
#reach .rw-acc>i{display:inline}
/* every section on the same column */
html body #services.service-lab{padding-left:max(var(--g,24px),calc((100% - 1360px)/2))!important;padding-right:max(var(--g,24px),calc((100% - 1360px)/2))!important}
#lab-camera .lab-copy{left:max(var(--g,24px),calc((100% - 1360px)/2))!important}
#lab-camera .lab-chapters{left:max(var(--g,24px),calc((100% - 1360px)/2))!important;right:max(var(--g,24px),calc((100% - 1360px)/2))!important}
html body #services.service-lab .sl-pin{padding-left:max(var(--g,24px),calc((100% - 1360px)/2))!important;padding-right:max(var(--g,24px),calc((100% - 1360px)/2))!important}
.nm-on .nm-head .nm-w,#reach .rw,#who .who-word-mask{padding-left:0!important;margin-left:0!important}
#explore .head h2.ttl{margin-left:0!important;text-indent:0!important}
html body #services.sl-scroll .sl-top{left:max(var(--g,24px),calc((100% - 1360px)/2))!important;right:max(var(--g,24px),calc((100% - 1360px)/2))!important}
/* Safari-safe accent: gradient on a block-level box, not on an inline span inside a mask */
#reach h3 .rw-acc,#reach h3 .rw-acc>i,#reach h3 em{display:inline-block!important}
#reach h3 em{padding-right:.08em}
#reach .reach-stat strong{padding-right:.1em;display:inline-block}
.nm-acc,.nm-acc>.o,.nm-acc>em{display:inline-block}
/* Paint the gradient on the animated box itself (same technique as «creatividad», which renders everywhere) */
#reach h3 .rw-acc>i,.nm-on .nm-head .nm-acc{background:var(--tw-accent)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important;padding-right:.08em}
#reach h3 .rw-acc em,.nm-on .nm-head .nm-acc>.o,.nm-on .nm-head .nm-acc>em{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:transparent!important;-webkit-text-fill-color:transparent!important}
#clients .client-logo img{transition:filter .25s linear,opacity .25s linear,transform .35s cubic-bezier(.2,.75,.2,1)!important;will-change:filter}
#reach h3 .rw-acc>i{display:inline-block!important;background:linear-gradient(100deg,#8E80E8 0%,#DE8AF7 55%,#E551C1 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important}
#clients .client-logo{position:relative;transition:transform .35s cubic-bezier(.2,.75,.2,1)}
#clients .client-logo>img,#clients .client-logo>a>img{transition:opacity .25s linear!important}
#clients .client-logo a{position:relative;display:block;width:100%;height:100%}
#clients .client-logo .nm-logo-color{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:none!important;opacity:0;pointer-events:none;transition:opacity .25s linear}