/* ==========================================================================
   Copiloto Consultoria de TI — folha de estilo compartilhada
   Usada pela landing principal e pelas paginas de servico.
   ========================================================================== */

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  /* Base neutra quente — evita o cinza-azulado de template */
  --paper:      #F4F3EF;
  --paper-2:    #EBEAE4;
  --ink:        #0D0F0F;
  --ink-2:      #161918;
  --text:       #1A1D1C;
  --muted:      #5F6664;
  --muted-2:    #8A918E;
  --line:       #D9D7D0;
  --line-dark:  #262A29;

  /* Acento da marca, usado com parcimônia */
  --acc:        #81D8D0;
  --acc-deep:   #17544E;
  --acc-ink:    #0B2F2C;

  --r:   4px;
  --r-lg: 8px;

  --f-disp: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --f-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  --pad: clamp(20px, 5vw, 72px);
  --maxw: 1240px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--f-disp);
  font-weight:500;
  letter-spacing:-0.022em;
  line-height:1.06;
  margin:0;
  text-wrap:balance;
}
p{ margin:0; text-wrap:pretty; }

::selection{ background:var(--acc); color:var(--acc-ink); }

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

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

/* Rótulo de seção monoespaçado — âncora editorial, não decorativa */
.eyebrow{
  font-family:var(--f-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted-2);
  display:flex;
  align-items:center;
  gap:12px;
}
.eyebrow::after{
  content:"";
  height:1px;
  flex:1;
  background:var(--line);
  max-width:80px;
}
.on-dark .eyebrow{ color:#6E7876; }
.on-dark .eyebrow::after{ background:var(--line-dark); }

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:#fff; padding:12px 20px; z-index:200;
}
.skip:focus{ left:12px; top:12px; }

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding-block:18px;
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.stuck{
  background:rgba(13,15,15,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  padding-block:12px;
  border-bottom-color:var(--line-dark);
}
.hdr__in{ display:flex; align-items:center; justify-content:space-between; gap:24px; }

/* Marca tipográfica — SVG embutido, texto já em curvas, cor pelo CSS */
.brand{ display:block; line-height:0; }
/* A cor passa por herança (color) e por variável, que atravessam o <use>. */
.brand__svg{
  display:block; width:158px; height:auto;
  color:#FFFFFF;              /* palavra "Copiloto" */
  --marca-desc:#8A918E;       /* linha "CONSULTORIA DE TI" */
}
.foot .brand__svg{ width:180px; }
.brand__svg--acento{ --marca-desc:var(--acc); }
@media (max-width:640px){ .brand__svg{ width:130px; } }
@media (max-width:400px){ .brand__svg{ width:114px; } }

.nav{ display:flex; align-items:center; gap:30px; }
.nav a{
  font-size:14.5px; color:#A9B2B0; position:relative; padding-block:4px;
  transition:color .25s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--acc); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav a:hover{ color:#fff; }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
@media (max-width:900px){ .nav{ display:none; } }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-disp); font-size:15px; font-weight:500;
  padding:13px 22px; border-radius:var(--r-lg);
  border:1px solid transparent; cursor:pointer;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn svg{ flex:none; transition:transform .4s var(--ease); }
.btn:active{ transform:translateY(1px); }

/* preenchimento que sobe no hover — sem sombra, sem escala */
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  transform:translateY(101%);
  transition:transform .45s var(--ease);
}

