/* Cleiton Avi · camada comum do site, extraída dos protótipos aprovados (29.09.2026).
   Ordem: base do DS e componentes > camada de revisão (sys) > idioma, rodapé e cookies (v10) > lista mobile. */

/* Layout: grid de 12 colunas do DS v2, dark-first com uma seção clara de respiro. Tipografia principal em Switzer 500; League Gothic só no fechamento. */
/* Fontes: declaradas no theme.json (Switzer, League Gothic e Bitcount Prop Single, com latino e latino estendido). */

:root{
  color-scheme:dark;
  --f-text:"Switzer","Helvetica Neue",Arial,sans-serif;
  --f-display:"League Gothic","Arial Narrow",sans-serif;
  --f-meta:"Bitcount Prop Single",ui-monospace,monospace;
  --margin:clamp(20px,3.5vw,48px);
}
/* Aliases curtos dos protótipos, apontando para os tokens do DS (tokens.css). Os valores são os mesmos.
   Ficam redeclarados nas seções claras para acompanhar a troca de modo feita em tokens.css. */
:root, .light, .is-light, .is-style-light, [data-theme="light"]{
  --canvas:var(--surface-canvas); --surface:var(--surface-default); --border:var(--border-default);
  --text:var(--text-default); --text-2:var(--text-secondary); --muted:var(--text-muted);
  --accent:var(--action-primary); --accent-hover:var(--action-primary-hover); --state:var(--state-secondary);
}
.light{background:var(--canvas);color:var(--text)}
.tone{background:var(--ink-900);--surface:var(--ink-800);--border:#2E2E2C}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink-950)}
body{background:var(--canvas);color:var(--text);font-family:var(--f-text);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;margin:0}
::selection{background:var(--teal-500);color:var(--ink-950)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--teal-500);outline-offset:3px}
img{max-width:100%}

.wrap{max-width:calc(var(--container) + 2*var(--margin));margin-inline:auto;padding-inline:var(--margin)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.meta{font-family:var(--f-meta);font-weight:400;font-size:15px;line-height:1.2;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.meta b,.meta strong{font-weight:600;color:var(--text)}
.link{display:inline-flex;gap:.5em;align-items:center;border-bottom:1px solid var(--border-strong);padding-bottom:3px;transition:border-color .2s var(--ease),color .2s var(--ease)}
.link:hover{color:var(--state);border-color:var(--state)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--ink-950);font-weight:500;padding:13px 22px;transition:background .15s var(--ease)}
.btn:hover{background:var(--accent-hover)}
.btn:active{background:var(--signal-700)}

/* Protótipo */
.proto{background:var(--ink-900);border-bottom:1px solid var(--border)}
.proto .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:8px}

/* WordPress embrulha header e rodapé num template part. Com display:contents, o .hdr continua sticky e a marcação fica igual à do protótipo. */
.wp-block-template-part:has(> .hdr), .wp-block-template-part:has(> .ftr){display:contents}
/* Sem o espaço automático do WordPress entre header, conteúdo e rodapé: cada seção define o próprio ritmo (--sec-y). */
.wp-site-blocks > *{margin-block-start:0}
/* Grupos e parágrafos do header e do rodapé sem as margens automáticas dos blocos. */
.hdr .is-layout-flow > *, .ftr .is-layout-flow > *, .mmenu.is-layout-flow > *{margin-block-start:0}
.ftr p{margin:0}
.logo img{display:block;width:100%;height:auto}

/* Âncoras param abaixo do header fixo também sem a rolagem suave (reduzir movimento); com o Lenis, o site.js desconta os mesmos 88 px. */
html{scroll-padding-top:88px}

