/* ============================================================
   VEKTRA - PÁGINA INICIAL (index.html)
   Seções exclusivas da home, na ordem em que aparecem.
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-top:calc(var(--nav-h) + 36px); padding-bottom:56px; overflow:hidden }
.hero-grid{ display:grid;gap:44px;align-items:start;position:relative;z-index:1 }

.hero h1{
  margin:22px 0 0;
  font-size:clamp(34px,8.6vw,62px);font-weight:800;
  line-height:1.06;letter-spacing:-.038em;text-wrap:balance;
}
/* cada linha revela de baixo para cima; o padding evita corte da perna do "p" */
.hero h1 .line{ display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em }
.hero h1 .line > i{
  display:block;font-style:normal;
  transform:translateY(105%);
  animation:riseUp .95s var(--ease) forwards;
}
.hero h1 .line:nth-child(1) > i{ animation-delay:.08s }
.hero h1 .line:nth-child(2) > i{ animation-delay:.18s }
.hero h1 .line:nth-child(3) > i{ animation-delay:.28s }
@keyframes riseUp{ to{ transform:translateY(0) } }

.hero-sub{
  margin:24px 0 0;
  font-size:17px;font-weight:300;line-height:1.66;
  color:var(--text-2);max-width:50ch;
}
.hero-cta{ display:flex;flex-direction:column;gap:15px;margin-top:32px;align-items:flex-start }
.hero-note{ font-size:13.5px;color:var(--text-2);display:flex;align-items:center;gap:9px }

.hero-meta{
  margin-top:40px;padding-top:24px;border-top:1px solid var(--line-soft);
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.hero-meta div span{
  display:block;
  font-size:clamp(24px,6vw,32px);font-weight:700;line-height:1;letter-spacing:-.035em;
  color:var(--clay);
}
.hero-meta div small{
  display:block;margin-top:8px;
  font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-2);line-height:1.5;
}

/* ============================================================
   MOCKUP DE CONVERSA
   ============================================================ */
.phone-stage{ position:relative;justify-self:center;width:100%;max-width:396px }
.phone-stage::before{
  content:"";position:absolute;inset:-14% -18%;z-index:0;
  background:radial-gradient(58% 52% at 55% 32%,var(--glow),transparent 72%);
  filter:blur(4px);
}
.phone{
  position:relative;z-index:1;
  background:var(--card-sunken);
  border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);overflow:hidden;
  animation:floaty 7s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

.phone-top{
  display:flex;align-items:center;gap:12px;padding:13px 15px;
  background:var(--panel);border-bottom:1px solid var(--line-soft);
}
/* Era um "V" digitado sobre um quadrado laranja; agora é o símbolo
   oficial. Como o avatar fica sobre o painel, que troca de cor junto
   com o tema, cada tema usa a arte que contrasta. */
.avatar{
  width:38px;height:38px;border-radius:11px;flex:none;
  overflow:hidden;
}
.avatar .simbolo{ display:block;width:100%;height:100%;object-fit:contain }
[data-theme="dark"]  .simbolo-claro { display:none }
[data-theme="light"] .simbolo-escuro{ display:none }
.who{ flex:1;min-width:0 }
.who b{ display:block;font-size:13.5px;font-weight:600;letter-spacing:-.015em }
.who small{ display:block;font-size:11px;color:var(--text-2) }
.who small em{ font-style:normal;color:var(--clay);font-weight:500 }
.phone-icons{ display:flex;gap:14px;color:var(--text-2);opacity:.7 }

.chat{
  height:424px;overflow:hidden;padding:16px 14px 10px;
  display:flex;flex-direction:column;gap:9px;
  background:var(--card-sunken);
}
.msg{
  max-width:82%;padding:10px 13px;border-radius:13px;
  font-size:13.5px;line-height:1.5;position:relative;word-wrap:break-word;
  animation:msgIn .42s var(--ease) both;
}
@keyframes msgIn{
  from{ opacity:0;transform:translateY(12px) scale(.97) }
  to  { opacity:1;transform:none }
}
.msg time{ display:block;text-align:right;font-size:9.5px;margin-top:4px;letter-spacing:.03em }
.msg.out{ align-self:flex-end;background:var(--teal);color:var(--const-white);border-bottom-right-radius:4px }
.msg.out time{ color:rgba(255,255,255,.55) }
.msg.in { align-self:flex-start;background:var(--panel);color:var(--text);border-bottom-left-radius:4px }
.msg.in time{ color:var(--text-2) }
.msg.in b{ color:var(--clay);font-weight:600 }

