/* ==========================================================================
   CloudPilot — página de produto (PT e EN)
   --------------------------------------------------------------------------
   Escopo: SOMENTE /cloudpilot-pt/ e /cloudpilot-en/ em desenvolvimento.
   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, os Servicos,
   a Sobre nem o Contato.

   Referencia visual: imagem da nova pagina Produto (composicao do mockup) e
   as artes aprovadas do CloudPilot. A pagina Servicos continua sendo a
   referencia de consistencia: mesma paleta azul institucional, mesma escala
   tipografica (--fs-*), mesmos raios (--radius*) e mesma familia (--font).

   Regra de composicao das faixas de arte: a arte ocupa 100% da largura da
   pagina e o texto real (HTML) fica sobre a area limpa a esquerda da propria
   arte. A razao da faixa e a razao da arte, entao nao ha corte nem distorcao.
   ========================================================================== */

:root {
  --cp-gutter: clamp(1rem, 2.4vw, 1.75rem);
  --cp-border: #dbe7f7;
  --cp-tint: #f5faff;
  --cp-tint-2: #eaf3ff;
  --cp-icon-bg: #e7f1fe;
  --cp-icon: #0a5cb0;
  --cp-shadow: 0 1px 2px rgba(4, 32, 79, .04), 0 14px 30px -22px rgba(4, 32, 79, .30);
  --cp-title: var(--navy);

  /* Azul profundo das faixas de arte. A cor de base da arte ja e nessa
     familia, entao a arte encosta no fundo sem deixar emenda. */
  --cp-deep: #041a42;
  --cp-deep-2: #00206a;
  --cp-band-demo: #00216a;
  --cp-band-modulos: #e2f1fd;

  /* Ceu das artes novas (medido na borda esquerda, 3% da largura):
     hero #adddfd e demonstracao #b7e1fd. O tom e' o mesmo nas duas artes,
     entao o token e' unico: a emenda entre a faixa e a arte nao existe.
     As duas artes entram como FUNDO das secoes (ver §4 e §6), entao esse
     e' tambem o fundo enquanto a imagem carrega. */
  --cp-sky: #b6e1fd;

  /* Ceu do hero empilhado (30/10/2026). O hero e' uma CENA: o ceu novo
     (arte "Espaco Abstrato Azul Gelido"), o painel do app recortado com alpha
     e as argolas vivas em SVG. O ceu NAO e' um fundo chapado: o topo dele vai
     de #e2f2fd (esquerda) a #b4dffd (direita) e a base tem os raios de luz do
     ceu abstrato, com picos claros que vao ate #fefefe.

     Os dois gradientes abaixo sao o PERFIL MEDIDO das bordas do ceu
     (tools-dev/_gradiente_ceu_hero.py, pixel a pixel, com ajuste fino das
     paradas onde o raio de luz cruza a borda). O de cima vai no fundo do
     bloco de texto; o de baixo, no fundo da faixa da legenda.

     Degrau medido entre o gradiente e a arte: 4 no topo e 4 na base (o site
     antigo media 10 e 6 com a arte keystone). */
  --cp-ceu: url("/assets/img/cloudpilot/cp-hero-ceu.adef8d45.webp");
  --cp-sky-hero: linear-gradient(90deg,
    #e2f2fd 0%, #daeefc 16%, #d4ecfe 34%, #afdffc 68%, #b3e2fe 72.69%,
    #cbe8f8 73.53%, #b5e1fc 73.84%, #9fd6fc 90%, #aeddfc 99.84%, #b4dffd 100%);
  --cp-sky-hero-base: linear-gradient(90deg,
    #afdbfd 0%, #c0e3fe 6.62%, #d9edfe 8%, #fbfcfe 9.33%, #f8fdff 11%,
    #cfeafe 12.3%, #bde2fc 14%, #c3e6ff 29.65%, #e1f1ff 31.21%, #f8fcfe 32%,
    #fbfdfe 34%, #cbe8fc 36%, #bbe1fd 38%, #bde2fc 40.33%, #e0f0fe 42.31%,
    #e4f2fc 43.62%, #c0e2fb 46%, #aedbfd 62%, #b9e0fc 65.4%, #daeefc 66.86%,
    #f9feff 68%, #fcfffd 69.31%, #b8defc 71.7%, #a7d8ff 74%, #a3d6fe 82.49%,
    #afdcfa 83.53%, #dbefff 84.63%, #e0f2fe 86%, #aedcfc 88%, #a1d6fd 94%,
    #aadbff 100%);

  --cp-arrow: #b9d4f2;
}

/* --------------------------------------------------------------------------
   0. Utilidades
   -------------------------------------------------------------------------- */
.cp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.cp-ico { width: 1.15rem; height: 1.15rem; display: block; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   1. Coluna unica
   Header, hero e secoes compartilham o mesmo recuo lateral: sem isso o
   logotipo (que encosta na borda) e o texto das secoes ficam desalinhados.
   -------------------------------------------------------------------------- */
.wrap { padding-inline: var(--cp-gutter); }
.header-inner { padding-inline: var(--cp-gutter); }

.cp-section { padding-block: clamp(3rem, 6vw, 5rem); }

/* --------------------------------------------------------------------------
   2. Cabecalho de secao
   Label, titulo e descricao formam UM bloco visual, alinhado a esquerda: a
   descricao fica imediatamente abaixo do titulo, nunca em uma coluna ao
   lado. A descricao tem medida limitada (60 a 75 caracteres por linha) para
   a leitura nao se perder em linhas longas.

   Antes esta area era uma grade de duas colunas (titulo 1fr + apoio 27rem).
   O titulo ficava na esquerda e o paragrafo de apoio na direita, longe do
   conteudo a que pertencia. A grade foi desfeita: o texto agora desce logo
   abaixo do titulo, com o mesmo recuo do restante da pagina.
   -------------------------------------------------------------------------- */
.cp-head {
  --cp-head-gap: .75rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.cp-head .eyebrow { display: block; margin: 0 0 var(--cp-head-gap); }
.cp-head h2 {
  margin: 0;
  font-size: var(--fs-32);
  line-height: var(--lh-32);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--cp-title);
}
.cp-head__aside {
  /* 24px: titulo -> descricao (briefing). O `gap` do cabecalho (12px) e o da
     etiqueta -> titulo, nao o do titulo -> paragrafo. */
  margin: 1.5rem 0 0;
  /* 68 caracteres por linha em desktop: `ch` e a largura do "0" da Inter,
     corrigida pelo fator medido do projeto (--fator-ch). */
  max-width: var(--measure-corpo);
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   3. Cartoes
   -------------------------------------------------------------------------- */
.cp-card {
  background: #fff;
  border: 1px solid var(--cp-border);
  border-radius: var(--radius);
  padding: 1.4rem 1.45rem;
  box-shadow: var(--cp-shadow);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.cp-card:hover {
  border-color: #c2d9f4;
  box-shadow: 0 1px 2px rgba(4, 32, 79, .04), 0 20px 40px -26px rgba(4, 32, 79, .34);
}
.cp-card h3 {
  margin: 0 0 .75rem;
  font-size: var(--fs-22);
  line-height: var(--lh-22);
  font-weight: 600;
  color: var(--cp-title);
}
.cp-card p {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  color: var(--muted);
}

.cp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .7rem;
  background: var(--cp-icon-bg);
  color: var(--cp-icon);
  margin-bottom: 1rem;
  flex: 0 0 auto;
}
.cp-icon svg { width: 1.35rem; height: 1.35rem; display: block; }
.cp-icon--sm { width: 2.25rem; height: 2.25rem; margin-bottom: 0; }
.cp-icon--sm svg { width: 1.2rem; height: 1.2rem; }

.cp-grid-3 {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px) {
  .cp-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .cp-grid-3 { grid-template-columns: 1fr; }
}

/* Botao secundario: contorno azul, o mesmo desenho do site. */
.cp-btn--outline {
  background: #fff;
  color: var(--blue-strong);
  border: 1px solid var(--blue-strong);
  box-shadow: none;
}
.cp-btn--outline:hover {
  background: var(--blue-strong);
  border-color: var(--blue-strong);
  color: #fff;
  transform: translateY(-1px);
}
/* O botao secundario "fantasma claro" (`.cp-btn--ghost-light`) saiu: as duas
   secoes que o usavam -- hero e faixa de demonstracao -- passaram a ter ceu
   claro, e nele o texto branco nao contrastava. As duas agora usam
   `.cp-btn--outline`, o mesmo desenho do resto do site. A regra nao foi
   anulada localmente: saiu do arquivo, para nao deixar peso morto. */

/* --------------------------------------------------------------------------
   4. Hero
   Composicao EMPILHADA (30/10/2026): o texto fica numa linha acima e a arte
   entra na largura inteira da faixa, embaixo. A arte frontal (1920x900) nao
   tem a area limpa de ceu a esquerda que o layout "texto por cima" exigiria --
   o app comeca em x=145 dos 1920 (7,5%), e o H1 sobre o app escuro ficou
   ilegivel. Empilhando, o dashboard entra inteiro.

   A razao da faixa e' a razao da arte (1920 / 900 = 2,1333), em todas as
   larguras: nao ha corte nem distorcao. `cqw` e' 1% da LARGURA EXATA da
   faixa: `vw` mediria a janela (com a barra de rolagem) e o percentual do
   container mediria o recuo, nao a faixa.

   O CEU DA ARTE NAO E' CHAPADO: e' um gradiente (de #f7fbfe a esquerda a
   #bddbff a direita) com uma borda diagonal dura em x=1214. O fundo da faixa
   de texto e' o gradiente do TOPO da arte e o da legenda e' o da BASE, cada
   um medido pixel a pixel (tools-dev/_gradiente_emenda.py). Sem isso, um
   fundo chapado deixa um degrau de 65 niveis RGB na emenda.

   O texto do hero e' azul-marinho sobre esse ceu claro. Tokens: --navy
   (etiqueta e H1) e --ink (subtitulo, lead e credito).
   -------------------------------------------------------------------------- */
.cp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* 1cqw = 1% da LARGURA EXATA da faixa (a secao). */
  container-type: inline-size;
  color: var(--ink);
  /* O fundo da secao e' o ceu da BASE da arte: ele aparece na faixa da
     legenda (abaixo da arte) e no respiro final. A faixa de texto, acima da
     arte, tem o ceu do TOPO da arte (--cp-sky-hero, no .cp-hero__inner). */
  background: var(--cp-sky-hero-base);
  border-bottom: 1px solid var(--line-soft);
  /* O respiro de baixo fica na secao, e nao no bloco interno: assim ele
     mostra o gradiente da BASE da arte, e nao o do topo. */
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
/* O recuo do texto e' o recuo do container do site, medido na propria faixa.
   As duas regras ficam juntas porque `--cp-band-left` precisa do `cqw` da
   faixa, e o `cqw` so resolve contra o container quando o elemento que o
   usa e' FILHO dele (num container, o proprio `cqw` resolveria contra o
   container ANCESTRAL). */
.cp-hero__inner,
.cp-hero__art {
  --cp-band-left: max(var(--cp-gutter), calc((100cqw - var(--wrap)) / 2 + var(--cp-gutter)));
}
.cp-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: clamp(1rem, 2vw, 1.75rem);
  padding-left: 0;
  padding-right: 0;
  /* O respiro de cima fica no bloco interno; o de baixo, na secao. */
  padding-block: clamp(1.5rem, 3vw, 2.5rem) 0;
  /* O fundo do bloco interno e' o ceu do TOPO da arte: ele cobre a faixa de
     texto e o vao entre o texto e a arte, e a emenda do topo da arte
     desaparece. */
  background: var(--cp-sky-hero);
}
.cp-hero__copy {
  min-width: 0;
  position: relative;
  z-index: 1;
  /* Bloco de TEXTO CENTRALIZADO (30/10/2026): etiqueta, H1, subtitulo, lead
     e botoes formam um unico bloco no meio da faixa. O recuo lateral e'
     simetrico -- o `--cp-band-left` do layout com texto a esquerda nao se
     aplica mais aqui, porque o texto nao encosta em nenhuma borda. */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: var(--cp-gutter);
  padding-right: var(--cp-gutter);
  text-align: center;
}
/* A coluna de texto e' a do texto corrido do briefing: 36rem = ~58 caracteres
   a 16px. O limite vai nos FILHOS, e nao no bloco: com `box-sizing:
   border-box` (global), o `max-width` do bloco SOMARIA o recuo do container e
   espremeria o texto em 288px -- medido, o lead saia em 7 linhas de 31
   caracteres, e o subtitulo e os botoes quebravam em 2 e 2 linhas. */
.cp-hero__copy > * { width: 100%; max-width: 36rem; }
.cp-eyebrow {
  margin: 0 0 .75rem;
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cyan);
}
/* Etiqueta do hero: o `--cyan` do tema e' a cor da marca sobre fundo escuro
   (1,79:1 sobre o ceu -- inservivel). Aqui o fundo e' o ceu claro da arte,
   entao a etiqueta usa o azul-marinho: 12,27:1 medido no pixel renderizado
   (pior caso do gradiente do ceu), contra 3,9:1 do azul de acento. */
.cp-hero .cp-eyebrow { color: var(--navy); }
.cp-hero h1 {
  margin: 0 0 1rem;
  font-size: var(--fs-48);
  line-height: var(--lh-48);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--navy);
}
.cp-hero__sub {
  margin: 0 0 1rem;
  font-size: var(--fs-22);
  /* O subtitulo e um paragrafo de 1 linha, nao um titulo: usa 1,45 (dentro
     da faixa 1,45-1,65 do briefing) em vez do --lh-22 (1,30) dos h3. Medido:
     a coluna de texto do hero tem 500px e a arte 893px, entao os 6,6px a mais
     de entrelinha nao mudam a altura do hero. */
  line-height: 1.45;
  font-weight: 600;
  color: var(--ink);
}
.cp-hero__lead {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  color: var(--ink);
  /* A medida segue a coluna do heros (500px): o teto de 58ch devolve a linha
     cheia da coluna em vez de cortar o paragrafo em 46ch, que dava ~44
     caracteres por linha, abaixo da faixa de 55-75 do briefing. Medido: 4
     linhas de ~60 caracteres (PT) e ~64 (EN). */
  max-width: min(100%, calc(58ch * var(--fator-ch, .855)));
}
.cp-hero__actions {
  margin-top: 1.75rem;
  gap: .75rem;
  /* Os botoes acompanham o bloco centralizado. */
  justify-content: center;
}
/* A arte entra NO FLUXO, na largura inteira da faixa: a composicao do hero e'
   "texto em cima, banner embaixo". A arte frontal (1920x900) nao tem a area
   limpa de ceu a esquerda que o layout "texto por cima" exigiria -- o app
   comeca em x=145 -- entao empilhar e' o que mantem o dashboard inteiro. */
.cp-hero__art {
  position: static;
  z-index: 0;
  margin: 0;
  min-width: 0;
  width: 100%;
  /* O fundo da figura e' o ceu da BASE da arte: ele cobre o vao entre a
     imagem e a legenda, e a emenda de baixo da arte desaparece. */
  background: var(--cp-sky-hero-base);
}

/* --------------------------------------------------------------------------
   1.1 CENA do hero: ceu + argolas + painel + placas em HTML
   --------------------------------------------------------------------------
   O hero deixou de ser um raster unico. Raster nao anima: para as argolas
   girarem, elas viraram SVG. A cena tem quatro camadas, nesta ordem de z:

     CEU     a arte do ceu novo, no tamanho exato da faixa;
     ARGOLAS o sistema orbital em SVG, com um unico giro;
     PAINEL  o recorte do app (PNG com alpha) por cima das argolas;
     PLACAS  as marcas (AWS, Azure, Google Cloud) e o chip de IA em HTML.

   A ordem das argolas ANTES do painel e' deliberada: as argolas varrem o
   cluster inteiro (como na arte) e o painel, opaco, tapa a parte delas
   que cairia por cima da tela do dashboard. Antes elas vinham depois do
   painel e apareciam como fragmentos azuis sobre a tela.

   Todas as medidas estao em % da cena (1920x900) ou em cqw, entao a cena
   encolhe sem perder a proporcao em nenhuma largura.

   Medidas (palco de 1920x900):
     painel ........ x 146..1370, y 70..830  (recorte em arte px 146,70)
     placa de IA ... x 1368..1602, y 313..530 (medido na arte original)
     chip de IA .... x 1399..1570, y 343..515 -> centro do giro (1484, 429)
     argola maior .. rx 330 -> vao livre a direita do painel
   -------------------------------------------------------------------------- */
.cp-cena {
  position: relative;
  width: 100%;
  /* A faixa repete a proporcao da arte (2,1333:1): nao ha corte nem distorcao
     em nenhuma largura. */
  aspect-ratio: 1920 / 900;
  overflow: hidden;
  /* O CEU e' a propria arte, no tamanho exato da faixa. */
  background: var(--cp-ceu) center / 100% 100% no-repeat;
  /* 1cqw = 1% da largura da cena: o raio e a sombra das placas escalam junto
     com a arte. */
  container-type: inline-size;
}
.cp-cena__painel {
  position: absolute;
  left: 7.604%; top: 7.778%;
  /* 1225 px: o recorte para ANTES do vidro da placa de IA (o "pedacinho
     branco" que ficava no canto da tela). Ver _recortar_painel_hero.py. */
  width: 63.802%; height: 84.444%;
  object-fit: contain;
  filter: drop-shadow(0 1.35cqw 2.08cqw rgba(5, 42, 102, .30));
}
.cp-cena__orbital {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
/* UM unico giro para as tres argolas: elas sao um sistema so. O centro e'
   o CENTRO DO CHIP DE IA (1484, 429) -- medido na arte original, onde o
   chip fica exatamente nessa posicao -- as argolas orbitam a IA, como na
   arte, e nao ficam abaixo dela. */
.cp-cena__giro {
  transform-box: view-box;
  transform-origin: 1484px 429px;
  animation: cp-girar-orbital 44s linear infinite;
}
@keyframes cp-girar-orbital { to { transform: rotate(360deg); } }
.cp-cena__anel {
  fill: none;
  stroke: #1f6fd0;
  stroke-width: 2.4;
  opacity: .55;
}
.cp-cena__anel--2 { stroke-width: 2; opacity: .42; }
.cp-cena__anel--3 { stroke-width: 1.8; opacity: .32; }
@media (prefers-reduced-motion: reduce) {
  .cp-cena__giro { animation: none; }
}
/* As placas: fundo branco, cantos redondos e sombra suave, como na arte.
   O branco e' levemente translucido (96%): na arte o cartao de vidro pega o
   tom do ceu (amostrado 245,248,254) em vez de ficar como um recorte opaco
   sobre o fundo azul. */
.cp-cena__placa {
  position: absolute;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .96);
  border-radius: 1.354cqw;
  box-shadow: 0 1.042cqw 2.292cqw -0.938cqw rgba(5, 42, 102, .42),
              0 0.104cqw 0.313cqw rgba(5, 42, 102, .10);
}
/* A placa de IA fica ONDE ESTA NA ARTE ORIGINAL (1368..1602 x 313..530):
   e' a referencia do "AI exatamente onde a AI esta". */
.cp-cena__placa--ai    { left: 71.250%; top: 34.778%; width: 12.188%; height: 24.111%; border-radius: 1.563cqw; }
/* O chip e' posicionado dentro da placa, em % da placa, para cair em
   1399..1570 x 343..515 (medidos na arte): o viewBox do SVG ja esta em px de
   arte, entao o desenho sai 1:1. */
.cp-cena__chip {
  position: absolute;
  left: 13.248%; top: 13.825%;
  width: 73.504%; height: 79.724%;
  overflow: visible;
}
/* As placas das marcas formam uma MEIA-LUA (letra C) EM VOLTA do chip de IA:
   AWS na parte de cima, Azure na meia, Google Cloud embaixo. A abertura do C
   aponta para o painel do dashboard (a esquerda) e o chip de IA fica no CENTRO
   do arco -- e' o mesmo ponto do pivo do giro das argolas (1484, 429), entao a
   composicao inteira gira em torno do chip.

   O arco e' calculado (centro, raio 255 px de arte, angulos +60 / 0 / -60),
   nao desenhado no olho -- ver tools-dev/_medir_marcas_para_css.py:
     AWS   centro (1611,5, 208,2)   caixa 1543,5..1679,5 x 143,2..273,2
     Azure centro (1739,0, 429,0)   caixa 1676,0..1802,0 x 369,0..489,0
     GCP   centro (1611,5, 649,8)   caixa 1549,5..1673,5 x 590,3..709,3
   O tamanho dos cartoes continua o medido na arte (136x130, 126x120, 124x119). */
.cp-cena__placa--aws   { left: 80.391%; top: 15.907%; width: 7.135%; height: 14.556%; }
.cp-cena__placa--azure { left: 87.292%; top: 41.000%; width: 6.615%; height: 13.444%; }
.cp-cena__placa--gcp   { left: 80.703%; top: 65.593%; width: 6.510%; height: 13.333%; }
/* As marcas das placas: PNG com alpha (assets/img/cloudpilot/marcas/), nao
   mais os simbolos SVG do cluster. A largura segue a tinta medida na arte:
   o wordmark do AWS ocupa 62,5% do cartao, o "A" da Azure 77,8% e a nuvem
   do Google Cloud 76,6%. A altura vem do proprio asset (height: auto), para
   a marca nunca sair distorcida. */
.cp-cena__placa--aws img   { width: 62.5%; height: auto; }
.cp-cena__placa--azure img { width: 77.8%; height: auto; }
.cp-cena__placa--gcp img   { width: 76.6%; height: auto; }
.cp-hero__caption {
  position: static;
  /* O credito fica alinhado com o texto do hero (mesmo --cp-band-left). */
  margin: .55rem 0 0;
  padding-left: var(--cp-band-left);
  padding-right: var(--cp-gutter);
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  /* O `--muted` cai para 4,1:1 sobre o ceu da arte (o limite AA de texto
     normal e' 4,5:1). O `--ink` passa com folga. */
  color: var(--ink);
  text-align: left;
}
.cp-hero__caption svg { vertical-align: -2px; margin-right: .3rem; }

/* A composicao e' a mesma em toda largura: texto na linha de cima, arte
   full-width embaixo. Nao ha recorte nem distorcao da arte em nenhum
   breakpoint -- a razao da faixa e' a razao da arte (1920/900). */
@media (max-width: 979px) {
  .cp-hero h1 { font-size: var(--fs-32); line-height: var(--lh-32); }
}

/* --------------------------------------------------------------------------
   5. Etapas (Pergunte / Analise / Receba insights / Aja)
   -------------------------------------------------------------------------- */
.cp-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cp-steps li { margin: 0; }
.cp-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  background: #fff;
  border: 1px solid var(--cp-border);
  border-radius: var(--radius);
  padding: 1.4rem 1.45rem;
  box-shadow: var(--cp-shadow);
  transition: background-color 250ms ease, border-color 250ms ease,
              box-shadow 250ms ease, color 250ms ease;
}
.cp-step__top { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }
.cp-step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: .65rem;
  background: var(--cp-tint-2);
  color: var(--blue-strong);
  font-weight: 700;
  font-size: var(--fs-14);
  flex: 0 0 auto;
}
.cp-step h3 {
  margin: 0 0 .75rem;
  font-size: var(--fs-22);
  line-height: var(--lh-22);
  font-weight: 600;
  color: var(--cp-title);
}
.cp-step p {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  color: var(--muted);
}
.cp-step details { margin-top: auto; padding-top: .9rem; width: 100%; }
.cp-step summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding-block: .8rem;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--blue);
}
.cp-step summary::-webkit-details-marker { display: none; }
.cp-step summary svg { width: 1rem; height: 1rem; transition: transform .2s ease; }
.cp-step details[open] summary svg { transform: rotate(90deg); }
.cp-step details div {
  margin-top: .55rem;
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--muted);
}
/* Seta entre as etapas, dentro da calha do grid. */
.cp-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.85rem;
  right: calc(-1 * .75rem - 6px);
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--cp-arrow);
  border-right: 2px solid var(--cp-arrow);
  transform: rotate(45deg);
}
.cp-step:hover,
.cp-step:focus-within {
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 16px 34px -16px rgba(10, 92, 176, .55);
}
.cp-step:hover h3,
.cp-step:focus-within h3 { color: #fff; }
.cp-step:hover p,
.cp-step:focus-within p { color: rgba(255, 255, 255, .92); }
.cp-step:hover summary,
.cp-step:focus-within summary { color: #fff; }
.cp-step:hover details div,
.cp-step:focus-within details div { color: rgba(255, 255, 255, .85); }
.cp-step:hover .cp-step__n,
.cp-step:focus-within .cp-step__n { background: #fff; color: var(--blue); }
.cp-step:hover .cp-icon,
.cp-step:focus-within .cp-icon { background: rgba(255, 255, 255, .18); color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .cp-step,
  .cp-step:hover,
  .cp-step:focus-within { transition: none; }
}
@media (max-width: 1080px) {
  .cp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-step:nth-child(2)::after { content: none; }
}
@media (max-width: 620px) {
  .cp-steps { grid-template-columns: 1fr; gap: 1.1rem; }
  /* O seletor precisa repetir o `:not(:last-child)`: a regra da seta vale
     (0,2,0) e um `.cp-step::after` simples (0,1,0) nao a vencia, entao a seta
     continuava apontando para fora do cartao e empurrava a pagina em 4px
     (rolagem horizontal em 360 e 390px). */
  .cp-step::after,
  .cp-step:not(:last-child)::after { content: none; }
}

/* --------------------------------------------------------------------------
   6. Faixas de arte (exemplo pratico, modulos, seguranca)
   A razao da faixa e a razao da arte: a imagem preenche a faixa inteira sem
   corte e sem distorcao, e o texto real (HTML) fica sobre a area limpa a
   esquerda da propria arte.
   -------------------------------------------------------------------------- */
.cp-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* 1cqw = 1% da LARGURA EXATA da faixa. A regra do texto usa essa unidade
     para nao depender de `vw` (que inclui a barra de rolagem) nem de
     porcentagem do container (que seria relativo ao recuo, nao a faixa). */
  container-type: inline-size;
}
/* `--cp-clean` = quanto da largura da arte esta livre de conteudo, medido em
   tools-dev/medir-arte-cp.py e conferido a olho nas artes:
     demonstracao  -> a pilha de servidores comeca em 33,7% (marca em 33%)
                      (remedido na arte 2.5 de 2026-10-29, 1920x658 --
                       tools-dev/_medir_zona_livre_v5.py: primeiro desvio
                       grande em x = 647)
     modulos      -> o cartao FinOps comeca em 34,6% (marca em 32%)
     seguranca    -> o primeiro icone comeca em 40% (marca em 37%)
   O texto HTML nunca ultrapassa essa marca. */
.cp-band--demo { --cp-clean: 33; }
.cp-band--modulos { --cp-clean: 32; }
.cp-band--seguranca { --cp-clean: 37; }
/* A arte da faixa "Exemplo pratico" e' o raster 3D
   (assets/img/cloudpilot/cp-demo.webp). NESTA arte a interface do produto ja
   vem desenhada no raster (icones, cartoes, trilho, circulos, chevrons): a
   camada de HTML e' so de TEXTO, projetada no painel do app com a mesma
   perspectiva da arte (assets/css/cloudpilot-tela.css). O recorte da arte e'
   feito num ancestor comum (`.cp-ill`), para que o texto caia sempre dentro
   do notebook. Ver assets/css/cloudpilot-tela.css. */
.cp-band__art {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.cp-band__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.cp-band__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 100%;
}
.cp-band__copy {
  /* O texto comeca no mesmo recuo do conteudo das demais secoes (mesmo
     alinhamento do `.wrap` do site) e termina ANTES da marca de conteudo da
     arte. Como a arte e a razao da faixa, essa marca e um percentual fixo da
     largura da faixa: por isso o limite e `cqw` (faixa) e nao `vw` (janela). */
  --cp-band-left: max(var(--cp-gutter), calc((100cqw - var(--wrap)) / 2 + var(--cp-gutter)));
  max-width: calc(var(--cp-clean) * 1cqw - var(--cp-band-left));
}
.cp-band__copy h2 {
  margin: 0 0 .75em;
  font-size: var(--fs-32);
  line-height: var(--lh-32);
  font-weight: 700;
  letter-spacing: -.02em;
}
/* `:not(.cp-eyebrow)` é obrigatório: esta regra vale (0,1,1) e `.cp-eyebrow`
   vale (0,1,0), então a etiqueta da faixa era puxada para 16px e perdia a
   margem de 12px (gap de 0px entre a etiqueta e o título). */
.cp-band__copy p:not(.cp-eyebrow) {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-16);
}
.cp-band__actions { margin-top: 1.75rem; gap: .75rem; }
/* Os dois botoes da faixa "Exemplo pratico" lado a lado. A coluna de texto e'
   limitada pela arte (o stack de servidores comeca em 32,3% da faixa), e na
   largura minima do desktop (1440) a coluna sobra 428px: com o padding padrao
   de 1,4rem os dois botoes precisam de 436px e quebrariam. O padding
   horizontal cai para 1,1rem -- fonte (16px), altura (49,6px), cores, bordas e
   estados interativos continuam os do site. Medido: 426,4px de 428px (PT) e
   395,1px (EN). */
.cp-band--demo .cp-band__actions .btn { padding-inline: 1.1rem; }

/* Exemplo pratico — arte clara.
   A arte nova (1920x658) tem ceu azul claro, entao a faixa deixou de ser
   azul-escuro com texto branco: o fundo passa a ser o ceu da propria arte
   (--cp-sky) e o texto virou azul-marinho. Sem camada escura sobre a arte:
   o que garante o contraste e' a cor do texto, nao um filtro. */
.cp-band--demo {
  aspect-ratio: 1920 / 658;
  background: var(--cp-sky);
  color: var(--ink);
}
.cp-band--demo .cp-eyebrow { color: var(--navy); }
.cp-band--demo h2 { color: var(--navy); }
.cp-band--demo .cp-band__copy p { color: var(--ink); }
.cp-band--demo .cp-band__copy { padding-block: clamp(1.75rem, 3vw, 2.5rem); }

/* Modulos — arte clara. */
.cp-band--modulos {
  aspect-ratio: 1920 / 640;
  background: var(--cp-band-modulos);
  color: var(--ink);
}
.cp-band--modulos .cp-eyebrow { color: var(--blue); }
.cp-band--modulos h2 { color: var(--cp-title); }
.cp-band--modulos .cp-band__copy p { color: var(--muted); }
.cp-band--modulos .cp-band__copy { padding-block: clamp(1.75rem, 3vw, 2.5rem); }

/* Seguranca — arte escura.
   A arte e a mais baixa (1920x415) e define a altura da faixa. Nao se combina
   `aspect-ratio` com `min-height` na mesma caixa: o navegador transferencia o
   aspecto para a LARGURA e a faixa estoura a pagina. A altura da faixa e,
   portanto, a altura natural da arte; o texto cabe nela. */
.cp-band--seguranca {
  aspect-ratio: 1920 / 415;
  background: var(--cp-deep);
  color: #eaf3ff;
}
.cp-band--seguranca .cp-eyebrow { color: var(--cyan); }
.cp-band--seguranca h2 { color: #fff; }
.cp-band--seguranca .cp-band__copy p { color: #c6dbf7; }
.cp-band--seguranca .cp-band__copy { padding-block: 0; }

/* Abaixo de 1440px a arte nao comporta o texto ao lado sem que o texto
   invada a ilustracao (a faixa de demonstracao tem 427px de altura em 1280 e
   o texto PT precisa de 508px). Nesses tamanhos o texto sobe e a arte vira a
   faixa de largura total abaixo dele. `order` mantem o texto ANTES da arte na
   ordem de leitura (o titulo vem antes da imagem). */
@media (max-width: 1439px) {
  .cp-band {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
  }
  .cp-band__art { position: static; order: 2; }
  /* Na pilha, a arte e' recortada para a regiao util (arte x 620..1920: a
     pilha de servidores, o notebook e os simbolos dos provedores). A ancora
     e' a direita, entao o recorte e' o mesmo em qualquer largura. Razao 2/1,
     a da regiao recortada (1300 x 649). */
  .cp-band__art > img { height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: right center; }
  .cp-band__inner { min-height: 0; order: 1; }
  .cp-band__copy {
    max-width: min(46rem, 100%);
    padding: clamp(1.75rem, 4vw, 2.5rem) 0;
  }
  .cp-band--demo .cp-band__copy { color: var(--ink); background: var(--cp-sky); }
  .cp-band--demo h2 { color: var(--navy); }
  .cp-band--demo .cp-band__copy p { color: var(--ink); }
  .cp-band--demo .cp-eyebrow { color: var(--navy); }
  .cp-band--modulos .cp-band__copy { background: var(--cp-band-modulos); }
  .cp-band--seguranca .cp-band__copy { background: var(--cp-deep); padding-block: clamp(1.5rem, 4vw, 2rem); }
}

/* --------------------------------------------------------------------------
   7. Cobertura multi-cloud
   -------------------------------------------------------------------------- */
.cp-cloud {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}
@media (max-width: 980px) { .cp-cloud { grid-template-columns: 1fr; } }
.cp-cloud__card {
  background: #fff;
  border: 1px solid var(--cp-border);
  border-radius: var(--radius);
  padding: 1.4rem 1.45rem;
  box-shadow: var(--cp-shadow);
  display: flex;
  flex-direction: column;
}
.cp-cloud__logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}
.cp-cloud__logo svg { height: 1.6rem; width: auto; color: #1f2d3d; flex: 0 0 auto; }
/* As marcas de terceiro sao PNG com alpha (assets/img/cloudpilot/marcas/). */
.cp-cloud__logo img { height: 1.6rem; width: auto; flex: 0 0 auto; }
.cp-cloud__name {
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  font-weight: 600;
  color: var(--cp-title);
}
/* Wordmark do Google: uma cor por letra, como a marca oficial.
   Mesmo tamanho de nome dos outros dois provedores (--fs-16). */
.cp-mark { display: inline-flex; align-items: center; gap: .45rem; }
.cp-mark__name {
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  font-weight: 500;
  letter-spacing: -.015em;
  white-space: nowrap;
}
.cp-mark__google { display: inline-flex; margin-right: .17em; }
.cp-mark__google span:nth-child(1) { color: #4285f4; }
.cp-mark__google span:nth-child(2) { color: #ea4335; }
.cp-mark__google span:nth-child(3) { color: #fbbc05; }
.cp-mark__google span:nth-child(4) { color: #34a853; }
.cp-mark__google span:nth-child(5) { color: #4285f4; }
.cp-mark__google span:nth-child(6) { color: #ea4335; }
.cp-mark__cloud { color: #5f6368; }
.cp-mark__name--azure { color: #0078d4; }
.cp-cloud__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: .4rem;
  margin-bottom: 1rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: rgba(10, 92, 176, .1);
  border: 1px solid rgba(10, 92, 176, .25);
  color: var(--blue-strong);
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  font-weight: 600;
}
.cp-cloud__badge::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--blue-strong);
}
.cp-cloud__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.cp-cloud__list li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  color: var(--muted);
}
.cp-cloud__list svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; margin-top: .3rem; color: var(--blue); }
.cp-note {
  margin: 1.1rem 0 0;
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--muted);
}

/* Matriz de cobertura por capacidade. */
.cp-matrix-wrap { margin-top: 1.25rem; }
.cp-matrix-wrap > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding-block: .8rem;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--blue);
}
.cp-matrix-wrap > summary::-webkit-details-marker { display: none; }
.cp-matrix-wrap > summary svg { width: 1rem; height: 1rem; transition: transform .2s ease; }
.cp-matrix-wrap[open] > summary svg { transform: rotate(90deg); }
.cp-matrix {
  background: #fff;
  border: 1px solid var(--cp-border);
  border-radius: var(--radius);
  box-shadow: var(--cp-shadow);
  overflow-x: auto;
  margin-top: .85rem;
}
.cp-matrix table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); min-width: 34rem; }
.cp-matrix th, .cp-matrix td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
}
.cp-matrix th:first-child, .cp-matrix td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--navy);
}
.cp-matrix thead th {
  background: var(--cp-tint);
  color: var(--blue-strong);
  font-weight: 700;
  font-size: var(--fs-13);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.cp-matrix tbody tr:last-child td { border-bottom: 0; }
.cp-pending {
  display: inline-flex;
  align-items: center;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: rgba(120, 120, 130, .1);
  border: 1px dashed rgba(120, 120, 130, .4);
  color: var(--muted);
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   8. Controles de seguranca
   -------------------------------------------------------------------------- */
.cp-controls-wrap { padding-block: clamp(1.75rem, 3vw, 2.5rem); }
.cp-controls__lead {
  margin: 0 0 1.25rem;
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  color: var(--muted);
  /* mesma medida das descricoes dos cabecalhos de secao (66 caracteres) */
  max-width: var(--measure-corpo);
}
.cp-controls__title {
  margin: 0 0 .75rem;
  font-size: var(--fs-22);
  line-height: var(--lh-22);
  font-weight: 600;
  color: var(--cp-title);
}
.cp-controls {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
}
@media (max-width: 980px) { .cp-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cp-controls { grid-template-columns: 1fr; } }
.cp-controls li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: 0;
  padding: .7rem .9rem;
  border-radius: 11px;
  background: #fff;
  border: 1px solid var(--cp-border);
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--navy);
  font-weight: 500;
}
.cp-controls svg { width: 1rem; height: 1rem; color: var(--blue); flex: 0 0 auto; margin-top: .2rem; }

