/* Léo · portfólio. Tokens: design-system.md */
@font-face{font-family:"GGX88";src:local("GGX88 Book"),local("GGX88-Book");font-weight:400;font-display:swap}
/* Inter Tight (licença OFL) servida pela própria pasta do site: é a fonte que o visitante vê enquanto a GGX88 não tem licença web (2026-11-09) */
@font-face{font-family:"Inter Tight";src:url("fonts/inter-tight-400-latin.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#0B0E15;--ink-2:#121723;--navy:#102645;--blue:#2B72CF;--blue-hover:#3A80DB;--blue-text:#4A8BE0;--blue-soft:#9CC2F2;--white:#fff;
  --muted:rgba(255,255,255,.64);--line:rgba(255,255,255,.10);--tag-bg:#0D1528;--tag-line:rgba(43,114,207,.32);--dot:rgba(255,255,255,.13);
  --sans:"GGX88","Inter Tight",system-ui,sans-serif;
  --fs-display:clamp(2.75rem,4.06vw,4.6rem);--fs-h2:clamp(2rem,3.6vw,3.25rem);--fs-h3:1.5rem;
  --fs-body:1.0625rem;--fs-lead:calc(18rem / 17);--fs-small:.875rem;--fs-wordmark:clamp(3rem,12.4vw,10.75rem);
  --s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-5:1.5rem;--s-6:2rem;--s-7:3rem;--s-8:4.5rem;--s-9:7rem;
  --gutter:1.5rem;--radius:1.25rem;--radius-in:1rem;--radius-lg:1.5rem;--top-h:6.275rem;
  --page:86.4rem; /* grid da página (2026-11-09): coluna de ~1470px com 2rem de margem, conteúdo de ~1400px */
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0}
html{background:var(--ink);color:var(--white);font:400 var(--fs-body)/1.55 var(--sans);letter-spacing:-.005em;-webkit-font-smoothing:antialiased;scroll-behavior:smooth;scrollbar-color:var(--navy) var(--ink)}
body{background:var(--ink);overflow-x:clip}
::selection{background:var(--blue);color:var(--white)}
img{display:block;max-width:100%;-webkit-user-drag:none;user-select:none}
a{color:inherit;text-underline-offset:.2em}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--blue-text);outline-offset:3px;border-radius:.25rem}
section[tabindex="-1"]:focus-visible,body:focus-visible{outline:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-999px;top:var(--s-4)}
.skip:focus{left:var(--s-4);background:var(--blue);padding:var(--s-2) var(--s-4);border-radius:999px;z-index:10}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Lenis (rolagem suave no desktop): o CSS oficial dele, 1.1.18 */
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-stopped{overflow:clip}.lenis.lenis-smooth iframe{pointer-events:none}

.wrap{max-width:var(--page);margin:0 auto;padding:0 2rem}
.cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter)}

h1,h2,h3{font-weight:400;text-wrap:balance}
h1{font-size:var(--fs-display);line-height:1;letter-spacing:-.04em}
h2{font-size:var(--fs-h2);line-height:1.05;letter-spacing:-.035em;max-width:20ch}
h3{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.02em}
em{font-style:normal;color:var(--blue)}
.lead{color:var(--muted);margin-top:var(--s-4);max-width:62ch}
section{padding:var(--s-8) 0;scroll-margin-top:var(--top-h)}
.head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-4) var(--gutter);align-items:end}
.head h2{grid-column:1/8}
.head .lead{grid-column:9/13;margin:0;max-width:34ch}
/* brilho leve que segue o mouse (referência Nexus): main.js passa --gx/--gy */
[data-glow]{position:relative;isolation:isolate}
[data-glow]::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);background:radial-gradient(26rem circle at var(--gx,50%) var(--gy,50%),rgba(43,114,207,.16),transparent 70%)}
[data-glow]:hover::before{opacity:1}
@media (hover:none),(prefers-reduced-motion:reduce){[data-glow]::before{display:none}}