.typing{
  align-self:flex-start;background:var(--panel);
  border-radius:13px;border-bottom-left-radius:4px;
  padding:14px;display:flex;gap:4px;
  animation:msgIn .3s var(--ease) both;
}
.typing i{
  width:6px;height:6px;border-radius:50%;background:var(--text-2);display:block;
  animation:blip 1.25s infinite;
}
.typing i:nth-child(2){ animation-delay:.18s }
.typing i:nth-child(3){ animation-delay:.36s }
@keyframes blip{
  0%,60%,100%{ opacity:.3;transform:translateY(0) }
  30%{ opacity:1;transform:translateY(-4px) }
}

.phone-bar{
  display:flex;align-items:center;gap:10px;padding:11px 12px;
  background:var(--panel);border-top:1px solid var(--line-soft);
}
.fake-input{
  flex:1;background:var(--card-sunken);
  border:1px solid var(--line-soft);border-radius:20px;
  padding:9px 15px;font-size:12.5px;color:var(--text-2);
}
.send-btn{
  width:34px;height:34px;border-radius:50%;flex:none;
  background:var(--clay);color:var(--const-ink);
  display:grid;place-content:center;
}
.phone-tag{
  position:absolute;z-index:2;right:-6px;top:-15px;
  background:var(--clay);color:var(--const-ink);
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 12px;border-radius:6px;transform:rotate(2deg);
  box-shadow:0 12px 30px -14px rgba(193,102,57,.9);
}

/* ============================================================
   TICKER
   ============================================================ */
.marquee{
  background:var(--clay);color:var(--const-ink);
  overflow:hidden;padding:14px 0;position:relative;z-index:2;
}
.marquee-track{ display:flex;width:max-content;animation:slide 36s linear infinite }
.marquee:hover .marquee-track{ animation-play-state:paused }
@keyframes slide{
  from{ transform:translate3d(0,0,0) }
  to  { transform:translate3d(-50%,0,0) }   /* -50% porque a lista é duplicada */
}
.marquee-track span{
  padding:0 24px;display:inline-flex;align-items:center;gap:24px;white-space:nowrap;
  font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.marquee-track span::after{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--const-ink);opacity:.55;
}

/* ============================================================
   PROVA SOCIAL
   ============================================================ */
.proof{ padding:54px 0 58px }
.proof-head{
  margin:0 0 30px;text-align:center;
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-2);
}
/* Esteira de clientes: marcas fictícias em texto, sem ícone.
   A lista aparece duas vezes no HTML porque a animação corre até
   -50%, fechando o ciclo sem emenda visível. */
.esteira{
  position:relative;margin-top:26px;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.esteira-trilho{
  display:flex;align-items:center;width:max-content;
  animation:esteiraCorre 44s linear infinite;
}
.esteira:hover .esteira-trilho{ animation-play-state:paused }
@keyframes esteiraCorre{
  from{ transform:translateX(0) }
  to  { transform:translateX(-50%) }
}
.marca{
  display:flex;align-items:baseline;gap:10px;
  padding:0 26px;white-space:nowrap;
  color:var(--text-2);opacity:.72;
  transition:opacity .3s var(--ease), color .3s var(--ease);
}
.esteira-trilho:hover .marca{ opacity:.38 }
.esteira-trilho .marca:hover{ opacity:1;color:var(--text) }
.marca b{ font-size:26px;font-weight:800;letter-spacing:-.035em;line-height:1 }
.marca small{
  font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
}
.marca::after{
  content:"";width:5px;height:5px;border-radius:50%;align-self:center;
  background:var(--clay);opacity:.5;margin-left:26px;
}
.proof-stat{
  margin-top:46px;padding:32px 24px;
  border:1px solid var(--line-soft);border-radius:14px;
  background:var(--card);box-shadow:var(--card-shadow);
  text-align:center;position:relative;overflow:hidden;
}
.proof-stat::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--clay) }
.proof-stat .big{
  font-size:clamp(34px,9vw,62px);font-weight:800;line-height:1.05;letter-spacing:-.04em;
  color:var(--clay);
}
.proof-stat p{
  margin:12px 0 0;
  font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-2);
}

