/* ============================================================
   Fabio Assis · Advogado — styles.css
   Paleta de alto contraste sobre preto. O gradiente prata
   (--metal-text) é usado APENAS em títulos/destaques grandes
   e com stops claros (nunca abaixo de ~#c4c8cc) para garantir
   legibilidade. Corpo de texto usa cinza-claro sólido.
   ============================================================ */

:root {
  /* superfícies */
  --black: #050506;
  --ink: #0a0a0c;
  --panel: #0e0e11;
  --panel-2: #131317;
  --line: rgba(233, 234, 236, .12);
  --line-strong: rgba(233, 234, 236, .24);

  /* texto — escala clara para contraste AA sobre o preto */
  --txt: #f3f4f5;
  --txt-2: #d6d9dd;
  --txt-3: #b4b8bd;
  --txt-4: #8b8f95;

  /* prata — só para destaques */
  --silver-1: #ffffff;
  --silver-2: #e3e5e7;
  --silver-3: #c2c6cb;

  --wa: #25d366;
  --wa-ink: #04150a;

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", system-ui, -apple-system, sans-serif;
  --maxw: 1240px;
  --nav-h: 88px;

  /* tamanhos de logo (o topo NÃO usa mais logo) */
  --logo-hero-h: clamp(108px, 12vw, 176px);
  --logo-foot-h: clamp(72px, 8vw, 104px);

  /* metal escovado (formas grandes: botões, filetes, molduras) */
  --metal: linear-gradient(100deg, #5d6064 0%, #9a9da1 18%, #f3f4f6 38%, #a7aaae 52%, #6c6f73 70%, #dfe1e3 86%, #7e8186 100%);
  --metal-soft: linear-gradient(180deg, #3a3c40, #cfd2d5 30%, #7d8085 55%, #e7e8ea 78%, #4a4c50);
  /* metal para TEXTO: stops claros p/ legibilidade */
  --metal-text: linear-gradient(100deg, #cfd2d6 0%, #ffffff 38%, #dfe1e4 60%, #f4f5f6 82%, #c4c8cc 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--black);
  color: var(--txt);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.lock { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--silver-2); color: #000; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--silver-1);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- logo ----------
   O PNG oficial tem fundo branco opaco. O filtro SVG #logo-key
   (definido no index.html) faz chroma-key por luminância:
   branco -> transparente, preto (desenho) -> branco recortado.
   Se um dia o logo vier com fundo transparente ou em SVG,
   basta remover "filter:url(#logo-key)" abaixo.
--------------------------------------------------------------- */
.logo {
  display: inline-block;
  width: auto;
  height: 48px;
  filter: url(#logo-key);
  opacity: .96;
}
.logo--hero {
  height: var(--logo-hero-h);
  margin: 0 0 30px;
  opacity: 1;
  filter: url(#logo-key) drop-shadow(0 8px 34px rgba(231, 232, 234, .12));
}
.logo--foot {
  height: var(--logo-foot-h);
  margin-bottom: 10px;
}
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* ---------- ambiente / textura ---------- */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 60;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ambient::before, .ambient::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5;
}
.ambient::before {
  width: 60vw; height: 60vw; left: -20vw; top: -10vw;
  background: radial-gradient(circle, rgba(120, 124, 130, .16), transparent 60%);
}
.ambient::after {
  width: 50vw; height: 50vw; right: -15vw; bottom: -10vw;
  background: radial-gradient(circle, rgba(90, 93, 98, .14), transparent 60%);
}
.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 80;
  background: var(--metal); box-shadow: 0 0 12px rgba(220, 222, 225, .4);
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; }

/* ---------- helpers de tipo ---------- */
.serif { font-family: var(--serif); }
.kicker {
  font-family: var(--sans); font-weight: 500; font-size: 12.5px;
  letter-spacing: .4em; text-transform: uppercase; color: var(--silver-3);
  display: inline-flex; align-items: center; gap: 14px;
}
.kicker::before { content: ""; width: 34px; height: 1px; background: var(--silver-3); }
.silver-text {
  background: var(--metal-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.display { font-family: var(--serif); font-weight: 500; line-height: 1.04; letter-spacing: .005em; }

.divider { display: flex; align-items: center; gap: 18px; margin: 22px 0; }
.divider span { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.divider i { width: 8px; height: 8px; background: var(--metal-text); transform: rotate(45deg); flex: none; }
.divider.left span:first-child { flex: 0 0 46px; background: var(--line-strong); }
.divider.left span:last-child { flex: 1; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-weight: 500; font-size: 13.5px;
  letter-spacing: .16em; text-transform: uppercase; padding: 17px 30px;
  cursor: pointer; border: 1px solid transparent;
  transition: .4s cubic-bezier(.2, .7, .2, 1); position: relative; overflow: hidden;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--metal); color: #0a0a0c; font-weight: 600; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent);
  transform: skewX(-18deg); transition: .7s;
}
.btn-primary:hover::after { left: 140%; }
.btn-primary:hover { box-shadow: 0 14px 40px -12px rgba(220, 222, 225, .45); transform: translateY(-2px); }
.btn-ghost { border-color: var(--line-strong); color: var(--txt); background: rgba(255, 255, 255, .02); }
.btn-ghost:hover { border-color: var(--silver-2); background: rgba(255, 255, 255, .06); transform: translateY(-2px); }
.btn-ghost svg { transition: transform .4s; }
.btn-ghost:hover svg { transform: translate(3px, -3px); }
.btn-wa { background: var(--wa); color: var(--wa-ink); font-weight: 600; }
.btn-wa:hover { box-shadow: 0 14px 40px -12px rgba(37, 211, 102, .6); transform: translateY(-2px); }

/* ---------- nav (sem logo: links centrados por grid de 3 colunas) ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  transition: .45s; border-bottom: 1px solid transparent;
}
.nav .wrap {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; height: var(--nav-h);
}
.nav.scrolled {
  background: rgba(7, 7, 9, .84); backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav nav { grid-column: 2; justify-self: center; }
.nav-links { display: flex; align-items: center; gap: 34px; list-style: none; }
.nav-links a {
  font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--txt-2); position: relative; padding: 6px 0; transition: color .3s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--metal-text); transition: width .4s;
}
.nav-links a:hover, .nav-links a.active { color: var(--txt); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-cta {
  grid-column: 3; justify-self: end;
  display: flex; align-items: center; gap: 18px;
}
.nav-cta .btn { padding: 12px 22px; font-size: 11.5px; }
.burger {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line-strong);
  background: none; cursor: pointer; flex-direction: column; gap: 5px;
  align-items: center; justify-content: center;
}
.burger span { width: 18px; height: 1.5px; background: var(--txt); transition: .35s; }
.burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 65; background: rgba(6, 6, 8, .97);
  backdrop-filter: blur(8px); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  opacity: 0; visibility: hidden; transition: .4s;
}
.drawer.open { opacity: 1; visibility: visible; }
.drawer a { font-family: var(--serif); font-size: 34px; color: var(--txt-2); padding: 8px 0; transition: .3s; }
.drawer a:hover { color: var(--txt); }
.drawer .btn { margin-top: 24px; }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100vh; display: grid;
  grid-template-columns: 1.05fr .95fr; align-items: stretch; padding-top: var(--nav-h);
}
.hero-left { display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 3; }
.hero-left .wrap-pad { max-width: 640px; margin-left: auto; margin-right: 48px; padding-left: 32px; }
.hero h1 { font-size: clamp(42px, 5.4vw, 78px); margin: 22px 0 0; }
.hero h1 em { font-style: italic; font-weight: 400; color: var(--silver-2); }
.hero .lead { color: var(--txt-2); font-size: 18.5px; max-width: 500px; margin-top: 26px; font-weight: 300; }
.hero-actions { display: flex; gap: 16px; margin-top: 38px; flex-wrap: wrap; }
.oab-chip {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 42px;
  font-size: 12.5px; letter-spacing: .3em; color: var(--silver-3); text-transform: uppercase;
}
.oab-chip .line { width: 40px; height: 1px; background: var(--line-strong); }

.hero-right {
  position: relative; overflow: hidden; border-left: 1px solid var(--line);
  background: linear-gradient(135deg, #15161a, #0c0d10 60%, #1a1b20);
}
.hero-right .photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: right center; filter: grayscale(1) contrast(1.06) brightness(.92);
  transition: opacity .4s;
}
.hero-right .fade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--black) 0%, rgba(5, 5, 6, .4) 30%, transparent 60%),
              linear-gradient(0deg, var(--black), transparent 35%);
}
.metal-strip {
  position: absolute; top: 0; bottom: 0; left: 0; width: 46px;
  background: var(--metal-soft); overflow: hidden; box-shadow: 6px 0 30px rgba(0, 0, 0, .6);
}
.metal-strip::after {
  content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .85), transparent);
  animation: strip 5.5s ease-in-out infinite;
}
@keyframes strip { 0% { top: -50%; } 55%, 100% { top: 120%; } }
.scroll-cue {
  position: absolute; left: 78px; bottom: 34px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--silver-3); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase;
}
.scroll-cue svg { width: 18px; height: 18px; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* ---------- section shell (ritmo reduzido entre seções) ---------- */
section { position: relative; z-index: 2; }
.sec { padding: clamp(56px, 7vw, 88px) 0; }
.sec-head { max-width: 740px; }
.sec-head.center { margin: 0 auto; text-align: center; }
.sec-head.center .kicker::before { display: none; }
.sec-head.center .kicker { justify-content: center; }
.sec-head.center .divider { justify-content: center; }
.sec-head.center .divider span { flex: 0 0 70px; }
.sec-title {
  font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 4vw, 54px);
  line-height: 1.06; margin-top: 18px; color: var(--txt);
}
.sec-sub { color: var(--txt-2); margin-top: 18px; font-size: 17.5px; max-width: 580px; }
.sec-head.center .sec-sub { margin-left: auto; margin-right: auto; }

/* ---------- sobre (sem vazio: foto acompanha a altura do texto) ---------- */
.about-grid {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: stretch;
}
.about-figure { position: relative; }
.about-figure .frame {
  position: relative; overflow: hidden; border: 1px solid var(--line);
  background: linear-gradient(135deg, #15161a, #0c0d10 60%, #1a1b20);
  isolation: isolate; height: 100%;
}
.about-figure .photo {
  position: relative; z-index: 2; width: 100%; height: 100%; min-height: 480px;
  object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(.9); transition: opacity .4s;
}
.about-figure .frame::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(0deg, rgba(5, 5, 6, .55), transparent 50%);
}
/* marca d'água de fallback: só aparece se about.jpg falhar
   (a .photo, com z-index maior, cobre-a quando carrega). */
.about-figure .frame-mark {
  position: absolute; inset: 0; margin: auto; z-index: 1; pointer-events: none;
  width: 52%; max-width: 340px; height: auto; object-fit: contain;
  filter: url(#logo-key); opacity: .16;
}
.about-figure .badge {
  position: absolute; left: -1px; bottom: 34px; background: var(--black);
  border: 1px solid var(--line-strong); border-left: none; padding: 18px 26px;
}
.about-figure .badge b { font-family: var(--serif); font-size: 30px; display: block; }
.about-figure .badge small {
  font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--silver-3);
}
.about-figure .corner {
  position: absolute; top: 18px; right: 18px; width: 46px; height: 46px;
  border-top: 1px solid var(--silver-3); border-right: 1px solid var(--silver-3);
}
.about-body p { color: var(--txt-2); margin-bottom: 18px; font-size: 17px; }
.about-body p:first-of-type::first-letter {
  font-family: var(--serif); font-size: 62px; float: left; line-height: .8;
  padding: 6px 12px 0 0; color: var(--silver-1);
}
.quote {
  font-family: var(--serif); font-style: italic; font-size: 25px; color: var(--txt);
  border-left: 2px solid var(--silver-3); padding: 6px 0 6px 24px; margin: 28px 0;
}
.diff { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; margin-top: 30px; }
.diff li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--txt-2); letter-spacing: .01em; }
.diff li i { width: 7px; height: 7px; background: var(--metal-text); transform: rotate(45deg); margin-top: 9px; flex: none; }
.signature { margin-top: 30px; font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--silver-1); }
.signature small {
  display: block; font-family: var(--sans); font-style: normal; font-size: 10.5px;
  letter-spacing: .3em; color: var(--silver-3); text-transform: uppercase; margin-top: 4px;
}

/* ---------- serviços / áreas (grade) ---------- */
.services { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .014), transparent); }
.svc-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 40px;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.svc {
  display: flex; align-items: center; gap: 20px; padding: 28px 30px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  position: relative; cursor: default; transition: background .4s;
}
.svc::before {
  content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 2px;
  background: var(--metal-text); transform: scaleY(0); transform-origin: top; transition: transform .45s;
}
.svc:hover { background: rgba(255, 255, 255, .03); }
.svc:hover::before { transform: scaleY(1); }
.svc .mk { width: 9px; height: 9px; background: var(--silver-3); flex: none; transition: .4s; }
.svc:hover .mk { background: var(--metal-text); transform: rotate(45deg) scale(1.1); }
.svc .t {
  font-size: 14.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--txt);
  transition: .4s; font-weight: 500; line-height: 1.4;
}
.svc:hover .t { color: var(--silver-1); transform: translateX(4px); }
.svc .ar { margin-left: auto; color: var(--silver-3); opacity: 0; transform: translateX(-8px); transition: .4s; flex: none; }
.svc .ar svg { width: 16px; height: 16px; }
.svc:hover .ar { opacity: 1; transform: translateX(0); }

