:root { --bar-h: 64px; }

/* ================= Preloader (uma volta) ================= */
.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  pointer-events: none;
}
.preloader__bg {
  position: absolute;
  inset: 0;
  background: var(--color-bg) var(--tx-dots) repeat;
}
.preloader__logo {
  position: fixed;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}
.preloader__logo svg { display: block; width: 100%; height: auto; overflow: visible; }
html:not(.is-loading) .preloader { display: none; }
html.is-loading { overflow: hidden; }

/* ================= Ilha (modelo C) ================= */
/* o header guarda no fluxo a altura da barra antiga; a ilha flutua por cima */
.ilha-hd { height: var(--bar-h); }
.ilha {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: var(--z-header);
  transform: translateX(-50%);
  /* com left: 50% a largura automática para em metade da tela e cortava a nav aberta */
  width: max-content;
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 8px 0 20px;
  background: var(--color-surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
.ilha__home { display: inline-flex; align-items: center; }
.ilha__logo { display: block; height: 15px; width: auto; }
.ilha__sep { width: 1px; height: 20px; background: var(--line); margin: 0 18px; }
.ilha__onde { display: flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--color-ink-1); min-width: 150px; }
.ilha__n { color: var(--color-accent-deep); }
.ilha__onde span:last-child { display: inline-block; transition: transform 400ms var(--ease-out-expo), opacity 300ms ease; }
.ilha__onde.is-troca span:last-child { transform: translateY(-40%); opacity: 0; }

/* a nav fica aberta até passar a primeira dobra; depois recolhe e abre no hover ou no botão */
.ilha__nav { display: grid; grid-template-columns: 0fr; transition: grid-template-columns 600ms var(--ease-out-expo); }
.ilha__nav > div { overflow: hidden; }
.ilha__nav ul { display: flex; gap: 24px; padding: 0 12px 0 18px; border-left: 1px solid var(--line); margin-left: 18px; white-space: nowrap; }
.ilha__nav a {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: var(--control-height);
  color: var(--color-ink-3);
  transition: opacity 200ms ease, color var(--motion-fast) var(--motion-ease);
}
@media (hover: hover) {
  .ilha__nav ul:hover a:not(:hover) { opacity: .4; }
  .ilha__nav a:hover { color: var(--color-ink-1); }
}
/* seção ativa: o asterisco acende ao lado do rótulo */
.ilha__nav a::after { content: ""; width: .5em; height: .5em; background: var(--color-accent); transform: scale(0); transition: transform 300ms var(--ease-out-expo); }
.ilha__nav a.is-on::after, .ilha__nav a[aria-current="page"]::after { transform: scale(1); }

.ilha__menu { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; margin-left: 8px; border: 0; border-radius: 4px; background: var(--color-surface-3); color: var(--color-ink-1); cursor: pointer; font: inherit; }
.ilha__menu i { position: relative; width: 12px; height: 8px; }
.ilha__menu i::before, .ilha__menu i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform 300ms var(--ease-out-expo); }
.ilha__menu i::before { top: 0; }
.ilha__menu i::after { bottom: 0; }

/* o foco do teclado também abre: recolhida, a nav escondia o link focado */
.ilha:not(.is-past) .ilha__nav, .ilha.is-open .ilha__nav, .ilha__nav:has(:focus-visible) { grid-template-columns: 1fr; }
/* só com hover de verdade: no toque o :hover fica preso e o botão não fechava */
@media (hover: hover) { .ilha:hover .ilha__nav { grid-template-columns: 1fr; } }
.ilha:not(.is-past) .ilha__menu { display: none; }
/* home: aberta, a ilha (889px, centrada) cobriria o logo da arte do hero, que termina em 24,8% da tela.
   No hero a arte já tem o logo, então a ilha mostra só a nav (~613px), centrada no vão entre o logo (24,8%) e os rótulos
   do canto (80,5%), e desliza pro centro quando o hero sai; de 1260px pra cima sobram ~44px de cada lado.
   Abaixo disso ela nasce recolhida, e o hover ou o botão abrem */
@media (min-width: 1260px) and (max-width: 1839px) {
  .ilha-hd:has(+ main .hero) .ilha { transition: left 600ms var(--ease-out-expo); }
  .ilha-hd:has(+ main .hero) .ilha:not(.is-past) { left: 52.65%; }
  .ilha-hd:has(+ main .hero) .ilha:not(.is-past) :is(.ilha__home, .ilha__sep, .ilha__onde) { display: none; }
  .ilha-hd:has(+ main .hero) .ilha:not(.is-past) .ilha__nav ul { padding-left: 0; border-left: 0; margin-left: 0; }
}
@media (min-width: 992px) and (max-width: 1259px) {
  .ilha-hd:has(+ main .hero) .ilha:not(.is-past):not(.is-open) .ilha__nav:not(:has(:focus-visible)) { grid-template-columns: 0fr; }
  @media (hover: hover) { .ilha-hd:has(+ main .hero) .ilha:not(.is-past):not(.is-open):hover .ilha__nav:not(:has(:focus-visible)) { grid-template-columns: 1fr; } }
  .ilha-hd:has(+ main .hero) .ilha:not(.is-past) .ilha__menu { display: inline-flex; }
}
.ilha.is-open .ilha__menu i::before { transform: translateY(3.25px) rotate(45deg); }
.ilha.is-open .ilha__menu i::after { transform: translateY(-3.25px) rotate(-45deg); }

