/* =========================================================
   TRAFIMO — Performance digital para lançamentos imobiliários
   Paleta: asfalto / concreto / brasa / barro / areia / sinal
   Tipografia: Archivo (display) · Instrument Sans (texto) · IBM Plex Mono (dados)
   ========================================================= */

:root{
  /* superfícies */
  --asphalt:    #16110F;
  --asphalt-2:  #1E1815;
  --asphalt-3:  #2A2220;
  --concrete:   #E7E3DD;
  --concrete-2: #F3F0EC;

  /* marca */
  --ember:  #F03D22;
  --ember-2:#FF6A4D;
  --clay:   #7E2A17;
  --sand:   #E9B44C;
  --signal: #12A150;
  --signal-2:#16BC5D;

  /* texto */
  --bone:       #F7F4F0;
  --bone-dim:   #B4A9A2;
  --bone-faint: #7C716B;
  --ink:        #1A1512;
  --ink-dim:    #6A605A;

  /* linhas */
  --rule-dark:  rgba(247,244,240,.12);
  --rule-light: rgba(26,21,18,.14);

  /* métrica */
  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 48px);
  --sec-y: clamp(72px, 10vw, 130px);
  --r: 4px;

  --ease: cubic-bezier(.22,.68,.28,1);
}

*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--asphalt);
  color:var(--bone);
  font-family:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

::selection{ background:var(--ember); color:#fff; }

:focus-visible{
  outline:2px solid var(--sand);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--sand); color:var(--ink);
  padding:12px 20px; font-weight:600;
}
.skip-link:focus{ left:0; }

/* ---------- tipografia ---------- */

h1, h2, h3{
  font-family:"Archivo", system-ui, sans-serif;
  font-variation-settings:"wdth" 112;
  font-weight:800;
  line-height:.98;
  letter-spacing:-.025em;
  margin:0;
  text-wrap:balance;
}

h1{ font-size:clamp(2.15rem, 4.4vw, 3.3rem); font-variation-settings:"wdth" 104; max-width:16ch; }
h2{ font-size:clamp(1.85rem, 3.8vw, 2.8rem); }
h3{ font-size:clamp(1.25rem, 2.1vw, 1.6rem); font-variation-settings:"wdth" 105; letter-spacing:-.018em; }

h1 em{
  font-style:normal;
  color:var(--ember);
}

p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

a{ color:inherit; }

.mono-label{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.688rem;
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--bone-faint);
}

.eyebrow{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ember);
  margin:0 0 1.15rem;
  display:flex;
  align-items:center;
  gap:.7rem;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--ember); flex:none;
}

.lede{
  font-size:clamp(1rem, 1.5vw, 1.13rem);
  color:var(--bone-dim);
  max-width:46ch;
}

/* ---------- botões ---------- */

