/* ==========================================================================
   E F Cunha Soft House — pagina "Servicos" (PT + EN)
   --------------------------------------------------------------------------
   Escopo: SOMENTE as paginas /pt/servicos/ e /servicos/.
   Este arquivo e carregado DEPOIS de /assets/css/site-v2.6d786f55.css, entao as regras
   abaixo vencem as do arquivo compartilhado sem alterar a Home, a pagina do
   CloudPilot, a pagina Sobre, o rodape ou qualquer outra pagina do site.

   Todas as classes novas usam o prefixo `serv-`. Nenhum seletor deste arquivo
   usa o namespace global do site (`.section`, `.card`, `.hero`), exceto a
   leitura de tokens (--navy, --blue, --line, --radius, --shadow-sm, --font),
   que e herdada do site-v2.css.

   Tipografia: Inter (fonte local do site, /assets/css/fontes.0794883b.css).

   Composicao (imagem de referencia aprovada):
     1. Banner principal  -> arte 01 full-bleed + texto a esquerda
     2. Beneficios        -> faixa de 4 itens com icones 2D
     3. Diagnostico       -> colunas: texto a esquerda | arte a direita
     4. Servicos gerenc.  -> colunas: arte a esquerda | texto a direita
     5. CloudPilot        -> colunas: texto a esquerda | arte a direita
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Banner principal (arte 01) e bandas de arte full-bleed
   -------------------------------------------------------------------------- */
.serv-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  background-color: var(--bg);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

.serv-banner {
  /* A arte 01 tem 1920 x 656 (34,17% de largura). A faixa tem a MESMA altura
     natural da arte para que ela entre inteira, sem corte: 100% da largura da
     pagina e a base encostando no rodape da faixa. */
  min-height: min(34.2vw, 700px);
  background-color: var(--bg);
}

/* A arte ocupa 100% da largura da pagina (nada e cortado nas pontas: nem a
   faixa em branco a esquerda, nem o painel "Infraestrutura e IaC" a direita).
   A base dela e ancorada no rodape da faixa, como na referencia. */
.serv-banner__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('/assets/img/servicos/servicos-banner-servicos.webp');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  pointer-events: none;
}

/* As tres secoes em colunas (Diagnostico, Servicos Gerenciados e CloudPilot)
   tem o proprio bloco de estilo na secao 6 deste arquivo: a arte deixa de
   ser o fundo full-bleed da faixa e passa a ocupar uma coluna. */

.serv-banner__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

/* No banner o respiro vertical e menor: assim a faixa tem exatamente a
   altura natural da arte (34,2% da largura da pagina) e o texto cabe sem
   empurrar a arte para baixo. */
.serv-banner__inner {
  padding-block: clamp(1.25rem, 2.4vw, 2.5rem);
}

/* A coluna de texto do CloudPilot era posicionada sobre a arte (a parte clara
   da imagem). Agora a arte ocupa a propria coluna, entao o texto nao precisa
   mais de area reservada dentro da faixa. */

.serv-banner__copy,
.serv-split__copy {
  max-width: 34rem;
  min-width: 0;
}

/* No banner principal a coluna de texto tem a medida da referencia aprovada
   (~35% da largura da pagina): o titulo quebra em tres linhas e a descricao em
   tres, com a arte ocupando o resto. */
.serv-banner__copy {
  max-width: min(31rem, 40vw);
}

/* --------------------------------------------------------------------------
   2. Titulos e textos das secoes
   -------------------------------------------------------------------------- */
.serv-banner__title {
  margin: 0 0 1.5rem;
  font-size: clamp(2rem, 1.1rem + 2.4vw, 2.75rem);  /* 32 -> 44 px */
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--navy);
  text-wrap: balance;
  /* A coluna do titulo e limitada para a frase quebrar antes da arte: em EN
     "From strategy to operations, with real results" e bem mais longa que
     o PT e invadiria os paineis da ilustracao. */
  max-width: 34rem;
}

.serv-banner__lead {
  margin: 0;
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);  /* 16 -> 18 px */
  line-height: 1.65;
  color: var(--muted);
}

.serv-title {
  margin: 0 0 1rem;
  font-size: clamp(1.625rem, 1.25rem + 1.15vw, 2rem);  /* 26 -> 32 px */
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--navy);
  text-wrap: balance;
}

