/* =========================================================================
   AKROS — Seção 7 · O que ele faz com cada lead

   Os seis cartões, sozinhos na própria seção. É REPERTÓRIO: não há ordem
   entre eles e por isso não há número, seta nem nada que sugira sequência —
   o percurso é a seção 6, e é lá que mora a numeração.

   Este arquivo já carregou também a seção 6, quando as duas eram uma só.
   A 6 saiu daqui quando ganhou o aparelho animado e foi para implanta.css:
   ela deixou de compartilhar a receita do cartão e passou a ter maquinaria
   própria, então dividir arquivo só faria os dois crescerem juntos.

   Reaproveita de pipeline.css e estudio.css: .bloco, .faixa, .sechead.
   ========================================================================= */

/* =======================================================================
   O CHÃO — mora em `bandas.css`

   A regra continua a mesma e por isso vale repeti-la aqui: o chão desta
   seção fica um degrau ABAIXO do branco. Sobre branco puro, uma peça branca
   não tem borda — era preciso escurecer o cartão com degradê e pendurar
   nele uma sombra de contato forte só para ele existir, e o conjunto virava
   seis lajes cinzentas com halo. Descendo o chão em vez do cartão, o cartão
   volta a ser branco liso.

   O que mudou: o valor deixou de ser escolhido aqui. As seis seções depois
   do hero se revezam entre dois tons, e o rodízio só fecha se um arquivo só
   souber a tabela inteira. Ele é o último a carregar; qualquer `background`
   escrito nesta seção seria letra morta.
   ======================================================================= */

/* O rodapé some no desktop, e isso é medida, não descuido: o menu é fixo e
   cobre os 68px do topo, então a área que o leitor de fato vê começa ABAIXO
   dele. Com recuo embaixo, o miolo fica 52px mais perto do pé do que do menu
   — o bloco parece afundado sem que se saiba dizer por quê. Zerado, os dois
   vãos ficam iguais. Em tela estreita a seção volta a ter altura automática
   e o recuo tem de voltar, senão o último cartão encosta na borda. */
@media (min-width:1181px){
  #capacidades{padding-bottom:0}
}

/* `.bloco` empilha a partir do topo; esta pilha é quem centra o conteúdo na
   altura que sobrou depois do menu. Mesmo arranjo da seção 5. */
.fecho__pilha{
  flex:1;min-height:0;
  display:flex;flex-direction:column;justify-content:center;
  /* Medido: mesmo com estes vãos sobram mais de 180px livres em toda janela
     testada. As medidas apertadas eram herança de quando esta seção dividia
     a tela com a dos passos — sozinha, o respiro do layout de referência
     cabe inteiro, e é ele que faz o bloco parecer composto em vez de
     empilhado. */
  gap:clamp(28px,6.8vh,92px);
}

/* ---- o cabeçalho, centrado ----
   `margin:0 auto` zera de propósito o `margin-bottom` que .sechead traz de
   pipeline.css: aqui quem dá o respiro é o `gap` da pilha, e as duas medidas
   somadas abririam um vão diferente do das outras seções. */
#capacidades .sechead{max-width:min(980px,100%);margin:0 auto;text-align:center}
/* o fio do olho fica à ESQUERDA do texto; centrado, ele empurra a linha toda
   para a direita e o eixo do cabeçalho deixa de bater com o dos cartões */
#capacidades .sechead__eyebrow i{display:none}
#capacidades .sechead__eyebrow{margin-bottom:clamp(10px,1.6vh,18px)}
#capacidades .sechead__title{
  font-size:min(clamp(1.95rem,3.6vw,3.35rem),5.6vh);
  margin-bottom:0;
  /* manchete centrada quebra onde a LARGURA acaba, não onde a frase pede;
     `balance` reparte as linhas por igual. Onde a propriedade não existe, a
     quebra volta a ser a natural — é melhoria, não dependência. */
  text-wrap:balance;
}

/* =======================================================================
   OS SEIS CARTÕES — três por fileira

   `grid-auto-rows:1fr` iguala as duas fileiras. Sem isso cada uma mede pelo
   seu próprio texto e a grade fica com um degrau no meio.
   ======================================================================= */
.cap{
  /* A faixa do site tem 1780px. Solta nela, cada cartão passa de 560px e a
     linha de texto vai a ~80 caracteres — larga demais para três colunas.
     O teto de 1360 é o mesmo da seção 6: as duas ficam no mesmo eixo. */
  list-style:none;margin:0 auto;padding:0;width:100%;max-width:min(1360px,100%);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:minmax(0,1fr);
  gap:clamp(14px,1.9vh,28px) clamp(16px,1.7vw,34px);
}