/* botão */
/* botões: dois padrões só. .btn (azul, o do menu) e .btn-ghost (escuro com borda). Mesma altura, mesma fonte, texto e seta à direita */
.btn{display:inline-flex;align-items:center;gap:var(--s-2);height:3rem;padding:0 var(--s-5);border:1px solid transparent;border-radius:999px;background:var(--blue);box-shadow:inset 0 1px 0 rgba(255,255,255,.22);color:var(--white);font:400 1rem var(--sans);white-space:nowrap;text-decoration:none;transition:background .2s,border-color .2s}
.btn:hover{background:var(--blue-hover)}
/* botão fixo do WhatsApp, canto direito de baixo, em todas as páginas */
.zap{position:fixed;right:var(--s-5);bottom:max(var(--s-5),env(safe-area-inset-bottom));z-index:6;display:block;width:3.75rem;height:3.75rem;border-radius:50%;filter:drop-shadow(0 .5rem 1rem rgba(0,0,0,.45));transition:transform .3s var(--ease)}
.zap:hover{transform:translateY(-2px)}
.zap:focus-visible{border-radius:50%}
.zap img{display:block;width:100%;height:100%}
@media (prefers-reduced-motion:reduce){.zap:hover{transform:none}}
.btn:focus-visible{border-radius:999px}
.btn svg{width:1.125rem;height:1.125rem;flex:none}
/* etiqueta (referência do Léo, 2026-11-05): pílula azul-marinho escura, brilho azul leve na borda de dentro, borda azul discreta */
/* etiqueta: um padrão só no site inteiro (abertura, cards, Resultados, Serviços, Sobre) */
.hero-text .tag,.tags li,.sample,.svc-card .chip{display:inline-flex;align-items:center;height:2rem;padding:0 var(--s-4);border:1px solid var(--tag-line);border-radius:999px;background:var(--tag-bg);box-shadow:inset 0 0 .75rem rgba(43,114,207,.14);color:var(--white);font-size:var(--fs-small);white-space:nowrap}
.btn-ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}