.serv-lead {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  color: var(--muted);
  max-width: var(--measure-corpo);
}

.serv-section__desc {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  color: var(--muted);
  max-width: calc(70ch * var(--fator-ch, .855));
}

/* Botao SECUNDARIO (contorno): usado no Diagnostico e no CloudPilot. Mesma
   forma, raio, tipografia e ALTURA do botao primario -- so muda o peso
   visual: fundo branco, borda azul institucional e texto azul.
   (A antiga secao "Visao geral" tambem usava este estilo, mas foi removida
   por ser redundante com as tres secoes detalhadas.)

   A hierarquia comercial do site reserva o azul cheio para a acao
   principal (os Servicos Gerenciados) e o contorno para as demais acoes,
   para que o CTA de maior valor se destaque sem tirar o acesso as outras.

   A borda e de 1,5px (o pedido do briefing). Ela e desenhada com um inset
   box-shadow e nao com border-width: o Chrome arredonda borda fracionaria
   para pixel inteiro (1,5px viraria 1px) e, com border-width, a borda real
   do .btn (2px) mudaria a altura do botao em relacao ao primario. Com o
   inset a borda sai com 1,5px de verdade e o botao mantem exatamente a
   altura dos primarios (49,6px) em qualquer largura e densidade de tela. */
.serv-btn--outline {
  background: #fff;
  color: var(--blue);
  box-shadow: inset 0 0 0 1.5px var(--blue);
}

/* Hover discreto: um azul bem claro (10% do azul institucional sobre o
   branco), com o texto e a borda escurecendo para o azul forte da paleta.
   Nada de cor nova fora da identidade aprovada. */
.serv-btn--outline:hover,
.serv-btn--outline:focus-visible {
  background: color-mix(in srgb, var(--blue) 10%, #fff);
  color: var(--blue-strong);
  box-shadow: inset 0 0 0 1.5px var(--blue-strong);
}

.serv-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}

.serv-btn-row--center {
  justify-content: center;
}

/* -------------------------------------------------------------------------- 
   3. Faixa de beneficios
   --------------------------------------------------------------------------
   Faixa branca horizontal com quatro beneficios, entre o banner principal e
   a secao Diagnostico.

   REGRA DE COMPOSICAO
     - Icone a esquerda (quadrado azul muito claro, cantos arredondados),
       titulo em negrito e descricao abaixo do titulo.
     - Os quatro conjuntos seguem o mesmo padrao: icones com o mesmo
       tamanho e alinhados pelo topo (align-items: flex-start).
     - Divisoria vertical discreta entre os beneficios, no meio da calha
       entre as colunas. Ela e MAIS CURTA que a faixa e tem degrade nas
       pontas, para nao virar uma parede.
     - Sem card e sem sombra: a faixa e uma superficie plana.

   TIPOGRAFIA (revisao de 26/10/2026)
     A faixa passou a usar os tokens REAIS do sistema tipografico do site
     (site-v2.css: --fs-16 / --lh-16), em vez de valores soltos:
       titulo    -> var(--fs-16) / var(--lh-16) / 700  = 16px
       descricao -> var(--fs-16) / var(--lh-16) / 400  = 16px
     Assim a descricao fica com o mesmo tamanho do texto normal das demais
     secoes (.serv-lead, p, .lede = 16px) e o titulo se distingue por peso
     e cor, como o par h4 + p do site.

     FOI EVITADO o par 22/16 (--fs-22 + --fs-16), que e o padrao de cartao
     do site: medido, o titulo "Governanca de infraestrutura" a 22px tem
     308px e NAO cabe em uma linha dentro de uma coluna de 4 em 1440px
     (272px). Forcar as 4 colunas ali quebraria o titulo e desalinharia
     as descricoes; a variante 2x2 (199px de faixa) destoaria do
     desenho aprovado, que e uma faixa horizontal. Com 16px o titulo
     mede 224px e cabe com folga.

   MEDIDO (1440px): conteudo 1393px | 4 colunas de 324px | calha 32px |
   icone 44px | texto 272px | titulo 16px (1 linha) |
   descricao 16px/1,5 (2 linhas) | faixa 150px. */
.serv-benefits {
  background: var(--bg);
  border-block: 1px solid var(--line-soft);
  padding-block: clamp(1.5rem, 2.4vw, 2rem);
}