/* ============================================================
   PROBLEMA
   ============================================================ */
.pains{ display:grid;gap:16px }
.pain{
  background:var(--card-sunken);
  border:1px solid var(--line-soft);border-radius:14px;box-shadow:var(--card-shadow);
  padding:28px 24px;display:grid;gap:14px;align-content:start;
  transition:transform .45s var(--ease), border-color .4s ease;
}
.pain:hover{ transform:translateY(-4px); border-color:var(--line) }
.pain-mark{ width:34px;height:4px;border-radius:4px;background:var(--clay) }
.pain h3{
  font-size:clamp(20px,4.6vw,26px);font-weight:700;
  line-height:1.2;letter-spacing:-.03em;text-wrap:balance;
}
.pain p{ margin:0;color:var(--text-2);font-size:15px;font-weight:300;line-height:1.68 }
.pain-cost{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--clay);
}
.pain-cost::before{ content:"";width:14px;height:1px;background:var(--clay) }

/* ============================================================
   DIFERENCIAIS
   ============================================================ */
.diffs{ display:grid;gap:16px }
.diff{
  background:var(--card);
  border:1px solid var(--line-soft);border-radius:16px;box-shadow:var(--card-shadow);
  padding:28px 24px 30px;position:relative;overflow:hidden;
  transition:transform .45s var(--ease), border-color .4s ease, box-shadow .45s ease;
}
.diff::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--clay);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}
.diff:hover{
  transform:translateY(-5px);
  border-color:var(--line);
  box-shadow:0 28px 64px -34px var(--glow-clay), var(--card-shadow);
}
.diff:hover::before{ transform:scaleX(1) }

.diff-ic{
  width:46px;height:46px;border-radius:13px;margin-bottom:20px;
  display:grid;place-content:center;
  background:var(--recess);border:1px solid var(--line-teal);color:var(--clay);
  transition:background .4s ease, color .4s ease, transform .45s var(--ease);
}
.diff:hover .diff-ic{ background:var(--clay);color:var(--const-ink);transform:rotate(-6deg) }
.diff h3{
  margin-bottom:12px;
  font-size:19px;font-weight:700;line-height:1.28;letter-spacing:-.028em;text-wrap:balance;
}
.diff p{ margin:0;font-size:14.5px;font-weight:300;line-height:1.68;color:var(--text-2) }

.diff-note{
  margin-top:34px;padding:22px 24px;
  border:1px dashed var(--line);border-radius:14px;
  display:flex;gap:14px;align-items:flex-start;
  font-size:14.5px;font-weight:300;line-height:1.65;color:var(--text-2);
}
.diff-note svg{ flex:none;color:var(--clay);margin-top:2px }
.diff-note b{ color:var(--text);font-weight:600 }


/* ============================================================
   FEATURES
   ============================================================ */
.feat{
  display:grid;gap:32px;align-items:center;
  padding:52px 0;border-bottom:1px solid var(--line-soft);
}
.feat:last-child{ border-bottom:0 }
.feat-tag{
  display:inline-block;margin-bottom:18px;padding:6px 13px;
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--clay);border:1px solid rgba(193,102,57,.4);border-radius:99px;
}
.feat h3{
  font-size:clamp(24px,5.8vw,40px);font-weight:800;
  line-height:1.1;letter-spacing:-.038em;text-wrap:balance;
}
.feat p:not(.mock-label){ margin:18px 0 0;color:var(--text-2);font-size:16px;font-weight:300;line-height:1.68;max-width:52ch }
.feat-list{ margin:24px 0 0;padding:0;list-style:none;display:grid;gap:12px }
.feat-list li{ display:flex;gap:12px;align-items:flex-start;font-size:14.5px }
.feat-list li svg{ flex:none;margin-top:4px;color:var(--clay) }

/* --- Mockups 1 e 2: seletor de abas --- */
.m1-tabs,
.m2-toggle{
  display:flex;margin-bottom:20px;
  border:1px solid var(--line-soft);border-radius:8px;overflow:hidden;
}
.m1-tabs button,
.m2-toggle button{
  flex:1;padding:9px 4px;background:transparent;border:0;cursor:pointer;
  font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-2);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.m1-tabs button + button,