/* abertura */
.hero{--ph:clamp(19.8rem,min(31.6vw,60svh),38rem);position:relative;isolation:isolate;overflow:hidden;margin-top:calc(-1 * var(--top-h));padding:var(--top-h) 0 var(--s-8);text-align:center}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.43;background-image:radial-gradient(circle,var(--dot) 1px,transparent 1.5px);background-size:1.68rem 1.68rem;-webkit-mask-image:radial-gradient(ellipse 70% 75% at 50% 45%,#000 30%,transparent 85%);mask-image:radial-gradient(ellipse 70% 75% at 50% 45%,#000 30%,transparent 85%)}
.top{position:sticky;top:var(--s-4);z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:calc(100% - 4rem);max-width:calc(var(--page) - 4rem);height:3.875rem;margin:2.4rem auto 0;padding:0 .4375rem 0 var(--s-5);border:1px solid var(--line);border-radius:999px;background:rgba(18,23,35,.86);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transition:max-width .6s var(--ease),background .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease)}
.top.mini{max-width:57rem;background:rgba(18,23,35,.95);border-color:rgba(255,255,255,.14);box-shadow:0 .875rem 2.25rem rgba(0,0,0,.4)}
.top .name{font-size:1.125rem;text-decoration:none;white-space:nowrap;justify-self:start}
.top nav{display:flex;gap:var(--s-1);font-size:var(--fs-small);color:var(--muted)}
.top nav a{padding:.375rem .75rem;border-radius:999px;text-decoration:none;transition:color .2s,background .3s}
.top nav a:hover,.top nav a[aria-current]{color:var(--white)}
.top nav a[aria-current]{background:rgba(255,255,255,.08)}
.top-end{justify-self:end;display:flex;align-items:center;gap:var(--s-2)}
.soc{display:grid;place-items:center;width:2.75rem;height:2.75rem;border:1px solid var(--line);border-radius:50%;color:var(--muted);transition:color .2s,background .3s,border-color .3s}
.soc:hover{color:var(--white);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.soc:focus-visible{border-radius:50%}
.soc svg{width:1.25rem;height:1.25rem}
/* tablet e notebook pequeno (2026-11-09): sem os links do menu, para nada passar da borda */
@media (max-width:69.99rem){.top{grid-template-columns:1fr auto}.top nav{display:none}}
/* tudo na abertura é medido pela largura da foto (--ph), como no Figma do Léo */
.stage{position:relative}
/* camada escura por cima da foto e da faixa, na largura toda (como no Figma): a foto fica opaca e some no fundo */
.stage::after{content:"";position:absolute;z-index:1;left:0;right:0;top:calc(var(--ph) * .059);height:calc(var(--ph) * 1.18);background:linear-gradient(rgba(11,14,21,0) 33.2%,rgba(11,14,21,.5) 55.1%,var(--ink) 77%);pointer-events:none}
.portrait{position:relative;z-index:1;width:var(--ph);margin:0 auto}
.portrait::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:calc(var(--ph) * .112);height:calc(var(--ph) * 1.073);background:radial-gradient(closest-side,rgba(43,114,207,.32),transparent);pointer-events:none}
.portrait img{display:block;width:100%;height:auto;clip-path:inset(0 0 7.5% 0)}
.hero-text{position:relative;z-index:2;margin-top:calc(var(--ph) * -.503)}
.hero-text .tag{margin-bottom:var(--s-5)}
.hero-text h1 em{display:block}
.hero-text p{max-width:42rem;font-size:var(--fs-lead);color:var(--muted);margin:var(--s-5) auto var(--s-6)}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-3)}
/* teste 2026-11-07: título e apoio à esquerda, botão à direita (só a partir do tablet) */
@media (min-width:48.0625rem){
  .hero-text{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);text-align:left}
  .hero-text>*{grid-column:1/-1}
  .hero-text .tag{justify-self:start}
  .hero-text p{grid-column:1/8;margin:var(--s-5) 0 0}
  .hero-cta{grid-column:8/13;grid-row:3;align-self:end;justify-content:flex-end}
}
/* luz bem leve nos pontos onde o mouse passa */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,rgba(255,255,255,.34) 1px,transparent 1.5px);background-size:1.68rem 1.68rem;-webkit-mask-image:radial-gradient(12rem circle at var(--mx,50%) var(--my,50%),#000,transparent);mask-image:radial-gradient(12rem circle at var(--mx,50%) var(--my,50%),#000,transparent);opacity:0;transition:opacity .6s}
.hero.lit::after{opacity:1}
.photo{border-radius:var(--radius);border:1px dashed var(--line);background:var(--ink-2);display:grid;place-items:center;text-align:center;color:var(--muted);font-size:var(--fs-small);aspect-ratio:4/5}

/* faixa de projetos em curva (referência Tilted Grid Hero): as capas correm por dentro de um cilindro, o centro fica de frente e as pontas vêm na direção de quem vê e somem nas bordas. O JS monta as fatias; sem JS, as capas ficam paradas numa fileira reta. */
.reel{position:absolute;left:0;right:0;top:calc(var(--ph) * .25);--h:calc(var(--ph) * .372);height:var(--h)}
.reel-track{display:flex;gap:var(--gutter);width:max-content;translate:calc(50vw - 50%) 0}
.reel-track img{height:var(--h);width:auto;aspect-ratio:688/473;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line)}
.reel.is-curved .reel-track{display:none}
.reel-arc{position:absolute;left:0;right:0;top:-100%;bottom:-100%;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.reel-tile{position:absolute;transform-style:preserve-3d}
.reel-tile i{position:absolute;top:0;overflow:hidden;background:var(--ink-2)}
.reel-tile i:first-child{border-radius:var(--radius) 0 0 var(--radius)}
.reel-tile i:last-child{border-radius:0 var(--radius) var(--radius) 0}
.reel-tile img{position:absolute;top:0;max-width:none;object-fit:cover}
.reel:hover .reel-tile{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.reel-tile{animation-play-state:paused}}
.reveal>*{animation:in .6s var(--ease) both}
.reveal>*:nth-child(2){animation-delay:.08s}.reveal>*:nth-child(3){animation-delay:.16s}.reveal>*:nth-child(4){animation-delay:.24s}
@keyframes in{from{opacity:0;transform:translateY(1rem)}}
@media (prefers-reduced-motion:reduce){.reveal>*{animation:none}}

/* projetos */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);margin-top:var(--s-7)}
.card{position:relative;display:block;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;border:1px solid var(--line);text-decoration:none;background:var(--ink-2);transition:border-color .5s var(--ease)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover{border-color:rgba(74,139,224,.55)}
.card:hover img{transform:scale(1.04)}
.card .go{position:absolute;top:var(--s-4);right:var(--s-4);display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--blue);color:var(--white);opacity:0;transform:translate(-.375rem,.375rem);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.card .go svg{width:1.25rem;height:1.25rem}
.card:hover .go,.card:focus-visible .go{opacity:1;transform:none}
@media (hover:none){.card .go{opacity:1;transform:none}}
.card .bar{position:absolute;left:var(--s-3);right:var(--s-3);bottom:var(--s-3);padding:var(--s-4) var(--s-5);border-radius:.75rem;background:rgba(8,19,38,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line)}
.card h3 span{font-size:var(--fs-small);color:var(--muted);letter-spacing:0;margin-left:var(--s-2)}
.card p{font-size:var(--fs-small);color:var(--muted);margin:var(--s-2) 0 var(--s-3)}
.tags{display:flex;flex-wrap:wrap;gap:var(--s-2)}
@media (prefers-reduced-motion:reduce){.card img,.card .go{transition:none}}

/* padrão do site (2026-11-07): texto à esquerda, botão à direita na mesma linha */
.more{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-5) var(--gutter);align-items:end;margin-top:var(--s-7);padding-top:var(--s-6);border-top:1px solid var(--line)}
.more .btn{grid-column:8/13;justify-self:end}
.more p{grid-column:1/8;max-width:24ch;font-size:clamp(1.5rem,2.4vw,2.125rem);line-height:1.15;letter-spacing:-.025em}