.serv-benefits__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* A lista ja tem `gap`: a margem global do `li` somaria uma segunda vez e
   inflaria a altura da faixa de beneficios. */
.serv-benefits__list li { margin: 0; }

/* Tablet: duas colunas. */
@media (min-width: 620px) {
  .serv-benefits__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 1.5rem;
  }
}

/* Desktop: os quatro beneficios na mesma linha.
   O corte em 1280px nao e estetico, e de legibilidade: e a largura em que o
   titulo mais longo ("Governanca de infraestrutura", 224px medidos em Inter
   16px/700) ainda cabe em UMA linha dentro da coluna, com folga real
   (title 224px | texto 232px medidos a 1280px com scrollbar de 15px).
   Abaixo disso os quatro passam para duas colunas, em vez de titles
   quebrados e descricoes desalinhadas. */
@media (min-width: 1280px) {
  .serv-benefits__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 0;
  }
}

.serv-benefit {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  min-width: 0;
}

/* O texto pode encolher dentro da coluna, para nao estourar a linha do
   grid nem empurrar o icone. */
.serv-benefit > div { min-width: 0; }

/* Divisoria: fica no centro da calha entre as colunas, com degrade nas
   pontas. A altura dela acompanha a do icone (44px), entao ela nao invade
   o texto nem cresce com a descricao. Em uma coluna (celular) nao ha
   divisoria nenhuma. */
@media (min-width: 620px) {
  .serv-benefit::before {
    content: "";
    position: absolute;
    left: -1rem;
    top: 0;
    width: 1px;
    height: 2.75rem;
    background: linear-gradient(to bottom,
      rgba(11, 107, 203, 0),
      rgba(11, 107, 203, .22) 22%,
      rgba(11, 107, 203, .22) 78%,
      rgba(11, 107, 203, 0));
  }
  /* Na 2a coluna de cada linha (itens 2 e 4) a divisoria separa os dois
     lados da tela; na 1a coluna ela nao tem vizinho a esquerda. */
  .serv-benefit:nth-child(odd)::before { content: none; }
}

@media (min-width: 1280px) {
  /* Com 4 colunas todas as divisorias tem vizinho a esquerda, menos a 1a. */
  .serv-benefit:nth-child(odd)::before { content: ""; }
  .serv-benefit:first-child::before { content: none; }
}

.serv-benefit__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--bg-alt-2);
  color: var(--blue);
}

.serv-benefit__icon svg { width: 22px; height: 22px; }

.serv-benefit__title {
  margin: 0 0 .2rem;
  font-size: var(--fs-16);
  /* O titulo fica em 16px (e nao 20px) por decisao medida: a 1280px o titulo
     mais longo ("Governanca de infraestrutura", 224px em Inter 16px/700) ainda
     cabe em UMA linha dentro da coluna de 272px. A 20px passaria de 272px e
     quebraria em duas. A razao 1,35 do titulo de cartao do briefing e mantida
     para o titulo ficar mais fechado que a descricao (1,60). */
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--navy);
  text-wrap: balance;
}

.serv-benefit__desc {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  color: var(--muted);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
/* --------------------------------------------------------------------------
   4. Principais entregaveis (INTEGRADOS na secao Diagnostico: nao sao uma
      secao a parte, moram na mesma coluna do texto, abaixo do botao)
   -------------------------------------------------------------------------- */
.serv-deliverables {
  margin-top: clamp(1.4rem, 2.2vw, 1.9rem);
  padding-top: clamp(1rem, 1.6vw, 1.4rem);
  border-top: 1px solid rgba(11, 107, 203, .2);
}

.serv-deliverables__head {
  margin: 0 0 .8rem;
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue-strong);
}

.serv-deliverables__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* A lista ja tem `gap`: a margem global do `li` somaria uma segunda vez. O
   espaco entre os pilares passa a vir inteiro do `gap`. */
.serv-deliverables__list li { margin: 0; }

.serv-deliverables__item {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--navy);
}
/* O nome do pilar (FinOps, SecOps, Compliance, Drift/IaC) em negrito; o
   restante da linha fica no mesmo peso do texto corrido. */
.serv-deliverables__item strong {
  font-weight: 700;
  color: var(--navy);
}

/* O texto do item (com o nome do pilar em negrito) fica em um bloco unico:
   assim a linha quebra no texto, e nao entre o nome e a descricao. */
