/* ------------------------------------------------------------------
   Rubens Sousa — identidade visual
   Tipografia: Bebas Neue (display) + Sora (corpo).
   Cor e superfícies: design-system/tokens/colors.css.
   Uma superfície só na página (--ink). Seções se separam por filete
   e respiro, nunca por troca de fundo.
   ------------------------------------------------------------------ */
:root{
  --ink:#050D14;
  --steel:#8AA6BC;
  --steel-light:#D3DFE8;
  --paper:#FBF7EF;
  --gold:#E3B04B;
  --gold-light:#F6D08C;
  --gold-dark:#C4913A;
  --green:#3FA37A;
  --red:#D0553F;

  --line:rgba(138,166,188,.16);
  --line-mid:rgba(138,166,188,.3);
  --focus:rgba(227,176,75,.55);
  --gold-grad:linear-gradient(135deg,#F6D08C 0%,#C4913A 100%);
  --ease:cubic-bezier(.2,.6,.2,1);

  --display:"Bebas Neue","Arial Narrow",Impact,sans-serif;
  --body:Sora,"Segoe UI",system-ui,sans-serif;

  --shell:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px}
body{
  margin:0; background:var(--ink); color:var(--steel-light);
  font-family:var(--body); font-size:16.5px; font-weight:300; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--gold); text-decoration:none}
p{margin:0}
:focus-visible{outline:3px solid var(--focus); outline-offset:4px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important}}

.shell{max-width:var(--shell); margin:0 auto; padding-inline:clamp(20px,5vw,40px)}

/* Escala de display Bebas: caixa alta, entrelinha curta, tracking mínimo positivo. */
.d1,.d2,.d3{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  color:var(--paper); margin:0; line-height:.92; letter-spacing:.005em; text-wrap:balance;
}
.d1{font-size:clamp(52px,10.5vw,124px)}
.d2{font-size:clamp(38px,6.4vw,80px)}
.d3{font-size:clamp(26px,3.4vw,38px); line-height:1}
.gold{color:var(--gold)}
.thin{color:var(--steel)}

h3{font-family:var(--body); font-weight:600; font-size:19px; line-height:1.35; color:var(--paper); margin:0; letter-spacing:-.01em}

.kicker{
  font-family:var(--body); font-size:11.5px; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:var(--gold);
}
.lead{font-size:clamp(16.5px,1.9vw,19px); line-height:1.75; max-width:58ch}
.muted{color:var(--steel)}

/* CTA em caixa alta, padrão da marca. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:56px; padding:0 30px; border:1px solid transparent; border-radius:2px;
  font-family:var(--body); font-size:13px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
  transition:background 160ms var(--ease), color 160ms var(--ease),
             border-color 160ms var(--ease), transform 160ms var(--ease);
}
.btn--gold{background:var(--gold-grad); color:var(--ink)}
.btn--gold:hover{background:var(--gold-light)}
.btn--gold:active{background:var(--gold-dark); transform:translateY(1px)}
.btn--gold[disabled]{opacity:.55; cursor:default; transform:none}
.btn--line{border-color:var(--line-mid); color:var(--paper)}
.btn--line:hover{border-color:var(--gold); color:var(--gold)}
.btn svg{width:16px; height:16px; flex:none}

/* ── topo ───────────────────────────────────────────────────────────── */
.top{
  position:sticky; top:0; z-index:40; background:rgba(5,13,20,.88);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
}
.top__in{display:flex; align-items:center; gap:28px; height:72px}
.sig{display:grid; line-height:1}
.sig b{font-family:var(--display); font-weight:400; font-size:26px; letter-spacing:.04em; color:var(--paper)}
.sig i{font-style:normal; font-size:9.5px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-top:4px}
.top nav{display:none; gap:30px; margin-left:auto;
  font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase}
.top nav a{color:var(--steel)}
.top nav a:hover{color:var(--paper)}
.top .btn{margin-left:auto; min-height:42px; padding:0 20px; font-size:11px}
@media (max-width:599px){.top .btn{display:none}}
@media (min-width:1000px){.top nav{display:flex} .top .btn{margin-left:0}}

/* ── hero ───────────────────────────────────────────────────────────── */
.hero{position:relative; overflow:hidden; background:var(--ink); border-bottom:1px solid var(--line)}
.hero__ph{position:absolute; inset:0}
.hero__ph img{width:100%; height:100%; object-fit:cover; object-position:10% 28%; filter:saturate(.62) contrast(1.06) brightness(.8)}
.hero__ph::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(96deg,#050D14 0%,rgba(5,13,20,.93) 32%,rgba(5,13,20,.52) 60%,rgba(5,13,20,.74) 100%);
}
/* O bloco de texto é ancorado à esquerda por um filho do .shell.
   Estreitar o próprio .shell o centralizaria, porque ele tem margin auto. */
