/* V1 Retrato — sobriedade da Berthier em tema claro.
   A base (cores, fontes, tipografia), a barra e a primeira tela ficam no <style> do index.html, para a primeira
   pintura não esperar nenhum arquivo; aqui fica o resto da página, carregado sem bloquear (ver o comentário no <head>). */

/* Faixa */
.ticker { overflow: hidden; background: var(--ink); color: var(--paper); padding: 22px 0; }
.ticker__run { display: flex; width: max-content; animation: run 48s linear infinite; }
.ticker__run span { font: 600 clamp(1.25rem, 2vw, 1.75rem)/1 var(--display); font-stretch: 75%; text-transform: uppercase; padding: 0 28px; }
.ticker__run span::after { content: "∞"; margin-left: 56px; color: var(--cyan); font-family: var(--text); }
.ticker:hover .ticker__run { animation-play-state: paused; }
@keyframes run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__run { animation: none; } }

/* Números */
.nums { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; padding: 96px var(--m) 0; }
.nums strong { display: block; font: 800 clamp(2.75rem, 5.4vw, 5.5rem)/0.9 var(--display); font-stretch: 66%; font-variant-numeric: tabular-nums; }
.nums span { display: block; margin-top: 10px; font-size: 15px; color: var(--muted-now); }
@media (max-width: 860px) { .nums { grid-template-columns: 1fr 1fr; row-gap: 40px; } .nums div:last-child { grid-column: 1 / -1; } }

/* Nichos que já atendemos: rótulo discreto e etiquetas de contorno fino, no tom da página, entrando escalonadas */
.nichos { padding: clamp(64px, 7vw, 104px) var(--m) 0; }
.nichos h2.nichos__label { font: 500 0.9375rem/1.4 var(--text); text-transform: none; letter-spacing: 0; color: var(--muted-now); }
.nichos__list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; max-width: 1180px; }
.nichos__list li { padding: 8px 16px; border: 1px solid color-mix(in srgb, currentColor 24%, transparent); border-radius: 999px; font-size: 0.9375rem; line-height: 1.35; }
@media (max-width: 560px) { .nichos__list { gap: 8px; } .nichos__list li { padding: 7px 12px; font-size: 0.84375rem; } }
/* tela bem estreita: a etiqueta mais longa ainda quebra; vira um retângulo de cantos arredondados, sem virar cápsula torta */
@media (max-width: 420px) { .nichos__list li { border-radius: 18px; } }

/* Quem somos */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: var(--gap) var(--m) 0; }
.story__title { font-size: clamp(3rem, 7vw, 7rem); position: sticky; top: 120px; align-self: start; }
.story__text { display: grid; gap: 28px; max-width: 54ch; padding-top: 8px; }
.sign { margin: 16px 0 0; padding: 32px; background: var(--surface); }
.sign p { font: 700 clamp(1.5rem, 2.4vw, 2.125rem)/1.05 var(--display); font-stretch: 75%; text-transform: uppercase; }
.sign footer { margin-top: 16px; font-size: 15px; color: var(--muted-now); }
@media (max-width: 860px) { .story { grid-template-columns: 1fr; } .story__title { position: static; font-size: 14vw; } }

/* Manifesto palavra a palavra, com a página escura (data-theme="ink"). As apagadas ficam em 0.3 para ainda dar para ler.
   As palavras acendem entre o topo do texto a 65% da tela e o pé dele a 60% (data-words-start/-end no HTML).
   As folgas da seção garantem a ordem em qualquer tela: a de cima (22vh) faz a página escurecer, quando o topo da seção
   passa do meio da tela (texto a 72%), antes da primeira palavra; a de baixo (50vh) faz todas estarem acesas com o título
   seguinte ainda fora da tela (precisa passar de 40vh, a distância entre os 60% e a borda de baixo), e a página só
   clareia quando esse título chega ao meio da tela. Mudou um número, refaça a conta. */