.btn{
  --btn-bg:transparent; --btn-fg:var(--bone); --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  padding:.86rem 1.5rem;
  border-radius:100px;
  font-family:"Instrument Sans", sans-serif;
  font-size:.94rem; font-weight:600; letter-spacing:.005em;
  text-decoration:none;
  cursor:pointer;
  transition:transform .25s var(--ease), background-color .25s var(--ease),
             color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn .ico{ width:19px; height:19px; fill:currentColor; flex:none; }

.btn-signal{ --btn-bg:var(--signal); --btn-fg:#fff; --btn-bd:var(--signal);
  box-shadow:0 6px 22px -8px rgba(18,161,80,.85); }
.btn-signal:hover{ --btn-bg:var(--signal-2); --btn-bd:var(--signal-2);
  box-shadow:0 12px 30px -10px rgba(18,161,80,.9); }

.btn-ghost{ --btn-bd:var(--rule-dark); --btn-fg:var(--bone); }
.btn-ghost:hover{ --btn-bd:var(--bone-dim); background:rgba(247,244,240,.05); }

.btn-outline{ --btn-bd:var(--rule-dark); --btn-fg:var(--bone); }
.btn-outline:hover{ --btn-bg:var(--ember); --btn-bd:var(--ember); --btn-fg:#fff; }

.btn-dark{ --btn-bg:var(--ink); --btn-fg:var(--concrete-2); --btn-bd:var(--ink); }
.btn-dark:hover{ --btn-bg:var(--ember); --btn-bd:var(--ember); --btn-fg:#fff; }

.btn-lg{ padding:1.05rem 2rem; font-size:1rem; }
.btn-sm{ padding:.6rem 1.15rem; font-size:.85rem; }
.btn-block{ display:flex; width:100%; }

/* =========================================================
   HEADER
   ========================================================= */

.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(22,17,15,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.site-header.is-stuck{
  border-bottom-color:var(--rule-dark);
  background:rgba(22,17,15,.93);
}

.header-inner{
  display:flex; align-items:center; gap:clamp(16px,3vw,40px);
  min-height:72px;
}

.brand{ flex:none; line-height:0; }
.brand img{ width:132px; height:auto; }

.nav{
  display:flex; align-items:center; gap:clamp(14px,2.2vw,30px);
  margin-inline:auto;
}
.nav a{
  position:relative;
  font-size:.9rem; font-weight:500;
  color:var(--bone-dim); text-decoration:none;
  padding:4px 0;
  transition:color .2s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--ember); transition:width .3s var(--ease);
}
.nav a:hover{ color:var(--bone); }
.nav a:hover::after{ width:100%; }

.nav-toggle{
  display:none;
  width:42px; height:42px; flex:none;
  background:none; border:1px solid var(--rule-dark); border-radius:var(--r);
  cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{ display:block; width:17px; height:1.5px; background:var(--bone);
  transition:transform .3s var(--ease), opacity .2s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.nav-mobile{
  display:none;
  flex-direction:column; gap:2px;
  padding:8px var(--gut) 24px;
  border-top:1px solid var(--rule-dark);
}
.nav-mobile a:not(.btn){
  padding:14px 0; text-decoration:none; font-size:1.05rem; font-weight:500;
  border-bottom:1px solid var(--rule-dark);
}
.nav-mobile .btn{ margin-top:18px; }

@media (max-width:940px){
  .nav, .header-cta{ display:none; }
  .nav-toggle{ display:flex; margin-left:auto; }
  .nav-mobile[hidden]{ display:none; }
  .nav-mobile{ display:flex; }
}

/* =========================================================
   HERO
   ========================================================= */

.hero{
  position:relative;
  padding:clamp(56px, 8vw, 96px) 0 clamp(56px, 8vw, 92px);
  overflow:hidden;
}

.hero-bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 85% at 78% 8%, rgba(240,61,34,.20) 0%, transparent 58%),
    radial-gradient(80% 60% at 8% 100%, rgba(126,42,23,.24) 0%, transparent 62%);
}
/* malha técnica: o papel quadriculado do memorial descritivo */
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(247,244,240,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(247,244,240,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 78%);
}

.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:clamp(32px, 5vw, 72px);
  align-items:center;
}

.hero-copy h1{ margin-bottom:1.4rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.1rem; }

/* ---------- ASSINATURA: o agente de I.A. ----------
   O produto funcionando, não um desenho dele. O visitante
   responde, o agente qualifica e a ficha se preenche ao vivo. */

.agent{
  display:flex; flex-direction:column;
  background:linear-gradient(168deg, rgba(42,34,32,.94), rgba(22,17,15,.96));
  border:1px solid var(--rule-dark);
  border-radius:var(--r);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95);
  overflow:hidden;
}

/* cabeçalho */

.agent-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:14px clamp(16px,2vw,20px);
  border-bottom:1px solid var(--rule-dark);
  background:rgba(247,244,240,.028);
}
.agent-id{ display:flex; align-items:center; gap:.7rem; min-width:0; }

.agent-avatar{
  position:relative; flex:none;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(150deg, var(--ember), var(--clay));
  font-family:"IBM Plex Mono", monospace;
  font-size:.7rem; font-weight:600; letter-spacing:.06em; color:#fff;
}
.agent-pulse{
  position:absolute; right:-1px; bottom:-1px;
  width:11px; height:11px; border-radius:50%;
  background:var(--signal-2);
  box-shadow:0 0 0 2.5px var(--asphalt-3);
}

.agent-who{ display:flex; flex-direction:column; gap:.12rem; min-width:0; }
.agent-who b{
  font-family:"Archivo", sans-serif; font-variation-settings:"wdth" 104;
  font-size:.98rem; font-weight:700; letter-spacing:-.012em; color:var(--bone);
}
.agent-who em{ font-style:normal; font-size:.6rem; }

