/* =========================================================================
   AKROS — Seção 11 · O fecho  +  o rodapé

   Duas peças num arquivo só porque na tela elas são uma coisa só: o fecho
   escuro corre direto para o rodapé mais escuro, sem emenda clara no meio.
   Separá-las em dois arquivos faria parecer que a página termina duas vezes.

   O FECHO veio da landing page do Akros (`site.json → cta_final`): a
   manchete, o rótulo do botão, a microcópia e o link para o humano são os
   de lá, palavra por palavra.

   🩸 O QUE FICOU DE FORA, e de propósito: a garantia do piloto. Na landing
   ela é a peça vizinha desta, e daria um fecho mais forte — mas está escrita
   como "piloto de [30] dias" com uma pendência aberta no próprio JSON
   pedindo para confirmar a duração e o que exatamente é devolvido (setup?
   primeira mensalidade? as duas?). Promessa comercial com número não
   confirmado não entra em página pública. No lugar dela ficaram três fatos
   que o repositório da landing dá como certos: API oficial da Meta e LGPD
   (`site.json → credenciais`) e ausência de fidelidade
   (`planos.json → sem_fidelidade`). Quando os termos reais chegarem, a
   garantia entra aqui e é o melhor lugar que ela tem.

   O RODAPÉ veio da landing da Falcão: é o último bloco escuro dela, com
   marca de um lado e as colunas de links do outro. O que NÃO veio foi o
   endereço, o e-mail e o telefone — o contato da Axion está como
   `[G.0b]` em toda parte no repositório da landing, e inventar dado de
   contato num site público é o tipo de erro que não tem conserto depois de
   publicado. Enquanto os dados reais não existirem, o rodapé é navegação,
   legais e assinatura.

   POR QUE NÃO É UM `.bloco`: todas as seções deste site têm exatamente uma
   tela de altura. Esta não, e de propósito — o fecho mais o rodapé SOMAM
   uma tela. Travá-los em 100svh cada daria duas telas quase vazias no fim
   da página, que é o oposto de fechar.
   ========================================================================= */

/* =======================================================================
   O FECHO
   ======================================================================= */
.fim{
  position:relative;z-index:5;overflow:clip;
  padding:clamp(56px,9vh,120px) var(--gutter) clamp(52px,8vh,110px);
  /* o mesmo azul fechado da seção 9, um degrau mais escuro: a página vai
     escurecendo até o rodapé em vez de dar um salto */
  background:
    radial-gradient(64% 70% at 50% 112%, rgba(10,128,226,.20) 0%, rgba(10,128,226,0) 66%),
    linear-gradient(180deg,#071A31 0%,#061527 58%,#05111F 100%);
}
/* O halo atrás da manchete. É o mesmo recurso da landing (um borrão radial
   por trás do título), traduzido para o azul da marca. Fica em ::before para
   não pedir uma <div> vazia no HTML. */
.fim::before{
  content:"";position:absolute;pointer-events:none;
  left:50%;top:34%;transform:translate(-50%,-50%);
  width:min(940px,120%);aspect-ratio:1.7;
  background:radial-gradient(circle, rgba(67,166,255,.17) 0%, rgba(67,166,255,0) 68%);
  filter:blur(30px);
}

.fim__in{
  position:relative;width:100%;max-width:min(920px,100%);margin:0 auto;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}

.fim__olho{
  display:inline-flex;align-items:center;gap:9px;
  padding:6px 15px 6px 12px;
  border-radius:calc(100px * var(--r));
  border:1px solid rgba(103,183,255,.34);
  background:rgba(10,128,226,.10);
  font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent-hi);
}
.fim__olho i{
  display:block;width:6px;height:6px;border-radius:50%;
  background:var(--accent-hi);
  box-shadow:0 0 0 4px rgba(67,166,255,.18);
}

/* A manchete é a peça. `text-wrap:balance` reparte as linhas por igual —
   centrada e sem ele, a quebra cai onde a largura acaba e a pergunta perde
   o ritmo justamente na virada ("Antes ou depois de você?"). */
.fim__t{
  margin-top:clamp(18px,2.6vh,28px);
  font-size:min(clamp(2rem,4.4vw,3.6rem),8.4vh);
  line-height:1.06;letter-spacing:-.036em;font-weight:600;
  color:#FFFFFF;text-wrap:balance;
}
.fim__t em{
  display:block;
  font-family:var(--serif);font-style:italic;font-weight:500;
  letter-spacing:-.012em;
  color:var(--accent-hi);
}