/* celular: só o hambúrguer no canto, e o menu numerado abre numa caixa embaixo dele */
@media (max-width: 991px) {
  .ilha { left: auto; right: var(--margin); transform: none; width: 52px; padding: 0; justify-content: center; }
  .ilha__home, .ilha__sep, .ilha__onde { display: none; }
  .ilha__menu, .ilha:not(.is-past) .ilha__menu { display: inline-flex; justify-content: center; width: 52px; height: 52px; margin: 0; padding: 0; background: none; }
  .ilha__menu i { width: 16px; height: 10px; }
  .ilha.is-open .ilha__menu i::before { transform: translateY(4.25px) rotate(45deg); }
  .ilha.is-open .ilha__menu i::after { transform: translateY(-4.25px) rotate(-45deg); }
  .ilha__nav, .ilha:not(.is-past) .ilha__nav, .ilha:hover .ilha__nav {
    display: block; position: absolute; top: calc(100% + 8px); right: 0; width: 232px;
    background: var(--color-surface-2); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
    opacity: 0; visibility: hidden; transform: translateY(-6px); transform-origin: top right;
    transition: opacity 240ms ease, transform 400ms var(--ease-out-expo), visibility 0s linear 400ms;
  }
  .ilha.is-open .ilha__nav { opacity: 1; visibility: visible; transform: none; transition: opacity 240ms ease, transform 400ms var(--ease-out-expo); }
  .ilha__nav > div { overflow: visible; }
  .ilha__nav ul { display: block; border: 0; margin: 0; padding: 4px 0; }
  .ilha__nav li + li { border-top: 1px solid var(--line-fio); }
  .ilha__nav a { display: flex; min-height: 52px; padding: 0 20px; }
  .ilha__nav a::before { content: attr(data-n); color: var(--color-accent-deep); opacity: .5; }
  .ilha__nav a::after { margin-left: auto; }
}