.agent-restart{
  flex:none;
  font-family:"IBM Plex Mono", monospace;
  font-size:.62rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bone-faint);
  background:none; border:1px solid var(--rule-dark); border-radius:100px;
  padding:.4rem .8rem; cursor:pointer;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.agent-restart:hover{ color:var(--bone); border-color:var(--bone-faint); }

/* conversa */

.agent-chat{
  display:flex; flex-direction:column; gap:.55rem;
  height:clamp(206px, 26vh, 250px);
  overflow-y:auto; overscroll-behavior:contain;
  padding:clamp(16px,2vw,20px);
  scrollbar-width:thin;
  scrollbar-color:rgba(247,244,240,.18) transparent;
}
.agent-chat::-webkit-scrollbar{ width:5px; }
.agent-chat::-webkit-scrollbar-thumb{ background:rgba(247,244,240,.18); border-radius:100px; }

.msg{
  max-width:84%;
  padding:.62rem .85rem;
  border-radius:12px;
  font-size:.88rem; line-height:1.45;
}
.msg-ia{
  align-self:flex-start;
  background:rgba(247,244,240,.075);
  border:1px solid rgba(247,244,240,.06);
  border-bottom-left-radius:3px;
  color:var(--bone);
}
.msg-lead{
  align-self:flex-end;
  background:rgba(18,161,80,.22);
  border:1px solid rgba(18,161,80,.4);
  border-bottom-right-radius:3px;
  color:var(--bone);
}
.msg-sistema{
  align-self:center; max-width:100%;
  background:none; border:0;
  padding:.3rem 0;
  font-family:"IBM Plex Mono", monospace;
  font-size:.62rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sand);
  text-align:center;
}

