@font-face{font-family:Manrope;src:url('assets/fonts/Manrope-Variable.woff2') format('woff2');font-style:normal;font-weight:200 800;font-display:swap}
:root{color-scheme:dark;--bg:#101010;--surface:#191919;--ink:#f5f5f0;--muted:#b8b8b1;--line:#40403d;--accent:#91acbc;--ease-out:cubic-bezier(.23,1,.32,1);--page-width:1440px;scroll-behavior:smooth;scroll-padding-top:96px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Manrope,Arial,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
body.menu-open{overflow:hidden}
::selection{background:var(--accent);color:var(--bg)}
html{scrollbar-color:#66665f var(--bg);scrollbar-width:thin}
a{color:inherit;text-decoration:none;text-underline-offset:.3em}
button{font:inherit;color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
img{max-width:100%;display:block}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{text-wrap:balance;line-height:1.06}
p{text-wrap:pretty}
.shell{width:min(calc(100% - 112px),var(--page-width));margin-inline:auto}
.section{padding-block:110px;scroll-margin-top:88px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:fixed;z-index:1000;left:20px;top:12px;padding:12px 20px;background:var(--ink);color:var(--bg);transform:translateY(-150%)}
.skip-link:focus{transform:translateY(0)}
.icon{width:24px;height:24px;flex:none;filter:invert(1);object-fit:contain}
.site-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid #292927}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:80px}
.brand{width:116px;flex:none}
.brand img,.hero-brand img,.footer-brand img{width:100%;height:auto;mix-blend-mode:lighten}
.desktop-nav{display:flex;gap:36px;margin-left:auto;margin-right:42px;font-size:14px;font-weight:600}
.desktop-nav a,.header-contact,.text-link,.opportunity-link,.footer-bottom a{transition:color 150ms ease}
.header-contact{display:flex;align-items:center;gap:20px;font-weight:700;font-size:14px}
.menu-toggle,.close-menu{display:none;align-items:center;justify-content:center;width:46px;height:46px;border:0;background:transparent;cursor:pointer}
.mobile-menu{width:calc(100% - 24px);max-width:600px;max-height:calc(100dvh - 24px);position:fixed;inset:12px;margin:0 auto 0;padding:28px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.mobile-menu::backdrop{background:rgb(0 0 0 / .75)}
.mobile-menu-head{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:700;gap:16px}
.mobile-menu nav{display:flex;flex-direction:column;gap:20px;padding:42px 0}
.mobile-menu nav a{font-size:clamp(26px,8vw,42px);font-weight:700;line-height:1.2}
.mobile-menu-mail{font-size:14px;overflow-wrap:anywhere}
.mobile-menu .close-menu{display:flex}
.hero{padding-top:16px;padding-bottom:32px}
.hero-brand{width:min(100%,980px);margin-inline:auto;background:var(--bg)}
.hero-brand img{width:100%;height:auto;aspect-ratio:1942/808;object-fit:contain}
.hero-intro{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-top:16px;padding-bottom:28px}
.hero-intro p{font-size:clamp(17px,1.55vw,23px);line-height:1.45;color:var(--muted)}
.hero-intro strong{color:var(--ink);font-weight:600}
.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:56px;padding:16px 23px;font-size:14px;font-weight:700;border:1px solid var(--ink);border-radius:0;transition:transform 150ms var(--ease-out),background 150ms ease,color 150ms ease}
.button-light{background:var(--ink);color:var(--bg)}
.button-light .icon{filter:none}
.hero-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.hero-services a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;font-size:clamp(16px,1.6vw,24px);line-height:1.3;font-weight:700;transition:opacity 150ms ease}
.hero-services a+a{padding-left:32px;margin-left:32px;border-left:1px solid var(--line)}
.hero-services .icon{width:24px;height:24px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:60px;margin-bottom:48px}
.section-heading h2,.about h2,.approach h2{font-size:clamp(38px,5.8vw,80px);font-weight:800;letter-spacing:-.04em}
.section-heading>p{max-width:330px;color:var(--muted);font-size:17px;line-height:1.6}
.project-media{display:block;position:relative;overflow:hidden;background:#1c1c1a;aspect-ratio:16/9}
.project-media>img{width:100%;height:100%;object-fit:cover;transition:transform 500ms var(--ease-out)}
.project-featured .project-media{aspect-ratio:16/8}
.project-featured .project-media>img{object-position:50% 47%}
.project-open{position:absolute;bottom:20px;right:20px;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--ink);color:var(--bg)}
.project-open .icon{filter:none;width:26px;height:26px;transition:transform 200ms var(--ease-out)}
.project-caption{display:flex;justify-content:space-between;gap:40px;padding-top:24px}
.project-caption h3{font-size:clamp(24px,2.6vw,36px);font-weight:700;letter-spacing:-.03em;line-height:1.2}
.project-caption>p{max-width:480px;font-size:16px;color:var(--muted);line-height:1.65}
.project-caption div>p{margin-top:9px;color:var(--muted);font-size:14px}
.project-pair{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;margin-top:70px;align-items:start}
.project-pair .project-media{aspect-ratio:1.4}
.project-pair .project-media>img{object-fit:contain}
.project-media-nfc>img{object-fit:cover!important;object-position:50% 15%}
.project-offset{padding-top:120px}
.project-status{display:inline-block;vertical-align:middle;margin-left:9px;padding:4px 9px;border:1px solid var(--line);font-size:11px;line-height:1.2;letter-spacing:0;font-weight:500}
.project-description{max-width:500px;margin-top:18px;color:var(--muted);font-size:15px;line-height:1.65}
.content-showcase{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:100px;padding-top:60px}
.content-showcase h2{font-size:clamp(38px,5.7vw,80px);font-weight:800;letter-spacing:-.04em}
.content-showcase-copy>p{max-width:45ch;color:var(--muted);font-size:18px;margin-top:32px}
.content-showcase-copy>.content-description{font-size:15px;margin-top:18px;max-width:43ch}
.content-showcase-copy .text-link{margin-top:28px}
.content-video{width:min(100%,330px);justify-self:end}
.content-video video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:contain;background:#191919;accent-color:var(--ink)}
.content-video figcaption{font-size:11px;color:var(--muted);margin-top:14px;line-height:1.5}
.save-contact{display:inline-block;text-decoration:underline;font-size:13px;min-height:44px;padding-block:10px;color:var(--muted)}
.services{padding-top:75px}
.services .section-heading{padding-bottom:32px;border-bottom:1px solid var(--line);margin-bottom:0}
.service-row{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;padding:58px 0 65px;border-bottom:1px solid var(--line);scroll-margin-top:110px}
.service-row h3{font-size:clamp(36px,5vw,67px);font-weight:700;letter-spacing:-.04em;line-height:1.05}
.service-row h3 span{color:var(--muted)}
.service-body>p{max-width:55ch;color:var(--muted);font-size:17px}
.service-body ul{list-style:none;margin:25px 0 32px;padding:0;font-size:15px;font-weight:500}
.service-body li{padding:7px 0}
.service-body li::before{content:'';display:inline-block;width:5px;height:5px;background:var(--ink);margin-right:12px;vertical-align:middle}
.text-link{display:inline-flex;align-items:center;gap:22px;font-size:14px;font-weight:700;min-height:44px;border-bottom:1px solid var(--line);padding:4px 0}
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:110px;align-items:center}
.about-photo{max-width:500px;aspect-ratio:4/5;overflow:hidden;background:var(--surface)}
.about-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.about h2{margin-bottom:36px}
.about-copy>p{color:var(--muted);font-size:17px;margin-top:20px;max-width:53ch}
.about-copy .text-link{margin-top:26px}
.approach{padding-top:60px}
.approach h2{font-size:clamp(34px,4vw,56px)}
.approach-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:44px;padding-top:30px;border-top:1px solid var(--line)}
.approach-grid h3{font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.25;margin-bottom:18px}
.approach-grid p{max-width:35ch;font-size:15px;color:var(--muted)}
.contact{padding-top:100px;padding-bottom:100px}
.contact-heading{display:flex;justify-content:space-between;align-items:center;gap:40px}
.contact h2{font-size:clamp(56px,10vw,136px);letter-spacing:-.04em;font-weight:800;line-height:.99}
.contact-round{display:grid;place-items:center;width:132px;height:132px;border-radius:50%;background:var(--ink);color:var(--bg);flex:none;transition:transform 180ms var(--ease-out)}
.contact-round .icon{width:60px;height:60px;filter:none}
.contact-lead{color:var(--muted);font-size:18px;margin-top:32px;max-width:52ch}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr .9fr;gap:34px;margin-top:60px}
.contact-item{position:relative;border-top:1px solid var(--line);padding:22px 28px 22px 0;display:flex;flex-direction:column;gap:12px;min-width:0}
.contact-item span{font-size:12px;color:var(--muted)}
.contact-item strong{font-size:clamp(14px,1.4vw,19px);font-weight:600;overflow-wrap:anywhere;line-height:1.4}
.contact-item .icon{position:absolute;top:20px;right:0;width:18px;height:18px}
.opportunity-link{display:inline-flex;gap:15px;align-items:center;font-size:14px;color:var(--muted);margin-top:44px;padding-block:8px;min-height:44px}
.site-footer{padding-top:45px;border-top:1px solid var(--line)}
.footer-brand{display:block;width:min(540px,55%);margin-block:10px 45px}
.footer-bottom{border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:24px;padding:25px 0 32px;font-size:12px;color:var(--muted)}
.footer-bottom a{display:inline-flex;gap:8px;align-items:center;min-height:32px}
.footer-bottom .icon{width:16px;height:16px}

