/* ==========================================================================
   RVA Marketing Digital — rvamarketing.com.br
   ========================================================================== */

/* ---------- Fontes (self-hosted, subset latino) ---------- */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/fraunces-italic-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plex-mono-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plex-mono-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #FBFAF9;
  --ink: #0A0A0A;
  --corpo: #52525B;
  --roxo: #331255;
  --roxo-hover: #2A0E47;
  --linha: rgba(10, 10, 10, .1);
  --linha-roxa: rgba(255, 255, 255, .16);
  --branco-70: rgba(255, 255, 255, .72);
  --scroll-thumb: #A394B3;
  --scroll-thumb-hover: #857199;
  --f-sans: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --f-serif: "Fraunces", Georgia, serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --altura-header: 4.5rem;
  --raio-img: 6px;
  --raio-card: 10px;
  --track-caps: .15em;
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-header) + 1rem);
}

body {
  font-family: var(--f-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--corpo);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

s { text-decoration-thickness: 1px; }

/* Garante que [hidden] vença qualquer display de autor (ex.: .menu-mobile flex) */
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

::selection { background: var(--roxo); color: #fff; }
.secao-roxa ::selection, .rodape ::selection { background: #fff; color: var(--roxo); }

:focus-visible { outline: 2px solid var(--roxo); outline-offset: 3px; border-radius: 2px; }
.secao-roxa :focus-visible, .rodape :focus-visible, .menu-mobile :focus-visible { outline-color: #fff; }

/* Barra de rolagem — a barra clássica reserva uma faixa opaca na borda da
   janela (vira uma linha clara "cortando" as seções roxas), então com JS
   ativo a nativa é ocultada e o main.js injeta a pílula .scroll-thumb, que
   flutua SOBRE o conteúdo com trilho 100% transparente. Sem JS, fallback
   discreto na barra nativa. O bloco @supports fica restrito a navegadores
   sem ::-webkit-scrollbar (Firefox): quando scrollbar-color é definido, o
   Chrome ignora os pseudo-elementos -webkit e perderia a pílula. */
html.js { scrollbar-width: none; }
html.js::-webkit-scrollbar { display: none; width: 0; height: 0; }

@supports not selector(::-webkit-scrollbar) {
  html:not(.js) { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
}
html:not(.js)::-webkit-scrollbar { width: 12px; height: 12px; }
html:not(.js)::-webkit-scrollbar-track { background: transparent; }
html:not(.js)::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb);
  border: 4px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}
html:not(.js)::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }

.scroll-thumb {
  position: fixed;
  top: 0;
  right: 4px;
  width: 5px;
  border-radius: 999px;
  background: var(--scroll-thumb);
  opacity: 0;
  transition: opacity .35s ease, background-color .2s ease;
  z-index: 120;
  cursor: grab;
  touch-action: none;
}
/* Área de agarre maior que a pílula visível */
.scroll-thumb::before { content: ""; position: absolute; inset: -6px -4px -6px -9px; }
.scroll-thumb.visivel, .scroll-thumb:hover { opacity: 1; }
.scroll-thumb:hover, .scroll-thumb.arrastando { background: var(--scroll-thumb-hover); }
.scroll-thumb.arrastando { cursor: grabbing; }

.wrap {
  max-width: 73.75rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  background: var(--roxo);
  color: #fff;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  font-size: .85rem;
}
.skip-link:focus { top: .75rem; }

/* ---------- Tipografia ---------- */

.eyebrow {
  font-family: var(--f-mono);
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--roxo);
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1.4rem;
}
.eyebrow::before {
  content: "";
  width: .44rem;
  height: .44rem;
  background: currentColor;
  flex: none;
}

.titulo {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 560;
  font-variation-settings: "wght" 560;
  letter-spacing: -.025em;
  line-height: 1.04;
  color: var(--ink);
  text-wrap: balance;
}

.prosa { max-width: 36rem; margin-top: 1.6rem; }
.prosa p + p { margin-top: 1em; }

.secao-cabeca {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1.5rem 4rem;
  align-items: end;
  margin-bottom: clamp(2.75rem, 6vw, 4.5rem);
}
.secao-intro { max-width: 26rem; justify-self: end; align-self: end; }

.nota-fina {
  font-family: var(--f-mono);
  font-size: .75rem;
  color: rgba(82, 82, 91, .9);
  margin-top: 1.75rem;
  letter-spacing: .03em;
}

/* ---------- Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--f-sans);
  font-size: .95rem;
  font-weight: 560;
  line-height: 1;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn svg { width: 1.1rem; height: 1.1rem; fill: currentColor; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primario { background: var(--roxo); color: #fff; }
.btn-primario:hover { background: var(--roxo-hover); }

.btn-fantasma { border-color: rgba(10, 10, 10, .2); color: var(--ink); }
.btn-fantasma:hover { border-color: var(--ink); }

.btn-claro { background: #fff; color: var(--roxo); }
.btn-claro:hover { background: #F1ECF8; }

.btn-contorno { border-color: rgba(255, 255, 255, .3); color: #fff; }
.btn-contorno:hover { border-color: #fff; background: rgba(255, 255, 255, .07); }

.btn-grande { padding: 1.05rem 1.8rem; font-size: 1rem; }

/* ---------- Header ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 250, 249, .96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background-color .3s ease;
}
.header.rolou { border-bottom-color: var(--linha); }

.header-in {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: var(--altura-header);
}

.header-logo { display: flex; flex: none; }
.header-logo img { width: auto; height: 1.9rem; }
.header-logo .logo-branca { display: none; }

.nav-desktop {
  margin-left: auto;
  display: flex;
  gap: 1.9rem;
  font-size: .9rem;
  font-weight: 500;
  color: rgba(10, 10, 10, .8);
}
.nav-desktop a { transition: color .2s ease; }
.nav-desktop a:hover, .nav-desktop a.ativa { color: var(--roxo); }

.header-acoes { display: flex; align-items: center; gap: .75rem; }
.btn-header { padding: .7rem 1.25rem; font-size: .88rem; }

.menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: .38rem;
  width: 2.6rem;
  height: 2.6rem;
  padding: .6rem;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-btn span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  transition: transform .3s ease, opacity .3s ease, background-color .3s ease;
}

/* Header por cima do menu aberto */
body.menu-aberto .header {
  background: var(--roxo);
  border-bottom-color: transparent;
}
body.menu-aberto .header-logo .logo-roxa { display: none; }
body.menu-aberto .header-logo .logo-branca { display: block; }
body.menu-aberto .btn-header { visibility: hidden; }
body.menu-aberto .menu-btn span { background: #fff; }
body.menu-aberto .menu-btn span:first-child { transform: translateY(.28rem) rotate(45deg); }
body.menu-aberto .menu-btn span:last-child { transform: translateY(-.28rem) rotate(-45deg); }
body.menu-aberto { overflow: hidden; }

/* ---------- Menu mobile ---------- */

.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--roxo);
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--altura-header) + 1.5rem);
  opacity: 0;
  transition: opacity .3s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}