.manifesto { min-height: 100vh; display: grid; align-content: center; padding: max(var(--gap), 22vh) var(--m) max(var(--gap), 50vh); }
.manifesto__text { font: 700 clamp(1.7rem, 3.9vw, 3.825rem)/1.02 var(--display); font-stretch: 72%; text-transform: uppercase; max-width: 22ch; }
/* texto mais longo: no computador a coluna abre um pouco, para o bloco não passar da altura da tela */
@media (min-width: 861px) { .manifesto__text { max-width: 30ch; } }
.manifesto__text .w { opacity: 0.3; }
.manifesto__text .w.on { opacity: 1; }
/* parágrafos do manifesto (o <br> do HTML vira .par no motion.js) */
.manifesto__text .par { display: block; }
.manifesto__text .par + .par { margin-top: 0.6em; }

/* Não somos agência tradicional */
.vs { padding: 0 var(--m); }
.vs h2 { font-size: clamp(3rem, 6.4vw, 6.5rem); max-width: 16ch; }
/* o .destaque sobrevive à divisão em linhas do data-split (motion.js) */
.vs h2 .destaque { color: var(--ink); padding: 0 0.06em; margin: 0 -0.06em; background: linear-gradient(var(--cyan), var(--cyan)) 0 100% / 0% 100% no-repeat; }
/* o "Não" ganha um marca-texto ciano, que passa da esquerda para a direita quando o título termina de subir */
.vs h2.is-in .destaque, html:not(.js) .vs h2 .destaque { background-size: 100% 100%; }
@media (prefers-reduced-motion: no-preference) { .vs h2 .destaque { transition: background-size 900ms var(--ease-m) 700ms; } }
.vs__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; }
.vs__cols > div { padding: clamp(28px, 3.5vw, 48px); }
.vs__them { background: var(--surface); color: var(--ink); }
.vs__us { background: var(--ink); color: var(--paper); }
.vs h3 { font-size: clamp(1.75rem, 2.6vw, 2.5rem); }
.vs ul { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; }
.vs__them li { font: 600 clamp(1.25rem, 1.8vw, 1.625rem)/1.2 var(--display); font-stretch: 80%; }
.vs__us li { padding-left: 32px; position: relative; }
.vs__us li::before { content: "∞"; position: absolute; left: 0; color: var(--cyan); }
@media (max-width: 860px) { .vs__cols { grid-template-columns: 1fr; } .vs h2 { font-size: 12vw; } }

