/* ==========================================================================
   Aranda & Campos — Landing page de inventário
   Tokens da marca Arca (manual de identidade visual 2025)
   ========================================================================== */

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dmsans-var.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Merriweather";
  src: url("../fonts/merriweather-italic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* paleta da marca */
  --abismo: #081F2C;      /* Pantone 5395 C */
  --marinho: #13294B;     /* Pantone 2767 C */
  --aco: #5E8AB4;         /* Pantone 646 C */
  --nevoa: #BBC7D6;       /* Pantone 537 C */
  --linho: #EFEEEA;
  --ambar: #E59E6D;       /* Pantone 472 C */
  --whats: #276A51;        /* verde-garrafa: o WhatsApp no tom do navy e do âmbar */
  --whats-claro: #2F7A5D;
  --whats-escuro: #1D533F;
  --whats-texto: var(--linho);
  --whats-icone: var(--ambar);

  /* derivados */
  --fundo: #071A25;
  --superficie: #0E2639;
  --superficie-2: #0A2131;
  --texto: var(--linho);
  --texto-2: #C9D3DF;
  --texto-3: #93A4B8;
  --linha: rgba(187, 199, 214, .14);
  --linha-forte: rgba(187, 199, 214, .3);

  --raio-g: 28px;
  --raio-m: 20px;
  --raio-p: 12px;

  --largura: 1440px;
  --gut: clamp(16px, 4vw, 64px);
  --topo: 68px;

  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Merriweather", Georgia, "Times New Roman", serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(.2, .7, .1, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo) + 16px);
}
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ul, ol, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }

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

.wrap {
  width: min(100% - 2 * var(--gut), var(--largura));
  margin-inline: auto;
}

.pular {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 100;
  background: var(--linho);
  color: var(--abismo);
  padding: 12px 18px;
  border-radius: var(--raio-p);
}
.pular:focus { top: 16px; }

/* ---------- tipografia ---------- */
em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: .9em;
  letter-spacing: -.015em;
  color: var(--ambar);
  padding-right: .04em;
}

.titulo-xl,
.titulo-lg {
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.02;
  text-wrap: balance;
}
.titulo-xl { font-size: clamp(2.25rem, 1.1rem + 4.2vw, 5rem); }
.titulo-lg { font-size: clamp(2rem, 1.1rem + 3vw, 4rem); }

.cabeca { margin-bottom: clamp(40px, 6vw, 80px); }
.cabeca--direita { padding-left: calc(50% + clamp(12px, 2vw, 32px)); }
.cabeca__sub {
  max-width: 30rem;
  margin-top: 18px;
  color: var(--texto-3);
  font-size: 1rem;
  line-height: 1.55;
}

.rotulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--texto-3);
}
.rotulo svg { width: 14px; height: 10px; fill: var(--ambar); }

.selo {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: .75rem;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(239, 238, 234, .08);
  color: var(--texto-2);
}

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags li {
  font-family: var(--mono);
  font-size: .75rem;
  line-height: 1;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid currentColor;
  opacity: .82;
}

/* medidor de barras (estilo da referência; cada barra representa uma unidade real) */
.medidor { display: inline-flex; gap: 4px; align-items: stretch; height: 30px; }
.medidor i {
  width: 2px;
  background: rgba(239, 238, 234, .22);
  border-radius: 1px;
}
.medidor i.on { background: var(--ambar); }

/* ---------- botões ---------- */
.btn {
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
  min-height: 54px;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -.01em;
}
.btn__rotulo {
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-radius: var(--raio-p);
  background: var(--linho);
  color: var(--abismo);
  transition: background-color .2s;
}
.btn__icone {
  display: grid;
  place-items: center;
  width: 54px;
  border-radius: var(--raio-p);
  background: var(--ambar);
  color: var(--abismo);
}
.btn__icone svg { width: 22px; height: 22px; }
.btn:hover .btn__rotulo { background: #fff; }
.btn--whats .btn__rotulo { background: var(--whats); color: var(--whats-texto); font-weight: 600; }
.btn--whats .btn__icone { background: var(--whats-escuro); color: var(--whats-icone); }
.btn--whats:hover .btn__rotulo { background: var(--whats-claro); }
.btn__icone--insta { background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF); color: #fff; }
.btn--escuro .btn__rotulo { background: var(--abismo); color: var(--linho); }
.btn--escuro:hover .btn__rotulo { background: var(--marinho); }
.btn--linha .btn__rotulo { background: transparent; color: var(--linho); box-shadow: inset 0 0 0 1px var(--linha-forte); }
.btn--linha:hover .btn__rotulo { background: rgba(239, 238, 234, .06); }
.btn--bloco { display: flex; width: 100%; }
.btn--bloco .btn__rotulo { flex: 1; }

.link-icone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: .875rem;
  color: var(--linho);
}
.link-icone__q {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(229, 158, 109, .16);
  color: var(--ambar);
  transition: background-color .2s, color .2s;
}
.link-icone__q svg { width: 15px; height: 15px; }
.link-icone:hover .link-icone__q { background: var(--ambar); color: var(--abismo); }
.link-icone--whats .link-icone__q { background: var(--whats); color: var(--whats-icone); }
.link-icone--whats:hover .link-icone__q { background: var(--whats-claro); color: var(--whats-icone); }