/* tópicos clicáveis */
a.svc, button.svc {
  -webkit-appearance: none; appearance: none; background: none; border: 0;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-family: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer;
}
.svc .ar { opacity: .6; }
.svc:hover .ar { opacity: 1; }
.svc--soon .t { color: var(--txt-3); }
.svc--soon:hover .t { color: var(--txt-2); }
.soon-tag {
  display: inline-block; margin-left: 10px; font-family: var(--sans); font-size: 9.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--txt-4);
  border: 1px solid var(--line); padding: 2px 7px; vertical-align: middle;
}

/* ---------- página de detalhe da área (legibilidade ampliada) ---------- */
.area-detail { max-width: 880px; margin: 54px auto 0; }
.area-back {
  display: inline-flex; align-items: center; gap: 10px; background: none; border: 0;
  color: var(--txt-2); font-family: var(--sans); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; cursor: pointer; padding: 8px 0; margin-bottom: 24px; transition: color .3s;
}
.area-back svg { width: 16px; height: 16px; transition: transform .3s; }
.area-back:hover { color: var(--txt); }
.area-back:hover svg { transform: translateX(-4px); }
.area-detail .kicker { display: flex; }
.area-title {
  font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 4vw, 50px);
  line-height: 1.08; color: var(--txt); margin-top: 14px;
}
.area-body { margin-top: 8px; }
.area-body p { color: var(--txt-2); font-size: 19px; line-height: 1.85; margin: 0 0 22px; }
.area-body h3 { font-family: var(--serif); font-weight: 600; font-size: 30px; color: var(--txt); margin: 38px 0 14px; }
.area-body h4 { font-family: var(--serif); font-weight: 600; font-size: 24px; color: var(--txt); margin: 30px 0 12px; }
.area-body ul { margin: 0 0 20px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.area-body li { position: relative; padding-left: 26px; color: var(--txt-2); font-size: 18px; line-height: 1.7; }
.area-body li::before {
  content: ""; position: absolute; left: 4px; top: 9px; width: 7px; height: 7px;
  background: var(--metal-text); transform: rotate(45deg);
}
.area-body blockquote {
  font-family: var(--serif); font-style: italic; font-size: 25px; color: var(--txt);
  border-left: 2px solid var(--silver-3); padding: 4px 0 4px 22px; margin: 0 0 20px;
}
.area-body strong { color: var(--txt); font-weight: 500; }
.area-cta {
  margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.area-cta-txt { font-family: var(--serif); font-size: 24px; color: var(--txt-2); }

/* ---------- blog ---------- */
.blog-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 34px; margin-top: 40px; }
.post {
  position: relative; border: 1px solid var(--line); background: var(--panel);
  overflow: hidden; display: flex; flex-direction: column; transition: .45s; cursor: pointer;
}
.post:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.post .thumb {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #15161a, #0c0d10 60%, #1a1b20);
}
.post .thumb .photo {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(.85);
  transition: transform .8s cubic-bezier(.2, .7, .2, 1), opacity .4s;
}
.post:hover .thumb .photo { transform: scale(1.06); }
.post .thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(8, 8, 10, .85), transparent 60%);
}
.post.featured .thumb { height: 340px; }
.post .tag {
  position: absolute; top: 18px; left: 18px; z-index: 2; font-size: 10.5px;
  letter-spacing: .22em; text-transform: uppercase; color: #0a0a0c;
  background: var(--metal-text); padding: 6px 12px; font-weight: 600;
}
.post .body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.post .meta {
  display: flex; gap: 18px; font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--silver-3); margin-bottom: 14px;
}
.post .meta span { display: inline-flex; align-items: center; gap: 7px; }
.post .meta svg { width: 13px; height: 13px; }
.post h3 { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.16; color: var(--txt); transition: color .3s; }
.post.featured h3 { font-size: 34px; }
.post:hover h3 { color: var(--silver-1); }
.post p { color: var(--txt-2); font-size: 15.5px; margin-top: 12px; flex: 1; }
.post .more {
  margin-top: 20px; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--silver-2); display: inline-flex; align-items: center; gap: 10px;
}
.post .more svg { width: 14px; height: 14px; transition: transform .4s; }
.post:hover .more svg { transform: translate(4px, -4px); }
.blog-side { display: flex; flex-direction: column; gap: 24px; }
.blog-side .post .thumb { height: 170px; }
.blog-side .post { flex-direction: row; }
.blog-side .post .thumb { width: 42%; flex: none; }
.blog-side .post .body { padding: 20px 22px; }
.blog-side .post h3 { font-size: 20px; }
.blog-side .post p { display: none; }
.blog-cta { margin-top: 48px; text-align: center; }

