/* ===== base ===== */
:root{--f-sans:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;--f-serif:"Fraunces",Georgia,serif;--f-mono:"Martian Mono",ui-monospace,Menlo,monospace;--ink:#070a0b;--paper:#e7e3db;--orange:#ff6432;--teal:#0b4b4b;--line:#ffffff27;--muted:#b1b6ae}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--f-sans);overflow-x:hidden}.page-transition{position:fixed;z-index:99;inset:0;background:var(--orange);transform:translateY(-101%);transition:transform .5s cubic-bezier(.75,0,.2,1);pointer-events:none}.page-transition.go{transform:translateY(0)}.site-header{height:85px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:10}.brand{color:inherit;text-decoration:none;display:grid;gap:4px;line-height:1}.brand strong{font-size:13px;letter-spacing:-.05em}.brand span,.eyebrow,small,.serial,footer small{font:500 9px var(--f-mono);letter-spacing:.11em}.site-nav{display:flex;gap:26px}.site-nav a{font-size:11px;color:#ddd9d0b5;text-decoration:none;transition:color .2s}.site-nav a:hover,.site-nav a.active{color:var(--paper)}.site-nav b{color:var(--orange)}.menu-button{display:none}.section-pad{padding-left:max(8%,calc((100vw - 1360px)/2));padding-right:max(8%,calc((100vw - 1360px)/2))}.eyebrow{display:flex;gap:10px;align-items:center;text-transform:uppercase}.eyebrow span{width:19px;height:1px;background:var(--orange)}h1,h2,h3,p{margin:0}h1,h2{font-weight:500;letter-spacing:-.075em;line-height:.86}h1{font-size:clamp(59px,8.4vw,134px)}h2{font-size:clamp(43px,5.5vw,88px)}em{font-family:var(--f-serif);font-weight:400;letter-spacing:-.065em}.button{display:inline-flex;align-items:center;gap:20px;color:#140a06;background:var(--orange);font-size:11px;font-weight:700;text-decoration:none;padding:15px 17px}.button b,.text-link b{font-size:17px}.text-link{font-size:11px;font-weight:700;color:inherit;text-decoration:none}.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}.js .reveal.in{opacity:1;transform:none}.home-hero{min-height:calc(100vh - 85px);position:relative;overflow:hidden;display:flex;align-items:center}.home-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 42%,#fc552525 0,transparent 22%),linear-gradient(112deg,#071311 5%,#071011 54%,#120e0e)}.hero-glow{position:absolute;width:60vw;height:60vw;right:-26vw;top:-18vw;border-radius:50%;background:radial-gradient(circle,#f76234bb 0 1%,#de613f55 15%,#0d656244 36%,transparent 68%);filter:blur(8px);animation:breathe 7s ease-in-out infinite}.hero-copy{position:relative;z-index:1;margin-left:max(8%,calc((100vw - 1360px)/2));max-width:740px;padding:90px 0}.hero-copy h1{margin-top:25px}.hero-copy>p:not(.eyebrow){max-width:405px;margin-top:34px;line-height:1.65;font-size:15px;color:#cac9c2}.action-row{margin-top:33px;display:flex;align-items:center;gap:27px}.hero-orbit{position:absolute;width:560px;height:560px;right:7%;top:50%;transform:translateY(-50%);border:1px solid #fff3;border-radius:50%;animation:float 7s ease-in-out infinite}.hero-orbit:before,.hero-orbit:after{content:"";position:absolute;border:1px solid #ff895155;border-radius:50%;inset:13%}.hero-orbit:after{inset:28%;border-color:#61cbba33}.orb{position:absolute;border-radius:50%;filter:blur(.3px)}.orb-one{width:36px;height:36px;background:#ff7141;left:7%;top:24%;box-shadow:0 0 30px #ff653e}.orb-two{width:20px;height:20px;background:#d9f4e9;right:13%;bottom:16%;box-shadow:0 0 45px #5cf0d2}.orb-three{width:10px;height:10px;background:#ffbe7b;right:8%;top:20%;box-shadow:0 0 40px #ff9a57}.hero-orbit span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:500 11px/1.5 var(--f-mono);letter-spacing:.16em;color:#d6d6c8;text-align:center}.scroll-note{position:absolute;bottom:23px;left:max(8%,calc((100vw - 1360px)/2));font:9px var(--f-mono);letter-spacing:.1em;color:#a2a59e}.scroll-note i{font-style:normal;color:var(--orange);padding-left:8px}.statement{padding-top:145px;padding-bottom:145px;display:grid;grid-template-columns:18% 1fr 27%;gap:20px;background:#dcd7cd;color:#111715}.serial{color:#d74b29;padding-top:10px}.statement h2{font-size:clamp(40px,5.3vw,82px)}.statement-copy{font-size:14px;line-height:1.7;align-self:end;max-width:300px;color:#4f5450}.featured{padding-top:135px;padding-bottom:135px}.section-label{display:flex;justify-content:space-between;align-items:center}.feature-cards{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:48px}.feature-card{min-height:550px;padding:27px;display:flex;flex-direction:column;justify-content:space-between;color:white;text-decoration:none;overflow:hidden;position:relative;isolation:isolate}.feature-card:before{content:"";position:absolute;inset:0;z-index:-1;transition:transform .6s cubic-bezier(.2,.8,.2,1)}.feature-card:hover:before{transform:scale(1.06) rotate(2deg)}.card-light:before{background:linear-gradient(30deg,#0009,transparent 60%),url("assets/identity/optical-01.jpg") center/cover}.card-dark:before{background:linear-gradient(30deg,#0009,transparent 60%),url("assets/identity/optical-03.jpg") center/cover}.feature-card h3{font-size:clamp(35px,4vw,62px);line-height:.89;letter-spacing:-.07em}.feature-card span{font:10px var(--f-mono)}.closing-banner{position:relative;min-height:650px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;overflow:hidden;background:linear-gradient(115deg,#0d4947,#171514 53%,#411910)}.closing-banner h2{position:relative;z-index:1;margin:24px 0 32px}.closing-banner .eyebrow,.closing-banner .button{position:relative;z-index:1}.line-art{position:absolute;width:700px;height:700px;border:2px solid #ff653566;border-radius:48% 52% 63% 37%/44% 38% 62% 56%;right:-160px;top:-180px;transform:rotate(25deg);box-shadow:inset 0 0 60px #ff653522,0 0 100px #ff653518;animation:spin 18s linear infinite}.line-art:after{content:"";position:absolute;inset:16%;border:1px solid #77d5cc55;border-radius:inherit}footer{display:flex;justify-content:space-between;align-items:center;padding:31px 5%;border-top:1px solid var(--line)}footer>div{display:flex;gap:20px}footer>div a{font:10px var(--f-mono);color:var(--paper);text-decoration:none}footer small{color:#9fa49e}.page-intro{padding-top:135px;padding-bottom:115px;background:radial-gradient(circle at 80% 50%,#d54a2e32,transparent 24%),#0e1718}.page-intro h1,.contact-hero h1{margin-top:27px}.intro-copy{max-width:390px;margin-top:38px;line-height:1.7;font-size:15px;color:var(--muted)}.project-list{padding-top:0;padding-bottom:115px}.project-row{min-height:400px;padding:30px;display:flex;align-items:flex-end;justify-content:space-between;text-decoration:none;color:white;margin-bottom:14px;position:relative;isolation:isolate;overflow:hidden}.project-row:before{content:"";position:absolute;inset:0;z-index:-1;background:center/cover;transition:transform .6s}.project-row:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#050606bb,transparent)}.project-row:hover:before{transform:scale(1.05)}.project-row span,.project-row small{font:10px var(--f-mono)}.project-row span{align-self:start}.project-row h2{margin-top:12px;font-size:clamp(35px,4.5vw,73px)}.project-row i{font-style:normal;font-size:26px}.row-one:before{background-image:url("assets/identity/optical-04.jpg")}.row-two:before{background-image:url("assets/identity/optical-01.jpg")}.row-three:before{background-image:url("assets/identity/optical-03.jpg")}.small-cta{padding-top:0;padding-bottom:135px;display:flex;gap:25px;align-items:center}.small-cta p{color:var(--muted);font-size:13px}.about-hero{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 85px);background:#e4ded2;color:#101514}.portrait-wrap{position:relative;overflow:hidden;background:#202323}.portrait-wrap img{width:100%;height:100%;display:block;object-fit:cover;object-position:center top}.portrait-wrap span{position:absolute;bottom:25px;left:28px;font:500 10px/1.4 var(--f-mono);letter-spacing:.12em;color:#fff;text-shadow:0 1px 10px #000}.about-hero-copy{align-self:center;padding:13%;max-width:660px}.about-hero-copy h1{margin:25px 0 30px}.about-hero-copy>p:not(.eyebrow){font-size:16px;line-height:1.65;max-width:340px}.bio{display:grid;grid-template-columns:18% 1fr;padding-top:130px;padding-bottom:130px;gap:20px}.bio-copy{max-width:830px}.bio-copy p{max-width:560px;margin:35px 0;font-size:15px;line-height:1.75;color:var(--muted)}.skills{padding-top:115px;padding-bottom:120px;background:#0c393a}.skills>div{margin-top:70px;border-top:1px solid var(--line)}.skills article{display:grid;grid-template-columns:13% 30% 1fr;gap:20px;padding:28px 0;border-bottom:1px solid var(--line)}.skills span{font:10px var(--f-mono);color:#ff9b6c}.skills h3{font-size:24px;letter-spacing:-.05em}.skills p{max-width:390px;color:#c5cbc3;font-size:14px;line-height:1.65}.contact-page{background:radial-gradient(circle at 85% 30%,#f4592a40,transparent 20%),#0d1415}.contact-hero{min-height:calc(100vh - 85px);padding-top:130px;padding-bottom:110px}.contact-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:78px;max-width:1100px}.contact-choice{min-height:190px;padding:20px;border:1px solid var(--line);color:var(--paper);text-decoration:none;display:flex;flex-direction:column;justify-content:space-between;transition:background .25s,transform .25s}.contact-choice:hover{background:#ff6432;color:#130c08;transform:translateY(-5px)}.contact-choice strong{font-size:19px;letter-spacing:-.04em}.contact-choice i{font-size:21px;font-style:normal;color:var(--orange)}.contact-choice:hover i{color:#130c08}@keyframes breathe{50%{transform:scale(1.12);opacity:.7}}@keyframes float{50%{margin-top:-20px;transform:translateY(-50%) rotate(3deg)}}@keyframes spin{to{transform:rotate(385deg)}}@media(max-width:760px){.site-header{height:70px;padding:0 7%}.site-nav{position:absolute;top:69px;left:0;width:100%;padding:25px 7%;background:#0c1010;border-bottom:1px solid var(--line);display:none;flex-direction:column;gap:18px}.site-nav.open{display:flex}.menu-button{width:35px;height:35px;padding:0;background:none;border:0;display:grid;gap:6px;place-content:center}.menu-button i{display:block;width:21px;height:1px;background:var(--paper)}.section-pad{padding-left:7%;padding-right:7%}.hero-copy{margin-left:7%;padding:100px 0 100px}.hero-orbit{width:380px;height:380px;right:-190px;top:31%;opacity:.7}.statement{grid-template-columns:1fr;gap:25px;padding-top:90px;padding-bottom:90px}.statement-copy{max-width:350px}.featured{padding-top:85px;padding-bottom:85px}.feature-cards{grid-template-columns:1fr;margin-top:35px}.feature-card{min-height:430px}.closing-banner{min-height:480px}.page-intro{padding-top:100px;padding-bottom:80px}.project-row{min-height:300px;padding:20px}.small-cta{padding-bottom:80px;flex-direction:column;align-items:flex-start}.about-hero{grid-template-columns:1fr;min-height:auto}.portrait-wrap{height:510px}.about-hero-copy{padding:80px 7%}.bio{grid-template-columns:1fr;padding-top:85px;padding-bottom:85px}.skills{padding-top:85px;padding-bottom:85px}.skills>div{margin-top:45px}.skills article{grid-template-columns:45px 1fr}.skills p{grid-column:2}.contact-hero{padding-top:100px;min-height:auto;padding-bottom:80px}.contact-choices{grid-template-columns:1fr;margin-top:50px}.contact-choice{min-height:150px}footer{padding:28px 7%;align-items:flex-start;gap:25px;flex-direction:column}}

/* ===== categorias de trabalho (projetos.html) ===== */
.category-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:38px}
.category-tabs a{font:700 11px var(--f-sans);color:var(--paper);text-decoration:none;border:1px solid var(--line);padding:11px 18px;transition:border-color .25s ease,background .25s ease}
.category-tabs a:hover{border-color:var(--orange);background:#ff643214}
.work-category{padding-top:70px;padding-bottom:70px;scroll-margin-top:100px}
.work-category:nth-child(even){background:#0e1516}
.work-category h2{font-size:clamp(36px,4.4vw,62px);margin:16px 0 20px}
.work-intro{max-width:480px;color:var(--muted);font-size:15px;line-height:1.7;margin-bottom:44px}
.work-list{display:grid;gap:12px}
.work-item{display:grid;grid-template-columns:60px 1fr;gap:18px;border:1px solid var(--line);padding:24px 26px;align-items:start}
.work-item span{font:10px var(--f-mono);color:#ff9b6c;padding-top:3px}
.work-item h3{font-size:19px;letter-spacing:-.04em;margin-bottom:8px}
.work-item p{font-size:14px;line-height:1.6;color:var(--muted)}
@media(max-width:760px){.work-item{grid-template-columns:1fr}.work-item span{padding-top:0}}

/* ===== seção "como trabalho" (sobre.html) ===== */
.process{padding-top:0;padding-bottom:135px}
.process-head{max-width:640px;margin-bottom:55px}
.process-head h2{font-size:clamp(38px,4.6vw,68px)}
.process-head p{margin-top:22px;color:var(--muted);font-size:15px;line-height:1.7;max-width:460px}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:46px}
.process-grid article{border:1px solid var(--line);padding:26px 22px;background:#0e1516}
.process-grid span{font:10px var(--f-mono);color:#ff9b6c}
.process-grid h3{font-size:19px;letter-spacing:-.045em;margin:16px 0 12px}
.process-grid p{font-size:13px;line-height:1.65;color:var(--muted)}
@media(max-width:900px){.process-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.process-grid{grid-template-columns:1fr}}

/* ===== contactos.html com o 4º card (orçamento) ===== */
.contact-choices{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* ===== página de orçamento ===== */
.quote-hero{padding-top:130px;padding-bottom:60px}
.quote-hero h1{margin-top:27px}
.quote-info{margin-top:40px;border:1px solid var(--line);border-left:2px solid var(--orange);padding:22px 24px;max-width:640px;background:#0e1516}
.quote-info p.label{margin-bottom:10px}
.quote-info p:last-child{font-size:14px;line-height:1.7;color:var(--muted)}
.quote-info strong{color:var(--paper)}
.quote-form{display:grid;gap:46px;padding-bottom:130px}
.quote-block{display:grid;gap:16px}
.quote-block>p.label{font:500 10px var(--f-mono);letter-spacing:.11em;text-transform:uppercase;color:#ff9b6c}
.quote-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.quote-options.two-col{grid-template-columns:repeat(3,1fr)}
.quote-option{position:relative}
.quote-option input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.quote-option label{display:block;border:1px solid var(--line);padding:20px 18px;cursor:pointer;transition:border-color .25s ease,background .25s ease,transform .25s ease}
.quote-option label strong{display:block;font-size:16px;letter-spacing:-.03em;margin-bottom:6px}
.quote-option label span{display:block;font-size:12px;color:var(--muted);line-height:1.5}
.quote-option input:checked+label{border-color:var(--orange);background:#ff643214;transform:translateY(-2px)}
.quote-option input:focus-visible+label{outline:2px solid var(--orange);outline-offset:2px}
.quote-field{display:grid;gap:10px}
.quote-field label{font:500 10px var(--f-mono);letter-spacing:.09em;color:var(--muted)}
.quote-field textarea,.quote-field input{width:100%;background:#0b0d0e;border:1px solid var(--line);color:var(--paper);padding:14px 16px;font:14px var(--f-sans);transition:border-color .25s ease}
.quote-field textarea{min-height:110px;resize:vertical}
.quote-field textarea:focus,.quote-field input:focus{outline:none;border-color:var(--orange)}
.quote-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding-top:10px;border-top:1px solid var(--line)}
.quote-actions .button{border:0;font:700 11px var(--f-sans);cursor:pointer}
.quote-actions .button.whatsapp{background:#25d366;color:#062910}
.quote-actions .button:disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.quote-note{font-size:12px;color:var(--muted);max-width:480px}
@media(max-width:760px){.quote-options,.quote-options.two-col{grid-template-columns:1fr}}

/* ===== ajustes de títulos e imagens de capa ===== */
:root{--title-tracking:-.055em}h1,h2{letter-spacing:var(--title-tracking)}.feature-card h3,.project-row h2{letter-spacing:-.052em}.project-row.custom-image:before,.feature-card.custom-image:before{background-image:linear-gradient(30deg,#0009,transparent 60%),var(--project-image)!important}

/* ===== movimento e identidade ===== */
html{--scroll-progress:0}.site-header{transition:background .35s ease,backdrop-filter .35s ease,box-shadow .35s ease}.is-scrolled .site-header{position:sticky;top:0;background:#070a0be8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 8px 28px #0004}.site-header .brand strong,footer .brand strong{font-size:17px;letter-spacing:-.065em}.site-header .brand span,footer .brand span{font-size:8px}.site-header:after{content:"";position:fixed;z-index:20;top:0;left:0;height:2px;width:100%;background:var(--orange);transform-origin:left;transform:scaleX(var(--scroll-progress));box-shadow:0 0 12px var(--orange);pointer-events:none}.hero-glow{transition:translate .1s linear}.feature-card,.project-row{will-change:transform}.feature-card.reveal.in,.project-row.reveal.in{animation:card-arrive .8s cubic-bezier(.22,1,.36,1) both}.click-pulse{position:fixed;z-index:120;width:10px;height:10px;border:1px solid #ffb193;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) scale(1);animation:click-pulse .6s ease-out forwards}.button:active,.outline-button:active,.contact-choice:active{transform:scale(.96)}@keyframes card-arrive{0%{opacity:0;transform:translateY(35px) scale(.97)}100%{opacity:1;transform:none}}@keyframes click-pulse{to{opacity:0;transform:translate(-50%,-50%) scale(11)}}@media(max-width:760px){.site-header .brand strong,footer .brand strong{font-size:15px}}

/* --- ampliação do nome no cabeçalho/rodapé --- */
.site-header .brand strong,footer .brand strong{font-size:22px;letter-spacing:-.06em}
.site-header .brand span,footer .brand span{font-size:9px}
@media(max-width:760px){.site-header .brand strong,footer .brand strong{font-size:18px}}

/* --- sublinhado animado no menu --- */
.site-nav a{position:relative}
.site-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--orange);transition:right .35s cubic-bezier(.22,1,.36,1)}
.site-nav a:hover:after,.site-nav a.active:after{right:0}

/* --- ícone do menu mobile vira X --- */
.menu-button i{transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .25s ease}
.menu-button.active i:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-button.active i:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* --- botões e links reagem ao hover/click --- */
.button,.contact-choice{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,background .25s ease,color .25s ease}
.button:hover{transform:translateY(-3px);box-shadow:0 14px 30px #ff643255}
.text-link b{display:inline-block;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.text-link:hover b{transform:translateX(5px)}
.pop{animation:pop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(.94)}100%{transform:scale(1)}}
.click-pulse{width:13px;height:13px}

/* --- cartões reagem ao movimento do rato (tilt 3D) --- */
.feature-card,.project-row{transition:transform .25s ease}

/* ================================================================
   IDENTIDADE EXCLUSIVA — grão de filme, cursor de câmera, reveals
   de linha, wipe nos clipes e timecode. Assinatura MICHEL SANTOS.
   ================================================================ */

/* --- grão de filme cinematográfico, sutil e contínuo --- */
.grain-overlay{position:fixed;inset:-60px;z-index:90;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain-shift 1s steps(4) infinite}
@keyframes grain-shift{0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}50%{transform:translate(1%,-2%)}75%{transform:translate(-1%,2%)}100%{transform:translate(0,0)}}

/* --- cursor personalizado: mira de câmera --- */
html.has-custom-cursor,html.has-custom-cursor *{cursor:none!important}
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:220;border-radius:50%;will-change:transform}
.cursor-dot{width:6px;height:6px;background:var(--orange)}
.cursor-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid #ffffff70;transition:width .15s ease,height .15s ease,margin .15s ease,border-color .15s ease,background .15s ease}
.cursor-ring.hovered{width:64px;height:64px;margin:-32px 0 0 -32px;background:#ff643222;border-color:var(--orange)}
.cursor-label{position:fixed;top:0;left:0;pointer-events:none;z-index:221;font:600 10px var(--f-mono);letter-spacing:.1em;color:#140a06;background:var(--orange);padding:5px 10px;border-radius:20px;opacity:0;transform:translate(-50%,-46px) scale(.6);transition:opacity .25s ease,transform .25s ease}
.cursor-label.show{opacity:1;transform:translate(-50%,-46px) scale(1)}
@media(hover:none),(pointer:coarse){.cursor-dot,.cursor-ring,.cursor-label{display:none}}
html.has-custom-cursor input,html.has-custom-cursor textarea{cursor:text!important}

/* --- timecode fixo, como o HUD de uma timeline de edição --- */
.scroll-timecode{position:fixed;left:22px;bottom:22px;z-index:95;display:flex;align-items:center;gap:9px;font:11px var(--f-mono);letter-spacing:.09em;color:#dedbd2;background:#05070799;border:1px solid #ffffff22;padding:9px 13px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.scroll-timecode:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px var(--orange);animation:rec-blink 1.4s ease-in-out infinite}
@keyframes rec-blink{50%{opacity:.2}}
@media(max-width:760px){.scroll-timecode{left:14px;bottom:14px;padding:7px 10px;font-size:10px}}

/* --- luz que segue o cursor na home --- */
.home-hero{--mx:50%;--my:40%}
.home-hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx) var(--my),#ff643222,transparent 62%);opacity:0;transition:opacity .4s ease}
.home-hero:hover:after{opacity:1}

/* --- textos que revelam linha por linha, como uma legenda --- */
.line-mask{display:block;overflow:hidden;padding:0.18em 0.1em 0.34em 0.02em;margin:-0.18em -0.1em -0.34em -0.02em}
.js .line-inner{display:block;transform:translateY(112%);transition:transform 1s cubic-bezier(.22,1,.36,1)}
.js .reveal.in .line-inner{transform:none}
.reveal.in .line-mask:nth-child(1) .line-inner{transition-delay:.02s}
.reveal.in .line-mask:nth-child(2) .line-inner{transition-delay:.16s}
.reveal.in .line-mask:nth-child(3) .line-inner{transition-delay:.3s}

/* --- os clipes "abrem" como um wipe de corte --- */
.feature-card.reveal.in:before,.project-row.reveal.in:before{animation:wipe-reveal 1s cubic-bezier(.22,1,.36,1) both}
@keyframes wipe-reveal{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}

/* --- depoimentos reais de clientes --- */
.testimonials{padding-top:0;padding-bottom:135px}
.testimonial-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.testimonial{border:1px solid #ffffff27;padding:24px 22px;background:#0e1516}
.testimonial p{font-size:14px;line-height:1.6;color:#e7e3db;font-style:italic}
.testimonial span{display:block;margin-top:16px;font:10px var(--f-mono);letter-spacing:.08em;color:#ff9b6c;font-style:normal}
@media(max-width:900px){.testimonial-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.testimonial-grid{grid-template-columns:1fr}}

/* --- respiro depois de títulos com entrelinha apertada, evita "corte" de descendentes --- */
h1,h2{padding-bottom:.14em}

/* --- ímã de leads: pop-up do guia grátis --- */
.lead-popup-backdrop{position:fixed;inset:0;z-index:210;background:#05070ad9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .35s ease}
.lead-popup-backdrop.show{opacity:1;pointer-events:auto}
.lead-popup{position:relative;max-width:440px;width:100%;max-height:88vh;overflow-y:auto;background:#0e1516;border:1px solid #ffffff27;padding:34px 30px;transform:translateY(16px) scale(.98);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.lead-popup-form{max-width:620px}
.lead-popup-form iframe{border:0;width:100%;height:480px;background:#fff;margin-top:6px}
.button:disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.lead-popup-form #lead-confirm{width:100%;justify-content:center;border:0;cursor:pointer;margin-top:16px}
.lead-popup-backdrop.show .lead-popup{transform:none}
.lead-popup-close{position:absolute;top:12px;right:12px;background:none;border:0;color:#b1b6ae;font-size:22px;cursor:pointer;line-height:1;padding:8px}
.lead-popup h3{font-size:27px;letter-spacing:-.045em;margin:14px 0 10px;line-height:1.08}
.lead-popup p{font-size:13px;line-height:1.6;color:#b1b6ae;margin-bottom:20px}
.lead-popup form{display:grid;gap:10px}
.lead-popup input{background:#05070a;border:1px solid #ffffff27;color:#e7e3db;padding:12px 14px;font:14px var(--f-sans)}
.lead-popup input:focus{outline:none;border-color:var(--orange)}
.lead-popup .button{border:0;width:100%;justify-content:center;cursor:pointer;margin-top:4px}
.lead-popup-success{display:none;text-align:center}
.lead-popup-success.show{display:block}
.lead-tab{position:fixed;right:22px;bottom:22px;z-index:95;background:var(--orange);color:#140a06;font:700 11px var(--f-sans);padding:13px 18px;border:0;cursor:pointer;display:flex;align-items:center;gap:8px;box-shadow:0 10px 24px #ff643244;transition:transform .25s ease}
.lead-tab:hover{transform:translateY(-3px)}
@media(max-width:760px){.lead-tab{right:14px;bottom:14px;padding:11px 15px;font-size:10px}.lead-popup{padding:28px 22px}.lead-popup-form iframe{height:400px}}
/* --- respeita quem prefere menos movimento --- */
@media(prefers-reduced-motion: reduce){
  .hero-glow,.hero-orbit,.line-art,.grain-overlay,.scroll-timecode:before{animation:none!important}
  .reveal,.line-inner{transition:opacity .3s ease!important;transform:none!important}
  .feature-card,.project-row{transition:none!important}
  .feature-card.reveal.in:before,.project-row.reveal.in:before{animation:none!important;clip-path:none!important}
  html.has-custom-cursor,html.has-custom-cursor *{cursor:auto!important}
  .cursor-dot,.cursor-ring,.cursor-label{display:none!important}
  .lead-popup{transition:none!important;transform:none!important}
}

/* ================================================================
   ILHA DE EDIÇÃO — tipografia, monitor, trilhas e player
   Conceito: o site se comporta como a timeline do Michel.
   ================================================================ */

/* --- tipografia: Bricolage (voz), Fraunces itálico (respiro), Martian Mono (timecode) --- */
body{font-family:var(--f-sans);font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
h1,h2{font-weight:600;letter-spacing:-.055em;line-height:.9;text-wrap:balance;font-variation-settings:"wdth" 92}
h1{font-size:clamp(54px,8vw,128px)}
em{font-family:var(--f-serif);font-style:italic;font-weight:300;letter-spacing:-.035em;font-variation-settings:"SOFT" 100,"WONK" 1}
.brand strong{font-weight:700;letter-spacing:-.04em}
.brand span,.eyebrow,small,.serial,footer small,.scroll-note,.feature-card span,.project-row span,.project-row small{font-family:var(--f-mono);font-weight:400;letter-spacing:.04em}
.button,.text-link,.site-nav a,.lead-tab,.category-tabs a{font-family:var(--f-sans);letter-spacing:-.005em}
.scroll-timecode,.cursor-label{font-family:var(--f-mono);letter-spacing:.02em}
p{text-wrap:pretty}

/* --- faixa de frases (ticker) --- */
.ticker{overflow:hidden;border-block:1px solid var(--line);background:#0b1213;padding-block:16px}
.ticker div{display:flex;gap:42px;width:max-content;animation:ticker 38s linear infinite}
.ticker span{font:600 clamp(20px,2.4vw,34px)/1 var(--f-sans);letter-spacing:-.04em;white-space:nowrap;display:flex;align-items:center;gap:42px}
.ticker span:nth-child(even){font-family:var(--f-serif);font-style:italic;font-weight:300;color:var(--orange)}
.ticker span:after{content:"";width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px var(--orange)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* --- hero com monitor de programa --- */
.home-hero{gap:5vw}
.hero-copy{flex:1 1 520px;min-width:0}
.monitor{position:relative;z-index:1;flex:0 0 auto;width:min(370px,30vw);margin-right:max(8%,calc((100vw - 1360px)/2));display:grid;gap:12px}
.monitor-screen{position:relative;aspect-ratio:9/16;max-width:100%;background:#050707;overflow:hidden;cursor:pointer;box-shadow:0 40px 90px #000a,0 0 0 1px #ffffff1c}
.monitor-layer{position:absolute;inset:0;opacity:0;transition:opacity .12s steps(1)}
.monitor-layer.on{opacity:1}
.monitor-layer img,.monitor-layer video,.clip-media img,.clip-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.monitor-layer video,.clip-media video{opacity:0;transition:opacity .4s ease}
.monitor-layer video.playing,.clip-media video.playing{opacity:1}
/* cantos de visor de câmera */
.monitor-screen:before{content:"";position:absolute;inset:14px;z-index:2;pointer-events:none;background:
 linear-gradient(var(--orange),var(--orange)) top left/22px 2px,linear-gradient(var(--orange),var(--orange)) top left/2px 22px,
 linear-gradient(var(--orange),var(--orange)) top right/22px 2px,linear-gradient(var(--orange),var(--orange)) top right/2px 22px,
 linear-gradient(var(--orange),var(--orange)) bottom left/22px 2px,linear-gradient(var(--orange),var(--orange)) bottom left/2px 22px,
 linear-gradient(var(--orange),var(--orange)) bottom right/22px 2px,linear-gradient(var(--orange),var(--orange)) bottom right/2px 22px;background-repeat:no-repeat}
.monitor-screen:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#0008,transparent 22%,transparent 70%,#000b)}
.monitor-hud{position:absolute;z-index:3;left:28px;right:28px;top:26px;display:flex;justify-content:space-between;font:400 10px var(--f-mono);letter-spacing:.04em;color:#fff;pointer-events:none}
.rec-dot{display:inline-flex;align-items:center;gap:7px}
.rec-dot:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px var(--orange);animation:rec-blink 1.4s ease-in-out infinite}
.monitor-name{position:absolute;z-index:3;left:28px;right:28px;bottom:26px;font:600 15px/1.2 var(--f-sans);letter-spacing:-.02em;color:#fff;pointer-events:none}
.monitor-play{position:absolute;z-index:3;right:26px;bottom:22px;font:400 9px var(--f-mono);color:#fff;background:#0007;border:1px solid #fff4;padding:6px 9px;pointer-events:none}
.monitor-strip{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;height:34px}
.monitor-strip span{background:center/cover;filter:grayscale(.6) brightness(.6);border-top:2px solid #ff643288}
.monitor-playhead{position:absolute;top:-6px;bottom:-4px;width:2px;background:var(--orange);box-shadow:0 0 10px var(--orange);pointer-events:none}
.monitor-playhead:before{content:"";position:absolute;top:0;left:-5px;border:6px solid transparent;border-top-color:var(--orange)}
.monitor-caption{display:flex;justify-content:space-between;font:400 9px var(--f-mono);color:var(--muted);letter-spacing:.04em}

/* --- atalhos para as trilhas --- */
.track-index{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.track-index a{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);padding:9px 12px 9px 9px;color:var(--paper);text-decoration:none;font-size:12px;font-weight:500;transition:border-color .2s ease,background .2s ease}
.track-index a:hover{border-color:var(--orange);background:#ff643214}
.track-index i{font:400 9px var(--f-mono);font-style:normal;background:var(--orange);color:#140a06;padding:4px 6px}
.track-index b{font:400 10px var(--f-mono);color:var(--muted)}

/* --- seção de trabalhos --- */
.work-intro-head{padding-top:120px;padding-bottom:50px;display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap}
.work-intro-head h2{margin-top:20px}
.work-intro-head p{max-width:330px;color:var(--muted);font-size:14px;line-height:1.65}
.tracks{padding-bottom:110px}

/* --- trilha da timeline --- */
.track{padding-top:56px;scroll-margin-top:90px}
.track-head{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:end;margin-bottom:22px}
.track-id{align-self:start;font:400 11px var(--f-mono);background:var(--orange);color:#140a06;padding:7px 9px;margin-top:6px}
.track-copy{min-width:0}
.track-copy h3{font-size:clamp(30px,3.4vw,52px);font-weight:600;letter-spacing:-.05em;line-height:.95}
.track-copy p{margin-top:8px;color:var(--muted);font-size:clamp(16px,1.4vw,20px)}
.track-copy em{letter-spacing:-.02em}
.track-meta{display:grid;justify-items:end;gap:12px}
.track-meta small{color:var(--muted)}
.track-arrows{display:flex;gap:6px}
.track-arrows button{width:44px;height:44px;border:1px solid var(--line);background:none;color:var(--paper);font-size:16px;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.track-arrows button:hover{background:var(--orange);border-color:var(--orange);color:#140a06}
.track-lane{position:relative;border-block:1px solid var(--line);background:#0a1011}
.track-ruler{height:22px;border-bottom:1px solid var(--line);margin-left:max(8%,calc((100vw - 1360px)/2));background-image:repeating-linear-gradient(90deg,#ffffff38 0 1px,transparent 1px 12px),repeating-linear-gradient(90deg,#ff643299 0 1px,transparent 1px 120px);background-size:100% 7px,100% 14px;background-repeat:repeat-x;background-position:0 100%,0 100%}
.track-clips{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:max(8%,calc((100vw - 1360px)/2));padding:14px max(8%,calc((100vw - 1360px)/2)) 18px;scrollbar-width:thin;scrollbar-color:#ff643288 transparent}
.track-clips:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}

/* --- clipe --- */
.clip{flex:0 0 auto;width:clamp(170px,17vw,230px);scroll-snap-align:start;padding:0;border:0;background:none;color:var(--paper);text-align:left;cursor:pointer;display:grid;gap:10px}
.clip.is-h{width:clamp(300px,34vw,460px)}
.clip-media{position:relative;display:block;aspect-ratio:9/16;max-width:100%;overflow:hidden;background:#111819;outline:1px solid #ffffff14;outline-offset:-1px}
.clip.is-h .clip-media{aspect-ratio:16/9}
.clip-media img{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.clip:hover .clip-media img,.clip:hover .clip-media video{transform:scale(1.04)}
.clip-media video{transition:opacity .4s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.clip-play{position:absolute;z-index:2;left:12px;bottom:12px;width:40px;height:40px;border-radius:50%;background:#050707b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid #ffffff40;display:grid;place-items:center;transition:background .25s ease,transform .3s cubic-bezier(.34,1.56,.64,1)}
.clip-play:before{content:"";margin-left:3px;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.clip:hover .clip-play,.clip:focus-visible .clip-play{background:var(--orange);border-color:var(--orange);transform:scale(1.12)}
.clip:hover .clip-play:before,.clip:focus-visible .clip-play:before{border-left-color:#140a06}
.clip:hover .clip-media{outline-color:var(--orange)}
.clip-info{display:flex;justify-content:space-between;align-items:baseline;gap:10px;min-width:0}
.clip-info strong{font-size:14px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.clip-info small{color:var(--muted);font-size:9px;flex:0 0 auto}

/* --- player --- */
.lightbox{position:fixed;inset:0;z-index:230;background:#030505f5;display:flex;align-items:center;justify-content:center;padding:72px 20px 30px;opacity:0;pointer-events:none;transition:opacity .25s ease}
.lightbox.show{opacity:1;pointer-events:auto}
html.lightbox-open{overflow:hidden}
.lightbox-bar{position:absolute;top:22px;left:24px;right:84px;display:flex;gap:22px;align-items:center;font:400 10px var(--f-mono);letter-spacing:.04em;color:var(--muted)}
.lightbox-title{color:var(--paper);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lightbox-count{margin-left:auto}
.lightbox-frame{position:relative;height:min(84vh,900px);aspect-ratio:9/16;max-width:100%;background:#000;box-shadow:0 30px 80px #000c}
.lightbox-frame.is-h{height:auto;width:min(92vw,1200px,calc(80vh*16/9));aspect-ratio:16/9}
.lightbox-frame video,.lightbox-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.lightbox-close,.lightbox-nav{position:absolute;background:#0e1516;border:1px solid var(--line);color:var(--paper);cursor:pointer;display:grid;place-items:center;transition:background .2s ease,color .2s ease}
.lightbox-close:hover,.lightbox-nav:hover{background:var(--orange);color:#140a06}
.lightbox-close{top:12px;right:16px;width:46px;height:46px;font-size:22px}
.lightbox-nav{top:50%;width:50px;height:50px;margin-top:-25px;font-size:18px}
.lightbox-nav.prev{left:24px}
.lightbox-nav.next{right:24px}

/* --- rodapé com todos os contatos --- */
footer>div{flex-wrap:wrap}
footer>div a{font-family:var(--f-mono);transition:color .2s ease}
footer>div a:hover{color:var(--orange)}

/* --- foco visível --- */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

@media(max-width:1000px){
  .home-hero{flex-direction:column;align-items:stretch;padding-bottom:70px}
  .hero-copy{flex:none;padding-bottom:10px}
  .monitor{width:min(320px,78vw);margin:0 auto}
}
@media(max-width:760px){
  .track-head{grid-template-columns:auto 1fr;gap:14px}
  .track-meta{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}
  .track-ruler{margin-left:7%}
  .track-clips{padding-inline:7%;scroll-padding-inline:7%}
  .clip{width:44vw}
  .clip.is-h{width:80vw}
  .work-intro-head{padding-top:85px}
  .lightbox{padding:70px 10px 80px}
  .lightbox-frame{height:auto;width:100%;max-height:74vh}
  .lightbox-nav{top:auto;bottom:16px;margin:0}
  .lightbox-nav.prev{left:16px}.lightbox-nav.next{right:16px}
}
@media(prefers-reduced-motion: reduce){.ticker div{animation:none}.clip-media img,.lightbox{transition:none!important}}

/* ================================================================
   SISTEMA DE DESIGN — escala de espaço (base 4px), tipo, contraste
   Últimas regras do arquivo: estas definem o padrão do site todo.
   ================================================================ */
:root{
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;
  --section:clamp(var(--s-8),9vw,var(--s-10));
  --t-label:11px;--t-small:14px;--t-body:16px;--t-lead:18px;
  --muted:#b9bdb5;  /* contraste AA sobre o fundo escuro */
  --radius:0;       /* linguagem reta, de corte de edição: sem cantos arredondados */
}
/* rótulos legíveis: nada abaixo de 11px */
.brand span,.eyebrow,small,.serial,footer small,.scroll-note,.feature-card span,.track-meta small,.clip-info small,.monitor-caption,.monitor-hud,.lightbox-bar,footer>div a,.testimonial span,.skills span,.process-grid span,.work-item span,.quote-block>p.label,.quote-field label,.track-index b{font-size:var(--t-label)}
.site-nav a{font-size:13px}
.clip-info strong{font-size:15px}
/* texto corrido: 16–18px, 1.6 de entrelinha, até ~65 caracteres */
.hero-copy>p:not(.eyebrow),.intro-copy,.bio-copy p,.work-intro-head p,.statement-copy,.skills p,.process-head p,.quote-info p:last-child{font-size:var(--t-body);line-height:1.6;max-width:62ch}
.hero-copy>p:not(.eyebrow){font-size:var(--t-lead);max-width:44ch;margin-top:var(--s-5)}
.testimonial p{font-size:var(--t-body)}
/* títulos: entrelinha 0.95–1.05 */
h1,h2{line-height:.95}
.hero-copy h1{margin-top:var(--s-5)}
.action-row{margin-top:var(--s-6);gap:var(--s-5);flex-wrap:wrap}
.track-index{margin-top:var(--s-6)}
/* botões: 48px de altura, estados claros */
.button,.lead-tab{min-height:48px;padding:0 var(--s-5);font-size:13px;gap:var(--s-4)}
.text-link{font-size:13px;min-height:48px;display:inline-flex;align-items:center;gap:var(--s-2)}
.button:focus-visible,.text-link:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.track-arrows button,.lightbox-nav,.lightbox-close{min-width:48px;min-height:48px}
/* ritmo vertical das seções */
.statement,.featured,.bio,.skills,.closing-banner,.page-intro,.contact-hero,.quote-hero{padding-top:var(--section);padding-bottom:var(--section)}
.testimonials{padding-top:var(--section)!important;padding-bottom:var(--section)}
.work-intro-head{padding-top:var(--section);padding-bottom:var(--s-7)}
.track{padding-top:var(--s-8)}
.tracks{padding-bottom:var(--section)}
.closing-banner{min-height:0}
.closing-banner h2{margin:var(--s-5) 0 var(--s-6)}
/* largura máxima de conteúdo: 1360px já definida em .section-pad; o hero segue a mesma grade */
.hero-copy{margin-left:max(8%,calc((100vw - 1360px)/2))}
/* cabeçalho fixo legível sobre vídeo */
.is-scrolled .site-header{background:#070a0bf0}
@media(max-width:760px){
  .hero-copy{margin-left:7%;margin-right:7%;padding:var(--s-8) 0 var(--s-6)}
  .hero-copy>p:not(.eyebrow){font-size:var(--t-body)}
  .clip-info strong{font-size:14px}
}

/* --- trilhas: todos os clipes com a mesma altura; o horizontal fica mais longo, como na timeline --- */
.track-clips{align-items:flex-start;--clip-h:clamp(300px,32vw,420px)}
.clip,.clip.is-h{width:auto}
.clip-media,.clip.is-h .clip-media{height:var(--clip-h);width:auto}
.clip-info{width:calc(var(--clip-h)*9/16)}
.clip.is-h .clip-info{width:calc(var(--clip-h)*16/9)}
@media(max-width:760px){.track-clips{--clip-h:min(78vw,420px)}}

/* --- faixa de credibilidade --- */
.proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)}
.proof div{padding-block:var(--s-7);padding-right:var(--s-5);border-right:1px solid var(--line);padding-left:var(--s-5);min-width:0}
.proof div:first-child{padding-left:0}
.proof div:last-child{border-right:0}
.proof strong{display:block;font-size:clamp(40px,4.4vw,64px);font-weight:600;letter-spacing:-.06em;line-height:.9}
.proof strong em{color:var(--orange)}
.proof span{display:block;margin-top:var(--s-3);font-size:var(--t-small);line-height:1.5;color:var(--muted);max-width:24ch}
@media(max-width:760px){.proof{grid-template-columns:1fr 1fr}.proof div{padding:var(--s-6) var(--s-4) var(--s-6) var(--s-4)}.proof div:nth-child(odd){padding-left:0}.proof div:nth-child(2){border-right:0}.proof div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.contact-choice strong{font-size:clamp(16px,1.5vw,19px);overflow-wrap:anywhere}

/* ================================================================
   REVISÃO 2026-10-23 — tipografia, faixa, idiomas
   Títulos: Bricolage fina e grande com um só destaque laranja
   (estilo já aprovado pelo Michel nos carrosséis). Sem serifa itálica.
   ================================================================ */
h1,h2,.track-copy h3,.proof strong{font-family:var(--f-sans);font-weight:300;letter-spacing:-.045em;font-variation-settings:"wdth" 100}
h1{font-size:clamp(44px,6.2vw,100px);line-height:.98}
h2{line-height:1}
em{font-family:var(--f-sans);font-style:normal;font-weight:300;letter-spacing:inherit;color:var(--orange);font-variation-settings:normal}
.statement em,.about-hero em{color:#d74b29}
.track-copy h3{font-weight:400}
.track-copy p,.track-copy em{color:var(--muted)}
.track-copy em{font-weight:400}
.proof strong{font-weight:300}
.brand strong{font-weight:600}
.button,.lead-tab{font-weight:600}

/* faixa: tira de timeline com símbolos de edição */
.ticker{padding-block:14px}
.ticker div{gap:28px;align-items:center;animation-duration:46s}
.ticker span{font:400 clamp(18px,2vw,28px)/1 var(--f-sans);letter-spacing:-.03em;gap:0;color:var(--paper)}
.ticker span:nth-child(n){font-family:var(--f-sans);font-style:normal;font-weight:400;color:var(--paper)}
.ticker span:after{display:none}
.ticker svg{width:26px;height:26px;flex:0 0 auto;fill:none;stroke:var(--orange);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* prova: três colunas */
.proof{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){.proof{grid-template-columns:1fr}.proof div,.proof div:nth-child(odd){padding:var(--s-5) 0;border-right:0;border-bottom:1px solid var(--line)}.proof div:last-child{border-bottom:0}}
.closing-banner p:not(.eyebrow){position:relative;z-index:1;max-width:44ch;color:var(--muted);font-size:var(--t-body);line-height:1.6;margin:0 0 var(--s-6)}
.closing-banner h2{margin-bottom:var(--s-4)}
.testimonial-note{margin-top:var(--s-4);font-size:var(--t-label);color:var(--muted)}

/* seletor de idioma */
.header-right{display:flex;align-items:center;gap:var(--s-5)}
.lang{display:flex;border:1px solid var(--line)}
.lang button{font:400 11px var(--f-mono);letter-spacing:.04em;color:var(--muted);background:none;border:0;min-width:40px;min-height:34px;cursor:pointer;transition:color .2s ease,background .2s ease}
.lang button+button{border-left:1px solid var(--line)}
.lang button:hover{color:var(--paper)}
.lang button[aria-pressed="true"]{background:var(--orange);color:#140a06}
@media(max-width:760px){.header-right{gap:var(--s-3)}.lang button{min-width:36px;min-height:36px}}
.testimonial-note:empty{display:none}
.hero-copy h1{font-size:clamp(40px,4.7vw,78px);line-height:1.02}
.hero-copy h1 .line-mask{padding-bottom:.12em;margin-bottom:-.12em}

/* --- brilho da abertura muda de cor com o clipe no ar (paleta oficial) --- */
@property --glow{syntax:"<color>";inherits:true;initial-value:#FF5A2A}
.home-hero{--glow:#FF5A2A;transition:--glow 1.4s ease}
.hero-glow{background:radial-gradient(circle,color-mix(in srgb,var(--glow) 78%,transparent) 0 1%,color-mix(in srgb,var(--glow) 34%,transparent) 15%,#0d656244 36%,transparent 68%)}
.home-hero:before{background:radial-gradient(circle at 78% 42%,color-mix(in srgb,var(--glow) 16%,transparent) 0,transparent 24%),linear-gradient(112deg,#0A0A0A 5%,#0D1F20 54%,#0A0A0A)}
.track-id{background:var(--track-cor,var(--orange))}

/* --- assinatura de largura total --- */
.assinatura{display:flex;justify-content:space-between;gap:.12em;overflow:hidden;padding:var(--s-8) max(16px,2vw) 0;font:200 clamp(56px,13.6vw,240px)/.82 var(--f-sans);font-variation-settings:"wdth" 75;letter-spacing:-.04em;color:var(--paper);white-space:nowrap;user-select:none}
.assinatura span{display:flex}
.assinatura span:last-child{color:var(--orange)}
.assinatura i{font-style:normal;display:inline-block}
.js .assinatura i{transform:translateY(105%);transition:transform .9s cubic-bezier(.22,1,.36,1)}
.js .assinatura.in i{transform:none}
@media(max-width:760px){.assinatura{flex-direction:column;gap:0;font-size:53vw;padding-top:var(--s-7)}}
@media(prefers-reduced-motion: reduce){.js .assinatura i{transform:none;transition:none}.home-hero{transition:none}}
.assinatura{justify-content:flex-start;gap:.12em;font-size:clamp(56px,27.6vw,560px)}
@media(max-width:760px){.assinatura{font-size:53vw}}

/* ================================================================
   NÍVEL 2 — WebGL, showreel por rolagem, HUD (2026-10-23)
   ================================================================ */
/* fundo WebGL da abertura; o glow em CSS fica como reserva */
.hero-gl{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.home-hero.has-gl:before,.home-hero.has-gl .hero-glow{display:none}
.home-hero>.hero-copy,.home-hero>.monitor{z-index:2}
.hero-hud{position:absolute;z-index:2;inset:auto max(8%,calc((100vw - 1360px)/2)) 24px;display:flex;justify-content:space-between;font:400 var(--t-label) var(--f-mono);letter-spacing:.04em;color:var(--muted);pointer-events:none}
.hero-hud span:first-child{padding-left:110px}
.scroll-note{display:none}
@media(max-width:1000px){.hero-hud{position:relative;inset:auto;padding:0 7%;margin-top:var(--s-5)}.hero-hud span:first-child{padding-left:0}}

/* showreel por rolagem */
.scrub{position:relative;height:420vh;background:#050707}
.scrub-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:grid}
.scrub video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05)}
.scrub-sticky:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#050707f0 0,#050707b0 32%,transparent 62%),linear-gradient(0deg,#050707d9 0,transparent 30%);pointer-events:none}
.scrub-copy{position:relative;z-index:2;align-self:center;max-width:calc(560px + 16%);display:grid;gap:var(--s-5);justify-items:start}
.scrub-copy h2{font-size:clamp(40px,5vw,84px)}
.scrub-copy p:not(.eyebrow){max-width:40ch;color:#d9d7cf;font-size:var(--t-body);line-height:1.6}
.scrub-play{background:none;border:0;color:var(--paper);cursor:pointer;padding:0}
.scrub-bar{position:absolute;z-index:2;left:max(8%,calc((100vw - 1360px)/2));right:max(8%,calc((100vw - 1360px)/2));bottom:32px;display:flex;align-items:center;gap:var(--s-4);font:400 var(--t-label) var(--f-mono);color:var(--paper);font-variant-numeric:tabular-nums}
.scrub-track{position:relative;flex:1;height:22px;background:repeating-linear-gradient(90deg,#ffffff40 0 1px,transparent 1px 10px) 0 100%/100% 7px no-repeat,repeating-linear-gradient(90deg,#ff643299 0 1px,transparent 1px 100px) 0 100%/100% 14px no-repeat;border-bottom:1px solid #ffffff40}
.scrub-head{position:absolute;top:-4px;bottom:-1px;width:2px;margin-left:-1px;background:var(--orange);box-shadow:0 0 10px var(--orange)}
.scrub-head:before{content:"";position:absolute;top:0;left:-5px;border:6px solid transparent;border-top-color:var(--orange)}
@media(max-width:760px){.scrub{height:300vh}.scrub-sticky:after{background:linear-gradient(0deg,#050707f2 0,#050707b3 45%,transparent 75%)}.scrub-copy{align-self:end;padding-bottom:110px}.scrub-bar{left:7%;right:7%;bottom:24px}}
@media(prefers-reduced-motion: reduce){.scrub{height:auto}.scrub-sticky{position:relative;height:auto;min-height:80vh}}
.scroll-timecode{transition:opacity .3s ease}.em-scrub .scroll-timecode{opacity:0}
.lead-tab{transition:transform .25s ease,opacity .3s ease}.em-scrub .lead-tab{opacity:0;pointer-events:none}

/* fundo gerado (luz de projetor), parado, por baixo do glow WebGL */
.hero-fundo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:.5;mix-blend-mode:screen;pointer-events:none}
.home-hero:not(.has-gl) .hero-fundo{opacity:.35}

/* --- "Antes de cortar": foto menor + resumo sobre mim --- */
.statement{grid-template-columns:minmax(220px,30%) 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.statement-foto{margin:0;position:relative;aspect-ratio:4/5;max-width:420px;overflow:hidden;background:#202323}
.statement-foto img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;filter:contrast(1.05) saturate(.9)}
.statement-foto figcaption{position:absolute;left:14px;bottom:12px;font:400 var(--t-label) var(--f-mono);letter-spacing:.05em;color:#fff;text-shadow:0 1px 8px #000}
.statement-foto:before{content:"";position:absolute;inset:10px;z-index:1;pointer-events:none;background:
 linear-gradient(var(--orange),var(--orange)) top left/16px 2px,linear-gradient(var(--orange),var(--orange)) top left/2px 16px,
 linear-gradient(var(--orange),var(--orange)) bottom right/16px 2px,linear-gradient(var(--orange),var(--orange)) bottom right/2px 16px;background-repeat:no-repeat}
.statement-texto{display:grid;gap:var(--s-5);justify-items:start;min-width:0}
.statement-texto .serial{padding-top:0}
.statement-texto .statement-copy{align-self:auto;max-width:52ch;color:#3f4441}
.statement-bio{max-width:52ch;font-size:var(--t-body);line-height:1.6;color:#111715;padding-top:var(--s-4);border-top:1px solid #11171526}
.statement .text-link{color:#111715}
.statement .text-link b{color:#d74b29}
@media(max-width:760px){.statement{grid-template-columns:1fr}.statement-foto{max-width:260px}}
.statement-texto h2{font-size:clamp(34px,3.9vw,64px)}
.statement-foto{overflow:visible;background:none;aspect-ratio:auto}
.statement-foto img{aspect-ratio:4/5;height:auto}
.statement-foto figcaption{position:static;margin-top:var(--s-3);color:#4f5450;text-shadow:none}
.statement-foto:before{bottom:auto;height:calc(100% - 10px - 2.4em)}
@media(max-width:760px){.statement-foto{max-width:190px}.statement-texto h2{font-size:34px}}

/* ================================================================
   CURADORIA DOS TEMPLATES (2026-11-04)
   Filmstrip: monograma · Nika Stern: pílula de agenda, linhas de coluna,
   serviços interativos · Mondragon: [01] e rótulos que decodificam ·
   Mondragon 4: linha de informações no topo
   ================================================================ */
.brand{display:flex;align-items:center;gap:var(--s-3)}
.brand-txt{display:grid;gap:4px;line-height:1}
.brand-mono{font:500 11px/1 var(--f-mono);font-style:normal;letter-spacing:.02em;width:38px;height:38px;border:1px solid #ffffff55;border-radius:50%;display:grid;place-items:center;color:var(--paper);transition:border-color .25s ease,background .25s ease,color .25s ease}
.brand:hover .brand-mono{border-color:var(--orange);background:var(--orange);color:#140a06}
footer .brand-mono{display:none}
/* pílula de agenda */
.agenda{display:inline-flex;align-items:center;gap:10px;min-height:36px;padding:0 4px 0 12px;border:1px solid var(--line);background:#0b1112;color:var(--paper);text-decoration:none;font:400 var(--t-label) var(--f-mono);letter-spacing:.03em;white-space:nowrap;transition:border-color .2s ease}
.agenda i{width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 8px #3ddc84;animation:rec-blink 2s ease-in-out infinite}
.agenda b{font:600 12px var(--f-sans);letter-spacing:0;background:var(--orange);color:#140a06;padding:7px 10px}
.agenda:hover{border-color:var(--orange)}
@media(max-width:1180px){.agenda span{display:none}}
@media(max-width:760px){.agenda{display:none}.brand-mono{width:32px;height:32px;font-size:10px}}
footer .brand{display:grid}
/* linha de informações do topo (Mondragon 4) */
.hero-meta{position:absolute;z-index:2;left:max(8%,calc((100vw - 1360px)/2));right:max(8%,calc((100vw - 1360px)/2));bottom:28px;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);padding-top:var(--s-4)}
.hero-meta div{display:grid;gap:6px;min-width:0}
.hero-meta dt{font:400 var(--t-label) var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.hero-meta dd{margin:0;font:400 15px var(--f-sans);color:var(--paper);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px}
.dot-on{width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 8px #3ddc84}
.home-hero{padding-bottom:110px}
.hero-meta div:first-child{padding-left:110px}
@media(max-width:1000px){.hero-meta{position:relative;left:auto;right:auto;bottom:auto;margin:var(--s-6) 7% 0;grid-template-columns:1fr 1fr;row-gap:var(--s-4)}.hero-meta div:first-child{padding-left:0}.home-hero{padding-bottom:70px}}
/* numeração editorial [01]… (Mondragon / Nika Stern) */
.eyebrow[data-num]:before,.serial[data-num]:before{content:attr(data-num);color:var(--orange);margin-right:10px;font-variant-numeric:tabular-nums}
.serial[data-num]{text-transform:uppercase;letter-spacing:.05em}
/* serviços interativos (Nika Stern) */
.servicos{padding-top:var(--section);padding-bottom:var(--section);display:grid;gap:var(--s-7)}
.servicos-head{display:grid;gap:var(--s-5)}
.servicos-head h2{font-size:clamp(36px,4.4vw,72px)}
.servicos-corpo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,64px);align-items:stretch}
.servicos-lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.servicos-lista li{border-bottom:1px solid var(--line)}
.servicos-lista button{width:100%;display:grid;grid-template-columns:52px minmax(0,.9fr) minmax(0,1.3fr);gap:var(--s-5);align-items:baseline;padding:var(--s-6) 0;background:none;border:0;color:var(--muted);text-align:left;cursor:pointer;transition:color .25s ease,padding .35s cubic-bezier(.22,1,.36,1)}
.sv-n{font:400 var(--t-label) var(--f-mono);color:inherit}
.sv-t{font:300 clamp(30px,3.4vw,56px)/1 var(--f-sans);letter-spacing:-.045em;color:inherit}
.sv-d{font-size:var(--t-small);line-height:1.55;max-width:38ch;opacity:.75}
.servicos-lista button[aria-selected="true"],.servicos-lista button:hover{color:var(--paper);padding-left:var(--s-4)}
.servicos-lista button[aria-selected="true"] .sv-n{color:var(--orange)}
.servicos-lista button[aria-selected="true"] .sv-d{opacity:1}
.servicos-midia{position:relative;min-height:420px;aspect-ratio:4/5;max-height:640px;overflow:hidden;background:#0a1011;outline:1px solid var(--line);outline-offset:-1px}
.servicos-midia>video,.servicos-midia>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .5s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.servicos-midia>.on{opacity:1;transform:none}
.servicos-tc{position:absolute;left:14px;bottom:12px;z-index:2;font:400 var(--t-label) var(--f-mono);letter-spacing:.05em;color:#fff;background:#050707b3;padding:6px 9px}
.servicos-tc b{font-weight:400;color:var(--orange)}
@media(max-width:900px){.servicos-corpo{grid-template-columns:1fr}.servicos-midia{order:-1;min-height:0;aspect-ratio:16/11}.servicos-lista button{grid-template-columns:40px 1fr}.sv-d{grid-column:2}}
@media(prefers-reduced-motion: reduce){.servicos-midia>video,.servicos-midia>img{transition:none}}
/* linhas de coluna discretas no fundo escuro (Nika Stern) */
body:after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,transparent calc(25% - .5px),#ffffff08 calc(25% - .5px),#ffffff08 calc(25% + .5px),transparent calc(25% + .5px),transparent calc(50% - .5px),#ffffff08 calc(50% - .5px),#ffffff08 calc(50% + .5px),transparent calc(50% + .5px),transparent calc(75% - .5px),#ffffff08 calc(75% - .5px),#ffffff08 calc(75% + .5px),transparent calc(75% + .5px))}
main,footer{position:relative;z-index:1}
.hero-meta div:first-child{padding-left:0}
.brand .brand-txt{font:inherit;font-family:var(--f-sans);letter-spacing:normal;white-space:nowrap}
.brand .brand-txt>span{font-family:var(--f-mono);letter-spacing:.04em}
@media(max-width:400px){.brand .brand-txt>span{display:none}}
@media(max-width:760px){.site-header .brand strong{font-size:15px}.site-header .brand{gap:8px;margin-right:var(--s-3)}}

/* ================================================================
   PALETA OFICIAL (2026-11-04) — fundo preto + azul-petróleo;
   laranja só em destaques estratégicos: CTA principal, palavra-chave
   dos títulos, REC/playhead e estados de hover/seleção.
   ================================================================ */
:root{--ink:#0A0A0A;--petrol:#0D1F20;--petrol-2:#123F41;--petrol-3:#2F6F73;--petrol-luz:#6FA9AC;--line:#ffffff1f;--paper:#EDEDED;--muted:#B0B0B0}
body{background:var(--ink)}
/* superfícies: petróleo no lugar dos cinzas esverdeados */
.ticker{background:var(--petrol)}
.track-lane,.servicos-midia{background:var(--petrol)}
.testimonial,.process-grid article,.quote-info,.lead-popup,.lightbox-close,.lightbox-nav,.agenda{background:var(--petrol)}
.proof{background:linear-gradient(180deg,var(--ink),var(--petrol))}
.work-category:nth-child(even),.contact-page{background:var(--petrol)}
.skills{background:var(--petrol-2)}
.page-intro{background:radial-gradient(circle at 80% 50%,#123F4199,transparent 40%),var(--ink)}
.closing-banner{background:linear-gradient(115deg,var(--petrol-2),var(--ink) 55%,var(--petrol))}
.scrub{background:var(--ink)}
/* seções que eram bege viram petróleo escuro */
.statement{background:var(--petrol);color:var(--paper)}
.statement-texto .statement-copy{color:var(--muted)}
.statement-bio{color:var(--paper);border-top-color:var(--line)}
.statement .text-link{color:var(--paper)}
.statement-foto figcaption{color:var(--muted)}
.statement-foto:before{background:linear-gradient(var(--petrol-luz),var(--petrol-luz)) top left/16px 2px,linear-gradient(var(--petrol-luz),var(--petrol-luz)) top left/2px 16px,linear-gradient(var(--petrol-luz),var(--petrol-luz)) bottom right/16px 2px,linear-gradient(var(--petrol-luz),var(--petrol-luz)) bottom right/2px 16px;background-repeat:no-repeat}
.about-hero{background:var(--petrol);color:var(--paper)}
.statement em,.about-hero em{color:var(--orange)}
/* elementos de apoio saem do laranja */
.eyebrow span{background:var(--petrol-luz)}
.eyebrow[data-num]:before,.serial[data-num]:before{color:var(--petrol-luz)}
.serial{color:var(--muted)}
.track-id,.track-index i{background:var(--petrol-3);color:var(--paper)}
.ticker svg{stroke:var(--petrol-luz)}
.testimonial span,.skills span,.process-grid span,.work-item span,.quote-block>p.label{color:var(--petrol-luz)}
.text-link b,.site-nav b,.statement .text-link b{color:inherit}
.site-header:after{background:var(--petrol-luz);box-shadow:none}
.monitor-screen:before,.scrub-copy+.scrub-bar .scrub-track{filter:none}
.monitor-screen:before{background:linear-gradient(#ffffffb3,#ffffffb3) top left/22px 2px,linear-gradient(#ffffffb3,#ffffffb3) top left/2px 22px,linear-gradient(#ffffffb3,#ffffffb3) top right/22px 2px,linear-gradient(#ffffffb3,#ffffffb3) top right/2px 22px,linear-gradient(#ffffffb3,#ffffffb3) bottom left/22px 2px,linear-gradient(#ffffffb3,#ffffffb3) bottom left/2px 22px,linear-gradient(#ffffffb3,#ffffffb3) bottom right/22px 2px,linear-gradient(#ffffffb3,#ffffffb3) bottom right/2px 22px;background-repeat:no-repeat}
.monitor-strip span{border-top-color:var(--petrol-3)}
.track-ruler{background-image:repeating-linear-gradient(90deg,#ffffff30 0 1px,transparent 1px 12px),repeating-linear-gradient(90deg,var(--petrol-luz) 0 1px,transparent 1px 120px)}
.scrub-track{background:repeating-linear-gradient(90deg,#ffffff40 0 1px,transparent 1px 10px) 0 100%/100% 7px no-repeat,repeating-linear-gradient(90deg,var(--petrol-luz) 0 1px,transparent 1px 100px) 0 100%/100% 14px no-repeat}
.servicos-lista button[aria-selected="true"] .sv-n{color:var(--orange)}
.servicos-tc b{color:var(--petrol-luz)}
.proof strong em{color:var(--paper)}
.clip-media{background:var(--petrol)}
.lead-tab{box-shadow:0 10px 24px #0008}
.scroll-timecode{background:#0D1F20cc}
.scroll-timecode:before{background:var(--orange)}
.brand:hover .brand-mono{background:var(--petrol-3);border-color:var(--petrol-3);color:var(--paper)}
.category-tabs a:hover,.track-index a:hover{border-color:var(--petrol-luz);background:#2F6F7322}
.assinatura span:last-child{color:var(--petrol-luz)}
/* fumaça branca e discreta (2026-11-04): sem vermelho nem laranja forte */
.hero-fundo{filter:grayscale(1) contrast(1.15) brightness(.9);opacity:.2}
.home-hero:not(.has-gl) .hero-fundo{opacity:.3}
.hero-glow{background:radial-gradient(circle,#ffffff38 0 1%,#ffffff14 18%,#2F6F7333 40%,transparent 70%)}
.home-hero:before{background:linear-gradient(112deg,#060707 10%,#0D1F20 60%,#123F41)}
/* textura do projetor deriva devagar por trás da fumaça */
.hero-fundo{animation:deriva 38s ease-in-out infinite alternate;transform-origin:60% 50%}
@keyframes deriva{0%{transform:scale(1.04) translate3d(-1.5%,0,0)}100%{transform:scale(1.12) translate3d(1.5%,-1.5%,0)}}
@media(prefers-reduced-motion: reduce){.hero-fundo{animation:none}}
/* lista completa de serviços na página Trabalhos: grade compacta */
.servicos-grade{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0;border-top:1px solid var(--line)}
.servicos-grade .work-item{border:0;border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:var(--s-5);grid-template-columns:36px 1fr;gap:var(--s-3)}
.servicos-grade .work-item h3{font-size:17px;margin-bottom:6px}
.servicos-grade .work-item p{font-size:var(--t-small)}
@media(max-width:760px){.servicos-grade{grid-template-columns:1fr}.servicos-grade .work-item{border-right:0;grid-template-columns:32px 1fr}}
.proof{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.proof{grid-template-columns:1fr 1fr}.proof div{border-bottom:1px solid var(--line)}}
@media(max-width:760px){.proof{grid-template-columns:1fr}}
.proof{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){.proof{grid-template-columns:1fr}}
/* cabeçalho em telas intermediárias (761–1100px): tira a pílula e a linha pequena do nome */
@media(min-width:761px) and (max-width:1100px){.agenda{display:none}.site-header .brand .brand-txt>span{display:none}.site-nav{gap:16px}.header-right{gap:var(--s-4)}}
.proof{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:760px){.proof{grid-template-columns:1fr}}
/* manchete em caixa alta + manifesto (pegada da referência do Michel) */
.hero-copy h1.hero-manchete{font-size:clamp(40px,4.9vw,84px);line-height:.98;letter-spacing:-.035em;font-weight:300}
.hero-manchete em{text-transform:none;font-weight:300;letter-spacing:-.04em}
.hero-manifesto{display:grid;gap:var(--s-3);max-width:46ch}
.hero-copy>p.hero-manifesto:not(.eyebrow){font-size:var(--t-lead);line-height:1.55}
.hero-tag{font:400 var(--t-label) var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--petrol-luz);display:flex;align-items:center;gap:10px}
.hero-tag:before{content:"01";color:var(--muted)}
.hero-tag:after{content:"";width:28px;height:1px;background:var(--petrol-luz);order:-1;display:none}
@media(max-width:760px){.hero-copy h1.hero-manchete{font-size:clamp(34px,10vw,48px)}.hero-copy>p.hero-manifesto:not(.eyebrow){font-size:var(--t-body)}}
.hero-tag:before{content:"";width:22px;height:1px;background:var(--petrol-luz)}
.hero-copy h1.hero-manchete{font-size:clamp(34px,4.1vw,72px)}.hero-copy{max-width:780px}

/* ===== reels do portfólio (3 montagens rodando lado a lado, logo abaixo da abertura) ===== */
.reels{padding-block:clamp(56px,8vw,110px);border-bottom:1px solid var(--line)}
.reels-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px}
.reels-head p:not(.eyebrow){max-width:340px;font-size:14px;line-height:1.6;color:var(--muted)}
.reels-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,22px);max-width:1080px;margin-inline:auto}
.reel{all:unset;cursor:pointer;display:grid;gap:12px;min-width:0}
.reel-media{position:relative;aspect-ratio:9/16;overflow:hidden;background:#050707;box-shadow:0 30px 70px #0009,0 0 0 1px #ffffff1c}
.reel-media img,.reel-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.reel-media video{opacity:0;transition:opacity .4s ease}
.reel-media video.playing{opacity:1}
.reel-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 65%,#000a);pointer-events:none}
.reel-som{position:absolute;margin:14px;font:500 9px var(--f-mono);letter-spacing:.11em;text-transform:uppercase;padding:8px 10px;background:#050707b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid #ffffff33;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.reel{position:relative}
.reel:hover .reel-som,.reel:focus-visible .reel-som{opacity:1;transform:none}
.reel:focus-visible .reel-media{outline:2px solid var(--paper);outline-offset:3px}
.reel-media{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.reel:hover .reel-media{transform:translateY(-4px)}
.reel-info{display:flex;align-items:baseline;gap:10px;font-size:14px;font-weight:600;letter-spacing:-.02em}
.reel-info b{font:500 9px var(--f-mono);color:var(--muted)}
.reel-info small{margin-left:auto;color:var(--muted)}
@media(max-width:760px){
  .reels-head{flex-direction:column;align-items:start;gap:12px}
  .reels-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-7%;padding-inline:7%;scrollbar-width:none}
  .reels-grid::-webkit-scrollbar{display:none}
  .reel{flex:0 0 66vw;scroll-snap-align:center}
  .reel-som{opacity:1;transform:none}
}

/* ===== carrossel das trilhas: avanço automático, posição e sinal de "tem mais" ===== */
.track-timer{display:none;width:44px;height:2px;background:var(--line);position:relative;overflow:hidden}
.track-timer:after{content:"";position:absolute;inset:0;background:var(--track-cor,var(--orange));transform-origin:left;transform:scaleX(var(--t,0))}
.track-meta{align-items:center}
.track-lane{overflow:hidden}
.track-lane:before,.track-lane:after{content:"";position:absolute;top:0;bottom:0;width:min(12vw,120px);z-index:2;pointer-events:none;transition:opacity .4s ease}
.track-lane:before{left:0;background:linear-gradient(90deg,var(--petrol),transparent);opacity:0}
.track-lane:after{right:0;background:linear-gradient(270deg,var(--petrol),transparent)}
.track-lane.no-inicio:before{opacity:1}
.track-lane.no-fim:after{opacity:0}
.track-pos{position:absolute;left:max(8%,calc((100vw - 1360px)/2));right:max(8%,calc((100vw - 1360px)/2));bottom:6px;height:2px;background:#ffffff14;z-index:3}
.track-pos i{position:absolute;top:0;bottom:0;background:#ffffff8c;transition:width .2s ease}
.track-clips{scrollbar-width:none}
.track-clips::-webkit-scrollbar{display:none}
.track-clips{cursor:grab}
@media(max-width:760px){
  .track-clips{--clip-h:68vw}
  .track-pos{left:7%;right:7%}
  .track-lane:before,.track-lane:after{width:36px}
}

/* botão fixo do WhatsApp (substitui o guia grátis) */
a.lead-tab{text-decoration:none}
.lead-tab svg{flex:0 0 auto}
.lead-tab{white-space:nowrap}
.lead-tab span{white-space:nowrap}
/* contato: título numa linha só */
.contact-hero h1{white-space:nowrap}
@media(max-width:760px){.contact-hero h1{font-size:clamp(34px,10.4vw,59px)}}
/* e-mail do cartão de contato: encolhe para caber numa linha, sem quebrar no meio */
.contact-choice{container-type:inline-size}
.contact-choice .contact-email{white-space:nowrap;overflow-wrap:normal;font-size:15px;font-size:min(19px,7.4cqi)}
/* telemóveis muito estreitos (320–360 px): o cabeçalho não pode passar da tela */
@media(max-width:360px){
  .site-header{padding:0 5%}
  .brand-mono{display:none}
  .header-right{gap:8px}
  .lang button{padding:1px 4px;min-width:30px}
}
/* serviços: em ~1000 px a altura esticada fazia o vídeo ficar mais largo que a coluna e sair da tela */
.servicos-corpo>.servicos-midia{width:100%;min-width:0;align-self:start}

/* Safari/iPhone: altura real da tela (sem pular quando a barra do navegador some) */
@supports(height:100svh){
  .home-hero,.about-hero,.contact-hero{min-height:calc(100svh - 85px)}
}
@media(max-width:760px){@supports(height:100svh){.home-hero{min-height:calc(100svh - 70px)}.about-hero,.contact-hero{min-height:auto}}}

/* cursor: imagem do próprio sistema (sem atraso e sempre visível, inclusive no player) */
html.has-custom-cursor,html.has-custom-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Ccircle cx='17' cy='17' r='15.5' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.2'/%3E%3Ccircle cx='17' cy='17' r='3' fill='%23ff6432'/%3E%3C/svg%3E") 17 17,auto!important}
html.has-custom-cursor :is(a,button,[role="button"],label,select,summary),html.has-custom-cursor :is(a,button,[role="button"]) *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Ccircle cx='24' cy='24' r='22' fill='%23ff6432' fill-opacity='.14' stroke='%23ff6432' stroke-width='1.4'/%3E%3Ccircle cx='24' cy='24' r='3' fill='%23ff6432'/%3E%3C/svg%3E") 24 24,pointer!important}
html.has-custom-cursor :is(input,textarea){cursor:text!important}
.cursor-dot,.cursor-ring{display:none!important}
/* no player, ponteiro normal para usar os controles do vídeo */
html.lightbox-open .lightbox,html.lightbox-open .lightbox *{cursor:auto!important}
html.lightbox-open .lightbox :is(button,a){cursor:pointer!important}
@media(hover:none),(pointer:coarse){html.has-custom-cursor,html.has-custom-cursor *{cursor:auto!important}}

/* contato: foto de perfil ao lado do título e ícones das redes */
.contact-title{display:flex;align-items:center;gap:.28em}
.contact-avatar{position:relative;display:block;flex:0 0 auto;width:.92em;height:.92em}
.contact-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;box-shadow:0 0 0 2px var(--ink),0 0 0 3px #ffffff40}
.contact-avatar i{position:absolute;right:4%;bottom:4%;width:18%;height:18%;min-width:10px;min-height:10px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 3px var(--ink)}
.contact-choice small{display:flex;align-items:center;gap:8px}
.contact-choice .ci{width:16px;height:16px;flex:0 0 auto;color:var(--orange);transition:color .25s}
.contact-choice:hover .ci{color:#130c08}
.contact-title .line-inner{display:flex;align-items:center;gap:.28em}
/* anel da foto desenhado dentro da caixa (a máscara de animação do título cortava a sombra externa) */
.contact-avatar{box-sizing:border-box;padding:2px;border-radius:50%;background:linear-gradient(140deg,#ffffffb0,#ffffff30 55%,var(--orange))}
.contact-avatar img{box-shadow:none;border:2px solid var(--ink);box-sizing:border-box}
.contact-avatar i{right:2%;bottom:2%;box-shadow:0 0 0 2px var(--ink)}
.contact-title .line-mask{padding:3px 0}

/* logo: timeline com playhead (azul petróleo + laranja) */
.brand-logo{width:38px;height:38px;flex:0 0 auto;display:block;overflow:visible}
.brand-logo .brand-ph{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.brand:hover .brand-logo .brand-ph{transform:translateX(9px)}
footer .brand-logo{display:none}
@media(max-width:760px){.brand-logo{width:32px;height:32px}}
@media(max-width:360px){.brand-logo{display:none}}
@media(prefers-reduced-motion: reduce){.brand-logo .brand-ph{transition:none}}
/* rótulo do vídeo (tipo · nicho) em até 2 linhas, com a duração por baixo */
.clip-info{flex-direction:column;align-items:flex-start;gap:4px}
.clip-info strong{white-space:normal;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* faixa de números: 3 itens sempre alinhados (3 colunas; empilha só em telemóvel estreito) */
.proof{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.proof div{border-bottom:0!important;border-right:1px solid var(--line)!important;padding:var(--s-7) var(--s-5)!important}
.proof div:first-child{padding-left:0!important}
.proof div:last-child{border-right:0!important;padding-right:0!important}
.proof span{max-width:26ch}
@media(max-width:760px){
  .proof div{padding:var(--s-6) var(--s-4)!important}
  .proof strong{font-size:clamp(30px,7vw,44px)}
}
@media(max-width:560px){
  .proof{grid-template-columns:1fr!important}
  .proof div,.proof div:first-child,.proof div:last-child{padding:var(--s-5) 0!important;border-right:0!important;border-bottom:1px solid var(--line)!important}
  .proof div:last-child{border-bottom:0!important}
}