.m2-toggle button + button{ border-left:1px solid var(--line-soft) }
.m1-tabs button:hover,
.m2-toggle button:hover{ color:var(--text) }
.m1-tabs button.on,
.m2-toggle button.on{ background:var(--teal-fill);color:var(--const-white) }
.m1-tabs button:focus-visible,
.m2-toggle button:focus-visible{ outline:2px solid var(--clay);outline-offset:-3px }

/* --- Mockup 1: margem por obra e retorno --- */
.m1-head{ display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px;gap:12px }
.m1-head b{
  display:block;margin-top:7px;
  font-size:32px;font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--clay);
  font-variant-numeric:tabular-nums;
  transition:opacity .17s ease,transform .17s ease;
}
.m1-pill{
  font-size:10px;font-weight:600;padding:6px 10px;white-space:nowrap;
  border:1px solid rgba(193,102,57,.45);border-radius:99px;color:var(--clay);
}
.bars{
  display:flex;align-items:flex-end;gap:9px;height:104px;
  padding-bottom:10px;border-bottom:1px solid var(--line-soft);
}
.bar{ flex:1;position:relative;height:100%;display:flex;align-items:flex-end }
.bar i{
  display:block;width:100%;background:var(--teal);border-radius:3px;
  transition:height .6s var(--ease), opacity .3s ease, filter .3s ease;
}
.bar:nth-child(1) i{ transition-delay:0s }
.bar:nth-child(2) i{ transition-delay:.04s }
.bar:nth-child(3) i{ transition-delay:.08s;background:rgba(140,151,154,.4) }
.bar:nth-child(4) i{ transition-delay:.12s;background:var(--clay) }
.bar:nth-child(5) i{ transition-delay:.16s }
.bar:nth-child(6) i{ transition-delay:.2s }
.bars:hover .bar i{ opacity:.42 }
.bars .bar:hover i{ opacity:1;filter:brightness(1.22) }
.bar-labels{ display:flex;gap:9px;margin-top:10px }
.bar-labels span{
  flex:1;text-align:center;font-size:8.5px;font-weight:500;letter-spacing:.05em;color:var(--text-2);
}

/* Bloco de retorno: o que entra e o que volta */
.roi{
  margin-top:18px;padding:16px 15px 14px;
  background:var(--recess);border:1px solid var(--line-soft);border-radius:11px;
}
.roi-cols{ display:flex;align-items:flex-end;gap:12px }
.roi-cols > div{ flex:1;min-width:0 }
.roi-cols b{
  transition:opacity .17s ease,transform .17s ease;
  display:block;margin-top:6px;
  font-size:19px;font-weight:800;line-height:1;letter-spacing:-.035em;color:var(--text-2);
}
.roi-cols b.ganho{ color:var(--clay) }
.roi-dir{ text-align:right }
.roi-arw{ flex:none;margin-bottom:6px;color:var(--text-2);opacity:.7 }

.roi-bar{ display:flex;gap:3px;height:8px;margin:14px 0 12px }
.roi-bar i{ display:block;height:100%;border-radius:99px;transition:width .6s var(--ease) }
.roi-bar i.inv{ background:rgba(140,151,154,.45) }
.roi-bar i.gan{ background:var(--clay) }

.roi-foot{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:11.5px;color:var(--text-2);
}
.roi-foot b{ font-weight:700;color:var(--text);transition:opacity .17s ease,transform .17s ease }
.roi-foot em{
  transition:opacity .17s ease,transform .17s ease;
  font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:99px;
  background:rgba(193,102,57,.16);color:var(--clay);white-space:nowrap;
}

/* --- Mockup 2: comparativo tributário --- */
.m2-head{ display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:18px }
.m2-head b{
  display:block;margin-top:7px;
  font-size:30px;font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--clay);
  font-variant-numeric:tabular-nums;
  transition:opacity .17s ease,transform .17s ease;
}

/* Valor saindo de cena na troca de aba. Fica junto com os números
   porque o JS liga e desliga esta classe (ver trocarNum em home.js). */
