/* =========================================================================
   FT CONTABILIDADE — LINK NA BIO
   Paleta e tipografia herdadas da identidade real da marca:
   azul #2b6291 e laranja #f57e24 foram amostrados do logo oficial.
   Mobile first. Só transform e opacity são animados.
   ========================================================================= */

:root{
  /* marca */
  --azul:#2b6291;
  --azul-escuro:#16324b;
  --azul-profundo:#0f2337;
  --laranja:#f57e24;
  --laranja-claro:#f9b077;
  --tinta:#16232f;
  --texto:#3a4854;
  --texto-suave:#6b7885;
  --linha:#e3e8ed;
  --papel:#f7f5f2;
  --branco:#fff;

  /* motion */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-spring:cubic-bezier(.34,1.26,.5,1);

  --raio:14px;
  --col:34px;          /* respiro lateral do conteúdo no mobile */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16.5px;line-height:1.55;color:var(--texto);
  background:var(--papel);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3{font-family:Archivo,system-ui,"Segoe UI",sans-serif;color:var(--tinta);margin:0;line-height:1.15;font-weight:700}
p{margin:0}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
::selection{background:var(--laranja);color:#231000}

/* o cartão central: largura de bio, confortável no polegar */
.pagina{max-width:520px;margin:0 auto;background:var(--branco);position:relative;overflow:hidden}
.bloco{padding:0 22px}

/* rótulo de seção */
.rotulo{
  display:flex;align-items:center;gap:11px;
  font-family:Archivo,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--texto-suave);
  margin:0 0 14px;
}
.rotulo:after{content:"";flex:1;height:1px;background:var(--linha)}

/* =====================  1. TOPO  ===================== */
.topo{
  position:relative;overflow:hidden;
  background:linear-gradient(168deg,#0f2337 0%,#1b4468 58%,#26608f 100%);
  color:#dbe6f0;padding:30px 22px 0;   /* sem respiro embaixo: a foto encosta na base */
}
/* monograma da FT como marca d'água — a própria forma do logo, sem o texto */
.topo-marca{
  position:absolute;right:-44px;top:-30px;width:210px;height:210px;
  opacity:.07;pointer-events:none;transform:rotate(-8deg);
}
.topo-luz{
  position:absolute;left:-30%;bottom:-60%;width:150%;height:130%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(245,126,36,.20),transparent 70%);
}
.topo-in{position:relative;z-index:1}

.logo{width:132px;height:auto;margin-bottom:20px;filter:brightness(0) invert(1)}
.nome{
  font-family:Archivo,sans-serif;font-size:12px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--laranja-claro);margin-bottom:12px;
}
.posicionamento{color:#fff;font-size:31px;letter-spacing:-.025em;margin-bottom:12px}
.resumo{font-size:16px;color:#b9cde0;max-width:30em}

/* selos ficam na área escura, antes da foto — assim nunca disputam
   espaço com a imagem nem quebram por cima dela */
.selos{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.selo{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.24);
  color:#fff;border-radius:100px;padding:6px 13px;
  font-family:Archivo,sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.04em;
  white-space:nowrap;
}

/* foto da equipe: sangra até as bordas e encosta na base do topo */
.foto{position:relative;margin:22px -22px 0;overflow:hidden;display:block;line-height:0}
.foto img{width:100%;height:auto}
.foto:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(15,35,55,.62),transparent 42%);
}

