/* ==========================================================================
   Página "Sobre" — E F Cunha Soft House
   --------------------------------------------------------------------------
   Camada de layout exclusiva da página Sobre. Não altera site-v2.css.

   A página segue a referência visual aprovada:
     1. Abertura institucional  (faixa com a arte do cubo EF)
     2. Missão, Visão e Valores (três cartões)
     3. Nossa atuação          (quatro frentes)
     4. Nossos produtos        (faixa azul + cartão do CloudPilot)
     5. Como trabalhamos       (fluxo de quatro etapas)
     6. Parcerias e oportunidades (faixa com a arte dos três cubos)
     7. Empresa e contato      (bloco institucional)

   As duas artes aprovadas entram como fundo das suas faixas, em uma única
   camada, ocupando 100% da largura da página. Todo texto é HTML/CSS e vive
   na região clara que a própria arte reserva — nenhum título, botão ou
   parágrafo é desenhado sobre os cubos ou sobre os ícones.

   A tipografia segue a tabela do briefing. Os tamanhos são fixos no desktop
   (como os títulos do design system, site-v2.css) e descem nas faixas de
   tablet e mobile:

     elemento                     desktop   tablet   mobile
     título do hero (H1)           48px      40px     32px
     títulos de seção (H2)         36px      30px     26px
     títulos de cartão (H3)        20px      19px     18px
     texto principal               18px      17px     16px
     descrições de cartão          16px      16px     16px
     etiquetas superiores          14px      14px     13px
     botões                        16px      16px     16px

   A margem lateral do conteúdo (4,8% da largura) e as alturas das faixas
   seguem as proporções medidas na referência aprovada.
   ========================================================================== */

/* --- 1. Escala da página ------------------------------------------------ */

.pagina-sobre {
  /* Tipografia — desktop. */
  --fs-h1: 3rem;         /* 48px */
  --fs-h2: 2.25rem;      /* 36px */
  --fs-h3: 1.25rem;      /* 20px */
  --fs-corpo: 1.125rem;  /* 18px */
  --fs-desc: 1rem;       /* 16px */
  --fs-eyebrow: .875rem; /* 14px */
  --fs-botao: 1rem;      /* 16px */

  /* Margem lateral do conteúdo: 4,8% da janela, como na referência. */
  --sobre-gutter: clamp(0.75rem, 1.5vw, 1rem);
  --sobre-recuo: calc(max(0px, (100cqw - var(--wrap)) / 2) + var(--sobre-gutter));
  /* Respiro entre as seções: uma única folga por quebra, como na referência. */
  --respiro: clamp(1.75rem, 3.4vw, 3.5rem);
  /* Disco do ícone: 6,3% da largura (faixa "Nossa atuação" e "Como trabalhamos"). */
  --raio-icone: clamp(3rem, 6.3vw, 7rem);
  /* Disco do ícone dentro dos cartões: 5,2% da largura. */
  --raio-icone-card: clamp(2.75rem, 5.2vw, 5.5rem);
  /* Seta do fluxo de trabalho. */
  --cor-seta: #bcd8f5;
}

/* A faixa de tablet entra abaixo de 1280px. O motivo é geométrico, não
   estético: a arte do hero tem proporção 2:1 e só pode ser aplicada como
   fundo de uma faixa mais larga que o dobro da altura sem ser cortada nas
   laterais. Entre 1024 e 1279px o texto em corpo de tablet (H1 40px, lede
   16px) cabe dentro dessa proporção — em corpo de desktop (H1 48px) a faixa
   cresceria e a arte perderia o ícone de gráfico à direita. */
@media (max-width: 1279px) {
  .pagina-sobre {
    --fs-h1: 2.5rem;         /* 40px */
    --fs-h2: 1.875rem;       /* 30px */
    --fs-h3: 1.1875rem;      /* 19px */
    --fs-corpo: 1.0625rem;   /* 17px */
    --fs-eyebrow: .875rem;   /* 14px */
  }
}
@media (max-width: 639px) {
  .pagina-sobre {
    --fs-h1: 2rem;           /* 32px */
    --fs-h2: 1.625rem;       /* 26px */
    --fs-h3: 1.125rem;       /* 18px */
    --fs-corpo: 1rem;        /* 16px */
    --fs-eyebrow: .8125rem;  /* 13px */
  }
}