/* ================= Hero canônico ================= */
.hero {
  position: relative;
  /* a peça é 2400×1150; a dobra pode cortar até 60 da margem de 75 em cima e embaixo (1030 de 2400) */
  height: clamp(42.9167vw, 100svh, 47.9167vw);
  /* a arte sangra até o topo da tela, por baixo da ilha: a altura do cabeçalho no fluxo abria uma faixa do fundo em cima dela */
  margin-top: calc(-1 * var(--bar-h));
  min-height: 560px;
  overflow: hidden;
  background: var(--color-bg);
}
.hero__peca {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero text { font-family: var(--font-display); }
/* rótulo: Display 500, caixa alta, +.30em · frase: Display 75 Bold, caixa alta (medidas do slide) */
.hero .rotulo { fill: #e7e7e2; fill-opacity: .5; font-size: 14px; font-weight: 500; letter-spacing: .3em; }
/* teste de 02/11: a oferta sobe de corpo pra ser lida na web (no slide de 1080 o 14 basta) */
.hero__peca .rotulo--oferta { font-size: 21px; }
.hero__vertical .rotulo--oferta { font-size: 26px; }
.hero .sub { fill: #fff; font-size: 10.4px; font-weight: 500; letter-spacing: .3em; }
.hero .h1 { fill: #e2e2e2; font-size: 59.5px; font-weight: 700; }
.hero .q { mix-blend-mode: multiply; }
.hero__vertical { display: none; }

/* tela mais estreita que 6:5 corta o 16:9 no logo: entra a arte vertical do mesmo carrossel */
@media (max-aspect-ratio: 6/5) {
  .hero {
    height: auto;
    min-height: 0;
    aspect-ratio: 1080 / 1536;
    max-height: 100svh;
    width: 100%;
  }
  .hero__peca { display: none; }
  .hero__vertical {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

/* ================= Abertura ================= */
.abertura { margin-top: var(--sp-section); }
.abertura__p1, .abertura__p2 { font-size: calc(var(--fs-title) * .6375); }
.abertura__p1 { grid-column: 1 / 7; color: var(--color-ink-soft); }
.abertura__p2 {
  grid-column: 7 / 13;
  margin-top: calc(var(--fs-title) * var(--lh-title) * 3);
  color: var(--color-ink-soft);
}

.stats { margin-top: var(--sp-section); }

/* símbolos: a malha da marca, com o trabalho dentro */
.malha {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--m), minmax(0, 1fr));
  --m: 6;
  border-top: var(--grid-fio) solid var(--line);
  border-left: var(--grid-fio) solid var(--line);
}
.malha__cel {
  aspect-ratio: 1;
  border-right: var(--grid-fio) solid var(--line);
  border-bottom: var(--grid-fio) solid var(--line);
  container-type: inline-size;
  min-width: 0;
}
.malha__marca { display: grid; place-items: center; height: 100%; color: var(--color-ink-3); transition: opacity .9s var(--ease-out-expo), transform 1.2s var(--ease-out-expo); transition-delay: calc(var(--i) * 45ms); }
.malha__marca svg { display: block; width: var(--w, 46%); height: auto; fill: currentColor; }
/* a entrada usa o gatilho do fio (data-fio): .is-drawn quando a malha entra na tela */
.js .malha:not(.is-drawn) .malha__marca { opacity: 0; transform: translateY(8px); }
.malha__fato {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 7cqi;
  font-family: var(--font-display);
  font-size: clamp(.8rem, 8.32cqi, 1.4rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: .08em;
  word-spacing: var(--ws-frase);
  text-align: center;
  text-transform: uppercase;
  color: var(--color-accent-deep);
}
/* a célula do CTA: traço âmbar de 2px sobre o fio, uma por peça */
.malha__cta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 5cqi;
  height: calc(100% + var(--grid-fio));
  width: calc(100% + var(--grid-fio));
  padding: 7cqi;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-ink-1);
  box-shadow: inset 0 0 0 var(--grid-traco) var(--color-accent);
  transition: background-color var(--motion-fast) var(--motion-ease);
}
.malha__cta svg { flex: none; display: block; width: 1.5rem; height: 1.5rem; fill: var(--color-accent); }
@media (hover: hover) {
  .malha__cta:hover { background: var(--color-accent-tint); }
}
.malha__cta:active { background: var(--color-accent-tint); }
.malha__cruz {
  position: absolute;
  width: var(--grid-cruz);
  height: var(--grid-cruz);
  margin: calc(var(--grid-cruz) / -2 + var(--grid-fio) / -2) 0 0 calc(var(--grid-cruz) / -2 + var(--grid-fio) / -2);
  pointer-events: none;
  background:
    linear-gradient(var(--line-cruz), var(--line-cruz)) center / 100% var(--grid-fio) no-repeat,
    linear-gradient(var(--line-cruz), var(--line-cruz)) center / var(--grid-fio) 100% no-repeat;
}
@media (max-width: 1099px) { .malha { --m: 4; } }
/* desktop: a malha sangra até a borda da janela e ganha colunas em vez de inchar a célula;
   os símbolos --m8 e --m10 só entram quando cabem, e a ordem do HTML mantém fatos e CTA no ritmo */
.malha__cel--m8, .malha__cel--m10 { display: none; }
@media (min-width: 1100px) {
  .malha { margin-inline: calc(-1 * var(--sangria, var(--margin))); overflow-x: clip; }
  /* o CTA fica no meio da segunda linha, logo depois do Rafael Augusto; os símbolos seguintes andam uma casa */
  .malha__cel--cta { grid-row: 2; grid-column: 5; }
}
@media (min-width: 1280px) {
  .malha { --m: 8; }
  .malha__cel--m8 { display: block; }
}
@media (min-width: 1680px) {
  .malha { --m: 10; }
  .malha__cel--m10 { display: block; }
  .malha__cel--cta { grid-column: 6; }
}
/* telefone: oito símbolos em duas linhas de quatro; fatos e CTA em meia largura, em volta deles */
@media (max-width: 767px) {
  .malha__cel { order: 1; }
  .malha__cel--topo, .malha__cel--fim { grid-column: span 2; aspect-ratio: auto; min-height: 6rem; }
  .malha__cel--topo { order: 0; }
  .malha__cel--fim { order: 2; }
}

/* ================= O problema ================= */
.problema { margin-top: var(--sp-section); }
.problema__tese { font-size: clamp(2.1rem, 5.6vw, 7.35rem); }
.problema__alvo { color: var(--color-accent); }
.problema__tese .word { color: var(--color-ghost); }

/* ================= O que eu faço ================= */
.faco { margin-top: var(--sp-section); }
.faco__grid {
  grid-template-rows: auto 1fr; row-gap: var(--sp-7); min-height: 90svh;
  /* título e texto começam a 48px da borda direita da foto (--faco-img-end vem do faco.js), nunca depois da coluna 9 */
  --faco-start: min(calc(var(--faco-img-end, 0px) + var(--sp-7)), calc(8 * (var(--col) + var(--gutter))));
  --faco-box: calc(var(--faco-start) + 6 * var(--col) + 5 * var(--gutter));
}
/* a foto desliza até a margem da janela, além da página de 108rem, sem mudar de tamanho;
   e para um vão antes da coluna 9, onde o título trava: mais larga, ela entrava embaixo dele */
.faco__img { grid-column: 1 / 8; grid-row: 1 / 3; min-height: 100%; aspect-ratio: 4 / 5; left: calc(-1 * var(--page-left)); max-width: calc(var(--page-left) + 8 * (var(--col) + var(--gutter)) - var(--sp-7)); }
/* a foto é horizontal e o Léo está no terço esquerdo: o corte 4:5 segura ele e a luminária */
.faco__img img { object-position: 8% 50%; }
.faco__title,
.faco__texto { grid-column: 1 / 13; padding-left: var(--faco-start); max-width: var(--faco-box); }
/* a pergunta é longa: o título ganha 9 colunas (o texto fica nas 6), sem passar da borda da página */
.faco__title { grid-row: 1; max-width: min(100%, calc(var(--faco-start) + 9 * var(--col) + 8 * var(--gutter))); }
/* a tipografia da frase-tese, no corpo que cabe em 4 colunas ("conjunto" é a palavra mais larga) */
.problema__tese, .faco__title {
  font-weight: 300;
  line-height: .86;
  letter-spacing: -.045em;
  text-transform: lowercase;
  text-wrap: balance;
}
.faco__title { font-size: clamp(2.5rem, calc(var(--col) * 1.05), 8.5rem); }
.faco__title .word { color: var(--color-ghost); }
.faco__texto {
  grid-row: 2;
  align-self: end;
  display: grid;
  gap: var(--sp-4);
}
.faco__fecho { margin-top: var(--sp-4); color: var(--color-ink-1); }
.faco__alvo { color: var(--color-accent); }

/* ================= Serviços: a tabela ================= */
.servicos { margin-top: var(--sp-section); }
.servicos__head { align-items: end; row-gap: var(--sp-5); }
.servicos__word { grid-column: 1 / 9; }
.servicos__title { grid-column: 9 / 13; padding-bottom: .2em; }
.servicos__corpo { position: relative; margin-top: var(--sp-8); }

.servico__row {
  align-items: start;
  padding: var(--sp-5) 0 var(--sp-7);
  transition: opacity 200ms ease;
}
.servico__num {
  grid-column: 1 / 3;
  padding-top: .5em;
  color: var(--color-accent-deep);
  font-variant-numeric: tabular-nums;
}
.servico__name { grid-column: 3 / 9; text-wrap: balance; }
.servico__desc {
  position: relative;
  z-index: 2;
  grid-column: 10 / 13;
  max-width: 26rem;
  padding-top: .5rem;
}
@media (hover: hover) and (pointer: fine) {
  .servicos__table:has(.servico:hover) .servico:not(:hover) .servico__row { opacity: .3; }
}

/* Serviços no zigue-zague: nomes de duas palavras ("Posicionamento") não cabem em 9 colunas no corpo cheio do display */
.servicos .etapa__name { font-size: min(clamp(4.375rem, 11.5vw, 10.8rem), 10.5vw); } /* o display de antes de 27/10: o nome da etapa fica abaixo do h1 */
/* a máscara do lines-hero abre na largura da tinta, não da coluna (o alinhamento à direita segue o text-align) */
.servicos .etapa__name .line, .metodo .servico__name .line { display: inline-block; vertical-align: top; }
/* a máscara é o clip-path da caixa parada do SplitText, como no hero.js; o overflow clip inline dela cortava o pé da linha, então só o clip-path recorta */
[data-anim-scroll="lines-hero"] .line-mask { overflow: visible !important; }
/* a caixa abraça a tinta para a cortina abrir no ritmo da palavra, não da coluna */
.servicos .etapa__name .line-mask, .metodo .servico__name .line-mask { width: fit-content; }
.servicos .etapa--b .etapa__name .line-mask { margin-left: auto; }

.servicos__foot { margin-top: var(--sp-7); align-items: end; row-gap: var(--sp-5); }
.servicos__nota { grid-column: 3 / 9; }
.servicos__cta { grid-column: 10 / 13; justify-self: start; }

/* ================= Método: zigue-zague da página de serviços ================= */
.metodo { margin-top: calc(var(--sp-section) * 1.5); }
.metodo__head { row-gap: var(--sp-5); margin-bottom: var(--sp-8); align-items: end; }
.metodo__title { grid-column: 1 / 13; white-space: nowrap; }
.metodo__intro { grid-column: 9 / 13; }
/* o título (~1175px no teto da fonte) só cabe ao lado do texto quando sobra margem pra ele avançar à esquerda */
@media (min-width: 115rem) {
  .metodo__title { grid-column: 1 / 9; grid-row: 1; justify-self: end; }
  .metodo__intro { grid-row: 1; }
}
/* com sobra (página-left > ~160px), o título sai da borda da foto, que sangra a mesma medida, e ainda não alcança o texto */
@media (min-width: 130rem) {
  .metodo__title { justify-self: start; margin-left: calc(-1 * var(--page-left)); }
}

/* duas colunas: a lista ocupa as colunas 1 a 8, a imagem sangra até a margem direita da tela; a imagem vem antes no HTML pra abrir o bloco no celular, por isso a fileira fixa */
.metodo__img {
  grid-column: 9 / 13;
  grid-row: 1;
  margin: 0;
  margin-left: var(--sp-7);
  margin-right: calc(-1 * var(--page-left));
}
/* a moldura é máscara e tem sempre a altura da lista; 4:5 é só o piso, que dá o fôlego da lista em tela larga */
.metodo__img::before { content: ""; display: block; aspect-ratio: 4 / 5; }
/* as etapas repartem a altura do bloco: cada linha cresce igual e o fio de baixo fecha no pé da imagem */
.metodo__lista { grid-column: 1 / 9; grid-row: 1; display: flex; flex-direction: column; }
.metodo__lista .servicos__table { flex: 1; display: flex; flex-direction: column; }
.metodo__lista .servico { flex: 1; }
/* a lista tem 8 colunas da mesma largura das da página, então tudo continua na grade */
.metodo .servico__row { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.metodo .servico__num { grid-column: 1 / 2; padding-top: 0; color: var(--color-accent); font-family: var(--font-display); font-weight: 200; } /* o numeral extra fino da seção de serviços */
.metodo .servico--opcional .servico__num { padding-top: .75em; }
.metodo .servico__name { grid-column: 2 / 6; }
.metodo .servico__desc { grid-column: 6 / 9; }
/* semibold só existe na Display: a Text do kit salta de 500 pra 700 */
.metodo .etapa__lema { font-family: var(--font-display); font-size: calc(var(--fs-card) * .75); font-weight: 600; text-transform: uppercase; }

.etapa__row {
  align-items: start;
  row-gap: var(--sp-5);
  padding: var(--sp-6) 0 var(--sp-8);
}
.etapa__name { grid-column: 1 / 10; grid-row: 1; }
.etapa__num {
  grid-column: 11 / 13;
  grid-row: 1;
  justify-self: end;
  color: var(--color-accent);
  font-family: var(--font-display);
  font-weight: 200;
  font-variant-numeric: tabular-nums;
}
.etapa__txt { grid-column: 9 / 13; grid-row: 2; max-width: 30rem; }
.etapa__lema { margin-bottom: var(--sp-3); color: var(--color-ink-1); }

.etapa--b .etapa__num { grid-column: 1 / 3; justify-self: start; }
.etapa--b .etapa__name { grid-column: 4 / 13; text-align: right; }
.etapa--b .etapa__txt { grid-column: 1 / 5; }

.metodo__foot { margin-top: var(--sp-7); align-items: end; row-gap: var(--sp-5); }
.metodo__nota { grid-column: 1 / 7; }
.metodo__cta { grid-column: 10 / 13; justify-self: end; }

/* ================= Projetos: o carrossel ================= */
.projetos { margin-top: var(--sp-section); }
.projetos__head { align-items: end; row-gap: var(--sp-5); }
.projetos__title { grid-column: 1 / 7; }
.projetos__texto { grid-column: 9 / 13; display: grid; gap: var(--sp-4); max-width: 32rem; }
.projetos__ctrl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-4);
}
.projetos__count { color: var(--color-accent-deep); font-variant-numeric: tabular-nums; }
.projetos__of, [data-slider-total] { color: var(--color-dim); }
.projetos__arrows { display: flex; gap: var(--sp-2); }
.seta {
  display: inline-grid;
  place-items: center;
  width: var(--control-height);
  height: var(--control-height);
  border: 1px solid var(--line-control);
  border-radius: var(--radius-ctrl);
  color: var(--color-ink-2);
  transition: border-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease);
}
.seta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
@media (hover: hover) {
  .seta:hover { border-color: var(--color-ink-2); color: var(--color-ink-1); }
}
.seta:active { border-color: var(--color-accent-deep); }

.slider {
  --slider-left: calc(var(--page-left) + var(--margin));
  --card-w: calc((100vw - var(--slider-left)) / var(--cards-visible));
  width: 100vw;
}
.slider__track {
  display: flex;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  cursor: grab;
}
.slider__track:active { cursor: grabbing; }
.slide {
  position: relative;
  left: var(--slider-left);
  flex-shrink: 0;
  width: var(--card-w);
  padding-right: var(--gutter);
}
.card {
  display: block;
  width: 100%;
  text-align: left;
  cursor: inherit;
  -webkit-tap-highlight-color: transparent;
}
.card__media { display: block; aspect-ratio: var(--card-ratio); width: 100%; }
.card__media .reveal-img__inner { overflow: hidden; }
.card__media img {
  position: absolute;
  top: 0;
  left: -10%;
  width: 120%;
  max-width: none;
  height: 100%;
  will-change: transform;
  -webkit-user-drag: none;
  pointer-events: none;
}
.card__name { display: block; margin-top: var(--sp-4); color: var(--color-ink-1); }
.card__field { display: block; margin-top: 2px; }
.card:focus-visible { outline-offset: -2px; }
.card.is-flipping .card__media { visibility: hidden; }
.projetos__foot { margin-top: var(--sp-7); }

/* ================= Ideias ================= */
.ideias { margin-top: var(--sp-section); }
.ideias__grid { align-items: end; row-gap: var(--sp-6); }
.ideias__title { grid-column: 1 / 9; }
.ideias__texto { grid-column: 9 / 13; display: grid; gap: var(--sp-4); justify-items: start; max-width: 32rem; }
.ideias__texto .btn { margin-top: var(--sp-4); }

/* ================= Sobre: a ficha do overlay, dentro da página ================= */
.sobre {
  --ov-col: calc((50vw - var(--margin) - var(--gutter) / 2 - 5 * var(--gutter)) / 6);
  margin-top: var(--sp-section);
}
.sobre__inner { display: grid; grid-template-columns: 1fr 1fr; }
.sobre__content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-content: start;
  padding: var(--sp-3) calc(var(--gutter) / 2) var(--sp-8) var(--margin);
}
.sobre__title { grid-column: 1 / 6; }
.sobre__name { grid-column: 1 / -1; margin-top: var(--sp-8); white-space: nowrap; }
/* "possidônio" e o asterisco medem 4,25 corpos: o corpo cabe na coluna (meia tela menos margem, recuo e vãos), senão a máscara da linha corta o nome */
@media (min-width: 992px) {
  .sobre__name { font-size: min(var(--fs-display), calc((50vw - var(--margin) - 1.5 * var(--gutter) - var(--ov-col)) / 4.4)); }
}
.sobre__line { display: block; }
.sobre__line + .sobre__line { padding-left: calc(var(--ov-col) + var(--gutter)); }
.sobre__bio { grid-column: 2 / 7; margin-top: var(--sp-7); display: grid; gap: var(--sp-4); max-width: 34rem; }
.sobre__fatos { grid-column: 2 / 7; margin-top: var(--sp-7); display: grid; row-gap: var(--sp-2); }
.sobre__fatos li { font-size: var(--fs-lede); color: var(--color-ink-1); }
.fato { display: flex; align-items: baseline; gap: 14px; }
.fato > :first-child { flex-shrink: 0; color: var(--color-mut); }
.fato > :last-child { text-align: right; }
.fato__fio {
  flex: 1 1 auto;
  min-width: 1.5rem;
  height: var(--grid-fio);
  background: var(--line-cruz);
  align-self: baseline;
}
.sobre__media { position: relative; z-index: 1; padding-right: var(--sp-3); }
.sobre__frame {
  position: sticky;
  top: var(--sp-3);
  height: calc(100svh - 2 * var(--sp-3));
}