.legal{max-width:760px;padding:70px 0 100px}
.legal h1{font-size:clamp(40px,6vw,70px);letter-spacing:-.04em}
.legal h2{font-size:24px;margin:36px 0 15px}
.legal p{margin-top:20px;color:var(--muted)}
.legal a:not(.button){text-decoration:underline}
@media(hover:hover) and (pointer:fine){.desktop-nav a:hover,.header-contact:hover,.text-link:hover,.footer-bottom a:hover{color:#b8b8b1}.hero-services a:hover{opacity:.68}.button:hover{transform:translateY(-2px)}.project-media:hover>img{transform:scale(1.025)}.project-media:hover .project-open .icon{transform:translate(2px,-2px)}.contact-round:hover{transform:rotate(8deg)}.contact-item:hover strong{text-decoration:underline}.opportunity-link:hover{color:var(--ink)}}
.button:active,.contact-round:active{transform:scale(.98)}
@media(min-width:1600px){.hero{padding-top:40px}.hero-brand{width:1140px}.hero-intro{margin-top:24px}.hero-services a{font-size:24px}}
@media(max-width:1050px){.shell{width:calc(100% - 64px)}.section{padding-block:85px}.desktop-nav{gap:24px;margin-right:12px}.hero-services a{font-size:17px}.hero-services a+a{padding-left:20px;margin-left:20px}.section-heading{gap:35px}.project-caption>p{max-width:44%;font-size:15px}.project-pair{gap:30px}.project-offset{padding-top:90px}.service-row{gap:40px}.about{gap:65px}.contact-grid{gap:24px}.contact-round{width:100px;height:100px}.contact-round .icon{width:48px;height:48px}}
@media(max-width:760px){:root{scroll-padding-top:82px}.shell{width:calc(100% - 40px)}.section{padding-block:70px}.header-inner{min-height:72px;gap:18px}.brand{width:96px}.desktop-nav{display:none}.header-contact{font-size:13px;margin-left:auto;gap:9px}.header-contact .icon{width:17px;height:17px}.menu-toggle{display:flex;margin-right:-10px}.hero{padding-top:24px;padding-bottom:15px}.hero-brand{width:100%}.hero-intro{margin-top:24px;align-items:flex-start;flex-direction:column;gap:24px;padding-bottom:32px}.hero-intro p{font-size:18px}.button{min-height:52px;padding:14px 20px;font-size:13px;gap:32px}.hero-services{grid-template-columns:1fr}.hero-services a{font-size:18px;padding:18px 0;line-height:1.35}.hero-services a br{display:none}.hero-services a+a{margin-left:0;padding-left:0;border-left:0;border-top:1px solid #2f2f2c}.hero-services a .icon{width:20px;height:20px}.section-heading{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:32px}.section-heading h2,.about h2{font-size:clamp(36px,9.7vw,62px)}.section-heading>p{font-size:16px;max-width:48ch}.project-featured .project-media{aspect-ratio:1.45}.project-featured .project-media>img{object-position:35% 50%}.project-caption{flex-direction:column;gap:14px;padding-top:20px}.project-caption>p{max-width:100%;font-size:15px}.project-caption h3{font-size:25px}.project-caption div>p{font-size:12px}.project-open{width:44px;height:44px;bottom:14px;right:14px}.project-open .icon{width:23px;height:23px}.project-pair{grid-template-columns:1fr;gap:44px;margin-top:44px}.project-pair .project-media{aspect-ratio:1.6}.project-offset{padding-top:0}.project-description{font-size:14px;margin-top:14px}.service-row{grid-template-columns:1fr;gap:25px;padding:36px 0 42px;scroll-margin-top:95px}.service-row h3{font-size:44px}.service-row h3 br{display:none}.service-body>p{font-size:16px}.service-body ul{font-size:14px;margin-block:19px 24px}.service-body li{padding-block:6px}.text-link{font-size:13px}.about{grid-template-columns:1fr;gap:38px}.about-photo{width:72%;max-width:350px;aspect-ratio:4/4.5}.about h2{margin-bottom:26px}.about-copy>p{font-size:16px;max-width:100%}.approach h2{font-size:35px}.approach-grid{grid-template-columns:1fr;gap:28px;margin-top:30px;padding-top:28px}.approach-grid h3{font-size:22px;margin-bottom:10px}.approach-grid p{max-width:52ch}.contact h2{font-size:clamp(48px,12.5vw,76px)}.contact-round{width:65px;height:65px}.contact-round .icon{width:34px;height:34px}.contact-heading{gap:15px}.contact-lead{font-size:16px;margin-top:26px}.contact-grid{grid-template-columns:1fr;gap:0;margin-top:38px}.contact-item{padding-block:19px;gap:9px}.contact-item strong{font-size:18px}.contact-item span{font-size:12px}.contact-item .icon{top:20px}.opportunity-link{margin-top:22px;font-size:13px;gap:10px;align-items:flex-start}.opportunity-link .icon{margin-top:2px}.site-footer{padding-top:28px}.footer-brand{width:75%;margin-bottom:28px}.footer-bottom{flex-wrap:wrap;gap:10px 24px;font-size:11px;padding-bottom:28px}.footer-bottom p{width:100%}.legal{padding-block:45px 80px}.legal h2{font-size:22px}}
@media(max-width:350px){.shell{width:calc(100% - 32px)}.brand{width:82px}.header-contact{font-size:12px;gap:6px}.header-inner{gap:10px}.hero-services a{font-size:16px}.contact-round{width:56px;height:56px}.contact h2{font-size:44px}.contact-item strong{font-size:16px}}
@media(prefers-reduced-motion:no-preference){.hero-brand{animation:brand-entry 650ms var(--ease-out) both}@keyframes brand-entry{from{opacity:.75;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.button:active,.contact-round:active{transform:none}}
@media(max-width:760px){.content-showcase{grid-template-columns:1fr;gap:36px;padding-top:35px}.content-showcase h2{font-size:clamp(36px,9.7vw,62px)}.content-showcase-copy>p{font-size:16px;margin-top:24px}.content-showcase-copy>.content-description{font-size:14px}.content-video{justify-self:start;width:min(80%,320px);margin-left:20%}.content-video figcaption{font-size:11px}.hero-brand{background:var(--bg)}}
@media print{.site-header,.mobile-menu,.project-open{display:none}.section{padding-block:35px}.shell{width:94%}body{print-color-adjust:exact}.project-media{break-inside:avoid}.contact a::after{font-size:10px}.hero-brand{max-width:700px}.site-footer{break-inside:avoid}}

/* Refinamiento aprobado: firma discreta y azul acero en énfasis y acciones. */
.hero{padding-top:64px}
.hero-title{font-size:clamp(48px,7.4vw,96px);font-weight:800;letter-spacing:-.04em;line-height:1.04;max-width:1150px}
.hero-title span{color:var(--accent)}
.hero-intro{margin-top:32px;padding-bottom:38px}
.hero-intro p{max-width:66ch;font-size:18px;line-height:1.65}
.hero-intro strong{display:inline-block;margin-top:12px;font-size:16px;font-weight:500}
.hero-intro .button{flex:none}
.button-light,.contact-round,.project-open{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.header-contact,.service-row h3 span,.contact-item>span{color:var(--accent)}
.about{grid-template-columns:1fr;gap:0}
.about-copy{display:grid;grid-template-columns:1fr 1fr;column-gap:70px;align-items:start}
.about-copy h2{grid-column:1;grid-row:1 / 4;font-size:clamp(38px,4.8vw,64px);margin:0}
.about-copy>p,.about-copy>.text-link{grid-column:2;margin-top:0}
.about-copy>p+p{margin-top:20px}
.about-copy>.text-link{justify-self:start;margin-top:26px}
.site-footer{padding-top:0}
@media(hover:hover) and (pointer:fine){.button-light:hover,.contact-round:hover{background:#abc2cf}.text-link:hover,.desktop-nav a:hover{color:var(--accent)}}
@media(max-width:760px){.hero{padding-top:34px;padding-bottom:10px}.hero-title{font-size:clamp(43px,11.5vw,70px);line-height:1.08}.hero-intro{margin-top:24px;padding-bottom:30px;gap:24px}.hero-intro p{font-size:16px}.hero-intro strong{font-size:14px;line-height:1.6}.about-copy{display:block}.about-copy h2{margin-bottom:26px}.about-copy>p+p{margin-top:20px}}
@media(prefers-reduced-motion:no-preference){.hero-title{animation:brand-entry 650ms var(--ease-out) both}}

.initials{display:inline-block;font-size:34px;line-height:1;font-weight:800;letter-spacing:-.06em}.initials span{color:var(--accent)}
.hero{padding-top:22px}.hero-brand{width:min(100%,830px)}.hero-intro{margin-top:12px}
.client-link{display:flex;gap:clamp(16px,4vw,65px);align-items:center;padding:32px 0;border-block:1px solid var(--line)}.client-symbol{width:clamp(78px,13vw,160px);height:auto}.client-link h3{font-size:clamp(26px,4.7vw,64px);letter-spacing:-.04em}.client-link p{margin-top:15px;color:var(--muted)}.client-go{margin-left:auto;display:flex;align-items:center;gap:12px;color:var(--accent)}.client-link:hover h3{text-decoration:underline;text-decoration-thickness:2px}
.wa-float{position:fixed;right:16px;bottom:20px;display:grid;place-items:center;background:var(--accent);border-radius:50%;width:48px;height:48px;z-index:51}.wa-float img{width:25px;height:25px;filter:brightness(0)}.wa-float:hover{background:#b6cbd6}
@media(min-width:761px){.wa-float{right:5px;width:44px;height:44px}}
@media(max-width:1050px) and (min-width:761px){.shell{width:calc(100% - 104px)}}
@media(max-width:760px){.wa-float{position:static;flex:none;width:42px;height:42px;margin-left:auto}.header-contact{display:none}.client-link{display:grid;grid-template-columns:74px 1fr;gap:14px}.client-symbol{width:74px}.client-go{grid-column:2;margin:0}.client-link p{font-size:13px}.hero-intro{margin-top:22px}}

/* One brief entrance per tab, using the original wordmark without redrawing it. */
.opening { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .opening.play {
    position: fixed; inset: 0; z-index: 100; display: block;
    overflow: hidden; pointer-events: none; background: var(--bg);
    animation: opening-finish 200ms 900ms ease-out forwards;
  }
  .signature-stage {
    position: absolute; left: var(--sign-left); top: var(--sign-top);
    width: var(--sign-width); height: var(--sign-height);
    background: url('assets/wordmark-santino.webp') center / contain no-repeat;
    transform-origin: center;
    animation: signature-arrive 700ms var(--ease-out) both;
  }
  @keyframes signature-arrive {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to { opacity: 1; transform: none; }
  }
  @keyframes opening-finish { to { opacity: 0; } }
}

.client-link p { max-width: 42ch; }

.work-wall{margin-top:26px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(130px,14vw,230px);grid-template-areas:"a a b v" "a a c v" "d e f g";gap:6px}.wall-photo,.wall-film{position:relative;min-width:0;min-height:0;overflow:hidden;background:#181b1c}.wall-photo img{width:100%;height:100%;object-fit:cover}.wall-photo span{position:absolute;bottom:8px;left:8px;padding:4px 8px;background:#101010dc;font-size:12px;color:white}.tile-0{grid-area:a}.tile-1{grid-area:b}.tile-2{grid-area:c}.tile-3{grid-area:d}.tile-4{grid-area:e}.tile-5{grid-area:f}.tile-6{grid-area:g}.wall-film{grid-area:v;width:100%;height:100%;object-fit:contain}.wall-photo:hover img{opacity:.85}
#wall-view{max-width:min(94vw,1000px);max-height:94dvh;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:12px}#wall-view::backdrop{background:#000d}#wall-view img{max-width:100%;max-height:72dvh;object-fit:contain;margin:auto}#wall-view button{display:block;margin:0 0 10px auto;padding:8px 14px;border:1px solid var(--line);background:var(--accent);color:var(--bg);cursor:pointer}#wall-view p{padding-top:7px}
@media(max-width:760px){.work-wall{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a a" "b v" "c v" "d e" "f g";grid-auto-rows:clamp(130px,37vw,240px);gap:4px}.wall-photo span{font-size:11px;left:5px;bottom:5px}}

.wall-film { object-fit: cover; pointer-events: none; }