html:has(body.menu-aberto) { overflow: hidden; }
.menu-mobile.aberto { opacity: 1; }

.menu-mobile nav {
  display: flex;
  flex-direction: column;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}
.menu-mobile nav a {
  color: #fff;
  font-size: clamp(1.6rem, 6.5vw, 2.2rem);
  font-weight: 550;
  letter-spacing: -.02em;
  line-height: 1.2;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s ease, transform .4s ease;
  transition-delay: calc(var(--i, 0) * 40ms + 80ms);
}
.menu-mobile.aberto nav a { opacity: 1; transform: none; }

.menu-mobile-rodape {
  margin-top: auto;
  padding: 1.5rem clamp(1.25rem, 5vw, 3rem) calc(2.5rem + env(safe-area-inset-bottom, 0px));
}
.menu-mobile-rodape .btn { width: 100%; }

/* ---------- Hero ---------- */

.hero { padding-top: clamp(5.5rem, 13vh, 9rem); }

.hero-titulo {
  font-size: clamp(2.7rem, 10.5vw, 6.75rem);
  font-weight: 560;
  font-variation-settings: "wght" 560;
  letter-spacing: -.035em;
  line-height: .98;
  color: var(--ink);
}
.hero-titulo em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 440;
  font-size: .97em;
  color: var(--roxo);
  letter-spacing: -.02em;
}