.fim__p{
  margin-top:clamp(14px,2vh,22px);max-width:62ch;
  font-size:clamp(.95rem,1.05vw,1.12rem);line-height:1.58;
  color:rgba(255,255,255,.66);
  /* sem isto a quebra caia onde a largura acabava e deixava "com o seu"
     pendurado no fim da primeira linha, separado de "catalogo" */
  text-wrap:balance;
}
.fim__p b{color:#FFFFFF;font-weight:600}

/* ---------------- os botões ---------------- */
.fim__acoes{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  margin-top:clamp(22px,3.2vh,34px);
}
.fim__cta,.fim__linha{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 30px;
  border-radius:calc(100px * var(--r));
  font-size:13.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  transition:transform .35s var(--ease-pop),box-shadow .35s var(--ease),
             background .3s var(--ease),border-color .3s var(--ease);
}
.fim__cta{
  color:#FFFFFF;border:1px solid transparent;
  background:linear-gradient(103deg,var(--accent-lo),var(--accent) 48%,var(--accent-hi));
  box-shadow:var(--sh-btn);
}
.fim__cta:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 40px -12px rgba(10,86,200,.7),inset 0 1px 0 rgba(255,255,255,.35);
}
.fim__linha{
  color:#FFFFFF;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.05);
}
.fim__linha:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.42);
}
.fim__cta:active,.fim__linha:active{transform:translateY(0)}

.fim__micro{
  margin-top:clamp(10px,1.4vh,14px);
  font-size:12.5px;color:rgba(255,255,255,.5);
}

/* ---------------- os três selos ----------------
   Em linha, com o mesmo tique de confirmação dos cartões da seção 9. É a
   última coisa lida antes do rodapé, e é de propósito: a página fecha em
   três fatos verificáveis, não numa promessa. */
.fim__inclui{
  list-style:none;margin:clamp(24px,3.4vh,38px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px clamp(14px,1.6vw,28px);
}
.fim__inclui li{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;color:rgba(255,255,255,.62);
}
.fim__inclui svg{flex:none;width:14px;height:14px;color:var(--accent-hi)}

/* =======================================================================
   O RODAPÉ

   Grade de 4 colunas: a marca ocupa o dobro das outras três, que é o que
   dá à assinatura o peso de origem sem precisar aumentar o logotipo.
   ======================================================================= */
.rodape{
  position:relative;z-index:5;
  padding:clamp(38px,5.4vh,64px) var(--gutter) clamp(20px,2.6vh,30px);
  background:#04101E;
  border-top:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.56);
}
.rodape__in{width:100%;max-width:var(--maxw);margin:0 auto}

.rodape__grade{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:clamp(26px,3vw,64px);
  padding-bottom:clamp(28px,3.8vh,46px);
}

/* ---------------- a marca ----------------
   Repete o lockup do menu (marca + AKROS + "Powered by AXION") em vez de
   inventar uma assinatura própria: é a mesma empresa no topo e no pé, e
   dois desenhos diferentes para a mesma coisa é o que faz um site parecer
   montado por duas pessoas. Só as cores mudam, porque o chão inverteu. */
.rodape__marca{display:inline-flex;align-items:center;gap:11px}
.rodape__marca img{width:44px;height:auto;flex:none;filter:brightness(0) invert(1);opacity:.92}
.rodape__lockup{display:flex;flex-direction:column;gap:6px}
.rodape__word{
  font-family:Georgia,"Times New Roman",serif;font-weight:700;
  font-size:18px;letter-spacing:.13em;line-height:1;color:#FFFFFF;
}
.rodape__byline{font-size:10px;line-height:1.2;letter-spacing:.02em;color:rgba(255,255,255,.5)}
.rodape__byline b{font-size:10px;letter-spacing:.07em;color:var(--accent-hi);font-weight:700}
.rodape__tag{
  margin-top:14px;max-width:34ch;
  font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.5);
}

/* ---------------- as colunas de links ---------------- */
.rodape__tit{
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.rodape__lista{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.rodape__lista a{
  font-size:13.5px;color:rgba(255,255,255,.62);
  transition:color .3s var(--ease);
}
.rodape__lista a:hover{color:#FFFFFF}
.rodape__lista a:first-letter{text-transform:uppercase}

/* ---------------- a barra de baixo ---------------- */
.rodape__base{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 22px;
  padding-top:clamp(16px,2.2vh,24px);
  border-top:1px solid rgba(255,255,255,.07);
  font-size:12px;color:rgba(255,255,255,.4);
}
.rodape__base p{margin:0}
.rodape__base b{color:rgba(255,255,255,.62);font-weight:600}

@media (max-width:900px){
  .rodape__grade{grid-template-columns:1fr 1fr;gap:30px}
  .rodape__marca-cel{grid-column:1 / -1}
}
@media (max-width:560px){
  .fim__acoes{flex-direction:column;align-items:stretch;width:100%}
  .fim__cta,.fim__linha{justify-content:center}
  .rodape__grade{grid-template-columns:1fr}
  .rodape__base{justify-content:flex-start}
}

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