.hero__in{position:relative; display:flex; padding-block:clamp(72px,12vw,152px)}
.hero__copy{display:flex; flex-direction:column; align-items:flex-start; margin-right:auto; max-width:100%}
@media (min-width:900px){.hero__copy{max-width:min(660px,56%)} .hero .d1{max-width:14ch}}
.hero .d1{margin-top:26px; font-size:clamp(46px,7.6vw,104px)}
.hero__copy>p{margin-top:26px; max-width:40ch; font-size:clamp(16px,1.8vw,18.5px); color:var(--steel-light)}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px}
.hero__note{margin-top:26px; font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--steel)}
@media (max-width:899px){
  .hero__ph img{object-position:56% 26%}
  .hero__ph::after{background:linear-gradient(180deg,rgba(5,13,20,.8) 0%,rgba(5,13,20,.88) 55%,rgba(5,13,20,.94) 100%)}
}

/* ── quem conduz ────────────────────────────────────────────────────── */
.auth{background:var(--ink); border-bottom:1px solid var(--line); position:relative; overflow:hidden}
.auth__in{position:relative; z-index:1; display:grid; gap:clamp(32px,5vw,56px);
  padding-block:clamp(64px,9vw,112px); align-items:center}
.auth p+p{margin-top:18px}
.auth .lead{max-width:none}
.auth__ph{margin:0; position:relative; overflow:hidden}
.auth__ph img{width:100%; object-fit:cover; filter:saturate(.62) contrast(1.06) brightness(.86);
  aspect-ratio:3/2; object-position:50% 22%}
.auth__ph::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(5,13,20,.25) 0%,rgba(5,13,20,.72) 100%)}
/* A partir do desktop a foto sai do fluxo e sangra até a borda direita. */
@media (min-width:960px){
  .auth__in{grid-template-columns:minmax(0,1fr) 44%}
  .auth__txt{position:relative; z-index:2; max-width:46ch}
  .auth__ph{position:absolute; top:0; right:0; bottom:0; width:46%; margin:0}
  .auth__ph img{width:100%; height:100%; aspect-ratio:auto; object-position:52% 24%}
  .auth__ph::after{background:linear-gradient(270deg,rgba(5,13,20,0) 30%,rgba(5,13,20,.6) 72%,#050D14 100%)}
}

/* ── faixas de número ───────────────────────────────────────────────── */
.figs{border-bottom:0; background:var(--ink)}
.figs__in{display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--line-mid); border:1px solid var(--line-mid);
  margin-top:clamp(36px,4.5vw,56px)}
@media (min-width:560px){.figs__in{grid-template-columns:repeat(2,1fr)}}
@media (min-width:820px){.figs__in{grid-template-columns:repeat(4,1fr)}}
.fig{background:var(--ink); padding:clamp(28px,3.2vw,38px) clamp(22px,2.4vw,30px);
  display:grid; gap:16px; align-content:start}
.fig::before{content:""; width:34px; height:3px; background:var(--gold-grad)}
.fig b{font-family:var(--display); font-weight:400; font-size:clamp(40px,4.7vw,58px);
  line-height:.9; letter-spacing:.012em; color:var(--paper)}
.fig span{font-size:14px; line-height:1.55; color:var(--steel-light)}
.figs__note{display:flex; gap:14px; font-size:13.5px; line-height:1.7; color:var(--steel);
  padding-block:clamp(26px,3vw,34px) clamp(52px,7vw,76px)}
.figs__note::before{content:"★"; flex:none; color:var(--gold); line-height:1.5}

/* ── stack ──────────────────────────────────────────────────────────── */
.cli{background:var(--ink); border-bottom:1px solid var(--line)}
.cli__in{padding-block:clamp(48px,6vw,72px); display:grid; gap:26px; justify-items:center; text-align:center}
.cli__row{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px}
.cli__row span{font-family:var(--display); font-size:22px; letter-spacing:.06em; color:var(--steel-light);
  border:1px solid var(--line); padding:9px 18px 6px}

/* ── blocos gerais ──────────────────────────────────────────────────── */
section{border-bottom:1px solid var(--line)}
.band{padding-block:clamp(64px,9vw,112px); background:var(--ink)}
.head{display:grid; gap:20px; max-width:64ch; margin-bottom:clamp(40px,5vw,60px)}

.tri{display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
@media (min-width:820px){.tri{grid-template-columns:repeat(3,1fr)}}
/* Quatro serviços: 2×2 no desktop, para nenhuma célula ficar órfã. */
@media (min-width:820px){.tri--2{grid-template-columns:repeat(2,1fr)}}
.tri>article{background:var(--ink); padding:32px 28px 36px; display:grid; gap:14px; align-content:start}
.tri p{font-size:15px; line-height:1.65; color:var(--steel)}
.tri b{font-family:var(--display); font-size:30px; letter-spacing:.03em; color:var(--gold-dark); line-height:1}
.tri>article:hover b{color:var(--gold)}

/* Tags técnicas dentro do cartão de serviço. */
.tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:4px}
.tags span{font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel); border:1px solid var(--line); border-radius:4px; padding:5px 9px}