.m1-head b.num-troca,
.m2-head b.num-troca,
.m2-out b.num-troca,
.roi-cols b.num-troca,
.roi-foot b.num-troca,
.roi-foot em.num-troca{ opacity:0;transform:translateY(5px) }
.m2-head b small{ font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--text-2) }
.m2-badge{
  font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  padding:5px 10px;border-radius:99px;
  background:rgba(193,102,57,.16);color:var(--clay);
}
.m2-badge.neutro{ background:var(--line-soft);color:var(--text-2) }

.m2-line{
  margin-bottom:6px;padding:8px 10px;border-radius:9px;cursor:pointer;
  border:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.m2-line:hover{ background:var(--recess) }
.m2-line:focus-visible{ outline:2px solid var(--clay);outline-offset:2px }
.m2-line.on{ background:var(--recess);border-color:var(--line-soft) }
.m2-line .top{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:7px;
  font-size:12px;color:var(--text-2);
}
.m2-line .top b{ font-size:12px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;transition:color .3s ease }
.m2-line.on .top b{ color:var(--clay) }
.m2-best{
  font-style:normal;margin-left:6px;padding:2px 6px;border-radius:99px;
  font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(193,102,57,.16);color:var(--clay);white-space:nowrap;
}
.track{ height:8px;background:var(--line-soft);border-radius:99px;overflow:hidden }
.track i{ display:block;height:100%;border-radius:99px;transition:width .5s var(--ease) }
.track i.a{ background:rgba(140,151,154,.55) }
.track i.b{ background:var(--teal) }
.track i.c{ background:var(--clay) }
.m2-out{
  margin-top:16px;padding:15px 16px;
  border:1px dashed var(--line);border-radius:10px;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;
}
/* Os dois rótulos ("Custo em 12 meses" e "Diferença em 12 meses") têm
   que caber em uma linha em qualquer largura: se um quebrasse em duas, o
   bloco crescia e empurrava a página na troca de aba. */
.m2-out .mock-label{ align-self:center }
.m2-out b{
  justify-self:end;text-align:right;min-width:8.6ch;
  font-size:24px;font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--clay);
  font-variant-numeric:tabular-nums;
  transition:color .3s ease,opacity .17s ease,transform .17s ease;
}
.m2-out b.flat{ color:var(--text-2) }

/* Em tela estreita as abas e os cabeçalhos ficam apertados */
@media (max-width:560px){
  .m1-tabs button,
  .m2-toggle button{ font-size:8.5px;letter-spacing:.04em;padding:9px 2px }
  .m1-head,
  .m2-head{ flex-direction:column;align-items:flex-start;gap:12px }
  .m1-head .mock-label{ font-size:9px;letter-spacing:.09em }
  .roi-cols b{ font-size:17px }
  .roi-cols .mock-label{ font-size:8.5px;letter-spacing:.05em }
}

/* --- Mockup 3: obrigações --- */
.m3-list{ border:1px solid var(--line-soft);border-radius:10px;overflow:hidden }
.m3-item{ display:flex;align-items:center;gap:12px;padding:13px;font-size:13px }
.m3-item + .m3-item{ border-top:1px solid var(--line-soft) }
.chk{
  width:19px;height:19px;flex:none;
  border:1.5px solid var(--line);border-radius:5px;
  display:grid;place-content:center;color:var(--const-ink);
  animation:chkOn 5.4s var(--ease) infinite;
}
.chk svg{ opacity:0;animation:chkTick 5.4s var(--ease) infinite }
.m3-item:nth-child(1) .chk,.m3-item:nth-child(1) .chk svg{ animation-delay:.2s }
.m3-item:nth-child(2) .chk,.m3-item:nth-child(2) .chk svg{ animation-delay:.7s }
.m3-item:nth-child(3) .chk,.m3-item:nth-child(3) .chk svg{ animation-delay:1.2s }
.m3-item:nth-child(4) .chk,.m3-item:nth-child(4) .chk svg{ animation-delay:1.7s }
.m3-item:nth-child(5) .chk,.m3-item:nth-child(5) .chk svg{ animation-delay:2.2s }
@keyframes chkOn{
  0%,4%{ background:transparent;border-color:var(--line) }
  9%,86%{ background:var(--clay);border-color:var(--clay) }
  92%,100%{ background:transparent;border-color:var(--line) }
}
@keyframes chkTick{
  0%,5%{ opacity:0 }
  10%,86%{ opacity:1 }
  92%,100%{ opacity:0 }
}
.m3-item em{ font-style:normal;flex:1;color:var(--text) }
.m3-item small{ font-size:9.5px;font-weight:600;letter-spacing:.09em;color:var(--text-2) }
.m3-foot{
  margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--text-2);
}
.scan{
  height:2px;transform-origin:left;
  background:linear-gradient(90deg,transparent,var(--clay),transparent);
  animation:scanMove 3.4s linear infinite;
}
@keyframes scanMove{
  0%{ transform:translateX(-100%) }
  100%{ transform:translateX(100%) }
}