.redondo {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--linha-forte);
  color: var(--linho);
  transition: border-color .2s;
}
.redondo svg { width: 16px; height: 16px; }
.redondo--volta svg { transform: rotate(180deg); }
.redondo:hover { border-color: var(--ambar); }
.redondo:disabled { opacity: .35; cursor: default; }

/* ---------- logo ---------- */
.logo {
  --logo-simbolo: var(--aco);
  height: 22px;
  width: auto;
  aspect-ratio: 682 / 144;
  color: var(--linho);
}

/* ==========================================================================
   TOPO
   ========================================================================== */
.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--topo);
  transition: background-color .3s, box-shadow .3s;
}
.topo.rolou {
  background: rgba(7, 26, 37, .86);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 1px 0 var(--linha);
}
.topo__barra {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
}
.topo__marca { display: block; padding: 8px 0; }
.topo__area {
  padding-left: 20px;
  border-left: 1px solid var(--linha-forte);
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--texto-3);
  white-space: nowrap;
}
.topo__nav {
  display: flex;
  gap: clamp(16px, 2.2vw, 36px);
  margin-left: auto;
  font-size: .875rem;
  color: var(--texto-2);
}
.topo__nav a { padding: 8px 0; transition: color .2s; }
.topo__nav a:hover { color: var(--linho); }
.topo__whats {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 22px 0 18px;
  border-radius: 999px;
  background: var(--whats);
  color: var(--whats-texto);
  font-size: 1rem;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 18px rgba(3, 12, 18, .3);
  transition: background-color .2s;
}
.topo__whats svg { width: 22px; height: 22px; color: var(--whats-icone); }
.topo__whats:hover { background: var(--whats-claro); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  margin-inline: clamp(8px, 1.2vw, 20px);
  border-radius: var(--raio-g);
  background: var(--superficie-2);
  overflow: hidden;
}
.hero__palco {
  position: relative;
  display: flex;
  min-height: clamp(600px, calc(100svh - var(--topo) - 150px), 880px);
  border-radius: var(--raio-g);
  overflow: hidden;
  background: #170F0B;
}
.hero__midia { position: absolute; inset: 0; }
.hero__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% 28%;
}
/* véu só sobre o fundo de estúdio, à esquerda — a pessoa fica intacta */
.hero__midia::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 26, 37, .94) 0%, rgba(7, 26, 37, .82) 28%, rgba(7, 26, 37, .34) 50%, rgba(7, 26, 37, 0) 64%),
    linear-gradient(0deg, rgba(7, 26, 37, .5) 0%, rgba(7, 26, 37, 0) 22%);
  pointer-events: none;
}

.hero__moldura {
  position: relative;
  z-index: 1;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  margin-block: clamp(16px, 2.4vw, 36px);
  border: 1px solid rgba(239, 238, 234, .28);
  border-radius: 24px;
}
.hero__trilho {
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  border-right: 1px solid rgba(239, 238, 234, .16);
}
.hero__simbolo { width: 26px; height: 18px; fill: var(--ambar); }
.hero__vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--texto-2);
  white-space: nowrap;
}
.hero__texto {
  grid-column: 2;
  max-width: 820px;
  padding: clamp(28px, 4.2vw, 60px) clamp(24px, 4.2vw, 64px) 32px;
}
.hero__chamada {
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--texto-2);
}
.hero__titulo {
  margin-top: 22px;
  font-size: clamp(2.75rem, 1rem + 4.9vw, 5.5rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.045em;
}
.hero__titulo .linha {
  display: block;
  overflow: hidden;
  padding: 0 .06em .1em 0;
  margin-bottom: -.1em;
}
.hero__titulo .linha > span {
  display: inline-block;
  animation: linha-sobe 1s var(--ease) both;
}
.hero__titulo .linha:nth-child(2) > span { animation-delay: .08s; }
.hero__titulo .linha:nth-child(3) > span { animation-delay: .16s; }
.hero__titulo .linha:nth-child(4) > span { animation-delay: .24s; }
@keyframes linha-sobe {
  from { transform: translateY(105%); }
}
.hero__apoio {
  max-width: 35rem;
  margin-top: 30px;
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  line-height: 1.55;
  color: var(--texto-2);
  animation: aparece .9s .35s var(--ease) both;
}
.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 30px;
  margin-top: 36px;
  animation: aparece .9s .45s var(--ease) both;
}
@keyframes aparece {
  from { opacity: 0; transform: translateY(12px); }
}