/* =====================  2. CTA PRINCIPAL  ===================== */
/* sobrepõe a base da foto, criando camada sem depender de sombra pesada */
.cta{margin:-34px 22px 0;position:relative;z-index:2}
.cta-btn{
  display:flex;align-items:center;gap:15px;
  background:var(--laranja);color:#231000;
  border-radius:var(--raio);padding:19px 20px;
  box-shadow:0 8px 22px rgba(245,126,36,.34), 0 2px 5px rgba(120,52,0,.2);
  transition:transform .45s var(--e-out), box-shadow .45s var(--e-out);
}
.cta-btn:active{transform:scale(.978)}
.cta-ico{
  flex:0 0 44px;height:44px;border-radius:12px;background:rgba(255,255,255,.28);
  display:grid;place-items:center;
}
.cta-ico svg{width:24px;height:24px;fill:#231000}
.cta-txt{flex:1;min-width:0}
.cta-txt b{display:block;font-family:Archivo,sans-serif;font-size:18px;font-weight:700;letter-spacing:-.01em}
.cta-txt span{display:block;font-size:13.5px;color:#5c3400;margin-top:2px;line-height:1.35}
.cta-seta{flex:0 0 20px;transition:transform .45s var(--e-out)}
.cta-btn:active .cta-seta{transform:translateX(4px)}

/* =====================  3. SERVIÇOS  ===================== */
.secao{padding:34px 22px 0}
.grade{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.card{
  position:relative;display:block;
  border:1px solid var(--linha);border-radius:var(--raio);
  padding:15px 14px 14px;background:var(--branco);
  transition:transform .4s var(--e-out), border-color .4s var(--e-out), box-shadow .4s var(--e-out);
}
.card:active{transform:scale(.975);border-color:var(--azul)}
.card b{
  display:block;font-family:Archivo,sans-serif;font-size:14.5px;font-weight:700;
  color:var(--tinta);letter-spacing:-.01em;margin-bottom:4px;line-height:1.25;
}
.card span{display:block;font-size:13.5px;color:var(--texto-suave);line-height:1.4}
.card.destaque{border-color:rgba(245,126,36,.5);background:linear-gradient(180deg,#fffaf5,#fff)}
.card.destaque:before{
  content:"";position:absolute;left:14px;top:0;width:26px;height:2px;background:var(--laranja);
}

/* =====================  4. LISTAS DE LINKS  ===================== */
.lista{display:grid;gap:9px}
.item{
  display:flex;align-items:center;gap:14px;
  border:1px solid var(--linha);border-radius:var(--raio);
  padding:15px 16px;background:var(--branco);min-height:64px;
  transition:transform .4s var(--e-out), border-color .4s var(--e-out);
}
.item:active{transform:scale(.982);border-color:var(--azul)}
.item-txt{flex:1;min-width:0}
.item-txt b{
  display:block;font-family:Archivo,sans-serif;font-size:15.5px;font-weight:600;
  color:var(--tinta);letter-spacing:-.005em;
}
.item-txt span{display:block;font-size:13.5px;color:var(--texto-suave);margin-top:1px}
.item-seta{flex:0 0 16px;color:var(--azul);transition:transform .4s var(--e-out)}
.item:active .item-seta{transform:translateX(3px)}

/* variação compacta da área do cliente */
.cliente .item{background:var(--papel);border-color:transparent;min-height:58px;padding:13px 16px}
.cliente .item-txt b{font-size:14.5px}

/* =====================  5. CANAIS  ===================== */
/* colunas exatamente iguais: com flex, o rótulo "Instagram" esmagava
   os vizinhos e o alvo de toque caía abaixo de 44px em telas de 320px */
.canais{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.canal{
  min-width:0;display:grid;place-items:center;gap:6px;
  border:1px solid var(--linha);border-radius:var(--raio);
  padding:13px 2px 11px;background:var(--branco);
  transition:transform .4s var(--e-out), border-color .4s var(--e-out);
}
.canal:active{transform:scale(.95);border-color:var(--azul)}
.canal svg{width:21px;height:21px;fill:var(--azul)}
.canal span{
  font-family:Archivo,sans-serif;font-size:10.5px;font-weight:600;
  color:var(--texto-suave);letter-spacing:.02em;white-space:nowrap;
}
@media (max-width:370px){
  .canais{gap:6px}
  .canal span{font-size:9px;letter-spacing:0}
  .canal svg{width:19px;height:19px}
}

/* =====================  6. CONTATO  ===================== */
.contato{
  margin:34px 22px 0;padding:26px 22px;border-radius:20px;
  background:linear-gradient(165deg,#16324b,#0f2337);color:#c5d6e6;
  position:relative;overflow:hidden;
}
.contato:before{
  content:"";position:absolute;right:-40%;top:-70%;width:120%;height:150%;
  background:radial-gradient(closest-side,rgba(90,165,224,.20),transparent 70%);
  pointer-events:none;
}
.contato-in{position:relative}
.contato h2{color:#fff;font-size:22px;letter-spacing:-.015em;margin-bottom:8px}
.contato p{font-size:15.5px;color:#a9c0d6;margin-bottom:18px}
.contato-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--laranja);color:#231000;border-radius:12px;
  padding:16px;font-family:Archivo,sans-serif;font-weight:700;font-size:16.5px;
  transition:transform .4s var(--e-out);
}
.contato-btn:active{transform:scale(.978)}
.contato-btn svg{width:19px;height:19px;fill:#231000}
.dados{display:grid;gap:0;margin-top:20px}
.dado{
  display:flex;gap:14px;align-items:baseline;
  padding:12px 0;border-top:1px solid rgba(255,255,255,.11);
}
.dado dt{
  flex:0 0 74px;font-family:Archivo,sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#7e97ad;
}
.dado dd{margin:0;font-size:15.5px;color:#e2ecf5;line-height:1.4}
/* telefone e e-mail precisam de área de toque de 44px sem alterar o ritmo visual */
.dado a{
  color:#e2ecf5;display:inline-block;
  padding:11px 0;margin:-11px 0;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.28);
}
.dado a:active{color:var(--laranja-claro)}
.obs{margin-top:14px;font-size:13px;color:#7e97ad}

/* =====================  7. RODAPÉ  ===================== */
.rodape{padding:30px 22px 38px;text-align:center}
.rodape-marca{
  font-family:Archivo,sans-serif;font-size:13.5px;font-weight:600;
  color:var(--tinta);margin-bottom:5px;
}
.rodape p{font-size:12.5px;color:var(--texto-suave);line-height:1.55}
.rodape-fio{width:26px;height:2px;background:var(--laranja);margin:0 auto 16px;border-radius:2px}

/* =====================  MOTION  ===================== */
/* estado inicial só existe quando o JS está ativo */
.js .an{opacity:0;transform:translate3d(0,16px,0)}
.js .an.dentro{
  opacity:1;transform:none;
  transition:opacity .7s var(--e-out) var(--atraso,0ms),
             transform .8s var(--e-out) var(--atraso,0ms);
}
.js .foto img{transform:scale(1.06);transition:transform 1.2s var(--e-out)}
.js .topo.dentro .foto img{transform:none}

/* =====================  DESKTOP  ===================== */
@media (min-width:560px){
  :root{--raio:16px}
  body{background:#eef1f4;padding:0}
  .pagina{
    margin:26px auto;border-radius:26px;
    box-shadow:0 2px 8px rgba(11,32,52,.06), 0 24px 60px rgba(11,32,52,.14);
  }
  .topo{padding:36px 28px 0}   /* base sem respiro: a foto encosta na borda */
  .bloco,.secao{padding-left:28px;padding-right:28px}
  .foto{margin-left:-28px;margin-right:-28px}
  .selos{margin-left:28px;margin-right:28px}
  .cta{margin-left:28px;margin-right:28px}
  .contato{margin-left:28px;margin-right:28px}
  .posicionamento{font-size:34px}
}
@media (min-width:900px){
  /* fundo ambiente discreto no desktop, sem inventar nova identidade */
  body{
    background:
      radial-gradient(60% 50% at 15% 0%, rgba(43,98,145,.14), transparent 60%),
      radial-gradient(50% 50% at 90% 100%, rgba(245,126,36,.10), transparent 60%),
      #eceff3;
    background-attachment:fixed;
  }
  .pagina{margin:44px auto}
}

/* =====================  ACESSIBILIDADE  ===================== */
a:focus-visible{outline:3px solid var(--laranja);outline-offset:3px;border-radius:6px}
.topo a:focus-visible{outline-color:#fff}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{
    transition-duration:.01ms !important;animation-duration:.01ms !important;
    transition-delay:0ms !important;animation-delay:0ms !important;
  }
  .js .an{opacity:1 !important;transform:none !important}
  .js .foto img{transform:none !important}
}