/* ============================================================
   DEPOIMENTOS
   ============================================================ */
.tcards{ display:grid;gap:18px }
.tcard{
  background:var(--card);
  border:1px solid var(--line-soft);border-radius:16px;box-shadow:var(--card-shadow);
  padding:28px 24px;
  display:flex;flex-direction:column;gap:20px;
  position:relative;overflow:hidden;
  transition:transform .45s var(--ease), border-color .45s ease;
}
.tcard::after{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--clay);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}
.tcard:hover{ transform:translateY(-6px); border-color:var(--line) }
.tcard:hover::after{ transform:scaleX(1) }

.tquote{ margin:0;flex:1;font-size:15px;font-weight:300;line-height:1.7;color:var(--text) }
.tquote b{ color:var(--clay);font-weight:600 }
.tresult{
  margin:0;padding-bottom:18px;border-bottom:1px solid var(--line-soft);
  font-size:27px;font-weight:800;line-height:1.05;letter-spacing:-.04em;color:var(--clay);
}
.tresult small{
  display:block;margin-top:9px;
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);
}
.tperson{ display:flex;align-items:center;gap:13px }
.tface{
  width:42px;height:42px;border-radius:12px;flex:none;
  display:grid;place-content:center;
  background:var(--teal);color:var(--const-white);font-weight:600;font-size:14px;
}
.tperson b{ display:block;font-size:14px;font-weight:600 }
.tperson small{ display:block;font-size:11.5px;color:var(--text-2) }

/* ============================================================
   ORÇAMENTO
   ============================================================ */
.price-grid{ display:grid;gap:22px;align-items:start }

.offer{
  background:var(--card-sunken);
  border:1px solid var(--line-soft);border-radius:16px;box-shadow:var(--card-shadow);
  padding:30px 24px;position:relative;overflow:hidden;
}
.offer-flag{
  position:absolute;top:0;right:0;padding:8px 14px;
  background:var(--clay);color:var(--const-ink);
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  border-bottom-left-radius:10px;
}
.seg{
  display:flex;position:relative;margin:22px 0 26px;padding:4px;
  border:1px solid var(--line-soft);border-radius:10px;background:var(--panel);
}
.seg-pill{
  position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);
  background:var(--clay);border-radius:7px;
  transition:transform .45s var(--ease);
}
.seg button{
  flex:1;position:relative;z-index:1;padding:10px 6px;
  background:none;border:0;cursor:pointer;
  font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--text-2);
  transition:color .3s ease;
}
.seg button[aria-selected="true"]{ color:var(--const-ink);font-weight:700 }

.offer .price-big{
  margin:0;
  font-size:clamp(34px,8vw,48px);font-weight:800;line-height:1.05;letter-spacing:-.045em;
}
.offer .price-big em{
  font-style:normal;font-size:.36em;font-weight:500;letter-spacing:-.01em;color:var(--text-2);
}
.offer .price-sub{ margin:14px 0 0;color:var(--text-2);font-size:14.5px;font-weight:300;line-height:1.65 }
.offer-list{ margin:26px 0 0;padding:0;list-style:none;display:grid;gap:13px }
.offer-list li{ display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.5 }
.offer-list li svg{ flex:none;margin-top:4px;color:var(--clay) }
.offer-foot{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line-soft);
  font-size:12.5px;font-weight:300;line-height:1.65;color:var(--text-2);
}
.offer-foot strong{ color:var(--text);font-weight:600 }


/* ============================================================
   MÉTODO (resumo)
   A explicação completa fica em metodo.html; aqui só os prazos
   e o convite para a página.
   ============================================================ */