/* O conteudo da pagina usa o container do site: `.wrap` (max-width --wrap,
   1440px, centralizado, com o gutter de 1.5vw limitado a 1rem). A pagina NAO
   estica o container para a janela inteira -- senao o logo do cabecalho, os
   titulos e a arte de cada faixa ficam mais largos que em todas as outras
   paginas. As duas faixas com arte full-bleed (abertura e Parcerias) mantem a
   ARTE em 100% da largura da janela, mas o TEXTO delas fica dentro deste
   mesmo container. */

/* O respiro vertical e definido por secao (abaixo). Aqui fica zerado para
   que cada faixa controle o proprio espacamento interno. */
.pagina-sobre .section { padding-block: 0; }
.pagina-sobre .section-head { margin-bottom: clamp(1.75rem, 3vw, 3rem); }
.pagina-sobre .section-head p:not(.eyebrow),
.pagina-sobre .lede {
  font-size: var(--fs-corpo);
  line-height: 1.65;
}

.pagina-sobre .eyebrow {
  font-size: var(--fs-eyebrow);
  line-height: 1.4;
  letter-spacing: .16em;
  margin-bottom: .85rem;
}
.pagina-sobre h1 {
  font-size: var(--fs-h1);
  line-height: 1.18;
  letter-spacing: -.025em;
}
/* A tipografia dos títulos vale para o conteúdo (dentro de <main>). O rodapé
   fica fora do <main> e tem tipografia própria (rodape.css). */
.pagina-sobre main h2 {
  font-size: var(--fs-h2);
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--navy);
}
.pagina-sobre main h3 {
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: -.01em;
}

/* --- 2. Padrões locais -------------------------------------------------- */

/* Disco do ícone: círculo azul muito claro com o ícone azul. */
.sobre-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--raio-icone);
  height: var(--raio-icone);
  border-radius: 50%;
  background: var(--bg-alt-2);
  color: var(--blue);
  flex: 0 0 auto;
}
.sobre-icone svg {
  width: 46%;
  height: 46%;
}

/* Botão com seta. */
.sobre-cta {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 3.25rem;
  padding: .8rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-botao);
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.sobre-cta:hover {
  background: var(--navy);
  color: #fff;
  transform: translateY(-1px);
}
.sobre-cta svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; }

/* Link textual com seta. */
.sobre-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  /* Area de clique confortavel: o alvo tem 24px de altura (WCAG 2.5.8). */
  min-height: 1.75rem;
  padding-block: .15rem;
  color: var(--blue-strong);
  font-weight: 600;
  font-size: var(--fs-botao);
  line-height: 1.25;
  text-decoration: none;
}
.sobre-link:hover { color: var(--navy); text-decoration: underline; }
.sobre-link svg { width: 1em; height: 1em; flex: 0 0 auto; }

