/* --- página services: uma "tela" por vez (lista de categorias OU o detalhe de
   uma delas) — só uma fica visível, as outras ficam com [hidden] --- */
.services-page { position: relative; }
.services-list-view[hidden],
.services-detail-view[hidden] { display: none; }

/* 3 elementos novos, só pro mobile (Figma node 14059:5054, ver comentários
   no services.js) — escondidos por padrão, cada um só aparece dentro do seu
   @media(max-width:720px) correspondente lá embaixo */
.services-list-title,
.services-list-claquete,
.services-detail-claquete { display: none; }

/* "SERVICES" ao lado do hambúrguer — só na tela da lista (nas telas de
   detalhe quem cumpre esse papel é o "‹ SERVICES" de .services-back) */
.services-page-label {
  font-family: var(--font-menu);
  /* mesmo tamanho/tracking do "SERVICES" do menu hamburguer (.menu-link em
     style.css) — no Figma esse label da tela de lista usa o mesmo estilo de
     texto grande, não um rótulo pequeno como pareceu à primeira vista */
  font-size: clamp(20px, 1.9vw, 46.39px);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fg);
  transition: opacity .25s ease, visibility .25s ease;
  /* pedido do usuário: mais espaço entre o ícone do hambúrguer e esse
     texto, centralizando aproximadamente no vão entre o ícone e o começo
     do conteúdo visual da página (a figura decorativa/foto da categoria,
     que começa por volta de 20-23% da largura do "palco", ver decoBox em
     services-data.js) — o gap padrão de .site-controls (style.css) é
     compartilhado com outras páginas, então esse espaço extra é só um
     margin-left aqui, específico dessa página */
  margin-left: clamp(24px, 4.5vw, 80px);
}
.services-page-label[hidden] { display: none; }
/* some enquanto o menu hamburguer tá aberto — mesmo padrão de
   .site-controls.right em style.css, pra não competir com o overlay
   (.services-back tem sua própria regra depois de :hover, pra sempre
   ganhar mesmo se o cursor estiver em cima dele) */
body.menu-open .services-page-label {
  opacity: 0;
  visibility: hidden;
}

/* logo Papaki no canto superior esquerdo, só na tela da lista (nas telas de
   detalhe o logo fica centralizado no topo, ver .services-logo) */
.services-list-logo {
  position: absolute;
  z-index: 2;
  top: 3.52%;
  left: 1.98%;
  width: clamp(90px, 7.2vw, 138px);
}
.services-list-logo img { width: 100%; height: auto; display: block; }

/* --- tela inicial: lista das 5 categorias, Production & Content em destaque por
   padrão. Fundo sólido (--bg) + a figura decorativa e a foto da categoria
   SELECIONADA (não necessariamente aberta — 1º clique só troca a seleção aqui,
   é preciso clicar em "ver detalhes" pra abrir a tela cheia daquela categoria,
   igual o padrão de 2 cliques já usado no work.html) --- */
.services-list-view {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg);
}
/* "palco" com a proporção do design (1920x1080) — igual .clients-stage em
   style.css — pra a figura decorativa e a foto ficarem exatamente na posição
   e no tamanho do Figma (que variam bastante de categoria pra categoria),
   sempre alinhadas com a lista de nomes, em vez de cada uma flutuando solta
   com posição fixa em px/vw */