.prazos{
  margin:0;padding:0;list-style:none;
  display:grid;gap:2px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:18px;overflow:hidden;
}
.prazo{ background:var(--card);padding:24px 22px 26px;display:grid;gap:10px;align-content:start }
.prazo b{
  display:flex;align-items:baseline;gap:8px;
  font-size:clamp(38px,9vw,54px);font-weight:800;line-height:1;letter-spacing:-.05em;
  color:var(--clay);
}
.prazo b small{
  font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-2);
}
.prazo span{ font-size:15px;font-weight:300;line-height:1.6;color:var(--text) }

.metodo-link{
  margin-top:26px;padding:24px 22px;
  border:1px dashed var(--line);border-radius:16px;
  display:grid;gap:18px;align-items:center;
}
.metodo-link p{ margin:0;font-size:16px;font-weight:300;line-height:1.65;color:var(--text-2);max-width:60ch }
.metodo-link b{ color:var(--text);font-weight:600 }

/* ============================================================
   FAQ: convite para a página de dúvidas
   ============================================================ */
.faq-mais{
  margin-top:34px;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;
}
.faq-mais-wa{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:14.5px;font-weight:500;color:var(--clay);
  border-bottom:1px solid transparent;transition:border-color .25s ease;
}
.faq-mais-wa:hover{ border-bottom-color:var(--clay) }

/* ============================================================
   CTA FINAL
   ============================================================ */
.final{
  background:var(--teal);color:var(--const-white);
  position:relative;overflow:hidden;padding:76px 0 74px;
}
.final::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 18px);
}
.final .wrap{ position:relative;z-index:1 }
.final .eyebrow{ color:rgba(255,255,255,.7) }
.final h2{
  margin:20px 0 0;max-width:17ch;
  font-size:clamp(30px,7.6vw,58px);font-weight:800;line-height:1.1;letter-spacing:-.04em;
  text-wrap:balance;
}
.final > .wrap p{
  margin:22px 0 0;max-width:50ch;
  font-size:16.5px;font-weight:300;line-height:1.68;color:rgba(255,255,255,.8);
}
/* sobre o petróleo o preenchimento do hover vira branco */
.final .btn{ margin-top:30px; --btn-fill:#FFFFFF; --btn-fill-tx:#0B0E10 }

.guarantee{
  margin-top:38px;padding:24px;
  border:1px solid rgba(255,255,255,.18);border-radius:14px;
  background:rgba(255,255,255,.07);
  display:flex;gap:16px;align-items:flex-start;
}
.guarantee svg{ flex:none;margin-top:2px;color:var(--clay) }
.guarantee b{ display:block;font-size:15px;font-weight:600;margin-bottom:8px }
.guarantee span{ font-size:14px;font-weight:300;line-height:1.65;color:rgba(255,255,255,.78) }

/* Vagas do mês: o número solto não pesava, virou barra + selo pulsando */
.vagas{
  margin-top:28px;max-width:400px;padding:18px 20px 16px;
  background:var(--const-ink);border:1px solid var(--line);border-radius:14px;
}
.vagas-topo{ display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap }
.vagas-selo{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--clay);
}
.vagas-conta{ font-size:11.5px;font-weight:500;color:var(--text-2) }
.vagas-conta b{ color:var(--const-white);font-weight:700 }
.vagas-barra{
  height:7px;margin:13px 0 11px;border-radius:99px;overflow:hidden;
  background:rgba(140,151,154,.22);
}
.vagas-barra i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--teal),var(--clay));
  width:0;transition:width 1.1s var(--ease);
}
.vagas.in .vagas-barra i{ width:var(--preenchido,62%) }
.vagas-nota{ margin:0;font-size:11.5px;font-weight:300;line-height:1.5;color:var(--text-2) }

