@font-face{font-family:Urbanist;src:url(assets/urbanist.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Urbanist Semi";src:url(assets/urbanist-semibold.woff) format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"DM Mono";src:url(assets/dm-mono.woff) format("woff");font-weight:400;font-display:swap}
:root{--ink:#0a2138;--navy:#021d3b;--paper:#f7f6f2;--cream:#f2eee6;--gold:#ffc414;--burnt:#d35f18;--muted:#4f5759;--line:#ccc9bf;--sans:Urbanist,"Trebuchet MS",sans-serif;--strong:"Urbanist Semi",Urbanist,"Trebuchet MS",sans-serif;--mono:"DM Mono",ui-monospace,monospace}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:14px}
body{margin:0;color:var(--ink);background:#fff;font:400 17px/1.48 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3,strong{font:600 1em/1.04 var(--strong);letter-spacing:-.032em}
a{color:inherit;text-decoration:none}
button,summary,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex="0"]:focus-visible{outline:3px solid #008bad;outline-offset:4px}
img{display:block;max-width:100%;height:auto}
[hidden],.defs{display:none!important}
.site{width:70%;margin-inline:auto;background:var(--paper);container-type:inline-size;overflow:clip}
.skip{position:fixed;z-index:20;top:8px;left:15%;padding:10px 18px;background:white;transform:translateY(-160%)}
.skip:focus{transform:none}
.icon{width:19px;height:19px;flex:none}
.diagonal{transform:rotate(-45deg)}.up{transform:rotate(-90deg)}
.mast,.hero{background:#e8e0d4 url(assets/papel.png) repeat;background-size:214px 106px}
.mast{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:clamp(20px,2.55cqw,42px) 5.4%;position:relative;isolation:isolate;z-index:4}
.brand{width:clamp(112px,15.1cqw,222px)}
nav{display:flex;align-items:center;gap:clamp(16px,3.3cqw,48px)}
nav a,.mobile-menu,.button,.back{font-family:var(--strong);font-weight:600;font-size:clamp(14px,1.44cqw,19px)}
nav a:not(.nav-schools):hover{color:#914315}
.nav-schools{display:inline-flex;align-items:center;gap:14px;padding:9px 18px;border:1px solid #6c716d;border-radius:99px}
.nav-schools:hover{background:#fff5}
.mobile-menu{display:none}
.hero{position:relative;isolation:isolate;min-height:clamp(310px,39.5cqw,740px);display:flex;align-items:flex-start}
.hero-copy{position:relative;z-index:1;width:43%;padding:3.4cqw 0 8.5cqw 5.4%}
.tag{font:400 clamp(10px,.97cqw,14px)/1.5 var(--mono);letter-spacing:.075em;text-transform:uppercase;display:flex;align-items:center;gap:9px}
.tag i{width:17px;height:2px;display:inline-block;flex:none;background:var(--burnt)}
.hero h1{font-size:clamp(40px,6.35cqw,102px);line-height:.98;letter-spacing:-.045em;margin:1.3cqw 0 1.4cqw}
.intro{font-size:clamp(16px,1.83cqw,27px);line-height:1.34;max-width:32ch;text-wrap:balance;color:#33434b}
.button{display:inline-flex;align-items:center;justify-content:center;border:0;gap:16px;min-height:42px;padding:11px 20px;border-radius:40px;letter-spacing:.002em;transition:background .18s,transform .18s;line-height:1.18}
.button:hover{transform:translateY(-2px)}
.button.dark{background:var(--navy);color:#fff;margin-top:2.15cqw;box-shadow:0 4px 8px #081a2c22}
.button.dark:hover{background:#003662}.button.gold{background:var(--gold);color:var(--ink);align-self:flex-start}.button.gold:hover{background:#ffd451}
.scene{display:block;position:absolute;width:100%;height:auto;bottom:-.5px;right:0;z-index:0;pointer-events:none}
.routes{background:var(--navy);padding:1.5cqw 5.4% 3.9cqw;display:grid;grid-template-columns:1fr 1fr;gap:1.8cqw}
.route{color:var(--ink);position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(134px,14.1cqw,235px);background:#f4f0e7;border-radius:12px;padding:2.05cqw 2.25cqw;box-shadow:0 5px 10px #0004,inset 0 1px 1px #fff;transition:transform .2s,background .2s}
.route:hover{transform:translateY(-3px);background:#fff9ed}
.route>div{position:relative;z-index:1;width:65%}
.route h2{font-size:clamp(20px,2.52cqw,38px);line-height:1.02;letter-spacing:-.035em;margin:.7cqw 0}
.route p{color:#4d5558;max-width:24ch;font-size:clamp(13px,1.36cqw,18px);line-height:1.33}
.route img{position:absolute;right:13.6%;bottom:8%;width:18%;height:84%;object-fit:contain;filter:drop-shadow(1px 3px 3px #231b0b26);z-index:0}
.route.books img{width:20%;height:72%;right:12%}
.route.books>div{width:63%}
.circle{display:grid;place-items:center;width:26px;height:26px;position:absolute;bottom:12%;right:3.5%;border:1px solid #cdc7bb;border-radius:50%;background:#faf7ef;box-shadow:0 2px 3px #19253415}.circle svg{width:15px;height:15px}
.section{padding:6.5cqw 5.4%}
.eyeline{display:flex;align-items:center;gap:16px;margin-bottom:3.4cqw}
.rule{height:1px;background:var(--line);flex:1}
.eyeline>.tag:last-child{color:#505b61;letter-spacing:.04em}
.company-grid{display:grid;grid-template-columns:1.03fr 1fr;gap:5cqw;align-items:center}
.origin img{object-fit:cover;width:100%;aspect-ratio:1.24;object-position:48% 50%;border-radius:3px}
.origin figcaption{font:400 clamp(10px,.93cqw,13px)/1.45 var(--mono);display:flex;align-items:center;justify-content:space-between;gap:10px;color:#525f66;text-transform:uppercase;letter-spacing:.045em;margin-top:12px}
.company h2,.deployment h2{font-size:clamp(32px,4.05cqw,65px);line-height:1.04;margin-bottom:1.8cqw}
.company p,.module p,.deployment p,.school-head>p,.instrument-copy>p:not(.tag){font-size:clamp(16px,1.67cqw,24px);line-height:1.48}
.company p,.module p,.deployment p,.school-head>p{color:#444e54}
.company p+p{margin-top:.85em}
.instrument{background:#0b192a;color:var(--paper);display:grid;grid-template-columns:1fr 1fr;position:relative;isolation:isolate}
.product-art{grid-row:1;grid-column:2;position:relative;overflow:hidden;min-height:100%}
.product-art img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;object-position:60% center}
.instrument-copy{grid-row:1;grid-column:1;padding:5.2cqw 3.5cqw 5.2cqw 5.4cqw;align-self:center}
.tag.light{color:#e4e4db}.tag.light i{background:var(--gold)}
.instrument h2,.school h2{font-size:clamp(42px,5.9cqw,92px);letter-spacing:-.045em;line-height:.97;margin:1.75cqw 0 2cqw}
.instrument-copy>p:not(.tag){color:#d6dbdf}
.specs{margin:2.6cqw 0;display:flex;gap:3.4cqw;padding-top:1.8cqw;border-top:1px solid #53606d}
.specs div{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.specs strong{font-size:clamp(27px,3.05cqw,48px)}.specs strong small{font:400 .55em var(--sans);letter-spacing:0}
.specs span{font:400 clamp(10px,.98cqw,14px) var(--mono);text-transform:uppercase;letter-spacing:.035em;color:#c4cbd0}
.school{padding-bottom:4.7cqw}
.school-head{display:grid;grid-template-columns:1.07fr 1fr;gap:5cqw;align-items:end;margin-bottom:3.5cqw}
.school-head h2{margin:0}.school-head>p{max-width:39ch}
.module-tabs{display:flex;width:100%;padding:5px;background:#eae6dc;border:1px solid #d6d1c5;gap:5px;border-radius:10px}
.module-tabs button{border:0;border-radius:6px;flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:11px 6px;min-height:44px;background:transparent;font:600 clamp(15px,1.6cqw,22px) var(--strong)}
.module-tabs button span{font:400 .75em var(--mono);opacity:.75}
.module-tabs button[aria-selected="true"]{background:var(--ink);color:#fff}.module-tabs button[aria-selected="true"] span{color:#ffce53;opacity:1}
.module-tabs button[aria-selected="false"]:hover{background:#f6f3eb}
.module{display:grid;grid-template-columns:1.1fr 1fr;border-bottom:1px solid var(--line);padding:2cqw 0 2.9cqw;gap:3.6cqw;align-items:center}
.module>img{width:100%;aspect-ratio:1.53;object-fit:cover;border-radius:4px}
.module h3{font-size:clamp(26px,3.45cqw,48px);line-height:1.05;margin:1.15cqw 0}
.module .tag{color:#784118}
.deployment{background:#ebe7dc;display:grid;grid-template-columns:.84fr 1.16fr;gap:6cqw;padding-block:4.8cqw}
.deployment h2{margin:1.2cqw 0 1.4cqw}
details{border-top:1px solid #bcb9ae}details:last-of-type{border-bottom:1px solid #bcb9ae}
summary{display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:16px;padding:1.47cqw 0;font:600 clamp(17px,1.76cqw,25px)/1.25 var(--strong);list-style:none}
summary::-webkit-details-marker{display:none}
summary span{position:relative;width:14px;height:14px;flex:none}
summary span::before,summary span::after{content:"";position:absolute;left:0;top:6px;width:13px;height:1.5px;background:var(--ink)}
summary span::after{transform:rotate(90deg)}details[open] summary span::after{display:none}
details p{padding:0 1.2em 1.25em 0}
footer{background:var(--navy);padding:3.5cqw 5.4%;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#f7f6f2}
footer img{width:clamp(120px,15cqw,215px)}.back{display:inline-flex;gap:12px;align-items:center}.back:hover{text-decoration:underline}
dialog{width:min(590px,calc(100% - 32px));max-height:90dvh;background:var(--paper);color:var(--ink);border:0;border-radius:14px;padding:30px;box-shadow:0 16px 80px #00132b55}dialog::backdrop{background:#001223b8}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.close{border:1px solid #bdb9af;display:grid;place-items:center;border-radius:50%;width:38px;height:38px;line-height:1;font-size:27px;background:none}
dialog h2{font-size:36px;margin:12px 0}
.parts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}
.parts figure{background:#eae7de;border-radius:8px;padding:12px 8px;text-align:center}
.parts img{height:82px;width:100%;object-fit:contain}.parts figcaption{margin-top:8px;font-size:14px}
.dialog-note{padding-top:12px;border-top:1px solid var(--line)}
@media(max-width:1090px) and (min-width:761px){
 .hero-copy{padding-top:2.4cqw;width:43%}.hero h1{font-size:6.1cqw}.intro{font-size:16px}.hero .button{font-size:13px;min-height:38px;padding:9px 14px}.route p{max-width:19ch}.route.books>div{width:62%}.company-grid{gap:3.5cqw}.company p,.instrument-copy>p:not(.tag),.module p,.deployment p,.school-head>p{font-size:15px}.tag{font-size:9px}.origin img{aspect-ratio:.94}.specs{margin:17px 0}.section{padding-block:5.2cqw}
}
@media(max-width:760px){
 body{font-size:16px}.mast{padding:19px 5.5%;gap:10px}.brand{width:122px}
 .mobile-menu{display:flex;align-items:center;gap:9px;border-radius:30px;padding:8px 15px;border:1px solid #90928c;background:transparent;font-size:14px;min-height:40px}
 nav{display:none;position:absolute;top:calc(100% - 4px);right:5.5%;width:200px;background:var(--paper);border:1px solid #cdc7bc;border-radius:10px;padding:7px;box-shadow:0 7px 22px #001a362b}
 nav.open{display:flex;flex-direction:column;align-items:stretch;gap:0}nav a,nav .nav-schools{padding:12px 14px;font-size:16px;border:0;display:flex;align-items:center;justify-content:space-between}nav a:hover{background:#e8e4dc;border-radius:6px}
 .hero{display:block;min-height:0;overflow:hidden}.hero-copy{width:100%;padding:18px 6% 0}.hero h1{font-size:clamp(46px,10.4cqw,68px);line-height:.99;margin:10px 0 12px}.intro{max-width:31ch;font-size:17px}.hero .button{margin-top:15px}
 .scene{position:relative;display:block;bottom:-1px;width:151%;max-width:none;margin-left:-51%;margin-top:6px}
 .routes{grid-template-columns:1fr;gap:12px;padding:14px 5.4% 25px}
 .route{padding:18px 20px;min-height:135px}.route h2{font-size:25px;margin:6px 0}.route p{font-size:14px;max-width:22ch}.route>div,.route.books>div{width:66%}.route img{right:13%;width:17%}.route.books img{width:18%}.circle{right:3%;bottom:13%}
 .section{padding:38px 6%}.eyeline{gap:9px;margin-bottom:24px}.eyeline .tag{font-size:9px}.company-grid,.school-head,.deployment,.module{grid-template-columns:1fr}
 .company-grid{gap:20px}.company-grid>div{grid-row:1}.company h2,.deployment h2{font-size:36px;margin-bottom:13px}.company p,.module p,.deployment p,.school-head>p,.instrument-copy>p:not(.tag){font-size:16px}.origin img{aspect-ratio:1.8}.origin figcaption{margin-top:8px}
 .instrument{grid-template-columns:1fr}.instrument-copy{grid-row:1;grid-column:1;padding:35px 6% 25px}.instrument h2{font-size:48px;margin:12px 0 15px}.instrument h2 br{display:none}.instrument h2 br::after{content:" "}.product-art{grid-row:2;grid-column:1;aspect-ratio:1.15;min-height:0}.product-art img{object-position:50% 46%}.specs{margin:20px 0;gap:32px;padding-top:15px}
 .school-head{gap:15px;align-items:start;margin-bottom:20px}.school h2{font-size:45px}.school-head>p{max-width:none}.module-tabs{gap:2px;padding:3px}.module-tabs button{gap:5px;font-size:15px;padding:8px 3px}.module{gap:18px;padding:15px 0 22px}.module>img{aspect-ratio:1.62}.module h3{font-size:30px;margin:7px 0 10px}
 .deployment{gap:22px}.deployment h2{margin:8px 0 13px}summary{padding:15px 0}
 footer{padding:22px 6%}.back{font-size:13px;gap:6px}footer img{width:110px}
}
@media(max-width:380px){.hero h1{font-size:44px}.route{padding-left:14px}.eyeline>.tag:last-child{max-width:45%;text-align:right}.module-tabs button{font-size:14px}.parts{gap:6px}.parts figcaption{font-size:12px}dialog{padding:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

@media(max-width:560px){
 .brand{width:clamp(85px,34cqw,122px)}.mast{padding:16px 6%}.mobile-menu{padding:6px 10px;font-size:13px}
 .hero-copy{padding-top:11px}.hero h1{font-size:clamp(35px,15cqw,47px)}.intro{font-size:16px}
 .route{padding:14px 12px;min-height:125px}.route h2{font-size:clamp(19px,8cqw,25px)}.route .tag{font-size:8px;gap:5px}.route .tag i{width:10px}.route p{font-size:13px}
 .route img{right:10%;height:69%;width:21%}.route.books img{right:9%;width:23%;height:65%}.circle{width:19px;height:19px;right:2.5%;bottom:8%}.circle svg{width:12px}
 .section{padding-block:30px}.company h2,.deployment h2{font-size:clamp(29px,11.5cqw,36px)}.instrument h2,.school h2{font-size:clamp(32px,13.1cqw,45px)}
 .eyeline{gap:6px}.eyeline>.tag:last-child{max-width:42%;text-align:right;line-height:1.3}.eyeline>.tag:first-child{letter-spacing:.02em}
 .module-tabs button{font-size:13px;flex-direction:column;gap:0;line-height:1.3}.module-tabs button span{font-size:9px}.module h3{font-size:clamp(25px,10.2cqw,32px)}.origin figcaption{font-size:8px}
 footer img{width:clamp(85px,29cqw,110px)}.back{font-size:12px;gap:3px}.button{font-size:13px;padding:10px 14px;gap:9px}
}