.msg-typing{ display:flex; gap:4px; padding:.78rem .85rem; }
.msg-typing i{
  width:6px; height:6px; border-radius:50%;
  background:var(--bone-faint);
  animation:blip 1.25s var(--ease) infinite;
}
.msg-typing i:nth-child(2){ animation-delay:.18s; }
.msg-typing i:nth-child(3){ animation-delay:.36s; }
@keyframes blip{ 0%,60%,100%{ opacity:.28; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

/* respostas */

.agent-options{
  display:flex; flex-wrap:wrap; gap:.4rem;
  padding:0 clamp(16px,2vw,20px) clamp(14px,1.8vw,18px);
  min-height:2.55rem;
  align-content:flex-start;
}
.agent-options:empty{ display:none; }

.agent-options button{
  font-family:"Instrument Sans", sans-serif;
  font-size:.83rem; font-weight:500;
  color:var(--bone);
  background:rgba(247,244,240,.04);
  border:1px solid var(--rule-dark); border-radius:100px;
  padding:.46rem .95rem; cursor:pointer;
  transition:background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.agent-options button:hover{
  background:rgba(18,161,80,.16); border-color:var(--signal); transform:translateY(-1px);
}
.agent-options .cta-final-btn{
  background:var(--signal); border-color:var(--signal); color:#fff; font-weight:600;
  text-decoration:none; display:inline-flex; align-items:center; gap:.45rem;
}
.agent-options .cta-final-btn:hover{ background:var(--signal-2); border-color:var(--signal-2); }
.agent-options .cta-final-btn svg{ width:16px; height:16px; fill:currentColor; }

/* ficha do lead */

.agent-card{
  border-top:1px solid var(--rule-dark);
  background:rgba(0,0,0,.24);
  padding:clamp(14px,1.8vw,18px) clamp(16px,2vw,20px);
  display:flex; flex-direction:column; gap:.9rem;
}

.agent-fields{
  display:grid; grid-template-columns:1fr 1fr;
  gap:.7rem clamp(12px,1.6vw,20px);
  margin:0;
}
.agent-fields > div{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.agent-fields dt{
  font-family:"IBM Plex Mono", monospace;
  font-size:.58rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bone-faint);
}
.agent-fields dd{
  margin:0;
  font-size:.86rem; font-weight:500; line-height:1.3;
  color:var(--bone-faint);
  transition:color .3s var(--ease);
}
.agent-fields dd.filled{ color:var(--bone); }

.agent-status{
  display:flex; align-items:center; gap:.5rem;
  margin:0; padding-top:.75rem;
  border-top:1px solid var(--rule-dark);
  font-family:"IBM Plex Mono", monospace;
  font-size:.64rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  color:var(--bone-faint);
}
.agent-dot{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--bone-faint);
  transition:background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.agent-status[data-state="andamento"]{ color:var(--bone-dim); }
.agent-status[data-state="andamento"] .agent-dot{ background:var(--ember); box-shadow:0 0 10px -1px var(--ember); }
.agent-status[data-state="quente"]{ color:var(--signal-2); }
.agent-status[data-state="quente"] .agent-dot{ background:var(--signal-2); box-shadow:0 0 10px -1px var(--signal-2); }
.agent-status[data-state="morno"]{ color:var(--sand); }
.agent-status[data-state="morno"] .agent-dot{ background:var(--sand); box-shadow:0 0 10px -1px var(--sand); }

@media (prefers-reduced-motion:reduce){
  .msg-typing i{ animation:none; opacity:.6; }
}

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .lede{ max-width:none; }
}
@media (max-width:560px){
  .hero-actions .btn{ flex:1 1 100%; }
}

/* =========================================================
   NÚMEROS
   ========================================================= */

.stats{
  padding:clamp(44px,6vw,68px) 0;
  border-top:1px solid var(--rule-dark);
  border-bottom:1px solid var(--rule-dark);
  background:var(--asphalt-2);
}
.stats-title{ margin:0 0 30px; }

.stats-rail{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:1px;
  margin:0;
  background:var(--rule-dark);
  border:1px solid var(--rule-dark);
}
.stat{
  background:var(--asphalt-2);
  padding:22px clamp(12px,1.6vw,22px) 20px;
  display:flex; flex-direction:column-reverse; gap:.55rem;
}
.stat dd{
  margin:0;
  font-family:"Archivo", sans-serif;
  font-variation-settings:"wdth" 118;
  font-size:clamp(1.5rem, 2.6vw, 2.15rem);
  font-weight:800; line-height:1;
  letter-spacing:-.03em;
  color:var(--bone);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.stat dd .unit{ color:var(--ember); }
.stat dt{
  font-size:.8rem; line-height:1.35;
  color:var(--bone-faint);
}

@media (max-width:860px){
  .stats-rail{ grid-template-columns:repeat(2, 1fr); }
  .stat:last-child{ grid-column:1 / -1; }
}
@media (max-width:420px){
  .stats-rail{ grid-template-columns:1fr; }
  .stat:last-child{ grid-column:auto; }
}

/* =========================================================
   CABEÇALHOS DE SEÇÃO
   ========================================================= */

.sec-head{
  max-width:740px;
  margin:0 auto clamp(44px,6vw,72px);
  text-align:center;
}
.sec-head .eyebrow{ justify-content:center; }
.sec-head h2{ margin-bottom:1rem; }
.sec-sub{ color:var(--bone-dim); font-size:1.02rem; }

.sec-head--left{ text-align:left; margin-inline:0; }
.sec-head--left .eyebrow{ justify-content:flex-start; }

.sec-head--light h2{ color:var(--ink); }
.sec-head--light .sec-sub{ color:var(--ink-dim); }

/* =========================================================
   JORNADA
   ========================================================= */

.jornada{ padding:var(--sec-y) 0; }

.steps{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-dark); }

.step{
  display:grid;
  grid-template-columns:auto 1fr 280px;
  gap:clamp(20px,3.4vw,52px);
  align-items:start;
  padding:clamp(28px,3.6vw,44px) 0;
  border-bottom:1px solid var(--rule-dark);
  transition:background-color .4s var(--ease);
}
.step:hover{ background:rgba(247,244,240,.022); }

.step-num{
  font-family:"IBM Plex Mono", monospace;
  font-size:.8rem; font-weight:600; letter-spacing:.1em;
  color:var(--ember);
  padding-top:.55rem;
  min-width:2.4ch;
}
.step-art{ align-self:center; }

.step-body h3{ margin-bottom:.7rem; }
.step-body p{ color:var(--bone-dim); font-size:.98rem; max-width:56ch; }
.step-kicker{
  color:var(--bone) !important;
  font-weight:500;
  border-left:2px solid var(--ember);
  padding-left:.9rem;
  margin-top:1rem !important;
}

.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:.45rem; margin:1rem 0 0; padding:0; }
.chips li{
  font-family:"IBM Plex Mono", monospace;
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bone-dim);
  border:1px solid var(--rule-dark);
  border-radius:100px;
  padding:.32rem .8rem;
}