.btn--acc{ background:var(--acc); color:var(--acc-ink); }
.btn--acc::before{ background:var(--ink); }
.btn--acc:hover{ color:#fff; }
.btn--acc:hover::before{ transform:translateY(0); }
.btn--acc:hover svg{ transform:translateX(4px); }

.btn--ghost{ border-color:#39403E; color:#E8ECEB; background:transparent; }
.btn--ghost::before{ background:#E8ECEB; }
.btn--ghost:hover{ color:var(--ink); border-color:#E8ECEB; }
.btn--ghost:hover::before{ transform:translateY(0); }

.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark::before{ background:var(--acc); }
.btn--dark:hover{ color:var(--acc-ink); }
.btn--dark:hover::before{ transform:translateY(0); }
.btn--dark:hover svg{ transform:translateX(4px); }

.btn--line{ border-color:var(--line); color:var(--text); }
.btn--line::before{ background:var(--ink); }
.btn--line:hover{ color:#fff; border-color:var(--ink); }
.btn--line:hover::before{ transform:translateY(0); }

.btn--sm{ padding:10px 17px; font-size:14px; white-space:nowrap; }

/* rótulo curto do CTA do topo em telas estreitas */
.hdr .btn .lbl-xs{ display:none; }
@media (max-width:640px){
  .hdr .btn .lbl-lg{ display:none; }
  .hdr .btn .lbl-xs{ display:inline; }
  .hdr .btn{ padding:10px 15px; font-size:13.5px; }
  .hdr__in{ gap:12px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  background:var(--ink);
  color:#fff;
  padding-top:clamp(118px, 15vh, 158px);
  padding-bottom:clamp(56px, 8vh, 92px);
  overflow:hidden;
}
/* malha fina de linhas: textura de papel milimetrado, não "glow" */
.hero__grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.038) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.038) 1px, transparent 1px);
  background-size:clamp(56px,7vw,96px) clamp(56px,7vw,96px);
  mask-image:linear-gradient(to bottom, #000 0%, #000 52%, transparent 92%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 52%, transparent 92%);
}
/* halo único, muito baixo contraste, deslocado para a direita */
.hero__halo{
  position:absolute; top:-28%; right:-18%; width:min(760px,82vw); aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%, rgba(129,216,208,.14), transparent 62%);
  pointer-events:none;
}
.hero__in{ position:relative; }

.hero__lay{
  display:grid; grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);
  gap:clamp(40px,6vw,90px); align-items:end;
}
@media (max-width:980px){ .hero__lay{ grid-template-columns:1fr; align-items:start; } }

.hero h1{
  font-size:clamp(2.32rem, 4.55vw, 4.05rem);
  letter-spacing:-.033em;
  line-height:1.03;
  margin:24px 0 0;
  color:#fff;
}
.hero h1 em{
  font-style:normal;
  color:var(--acc);
}
/* traço fino sob a palavra-chave — desenhado, não sublinhado */
.hero h1 em::after{
  content:""; display:block; height:2px; width:100%;
  background:linear-gradient(90deg, var(--acc), transparent);
  margin-top:.12em; opacity:.5;
}

.hero__sub{
  margin-top:26px;
  font-size:clamp(1.02rem,1.35vw,1.19rem);
  line-height:1.62;
  color:#AEB6B4;
  max-width:53ch;
}
.hero__sub b{ color:#fff; font-weight:500; }

.hero__cta{ display:flex; flex-wrap:wrap; gap:13px; margin-top:32px; }
@media (max-width:560px){
  .hero__cta{ gap:10px; }
  .hero__cta .btn{ width:100%; justify-content:center; padding-block:15px; }
}

.hero__note{
  margin-top:22px; display:flex; align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.05em; color:#767E7C;
}
.dot{
  width:6px; height:6px; border-radius:50%; background:var(--acc); flex:none;
  box-shadow:0 0 0 0 rgba(129,216,208,.55);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(129,216,208,0); } 100%{ box-shadow:0 0 0 0 rgba(129,216,208,0); } }
@media (prefers-reduced-motion:reduce){ .dot{ animation:none; } }

/* Cartão lateral: agenda de atendimento, não "stats" inventadas */
.card-live{
  border:1px solid var(--line-dark);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  padding:26px;
}
.card-live__hd{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:16px; border-bottom:1px solid var(--line-dark);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:#6E7876;
}
.card-live ul{ list-style:none; margin:0; padding:18px 0 0; }
.card-live li{
  display:flex; align-items:baseline; gap:14px;
  padding:11px 0; border-bottom:1px solid rgba(38,42,41,.6);
  font-size:14.5px; color:#C3CAC8;
}
.card-live li:last-child{ border-bottom:0; padding-bottom:0; }
.card-live li span{
  font-family:var(--f-mono); font-size:11.5px; color:var(--acc);
  flex:none; width:26px;
}

/* ============================================================
   TICKER — sem logotipos falsos, só o que fazemos
   ============================================================ */
.ticker{
  background:var(--ink-2); border-block:1px solid var(--line-dark);
  overflow:hidden; padding-block:15px;
}
.ticker__track{
  display:flex; gap:52px; width:max-content;
  animation:slide 46s linear infinite;
}
.ticker:hover .ticker__track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .ticker__track{ animation:none; } }
.ticker span{
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.1em;
  text-transform:uppercase; color:#6B7573; white-space:nowrap;
  display:flex; align-items:center; gap:52px;
}
.ticker span::after{ content:"—"; color:#333A38; }

/* ============================================================
   SEÇÕES CLARAS
   ============================================================ */
.sec{ padding-block:clamp(72px,10vh,132px); }
.sec--tint{ background:var(--paper-2); }
.sec--dark{ background:var(--ink); color:#fff; }

.sec__hd{ max-width:62ch; }
.sec__hd h2{
  font-size:clamp(1.85rem,3.7vw,3.05rem);
  margin-top:22px;
}
.sec--dark .sec__hd h2{ color:#fff; }
.sec__hd p{
  margin-top:20px; color:var(--muted); font-size:1.04rem; max-width:56ch;
}
.sec--dark .sec__hd p{ color:#A3ACAA; }

/* ============================================================
   DORES — grade assimétrica de 2 colunas
   ============================================================ */
.pains{
  margin-top:52px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
}
.pain{
  background:var(--paper); padding:30px 28px;
  transition:background .35s var(--ease);
}
.pain:hover{ background:#fff; }
.pain__n{
  font-family:var(--f-mono); font-size:11.5px; color:var(--acc-deep);
  letter-spacing:.1em;
}
.pain h3{ font-size:1.1rem; margin-top:14px; letter-spacing:-.012em; }
.pain p{ margin-top:11px; font-size:15px; color:var(--muted); line-height:1.58; }

/* ============================================================
   SERVIÇOS — índice em linhas, não grade de cartões com ícone
   ============================================================ */
.svc{ margin-top:56px; border-top:1px solid var(--line-dark); }
.svc__row{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) minmax(0,1.15fr) 34px;
  gap:clamp(16px,3vw,44px);
  align-items:start;
  padding-block:30px;
  border-bottom:1px solid var(--line-dark);
  position:relative;
  transition:padding-left .5s var(--ease);
}
.svc__row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--acc); transform:scaleY(0); transform-origin:bottom;
  transition:transform .5s var(--ease);
}
.svc__row:hover::before{ transform:scaleY(1); transform-origin:top; }
.svc__row:hover{ padding-left:22px; }
@media (max-width:760px){
  .svc__row{ grid-template-columns:44px minmax(0,1fr); }
  .svc__row:hover{ padding-left:10px; }
  .svc__arw{ display:none; }
  .svc__txt{ grid-column:2; }
}
.svc__n{
  font-family:var(--f-mono); font-size:12px; color:#5C6664;
  padding-top:7px; letter-spacing:.06em;
}
.svc__ttl{
  font-family:var(--f-disp); font-size:clamp(1.2rem,2.1vw,1.62rem);
  font-weight:500; letter-spacing:-.02em; color:#fff; line-height:1.2;
}
.svc__txt{ color:#98A19F; font-size:15.4px; line-height:1.6; padding-top:3px; }
.svc__txt b{ color:#CFD6D4; font-weight:500; }
.svc__arw{
  color:#3E4644; padding-top:6px;
  transition:color .4s var(--ease), transform .4s var(--ease);
}
.svc__row:hover .svc__arw{ color:var(--acc); transform:translate(4px,-4px); }

/* ============================================================
   PLANOS
   ============================================================ */
.plans{
  margin-top:54px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(276px,1fr)); gap:20px;
}
.plan{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:32px 28px 30px;
  display:flex; flex-direction:column;
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.plan:hover{ border-color:var(--muted-2); transform:translateY(-3px); }
.plan--hi{
  background:var(--ink); border-color:var(--ink); color:#fff;
  position:relative;
}
.plan--hi:hover{ border-color:var(--acc); }
.plan__tag{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--acc-deep);
}
.plan--hi .plan__tag{ color:var(--acc); }
.plan h3{ font-size:1.42rem; margin-top:16px; }
.plan--hi h3{ color:#fff; }
.plan__desc{ margin-top:14px; font-size:15px; color:var(--muted); line-height:1.6; }
.plan--hi .plan__desc{ color:#A3ACAA; }
.plan ul{ list-style:none; margin:24px 0 0; padding:22px 0 0; border-top:1px solid var(--line); }
.plan--hi ul{ border-top-color:var(--line-dark); }
.plan li{
  display:flex; gap:11px; align-items:flex-start;
  font-size:14.8px; padding-block:8px; color:var(--text);
}
.plan--hi li{ color:#C3CAC8; }
.plan li svg{ flex:none; margin-top:5px; color:var(--acc-deep); }
.plan--hi li svg{ color:var(--acc); }
.plan__ft{ margin-top:auto; padding-top:26px; }
.plan__ft .btn{ width:100%; justify-content:center; }

/* ============================================================
   PROCESSO — linha do tempo horizontal
   ============================================================ */
.steps{
  margin-top:56px; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0;
}
.step{
  padding:30px 26px 30px 0; border-top:2px solid var(--line);
  position:relative;
}
.step::before{
  content:""; position:absolute; top:-2px; left:0; height:2px; width:100%;
  background:var(--acc-deep); transition:width 1s var(--ease);
}
.step.in::before{ width:100%; }
.step__n{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.12em;
  color:var(--acc-deep); text-transform:uppercase;
}
.step h3{ font-size:1.14rem; margin-top:15px; }
.step p{ margin-top:11px; font-size:14.8px; color:var(--muted); line-height:1.58; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ margin-top:50px; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:24px 44px 24px 0;
  font-family:var(--f-disp); font-size:clamp(1.02rem,1.6vw,1.18rem);
  font-weight:500; letter-spacing:-.015em; position:relative;
  transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--acc-deep); }
.faq summary::before,
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; background:var(--muted);
  transition:transform .4s var(--ease), background .3s var(--ease);
}
.faq summary::before{ width:14px; height:1.5px; margin-top:-.75px; }
.faq summary::after{ width:1.5px; height:14px; margin-top:-7px; margin-right:6.25px; }
.faq details[open] summary::after{ transform:rotate(90deg); }
.faq details[open] summary::before,
.faq details[open] summary::after{ background:var(--acc-deep); }
.faq__a{ padding:0 60px 26px 0; color:var(--muted); font-size:15.6px; line-height:1.68; }
.faq__a a{ color:var(--acc-deep); text-decoration:underline; text-underline-offset:3px; }

/* ============================================================
   CONTATO
   ============================================================ */
.contact{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(40px,6vw,88px); margin-top:52px; align-items:start;
}
@media (max-width:940px){ .contact{ grid-template-columns:1fr; } }

.contact__side h3{ font-size:clamp(1.5rem,2.6vw,2.05rem); color:#fff; }
.contact__side > p{ margin-top:18px; color:#A3ACAA; font-size:1.02rem; max-width:44ch; }
.chan{ margin-top:34px; display:flex; flex-direction:column; gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); border-radius:var(--r-lg); overflow:hidden; }
.chan a{
  display:flex; align-items:center; gap:16px; padding:19px 22px;
  background:var(--ink); transition:background .3s var(--ease);
}
.chan a:hover{ background:#171A19; }
.chan svg{ color:var(--acc); flex:none; }
.chan b{ display:block; font-family:var(--f-disp); font-weight:500; font-size:15.4px; color:#fff; }
.chan small{ display:block; font-size:13px; color:#7C8583; margin-top:3px; font-family:var(--f-mono); letter-spacing:.03em; word-break:break-all; }
.chan__note{ margin-top:20px; font-size:14.6px; color:#8C9593; line-height:1.6; max-width:44ch; }

/* Formulário */
.form{
  background:#111414; border:1px solid var(--line-dark);
  border-radius:var(--r-lg); padding:clamp(24px,3vw,36px);
}
.form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .form__grid{ grid-template-columns:1fr; } }
.fld{ display:flex; flex-direction:column; gap:8px; }
.fld--full{ grid-column:1 / -1; }
.fld label{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.11em;
  text-transform:uppercase; color:#79817F;
}
.fld label .opt{ color:#4E5654; }
.fld input, .fld select, .fld textarea{
  font-family:var(--f-body); font-size:15.5px; color:#fff;
  background:#0A0C0C; border:1px solid #262A29; border-radius:var(--r);
  padding:13px 14px; width:100%;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.fld textarea{ resize:vertical; min-height:104px; line-height:1.55; }
.fld select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2379817F' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}
.fld input::placeholder, .fld textarea::placeholder{ color:#4E5654; }
.fld input:focus, .fld select:focus, .fld textarea:focus{
  outline:none; border-color:var(--acc); background:#0D1010;
}
/* aviso de retorno do envio */
.msg{
  display:none; gap:12px; align-items:flex-start;
  border-radius:var(--r); padding:15px 17px; margin-bottom:22px;
  font-size:14.8px; line-height:1.55;
}
.msg.show{ display:flex; }
.msg svg{ flex:none; margin-top:2px; }
.msg--ok{ background:rgba(129,216,208,.1); border:1px solid rgba(129,216,208,.4); color:#CFEFEC; }
.msg--ok svg{ color:var(--acc); }
.msg--erro{ background:rgba(196,85,77,.1); border:1px solid rgba(196,85,77,.45); color:#EBC4C1; }
.msg--erro svg{ color:#D9756C; }
.msg a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }

.form__ft{ margin-top:24px; display:flex; flex-direction:column; gap:16px; }
.form__ft .btn{ justify-content:center; }
.form__legal{ font-size:12.6px; color:#6B7371; line-height:1.55; }

/* ============================================================
   RODAPÉ
   ============================================================ */
.foot{ background:var(--ink); color:#fff; padding-block:56px 34px; border-top:1px solid var(--line-dark); }
.foot__top{ display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; align-items:flex-start; }
.foot__nav{ display:flex; flex-wrap:wrap; gap:30px; }
.foot__nav a{ font-size:14.5px; color:#8C9593; transition:color .25s var(--ease); }
.foot__nav a:hover{ color:var(--acc); }
.foot__bot{
  margin-top:42px; padding-top:22px; border-top:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.05em; color:#5F6866;
}

/* Botão flutuante de contato */
.wa{
  position:fixed; right:18px; bottom:18px; z-index:90;
  display:flex; align-items:center; gap:10px;
  background:var(--acc); color:var(--acc-ink);
  padding:13px 19px; border-radius:100px;
  font-family:var(--f-disp); font-weight:500; font-size:14.5px;
  box-shadow:0 8px 26px rgba(0,0,0,.22);
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease), background .3s var(--ease);
}
.wa.on{ opacity:1; transform:none; pointer-events:auto; }
.wa:hover{ background:#6BC9C0; }
@media (max-width:520px){ .wa span{ display:none; } .wa{ padding:15px; } }

/* ============================================================
   MOTION — entrada suave, respeitando preferência do sistema
   ============================================================ */
/* Só esconde quando há JS; sem JS a página aparece inteira e indexável. */
.js .rv{ opacity:0; transform:translateY(22px); }
.js .rv.in{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .step::before{ width:0; }

@media (prefers-reduced-motion:reduce){
  .js .rv{ opacity:1; transform:none; }
  .js .rv.in{ transition:none; }
  .step::before{ transition:none; width:100%; }
  .btn::before{ transition:none; }
}

/* ==========================================================================
   Botao de copiar o e-mail e destaque do formulario
   ========================================================================== */

.chan__copy{
  display:flex; align-items:center; gap:16px; padding:19px 22px;
  background:var(--ink); border:0; width:100%; cursor:pointer;
  font:inherit; color:inherit; text-align:left;
  transition:background .3s var(--ease);
}
.chan__copy:hover{ background:#171A19; }
.chan__copy svg{ color:var(--acc); flex:none; transition:color .3s var(--ease); }
.chan__copy b{ display:block; font-family:var(--f-disp); font-weight:500;
  font-size:15.4px; color:#fff; transition:color .3s var(--ease); }
.chan__copy small{ display:block; font-size:12.6px; color:#7C8583; margin-top:3px; }
.chan__copy.copiado svg,
.chan__copy.copiado b{ color:var(--acc); }

/* Piscada curta ao chegar no formulario vindo de um botao de plano */
.form--destaque{ animation:destacar 1.5s var(--ease); }
@keyframes destacar{
  0%   { border-color:var(--acc); box-shadow:0 0 0 4px rgba(129,216,208,.16); }
  70%  { border-color:var(--acc); box-shadow:0 0 0 4px rgba(129,216,208,.10); }
  100% { border-color:var(--line-dark); box-shadow:0 0 0 4px rgba(129,216,208,0); }
}
.form--destaque #assunto{ border-color:var(--acc); }
@media (prefers-reduced-motion:reduce){
  .form--destaque{ animation:none; }
}

/* ==========================================================================
   Paginas de servico
   ========================================================================== */

/* Hero interno: mais curto que o da home, sem coluna lateral */
.hero--interna{ padding-top:clamp(112px,14vh,146px); padding-bottom:clamp(48px,7vh,78px); }
.hero--interna .hero__sub{ max-width:56ch; }
.hero--interna h1{ max-width:16ch; }

/* Trilha de navegacao */
.trilha{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.11em;
  text-transform:uppercase; color:#6E7876;
}
.trilha a{ color:#98A19F; transition:color .25s var(--ease); }
.trilha a:hover{ color:var(--acc); }
.trilha span[aria-current]{ color:var(--acc); }

/* Item de menu da pagina atual */
.nav a[aria-current]{ color:#fff; }
.nav a[aria-current]::after{ transform:scaleX(1); }

/* Cartoes de servicos relacionados */
.rel{
  margin-top:44px; display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
}
.rel__card{
  background:var(--paper-2); padding:26px 24px 24px;
  display:flex; flex-direction:column; gap:6px;
  transition:background .35s var(--ease);
}
.rel__card:hover{ background:#fff; }
.rel__n{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.1em;
  color:var(--acc-deep);
}
.rel__card b{
  font-family:var(--f-disp); font-weight:500; font-size:1.14rem;
  letter-spacing:-.015em; margin-top:8px;
}
.rel__card small{ font-size:14px; color:var(--muted); line-height:1.5; }

/* Linha de servico que leva a uma pagina propria */
.svc__row--link{ cursor:pointer; }
.svc__row--link .svc__ttl{ transition:color .35s var(--ease); }
.svc__row--link:hover .svc__ttl{ color:var(--acc); }
.svc__row--link .svc__arw{ color:#5A625F; }

/* Bloco de endereco no rodape */
.foot__end{
  display:flex; flex-direction:column; gap:6px;
  font-style:normal; line-height:1.5;
}
.foot__end span{ display:block; }
.foot__dir{ align-self:flex-end; }
@media (max-width:720px){
  .foot__bot{ flex-direction:column; gap:16px; }
  .foot__dir{ align-self:flex-start; }
}

/* ==========================================================================
   Pagina de erro 404
   ========================================================================== */

.erro{ min-height:78vh; display:flex; align-items:center;
  padding-top:clamp(120px,15vh,160px); padding-bottom:clamp(56px,8vh,90px); }
.erro h1{ font-size:clamp(2.2rem,4.2vw,3.6rem); margin-top:22px; }
.erro .hero__sub{ max-width:48ch; }

.erro__links{
  margin-top:46px; display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  background:var(--line-dark); border:1px solid var(--line-dark);
  border-radius:var(--r-lg); overflow:hidden; max-width:760px;
}
.erro__links a{
  background:var(--ink); padding:18px 20px; font-size:15px; color:#C3CAC8;
  display:flex; align-items:baseline; gap:12px;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.erro__links a:hover{ background:#171A19; color:#fff; }
.erro__links span{ font-family:var(--f-mono); font-size:11.5px; color:var(--acc); }