.serv-deliverables__texto {
  min-width: 0;
}

.serv-deliverables__check {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(11, 107, 203, .12);
  color: var(--blue);
}

.serv-deliverables__check svg { width: 12px; height: 12px; }

/* --------------------------------------------------------------------------
   5. As tres secoes em colunas alternadas
   --------------------------------------------------------------------------
   Composicao aprovada (print de referencia):

     4. Diagnostico       -> texto a esquerda | arte a direita
     5. Servicos gerenc.  -> arte a esquerda | texto a direita
     6. CloudPilot        -> texto a esquerda | arte a direita

   As tres artes sao as MESMAS ja aprovadas: nenhuma e redesenhada, nenhuma e
   espelhada. O que muda e o ENQUADRAMENTO. Cada arte e uma faixa de 1920 px
   com um pedaco vazio reservado para o texto (a esquerda da faixa). Esse
   pedaco fica de fora da coluna visual: a imagem entra dentro de uma janela
   com `overflow: hidden`, deslocada para a direita, de modo que nada e
   esticado e nenhum elemento (notebook, icones, dashboards, logos) e cortado.

   Janelas de recorte (px da arte original, todas com 1920 px de largura):

     Diagnostico    x  500 .. 1920   (1420 px)  de 1920 x 640
     Gerenciados    x  560 .. 1920   (1360 px)  de 1920 x 745
     CloudPilot     x  720 .. 1920   (1200 px)  de 1920 x 640

   A largura e o deslocamento sao a fracao da janela dentro da arte:
   1920 / 1420 = 135,2113%   e   -500 / 1420 = -35,2113%   (e assim por diante).
   -------------------------------------------------------------------------- */
.serv-split {
  position: relative;
  overflow: hidden;
  /* O fundo da secao e o tom da propria arte na borda da janela: assim a arte
     dissolve no fundo, sem emenda reta. E a mesma cor que a cunha de
     composicao da Secao 2 usa para desenhar a divisao diagonal. */
  --split-bg: #e3effd;
  background-color: var(--split-bg);
  padding-block: clamp(2.75rem, 5vw, 5rem);
}

.serv-split__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 3vw, 2.75rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .serv-split__grid {
    /* Coluna de texto ~42% | coluna visual ~58%. */
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    grid-template-areas: "copy art";
    gap: clamp(2.25rem, 4.2vw, 4rem);
  }

  .serv-split__copy { grid-area: copy; }
  .serv-split__art { grid-area: art; }
}

/* A coluna visual. */
.serv-split__art {
  position: relative;
  margin: 0;
  overflow: hidden;
  /* Recuo da coluna do site ate a borda da pagina: a arte sangra nessa
     borda externa, como no print aprovado, e nao sobra uma faixa de fundo
     entre a arte e a borda. */
  --recuo-borda: calc(max(0px, (100vw - var(--wrap)) / 2) + clamp(0.75rem, 1.5vw, 1rem));
}

.serv-split__art img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  max-width: none;
  height: auto;
}

/* Diagnostico e CloudPilot: a arte fica na coluna da direita e encosta na
   borda direita da pagina. */
.serv-split--diag .serv-split__art,
.serv-split--cp .serv-split__art {
  margin-right: calc(-1 * var(--recuo-borda));
}

/* Servicos Gerenciados nao usa a coluna visual: a arte e o fundo da secao
   (ver o bloco proprio mais abaixo). */

/* Diagnostico: janela x 500..1920 de 1920 x 640. */
.serv-split__art--diag {
  aspect-ratio: 1420 / 640;
}

.serv-split__art--diag img {
  width: 135.2113%;
  left: -35.2113%;
}