/* miniaturas do processo */
.step-art{
  height:132px;
  border:1px solid var(--rule-dark);
  border-radius:var(--r);
  background:var(--asphalt-2);
  padding:16px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}

.art-creatives{ display:grid; grid-template-columns:1fr 1fr; gap:7px; width:100%; height:100%; }
.art-creatives .frame{
  border-radius:2px;
  background:linear-gradient(135deg, rgba(240,61,34,.5), rgba(126,42,23,.25));
  box-shadow:inset 0 0 0 1px rgba(247,244,240,.08);
  animation:swap 5.2s var(--ease) infinite;
}
.art-creatives .f2{ animation-delay:.5s; background:linear-gradient(135deg, rgba(233,180,76,.5), rgba(126,42,23,.2)); }
.art-creatives .f3{ animation-delay:1s; background:linear-gradient(135deg, rgba(126,42,23,.5), rgba(240,61,34,.2)); }
.art-creatives .f4{ animation-delay:1.5s; }
@keyframes swap{ 0%,70%,100%{ opacity:.35; transform:scale(1); } 12%,42%{ opacity:1; transform:scale(1.035); } }

.art-bars{ display:flex; align-items:flex-end; gap:6px; width:100%; height:100%; }
.art-bars span{
  flex:1; height:var(--h);
  background:linear-gradient(to top, var(--clay), var(--ember));
  border-radius:1px;
}
.art-bars span:last-child{ background:linear-gradient(to top, var(--ember), var(--sand)); }

.art-chat{ display:flex; flex-direction:column; gap:8px; width:100%; }
.art-chat .bub{ height:13px; border-radius:100px; }
.art-chat .in{ width:62%; background:rgba(247,244,240,.13); }
.art-chat .in.short{ width:44%; }
.art-chat .out{ width:72%; align-self:flex-end; background:rgba(18,161,80,.55); }

.art-dash{ width:100%; height:100%; display:flex; flex-direction:column; gap:10px; }
.art-dash svg{ width:100%; flex:1; overflow:visible; }
.art-dash polyline{
  fill:none; stroke:var(--sand); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:400; stroke-dashoffset:400;
}
.step.is-in .art-dash polyline{ animation:draw 1.6s var(--ease) forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.dash-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.dash-tiles span{ height:16px; border-radius:2px; background:rgba(247,244,240,.08); }
.dash-tiles span:first-child{ background:rgba(240,61,34,.4); }

@media (max-width:900px){
  .step{ grid-template-columns:auto 1fr; }
  .step-art{ grid-column:2; width:100%; max-width:340px; height:104px; }
}
@media (max-width:560px){
  .step{ grid-template-columns:1fr; gap:14px; }
  .step-art{ grid-column:1; max-width:none; }
}

/* =========================================================
   CALCULADORA  (superfície de concreto)
   ========================================================= */

.calc{
  padding:var(--sec-y) 0;
  background:var(--concrete);
  color:var(--ink);
}
.calc .eyebrow{ color:var(--clay); }
.calc .eyebrow::before{ background:var(--clay); }

.calc-panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  background:var(--concrete-2);
  border:1px solid var(--rule-light);
  border-radius:var(--r);
  overflow:hidden;
}

.calc-input{
  padding:clamp(26px,3.4vw,44px);
  border-right:1px solid var(--rule-light);
}
.calc-q{
  display:block;
  font-family:"Archivo", sans-serif;
  font-variation-settings:"wdth" 105;
  font-size:1.18rem; font-weight:700; line-height:1.2;
  letter-spacing:-.015em;
  color:var(--ink);
  margin-bottom:1.4rem;
}

.calc-amount{
  display:block;
  font-family:"Archivo", sans-serif;
  font-variation-settings:"wdth" 120;
  font-size:clamp(2.6rem, 6vw, 3.9rem);
  font-weight:800; line-height:1;
  letter-spacing:-.035em;
  color:var(--ember);
  font-variant-numeric:tabular-nums;
  margin-bottom:1.5rem;
}