.hero-apoio {
  max-width: 33rem;
  font-size: clamp(1.08rem, 2.1vw, 1.28rem);
  line-height: 1.6;
  margin-top: 1.9rem;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2.6rem;
}

.hero-base {
  display: flex;
  justify-content: space-between;
  gap: 1rem 2rem;
  border-top: 1px solid var(--linha);
  margin-top: clamp(4rem, 9vw, 6.5rem);
  padding-block: 1.3rem;
}
.hero-base p {
  font-family: var(--f-mono);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--corpo);
}

/* ---------- Seções ---------- */

.secao { padding-block: clamp(5.5rem, 12vw, 9.5rem); }
.secao-borda { border-top: 1px solid var(--linha); }

.secao-roxa {
  background: var(--roxo);
  color: var(--branco-70);
}
.secao-roxa .titulo { color: #fff; }
.secao-roxa .eyebrow { color: rgba(255, 255, 255, .68); }
.secao-roxa .nota-fina { color: rgba(255, 255, 255, .5); }

/* ---------- Fotos ---------- */

.foto-moldura img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  border-radius: var(--raio-img);
}
.foto-moldura figcaption {
  font-family: var(--f-mono);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--corpo);
  margin-top: .85rem;
}
.secao-roxa .foto-moldura figcaption { color: rgba(255, 255, 255, .55); }

/* ---------- A RVA ---------- */

.grid-rva {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6.5fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.sigla {
  margin-top: 2.9rem;
  border-top: 1px solid var(--linha);
}
.sigla-item {
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--linha);
}
.sigla-item dt {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-size: clamp(1.45rem, 3vw, 1.95rem);
  font-weight: 560;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--ink);
}
.sigla-item dt span {
  font-family: var(--f-mono);
  font-size: .78rem;
  font-weight: 500;
  color: var(--roxo);
}
.sigla-item dd { margin-top: .4rem; max-width: 30rem; font-size: .97rem; }

/* ---------- O que fazemos ---------- */

.servicos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2rem, 5vw, 4.5rem);
}
.servicos li {
  display: flex;
  gap: 1.3rem;
  padding-block: 1.45rem;
  border-top: 1px solid var(--linha);
}
.serv-num {
  font-family: var(--f-mono);
  font-size: .75rem;
  color: rgba(82, 82, 91, .9);
  padding-top: .34rem;
  min-width: 1.5rem;
  flex: none;
}
.servicos h3 {
  font-size: 1.07rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  line-height: 1.35;
}
.servicos li > div > p { font-size: .93rem; margin-top: .35rem; line-height: 1.6; }

.tag {
  font-family: var(--f-mono);
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--roxo);
  border: 1px solid rgba(51, 18, 85, .3);
  border-radius: 999px;
  padding: .12rem .5rem;
  margin-left: .55rem;
  white-space: nowrap;
  vertical-align: .12em;
}

/* ---------- Como funciona / FAQ ---------- */

.grid-como {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.como-cabeca { position: sticky; top: calc(var(--altura-header) + 2rem); }
.como-cabeca .secao-intro { margin-top: 1.4rem; justify-self: start; }

.acc { border-top: 1px solid var(--linha); }
.acc-item { border-bottom: 1px solid var(--linha); }

.acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.2rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--f-sans);
  font-size: 1.04rem;
  font-weight: 560;
  letter-spacing: -.01em;
  color: var(--ink);
  transition: color .2s ease;
}
.acc-btn:hover { color: var(--roxo); }

.acc-sinal { position: relative; width: .8rem; height: .8rem; flex: none; }
.acc-sinal::before, .acc-sinal::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
  transition: transform .3s ease;
}
.acc-sinal::before { width: 100%; height: 1.5px; }
.acc-sinal::after { width: 1.5px; height: 100%; }
.acc-btn[aria-expanded="true"] .acc-sinal::after { transform: rotate(90deg); }

/* Sem JS os painéis ficam abertos (conteúdo sempre acessível);
   o estado recolhido só existe quando o JS assume o controle. */