/* --------------------------------------------------------------------------
   9. Resultados e indicadores
   -------------------------------------------------------------------------- */
.cp-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 980px) { .cp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cp-stat {
  background: #fff;
  border: 1px solid var(--cp-border);
  border-radius: var(--radius);
  padding: 1.35rem 1rem;
  text-align: center;
  box-shadow: var(--cp-shadow);
}
.cp-stat__n {
  font-size: var(--fs-32);
  line-height: var(--lh-32);
  font-weight: 700;
  color: var(--blue-strong);
}
.cp-stat__l { font-size: var(--fs-14); line-height: 1.6; color: var(--muted); margin-top: .3rem; }
.cp-stack {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: var(--cp-tint);
  border: 1px solid var(--cp-border);
  border-left: 3px solid var(--blue);
  border-radius: 10px;
  font-size: var(--fs-14);
  color: var(--muted);
  line-height: 1.6;
}
.cp-stack strong { color: var(--navy); }

/* --------------------------------------------------------------------------
   10. Evolucao do produto
   -------------------------------------------------------------------------- */
.cp-evolution__badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: .7rem 0 0;
  padding: .35rem .85rem;
  border-radius: 999px;
  background: rgba(10, 92, 176, .1);
  border: 1px solid rgba(10, 92, 176, .25);
  color: var(--blue-strong);
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  font-weight: 600;
}
.cp-evolution__badge::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--blue-strong);
}