.hero__cartao {
  grid-column: 3;
  grid-row: 2;
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(340px, 30vw);
  margin: 0 22px 22px 0;
  border-radius: 16px;
  border: 1px solid rgba(239, 238, 234, .2);
  background: rgba(6, 22, 32, .74);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  overflow: hidden;
  animation: aparece .9s .6s var(--ease) both;
}
.hero__cartao-txt {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 18px 16px;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--texto-2);
}
.logo--mini { height: 15px; }
.hero__cartao-nomes {
  margin-top: auto;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--texto-3);
}

/* base do hero: prazo + o que entra no inventário */
.hero__base {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 64px);
  padding-block: 30px 36px;
}
.prazo {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--linha);
}
.prazo__linha {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.prazo__frase {
  max-width: 16ch;
  font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -.02em;
}
.prazo__numero {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex: none;
}
.prazo__numero strong {
  font-size: clamp(2.75rem, 2rem + 2vw, 3.75rem);
  font-weight: 400;
  line-height: .8;
  letter-spacing: -.04em;
}
.prazo__numero > span:last-child {
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--texto-3);
}
.prazo__fonte { font-family: var(--mono); font-size: .75rem; color: var(--texto-3); }

.bens {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--linha);
  min-width: 0;
}
.bens__titulo { font-family: var(--mono); font-size: .8125rem; color: var(--texto-3); }
.bens__trilha {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 88%, transparent);
}
.bens__lista {
  display: flex;
  flex: none;
  padding-left: 12px;
  animation: desliza 46s linear infinite;
}
.bens__trilha:hover .bens__lista { animation-play-state: paused; }
.bens__lista li {
  display: grid;
  place-items: center;
  width: 124px;
  height: 124px;
  margin-left: -12px;
  padding: 16px;
  border-radius: 50%;
  background: var(--fundo);
  box-shadow: inset 0 0 0 1px var(--linha);
  text-align: center;
  font-size: .875rem;
  line-height: 1.25;
  color: var(--texto-2);
}
.bens__lista li:last-child { color: var(--ambar); }
@keyframes desliza {
  to { transform: translateX(-100%); }
}

/* ==========================================================================
   DOIS CAMINHOS + FOTO NA "ARCA"
   ========================================================================== */
.caminhos { padding-top: clamp(64px, 9vw, 140px); }
.caminhos__topo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.caminhos__topo .titulo-xl { max-width: 18ch; }
.caminhos__fio {
  width: 1px;
  height: 44px;
  margin: 28px 0 24px;
  background: var(--linha-forte);
}
.caminhos__texto {
  max-width: 36rem;
  color: var(--texto-3);
  font-size: 1rem;
}

.arca-foto {
  position: relative;
  margin-top: clamp(32px, 5vw, 72px);
}
.arca-foto__wrap { position: relative; padding-block: 34px; }
.arca-foto__colchete {
  position: absolute;
  left: 14%;
  right: 14%;
  height: 20px;
  border: 2px solid var(--aco);
}
.arca-foto__colchete--topo { top: 0; border-bottom: 0; }
.arca-foto__colchete--base { bottom: 0; border-top: 0; }
.arca-foto__quadro {
  position: relative;
  aspect-ratio: 16 / 8.4;
  border-radius: var(--raio-g);
  overflow: hidden;
  background: #C9CED4;
}
.arca-foto__quadro picture, .arca-foto__img { width: 100%; height: 100%; }
.arca-foto__img { object-fit: cover; object-position: 50% 30%; }
.arca-foto__legenda {
  position: absolute;
  left: clamp(18px, 3vw, 44px);
  top: clamp(18px, 3vw, 40px);
  max-width: 28ch;
  font-family: var(--mono);
  font-size: .75rem;
  line-height: 1.5;
  color: var(--abismo);
}
.logo--foto {
  position: absolute;
  right: clamp(18px, 3vw, 44px);
  top: clamp(18px, 3vw, 40px);
  height: 18px;
  color: var(--abismo);
  --logo-simbolo: var(--marinho);
}