.services-list-stage {
  position: relative;
  width: min(1600px, 94vw);
  aspect-ratio: 1920 / 1080;
}
.services-list-deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  transition: left .6s cubic-bezier(.19,1,.22,1), top .6s cubic-bezier(.19,1,.22,1),
    width .6s cubic-bezier(.19,1,.22,1), height .6s cubic-bezier(.19,1,.22,1),
    opacity .3s ease, transform .6s cubic-bezier(.19,1,.22,1);
}
.services-list-photo {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  transition: left .6s cubic-bezier(.19,1,.22,1), top .6s cubic-bezier(.19,1,.22,1),
    width .6s cubic-bezier(.19,1,.22,1), height .6s cubic-bezier(.19,1,.22,1),
    opacity .3s ease, transform .6s cubic-bezier(.19,1,.22,1);
}
.services-list-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.services-list {
  position: absolute;
  z-index: 2;
  left: 41%;
  top: 50%;
  transform: translateY(-50%);
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 5.5vw, 78px);
}
.services-list li {
  font-family: var(--font-mono);
  font-size: clamp(16px, 2.1vw, 34px);
  font-weight: 400;
  text-transform: uppercase;
  /* sem tracking extra — no Figma esse texto (fonte mono) não tem letter-
     spacing adicional, só o espaçamento natural da fonte.
     Era um cinza fixo (#8d8e96) — trocado por "--fg" com opacidade (a
     mesma relação de brilho, ~55%: rgba(255,255,255,.55) sobre o "--bg"
     escuro dá quase exatamente #8d8e96), assim o cinza acompanha o tema
     em vez de ficar sempre nessa cor fixa */
  color: var(--fg);
  opacity: .55;
  transition: color .3s ease, opacity .3s ease, font-weight .15s ease;
}
.services-list a { color: inherit; cursor: pointer; }
.services-list li.is-selected {
  color: var(--fg);
  opacity: 1;
  /* pedido do usuário: o tamanho aumentando muito no hover ficou ruim — em
     vez de crescer (era clamp(22px,3.2vw,48px), quase o dobro do tamanho
     normal), agora só o peso muda, mesmo tamanho de sempre.
     Era 700 (bold, grosso demais), depois 600 (semibold, ainda grosso
     demais) — reduzido pra 500 (medium) */
  font-weight: 500;
}
.services-list li.is-selected a {
  text-decoration: underline;
  text-underline-offset: .18em;
}
/* --- detalhe de uma categoria: foto + moldura + título + lista, esmaece e
   sobe ao rolar, revela "count with" + logos embaixo --- */
.services-scroller {
  position: relative;
  height: 220vh;
}
.services-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
/* foto e colchete: fixos na tela (não presos ao .services-sticky, que só é
   "sticky" dentro do range do .services-scroller) — assim continuam visíveis
   até o fim da página dessa categoria, inclusive depois do "count with"
   aparecer, só esmaecendo a opacidade (ver updateStickies em services.js) */
.services-photo {
  position: fixed;
  z-index: 1;
  left: 20%;
  top: 28.24%;
  width: 43.49%;
  height: 43.47%;
  overflow: hidden;
}
.services-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* colchete deitado: mesmo motivo "[" recorrente do site (about/contact/work),
   3 lados só — sem a borda de baixo. */
.services-bracket {
  position: fixed;
  z-index: 1;
  left: 36.61%;
  top: 18.56%;
  width: 53.75%;
  height: 33.49%;
  border: 20px solid var(--fg);
  border-bottom: none;
  pointer-events: none;
}
/* iconezinho decorativo no canto superior direito do colchete, um por
   categoria — esse sim some de vez (opacidade até 0) ao rolar */
.services-detail-icon {
  position: fixed;
  z-index: 2;
  left: 88.4%;
  top: 11.1%;
  width: clamp(26px, 2.1vw, 40px);
  height: auto;
  pointer-events: none;
}
.services-heading {
  position: absolute;
  z-index: 1;
  left: 41%;
  top: 42.87%;
  margin: 0;
  font-family: var(--font-mono);
  /* Figma usa peso "regular" (não negrito) pro título da categoria */
  font-weight: 400;
  font-size: clamp(16px, 2.1vw, 34px);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: .15em;
  color: var(--fg);
  white-space: nowrap;
  will-change: transform, color;
}
.services-detail-list {
  position: absolute;
  z-index: 1;
  right: 14.58%;
  bottom: 10%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
  font-family: var(--font-mono);
  font-size: clamp(11px, .95vw, 15px);
  /* linhas bem mais espaçadas e sem tracking/opacidade extra, pra bater com
     o Figma (leading de ~50px pra um texto de 15px, texto 100% branco) */
  line-height: 3.3;
  text-transform: uppercase;
  color: var(--fg);
  will-change: transform, color;
}
/* fixo na tela (não dentro do sticky) pra continuar visível o scroll
   inteiro, igual o hambúrguer/ícones ao lado */