/* ── cases ──────────────────────────────────────────────────────────── */
.task{display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
@media (min-width:800px){.task{grid-template-columns:repeat(2,1fr)}}
.task>div{background:var(--ink); padding:30px 28px; display:grid; gap:12px; align-content:start}
.task p{font-size:15px; line-height:1.65; color:var(--steel)}
.task .delta{display:flex; align-items:baseline; gap:12px; margin-top:6px; padding-top:16px; border-top:1px solid var(--line)}
.task .delta b{font-family:var(--display); font-weight:400; font-size:34px; line-height:1; letter-spacing:.02em; color:var(--gold)}
.task .delta i{font-style:normal; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--steel)}

/* ── conteúdo ───────────────────────────────────────────────────────── */
.post__meta{display:flex; gap:14px; align-items:baseline; font-size:10.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold)}
.post__meta i{font-style:normal; color:var(--steel)}

/* ── cta final + formulário ─────────────────────────────────────────── */
.final{background:var(--ink); position:relative; overflow:hidden}
.final__halo{position:absolute; left:50%; top:-320px; width:900px; height:700px; transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(227,176,75,.16) 0%,rgba(227,176,75,0) 70%); pointer-events:none}
.final__in{position:relative; padding-block:clamp(72px,10vw,120px); display:grid; gap:clamp(36px,5vw,60px)}
@media (min-width:960px){.final__in{grid-template-columns:1fr 1fr; align-items:start}}
.panel{border:1px solid var(--line-mid); background:rgba(138,166,188,.07); padding:32px; display:grid; gap:22px}
.panel dl{margin:0; display:grid; gap:0}
.panel .row{display:flex; justify-content:space-between; gap:18px; align-items:baseline; padding:13px 0; border-bottom:1px solid var(--line)}
.panel .row:last-of-type{border-bottom:0}
.panel dt{font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--steel)}
.panel dd{margin:0; font-size:14.5px; font-weight:500; color:var(--paper); text-align:right}
.panel dd a{color:var(--paper)}
.panel dd a:hover{color:var(--gold)}
.panel .btn{width:100%}
.panel small{font-size:12px; line-height:1.6; color:var(--steel); text-align:center; display:block}

.form{display:grid; gap:16px}
.form label{display:grid; gap:8px; font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--steel)}
.form input,.form select,.form textarea{
  font-family:var(--body); font-size:15px; font-weight:300; color:var(--paper);
  background:rgba(5,13,20,.55); border:1px solid var(--line-mid); border-radius:2px;
  padding:13px 14px; width:100%; letter-spacing:normal; text-transform:none;
  transition:border-color 160ms var(--ease);
}
.form textarea{resize:vertical; min-height:118px; line-height:1.6}
.form input:hover,.form select:hover,.form textarea:hover{border-color:var(--steel)}
.form input::placeholder,.form textarea::placeholder{color:rgba(138,166,188,.55)}
.form select{appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat}
.form select option{background:var(--ink); color:var(--paper)}
.form__row{display:grid; gap:16px}
@media (min-width:520px){.form__row{grid-template-columns:1fr 1fr}}
.form__msg{display:none; font-size:13.5px; line-height:1.6; text-align:center}

/* ── rodapé ─────────────────────────────────────────────────────────── */
footer{background:var(--ink); border-bottom:0}
.foot{display:flex; flex-wrap:wrap; gap:16px 34px; align-items:center; padding-block:40px;
  font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--steel)}
.foot .sig{margin-right:auto}
.foot a{color:var(--steel)}
.foot a:hover{color:var(--paper)}
.star{color:var(--gold)}

/* ── cta fixo no mobile ─────────────────────────────────────────────── */
.dock{position:fixed; left:0; right:0; bottom:0; z-index:50;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(5,13,20,.95); backdrop-filter:blur(14px); border-top:1px solid var(--line)}
.dock .btn{width:100%}
@media (min-width:1000px){.dock{display:none}}
@media (max-width:999px){body{padding-bottom:92px}}

/* Consentimento: exigido porque o primeiro contato sai por WhatsApp. */
.form .form__consent{grid-template-columns:auto 1fr; align-items:start; gap:11px;
  font-size:12px; font-weight:400; letter-spacing:normal; text-transform:none;
  line-height:1.55; color:var(--steel); cursor:pointer}
.form .form__consent input{width:17px; height:17px; margin-top:2px; padding:0;
  accent-color:var(--gold); cursor:pointer}

/* Painel que substitui o formulário depois do envio. */
.form-ok{display:grid; gap:14px; justify-items:start}
.form-ok h3{margin-top:2px}
.form-ok p{font-size:15px; line-height:1.65; color:var(--steel)}
.form-ok .btn{width:100%; margin-top:6px}
.form-ok small{font-size:12px; line-height:1.6; color:var(--steel); width:100%; text-align:center}

/* Utilitários de espaçamento. Existem para o CSP poder proibir style inline. */
.mt-22{margin-top:22px}
.mt-26{margin-top:26px}
.mt-28{margin-top:28px}
.mt-34{margin-top:34px}

/* Honeypot: fora da tela, sem display:none — bot moderno ignora campo oculto
   por display, mas preenche o que continua no fluxo. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}