/* a faixa âmbar é a barra do meio do símbolo da Arca, atravessando a foto */
.faixa {
  position: absolute;
  left: 0;
  right: 0;
  /* passa na altura do tronco, nunca sobre os rostos */
  top: calc(34px + (100% - 68px) * .77);
  z-index: 2;
  display: flex;
  align-items: center;
  height: 36px;
  margin-top: -18px;
  overflow: hidden;
  background: var(--ambar);
}
/* duas cópias da lista andando juntas: quando a primeira sai, a segunda está no mesmo lugar */
.faixa__lista {
  display: flex;
  flex: none;
  animation: desliza 38s linear infinite;
}
.faixa li {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--abismo);
}
/* separador: um traço do símbolo da Arca entre as etapas */
.faixa li::after { content: ""; width: 18px; height: 3px; background: var(--abismo); opacity: .55; }

/* ==========================================================================
   SOBRE O ESCRITÓRIO
   ========================================================================== */
.sobre {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  column-gap: clamp(24px, 4vw, 64px);
  row-gap: 56px;
  padding-block: clamp(96px, 12vw, 180px);
}
.sobre__titulo { grid-row: 1 / 3; max-width: 13ch; }
.sobre__dados { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dado {
  padding: 4px 0 4px 24px;
  border-left: 1px solid var(--linha-forte);
}
.dado__valor {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -.035em;
}
.dado__rotulo {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--texto-3);
}
.sobre__texto { display: flex; flex-direction: column; gap: 18px; max-width: 30rem; }
.sobre__lead {
  font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -.015em;
}
.sobre__lead strong { font-weight: 500; color: var(--ambar); }
.sobre__texto p:not(.sobre__lead) { color: var(--texto-3); }
.sobre__texto .link-icone { margin-top: 10px; }

/* ==========================================================================
   SITUAÇÕES (cartões com o grafismo de apoio da marca)
   ========================================================================== */
.situacoes { padding-bottom: clamp(96px, 12vw, 180px); }
.situacoes__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.caso {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  min-height: 400px;
  padding: 28px;
  border-radius: var(--raio-m);
  overflow: hidden;
}
.caso__arte {
  align-self: center;
  width: min(76%, 300px);
  margin: 4% 0 auto;
  padding-bottom: 24px;
}
.caso__titulo {
  font-size: clamp(1.375rem, 1.1rem + .6vw, 1.625rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.025em;
  max-width: 18ch;
}
.caso__texto { font-size: .9375rem; line-height: 1.55; opacity: .86; max-width: 34ch; }
.caso .tags { margin-top: 6px; }
.caso--marinho { background: var(--marinho); color: var(--linho); }
.caso--marinho .caso__arte { color: var(--aco); }
.caso--aco { background: var(--aco); color: var(--abismo); }
.caso--aco .caso__texto, .caso--aco .tags li, .caso--ambar .caso__texto, .caso--ambar .tags li { opacity: 1; }
.caso--aco .caso__arte { color: var(--linho); }
.caso--linho { background: var(--linho); color: var(--abismo); }
.caso--linho .caso__arte { color: var(--marinho); }
.caso--abismo { background: #04131C; color: var(--linho); box-shadow: inset 0 0 0 1px var(--linha); }
.caso--abismo .caso__arte { color: var(--ambar); }
.caso--ambar { background: var(--ambar); color: var(--abismo); }
.caso--ambar .caso__arte { color: var(--abismo); }
.caso--marinho2 { background: var(--superficie); color: var(--linho); }
.caso--marinho2 .caso__arte { color: var(--nevoa); }

/* ==========================================================================
   SERVIÇOS
   ========================================================================== */
.servicos { padding-bottom: clamp(96px, 12vw, 180px); }
.servico {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  padding-block: 36px 40px;
  border-top: 1px solid var(--linha);
}
.servico__tipo {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--texto-3);
}
.servico__corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
  grid-template-areas: "nome foto" "texto foto" "tags foto";
  grid-template-rows: auto auto 1fr;
  column-gap: 32px;
}
.servico__corpo > .servico__nome { grid-area: nome; }
.servico__corpo > p { grid-area: texto; }
.servico__corpo > picture { grid-area: foto; }
.servico__corpo > .tags { grid-area: tags; align-self: end; margin-top: 20px; }
.servico__nome {
  font-size: clamp(1.5rem, 1.2rem + .8vw, 1.875rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.15;
}
.servico__corpo > p { margin-top: 12px; color: var(--texto-3); font-size: 1rem; }
.servico__corpo picture { margin: 0; }
.servico__foto {
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  border-radius: 16px;
}
.servico__foto--topo { object-position: 50% 0%; }
.servico .tags li {
  border-color: transparent;
  background: rgba(239, 238, 234, .08);
  color: var(--texto-2);
  opacity: 1;
}

/* ==========================================================================
   EQUIPE
   ========================================================================== */
.equipe { padding-bottom: clamp(96px, 12vw, 180px); }
.equipe__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  padding-top: 40px;
  border-top: 1px solid var(--linha);
}
.pessoa {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 6px;
  min-height: 460px;
}
.pessoa__foto {
  position: relative;
  border-radius: var(--raio-m);
  overflow: hidden;
  background: #C9CED4;
}
.pessoa__foto picture, .pessoa__img { width: 100%; height: 100%; }
.pessoa__img { object-fit: cover; object-position: 50% 18%; }
.pessoa__id {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 48px 20px 18px;
  background: linear-gradient(0deg, rgba(4, 19, 28, .85), rgba(4, 19, 28, 0));
}
.pessoa__nome { font-size: 1.125rem; font-weight: 500; letter-spacing: -.01em; }
.pessoa__oab { font-family: var(--mono); font-size: .75rem; color: var(--texto-2); }
.pessoa__bio {
  display: flex;
  align-items: flex-start;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--raio-m);
  background: var(--superficie);
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  line-height: 1.4;
  letter-spacing: -.01em;
}