/* Header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--ink-950) 88%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:18px}
.logo{display:block;width:152px;color:var(--ink-100)}
.logo svg{display:block;width:100%;height:auto}
.nav{display:flex;gap:32px;font-size:15px}
.nav a{color:var(--text-2);transition:color .2s var(--ease)}
.nav a:hover,.nav a[aria-current]{color:var(--text)}
.hdr .btn{padding:10px 16px;font-size:15px}
@media (max-width:860px){.nav{display:none}}

/* Hero */
.hero{position:relative;padding-block:clamp(56px,9vw,128px) clamp(40px,6vw,80px);overflow:hidden}
.hero .reg{position:absolute;inset:0;pointer-events:none}
.hero-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:clamp(40px,7vw,96px)}
.hero h1{grid-column:1/11;margin:0;font-weight:500;font-size:clamp(44px,7.4vw,112px);line-height:.95;letter-spacing:-.045em;text-wrap:balance}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .ln span{display:block}
.hero h1 em{font-style:normal;color:var(--muted)}
.hero-foot{grid-column:1/-1;display:grid;grid-template-columns:subgrid;margin-top:clamp(40px,6vw,72px);align-items:end}
.hero-foot p{grid-column:7/11;margin:0;font-size:18px;color:var(--text-2);max-width:44ch}
.hero-foot .actions{grid-column:11/13;display:flex;flex-direction:column;align-items:flex-start;gap:14px;justify-self:end}
@media (max-width:860px){
  .hero h1{grid-column:1/-1}
  .hero-foot{grid-template-columns:1fr;row-gap:28px}
  .hero-foot p,.hero-foot .actions{grid-column:1/-1;justify-self:start}
  .hero-foot .actions{flex-direction:row;align-items:center;gap:20px;flex-wrap:wrap}
}

/* Cover placeholder: cor dominante da capa real + nome do cliente */
.cover{position:relative;overflow:hidden;container-type:inline-size;background:var(--c,#1F1F1F);color:var(--cf,#EDEDEA)}
.cover .ph{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-start;padding:clamp(16px,2.4vw,32px);transform-origin:50% 60%}
.cover .ph strong{font-family:var(--f-display);font-weight:400;text-transform:uppercase;line-height:.82;font-size:var(--fs,14cqw);white-space:nowrap;opacity:.9;letter-spacing:.005em}
.cover .tag{position:absolute;top:clamp(12px,1.6vw,20px);right:clamp(12px,1.6vw,20px);font-family:var(--f-meta);font-size:14px;letter-spacing:.03em;text-transform:uppercase;opacity:.6}
.cover .ph{transition:transform 1.1s var(--ease-soft)}
/* Capa real: a imagem ocupa o lugar do placeholder, com o mesmo zoom de entrada e de hover. */
.cover img.ph{display:block;width:100%;height:100%;padding:0;object-fit:cover}

/* Case de abertura */
.lead{padding-bottom:clamp(64px,9vw,128px)}
.lead a{display:block}
.lead .cover{aspect-ratio:21/9}
.lead .cap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:16px;border-bottom:1px solid var(--border);padding-bottom:16px}
.lead .cap h2{margin:0;font-size:clamp(20px,2vw,24px);font-weight:500;letter-spacing:-.02em}
@media (max-width:700px){.lead .cover{aspect-ratio:4/3}}

/* Trabalho selecionado */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-bottom:clamp(32px,5vw,56px)}
.sec-head h2{margin:0;font-weight:500;font-size:clamp(34px,4.2vw,56px);line-height:1;letter-spacing:-.04em}
.sec-head h2 sup{font-family:var(--f-meta);font-size:16px;letter-spacing:.03em;color:var(--muted);vertical-align:top;margin-left:10px;font-weight:500}
.works{row-gap:clamp(56px,8vw,112px)}
.work{display:block;min-width:0}
.work .cover{width:100%}
.work .cap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding-top:14px}
.work h3{margin:0;font-size:clamp(18px,1.6vw,21px);font-weight:500;letter-spacing:-.02em}
.work .cap p{grid-column:1/-1;margin:0;color:var(--text-2);font-size:15px}
.work:hover .ph,.lead a:hover .ph{transform:scale(1.035)}
.work h3 span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease-soft)}
.work:hover h3 span{background-size:100% 1px}