/* estado vazio do blog */
.blog-empty {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 72px 24px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .016), transparent);
}
.blog-empty .be-ic {
  width: 66px; height: 66px; border: 1px solid var(--line-strong); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-bottom: 26px;
}
.blog-empty .be-ic svg { width: 27px; height: 27px; color: var(--silver-2); }
.blog-empty h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3vw, 34px); color: var(--txt); line-height: 1.12; }
.blog-empty p { color: var(--txt-2); max-width: 470px; margin-top: 14px; font-size: 16.5px; }
.blog-empty .divider { width: 150px; margin: 26px 0; }
.blog-empty .btn { margin-top: 4px; }

/* ---------- cta ---------- */
.cta {
  position: relative; overflow: hidden; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); background: linear-gradient(135deg, #15161a, #0c0d10 60%, #1a1b20);
}
.cta .photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.1) brightness(.32); transition: opacity .4s;
}
.cta .ovl { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 5, 6, .95), rgba(5, 5, 6, .7)); }
.cta .wrap {
  padding: 96px 32px; position: relative; z-index: 2; display: flex;
  align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.cta h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.1; max-width: 640px; color: var(--txt); }
.cta h2 em { font-style: italic; color: var(--silver-2); }
.cta .right { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.cta .phone { font-family: var(--serif); font-size: 24px; }

/* ---------- footer ---------- */
footer { position: relative; z-index: 2; background: var(--ink); border-top: 1px solid var(--line); }
.foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; padding: 80px 0 56px; }
.foot-brand p { color: var(--txt-3); font-size: 15px; margin-top: 18px; max-width: 300px; }
.foot-col h4 { font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--silver-2); margin-bottom: 22px; }
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.foot-col a { color: var(--txt-3); font-size: 14.5px; transition: .3s; }
.foot-col a:hover { color: var(--txt); padding-left: 5px; }
.foot-contact li { display: flex; gap: 12px; align-items: flex-start; color: var(--txt-3); font-size: 14.5px; margin-bottom: 16px; }
.foot-contact svg { width: 17px; height: 17px; color: var(--silver-3); flex: none; margin-top: 3px; }