/* ==========================================================================
   CONTATO FINAL
   ========================================================================== */
.contato { padding-bottom: clamp(96px, 12vw, 160px); }
.contato__lado {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.contato__lado .titulo-lg { max-width: 15ch; }
.contato__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 24px;
  margin-top: clamp(32px, 4vw, 56px);
}
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo--largo { grid-column: 1 / -1; }
.campo label { font-family: var(--mono); font-size: .75rem; color: var(--texto-3); }
.campo label span { color: var(--texto-3); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 10px 0 12px;
  border: 0;
  border-bottom: 1px solid var(--linha-forte);
  border-radius: 0;
  background: transparent;
  font-size: 1.125rem;
  color: var(--linho);
  transition: border-color .2s;
}
.campo select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23E59E6D' stroke-width='1.6' d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right center / 18px no-repeat;
}
.campo select option { background: var(--abismo); color: var(--linho); }
.campo textarea { resize: vertical; min-height: 84px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--ambar); }
.campo.erro input { border-color: var(--ambar); }
.campo__erro { font-size: .8125rem; color: var(--ambar); }
.contato__envio { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 8px; }
.contato__nota { max-width: 26ch; font-family: var(--mono); font-size: .75rem; color: var(--texto-3); }

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.rodape { padding-top: clamp(40px, 6vw, 80px); border-top: 1px solid var(--linha); }
.rodape__grade {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  font-size: .9375rem;
  color: var(--texto-2);
}
.rodape__marca { display: flex; flex-direction: column; gap: 18px; }
.rodape__marca .logo { height: 26px; align-self: flex-start; }
.rodape__marca p { max-width: 30ch; font-size: .8125rem; color: var(--texto-3); }
.rodape__rotulo { margin-bottom: 10px; font-family: var(--mono); font-size: .75rem; color: var(--texto-3); }
.rodape a:hover { color: var(--ambar); }
.rodape__fim {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: 56px;
  padding-block: 24px calc(32px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linha);
  font-size: .8125rem;
  color: var(--texto-3);
}

/* ---------- páginas de texto (privacidade, 404) ---------- */
.texto-longo { max-width: 46rem; padding-block: 64px 120px; }
.texto-longo h1 { margin-bottom: 32px; }
.texto-longo h2 { margin: 40px 0 12px; font-size: 1.375rem; font-weight: 500; letter-spacing: -.02em; }
.texto-longo p { color: var(--texto-2); margin-bottom: 14px; }
.texto-longo a:not(.btn) { color: var(--ambar); }
.texto-longo__data { font-family: var(--mono); font-size: .8125rem; }
.texto-longo--404 { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.texto-longo__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 16px; }
img.logo { height: 22px; width: auto; }
.nowrap { white-space: nowrap; }