/* Etiqueta pequena ("PRODUTO"). */
.sobre-tag {
  display: inline-block;
  padding: .25rem .8rem;
  border-radius: 999px;
  background: var(--bg-alt-2);
  color: var(--blue-strong);
  font-size: var(--fs-eyebrow);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* --- 3. Abertura institucional ------------------------------------------ */
/* A arte do topo é o FUNDO DA FAIXA DE ABERTURA: um único arquivo, em uma
   única camada, ocupando 100% da largura da página. O cluster de ícones fica
   na direita e o texto (título, lede e botão) na esquerda, sobre a região
   clara da arte. A altura da faixa segue a proporção da referência (36,5% da
   largura) e o enquadramento nunca corta o cubo: a arte é maior que a faixa e
   o corte cai só no céu, em cima e embaixo. */
.pagina-sobre .sobre-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  /* A faixa e o container de referencia: o `cqw` mede a largura dela, e nao a da
     janela (que inclui a barra de rolagem). Mesmo padrao do hero da Home. */
  container-type: inline-size;
  background: linear-gradient(180deg, #fbfcfe 0%, #f4f9ff 100%);
  border-bottom: 1px solid var(--line-soft);
  /* O respiro vertical é curto de propósito: a faixa precisa caber dentro da
     proporção 2:1 da arte (altura <= metade da largura) para que nenhum
     elemento gráfico seja cortado nas laterais. */
  padding-block: clamp(1.5rem, 2.6vw, 3.75rem);
}
.sobre-hero__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.sobre-hero__art picture,
.sobre-hero__art img {
  display: block;
  width: 100%;
  height: 100%;
}
/* A arte ocupa 100% da largura da faixa. A faixa e mais baixa que a arte
   (73% da altura dela), entao o `cover` corta apenas o ceu vazio em cima e a
   faixa diagonal clara embaixo: o cubo EF e os quatro icones ficam inteiros.
   O texto ocupa a regiao clara da esquerda, que o `cover` nao apaga. */
.sobre-hero__art img {
  object-fit: cover;
  object-position: center center;
}
.sobre-hero__texto {
  position: relative;
  z-index: 1;
  align-self: center;
}
/* A coluna de texto fecha na região clara da arte: o cluster de ícones começa
   por volta de 46% da faixa, e o texto precisa terminar antes dele. */
.sobre-hero__copy { max-width: none; }
.sobre-hero h1 {
  margin: 0 0 1.5rem;
  color: var(--navy);
}
.sobre-hero .lede {
  margin: 0;
  color: var(--muted);
  /* A coluna do hero e larga (766px em 1440px) e o lede a preenchia inteiro:
     isso dava 86 caracteres por linha, acima da faixa de 55-75. O teto de 66ch
     devolve ~65 caracteres por linha sem mexer na coluna nem na arte. */
  max-width: var(--measure-corpo);
}
.sobre-hero__cta { margin-top: 1.75rem; }

@media (min-width: 1280px) {
  /* A faixa tem a altura da referencia (37,5% da largura) e cresce quando o
     texto precisa de mais espaco -- assim a faixa nunca corta o botao. */
  .sobre-hero { min-height: clamp(26rem, 37.5vw, 45rem); }
  /* Fundo casando com a BORDA ESQUERDA da arte (amostrada: 249,250,254 no
     topo e 253,253,253 embaixo). Sem isso a emenda aparece como um degrau
     vertical de 5 a 8 unidades. A regra base tem especificidade maior, por
     isso o prefixo se repete aqui. */
  .pagina-sobre .sobre-hero {
    background: linear-gradient(180deg, #fbfcfd 0%, #fcfcfc 100%);
  }
  /* A arte ocupa os 3/4 da DIREITA da faixa, e nao a largura inteira. E' o que
     da o espaco para o texto ao lado: a arte encolhe, o cluster de icones vai
     para a direita e a coluna de texto cresce. A caixa da arte tem a mesma
     proporcao da original (2:1), entao a arte NAO e' cortada. */
  .sobre-hero__art {
    inset: 0 0 0 auto;
    width: 75%;
  }
  .sobre-hero__art img { object-position: right center; }
  /* A coluna de texto fecha na regiao clara da arte. Com a arte em 75% da
     faixa, o GRAFISMO dela (tracos, pontos, cubo e icones) comeca em 56% da
     largura da janela -- medido por pixel em tools-dev/medir_grafismo_hero.py.
     As faixas diagonais do ceu comecam antes, mas sao claras demais para
     atrapalhar o texto. A coluna vai ate o grafismo, com 24px de folga, e o
     recuo do texto e o do container do site. */
  .sobre-hero__copy {
    max-width: min(100%, calc(56cqw - var(--sobre-recuo) - 1.5rem));
  }
}
@media (max-width: 1279px) {
  /* No tablet e no celular a arte sai do fundo e vira uma faixa ABAIXO do
     texto: o texto vem primeiro, com a arte logo em seguida. A arte mantem
     a proporcao 2:1 da original e so o ceu vazio e cortado. */
  .sobre-hero__art {
    position: static;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    overflow: hidden;
  }
  .sobre-hero__art picture {
    position: static;
    display: block;
    height: auto;
  }
  .sobre-hero__art img {
    position: static;
    transform: none;
    width: 100%;
    height: auto;
    max-width: none;
    aspect-ratio: 1.95;
    object-fit: cover;
    object-position: center center;
  }
  .sobre-hero__texto { align-self: start; }
  /* Medida de linha confortavel: no layout empilhado o texto ocupa a largura
     toda, entao o titulo e o paragrafo recebem um limite de caracteres. */
  .sobre-hero__copy {
    max-width: min(100%, calc(68ch * var(--fator-ch, .855)));
  }
}

/* --- 4. Missão, Visão e Valores ----------------------------------------- */
/* Três cartões de largura equilibrada, com o ícone circular à esquerda do
   título e o texto abaixo. A seção encosta no fim da faixa de abertura. */
.pagina-sobre .sobre-essencia { padding-block: .75rem 2.5rem; }
.pilares {
  display: grid;
  gap: clamp(1rem, 1.6vw, 1.5rem);
  align-items: stretch;
}
@media (min-width: 900px) {
  .pilares { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pilar {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.6vw, 1.75rem);
  padding: clamp(1.5rem, 2vw, 2rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.pilar__head {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 1.4vw, 1.4rem);
}
.pilar .sobre-icone {
  width: var(--raio-icone-card);
  height: var(--raio-icone-card);
}
.pilar h3 {
  margin: 0;
  color: var(--navy);
  font-size: var(--fs-h3);
  letter-spacing: -.01em;
}
.pilar p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-desc);
  line-height: 1.6;
}

.valores {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .75rem;
}
.valores li {
  display: flex;
  align-items: flex-start;
  gap: .5em;
  margin: 0;
  font-size: var(--fs-desc);
  line-height: 1.6;
  color: var(--ink);
}
.valores svg {
  width: .95em;
  height: .95em;
  flex: 0 0 auto;
  color: var(--blue);
  margin-top: .3em;
}

/* --- 5. Nossa atuação --------------------------------------------------- */
/* A secao ocupa a largura toda da pagina; o ritmo vertical vem do respiro
   entre as secoes (bloco 1). */
.pagina-sobre .sobre-atuacao {
  padding-block: 0 2.75rem;
}
.sobre-atuacao .section-head { max-width: min(100%, 62ch); }

.atuacao {
  display: grid;
  gap: clamp(1.5rem, 2.4vw, 2.5rem);
}
@media (min-width: 640px) {
  .atuacao { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .atuacao { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.atuacao__item { position: relative; text-align: center; }
.atuacao__icon { margin-bottom: clamp(.9rem, 1.4vw, 1.25rem); }
.atuacao__item h3 {
  margin: 0 0 .5rem;
  color: var(--navy);
  letter-spacing: -.01em;
}
.atuacao__item p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-desc);
  line-height: 1.6;
}
/* Divisor vertical entre as frentes. */
@media (min-width: 900px) {
  .atuacao__item + .atuacao__item { padding-left: clamp(1rem, 1.8vw, 2rem); }
  .atuacao__item + .atuacao__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: .3rem;
    bottom: .3rem;
    width: 1px;
    background: var(--line-soft);
  }
}

/* --- 6. Nossos produtos ------------------------------------------------- */
/* Faixa azul clara de largura total: o texto abre a seção pela esquerda e o
   cartão do CloudPilot fica à direita. O cartão tem destaque, mas não compete
   com o Hero. */
.pagina-sobre .sobre-produtos {
  background: var(--bg-alt);
  padding-block: clamp(2rem, 4.8vw, 4.25rem) clamp(1.75rem, 3.6vw, 3rem);
}
.produtos {
  display: grid;
  gap: clamp(1.75rem, 3vw, 3rem);
  align-items: start;
}
@media (min-width: 980px) {
  .produtos { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}
.produtos h2 { margin: 0 0 1.1rem; }
.produtos .lede { margin: 0; max-width: var(--measure-corpo); }

.produto-card {
  display: grid;
  gap: clamp(1.25rem, 2vw, 2rem);
  padding: clamp(1.5rem, 2.2vw, 2.25rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
@media (min-width: 700px) {
  .produto-card {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: center;
  }
}
.produto-card__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 12px entre etiqueta, titulo, subtitulo, descricao e link (briefing:
     titulo de card -> descricao 12-16px). */
  gap: .75rem;
}
.produto-card h3 {
  margin: 0;
  font-size: clamp(1.5rem, 2.2vw, 2.5rem);
  line-height: 1.18;
  color: var(--navy);
  letter-spacing: -.02em;
}
.produto-card__sub {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
  font-size: var(--fs-desc);
  line-height: var(--lh-16);
}
.produto-card__desc {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-desc);
  line-height: 1.6;
}
.produto-card__art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* --- 7. Como trabalhamos ------------------------------------------------ */
/* O texto abre a seção pela esquerda e as quatro etapas ficam na direita,
   com o conector entre elas. */
.pagina-sobre .sobre-processo {
  padding-block: 2.25rem 4rem;
}
.processo-bloco {
  display: grid;
  gap: clamp(2rem, 3vw, 3rem);
  align-items: start;
}
@media (min-width: 1080px) {
  .processo-bloco {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
    gap: clamp(2rem, 3vw, 3.5rem);
  }
  .processo-bloco .section-head { margin-bottom: 0; }
}

.processo {
  --processo-gap: clamp(.75rem, 1.4vw, 1.5rem);
  display: grid;
  gap: var(--processo-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .processo {
    --processo-gap: clamp(1rem, 1.6vw, 1.75rem);
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.processo__step { text-align: center; position: relative; }
.processo__step .sobre-icone { margin: 0 auto clamp(.9rem, 1.4vw, 1.25rem); }
.processo__step h3 {
  margin: 0 0 .4rem;
  color: var(--navy);
  letter-spacing: -.01em;
}
.processo__step p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-desc);
  line-height: 1.6;
}
/* Conector entre as etapas: linha + seta, centrada no vão entre colunas. */
@media (min-width: 900px) {
  .processo__step + .processo__step::before {
    content: '';
    position: absolute;
    left: calc(var(--processo-gap) / -2 - 1.15rem);
    top: calc(var(--raio-icone) / 2 - 1px);
    width: clamp(1.1rem, 1.8vw, 1.8rem);
    height: 2px;
    background: var(--cor-seta);
  }
  .processo__step + .processo__step::after {
    content: '';
    position: absolute;
    left: calc(var(--processo-gap) / -2 + .55rem);
    top: calc(var(--raio-icone) / 2 - .35rem);
    width: .42rem;
    height: .42rem;
    border-top: 2px solid var(--cor-seta);
    border-right: 2px solid var(--cor-seta);
    transform: rotate(45deg);
  }
}

/* --- 8. Parcerias e oportunidades --------------------------------------- */
/* A arte aprovada é o FUNDO DA FAIXA: um único arquivo, em uma única camada,
   ocupando 100% da largura da página. Os três cubos ficam na direita e o
   texto na esquerda, sobre a região clara que a arte reserva. Nenhum gradiente
   extra é aplicado sobre a imagem e a cor de fundo dela é preservada. */
.pagina-sobre .sobre-parcerias {
  position: relative;
  overflow: hidden;
  display: grid;
  background: #f2f8ff;
  padding-block: 0;
}
.parcerias__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.parcerias__art picture,
.parcerias__art img {
  display: block;
  width: 100%;
  height: 100%;
}
/* A arte ocupa 100% da largura e a faixa tem a proporcao dela: nada e
   cortado. Os tres cubos ficam na direita e o texto, na esquerda, sobre a
   regiao clara. */
.parcerias__art img {
  object-fit: cover;
  object-position: center center;
}
.sobre-parcerias > .wrap {
  position: relative;
  z-index: 1;
  width: 100%;
}
.parcerias__grid {
  display: grid;
  gap: clamp(1.5rem, 2.4vw, 2.75rem);
  grid-template-columns: 1fr;
}
@media (min-width: 1280px) {
  .parcerias__grid { grid-template-columns: minmax(0, 40%); }
}
.parcerias h2 {
  margin: 0 0 1.5rem;
  max-width: none;
}
.parcerias p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-corpo);
  line-height: 1.65;
  max-width: var(--measure-corpo);
}
.parcerias__cta { margin-top: 1.75rem; }

@media (min-width: 1280px) {
  /* A arte ocupa os 3/4 da DIREITA da faixa, como no hero: encolhida, ela
     deixa o texto com o espaco que o usuario pediu. A caixa da arte mantem a
     proporcao da original (1920x683 = 2,81:1), entao nada e' cortado e a
     faixa tem 26,7vw de altura. O fundo acompanha a borda esquerda da arte,
     que e' quase branca em cima e branca embaixo. */
  /* O fundo acompanha a borda esquerda da arte, amostrada: 244,249,253 no
     topo e 254,254,254 na metade de baixo. */
  .pagina-sobre .sobre-parcerias {
    min-height: clamp(17rem, 26.7vw, 32rem);
    background: linear-gradient(180deg, #f4f9fd 0%, #fefefe 40%);
  }
  .sobre-parcerias > .wrap { align-self: center; }
  .parcerias__art {
    inset: 0 0 0 auto;
    width: 75%;
  }
  .parcerias__art img { object-position: right center; }
  /* Uma coluna: a largura do texto e' a que sobra ate o grafismo da arte
     (59% da janela com a arte em 75%). */
  .parcerias__grid { grid-template-columns: 1fr; }
  .parcerias__copy {
    max-width: min(100%, calc(59cqw - var(--sobre-recuo) - 1.5rem));
  }
}
@media (max-width: 1279px) {
  /* No tablet e no celular a arte sai do fundo e vira uma faixa abaixo do
     texto. O recorte e ancorado a direita: some apenas a regiao vazia da
     esquerda e os tres cubos ficam inteiros. */
  .pagina-sobre .sobre-parcerias {
    display: block;
    padding-block: var(--respiro) 0;
  }
  .parcerias__art {
    position: static;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    overflow: hidden;
  }
  .parcerias__art picture {
    position: static;
    display: block;
    height: auto;
  }
  .parcerias__art img {
    position: static;
    transform: none;
    width: 100%;
    height: auto;
    max-width: none;
    aspect-ratio: 2.2;
    object-fit: cover;
    object-position: right center;
  }
}

/* --- 9. Empresa e contato ----------------------------------------------- */
/* Bloco institucional horizontal: a faixa azul muito clara ocupa a largura
   da página e o conteúdo fica em duas colunas. Sem cartão e sem sombra — a
   própria faixa é o bloco. */
.pagina-sobre .sobre-contato {
  background: var(--bg-alt);
  margin-top: var(--respiro);
  padding-block: clamp(1.75rem, 2.8vw, 3rem) clamp(1.75rem, 3.6vw, 3.25rem);
}
.contato__grade {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .contato__grade { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}
.contato__identidade h2 { margin: 0; }
.contato__texto .lede {
  margin: 0 0 1.5rem;
  max-width: var(--measure-corpo);
}
.contato__email { margin: 0; }
.contato__email-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--blue-strong);
  font-size: var(--fs-desc);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(10, 92, 176, .4);
  text-underline-offset: .2em;
  overflow-wrap: anywhere;
}
.contato__email-link:hover {
  color: var(--navy);
  text-decoration-color: var(--navy);
}
.contato__email-link svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; }

/* --- 10. Ajustes responsivos finos -------------------------------------- */
@media (max-width: 899px) {
  /* No mobile o fluxo vira uma coluna legível, com o conector vertical. */
  .processo { gap: 0; }
  .processo__step {
    text-align: left;
    padding-left: calc(var(--raio-icone) + 1.25rem);
    padding-bottom: 1.75rem;
  }
  .processo__step .sobre-icone { position: absolute; left: 0; top: 0; margin: 0; }
  .processo__step + .processo__step::before {
    content: '';
    position: absolute;
    left: calc(var(--raio-icone) / 2 - 1px);
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    margin: 0;
    background: var(--cor-seta);
  }
  .processo__step + .processo__step::after { display: none; }
  .processo__step:last-child { padding-bottom: 0; }
  .processo__step:last-child::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sobre-cta:hover { transform: none; }
}