.services-back {
  position: fixed;
  z-index: 500;
  left: clamp(64px, 6vw, 96px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-menu);
  font-size: 20px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: .85;
  transition: opacity .25s ease, visibility .25s ease;
}
.services-back:hover { opacity: 1; }
body.menu-open .services-back {
  opacity: 0;
  visibility: hidden;
}
.services-back .chevron { width: 20px; height: 20px; }
.services-logo {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 3.52%;
  transform: translateX(-50%);
  width: clamp(90px, 7.2vw, 138px);
}
.services-logo img { width: 100%; height: auto; display: block; }

/* "scroll down": convite pra rolar, alinhado à esquerda com o colchete e o
   "count with"/primeiro logo (mesmo left:36.61% dos dois, ver
   .services-bracket/.services-countwith) — pedido do usuário, com print de
   referência. Fixo na tela (mesmo padrão de .services-back/.services-logo
   etc.) e esmaecido pelo scroll em updateStickies() (services.js). */
.services-scroll-down {
  position: fixed;
  z-index: 2;
  left: 36.61%;
  bottom: clamp(32px, 5vw, 56px);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 1;
  transition: opacity .2s ease;
}
.services-scroll-down-chevron {
  width: 18px;
  height: 18px;
  animation: services-scroll-bounce 1.6s ease-in-out infinite;
}
@keyframes services-scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .services-scroll-down-chevron { animation: none; }
}

/* --- count with + logos das produtoras da categoria --- */
.services-countwith {
  position: relative;
  display: flex;
  align-items: center;
  /* alinhado a partir da borda esquerda do colchete (.services-bracket,
     left:36.61%), não mais colado na borda direita da tela — pedido do
     usuário, com referência marcada num print */
  justify-content: flex-start;
  gap: clamp(28px, 4.5vw, 64px);
  flex-wrap: wrap;
  padding: clamp(48px, 8vw, 96px) var(--edge) clamp(80px, 12vw, 140px) 36.61%;
}
.services-logos {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3.4vw, 48px);
  flex-wrap: wrap;
}
/* "caixa" de cada logo — altura FIXA e igual pra todo mundo (20% menor que
   a home, .client-logo em style.css — pedido do usuário), igual o padrão da
   home: o logo em si (img ou .services-logo-pieces) fica menor que essa
   caixa, numa altura em % definida por logo (campo "scale" em
   services-data.js, mesmos valores usados em CLIENT_LOGOS/data.js pros
   mesmos arquivos) — sem isso, um logo estreito/vertical (ex.: Space
   Gorilla) forçado na MESMA altura de um logo largo saía bem menor/fininho,
   já que sua largura (proporcional à altura) ficava pequena demais */