/* ---------- botão flutuante ---------- */
.flutuante {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 22px 0 18px;
  border-radius: 999px;
  background: var(--whats);
  color: var(--whats-texto);
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(3, 12, 18, .35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition: opacity .3s, transform .45s var(--ease), visibility 0s linear .45s;
}
.flutuante svg { width: 22px; height: 22px; color: var(--whats-icone); }
.flutuante.visivel { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .45s var(--ease), visibility 0s; }

/* ==========================================================================
   AVALIAÇÕES DO GOOGLE
   ========================================================================== */
.avaliacoes { padding-top: clamp(88px, 11vw, 160px); }
.avaliacoes__topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.avaliacoes__topo .titulo-lg { max-width: 15ch; }
.avaliacoes__origem {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--texto-3);
}
.avaliacoes__origem svg { width: 20px; height: 20px; }
.avaliacoes__numero {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
  font-size: clamp(3.5rem, 2.6rem + 3vw, 5.5rem);
  line-height: .9;
  letter-spacing: -.05em;
}
.avaliacoes__estrelas { display: flex; gap: 4px; color: #F2B63C; }
.avaliacoes__estrelas svg { width: 24px; height: 24px; }
.avaliacoes__total { margin-top: 10px; font-family: var(--mono); font-size: .8125rem; color: var(--texto-3); }
.avaliacoes__trilho {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 24px) / 3);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0;
  margin: 0;
}
.avaliacoes__trilho::-webkit-scrollbar { display: none; }
.aval {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  border-radius: var(--raio-m);
  background: var(--superficie);
}
.aval__estrelas { display: flex; gap: 3px; color: #F2B63C; }
.aval__estrelas svg { width: 18px; height: 18px; }
.aval__texto { display: grid; align-content: start; gap: 10px; font-size: 1.0625rem; line-height: 1.55; color: var(--texto-2); }
/* fechado: todos os cartões com a altura do 1º parágrafo da 1ª avaliação (medida no site.js); "ler mais" abre o resto */
.aval:not(.aberto) .aval__texto { max-height: var(--aval-texto, calc(1.55em * 7)); overflow: hidden; }
/* quando o corte cai no meio de uma linha, ela some em degradê */
.aval.meia-linha:not(.aberto) .aval__texto { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 1.6em), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 1.6em), transparent); }
.aval__mais { align-self: flex-start; margin-top: -8px; font-size: .9375rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; color: var(--abismo); }
.aval__autor { margin-top: auto; }
.aval__autor { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--linha); }
.aval__inicial {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--marinho);
  color: var(--linho);
  font-weight: 500;
}
.aval__nome { font-weight: 500; }
.aval__quando { font-family: var(--mono); font-size: .75rem; color: var(--texto-3); }
.avaliacoes__nav { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.avaliacoes__nav .link-icone { margin-right: auto; }

/* ==========================================================================
   INSTAGRAM (mockup do perfil)
   ========================================================================== */
.insta { padding-bottom: clamp(96px, 12vw, 180px); }
.insta__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.insta__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 32rem; }
.insta__texto .titulo-lg { max-width: 13ch; }
.insta__texto .cabeca__sub { margin-top: 0; }
.insta__celular {
  position: relative;
  justify-self: center;
  width: min(300px, 82vw);
  padding: 12px;
  border-radius: 46px;
  background: #04131C;
  box-shadow: 0 0 0 1px var(--linha-forte), 0 30px 80px rgba(0, 0, 0, .45);
  transform: rotate(-2.5deg);
  transition: transform .4s var(--ease);
}
.insta__celular::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  z-index: 1;
  width: 84px;
  height: 22px;
  margin-left: -42px;
  border-radius: 99px;
  background: #04131C;
}
.insta__celular:hover { transform: rotate(0deg); }
.insta__celular img { width: 100%; border-radius: 34px; padding-top: 30px; background: #fff; }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1180px) {
  .topo__area { display: none; }
  .topo__nav { gap: 20px; }
  .avaliacoes__trilho { grid-auto-columns: calc((100% - 12px) / 2); }
}

@media (max-width: 980px) {
  .topo__nav { display: none; }
  .topo__whats { margin-left: auto; height: 44px; padding: 0 18px 0 14px; }
}