/* Branco liso sobre o chão cinza. Toda a presença da peça está em 1px de fio
   e num sopro de sombra — nada de degradê, nada de halo. Peças iguais e
   caladas leem como grade; peças cada uma pedindo atenção leem como bagunça. */
.cap__c{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(20px,3.4vh,38px) clamp(20px,1.9vw,36px) clamp(20px,3vh,36px);
  border-radius:calc(14px * var(--r));
  background:#FFFFFF;
  /* O CONTORNO AZUL. Era um fio de tinta neutra a 7%: presente no código e
     ausente na tela. Sem ele o cartão se desenhava só pela sombra — e sombra
     dá volume, não borda: os seis pareciam flutuar sem contorno próprio.

     O azul da marca a 32% fecha o desenho da peça e, de quebra, é o único
     lugar da seção onde a marca aparece sem pedir licença — os ícones são
     tinta neutra e o texto também.

     32%, e não mais: passando de ~45% seis retângulos contornados leem como
     formulário. O que se quer é uma grade calada, em que o fio se veja e
     não se note. */
  border:1px solid rgba(10,128,226,.32);
  box-shadow:
    0 1px 2px rgba(18,46,76,.045),
    0 10px 26px -20px rgba(18,46,76,.20);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),
             border-color .4s var(--ease);
}
/* No hover o mesmo fio fecha o tom e ganha um halo de 3px — a peça responde
   sem se mexer de lugar. Nenhuma cor nova entra: é o mesmo azul, mais denso. */
.cap__c:hover{
  transform:translateY(-2px);
  border-color:rgba(10,128,226,.58);
  box-shadow:
    0 1px 2px rgba(18,46,76,.05),
    0 0 0 3px rgba(10,128,226,.07),
    0 18px 36px -22px rgba(18,46,76,.26);
}

/* o selo do ícone: um quadrado de tinta fraca, como no layout de referência.
   Fica quadrado porque --r é 0 — o raio está escrito, é o multiplicador
   global que o zera. */
.cap__ic{
  flex:none;display:grid;place-items:center;
  width:clamp(40px,4.6vh,52px);height:clamp(40px,4.6vh,52px);
  margin-bottom:clamp(14px,2.2vh,24px);
  border-radius:calc(12px * var(--r));
  background:rgba(10,31,69,.055);
  color:var(--ink-soft);
  transition:background .45s var(--ease),color .45s var(--ease);
}
.cap__c:hover .cap__ic{background:rgba(10,128,226,.10);color:var(--accent-lo)}

.cap__t{
  margin:0 0 clamp(6px,.9vh,10px);
  font-size:clamp(1.01rem,1.06vw,1.18rem);font-weight:600;
  letter-spacing:-.024em;color:var(--ink);
}
.cap__p{margin:0;font-size:clamp(.88rem,.93vw,1rem);line-height:1.48;color:var(--body)}
.cap__p b{color:var(--ink);font-weight:600}

/* =======================================================================
   RESPONSIVO — mesmos degraus das seções 3, 4 e 5
   ======================================================================= */
@media (min-width:1181px) and (max-height:1040px){
  .cap__c{padding:clamp(18px,3vh,32px) clamp(18px,1.75vw,32px) clamp(18px,2.7vh,30px)}
  .cap__p{font-size:.9rem;line-height:1.44}
}
@media (min-width:1181px) and (max-height:820px){
  .fecho__pilha{gap:clamp(22px,5vh,62px)}
  .cap{gap:clamp(11px,1.5vh,20px) clamp(13px,1.3vw,24px)}
  .cap__c{padding:clamp(16px,3vh,30px) clamp(17px,1.7vw,30px)}
  .cap__ic{width:38px;height:38px;margin-bottom:clamp(10px,1.5vh,16px)}
  .cap__t{margin-bottom:clamp(3px,.5vh,6px);font-size:.99rem}
  .cap__p{font-size:.83rem;line-height:1.38}
}

@media (max-width:1024px){
  .cap{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  /* Em coluna única não existe fileira para igualar: com `1fr` todo cartão
     herdaria a altura do MAIOR e os curtos ficariam com um vão morto no pé. */
  .cap{grid-template-columns:1fr;grid-auto-rows:auto}
}

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