/* resultados: um bloco antes e depois. O seletor troca o estado; anel, barras e números andam juntos (main.js) */
.cmp{display:grid;grid-template-columns:10rem minmax(0,1fr);gap:var(--s-5) var(--s-7);align-items:center;margin-top:var(--s-7);padding:var(--s-5) var(--s-6) var(--s-6);background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);transition:border-color .5s var(--ease);--t:1.1s}
.cmp:hover{border-color:rgba(255,255,255,.16)}
.cmp-head{grid-column:1/-1;display:flex;align-items:center;gap:var(--s-3)}
.cmp-head .ico{display:grid;place-items:center;flex:none;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--blue);color:var(--white)}
.cmp-head .ico svg{width:1.25rem;height:1.25rem}
.cmp-head h3{font-size:1.125rem;font-weight:400;letter-spacing:-.01em}
.cmp-switch{display:none;margin-left:auto;padding:.25rem;border:1px solid var(--line);border-radius:999px;background:var(--ink)}
.js .cmp-switch{display:flex}
.cmp-switch button{padding:.5rem 1rem;border:0;border-radius:999px;background:none;color:var(--muted);font:inherit;font-size:var(--fs-small);cursor:pointer;transition:color .3s,background .4s var(--ease)}
.cmp-switch button:hover{color:var(--white)}
.cmp-switch button:focus-visible{border-radius:999px}
.cmp-switch [aria-pressed="true"]{background:var(--blue);color:var(--white)}
.cmp-ring{position:relative}
.cmp-ring svg{display:block;width:100%}
.cmp-ring circle{fill:none;stroke:var(--line);stroke-width:8}
.cmp-ring .arc{stroke:var(--blue-text);stroke-linecap:round;stroke-dasharray:301.6;stroke-dashoffset:calc(301.6 * (1 - var(--v,.9)));transition:stroke-dashoffset var(--t) var(--ease),stroke .6s}
.cmp-ring p{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.15}
.cmp-ring b{font-weight:400;font-size:2.25rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cmp-ring span{font-size:.75rem;color:var(--muted);max-width:7em}
.cmp-rows{display:grid;gap:var(--s-4)}
.cmp-rows li{display:grid;grid-template-columns:9rem minmax(0,1fr) 5.5rem;align-items:center;gap:var(--s-4);font-size:.9375rem;color:var(--muted)}
.cmp-rows i{position:relative;height:.875rem;overflow:hidden;border-radius:.25rem;background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 2px,transparent 2px 4px)}
.cmp-rows i::after{content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--b));background:repeating-linear-gradient(90deg,var(--blue-text) 0 2px,transparent 2px 4px);transition:transform var(--t) var(--ease),opacity .6s}
.cmp-rows b{text-align:right;font-weight:400;font-size:1.25rem;color:var(--white);font-variant-numeric:tabular-nums;white-space:nowrap}
.cmp.is-a .arc{stroke:rgba(255,255,255,.4)}
.cmp.is-a .cmp-rows i::after{transform:scaleX(var(--a));background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 2px,transparent 2px 4px)}
.cmp.is-a .cmp-rows b{color:rgba(255,255,255,.72)}
@media (prefers-reduced-motion:reduce){.cmp *,.cmp *::after{transition:none!important}}

/* serviços: três cards altos com foto em preto e branco (referência "Mentors") */
.svc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);margin:var(--s-7) 0 0;padding:0;list-style:none}
.svc-card{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto auto;column-gap:var(--s-4);aspect-ratio:3/4;padding:var(--s-4) var(--s-4) var(--s-5) var(--s-5);overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--ink-2);transition:border-color .5s var(--ease)}
.svc-card img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform .8s var(--ease)}
/* véu escuro só embaixo, para o texto ler em cima da foto */
.svc-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(4,10,20,.97),rgba(4,10,20,.88) 26%,rgba(4,10,20,0) 56%)}
.svc-top{grid-column:1/-1;align-self:start;display:flex;justify-content:space-between;gap:var(--s-2)}
.svc-card h3{grid-column:1}
.svc-line{grid-column:1;margin-top:var(--s-1);font-size:var(--fs-small);color:rgba(255,255,255,.72);max-width:30ch}
.svc-go{grid-column:2;grid-row:2/4;align-self:end;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--blue);color:var(--white)}
.svc-go svg{width:1.25rem;height:1.25rem;transition:transform .5s var(--ease)}
.svc-go::after{content:"";position:absolute;inset:0}
.svc-card:hover{border-color:rgba(74,139,224,.55)}
.svc-card:hover img{transform:scale(1.04)}
.svc-card:hover .svc-go svg{transform:rotate(45deg)}
.svc-card:has(.svc-go:focus-visible){outline:2px solid var(--blue-text);outline-offset:3px}
.svc-notes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-3) var(--gutter);margin-top:var(--s-5);font-size:var(--fs-small);color:var(--muted)}
.svc-notes p{grid-column:span 6;max-width:48ch}
@media (prefers-reduced-motion:reduce){.svc-card img,.svc-go svg{transition:none}}
/* tablet (2026-11-09): um card por linha, deitado, para o texto não cobrir a capa */
@media (min-width:48.0625rem) and (max-width:69.99rem){.svc-cards{grid-template-columns:1fr}.svc-card{aspect-ratio:2/1}.svc-card .svc-line{max-width:40ch}}