.foot-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.foot-strip .wrap { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.strip-item { display: flex; align-items: center; gap: 16px; padding: 26px 8px; border-right: 1px solid var(--line); }
.strip-item:last-child { border-right: none; }
.strip-item .ic {
  width: 42px; height: 42px; border: 1px solid var(--line-strong); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.strip-item .ic svg { width: 18px; height: 18px; color: var(--silver-2); }
.strip-item b { font-size: 15.5px; color: var(--txt); font-weight: 400; letter-spacing: .02em; display: block; }
.strip-item small { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--silver-3); }
.strip-item.wa .ic { border-color: rgba(37, 211, 102, .4); }
.strip-item.wa .ic svg { color: var(--wa); }

.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 0; flex-wrap: wrap; }
.foot-bottom p { font-size: 12.5px; color: var(--txt-4); letter-spacing: .04em; }
.foot-bottom .oab { font-size: 12.5px; letter-spacing: .26em; color: var(--silver-3); text-transform: uppercase; }

/* ---------- whatsapp flutuante ---------- */
.fab { position: fixed; right: 26px; bottom: 26px; z-index: 75; display: flex; align-items: center; gap: 14px; }
.fab .tip {
  background: var(--panel-2); border: 1px solid var(--line-strong); color: var(--txt);
  font-size: 13px; letter-spacing: .04em; padding: 10px 16px; white-space: nowrap;
  opacity: 0; transform: translateX(12px); transition: .4s; pointer-events: none;
}
.fab:hover .tip { opacity: 1; transform: translateX(0); }
.fab .circle {
  width: 62px; height: 62px; border-radius: 50%; background: var(--wa);
  display: flex; align-items: center; justify-content: center; position: relative;
  box-shadow: 0 12px 34px -8px rgba(37, 211, 102, .6); transition: transform .3s;
}
.fab .circle:hover { transform: scale(1.07); }
.fab .circle svg { width: 30px; height: 30px; color: var(--wa-ink); }
.fab .circle::before, .fab .circle::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--wa); animation: pulse 2.4s ease-out infinite;
}
.fab .circle::after { animation-delay: 1.2s; }
@keyframes pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }

