/* ==========================================================================
   Página Sobre Nós — Figma "Sobre" 66:2 (1440 x 2281)

   Mesmo sistema do rodapé (footer.css): a unidade --p é 1/1440 da largura,
   com teto, e cada grupo fica ancorado numa das margens do frame (x 80 à
   esquerda, 1440 − 80 à direita = 5.5556%). Fontes e larguras usam a mesma
   unidade, então as quebras de linha são as do Figma em qualquer desktop.
   As alturas das seções são as do frame (650 · 650 · 401 · 250).

   Versão estática: sem animações.
   ========================================================================== */

.sn-intro,
.sn-principios,
.sn-numeros,
.sn-chamada {
  --p: clamp(0.6px, calc(100vw / 1440), 1.15px);
  --margem: 5.5556%; /* x 80 */
  position: relative;
  overflow: hidden;
}

/* traço amarelo de 85 x 2, pontas arredondadas (Line 15) */
.sn-risco {
  position: absolute;
  left: var(--margem);
  width: calc(85 * var(--p));
  height: calc(2 * var(--p));
  border-radius: calc(1 * var(--p));
  background: var(--amarelo-destaque);
}

/* --------------------------------------------------------------------------
   Fotos
   O <img> ocupa a figure toda (cover) e é recortado pela forma/raio da
   própria figure; o cinza do Figma (#d9d9d9) só aparece enquanto carrega.
   -------------------------------------------------------------------------- */

.sn-foto {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: #d9d9d9;
}