/* processo: linha do tempo; a linha desce com a rolagem e cada etapa vira card quando ela chega (referência Sevora) */
.process{align-items:start}
.process-head{grid-column:1/6;position:sticky;top:calc(var(--top-h) + var(--s-6))}
.steps{grid-column:7/13;display:grid;gap:var(--s-3);margin:0;padding:0;list-style:none}
.step{display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:var(--s-5);padding:var(--s-6) var(--s-5);border:1px solid transparent;border-radius:var(--radius);transition:background .5s var(--ease),border-color .5s var(--ease)}
.step>div{opacity:.75;transition:opacity .5s var(--ease)} /* 2026-11-09: era .45; .75 deixa o texto apagado com contraste 4.5:1 (acessibilidade) */
.step.on{background:var(--ink-2);border-color:var(--line)}
.step.on>div{opacity:1}
.step.on:hover{border-color:rgba(255,255,255,.16)}
.step h3{padding-top:.375rem}
.step p{color:var(--muted);margin-top:var(--s-2);font-size:.9375rem;max-width:52ch}
.step .ico{position:relative;display:grid;place-items:center;width:2.75rem;height:2.75rem;border:1px solid var(--line);border-radius:50%;background:var(--ink);color:var(--muted);transition:background .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease)}
.step.on .ico{background:var(--navy);border-color:rgba(74,139,224,.4);color:var(--white);box-shadow:0 .5rem 1.25rem rgba(0,0,0,.35)}
.step:hover .ico{background:var(--blue);border-color:var(--blue);color:var(--white)}
.step .ico svg{width:1.25rem;height:1.25rem}
/* trecho da linha entre um ícone e o anterior; main.js passa a altura (--up) e quanto já encheu (--f) */
.step+.step .ico::before,.step+.step .ico::after{content:"";position:absolute;left:50%;bottom:100%;width:1px;height:var(--up,0);translate:-50% 0;background:var(--line);pointer-events:none}
.step+.step .ico::after{background:var(--blue-text);transform-origin:top;transform:scaleY(var(--f,0))}
@media (prefers-reduced-motion:reduce){.step,.step>div,.step .ico{transition:none}}

/* efeito lenticular no hover (pedido do Léo, 2026-11-06; referência Lenticular Carousel da React Bits): listras finas de lente e um arco-íris que segue o mouse, com a peça inclinando de leve */
[data-lens]{--lx:.5;--ly:.5}
[data-lens]::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:0;mix-blend-mode:screen;transition:opacity .5s var(--ease);background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,rgba(255,255,255,0) 1px 6px),linear-gradient(100deg,transparent 4%,hsl(0 60% 75% / .1) 24%,hsl(45 65% 72% / .11) 36%,hsl(120 45% 72% / .09) 48%,hsl(190 60% 72% / .11) 60%,hsl(225 60% 75% / .1) 72%,hsl(290 45% 78% / .08) 84%,transparent 96%) calc(var(--lx) * 100%) 0/60% 100% no-repeat}
@media (hover:hover){
  [data-lens]:hover{transform:perspective(60rem) rotateY(calc((var(--lx) - .5) * 8deg)) rotateX(calc((.5 - var(--ly)) * 6deg))}
  [data-lens]:hover::after{opacity:1}
}
.svc-card,.about-deck{transition:border-color .5s var(--ease),transform .4s var(--ease)}
.about-deck{isolation:isolate}.about-deck::after{z-index:9;border-radius:var(--radius)}
@media (prefers-reduced-motion:reduce){[data-lens]:hover{transform:none}}
/* sobre pessoal (2026-11-07, referência alissondsgn): no desktop a seção fica presa na tela enquanto rola;
   as palavras acendem uma a uma e as fotos entram por cima, como um baralho (main.js). Sem JS, no celular
   ou com "reduzir movimento", fica parada: texto inteiro aceso e fotos lado a lado (celular) ou empilhadas. */