/* ================= Contato ================= */
.contato { margin-top: var(--sp-section); }
.contato__word { margin-bottom: var(--sp-7); }
.contato__grid { row-gap: var(--sp-6); align-items: start; }
.contato__title { grid-column: 1 / 7; }
.contato__texto { grid-column: 1 / 6; grid-row: 2; display: grid; gap: var(--sp-4); max-width: 34rem; }
.contato__cell {
  position: relative;
  grid-column: 8 / 13;
  grid-row: 1 / 3;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-6);
  min-height: 22rem;
  padding: var(--sp-7);
  border: var(--grid-traco) solid var(--color-accent-deep);
}
.contato__canais { display: flex; flex-direction: column; gap: var(--sp-3); }
.contato__canal { justify-content: flex-start; }
/* o ícone da rede ocupa o lugar do quadrado do botão fantasma */
.contato__canal::before {
  width: 20px;
  height: 20px;
  mask: var(--icone) center / contain no-repeat;
}
.contato__canal--instagram { --icone: url("../../images/icones/instagram.svg"); }
.contato__canal--whatsapp { --icone: url("../../images/icones/whatsapp.svg"); }
@media (hover: hover) {
  .contato__canal:hover::before { transform: none; }
}

/* foco: a cruz cheia que marca o vértice ativo */
.foco {
  position: absolute;
  width: 16px;
  height: 16px;
  color: var(--color-ink-1);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
}
.contato__cell .foco { top: -9px; left: -9px; }