input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:34px; background:transparent; cursor:grab; margin:0;
}
input[type=range]:active{ cursor:grabbing; }
input[type=range]::-webkit-slider-runnable-track{
  height:5px; border-radius:100px;
  background:linear-gradient(to right, var(--ember) var(--pct,25%), rgba(26,21,18,.13) var(--pct,25%));
}
input[type=range]::-moz-range-track{
  height:5px; border-radius:100px;
  background:linear-gradient(to right, var(--ember) var(--pct,25%), rgba(26,21,18,.13) var(--pct,25%));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:24px; height:24px; margin-top:-9.5px;
  border-radius:50%; background:var(--ink);
  border:4px solid var(--concrete-2);
  box-shadow:0 3px 12px -3px rgba(26,21,18,.6);
  transition:transform .2s var(--ease);
}
input[type=range]::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%; background:var(--ink);
  border:4px solid var(--concrete-2);
  box-shadow:0 3px 12px -3px rgba(26,21,18,.6);
}
input[type=range]:hover::-webkit-slider-thumb{ transform:scale(1.12); }

.calc-scale{ display:flex; justify-content:space-between; color:var(--ink-dim); margin-top:2px; }
.calc-hint{ color:var(--ink-dim); margin:1.4rem 0 .7rem; }

.calc-presets{ display:flex; flex-wrap:wrap; gap:.45rem; }
.calc-presets button{
  font-family:"IBM Plex Mono", monospace;
  font-size:.75rem; font-weight:500;
  background:transparent; color:var(--ink-dim);
  border:1px solid var(--rule-light); border-radius:100px;
  padding:.42rem .85rem; cursor:pointer;
  transition:all .2s var(--ease);
}
.calc-presets button:hover{ border-color:var(--ink); color:var(--ink); }
.calc-presets button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--concrete-2); }

.calc-results{
  padding:clamp(26px,3.4vw,44px);
  display:flex; flex-direction:column; gap:1.6rem;
  background:var(--concrete-2);
}

.funnel{ display:flex; flex-direction:column; gap:1.05rem; }
.fstep{ display:grid; grid-template-columns:1fr auto; gap:.2rem .8rem; align-items:baseline; }
.fstep .mono-label{ color:var(--ink-dim); }
.fstep strong{
  font-family:"Archivo", sans-serif;
  font-variation-settings:"wdth" 115;
  font-size:clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight:800; line-height:1; letter-spacing:-.028em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  text-align:right;
}
.fbar{
  grid-column:1 / -1;
  height:5px; border-radius:100px;
  background:var(--clay);
  width:var(--w);
  transform-origin:left;
  transition:width .5s var(--ease);
}
.fstep[data-k="clk"] .fbar{ background:var(--ember); }
.fstep[data-k="lead"] .fbar{ background:var(--sand); }

.calc-kpis{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--rule-light);
  border:1px solid var(--rule-light);
  border-radius:var(--r);
  overflow:hidden;
}
.kpi{
  background:var(--concrete-2);
  padding:.95rem 1.1rem;
  display:flex; flex-direction:column; gap:.3rem;
}
.kpi .mono-label{ color:var(--ink-dim); font-size:.63rem; }
.kpi strong{
  font-family:"Archivo", sans-serif;
  font-variation-settings:"wdth" 112;
  font-size:1.3rem; font-weight:800; letter-spacing:-.025em;
  color:var(--clay);
  font-variant-numeric:tabular-nums;
}

.calc-meta{
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(20px,3vw,44px); align-items:center;
  margin-top:28px;
}
.benchmarks{ list-style:none; display:flex; gap:clamp(14px,2.4vw,30px); margin:0; padding:0; }
.benchmarks li{ display:flex; flex-direction:column; gap:.15rem; }
.benchmarks strong{
  font-family:"Archivo", sans-serif;
  font-variation-settings:"wdth" 112;
  font-size:1.12rem; font-weight:800; color:var(--ink); letter-spacing:-.02em;
}
.benchmarks .mono-label{ color:var(--ink-dim); font-size:.62rem; }

.disclaimer{
  font-size:.78rem; line-height:1.55; color:var(--ink-dim);
  border-left:2px solid var(--rule-light); padding-left:1rem;
  margin:0;
}

@media (max-width:820px){
  .calc-panel{ grid-template-columns:1fr; }
  .calc-input{ border-right:0; border-bottom:1px solid var(--rule-light); }
  .calc-meta{ grid-template-columns:1fr; }
  .benchmarks{ justify-content:space-between; }
}

/* =========================================================
   PLANOS
   ========================================================= */

.planos{ padding:var(--sec-y) 0; }

.plan-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px); }