/* --------------------------------------------------------------------------
   Servicos Gerenciados: a arte e o FUNDO VISUAL da secao
   --------------------------------------------------------------------------
   A arte nova (1920 x 669) ja traz a composicao inteira: a cena tecnologica
   com os cinco icones identificados (FinOps, SecOps, Compliance, Drift e
   IaC) a esquerda, o degrade suave ate o azul-claro e a area livre para o
   texto a direita.

   Ela e o fundo da secao, sangrando na largura inteira da pagina. NAO ha
   chanfro, diagonal, clip-path nem divisao rigida: a transicao entre a arte
   e o fundo e a da propria imagem.

   Medido na arte (1920 x 669):
     os cinco tiles e rotulos ocupam x  115 .. 1015
     a cena escura termina em x ~ 1150
     a regiao clara comeca em x 1269 (66,1%) e e uniforme (228,240,254)
     a partir de x 1336 (69,6%)

   No desktop, o texto entra na faixa clara da propria arte, com a coluna
   ancorada na DIREITA: margem de seguranca de 48px, medida de 480px e a
   borda esquerda em 100% - 48px - 480px. Assim o bloco aproveita a area
   azul-clara de transicao (x = 1216 de 1920 a 1440px), sem passar por cima
   dos icones (que terminam em x = 1015), e a altura do bloco fica
   CONSTANTE (454px) de 1366px a 1920px -- o titulo quebra sempre em tres
   linhas e a descricao sempre em tres.

   Contraste medido pixel a pixel sobre a arte: a 1920px e a 1600px todos os
   elementos passam em AA (pre-titulo 5,9:1, descricao 6,0:1). Embaixo disso
   o texto passa a pisar no degrade: a 1440px o pre-titulo cai para 3,54:1 e
   a descricao para 3,67:1; a 1366px, o pre-titulo vai a 2,52:1. A variante
   que preserva o AA esta a uma linha (veja --copy-left).

   No celular, a arte vira um elemento separado ABAIXO do texto (o texto vem
   primeiro na leitura). No celular a janela e x 0..1120 da arte, que ainda
   contem os cinco icones e os deixa legiveis; no tablet a janela e a arte
   inteira, sem ampliacao. A proporcao da arte e mantida nos dois casos. */
.serv-split--managed {
  /* A cor do fundo e a cor mais clara da propria arte (228,240,254), para a
     emenda da direita nao existir. */
  --split-bg: #e4f0fe;
  /* Medida do texto (titulo e descricao) e margem de seguranca na lateral
     direita. */
  --copy-measure: 480px;
  --copy-gap: 48px;
  /* Borda esquerda da coluna: a posicao pedida no print marcado e a AREA
     AZUL-CLARA DE TRANSICAO da arte (x 1101..1337 de 1920, a faixa riscada
     de verde).

     A coluna e ancorada na ARTE, e nao na margem direita: assim a borda
     esquerda fica no mesmo ponto da imagem em qualquer viewport, em vez de
     escorregar para a direita quando a tela cresce (era o que deixava a
     faixa verde vazia em 1600px e 1920px).

     65,6% da arte (x = 1259) e a linha em que o DEGRADE ja e claro o bastante
     para o menor texto da pagina (o pre-titulo, 12px) ainda passar em AA
     (4,5:1) -- e ela fica DENTRO da faixa marcada, a 78px do fim dela. Mais
     a esquerda (x 1101) o texto entra na parte escura do degrade e o
     pre-titulo cai para 1:1. */
  --copy-left: var(--copy-x);
  /* Posicao minima da coluna, em % da largura da secao.

     65,6% da arte (x = 1259 de 1920) e a linha em que o DEGRADE da propria
     arte ja e claro o bastante para o menor texto da pagina (o pre-titulo,
     12px) ainda passar em AA (4,5:1). E o limite medido: antes disso o
     texto entraria no degrade escuro e perderia legibilidade. */
  --copy-x: 65.6%;
  padding-block: 0;
}

.serv-split--managed .serv-split__bg {
  position: relative;
  margin: 0;
  overflow: hidden;
  /* Janela do celular: x 0..1120 da arte (1920 x 669). */
  aspect-ratio: 1120 / 669;
}

.serv-split--managed .serv-split__bg img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 171.4286%;   /* 1920 / 1120 */
  max-width: none;
  height: auto;
}