.sn-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   1. Experiência — Figma 69:114 (fundo #272a29, 650)
   ========================================================================== */

.sn-intro {
  height: calc(650 * var(--p));
  background: var(--cards-escuro); /* #272a29 */
  color: var(--branco);
}

.sn-intro__risco {
  top: calc(166 * var(--p)); /* traço em y 168, desenhado para cima */
}

/* Figma 70:119 — x 80, y 203, 612 de largura */
.sn-intro__texto {
  position: absolute;
  left: var(--margem);
  top: calc(203 * var(--p));
  width: calc(612 * var(--p));
}

/* Figma 70:115 — Archivo Black 56, 3 linhas de 61 (592 de largura) */
.sn-intro__titulo {
  width: calc(592 * var(--p));
  margin: 0 0 calc(16 * var(--p));
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: calc(56 * var(--p));
  line-height: calc(61 * var(--p));
}

.sn-destaque {
  color: var(--amarelo-destaque);
}

/* Figma 70:116 / 70:117 — Manrope 16, linhas de 22, 22 entre os dois */
.sn-intro__paragrafo {
  margin: 0;
  font-family: var(--fonte-corpo);
  font-weight: 400;
  font-size: calc(16 * var(--p));
  line-height: calc(22 * var(--p));
}

.sn-intro__paragrafo--2 {
  width: calc(592 * var(--p));
  margin-top: calc(22 * var(--p));
}

/* Figma 70:127–129 — composição de 628 x 444, ancorada à direita (x 732),
   y 174. --c é a unidade da composição: no mobile ela encolhe inteira. */
.sn-intro__fotos {
  --c: var(--p);
  position: absolute;
  right: var(--margem);
  top: calc(174 * var(--p));
  width: calc(628 * var(--c));
  height: calc(444 * var(--c));
}

/* 326 x 444, canto superior esquerdo chanfrado: a forma é o próprio vetor do
   Figma (Rectangle 12), usado como máscara */
.sn-foto--principal {
  left: 0;
  top: 0;
  width: calc(326 * var(--c));
  height: 100%;
  -webkit-mask: url("/assets/img/sobre-nos/forma-foto-principal.svg") 0 0 / 100% 100% no-repeat;
          mask: url("/assets/img/sobre-nos/forma-foto-principal.svg") 0 0 / 100% 100% no-repeat;
}

/* 294 x 171 e 294 x 267, raio 12, a 8 da principal e 6 entre si */
.sn-foto--topo,
.sn-foto--base {
  right: 0;
  width: calc(294 * var(--c));
  border-radius: calc(12 * var(--c));
}

.sn-foto--topo {
  top: 0;
  height: calc(171 * var(--c));
}

.sn-foto--base {
  bottom: 0;
  height: calc(267 * var(--c));
}

/* enquadramento do Figma: túnel e equipe centrados; o furo, com a imagem
   10% acima do centro (a abertura inteira à vista) */
.sn-foto--base img {
  object-position: 50% 10%;
}

/* hover (só com mouse): a foto cresce o mínimo dentro do próprio recorte —
   a moldura, o raio e a forma não mudam */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .sn-intro__fotos .sn-foto img {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .sn-intro__fotos .sn-foto:hover img {
    transform: scale(1.035);
  }
}

/* ==========================================================================
   2. Solidez — Figma 70:130 (fundo #fafaf8, 650)
   ========================================================================== */

.sn-principios {
  height: calc(650 * var(--p));
  background: var(--fundo-principal);
  color: #000;
}

.sn-principios__risco {
  top: calc(23 * var(--p)); /* y 25 */
}

/* Figma 70:175 — Archivo Black 48, 2 linhas de 52 */
.sn-principios__titulo {
  position: absolute;
  left: var(--margem);
  top: calc(50 * var(--p));
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: calc(48 * var(--p));
  line-height: calc(52 * var(--p));
  white-space: nowrap;
}

/* Figma 70:177 — 544 de largura, ancorado à direita, centrado no título */
.sn-principios__intro,
.sn-numeros__intro {
  position: absolute;
  right: var(--margem);
  width: calc(544 * var(--p));
  margin: 0;
  font-family: var(--fonte-corpo);
  font-weight: 400;
  font-size: calc(18 * var(--p));
  line-height: calc(25 * var(--p));
}

.sn-principios__intro {
  top: calc(64.5 * var(--p));
  color: var(--texto-sec); /* #8b8e8c */
}

/* --------------------------------------------------------------------------
   Missão · Visão · Valores — Figma 196:7 / 196:2 / 196:3 (410 x 220)
   Os três na mesma linha (y 196), com 25 entre eles: o do meio centrado.
   Só os cantos externos de cima são arredondados (35).
   --k é a unidade dos cards (no mobile passa a ser a do frame de 390).
   -------------------------------------------------------------------------- */

.sn-cards {
  --k: var(--p);
}

/* --sombra dosa a sombra do Figma (1 = a sombra do frame): a entrada dos
   cards a faz surgir de 0, e o hover a aprofunda um pouco. Registrada para
   poder ser interpolada. */
@property --sombra {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

.sn-card {
  --sombra: 1;
  position: absolute;
  width: calc(410 * var(--k));
  height: calc(220 * var(--k));
  background: var(--branco);
  box-shadow:
    0 calc(48 * var(--k) * var(--sombra)) calc(13 * var(--k) * var(--sombra)) 0 rgba(0, 0, 0, 0),
    0 calc(30 * var(--k) * var(--sombra)) calc(12 * var(--k) * var(--sombra)) 0 rgba(0, 0, 0, calc(0.01 * var(--sombra))),
    0 calc(17 * var(--k) * var(--sombra)) calc(10 * var(--k) * var(--sombra)) 0 rgba(0, 0, 0, calc(0.05 * var(--sombra))),
    0 calc(8 * var(--k) * var(--sombra)) calc(8 * var(--k) * var(--sombra)) 0 rgba(0, 0, 0, calc(0.09 * var(--sombra))),
    0 calc(2 * var(--k) * var(--sombra)) calc(4 * var(--k) * var(--sombra)) 0 rgba(0, 0, 0, calc(0.1 * var(--sombra)));
}

/* hover (só desktop): o card sobe 4 e a sombra se aprofunda. `translate` é
   independente do transform que a animação de entrada usa. */
@media (hover: hover) and (pointer: fine) {
  .sn-card {
    transition:
      translate var(--hover-tempo) var(--hover-curva),
      --sombra var(--hover-tempo) var(--hover-curva);
  }

  .sn-card:hover {
    --sombra: 1.35;
    translate: 0 calc(-4 * var(--k));
  }
}

@media (prefers-reduced-motion: reduce) {
  .sn-card:hover {
    translate: none;
  }
}

.sn-card--missao {
  left: var(--margem);
  top: calc(196 * var(--p));
  border-radius: calc(35 * var(--k)) 0 0 0;
}

.sn-card--visao {
  left: calc(50% - 205 * var(--p)); /* x 515 */
  top: calc(196 * var(--p));
}

.sn-card--valores {
  right: var(--margem);
  top: calc(196 * var(--p));
  border-radius: 0 calc(35 * var(--k)) 0 0;
}

/* ícones: cada um é o PNG quadrado do Figma recortado pela caixa do slot */
.sn-card__icone {
  position: absolute;
  overflow: hidden;
}

.sn-card__icone img {
  position: absolute;
  max-width: none;
}

/* Figma 74:402 — 59 x 56 em (13, 47). No Figma o raio de 35 do card também
   está no ícone e recorta de leve o anel do alvo: reproduzido aqui. */
.sn-card--missao .sn-card__icone {
  left: calc(13 * var(--k));
  top: calc(47 * var(--k));
  width: calc(59 * var(--k));
  height: calc(56 * var(--k));
  border-top-left-radius: calc(35 * var(--k));
}

.sn-card--missao .sn-card__icone img {
  left: -31.23%;
  top: -28.83%;
  width: 143.97%;
  height: 151.27%;
}

/* Figma 74:404 — 58 x 34 em (13, 47) */
.sn-card--visao .sn-card__icone {
  left: calc(13 * var(--k));
  top: calc(47 * var(--k));
  width: calc(58 * var(--k));
  height: calc(34 * var(--k));
}

.sn-card--visao .sn-card__icone img {
  left: -15.56%;
  top: -63.46%;
  width: 131.11%;
  height: 226.92%;
}

/* Figma 74:405 — 58 x 47 em (13, 47), com o raio de 35 do card (idem) */
.sn-card--valores .sn-card__icone {
  left: calc(13 * var(--k));
  top: calc(47 * var(--k));
  width: calc(58 * var(--k));
  height: calc(47 * var(--k));
  border-top-right-radius: calc(35 * var(--k));
}

.sn-card--valores .sn-card__icone img {
  left: -19.05%;
  top: -35.29%;
  width: 138.1%;
  height: 170.59%;
}

/* Figma 70:192 / 70:193 / 70:196 — 259 de largura, título e texto a 15;
   em (84, 43), no Visão em (83, 43) */
.sn-card__texto {
  position: absolute;
  left: calc(84 * var(--k));
  top: calc(43 * var(--k));
  width: calc(259 * var(--k));
}

.sn-card--visao .sn-card__texto {
  left: calc(83 * var(--k));
}

.sn-card__titulo {
  margin: 0 0 calc(15 * var(--k));
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: calc(22 * var(--k));
  line-height: calc(24 * var(--k));
}

.sn-card__descricao {
  margin: 0;
  font-family: var(--fonte-corpo);
  font-weight: 400;
  font-size: calc(15 * var(--k));
  line-height: calc(20 * var(--k));
}

/* Figma 70:182 — linha de 1280, preta a 40%, em y 458 */
.sn-principios__divisor {
  position: absolute;
  left: var(--margem);
  right: var(--margem);
  top: calc(457 * var(--p));
  height: 1px;
  background: rgba(0, 0, 0, 0.4);
}

/* --------------------------------------------------------------------------
   Diferenciais — Figma 75:427 (1239 x 129, centrado, y 490)
   Item: ícone + 13 + texto de 177. Entre os itens, 41 · divisor · 48.
   -------------------------------------------------------------------------- */

.sn-diferenciais {
  position: absolute;
  left: calc(50% + 0.5 * var(--p));
  top: calc(490 * var(--p));
  translate: -50% 0;
  display: flex;
  align-items: center;
  height: calc(129 * var(--p));
  margin: 0;
  padding: 0;
  list-style: none;
}

.sn-diferencial {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: calc(13 * var(--p));
}

.sn-diferencial + .sn-diferencial {
  margin-left: calc(89 * var(--p));
}

/* divisor vertical de 129, preto a 40%, 41 depois do item anterior */
.sn-diferencial + .sn-diferencial::before {
  content: "";
  position: absolute;
  left: calc(-48 * var(--p) - 1px);
  top: 50%;
  width: 1px;
  height: calc(129 * var(--p));
  translate: 0 -50%;
  background: rgba(0, 0, 0, 0.4);
}

/* ícones: recortes do sprite do Figma (image 10–13) */
.sn-diferencial__icone {
  position: relative;
  flex-shrink: 0;
  height: calc(48 * var(--p));
  overflow: hidden;
}

.sn-diferencial__icone img {
  position: absolute;
  max-width: none;
}

.sn-diferencial--equipe .sn-diferencial__icone { width: calc(61 * var(--p)); }
.sn-diferencial--equipe .sn-diferencial__icone img {
  left: -29.89%; top: -66.36%; width: 551.29%; height: 232.71%;
}

.sn-diferencial--equipamentos .sn-diferencial__icone { width: calc(47 * var(--p)); }
.sn-diferencial--equipamentos .sn-diferencial__icone img {
  left: -173.68%; top: -49.6%; width: 604.86%; height: 199.2%;
}

.sn-diferencial--seguranca .sn-diferencial__icone { width: calc(40 * var(--p)); }
.sn-diferencial--seguranca .sn-diferencial__icone img {
  left: -367.44%; top: -43.46%; width: 694.88%; height: 191.54%;
}

.sn-diferencial--atendimento .sn-diferencial__icone { width: calc(64 * var(--p)); }
.sn-diferencial--atendimento .sn-diferencial__icone img {
  left: -379.46%; top: -62.16%; width: 503.03%; height: 224.32%;
}

/* Figma 70:202 etc. — título Bold 16 (linhas de 22), 3, texto 14 (19) */
.sn-diferencial__texto {
  width: calc(177 * var(--p));
}

.sn-diferencial--atendimento .sn-diferencial__texto {
  margin-top: calc(2 * var(--p));
}

.sn-diferencial__titulo {
  margin: 0 0 calc(3 * var(--p));
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: calc(16 * var(--p));
  line-height: calc(22 * var(--p));
}

.sn-diferencial--equipe .sn-diferencial__titulo {
  width: calc(138 * var(--p));
}

.sn-diferencial__descricao {
  margin: 0;
  font-family: var(--fonte-corpo);
  font-weight: 400;
  font-size: calc(14 * var(--p));
  line-height: calc(19 * var(--p));
}

/* ==========================================================================
   3. Números — Figma 70:212 (fundo #e5e5e5, 401)
   ========================================================================== */

.sn-numeros {
  height: calc(401 * var(--p));
  background: #e5e5e5;
  color: #000;
}

/* Figma 70:244 — Archivo Black 46, 2 linhas de 50, 611 de largura */
.sn-numeros__titulo,
.sn-chamada__titulo {
  position: absolute;
  left: var(--margem);
  width: calc(611 * var(--p));
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: calc(46 * var(--p));
  line-height: calc(50 * var(--p));
}

.sn-numeros__titulo {
  top: calc(50 * var(--p));
}

.sn-numeros__intro {
  top: calc(62.5 * var(--p));
  color: #656565;
}

/* --------------------------------------------------------------------------
   20+ e 250+ — grupo de 516 x 187 em x 80, y 182 (--k: unidade do grupo)
   Os cards são os SVGs do Figma, já com a sombra: a caixa do SVG passa 11
   dos lados e 2 acima do card. O brilho amarelo (Group 12) fica por cima.
   -------------------------------------------------------------------------- */

.sn-marcas {
  --k: var(--p);
  position: absolute;
  left: var(--margem);
  top: calc(182 * var(--p));
  width: calc(516 * var(--k));
  height: calc(187 * var(--k));
}

.sn-marcas__card {
  position: absolute;
  top: calc(-2 * var(--k));
  width: calc(277 * var(--k));
  height: calc(228 * var(--k));
  max-width: none;
}

.sn-marcas__card--anos  { left: calc(-11 * var(--k)); }
.sn-marcas__card--obras { left: calc(250 * var(--k)); }

.sn-marcas__brilho {
  position: absolute;
  left: calc(-33 * var(--k));
  top: calc(-227 * var(--k));
  width: calc(501 * var(--k));
  height: calc(610 * var(--k));
  max-width: none;
  pointer-events: none;
}

.sn-marca {
  position: absolute;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.sn-marca__numero {
  font-family: var(--fonte-titulo);
  font-weight: 400;
}

.sn-marca__rotulo {
  width: calc(106 * var(--k));
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: calc(16 * var(--k));
  line-height: calc(22 * var(--k));
}

/* Figma 72:392 — em (118, 215): 72 branco (78) + rótulo */
.sn-marca--anos {
  left: calc(38 * var(--k));
  top: calc(33 * var(--k));
  color: var(--branco);
}

.sn-marca--anos .sn-marca__numero {
  font-size: calc(72 * var(--k));
  line-height: calc(78 * var(--k));
}

/* Figma 72:393 — em (384, 219): 64 grafite (70) + rótulo #272a29 */
.sn-marca--obras {
  left: calc(304 * var(--k));
  top: calc(37 * var(--k));
}

.sn-marca--obras .sn-marca__numero {
  font-size: calc(64 * var(--k));
  line-height: calc(70 * var(--k));
  color: var(--titulo);
}

.sn-marca--obras .sn-marca__rotulo {
  color: var(--cards-escuro);
}

/* --------------------------------------------------------------------------
   Depoimento — Figma 70:252 (366 x 153, raio 10) em x 817, y 186
   Alinhado à coluna de texto da direita (que começa em x 816).
   -------------------------------------------------------------------------- */

.sn-depoimento {
  --k: var(--p);
  position: absolute;
  left: calc(100% - var(--margem) - 543 * var(--p));
  top: calc(186 * var(--p));
  width: calc(366 * var(--k));
  height: calc(175 * var(--k));
}

.sn-depoimento__card {
  position: relative;
  height: calc(153 * var(--k));
  border-radius: calc(10 * var(--k));
  background: var(--branco);
}

/* os três depoimentos ocupam o mesmo card (altura fixa): só um aparece */
.sn-depoimento__slide {
  position: absolute;
  inset: 0;
}

.sn-depoimento__slide[hidden] {
  display: none;
}

/* Figma 70:262 — no lugar da foto do cliente (126 x 137 em (8, 8), raio
   10), um painel claro com o avatar das iniciais: círculo grafite, letras
   brancas e um ponto amarelo — discreto, sem disputar com o texto. O painel
   é do card (fixo, não pisca na troca); o avatar é de cada depoimento. */
.sn-depoimento__card::before,
.sn-depoimento__avatar {
  position: absolute;
  left: calc(8 * var(--k));
  top: calc(8 * var(--k));
  width: calc(126 * var(--k));
  height: calc(137 * var(--k));
  border-radius: calc(10 * var(--k));
}

.sn-depoimento__card::before {
  content: "";
  background: var(--cards); /* #f1f2f0 */
}

.sn-depoimento__avatar {
  display: grid;
  place-items: center;
}

.sn-depoimento__iniciais {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(72 * var(--k));
  height: calc(72 * var(--k));
  border-radius: 50%;
  background: var(--cards-escuro); /* #272a29 */
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: calc(22 * var(--k));
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--branco);
}

.sn-depoimento__iniciais::after {
  content: "";
  position: absolute;
  right: calc(3 * var(--k));
  bottom: calc(3 * var(--k));
  width: calc(12 * var(--k));
  height: calc(12 * var(--k));
  border-radius: 50%;
  background: var(--amarelo-destaque);
  box-shadow: 0 0 0 calc(2.5 * var(--k)) var(--cards);
}

.sn-depoimento__estrelas {
  position: absolute;
  left: calc(171 * var(--k));
  top: calc(15 * var(--k));
  width: calc(100 * var(--k));
  height: calc(20 * var(--k));
}

/* a mensagem no vão entre as estrelas e o nome (até 4 linhas) */
.sn-depoimento__mensagem {
  position: absolute;
  left: calc(171 * var(--k));
  top: calc(43 * var(--k));
  width: calc(183 * var(--k));
  margin: 0;
  font-family: var(--fonte-corpo);
  font-weight: 400;
  font-size: calc(12 * var(--k));
  line-height: calc(15.5 * var(--k));
  color: #3b3b3b;
}

.sn-depoimento__mensagem p {
  margin: 0;
}

.sn-depoimento__nome {
  position: absolute;
  left: calc(171 * var(--k));
  top: calc(116 * var(--k));
  margin: 0;
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: calc(14 * var(--k));
  line-height: calc(19 * var(--k));
  color: #000;
  white-space: nowrap;
}

/* Figma 70:259–261 — três pontos de 12, a cada 22, em (155, 163): cada
   ponto é o ::before de um botão de 22 (área de clique), centrado nele. As
   setas (22, a 4 dos pontos) ficam dos dois lados sem tirar os pontos do
   lugar: a fila começa 26 antes deles */
.sn-depoimento__controles {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--k));
  margin: calc(5 * var(--k)) 0 0 calc(124 * var(--k));
}