.plan{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--asphalt-2);
  border:1px solid var(--rule-dark);
  border-radius:var(--r);
  padding:clamp(24px,2.6vw,32px);
  transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.plan:hover{ transform:translateY(-4px); border-color:rgba(247,244,240,.24); }

.plan header{ padding-bottom:1.3rem; margin-bottom:1.3rem; border-bottom:1px solid var(--rule-dark); }
.plan-tier{ display:block; margin-bottom:.9rem; }
.plan h3{ margin-bottom:.4rem; }
.plan header p{ color:var(--bone-faint); font-size:.92rem; margin:0; }

.plan-list{ list-style:none; margin:0 0 1.7rem; padding:0; flex:1; display:flex; flex-direction:column; gap:.62rem; }
.plan-list li{
  position:relative; padding-left:1.55rem;
  font-size:.92rem; line-height:1.45; color:var(--bone-dim);
}
.plan-list li::before{
  content:""; position:absolute; left:0; top:.44em;
  width:9px; height:5px;
  border-left:1.5px solid var(--signal-2); border-bottom:1.5px solid var(--signal-2);
  transform:rotate(-45deg);
}
.plan-list li.inherit{
  color:var(--bone); font-weight:600;
  padding-bottom:.62rem; border-bottom:1px dashed var(--rule-dark);
}
.plan-list li.inherit::before{ border-color:var(--sand); }

.plan--featured{
  background:linear-gradient(170deg, rgba(126,42,23,.42), var(--asphalt-2) 62%);
  border-color:rgba(240,61,34,.42);
}
.plan-flag{
  position:absolute; top:0; right:clamp(20px,2.4vw,28px);
  transform:translateY(-50%);
  background:var(--ember); color:#fff;
  font-family:"IBM Plex Mono", monospace;
  font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:.4rem .8rem; border-radius:100px;
}

@media (max-width:900px){ .plan-grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }

/* =========================================================
   FAQ (superfície de concreto)
   ========================================================= */

.faq{
  padding:var(--sec-y) 0;
  background:var(--concrete);
  color:var(--ink);
}
.faq .eyebrow{ color:var(--clay); }
.faq .eyebrow::before{ background:var(--clay); }

.faq-grid{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(32px,5vw,72px);
  align-items:start;
}
.faq .sec-head{ margin-bottom:0; position:sticky; top:100px; }
.faq .btn-dark{ margin-top:1.6rem; }

.accordion{ border-top:1px solid var(--rule-light); }

.qa{ border-bottom:1px solid var(--rule-light); }
.qa summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.2rem;
  padding:1.25rem 0;
  cursor:pointer;
  list-style:none;
  font-family:"Archivo", sans-serif;
  font-variation-settings:"wdth" 105;
  font-size:1.02rem; font-weight:700; line-height:1.32;
  letter-spacing:-.012em;
  color:var(--ink);
  transition:color .2s var(--ease);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--ember); }
.qa summary::after{
  content:""; flex:none;
  width:13px; height:13px; margin-top:.32em;
  border-right:2px solid var(--clay); border-bottom:2px solid var(--clay);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .3s var(--ease);
}
.qa[open] summary::after{ transform:rotate(-135deg) translate(-3px,-3px); }
.qa[open] summary{ color:var(--ember); }

.qa-body{ padding:0 0 1.4rem; max-width:62ch; }
.qa-body p{ color:var(--ink-dim); font-size:.95rem; margin:0; }
.qa[open] .qa-body{ animation:fadeDown .35s var(--ease); }
@keyframes fadeDown{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

@media (max-width:880px){
  .faq-grid{ grid-template-columns:1fr; }
  .faq .sec-head{ position:static; }
}

/* =========================================================
   QUEM SOU
   ========================================================= */

.sobre{ padding:var(--sec-y) 0; }

.sobre-grid{
  display:grid; grid-template-columns:.72fr 1fr;
  gap:clamp(32px,5vw,72px); align-items:center;
}

.sobre-photo{ position:relative; }
.sobre-photo img{
  width:100%; max-width:380px;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:50%;
  filter:grayscale(.2) contrast(1.03);
}
.sobre-photo::before{
  content:""; position:absolute; inset:6% 12% 6% 4%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 55%, rgba(240,61,34,.42), transparent 68%);
  filter:blur(34px);
  z-index:-1;
}
.photo-tag{
  display:block; margin-top:1rem;
  max-width:380px; line-height:1.7;
  color:var(--bone-faint);
}