.acc-painel { overflow: hidden; transition: height .35s ease; }
.js .acc-painel { height: 0; }
.acc-corpo { padding-bottom: 1.5rem; max-width: 40rem; font-size: .96rem; }

/* ---------- Onde tudo começou ---------- */

.grid-origem {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.origem-frase {
  margin-top: 1.9em;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  line-height: 1.4;
  color: #fff;
}
.origem-frase em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 450;
}

.numeros {
  margin-top: clamp(3.5rem, 8vw, 6rem);
  border-top: 1px solid var(--linha-roxa);
}
.numero {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  align-items: baseline;
  gap: .4rem 2.5rem;
  padding-block: 1.45rem;
  border-bottom: 1px solid var(--linha-roxa);
}
.numero dt {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  color: #fff;
  font-size: clamp(2.5rem, 7vw, 4.2rem);
  font-weight: 560;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.num-unidade {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 440;
  font-size: .42em;
  color: rgba(255, 255, 255, .68);
  letter-spacing: 0;
}
.num-e {
  font-size: .3em;
  font-weight: 400;
  color: rgba(255, 255, 255, .5);
  margin-inline: .3rem;
}
.numero dd { font-size: .95rem; color: var(--branco-70); max-width: 26rem; }

.paineis { margin-top: clamp(2.5rem, 6vw, 4rem); }
.paineis-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .8rem;
}
.paineis-grade img {
  width: 100%;
  border-radius: var(--raio-img);
  border: 1px solid rgba(255, 255, 255, .15);
}
.paineis-legenda {
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .65);
  margin-top: 1.1rem;
}

/* ---------- Antes e depois ---------- */

.resultados-grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.resultado {
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio-card);
  padding: 1.9rem 1.75rem 1.4rem;
}
.resultado-segmento {
  font-family: var(--f-mono);
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--roxo);
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--linha);
}
.resultado-metrica { padding-block: 1.05rem; border-bottom: 1px solid var(--linha); }
.resultado-metrica:last-child { border-bottom: 0; }
.resultado-metrica dt {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(82, 82, 91, .9);
}
.resultado-metrica dd {
  margin-top: .45rem;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
}
.resultado-metrica s { color: var(--corpo); font-size: .95rem; }
.resultado-metrica .seta { color: rgba(82, 82, 91, .45); font-size: .9rem; }
.resultado-metrica strong {
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.1;
}
.resultado-feed strong { font-size: 1.02rem; letter-spacing: 0; }

.resultado-fotos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  padding-top: 1.2rem;
}
.resultado-fotos figure img { border-radius: var(--raio-img); border: 1px solid var(--linha); }
.resultado-fotos figcaption {
  font-family: var(--f-mono);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--corpo);
  margin-top: .5rem;
}

/* ---------- Portfólio ---------- */

.portfolio-grade { columns: 3; column-gap: 1rem; }
.portfolio-grade img {
  width: 100%;
  margin-bottom: 1rem;
  border-radius: var(--raio-img);
  border: 1px solid var(--linha);
  break-inside: avoid;
}

/* ---------- Por que a RVA ---------- */

#por-que .titulo, #depoimentos .titulo { margin-bottom: clamp(2.75rem, 6vw, 4.5rem); }

.porque-grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem 2rem;
}
.porque { border-top: 1px solid rgba(10, 10, 10, .25); padding-top: 1.3rem; }
.porque h3 {
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  line-height: 1.3;
}
.porque p { font-size: .92rem; margin-top: .55rem; line-height: 1.6; }

/* ---------- Depoimentos ---------- */

.depoimentos { border-top: 1px solid var(--linha); }
.depoimento {
  padding-block: clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid var(--linha);
}
.depoimento p {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 430;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--ink);
  max-width: 54rem;
  text-wrap: pretty;
}
.depoimento footer {
  font-family: var(--f-mono);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--corpo);
  margin-top: 1.3rem;
}

/* ---------- Apareça no digital ---------- */