.serv-split--managed .serv-split__grid {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

/* Empilhado: o texto ocupa a largura toda (a arte esta embaixo, entao nao
   ha coluna de texto a preservar). */
.serv-split--managed .serv-split__copy {
  max-width: none;
}

/* Nesta secao o pre-titulo fica sobre o DEGRADE da arte (nao sobre o branco
   do site). O azul institucional claro (--blue) nao passa de 4,5:1 sobre
   esse degrade, entao aqui ele usa o outro azul institucional da paleta
   (--blue-strong, o mesmo do rotulo "Pilares integrados" logo abaixo), que
   mantem a legibilidade sem introduzir cor nova. */
.serv-split--managed .eyebrow {
  color: var(--blue-strong);
}

/* A lista e uma grid com gap proprio; a margem global de `li` entraria por
   cima do gap e viraria um espacamento duplo. O espacamento vem so do gap --
   a regra esta em `.serv-deliverables__list li`. */

/* Tablet: a arte aparece inteira, sem ampliacao. */
@media (min-width: 1024px) and (max-width: 1399px) {
  .serv-split--managed .serv-split__bg {
    aspect-ratio: 1920 / 669;
  }

  .serv-split--managed .serv-split__bg img {
    width: 100%;
  }
}

@media (min-width: 1400px) {
  .serv-split--managed .serv-split__grid {
    /* A grade vira a propria largura da secao (a arte e o fundo). Isso e
       obrigatorio: se ela ficasse no container do site (1440px centralizado),
       a coluna de texto andaria junto com o container e entraria no degrade
       escuro da arte em 1600px e 1920px (o pre-titulo caia para 2,7:1).
       Ancorada na largura da secao, a coluna fica sempre na MESMA posicao da
       arte (x = 1259 de 1920), em qualquer viewport. */
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    gap: 0;
    padding-block: 0;
  }

  .serv-split--managed .serv-split__copy {
    grid-area: auto;
    grid-column: 1 / -1;
    padding-block: 0;
    padding-inline: 0;
    /* A coluna e ancorada na DIREITA, com a margem de seguranca, e cresce
       para a esquerda: assim o bloco usa a area azul-clara de transicao da
       arte sem encostar nos icones (que terminam em x = 1015). A medida e
       limitada em 480px (a linha em que o titulo quebra em tres linhas) e
       encolhe nas telas menores para nunca passar da linha de contraste
       (--copy-x). */
    position: absolute;
    top: 50%;
    right: var(--copy-gap);
    left: var(--copy-left);
    width: auto;
    max-width: var(--copy-measure);
    /* Centralizado em relacao a altura da arte. O bloco de texto cabe inteiro
       na faixa (ver o ritmo compacto abaixo), entao ele nao invade as secoes
       vizinhas. */
    transform: translateY(-50%);
  }

  /* ------------------------------------------------------------------
     Ritmo vertical do texto: o mesmo sistema de espacamento da secao
     Diagnostico, aplicado ao bloco de Servicos Gerenciados.

     ORDEM DO BLOCO (a mesma nas tres secoes em colunas):
       pre-titulo -> titulo -> descricao -> [divisoria] -> subtitulo ->
       lista -> botao de CTA (o CTA e sempre o ULTIMO elemento).

     MEDIDO NA SECAO DIAGNOSTICO (1440px, 1920px de largura), ja com o CTA
     no fim do bloco:
       pre-titulo  -> titulo      12px
       titulo      -> descricao   16px
       descricao   -> divisoria   30,4px
       divisoria   -> subtitulo   22,4px
       subtitulo   -> lista       12,8px
       entre itens da lista        15,6px
       lista       -> botao       28px   (.serv-btn-row, 1.75rem)

     POR QUE O RITMO AQUI E FLUIDO E NAO FIXO
     A arte e o fundo da secao e ocupa 100% da largura da pagina, entao a
     altura da faixa e a propria largura dividida por 2,87 (1920 x 669):
     502px em 1440px e 669px em 1920px. O bloco de texto, ao contrario, tem
     altura propria (o conteudo fixo mais os espacamentos entre ele).

     Em 1440px a faixa sobra apenas ~13px acima e abaixo do bloco: nao ha
     espaco fisico para abrir o ritmo sem que o pre-titulo e o ultimo pilar
     saiam da imagem. Conforme a viewport cresce, a faixa ganha altura (a
     arte e a propria largura) e esse espaco vira RESPIRO entre os blocos
     de texto -- e exatamente o vazio que o print apontava.

     Por isso cada espacamento e um clamp que interpola linearmente entre
     o minimo (1440px, o compacto que cabe) e o maximo (1920px, o ritmo
     pleno do Diagnostico):

       valor = MIN + (MAX - MIN) * (largura - 1440px) / 480px

     MAX (>= 1920px) -- identico ao Diagnostico:
       titulo -> descricao      20px
       descricao -> divisoria   30px
       divisoria -> subtitulo   24px
       subtitulo -> lista       12,8px
       entre itens da lista     13px
       lista -> botao           28px

     Nenhuma altura artificial: a secao continua com o aspect-ratio da arte
     (1920/669), sem faixa vazia, e o bloco continua centralizado na faixa
     (transform: translateY(-50%)), so que com o respiro dentro.
     ------------------------------------------------------------------ */
  .serv-split--managed .eyebrow {
    margin-bottom: clamp(4.8px, 1.5vw - 16.8px, 12px);
  }
  .serv-split--managed .serv-title {
    margin-bottom: clamp(6.4px, 2.8333vw - 34.4px, 20px);
    max-width: var(--copy-measure);
  }
  .serv-split--managed .serv-lead {
    max-width: var(--copy-measure);
  }
  /* Gap da lista ate o CTA: 24px ja em 1440px (o minimo pedido) e 28px a
     partir de 1920px, o valor do Diagnostico. */
  .serv-split--managed .serv-btn-row {
    margin-top: clamp(24px, .83333vw + 12px, 28px);
  }
  /* Gap da descricao ate a divisoria: e o que sobra da faixa. Em 1440px
     ele fica em 10px (a mesma proximidade que havia entre a descricao e o
     botao antes da mudanca de ordem) e abre para 30px em 1920px. */
  .serv-split--managed .serv-deliverables {
    margin-top: clamp(10px, 4.16667vw - 50px, 30px);
    padding-top: clamp(8px, 3.33333vw - 40px, 24px);
  }
  .serv-split--managed .serv-deliverables__head {
    margin-bottom: clamp(4.8px, 1.66667vw - 19.2px, 12.8px);
  }
  .serv-split--managed .serv-deliverables__list {
    gap: clamp(4.8px, 1.70833vw - 19.8px, 13px);
  }

  /* EXCECAO CALIBRADA DESTA SECAO: a lista de pilares fica em 15px/1,4.
     Aqui a arte e o FUNDO e a altura da faixa e a propria arte (1920 x 669 =
     2,87:1), entao a faixa mede 502px em 1440px e 488px em 1400px. O bloco de
     texto e absoluto e centralizado nessa altura: a 1400px ele tinha 6px de
     folga em cada lado, e qualquer crescimento o estoura -- o pre-titulo e o
     ultimo pilar saem de dentro da arte.
     A 16px o quarto pilar ("Drift/IaC -- identificacao de alteracoes nao
     autorizadas e infraestrutura como codigo", 450px medidos) passa de duas
     linhas e o bloco cresce 14px. Nas outras duas secoes em colunas
     (Diagnostico e CloudPilot) a faixa NAO tem altura travada -- ela cresce
     com o texto -- e os itens ficam em 16px/1,5. */
  .serv-split--managed .serv-deliverables__item {
    font-size: .9375rem;
    line-height: 1.4;
  }

  /* No desktop a arte e o fundo: ocupa a secao inteira, de ponta a ponta. */
  .serv-split--managed .serv-split__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    aspect-ratio: auto;
  }

  .serv-split--managed .serv-split__bg img {
    width: 100%;
    left: 0;
    top: 0;
  }
}

