/* =========================================================================
   AKROS — Seção 9½ · O piloto (07/10)

   Era a caixa no pé dos planos; virou seção própria (pedido do dono). Ela
   responde a objeção que sobra depois do preço — "e se não der certo?" — e
   por isso vem logo DEPOIS dos planos.

   Uma ideia por linha: a manchete, uma frase, os três cartões (cada um com
   o fato que é dele, em vez de uma frase longa repetindo os três) e os dois
   botões. Tudo centrado, no meio da tela, onde o mosaico do fundo é liso.

   Reaproveita: .bloco e .faixa (estudio.css), .sechead (pipeline.css), o
   par de botões .plano__cta/.plano__cta--linha (planos.css). O chão e a
   tinta vêm de escuro.css.
   ========================================================================= */

/* a pilha centra o conteúdo na altura que sobra depois do menu — mesmo
   arranjo de .planos__pilha */
.piloto__pilha{
  flex:1;min-height:0;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:clamp(26px,4.4vh,56px);
}

/* ---- o cabeçalho, centrado (o fio do olho sai: centrado ele desalinha) ---- */
#piloto .sechead{max-width:min(900px,100%);margin:0 auto;text-align:center}
#piloto .sechead__eyebrow{margin-bottom:clamp(10px,1.6vh,18px);color:var(--accent-hi)}
#piloto .sechead__eyebrow i{display:none}
#piloto .sechead__title{
  font-size:min(clamp(2rem,4vw,3.6rem),6vh);
  margin-bottom:clamp(10px,1.6vh,18px);
  color:#FFFFFF;text-wrap:balance;
}
#piloto .sechead__title em{color:var(--accent-hi)}
#piloto .sechead__sub{margin:0 auto;max-width:48ch;color:rgba(255,255,255,.66)}
#piloto .sechead__sub b{color:#FFFFFF}

/* ---- os três cartões: o que o piloto entrega ---- */
.piloto__cartoes{
  list-style:none;margin:0;padding:0;width:100%;max-width:1000px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);
}
.piloto__c{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:clamp(18px,2.6vh,26px) clamp(18px,1.6vw,24px);
  border-radius:calc(14px * var(--r));
  background:var(--gr-card);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 18px 40px -26px rgba(0,0,0,.8);
  transition:border-color .34s var(--ease),box-shadow .34s var(--ease);
}
.piloto__c:hover{
  border-color:rgba(10,128,226,.45);
  box-shadow:0 0 0 3px rgba(10,128,226,.08),0 22px 44px -26px rgba(0,0,0,.85);
}
.piloto__ic{
  display:grid;place-items:center;width:38px;height:38px;margin-bottom:8px;
  border-radius:calc(10px * var(--r));
  background:rgba(10,128,226,.14);color:#6CB8FF;
}
.piloto__ic svg{width:20px;height:20px}
.piloto__ct{font-size:clamp(1rem,1.05vw,1.08rem);font-weight:600;color:#FFFFFF;letter-spacing:-.006em}
.piloto__cp{font-size:clamp(.9rem,.92vw,.95rem);line-height:1.5;color:rgba(255,255,255,.64)}
.piloto__cp b{color:#FFFFFF;font-weight:600}

/* ---- os botões: lado a lado, maiores que no pé de um cartão ---- */
.piloto__acoes{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.piloto__acoes .plano__cta{margin-top:0;padding:14px 30px;font-size:14px;min-width:230px}

/* ---- responsivo ---- */
@media (max-width:820px){
  .piloto__cartoes{grid-template-columns:1fr;max-width:520px}
  .piloto__c{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:14px}
  .piloto__ic{margin-bottom:0}
  .piloto__cp{flex-basis:100%}
}
/* empilhados, os dois botões medem pelo próprio rótulo e saem desalinhados:
   ocupam a largura toda (mesma regra do fecho) */
@media (max-width:560px){
  .piloto__acoes{flex-direction:column;align-items:stretch;width:100%;max-width:520px}
  .piloto__acoes .plano__cta{min-width:0}
}