/* ================= Rodapé vertical ================= */
.rodape { margin-top: var(--sp-section); padding-bottom: var(--sp-6); }
.rodape__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: var(--gutter);
  min-height: min(88svh, 52rem);
}
.rodape__card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sp-5);
  overflow: hidden;
  color: var(--color-ink-1);
}
/* o card inteiro abre com clip-path (data-reveal no <a>): o véu em multiply sem a foto embaixo aparecia branco; o clip-path cortaria o anel de foco por fora */
.rodape__card:focus-visible { outline-offset: -4px; }
/* tela larga: a grade de 108rem deixa sobra dos dois lados, então o rodapé sai dela e ganha mais 2 cards; a 2400px eles ainda têm 411px, mais que os 384px de uma tela de 1440 */
.rodape__card--largo { display: none; }
@media (min-width: 2400px) {
  .rodape { max-width: none; }
  .rodape__grid { grid-template-columns: repeat(4, 1fr) 1.3fr; }
  .rodape__card--largo { display: flex; }
}
.rodape__img { position: absolute; inset: 0; z-index: -2; }
.rodape__img img { transition: transform 1.2s var(--ease-out-expo); }
/* véu em multiply: escurece só as pontas, onde o texto mora */
.rodape__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, #6a6a70 0%, #fff 24%, #fff 50%, #26262b 100%);
  mix-blend-mode: multiply;
}
.rodape__tag { color: var(--color-accent-deep); }
.rodape__card-foot { display: grid; gap: var(--sp-4); justify-items: start; }
.rodape__card-txt { color: var(--color-ink-1); max-width: 16ch; }
.rodape__card-btn { --btn-ink: var(--color-ink-1); }
@media (hover: hover) {
  .rodape__card:hover .rodape__img img { transform: scale(1.04); }
  .rodape__card:hover .btn__label::before { transform: translateY(-110%); }
  .rodape__card:hover .btn__label::after { transform: translateY(0); }
  .rodape__card:hover .rodape__card-btn { border-color: var(--color-accent); }
  .rodape__card:hover .rodape__card-btn::before { transform: rotate(90deg); }
  .rodape__card:hover .rodape__card-btn::after { inset: -11px; }
}