.w-a{grid-column:1/8}  .w-a .cover{aspect-ratio:16/10}
.w-b{grid-column:9/13;margin-top:clamp(80px,14vw,200px)} .w-b .cover{aspect-ratio:4/5}
.w-c{grid-column:2/6}  .w-c .cover{aspect-ratio:1}
.w-d{grid-column:7/13} .w-d .cover{aspect-ratio:16/11}
.w-e{grid-column:1/13} .w-e .cover{aspect-ratio:2.4/1}
.w-f{grid-column:1/6;margin-top:clamp(40px,8vw,120px)} .w-f .cover{aspect-ratio:4/5}
.w-g{grid-column:7/12} .w-g .cover{aspect-ratio:4/5}
.more{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:clamp(56px,8vw,96px);padding-block:20px;border-block:1px solid var(--border)}
@media (max-width:860px){
  .works > .work{grid-column:1/-1;margin-top:0}
  .w-b .cover,.w-f .cover,.w-g .cover{aspect-ratio:4/5}
}

/* Método (seção clara): coluna fixa à esquerda, etapas grandes à direita. A etapa no centro da tela ganha contraste total. */
.method{padding-block:clamp(80px,11vw,160px);margin-top:clamp(96px,12vw,176px)}
.m-side{grid-column:1/5;align-self:start;position:sticky;top:calc(env(safe-area-inset-top,0px) + 120px)}
.m-side h2{margin:16px 0 0;font-weight:500;font-size:clamp(32px,3.6vw,52px);line-height:1;letter-spacing:-.04em;text-wrap:balance}
.m-side p{margin:24px 0 0;color:var(--text-2);font-size:17px;max-width:36ch}
.m-nav{margin-top:clamp(40px,6vw,72px);display:grid;border-top:1px solid var(--border)}
.m-nav button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:baseline;gap:8px;padding:12px 0;border-bottom:1px solid var(--border);color:var(--muted);position:relative;transition:color .25s var(--ease)}
.m-nav button::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-soft)}
.m-nav button .n{font-family:var(--f-meta);font-size:15px;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.m-nav button .t{font-size:18px;font-weight:500;letter-spacing:-.02em}
.m-nav button:hover{color:var(--text-2)}
.m-nav button.now{color:var(--text)}
.m-nav button.now::before{transform:scaleX(1)}
.m-nav button:focus-visible{outline:2px solid var(--state);outline-offset:2px}
.m-stages{grid-column:6/13;border-top:1px solid var(--border)}
.stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--gutter);padding-block:clamp(28px,4vw,48px);border-bottom:1px solid var(--border);position:relative;color:var(--muted);transition:color .35s var(--ease)}
.stage::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-soft)}
.stage.is-on{color:var(--text)}
.stage.is-on::before{transform:scaleX(1)}
.stage .idx{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px}
.stage h3{grid-column:1/-1;margin:12px 0 clamp(20px,3vw,32px);font-weight:500;font-size:clamp(48px,7vw,104px);line-height:.9;letter-spacing:-.05em}
.stage .desc{margin:0;font-size:17px;line-height:1.5;color:inherit;max-width:40ch}
.stage.is-on .desc{color:var(--text-2)}
.spec{margin:0;border-top:1px solid var(--border);align-self:start}
.spec div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px;padding-block:10px;border-bottom:1px solid var(--border)}
.spec div:last-child{border-bottom:0}
.spec dt{font-family:var(--f-meta);font-weight:400;font-size:14px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.spec dd{margin:0;font-size:15px;color:inherit}
@media (max-width:1000px){.stage{grid-template-columns:1fr;row-gap:24px}}
@media (max-width:860px){
  .m-side{grid-column:1/-1;position:static}
  .m-nav{display:none}
  .m-stages{grid-column:1/-1;margin-top:48px}
  .stage{color:var(--text)}
  .stage .desc{color:var(--text-2)}
}

/* Artigos */
.articles{padding-block:clamp(96px,12vw,176px) clamp(64px,8vw,112px)}
.list{border-top:1px solid var(--border)}
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:baseline;padding-block:22px;border-bottom:1px solid var(--border);position:relative}
.row .d{grid-column:1/3}
.row h3{grid-column:3/10;margin:0;font-size:clamp(19px,2vw,26px);font-weight:500;letter-spacing:-.025em;line-height:1.15;transition:transform .5s var(--ease-soft),color .2s var(--ease)}
.row .t{grid-column:10/12}
.row .go{grid-column:12/13;justify-self:end;transition:transform .5s var(--ease-soft),color .2s var(--ease)}
.row:hover h3{transform:translateX(10px)}
.row:hover .go{color:var(--accent);transform:translateX(4px)}
@media (max-width:860px){
  .row{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
  .row .d{grid-column:1/2;grid-row:1}
  .row .t{display:none}
  .row h3{grid-column:1/2;grid-row:2}
  .row .go{grid-column:2/3;grid-row:2}
}


/* Frase de princípio: centralizada, muito respiro. As palavras acendem com a rolagem. */
.statement{padding-block:clamp(160px,24vw,340px);text-align:center}
.statement .meta{display:block;margin-bottom:32px}
.st{margin:0 auto;max-width:15ch;font-weight:500;font-size:clamp(40px,6.6vw,108px);line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.st .w{transition:color .3s var(--ease)}
.js-st .st .w{color:var(--ink-700)}
.js-st .st .w.lit{color:var(--text)}

/* Depoimentos */
.quotes{padding-block:clamp(96px,12vw,176px)}
.q-side{grid-column:1/5}
.q-side h2{margin:16px 0 0;font-weight:500;font-size:clamp(32px,3.6vw,52px);line-height:1;letter-spacing:-.04em}
.q-list{margin-top:clamp(32px,4vw,56px);border-top:1px solid var(--border);display:grid}
.q-list button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:2px;padding:14px 0;border-bottom:1px solid var(--border);color:var(--muted);position:relative;transition:color .25s var(--ease)}
.q-list button::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-soft)}
.q-list button strong{font-weight:500;font-size:17px;letter-spacing:-.01em}
.q-list button span{font-family:var(--f-meta);font-size:14px;letter-spacing:.03em;text-transform:uppercase}
.q-list button:hover{color:var(--text-2)}
.q-list button[aria-selected="true"]{color:var(--text)}
.q-list button[aria-selected="true"]::before{transform:scaleX(1)}
.q-list button:focus-visible{outline:2px solid var(--state);outline-offset:2px}
.q-stage{grid-column:6/13;display:grid;align-content:start}
.q-card{grid-area:1/1;margin:0;transition:opacity .45s var(--ease),transform .7s var(--ease-soft)}
.q-card[hidden]{display:block!important;opacity:0;transform:translateY(12px);pointer-events:none;visibility:hidden}
.q-card blockquote{margin:0;font-size:clamp(24px,2.7vw,40px);font-weight:500;line-height:1.18;letter-spacing:-.025em;text-wrap:pretty}
.q-card blockquote::before{content:"“";display:block;font-family:var(--f-display);font-size:clamp(96px,10vw,160px);line-height:.6;height:.42em;color:var(--ink-600)}
.q-card figcaption{margin-top:32px;display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--border)}
.q-card figcaption strong{font-weight:500;font-size:17px}
.q-ctrl{display:flex;justify-content:space-between;align-items:center;margin-top:40px}
.q-ctrl .btns{display:flex;gap:8px}
.q-ctrl button{all:unset;box-sizing:border-box;cursor:pointer;width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--border-strong);color:var(--text);transition:background .2s var(--ease),border-color .2s var(--ease)}
.q-ctrl button:hover{background:var(--surface);border-color:var(--text-2)}
.q-ctrl button:focus-visible{outline:2px solid var(--state);outline-offset:2px}
.q-count{font-variant-numeric:tabular-nums}
.q-note{grid-column:6/13;margin-top:24px}
@media (max-width:860px){
  .q-side,.q-stage,.q-note{grid-column:1/-1}
  .q-list{grid-auto-flow:column;grid-auto-columns:minmax(180px,1fr);overflow-x:auto;border-top:0;margin-bottom:40px}
  .q-list button{border-bottom:1px solid var(--border);border-top:0;padding-right:16px}
}