.about-in{align-items:start;row-gap:0;width:100%}
.about-side{display:contents}
.about-deck{position:relative;grid-column:1/5;grid-row:1/3;align-self:stretch;margin:0} /* 2026-11-09: a foto desce até o fim das notas */
.about-deck img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;border:1px solid var(--line);border-radius:var(--radius);background:var(--ink-2);box-shadow:0 1.25rem 3rem rgba(0,0,0,.45);--in:1;transform:translate(calc((1 - var(--in)) * 35%),calc((1 - var(--in)) * -4%)) rotate(calc(var(--r) + (1 - var(--in)) * 12deg));opacity:min(1,calc(var(--in) * 1.6))}
.about-deck img:nth-child(1){--r:-2deg;z-index:4}.about-deck img:nth-child(2){--r:3deg;z-index:3}.about-deck img:nth-child(3){--r:-3.5deg;z-index:2}.about-deck img:nth-child(4){--r:1.5deg;z-index:1}
.about-id{grid-column:1/5;grid-row:3;margin-top:var(--s-5)}
.about-side h2{position:relative;z-index:10;font-size:1.625rem;letter-spacing:-.02em}
.about-at{position:relative;z-index:10;display:inline-block;margin-top:var(--s-1);font-size:var(--fs-small);color:var(--muted);text-decoration:none}
.about-at:hover{color:var(--white)}
.about-text{display:contents}
.about-story{grid-column:6/13;grid-row:1;display:grid;gap:var(--s-5)}
.about-story p{font-size:clamp(1.25rem,1.6vw,1.625rem);line-height:1.32;letter-spacing:-.02em}
.about-story .w{transition:opacity .25s linear}
.about-facts{grid-column:6/13;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);margin-top:var(--s-6);list-style:none}
.about-facts li{padding-top:var(--s-4);border-top:1px solid var(--line)}
.about-facts h3{font-size:var(--fs-small);font-weight:400;letter-spacing:0;color:var(--blue-text)}
.about-facts p{margin-top:var(--s-2);font-size:.9375rem;color:var(--muted)}
/* sem a seção presa (tablet, tela baixa, celular, "reduzir movimento" ou sem JS): fotos em fila para passar com o dedo */
@media (max-width:63.99rem),(max-height:45.99rem),(prefers-reduced-motion:reduce){
  .about-in{row-gap:var(--gutter)}
  .about-side,.about-text{display:block}
  .about-side,.about-text{grid-column:1/-1;grid-row:auto}
  .about:not(.is-pinned) .about-deck{display:flex;align-items:flex-start;gap:var(--s-3);width:auto;aspect-ratio:auto;padding:var(--s-2) 0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .about:not(.is-pinned) .about-deck img{position:static;flex:0 0 min(72%,18rem);min-width:0;height:auto;aspect-ratio:4/5;transform:none;opacity:1;scroll-snap-align:start;box-shadow:none}
  .about-id{margin-top:var(--s-4)}
  .about-text{margin-top:var(--s-6)}
}
/* presa na tela (só desktop, com JS e sem "reduzir movimento") */
.about.is-pinned{height:320svh;padding:0;scroll-margin-top:0}
.about.is-pinned .about-pin{position:sticky;top:0;display:flex;align-items:center;height:100svh;padding-top:var(--top-h)}
.about.is-pinned .about-deck img{z-index:auto}
.about.is-pinned .about-deck img:not(:first-child){--in:0}
/* presa no celular e no tablet em pé (2026-11-09): o mesmo efeito com o dedo. Foto em cima, texto embaixo;
   o bloco fica preso enquanto as palavras acendem e as fotos entram, e as notas aparecem depois, rolando normal. */
@media (max-width:63.99rem){
  .about.is-pinned{height:auto;padding:0}
  .about.is-pinned::after{content:"";display:block;height:200svh}
  .about.is-pinned .about-pin{display:block;height:auto;padding:calc(var(--top-h) + var(--s-4)) 0 var(--s-8)}
  .about.is-pinned .about-pin{padding-top:calc(var(--top-h) + var(--s-3))}
  .about.is-pinned .about-side{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;column-gap:var(--s-6)}
  .about.is-pinned .about-deck,.about.is-pinned .about-id{grid-column:auto;grid-row:auto}
  .about.is-pinned .about-deck{height:clamp(9rem,24svh,22rem);aspect-ratio:4/5;margin:0}
  .about.is-pinned .about-deck img{box-shadow:0 .75rem 2rem rgba(0,0,0,.45)}
  .about.is-pinned .about-id{margin:0}
  .about.is-pinned .about-side h2{font-size:1.25rem}
  .about.is-pinned .about-in{row-gap:0}
  .about.is-pinned .about-text{margin-top:var(--s-5)}
  .about.is-pinned .about-story{gap:var(--s-4)}
  .about.is-pinned .about-story p{font-size:clamp(1rem,4.3vw,1.5rem)}
}

/* dúvidas: acordeão, uma aberta por vez */
/* Dúvidas (2026-11-07): título, apoio e WhatsApp à esquerda, presos ao rolar como no Processo; perguntas à direita */
.faq{align-items:start}
.faq-head{grid-column:1/6;position:sticky;top:calc(var(--top-h) + var(--s-6))}
.faq h2{max-width:22ch}
.faq-head .lead{max-width:34ch}
.faq-head .btn{margin-top:var(--s-5)}
.qa{grid-column:7/13;display:grid;gap:var(--s-3);interpolate-size:allow-keywords}
.qa details{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);transition:border-color .3s}
.qa details:hover,.qa details[open]{border-color:rgba(255,255,255,.16)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-5);font-size:1.125rem;letter-spacing:-.01em;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary:focus-visible{border-radius:var(--radius);outline-offset:-2px}
.plus{position:relative;flex:none;width:2rem;height:2rem;border:1px solid var(--line);border-radius:50%;transition:transform .4s var(--ease),background .3s,border-color .3s}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:.75rem;height:1px;background:currentColor;translate:-50% -50%}
.plus::after{rotate:90deg}
.qa details[open] .plus{transform:rotate(45deg);background:var(--blue);border-color:var(--blue)}
.qa p{padding:0 var(--s-5) var(--s-5);color:var(--muted);max-width:62ch}
.qa details::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
.qa details[open]::details-content{block-size:auto}
@media (prefers-reduced-motion:reduce){.qa details::details-content,.plus{transition:none}}