/* ---------- modal (blog) ---------- */
.modal {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center;
  justify-content: center; padding: 30px; opacity: 0; visibility: hidden; transition: .4s;
}
.modal.open { opacity: 1; visibility: visible; }
.modal .backdrop { position: absolute; inset: 0; background: rgba(3, 3, 4, .86); backdrop-filter: blur(6px); }
.modal .box {
  position: relative; z-index: 2; background: var(--panel); border: 1px solid var(--line-strong);
  max-width: 820px; width: 100%; max-height: 88vh; overflow-y: auto;
  transform: translateY(20px) scale(.98); transition: .45s cubic-bezier(.2, .7, .2, 1);
}
.modal.open .box { transform: translateY(0) scale(1); }
.modal .box::-webkit-scrollbar { width: 8px; }
.modal .box::-webkit-scrollbar-thumb { background: var(--line-strong); }
.modal .close {
  position: absolute; top: 18px; right: 18px; z-index: 5; width: 42px; height: 42px;
  border: 1px solid var(--line-strong); background: rgba(8, 8, 10, .6); color: var(--txt);
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .3s;
}
.modal .close:hover { background: var(--silver-1); color: #000; transform: rotate(90deg); }
.modal .close svg { width: 18px; height: 18px; }
.modal .m-img {
  width: 100%; height: 340px; object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(.85);
  background: linear-gradient(135deg, #15161a, #0c0d10);
}
.modal .m-body { padding: 40px 48px 48px; }
.modal .m-tag {
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: #0a0a0c;
  background: var(--metal-text); padding: 6px 12px; font-weight: 600; display: inline-block;
}
.modal .m-meta {
  display: flex; gap: 18px; font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--silver-3); margin: 18px 0 14px;
}
.modal h2 { font-family: var(--serif); font-weight: 500; font-size: 38px; line-height: 1.12; color: var(--txt); }
.modal .m-body p { color: var(--txt-2); margin-top: 18px; font-size: 17px; }
.modal .m-body p strong { color: var(--txt); font-weight: 500; }
.modal .m-foot {
  margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.modal .m-foot .signature { margin: 0; font-size: 24px; }

/* ---------- reveal ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(30px);
  transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--d, 0ms);
}
[data-reveal].in { opacity: 1; transform: none; }

/* fallback p/ imagens ausentes */
.photo.hide, .m-img.hide { opacity: 0; }

/* utilitário */
.hidden { display: none !important; }

/* ---------- responsivo ---------- */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-cta .btn-ghost { display: none; }
  .burger { display: flex; }
  .hero { grid-template-columns: 1fr; }
  .hero-right { min-height: 54vh; border-left: none; border-top: 1px solid var(--line); }
  .hero-left .wrap-pad { margin: 0 auto; padding: 0 32px; }
  .scroll-cue { display: none; }
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-figure .frame { height: auto; }
  .about-figure .photo { height: clamp(300px, 52vw, 420px); min-height: 0; }
  .blog-grid { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap { padding: 0 22px; }
  .sec { padding: 52px 0; }
  .svc-grid { grid-template-columns: 1fr; }
  .diff { grid-template-columns: 1fr; }
  .foot-strip .wrap { grid-template-columns: 1fr; }
  .strip-item { border-right: none; border-bottom: 1px solid var(--line); }
  .strip-item:last-child { border-bottom: none; }
  .foot-top { grid-template-columns: 1fr; }
  .cta .wrap { flex-direction: column; align-items: flex-start; }
  .modal .m-body { padding: 30px 24px 36px; }
  .modal h2 { font-size: 28px; }
  .blog-side .post { flex-direction: column; }
  .blog-side .post .thumb { width: 100%; height: 200px; }
  .fab .tip { display: none; }
  .fab { right: 18px; bottom: 18px; }
  .fab .circle { width: 56px; height: 56px; }
  /* legibilidade das áreas no mobile */
  .area-body p { font-size: 17.5px; line-height: 1.8; }
  .area-body li { font-size: 16.5px; }
  .area-body h3 { font-size: 25px; margin: 30px 0 12px; }
  .area-body h4 { font-size: 21px; margin: 24px 0 10px; }
  .area-body blockquote { font-size: 22px; }
}

@media (max-width: 440px) {
  .hero-actions .btn { flex: 1; justify-content: center; }
}

/* ---------- acessibilidade: movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .metal-strip::after, .fab .circle::before, .fab .circle::after, .scroll-cue svg { animation: none !important; }
}

/* ============================================================
   REFORMA MOBILE — ajustes exclusivos para celular.
   Tudo abaixo está dentro de @media (max-width), portanto o
   desktop (telas acima de 760px) permanece EXATAMENTE como está.
   Bloco append-only: cole no FINAL do styles.css, sem apagar nada.
   ============================================================ */

@media (max-width: 760px) {
  /* barra de navegação mais compacta */
  :root { --nav-h: 72px; }
  .nav-cta .btn { padding: 11px 16px; font-size: 10.5px; }
  .drawer a { font-size: 28px; }

  /* hero: a foto vira "capa" no topo e o texto vem abaixo,
     sem forçar 100vh (que gerava rolagem longa e vazia) */
  .hero { min-height: auto; }
  .hero-right { order: -1; min-height: 34vh; border-top: none; }
  .hero-right .photo { object-position: center 35%; }
  .hero-left { padding: 34px 0 10px; }
  .hero-left .wrap-pad { padding: 0 22px; margin: 0; }
  .logo--hero { height: clamp(76px, 22vw, 100px); margin: 0 0 20px; }
  .hero h1 { font-size: clamp(32px, 8.6vw, 42px); margin-top: 16px; }
  .hero .lead { font-size: 16.5px; margin-top: 18px; }
  .oab-chip { margin-top: 28px; font-size: 11px; }
  .hero-actions { flex-direction: column; align-items: stretch; margin-top: 26px; }
  .hero-actions .btn { justify-content: center; }

  /* ritmo e escala de tipo das seções */
  .sec { padding: 44px 0; }
  .sec-title { font-size: clamp(27px, 7.4vw, 34px); }
  .sec-sub { font-size: 16px; }

  /* sobre: foto mais baixa para não alongar o scroll */
  .about-grid { gap: 32px; }
  .about-figure .frame { height: auto; }
  .about-figure .photo { height: clamp(230px, 62vw, 330px); }
  .about-body p { font-size: 16.5px; }
  .quote { font-size: 21px; }
  .signature { font-size: 26px; }

  /* áreas: linhas mais compactas e legíveis no estreito */
  .svc { padding: 20px 18px; gap: 14px; }
  .svc .t { font-size: 13px; letter-spacing: .04em; }
  .area-title { font-size: clamp(25px, 7vw, 31px); }
  .area-body p { font-size: 16.5px; line-height: 1.75; }
  .area-body li { font-size: 16px; }
  .area-body h3 { font-size: 23px; margin: 28px 0 10px; }
  .area-cta { flex-direction: column; align-items: stretch; }
  .area-cta .btn { justify-content: center; }

  /* blog: destaque menor e lista lateral compacta em linha */
  .post.featured .thumb { height: 220px; }
  .post h3 { font-size: 22px; }
  .post.featured h3 { font-size: 26px; }
  .post .meta { font-size: 10.5px; }
  .blog-side .post { flex-direction: row; }
  .blog-side .post .thumb { width: 96px; height: 96px; }
  .blog-side .post .body { padding: 14px 16px; }
  .blog-side .post h3 { font-size: 17px; }

  /* cta e rodapé */
  .cta .wrap { padding: 60px 22px; }
  .cta h2 { font-size: clamp(25px, 7vw, 31px); }
  .foot-top { padding: 56px 0 40px; gap: 36px; }
}

/* celulares pequenos */
@media (max-width: 480px) {
  .wrap { padding: 0 18px; }
  .hero-left .wrap-pad { padding: 0 18px; }
  .hero h1 { font-size: clamp(29px, 8.2vw, 34px); }
  .logo--hero { height: clamp(68px, 20vw, 84px); }
  .svc .t { font-size: 12.5px; }
  .blog-side .post .thumb { width: 84px; height: 84px; }
}

/* ============================================================
   AJUSTES MOBILE v2 — hero, foto do Sobre e botão do menu.
   Escopado a telas pequenas; o desktop permanece igual.
   ============================================================ */

/* menu lateral: botão do WhatsApp em caixa normal e contraste correto */
@media (max-width: 1080px) {
  .drawer .btn {
    text-transform: none;          /* "Falar no WhatsApp", não tudo maiúsculo */
    letter-spacing: .02em;
    font-size: 15px;
    font-weight: 500;
    padding: 14px 26px;
    margin-top: 28px;
    align-self: center;            /* não estica até as bordas */
  }
  .drawer .btn-wa { color: var(--wa-ink); }  /* texto escuro sobre o verde */
}

@media (max-width: 760px) {
  /* hero: texto primeiro, foto como faixa depois; some a barra metálica */
  .hero-right { order: 0; min-height: 30vh; border-top: 1px solid var(--line); }
  .hero-right .photo { object-position: center 30%; }
  .metal-strip { display: none; }

  /* Sobre: revela o rosto e tira o selo de cima da foto */
  .about-figure .photo { object-position: top center; height: clamp(320px, 88vw, 440px); }
  .about-figure .badge {
    position: static;              /* vira uma placa abaixo da foto */
    width: 100%;
    border: 1px solid var(--line-strong);
    border-top: none;
    padding: 16px 20px;
  }
  .about-figure .badge b { font-size: 24px; }
}

/* ============================================================
   AJUSTES MOBILE v3 — sem a faixa da coluna no celular e botão
   do menu com o mesmo corpo dos links. Cole no FINAL do arquivo.
   ============================================================ */

/* celular: remove a faixa da coluna (e, com ela, a barra metálica) */
@media (max-width: 760px) {
  .hero-right { display: none; }
}

/* menu lateral: botão do WhatsApp com o mesmo tamanho dos links */
@media (max-width: 1080px) {
  .drawer a { font-size: clamp(26px, 8vw, 34px); }
  .drawer .btn {
    font-family: var(--serif);
    font-size: clamp(26px, 8vw, 34px);
    font-weight: 500;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: .02em;
    padding: 14px 30px;
  }
  .drawer .btn-wa { color: var(--wa-ink); }
}

/* ============================================================
   HERO (novo título, mais longo) + ÁREAS em acordeão.
   ============================================================ */
.hero h1{font-size:clamp(34px,4.6vw,64px)}
.hero .lead + .lead{margin-top:12px}

/* acordeão: lista única; tópicos permanecem visíveis ao expandir */
.svc-item{scroll-margin-top:calc(var(--nav-h) + 16px)}
.svc-grid{display:flex;flex-direction:column;border:1px solid var(--line);margin-top:44px}
.svc-item{border-bottom:1px solid var(--line)}
.svc-item:last-child{border-bottom:none}
.svc-item .svc{border:0;width:100%}
.svc-item.open .svc{background:rgba(255,255,255,.03)}
.svc-item.open .svc::before{transform:scaleY(1)}
.svc .plus{margin-left:auto;width:16px;height:16px;position:relative;flex:none;transition:transform .45s}
.svc .plus::before,.svc .plus::after{content:"";position:absolute;left:50%;top:50%;background:var(--silver-2);transition:transform .45s,opacity .3s}
.svc .plus::before{width:16px;height:1.5px;transform:translate(-50%,-50%)}
.svc .plus::after{width:1.5px;height:16px;transform:translate(-50%,-50%)}
.svc-item.open .plus{transform:rotate(180deg)}
.svc-item.open .plus::after{transform:translate(-50%,-50%) scaleY(0);opacity:0}
.svc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1)}
.svc-item.open .svc-panel{grid-template-rows:1fr}
.svc-panel-inner{overflow:hidden}
.svc-panel .area-body{padding:4px 26px 6px}
.svc-panel .area-body p:last-child{margin-bottom:16px}
.svc-panel .area-cta{margin:10px 26px 26px;padding-top:20px}
@media(max-width:760px){
  .svc-item .svc{padding:20px 18px}
  .svc-panel .area-body{padding:4px 18px 6px}
  .svc-panel .area-cta{margin:10px 18px 20px}
}