@media (max-width: 899px) {
  :root { --topo: 60px; }
  body { font-size: 1.0625rem; }
  .cabeca--direita { padding-left: 0; }

  /* hero empilhado: texto em cima, foto embaixo fundindo no azul */
  .hero__palco { flex-direction: column; min-height: 0; background: var(--fundo); }
  .hero__moldura { display: contents; }
  .hero__trilho { display: none; }
  .hero__texto { display: contents; }
  .hero__chamada, .hero__titulo, .hero__apoio, .hero__acoes { position: relative; z-index: 1; margin-inline: 20px; }
  .hero__chamada { order: 1; margin-top: 36px; }
  .hero__titulo { order: 2; }
  .hero__apoio { order: 3; }
  .hero__midia { order: 4; position: relative; inset: auto; margin-top: -6vw; }
  .hero__midia::after { display: none; }
  .hero__foto {
    height: auto;
    aspect-ratio: 1 / 1.02;
    object-position: 72% 0%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 16%);
  }
  .hero__titulo { margin-top: 16px; }
  .hero__apoio { margin-top: 20px; }
  .hero__acoes { order: 6; margin-top: 24px; margin-bottom: 8px; }
  .hero__cartao {
    order: 5;
    position: relative;
    z-index: 1;
    width: auto;
    margin: -64px 12px 12px;
  }
  .hero__base { grid-template-columns: 1fr; padding-block: 24px 28px; }

  .arca-foto__quadro { aspect-ratio: 4 / 5; }
  .caminhos__fio { display: none; }
  .caminhos__texto { margin-top: 18px; }
  .arca-foto__colchete { left: 10%; right: 10%; }
  .faixa { height: 32px; margin-top: -16px; }
  .faixa li { font-size: .6875rem; letter-spacing: .08em; gap: 28px; padding-right: 28px; }
  .arca-foto__legenda { max-width: 22ch; }
  .logo--foto { display: none; }

  .sobre { grid-template-columns: 1fr; row-gap: 40px; }
  .sobre__titulo { grid-row: auto; }

  .situacoes__grade { grid-template-columns: 1fr 1fr; }
  .caso { min-height: 0; }
  .caso__arte { width: 52%; padding-bottom: 12px; }

  .servico { grid-template-columns: 1fr; gap: 14px; padding-block: 32px 44px; }
  .servico__tipo { font-size: 1rem; font-family: var(--mono); letter-spacing: 0; color: var(--ambar); }
  .servico__corpo { grid-template-columns: 1fr; grid-template-areas: "nome" "texto" "foto" "tags"; }
  .servico__corpo > picture { margin-top: 22px; }



  .equipe__grade { grid-template-columns: 1fr; }
  .pessoa { grid-template-columns: 1fr; min-height: 0; }
  .pessoa__foto { aspect-ratio: 4 / 5; }





  .contato__lado { grid-template-columns: 1fr; gap: 28px; }
  .avaliacoes__topo { grid-template-columns: 1fr; }
  .insta__grade { grid-template-columns: 1fr; }
  .insta__celular { transform: none; width: min(230px, 62vw); padding: 9px; border-radius: 36px; }
  .insta__celular img { border-radius: 28px; padding-top: 24px; }
  .insta__celular::before { top: 15px; width: 64px; height: 17px; margin-left: -32px; }

  .rodape__grade { grid-template-columns: 1fr 1fr; }

  /* celular: botão redondo de WhatsApp no canto, acima da barra do navegador */
  .flutuante {
    left: auto;
    right: 16px;
    bottom: calc(24px + env(safe-area-inset-bottom));
    width: 60px;
    height: 60px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(3, 12, 18, .4);
  }
  .flutuante span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .flutuante svg { width: 32px; height: 32px; }
}

@media (max-width: 599px) {
  .logo { height: 15px; }

  .hero__acoes { flex-direction: column; align-items: flex-start; }
  .hero__acoes .btn { width: 100%; }
  .hero__acoes .btn__rotulo { flex: 1; }
  .prazo__linha { flex-direction: column; align-items: flex-start; }

  .situacoes__grade { grid-template-columns: 1fr; }
  .caso { padding: 22px 22px 24px; gap: 10px; }
  .caso__arte { width: min(62%, 240px); margin-top: 6px; padding-bottom: 14px; }
  .contato__form { grid-template-columns: 1fr; }
  .rodape__grade { grid-template-columns: 1fr; }
  .avaliacoes__trilho { grid-auto-columns: 86%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .bens__lista { animation: none; }
  .bens__lista[aria-hidden] { display: none; }
  .bens__trilha { overflow-x: auto; }
  .faixa__lista { animation: none; }
  .faixa__lista[aria-hidden] { display: none; }
}

/* ==========================================================================
   ACABAMENTO: papel, relevo e tipografia editorial
   Camada final. Não altera copy nem fotos; a textura nunca fica sobre imagens.
   ========================================================================== */
:root {
  --mono: var(--sans); /* rótulos deixam a fonte mono e passam para DM Sans */
  --grao-claro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .22 0 0 0 -.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grao-escuro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .03 0 0 0 0 .12 0 0 0 0 .17 .3 0 0 0 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --borda-papel: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -1px 0 rgba(0, 0, 0, .28);
}
::selection { background: var(--ambar); color: var(--abismo); }

/* papel: grão fino nos fundos e superfícies */
body { background-image: var(--grao-claro); }
.hero, .caso--marinho, .caso--abismo, .caso--marinho2, .pessoa__bio { background-image: var(--grao-claro); }
.caso--aco, .caso--ambar, .caso--linho { background-image: var(--grao-escuro); }

/* espessura de papel cartão */
.caso, .pessoa__bio { box-shadow: var(--borda-papel); }
.caso--abismo { box-shadow: var(--borda-papel), inset 0 0 0 1px var(--linha); }
.caso--linho, .caso--ambar, .caso--aco { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(8, 31, 44, .18); }

/* relevo nos botões: luz em cima, sombra embaixo; afundam ao toque */
.btn__rotulo, .btn__icone {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(8, 31, 44, .12), 0 1px 2px rgba(3, 12, 18, .3);
  transition: background-color .2s, transform .12s, box-shadow .12s;
}
.btn--whats .btn__rotulo { background-color: var(--whats); background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%); }
.btn--whats .btn__icone { background-color: var(--whats-escuro); background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 60%); }
.btn--whats:hover .btn__rotulo { background-color: var(--whats-claro); background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%); }
.btn:active .btn__rotulo, .btn:active .btn__icone { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(3, 12, 18, .25); }
.flutuante { background-image: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 60%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 0 rgba(3, 12, 18, .15), 0 10px 26px rgba(3, 12, 18, .38); }