.pulso{
  width:9px;height:9px;border-radius:50%;flex:none;position:relative;
  background:var(--clay);
}
.pulso::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:var(--clay);
  animation:pulsoOnda 1.9s var(--ease) infinite;
}
@keyframes pulsoOnda{
  0%{ transform:scale(1);opacity:.7 }
  75%,100%{ transform:scale(2.9);opacity:0 }
}

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (min-width:600px){
  .marca{ padding:0 34px }
  .marca b{ font-size:32px }
  .marca::after{ margin-left:34px }
  .pains,.diffs{ grid-template-columns:repeat(2,1fr) }
}
@media (min-width:900px){
  .prazos{ grid-template-columns:repeat(4,1fr) }
  .metodo-link{ grid-template-columns:1fr auto;gap:32px;padding:28px 30px }
  .hero{ padding-top:calc(var(--nav-h) + 52px); padding-bottom:80px }
  .hero-grid{ grid-template-columns:1.05fr .95fr;gap:56px;align-items:center }
  .hero-cta{ flex-direction:row;align-items:center;gap:22px }

  .pains{ grid-template-columns:repeat(3,1fr);gap:20px }
  .pain{ padding:32px 28px 34px }
  .diffs{ grid-template-columns:repeat(3,1fr);gap:20px }
  .diff{ padding:32px 28px 34px }

  .feat{ grid-template-columns:1fr 1fr;gap:60px;padding:70px 0 }
  .feat.rev .feat-copy{ order:2 }
  .feat.rev .mock{ order:1 }

  .tcards{ grid-template-columns:repeat(3,1fr);gap:22px }
  .price-grid{ grid-template-columns:.86fr 1.14fr;gap:26px }
  .offer{ padding:40px 34px }

  .final{ padding:110px 0 104px }
  .final-grid{ display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center }
}


/* ============================================================
   FAIXA DE CHAMADA (entre recursos e clientes)
   Preenche o respiro entre as duas seções com uma chamada útil.
   ============================================================ */
.ponte{
  position:relative;overflow:hidden;
  margin-top:8px;padding:30px 26px;
  border:1px solid var(--line-soft);border-radius:18px;
  background:var(--card);box-shadow:var(--card-shadow);
  display:grid;gap:24px;align-items:center;
}
/* traço laranja no topo, igual ao dos cards de oferta */
.ponte::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--clay),transparent 70%);
}
.ponte .eyebrow{ margin:0 0 10px }
.ponte h3{ margin:0;font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.25 }
.ponte-texto p:not(.eyebrow){ margin:10px 0 0;font-size:14.5px;font-weight:300;line-height:1.65;color:var(--text-2);max-width:46ch }
.ponte-numeros{ display:grid;grid-template-columns:repeat(3,1fr);gap:14px }
.ponte-numeros div{ display:flex;flex-direction:column;gap:4px }
.ponte-numeros .count{ white-space:nowrap;font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--clay) }
.ponte-numeros small{ font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);line-height:1.4 }
.ponte-btn{ justify-self:start }

/* a seção de clientes começa mais perto da faixa */
.sec.sec-colada{ padding-top:36px }

@media (min-width:900px){
  .ponte{ grid-template-columns:1.3fr 1fr auto;gap:36px;padding:34px 36px }
  .ponte-btn{ justify-self:end }
  .sec.sec-colada{ padding-top:56px }
}


/* ============================================================
   LOGOS DOS CLIENTES
   Na esteira: cinza, ganha cor ao passar o mouse.
   No cartão de clientes: colorida.
   ============================================================ */
.marca-logo img{
  height:62px;width:auto;
  filter:grayscale(1);opacity:.8;
  transition:filter .3s var(--ease), opacity .3s var(--ease);
}
.esteira-trilho .marca-logo:hover img{ filter:none;opacity:1 }
.tresult-logo img{ height:72px;width:auto;margin-bottom:4px }
/* logo dourada some no fundo branco quando fica cinza: no tema claro, escurece */
[data-theme="light"] .marca-logo img.logo-dourada{ filter:grayscale(1) brightness(.5) contrast(1.4) }
[data-theme="light"] .esteira-trilho .marca-logo:hover img.logo-dourada{ filter:none }

/* Cartão de cliente: logo e pessoa lado a lado no topo, depoimento embaixo */
.tcab{
  display:flex;align-items:center;gap:16px;
  padding-bottom:18px;border-bottom:1px solid var(--line-soft);
}
.tcab-logo{ flex:none;display:flex;align-items:center }
.tcab-logo img{ height:64px;width:auto }
.tcab-texto{ font-size:30px;font-weight:800;letter-spacing:-.04em;color:var(--clay);line-height:1 }
.tcab-pessoa{ display:flex;flex-direction:column;gap:3px;min-width:0;padding-left:16px;border-left:2px solid var(--clay) }
.tcab-pessoa b{ font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--text);line-height:1.2 }
.tcab-pessoa small{ font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--clay) }