/* FAQ */
.faq{padding-block:clamp(96px,12vw,176px) clamp(80px,10vw,144px)}
.faq-side{grid-column:1/5;align-self:start;position:sticky;top:120px}
.faq-side h2{margin:16px 0 0;font-weight:500;font-size:clamp(32px,3.6vw,52px);line-height:1;letter-spacing:-.04em}
.faq-side p{margin:24px 0 20px;color:var(--text-2);font-size:17px;max-width:32ch}
.faq-list{grid-column:6/13;border-top:1px solid var(--border)}
.faq-list details{border-bottom:1px solid var(--border)}
.faq-list summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:24px;align-items:center;padding:24px 0;font-size:clamp(19px,1.8vw,24px);font-weight:500;letter-spacing:-.02em;transition:color .2s var(--ease)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--text-2)}
.faq-list summary:focus-visible{outline:2px solid var(--state);outline-offset:4px}
.faq-list .ic{position:relative;width:20px;height:20px;justify-self:end}
.faq-list .ic::before,.faq-list .ic::after{content:"";position:absolute;left:0;top:9px;width:20px;height:2px;background:currentColor;transition:transform .35s var(--ease-soft)}
.faq-list .ic::after{transform:rotate(90deg)}
.faq-list details[open] .ic::after{transform:rotate(0)}
.faq-list details[open] summary{color:var(--text)}
.faq-list .ans{padding:0 56px 28px 0;color:var(--text-2);font-size:17px;max-width:62ch}
.faq-list .ans p{margin:0}
.faq-list .ans a{color:var(--text);border-bottom:1px solid var(--border-strong)}
.faq-list .ans a:hover{color:var(--state);border-color:var(--state)}
@media (max-width:860px){.faq-side,.faq-list{grid-column:1/-1}.faq-side{position:static;margin-bottom:32px}.faq-list .ans{padding-right:0}}