/* ============================================================
   RODAPÉ — logo com as mesmas dimensões do topo e sem a linha
   branca à direita (recorte do arquivo, vale p/ PC e mobile).
   ============================================================ */

/* recorta a faixa direita do PNG onde vive a linha vertical */
.logo { clip-path: inset(0 8% 0 0); }

/* mesmo tamanho do logo do topo (mesma variável = mesmas dimensões) */
.logo--foot { height: var(--logo-hero-h); margin-bottom: 22px; }

/* alarga a coluna da marca só no desktop p/ o logo maior caber */
@media (min-width: 1081px) {
  .foot-top { grid-template-columns: 1.8fr 1fr 1fr 1.2fr; gap: 40px; }
}

/* ---------- números (contagem animada) ---------- */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.015),transparent)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:46px 24px;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.stat .num{font-family:var(--serif);font-size:clamp(40px,4vw,56px);font-weight:600;line-height:1}
.stat .lbl{margin-top:12px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--silver-3)}
@media(max-width:760px){
  .stats .wrap{grid-template-columns:1fr 1fr}
  .stat{padding:34px 16px}
  .stat:nth-child(2){border-right:none}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}
}

/* ---------- depoimentos ---------- */
.dep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.dep{border:1px solid var(--line);background:var(--panel);padding:28px 26px;display:flex;flex-direction:column;gap:18px;position:relative}
.dep::before{content:"“";font-family:var(--serif);font-size:64px;line-height:1;color:var(--silver-3);opacity:.5;position:absolute;top:14px;left:18px}
.dep-txt{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.6;color:var(--txt-2);margin:0;padding-top:26px}
.dep-who{display:flex;flex-direction:column;gap:4px;margin-top:auto}
.dep-name{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt)}
.dep-case{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--silver-3)}
@media(max-width:1080px){.dep-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.dep-grid{grid-template-columns:1fr}}