.sn-depoimento__indicadores {
  display: flex;
}

/* setas: chevrons finos em cinza, amarelos no hover */
.sn-depoimento__seta {
  display: grid;
  place-items: center;
  width: calc(22 * var(--k));
  height: calc(22 * var(--k));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #8b8e8c;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.25s ease;
}

.sn-depoimento__seta svg {
  display: block;
  width: calc(14 * var(--k));
  height: calc(14 * var(--k));
}

.sn-depoimento__seta:focus-visible {
  outline: 2px solid var(--titulo);
  outline-offset: 0;
}

@media (hover: hover) and (pointer: fine) {
  .sn-depoimento__seta:hover {
    color: var(--amarelo-destaque);
  }
}

.sn-depoimento__indicador {
  display: grid;
  place-items: center;
  width: calc(22 * var(--k));
  height: calc(22 * var(--k));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sn-depoimento__indicador::before {
  content: "";
  width: calc(12 * var(--k));
  height: calc(12 * var(--k));
  border-radius: 50%;
  background: #c9cac8;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}

.sn-depoimento__indicador[aria-current="true"]::before {
  background: var(--amarelo-destaque);
}

@media (hover: hover) and (pointer: fine) {
  .sn-depoimento__indicador:hover::before {
    transform: scale(1.2);
  }

  .sn-depoimento__indicador:not([aria-current="true"]):hover::before {
    background: #a9aaa8;
  }
}

.sn-depoimento__indicador:focus-visible {
  outline: 2px solid var(--titulo);
  outline-offset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sn-depoimento__indicador::before,
  .sn-depoimento__seta {
    transition: none;
  }

  .sn-depoimento__indicador:hover::before {
    transform: none;
  }
}

/* ==========================================================================
   4. Chamada — Figma 70:273 (fundo #d8bc59 + textura, 250)
   ========================================================================== */

.sn-chamada {
  height: calc(250 * var(--p));
  background: #d8bc59;
  color: #000;
}

/* Figma 71:302 — a textura no tamanho natural (2103 x 748 em 1440), 35,9%
   para a esquerda e 294 acima do topo */
.sn-chamada__textura {
  position: absolute;
  left: -35.9%;
  top: calc(-294 * var(--p));
  width: 146.04%;
  max-width: none;
  height: auto;
  pointer-events: none;
}

.sn-chamada__titulo {
  top: calc(72 * var(--p));
}

/* Figma 71:299 — 544 de largura, ancorada à direita, y 50 */
.sn-chamada__coluna {
  position: absolute;
  right: var(--margem);
  top: calc(50 * var(--p));
  width: calc(544 * var(--p));
}

.sn-chamada__texto {
  margin: 0 0 calc(20 * var(--p));
  font-family: var(--fonte-corpo);
  font-weight: 400;
  font-size: calc(18 * var(--p));
  line-height: calc(25 * var(--p));
  color: #3f3d3d;
}

/* Figma 71:298 — amarelo, raio 15, 12/15, texto e seta a 25. As cores (o
   amarelo e o texto preto) vêm de interacoes.css, que as faz mudar no hover,
   igual ao .obras__botao: definidas aqui, este arquivo (carregado depois)
   travaria o hover. */
.sn-chamada__botao {
  display: inline-flex;
  align-items: center;
  gap: calc(25 * var(--p));
  padding: calc(12 * var(--p)) calc(15 * var(--p));
  border-radius: calc(15 * var(--p));
}

.sn-chamada__botao-texto {
  font-family: var(--fonte-corpo);
  font-weight: 800;
  font-size: calc(18 * var(--p));
  line-height: calc(25 * var(--p));
  letter-spacing: calc(1 * var(--p));
  white-space: nowrap;
}

/* seta de 12 x 9; o SVG passa 0.75 de cada lado (o traço) */
.sn-chamada__botao-seta {
  display: block;
  width: calc(13.5 * var(--p));
  height: calc(10.5 * var(--p));
  margin: calc(-0.75 * var(--p));
}

/* ==========================================================================
   Animações (assets/js/sobre-nos.js)

   Estados temporários. .abertura-animada é posta no <html> antes do primeiro
   paint (base.njk): o que entra na abertura nasce oculto, sem piscar na
   posição final (as três fotos também: entram em sequência).
   ========================================================================== */

html.abertura-animada .sn-intro__risco,
html.abertura-animada .sn-intro__rotulo,
html.abertura-animada .sn-intro__titulo,
html.abertura-animada .sn-intro__paragrafo,
html.abertura-animada .sn-intro__fotos .sn-foto {
  opacity: 0;
}

/* títulos divididos em linhas (SplitText): cada linha dentro de uma máscara.
   A folga da máscara (compensada pela margem) não corta os acentos nem a
   base das letras; o layout das linhas continua o mesmo. */
.sn-mascarado {
  display: flex;
  flex-direction: column;
}

.sn-mascarado .sn-linha-mask {
  padding: 0.22em 0.1em;
  margin: -0.22em -0.1em;
}

/* --------------------------------------------------------------------------
   Peças só do mobile (ver abaixo): no desktop não existem
   -------------------------------------------------------------------------- */

.sn-topo,
.sn-intro__rotulo,
.sn-card__descricao--curta,
.sn-diferencial__titulo--mobile,
.sn-numeros__risco,
.sn-chamada__risco,
.sn-marcas__card--obras-mobile,
.sn-quebra-mobile {
  display: none;
}

/* ==========================================================================
   Mobile e tablet (até 1023px) — mockup mobile aprovado da Sobre Nós

   Coluna de 342 no frame de 390 (--m, --margem-mobile), tudo em fluxo:
     faixa branca sob a navbar (que ali abre clara) → Experiência em
     grafite (traço + SOBRE A GVT, título, textos, três fotos) → Solidez em
     branco (Missão, Visão e Valores em cards cinza-claro compactos, linha,
     diferenciais em grade 2 x 2) → Números em branco (20+ e 250+ lado a
     lado, depoimento em carrossel) → Chamada sobre a textura.
   Os textos curtos dos cards e os títulos dos diferenciais são os do
   mockup; no desktop continuam os originais.
   ========================================================================== */

@media (max-width: 1023px) {
  .sn-intro,
  .sn-principios,
  .sn-numeros,
  .sn-chamada {
    height: auto;
    padding-left: var(--margem-mobile);
    padding-right: var(--margem-mobile);
  }

  .sn-intro__texto,
  .sn-intro__fotos,
  .sn-principios__titulo,
  .sn-principios__intro,
  .sn-principios__divisor,
  .sn-diferenciais,
  .sn-numeros__titulo,
  .sn-numeros__intro,
  .sn-marcas,
  .sn-depoimento,
  .sn-chamada__titulo,
  .sn-chamada__coluna {
    position: relative;
    inset: auto;
    translate: none;
  }

  /* traço amarelo de 56 x 2 acima de cada título */
  .sn-risco,
  .sn-numeros__risco,
  .sn-chamada__risco {
    position: static;
    display: block;
    width: calc(56 * var(--m));
    height: 2px;
    margin-bottom: calc(18 * var(--m));
  }

  .sn-quebra-mobile {
    display: inline;
  }

  /* títulos em Archivo Black: as quebras do mockup em qualquer celular */
  .sn-principios__titulo,
  .sn-numeros__titulo,
  .sn-chamada__titulo {
    width: auto;
    white-space: normal;
  }

  .sn-principios__intro,
  .sn-numeros__intro,
  .sn-chamada__texto {
    width: auto;
    font-size: max(15px, calc(16 * var(--m)));
    line-height: 1.5;
  }

  /* --- faixa sob a navbar ----------------------------------------------- */

  .sn-topo {
    display: block;
    height: var(--nav-altura);
    background: var(--branco);
  }

  /* --- 1. Experiência --------------------------------------------------- */

  /* traço e SOBRE A GVT na mesma linha; o resto em coluna */
  .sn-intro {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    column-gap: calc(20 * var(--m));
    padding-top: calc(44 * var(--m));
    padding-bottom: calc(20 * var(--m));
  }

  .sn-intro__risco {
    margin: 0;
  }

  .sn-intro__rotulo {
    display: block;
    margin: 0;
    font-family: var(--fonte-corpo);
    font-weight: 700;
    font-size: calc(11 * var(--m));
    line-height: calc(16 * var(--m));
    letter-spacing: calc(0.4 * var(--m));
    color: var(--amarelo-destaque);
  }

  .sn-intro__texto,
  .sn-intro__fotos {
    grid-column: 1 / -1;
  }

  .sn-intro__texto,
  .sn-intro__titulo,
  .sn-intro__paragrafo--2 {
    width: auto;
  }

  .sn-intro__texto {
    margin-top: calc(22 * var(--m));
  }

  /* 4 linhas: EXPERIÊNCIA / QUE CONSTRÓI / NOVOS / CAMINHOS. */
  .sn-intro__titulo {
    margin-bottom: calc(18 * var(--m));
    font-size: calc(34 * var(--m));
    line-height: calc(38 * var(--m));
  }

  /* o ponto final entra no amarelo de CAMINHOS. */
  .sn-intro__ponto {
    color: var(--amarelo-destaque);
  }

  .sn-intro__paragrafo {
    font-size: max(15px, calc(16 * var(--m)));
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.86);
  }

  .sn-intro__paragrafo--2 {
    margin-top: calc(16 * var(--m));
  }

  /* fotos: uma larga em cima, duas lado a lado embaixo */
  .sn-intro__fotos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(10 * var(--m));
    width: auto;
    height: auto;
    margin-top: calc(28 * var(--m));
  }

  .sn-intro__fotos .sn-foto {
    position: relative;
    inset: auto;
    width: auto;
    border-radius: calc(8 * var(--m));
  }

  .sn-intro__fotos .sn-foto--principal {
    grid-column: 1 / -1;
    height: calc(127 * var(--m));
    -webkit-mask: none;
            mask: none;
  }

  .sn-intro__fotos .sn-foto--topo,
  .sn-intro__fotos .sn-foto--base {
    height: calc(121 * var(--m));
  }

  /* enquadramento no celular: a plataforma no túnel e a abertura do furo */
  .sn-intro__fotos .sn-foto--principal img {
    object-position: 50% 30%;
  }

  .sn-intro__fotos .sn-foto--base img {
    object-position: 50% 30%;
  }

  /* --- 2. Solidez ------------------------------------------------------- */

  .sn-principios {
    padding-top: calc(40 * var(--m));
    padding-bottom: calc(48 * var(--m));
    background: var(--branco);
  }

  .sn-principios__titulo {
    font-size: calc(30 * var(--m));
    line-height: calc(35 * var(--m));
  }

  .sn-principios__intro {
    margin-top: calc(14 * var(--m));
  }

  /* Missão · Visão · Valores: cinza-claro, ícone à esquerda, compactos */
  .sn-cards {
    --k: var(--m);
    display: flex;
    flex-direction: column;
    gap: calc(15 * var(--m));
    margin-top: calc(28 * var(--m));
  }

  .sn-card,
  .sn-card--missao,
  .sn-card--visao,
  .sn-card--valores {
    position: relative;
    inset: auto;
    display: flex;
    align-items: center;
    gap: calc(22 * var(--m));
    width: auto;
    height: auto;
    padding: calc(20 * var(--m)) calc(20 * var(--m)) calc(20 * var(--m)) calc(24 * var(--m));
    border-radius: calc(10 * var(--m));
    background: var(--cards);
    box-shadow: none;
  }

  /* mesma especificidade das posições de cada card no desktop */
  .sn-card .sn-card__icone,
  .sn-card .sn-card__texto {
    position: relative;
    inset: auto;
  }

  /* o ícone inteiro (no desktop o raio do card o recorta) */
  .sn-card .sn-card__icone {
    flex-shrink: 0;
    border-radius: 0;
  }

  .sn-card__texto,
  .sn-card--visao .sn-card__texto {
    flex: 1;
    width: auto;
  }

  .sn-card__titulo {
    margin: 0 0 calc(4 * var(--m));
    font-family: var(--fonte-corpo);
    font-weight: 700;
    font-size: calc(17 * var(--m));
    line-height: calc(22 * var(--m));
    letter-spacing: calc(0.2 * var(--m));
    color: #000;
  }

  .sn-card__descricao {
    display: none;
  }

  .sn-card__descricao--curta {
    display: block;
    font-size: calc(15 * var(--m));
    line-height: calc(20 * var(--m));
    color: #5f6260;
  }

  .sn-principios__divisor {
    display: block;
    height: 1px;
    margin: calc(26 * var(--m)) 0 calc(20 * var(--m));
    background: rgba(0, 0, 0, 0.14);
  }

  /* diferenciais: grade 2 x 2, ícone em cima e título centrados, sem as
     descrições */
  .sn-diferenciais {
    --p: calc(var(--m) * 0.92); /* ícones de 44 de altura */
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: calc(13 * var(--m));
    height: auto;
  }

  .sn-diferencial {
    flex-direction: column;
    align-items: center;
    gap: calc(12 * var(--m));
    padding: calc(18 * var(--m)) calc(10 * var(--m)) calc(20 * var(--m));
    border-radius: calc(10 * var(--m));
    background: var(--cards);
    text-align: center;
  }

  .sn-diferencial + .sn-diferencial {
    margin-left: 0;
  }

  .sn-diferencial + .sn-diferencial::before {
    content: none;
  }

  .sn-diferencial__texto,
  .sn-diferencial--atendimento .sn-diferencial__texto {
    width: auto;
    margin: 0;
  }

  .sn-diferencial__titulo,
  .sn-diferencial__descricao {
    display: none;
  }

  .sn-diferencial .sn-diferencial__titulo--mobile {
    display: block;
    width: auto;
    margin: 0;
    font-size: calc(15 * var(--m));
    line-height: calc(20 * var(--m));
    color: #000;
  }

  /* --- 3. Números ------------------------------------------------------- */

  .sn-numeros {
    padding-top: calc(44 * var(--m));
    padding-bottom: calc(20 * var(--m));
    background: var(--branco);
  }

  /* 2 linhas: NÚMEROS QUE / REFLETEM CONFIANÇA. (25.5 é o maior corpo em
     que a segunda cabe na coluna) */
  .sn-numeros__titulo {
    font-size: calc(25.5 * var(--m));
    line-height: calc(30 * var(--m));
  }

  .sn-numeros__intro {
    margin-top: calc(12 * var(--m));
  }

  /* 20+ e 250+: o grupo de 516 na largura da coluna (o 20+ é o card do
     desktop, com o brilho; o 250+ vira o card cinza-claro) */
  .sn-marcas {
    --k: calc(var(--m) * 342 / 516);
    margin-top: calc(24 * var(--m));
  }

  .sn-marcas__card--obras {
    display: none;
  }

  .sn-marcas__card--obras-mobile {
    display: block;
    left: calc(261 * var(--k));
    top: 0;
    width: calc(255 * var(--k));
    height: calc(187 * var(--k));
    border-radius: calc(15 * var(--k));
    background: var(--cards);
  }

  .sn-marca__numero,
  .sn-marca--obras .sn-marca__numero {
    color: var(--amarelo-destaque);
  }

  .sn-marca--anos .sn-marca__numero {
    font-size: calc(44 * var(--m));
    line-height: calc(48 * var(--m));
  }

  .sn-marca--obras .sn-marca__numero {
    font-size: calc(40 * var(--m));
    line-height: calc(48 * var(--m));
  }

  .sn-marca--obras {
    top: calc(33 * var(--k));
  }

  .sn-marca__rotulo {
    width: calc(90 * var(--m));
    margin-top: calc(4 * var(--m));
    font-size: calc(12 * var(--m));
    line-height: calc(15 * var(--m));
  }

  /* depoimento: caixa cinza-claro, o card branco (um depoimento por vez,
     troca deslizando o dedo ou nos indicadores) e os indicadores embaixo.
     Card de altura fixa, com medidas próprias do celular para a mensagem
     ficar legível; pan-y: o dedo na vertical continua rolando a página */
  .sn-depoimento {
    width: auto;
    height: auto;
    margin-top: calc(28 * var(--m));
    padding: calc(12 * var(--m)) calc(12 * var(--m)) calc(10 * var(--m));
    border-radius: calc(12 * var(--m));
    background: var(--cards);
  }

  .sn-depoimento__card {
    height: calc(156 * var(--m));
    border-radius: calc(8 * var(--m));
    touch-action: pan-y;
  }

  .sn-depoimento__card::before,
  .sn-depoimento__avatar {
    left: calc(8 * var(--m));
    top: calc(8 * var(--m));
    width: calc(104 * var(--m));
    height: calc(140 * var(--m));
    border-radius: calc(8 * var(--m));
  }

  .sn-depoimento__iniciais {
    width: calc(64 * var(--m));
    height: calc(64 * var(--m));
    font-size: calc(20 * var(--m));
  }

  .sn-depoimento__iniciais::after {
    right: calc(2 * var(--m));
    bottom: calc(2 * var(--m));
    width: calc(11 * var(--m));
    height: calc(11 * var(--m));
    box-shadow: 0 0 0 calc(2.5 * var(--m)) var(--cards);
  }

  .sn-depoimento__estrelas {
    left: calc(126 * var(--m));
    top: calc(16 * var(--m));
    width: calc(90 * var(--m));
    height: calc(18 * var(--m));
  }

  .sn-depoimento__mensagem {
    left: calc(126 * var(--m));
    top: calc(43 * var(--m));
    width: calc(180 * var(--m));
    font-size: calc(13 * var(--m));
    line-height: calc(17.5 * var(--m));
  }

  .sn-depoimento__nome {
    left: calc(126 * var(--m));
    top: calc(125 * var(--m));
    font-size: calc(14 * var(--m));
    line-height: calc(19 * var(--m));
  }

  .sn-depoimento__controles {
    justify-content: center;
    gap: calc(2 * var(--m));
    margin: calc(8 * var(--m)) 0 0;
  }

  .sn-depoimento__seta {
    width: 32px;
    height: 28px;
    border-radius: 6px;
  }

  .sn-depoimento__seta svg {
    width: calc(14 * var(--m));
    height: calc(14 * var(--m));
  }

  .sn-depoimento__seta:focus-visible {
    outline-offset: -2px;
  }

  /* área de toque de 28; o ponto visível tem 11 */
  .sn-depoimento__indicador {
    width: calc(23 * var(--m));
    height: 28px;
    border-radius: 6px;
  }

  .sn-depoimento__indicador::before {
    width: calc(11 * var(--m));
    height: calc(11 * var(--m));
    background: #d9dad8;
  }

  .sn-depoimento__indicador:focus-visible {
    outline-offset: -2px;
  }

  /* --- 4. Chamada ------------------------------------------------------- */

  .sn-chamada {
    padding-top: calc(54 * var(--m));
    padding-bottom: calc(38 * var(--m));
  }

  .sn-chamada__textura {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 50%;
  }

  .sn-chamada__risco {
    position: relative; /* acima da textura */
    left: auto;
  }

  .sn-chamada__titulo {
    font-size: calc(33 * var(--m));
    line-height: calc(37 * var(--m));
  }

  .sn-chamada__coluna {
    width: auto;
    margin-top: calc(18 * var(--m));
  }

  .sn-chamada__texto {
    margin-bottom: calc(20 * var(--m));
  }

  /* botão na largura da coluna, em pílula, altura de toque confortável */
  .sn-chamada__botao {
    --p: var(--m);
    display: flex;
    justify-content: center;
    gap: calc(16 * var(--m));
    width: 100%;
    min-height: calc(52 * var(--m));
    padding: calc(12 * var(--m)) calc(20 * var(--m));
    border-radius: calc(26 * var(--m));
  }

  .sn-chamada__botao-texto {
    font-size: calc(17 * var(--m));
    line-height: calc(24 * var(--m));
  }
}