.rodape__painel {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--sp-6);
  padding: var(--sp-6);
  background: var(--color-surface);
}
.rodape__logo { display: block; width: 100%; height: auto; }
.rodape__lema {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--control-height);
  padding-block: var(--sp-4);
  border-block: 1px solid var(--line);
  color: var(--color-ink-3);
}
@media (hover: hover) {
  .rodape__lema .rodape__seta { transition: transform .6s var(--ease-out-expo); }
  .rodape__lema:hover .rodape__seta { transform: translateY(-4px); }
}
.rodape__seta { flex-shrink: 0; width: 18px; height: 18px; fill: none; stroke: var(--color-ink-2); stroke-width: 1.5; stroke-linecap: square; }
.rodape__nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-content: start; }
.rodape__head { margin-bottom: var(--sp-3); color: var(--color-mut); }
.rodape__head--2 { margin-top: var(--sp-6); }
.rodape__nav ul { display: grid; gap: 6px; }
.rodape__nav a { color: var(--color-ink-3); transition: color var(--motion-fast) var(--motion-ease); }
@media (hover: hover) {
  .rodape__nav a:hover { color: var(--color-ink-1); }
}
.rodape__base { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); }
.rodape__base a { color: var(--color-ink-3); }
.rodape__base .foco { position: relative; flex-shrink: 0; }