.sobre-copy h2{ margin-bottom:1.3rem; }
.sobre-copy p{ color:var(--bone-dim); max-width:56ch; }
.sobre-copy strong{ color:var(--bone); }

.linkedin{
  display:inline-flex; align-items:center; gap:.55rem;
  margin-top:1.4rem;
  font-weight:600; font-size:.95rem;
  color:var(--sand); text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease);
}
.linkedin svg{ width:18px; height:18px; fill:currentColor; }
.linkedin:hover{ border-bottom-color:var(--sand); }

@media (max-width:840px){
  .sobre-grid{ grid-template-columns:1fr; }
  .sobre-photo img{ max-width:240px; }
}

/* =========================================================
   CTA FINAL
   ========================================================= */

.cta-final{
  position:relative;
  padding:clamp(64px,9vw,110px) 0;
  text-align:center;
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(240,61,34,.26), transparent 62%),
    var(--asphalt-2);
  border-top:1px solid var(--rule-dark);
}
.cta-final h2{ margin-bottom:1rem; }
.cta-final p{ color:var(--bone-dim); max-width:52ch; margin-inline:auto; margin-bottom:2rem; }

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{
  background:var(--asphalt);
  border-top:1px solid var(--rule-dark);
  padding-top:clamp(48px,6vw,72px);
}
.footer-grid{
  display:grid; grid-template-columns:1.5fr .7fr .9fr;
  gap:clamp(28px,4vw,56px);
  padding-bottom:clamp(36px,5vw,56px);
}
.footer-brand img{ width:132px; margin-bottom:1.2rem; }
.footer-brand p{ color:var(--bone-faint); font-size:.92rem; max-width:38ch; }

.footer-nav, .footer-contact{ display:flex; flex-direction:column; gap:.6rem; }
.footer-nav .mono-label, .footer-contact .mono-label{ margin-bottom:.4rem; }
.footer-nav a, .footer-contact a{
  display:inline-flex; align-items:center; gap:.6rem;
  color:var(--bone-dim); text-decoration:none; font-size:.94rem;
  width:fit-content;
  transition:color .2s var(--ease);
}
.footer-nav a:hover, .footer-contact a:hover{ color:var(--ember); }
.footer-contact svg{ width:17px; height:17px; fill:currentColor; flex:none; opacity:.7; }

.footer-legal{
  border-top:1px solid var(--rule-dark);
  padding-top:22px; padding-bottom:26px;
}
.footer-legal p{ font-size:.76rem; color:var(--bone-faint); margin:0; }

@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-brand{ grid-column:1 / -1; } }

/* =========================================================
   WHATSAPP FLUTUANTE
   ========================================================= */

.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:90;
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--signal); color:#fff;
  border-radius:100px;
  padding:14px;
  text-decoration:none;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.85), 0 0 0 6px rgba(18,161,80,.14);
  transition:transform .3s var(--ease), background-color .25s var(--ease), padding .3s var(--ease);
}
.wa-float svg{ width:26px; height:26px; fill:currentColor; flex:none; }
.wa-float-label{
  max-width:0; overflow:hidden; white-space:nowrap;
  font-size:.9rem; font-weight:600;
  transition:max-width .35s var(--ease);
}
.wa-float:hover{ background:var(--signal-2); transform:translateY(-3px); padding-right:20px; }
.wa-float:hover .wa-float-label,
.wa-float:focus-visible .wa-float-label{ max-width:150px; }

@media (max-width:560px){ .wa-float{ right:14px; bottom:14px; padding:13px; } }

/* =========================================================
   REVELAÇÃO NO SCROLL
   ========================================================= */

.js .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease) var(--d,0s), transform .7s var(--ease) var(--d,0s);
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* Sem frames de animação disponíveis: mostra tudo, sem transição. */
.js.no-anim .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
.js.no-anim .art-creatives .frame{ animation:none; opacity:.8; }
.js.no-anim .art-dash polyline{ stroke-dashoffset:0; animation:none; }

@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .art-creatives .frame{ animation:none; opacity:.7; }
  .art-dash polyline{ stroke-dashoffset:0; animation:none; }
  .btn:hover, .plan:hover, .wa-float:hover{ transform:none; }
  .qa[open] .qa-body{ animation:none; }
}