/* rodapé: tudo numa caixa; o nome em pontos fica atrás dela, na largura da tela (referência Nexus) */
.foot{position:relative;overflow:hidden;padding:var(--s-8) 2rem 10vw}
.foot .wordmark{position:absolute;left:1rem;right:1rem;bottom:0;font-size:14.6vw;line-height:1;letter-spacing:-.04em;color:var(--navy);white-space:nowrap}
.wordmark canvas{position:absolute;inset:0;width:100%;height:100%}
.sparks{position:absolute;left:0;right:0;bottom:0;width:100%;height:min(100%,24vw);pointer-events:none}
.wordmark.dots span{visibility:hidden}
.foot-box{position:relative;z-index:1;max-width:calc(var(--page) - 4rem);margin:0 auto;padding:clamp(2rem,5vw,4rem);background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.foot-cta{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-6) var(--gutter);align-items:end}
.foot-cta>div:first-child{grid-column:1/8}
.foot-cta h2{max-width:20ch}
.foot-cta p{color:var(--muted);max-width:48ch;margin-top:var(--s-4)}
.foot-act{grid-column:8/13;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--s-3)}
.foot-act small{flex-basis:100%;text-align:right;color:var(--muted);font-size:var(--fs-small)}
.foot-cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-6) var(--gutter);margin-top:var(--s-7);padding-top:var(--s-6);border-top:1px solid var(--line);font-size:var(--fs-small);color:var(--muted)}
.foot-cols .say{grid-column:1/5;color:var(--white);font-size:var(--fs-body);max-width:28ch}
.foot-cols div:nth-of-type(1){grid-column:6/8}.foot-cols div:nth-of-type(2){grid-column:8/10}.foot-cols div:nth-of-type(3){grid-column:10/13}
.foot-cols h3{font-size:1.125rem;letter-spacing:-.01em;color:var(--white);margin-bottom:var(--s-4)}
.foot-cols ul{display:grid;gap:var(--s-2)}
.foot-cols a,.legal a{text-decoration:none;transition:color .2s}
.foot-cols a:hover,.legal a:hover{color:var(--white)}
.legal{display:flex;justify-content:space-between;gap:var(--s-4);margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line);font-size:var(--fs-small);color:var(--muted)}

/* páginas internas: portfólio e projeto (referência Nexus, página do Versell) */
.page{padding-top:var(--s-7)}
.page h1{font-size:var(--fs-h2);line-height:1.05;letter-spacing:-.035em}
.project h1{margin-top:var(--s-3);font-size:var(--fs-display);line-height:1;letter-spacing:-.04em}
.back{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-small);color:var(--muted);text-decoration:none;transition:color .2s}
.back:hover{color:var(--white)}
.back svg,.next svg{width:1rem;height:1rem;flex:none}
.meta-line{margin-top:var(--s-6);font-size:var(--fs-small);color:var(--blue-text)}
.project .lead{max-width:48ch;font-size:var(--fs-lead)}
.cover{width:100%;height:auto;aspect-ratio:21/10;object-fit:cover;margin-top:var(--s-7);border:1px solid var(--line);border-radius:var(--radius)}
.facts-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5) var(--gutter);margin:var(--s-6) 0 0;padding-bottom:var(--s-6);border-bottom:1px solid var(--line)}
.facts-row dt{font-size:var(--fs-small);color:var(--muted)}
.facts-row dd{margin:var(--s-2) 0 0}
.concept-note{color:var(--muted)}
.site-shot{margin:var(--s-7) 0 0;overflow:clip;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);scroll-margin-top:var(--top-h)}
.shot-bar{display:flex;align-items:center;gap:.375rem var(--s-5);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line)}
.shot-bar i{width:.5rem;height:.5rem;border-radius:50%;background:var(--line)}
.shot-dots{display:flex;gap:.375rem}
.site-shot img{width:100%;height:auto}
.shot-tabs{display:none}
.is-tabs .shot-bar{position:sticky;top:var(--top-h);z-index:2;padding-block:var(--s-3);background:var(--ink-2)}
.is-tabs .shot-tabs{display:flex;flex-wrap:wrap;gap:.25rem}
.shot-tabs button{flex:none;padding:.375rem .75rem;border:0;border-radius:999px;background:none;color:var(--muted);font:inherit;font-size:var(--fs-small);cursor:pointer;transition:color .2s,background .3s}
.shot-tabs button:hover,.shot-tabs [aria-selected="true"]{color:var(--white)}
.shot-tabs [aria-selected="true"]{background:rgba(255,255,255,.08)}
.next{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-4);margin:var(--s-7) 0 var(--s-8);padding:var(--s-6);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;transition:border-color .5s var(--ease)}
.next:hover{border-color:rgba(74,139,224,.55)}
.next span{font-size:var(--fs-small);color:var(--muted)}
.next b{font-weight:400;font-size:var(--fs-h3);letter-spacing:-.02em}
.next svg{align-self:center;margin-left:auto;width:1.5rem;height:1.5rem;color:var(--blue-text)}