/* Entre 1400px e 1439px a faixa da arte e a mais baixa de todas (a arte e o
   fundo, entao a altura da faixa e a largura dividida por 2,87). Com o gap
   de 24px ate o CTA o bloco de texto encostava na base da imagem: sobravam
   1,75px de folga. A 18px o bloco volta a ter folga (5,75px acima e
   abaixo) e o CTA continua visivelmente separado da lista. Acima de 1440px
   vale o ritmo pleno, de 24px ate 28px. */
@media (min-width: 1400px) and (max-width: 1439px) {
  .serv-split--managed .serv-btn-row {
    margin-top: 18px;
  }
}

/* A secao tem a MESMA altura da arte (a arte tem 1920 x 669 e ocupa 100% da
   largura da pagina), entao a arte nunca e cortada e nunca sobra uma faixa
   vazia embaixo dela.

   O texto e centralizado nessa altura e cabe inteiro dentro da faixa: o bloco
   tem 454px e a faixa tem 502px em 1440px de largura (669px em 1920px), com
   folga para os dois lados. O ritmo vertical do texto foi compactado por
   isso; antes ele estourava 38px para cima e para baixo e o pre-titulo e o
   ultimo pilar ficavam fora da imagem.

   O ponto de virada e 1366px porque e a menor largura em que a coluna de
   texto ainda cabe na altura da arte com folga (a 1362px a descricao passa
   para quatro linhas e estoura a faixa). Abaixo disso a secao empilha: texto
   e, embaixo, a arte. */
