/* ==========================================================================
   Portfólio — Vinícius Rodrigues · UI/UX & Product Design
   Sistema visual editorial: fundo branco, texto quase preto, fios finos,
   grade de 3 colunas (rótulo | conteúdo | mídia) e contadores em fonte pixel.
   Arquitetura e comportamentos medidos em apparicio.com; código, textos e
   imagens são próprios.
   ========================================================================== */

@font-face{font-family:"Inter";src:url(../fonts/inter-latin-opsz.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Pixel";src:url(../fonts/GeistPixel-Square.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --bg:#fff;
  --fg:#0a0a0a;
  --mute:#6b6b67;
  --mute2:#5c5c58;
  --line:rgba(10,10,10,.16);
  --tint:#f4f4f1;
  --accent:#fa4e3e;
  --accent-soft:#fdeceb;
  --accent-ink:#d4301f;
  --pad:max(32px,calc((100vw - 1760px) / 2 + 32px));
  --gap:16px;
  --nav-h:72px;
  --f:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --px:"Geist Pixel","Geist Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.35,.6,0,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 14px/1.2 var(--f);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,dl,dd,blockquote{margin:0}
::selection{background:var(--fg);color:#fff}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:var(--pad);top:-60px;z-index:200;background:var(--fg);color:#fff;padding:10px 14px;font-weight:500;transition:top .2s}
.skip:focus{top:12px}

/* ------------------------------------------------------------ tipografia */
.h1,.lead,.t32,.lede-big{text-wrap:pretty}
.h1{font-weight:400;font-size:clamp(34px,5vw,72px);line-height:1.1;letter-spacing:-.03em;color:var(--fg)}
.h2{font-weight:400;font-size:clamp(30px,3.34vw,48px);line-height:1.2;letter-spacing:-.01em}
.t32{font-weight:400;font-size:clamp(22px,2.23vw,32px);line-height:1.2;letter-spacing:-.01em}
.t24{font-weight:400;font-size:clamp(19px,1.67vw,24px);line-height:1.25;letter-spacing:-.005em}
.cap{font-size:12px;line-height:1.35;letter-spacing:.03em;text-transform:uppercase;font-weight:500}
.mute{color:var(--mute)}
.px{font-family:var(--px);font-weight:400;font-style:normal;letter-spacing:-.02em}
.count{font-family:var(--px);font-weight:400;font-style:normal;color:var(--mute);letter-spacing:-.04em;font-size:.667em;margin-left:.45em;vertical-align:.22em}
.mono{font-family:var(--px)}

/* ------------------------------------------------------------ grade */
.wrap{padding-inline:var(--pad)}
.row3{display:grid;grid-template-columns:506fr 332fr 506fr;column-gap:var(--gap)}
.c1{grid-column:1}.c2{grid-column:2}.c3{grid-column:3}.c23{grid-column:2/4}.c12{grid-column:1/3}
.split{display:grid;grid-template-columns:506fr 854fr;column-gap:var(--gap)}
.split__head{position:sticky;top:112px;align-self:start}
.split__head h2{margin-bottom:24px}
.split__head p{color:var(--mute);max-width:300px;font-size:13px;line-height:1.3}

/* ------------------------------------------------------------ navegação */
.nav{position:fixed;inset:0 0 auto;z-index:60;height:var(--nav-h);background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.nav__in{height:100%;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.logo b{font-weight:600;font-size:12px;line-height:1;letter-spacing:.01em;text-transform:uppercase}
.logo span{font-weight:500;font-size:12px;line-height:1;letter-spacing:.04em;text-transform:uppercase;color:var(--mute2)}
.nav__links{display:flex;justify-content:space-between;width:62%;margin-left:auto;font-weight:500;font-size:12px;line-height:1;letter-spacing:.02em;text-transform:uppercase}
.nav__links a{position:relative;padding:4px 5px;margin:-4px -5px;white-space:nowrap;transition:background-color .2s,color .2s}
.nav__links i{font-family:var(--px);font-style:normal;font-weight:400;color:var(--mute);margin-left:.25em;letter-spacing:0;transition:color .2s}
.nav__links a:hover{background:var(--fg);color:#fff}
.nav__links a:hover i{color:#b9b9b4}
.nav__links a.is-active{background:var(--fg);color:#fff}
.nav__links a.is-active i{color:#b9b9b4}
.nav__links .ext{font-size:12px}
.burger{display:none;width:40px;height:40px;margin-right:-10px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{display:block;width:18px;height:1.5px;background:var(--fg);transition:transform .35s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:55;background:#fff;padding:calc(var(--nav-h) + 24px) var(--pad) var(--pad);display:flex;flex-direction:column;justify-content:space-between;visibility:hidden;opacity:0;transition:opacity .35s var(--ease),visibility 0s .35s}
.menu.is-open{visibility:visible;opacity:1;transition:opacity .35s var(--ease)}
.menu nav{display:flex;flex-direction:column}
.menu nav a{display:flex;align-items:baseline;justify-content:space-between;padding:18px 0;border-top:1px solid var(--line);font-size:34px;line-height:1.1;letter-spacing:-.02em}
.menu nav a:last-child{border-bottom:1px solid var(--line)}
.menu nav i{font-family:var(--px);font-style:normal;font-size:18px;color:var(--mute)}
.menu__foot{display:grid;gap:6px;font-size:13px;color:var(--mute2)}
body.menu-lock{overflow:hidden}

/* ------------------------------------------------------------ transição de página */
.pt{position:fixed;inset:0;z-index:300;background:#fff;opacity:0;pointer-events:none;transition:opacity .35s ease}
html.js .pt{opacity:1;animation:pt-failsafe 0s 2.2s forwards}
html.js .pt.is-out{opacity:0;pointer-events:none}
html.js .pt.is-in{opacity:1;pointer-events:auto}
@keyframes pt-failsafe{to{opacity:0;pointer-events:none}}

/* ------------------------------------------------------------ entrada (fade de 1,1 s) */
html.js [data-intro]{opacity:0;transition:opacity 1.1s var(--ease)}
html.js [data-intro].is-in{opacity:1;animation:none}
html.js [data-intro]{animation:intro-failsafe 0s 3.2s forwards}
@keyframes intro-failsafe{to{opacity:1}}
html[data-motion="reduced"] [data-intro]{opacity:1!important;transition:none;animation:none}
html[data-motion="reduced"] .pt{display:none}

/* ------------------------------------------------------------ hero */
.hero{padding:calc(var(--nav-h) + 56px) var(--pad) 0}
.hero__grid{display:grid;grid-template-columns:1fr 158px;column-gap:var(--gap)}
.hero .eyebrow{margin-bottom:22px;color:var(--mute2)}
.hero h1{max-width:1202px}
.hero__sub{margin-top:18px;font-family:var(--px);font-weight:400;font-size:clamp(20px,2.23vw,32px);line-height:1.2;letter-spacing:-.04em;max-width:900px}
.hero__sub .rule{display:inline-block;width:72px;height:1px;background:var(--fg);vertical-align:middle;margin-right:14px;transform:translateY(-.1em)}
.hero__sub em{font-style:normal;color:var(--mute)}
.quick{padding-top:2px}
.quick .cap{color:var(--mute);margin-bottom:10px;font-size:12px}
.quick a{display:block;font-weight:400;font-size:12px;line-height:1.1;padding:3px 0}
.quick a:hover{text-decoration:underline;text-underline-offset:3px}
.hero__media{position:relative;margin-top:64px;aspect-ratio:2.1/1;background:var(--tint);overflow:hidden}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease)}
.hero__media img.is-on{opacity:1}
.hero__badge{position:absolute;left:16px;bottom:14px;z-index:2;display:flex;gap:10px;align-items:center;color:#fff;font-family:var(--px);font-size:12px;letter-spacing:-.01em;mix-blend-mode:difference}
.hero__badge i{font-style:normal;color:#fff}

.intro{padding-top:96px}
.intro .lead{max-width:680px;font-weight:400;font-size:clamp(22px,2.23vw,32px);line-height:1.2;letter-spacing:-.01em}
.intro .lead span{color:var(--mute)}
.brands{margin-top:96px;padding-top:16px;border-top:1px solid var(--line)}
.brands ul{display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--gap)}
.brands li{padding:0 0 10px;font-size:12px;line-height:1.35}
.brands .cap{color:var(--mute2)}

/* ------------------------------------------------------------ cabeçalho de seção */
.sec{padding:160px var(--pad) 0}
.sec-head{display:flex;align-items:baseline;margin-bottom:40px}
.sec-head h2{font-size:clamp(30px,3.34vw,48px);line-height:1.2;font-weight:400;letter-spacing:-.01em;white-space:nowrap}
.sec-head .count{font-size:clamp(20px,2.23vw,32px)}

/* ------------------------------------------------------------ linhas de trabalho */
.works .work{position:relative;display:grid;grid-template-columns:506fr 332fr 506fr;column-gap:var(--gap);margin-top:48px}
.works .work:first-of-type{margin-top:0}
.work::before,.work::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none}
.work::before{background:var(--line)}
.work::after{background:var(--fg);transform:scaleX(0);transform-origin:left center;transition:transform .55s var(--ease)}
.work:hover::after,.work:focus-within::after{transform:scaleX(1)}
.work__link{position:absolute;inset:0;z-index:3}
.work__label{padding-top:24px;display:flex;flex-direction:column;gap:6px}
.work__label b{font-weight:600;font-size:12px;letter-spacing:.03em;text-transform:uppercase}
.work__label span{font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.03em;font-weight:500}
.work__body{padding-top:24px;display:flex;flex-direction:column;align-items:flex-start}
.work__body .cat{color:var(--mute);margin-bottom:16px}
.work__body h3{font-weight:400;font-size:clamp(22px,2.23vw,32px);line-height:1.2;letter-spacing:-.01em}
.work__body .metric{margin-top:14px;color:var(--mute);font-size:12px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;line-height:1.4}
.work__media{position:relative;aspect-ratio:1.252/1;display:flex;flex-direction:column;overflow:hidden;background:var(--tint)}
.work__cta{flex:none;height:0;overflow:hidden;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:#fff;font-family:var(--px);font-size:12px;letter-spacing:.06em;text-transform:uppercase;transition:height .32s var(--ease)}
.work__cta svg{width:16px;height:16px}
.work:hover .work__cta,.work:focus-within .work__cta{height:32px}
.work__media img{flex:1;min-height:0;width:100%;object-fit:cover;transition:transform .9s var(--ease)}
.work:hover .work__media img{transform:scale(1.035)}

/* ------------------------------------------------------------ processo (itens numerados) */
.proc{padding-top:160px}
.proc .item{display:grid;grid-template-columns:332fr 506fr;column-gap:var(--gap);padding:24px 0 48px;position:relative;margin-top:48px;min-height:320px}
.proc .item:first-child{margin-top:0}
.proc .item::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.proc .item h3{font-family:var(--px);font-weight:400;font-size:clamp(20px,2.23vw,32px);line-height:1.2;letter-spacing:-.04em;margin-bottom:16px}
.proc .item p{color:var(--mute);font-size:13px;line-height:1.3;margin-bottom:14px}
.proc .item ul{display:grid;gap:5px;color:var(--mute2);font-size:12px;line-height:1.3}
.proc .item li{position:relative;padding-left:12px}
.proc .item li::before{content:"";position:absolute;left:1px;top:.5em;width:3px;height:3px;border-radius:50%;background:currentColor}
.proc .item figure{margin-top:-24px;aspect-ratio:1.36/1;overflow:hidden;background:var(--tint);align-self:start;width:100%}
.proc .item figure img{width:100%;height:100%;object-fit:cover}

/* ------------------------------------------------------------ linhas de lista (serviços, experiência…) */
.list{border-bottom:1px solid var(--line)}
.lrow{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:24px;padding:20px 0;border-top:1px solid var(--line);transition:background-color .28s var(--ease),color .28s var(--ease),margin .28s var(--ease),padding .28s var(--ease)}
a.lrow:hover,a.lrow:focus-visible,.lrow.is-hot{margin-inline:-16px;padding-inline:16px;background:var(--fg);color:#fff;border-color:var(--fg)}
.lrow__t{font-weight:400;font-size:clamp(18px,1.67vw,24px);line-height:1.2;letter-spacing:-.01em}
.lrow__s{margin-top:6px;font-size:12px;line-height:1.35;color:var(--mute);max-width:620px;transition:color .28s}
a.lrow:hover .lrow__s,a.lrow:focus-visible .lrow__s{color:#b9b9b4}
.lrow__e{margin-top:8px;font-family:var(--px);font-size:12px;letter-spacing:-.01em;color:var(--mute2);text-transform:uppercase;transition:color .28s}
a.lrow:hover .lrow__e{color:#fff}
.lrow__r{display:flex;align-items:center;gap:16px;font-family:var(--px);font-size:12px;letter-spacing:-.01em;color:var(--mute);text-transform:uppercase;white-space:nowrap}
a.lrow:hover .lrow__r{color:#b9b9b4}
.lrow svg{width:20px;height:20px;transition:transform .3s var(--ease),width .3s var(--ease),height .3s var(--ease)}
a.lrow:hover svg,a.lrow:focus-visible svg{transform:rotate(-45deg);width:28px;height:28px}
.lrow--exp .lrow__t small{margin-left:10px;font-family:var(--px);font-size:12px;color:var(--mute);letter-spacing:-.01em}

/* ------------------------------------------------------------ rodapé com gradiente */
.ftr{position:relative;margin:160px var(--pad) var(--pad);min-height:max(100svh,780px);background:#060205;color:#fff;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:56px 48px 40px;isolation:isolate}
.ftr canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.ftr__lead{margin-left:calc(506 / 1376 * 100% + 8px);font-family:var(--px);font-size:clamp(18px,1.67vw,24px);line-height:1.2;letter-spacing:-.03em;max-width:420px}
.ftr__mail{display:block;width:100%;margin:56px 0 64px;font-weight:400;line-height:1;letter-spacing:-.04em;text-transform:uppercase;color:#fff;white-space:nowrap;text-align:left;cursor:copy;font-size:clamp(26px,5.3vw,84px)}
.ftr__mail .at{display:inline}
.ftr__mail:focus-visible{outline-color:#fff}
.ftr__hint{display:block;margin-bottom:14px;font-family:var(--px);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.ftr__cols{display:grid;grid-template-columns:506fr 332fr 506fr;column-gap:var(--gap);padding-top:18px;border-top:1px solid rgba(255,255,255,.28)}
.ftr__cols>div:first-child{grid-column:2}
.ftr__cols .cap{color:rgba(255,255,255,.6);margin-bottom:14px;font-size:12px}
.ftr__cols a{display:block;font-size:13px;line-height:1.1;padding:4px 0;color:#fff}
.ftr__cols a:hover{text-decoration:underline;text-underline-offset:3px}
.ftr__bar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:56px;font-size:12px;letter-spacing:.03em;text-transform:uppercase;font-weight:500;color:rgba(255,255,255,.85)}
.ftr__bar button,.ftr__bar a{color:inherit;text-transform:uppercase;letter-spacing:.03em;font-weight:500;font-size:12px}
.ftr__bar button:hover,.ftr__bar a:hover{text-decoration:underline;text-underline-offset:3px}
.ftr__static{position:absolute;inset:0;z-index:-2;background:radial-gradient(60% 70% at 20% 85%,#5b0a16 0%,transparent 60%),radial-gradient(50% 60% at 85% 20%,#b8281c 0%,transparent 65%),#060205}

/* ------------------------------------------------------------ SOBRE */
.about-head{padding:calc(var(--nav-h) + 56px) var(--pad) 0}
.about-head .cap{color:var(--mute2);margin-bottom:56px;display:block}
.about-head h1{max-width:900px}
.about-intro{padding-top:72px}
.about-intro .txt{font-family:var(--px);font-size:clamp(14px,1.25vw,18px);line-height:1.25;letter-spacing:-.03em;max-width:340px}
.about-intro figure{aspect-ratio:1.55/1;overflow:hidden;background:#8a7a68}
.about-intro figure img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.story{padding-top:120px}
.story .prose p{margin-bottom:16px}
.story .lede{font-size:clamp(22px,2.23vw,32px);line-height:1.2;letter-spacing:-.01em;margin-bottom:40px;max-width:680px}
.gal{padding-top:120px}
.gal__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.gal__grid figure{overflow:hidden;background:var(--tint);aspect-ratio:1.5/1}
.gal__grid img{width:100%;height:100%;object-fit:cover}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.trio>div{border-top:1px solid var(--fg);padding-top:16px}
.trio h3{font-weight:400;font-size:clamp(26px,3.34vw,48px);line-height:1.05;letter-spacing:-.03em;margin-bottom:14px}
.trio p{font-size:13px;line-height:1.4;color:var(--mute2);max-width:240px}
.toolgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px var(--gap)}
.toolgrid .cap{color:var(--mute);margin-bottom:10px}
.tools{display:flex;flex-wrap:wrap;gap:6px 8px}
.tools span{font-size:12px;border:1px solid var(--line);padding:5px 9px;border-radius:99px}
.panel{margin:160px var(--pad) 0;background:#050505;color:#fff;padding:48px;display:grid;grid-template-columns:506fr 854fr;column-gap:var(--gap)}
.panel .t{font-size:13px;color:rgba(255,255,255,.75)}
.panel p.big{font-size:clamp(20px,1.67vw,24px);line-height:1.25;max-width:520px;letter-spacing:-.005em}
.panel .mailrow{display:flex;align-items:center;gap:18px;margin-top:28px;font-size:13px}
.panel .mailrow button{font-size:clamp(14px,1.25vw,18px);border-bottom:1px solid rgba(255,255,255,.5)}
.panel .mailrow button:hover{border-color:#fff}
.panel .plist{margin-top:48px;border-bottom:1px solid rgba(255,255,255,.25)}
.panel .plist a{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-top:1px solid rgba(255,255,255,.25);font-size:16px;transition:padding .25s var(--ease),background .25s}
.panel .plist a:hover{padding-inline:12px;background:#fff;color:#050505}
.panel .plist span{font-family:var(--px);font-size:12px;letter-spacing:.02em;text-transform:uppercase;opacity:.6}

/* ------------------------------------------------------------ CASES */
.chead{padding:calc(var(--nav-h) + 40px) var(--pad) 0}
.chead__meta{display:flex;align-items:center;gap:16px;color:var(--mute2);margin-bottom:56px}
.chead__meta .line{flex:0 1 420px;height:1px;background:var(--line)}
.chead__meta span:last-child{margin-left:auto;color:var(--fg)}
.chead h1{font-weight:400;font-size:clamp(30px,3.9vw,56px);line-height:1.1;letter-spacing:-.03em;max-width:980px}
.chead__grid{margin-top:48px;align-items:start}
.chead__text .sub{max-width:420px}
.facts{margin-top:36px;display:grid;gap:14px}
.facts dt{color:var(--mute);font-size:12px;letter-spacing:.03em;text-transform:uppercase;font-weight:500;margin-bottom:3px}
.facts dd{font-size:13px;line-height:1.3;max-width:400px}
.facts a{text-decoration:underline;text-underline-offset:3px}
.chead__media{aspect-ratio:1.78/1;overflow:hidden;background:var(--tint)}
.chead__media a{display:block;height:100%;cursor:zoom-in}
.chead__media img{width:100%;height:100%;object-fit:cover}
.hcap{margin-top:8px;font-size:12px;line-height:1.3;color:var(--mute)}

.cs{padding:112px var(--pad) 0}
.cs__label{font-size:12px;line-height:1.3;color:var(--mute2);font-weight:400;max-width:260px;position:sticky;top:104px;align-self:start}
.cs__label b{display:block;font-family:var(--px);font-weight:400;font-size:12px;color:var(--mute);margin-bottom:6px;letter-spacing:-.01em}
.cs__body{min-width:0}
.cs__body>*+*{margin-top:40px}
.prose p{font-size:15px;line-height:1.5;max-width:640px;color:var(--fg)}
.prose p+p{margin-top:14px}
.prose h2,.prose h3.pt{font-size:clamp(20px,1.67vw,24px);line-height:1.25;font-weight:400;letter-spacing:-.005em;margin-bottom:14px}
.prose ul{display:grid;gap:8px;max-width:640px}
.prose li{position:relative;padding-left:16px;font-size:15px;line-height:1.45}
.prose li::before{content:"";position:absolute;left:2px;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--fg)}
.prose+.prose{margin-top:32px}
.prose a,.u{text-decoration:underline;text-underline-offset:3px}

.lede-big{font-size:clamp(22px,2.23vw,32px);line-height:1.2;letter-spacing:-.01em;max-width:854px}
.lede-big b{font-weight:400}

.cpanes{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap);row-gap:32px}
.cpane{border-top:1px solid var(--line);padding-top:14px}
.cpane h3{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px;display:flex;gap:8px;align-items:center}
.cpane h3 .chip{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.cpane ul{display:grid;gap:10px}
.cpane li{position:relative;padding-left:12px;font-size:13px;line-height:1.35;color:var(--mute2)}
.cpane li::before{content:"";position:absolute;left:1px;top:.55em;width:3px;height:3px;border-radius:50%;background:currentColor}
.cpane li b{color:var(--fg);font-weight:500}
.cpane p{font-size:13px;line-height:1.4;color:var(--mute2)}
.cpane p b,.cpane p strong{color:var(--fg);font-weight:500}
.chip--u::after{content:""}
.cgoals{display:grid;gap:0;border-bottom:1px solid var(--line)}
.cgoals li{display:grid;grid-template-columns:64px 1fr;padding:18px 0;border-top:1px solid var(--line);align-items:baseline}
.cgoals b{font-family:var(--px);font-weight:400;font-size:12px;color:var(--mute)}
.cgoals p{font-size:clamp(18px,1.67vw,24px);line-height:1.25;letter-spacing:-.005em}
.cgoals p b{font-family:inherit;font-size:inherit;color:inherit;font-weight:400}
.clabel{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px}

.feat{border-top:1px solid var(--line);padding-top:20px}
.feat+.feat{margin-top:72px}
.feat__head{display:grid;grid-template-columns:48px 1fr;column-gap:12px}
.feat__n{font-family:var(--px);font-size:12px;color:var(--mute);padding-top:6px}
.feat h3{font-weight:400;font-size:clamp(20px,1.95vw,28px);line-height:1.2;letter-spacing:-.01em}
.feat__chips{margin-top:10px;display:flex;gap:6px}
.chip{font-size:12px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;border:1px solid var(--line);padding:3px 7px;border-radius:99px;color:var(--mute2)}
.feat .txt{margin-top:16px;font-size:15px;line-height:1.5;max-width:640px}
.feat .txt b{font-weight:500}
.cfeat__shots,.feat__shots{margin-top:28px;display:grid;gap:var(--gap)}
.cfig a{display:block;cursor:zoom-in;overflow:hidden;background:var(--tint);border:1px solid var(--line)}
.cfig img{width:100%;height:auto;display:block}
.cfig figcaption{margin-top:8px;font-size:12px;line-height:1.3;color:var(--mute)}
.cfig--duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}

.ctime{border-bottom:1px solid var(--line)}
.ctime li{display:grid;grid-template-columns:132px 200px 1fr;column-gap:var(--gap);padding:16px 0;border-top:1px solid var(--line);align-items:baseline}
.ctime .mono{font-size:12px;color:var(--mute);letter-spacing:-.01em}
.ctime h4{font-size:15px;font-weight:500;line-height:1.25}
.ctime p{font-size:13px;line-height:1.4;color:var(--mute2)}

.cstats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.cstats--4{grid-template-columns:repeat(4,1fr)}
.cstat{padding:24px 20px 28px 0;border-bottom:1px solid var(--line)}
.cstat b{display:block;font-weight:400;font-size:clamp(40px,4.4vw,64px);line-height:1;letter-spacing:-.04em;margin-bottom:12px}
.cstat p{font-size:12px;line-height:1.35;color:var(--mute2);max-width:240px}
.cstat p strong{color:var(--fg);font-weight:500}
.cnote{font-size:12px;line-height:1.4;color:var(--mute);max-width:640px}
.cmaps{border-bottom:1px solid var(--line)}
.cmaps li{display:grid;grid-template-columns:1fr 28px 1fr;column-gap:12px;padding:16px 0;border-top:1px solid var(--line);align-items:baseline;font-size:13px;line-height:1.35}
.cmaps span{color:var(--mute2)}
.cmaps i{font-style:normal;color:var(--mute);font-family:var(--px)}
.cmaps b{font-weight:500}

/* resultados em painel colorido */
.cres-panel{background:var(--accent-soft);padding:56px 48px 48px;margin:0 0 0}
.cres-panel .cstats{border-color:rgba(250,78,62,.35)}
.cres-panel .cstat{border-color:rgba(250,78,62,.35)}
.cres-panel .cstat b{color:var(--accent-ink);font-size:clamp(48px,6.1vw,88px)}
.cres-panel .cstat p{color:#b3362a}
.cres{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--gap);margin-top:0}
.cres--2{grid-template-columns:repeat(2,1fr)}
.cres .cpane{margin-top:0}
.cres .cpane.on{border-top-color:var(--fg)}

.cnext{display:block;padding-top:112px}
.cnext__row{display:grid;grid-template-columns:506fr 854fr;column-gap:var(--gap);align-items:center;border-top:1px solid var(--fg);border-bottom:1px solid var(--fg);padding:26px 0;transition:background-color .28s var(--ease),color .28s var(--ease),padding .28s var(--ease),margin .28s var(--ease)}
.cnext__row .cap{color:var(--mute2)}
.cnext__t{display:flex;align-items:center;justify-content:space-between;font-size:clamp(28px,3.34vw,48px);line-height:1.1;letter-spacing:-.02em}
.cnext__t svg{width:34px;height:34px;transition:transform .3s var(--ease)}
.cnext:hover .cnext__row{background:var(--fg);color:#fff;margin-inline:-16px;padding-inline:16px}
.cnext:hover .cap{color:#b9b9b4}
.cnext:hover svg{transform:rotate(-45deg)}

/* ------------------------------------------------------------ lightbox */
.lb{position:fixed;inset:0;z-index:250;background:rgba(255,255,255,.96);display:none;align-items:center;justify-content:center;padding:56px 32px 72px;cursor:zoom-out}
.lb.is-open{display:flex}
.lb img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.18)}
.lb p{position:absolute;left:0;right:0;bottom:24px;text-align:center;font-size:12px;color:var(--mute2);padding:0 32px}
.lb button{position:absolute;top:18px;right:24px;font-size:12px;font-weight:500;letter-spacing:.03em;text-transform:uppercase}

/* ------------------------------------------------------------ 404 */
.nf{padding:calc(var(--nav-h) + 120px) var(--pad) 0;min-height:70vh}
.nf p.cap{color:var(--mute2);margin-bottom:28px}
.nf h1{margin-bottom:24px}
.nf p.t{font-size:15px;color:var(--mute2);margin-bottom:28px}
.nf a.u{font-size:15px}

/* ------------------------------------------------------------ tablet */
@media (max-width:1100px){
  .nav__links{width:70%}
  .logo span{display:none}
  .hero__grid{grid-template-columns:1fr}
  .quick{display:none}
  .row3,.split,.ftr__cols,.cnext__row,.panel{grid-template-columns:1fr 1fr}
  .row3>.c1,.row3>.c2,.row3>.c3,.row3>.c23{grid-column:auto}
  .work{grid-template-columns:1fr 1fr!important}
  .work__label{grid-column:1/-1;padding-top:16px}
  .work__body{padding-top:8px}
  .split__head{position:static}
  .proc .item{grid-template-columns:1fr 1fr}
  .cs.row3{grid-template-columns:1fr;row-gap:20px}
  .cs__label{position:static;max-width:none}
  .ctime li{grid-template-columns:120px 1fr}
  .ctime li p{grid-column:2}
  .cnext__row{grid-template-columns:1fr}
}

/* ------------------------------------------------------------ mobile */
@media (max-width:809px){
  :root{--pad:20px;--nav-h:60px}
  .nav__links{display:none}
  .burger{display:flex}
  .logo span{display:none}
  .row3,.split,.ftr__cols,.cnext__row,.panel,.chead__grid{grid-template-columns:1fr;row-gap:20px}
  .row3>*,.chead__grid>*{grid-column:auto!important}
  .hero{padding-top:calc(var(--nav-h) + 40px)}
  .hero .eyebrow{font-size:12px;margin-bottom:16px}
  .hero__media{aspect-ratio:1.5/1;margin-top:40px}
  .hero__sub{font-size:20px;margin-top:14px}
  .hero__sub .rule{width:44px;margin-right:8px}
  .intro{padding-top:56px}
  .brands{margin-top:56px}
  .brands ul{grid-template-columns:1fr 1fr}
  .sec{padding-top:96px}
  .sec-head{margin-bottom:24px}
  .works .work{grid-template-columns:1fr!important;margin-top:40px;row-gap:0}
  .work__label{padding-top:14px;flex-direction:row;gap:12px;align-items:baseline}
  .work__body{padding-top:6px;padding-bottom:20px}
  .work__body .cat{margin-bottom:10px}
  .work__media{aspect-ratio:1.4/1}
  .proc{padding-top:96px}
  .proc .item{grid-template-columns:1fr;row-gap:20px;padding-bottom:40px}
  .proc .item figure{margin-top:0}
  .lrow{padding:16px 0}
  .lrow__r .t{display:none}
  a.lrow:hover,a.lrow:focus-visible{margin-inline:-12px;padding-inline:12px}
  .ftr{margin:96px 12px 12px;padding:28px 20px 24px;min-height:100svh}
  .ftr__lead{margin-left:0;font-size:18px}
  .ftr__mail{margin:36px 0 36px;font-size:clamp(22px,8.6vw,40px);white-space:normal;line-height:1.02}
  .ftr__mail .at{display:block}
  .ftr__cols{row-gap:24px}
  .ftr__cols>div:first-child{grid-column:auto}
  .ftr__bar{flex-wrap:wrap;margin-top:36px}
  .about-head{padding-top:calc(var(--nav-h) + 40px)}
  .about-head .cap{margin-bottom:36px}
  .about-intro{padding-top:48px}
  .story,.gal{padding-top:72px}
  .gal__grid{grid-template-columns:1fr}
  .trio,.toolgrid{grid-template-columns:1fr}
  .trio>div{padding-bottom:8px}
  .panel{margin:96px 12px 0;padding:28px 20px}
  .chead{padding-top:calc(var(--nav-h) + 24px)}
  .chead__meta{margin-bottom:32px}
  .chead__meta .line{flex:1}
  .chead__grid{margin-top:32px}
  .cs{padding-top:72px}
  .cs__label{position:static;margin-bottom:20px;max-width:none}
  .cpanes{grid-template-columns:1fr}
  .cres,.cres--2{grid-template-columns:1fr;row-gap:20px}
  .cgoals li{grid-template-columns:44px 1fr}
  .ctime li{grid-template-columns:1fr;row-gap:4px;padding:14px 0}
  .cstats,.cstats--4{grid-template-columns:1fr 1fr}
  .cstat{padding-right:12px}
  .cmaps li{grid-template-columns:1fr;row-gap:4px}
  .cmaps i{display:none}
  .cres-panel{padding:32px 20px}
  .cfig--duo{grid-template-columns:1fr}
  .cnext{padding-top:72px}
  .cnext__row{row-gap:10px;padding:20px 0}
}

@media (prefers-reduced-motion:reduce){
  html:not([data-motion="full"]) *{scroll-behavior:auto!important}
}


/* ==========================================================================
   Passe de UX (20/10/2026): alvos de toque, CTAs, orientação nos cases,
   lightbox com navegação, toque sem hover, impressão
   ========================================================================== */
.nav__links a::after{content:"";position:absolute;inset:-9px -8px}
.logo{position:relative}
.logo::after{content:"";position:absolute;inset:-14px -6px}
.quick a{padding:7px 0}
.ftr__cols a{padding:8px 0}
.ftr__bar button,.ftr__bar a{padding:8px 0}
.panel .mailrow button{padding:8px 0}
.panel .plist a{padding:16px 0}
.facts a,.prose a,.u{padding:2px 0}

/* botões */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:1px solid var(--fg);font-size:12px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;line-height:1;transition:background-color .25s var(--ease),color .25s var(--ease)}
.btn svg{width:16px;height:16px;flex:none}
.btn--solid{background:var(--fg);color:#fff}
.btn--solid:hover{background:#fff;color:var(--fg)}
.btn--ghost:hover{background:var(--fg);color:#fff}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}

/* rodapé: abrir no app de e-mail */
.ftr__hint{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center}
.ftr__send{color:#fff;text-decoration:underline;text-underline-offset:3px;padding:8px 0;font-family:var(--px);text-transform:uppercase;font-size:12px;letter-spacing:.04em}

/* cases: migalha, índice fixo com progresso e anterior/próximo */
.crumb{display:inline-flex;align-items:center;min-height:32px;color:var(--mute2);margin-bottom:16px}
.crumb:hover{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.chead__meta{margin-bottom:40px}
.cindex{position:sticky;top:var(--nav-h);z-index:45;margin-top:72px;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:top .35s var(--ease)}
.cindex__in{display:flex;align-items:center;gap:4px;padding:8px var(--pad);overflow-x:auto;scrollbar-width:none}
.cindex__in::-webkit-scrollbar{display:none}
.cindex .cap{color:var(--mute2);margin-right:14px;white-space:nowrap}
.cindex a{flex:none;white-space:nowrap;font-size:12px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;padding:9px 10px;transition:background-color .2s,color .2s}
.cindex a:hover{background:var(--tint)}
.cindex a.is-active{background:var(--fg);color:#fff}
.cindex__bar{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--accent);transform-origin:left center;transform:scaleX(var(--prog,0))}
body.nav-hidden .cindex{top:0}
.cs{scroll-margin-top:40px}
.cs__label{top:144px}
.cpn{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--fg);border-bottom:1px solid var(--fg)}
.cpn a{display:block;padding:26px 0;transition:background-color .28s var(--ease),color .28s var(--ease),padding .28s var(--ease)}
.cpn a:last-child{text-align:right;border-left:1px solid var(--line)}
.cpn .cap{display:block;color:var(--mute2);margin-bottom:12px}
.cpn b{display:flex;align-items:center;gap:14px;font-weight:400;font-size:clamp(26px,3.34vw,48px);line-height:1.1;letter-spacing:-.02em}
.cpn a:last-child b{justify-content:flex-end}
.cpn svg{width:30px;height:30px;flex:none}
.cpn a:first-child svg{transform:scaleX(-1)}
.cpn a:hover,.cpn a:focus-visible{background:var(--fg);color:#fff;padding-inline:16px}
.cpn a:hover .cap,.cpn a:focus-visible .cap{color:#c8c8c3}

/* lightbox com navegação */
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;font-size:20px;line-height:1}
.lb__nav:hover{background:var(--fg);color:#fff}
.lb__prev{left:20px}.lb__next{right:20px}
.lb__count{position:absolute;top:22px;left:32px;font-family:var(--px);font-size:12px;color:var(--mute2)}
.lb button{min-height:44px;min-width:44px}

/* toque: sem hover, o convite para ler o case fica visível */
@media (hover:none){
  .work__cta{height:32px}
  .work__media img{transition:none}
}

/* celular: menu esconde ao rolar para baixo, alvos de 44 px */
@media (max-width:809px){
  .work__cta{height:32px}
  .work__media img{transition:none}
  .nav{transition:transform .35s var(--ease)}
  .nav.is-hidden{transform:translateY(-100%)}
  .ftr__cols a{padding:13px 0}
  .ftr__bar button,.ftr__bar a{padding:14px 0}
  .ftr__send{padding:12px 0}
  .quick a{padding:10px 0}
  .cindex{margin-top:48px}
  .cindex a{padding:14px 12px}
  .crumb{min-height:44px}
  .hero__cta .btn{flex:1 1 150px;justify-content:space-between}
  .facts a,.u{padding:10px 0;display:inline-block}
  .panel .mailrow{flex-wrap:wrap}
  .panel .mailrow button{padding:12px 0}
  .cpn{grid-template-columns:1fr}
  .cpn a:last-child{text-align:left;border-left:0;border-top:1px solid var(--line)}
  .cpn a:last-child b{justify-content:flex-start}
  .lb__nav{top:auto;bottom:64px;transform:none}
}

/* impressão e salvar em PDF: tudo visível, sem barras nem efeitos */
@media print{
  .nav,.menu,.pt,.cindex,.ftr canvas,.ftr__static,.lb,.skip,.burger,.hero__cta,.hero__media{display:none!important}
  [data-r],[data-intro]{opacity:1!important;transform:none!important}
  .cs__label,.split__head{position:static!important}
  .hero,.chead,.about-head{padding-top:24px}
  .ftr{min-height:0;background:#fff!important;color:#000;margin:32px 0 0;padding:16px 0}
  .ftr *{color:#000!important}
  .ftr__mail{font-size:20px!important}
  a{text-decoration:none}
}


/* ==========================================================================
   Idioma, contato (formulário + agenda), rodapé com chamadas
   ========================================================================== */
.lang{position:relative;margin-left:24px;padding:7px 10px;border:1px solid var(--line);font-size:12px;font-weight:500;letter-spacing:.04em;line-height:1;transition:background-color .2s,color .2s,border-color .2s}
.lang::after{content:"";position:absolute;inset:-9px -6px}
.lang:hover{background:var(--fg);color:#fff;border-color:var(--fg)}
.btn--inv{border-color:#fff;color:#fff;background:transparent}
.btn--inv:hover{background:#fff;color:#0a0a0a}
.ftr__top{display:flex;flex-direction:column;gap:22px}
.ftr__top .ftr__lead{margin-left:calc(506 / 1376 * 100% + 8px)}
.ftr__ctas{display:flex;flex-wrap:wrap;gap:10px;margin-left:calc(506 / 1376 * 100% + 8px)}

.contact-intro{max-width:640px;margin-top:28px;color:var(--mute2)}
.options{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.option{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-height:280px;padding:18px 0 4px;border-top:1px solid var(--fg)}
.option .px{font-size:12px;color:var(--mute)}
.option h2{font-weight:400;font-size:clamp(24px,2.4vw,34px);line-height:1.1;letter-spacing:-.02em}
.option p{flex:1;max-width:320px;font-size:14px;line-height:1.4;color:var(--mute2)}
.option--main{padding:18px 20px 22px;background:var(--tint);border-top-color:var(--accent)}
.optlink{font-size:13px;padding:8px 0}

.form{display:grid;gap:28px;max-width:680px}
.form[hidden],.form__ok[hidden]{display:none}
.field{display:grid;gap:8px;min-width:0;border:0;padding:0;margin:0}
.field label,.field legend{padding:0;font-size:12px;font-weight:500;letter-spacing:.03em;text-transform:uppercase}
.field abbr{text-decoration:none;color:var(--accent-ink)}
.field input[type=text],.field input[type=email],.field textarea{width:100%;padding:12px 0;font:400 16px/1.4 var(--f);color:var(--fg);background:transparent;border:0;border-bottom:1px solid var(--fg);border-radius:0;outline:none;transition:box-shadow .2s}
.field textarea{min-height:150px;padding:12px;border:1px solid var(--fg);resize:vertical}
.field input:focus,.field textarea:focus{box-shadow:0 2px 0 0 var(--fg)}
.field [aria-invalid="true"]{border-color:#b3261e;box-shadow:0 2px 0 0 #b3261e}
.field__err{font-size:12px;line-height:1.35;color:#b3261e}
.chipradios{display:flex;flex-wrap:wrap;gap:8px}
.chipradio{position:relative;display:block}
.chipradio input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chipradio span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);font-size:13px;transition:background-color .2s,color .2s,border-color .2s}
.chipradio:hover span{border-color:var(--fg)}
.chipradio input:checked+span{background:var(--fg);border-color:var(--fg);color:#fff}
.chipradio input:focus-visible+span{outline:2px solid var(--fg);outline-offset:3px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.form__row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.form__row .btn[disabled]{opacity:.55;cursor:progress}
.form__note{max-width:520px;font-size:12px;line-height:1.45;color:var(--mute)}
.form__status{min-height:1.4em;font-size:13px;line-height:1.4}
.form__status.is-err{color:#b3261e}
.form__ok{max-width:680px;padding-top:20px;border-top:1px solid var(--fg)}
.form__ok h3{margin-bottom:10px;font-weight:400;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.02em}
.form__ok p{margin-bottom:22px;color:var(--mute2);font-size:15px}
.form__ok:focus{outline:none}

@media (max-width:1100px){
  .options{grid-template-columns:1fr}
  .option{min-height:0}
  .nav__links{width:72%}
}
@media (max-width:809px){
  .lang{margin-left:auto;margin-right:6px}
  .ftr__top .ftr__lead,.ftr__ctas{margin-left:0}
  .ftr__ctas .btn{flex:1 1 150px;justify-content:center}
  .form__row .btn{flex:1 1 100%;justify-content:space-between}
}
@media print{.lang,.ftr__ctas,.form,.options{display:none!important}}