@media (max-width:48rem){
  .zap{right:var(--s-4);bottom:max(var(--s-4),env(safe-area-inset-bottom));width:3.25rem;height:3.25rem}
  .wrap{padding:0 1rem}
  section{padding:var(--s-7) 0}
  .top{grid-template-columns:1fr auto;width:calc(100% - 2rem);padding-left:var(--s-4)}
  .top.mini{max-width:calc(var(--page) - 4rem)}
  .soc{display:none}
  .top .btn{height:2.75rem;padding:0 var(--s-4);font-size:var(--fs-small)}
  .top .btn svg{display:none}
  .is-tabs .shot-bar{padding-inline:var(--s-3)}
  .is-tabs .shot-dots,.tab-more{display:none}
  .head h2,.head .lead{grid-column:1/-1}
  .cards{grid-template-columns:1fr}
  .card{aspect-ratio:auto;height:22.5rem}
  .card h3 span{display:block;margin:var(--s-1) 0 0}
  .card .bar{padding:var(--s-3) var(--s-4)}
  .card p{margin:var(--s-1) 0 var(--s-3)}
  .card .tags{gap:var(--s-1)}
  .card .tags li{height:1.625rem;padding:0 var(--s-3);font-size:.75rem}
  .cmp{grid-template-columns:6rem minmax(0,1fr);padding:var(--s-4);gap:var(--s-4)}
  .cmp-head .ico{width:2.25rem;height:2.25rem}
  .cmp-head .ico svg{width:1.125rem;height:1.125rem}
  .cmp-head{flex-wrap:wrap}
  .cmp-head h3{flex:1;min-width:0;font-size:1rem}
  .cmp-switch{margin-left:0;width:100%;padding:.1875rem}
  .cmp-switch button{flex:1;padding:.375rem .5rem;white-space:nowrap}
  .cmp-ring{align-self:start}
  .cmp-rows{gap:var(--s-2)}
  .cmp-rows i{height:.5rem}
  .cmp-ring b{font-size:1.375rem}
  .cmp-ring span{font-size:.625rem;max-width:5.5em}
  .cmp-ring circle{stroke-width:9}
  .cmp-rows li{grid-template-columns:minmax(0,1fr) auto;gap:var(--s-2) var(--s-3);font-size:var(--fs-small)}
  .cmp-rows i{grid-column:1/-1;grid-row:2}
  .cmp-rows b{font-size:1rem}
  .svc-cards{grid-template-columns:1fr;gap:var(--s-3)}
  .svc-card{aspect-ratio:1/1}
  .svc-notes p{grid-column:1/-1}
  .process-head,.steps,.faq-head,.qa{grid-column:1/-1}
  .process-head,.faq-head{position:static;margin-bottom:var(--s-6)}
  .more p,.more .btn{grid-column:1/-1;justify-self:start}
  .step{gap:var(--s-4);padding:var(--s-5) var(--s-4)}
  .about:not(.is-pinned) .about-deck{margin:0 calc(var(--s-4) * -1);padding:var(--s-2) var(--s-4);scroll-padding-inline:var(--s-4)}
  .about:not(.is-pinned) .about-deck img{flex-basis:72%}
  .about-facts{grid-template-columns:1fr;gap:var(--s-4);margin-top:var(--s-6)}
  .more p{font-size:1.5rem}
  .page{padding-top:var(--s-6)}
  .cover{aspect-ratio:4/3}
  .facts-row{grid-template-columns:1fr 1fr}
  .next{padding:var(--s-5)}
  .qa summary{padding:var(--s-4);font-size:1rem}
  .qa p{padding:0 var(--s-4) var(--s-4)}
  .foot{padding:var(--s-7) .5rem 12vw}
  .foot-box{border-radius:var(--radius-lg);padding:var(--s-6) var(--s-5)}
  .foot-cta>div:first-child,.foot-act{grid-column:1/-1}
  .foot-act{justify-content:flex-start}
  .foot-act small{text-align:left}
  .foot-cols .say,.foot-cols div:nth-of-type(3){grid-column:1/-1}
  .foot-cols div:nth-of-type(1),.foot-cols div:nth-of-type(2){grid-column:span 6}
  .legal{flex-direction:column}
}

/* página 404 */
.nf{min-height:calc(100svh - var(--top-h));display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-bottom:var(--s-9)}
.nf-code{font-size:clamp(6rem,18vw,14rem);line-height:.85;letter-spacing:-.05em;color:var(--blue);margin-bottom:var(--s-5)}
.nf .lead{max-width:42ch}
.nf-act{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}