/* --------------------------------------------------------------------------
   11. Contato, FAQ e formulario
   -------------------------------------------------------------------------- */
.cp-contact {
  background: var(--cp-tint);
  border-top: 1px solid var(--line-soft);
}
#contato .contact-card {
  max-width: none;
  margin-inline: 0;
  text-align: left;
  background: #fff;
  border: 1px solid var(--cp-border);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  box-shadow: var(--cp-shadow);
  display: block;
}
#contato .contact-card h2 { margin: 0 0 .6rem; max-width: none; }
#contato .contact-card .cp-head h2 { max-width: none; margin: 0; }
#contato .contact-card > p { max-width: var(--measure-corpo); }
.cp-faq { margin: 1.5rem 0 0; }
.cp-faq details {
  background: #fff;
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  padding: .95rem 1.2rem;
  margin-bottom: .55rem;
}
.cp-faq summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-left: 1.35rem;
  font-weight: 600;
  color: var(--navy);
  font-size: var(--fs-16);
}
.cp-faq summary::-webkit-details-marker { display: none; }
.cp-faq summary::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--blue);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
}
.cp-faq details[open] summary::before { content: "\2212"; }
.cp-faq details[open] summary { margin-bottom: .5rem; }
.cp-faq details p {
  margin: 0;
  font-size: var(--fs-16);
  color: var(--muted);
  line-height: var(--lh-16);
}
.cp-form {
  margin: 1.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  padding: 1.25rem;
  background: var(--cp-tint);
  border: 1px solid var(--cp-border);
  border-radius: var(--radius);
}
@media (max-width: 600px) { .cp-form { grid-template-columns: 1fr; } }
.cp-form label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--navy);
}
.cp-form input, .cp-form select {
  font: inherit;
  padding: .65rem .8rem;
  border: 1px solid var(--cp-border);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}
.cp-form input:focus-visible, .cp-form select:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}
.cp-form .full { grid-column: 1 / -1; }
.cp-form button {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: .25rem;
}

/* --------------------------------------------------------------------------
   12. Selos locais
   -------------------------------------------------------------------------- */
.pill-early-access {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  font-weight: 600;
  background: rgba(10, 92, 176, .1);
  color: var(--blue-strong);
  border: 1px solid rgba(10, 92, 176, .25);
}
.pill-early-access::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--blue-strong);
}