/* ==========================================================================
Home V2 -- Home institucional (PT e EN)
--------------------------------------------------------------------------
Escopo: SOMENTE as duas Home (/ e /pt/). Carregado DEPOIS de
/assets/css/site-v2.6d786f55.css, entao as regras abaixo vencem sem alterar a pagina
do CloudPilot, a de Servicos, a de Sobre, o rodape ou qualquer outra pagina.
Este arquivo NAO e um segundo design system: ele reaproveita os
componentes ja existentes (--wrap, --gutter, --fs-*, .section, .section-head,
.eyebrow, .btn, .act-card, .eng-card, .icon-badge, .callout) e so acrescenta
os blocos que a Home precisa: hero com arte aprovada, faixa de servicos
gerenciados com arte a esquerda, faixa do produto com arte a direita,
parceiros e chamada final.
As tres artes aprovadas sao usadas como ![]()
(nunca como background), para
que o enquadramento seja controlado por object-fit/object-position sem
esticar nem cortar a captura. As medidas abaixo sao as zonas limpas de cada
arte, lidas pixel a pixel (tools-dev/medir-zona-limpe.py) e conferidas a
olho.
hero-tecnologia-nuvens.jpg (1920 x 710) zona livre a esquerda: 0 a 999 px
(52,0% da largura)
cloudpilot-produto-telas.jpg (1920 x 766) zona livre a esquerda: 0 a 432 px
(22,5% da largura)
servicos-gerenciados-cartoes.jpg (1736 x 906) conteudo a esquerda:
0 a 960 px (55,3%); 1140 px em diante
e' area vazia (36% da direita)
========================================================================== */
/* --------------------------------------------------------------------------
1. Hero: arte a direita, texto na zona limpa a esquerda
--------------------------------------------------------------------------
A arte ocupa 100% da largura da viewport (como o fundo). A coluna de texto
tem 760 px e comeca no gutter do container (16 px no desktop, 32 px no
tablet, 20 px no celular), de modo que o texto do Hero fica alinhado com o
das secoes abaixo e nenhum caractere fica sobre o painel do CloudPilot: na
faixa de 1440 px o painel comeca em viewport x ~774 e a coluna termina em
x = 776.
O recuo e' calculado em `cqw` (1% da largura EXATA da faixa, sem a barra de
rolagem que entra no `vw`), como nas faixas da pagina do CloudPilot (ver
.cp-band em cloudpilot.css).
-------------------------------------------------------------------------- */
.hero--home {
/* Recuo horizontal e escala tipografica do hero (briefing de UI/UX):
celular 20px / H1 34px, tablet 32px / H1 40px, desktop 64px / H1 52px.
Os valores sao trocados nos breakpoints abaixo; aqui ficam os do celular. */
--hero-pad: 1.25rem; /* 20px */
--hero-h1: 2.125rem; /* 34px */
--hero-lead: 1rem; /* 16px */
--hero-eyebrow: .8125rem; /* 13px */
--hero-btn: 1rem; /* 16px */
--hero-col: 47.5rem; /* 760px: largura da coluna de texto no desktop */
/* Cores do briefing, aplicadas apenas ao hero. Os tokens globais do site
(--navy, --blue-strong, --ink) NAO mudam: as outras secoes continuam com
a paleta atual.
Duas cores do briefing (#0866C2 no destaque do titulo e #243B53 no
paragrafo) NAO passam no contraste AA sobre a arte 1.4: o pior pixel do
fundo sob o texto e' o azul do rodape da arte e o contraste cai para
2,80 e 3,79. Por isso o destaque do H1 usa --blue-strong e o paragrafo
usa --ink, que sao os mesmos tons do site e passam em todos os tamanhos.
O resto do briefing (#0B2D66 no titulo, #0866C2 no botao e no texto
superior) entra exato. */
--hero-navy: #0b2d66;
--hero-blue: #0866c2;
/* Azul do destaque do titulo, mais fechado que o --blue-strong global.
Com o H1 em uma linha a mais larga, a linha azul alcança a parte mais
escura do ceu da arte (pixel 131,178,212) e o --blue-strong (#0a5cb0) cai
para 2,93:1 em 1440 px e 2,70:1 em 1920 px -- abaixo do limite AA de
texto grande (3,0). Este tom medido passa com folga: 3,54:1 em 1440 px e
3,26:1 em 1920 px, e continua sendo um azul de destaque, distinguivel do
azul-marinho do titulo (#0b2d66). */
--hero-accent: #0a4f9e;
position: relative;
isolation: isolate;
border-bottom: 0;
/* A faixa e o container de referencia: `cqw` mede a largura dela, e nao a
da janela (que inclui a barra de rolagem) nem a do recuo. */
container-type: inline-size;
/* Ceu: reproduz a borda superior da arte enquanto ela carrega. Remedido na
arte 1.4 (1920x768): o ceu da faixa do texto (art x 0..652) e' #d2e9fb no
topo e #a4d4fc a 34% -- a 1.4 tem um ceu mais saturado que a 1.2. A ponta
direita fica num azul acinzentado claro para o texto do hero (que no
celular ocupa a largura toda) continuar legivel. */
background: linear-gradient(90deg, #d2e9fb 0%, #a4d4fc 34%, #a6c3e2 100%);
}
/* Tablet: recuo de 32px, H1 de 40px e paragrafo de 17px. */
@media (min-width: 600px) {
.hero--home {
--hero-pad: 2rem; /* 32px */
--hero-h1: 2.5rem; /* 40px */
--hero-lead: 1.0625rem; /* 17px */
}
}
/* Desktop: recuo de 16px (o mesmo gutter do container do site, para o texto do
Hero ficar alinhado com o das secoes abaixo), H1 de 44px e paragrafo de 18px. */
@media (min-width: 1440px) {
.hero--home {
--hero-pad: 1rem; /* 16px: alinhado com o conteudo das secoes */
--hero-h1: 2.75rem; /* 44px */
--hero-lead: 1.125rem; /* 18px */
}
}
/* Telas muito estreitas: 32px de H1 para o titulo nao estourar a coluna. */
@media (max-width: 380px) {
.hero--home { --hero-h1: 2rem; }
}
/* O reticulo de pontos do .hero global nao combina com o ceu da arte. */
.hero--home::after { display: none; }
.hero--home .hero-art {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Ancoragem a direita: quando a secao precisa de mais altura que a arte, o
corte horizontal cai na zona limpa da esquerda (so ha ceu ali) e o painel,
o robo e as nuvens de provedores ficam inteiros. */
object-position: right top;
}
/* Desktop: a arte ja vem com o painel do CloudPilot AI ("a tela" do canto)
afastado da borda. Na arte 1.9 esse painel termina em art x = 1835, ou
seja, com 85 px de cenario ate a ultima coluna: como a faixa e' do tamanho
da arte, o painel ja nao encosta na janela (a 85 px da borda em 1920 e a
64 px em 1440). Por isso a arte NAO e' transladada aqui: transladar custaria
a folga do texto, que e' de 1 para 1 com o respiro ganho a direita. */
@media (min-width: 1440px) {
.hero--home .hero-art {
transform: none;
}
}
.hero--home .hero-grid {
/* Recuo do texto = recuo do container do hero. Em telas maiores que o wrap
(1440 px) o texto comeca em (largura - 1440) / 2 + recuo, ou seja, na
borda interna do container do site mais o respiro pedido no briefing. */
--home-band-left: max(var(--hero-pad), calc((100cqw - var(--wrap)) / 2 + var(--hero-pad)));
position: relative;
z-index: 1;
max-width: none;
padding-inline: var(--home-band-left);
grid-template-columns: minmax(0, 1fr);
align-items: center;
/* Altura natural da arte: 710 / 1920 = 36,98vw. E a altura em que a arte
cabe sem nenhum corte (a arte 1.9 voltou a ter 710 px de altura, como a
1.5; a 1.6 tinha 709). */
min-height: 36.98vw;
padding-block: 0;
}
.hero--home .hero-copy {
/* Coluna de texto: 760px no desktop, medidos contra a borda real do painel
do CloudPilot (art x = 1032 na arte 1.4, confirmado por pixel). Com a arte
no tamanho natural o painel cai em viewport x ~774 (1440), ~860 (1600) e
~1032 (1920); o texto comeca no gutter do site (16, 96 e 256) e a linha
mais larga do H1 termina em 733, 813 e 973 -- sempre com 41 px ou mais de
folga para o painel. */
max-width: var(--hero-col);
padding-block: 0;
}
.hero--home .hero-title {
margin: 0 0 1.5rem; /* 24px: H1 -> paragrafo */
font-size: var(--hero-h1);
/* O H1 aprovado em 44px NAO muda de tamanho nem de quebra de linha: aqui so
a entrelinha sobe de 1,12 para 1,18, o valor do briefing para 44px. */
line-height: 1.18;
letter-spacing: -.025em;
color: var(--hero-navy);
/* Medida do titulo: 720 px. O H1 em PT ja quebra em 3 linhas (631 px a mais
larga) e NAO muda com esta medida. O de EN passa de 2 para 3 linhas
("We turn knowledge into" / "technology." / "And ideas into solutions."),
e a linha mais larga cai de 737 para 503 px -- a mesma folga para o painel
do CloudPilot que o PT tem. Sem isso o titulo em EN encostava no painel
assim que a arte recuou da borda direita. */
max-width: 45rem;
}
.hero--home .hero-title .accent {
display: block;
margin-top: .5rem;
/* --hero-accent em vez de #0866C2 do briefing: sobre a arte o azul do
briefing cai para 2,80 de contraste (AA de texto grande e' 3,0), e o
--blue-strong tambem nao segura quando a linha azul cresce. */
color: var(--hero-accent);
}
.hero--home .hero-eyebrow {
display: inline-flex;
align-items: center;
gap: .55rem;
background: rgba(255, 255, 255, .82);
border: 1px solid rgba(255, 255, 255, .9);
border-radius: 999px;
padding: .35rem .9rem;
font-size: var(--hero-eyebrow); /* 13px */
line-height: 1.4;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--hero-blue);
margin: 0 0 1.25rem; /* 20px: texto superior -> H1 */
}
.hero--home .hero-eyebrow::before {
content: '';
width: .5rem; height: .5rem;
border-radius: 50%;
background: var(--cyan);
}
.hero--home .hero-lead {
font-size: var(--hero-lead); /* 18px no desktop, 17px no tablet, 16px no celular */
line-height: 1.65;
/* --ink em vez de #243B53 do briefing: sobre a arte o cinza-azulado do
briefing cai para 3,79 de contraste (AA de texto normal e' 4,5). */
color: var(--ink);
max-width: min(100%, var(--measure-corpo));
margin: 0;
}
/* Os dois botoes do hero ficam na mesma linha quando ha largura: lado a lado
somam ~490 px e a coluna do desktop tem 520 px. */
.hero--home .btn {
font-size: var(--hero-btn); /* 16px */
line-height: 1.25;
min-height: 2.75rem; /* 44px */
padding: .8rem 1.05rem;
}
.hero--home .btn-row {
margin-top: 1.875rem; /* 30px: paragrafo -> botoes */
gap: .75rem; /* 12px entre os botoes */
}
.hero--home .btn--primary { background: var(--hero-blue); color: #fff; }
.hero--home .btn--primary:hover { background: var(--hero-navy); color: #fff; }
.hero--home .btn--ghost { background: #fff; color: var(--hero-navy); border-color: var(--line); }
.hero--home .btn--ghost:hover { background: #fff; color: var(--hero-blue); border-color: var(--hero-blue); }
/* Tablet e mobile: nao ha zona livre suficiente para o texto ao lado do
painel, entao o hero empilha -- texto sobre o ceu e a arte inteira logo
abaixo, ampliada para o painel nao ficar pequeno. O ponto de virada fica em
1440 px: e a largura em que o titulo de 52 px, a coluna de 520 px e a
descricao ainda cabem sem fazer a secao crescer alem da altura da arte. */
@media (max-width: 1439px) {
.hero--home {
background: linear-gradient(90deg, #d2e9fb 0%, #a4d4fc 40%, #a6c3e2 100%);
}
.hero--home .hero-grid {
min-height: 0;
padding-block: clamp(1.75rem, 5vw, 2.75rem) 0;
gap: 0;
}
.hero--home .hero-copy {
max-width: none;
padding-block: 0;
}
.hero--home .hero-art {
position: static;
width: 100%;
height: auto;
margin-top: clamp(1.5rem, 4vw, 2.25rem);
/* Enquadramento: a arte e' ampliada 1,54x e empurrada para a esquerda, de
modo que saia de quadro SO o ceu (0 a 672 px dos 1920 da arte), que e'
area vazia. O que fica visivel -- painel, robo e nuvens de provedores --
e' a arte inteira, sem um unico elemento cortado. A borda direita da
arte continua encostando na borda da pagina (153,85% - 53,85% = 100%). */
width: 153.85%;
max-width: none;
margin-left: -53.85%;
border-radius: 0;
box-shadow: none;
}
}
/* --------------------------------------------------------------------------
2. Nossas solucoes: os quatro cartoes, com o link "Saiba mais"
-------------------------------------------------------------------------- */
.act-card__link {
margin-top: auto;
padding-top: .35rem;
display: inline-flex;
align-items: center;
gap: .4rem;
font-size: var(--fs-16);
line-height: 1.3;
font-weight: 700;
color: var(--blue-strong);
text-decoration: none;
}
.act-card__link:hover { color: var(--navy); text-decoration: underline; }
.act-card__link svg { width: 1rem; height: 1rem; }
/* O cartao ganha o link: o hover azul do .act-card tambem aplica o link. */
.act-card:hover .act-card__link,
.act-card:focus-within .act-card__link { color: #fff; }
/* --------------------------------------------------------------------------
3. Servicos gerenciados: arte a esquerda, texto e capacidades a direita
--------------------------------------------------------------------------
A arte (1736 x 906) tem o conteudo entre 0 e 960 px e a partir de 1140 px
so ha ceu vazio. O quadro usa object-fit: cover com object-position: left,
entao o corte cai exatamente na area vazia da direita e os cinco cartoes
ilustrados (FinOps, SecOps, Compliance, Drift e IaC) ficam inteiros.
-------------------------------------------------------------------------- */
.home-managed {
background: var(--bg-alt);
border-block: 1px solid var(--line-soft);
}
.home-managed__grid {
display: grid;
gap: clamp(2rem, 4vw, 3.5rem);
align-items: center;
}
@media (min-width: 980px) {
.home-managed__grid {
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}
}
.home-managed__figure {
margin: 0;
min-width: 0;
}
.home-managed__figure img {
display: block;
width: 100%;
/* 1736 / 1300: o quadro e mais alto que a proporcao da arte, entao o cover
recorta a faixa vazia da direita e mantem o conteudo inteiro. */
aspect-ratio: 1736 / 1300;
object-fit: cover;
object-position: left top;
}
.home-managed__copy { min-width: 0; }
.home-managed__title {
font-size: var(--fs-32);
line-height: var(--lh-32);
color: var(--navy);
margin: 0 0 1.5rem;
}
.home-managed__lead {
font-size: var(--fs-16);
line-height: var(--lh-16);
color: var(--muted);
margin: 0;
max-width: calc(58ch * var(--fator-ch, .855));
}
.home-managed__list {
list-style: none;
margin: 1.75rem 0 0;
padding: 0;
display: grid;
gap: .9rem;
}
.home-managed__item {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
gap: .25rem .9rem;
align-items: start;
/* A lista usa `gap`: a margem global do `li` somaria uma segunda vez. */
margin: 0;
}
.home-managed__icon {
grid-row: span 2;
width: 38px; height: 38px;
border-radius: 10px;
background: #eaf2fd;
color: var(--blue);
display: grid;
place-items: center;
}
.home-managed__icon svg { width: 20px; height: 20px; }
.home-managed__name {
font-size: var(--fs-16);
line-height: 1.3;
font-weight: 700;
color: var(--navy);
}
.home-managed__desc {
font-size: var(--fs-16);
line-height: var(--lh-16);
color: var(--muted);
margin: 0;
max-width: var(--measure-corpo);
}
/* --------------------------------------------------------------------------
4. Nosso produto: a arte do CloudPilot como fundo da secao
--------------------------------------------------------------------------
Mesma estrutura das demais secoes da Home: container `.wrap` com duas
colunas (texto | arte), como em "Servicos gerenciados". O texto comeca no
recuo de conteudo do container -- igual ao das outras secoes --.
Enquadramento
-------------
A arte tem 1920 x 641 (razao 2,9959). No desktop ela E' O FUNDO da secao:
sai do fluxo, ocupa a faixa inteira e o texto passa por cima. Antes a arte
ficava numa caixa e a secao pintava um gradiente por tras dela -- tres
camadas (gradiente | ceu da arte | azul da arte) com um degrau visivel na
borda esquerda da imagem, que mudava de tamanho conforme a largura da tela.
Sendo o fundo, a emenda nao existe: o ceu da arte e' o proprio fundo da
faixa, o notebook encosta no texto e o painel de IA encosta na borda da
janela. A altura da secao passa a ser a altura natural da arte, medida em
`cqw` da propria faixa, entao a arte entra sem corte em qualquer largura.
Abaixo de 1280 a arte continua sendo um cartao dentro da faixa (a secao
empilha, texto em cima). O fundo da secao ai segue a rampa vertical do ceu
da arte, para a borda esquerda da imagem nao formar degrau.
-------------------------------------------------------------------------- */
.home-product {
position: relative;
isolation: isolate;
overflow: hidden;
/* 1cqw = 1% da LARGURA EXATA da faixa (a secao). */
container-type: inline-size;
/* O fundo da secao e' o CEU DA PROPRIA ARTE, nao um gradiente proprio.
Antes eram tres camadas -- gradiente da secao por tras, ceu da arte e azul
profundo da arte -- com uma emenda visivel na borda esquerda da imagem.
No desktop a arte cobre a secao inteira (ver .home-product__figure) e esta
cor so aparece enquanto ela carrega; abaixo de 1280 ela vira a rampa
vertical do ceu (ver o bloco de `@media (max-width: 1279px)`).
A cor foi remedida na arte ja clareada: o ceu da faixa do texto (art x
21..764) fica entre #cbe1fa e #eff6ff, com media #e3f0fd. */
background: #e3f0fd;
}
.home-product__grid {
display: grid;
gap: clamp(2rem, 4vw, 3.25rem);
align-items: center;
grid-template-columns: minmax(0, 1fr);
padding-block: clamp(2.5rem, 6vw, 4.25rem);
}
@media (min-width: 1280px) {
/* A arte ocupa a faixa toda a direita: o texto encolhe para o necessario e
o painel encosta no texto e na borda da janela. Abaixo de 1280 a secao
empilha (texto em cima, arte grande e contida embaixo), porque ao lado
do texto a arte ficaria pequena demais. */
.home-product__grid {
/* 545 px e' a largura minima para os dois botoes ficarem em uma linha
(258 + 12 + 263). Acima disso a coluna cresce com a tela. */
grid-template-columns: minmax(545px, .7fr) minmax(0, 1fr);
gap: clamp(1.75rem, 3vw, 2.5rem);
padding-block: clamp(1.5rem, 2.4vw, 2.2rem);
}
}
.home-product__copy {
min-width: 0;
}
.home-product__copy .eyebrow { color: var(--blue-strong); }
.home-product__title {
font-size: var(--fs-32);
line-height: var(--lh-32);
color: var(--navy);
margin: 0 0 1.5rem;
}
.home-product__lead {
font-size: var(--fs-16);
line-height: var(--lh-16);
color: var(--ink);
margin: 0;
max-width: calc(56ch * var(--fator-ch, .855));
}
.home-product__figure {
margin: 0;
min-width: 0;
}
/* Respiro lateral dos botoes: o mesmo do hero, para os dois botoes da secao
ficarem com a largura aprovada. */
.home-product .btn { padding: .8rem 1.05rem; }
.home-product__art {
display: block;
width: 100%;
/* 1,93:1 e' a maior razao que ainda mostra a arte INTEIRA a partir da
moldura do dashboard. Medido pixel a pixel: a moldura escura comeca em
452 px dos 1920 da arte, entao o recorte pode chegar a 441 px (onde a
moldura ainda nao aparece) e nada e' cortado -- nem a moldura, nem o
menu lateral, nem o robo, nem o painel de IA. A proporcao da arte nao
e' distorcida. */
aspect-ratio: 1.93;
object-fit: cover;
object-position: right center;
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
}
/* No desktop a arte E' O FUNDO da secao: ela sai do fluxo, ocupa a faixa
inteira (largura e altura) e o texto passa por cima dela. Antes a arte
ficava dentro de uma caixa, com a secao pintando um gradiente por tras:
o resultado eram tres camadas e uma emenda visivel na borda esquerda da
imagem.
Sendo o fundo, a emenda nao existe: o ceu da arte e' o proprio fundo da
faixa, o notebook encosta no texto e o painel de IA encosta na borda da
janela. A altura da secao passa a ser a altura natural da arte
(1920 / 641 = 2,9959), medida em `cqw` da propria faixa, entao a arte
entra sem corte em qualquer largura de tela. */
@media (min-width: 1280px) {
.home-product {
display: grid;
align-items: center;
}
.home-product__grid {
/* 1920 / 641 = 2,9959: a altura natural da arte na largura da faixa. */
min-height: calc(100cqw / 2.9959);
}
.home-product__figure {
position: absolute;
inset: 0;
margin: 0;
z-index: 0;
}
.home-product__copy {
position: relative;
z-index: 1;
}
.home-product__art {
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
object-position: right center;
/* Os cantos ficam retos: a arte e' o fundo, nao um cartao. */
border-radius: 0;
box-shadow: none;
}
}
/* No celular a arte continua sendo um cartao dentro da faixa, mas o fundo da
secao segue o CEU DA ARTE. A coluna visivel da arte na borda esquerda do
cartao (art x=683, onde o `object-fit: cover` com `object-position: right`
corta) e' praticamente uniforme: #cce6fa no alto, #d5e9fd no meio e
#cae2f9 na base (medido pixel a pixel na arte ja clareada). O fundo usa a
media dessa coluna (#cfe6fb): assim a emenda da borda esquerda da imagem
fica abaixo de 10/255 em qualquer altura de cartao, sem depender de onde o
cartao comeca dentro da faixa. */
@media (max-width: 1279px) {
.home-product {
background: #cfe6fb;
}
}
/* --------------------------------------------------------------------------
5. Por que escolher a E F Cunha
--------------------------------------------------------------------------
Reaproveita o cartao .eng-card (icone + titulo + texto) em quatro colunas.
-------------------------------------------------------------------------- */
.why-grid {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
@media (min-width: 980px) {
.why-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.why-grid .eng-card { grid-template-columns: 44px minmax(0, 1fr); }
/* --------------------------------------------------------------------------
6. Parceiros e tecnologias
-------------------------------------------------------------------------- */
.home-partners {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.home-partners__item {
display: flex;
align-items: center;
justify-content: center;
gap: .7rem;
min-height: 72px;
padding: .9rem 1rem;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--navy);
}
.home-partners__item svg {
height: 26px;
width: auto;
max-width: 100%;
flex: 0 1 auto;
}
/* As marcas de terceiro sao PNG com alpha (assets/img/cloudpilot/marcas/). */
.home-partners__item img {
height: 26px;
width: auto;
max-width: 100%;
flex: 0 1 auto;
}
.home-partners__name {
font-size: var(--fs-14);
line-height: 1.3;
font-weight: 600;
color: var(--muted);
min-width: 0;
overflow-wrap: break-word;
}
/* Abaixo de 640 px o cartao empilha: logotipo em cima, nome embaixo. Lado a
lado, o wordmark do Kubernetes (128 px de largura) e o nome nao cabem em
duas colunas de tela estreita e o texto transbordava do cartao. */
@media (max-width: 640px) {
.home-partners__item {
flex-direction: column;
gap: .45rem;
text-align: center;
padding: .85rem .6rem;
}
.home-partners__item svg { height: 22px; }
.home-partners__item img { height: 22px; }
}
/* --------------------------------------------------------------------------
7. Vamos conversar
--------------------------------------------------------------------------
Mesma paleta do .callout do site (gradiente navy -> azul), com o desenho de
ondas usado no rodape como textura discreta.
-------------------------------------------------------------------------- */
.home-cta {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
padding: clamp(2rem, 5vw, 3.5rem);
background: linear-gradient(135deg, var(--navy) 0%, #0a4a9e 55%, var(--blue) 100%);
color: #eaf3ff;
text-align: center;
}
.home-cta::after {
content: '';
position: absolute;
inset: auto 0 0 0;
height: 46%;
background: url('/assets/img/rodape-ondas.jpg') center bottom / cover no-repeat;
opacity: .16;
pointer-events: none;
}
.home-cta > * { position: relative; z-index: 1; }
.home-cta .eyebrow { color: #e8f1ff; }
.home-cta h2 {
color: #fff;
font-size: var(--fs-32);
line-height: var(--lh-32);
margin: 0 0 1.5rem;
}
.home-cta p:not(.eyebrow) {
color: #e3eeff;
font-size: var(--fs-16);
line-height: var(--lh-16);
max-width: calc(58ch * var(--fator-ch, .855));
margin: 0 auto;
}
.home-cta .btn-row { justify-content: center; }
.home-cta .btn--ghost {
background: rgba(255, 255, 255, .12);
color: #fff;
border-color: rgba(255, 255, 255, .55);
}
.home-cta .btn--ghost:hover {
background: rgba(255, 255, 255, .2);
border-color: #fff;
color: #fff;
}
/* --------------------------------------------------------------------------
8. Sprite das marcas de tecnologia
--------------------------------------------------------------------------
Os simbolos SVG (AWS, Azure, Google Cloud, HashiCorp, Kubernetes e Docker)
ficam num SVG escondido, referenciado por