.grid-contato {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.passos { margin-top: 2.6rem; border-top: 1px solid var(--linha-roxa); }
.passos li {
  display: flex;
  gap: 1.5rem;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--linha-roxa);
}
.passo-num {
  font-family: var(--f-mono);
  font-size: .75rem;
  color: rgba(255, 255, 255, .65);
  padding-top: .3rem;
  flex: none;
}
.passos h3 { color: #fff; font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
.passos li p { font-size: .95rem; margin-top: .3rem; max-width: 30rem; }

.contato-cta {
  margin-top: 2.6rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
}
.contato-micro {
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .65);
}

.foto-contato { padding-top: .5rem; }

@media (min-width: 56.3125rem) {
  .grid-contato { align-items: stretch; }
  .foto-contato { display: flex; }
  .foto-contato img { height: 100%; aspect-ratio: auto; }
}

/* ---------- Rodapé ---------- */

.rodape {
  background: var(--roxo);
  border-top: 1px solid var(--linha-roxa);
  color: var(--branco-70);
  padding-top: clamp(4rem, 8vw, 6rem);
}

.rodape-grade {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 3rem 4rem;
  align-items: start;
}

.rodape-marca img { width: 10.5rem; }

.rodape-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  gap: .55rem 2rem;
  font-size: .92rem;
}
.rodape-nav a { color: rgba(255, 255, 255, .75); transition: color .2s ease; }
.rodape-nav a:hover { color: #fff; }

.rodape-chamada {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 440;
  font-size: 1.35rem;
  color: #fff;
  margin-bottom: 1.4rem;
}

.rodape-botoes { display: flex; flex-wrap: wrap; gap: .6rem; }
.rodape-botoes .btn { padding: .7rem 1.2rem; font-size: .88rem; }
.rodape-botoes .btn svg { width: 1rem; height: 1rem; }

.rodape-base {
  margin-top: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid rgba(255, 255, 255, .13);
  padding-block: 1.6rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .65);
}

/* ---------- Botão flutuante ---------- */

.fab-wa {
  position: fixed;
  right: 1.15rem;
  bottom: 1.15rem;
  z-index: 30;
  width: 3.3rem;
  height: 3.3rem;
  border-radius: 50%;
  background: #fff;
  color: var(--roxo);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.fab-wa svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.fab-wa.visivel { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- Animações de entrada ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--d, 0s);
}
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Responsivo ---------- */

@media (max-width: 62.5rem) {
  .nav-desktop { display: none; }
  .menu-btn { display: flex; }
  .header-acoes { margin-left: auto; }

  .grid-como { grid-template-columns: 1fr; }
  .como-cabeca { position: static; }
  .como-cabeca .secao-intro { margin-top: 1rem; }

  .porque-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resultados-grade { grid-template-columns: 1fr; max-width: 30rem; }
  .portfolio-grade { columns: 2; }

  .rodape-grade { grid-template-columns: 1fr; gap: 2.75rem; }
}

@media (max-width: 56.25rem) {
  .grid-rva, .grid-origem, .grid-contato { grid-template-columns: 1fr; }

  .grid-rva .foto-moldura { order: 2; max-width: 26rem; }
  .foto-origem { max-width: 26rem; }
  .foto-contato { max-width: 26rem; padding-top: 0; }

  .secao-cabeca { grid-template-columns: 1fr; }
  .secao-intro { justify-self: start; }

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

  .numero { grid-template-columns: 1fr; }
  .numero dd { max-width: none; }

  .hero-base { flex-direction: column; gap: 0; border-top: 0; padding-block: 0; }
  .hero-base p { border-top: 1px solid var(--linha); padding-block: .85rem; }
}

@media (max-width: 40rem) {
  :root { --altura-header: 4rem; }

  .header-logo img { height: 1.65rem; }
  .btn-header span { display: none; }
  .btn-header { width: 2.75rem; height: 2.75rem; padding: 0; }
  .btn-header svg { width: 1.25rem; height: 1.25rem; }

  .hero-ctas .btn { width: 100%; }
  .contato-cta .btn { width: 100%; }

  .numero dt { flex-wrap: wrap; }

  .porque-grade { grid-template-columns: 1fr; gap: 1.9rem; }

  .rodape-base { flex-direction: column; gap: .3rem; }
}

/* ---------- Movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}