/* Fechamento: título display ajustado à largura, botão de CTA em destaque */
.close{padding-block:clamp(64px,9vw,128px) clamp(64px,8vw,112px)}
.close .wrap{container-type:inline-size}
.close-h{margin:20px 0 0;font-family:var(--f-display);font-weight:400;text-transform:uppercase;line-height:.8;letter-spacing:-.04em;font-size:16cqw;white-space:nowrap;color:var(--text);display:block;width:max-content;max-width:none}
.close-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:end;margin-top:clamp(40px,5vw,64px)}
.close-row p{grid-column:1/6;margin:0;color:var(--text-2);font-size:18px;max-width:40ch}
.cta-xl{grid-column:7/13;display:flex;justify-content:space-between;align-items:center;gap:24px;background:var(--accent);color:var(--ink-950);padding:clamp(22px,2.6vw,34px) clamp(24px,2.8vw,40px);font-size:clamp(22px,2.4vw,34px);font-weight:500;letter-spacing:-.025em;transition:background .2s var(--ease)}
.cta-xl svg{width:clamp(28px,3vw,44px);height:auto;flex:none;transition:transform .5s var(--ease-soft)}
.cta-xl:hover{background:var(--accent-hover)}
.cta-xl:hover svg{transform:translateX(8px)}
.cta-xl:active{background:var(--signal-700)}
.close-alt{grid-column:7/13;margin-top:14px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (max-width:860px){.close-row p,.cta-xl,.close-alt{grid-column:1/-1}.cta-xl{margin-top:28px}}

/* Footer */
.ftr{padding-block:clamp(56px,7vw,96px) 32px;background:var(--ink-900);--border:#2E2E2C}
.ftr .grid{row-gap:32px}
.ftr .logo{grid-column:1/4;width:120px}
.ftr nav{grid-column:5/8;display:flex;flex-direction:column;gap:8px}
.ftr .soc{grid-column:8/11;display:flex;flex-direction:column;gap:8px}
.ftr nav a,.ftr .soc a{color:var(--text-2);transition:color .2s var(--ease);width:fit-content}
.ftr nav a:hover,.ftr .soc a:hover{color:var(--state)}
.ftr .loc{grid-column:11/13;justify-self:end;text-align:right}
.ftr .bottom{grid-column:1/-1;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;border-top:1px solid var(--border);padding-top:20px;margin-top:24px}
.ftr .bottom > :last-child{justify-self:end}
.totop{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;color:var(--muted);transition:color .2s var(--ease)}
.totop:hover{color:var(--text)}
.totop:focus-visible{outline:2px solid var(--state);outline-offset:2px}
.totop svg{transition:transform .4s var(--ease-soft)}
.totop:hover svg{transform:translateY(-3px)}
@media (max-width:600px){.ftr .bottom{grid-template-columns:1fr;justify-items:start}.ftr .bottom > :last-child{justify-self:start}}
.gridbtn{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0}
@media (max-width:860px){
  .ftr .logo,.ftr nav,.ftr .soc,.ftr .loc{grid-column:1/-1;justify-self:start;text-align:left}
  .ftr nav,.ftr .soc{flex-direction:row;flex-wrap:wrap;gap:8px 20px}
}

/* Grid overlay (tecla G ou botão no rodapé) */
.gridover{position:fixed;inset:0;pointer-events:none;z-index:60;display:none}
.gridover.on{display:block}
.gridover .wrap{height:100%}
.gridover .grid{height:100%}
.gridover .grid div{background:rgba(255,77,26,.06);border-inline:1px solid rgba(255,77,26,.18)}
@media (max-width:860px){.gridover .grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px}.gridover .grid div:nth-child(n+5){display:none}}

/* Cursor de case */
.cur{position:fixed;left:0;top:0;z-index:70;pointer-events:none;background:var(--accent);color:var(--ink-950);font-family:var(--f-meta);font-weight:500;font-size:15px;letter-spacing:.03em;text-transform:uppercase;padding:9px 12px;transform:translate(-50%,-50%) scale(.6);opacity:0;transition:opacity .2s var(--ease),transform .35s var(--ease-soft)}
.cur.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (hover:none){.cur{display:none}}

/* Movimento: o estado de repouso é visível. JS só adiciona deslocamentos sutis. */
.mv .rise{transform:translateY(24px);transition:transform 1.4s var(--ease-soft)}
.mv .rise.in{transform:none}
.mv .hero h1 .ln span{transform:translateY(105%);transition:transform 1.2s var(--ease-soft)}
.mv.loaded .hero h1 .ln span{transform:none}
.mv.loaded .hero h1 .ln:nth-child(2) span{transition-delay:.09s}
.mv.loaded .hero h1 .ln:nth-child(3) span{transition-delay:.18s}
.mv .cover .ph{transform:scale(1.12)}
.mv .in .cover .ph,.mv .cover.in .ph{transform:scale(1)}
.mv .work:hover .ph,.mv .lead a:hover .ph{transform:scale(1.035)}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .mv .rise,.mv .hero h1 .ln span,.mv .cover .ph{transform:none!important}
}

/* Acessibilidade (etapa 8): depoimento dentro do painel da aba; links do caminho ("Trabalho /", "Artigos /") com sublinhado discreto. */
.q-card > figure{margin:0}
.c-top a,.p-top a{text-decoration:underline;text-decoration-color:var(--border-strong);text-decoration-thickness:1px;text-underline-offset:3px}
.c-top a:hover,.p-top a:hover{text-decoration-color:currentColor}