/* Como trabalhamos: fluxo normal (celular, tela baixa, toque, movimento reduzido) */
.jeito { padding: var(--gap) var(--m) 0; }
.jeito__stage { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); }
.ia { position: sticky; top: 110px; margin: 0; aspect-ratio: 4 / 5; background: #cfd3dc; display: flex; align-items: flex-end; padding: 24px; }
.ia span { font-size: 14px; color: #3c3f47; max-width: 34ch; }
.ia--foto { padding: 0; display: block; overflow: hidden; background: #d9d9de; }
.ia--foto img { width: 100%; height: 100%; object-fit: cover; object-position: 63% 35%; }
.jeito h2 { font-size: clamp(3rem, 6.4vw, 6.5rem); margin-bottom: 24px; }
.jeito__steps { display: grid; align-content: start; }
.jeito__list { display: grid; gap: 40px; padding: 24px 0 0; }
.jeito article { padding: 0; }
.jeito h3 { font-size: clamp(1.75rem, 2.8vw, 2.75rem); margin-bottom: 14px; }
.jeito article p { max-width: 46ch; }
/* a linha do método fecha a lista, pequena e apagada */
.jeito__loop { margin-top: 32px; font-size: 15px; color: var(--muted-now); }
@media (max-width: 860px) { .jeito__stage { grid-template-columns: 1fr; } .ia { position: static; aspect-ratio: 4 / 3; } .jeito h2 { font-size: 13vw; } }

/* Presa (computador, ver data-pin no HTML): o palco para logo abaixo da barra e a altura extra da seção
   vira a rolagem dos passos. --passo é a rolagem de cada um; --folga é a sobra do último, em fração
   de um passo (o motion.js lê); o 4 é o número de passos. --topo é o offset das âncoras do Lenis: o link do menu
   cai no começo do trecho preso; a barra tem 76px, por isso os 4px a mais no respiro de cima. */
.jeito.is-pinned { --passo: 22vh; --folga: 0.3; --topo: 72px; padding-top: 0; margin-top: var(--gap); height: calc(100vh - var(--topo) + (4 + var(--folga)) * var(--passo)); }
.is-pinned .jeito__stage {
  --pad: clamp(16px, 3.2vh, 40px);
  --foto-h: calc(100vh - var(--topo) - 4px - 2 * var(--pad));
  position: sticky; top: var(--topo); height: calc(100vh - var(--topo));
  padding: calc(4px + var(--pad)) 0 var(--pad);
  /* a foto ocupa a altura toda na proporção dela (1200×1607); em tela estreita corta dos lados, nunca o rosto */
  grid-template-columns: min(calc(var(--foto-h) * 1200 / 1607), 46%) minmax(0, 1fr);
}
.is-pinned .ia { position: static; height: 100%; aspect-ratio: auto; }
.is-pinned .ia--foto img { object-position: 64% 35%; }
.is-pinned .jeito__steps { display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.jeito.is-pinned h2 { font-size: clamp(2.5rem, min(6.4vw, 8.4vh), 6.5rem); margin-bottom: clamp(16px, 3vh, 32px); }
.jeito.is-pinned h3 { font-size: clamp(1.375rem, min(2.4vw, 3.6vh), 2.5rem); margin-bottom: clamp(6px, 1vh, 12px); }
.jeito.is-pinned article p { font-size: clamp(0.9375rem, 0.45rem + 1.05vh, 1.125rem); line-height: 1.5; }
.is-pinned .jeito__list { position: relative; gap: clamp(28px, 4vh, 40px); padding: 0 0 0 clamp(20px, 2vw, 32px); }
/* linha fina ao lado da lista: o trilho apagado e o preenchimento que acompanha a rolagem (--fill vem do motion.js) */
.is-pinned .jeito__list::before, .is-pinned .jeito__list::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: currentColor; }
.is-pinned .jeito__list::before { opacity: 0.14; }
.is-pinned .jeito__list::after { left: -0.5px; width: 2px; transform: scaleY(var(--fill, 0)); transform-origin: 50% 0; }
.is-pinned .jeito__loop { margin-top: clamp(16px, 3vh, 32px); font-size: clamp(0.875rem, 0.4rem + 0.9vh, 1rem); padding-left: clamp(20px, 2vw, 32px); transition: opacity 900ms var(--ease-m), transform 900ms var(--ease-m); }
/* presa, a linha do método só aparece com o último passo (vence a entrada do data-rise; depois dela, o data-rise a mostra) */
.jeito.is-pinned:not(.is-done) .jeito__loop { opacity: 0; transform: translateY(8px); }

/* Transparência: título e apoio em cima; o quadro do relatório (moldura de navegador simples) e os quatro itens lado a lado */
.pratica { padding: var(--gap) var(--m) 0; }
.pratica__head { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: end; }
.pratica h2 { font-size: clamp(3rem, 6.4vw, 6.5rem); max-width: 15ch; }
.pratica__lead { max-width: 38ch; color: var(--muted-now); }
.pratica__body { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; margin-top: clamp(40px, 5vw, 72px); }
.relatorio { margin: 0; background: #ffffff; border: 1px solid rgba(27, 26, 30, 0.12); border-radius: 12px; overflow: hidden; box-shadow: 0 24px 60px -32px rgba(27, 26, 30, 0.35); }
.relatorio__bar { display: flex; align-items: center; gap: 16px; height: 42px; padding: 0 16px; border-bottom: 1px solid rgba(27, 26, 30, 0.1); }
.relatorio__dots { display: flex; gap: 7px; }
.relatorio__dots i { width: 10px; height: 10px; border-radius: 50%; background: #d4d4db; }
.relatorio__url { flex: 1; max-width: 360px; margin: 0 auto; padding: 5px 14px; border-radius: 999px; background: var(--paper); font-size: 13px; line-height: 1.2; color: #5d5a62; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.relatorio__tela { position: static; display: flex; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }
/* Pilha de prints (assets/pilha.js): telas no mesmo lugar da grade, as de trás deslocadas e giradas sem padrão */
.pratica { overflow-x: clip; }
.pilha { min-width: 0; }
.pilha__palco { display: grid; padding-top: 7%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pilha__tela { grid-area: 1 / 1; align-self: end; position: relative; box-shadow: 0 1px 2px rgba(27, 26, 30, 0.05), 0 14px 30px -20px rgba(27, 26, 30, 0.3); transform-origin: 50% 50%; transition: transform 760ms var(--spring-ui); will-change: transform; }
.pilha__tela[data-pos="0"] { z-index: 4; transform: none; }
.pilha__tela[data-pos="1"] { z-index: 3; transform: translate(-2.6%, -5.2%) rotate(-1.7deg) scale(0.972); }
.pilha__tela[data-pos="2"] { z-index: 2; transform: translate(3.1%, -8.6%) rotate(2.3deg) scale(0.948); }
.pilha__tela[data-pos="3"] { z-index: 1; transform: translate(-0.8%, -12.2%) rotate(-0.8deg) scale(0.925); }
.pilha__tela .relatorio__tela { transition: opacity 600ms var(--ease-m); }
.pilha__tela:not([data-pos="0"]) .relatorio__tela { opacity: 0.94; }
.pilha__tela .relatorio__url { transition: color 500ms var(--ease-m); }
.pilha__tela:not([data-pos="0"]) .relatorio__url { color: transparent; }
.pilha { --saida: translate(-5%, 13%) rotate(-3.2deg) scale(0.975); }
html:not(.js) .pilha__tela:not(:first-child), html:not(.js) .pilha__ctl { display: none; }
html:not(.js) .pilha__palco { padding-top: 0; cursor: auto; }
.pilha__ctl { display: flex; align-items: center; gap: 8px; margin-top: clamp(18px, 2.2vw, 26px); }
.pilha__rot { flex: 1; min-width: 0; font-size: 0.9375rem; line-height: 1.3; color: var(--muted-now); }
.pilha__n { display: inline-block; min-width: 3.2ch; margin-right: 8px; font-variant-numeric: tabular-nums; color: var(--ink-now); font-weight: 500; }
.pilha__btn { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(27, 26, 30, 0.18); border-radius: 50%; background: transparent; color: var(--ink-now); cursor: pointer; transition: background-color 400ms var(--ease-m), border-color 400ms var(--ease-m), transform 500ms var(--spring-ui); }
.pilha__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pilha__btn:hover { background: rgba(27, 26, 30, 0.06); border-color: rgba(27, 26, 30, 0.3); }
.pilha__btn:active { transform: scale(0.94); }
.pilha__btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
@media (max-width: 560px) {
  .pilha__palco { padding-top: 5%; }
  .pilha__tela[data-pos="1"] { transform: translate(-1.6%, -3.6%) rotate(-1.1deg) scale(0.975); }
  .pilha__tela[data-pos="2"] { transform: translate(2%, -6%) rotate(1.5deg) scale(0.955); }
  .pilha__tela[data-pos="3"] { transform: translate(-0.5%, -8.6%) rotate(-0.6deg) scale(0.935); }
  .pilha { --saida: translate(-3%, 11%) rotate(-2.2deg) scale(0.98); }
}
@media (prefers-reduced-motion: reduce) { .pilha__tela, .pilha__tela .relatorio__tela, .pilha__tela .relatorio__url, .pilha__btn { transition: none; } }
.pratica__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 3.2vw, 40px); }
.pratica__list li { padding-top: 18px; border-top: 1px solid rgba(27, 26, 30, 0.16); }
.pratica__list h3 { font-size: clamp(1.5rem, 2.1vw, 2.125rem); }
.pratica__list p { margin-top: 10px; font-size: 1rem; line-height: 1.55; color: var(--muted-now); max-width: 44ch; }
@media (max-width: 960px) { .pratica__head, .pratica__body { grid-template-columns: 1fr; } .pratica__head { gap: 24px; } }
@media (max-width: 860px) { .pratica h2 { font-size: 13vw; } }
@media (max-width: 560px) { .relatorio { border-radius: 10px; } .relatorio__bar { height: 34px; gap: 10px; padding: 0 10px; } .relatorio__dots i { width: 8px; height: 8px; } .relatorio__url { font-size: 11px; padding: 4px 10px; } }

/* Serviços: as três frentes de tráfego são o principal (maiores, com um traço em cima);
   consultorias e palestras ficam num bloco menor, "Também fazemos". Cabe numa tela no computador, 1 coluna no celular. */
.servicos { padding: var(--gap) var(--m) var(--gap); }
.servicos h2 { font-size: clamp(3rem, 6.4vw, 6.5rem); }
.servicos__main, .servicos__extra { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; column-gap: clamp(28px, 3.6vw, 64px); }
.servicos__main { margin-top: clamp(32px, 4vw, 56px); row-gap: 40px; }
.servicos__main li { padding-top: 20px; border-top: 2px solid currentColor; }
.servicos__main h3 { font-size: clamp(1.625rem, 2.3vw, 2.5rem); }
.servicos__main p { margin-top: 14px; font-size: 1.0625rem; line-height: 1.55; max-width: 36ch; }
.servicos__more { margin-top: clamp(48px, 5vw, 72px); padding-top: 20px; border-top: 1px solid rgba(27, 26, 30, 0.16); }
.servicos h3.servicos__label { font: 500 0.9375rem/1.4 var(--text); text-transform: none; letter-spacing: 0; color: var(--muted-now); }
.servicos__extra { margin-top: 18px; row-gap: 24px; }
.servicos__extra h4 { margin: 0; font: 700 clamp(1.125rem, 1.35vw, 1.375rem)/1 var(--display); font-stretch: 72%; text-transform: uppercase; letter-spacing: -0.005em; }
.servicos__extra p { margin-top: 8px; font-size: 0.9375rem; line-height: 1.5; color: var(--muted-now); max-width: 38ch; }
@media (max-width: 860px) { .servicos h2 { font-size: 13vw; } }
@media (max-width: 760px) { .servicos__main, .servicos__extra { grid-template-columns: 1fr; } .servicos__main { row-gap: 32px; } }

/* Cases (a página fica azul): dois blocos, número e texto juntos.
   O painel tem cores próprias para ficar legível mesmo antes de a página terminar de ficar azul. */
.cases { padding: var(--gap) var(--m); }
.cases h2 { font-size: clamp(3rem, 6.4vw, 6.5rem); }
.cases__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(48px, 6vw, 88px); }
.case { background: #1a3554; color: #ffffff; padding: clamp(28px, 3.6vw, 56px); }
.case__fig { font: 800 clamp(6rem, 14vw, 14rem)/0.8 var(--display); font-stretch: 62%; color: var(--cyan); font-variant-numeric: tabular-nums; }
.case h3 { font-size: clamp(1.625rem, 2.5vw, 2.5rem); margin-top: clamp(24px, 2.6vw, 40px); }
.case p:not(.case__fig) { margin-top: 16px; max-width: 46ch; color: #c9d4e3; }
@media (max-width: 860px) { .cases h2 { font-size: 13vw; } }
@media (max-width: 700px) { .cases__row { grid-template-columns: 1fr; } .case__fig { font-size: 30vw; } }

/* Contato: a frase em duas linhas e o chamado em azul, mais leve; a foto da caneca ao lado */
.contato { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding: var(--gap) var(--m); }
.contato__face { margin: 0; overflow: hidden; }
.contato__face img { aspect-ratio: 1; object-fit: cover; }
.contato__text { min-width: 0; }
.contato__title { font-size: clamp(2.75rem, 5vw, 6rem); }
.contato__title .ln { display: block; overflow: hidden; padding: 0.14em 0 0.08em; margin: -0.14em 0 -0.08em; }
.contato__title .ln > span { display: inline-block; }
.contato__call { color: var(--blue); font-weight: 500; transition: color 1.1s var(--ease-io); }
/* quando a página vira azul (rodapé no meio da tela), o chamado passa para ciano e não some */
html[data-theme="blue"] .contato__call, html[data-theme="ink"] .contato__call { color: var(--cyan); }
.contato__text p { max-width: 40ch; margin-top: 32px; }
.contato__go { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 32px; }
@media (prefers-reduced-motion: no-preference) {
  /* as linhas sobem por trás de uma máscara, como os outros títulos da página */
  .js .contato__title[data-rise] { opacity: 1; transform: none; }
  .js .contato__title .ln > span { transform: translateY(160%); transition: transform 1100ms var(--ease); transition-delay: calc(var(--l, 0) * 120ms); }
  .js .contato__title.is-in .ln > span { transform: none; }
}
@media (max-width: 860px) { .contato { grid-template-columns: 1fr; } .contato__face { max-width: 520px; } .contato__title { font-size: max(2.75rem, 8.2vw); } }

/* Rodapé */
.foot { padding: 48px var(--m) 32px; }
.foot__mark { width: 100%; height: auto; fill: currentColor; display: block; }
.foot__row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 56px; font-size: 14px; color: var(--muted-now); }

/* Cartões claros mantêm tinta escura mesmo quando a página muda de cor */
.sign { color: var(--ink); }
.sign footer { color: #5d5a62; }

.sfoot__logo { width: 132px; }

/* Rodapé da V1 (.sfoot--v1; o footer.css é compartilhado com as versões do arquivo): marca e serviços em cima,
   e a chamada final. No computador ela fica no céu vazio à esquerda da ponte: o desenho (assets/rodape-ponte.js) põe a
   torre da ilha a 66% da largura e escala tudo pela altura (--hz, a mesma do .horizonte no footer.css); o pé da
   chamada fica a 45% da altura do desenho, acima da cidade baixa (a ~69%) e à esquerda dos prédios altos (~38% da
   largura). Abaixo de 900px, a chamada vai para o fluxo, antes do desenho. */
.sfoot--v1 { --hz: clamp(220px, 31vw, 520px); --creme: #f2efe8; }
.sfoot--v1 .sfoot__in { grid-template-columns: minmax(0, 2.35fr) minmax(0, 2.15fr); }
.sfoot__chamada { padding: clamp(56px, 7vw, 80px) var(--m) 0; }
.sfoot__fale { margin: 0; font: 750 clamp(3rem, 5vw, 6rem)/0.9 var(--display); font-stretch: 68%; text-transform: uppercase; letter-spacing: -0.01em; color: var(--creme); }
.sfoot--v1 .sfoot__btn { background: var(--creme); }
/* linha legal: fecha o bloco da chamada, embaixo do botão, no computador e no celular */
.sfoot__legal-v1 { margin: 22px 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--foot-soft); }
/* aviso de cookies em texto, sem banner (decisão do Michel em 21/10/2026): curto, para não chegar nos prédios da ponte */
.sfoot__cookies { max-width: 36ch; margin-top: 4px; }
.sfoot__cookies a { color: inherit; text-decoration: underline 1px; text-underline-offset: 3px; }
.sfoot__cookies a:hover { color: var(--foot-ink); }
/* redes na coluna da marca: ícones de traço no creme, em botões redondos de 44px */
.sfoot__redes { list-style: none; display: flex; gap: 12px; margin: 26px 0 0; padding: 0; }
.sfoot__redes a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--foot-ink); border: 1px solid color-mix(in srgb, var(--foot-ink) 38%, transparent); transition: background-color 400ms, color 400ms, border-color 400ms, transform 600ms var(--spring-ui); }
.sfoot__redes a:hover { background: var(--foot-ink); color: var(--foot-bg); border-color: var(--foot-ink); transform: translateY(-2px); }
.sfoot__redes svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) {
  .sfoot__chamada { position: absolute; z-index: 1; left: 0; bottom: calc(var(--hz) * 0.45); padding: 0 var(--m); }
  /* a chamada cresceu com os links: o desenho desce o mesmo tanto, para o céu entre as colunas e o "Fale conosco" não encolher */
  .sfoot--v1 .horizonte { margin-top: calc(clamp(16px, 3vw, 40px) + 46px); }
}
@media (max-width: 960px) { .sfoot--v1 .sfoot__in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sfoot--v1 .sfoot__in { grid-template-columns: 1fr; } .sfoot__chamada { padding-top: 64px; } .sfoot__fale { font-size: 14vw; } }