/* Opus Brand · estilos */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/anton-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/dm-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/dm-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/dm-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/nunito-latin-900-normal.woff2) format('woff2')}
body{margin:0;background:#F4F2ED;color:#1B1340;font-family:'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}a:hover{color:inherit}
*{box-sizing:border-box}
.t{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.012em;word-spacing:.04em;line-height:1.08;margin:0;padding-top:.08em}
h1.t,h2.t,h3.t{text-wrap:balance}
h1.t{line-height:1.16}
.num{font-family:Anton,Impact,sans-serif;line-height:.8;color:transparent;-webkit-text-stroke:2px currentColor;display:block}
.pill{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.lbl{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
:focus-visible{outline:3px solid #FFCC00;outline-offset:3px;box-shadow:0 0 0 7px #1B1340}
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:0 30px;border-radius:999px;font:700 16px 'DM Sans',sans-serif;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:color .35s ease}
.btn::after{content:"";position:absolute;inset:-2px;border-radius:inherit;transform:translateY(102%);transition:transform .45s cubic-bezier(.7,0,.2,1);z-index:-1}
.btn:hover::after{transform:none}
.btn[disabled]{opacity:.7;cursor:progress}
.btn-y{background:#FFCC00;color:#1B1340}.btn-y::after{background:#1B1340}.btn-y:hover{color:#FFCC00}
.btn-o{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}.btn-o::after{background:#fff}.btn-o:hover{color:#5B3FF5}
.btn-p{background:#5B3FF5;color:#fff}.btn-p::after{background:#1B1340}.btn-p:hover{color:#FFCC00}
.btn-n{background:#1B1340;color:#fff}.btn-n::after{background:#FFCC00}.btn-n:hover{color:#1B1340}
.mag{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.nav{transition:background .4s ease, box-shadow .4s ease, backdrop-filter .4s}
.nlink{position:relative;text-decoration:none;font-weight:500;font-size:15px;transition:color .3s}
.nlink::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:#FFCC00;transform:scaleX(0);transform-origin:right;transition:transform .35s}
.nlink:hover::after{transform:scaleX(1);transform-origin:left}
.rv{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@keyframes wordIn{from{transform:translateY(105%)}to{transform:none}}
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding:.2em .02em .04em;margin:-.2em .2em -.04em 0}
.word{display:inline-block;transform:translateY(105%);animation:wordIn .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes marq{to{transform:translateX(-50%)}}
.marq{display:flex;width:max-content;animation:marq 40s linear infinite}
.marq-wrap:hover .marq{animation-play-state:paused}
.hl{position:relative;display:inline-block;z-index:0;padding:0 .12em}
.hl::before{content:"";position:absolute;left:-.02em;right:-.02em;top:.06em;bottom:.02em;background:#FFCC00;border-radius:.16em;z-index:-1;transform-origin:left;transform:scaleX(0);transition:transform 1s .3s cubic-bezier(.7,0,.2,1)}
.rv.in .hl::before,.hl.on::before{transform:scaleX(1)}
.drawx{transform-origin:left;transform:scaleX(0);transition:transform 1s .2s cubic-bezier(.7,0,.2,1)}
.rv.in .drawx{transform:scaleX(1)}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
.lid{animation:blink 6s infinite;transform-origin:center}
@keyframes scan{0%{transform:translateX(-46px)}50%{transform:translateX(46px)}100%{transform:translateX(-46px)}}
.scan{animation:scan 1.2s cubic-bezier(.6,0,.4,1) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.bob{animation:bob 1.6s ease-in-out infinite}
.pupil{transition:transform .18s ease-out}
.flip{perspective:1400px;background:none;border:0;padding:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
.flip-in{position:relative;width:100%;height:100%;transition:transform .8s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:28px;padding:32px;display:flex;flex-direction:column;justify-content:space-between}
.back{transform:rotateY(180deg)}
.dif{transition:background .4s}
.dif .dt{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.dif:hover{background:#fff}
.dif:hover .dt{transform:translateX(10px)}
.dif .dp{transition:background .35s,color .35s}
.dif:hover .dp{background:#FFCC00;color:#1B1340}
.svc{position:relative;isolation:isolate;overflow:hidden;transition:color .45s;text-decoration:none}
.svc::before{content:"";position:absolute;inset:0;background:#5B3FF5;transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.7,0,.2,1);z-index:-1;border-radius:24px}
.svc:hover{color:#F4F2ED}
.svc:hover::before{transform:scaleX(1)}
.svc .arr{transition:transform .55s cubic-bezier(.2,.8,.2,1),background .4s,color .4s}
.svc:hover .arr{transform:rotate(-45deg);background:#FFCC00;color:#1B1340}
.tag{transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s,color .3s,border-color .3s}
.tag:hover{background:#FFCC00;color:#1B1340;border-color:#FFCC00}
.proj{transform:rotate(var(--r));transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s,opacity .4s;cursor:pointer;font:inherit;text-align:left}
.proj:hover,.proj:focus-visible{transform:rotate(0deg) translateY(-30px);z-index:20;box-shadow:0 40px 80px rgba(27,19,64,.55)}
.fan:hover .proj:not(:hover){opacity:.8}
.ln{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s cubic-bezier(.7,0,.2,1)}
.ln.on{stroke-dashoffset:0}
@keyframes pulse{from{stroke-dashoffset:1.1}to{stroke-dashoffset:0}}
.pls{stroke-dasharray:.08 1.1;stroke-dashoffset:1.1;opacity:0}
.pls.on{opacity:1;animation:pulse 1.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin 40s linear infinite;transform-origin:center}
.node{transition:background .45s,color .45s,box-shadow .45s,transform .35s cubic-bezier(.2,.8,.2,1)}
.node:hover{transform:scale(1.08)}
@keyframes qa{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
@keyframes qb{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
.qa{animation:qa .55s cubic-bezier(.2,.8,.2,1)}.qb{animation:qb .55s cubic-bezier(.2,.8,.2,1)}
@keyframes ua{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes ub{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.ua{animation:ua .5s cubic-bezier(.2,.8,.2,1) both}.ub{animation:ub .5s cubic-bezier(.2,.8,.2,1) both}
.opt{transition:background .3s,color .3s,transform .25s,border-color .3s;cursor:pointer}
.opt:hover{transform:translateY(-3px);border-color:#FFCC00}
.inp{width:100%;height:56px;border-radius:16px;border:2px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;padding:0 18px;font:500 16px 'DM Sans',sans-serif}
.inp::placeholder{color:rgba(255,255,255,.6)}
.inp:focus{border-color:#FFCC00;outline:none}
textarea.inp{height:110px;padding:14px 18px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cur{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;opacity:0;transition:opacity .3s}
@media (hover:none),(pointer:coarse){.cur{display:none}}
.nocur,.nocur a,.nocur button,.nocur input,.nocur textarea{cursor:none}
@media (hover:none),(pointer:coarse){.nocur,.nocur a,.nocur button{cursor:auto}}

.burger,.met-tl,.fan-dots{display:none}
.met-tl::before{content:"";position:absolute;left:27px;top:28px;bottom:60px;width:2px;background:rgba(255,255,255,.28)}
.tl-node{transition:background .5s .15s,color .5s .15s,border-color .5s .15s,box-shadow .5s .15s}
.tl-item.in .tl-node{background:#FFCC00!important;color:#1B1340!important;border-color:#FFCC00!important;box-shadow:0 0 24px rgba(255,204,0,.5)}
@media (max-width:1023px){
.nav-links{display:none!important}
.burger{display:flex!important}
.navin{padding:14px 28px!important;gap:12px!important}
.nav-cta{margin-left:auto}
.hero{padding:112px 28px 28px!important;margin-top:-76px!important}
.g1{grid-template-columns:minmax(0,1fr)!important}
.g4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.g3{grid-template-columns:minmax(0,1fr)!important}
.sec{padding:112px 28px!important}
.hero-vis{zoom:.8}
.met-sticky{position:static!important;min-height:0!important;padding:112px 28px!important}
.met-net,.met-panel{display:none!important}
.met-tl{display:block!important}
.stack{flex-direction:column!important;align-items:flex-start!important}
.fan{justify-content:flex-start!important;overflow-x:auto;scroll-snap-type:x mandatory;padding:36px 28px 28px!important;margin:0 -28px;scrollbar-width:none}
.fan::-webkit-scrollbar{display:none}
.proj{transform:none!important;margin:0 16px 0 0!important;scroll-snap-align:center;width:min(300px,78vw)!important}
.fan-dots{display:flex!important}
.cta-cards{zoom:.8}
.dif{gap:14px!important}
}
@media (max-width:640px){
.sec{padding:88px 20px!important}
.hero{padding:104px 20px 24px!important}
.met-sticky{padding:88px 20px!important}
.navin{padding:12px 20px!important}
.nav-cta{display:none!important}
.burger{margin-left:auto!important}
.g4,.g2s{grid-template-columns:minmax(0,1fr)!important}
.cform-grid>*{grid-column:auto!important}
.flip{height:280px!important}
.hero-vis{zoom:.6;height:600px!important}
.pad-s{padding:28px 22px!important;border-radius:28px!important}
.hide-s{display:none!important}
.res-name{font-size:64px!important}
.res-sub{font-size:28px!important}
.pill{height:auto!important;min-height:36px;padding-top:8px!important;padding-bottom:8px!important;line-height:1.3;max-width:100%}
.pad-s .t{overflow-wrap:anywhere}
.ad-row{grid-template-columns:36px 22px minmax(0,1fr)!important;padding:18px 20px!important;gap:12px!important}
.ad-row>span:last-child{font-size:18px!important}
.sw-lbl{font-size:20px!important}
.cta-cards{zoom:.62}
.marq .t{font-size:26px!important}
.fan{margin:0 -20px;padding:36px 20px 24px!important}
.dif{padding:22px 8px!important}
.dif .dp{height:auto!important;min-height:40px;white-space:normal;padding:8px 18px!important}
.opt{min-height:76px!important;font-size:17px!important;padding:16px 18px!important}
.sec-f{padding:64px 20px 36px!important}
.ovl{padding:12px!important}
.modal-img{min-height:220px!important}
.svc{padding:22px 8px!important;gap:16px!important}
.svc .arr{width:48px!important;height:48px!important}
.sympt-head{gap:20px!important}
}
@media (hover:none){
.svc::before{display:none}.svc:hover{color:inherit}.svc:hover .arr{transform:none;background:#5B3FF5;color:#fff}
.hide-touch{display:none!important}
.dif:hover{background:transparent}.dif:hover .dt{transform:none}.dif:hover .dp{background:#5B3FF5;color:#fff}
}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.marq{animation:none}.word{transform:none}.rv{opacity:1;transform:none}.hl::before{transform:none}.drawx{transform:none}.cur{display:none}
}