/* ============================================================
   DEPOIMENTOS — "salto" suave ao passar o mouse.
   O card sobe com um pequeno overshoot (-9px) e assenta em -4px;
   ao tirar o mouse, volta ao lugar com transição suave.
   ============================================================ */
.dep{transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s}
.dep:hover{
  border-color:var(--line-2);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7);
  transform:translateY(-4px);
  animation:dep-hop .5s cubic-bezier(.2,.7,.2,1);
}
@keyframes dep-hop{
  0%{transform:translateY(0)}
  35%{transform:translateY(-9px)}
  65%{transform:translateY(-2px)}
  100%{transform:translateY(-4px)}
}
@media(prefers-reduced-motion:reduce){
  .dep:hover{animation:none;transform:none;box-shadow:none}
}

/* ============================================================
   COMO FUNCIONA — linha do tempo em 4 passos
   ============================================================ */
.proc .kicker::before{display:inline-block}
.proc .kicker::after{content:"";width:34px;height:1px;background:var(--silver-3)}
.proc-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;position:relative;margin-top:64px}
.proc-steps::before{content:"";position:absolute;top:34px;left:12.5%;right:12.5%;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-strong) 10%,var(--line-strong) 90%,transparent)}
.proc-step{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
.proc-num{width:68px;height:68px;border-radius:50%;background:var(--metal);color:#0a0a0c;
  font-family:var(--serif);font-weight:600;font-size:26px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 8px rgba(233,234,236,.05);position:relative;z-index:1}
.proc-step h3{font-family:var(--serif);font-weight:600;font-size:24px;color:var(--txt);margin:22px 0 12px}
.proc-step p{color:var(--txt-2);font-size:15.5px;max-width:260px}
.proc-cta{margin-top:56px;text-align:center}
@media(max-width:1080px){
  .proc-steps{grid-template-columns:1fr 1fr;gap:44px 24px}
  .proc-steps::before{display:none}
}
@media(max-width:560px){
  .proc-steps{grid-template-columns:1fr}
}

/* ============================================================
   COMO FUNCIONA — losangos no lugar dos círculos (teste).
   Para voltar ao estado anterior, basta REMOVER este bloco:
   os valores originais (círculos) continuam no bloco
   "COMO FUNCIONA" mais acima no arquivo.
   ============================================================ */
.proc-num{
  width:74px;
  height:74px;
  border-radius:0;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  box-shadow:none;
  font-size:24px;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.45));
}
.proc-steps::before{top:37px}