.services-logo-box {
  /* 3x maior (pedido do usuário — tinham ficado quase sem visibilidade
     depois do ajuste de -20% em cima do tamanho já pequeno anterior) */
  height: clamp(48px, 5.76vw, 86.4px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s cubic-bezier(.19,1,.22,1);
}
.services-logo-box:hover { transform: scale(1.14); }
.services-logo-box > img {
  display: block;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.services-logo-pieces {
  position: relative;
  display: block;
  width: auto;
  max-width: 100%;
}
.services-logo-pieces img { height: auto; }
:root[data-theme="light"] .services-logo-box img { filter: invert(1); }

@media (max-width: 720px) {
  /* --- tela da lista (Figma node 14047:2) --- */
  .services-page-label { display: none; }
  /* base (desktop) é "display:flex" (centraliza logo/palco como uma LINHA,
     lado a lado) — errado pro empilhado vertical do mobile. Reescrito do
     zero (usuário achou o resultado anterior "estranho") — TODOS os
     elementos abaixo agora são "position:absolute", com "left"/"top"
     calculados a partir das MESMAS % do frame do Figma (393×852: left =
     x/393, top = y/852vh), relativos a ESTE container (".services-list-
     view", que vira "position:relative"), em vez de uma mistura de fluxo
     normal (margin) com absolute dentro de ".services-list-stage" (o que
     fazia cada elemento usar um referencial diferente e desalinhava tudo). */
  .services-list-view { display: block; position: relative; min-height: 100vh; }
  /* logo colado no canto, sempre visível (fixo — não rola com a página,
     mesmo tratamento usado em index/work no mobile: flush 0,0, sem a
     margem --edge normal) */
  .services-list-logo {
    position: fixed;
    z-index: 150;
    top: 0;
    left: 0;
    transform: none;
    width: clamp(110px, 33.27vw, 148px);
  }
  /* título "SERVICES" grande, só mobile — ver comentário no services.js
     (não dá pra reaproveitar ".services-page-label", que é filho de
     ".site-controls.left" e reposicionaria junto com o hambúrguer).
     left:9.67% / top:16.65vh = 38px/393 e 141.86px/852 no Figma */
  .services-list-title {
    display: block;
    position: absolute;
    left: 9.67%;
    top: 16.65vh;
    margin: 0;
    font-family: var(--font-menu);
    font-weight: 400;
    font-size: 30px;
    letter-spacing: .05em;
    color: var(--fg);
  }
  .services-list-deco,
  .services-list-photo { display: none; }
  /* "display:contents" tira ".services-list-stage" do modelo de caixa (sem
     virar uma caixa própria, sem estabelecer um novo referencial de
     posicionamento) — os filhos dela (claquete + lista) ficam então
     posicionados direto em relação a ".services-list-view", o mesmo
     referencial do logo/título acima, todos consistentes */
  .services-list-stage { display: contents; }
  /* painel decorativo "claquete" atrás da lista (Figma) — ver comentário no
     services.js; escondido no desktop (ver regra base, fora desta media
     query). left:7.95% / top:31.4vh / width:82.38% / height:37.2vh = inset
     do Figma (31.4%_9.67%_31.4%_7.95% relativo ao frame 393×852) */
  .services-list-claquete {
    display: block;
    position: absolute;
    z-index: 0;
    left: 7.95%;
    top: 31.4vh;
    width: 82.38%;
    height: 37.2vh;
    pointer-events: none;
    user-select: none;
  }
  /* lista de categorias — left:15.19% / top:40.22vh (inset do Figma
     40.22%_16.9%_13.77%_15.19%). "right" NÃO usa o 16.9% original do
     Figma — nessa largura o nome mais longo ("Produção & Conteúdo"/
     "Production & Content") quebrava em 2 linhas (o Figma é feito pra um
     frame de 393px; textos PT/EN às vezes precisam de um pouco mais de
     espaço que o inglês original do mockup) — 10% dá a folga que falta
     sem mudar o "left"/alinhamento */
  .services-list {
    position: absolute;
    z-index: 1;
    left: 15.19%;
    right: 10%;
    top: 40.22vh;
    transform: none;
    align-items: flex-start;
    text-align: left;
    padding: 0;
    /* 64.985px de "line-height" no Figma pra cada nome de categoria (todos
       numa única coluna de texto, um por linha) ≈ 7.63vh num frame de
       852px — usado aqui como "gap" entre os <li>, equivalente visualmente */
    gap: 7.63vh;
  }
  .services-list li { font-size: 13px; }
  .services-list li.is-selected { font-size: 21px; }

  /* --- tela de detalhe de uma categoria (Figma nodes 14049:40/14052:99) --- */
  /* mesmo motivo do logo da lista acima — fixo, sempre visível */
  .services-logo {
    display: block;
    position: fixed;
    z-index: 150;
    top: 0;
    left: 0;
    transform: none;
    width: clamp(110px, 33.27vw, 148px);
  }
  /* "‹ SERVICES": fixo (sempre alcançável, mesmo rolado fundo na categoria —
     o "count with" fica bem mais abaixo, ver .services-countwith), mas
     abaixo da linha do logo/hambúrguer (Figma não divide essa linha com
     eles, ao contrário de work.html) */
  .services-back {
    display: flex;
    position: fixed;
    z-index: 150;
    left: 6%;
    top: 17vh;
    margin: 0;
  }
  /* o efeito "esmaece e sobe" ligado ao scroll (sticky + JS) depende de ter
     espaço de sobra pra rolar por cima do conteúdo fixo — no mobile o texto
     é alto o bastante (listas de até 8 itens) que isso sempre colidia com
     algo. Em vez de ficar ajustando percentuais que quebram de novo com
     texto maior, tira do sticky e empilha tudo em fluxo normal, igual foi
     feito no work.css pra página de detalhe do work. */
  .services-scroller { height: auto; }
  /* referencial ÚNICO pra tudo que precisa ficar sobreposto/encaixado na
     foto (foto, colchete, título) — mesma técnica usada na tela da lista
     (ver ".services-list-view" acima): cada um vira "position:absolute",
     com "top"/"left" calculados a partir das MESMAS % do frame do Figma
     (393×852: left = x/393, top = y/852vh), todos relativos a ESTE
     container. Evita a fragilidade da versão anterior (margin negativo
     "no olho", que não batia com o Figma de verdade — usuário reportou
     texto/colchete faltando ou fora do lugar). */
  .services-sticky {
    position: relative;
    height: auto;
    overflow: visible;
    /* padding-top (não margin-top no filho!) empurra ".services-detail-
       list" pra baixo — um "margin-top" no PRIMEIRO filho em fluxo normal
       colapsa com o margin do PAI (rigra clássica do CSS), "vazando" pra
       fora e empurrando ESTE elemento inteiro (não só o filho) — foi
       exatamente esse bug que fez tudo (foto/colchete/título, todos
       "position:absolute" relativos a este elemento) aparecer 56.92vh mais
       pra baixo do que deveria. Padding nunca colapsa, então fica seguro. */
    padding: 56.92vh 0 48px;
  }
  /* foto cheia, ponta a ponta (igual ao vídeo de work.html no mobile).
     top:24.57vh / height:26.88vh = 209.37px/852 e 229px/852 no Figma.
     "opacity" sem "!important" de propósito (era "1 !important" antes) —
     pedido do usuário: escurecer com o scroll, igual o desktop (ver
     updateStickies() em services.js, ramo novo pro mobile) precisa
     escrever nela dinamicamente */
  .services-photo {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 24.57vh;
    right: auto; bottom: auto;
    width: 100%;
    height: 26.88vh;
    opacity: 1;
  }
  /* colchete encaixando na foto (Figma "tela-aberta", node 14049:40) —
     moldura de 3 lados (esquerda+direita+baixo, ABERTA EM CIMA — o
     oposto do ".menu-bracket" do site, que é aberto embaixo), do mesmo
     jeito que os outros colchetes do site (about/contact/work): border
     lisa, sem imagem nenhuma. top:36.97vh/height:14.48vh = 314.99px/852 e
     123.37px/852 no Figma — o fundo dele bate exatamente com o fundo da
     foto (24.57+26.88 = 51.45vh ≈ 36.97+14.48 = 51.45vh), emoldurando a
     parte de baixo dela, onde o título entra (ver .services-heading).
     "transform"/"opacity" sem "!important" (eram "none/1 !important"
     antes) — pedido do usuário: o colchete "vindo de cima pra baixo" ao
     abrir a categoria + escurecendo com o scroll (ver
     playMobileCategoryEnter()/updateStickies() em services.js) precisam
     escrever nos dois dinamicamente */
  .services-bracket {
    display: block;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 36.97vh;
    right: auto; bottom: auto;
    width: 100%;
    height: 14.48vh;
    border: 13px solid var(--fg);
    border-top: none;
    transform: none;
    opacity: 1;
  }
  .services-detail-icon,
  .services-scroll-down { display: none; }
  /* título sobreposto na parte de baixo da foto, dentro do colchete
     (Figma). left:15.19%/right:16.9%/top:40.22vh = mesmo inset do Figma
     (40.22%_16.9%_?_15.19% relativo ao frame 393×852) — text-shadow
     garante legibilidade em cima de qualquer trecho mais claro da foto. */
  .services-heading {
    position: absolute !important;
    z-index: 3;
    left: 15.19%;
    right: 16.9%;
    top: 40.22vh;
    bottom: auto;
    margin: 0;
    font-size: 18px;
    white-space: normal;
    text-align: left;
    text-shadow: 0 1px 8px rgba(0,0,0,.7), 0 0 24px rgba(0,0,0,.5);
  }
  /* iconezinho "claquete" perto da lista de sub-serviços (Figma).
     left:84.76%/width:4.71% = 333.09px/393 e 18.5px/393 no Figma. Mesmo
     referencial acima (relativo a ".services-sticky") — sem risco de
     sumir na troca de idioma (list.innerHTML='' em applyLang()) porque
     não é filho da lista, é posicionado por conta própria.
     "top" NÃO é o 57.03vh do Figma (quase idêntico ao topo da lista,
     56.92vh) — nessa implementação (cada item é um <li> raso, sem o
     "padding"/leading que o bloco de texto único do Figma tinha) isso
     fazia o ícone cair EM CIMA do primeiro item ("Colaborações" etc.),
     sobrepondo o texto — usuário reportou com print. Subido pra 53.5vh,
     com uma folga de verdade acima da lista. */
  .services-detail-claquete {
    display: block;
    position: absolute;
    z-index: 2;
    top: 53.5vh;
    left: 84.76%;
    width: 4.71%;
    height: auto;
    pointer-events: none;
  }
  /* lista de sub-serviços alinhada à direita (Figma) — continua em fluxo
     normal (não position:absolute como os de cima): sua altura varia por
     categoria (6 a 8 itens), então ela quem decide a altura de
     ".services-sticky" (que agora só tem posicionados/escondidos além
     dela). O "top" (56.92vh) já vem do padding-top de ".services-sticky"
     acima (não dá pra usar margin-top aqui — colapsaria com o pai, ver
     comentário lá). NEM "left" NEM "right" são mais os do Figma
     (47.48%/20.97%) — o Figma tem o bloco (lista + logos das produtoras)
     centrado em ~64% da largura; usar esse "right" original deixava a
     coluna larga demais pro texto (nomes mais longos, tipo "Campanhas
     Publicitárias", quebravam em 2 linhas — só ~118px disponíveis, precisa
     de ~155px) — então antes ela tinha ido pra "right:10%" (~68.7% de
     centro) só pra resolver isso, mas ficou longe demais do centro do
     Figma. Reequilibrado: "right:15%"/"left:41%" — mais perto do centro
     do Figma (~66%) sem voltar a quebrar a maioria dos itens (só o mais
     comprido de todos, "Operações Criativas Integradas"/"Integrated
     Creative Operations", ~200px, ainda quebra — mesmo tipo de exceção já
     aceita antes com "Conteúdo para Redes Sociais") */
  .services-detail-list {
    position: static;
    left: auto; right: auto; top: auto; bottom: auto;
    width: auto; height: auto;
    margin: 0 15% 0 41%;
    text-align: right;
    transform: none !important;
    color: var(--fg) !important;
    opacity: 1 !important;
  }

  /* logos das produtoras: MESMA borda direita da lista de sub-serviços
     (Figma: as 2 caixas — lista de sub-serviços e "logos-produtoras" —
     terminam praticamente na mesma borda direita) — pedido do usuário, "o
     texto alinhado com os ícones das produtoras". Um por linha, alinhado
     à direita (não mais centralizado). ".services-countwith" só tem 1
     filho de verdade (".services-logos", ver buildLogos() em
     services.js) — quem precisa virar coluna é ELE, não o wrapper de
     fora */
  .services-countwith { flex-direction: column; align-items: flex-end; padding: 48px 15% 48px 6%; }
  .services-logos { flex-direction: column; align-items: flex-end; gap: 32px; }
}