.rodape__linha {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  margin-top: var(--sp-6);
  color: var(--color-dim);
}
.rodape__linha p:last-child { text-align: right; }

/* ================= Tablet ================= */
@media (max-width: 991px) {
  .abertura__p1 { grid-column: 1 / 11; }
  .abertura__p2 { grid-column: 3 / 13; margin-top: var(--sp-7); }


  .faco__grid { min-height: 0; }
  .faco__img { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; min-height: 0; left: 0; max-width: none; }
  .faco__title,
  .faco__texto { grid-column: 1 / -1; grid-row: auto; }
  .faco__title, .faco__texto { padding-left: 0; }
  .faco__texto { max-width: 36rem; }

  .servicos__word, .servicos__title { grid-column: 1 / -1; }
  .servico__num { grid-column: 1 / -1; padding-top: 0; }
  .servico__name { grid-column: 1 / 10; }
  .servico__desc { grid-column: 3 / 13; }
  .servicos__nota, .servicos__cta { grid-column: 1 / -1; }

  .metodo__title, .metodo__intro { grid-column: 1 / -1; }
  .metodo__title { white-space: normal; }
  .etapa__name, .etapa--b .etapa__name { grid-column: 1 / -1; grid-row: 2; text-align: left; }
  .servicos .etapa--b .etapa__name .line-mask { margin-left: 0; }
  .etapa__num, .etapa--b .etapa__num { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
  .etapa__txt, .etapa--b .etapa__txt { grid-column: 3 / 13; grid-row: 3; }

  .metodo__img, .metodo__lista { grid-column: 1 / -1; grid-row: auto; }
  .metodo__img { margin-left: 0; margin-right: 0; margin-bottom: var(--sp-6); aspect-ratio: 4 / 5; max-height: none; }
  .metodo .servico__row { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
  .metodo .servico__num { grid-column: 1 / -1; }
  .metodo .servico__name { grid-column: 1 / 10; }
  .metodo .servico__desc { grid-column: 3 / 13; }
  .metodo__nota, .metodo__cta { grid-column: 1 / -1; justify-self: start; }

  .projetos__title, .projetos__texto { grid-column: 1 / -1; }
  .ideias__title, .ideias__texto { grid-column: 1 / -1; }

  .sobre__inner { grid-template-columns: 1fr; }
  .sobre__media { order: -1; padding: 0 var(--margin); }
  .sobre__frame { position: relative; top: 0; height: auto; aspect-ratio: 4 / 5; max-height: calc(100svh - 2 * var(--sp-3)); }
  .sobre__content { grid-template-columns: repeat(12, minmax(0, 1fr)); padding: var(--sp-7) var(--margin) 0; }
  .sobre__title { grid-column: 1 / -1; }
  .sobre__name { white-space: normal; }
  .sobre__line + .sobre__line { padding-left: calc(var(--col) + var(--gutter)); }
  .sobre__bio, .sobre__fatos { grid-column: 1 / -1; }

  .contato__title, .contato__texto, .contato__cell { grid-column: 1 / -1; grid-row: auto; }
  .contato__cell { min-height: 20rem; }

  .rodape__grid { grid-template-columns: 1fr 1fr; }
  .rodape__card { aspect-ratio: 4 / 5; }
  /* a última linha fica acima do botão do WhatsApp (.zap, base.css) */
  .rodape { padding-bottom: calc(52px + 2 * var(--margin)); }
  .rodape__painel { grid-column: 1 / -1; }
}

/* ================= Celular ================= */
@media (max-width: 767px) {
  .abertura { margin-top: var(--sp-8); }
  .abertura__p1, .abertura__p2 { grid-column: 1 / -1; word-spacing: 0; }
  .abertura__p2 { margin-top: var(--sp-4); }

  .problema__tese { font-size: max(4.1rem, 10.9375vw); line-height: .94; }
  .faco__title { font-size: max(3.125rem, calc(var(--col) * 1.3125)); }

  .servico__row { padding-bottom: var(--sp-6); row-gap: var(--sp-3); }
  .servico__name, .servico__desc { grid-column: 1 / -1; }

  .etapa__txt, .etapa--b .etapa__txt { grid-column: 1 / -1; }
  .servicos .etapa__name { font-size: 12.5vw; }
  /* só a home: "identidade visual" manda no teto, acima de 15,4vw ela quebra em 320 */
  #servicos .etapa__name { font-size: 15vw; }
  /* só a home: o zigue-zague do desktop, o nome de um lado e o número e o texto do outro; /metodo usa as mesmas etapas e fica à esquerda */
  #servicos .etapa__num { justify-self: end; }
  #servicos .etapa--b .etapa__num { justify-self: start; }
  #servicos .etapa__txt { grid-column: 4 / -1; }
  #servicos .etapa--b .etapa__txt { grid-column: 1 / 10; }
  #servicos .etapa--b .etapa__name { text-align: right; }
  #servicos .etapa--b .etapa__name .line-mask { margin-left: auto; }
  .metodo .servico__name, .metodo .servico__desc { grid-column: 1 / -1; }
  /* o nome da etapa na mesma voz do nome de serviço */
  .metodo .servico__name { font-size: 12.5vw; font-weight: var(--fw-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); word-spacing: var(--ws-display); }

  .projetos__ctrl { margin-top: var(--sp-6); }
  .projetos__foot { text-align: center; }

  .sobre__title { text-align: right; }

  .fato { flex-wrap: wrap; }
  .fato__fio { display: none; }
  .fato > :last-child { text-align: left; }

  .contato__cell { padding: var(--sp-5); }

  .rodape__grid { grid-template-columns: 1fr; }
  .rodape__linha { grid-template-columns: 1fr 1fr; row-gap: var(--sp-2); }
  .rodape__linha p:nth-child(2) { text-align: right; }
  .rodape__linha p:last-child { grid-column: 1 / -1; text-align: left; }
}