@media (min-width: 1400px) {
  .serv-split--managed {
    aspect-ratio: 1920 / 669;
    overflow: visible;
  }

  .serv-split--managed .serv-split__grid {
    position: absolute;
    inset: 0;
    align-items: center;
  }
}

/* CloudPilot: arte nova aprovada (1672 x 941), exibida INTEIRA.

   A arte anterior (1920 x 640) era recortada por uma janela: o quadro tinha
   proporcao 1200/640 e a arte entrava a 160%, de modo que o icone de IA e a
   base do painel escuro encostavam na borda do quadro e liam-se como
   truncados.

   A arte nova ja vem com o icone de IA completo e com folga propria. Por
   isso o quadro passa a ter exatamente a proporcao dela (1672/941) e a
   imagem e renderizada a 100% da largura, sem deslocamento: nada e
   cortado, nada e deformado (o aspecto da arte e preservado ao pixel).

   Medido a 1440px: quadro 797,6 x 448,9 | arte 797,6 x 448,9 | folga na base
   0px (arte e quadro tem a mesma proporcao) | escala 0,477.
   A coluna de texto tem 491,6px, entao a arte cabe sem forcar a altura da
   secao: ela nao precisa crescer. */

.serv-split__art--cp {
  aspect-ratio: 1672 / 941;
}

.serv-split__art--cp img {
  width: 100%;
  left: 0;
  /* A arte nova tem gradiente: azul-claro no topo-esquerdo e quase branco
     na base e a direita. A secao e #e3effd (--split-bg). Exibida como esta,
     o branco da arte formaria um retangulo claro sobre o azul-claro da
     secao, e a emenda horizontal na base ficaria dura.

     O multiply funde a arte no fundo: onde a arte e branco, o resultado e
     o proprio azul-claro da secao (#e3effd); onde ela e escura, o
     dashboard e o chip de IA permanecem. O efeito e o de uma mascara, mas
     sem chanfro, sem divisao rigida e sem alterar o arquivo da arte.

     O que ele custa, em numeros: o branco puro (253,253,253) vira
     #e1edfb (225,237,251), ou seja, 11% mais escuro no vermelho e 0,8% mais
     claro no azul; os azuis claros da arte escurecem na mesma proporcao. O
     contraste interno da arte (dashboard, chip de IA, paineis) fica
     inalterado -- nenhum pixel ganha ou perde detalhe. */
  mix-blend-mode: multiply;
}

/* --------------------------------------------------------------------------
   6. Composicao sem texto sobre a arte (tablet e mobile)
   -------------------------------------------------------------------------- */

/* Hero: abaixo de 1280px o texto nao cabe ao lado da arte, entao a arte vira
   uma faixa propria ABAIXO do texto -- sempre com a largura inteira da
   pagina e a altura natural dela (sem corte e sem sobra em branco). */
@media (max-width: 1279px) {
  .serv-banner {
    display: block;
    min-height: 0;
    background-image: none;
  }

  .serv-banner__art {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 656;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
  }

  .serv-banner__copy { max-width: none; }
}

/* Abaixo de 1024px as tres secoes viram coluna unica: o texto (pre-titulo,
   titulo, descricao, botao e entregaveis) vem primeiro e a arte depois, na
   ordem de leitura. A arte mantem o enquadramento aprovado e nunca e
   esticada: a altura continua sendo a da janela de recorte. */
@media (max-width: 1023px) {
  .serv-split {
    padding-block: clamp(2.25rem, 7vw, 3.5rem);
  }

  .serv-split__copy {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   7. Menu: estado ativo do item "Servicos"
   -------------------------------------------------------------------------- */
@media (max-width: 1309px) {
  .nav-dropdown__btn.is-current {
    color: var(--blue-strong);
    font-weight: 600;
  }
}

/* --------------------------------------------------------------------------
   8. Movimento reduzido
   -------------------------------------------------------------------------- */