/* símbolo da Arca prensado no papel, como o emboss da papelaria */
.sobre { position: relative; isolation: isolate; }
.sobre__emboss {
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: clamp(40px, 5vw, 80px);
  width: min(24vw, 340px);
  height: auto;
  fill: rgba(2, 10, 15, .16);
  filter: drop-shadow(1px 1px 0 rgba(255, 255, 255, .07)) drop-shadow(-1px -1px 0 rgba(0, 0, 0, .45));
  pointer-events: none;
}

/* tipografia: rótulos em DM Sans; citações e notas em Merriweather itálico */
.hero__chamada { font-size: .9375rem; font-weight: 500; letter-spacing: .005em; }
.rotulo, .bens__titulo, .dado__rotulo, .rodape__rotulo, .campo label, .avaliacoes__origem, .avaliacoes__total { font-size: .8125rem; font-weight: 500; letter-spacing: .01em; }
.link-icone { font-size: .9375rem; font-weight: 500; letter-spacing: 0; }
.tags li { font-weight: 500; letter-spacing: .01em; }
.hero__vertical { font-weight: 500; letter-spacing: .06em; }
.faixa li { font-weight: 600; letter-spacing: .14em; font-size: .6875rem; }
.prazo__fonte, .arca-foto__legenda, .contato__nota, .aval__quando, .texto-longo__data {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: .875rem;
  letter-spacing: 0;
}
.arca-foto__legenda { line-height: 1.45; }
.pessoa__oab, .hero__cartao-nomes, .prazo__numero strong, .avaliacoes__numero, .dado__valor { font-variant-numeric: lining-nums tabular-nums; }
p, li, address { text-wrap: pretty; }
html { hanging-punctuation: first; }

/* o destaque em itálico fica só no topo e no contato */
.sobre__titulo em { font: inherit; color: inherit; letter-spacing: inherit; padding: 0; }

/* avaliações em papel claro, como cartas */
.avaliacoes {
  margin: clamp(56px, 7vw, 96px) clamp(8px, 1.2vw, 20px) 0;
  padding-block: clamp(64px, 8vw, 112px);
  border-radius: var(--raio-g);
  background: var(--linho) var(--grao-escuro);
  color: var(--abismo);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.avaliacoes ::selection { background: var(--abismo); color: var(--linho); }
.avaliacoes__origem, .avaliacoes__total { color: #45586A; }
.aval {
  position: relative;
  background: #F8F7F3;
  color: var(--abismo);
  box-shadow: inset 0 0 0 1px rgba(8, 31, 44, .08), 0 1px 0 rgba(8, 31, 44, .06), 0 14px 30px -22px rgba(8, 31, 44, .45);
}
.aval::before {
  content: "\201C";
  position: absolute;
  top: 14px;
  right: 22px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--ambar);
  opacity: .55;
  pointer-events: none;
}
.aval__texto { color: #2B3C4B; }
.aval__autor { border-top-color: rgba(8, 31, 44, .12); }
.aval__quando { color: #56687A; }
.avaliacoes .link-icone { color: var(--abismo); }
.avaliacoes .link-icone__q { background: rgba(8, 31, 44, .08); color: var(--marinho); }
.avaliacoes .link-icone:hover .link-icone__q { background: var(--abismo); color: var(--linho); }
.avaliacoes .redondo { border-color: rgba(8, 31, 44, .3); color: var(--abismo); }
.avaliacoes .redondo:hover { border-color: var(--abismo); }

@media (max-width: 899px) {
  .servico__tipo { font-family: var(--sans); font-weight: 600; font-size: .875rem; letter-spacing: .01em; }
  .sobre__emboss { display: none; }
}

/* botões extras de WhatsApp entre as seções */
.cta-linha { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 64px); }
.situacoes .cta-linha { margin-top: clamp(32px, 4vw, 48px); }
@media (max-width: 599px) {
  .cta-linha .btn { width: 100%; }
  .cta-linha .btn__rotulo { flex: 1; }
}