:root{--paper:#f4f2ed;--ink:#242721;--muted:#66685f;--line:#d7d8cf;--orange:#fe653b}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #a83217;outline-offset:5px}.wrap{width:min(1280px,90%);margin:auto}.nav{height:108px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:37px;font-weight:900;letter-spacing:-3px}.brand span{font-size:13px;vertical-align:top;display:inline-block;padding:7px 0 0 5px;letter-spacing:0}nav{display:flex;align-items:center;gap:36px;font-size:13px}.nav-contact{border:1px solid var(--ink);padding:13px 20px;border-radius:30px}.nav-contact span{margin-left:22px}.hero{padding-top:62px}.eyebrow{font-size:11px;letter-spacing:1.7px;font-weight:700}.dot{display:inline-block;width:7px;height:7px;background:var(--orange);border-radius:50%;margin-right:9px}h1{font-size:clamp(48px,6.9vw,100px);line-height:1.02;letter-spacing:-5.5px;font-weight:500;margin:28px 0 26px}em{font-family:Georgia,serif;font-weight:400}h1 em{color:var(--orange)}.hero-bottom{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px}p{line-height:1.7;color:var(--muted);font-size:15px}.round-link{font-size:13px;display:flex;gap:24px;align-items:center}.round-link span{display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;width:44px;height:44px;font-size:23px}.hero-caption{display:flex;justify-content:space-between;padding:15px 0;color:var(--muted);font-size:11px}.hero-caption span:last-child{font-size:9px;letter-spacing:1.3px}.specialties,.work,.process{padding-top:110px}.section-heading{display:flex;align-items:start;justify-content:space-between;margin-bottom:38px}.section-heading .eyebrow{padding-top:12px}h2{font-size:clamp(32px,3.6vw,50px);letter-spacing:-2px;font-weight:500;line-height:1.12;margin:0}.section-heading h2{width:65%}.specialty-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.specialty{border:1px solid var(--line);padding:22px;border-radius:5px;transition:transform .2s,background .2s}.specialty:hover{transform:translateY(-5px);background:#eeece5}.card-top{display:flex;justify-content:space-between;font-size:12px}.card-top span{font-size:22px}.abstract{height:180px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin:15px 0 25px}.motion-art i{width:90px;height:90px;background:var(--orange);border-radius:22px;transform:rotate(-30deg);margin:-15px;mix-blend-mode:multiply}.motion-art i:nth-child(2){background:#f5a977;transform:rotate(0)}.motion-art i:nth-child(3){background:#c5c5af;transform:rotate(30deg)}.legal-art>span{font:italic 32px/1.05 Georgia,serif;z-index:1}.legal-art em{background:#dedfbf}.legal-art i{position:absolute;width:120px;height:120px;border:1px solid #9b9e87;border-radius:50%;right:0;bottom:0}.medical-art>span{font-size:180px;line-height:1;color:#819882;font-weight:bold;z-index:1}.medical-art i{position:absolute;width:135px;height:135px;border:1px solid #819882;border-radius:50%;transform:translate(28px,8px)}h3{font-size:23px;font-weight:500;letter-spacing:-.7px;margin:0 0 10px}.specialty p{font-size:14px;min-height:72px;margin-bottom:30px}.text-link{font-size:12px}.filter-row{display:flex;gap:8px;border-bottom:1px solid var(--line);padding-bottom:22px;flex-wrap:wrap}.filter-row button{border:1px solid var(--line);background:transparent;border-radius:25px;padding:11px 19px;font-size:12px}.filter-row button.active{background:var(--ink);color:white;border-color:var(--ink)}.results{font-size:12px;margin:20px 0}.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:38px 24px}.project-thumb{width:100%;aspect-ratio:16/10;border:0;border-radius:5px;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:10%;text-align:left;color:var(--ink);background:#e1e4db}.project-thumb:before{content:'';width:50%;aspect-ratio:1;border:1px solid currentColor;opacity:.2;border-radius:30%;position:absolute;right:-10%;transform:rotate(35deg)}.project-thumb strong{font-size:clamp(26px,3.5vw,48px);font-weight:500;letter-spacing:-2px;line-height:1.05;max-width:85%;z-index:1}.project-thumb small{margin-bottom:20px;letter-spacing:2px;font-size:9px}.project-thumb .play{position:absolute;bottom:20px;right:20px;background:var(--paper);border-radius:50%;width:42px;height:42px;display:grid;place-items:center;font-size:14px;transition:transform .2s}.project-thumb:hover .play{transform:scale(1.12)}.tone-1{background:#e9b49e}.tone-2{background:#d6dfed}.tone-3{background:#303b38;color:#ecf0ce}.tone-4{background:#ded8ef}.tone-5{background:#eadcae}.tone-6{background:#cfddd6}.project-meta{display:flex;justify-content:space-between;gap:12px;margin-top:17px}.project-meta h3{font-size:17px;letter-spacing:-.3px}.project-meta span{font-size:10px;color:var(--muted);white-space:nowrap;padding-top:4px}.project-description{font-size:12px;margin:0}.category-note{border:1px solid var(--line);padding:35px;max-width:800px}.category-note h3{font-size:27px}.category-note ul{padding-left:20px;line-height:2;color:var(--muted);font-size:14px}.category-note a{display:inline-block;margin-top:15px;border-bottom:1px solid var(--ink);padding-bottom:5px;font-size:13px}.process{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding-bottom:110px}.process h2{margin:24px 0}.process>div>p{max-width:320px}.steps article{display:flex;gap:28px;border-top:1px solid var(--line);padding:25px 0}.steps article>span{font-size:11px;padding-top:6px;color:var(--muted)}.steps h3{font-size:20px}.steps p{font-size:14px;margin:0}.contact{background:#e5e7db;padding:75px 0;text-align:center}.contact h2{font-size:clamp(44px,6vw,82px);margin:25px 0 32px;letter-spacing:-3px}.contact-button{display:inline-flex;gap:50px;padding:18px 26px;border-radius:40px;background:var(--ink);color:white;font-size:14px}.contact p{font-size:11px;margin-top:25px}footer{display:flex;align-items:center;justify-content:space-between;padding:35px 0;gap:25px}footer>span,footer a:not(.brand){font-size:11px}footer>div{display:flex;gap:20px}.skip{position:fixed;top:-100px;left:15px;padding:15px;background:white;z-index:20}.skip:focus{top:10px}dialog{border:1px solid var(--line);border-radius:8px;background:var(--paper);width:min(1000px,94vw);padding:20px}dialog::backdrop{background:#000c}.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}.dialog-top h2{font-size:22px;letter-spacing:-.5px}.dialog-top button{padding:10px;background:transparent;border:1px solid var(--line);border-radius:5px}#player-container{aspect-ratio:16/9;background:black}#player-container iframe{width:100%;height:100%;border:0}[hidden]{display:none!important}@media(min-width:1500px){.hero{padding-top:80px}}@media(max-width:700px){.nav{height:80px}nav{gap:17px}nav>a:first-child{display:none}.brand{font-size:30px}.nav-contact{padding:10px 14px}.nav-contact span{margin-left:10px}.hero{padding-top:40px}h1{letter-spacing:-2.8px;font-size:clamp(40px,9vw,63px)}.hero-bottom{align-items:start;gap:18px;flex-direction:column}.hero-bottom p{font-size:14px}.hero-caption span:last-child{display:none}.specialties,.work,.process{padding-top:65px}.section-heading{display:block}.section-heading h2{width:100%;margin-top:20px}.specialty-grid{grid-template-columns:1fr}.specialty{padding:22px}.abstract{height:130px;margin:5px 0 18px}.specialty p{min-height:0;margin-bottom:20px;max-width:400px}.project-grid{grid-template-columns:1fr;gap:30px}.project-thumb strong{font-size:42px}.project-meta{flex-wrap:wrap}.project-meta h3{margin:0}.process{grid-template-columns:1fr;gap:20px;padding-bottom:60px}.filter-row{gap:6px}.filter-row button{padding:10px 12px;font-size:11px}footer{flex-wrap:wrap}footer>span{display:none}footer>div{flex-wrap:wrap;gap:15px}.contact{padding:60px 0}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Animated logo, cropped from the original intro. */
.brand picture{display:block;line-height:0}.brand-logo{display:block;width:170px;height:68px;object-fit:contain;mix-blend-mode:normal}.brand:has(.brand-logo){letter-spacing:normal;line-height:0}@media(max-width:700px){.brand-logo{width:125px;height:50px}}


.hero-caption{border-top:1px solid var(--line)}
/* Legal portfolio: real video thumbnails and vertical playback. */
.youtube-thumb{padding:0;background:#171a18;align-items:center}.youtube-thumb:before{display:none}.youtube-thumb img{width:100%;height:100%;object-fit:contain}.legal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.legal-grid .youtube-thumb{aspect-ratio:9/16}.legal-grid .youtube-thumb img{object-fit:cover}.legal-grid .project-meta{display:block}.legal-grid .project-meta h3{line-height:1.35;min-height:46px}.legal-grid .project-meta span{display:block;margin-bottom:8px}.vertical-player{width:min(430px,94vw);max-height:94dvh}.vertical-player #player-container{aspect-ratio:9/16;max-height:70dvh;margin:auto}.vertical-player .dialog-top h2{font-size:18px;line-height:1.3}.original-video{display:block;margin-top:14px;font-size:12px;text-align:center;text-decoration:underline}@media(max-width:700px){.legal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}.legal-grid .project-meta h3{font-size:15px;min-height:0}}@media(max-width:420px){.legal-grid{grid-template-columns:1fr}.legal-grid .youtube-thumb{max-height:480px}}
/* Group native formats so thumbnails fill their frames without letterboxing. */
.project-grid,.project-grid.legal-grid{display:flex;flex-direction:column;gap:48px}
.format-heading{font-size:12px;font-weight:600;letter-spacing:1px;margin:0 0 20px;display:flex;align-items:center;gap:18px;color:var(--muted)}
.format-heading:after{content:'';height:1px;background:var(--line);flex:1}
.format-grid{display:grid;gap:30px 24px;align-items:start;grid-template-columns:repeat(2,minmax(0,1fr))}
.format-vertical{grid-template-columns:repeat(4,minmax(0,1fr))}.format-square{grid-template-columns:repeat(3,minmax(0,1fr))}
.project-card{min-width:0}.project-card .project-thumb{border-radius:12px;box-shadow:0 2px 8px #2427210a;isolation:isolate}
.project-card.orientation-horizontal .project-thumb{aspect-ratio:16/9}
.project-card.orientation-vertical .project-thumb{aspect-ratio:9/16;max-height:none}
.project-card.orientation-square .project-thumb{aspect-ratio:1}
.project-card .youtube-thumb{display:block;background:#e7e6df}
.project-card .youtube-thumb img{position:absolute;display:block;max-width:none;left:50%;top:50%;transform:translate(-50%,-50%);object-fit:fill}
.project-card.orientation-horizontal .youtube-thumb img{width:100%;height:133.3334%}
.project-card.orientation-vertical .youtube-thumb img{width:237.0371%;height:100%}
.project-card.orientation-square .youtube-thumb img{width:133.3334%;height:100%}
.project-card .project-meta,.legal-grid .project-card .project-meta{display:block;margin-top:16px}
.project-card .project-meta h3,.legal-grid .project-card .project-meta h3{font-size:17px;line-height:1.4;min-height:0;margin:0 0 7px}
.project-card .project-meta span{display:block;white-space:normal;margin-bottom:5px;padding:0;line-height:1.5}
.project-card .play{width:42px;height:42px;right:15px;bottom:15px;background:#fffffff2;box-shadow:0 3px 15px #0002;z-index:1}
#player-container{border-radius:9px;overflow:hidden}.square-player{width:min(650px,94vw);max-height:94dvh}.square-player #player-container{aspect-ratio:1;max-height:70dvh;margin:auto}
@media(max-width:1000px){.format-vertical{grid-template-columns:repeat(3,minmax(0,1fr))}.format-square{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.format-grid{gap:26px 16px}.format-horizontal{grid-template-columns:1fr}.format-vertical{grid-template-columns:repeat(2,minmax(0,1fr))}.project-card .project-meta h3{font-size:15px}.project-card .play{width:36px;height:36px;right:10px;bottom:10px}}
@media(max-width:420px){.format-square{grid-template-columns:1fr}}
/* Typography palette inspired by the Santiwi Studios logo. */
:root{--brand-purple:#8950d5;--brand-blue:#345d9d;--brand-deep-purple:#7040b5;--texto-marca:#345d9d}
h1,h2,.project-card .project-meta h3,.legal-grid .project-card .project-meta h3,.specialty h3,.steps h3{color:var(--brand-blue)}
h1 em,.contact h2 em{color:var(--brand-purple);background:linear-gradient(105deg,var(--brand-purple) 12%,var(--brand-blue) 92%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.eyebrow,.text-link,.round-link,.format-heading{color:var(--brand-deep-purple)}
nav a,footer a:not(.brand){color:var(--brand-blue)}
.project-card .project-meta span{color:var(--brand-deep-purple)}
.contact-button{color:#fff}
.portfolio-collection{min-width:0}.collection-title{font-size:clamp(26px,3vw,36px);line-height:1.15;letter-spacing:-1px;color:var(--brand-blue);margin:0 0 10px}.collection-description{margin:0 0 30px;max-width:620px;font-size:14px}.portfolio-collection .format-section+.format-section{margin-top:36px}.portfolio-collection+.portfolio-collection{padding-top:38px;border-top:1px solid var(--line)}
#language-toggle{border:1px solid var(--brand-blue);border-radius:20px;padding:9px 12px;background:transparent;color:var(--brand-blue);font-size:12px}.quote-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;text-align:left}.contact .quote-layout h2{font-size:clamp(36px,4vw,58px)}.contact .quote-layout p{font-size:14px}.quote-layout form{background:var(--paper);padding:30px;border:1px solid var(--line);border-radius:14px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:25px 0}.form-grid label{display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--brand-blue)}.form-grid input,.form-grid select,.form-grid textarea{width:100%;min-width:0;border:1px solid #b5b8bb;background:#fff;border-radius:7px;padding:12px;font:inherit;color:var(--ink)}.form-grid textarea{resize:vertical}.form-grid .full{grid-column:1/-1}.form-grid small{color:var(--muted);line-height:1.5}.form-grid :is(input,select,textarea):focus-visible{outline:2px solid var(--brand-purple);outline-offset:2px}.direct-contact{color:var(--brand-blue);text-decoration:underline;line-height:1.6;font-size:14px}.quote-layout .contact-button{border:0;line-height:1.5;text-align:left}.form-notice{line-height:1.6}#quote-status:empty{display:none}@media(max-width:850px){.quote-layout{grid-template-columns:1fr;gap:30px}.nav nav{gap:10px}.nav-contact{padding:10px}.nav-contact span{display:none}}@media(max-width:480px){.form-grid{grid-template-columns:1fr}.quote-layout form{padding:20px}.nav nav>a[href="#trabajos"]{display:none}}
